/* Nature's Lines — product content zone (Ф1 DRY_RUN, ?nlcz=1). Bodies/strings via
   nl_t_raw(). The layout below is authored against bare tokens (--gold etc.); the
   theme exposes them as --nl-*, so we bridge them scoped to .nl-cz (no global :root
   change). Values match header.css :root fallbacks. */
.nl-cz{
  --canvas:var(--nl-canvas,#ffffff);
  --surface:var(--nl-surface,#f7f5f1);
  --warm:var(--nl-warm,#faf7f2);
  --ink:var(--nl-ink,#222222);
  --sage:var(--nl-sage,#abc8bf);
  --gold:var(--nl-gold,#1c1c1c);
  --mute:var(--nl-mute,#6e6e6e);
  --line:var(--nl-line,#e6e3dc);
}

.nl-cz{padding:36px 0 0;margin-top:40px;border-top:1px solid var(--line)}
.nl-cz__row{display:flex;gap:24px;align-items:flex-start}
.nl-cz__main{flex:1;min-width:0}
.nl-cz__title{font-family:'Open Sans',sans-serif;font-weight: 300;font-size:26px;margin:0 0 16px;color:var(--ink)}
.nl-cz__desc{max-width:660px;font-size:14.5px;line-height:1.7;color:var(--mute)}
.nl-cz__desc p{margin:0 0 12px}

/* Ф2 wave2 — блок «Состав»: чипы цветов + всесезонный/сезонный состав, над описанием */
.nl-cz__sostav{max-width:660px;margin:0 0 22px}
.nl-cz__sostav-h{font-family:'Open Sans',sans-serif;font-weight:600;font-size:17px;margin:0 0 12px;color:var(--ink)}
.nl-cz__flchips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px}
/* nav wave 1: numbers aligned to the canonical .nl-chip spec (radius, border,
   height, paddings, hover). Background stays surface (content-card context). */
/* P1a: чип состава стал span, а не ссылкой (фасет цветка снят волной P1, вести было
   некуда). Оформление то же самое; убраны только подчёркивание ссылки, наведение и
   курсор руки, чтобы чип не притворялся кликабельным. */
.nl-cz__flchip{display:inline-flex;align-items:center;min-height:32px;padding:8px 14px;border-radius: 0;
  background:var(--surface);color:var(--ink);border:1.4px solid var(--line);text-decoration:none;
  cursor:default;font:600 12.5px/1 'Open Sans',sans-serif}
.nl-cz__sline{display:flex;flex-wrap:wrap;gap:4px 8px;margin:0 0 8px;font-size:13.5px;line-height:1.55}
.nl-cz__slabel{font-weight:700;color:var(--ink)}
.nl-cz__stext{color:var(--mute)}
.nl-cz__snote{margin:8px 0 0;font-size:12px;line-height:1.5;color:var(--sage);font-style:italic}
@media (max-width:767px){
  .nl-cz__sostav-h{font-size:15.5px}
  .nl-cz__sline{font-size:12.5px}
}

/* сетка блоков */
.nl-cz__grid{margin-top:32px;display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.nl-cz__block{border:1px solid var(--line);border-radius: 0;background:var(--canvas);overflow:hidden}
.nl-cz__block--gold{border-color:var(--gold)}
.nl-cz__head{width:100%;display:flex;align-items:center;gap:11px;padding:22px;background:none;border:none;text-align:left;cursor:default}
.nl-cz__ic{color:var(--sage);flex:0 0 auto;display:flex}
.nl-cz__block--gold .nl-cz__ic{color:var(--gold)}
.nl-cz__bt{flex:1;font-family:'Open Sans',sans-serif;font-size:16px;font-weight:600;color:var(--ink)}
.nl-cz__chev{display:none;font-size:10px;color:var(--mute);transition:transform .2s}
.nl-cz__body{padding:0 22px 22px;font-size:13px;line-height:1.58;color:var(--mute)}
.nl-cz__giftlink{display:inline-block;margin-top:8px;font-weight:700;color:var(--gold);text-decoration:none}

/* мини-карточка */
.nl-cz__aside{flex:0 0 270px;position:sticky;top:calc(var(--nl-header-h) + var(--nl-sticky-gap))}
.nl-cz__mini{border:1px solid var(--line);border-radius: 0;padding:18px;background:var(--warm)}
.nl-cz__mini-photo img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius: 0;display:block}
.nl-cz__mini-name{font-family:'Open Sans',sans-serif;font-size:15px;font-weight:600;line-height:1.25;margin-top:13px;color:var(--ink)}
/* L1a, п.87.1: вес 700 -> 400, цена в липкой мини-карточке. Кегль 17px, цвет акцента
   и tnum НЕ тронуты, значение токена тем более. */
.nl-cz__mini-price{font-size:17px;font-weight:400;color:var(--gold);margin-top:5px;font-feature-settings:'tnum'}
/* L1, п.87.3: липкая мини-карточка покупки на десктопе это ВТОРАЯ липкая кнопка на
   странице товара, и она прямо названа в границах части 6.4. Была чёрной плашкой,
   стала контурной, тем же видом, что основная кнопка и мобильная липкая в single.css.

   Почему её чуть не пропустили: этот лист работает на БЕЗПРЕФИКСНЫХ псевдонимах
   (var(--gold)), которые мостом сверху привязаны к --nl-gold. Поэтому в разведке Р4,
   искавшей по --nl-gold, она не нашлась. Значение токена по-прежнему не трогается.

   Тап-таргет: ЗАМЕРЕН и доведён. При padding 13px кнопка давала 41px (а до волны, без
   рамки, 39.5px), то есть требование части 6.3 «не меньше 44px» не выполнялось и
   раньше. Паддинг поднят 13 -> 15, высота стала 45.5px. Мини-карточка от этого выросла
   на 4px, больше в её раскладке не изменилось ничего. */
.nl-cz__mini-btn{display:block;width:100%;margin-top:14px;padding:15px;border:1px solid var(--ink);border-radius: 0;background:transparent;color:var(--ink);font:700 13.5px/1 'Open Sans',sans-serif;cursor:pointer;transition:background-color .15s ease}
.nl-cz__mini-btn:hover{background:var(--line)}
.nl-cz__mini-btn:disabled,.nl-cz__mini-btn.disabled{border-color:var(--line);color:var(--mute);background:transparent;cursor:not-allowed}
.nl-cz__mini-warn{margin-top:10px;padding:9px 11px;border-radius: 0;background:#fbeee0;border:1px solid var(--gold);font-size:11.5px;color:#8a6a26;font-weight:600}
.nl-cz-glow{box-shadow:0 0 0 3px rgba(28, 28, 28, .16);border-radius: 0}

/* планшет */
@media (max-width:1024px){
  .nl-cz__aside{flex-basis:240px}
}

/* мобильный: аккордеон, одна колонка, мини-карточка скрыта */
@media (max-width:767px){
  .nl-cz__row{flex-direction:column}
  .nl-cz__aside{display:none}
  .nl-cz__title{font-size:21px}
  .nl-cz__desc{font-size:13px;line-height:1.62}
  .nl-cz__grid{grid-template-columns:1fr;gap:8px;margin-top:24px}
  .nl-cz__head{padding:13px 14px;cursor:pointer}
  .nl-cz__ic svg{width:20px;height:20px}
  .nl-cz__bt{font-family:'Open Sans',sans-serif;font-size:13.5px}
  .nl-cz__chev{display:block}
  .nl-cz__body{padding:0 14px 14px 45px;font-size:12.5px;line-height:1.55;display:none}
  .nl-cz__block.is-open .nl-cz__body{display:block}
  .nl-cz__block.is-open .nl-cz__chev{transform:rotate(180deg)}
}
