/* =====================================================================
   mos-wood.ru – базовый слой (v2)
   Написан MOBILE-FIRST: значения по умолчанию – телефон, десктоп
   надстраивается через min-width. Ни одного max-width-медиазапроса
   в этом файле, кроме печати и prefers-*.

   Дизайн-язык прежний: «острова» (белые карточки на светлом фоне),
   зелёный CTA, тёплый древесный акцент, Lora + Manrope, мягкие тени.
   Новое: шкала вертикального ритма, тональные подложки секций,
   тёмная древесная поверхность, система изображений .pic.
   ===================================================================== */

/* ---------- 1. ТОКЕНЫ ------------------------------------------------ */
:root{
  --font-display:'Lora', Georgia, serif;
  --font-ui:'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* поверхности */
  --bg:#f7f7f9;
  --bg-2:#eef0ee;
  --surface:#ffffff;
  --surface-2:#fbfbfc;
  --warm:#f6efe2;          /* тёплая подложка секции (расширение шкалы) */
  --warm-2:#efe3cd;
  --ink:#191c18;           /* тёмная древесная поверхность */
  --ink-2:#232720;
  --ink-3:#31362d;
  --on-ink:#e9e7e0;
  --on-ink-2:#a9a89f;

  /* текст. Вся шкала выдерживает 4.5:1 на белом и на --bg: третий и
     четвёртый уровни специально темнее «обычного» серого – иерархию
     здесь держат размер и насыщенность, а не осветление до нечитаемого. */
  --text:#1a1a1a;      /* 16.1:1 */
  --text-2:#5c5c62;    /* 6.6:1  */
  --text-3:#67676f;    /* 5.4:1  */
  --text-4:#6f6f79;    /* 5.0:1  */

  /* зелёный (основной CTA) */
  --green:#4a7c3f;
  --green-600:#3f6b35;
  --green-700:#34592c;
  --green-800:#27441f;
  --green-soft:#ebf2e6;

  /* тёплый древесный (вторичный акцент) */
  --wood:#b9863e;
  --wood-600:#a0712f;
  --wood-700:#7d571f;
  --wood-soft:#f4ebd9;
  --bark:#6b4a24;

  /* служебные */
  --red:#d02f2f;       /* 4.9:1 на белом – цена со скидкой и ошибки */
  --red-700:#a82323;   /* для текста на светло-красной подложке */
  --red-200:#f3bcbc;   /* рамка красных кнопок: «Отложить» в карточке товара */
  --red-soft:#fdeaea;
  --star:#e09600;
  --blue:#2f6fb0;

  --border:#e8e8ec;
  --border-2:#dcdce2;
  --border-3:#c9c9d2;
  --ring:rgba(74,124,63,.38);

  /* скругления */
  --r-xs:8px; --r-sm:10px; --r:14px; --r-lg:20px; --r-xl:26px; --r-pill:999px;

  /* тени */
  --shadow-xs:0 1px 3px rgba(20,20,30,.05);
  --shadow-sm:0 2px 12px rgba(20,20,30,.06);
  --shadow:0 4px 24px rgba(20,20,30,.08);
  --shadow-lg:0 18px 48px -18px rgba(20,20,30,.22);

  /* ритм: одна шкала на весь проект */
  --sp-1:4px;  --sp-2:8px;  --sp-3:12px; --sp-4:16px; --sp-5:20px;
  --sp-6:24px; --sp-7:32px; --sp-8:40px; --sp-9:56px; --sp-10:72px;

  --container:1320px;
  --gutter:16px;
  --topbar-h:0px;          /* на мобильном топбар свёрнут */
  --header-h:56px;         /* одна строка ≤56px */
  --search-h:52px;         /* вторая строка шапки (поиск) на мобильном */
  --tap:44px;              /* минимальная тап-зона */

  --z-header:70; --z-overlay:60; --z-mega:90; --z-bar:95; --z-drawer:120; --z-modal:200;
}

@media (min-width:768px){ :root{ --gutter:24px } }
@media (min-width:1024px){
  :root{ --gutter:28px; --topbar-h:40px; --header-h:76px; --search-h:0px }
}

/* ---------- 2. БАЗА -------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
/* атрибут hidden должен побеждать любой display из компонентов:
   на нём держатся состояния «пусто / ошибка / загрузка» */
[hidden]{display:none!important}
html{
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--header-h) + 16px);
  -webkit-text-size-adjust:100%;
}
body{
  margin:0;font-family:var(--font-ui);font-size:16px;line-height:1.6;
  color:var(--text);background:var(--bg);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
::selection{background:var(--green);color:#fff}
img,svg,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,textarea,select{font:inherit;color:inherit}
ul,ol{margin:0;padding:0;list-style:none}
p{margin:0}
figure{margin:0}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;line-height:1.14;margin:0;letter-spacing:-.012em}
h1{font-size:clamp(28px,7vw,52px);line-height:1.06}
h2{font-size:clamp(23px,4.4vw,36px)}
h3{font-size:clamp(17px,2.4vw,21px)}
.tnum{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;padding:0;margin:-1px}
:focus-visible{outline:3px solid var(--ring);outline-offset:2px;border-radius:4px}

.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}

/* ---------- 3. РИТМ И ТОНАЛЬНЫЕ ПОДЛОЖКИ ----------------------------- */
/* Одна шкала вертикальных отступов. Плотность секции выбирается
   модификатором, а не разовым style="padding-top:0". */
.section{padding-block:clamp(36px,7vw,72px)}
.section--tight{padding-block:clamp(22px,4.5vw,44px)}
.section--roomy{padding-block:clamp(48px,9vw,104px)}
.section--flush{padding-block:0 clamp(22px,4.5vw,44px)}
/* Прижимать CTA-полосу к предыдущей секции можно, только когда фон под ними один.
   После тональной подложки фон меняется ровно по верхней кромке полосы – возвращаем
   отступ, но по плотной шкале: полоса закрывает страницу, ей не нужен полный ритм. */
.section--surface + .section--flush,
.section--warm + .section--flush,
.section--ink + .section--flush{padding-top:clamp(22px,4.5vw,44px)}
.section--top{padding-block:clamp(20px,4vw,36px) clamp(36px,7vw,72px)}

.section--surface{background:var(--surface)}
.section--warm{background:var(--warm)}
.section--ink{background:var(--ink);color:var(--on-ink)}
.section--ink h1,.section--ink h2,.section--ink h3{color:#fff}
.section--ink .sec-sub,.section--ink p{color:var(--on-ink-2)}
.section--ink .eyebrow{color:var(--wood)}
.section--ink .eyebrow::before{background:var(--wood)}
/* текстовые блоки внутри тёмной секции: перекрашиваем целиком, иначе
   .prose приходит со светлой темы и падает до 2,6:1 */
.section--ink .prose{color:var(--on-ink-2)}
.section--ink .prose strong,.section--ink .prose b{color:#fff}
.section--ink .prose a{color:#bcd6b1}
.section--ink .prose li::marker{color:var(--wood)}
.section--ink .prose blockquote{background:rgba(255,255,255,.07);color:var(--on-ink);border-left-color:var(--wood)}

/* шапка секции */
.eyebrow{display:inline-flex;align-items:center;gap:9px;font-weight:700;font-size:12px;
  letter-spacing:.15em;text-transform:uppercase;color:var(--green-700)}
.eyebrow::before{content:"";width:20px;height:2px;border-radius:2px;background:var(--green);flex:none}
.sec-head{display:flex;flex-direction:column;gap:var(--sp-3);margin-bottom:var(--sp-6)}
.sec-head h2{margin-top:var(--sp-2)}
.sec-sub{color:var(--text-2);font-size:15px;margin-top:var(--sp-2);max-width:62ch}
.sec-link{display:inline-flex;align-items:center;gap:8px;min-height:var(--tap);
  font-weight:700;font-size:14px;color:var(--green)}
.sec-link svg{width:16px;height:16px;transition:transform .2s}
.sec-link:hover svg{transform:translateX(3px)}
@media (min-width:768px){
  .sec-head{flex-direction:row;align-items:flex-end;justify-content:space-between;gap:var(--sp-6);margin-bottom:var(--sp-7)}
}

/* ---------- 4. ИЗОБРАЖЕНИЯ ------------------------------------------- */
/* .pic – контейнер под <picture>. Пока фото не загружено (или ещё не
   снято), видна древесная заливка соответствующего тона: макет не
   «проваливается» в пустой прямоугольник. */
.pic{position:relative;display:block;overflow:hidden;background:#d8bd93;isolation:isolate}
.pic img{width:100%;height:100%;object-fit:cover}
.pic--pine{background:linear-gradient(180deg,#ecd6ab,#ddc093 48%,#cfac74)}
.pic--larch{background:linear-gradient(180deg,#e9c187,#d9a766 52%,#c68d49)}
.pic--oak{background:linear-gradient(180deg,#ddb27c,#c99756 52%,#b27e3e)}
.pic--walnut{background:linear-gradient(180deg,#9a6a45,#73492c 56%,#5b3920)}
.pic--ash{background:linear-gradient(180deg,#efe6d2,#e4d6bb 52%,#d8c6a3)}
/* затемняющая шторка для картинок, поверх которых лежит белый текст */
.pic--scrim::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(16,20,14,.10) 30%,rgba(16,20,14,.78))}

/* декоративная процедурная текстура (остаётся для мест без фотослота) */
.wood{position:relative;overflow:hidden;background:linear-gradient(180deg,#e4c79c,#d3ad7a 50%,#c79a64)}
.w-pine{background:linear-gradient(180deg,#ecd6ab,#ddc093 48%,#cfac74)}
.w-larch{background:linear-gradient(180deg,#e9c187,#d9a766 52%,#c68d49)}
.w-oak{background:linear-gradient(180deg,#ddb27c,#c99756 52%,#b27e3e)}
.w-walnut{background:linear-gradient(180deg,#9a6a45,#73492c 56%,#5b3920)}
.w-ash{background:linear-gradient(180deg,#efe6d2,#e4d6bb 52%,#d8c6a3)}

/* ---------- 5. КНОПКИ ------------------------------------------------ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:var(--tap);padding:0 20px;border-radius:var(--r);
  font-weight:700;font-size:15px;line-height:1.2;text-align:center;
  transition:background .2s,color .2s,border-color .2s,box-shadow .2s,transform .12s}
.btn svg{width:18px;height:18px;flex:none}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--green);color:#fff;box-shadow:0 8px 18px -12px var(--green)}
.btn-primary:hover{background:var(--green-600)}
.btn-wood{background:var(--wood);color:#fff;box-shadow:0 8px 18px -12px var(--wood)}
.btn-wood:hover{background:var(--wood-600)}
.btn-ghost{background:var(--surface);color:var(--text);border:1.5px solid var(--border-2)}
.btn-ghost:hover{border-color:var(--green);color:var(--green-700)}
.btn-soft{background:var(--green-soft);color:var(--green-800)}
.btn-soft:hover{background:#e0ecd9}
.btn-light{background:#fff;color:var(--green-800)}
.btn-light:hover{background:#f1f1ee}
.btn-lg{min-height:52px;padding:0 26px;font-size:16px}
.btn-block{width:100%}
.btn-icon{width:var(--tap);padding:0;flex:none;background:var(--surface);border:1.5px solid var(--border-2);color:var(--text-2)}
.btn-icon:hover{border-color:var(--green);color:var(--green)}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.5;pointer-events:none}
.link-more{display:inline-flex;align-items:center;gap:6px;min-height:var(--tap);
  font-weight:700;font-size:14px;color:var(--green)}
.link-more svg{width:15px;height:15px}

/* ---------- 6. TOPBAR (только десктоп) ------------------------------- */
.topbar{display:none}
@media (min-width:1024px){
  .topbar{display:block;height:var(--topbar-h);background:var(--surface);border-bottom:1px solid var(--border);
    font-size:13px;color:var(--text-2)}
  .topbar .container{display:flex;align-items:center;gap:var(--sp-6);height:100%}
  .tb-geo{display:inline-flex;align-items:center;gap:7px;color:var(--text);font-weight:600;flex:none}
  .tb-geo svg{width:15px;height:15px;color:var(--green)}
  .tb-links{display:flex;gap:var(--sp-6)}
  .tb-links a{display:inline-flex;align-items:center;height:var(--topbar-h)}
  .tb-links a:hover{color:var(--green)}
  .tb-phone{margin-left:auto;font-weight:700;color:var(--text)}
}

/* ---------- 7. HEADER ------------------------------------------------ */
.header{position:sticky;top:0;z-index:var(--z-header);background:var(--surface);
  border-bottom:1px solid var(--border);transition:box-shadow .25s}
.header.is-scrolled{box-shadow:var(--shadow-sm)}
/* мобильная шапка: строка 1 – логотип, иконки и бургер справа от корзины; строка 2 – поиск */
/* минус 1px – толщина нижней границы: --header-h задаёт ПОЛНУЮ высоту шапки */
.header-bar{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;
  column-gap:var(--sp-3);min-height:calc(var(--header-h) - 1px)}
.brand{grid-column:1;grid-row:1}
.header-tools{grid-column:2;grid-row:1}
.search{grid-column:1/-1;grid-row:2}

.brand{display:flex;align-items:center;gap:10px;min-width:0}
.brand-mark{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;flex:none;overflow:hidden;
  box-shadow:0 8px 16px -10px var(--green)}
.brand-mark img{width:100%;height:100%;display:block;object-fit:cover}
.brand-text{display:flex;flex-direction:column;min-width:0}
.brand-name{font-family:var(--font-display);font-weight:700;font-size:18px;line-height:1.05;white-space:nowrap}
.brand-sub{font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--text-3);font-weight:700;margin-top:3px;white-space:nowrap}

.catalog-btn{display:none}
.header-tools{display:flex;align-items:center;gap:2px;justify-self:end}
.icon-btn{width:var(--tap);height:var(--tap);border-radius:12px;display:grid;place-items:center;flex:none;
  position:relative;color:var(--text-2);transition:background .2s,color .2s}
.icon-btn:hover{background:var(--green-soft);color:var(--green)}
.icon-btn svg{width:22px;height:22px}
.badge-count{position:absolute;top:3px;right:2px;min-width:18px;height:18px;padding:0 5px;border-radius:var(--r-pill);
  background:var(--green);color:#fff;font-size:10.5px;font-weight:800;display:grid;place-items:center;
  border:2px solid var(--surface);font-variant-numeric:tabular-nums}
.badge-count--wood{background:var(--wood-700)}
.h-phone{display:none}
.tool-hide{display:none}

/* поиск: на мобильном – вторая строка шапки */
.search{position:relative;padding-bottom:10px;
  max-height:var(--search-h);opacity:1;transition:max-height .25s ease,opacity .2s ease,padding .25s ease}
.search-field{display:flex;align-items:center;gap:8px;height:44px;padding-left:12px;padding-right:4px;
  border-radius:var(--r);background:var(--surface-2);border:1.5px solid var(--border-2);
  transition:border-color .2s,box-shadow .2s}
.search-field:focus-within{border-color:var(--green);box-shadow:0 0 0 4px var(--ring);background:#fff}
.search-ico{display:grid;place-items:center;color:var(--text-3);flex:none}
.search-ico svg{width:19px;height:19px}
.search-field input{flex:1;min-width:0;border:0;background:none;outline:none;font-size:16px}
.search-field input::placeholder{color:var(--text-3)}
.search-go{min-height:36px;padding:0 14px;border-radius:10px;font-size:14px}
/* сжатая шапка: при прокрутке вниз строка поиска сворачивается */
.header.is-compact .search{max-height:0;opacity:0;padding-bottom:0;overflow:hidden}
.header.is-compact.is-search-open .search{max-height:var(--search-h);opacity:1;padding-bottom:10px}
.search-toggle{display:grid}
.header.is-search-open .search-toggle{background:var(--green-soft);color:var(--green)}

.suggest{position:absolute;top:calc(100% - 2px);left:0;right:0;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);
  padding:6px;display:none;z-index:30;max-height:min(60vh,420px);overflow:auto}
.suggest.is-open{display:block}
.suggest .s-cat{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3);font-weight:700;padding:10px 12px 6px}
.s-item{display:flex;align-items:center;gap:12px;padding:8px 10px;border-radius:var(--r);cursor:pointer;min-height:var(--tap)}
.s-item:hover,.s-item.is-active{background:var(--green-soft)}
.has-suggest{position:relative}
.suggest--addr .s-item{display:block;padding:9px 12px}
.suggest--addr .s-addr{display:block;font-size:14px;line-height:1.35}
.suggest--addr .s-sub{display:block;font-size:12px;color:var(--text-3);margin-top:2px}
.suggest--addr .s-empty{padding:10px 12px;font-size:13px;color:var(--text-3)}
.km-note--ok{color:var(--green)}
.km-note--warn{color:var(--red)}
.s-thumb{width:44px;height:44px;border-radius:10px;flex:none}
.s-name{font-weight:600;font-size:14.5px;display:block}
.s-meta{display:block;font-size:12.5px;color:var(--text-2)}
.s-price{margin-left:auto;font-weight:800;font-size:14.5px;white-space:nowrap}
.s-empty{padding:20px 14px;text-align:center;color:var(--text-2);font-size:14px}

@media (min-width:1024px){
  .header-bar{grid-template-columns:auto auto minmax(0,1fr) auto;column-gap:var(--sp-5)}
  .burger{display:none}
  .brand{grid-column:1}
  .catalog-btn{grid-column:2;grid-row:1}
  .search{grid-column:3;grid-row:1}
  .header-tools{grid-column:4;grid-row:1}
  .brand-mark{width:48px;height:48px}
  .brand-name{font-size:21px}
  .brand-sub{font-size:10.5px}
  .catalog-btn{display:inline-flex;align-items:center;gap:10px;height:48px;padding:0 20px;border-radius:var(--r);
    background:var(--green);color:#fff;font-weight:700;font-size:15px;flex:none;transition:background .2s}
  .catalog-btn:hover{background:var(--green-600)}
  .catalog-btn .bars{display:grid;gap:3.5px}
  .catalog-btn .bars span{display:block;width:18px;height:2px;border-radius:2px;background:#fff;transition:.25s}
  .catalog-btn[aria-expanded="true"] .bars span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
  .catalog-btn[aria-expanded="true"] .bars span:nth-child(2){opacity:0}
  .catalog-btn[aria-expanded="true"] .bars span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}
  .search{grid-column:auto;padding-bottom:0;max-height:none}
  .search-field{height:48px}
  .search-go{min-height:38px;padding:0 16px}
  .search-toggle{display:none}
  .tool-hide{display:grid}
  .h-phone{display:flex;flex-direction:column;line-height:1.16;text-align:right;margin-right:10px}
  .h-phone b{font-size:16px;font-weight:800}
  .h-phone span{font-size:11px;color:var(--text-3);font-weight:600}
  .header.is-compact .search{max-height:none;opacity:1;overflow:visible}
}

/* ---------- 8. MEGA-МЕНЮ (только десктоп) ---------------------------- */
.mega{display:none}
.overlay{position:fixed;inset:0;background:rgba(18,22,18,.42);backdrop-filter:blur(2px);
  opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s;z-index:var(--z-overlay)}
.overlay.is-open{opacity:1;visibility:visible}
@media (min-width:1024px){
  .mega{display:block;position:absolute;top:100%;left:0;right:0;z-index:var(--z-mega);
    background:var(--surface);border-top:1px solid var(--border);box-shadow:var(--shadow-lg);
    border-radius:0 0 var(--r-xl) var(--r-xl);
    opacity:0;visibility:hidden;transform:translateY(-10px);
    transition:opacity .25s ease,transform .25s ease,visibility .25s}
  .mega.is-open{opacity:1;visibility:visible;transform:none}
  /* по высоте – не выше экрана: внутри прокрутка, акция прилипает сверху и не растягивается */
  .mega-inner{display:grid;grid-template-columns:1fr 300px;gap:var(--sp-7);padding-block:var(--sp-6) var(--sp-7);align-items:start;
    max-height:calc(100vh - var(--topbar-h) - var(--header-h) - 12px);overflow-y:auto;overscroll-behavior:contain}
  .mega-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-5) var(--sp-7)}
  @media (min-width:1280px){ .mega-cols{grid-template-columns:repeat(4,1fr)} }
  .mega-col-h{font-family:var(--font-ui);font-size:15px;font-weight:800;margin-bottom:var(--sp-2)}
  .mega-col-h a:hover{color:var(--green)}
  .mega-col li a{display:flex;align-items:center;justify-content:space-between;gap:10px;
    padding:7px 10px;border-radius:9px;font-size:14px;color:var(--text-2);transition:.15s}
  .mega-col li a:hover{background:var(--green-soft);color:var(--green-800)}
  .mega-cnt{color:var(--text-4);font-size:12px;font-weight:700}
  .mega-promo{position:relative;border-radius:var(--r-lg);overflow:hidden;display:flex;
    flex-direction:column;justify-content:flex-end;min-height:290px;padding:22px;color:#fff;
    position:sticky;top:0;aspect-ratio:3/4;max-height:460px}
  .mega-promo-media{position:absolute;inset:0;aspect-ratio:auto!important}
  .mega-promo-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,30,16,.15),rgba(20,30,16,.8))}
  .mega-promo-body{position:relative;z-index:2;display:flex;flex-direction:column;align-items:flex-start;gap:8px}
  .mega-promo-tag{display:inline-block;padding:5px 12px;border-radius:var(--r-pill);background:var(--wood);
    font-size:12px;font-weight:800}
  .mega-promo-h{font-family:var(--font-display);font-size:22px;font-weight:600}
  .mega-promo-p{font-size:13.5px;color:rgba(255,255,255,.85)}
  .mega-promo .btn{margin-top:6px}
}

/* ---------- 9. МОБИЛЬНОЕ МЕНЮ ---------------------------------------- */
.drawer{position:fixed;inset:0;z-index:var(--z-drawer);visibility:hidden}
.drawer.is-open{visibility:visible}
.drawer .scrim{position:absolute;inset:0;background:rgba(18,22,18,.55);opacity:0;transition:opacity .3s}
.drawer.is-open .scrim{opacity:1}
.drawer-panel{position:absolute;top:0;right:0;bottom:0;width:min(360px,90vw);background:var(--surface);
  box-shadow:var(--shadow-lg);padding:var(--sp-4) var(--sp-4) calc(var(--sp-6) + env(safe-area-inset-bottom));
  display:flex;flex-direction:column;gap:2px;overflow-y:auto;overscroll-behavior:contain;
  transform:translateX(100%);transition:transform .3s cubic-bezier(.4,0,.2,1)}
.drawer--cat .drawer-panel{right:auto;left:0;transform:translateX(-100%)}
.drawer.is-open .drawer-panel{transform:none}
.drawer-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--sp-3)}
.drawer-title{font-family:var(--font-display);font-size:20px;font-weight:600}
.x-btn{background:var(--bg-2);border-radius:12px}
.drawer-phone{display:flex;align-items:center;gap:12px;min-height:56px;padding:0 14px;border-radius:var(--r);
  background:var(--green-soft);color:var(--green-800);margin-bottom:var(--sp-3)}
.drawer-phone svg{width:22px;height:22px;flex:none}
.drawer-phone b{display:block;font-size:16px}
.drawer-phone small{display:block;font-size:12px;color:var(--green-700);opacity:.8}
.drawer-head{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3);font-weight:800;
  padding:var(--sp-4) 14px var(--sp-2);margin-top:var(--sp-2);border-top:1px solid var(--border)}
.drawer-list a{display:flex;align-items:center;justify-content:space-between;gap:10px;
  min-height:var(--tap);padding:0 14px;border-radius:11px;font-weight:600;font-size:16px}
.drawer-list a:hover{background:var(--green-soft);color:var(--green-800)}
.drawer-list .tnum{color:var(--text-4);font-size:13px;font-weight:700}

/* ---------- 10. КАРТОЧКА ТОВАРА -------------------------------------- */
/* Решение для узких экранов: в СЕТКЕ каталога карточка становится
   горизонтальной (фото слева, данные справа) – так читаются сечение,
   сорт и цена. В ЛЕНТАХ карточка остаётся вертикальной и скроллится
   по горизонтали с видимым «хвостом» следующей. */
.prod{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--shadow-xs);
  transition:transform .2s,box-shadow .2s,border-color .2s}
.prod:hover{box-shadow:var(--shadow);border-color:transparent}
.prod-media{position:relative}
.prod-media .pic{width:100%}
.prod-link{position:absolute;inset:0;z-index:2}
.prod-badges{position:absolute;top:8px;left:8px;z-index:3;display:flex;flex-direction:column;gap:5px;align-items:flex-start}
.badge{padding:4px 8px;border-radius:var(--r-xs);font-size:11px;font-weight:800;line-height:1.1;color:#fff;letter-spacing:.01em}
.badge--sale{background:var(--red)}
.badge--new{background:var(--green)}
.badge--hit{background:var(--wood-700)}
.prod-fav{position:absolute;top:6px;right:6px;z-index:3;width:var(--tap);height:var(--tap);border-radius:12px;
  display:grid;place-items:center;color:var(--text-2);background:rgba(255,255,255,.92);box-shadow:var(--shadow-xs);transition:.2s}
.prod-fav svg{width:19px;height:19px}
.prod-fav:hover,.prod-fav.is-active{color:var(--red)}
.prod-fav.is-active svg{fill:currentColor}
/* «Сравнить» – рядом с сердцем над фото, чтобы в ряду действий осталось две кнопки и «В корзину» не переносилась */
.prod-media .prod-cmp{right:calc(var(--tap) + 12px)}
.prod-media .prod-cmp:hover,.prod-media .prod-cmp.is-active{color:var(--green)}
.prod-media .prod-cmp.is-active{background:var(--green-soft);box-shadow:inset 0 0 0 1.5px var(--green)}
.prod-media .prod-cmp.is-active svg{fill:none}
/* фото карточки – всегда 4:3, иначе картинки разной пропорции ломают уровень названий */
.prod-media .pic{aspect-ratio:4/3}
.prod-body{padding:var(--sp-3);display:flex;flex-direction:column;flex:1;min-width:0}
.prod-rate{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--text-3);margin-bottom:6px;min-height:17px}
.stars{display:inline-flex;gap:1px;color:var(--star)}
.stars svg{width:14px;height:14px;fill:currentColor}
.stars svg.off{fill:#d8d8de}
.prod-rate-n{font-weight:700;color:var(--text-2)}
/* две строки зарезервированы всегда: и высота карточек в сетке не пляшет,
   и тап-зона названия не схлопывается до высоты одной строки */
.prod-name{font-weight:600;font-size:15px;line-height:1.32;color:var(--text);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  min-height:2.64em;padding-block:2px}
.prod-name:hover{color:var(--green)}
/* две строки характеристик зарезервированы: «Сечение» + «Сорт», у кого сорта нет – пустая строка, уровень цен не пляшет */
.prod-spec{display:grid;grid-template-columns:auto 1fr;gap:2px var(--sp-2);margin:var(--sp-2) 0 0;font-size:12.5px;line-height:1.45;min-height:calc(2 * 1.45em + 2px)}
.prod-spec dt{color:var(--text-3)}
.prod-spec dd{margin:0;color:var(--text-2);font-weight:600}
/* цена и наличие – всегда две строки: карточки в сетке заканчиваются
   на одной высоте, кнопки выстраиваются в ряд */
.prod-foot{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;gap:3px;
  margin-top:auto;padding-top:var(--sp-3);min-height:calc(var(--sp-3) + 66px)} /* цена + строка «≈ за штуку» + наличие */
.prod-price{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.prod-now{font-weight:800;font-size:19px;letter-spacing:-.01em}
.prod-now.is-sale{color:var(--red)}
.prod-unit{font-size:12.5px;color:var(--text-3);font-weight:600}
.prod-old{font-size:13px;color:var(--text-4);text-decoration:line-through}
.prod-stock{font-size:12px;font-weight:700;white-space:nowrap}
.prod-stock--in{color:var(--green-700)}
.prod-stock--order{color:var(--wood-700)}
.prod-stock--out{color:var(--text-4)}
.prod-actions{display:flex;gap:var(--sp-2);margin-top:var(--sp-3)}
.prod-actions .add-cart{flex:1;min-height:var(--tap);font-size:14px;padding-inline:12px}
.add-cart.is-added{background:var(--green-700)}
.prod-cmp.is-active{border-color:var(--green);color:var(--green);background:var(--green-soft)}

/* сетка: 1 колонка + горизонтальная карточка на телефоне */
.prod-grid{display:grid;grid-template-columns:1fr;gap:var(--sp-3)}
.prod-grid>.prod{display:grid;grid-template-columns:118px 1fr;align-items:stretch}
.prod-grid>.prod .prod-media{height:100%}
.prod-grid>.prod .pic{height:100%;aspect-ratio:auto!important}
.prod-grid>.prod .prod-fav{width:38px;height:38px;top:4px;right:4px}
.prod-grid>.prod .prod-media .prod-cmp{right:4px;top:46px}
.prod-grid>.prod .prod-badges{top:6px;left:6px;max-width:calc(100% - 50px)}
.prod-grid>.prod .prod-name{-webkit-line-clamp:2}
@media (min-width:560px){
  .prod-grid{grid-template-columns:repeat(2,1fr);gap:var(--sp-4)}
  .prod-grid>.prod{display:flex}
  .prod-grid>.prod .pic{aspect-ratio:4/3!important}
  .prod-grid>.prod .prod-fav{width:var(--tap);height:var(--tap);top:6px;right:6px}
  .prod-grid>.prod .prod-media .prod-cmp{right:calc(var(--tap) + 12px);top:6px} /* сброс top:46px узкой карточки: кнопки снова в ряд */
}
@media (min-width:900px){ .prod-grid{grid-template-columns:repeat(3,1fr)} }
@media (min-width:1280px){
  .prod-grid{grid-template-columns:repeat(4,1fr);gap:var(--sp-5)}
  .prod-grid--3{grid-template-columns:repeat(3,1fr)}
  .prod-body{padding:var(--sp-4)}
}

/* ---------- 11. ЛЕНТА С ГОРИЗОНТАЛЬНЫМ СКРОЛЛОМ ---------------------- */
.lane{position:relative}
.lane-track{display:grid;grid-auto-flow:column;grid-auto-columns:76%;gap:var(--sp-3);
  overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);
  padding:4px calc(var(--gutter)) 14px;margin-inline:calc(var(--gutter) * -1);
  scrollbar-width:none;-ms-overflow-style:none;overscroll-behavior-x:contain}
.lane-track::-webkit-scrollbar{display:none}
.lane-track>*{scroll-snap-align:start}
.lane-arrow{display:none}
@media (min-width:560px){ .lane-track{grid-auto-columns:46%} }
@media (min-width:900px){ .lane-track{grid-auto-columns:31%} }
@media (min-width:1024px){
  .lane-track{grid-auto-columns:calc((100% - 3 * var(--sp-5)) / 4);gap:var(--sp-5);
    padding-inline:2px;margin-inline:0;scroll-padding-inline:0}
  .lane-arrow{display:grid;position:absolute;top:34%;z-index:5;width:46px;height:46px;border-radius:50%;
    background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow);
    place-items:center;color:var(--text);transition:.2s}
  .lane-arrow:hover{background:var(--green);color:#fff;border-color:var(--green)}
  .lane-arrow svg{width:22px;height:22px}
  .lane-arrow--prev{left:-26px}
  .lane-arrow--next{right:-26px}
  .lane-arrow[disabled]{opacity:0;pointer-events:none}
}
@media (min-width:1280px){ .lane-track{grid-auto-columns:calc((100% - 4 * var(--sp-5)) / 5)} }

/* ---------- 12. БЕНТО-СЕТКА КАТЕГОРИЙ -------------------------------- */
.bento{display:grid;grid-template-columns:1fr;gap:var(--sp-3)}
.bento-card{position:relative;display:flex;flex-direction:column;justify-content:flex-end;
  min-height:180px;border-radius:var(--r-lg);overflow:hidden;color:#fff;
  padding:var(--sp-4);box-shadow:var(--shadow-xs);transition:transform .22s,box-shadow .22s}
.bento-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.bento-media{position:absolute;inset:0;aspect-ratio:auto!important}
.bento-media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(16,20,14,.12) 25%,rgba(16,20,14,.82))}
.bento-body{position:relative;z-index:2;display:flex;flex-direction:column;gap:5px;padding-right:52px}
.bento-name{font-family:var(--font-display);font-size:22px;font-weight:600;line-height:1.1}
.bento-lead{font-size:13.5px;color:rgba(255,255,255,.8);display:none}
.bento-meta{font-size:13px;color:rgba(255,255,255,.9)}
.bento-meta b{font-size:15px;color:#fff}
.bento-go{position:absolute;z-index:2;right:14px;bottom:14px;width:38px;height:38px;border-radius:50%;
  display:grid;place-items:center;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.3);
  transition:.2s}
.bento-go svg{width:17px;height:17px;color:#fff}
.bento-card:hover .bento-go{background:#fff}
.bento-card:hover .bento-go svg{color:var(--green-800)}
@media (min-width:560px){
  .bento{grid-template-columns:repeat(2,1fr);gap:var(--sp-4)}
  .bento-card{min-height:210px}
}
@media (min-width:1024px){
  /* асимметрия: две ведущие категории занимают крупные плитки */
  .bento{grid-template-columns:repeat(4,1fr);grid-auto-rows:190px}
  .bento-card--lg{grid-column:span 2;grid-row:span 2;padding:var(--sp-6)}
  .bento-card--lg .bento-name{font-size:30px}
  .bento-card--lg .bento-lead{display:block}
  .bento-card{min-height:0}
}

/* ---------- 13. ПЛИТКИ «ПОД ЗАДАЧУ» ---------------------------------- */
.tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--sp-3)}
.tile{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;
  padding:var(--sp-4) var(--sp-3);min-height:var(--tap);
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-xs);
  transition:transform .2s,box-shadow .2s,border-color .2s}
.tile:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:transparent}
.tile-ico{width:48px;height:48px;border-radius:15px;display:grid;place-items:center;
  background:var(--green-soft);color:var(--green-700);transition:.2s}
.tile:hover .tile-ico{background:var(--green);color:#fff}
.tile-ico svg{width:26px;height:26px}
.tile-name{font-weight:700;font-size:14.5px}
.tile-sub{font-size:12px;color:var(--text-3);line-height:1.35}
@media (min-width:768px){ .tiles{grid-template-columns:repeat(3,1fr);gap:var(--sp-4)} }
@media (min-width:1024px){ .tiles{grid-template-columns:repeat(6,1fr)} }

/* ---------- 14. ЦИФРЫ ДОВЕРИЯ ---------------------------------------- */
.trust{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--sp-3) var(--sp-4)}
.trust-item{display:flex;flex-direction:column;gap:2px}
.trust-item b{font-family:var(--font-display);font-size:clamp(19px,4vw,26px);font-weight:600;
  line-height:1.08;letter-spacing:-.01em;text-wrap:balance}
.trust-item span{font-size:12.5px;color:var(--text-2);line-height:1.35;text-wrap:balance}
.trust--on-dark .trust-item b{color:#fff}
.trust--on-dark .trust-item span{color:var(--on-ink-2)}
@media (min-width:768px){ .trust{grid-template-columns:repeat(4,1fr);gap:var(--sp-5)} }

/* ---------- 15. ФОРМЫ ------------------------------------------------ */
.panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);box-shadow:var(--shadow-sm)}
.form-panel{padding:var(--sp-5)}
.form-panel h3{font-size:22px}
.form-sub{font-size:14px;color:var(--text-2);margin:6px 0 var(--sp-5)}
.form-row{display:grid;grid-template-columns:1fr;gap:0}
.field{margin-bottom:var(--sp-4)}
.field label,.field legend{display:block;font-size:13px;font-weight:700;color:var(--text-2);margin-bottom:6px}
.field .req{color:var(--red)}
.field input,.field textarea,.field select,.rv-select{
  width:100%;min-height:50px;border-radius:var(--r);border:1.5px solid var(--border-2);
  background:var(--surface-2);padding:12px 14px;font-size:16px;color:var(--text);
  transition:border-color .2s,box-shadow .2s}
.field input{line-height:1.3} /* иначе 1.6 от body + паддинги дают 52,6px против 50px у select */
.field textarea{min-height:96px;resize:vertical}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 4px var(--ring);background:#fff}
.field.is-err input,.field.is-err textarea{border-color:var(--red);background:var(--red-soft)}
.field .msg{display:none;font-size:12.5px;color:var(--red);margin-top:6px}
.field.is-err .msg{display:block}
.field .hint{display:block;font-size:12.5px;color:var(--text-3);margin-top:6px}
.form-note{font-size:12px;color:var(--text-3);margin-top:10px}
.form-note a{color:var(--green);text-decoration:underline}
.form-ok,.form-err{display:none;align-items:flex-start;gap:10px;padding:12px 14px;border-radius:var(--r);
  font-weight:600;font-size:14px;margin-top:var(--sp-4);line-height:1.45}
.form-ok{background:var(--green-soft);color:var(--green-800)}
.form-err{background:var(--red-soft);color:var(--red-700)}
.form-err a{text-decoration:underline;white-space:nowrap}
.form-ok.is-shown,.form-err.is-shown{display:flex}
.form-ok svg,.form-err svg{width:20px;height:20px;flex:none;margin-top:2px}
@media (min-width:560px){ .form-row{grid-template-columns:1fr 1fr;gap:0 var(--sp-4)} }
@media (min-width:768px){ .form-panel{padding:var(--sp-7)} }

/* контактная панель */
.contacts-grid{display:grid;grid-template-columns:1fr;gap:var(--sp-4)}
.contacts-panel{padding:var(--sp-5);display:flex;flex-direction:column;gap:var(--sp-4)}
.c-list{display:grid;gap:2px}
.c-line{display:flex;gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--border)}
.c-line:last-child{border-bottom:0}
.c-ico{width:42px;height:42px;border-radius:13px;background:var(--green-soft);color:var(--green-700);
  display:grid;place-items:center;flex:none}
.c-ico svg{width:21px;height:21px}
.c-text{min-width:0}
.c-lab{display:block;font-size:12.5px;color:var(--text-3);font-weight:600}
.c-val{display:block;font-size:15.5px;font-weight:700;margin-top:1px}
a.c-val:hover{color:var(--green)}
.map{position:relative;border-radius:var(--r-lg);overflow:hidden;height:180px;border:1px solid var(--border);
  display:grid;place-items:center}
.map-grid{position:absolute;inset:0;background:
  linear-gradient(#dfe3df 1px,transparent 1px) 0 0/40px 40px,
  linear-gradient(90deg,#dfe3df 1px,transparent 1px) 0 0/40px 40px,#eef1ee}
.map-pin{position:absolute;top:42%;left:50%;transform:translate(-50%,-100%);color:var(--green)}
.map-pin svg{width:40px;height:40px;fill:var(--green);stroke:#fff;stroke-width:1.4}
.map-link{position:relative;z-index:2;margin-top:56px;background:rgba(255,255,255,.94)}
/* Живая карта в карточке контактов: занимает остаток высоты, чтобы карточка
   сравнялась с формой рядом. Заглушка .map-grid остаётся запасным вариантом. */
.map--live{height:auto;min-height:220px;flex:1 1 auto;place-items:stretch}
.map-frame{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
@media (min-width:1024px){
  .contacts-grid{grid-template-columns:1.05fr .95fr;gap:var(--sp-6)}
  .contacts-panel{padding:var(--sp-7)}
}

/* ---------- 16. CTA-ПОЛОСА ------------------------------------------- */
.cta-band{background:linear-gradient(125deg,var(--green-800),var(--green) 85%);border-radius:var(--r-xl);
  padding:var(--sp-6);display:flex;flex-direction:column;gap:var(--sp-5);box-shadow:var(--shadow)}
.cta-band h2{color:#fff}
.cta-band p{color:rgba(255,255,255,.88);font-size:15px;margin-top:6px}
.cta-btn{background:#fff;color:var(--green-800);align-self:flex-start}
.cta-btn:hover{background:#eef1ec}
@media (min-width:900px){
  .cta-band{flex-direction:row;align-items:center;justify-content:space-between;gap:var(--sp-7);padding:var(--sp-8)}
  .cta-btn{align-self:center;flex:none}
}

/* ---------- 17. ФУТЕР ------------------------------------------------ */
/* Без margin-top: у секций свой нижний отступ, а зазор перед футером показывал
   фон body и на тональной подложке читался как лишняя светлая полоса. */
.footer{background:var(--ink);color:var(--on-ink-2);padding:var(--sp-8) 0 var(--sp-5)}
.foot-grid{display:grid;grid-template-columns:1fr;gap:var(--sp-6);padding-bottom:var(--sp-6);
  border-bottom:1px solid rgba(255,255,255,.1)}
.foot-brand .brand-name{color:#fff}
.foot-brand .brand-sub{color:rgba(255,255,255,.62)}
.foot-about{color:rgba(255,255,255,.6);font-size:14px;margin:var(--sp-4) 0;max-width:44ch}
.foot-soc{display:flex;gap:9px}
/* в футере знаки монохромные, чтобы не пестрить; фирменный цвет
   проявляется на наведении – так принято и так они узнаваемее */
.foot-soc a{width:var(--tap);height:var(--tap);border-radius:12px;background:rgba(255,255,255,.08);
  display:grid;place-items:center;color:#fff;transition:background .2s,transform .2s}
.foot-soc a:hover{transform:translateY(-2px)}
.foot-soc a svg{width:20px;height:20px;fill:currentColor}
.soc-max:hover{background:linear-gradient(135deg,#44ccff,#5533ee 55%,#9933dd)}
.soc-tg:hover{background:#0088cc}
.soc-vk:hover{background:#0077ff}
.soc-wa:hover{background:#25d366}
.foot-title{font-family:var(--font-ui);font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(255,255,255,.58);margin-bottom:var(--sp-2);font-weight:800}
.foot-col li a,.foot-plain{display:flex;align-items:center;gap:10px;min-height:var(--tap);
  color:rgba(255,255,255,.72);font-size:14.5px;transition:.15s}
.foot-col li a:hover{color:#fff}
.foot-col svg{width:18px;height:18px;color:var(--green);flex:none}
.foot-phone b{color:#fff;font-size:17px;font-weight:800}
.foot-partner{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:var(--sp-5) 0 var(--sp-2)}
.fp-lab{font-size:12.5px;color:rgba(255,255,255,.55)}
.fp-link{display:inline-flex;border-radius:10px;padding:7px 12px;background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);transition:.15s}
.fp-link:hover{background:rgba(255,255,255,.12)}
.foot-bottom{display:flex;flex-direction:column;gap:var(--sp-3);padding-top:var(--sp-4);
  border-top:1px solid rgba(255,255,255,.08);color:rgba(255,255,255,.5);font-size:13px}
.foot-bottom>a{color:rgba(255,255,255,.5);text-decoration:underline;display:inline-flex;align-items:center;min-height:var(--tap)}
.foot-bottom>a:hover{color:#fff}
.foot-pay{display:flex;gap:9px;align-items:center}
.pay-ico{width:50px;height:31px;border-radius:7px;display:grid;place-items:center;flex:none;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14)}
.pay-ico svg text{fill:#e8e8ec}
@media (min-width:560px){ .foot-grid{grid-template-columns:repeat(2,1fr);gap:var(--sp-6) var(--sp-7)} }
@media (min-width:1024px){
  .foot-grid{grid-template-columns:1.5fr 1fr 1fr 1fr 1.2fr;gap:var(--sp-7)}
  .foot-brand{grid-column:auto}
  .foot-bottom{flex-direction:row;align-items:center;justify-content:space-between;gap:var(--sp-5)}
}

/* ---------- 18. SKIP-LINK, ANIMATION --------------------------------- */
.skip-link{position:absolute;left:16px;top:-60px;z-index:300;background:var(--green);color:#fff;
  font-weight:700;font-size:14px;padding:12px 20px;border-radius:0 0 12px 12px;transition:top .2s}
.skip-link:focus{top:0}

/* reveal включается ТОЛЬКО при наличии JS: без JS всё видно сразу */
.js .reveal{opacity:0;transform:translateY(20px);transition:opacity .55s ease,transform .6s cubic-bezier(.2,.7,.2,1)}
.js .reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .reveal{opacity:1;transform:none;transition:none}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* ---------- 19. ПЕЧАТЬ ----------------------------------------------- */
@media print{
  .header,.topbar,.footer,.drawer,.overlay,.buybar,.lane-arrow,.skip-link{display:none!important}
  body{background:#fff}
  .section{padding-block:12px}
}