/* ==========================================================================
   СИСТЕМА РАЗМЕРОВ (2.17). Новые правила — только из этих значений.

   Шрифт — токены --fs-* ниже. Шаг .05rem до 1rem, дальше ≈ +8% на ступень.
   Заголовки страниц — --h1-page, заголовки секций главной — --h2-sec.
   Свои clamp() оставлены только у крупных заголовков отдельных экранов
   (фото на главной, статья блога, «Спасибо за заказ»). Литералы-исключения:
   0 (скрытый текст), .53rem (значок «ИИ» на фото), 2rem и 2.2rem (глифы ✓ и ×).
   Поля ввода на телефоне — не мельче 16 px (--fs-input), иначе iPhone
   увеличивает страницу.

   Точки перехода (max-width, «до и включая»):
     1000 — компьютер ↔ телефон/планшет: шапка, бургер, колонки в одну.
            Та же граница в app.js: matchMedia("(min-width:1001px)").
      820 — планшет: товар в одну колонку, карусель этапов сада.
      560 — телефон: сетки 2→1, формы в столбик, мельче отступы и шрифты.
      430 — узкий телефон: без надписи у логотипа, кнопки карточек в столбик.
      380 — самый узкий: без суммы в кнопке корзины.
   min-width — только 561 (обратная к 560) и 1001–1240 (шапка ПК уже 1240).
   1179 и 938 — не точки перехода, а расчётные пороги сетки карточек
   на главной (когда меняется число колонок), их не трогать.
   ========================================================================== */
:root{
  /* Шкала шрифта */
  --fs-2xs:.7rem;   /* бейджи, метки ЗАГЛАВНЫМИ */
  --fs-xs:.75rem;   /* подписи, счётчики */
  --fs-sm:.8rem;    /* мелкий текст, крошки, примечания */
  --fs-ui:.85rem;   /* кнопки поменьше, чипы, меню */
  --fs-note:.9rem;  /* вторичный текст, навигация */
  --fs-text:.95rem; /* текст в карточках и таблицах, кнопки */
  --fs-base:1rem;
  --fs-md:1.05rem;
  --fs-lg:1.1rem;   /* заголовки карточек, крупные цифры */
  --fs-xl:1.2rem;   /* заголовки блоков */
  --fs-2xl:1.3rem;
  --fs-3xl:1.4rem;  /* заголовки окон и корзины */
  --fs-4xl:1.5rem;
  --fs-5xl:1.7rem;  /* цена, цифры */
  --fs-6xl:1.9rem;
  --fs-input:16px;
  --h1-page:clamp(1.5rem,2.6vw,2.1rem);  /* заголовок страницы (правила — в конце woo.css) */
  --h2-sec:clamp(1.4rem,2.5vw,1.95rem);  /* заголовок секции главной */
  --cream:#FAF8F3;--cream-2:#EFF2E6;--green:#1F5C3A;--green-deep:#0F3B25;--green-soft:#DCE9DE;
  /* Палитра с 17.09.2026: сочный салатовый #A8C83A — главный цвет действия
     (кнопки, счётчики, значки, полоски, подчёркивания) и акцент на тёмном.
     Белый текст на нём НЕ читается (1,9:1) — только тёмный (#0F3B25, 6,6:1).
     Как цвет текста/рамки на светлом фоне — только --lime-ink (5,3:1).
     --amber и --sun оставлены как имена ролей и указывают на салатовый. */
  --lime:#A8C83A;--lime-hover:#B8D64E;--lime-soft:#F2F7E0;--lime-ink:#55710F;
  /* Нежные салатово-сливочные: --lime-pale — подсветка подразделов и
     раскрытого раздела, --lime-soft — плашки на внутренних страницах
     (таблицы, условия, «что дальше»). Заменили песочный #F3EAD8 и
     серо-зелёный #DCE9DE: рядом с салатовым они смотрелись грязно. */
  --lime-pale:#E9F2C8;--lime-pale-2:#F3F8E3;--lime-pale-3:#F9FBF0;--lime-line:#D6E6A3;
  --amber:var(--lime);--amber-soft:var(--lime-soft);--clay:#B5573A;--ink:#16231B;--ink-2:#4E5C52;
  --sun:var(--lime);  /* акценты на тёмном, цифры, активные состояния */
  --band:var(--lime-soft);  /* светлая плашка / полоса секции */
  --line:rgba(22,35,27,.12);--r-lg:24px;--r-md:16px;--r-sm:10px;
  /* Шрифты: Montserrat — заголовки, Manrope — текст. У обоих есть кириллица и
     эстонские буквы. Прежде заголовки набирались Cormorant Garamond: у этой
     антиквы очень мелкая строчная буква, и заголовок выглядел меньше
     обычного текста рядом с ним. Montserrat крупнее в строчных, поэтому
     размеры заголовков ниже соразмерно уменьшены. */
  --head:"Montserrat",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  /* Надпись ALLIKASILM — и в шапке, и крупно на главной — остаётся прежней
     антиквой: это подпись марки, её узнают по начертанию. */
  --wordmark:"Cormorant Garamond","Cormorant",Georgia,"Times New Roman",serif;
  --sans:"Manrope",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;--ease:cubic-bezier(.22,.8,.2,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;overflow-x:clip}
body{font-family:var(--sans);color:var(--ink);background:var(--cream);line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:clip;
  font-feature-settings:"ss01","cv11";letter-spacing:-.003em}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
button{font:inherit;cursor:pointer}
h1,h2,h3{font-family:var(--head);font-weight:600;letter-spacing:-.005em;line-height:1.16}
h1{font-size:clamp(1.9rem,3.4vw,2.9rem);line-height:1.12}
/* Поля по краям не меньше 16 px: раньше 94vw давали на телефоне ~11 px, и
   текст почти касался края экрана. На компьютере колонка всё так же 1240. */
.wrap{width:min(1240px,calc(100% - 32px));margin:0 auto}
:focus-visible{outline:2px solid var(--lime-ink);outline-offset:3px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.85rem 1.4rem;border-radius:999px;font-weight:600;letter-spacing:.005em;font-size:var(--fs-text);border:0;transition:transform .3s var(--ease),background .25s;white-space:nowrap}
.btn:hover{transform:translateY(-1px)}
.btn-amber{background:var(--lime);color:var(--green-deep)}.btn-amber:hover{background:var(--lime-hover)}
.btn-green{background:var(--green);color:#fff}.btn-green:hover{background:var(--green-deep)}
.btn-line{background:#fff;border:1px solid var(--line);color:var(--ink)}.btn-line:hover{border-color:var(--green)}
.btn-sm{padding:.55rem 1rem;font-size:var(--fs-ui)}
.chip{display:inline-flex;align-items:center;gap:.4rem;padding:.5rem .95rem;border-radius:999px;background:#fff;border:1px solid var(--line);font-size:var(--fs-ui);font-weight:500;transition:.25s;cursor:pointer}
.chip:hover,.chip.on{background:var(--green);color:#fff;border-color:var(--green)}

/* top bar + header */
.topbar{background:var(--green-deep);color:rgba(255,255,255,.85);font-size:var(--fs-sm);padding:.45rem 0}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:.6rem 1.4rem;flex-wrap:wrap}
.tb-promo{flex:1 1 auto;min-width:0}
.tb-contacts{display:flex;align-items:center;gap:.2rem;flex:none;flex-wrap:wrap}
.tb-contacts a{display:inline-flex;align-items:center;gap:.35rem;padding:.15rem .5rem;border-radius:999px;color:#fff;white-space:nowrap;transition:.2s}
.tb-contacts a:hover{background:rgba(255,255,255,.14);color:var(--sun)}
.tb-contacts svg{flex:none;opacity:.85}
.mcontact-links{display:flex;flex-direction:column;gap:.1rem;margin-top:.2rem}
.mcontact-links a{display:inline-flex;align-items:center;gap:.6rem;padding:.55rem .2rem;color:var(--ink);font-size:var(--fs-base)}
.mcontact-links svg{flex:none;color:var(--green)}
/* ---- значки соцсетей: в подвале и на странице блога ----
   Значки — официальные картинки платформ (assets/img/social). Углы у части
   из них белые, поэтому скругляем маской, а не правим сами файлы. Сети без
   картинки показываются словом — тот же вид, что был у подвала раньше. */
.socials{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin-top:1rem}
.socials .so{display:inline-flex;align-items:center;justify-content:center;transition:transform .2s var(--ease),opacity .2s}
.socials .so img{width:28px;height:28px;border-radius:22%;display:block}
.socials .so:hover{transform:translateY(-2px)}
.socials .so-t{padding:.35rem .8rem;border:1px solid var(--line);border-radius:999px;font-size:var(--fs-sm);color:var(--ink-2)}
.socials .so-t:hover{border-color:var(--green);color:var(--green)}
footer .socials .so-t{border-color:rgba(255,255,255,.25);color:rgba(255,255,255,.85)}
footer .socials .so-t:hover{background:rgba(255,255,255,.12);color:#fff;border-color:transparent}
/* На странице блога строка стоит справа от заголовка. */
.socials-page{margin-top:0}
.topbar b{color:var(--sun);font-weight:600}
.hdr{z-index:50;background:rgba(250,248,243,.9);backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4);border-bottom:1px solid var(--line)}
.hdr .wrap{display:flex;align-items:center;flex-wrap:wrap;gap:.6rem clamp(.8rem,1.6vw,1.4rem);padding:.75rem 0}
.brand{display:flex;align-items:center;gap:.6rem;color:var(--green);flex:none;order:1;white-space:nowrap}
.brand svg,.brand .mark{width:46px;height:46px;object-fit:contain;flex:none}
.brand span{font-family:var(--wordmark);font-size:var(--fs-xl);letter-spacing:.16em;font-weight:700}
/* Только сама форма: у <body> на странице результатов WordPress тоже есть
 * класс «search», и без «form» эти правила ломали всю страницу /?s=. */
form.search{flex:1 1 240px;min-width:0;order:2;position:relative;display:flex;align-items:center;background:#fff;border:1px solid var(--line);border-radius:999px;padding:.2rem .3rem .2rem 1rem;max-width:520px;transition:.25s}
form.search:focus-within{border-color:var(--green);box-shadow:0 0 0 3px rgba(31,92,58,.12)}
form.search input{flex:1;border:0;background:none;font:inherit;padding:.5rem 0;min-width:0}
form.search input:focus{outline:0}
form.search>button[type="submit"]{flex:none;border:0;background:var(--green);color:#fff;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;cursor:pointer}
.nav{display:flex;flex:none;order:3;gap:clamp(.75rem,1.4vw,1.4rem);font-size:var(--fs-note);font-weight:500;color:var(--ink-2);margin-left:auto}
.nav a{white-space:nowrap}
.nav a:hover{color:var(--green)}
.tools{display:flex;align-items:center;flex:none;order:4;gap:.5rem}
.lang{position:relative}
.lang>button{background:#fff;border:1px solid var(--line);border-radius:999px;padding:.45rem .8rem;font-size:var(--fs-sm);font-weight:500;white-space:nowrap}
.lang ul{position:absolute;right:0;top:calc(100% + .4rem);background:#fff;border:1px solid var(--line);border-radius:var(--r-sm);list-style:none;min-width:150px;padding:.3rem;box-shadow:0 20px 40px -20px rgba(22,35,27,.35);opacity:0;transform:translateY(-6px);pointer-events:none;transition:.2s}
.lang.open ul{opacity:1;transform:none;pointer-events:auto}
.lang li{padding:.45rem .7rem;border-radius:6px;font-size:var(--fs-ui);cursor:pointer;display:flex;justify-content:space-between}
.lang li:hover{background:var(--cream-2)}.lang li small{color:var(--ink-2)}
.cart-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;gap:.5rem;background:var(--green);color:#fff;border:0;border-radius:999px;padding:.5rem 1rem .5rem .8rem;font-weight:500;font-size:var(--fs-ui);
  font-variant-numeric:tabular-nums;min-width:132px}
.cart-btn b{background:var(--lime);color:var(--green-deep);font-size:var(--fs-2xs);min-width:20px;height:20px;padding:0 .35rem;border-radius:999px;display:grid;place-items:center;font-weight:600}
/* Бургер. Символ «≡» в разных шрифтах рисуется по-разному и на телефоне
   читается как опечатка, поэтому полоски рисуем сами. Кнопка зелёная и
   крупнее соседей: это главный вход в меню на телефоне. */
.burger{display:none;width:44px;height:44px;flex:none;order:0;margin-right:.5rem;
  border-radius:14px;border:0;background:var(--green);cursor:pointer;
  padding:0;place-content:center;justify-items:center;gap:5px}
.burger span{display:block;width:20px;height:2.5px;border-radius:2px;background:#fff;transition:.25s var(--ease)}
.burger:active{background:var(--green-deep)}
.burger:focus-visible{outline:3px solid var(--sun);outline-offset:2px}

/* shop hero */
.shop-hero{padding:2.2rem 0 1.5rem}
.shop-hero .grid{display:grid;grid-template-columns:1.1fr 1fr;gap:1.2rem;align-items:stretch}
.hero-card{background:linear-gradient(180deg,rgba(13,45,29,.38) 0%,rgba(10,34,22,.62) 55%,rgba(9,30,19,.82) 100%),url(img/hero-bg.jpg) center/cover no-repeat,var(--green);color:#fff;border-radius:var(--r-lg);padding:2.6rem;position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;min-height:380px}
.hero-card h1{font-family:var(--wordmark);font-size:clamp(2.3rem,4vw,3.4rem);max-width:none;font-weight:700;margin-bottom:auto}
.hero-card p{color:rgba(255,255,255,.8);margin:1.4rem 0 1.4rem;max-width:60ch}
/* Логотип с кругами сидит в правом верхнем углу карточки. Он был крупным,
   и на эстонском и английском — где заголовок длиннее русского — текст в него
   упирался. Уменьшили и отодвинули в самый угол. */
.hero-card .rings{position:absolute;right:-1.6rem;top:-1.6rem;bottom:auto;width:min(26%,170px);height:auto;aspect-ratio:1;pointer-events:none;z-index:0;opacity:.95}
/* Правый нижний угол — заповедник иконки: заголовок, текст и кнопки туда
   никогда не заходят, сколько бы слов ни было на любом языке сайта. */
.hero-card p,.hero-card .cta{padding-right:clamp(64px,20%,140px)}
/* Логотип теперь в правом верхнем углу — заголовку отступ справа побольше,
   чтобы кольца не ложились на текст. */
.hero-card h1{padding-right:clamp(90px,30%,220px)}
.hero-card h1,.hero-card p{position:relative;z-index:1}
.hero-card .rings .rip circle{fill:none;stroke:rgba(255,255,255,.24);stroke-width:1.4;transform-origin:center;animation:ripple 7s var(--ease) infinite}
.hero-card .rings .rip circle:nth-child(2){animation-delay:1.75s}.hero-card .rings .rip circle:nth-child(3){animation-delay:3.5s}.hero-card .rings .rip circle:nth-child(4){animation-delay:5.25s}
@keyframes ripple{0%{transform:scale(.39);opacity:0}10%{opacity:1}100%{transform:scale(1);opacity:0}}
.hero-card .cta{display:flex;gap:.6rem;flex-wrap:wrap;position:relative}
.hero-side{display:grid;grid-template-rows:1fr 1fr;gap:1.2rem}
.promo{border-radius:var(--r-lg);padding:1.6rem;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden;min-height:190px;background:var(--green-deep);transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.promo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;filter:brightness(.68) saturate(1.06);transition:transform .9s var(--ease)}
.promo::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(102deg,rgba(9,28,18,.72) 0%,rgba(9,28,18,.5) 48%,rgba(9,28,18,.2) 100%)}
.promo>div,.promo .arrow{position:relative;z-index:2}
.promo:hover img{transform:scale(1.05)}
.promo:hover{transform:translateY(-3px);box-shadow:0 26px 46px -24px rgba(22,35,27,.55)}
.promo h3{font-size:var(--fs-xl);margin-bottom:.35rem;color:#fff;text-shadow:0 1px 14px rgba(9,28,18,.45)}
.promo p{font-size:var(--fs-note);color:rgba(255,255,255,.87);max-width:34ch;text-shadow:0 1px 12px rgba(9,28,18,.45)}
.promo.a{background:#2A2113}.promo.b{background:var(--green-deep)}
.promo .arrow{align-self:flex-start;margin-top:1rem;font-weight:500;color:#fff;border-bottom:2px solid var(--sun)}
.promo .ph{display:none}

/* category strip */
.cats{padding:1rem 0 2.5rem}
.cats .row{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
.cat{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:1rem;display:flex;flex-direction:column;gap:.6rem;transition:.3s var(--ease);cursor:pointer}
.cat:hover{border-color:var(--green);transform:translateY(-3px);box-shadow:0 20px 30px -24px rgba(22,35,27,.4)}
.cat .ic{transition:.3s var(--ease)}
.cat:hover .ic{background:var(--lime);color:var(--green-deep)}
.cat .ic{width:44px;height:44px;border-radius:12px;background:var(--green-soft);display:grid;place-items:center;color:var(--green)}
.cat b{font-weight:600;font-size:var(--fs-note);line-height:1.2}
.cat small{color:var(--ink-2);font-size:var(--fs-xs)}

/* sections */
section{padding:2.5rem 0}
.sec-head{display:flex;justify-content:space-between;align-items:end;gap:1rem;margin-bottom:1.4rem}
.sec-head h2{font-size:var(--h2-sec)}
.sec-head p{color:var(--ink-2);font-size:var(--fs-text);margin-top:.3rem}
.sec-head a{color:var(--green);font-weight:600;border-bottom:2px solid var(--lime);white-space:nowrap}

/* product grid */
.grid-p{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}
.p{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;display:flex;flex-direction:column;height:100%;transition:.35s var(--ease);position:relative}
.p:hover{transform:translateY(-4px);box-shadow:0 30px 40px -30px rgba(22,35,27,.45);border-color:transparent}
.p .img{aspect-ratio:1;background:#fff;overflow:hidden;cursor:pointer;position:relative}
.p .img img{width:100%;height:100%;object-fit:contain;transition:transform 1s var(--ease)}
.p:hover .img img{transform:scale(1.06)}
.p .img .noimg{position:absolute;inset:0;display:grid;place-items:center;color:var(--ink-2);font-size:var(--fs-xs);background:linear-gradient(160deg,#E4E1D7,#CFCBBF)}
.badge{position:absolute;top:.7rem;left:.7rem;background:var(--lime);color:var(--green-deep);font-size:var(--fs-2xs);font-weight:600;padding:.25rem .55rem;border-radius:999px;z-index:2;box-shadow:0 2px 10px -2px rgba(22,35,27,.35)}
.badge.new{background:var(--green);color:#fff}
.badge.sale{background:var(--clay);color:#fff}
.p .body{padding:.9rem 1rem 1rem;display:flex;flex-direction:column;gap:.3rem;flex:1}
.p .cat-l{font-size:var(--fs-2xs);color:var(--ink-2)}
.p h3{font-family:var(--sans);font-weight:600;font-size:var(--fs-text);line-height:1.3;letter-spacing:0}
/* По фотографии открывается быстрый просмотр, по названию — страница товара.
   Ссылка выглядит как прежний заголовок: цвет и начертание не меняются. */
.p h3 a{color:inherit;display:block}
.p h3:hover,.p h3 a:hover{color:var(--green)}
.p .price{display:flex;align-items:baseline;gap:.5rem;margin-top:auto;padding-top:.5rem}
.p .price b{font-size:var(--fs-lg);font-weight:600}
.p .price s{color:var(--ink-2);font-size:var(--fs-ui)}
.p .add{margin-top:.6rem;display:flex;gap:.4rem}
.p .add .btn.added{background:var(--green);color:#fff}
.stock{font-size:var(--fs-2xs);color:var(--green);display:flex;align-items:center;gap:.3rem}
.stock::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.stock.out{color:var(--clay)}

/* catalog layout */
.cat-layout{display:grid;grid-template-columns:250px 1fr;gap:1.6rem;padding:1.5rem 0 3rem}
.filters{display:flex;flex-direction:column;gap:1.4rem}
.filters h4,
.catlist h4{font-size:var(--fs-note);font-weight:600;color:var(--ink-2);letter-spacing:.02em;margin-bottom:.6rem}
.filters ul,
.catlist ul{list-style:none;display:flex;flex-direction:column;gap:.15rem}
.filters li,
.catlist li{padding:.6rem .7rem;border-radius:8px;font-size:var(--fs-base);line-height:1.3;cursor:pointer;display:flex;align-items:center;gap:.5rem;justify-content:space-between;transition:.2s}
.filters li .nm,
.catlist li .nm{flex:1;min-width:0}
.filters li:hover,
.catlist li:hover{background:#fff}.filters li.on,.catlist li.on{background:var(--green);color:#fff}
.filters li small,
.catlist li small{opacity:.6;font-size:var(--fs-ui);flex:none}
.filters li.top.open,
.catlist li.top.open{font-weight:600}
/* Раскрытый раздел выглядит как обычный пункт: собственной подсветки у него нет.
   Цветом выделяем только выбранный пункт (.on); что раздел раскрыт,
   видно по стрелке и по подразделам под ним. */
.filters li.sub,
.catlist li.sub{font-size:var(--fs-text);padding-left:1.4rem;position:relative}
.filters li.sub::before,
.catlist li.sub::before{content:"";position:absolute;left:.65rem;top:0;bottom:0;width:1px;background:var(--line)}
.filters li.sub.d2,
.catlist li.sub.d2{padding-left:2rem}.filters li.sub.d2::before,.catlist li.sub.d2::before{left:1.25rem}
.filters li.sub.d3,
.catlist li.sub.d3{padding-left:2.6rem}.filters li.sub.d3::before,.catlist li.sub.d3::before{left:1.85rem}
.filters .range,
.catlist .range{display:flex;gap:.5rem}
.filters input[type=number],
.catlist input[type=number]{width:100%;padding:.5rem .6rem;border:1px solid var(--line);border-radius:8px;font:inherit;background:#fff}
.toolbar{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:1rem;flex-wrap:wrap}
.toolbar select,.fld select{-webkit-appearance:none;appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%231F5C3A' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .85rem center;padding-right:2.2rem}
.toolbar select{padding:.5rem .8rem;padding-right:2.2rem;border:1px solid var(--line);border-radius:999px;background-color:#fff;font:inherit;font-size:var(--fs-ui)}
.toolbar select:focus-visible,.fld select:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.crumbs{font-size:var(--fs-sm);color:var(--ink-2);padding-top:1.2rem}
.crumbs a:hover{color:var(--green)}
.empty{padding:4rem;text-align:center;color:var(--ink-2);grid-column:1/-1}
.page-title{padding-top:.4rem}

/* trust */
.trust{background:var(--band);padding:2.2rem 0;margin:.5rem 0}
.trust .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.trust .wrap>div{background:#fff;border:1px solid rgba(31,92,58,.1);border-radius:var(--r-md);padding:1.2rem;display:flex;gap:.8rem;align-items:flex-start}
.trust .wrap>div>div{display:block}
.trust svg{flex:none;width:28px;height:28px;color:var(--green)}
.trust b{display:block;font-weight:600;font-size:var(--fs-note);margin-bottom:.15rem}
.trust span{font-size:var(--fs-sm);color:var(--ink-2)}

/* garden + family */
.garden{background:var(--green);color:#fff;border-radius:var(--r-lg);padding:3rem;display:grid;grid-template-columns:1.1fr 1fr;gap:2.5rem;align-items:center;position:relative;overflow:hidden}
.garden h2{font-size:var(--h2-sec)}
.garden p{color:rgba(255,255,255,.8);margin:.9rem 0 1.4rem;max-width:46ch}
.garden-head p{max-width:none}
.garden .video{aspect-ratio:16/9;border-radius:var(--r-md);background:linear-gradient(160deg,#2A6E47,#0F3B25);display:grid;place-items:center;position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.15)}
.garden .video .play{width:64px;height:64px;border-radius:50%;background:var(--lime);display:grid;place-items:center;color:var(--green-deep);transition:transform .3s}
.garden .video:hover .play{transform:scale(1.08)}
.garden .video small{position:absolute;bottom:.8rem;left:1rem;color:rgba(255,255,255,.6);font-size:var(--fs-2xs)}
.steps{display:flex;gap:1.2rem;flex-wrap:wrap}
.steps div{font-size:var(--fs-sm);color:rgba(255,255,255,.75)}
.steps div b{display:block;font:600 var(--fs-5xl) var(--head);color:var(--lime)}   /* блок на тёмно-зелёном */
.family .grid{display:grid;grid-template-columns:1fr 1.1fr;gap:2.5rem;align-items:center}
.family h2{font-size:var(--h2-sec);margin-bottom:1rem}
.family p{color:var(--ink-2);margin-bottom:.9rem;max-width:52ch}
.photo-stack{position:relative;aspect-ratio:5/4}
.photo{position:absolute;border-radius:var(--r-md);background:linear-gradient(160deg,#E4E1D7,#CFCBBF);box-shadow:0 30px 60px -30px rgba(22,35,27,.35);overflow:hidden;transition:transform .55s var(--ease),box-shadow .55s var(--ease)}
.photo img{transition:transform .9s var(--ease)}
.photo:hover{z-index:3;box-shadow:0 42px 72px -28px rgba(22,35,27,.5)}
.photo:hover img{transform:scale(1.06)}
.photo::after{content:attr(data-l);position:absolute;left:1rem;bottom:.8rem;font-size:var(--fs-2xs);color:var(--ink-2)}
.photo:has(img)::after{display:none}
.photo img{width:100%;height:100%;object-fit:cover;display:block}
.photo.p1{inset:0 22% 22% 0;transform:rotate(-1deg)}
.photo.p1:hover{transform:rotate(0deg) translateY(-8px) scale(1.015)}
.photo.p2{width:50%;aspect-ratio:1;right:0;bottom:0;transform:rotate(3deg)}
.photo.p2:hover{transform:rotate(0deg) translateY(-8px) scale(1.02)}
.places{display:flex;gap:.6rem;margin-top:1.4rem;flex-wrap:wrap}
.places div{padding:.7rem 1rem;border:1px solid var(--line);border-radius:var(--r-sm);font-size:var(--fs-sm);background:#fff}
.places div b{display:block;font-weight:600}
.places .soon,.places .hub{display:block;font-style:normal;font-size:var(--fs-2xs);margin-top:.15rem;line-height:1.3}
.places .soon{color:var(--clay)}
.places .hub{color:var(--green)}
.places .hub.main{font-weight:600}

/* newsletter */
.news-panel{background:var(--lime-soft);border-radius:var(--r-lg);padding:2.5rem 3rem;display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:center}
.news-panel>*{min-width:0}
.news-panel h2{font-size:clamp(var(--fs-2xl),2.2vw,var(--fs-5xl))}
.news-panel p{color:var(--ink-2);margin-top:.5rem}
.form{position:relative;display:flex;min-width:0;max-width:100%;background:#fff;border-radius:999px;padding:.35rem;box-shadow:0 20px 40px -30px rgba(22,35,27,.4)}
.form input{flex:1 1 0;width:100%;min-width:0;border:0;background:none;padding:.7rem 1.2rem;font:inherit}
.form input:focus{outline:0}
.form .btn{flex:none;white-space:nowrap}
.form .ok{position:absolute;inset:0;background:var(--green);color:#fff;border-radius:999px;display:grid;place-items:center;font-weight:500;opacity:0;pointer-events:none;transition:.4s}
.form.done .ok{opacity:1}

/* footer */
footer{background:var(--green-deep);color:rgba(255,255,255,.72);padding:3.5rem 0 1.6rem;font-size:var(--fs-note);margin-top:2rem}
footer .top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:2rem;padding-bottom:2.5rem;border-bottom:1px solid rgba(255,255,255,.12)}
footer .brand{color:#fff;margin-bottom:.9rem}
footer h4{color:#fff;font-weight:600;margin-bottom:.8rem;font-size:var(--fs-note)}
footer ul{list-style:none;display:grid;gap:.45rem}
footer a:hover{color:var(--amber)}
footer .bottom{display:flex;justify-content:center;gap:1rem;flex-wrap:wrap;padding-top:1.3rem;font-size:var(--fs-sm);color:rgba(255,255,255,.5)}

/* cart drawer */
.overlay{position:fixed;inset:0;background:rgba(22,35,27,.45);z-index:90;opacity:0;pointer-events:none;transition:.3s}
.overlay.on{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(440px,100vw);background:var(--cream);z-index:100;transform:translateX(100%);transition:transform .45s var(--ease),box-shadow .45s var(--ease);display:flex;flex-direction:column}
/* Тень — только у открытой корзины: у закрытой она выглядывала из-за
   правого края экрана серой полосой на телефоне. */
.drawer.on{transform:none;box-shadow:-30px 0 60px -40px rgba(0,0,0,.5)}
.drawer .head{display:flex;justify-content:space-between;align-items:center;padding:1.2rem 1.4rem;border-bottom:1px solid var(--line)}
.drawer .head h3{font-size:var(--fs-3xl)}
.drawer .close{background:#fff;border:1px solid var(--line);width:36px;height:36px;border-radius:50%}
.free{margin:1rem 1.4rem 0;background:#fff;border:1px solid var(--line);border-radius:var(--r-sm);padding:.8rem 1rem;font-size:var(--fs-sm)}
.free .bar{height:6px;background:var(--cream-2);border-radius:99px;margin-top:.5rem;overflow:hidden}
.free .bar i{display:block;height:100%;background:var(--amber);transition:width .5s var(--ease)}
.free.done{border-color:var(--green);color:var(--green)}.free.done .bar i{background:var(--green)}
.items{flex:1;overflow:auto;padding:1rem 1.4rem;display:flex;flex-direction:column;gap:.7rem}
.ci{display:grid;grid-template-columns:64px 1fr auto;gap:.8rem;background:#fff;border:1px solid var(--line);border-radius:var(--r-sm);padding:.6rem;align-items:center}
.ci .im{width:64px;height:64px;border-radius:8px;background:var(--cream-2);overflow:hidden}.ci img{width:100%;height:100%;object-fit:cover}
.ci b{font-family:var(--sans);font-weight:600;font-size:var(--fs-note);display:block;line-height:1.2}
.ci small{color:var(--ink-2);font-size:var(--fs-sm)}
/* Счётчик в мини-корзине (drawer) — раньше своя, более старая капсула
   (голые кнопки и число в <span>), внешне не похожая на прямоугольный
   виджет "−/+" везде остальных на сайте. Теперь та же разметка
   button.qm/input.qn/button.qp, что в каталоге, на странице товара и в
   корзине — и стиль ей просто наследуется от общего .qty, без своих
   переопределений. */
.ci .qty{margin-top:.3rem}
.ci .rm{background:none;border:0;color:var(--ink-2);font-size:var(--fs-xs);text-decoration:underline}
.ci .sum{font-weight:600;text-align:right}
.drawer .foot{padding:1.2rem 1.4rem;border-top:1px solid var(--line);background:#fff}
.drawer .tot{display:flex;justify-content:space-between;font-size:var(--fs-md);margin-bottom:.9rem}
.drawer .tot b{font-size:var(--fs-2xl)}
.drawer .foot .btn{width:100%}
.drawer .empty-c{text-align:center;color:var(--ink-2);padding:3rem 1rem}

/* product modal */
.modal{position:fixed;inset:0;z-index:110;display:grid;place-items:center;padding:1rem;opacity:0;pointer-events:none;transition:.3s}
.modal.on{opacity:1;pointer-events:auto}
.modal .box{background:var(--cream);border-radius:var(--r-lg);width:min(920px,100%);max-height:92vh;overflow:auto;overscroll-behavior:contain;display:grid;grid-template-columns:1fr 1fr;transform:translateY(16px);transition:.4s var(--ease)}
.modal.on .box{transform:none}
.modal .im{aspect-ratio:1;background:#fff}.modal .im img{width:100%;height:100%;object-fit:contain}
.modal .info{padding:2rem;display:flex;flex-direction:column;gap:.8rem;position:relative}
.modal .info h2{font-size:var(--fs-3xl)}
/* Быстрый просмотр показывает только начало описания: полоса прокрутки
   внутри окна читается плохо, а цена и кнопка должны быть видны сразу.
   Хвост текста уходит в плавное затухание, дальше — ссылка на страницу. */
.modal .info .desc{color:var(--ink-2);font-size:var(--fs-note);line-height:1.55;
  max-height:6.2em;overflow:hidden;position:relative}
.modal .info .desc::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2.1em;
  background:linear-gradient(to bottom,rgba(250,248,243,0),var(--cream));pointer-events:none}
.modal .info .desc.full::after{display:none}
.modal .info .desc > *:first-child{margin-top:0}
/* Ссылка на полное описание стоит сразу под выдержкой — там, где текст
   обрывается и человек как раз хочет читать дальше. */
.modal .info .p-more{display:inline-block;align-self:flex-start;margin:-.1rem 0 .1rem;
  padding:.45rem .9rem;
  border:1px solid var(--line);border-radius:999px;background:#fff;
  color:var(--green);font-weight:600;font-size:var(--fs-note);line-height:1.3;
  transition:border-color .15s ease,background .15s ease}
.modal .info .p-more:hover{border-color:var(--green);background:var(--green-soft);text-decoration:none}
.modal .price b{font-size:var(--fs-5xl);font-weight:600}
.modal .x{position:absolute;top:1rem;right:1rem;width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:#fff}
.meta{display:flex;flex-wrap:wrap;gap:.4rem}
.meta span{font-size:var(--fs-xs);background:#fff;border:1px solid var(--line);border-radius:999px;padding:.25rem .6rem}

/* checkout */
.co{display:grid;grid-template-columns:1.2fr .9fr;gap:2rem;padding:1.5rem 0 4rem}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:1.8rem}
.card h2{font-size:var(--fs-2xl);margin-bottom:1.2rem}
.fld{display:flex;flex-direction:column;gap:.3rem;margin-bottom:.9rem}
.fld label{font-size:var(--fs-sm);font-weight:500;color:var(--ink-2)}
.fld input,.fld select,.fld textarea{padding:.75rem .9rem;border:1px solid var(--line);border-radius:var(--r-sm);font:inherit;background:var(--cream)}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:0;border-color:var(--green);box-shadow:0 0 0 3px rgba(31,92,58,.12)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
.opt{display:flex;gap:.7rem;align-items:flex-start;padding:.9rem;border:1px solid var(--line);border-radius:var(--r-sm);margin-bottom:.6rem;cursor:pointer;background:var(--cream);transition:.25s var(--ease)}
.opt input[type=radio],input[type=checkbox]{accent-color:var(--green);width:17px;height:17px;margin-top:.1rem;flex:none}
.opt:hover{border-color:var(--green)}
.opt.on{border-color:var(--green);background:#fff;box-shadow:0 0 0 1px var(--green)}
.opt b{display:block;font-weight:600;font-size:var(--fs-note)}.opt small{color:var(--ink-2);font-size:var(--fs-sm)}
.sum-l{display:flex;justify-content:space-between;font-size:var(--fs-note);padding:.35rem 0}
.sum-l.t{border-top:1px solid var(--line);margin-top:.5rem;padding-top:.8rem;font-size:var(--fs-lg);font-weight:600}
.note{font-size:var(--fs-sm);color:var(--ink-2);margin-top:.8rem}
.toast{position:fixed;left:50%;bottom:1.5rem;transform:translate(-50%,20px);background:var(--ink);color:#fff;padding:.7rem 1.2rem;border-radius:999px;font-size:var(--fs-ui);opacity:0;transition:.35s var(--ease);z-index:200;pointer-events:none}
.toast.on{opacity:1;transform:translate(-50%,0)}

.rv{transition:.7s var(--ease)}
html.anim .rv{opacity:0;transform:translateY(16px)}
html.anim .rv.on{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.rv{opacity:1;transform:none}}
@media (max-width:1000px){
  .nav{display:none}
  .shop-hero .grid,.garden,.family .grid,.news-panel,.co{grid-template-columns:1fr}
  .hero-side{grid-template-rows:none;grid-template-columns:1fr 1fr}
  .cats .row{grid-template-columns:repeat(3,1fr)}
  .trust .wrap{grid-template-columns:1fr 1fr}
  .cat-layout{grid-template-columns:1fr}
  /* раньше список разделов на телефоне превращался в ряд плашек произвольной
     ширины (flex-wrap) — получался разнобой шириной и хаос при переносе строк.
     Единый дизайн с компьютером: список в один столбец, как на десктопе. */
  .filters li,
  .catlist li{background:#fff;border:1px solid var(--line)}
  footer .top{grid-template-columns:1fr 1fr}
  .modal .box{grid-template-columns:1fr}
}
@media (max-width:560px){
  .hero-side{grid-template-columns:1fr}.hero-card{padding:1.8rem;min-height:300px}
  .cats .row{grid-template-columns:1fr 1fr}.trust .wrap{grid-template-columns:1fr}
  .grid-p{grid-template-columns:1fr 1fr;gap:10px}.p .body{padding:.7rem}
  footer .top{grid-template-columns:1fr}.news-panel,.garden{padding:1.6rem}
  .two{grid-template-columns:1fr}
}

/* info / legal */
.info-layout{display:grid;grid-template-columns:240px 1fr;gap:2.5rem;padding:1.5rem 0 4rem}
.info-nav{position:sticky;top:90px;align-self:start;list-style:none;display:flex;flex-direction:column;gap:.2rem}
.info-nav a{display:block;padding:.5rem .8rem;border-radius:8px;font-size:var(--fs-note);color:var(--ink-2)}
.info-nav a:hover{background:#fff}.info-nav a.on{background:var(--green);color:#fff}
.legal{padding:0 0 3rem;max-width:72ch;scroll-margin-top:90px}
.legal h2{font-size:var(--fs-4xl);margin-bottom:1rem;padding-bottom:.6rem;border-bottom:1px solid var(--line)}
.legal h3{font-size:var(--fs-lg);margin:1.3rem 0 .4rem;font-family:var(--sans);font-weight:600}
.legal p,.legal li{color:var(--ink-2);font-size:var(--fs-text);margin-bottom:.6rem;line-height:1.6}
.legal ul,.legal ol{padding-left:1.3rem}
.legal b{color:var(--ink)}
.contacts{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin:1rem 0 1.4rem}
.contacts div{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:1.1rem;font-size:var(--fs-note);line-height:1.6}
.contacts a{color:var(--green)}
@media (max-width:1000px){.info-layout{grid-template-columns:1fr}.info-nav{position:static;flex-direction:row;flex-wrap:wrap}.contacts{grid-template-columns:1fr}}

/* blog */
.btags{display:flex;gap:.5rem;flex-wrap:wrap;margin:0 0 1.6rem}
.post{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;display:flex;flex-direction:column;transition:.35s var(--ease)}
.post:hover{transform:translateY(-4px);box-shadow:0 30px 40px -30px rgba(22,35,27,.45)}
.post .pc{aspect-ratio:16/10;background:linear-gradient(160deg,var(--green-soft),#C9DCCB);position:relative;overflow:hidden}
/* Обложка необязательна. У карточки без неё сверху идёт тонкая зелёная
   полоса вместо пустого поля — карточка не выглядит недогруженной. */
.post.no-pc{border-top:3px solid var(--lime)}
.post.no-pc .pb{padding-top:1.3rem}
.post .pc img{width:100%;height:100%;object-fit:cover}
.vtag{position:absolute;left:.8rem;bottom:.8rem;background:rgba(22,35,27,.75);color:#fff;font-size:var(--fs-2xs);padding:.3rem .6rem;border-radius:999px;text-transform:capitalize}
.post .pb{padding:1.1rem 1.2rem 1.2rem;display:flex;flex-direction:column;gap:.4rem;flex:1}
.ptag{font-size:var(--fs-xs);color:var(--ink-2)}
.post h3{font-size:var(--fs-xl);line-height:1.25}
.post p{font-size:var(--fs-note);color:var(--ink-2)}
.pread{margin-top:auto;padding-top:.6rem;color:var(--green);font-weight:500;font-size:var(--fs-note);border-bottom:1px solid var(--lime);align-self:flex-start}
.article{max-width:760px;margin:0 auto;padding:1rem 0 2rem}
.pback{display:table;color:var(--ink-2);font-size:var(--fs-note);margin-bottom:1.4rem}.pback:hover{color:var(--green)}
.article h1{font-size:clamp(1.6rem,3.2vw,2.5rem);margin:.5rem 0 1rem}
.article .lead{font-size:var(--fs-xl);color:var(--ink-2);margin-bottom:1.6rem;line-height:1.5}
.vbox{aspect-ratio:16/9;border-radius:var(--r-md);overflow:hidden;background:var(--green-deep);position:relative;margin-bottom:1.8rem}
.vbox iframe{width:100%;height:100%;border:0}
.vcover{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.8rem;color:rgba(255,255,255,.7);text-align:center;padding:1rem}
.vcover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55}
.vcover .btn,.vcover small{position:relative}.vcover small{font-size:var(--fs-xs);max-width:36ch}
/* Обложка статьи — рамка 16:9 на любом экране. Фото любых пропорций
   заполняет её без искажений (лишнее аккуратно обрезается по краям). */
.acover{margin:0 0 1.8rem;aspect-ratio:16/9;border-radius:var(--r-md);overflow:hidden;background:var(--green-soft)}
.acover img{width:100%;height:100%;object-fit:cover}
/* Фото внутри текста статьи — в свою ширину, без растяжения (карточки
   товаров в статье не трогаем — у них своя рамка). */
.abody > img,.abody p > img,.abody figure > img{height:auto;border-radius:var(--r-md)}
.abody figure{margin:1.4rem 0}
.abody figcaption{font-size:var(--fs-sm);color:var(--ink-2);margin-top:.45rem}
.abody{font-size:var(--fs-base);line-height:1.7}.abody p{margin-bottom:1rem}.abody ol,.abody ul{padding-left:1.4rem;margin-bottom:1rem}.abody li{margin-bottom:.4rem}.abody a{color:var(--green);border-bottom:1px solid var(--amber)}.abody a.btn{border:0;color:var(--ink)}
/* Заголовки внутри статьи: без своего размера они набирались текстом
   в один кегль с абзацем, и статья читалась сплошняком. */
.abody h2{font-size:var(--fs-2xl);margin:2rem 0 .7rem}
.abody h3{font-size:var(--fs-xl);margin:1.6rem 0 .6rem}
/* Подборка товаров внутри статьи: строка — ссылка, цена и кнопка. */
.abody .buy{list-style:none;padding-left:0;display:grid;gap:.5rem;margin-bottom:1.4rem}
.abody .buy li{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .8rem;margin:0;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-sm);padding:.7rem .9rem}
.abody .buy b{margin-left:auto;white-space:nowrap;font-weight:600}
.abody .buy .btn{border-bottom:0}
@media (max-width:560px){.abody .buy b{margin-left:0}.abody .buy .btn{width:100%}}
.ai-note{display:flex;align-items:center;gap:.6rem;font-size:var(--fs-sm);color:var(--ink-2);background:#fff;border:1px solid var(--line);border-radius:var(--r-sm);padding:.7rem 1rem;margin:1.5rem 0}
.ai-note i{width:8px;height:8px;border-radius:50%;background:var(--amber);flex:none}
.ashare{margin-top:1rem}
/* Товары внутри статьи: те же карточки, что в каталоге. До прихода JS на их
   месте стоит список ссылок с ценой — статья читается и без него. */
.as-prod{margin:1.6rem 0}
.as-prod .grid-p{grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}
.as-prod .p h3{font-size:var(--fs-base)}
/* Страницы ленты: WordPress печатает их сам, нам остаётся форма. */
.as-pager{display:flex;gap:.4rem;flex-wrap:wrap;justify-content:center;margin-top:2.2rem}
.as-pager .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:40px;height:40px;padding:0 .8rem;border:1px solid var(--line);border-radius:999px;background:#fff;font-size:var(--fs-note)}
.as-pager .page-numbers.current,.as-pager a.page-numbers:hover{background:var(--green);color:#fff;border-color:var(--green)}
.more{max-width:1240px;margin:2rem auto 0;padding-top:2rem;border-top:1px solid var(--line)}.more h2{font-size:var(--fs-2xl);margin-bottom:1rem}

/* mobile menu */
.mnav{display:none;position:fixed;inset:0;width:100vw;box-sizing:border-box;z-index:95;background:var(--cream);padding:1rem 5vw 2rem;overflow:auto;transform:translateY(-8px);opacity:0;pointer-events:none;transition:.3s var(--ease)}
.mnav.on{opacity:1;transform:none;pointer-events:auto}
.mnav .mhead{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.2rem}
.mnav .mhead button{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:#fff}
.mnav h5{margin:1.6rem 0 .6rem;font-size:var(--fs-sm);color:var(--ink-2);font-weight:600}
.mnav .mlangs{display:flex;flex-wrap:wrap;gap:.5rem}
.mnav .mlangs button{padding:.55rem .9rem;border-radius:999px;border:1px solid var(--line);background:#fff;font-size:var(--fs-ui)}
.mnav .mlangs button.on{background:var(--green);color:#fff;border-color:var(--green)}
.mnav .mcontacts{margin-top:1.6rem;font-size:var(--fs-note);color:var(--ink-2);line-height:1.7}
/* Кнопка «Разделы и фильтры» на телефоне: тот же вид, что у раскрывающихся
   строк раздела ниже (.filters li + её стрелка .arw) — раньше это была
   обычная кнопка-таблетка (.btn.btn-line), непохожая на то, что она
   раскрывает. Отступ сверху — раньше кнопка сидела вплотную под заголовком
   страницы, теперь между ними есть просвет. */
.ftoggle{display:none;align-items:center;width:100%;justify-content:space-between;
  margin:1.4rem 0 1rem;padding:.7rem .8rem;background:#fff;border:1px solid var(--line);
  border-radius:8px;font-size:var(--fs-base);font-weight:600;color:var(--ink);cursor:pointer}
.ftoggle .arw{flex:none;width:44px;height:44px;display:grid;place-items:center;
  border-radius:var(--r-sm);color:inherit;transition:transform .25s var(--ease)}
.ftoggle.open .arw{transform:rotate(180deg)}
@media (max-width:1000px){
  .mnav{display:block}
  .brand svg,.brand .mark{width:40px;height:40px}
  .ftoggle{display:flex}
  .filters{display:none}.filters.open{display:flex}
  .filters li.sub,
  .catlist li.sub{padding-left:.9rem}.filters li.sub::before,.catlist li.sub::before{display:none}
}

/* ── garden stages: поле → питомник → сад ───────────────────────────── */
#garden .garden{display:block}
.garden-head{display:grid;grid-template-columns:1.15fr auto;gap:2.5rem;align-items:stretch}
.garden-aside{display:flex;flex-direction:column;gap:1.3rem;align-items:flex-start;justify-content:flex-start}
.garden-aside .steps{margin-bottom:0}

.stages{display:flex;gap:12px;margin:2rem 0 0}
.stage{position:relative;flex:1 1 0;min-width:0;margin:0;height:clamp(230px,24vw,330px);border-radius:var(--r-md);overflow:hidden;cursor:zoom-in;background:var(--deep,#0F3B25);border:1px solid rgba(255,255,255,.14);transition:flex-grow .55s var(--ease);outline:none}
.stage img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s var(--ease)}
.stage::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(11,32,21,.88) 0%,rgba(11,32,21,.38) 40%,rgba(11,32,21,0) 68%);pointer-events:none}
.stages:hover .stage,.stages:focus-within .stage{flex-grow:.72}
.stages:hover .stage:hover,.stages:focus-within .stage:focus-visible{flex-grow:2.3}
.stage:hover img,.stage:focus-visible img{transform:scale(1.05)}
.stage:focus-visible{box-shadow:0 0 0 2px var(--lime-ink)}
.stage figcaption{position:absolute;left:1.05rem;right:1.05rem;bottom:.95rem;z-index:2;color:#fff}
.stage figcaption b{display:flex;align-items:baseline;gap:.55rem;font:600 var(--fs-xl) var(--head)}
.stage figcaption b i{font:500 var(--fs-2xs) var(--sans);font-style:normal;letter-spacing:.16em;color:var(--sun)}
.stage figcaption small{display:block;margin-top:.25rem;font-size:var(--fs-sm);line-height:1.4;color:rgba(255,255,255,.85);opacity:0;transform:translateY(6px);transition:.45s var(--ease)}
.stage:hover figcaption small,.stage:focus-visible figcaption small{opacity:1;transform:none}
.stage .ai{position:absolute;top:.7rem;right:.7rem;z-index:2;font-size:.53rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.7);background:rgba(11,32,21,.4);border:1px solid rgba(255,255,255,.2);border-radius:999px;padding:.22rem .55rem;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.stage-dots{display:none}

/* лайтбокс */
.lbox{position:fixed;inset:0;z-index:300;background:rgba(11,32,21,.94);display:none;place-items:center;padding:5vmin;cursor:zoom-out}
.lbox.on{display:grid}
.lbox img{max-width:100%;max-height:86vh;border-radius:12px;box-shadow:0 40px 90px -30px rgba(0,0,0,.7)}
.lbox-cap{position:absolute;bottom:2.2vmin;left:0;right:0;text-align:center;color:rgba(255,255,255,.65);font-size:var(--fs-xs);letter-spacing:.04em}
.lbox-x{position:absolute;top:2vmin;right:3vmin;background:none;border:0;color:#fff;font-size:2.2rem;line-height:1;cursor:pointer;opacity:.7}
.lbox-x:hover{opacity:1}

@media (max-width:1000px){
  .garden-head{grid-template-columns:1fr;gap:1.4rem;align-items:start}
  .stage{height:clamp(220px,30vw,300px)}
}
@media (max-width:820px){
  .stages{gap:10px;margin:1.5rem 0 0;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .stages::-webkit-scrollbar{display:none}
  .stage{flex:0 0 86%;height:62vw;min-height:210px;max-height:300px;scroll-snap-align:start;cursor:pointer;
         transition:transform .4s var(--ease),opacity .4s var(--ease);transform:scale(.95);opacity:.6}
  .stages:hover .stage,.stages:focus-within .stage,.stage:hover,.stage:focus-visible{flex-grow:0}
  .stage:hover img,.stage:focus-visible img{transform:none}
  .stage.on{transform:none;opacity:1}
  .stage figcaption small{opacity:1;transform:none}
  .stage-dots{display:flex;gap:6px;justify-content:center;margin-top:1rem}
  .stage-dots button{width:7px;height:7px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.3);cursor:pointer;transition:.35s var(--ease)}
  .stage-dots button.on{background:var(--sun);width:22px;border-radius:999px}
}

/* ── хедер: ничего не сжимается, поиск уходит на вторую строку ──────── */
@media (min-width:1001px) and (max-width:1240px){
  .hdr .wrap{padding:.65rem 0}
  .search.desk{order:5;flex:1 1 100%;max-width:none}
  .nav{margin-left:auto;font-size:var(--fs-ui)}
}

@media (max-width:1000px){
  .hero-card .rings{width:min(44%,156px);right:-.75rem;top:-.75rem;bottom:auto}
}

/* узкие карточки: текст идёт во всю ширину — затемняем равномернее */
@media (max-width:1000px){
  .promo{min-height:200px}
  .promo::before{background:linear-gradient(180deg,rgba(9,28,18,.74) 0%,rgba(9,28,18,.42) 56%,rgba(9,28,18,.68) 100%)}
}

/* На главной показываем столько карточек, сколько укладывается в целые ряды —
   без «хвоста» из двух-трёх штук в последней строке. Рендерится 10. */
@media (max-width:1179px){ .grid-p.home>:nth-child(n+9){display:none} }
@media (max-width:938px){  .grid-p.home>:nth-child(n+7){display:none} }

.more-box{display:flex;justify-content:center;padding:2rem 0 .5rem}
.more-box .btn{min-width:260px}
/* внутри блока «Хиты сезона» метка «Хит» на каждой карточке избыточна */
#hits .badge:not(.new):not(.sale){display:none}

/* На узком экране поле и кнопка встают друг под друга — иначе на почту
   остаётся полоска в пару сантиметров. */
@media (max-width:560px){
  .form{flex-direction:column;gap:.45rem;border-radius:var(--r-md);padding:.45rem}
  .form input{width:100%;padding:.7rem .9rem;text-align:center}
  .form .btn{width:100%}
  .form .ok{border-radius:var(--r-md)}
}

@media (max-width:820px){
  .topbar .wrap{justify-content:center;text-align:center}
  .tb-promo{flex:1 1 100%}
  .tb-contacts{justify-content:center}
  .tb-contacts .tb-long span{display:none}   /* прячем длинный номер и почту, названия мессенджеров оставляем */
  .tb-contacts a{padding:.3rem .55rem}
}

/* ── корзина: сумма в шапке, разбивка цены, допродажа, подсказка ────── */
.cart-sum{font-weight:600;font-size:var(--fs-ui);white-space:nowrap;font-variant-numeric:tabular-nums}
.cart-btn.has{box-shadow:0 0 0 2px var(--lime)}
.drawer #breakdown{margin-bottom:.5rem}
.drawer #breakdown .sum-l{display:flex;justify-content:space-between;font-size:var(--fs-sm);color:var(--ink-2);padding:.15rem 0}
.drawer .free em{display:block;color:var(--green);font-style:normal;font-weight:600;margin-bottom:.15rem}
.also{border-top:1px solid var(--line);padding-top:.9rem}
.also h4{font-size:var(--fs-sm);font-weight:600;color:var(--ink-2);margin-bottom:.6rem}
.also-i{display:flex;align-items:center;gap:.7rem;padding:.4rem 0}
.also-i .im{width:44px;height:44px;flex:none;border-radius:8px;overflow:hidden;background:var(--cream-2)}
.also-i .im img{width:100%;height:100%;object-fit:contain}
.also-i>div{flex:1;min-width:0}
.also-i b{display:block;font-size:var(--fs-ui);font-weight:500;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.also-i small{color:var(--ink-2);font-size:var(--fs-sm)}
.also-i .btn{flex:none;width:38px;padding:.4rem 0;text-align:center;font-size:var(--fs-lg);line-height:1}
/* Товар уже добавлен — галочка того же размера вместо «+», список не
   перестраивается и не съезжает под пальцем при повторных нажатиях. */
.also-added{flex:none;width:38px;height:38px;display:grid;place-items:center;
  color:var(--green);font-size:var(--fs-lg);font-weight:700}
.nudge{display:none}
.nudge.on{display:block;background:var(--amber-soft);border-radius:var(--r-sm);padding:.8rem .9rem;margin:.6rem 0}
.nudge b{display:block;font-size:var(--fs-text)}
.nudge p{font-size:var(--fs-ui);color:var(--ink-2);margin:.25rem 0 .6rem}

@media (max-width:1000px){
  .cart-btn.has .cart-sum{display:inline}
}

/* ── боковая панель: стрелки сворачивания ───────────────────────────── */
.filters li .arw,
.catlist li .arw{flex:none;width:38px;height:38px;padding:0;border:0;background:none;color:inherit;
  border-radius:var(--r-sm);cursor:pointer;opacity:.55;transition:.25s var(--ease)}
.filters li .arw:hover,
.catlist li .arw:hover{opacity:1;background:rgba(31,92,58,.1)}
.filters li.open .arw,
.catlist li.open .arw{transform:rotate(180deg)}
.filters li.on .arw:hover,
.catlist li.on .arw:hover{background:rgba(255,255,255,.18)}
.chk{display:flex;gap:.6rem;align-items:center;font-size:var(--fs-base);cursor:pointer;padding:.4rem 0}

/* ── предзаказ ──────────────────────────────────────────────────────── */
.pre-block{border-top:1px solid var(--line);margin-top:1rem;padding-top:.9rem}
.pre-block h4{font-size:var(--fs-ui);font-weight:600;color:var(--clay);margin-bottom:.5rem;letter-spacing:.02em}
.ci.pre{background:var(--cream-2);border-style:dashed}
.ci.pre small{color:var(--clay);font-style:italic}
.pre-note{font-size:var(--fs-sm);color:var(--ink-2);line-height:1.45;margin-top:.6rem}
.sum-l.pre-h{font-weight:600;color:var(--clay);border-top:1px solid var(--line);margin-top:.5rem;padding-top:.5rem}
.sum-l.pre span:last-child{color:var(--clay);font-style:italic}
#co-breakdown .sum-l{color:var(--ink-2);font-size:var(--fs-ui)}

.p .price .from{font-size:var(--fs-sm);color:var(--ink-2);align-self:center}

/* ── расширенный поиск: панель под строкой поиска в шапке ───────────── */
.sf-btn{flex:none;width:34px;height:34px;margin-right:.15rem;border:0;background:none;border-radius:50%;
  color:var(--ink-2);display:grid;place-items:center;cursor:pointer;transition:.22s var(--ease)}
.sf-btn:hover{background:var(--cream-2);color:var(--green)}
.sf-btn.on{background:var(--green);color:#fff}
.spanel{position:absolute;top:calc(100% + .5rem);left:0;width:max(100%,360px);max-width:min(96vw,520px);
  z-index:60;background:#fff;border:1px solid var(--line);border-radius:var(--r-md);
  box-shadow:0 28px 60px -28px rgba(22,35,27,.45);padding:1.1rem 1.2rem 1rem;
  opacity:0;transform:translateY(-8px);pointer-events:none;transition:.22s var(--ease)}
.spanel.on{opacity:1;transform:none;pointer-events:auto}
.sp-head{font-family:var(--sans);font-size:var(--fs-2xs);font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-2);padding-bottom:.7rem;margin-bottom:.9rem;border-bottom:1px solid var(--line)}
.sp-grid{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
.sp-grid label{display:flex;flex-direction:column;gap:.3rem;font-size:var(--fs-sm);color:var(--ink-2);min-width:0}
.sp-price{grid-column:1/-1}
.spanel select,.spanel input[type=number],.spanel input[type=search]{width:100%;min-width:0;padding:.55rem .75rem;border:1px solid var(--line);
  border-radius:var(--r-sm);background-color:var(--cream);font:inherit;font-size:var(--fs-note);color:var(--ink)}
.spanel select{padding-right:2.1rem;-webkit-appearance:none;appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%231F5C3A' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .7rem center}
.spanel select:disabled{opacity:.45;cursor:not-allowed}
.spanel select:focus,.spanel input:focus{outline:0;border-color:var(--green);box-shadow:0 0 0 3px rgba(31,92,58,.12)}
.sp-price .range{display:flex;align-items:center;gap:.45rem}
.sp-price .dash{color:var(--ink-3,var(--ink-2));flex:none}
.sp-chk{margin:.9rem 0 0;font-size:var(--fs-note)}
.sp-act{display:flex;justify-content:flex-end;gap:.5rem;flex-wrap:wrap;margin-top:1rem;padding-top:.9rem;border-top:1px solid var(--line)}
.side-adv{width:100%;margin-top:.4rem}

@media (max-width:560px){
  .sp-grid{grid-template-columns:1fr}
  .spanel{width:100%;max-width:none;padding:1rem}
}

/* ============================================================
   Количество товара и корзина, доступная с любой прокрутки
   ============================================================ */

/* «−  1  +» рядом с кнопкой «В корзину».
   Высота у контейнера была auto, а не заданная явно: кнопки (display:grid)
   и число (текстовый инпут с padding сверху/снизу) считали свою «естественную»
   высоту каждый по-своему по-разному, align-items:stretch их не выравнивал
   (высота у <button> в разных браузерах не сводится к высоте инпута сама),
   и цифра оказывалась выше или ниже центра относительно «−»/«+». Высота
   теперь одна и та же явная величина у всех трёх ячеек — растягивать
   больше нечего, и выравнивать нечем. */
.qty{display:inline-flex;align-items:stretch;flex:none;height:36px;
     border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden;background:#fff}
.qty button{width:30px;height:100%;border:0;background:transparent;cursor:pointer;
     font-size:var(--fs-md);line-height:1;color:var(--ink);padding:0;
     display:grid;place-items:center;transition:background .15s}
.qty button:hover{background:var(--band)}
.qty button:active{background:var(--line)}
.qty .qn{width:30px;height:100%;border:0;border-left:1px solid var(--line);border-right:1px solid var(--line);
     text-align:center;font:inherit;font-size:var(--fs-note);font-variant-numeric:tabular-nums;line-height:34px;
     background:transparent;color:var(--ink);padding:0;box-sizing:border-box;-moz-appearance:textfield}
.qty .qn:focus{outline:2px solid var(--lime-ink);outline-offset:-2px}
.p .add .qty{border-radius:var(--r-sm)}
.p .add .btn.wide{flex:1}

/* .qty-lg раньше увеличивал виджет «−/+» в окне товара — разного размера
   в разных местах сайта и выглядело как разные контролы. Теперь везде один
   и тот же размер (см. .qty выше), класс qty-lg в разметке ни на что
   не влияет — не убираю его из HTML, чтобы не трогать лишние файлы. */
.m-act{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center}

/* на узких карточках счётчик и кнопка встают в столбик */
@media (max-width:430px){
  .p .add{flex-wrap:wrap}
  .p .add .qty{width:100%}
  .p .add .qty button{flex:1;min-width:44px}   /* палец попадает без прицеливания */
  .p .add .qty .qn{flex:1;width:auto;min-width:44px}
  .p .add .btn{width:100%}
}


/* подпись у описания, когда оно не на языке покупателя */
.desc-note{margin:.2rem 0 .5rem;padding:.35rem .6rem;display:inline-block;
  font-size:var(--fs-xs);color:#6B5A2E;background:#FBF3E2;border-radius:8px;
  border:1px solid rgba(217,164,65,.35)}


/* ---- мобильное меню: «Каталог» раскрывается списком разделов ---- */
.mnav .ml-sub{display:none;padding:0 0 .9rem;border-bottom:1px solid var(--line)}
.mnav .ml-group.open .ml-sub{display:block}
.mnav .ml-sub a{display:flex;align-items:center;justify-content:space-between;gap:.6rem;
  padding:.62rem .2rem .62rem 1rem;font-size:var(--fs-base);color:var(--ink-2);border-bottom:1px solid var(--cream-2)}
.mnav .ml-sub a:last-child{border-bottom:0}
.mnav .ml-sub a:active{color:var(--green)}
.mnav .ml-sub small{color:var(--ink-2);opacity:.6;font-size:var(--fs-sm);flex:none}

/* Шапка на телефоне должна догонять при прокрутке. Сама она sticky с самого
   начала — мешал overflow-x:hidden на html и body (см. начало файла). */
@media (max-width:1000px){
  .burger{display:grid}
}

/* Все пункты раскрывающегося меню выглядят одинаково: ссылка это или кнопка,
   видно быть не должно. Раньше «Каталог» стал кнопкой и выбивался. */
.mnav a.ml,
.mnav button.ml{
  display:flex;align-items:center;justify-content:space-between;gap:.6rem;
  width:100%;box-sizing:border-box;
  padding:1rem .2rem;margin:0;
  font-family:var(--sans);font-size:var(--fs-lg);font-weight:600;line-height:1.25;letter-spacing:0;
  color:var(--ink);text-align:left;background:none;border:0;
  border-bottom:1px solid var(--line);cursor:pointer;-webkit-appearance:none;appearance:none}
.mnav .ml-group{border-bottom:0}
.mnav .ml-group button.ml{border-bottom:1px solid var(--line)}
.mnav .ml-group.open button.ml{border-bottom-color:transparent}
.mnav a.ml:active,.mnav button.ml:active{color:var(--green)}
.mnav button.ml i{width:14px;height:14px;border-right:2.5px solid var(--green);
  border-bottom:2.5px solid var(--green);transform:rotate(45deg);
  transition:transform .25s var(--ease);margin-right:.4rem;flex:none}
.mnav .ml-group.open button.ml i{transform:rotate(-135deg)}

/* ---- стрелка подразделов: в неё надо попадать пальцем ---- */
@media (max-width:1000px){
  .filters li .arw,
  .catlist li .arw{width:44px;height:44px}
  .filters li,
  .catlist li{padding:.7rem .5rem .7rem .8rem}
}

/* ---- кнопка «назад» на странице товара ---- */
.fab-back{position:fixed;left:16px;bottom:22px;z-index:90;
  width:52px;height:52px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--green);color:#fff;font-size:0;line-height:1;
  border:0;cursor:pointer;text-decoration:none;
  box-shadow:0 10px 24px -10px rgba(15,59,37,.55);transition:.25s var(--ease)}
.fab-back:hover{background:var(--green-deep);transform:translateY(-2px);color:#fff}
.fab-back:focus-visible{outline:3px solid var(--sun);outline-offset:3px}
@media (max-width:560px){.fab-back{left:12px;bottom:16px;width:48px;height:48px}}
/* когда открыта корзина или окно товара, кнопка мешает — прячем */
body:has(#drawer.on) .fab-back,
body:has(#modal.on) .fab-back{opacity:0;visibility:hidden}

/* ---- шапка закреплена на всех размерах ----

   Почему раньше не держалась. Липкой была сама .hdr, а лежит она внутри
   короткого блока #shell-top (верхняя полоса + шапка + меню телефона).
   Липкий элемент не может уехать за пределы родителя — поэтому шапка
   «прилипала» на высоту этого блока, то есть почти сразу пропадала.
   Ни кеш, ни overflow тут ни при чём.

   Теперь липким сделан весь #shell-top, а верхняя полоса уходит за верх
   экрана на свою высоту (--tb-h меряет скрипт). Прыжка при этом нет:
   ничего не прячется и не меняет высоту, полоса просто уезжает вверх. */
#shell-top{position:sticky;top:calc(-1 * var(--tb-h, 0px));z-index:60}
/* Шапка меняет высоту (сворачивается поиск) — браузер не должен из-за этого
   сам подкручивать страницу: это второй источник рывков на Android. */
#shell-top{overflow-anchor:none}
.hdr{position:relative;top:auto;z-index:1}


/* Страница с условиями, открытая отдельно: заголовок — h1 (так правильно для
   поиска), но выглядит он ровно как заголовок главы на странице «Покупателю». */
.legal h1{margin-bottom:1rem;padding-bottom:.6rem;border-bottom:1px solid var(--line);
  font-family:var(--head);font-weight:600}

/* ==========================================================================
   ДОБАВЛЕНО В 2.9.2
   ========================================================================== */

/* ---- кнопка личного кабинета ---- */
.acc-btn{position:relative;display:inline-grid;place-items:center;flex:none;
  width:40px;height:40px;border-radius:50%;background:#fff;border:1px solid var(--line);color:var(--ink)}
.acc-btn:hover{border-color:var(--green);color:var(--green)}
.acc-btn .acc-on{position:absolute;right:3px;bottom:3px;width:9px;height:9px;border-radius:50%;
  background:var(--green);border:2px solid #fff}
@media (max-width:1000px){.acc-btn{width:38px;height:38px}}

/* ---- корзина в шапке не должна «плавать» ----
   Сумма в корзине растёт с 4,90 € до 1 234,90 €, и вместе с ней прыгала вся
   шапка. Цифры делаем моноширинными, кнопке задаём минимальную ширину,
   а на узком экране прячем слово «Корзина» — остаются значок и сумма. */
@media (max-width:1000px){
  .cart-btn{min-width:0;padding:.5rem .7rem}
  .cart-btn .cl{display:none}
}
@media (max-width:380px){
  .cart-btn .cart-sum{display:none}
}

/* ---- на телефоне прилипшая шапка не должна занимать пол-экрана ----
   Шапка на узком экране складывается в две строки: кнопки и поиск. 164 px
   прилипшей шапки на телефоне — это пятая часть экрана. Поэтому после того
   как страницу прокрутили, строка поиска сворачивается: остаются бургер,
   логотип, аккаунт и корзина. Свёрнутое состояние возвращается наверху
   страницы, плавно, без рывка. */
@media (max-width:1000px){
  .hdr .search.desk{max-height:60px;transition:max-height .22s var(--ease),opacity .16s linear}
  html.as-scrolled .hdr .search.desk{max-height:0;opacity:0;overflow:hidden;
    padding-top:0;padding-bottom:0;border-width:0;pointer-events:none}
  html.as-scrolled .hdr .wrap{row-gap:0}
}

/* ---- выпадающий каталог на компьютере ----
   Столбец разделов + панель подразделов сбоку. Столбец от наведения не
   меняет высоту, поэтому пункт никогда не уезжает из-под курсора. */
.nav-drop{position:relative;display:inline-flex}
.nav-drop > a{display:inline-flex;align-items:center;gap:.3rem}
.nav-drop > a i{width:6px;height:6px;border-right:1.8px solid currentColor;border-bottom:1.8px solid currentColor;
  transform:rotate(45deg) translateY(-1px);transition:transform .2s var(--ease)}
.nav-drop:hover > a i,.nav-drop:focus-within > a i,.nav-drop.open > a i{transform:rotate(-135deg) translateY(-1px)}
.nav-panel{position:absolute;left:50%;top:calc(100% + .5rem);transform:translate(-50%,-6px);
  background:#fff;border:1px solid var(--line);border-radius:var(--r-md);
  box-shadow:0 24px 48px -24px rgba(22,35,27,.4);padding:.4rem;
  opacity:0;pointer-events:none;transition:opacity .18s var(--ease),transform .18s var(--ease);z-index:70}
.nav-drop:hover .nav-panel,.nav-drop:focus-within .nav-panel,.nav-drop.open .nav-panel{opacity:1;transform:translate(-50%,0);pointer-events:auto}
/* Закрытый скриптом соседний список не держится открытым по :hover/:focus. */
.nav-drop.shut .nav-panel{opacity:0!important;pointer-events:none!important;transform:translate(-50%,-6px)!important;transition:none}
.nav-drop.shut > a i{transform:rotate(45deg) translateY(-1px)}
/* Невидимый мостик между пунктом и панелью: курсор, идущий вниз к списку,
   не «проваливается» в зазор и список не пропадает. */
.nav-panel::before{content:"";position:absolute;left:0;right:0;top:-.6rem;height:.6rem}
/* Столбец разделов: одна колонка, своя прокрутка — названия видны целиком.
   Полоска прокрутки видна с самого открытия меню, а не только во время
   листания: иначе не понять, что список длиннее панели и внизу есть ещё
   разделы. Плюс тень у нижнего края — та же подсказка, но заметная краем
   глаза; она сама пропадает, когда долистали до конца (приём на фоновых
   градиентах: белые «заглушки» прокручиваются вместе с содержимым и
   закрывают тень у того края, который уже виден целиком). */
.np-col{width:296px;max-height:min(70vh,520px);overflow-y:auto;overflow-x:hidden;
  background:
    linear-gradient(#fff 30%, rgba(255,255,255,0)) top/100% 22px no-repeat local,
    linear-gradient(rgba(255,255,255,0), #fff 70%) bottom/100% 22px no-repeat local,
    radial-gradient(farthest-side at 50% 0, rgba(22,35,27,.17), rgba(22,35,27,0)) top/100% 11px no-repeat scroll,
    radial-gradient(farthest-side at 50% 100%, rgba(22,35,27,.17), rgba(22,35,27,0)) bottom/100% 11px no-repeat scroll}
.np-col::-webkit-scrollbar{width:8px}
.np-col::-webkit-scrollbar-track{background:var(--cream-2);border-radius:999px;margin:2px 0}
.np-col::-webkit-scrollbar-thumb{background:rgba(31,92,58,.38);border-radius:999px}
.np-col::-webkit-scrollbar-thumb:hover{background:rgba(31,92,58,.6)}
/* Панель подразделов стыкуется со столбцом рамка в рамку: между ними нет
   зазора, курсор переходит на неё и не теряет наведения. */
.np-fly{position:absolute;left:100%;top:-1px;margin-left:-1px;
  min-width:320px;max-width:min(620px,44vw);
  max-height:min(70vh,540px);overflow-y:auto;overflow-x:hidden;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-md);
  box-shadow:0 24px 48px -24px rgba(22,35,27,.4);padding:.4rem;
  }
.np-fly::-webkit-scrollbar{width:8px}
.np-fly::-webkit-scrollbar-track{background:var(--cream-2);border-radius:999px;margin:2px 0}
.np-fly::-webkit-scrollbar-thumb{background:rgba(31,92,58,.38);border-radius:999px}
.np-fly::-webkit-scrollbar-thumb:hover{background:rgba(31,92,58,.6)}
/* Стандартные scrollbar-width/scrollbar-color задаём только тем браузерам,
   где нет ::-webkit-scrollbar (Firefox). В Chrome и Safari эти свойства
   отменяют ::-webkit-правила и возвращают наезжающую полоску, которая на
   макбуке прячется, пока не начнёшь листать, — а нам нужно, чтобы её было
   видно сразу. */
@supports not selector(::-webkit-scrollbar){
  .np-col,.np-fly,.filters{scrollbar-width:thin;scrollbar-color:rgba(31,92,58,.38) var(--cream-2)}
}
/* Подразделов больше девяти — панель в две колонки и, значит, шире. */
.np-fly.wide{min-width:520px}
.np-fly.left{left:auto;right:100%;margin-left:0;margin-right:-1px}
.np-fly[hidden]{display:none}
/* На телефоне наведения нет, и меню открывается бургером — список лишний. */
@media (max-width:1000px){.nav-panel{display:none}.nav-drop > a i{display:none}}

/* ---- боковое меню каталога больше не «зависает» ----
   Список разделов выше экрана (полторы тысячи пикселей против девятисот).
   Липкий блок прижимается верхом, и нижняя часть становится недостижимой —
   выглядит это как зависание. Ограничиваем высоту экраном и даём прокрутку
   внутри самого списка. */
.filters{position:sticky;top:calc(var(--hdr-h, 72px) + 12px);align-self:start;
  max-height:calc(100vh - var(--hdr-h, 72px) - 28px);
  /* Без overscroll-behavior:contain: дойдя до конца списка, колесо мыши
     прокручивает дальше страницу. С contain курсор над списком «зависал»:
     низ списка оставался за краем экрана, а страница не двигалась. */
  overflow-y:auto;padding-right:.35rem}
/* Полоска прокрутки — та же зелёная, что в выпадающем списке разделов
   в шапке: сразу видно, что список длинный и его можно листать. */
.filters::-webkit-scrollbar{width:8px}
.filters::-webkit-scrollbar-track{background:var(--cream-2);border-radius:999px;margin:2px 0}
.filters::-webkit-scrollbar-thumb{background:rgba(31,92,58,.38);border-radius:999px}
.filters::-webkit-scrollbar-thumb:hover{background:rgba(31,92,58,.6)}
@media (max-width:1000px){
  .filters{position:static;max-height:none;overflow:visible;padding-right:0}
}

/* ==========================================================================
   2.9.3 — ШАПКА НА ТЕЛЕФОНЕ

   Кнопкам не хватало места, и шапка расползалась на три строки: бургер с
   логотипом, под ними язык с аккаунтом и корзиной, ещё ниже поиск. Ужимаем
   по шагам, от широкого экрана к узкому, и на 360 px всё умещается в две
   строки: кнопки сверху, поиск под ними.
   ========================================================================== */
@media (max-width:1000px){
  .hdr .wrap{flex-wrap:wrap;gap:.5rem .45rem;padding:.6rem 0}
  .brand{gap:.45rem;min-width:0}
  .brand svg{width:32px;height:32px;flex:none}
  .brand span{font-size:var(--fs-base);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .tools{order:2;margin-left:auto;gap:.35rem;flex:none}
  .search.desk{order:3;flex:1 0 100%;max-width:none;margin:0}
  .lang>button{padding:.4rem .6rem;font-size:var(--fs-sm)}
}
@media (max-width:560px){
  .burger{width:40px;height:40px;border-radius:12px;margin-right:.35rem}
  .burger span{width:18px}
  .brand svg{width:28px;height:28px}
  .brand span{font-size:var(--fs-note)}
  .acc-btn{width:36px;height:36px}
  .cart-btn{padding:.45rem .6rem;gap:.35rem}
  .cart-btn b{min-width:18px;height:18px;font-size:var(--fs-2xs)}
}
@media (max-width:430px){
  /* Название рядом со знаком уже не помещается — знак остаётся, он и есть
     логотип. На главную с него по-прежнему можно вернуться. */
  .brand span{display:none}
  .lang>button{padding:.4rem .5rem}
  .cart-btn .cart-sum{font-size:var(--fs-sm)}
}

/* Хлебные крошки и заголовок на странице товара не должны прилипать к шапке. */
.single-product .crumbs{padding-top:1rem}

/* ---- выбор раздела и раскрытые подразделы ----
   Выбранный раздел или подраздел — ярко, зелёным. Всё, что выпало из
   раскрытого раздела, — нежный светло-зелёный фон, чтобы было видно, что это
   одна группа. На телефоне плашки подразделов ниже и мельче. */
.filters li.on,
.catlist li.on{background:var(--green);color:#fff;font-weight:600;box-shadow:inset 4px 0 0 var(--lime)}
.filters li.on small,
.catlist li.on small{opacity:.85}
.filters li.sub:not(.on),
.catlist li.sub:not(.on){background:var(--lime-pale-2);border-color:var(--lime-line)}
.filters li.sub:not(.on):hover,
.catlist li.sub:not(.on):hover{background:var(--lime-pale)}
/* Раскрытый раздел выглядит как обычный пункт: собственной подсветки у него нет.
   Цветом выделяем только выбранный пункт (.on); что раздел раскрыт,
   видно по стрелке и по подразделам под ним. */
.filters li.sub::before,
.catlist li.sub::before{background:var(--lime-line)}
/* подраздел со своей стрелкой: раскрытый остаётся в тоне подразделов,
   а его вложенные подразделы — ещё светлее, почти белые с салатовым оттенком */
.filters li.sub.open:not(.on),
.catlist li.sub.open:not(.on){background:var(--lime-pale-2);font-weight:600}
.filters li.sub.d2:not(.on),.filters li.sub.d3:not(.on),
.catlist li.sub.d2:not(.on),.catlist li.sub.d3:not(.on){background:var(--lime-pale-3)}
.filters li.sub.d2:not(.on):hover,.filters li.sub.d3:not(.on):hover,
.catlist li.sub.d2:not(.on):hover,.catlist li.sub.d3:not(.on):hover{background:var(--lime-pale-2)}
@media (max-width:1000px){
  .filters ul,
  .catlist ul{gap:.3rem}
  .filters li.sub,
  .catlist li.sub{padding:.42rem .45rem .42rem .8rem;font-size:var(--fs-note);border-radius:8px}
  .filters li.sub .arw,
  .catlist li.sub .arw{width:34px;height:34px}
  .filters li.sub small,
  .catlist li.sub small{font-size:var(--fs-sm)}
  .filters li.sub.d2,
  .catlist li.sub.d2{padding-left:1.5rem}.filters li.sub.d3,.catlist li.sub.d3{padding-left:2.2rem}
}

/* ---- подписка: сообщение после нажатия «Подписаться» ----
   Раньше текст ложился поверх узкой «таблетки» формы и на телефоне не влезал
   («Почти гото-…», без отступов). Теперь после подписки поле и кнопка
   скрываются, а сообщение занимает форму целиком: значок, нормальные
   отступы, перенос строк. */
.form.done{padding:0;background:var(--green);box-shadow:none}
.form.done input,.form.done .btn{display:none}
.form.done .ok{position:static;inset:auto;opacity:1;pointer-events:auto;display:flex;align-items:center;gap:.75rem;
  width:100%;padding:.95rem 1.3rem;text-align:left;line-height:1.45;font-size:var(--fs-text);border-radius:inherit;text-wrap:pretty}
.form.done .ok::before{content:"✓";flex:none;width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.18);
  display:grid;place-items:center;font-weight:700;font-size:var(--fs-note)}
@media (max-width:560px){
  .form.done{border-radius:var(--r-md)}
  .form.done .ok{padding:1rem 1.1rem;font-size:var(--fs-note);align-items:flex-start}
  .form.done .ok::before{margin-top:.05rem}
}

/* ---- шапка на телефоне: логотип по центру между бургером и кнопками ----
   Знак крупнее — в высоту строки шапки (как кнопка бургера). Правило только
   для шапки: в выезжающем меню у логотипа свой размер. */
@media (max-width:1000px){
  .hdr .brand{flex:1 1 auto;justify-content:center;margin:0}
  .hdr .tools{margin-left:0}
  .hdr .brand svg{width:44px;height:44px}
}
@media (max-width:560px){
  .hdr .brand svg{width:42px;height:42px}
}

/* ==========================================================================
   ТИПОГРАФИКА И АКЦЕНТЫ
   Заголовки — Montserrat полужирным: он крупнее в строчных буквах, поэтому
   заголовок больше не выглядит мельче текста под ним. Мелкие заголовки
   (карточки товаров, строки корзины, меню) остаются на Manrope, чтобы два
   близких по духу гротеска не спорили на одном экране.
   ========================================================================== */
.sec-head h2,section h2{letter-spacing:-.01em}
/* Салатовые заливки с тёмным текстом — на всех кнопках действия (значения
   внесены прямо в правила выше: .badge, .cart-btn b, .play, .cat:hover .ic). */

/* Каталог в меню шапки — тот же список, что и на странице каталога.
   Сами правила выше общие (.filters … , .catlist …) — вид правится в одном месте. */
.nav-panel .catlist{padding:.25rem}
.mnav .ml-sub .catlist{padding:.25rem .25rem .6rem}
.catlist ul{list-style:none;margin:0;padding:0}

/* Меню шапки на ПК. Строка раздела — ссылка плюс стрелка вправо у тех
   разделов, у которых есть подразделы. Вид ссылок задан здесь целиком,
   чтобы панель подразделов выглядела так же, как столбец разделов. */
.nav-panel .nav-all{display:flex;align-items:center;justify-content:space-between;gap:.5rem;
  padding:.45rem .6rem;border-radius:8px 8px 0 0;font-size:var(--fs-note);font-weight:600;color:var(--green);
  border-bottom:1px solid var(--line);margin-bottom:.2rem}
.nav-panel .nav-all:hover{background:var(--cream-2)}
.nav-panel .nav-row{display:flex;align-items:center;border-radius:8px;min-width:0}
.nav-panel .nav-row>a{flex:1 1 auto;min-width:0;display:flex;align-items:center;justify-content:space-between;
  gap:.5rem;padding:.45rem .6rem;font-size:var(--fs-note);font-weight:400;color:var(--ink);line-height:1.3}
.nav-panel .nav-row>a .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav-panel .nav-row>a small{flex:none;color:var(--ink-2);opacity:.6;font-size:var(--fs-xs)}
.nav-panel .nav-row:hover,.nav-panel .nav-row.open{background:var(--cream-2)}
.nav-panel .nav-row:hover>a,.nav-panel .nav-row.open>a{color:var(--green)}
.nav-panel .nav-row.on{background:var(--green)}
.nav-panel .nav-row.on>a,.nav-panel .nav-row.on>a small{color:#fff;opacity:1}
.nav-panel .nav-row.on:hover>a{color:#fff}
/* Стрелка вправо — знак «здесь есть подразделы». Рисуем уголком из рамок,
   а не символом шрифта: символ зависит от набора глифов и на части машин
   показывался пустым прямоугольником. */
.nav-panel .nav-arw{flex:none;width:18px;height:18px;margin-right:.2rem;position:relative;
  color:var(--ink-2);opacity:.45;transition:opacity .16s var(--ease),transform .16s var(--ease)}
.nav-panel .nav-arw::before{content:"";position:absolute;left:5px;top:5px;width:6px;height:6px;
  border-top:1.7px solid currentColor;border-right:1.7px solid currentColor;transform:rotate(45deg)}
.nav-panel .nav-row:hover .nav-arw,.nav-panel .nav-row.open .nav-arw{opacity:1;color:var(--green);transform:translateX(2px)}
.nav-panel .nav-row.on .nav-arw{opacity:1;color:#fff}
/* Панель подразделов: заголовок — сам раздел, ниже его подразделы. */
/* Заголовок панели подразделов — ровно тот же вид, что «Все товары» в
   столбце разделов: один шрифт, один размер, одни отступы. Тогда обе
   шапки стоят на одной высоте и читаются как одно меню, а не как два. */
.np-fly .fly-head{display:flex;align-items:center;justify-content:space-between;gap:.5rem;
  padding:.45rem .6rem;border-radius:8px 8px 0 0;font-size:var(--fs-note);font-weight:600;color:var(--green);
  border-bottom:1px solid var(--line);margin-bottom:.2rem;line-height:1.3}
.np-fly .fly-head:hover{background:var(--cream-2)}
.np-fly .fly-head small{font-weight:400;font-size:var(--fs-xs);color:var(--ink-2);opacity:.6;flex:none}
.np-fly .fly-grid{display:grid;grid-template-columns:1fr;gap:.02rem}
.np-fly .fly-grid.cols2{grid-template-columns:1fr 1fr;gap:.02rem .4rem}
/* В панели подразделов названия длинные («Защита от вредителей
   (инсектициды)») — переносим их по словам, а не обрезаем многоточием:
   в меню человек выбирает по названию, и обрезанное название бесполезно. */
.np-fly .nav-row>a{font-size:var(--fs-ui);padding:.36rem .55rem;align-items:flex-start}
.np-fly .nav-row>a .nm{white-space:normal;overflow:visible;text-overflow:clip}
.np-fly .nav-row>a small{margin-top:.1rem}
.np-fly .fly-head .nm{white-space:normal}
.np-fly .nav-row.d2{position:relative}
.np-fly .nav-row.d2>a{padding-left:1.5rem;font-size:var(--fs-sm);color:var(--ink-2)}
.np-fly .nav-row.d2>a::before{content:"";position:absolute;left:.85rem;top:50%;width:6px;height:1px;background:var(--lime-line)}

/* Бургер-меню: один шрифт со списком разделов — тот же, что в каталоге.
   Размер чуть крупнее и полужирный — чтобы разделы меню читались как заголовки. */
/* (шрифт пунктов — в правиле «.mnav a.ml, .mnav button.ml» выше) */

/* ---- стрелки раскрытия: уголок из рамок, а не символ шрифта ----
   Раньше в кнопку писался символ ▾. В Manrope его нет, браузер подставлял
   запасной шрифт: глиф выходил мелким, сидел не по центру плашки и на
   разных машинах выглядел по-разному — стрелка будто уплывала от счётчика.
   Уголок нарисован рамками: один размер и одно место на всех машинах. */
.filters li .arw,
.catlist li .arw,
.ftoggle .arw{position:relative;font-size:0;line-height:0}
.filters li .arw::before,
.catlist li .arw::before,
.ftoggle .arw::before{content:"";position:absolute;left:50%;top:50%;width:8px;height:8px;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:translate(-50%,-65%) rotate(45deg)}
.filters li.sub .arw::before,
.catlist li.sub .arw::before{width:7px;height:7px;border-width:1.8px}

/* ---- кнопка «назад» на странице товара ----
   Стрелка теперь рисунком, а не символом «←»: у символа в нашем шрифте
   нет своего начертания, он подставлялся из запасного и выглядел
   растянутым. */
.fab-back svg{display:block;width:22px;height:22px}

/* ── живой поиск: список товаров под строкой поиска ─────────────────── */
.sdrop{position:absolute;top:calc(100% + .45rem);left:0;width:max(100%,440px);max-width:min(96vw,560px);
  z-index:61;background:#fff;border:1px solid var(--line);border-radius:var(--r-md);
  box-shadow:0 28px 60px -28px rgba(22,35,27,.45);padding:.35rem;display:none;
  max-height:min(72vh,560px);overflow-y:auto;overscroll-behavior:contain}
.sdrop.on{display:block}
/* Полоса прокрутки — как в выпадающем каталоге шапки: узкая, зелёная, на
   сливочной дорожке. Для Firefox — в @supports ниже. */
.sdrop::-webkit-scrollbar{width:8px}
.sdrop::-webkit-scrollbar-track{background:var(--cream-2);border-radius:999px;margin:6px 0}
.sdrop::-webkit-scrollbar-thumb{background:rgba(31,92,58,.38);border-radius:999px}
.sdrop::-webkit-scrollbar-thumb:hover{background:rgba(31,92,58,.6)}
@supports not selector(::-webkit-scrollbar){
  .sdrop{scrollbar-width:thin;scrollbar-color:rgba(31,92,58,.38) var(--cream-2)}
}
.sd-it{display:grid;grid-template-columns:52px 1fr auto;gap:.75rem;align-items:center;padding:.45rem .55rem;
  border-radius:12px;color:var(--ink);text-decoration:none}
.sd-it:hover,.sd-it.on{background:var(--lime-pale-2)}
.sd-it:hover .sd-tx b,.sd-it.on .sd-tx b{color:var(--green)}
.sd-im{width:52px;height:52px;border-radius:var(--r-sm);overflow:hidden;background:var(--cream-2);display:block}
.sd-im img{width:100%;height:100%;object-fit:cover;display:block}
.sd-tx{min-width:0;display:flex;flex-direction:column;gap:.15rem}
.sd-tx b{font-family:var(--head);font-weight:600;font-size:var(--fs-note);line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sd-alt{font-size:var(--fs-xs);color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sd-meta{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap}
.sd-cat{font-size:var(--fs-2xs);color:var(--ink-2)}
.sd-pr{text-align:right;white-space:nowrap;font-size:var(--fs-note)}
.sd-pr b{font-weight:600}
.sd-pr small{font-size:var(--fs-xs);color:var(--ink-2)}
.sd-pr s{display:block;font-size:var(--fs-xs);color:var(--ink-2)}
.sd-all{display:block;margin-top:.25rem;padding:.65rem .6rem;border-top:1px solid var(--line);
  font-size:var(--fs-ui);font-weight:600;color:var(--green);text-decoration:none;text-align:center;border-radius:0 0 12px 12px}
.sd-all:hover{background:var(--lime-pale-3)}
.sd-none{padding:.9rem .7rem;font-size:var(--fs-note);color:var(--ink-2)}
@media (max-width:560px){
  .sdrop{width:100%;max-width:none;max-height:60vh}
  .sd-it{grid-template-columns:44px 1fr auto;gap:.6rem}
  .sd-im{width:44px;height:44px}
}

/* ── описание раздела под товарами (inc/cat-seo.php) ────────────────── */
.cat-seo{max-width:780px;margin:2.2rem 0 0;padding-top:1.4rem;border-top:1px solid var(--line);color:var(--ink-2);font-size:var(--fs-text);line-height:1.65}
.cat-seo h2{font-family:var(--head);font-size:var(--fs-xl);color:var(--ink);margin:0 0 .6rem}
.cat-seo p{margin:0 0 .75rem}
.cat-seo strong{color:var(--ink);font-weight:600}
.cat-seo[hidden]{display:none}

/* ==========================================================================
   2.16 — порядок после аудита 29.09

   Один размер заголовка страницы. Было пять разных: правовые страницы
   24,8 px, блог 31, корзина 32, каталог и товар 33,6, оформление и кабинет
   38,4. Теперь у всех 33,6 px на компьютере и 24 px на телефоне. Главная
   (крупный заголовок на фото), статья блога и «Спасибо за заказ» — свои,
   это отдельные по смыслу экраны.
   ========================================================================== */
/* Сами размеры — в конце woo.css: он подключается после site.css. */

/* Вкладки правовых страниц на телефоне: были «одна зелёная плашка + голый
   текст рваными рядами». Теперь одинаковые плашки в одну строку с
   горизонтальной прокруткой, как фильтры в приложениях. */
@media (max-width:1000px){
  .info-nav{flex-wrap:nowrap;overflow-x:auto;gap:.4rem;margin:0 -16px;padding:0 16px .3rem;
    scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .info-nav::-webkit-scrollbar{display:none}
  .info-nav li{flex:none}
  .info-nav a{white-space:nowrap;background:#fff;border:1px solid var(--line);border-radius:999px;padding:.45rem .9rem}
  .info-nav a.on{border-color:var(--green)}
}

/* Поля ввода на телефоне — не меньше 16 px: иначе iPhone увеличивает
   страницу при нажатии на поле (панель расширенного поиска, сортировка). */
@media (max-width:1000px){
  .spanel input,.spanel select,.toolbar select,form.search input{font-size:var(--fs-input)}
}

/* Активные фильтры каталога (app.js: renderChips — #as-chips перед #grid) */
.as-chips{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;margin:0 0 1rem}
.as-chips[hidden]{display:none}
.as-chip{display:inline-flex;align-items:center;gap:.35rem;max-width:100%;padding:.35rem .55rem .35rem .8rem;
  border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--ink);
  font:inherit;font-size:var(--fs-sm);line-height:1.2;cursor:pointer;transition:border-color .2s,background .2s}
.as-chip span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:32ch}
.as-chip i{font-style:normal;font-size:var(--fs-base);line-height:1;color:var(--ink-2)}
.as-chip:hover,.as-chip:focus-visible{border-color:var(--green);background:var(--green-soft)}
.as-chip:hover i,.as-chip:focus-visible i{color:var(--green)}
.as-chip-clear{margin-left:.25rem;font-size:var(--fs-sm);color:var(--green);text-decoration:underline;text-underline-offset:2px}
.as-chip-clear:hover{color:var(--green-deep)}
@media (max-width:1000px){.as-chip span{max-width:22ch}}
.as-cat-upd{color:var(--ink-2)}

/* Страница 404 (404.php) */
.as-404{padding:1.2rem 0 4rem}
.as-404 > *{max-width:720px}
.as-404-lead{color:var(--ink-2);margin:.4rem 0 1.4rem;font-size:var(--fs-base);line-height:1.6}
.as-404-form{display:flex;gap:.5rem;margin:0 0 1.2rem}
.as-404-form input{flex:1;min-width:0;border:1px solid var(--line);border-radius:999px;padding:.7rem 1.1rem;font:inherit;font-size:var(--fs-input);background:#fff}
.as-404-form input:focus{outline:0;border-color:var(--green);box-shadow:0 0 0 3px rgba(31,92,58,.12)}
.as-404-links{display:flex;flex-wrap:wrap;gap:.6rem}


/* ---------- подборки (inc/bundles.php, рисует app.js) ----------
   Плашка в фирменном салатовом (или тёмно-зелёном — выбирается в подборке).
   Слева — название и текст, справа — скидка и «Добавить всю подборку»;
   ниже — лента карточек в одну строку, листается в сторону. */
.as-bundle{--asb-bg:var(--lime);--asb-ink:var(--green-deep);--asb-card:218px;background:var(--asb-bg);color:var(--asb-ink);border-radius:var(--r-lg);padding:2rem 2rem 1.6rem;margin:0 0 1.6rem;position:relative;overflow:hidden;isolation:isolate}
/* лёгкие «кольца» в углу — как на обложке главной */
.as-bundle::before{content:"";position:absolute;z-index:-1;right:-140px;top:-160px;width:460px;height:460px;border-radius:50%;
  background:radial-gradient(circle,transparent 54%,rgba(255,255,255,.22) 55%,rgba(255,255,255,.22) 56%,transparent 57%,transparent 67%,rgba(255,255,255,.16) 68%,rgba(255,255,255,.16) 69%,transparent 70%,transparent 80%,rgba(255,255,255,.1) 81%,rgba(255,255,255,.1) 82%,transparent 83%)}
.as-bundle::after{content:"";position:absolute;z-index:-1;left:-80px;bottom:-120px;width:320px;height:320px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.28),transparent 68%)}
.as-bundle--green{--asb-bg:var(--green);--asb-ink:#fff}
.as-bundle--green::after{background:radial-gradient(circle,rgba(168,200,58,.25),transparent 68%)}
.as-bundle .asb-head{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;margin-bottom:1.4rem}
.as-bundle .asb-kick{display:inline-flex;align-items:center;gap:.45rem;font-size:var(--fs-2xs);font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:.32rem .4rem .32rem .8rem;border-radius:999px;background:rgba(15,59,37,.12);margin-bottom:.7rem}
.as-bundle .asb-kick i{font-style:normal;min-width:1.5em;height:1.5em;display:grid;place-items:center;border-radius:999px;background:var(--green-deep);color:#fff;letter-spacing:0;padding:0 .35em}
.as-bundle--green .asb-kick{background:rgba(255,255,255,.16)}
.as-bundle--green .asb-kick i{background:var(--lime);color:var(--green-deep)}
.as-bundle h2{font-size:var(--h2-sec);line-height:1.12;color:inherit;letter-spacing:-.01em}
.as-bundle .asb-txt{max-width:64ch}
.as-bundle .asb-txt p{margin:.6rem 0 0;font-size:var(--fs-text);line-height:1.55;opacity:.9}
.as-bundle .asb-side{flex:none;display:flex;flex-direction:column;align-items:stretch;gap:.7rem;width:290px}
.as-bundle .asb-deal{background:#fff;color:var(--green-deep);border-radius:var(--r-md);padding:.85rem 1.1rem;display:flex;align-items:center;gap:.8rem;box-shadow:0 6px 18px rgba(15,59,37,.14)}
.as-bundle .asb-deal b{font-size:var(--fs-6xl);font-family:Montserrat,sans-serif;line-height:1;color:var(--clay);white-space:nowrap}
.as-bundle .asb-deal span{font-size:var(--fs-sm);line-height:1.35;font-weight:600}
.as-bundle .asb-all{background:var(--green-deep);color:#fff;white-space:normal;text-align:center}
.as-bundle .asb-all:hover{background:var(--green);transform:translateY(-1px)}
.as-bundle--green .asb-all{background:var(--lime);color:var(--green-deep)}
.as-bundle--green .asb-all:hover{background:var(--lime-hover)}
.as-bundle .asb-all.added{background:#fff;color:var(--green-deep)}
/* лента */
.as-bundle .asb-rail{position:relative;margin:0 -2rem}
.as-bundle .asb-grid{display:flex;gap:14px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding:0 2rem;padding:.3rem 2rem 1rem;scrollbar-width:none}
.as-bundle .asb-grid::-webkit-scrollbar{display:none}
.as-bundle .asb-grid{align-items:stretch}
/* все карточки одной ширины и высоты; цена и кнопка прижаты книзу */
.as-bundle .asb-grid>.p{flex:0 0 var(--asb-card);width:var(--asb-card);height:auto;scroll-snap-align:start;box-shadow:0 2px 10px rgba(15,59,37,.12);transition:transform .3s var(--ease),box-shadow .3s}
.as-bundle .asb-grid>.p:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(15,59,37,.18)}
/* затухание у края, за которым есть ещё карточки */
.as-bundle .asb-rail::before,.as-bundle .asb-rail::after{content:"";position:absolute;top:0;bottom:1rem;width:2.4rem;z-index:1;pointer-events:none;opacity:0;transition:opacity .25s}
.as-bundle .asb-rail::before{left:0;background:linear-gradient(90deg,var(--asb-bg),transparent)}
.as-bundle .asb-rail::after{right:0;background:linear-gradient(-90deg,var(--asb-bg),transparent)}
.as-bundle.asb-more-l .asb-rail::before,.as-bundle.asb-more-r .asb-rail::after{opacity:1}
.as-bundle .asb-nav{position:absolute;top:calc(50% - 1.5rem);z-index:2;width:46px;height:46px;border-radius:50%;border:0;background:#fff;color:var(--green-deep);display:grid;place-items:center;cursor:pointer;box-shadow:0 6px 18px rgba(15,59,37,.22);transition:transform .2s,background .2s}
.as-bundle .asb-nav:hover{transform:scale(1.07);background:var(--green-deep);color:#fff}
.as-bundle .asb-nav[hidden]{display:none}
.as-bundle .asb-nav svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.as-bundle .asb-prev{left:1rem}.as-bundle .asb-next{right:1rem}
/* в разделе каталога — поуже */
.as-bundle--compact{padding:1.5rem 1.5rem 1.2rem;--asb-card:200px}
.as-bundle--compact h2{font-size:var(--fs-4xl)}
.as-bundle--compact .asb-rail{margin:0 -1.5rem}
.as-bundle--compact .asb-grid{padding:.3rem 1.5rem 1rem;scroll-padding:0 1.5rem}
.as-cat-bundles{margin:0 0 .4rem}
.as-prod-bundles{margin:2.2rem 0 0}
.as-bundle-old{color:var(--ink-2);font-weight:400;font-size:.85em;margin-right:.2rem}
@media (max-width:1000px){
  .as-bundle .asb-head{flex-direction:column;align-items:stretch;gap:1rem}
  .as-bundle .asb-side{width:auto;flex-direction:row;align-items:center}
  .as-bundle .asb-deal{flex:1}
  .as-bundle .asb-all{flex:1}
}
/* на сенсорных экранах листают пальцем — стрелки не нужны */
@media (hover:none){ .as-bundle .asb-nav{display:none} }
@media (max-width:560px){
  /* телефон: ровно две карточки на экране, остальные — листать */
  .as-bundle,.as-bundle--compact{padding:1.2rem 1.1rem 1rem;border-radius:var(--r-md);--asb-card:calc((100% - 10px) / 2)}
  .as-bundle .asb-side{flex-direction:column;align-items:stretch}
  .as-bundle .asb-rail,.as-bundle--compact .asb-rail{margin:0 -1.1rem}
  .as-bundle .asb-grid,.as-bundle--compact .asb-grid{padding:.3rem 1.1rem .9rem;scroll-padding:0 1.1rem;gap:10px}
  .as-bundle .asb-txt p{font-size:var(--fs-note)}
}
.as-bundles-sec[hidden],.as-cat-bundles[hidden],.as-prod-bundles[hidden]{display:none}
/* Колонка каталога не должна растягиваться под ленту подборки: без
   min-width:0 элемент сетки берёт ширину по содержимому, и лента из 9
   карточек выдавливала страницу вправо. */
.cat-layout>*{min-width:0}
.as-cat-bundles,.as-prod-bundles{max-width:100%;min-width:0}
/* выезжающая корзина: скидка подборки */
.ci .ci-old{color:var(--ink-2);font-weight:400;font-size:.85em;margin-right:.15rem}
.ci .sum .ci-old{display:block;line-height:1.1}
.ci .ci-bundle{display:inline-block;margin:.25rem 0 .15rem;padding:.12rem .5rem;border-radius:999px;background:var(--lime-soft);color:var(--lime-ink);font-weight:600;font-size:var(--fs-xs)}