/* ==========================================================================
   СИСТЕМА РАЗМЕРОВ (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) */
  --read:760px;     /* колонка длинного текста (статья, 404, текст раздела) — от левого края .wrap */
  --ls-caps:.05em;  /* разрядка мелких подписей ЗАГЛАВНЫМИ */
  --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)}
.nav>a[aria-current]{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;font-variant-numeric:normal} /* табличная «1» сидит левее центра */
/* Бургер. Символ «≡» в разных шрифтах рисуется по-разному и на телефоне
   читается как опечатка, поэтому полоски рисуем сами. Кнопка зелёная и
   крупнее соседей: это главный вход в меню на телефоне. */
.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(90deg,rgba(9,30,19,.5) 0%,rgba(9,30,19,0) 65%),linear-gradient(180deg,rgba(13,45,29,.3) 0%,rgba(10,34,22,.55) 55%,rgba(9,30,19,.82) 100%),url(img/hero-garden.jpg) 50% 45%/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-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:1.2rem}
.hero-side .promo.b{grid-column:1/-1}
.hero-side .promo.a,.hero-side .promo.c{padding:1.3rem;min-height:0}
.hero-side .promo.a h3,.hero-side .promo.c h3{white-space:nowrap}
/* 1001–1040 px: узкие карточки чуть уже строки (lt «Rudens sodinimas») — заголовок на тон мельче, в одну строку. */
@media (min-width:1001px) and (max-width:1040px){.hero-side .promo.a h3,.hero-side .promo.c h3{font-size:1.12rem}}
.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 picture{position:absolute;inset:0}
.promo.a img{object-position:50% 58%}.promo.b img{object-position:50% 22%}.promo.c img{object-position:50% 30%}
.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}
/* «Партнёрам» — только при включённом маркетплейсе (front-page.php, .hero-side.mp): справа от «Семян»,
   яркая салатовая без фото, тёмно-зелёный текст (7,6:1), кольца «родника» как в герое. Вся карточка —
   одна ссылка на «Партнёры и продавцы»; рядом со «Смотреть» — логотипы наших партнёров, если загружены
   и в карточке есть место. */
.hero-side.mp .promo.b{grid-column:auto;padding:1.3rem}
.hero-side.mp .promo.b h3{white-space:nowrap}
.promo.d{padding:1.3rem;background:var(--green-deep);container-type:inline-size;transition:transform .4s var(--ease),box-shadow .4s var(--ease),background .3s}
.promo.d::before{display:none}
.promo.d:hover{background:#13482D}
.promo.d h3,.promo.d p{text-shadow:none}.promo.d h3{color:var(--lime)}.promo.d p{color:rgba(255,255,255,.88)}   /* тёмно-зелёная карточка: салатовый заголовок, белый текст (просьба Кристины 24.10.2026) */
.promo.d h3{white-space:nowrap}
.promo.d .rings{position:absolute;width:200px;right:-64px;bottom:-78px;z-index:0;fill:none;stroke:rgba(168,200,58,.22);stroke-width:1.6;transition:transform .9s var(--ease)}
.promo.d:hover .rings{transform:scale(1.08)}
.pd-row{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:.6rem;margin-top:1rem}
.promo.d .arrow{margin:0;color:var(--lime);border-bottom-color:var(--lime);white-space:nowrap}
.pav{display:flex;flex:none}
/* логотипы наших партнёров — горизонтальные плашки (24.10.2026: в кружке надпись не читалась) */
.pav{gap:5px}
.pav>span{height:18px;border-radius:5px;overflow:hidden;flex:none;display:flex;box-shadow:0 0 0 1px rgba(15,59,37,.14)}
.promo .pav img{position:static;height:100%;width:auto;object-fit:contain;filter:none;transform:none}
@container (max-width:340px){.pav{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)}
/* Маркетплейс: «Kasvataja: …» в карточке и окне товара — одной строкой */
.as-seller{display:block;max-width:100%;font-size:var(--fs-2xs);font-weight:600;color:var(--green);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .25s}
.as-seller:hover{color:var(--green-deep);text-decoration:underline}
/* «Похожий товар» (тот же сорт у другого продавца): тёмно-зелёный с салатовым
   текстом и салатовой обводкой — не путается с «Хит», «Новинка» и скидкой. */
.badge.sim{background:var(--green-deep);color:var(--lime);box-shadow:0 0 0 2px var(--lime),0 2px 10px -2px rgba(22,35,27,.35);white-space:nowrap}
.also-i .badge.sim{position:static;display:inline-block;margin:0 0 .3rem 2px;line-height:1.3}
.modal .box>.also{grid-column:1/-1;margin:0 2rem 1.6rem}
.also-i [data-open]{cursor:pointer}
@media (max-width:560px){.modal .box>.also{margin:0 1.2rem 1.2rem}}
.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(3,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)}
/* «Семья»: большая карточка с фото садовницы вертикальная (4:5) — лицо и луковицы целиком. */
.family .photo-stack{aspect-ratio:4/5;max-width:470px}
.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%;display:grid;place-items:center;padding:0;line-height:1}
.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}
/* «Информация о безопасности товара» (GPSR) у товаров партнёров — свёрнуто, по щелчку. */
.modal .info .m-gpsr{font-size:var(--fs-note);color:var(--ink-2)}
.modal .info .m-gpsr summary{cursor:pointer;color:var(--green);font-weight:600}
.modal .info .m-gpsr dl{margin:.3rem 0 0}
.modal .info .m-gpsr dt{color:var(--ink-2);margin-top:.35rem}.modal .info .m-gpsr dd{margin:0;color:var(--ink);white-space:pre-line;overflow-wrap:anywhere}
/* Ссылка на полное описание стоит сразу под выдержкой — там, где текст
   обрывается и человек как раз хочет читать дальше. */
.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;display:grid;place-items:center;padding:0;line-height:1}
.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}
  .hero-side .promo.a,.hero-side .promo.c{min-height:200px}
  .cats .row{grid-template-columns:repeat(3,1fr)}
  .trust .wrap{grid-template-columns:1fr 1fr}
  .trust .wrap>div:last-child:nth-child(odd){grid-column:1/-1}
  .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}
}
/* Телефон: три промо-карточки в один ряд — маленькие плитки с фото,
   только название (вся плитка — ссылка). Длинные названия — до 2 строк. */
@media (max-width:767px){
  .hero-side{grid-template-columns:repeat(3,1fr);grid-template-rows:none;gap:.4rem}
  .hero-side .promo.b,.hero-side .promo.a,.hero-side .promo.c{grid-column:auto;min-height:84px;padding:.5rem .45rem;border-radius:var(--r-md);justify-content:flex-end}
  .hero-side .promo h3,.hero-side .promo.a h3,.hero-side .promo.c h3{white-space:normal;font-size:.74rem;line-height:1.2;letter-spacing:-.01em;margin:0;overflow-wrap:normal}
  .hero-side .promo p,.hero-side .promo .arrow{display:none}
  .hero-side .promo:active{transform:scale(.97)}
  /* «Партнёрам» — салатовой полосой во всю ширину под тремя плитками: заголовок и «Смотреть» */
  .hero-side.mp .promo.b{padding:.5rem .45rem}
  .hero-side.mp .promo.b h3{white-space:normal}
  .hero-side.mp .promo.d{grid-column:1/-1;order:9;min-height:0;padding:.65rem .8rem;flex-direction:row;align-items:center;justify-content:space-between;gap:.6rem}
  .hero-side.mp .promo.d h3{font-size:.95rem}
  .hero-side.mp .promo.d .pd-row{margin:0}
  .hero-side.mp .promo.d .pav,.hero-side.mp .promo.d .rings{display:none}
  .hero-side.mp .promo.d .arrow{display:inline-block;font-size:.8rem}
}

/* 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)}
/* Условия для продавцов: подзаголовки и таблицы (на телефоне таблица листается внутри блока) */
.legal h4{font-size:var(--fs-text);font-weight:600;margin:1rem 0 .3rem;color:var(--ink)}
.legal .tbl{overflow-x:auto;margin:.4rem 0 1rem}
.legal table{width:100%;border-collapse:collapse;font-size:var(--fs-note);color:var(--ink-2)}
.legal th,.legal td{text-align:left;vertical-align:top;padding:.45rem .6rem;border-bottom:1px solid var(--line);line-height:1.5}
.legal th{color:var(--ink);font-weight:600}
.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:var(--read);margin:0;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;display:grid;place-items:center;padding:0;line-height:1}
.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)}

@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 a[aria-current]{color:var(--green);font-weight:600}
.mnav a.ml[aria-current]{color:var(--green);font-weight:600}
.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}
/* Телефон и планшет, страница товара: кнопка стоит на уровне панели
   покупки (.as-buybar, woo.css), в её левом поле, — панель выезжает рядом
   и ничего не перекрывает; с запасом на «вырез» снизу у iPhone. */
@media (max-width:820px){
  .single-product .fab-back{left:16px;bottom:calc(.6rem + env(safe-area-inset-bottom,0px));width:48px;height:48px}
}

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

   Почему раньше не держалась. Липкой была сама .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}
}

/* ---- выпадающий каталог на компьютере ----
   Столбец разделов + панель подразделов сбоку. Столбец от наведения не
   меняет высоту, поэтому пункт никогда не уезжает из-под курсора. */
.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)}
.as-sempty{display:flex;flex-direction:column;gap:.55rem;padding:0 .7rem .8rem}
.as-sempty:empty{display:none}
.as-sempty-r{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem}
.as-sempty-h{flex-basis:100%;font-size:var(--fs-note);color:var(--ink-2);white-space:nowrap}
.as-sempty .as-chip{text-decoration:none}
.as-sempty .as-chip span{max-width:none}
.empty.as-sempty-c{text-align:left;padding:1.25rem 0 2rem}
.empty.as-sempty-c .as-sempty{padding:.9rem 0 0}
@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:var(--read);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)}

/* Фильтры каталога в боковой панели (app.js: renderFacets — #as-facets под
   списком разделов, на телефоне — под «В наличии»): цена и характеристики.
   Флажки — тот же .chk, что «В наличии»,
   поле цены — как в панели расширенного поиска. */
.as-facets{display:flex;flex-direction:column;gap:1.4rem}
.as-facets #as-fgroups{display:flex;flex-direction:column;gap:1.4rem}
.as-facets #as-fgroups:empty{display:none}
.as-fprice .range{display:flex;align-items:center;gap:.45rem}
.as-fprice .range input{width:100%;min-width:0;padding:.5rem .6rem;border:1px solid var(--line);border-radius:8px;
  font:inherit;font-size:var(--fs-base);background:#fff;color:var(--ink);transition:border-color .2s}
.as-fprice .range input:hover{border-color:var(--green)}
.as-fprice .range input:focus{outline:0;border-color:var(--green);box-shadow:0 0 0 3px rgba(31,92,58,.12)}
.as-fprice .dash{color:var(--ink-3,var(--ink-2));flex:none}
/* число справа — на одной вертикали с числами в списке разделов (у пункта
   списка справа отступ .7rem, на телефоне .5rem и рамка) */
.as-facet .chk{padding:.3rem .7rem .3rem 0;transition:color .2s}
.as-facet .chk:hover{color:var(--green)}
/* переключатель зоны — того же размера и цвета, что флажки */
.as-facet input[type=radio]{accent-color:var(--green);width:17px;height:17px;margin:.1rem 0 0;flex:none}
.as-facet .chk .nm{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.as-facet .chk small{flex:none;opacity:.6;font-size:var(--fs-ui)}
.as-freset{align-self:flex-start}
.as-freset[hidden]{display:none}
.as-fempty{margin-top:1rem}
@media (max-width:1000px){.as-fprice .range input{font-size:var(--fs-input)}.as-facet .chk{padding-right:calc(.5rem + 1px)}
  /* телефон: порядок прежний — «В наличии», фильтры, разделы */
  .filters > div:first-child{order:-2}.filters > .as-facets{order:-1}}
@media (prefers-reduced-motion:reduce){.as-facet .chk,.as-fprice .range input{transition:none}}

/* Страница 404 (404.php) */
.as-404{padding:1.2rem 0 4rem}
.as-404 > *{max-width:var(--read)}
.page-plain > *{max-width:var(--read)}  /* обычная страница WP: текст от левого края .wrap, как статья */
.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}
/* Подборка на главной — узкая (24.10.2026): заголовок и описание — две строки, «−5 %» и
   «Добавить всю подборку» одной строкой справа, карточки маленькие горизонтальные
   (фото слева, название в 2 строки, цена и кнопка в ряд). Текст подборки не меняется —
   длинное описание обрезается многоточием, целиком — в подсказке. */
.as-bundle--mini{padding:1.1rem 1.4rem .8rem;--asb-card:276px;margin-bottom:0}
.as-bundle--mini .asb-head{align-items:center;gap:1.4rem;margin-bottom:.8rem}
.as-bundle--mini .asb-txt{flex:1;min-width:0;max-width:none;display:flex;flex-wrap:wrap;align-items:center;column-gap:.7rem}
.as-bundle--mini .asb-kick{margin:0}
.as-bundle--mini h2{font-size:var(--fs-3xl);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.as-bundle--mini .asb-txt p{flex-basis:100%;margin:.3rem 0 0;font-size:var(--fs-note);line-height:1.45;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.as-bundle--mini .asb-side{flex-direction:row;align-items:center;width:auto;gap:.6rem}
.as-bundle--mini .asb-deal{padding:.5rem .85rem;gap:.55rem;box-shadow:none;white-space:nowrap}
.as-bundle--mini .asb-deal b{font-size:var(--fs-2xl)}
.as-bundle--mini .asb-deal span{font-size:var(--fs-xs);white-space:nowrap}
.as-bundle--mini .asb-all{white-space:nowrap;padding:.7rem 1.2rem;font-size:var(--fs-ui)}
.as-bundle--mini .asb-rail{margin:0 -1.4rem}
.as-bundle--mini .asb-grid{gap:10px;padding:.2rem 1.4rem .5rem;scroll-padding:0 1.4rem}
.as-bundle--mini .asb-grid>.p{flex-direction:row}
.as-bundle--mini .asb-grid>.p:hover{transform:translateY(-2px)}
.as-bundle--mini .p .img{flex:0 0 96px;width:96px;aspect-ratio:auto}
.as-bundle--mini .p .body{padding:.55rem .7rem .6rem;gap:.15rem;min-width:0;display:grid;grid-template-columns:minmax(0,1fr) auto;align-content:start;align-items:end}
.as-bundle--mini .p .body>*{grid-column:1/-1}
.as-bundle--mini .p .cat-l,.as-bundle--mini .p .as-seller,.as-bundle--mini .p .add .qty{display:none}
.as-bundle--mini .p h3{font-size:var(--fs-sm);line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.6em}
.as-bundle--mini .p .stock{font-size:var(--fs-2xs)}
.as-bundle--mini .p .body>.price{grid-column:1;margin:0;padding-top:.35rem;white-space:nowrap}
.as-bundle--mini .p .price b{font-size:var(--fs-text)}
.as-bundle--mini .p .body>.add{grid-column:2;margin:0}
.as-bundle--mini .p .add .btn{padding:.4rem .75rem;font-size:var(--fs-xs);min-height:0;white-space:nowrap;flex:none}
.as-bundle--mini .p .badge{transform:scale(.8);transform-origin:0 0}
.as-bundle--mini .asb-nav{width:38px;height:38px;top:calc(50% - 1.2rem)}
@media (max-width:1000px){
  .as-bundle--mini .asb-head{flex-direction:column;align-items:stretch;gap:.7rem}
  .as-bundle--mini .asb-side{flex-direction:row;flex-wrap:wrap}
  .as-bundle--mini .asb-deal{flex:none}.as-bundle--mini .asb-all{flex:1}
}
@media (max-width:560px){
  .as-bundle--mini{padding:.9rem 1rem .7rem;--asb-card:252px}
  .as-bundle--mini .p .img{flex-basis:84px;width:84px}
  .as-bundle--mini .p .body>.price{grid-column:1/-1;padding-top:.2rem}
  .as-bundle--mini .p .body>.add{grid-column:1/-1;margin-top:.35rem}
  .as-bundle--mini .p .add .btn{flex:1}
  .as-bundle--mini h2{font-size:var(--fs-xl)}
  .as-bundle--mini .asb-txt p{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
  .as-bundle--mini .asb-side{flex-direction:column;align-items:stretch;gap:.5rem}
  .as-bundle--mini .asb-rail{margin:0 -1rem}
  .as-bundle--mini .asb-grid{padding:.2rem 1rem .4rem;scroll-padding:0 1rem}
}
/* Колонка каталога не должна растягиваться под ленту подборки: без
   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)}

/* Остаток на складе «12 шт.» — мягкая зелёная пилюля рядом с «В наличии». */
.qty-pill{display:inline-flex;align-items:center;gap:.25em;font-weight:600;font-style:normal;font-size:var(--fs-2xs);line-height:1.2;color:var(--green-deep);background:var(--green-soft);border-radius:999px;padding:.12rem .5rem;margin-left:.35rem;white-space:nowrap;font-variant-numeric:tabular-nums}
.qty-pill i{font-style:normal;font-weight:500}
.meta .qty-pill,.p-page-info .meta .qty-pill{margin-left:0;font-size:var(--fs-xs);padding:.25rem .6rem}
.p-page-info .meta .qty-pill{font-size:var(--fs-sm)}
.qty-pill[hidden]{display:none}
.topbar .tb-viber{display:none}

/* Лента Instagram в блоге: одна строка квадратов с прокруткой вбок. */
.ig-feed{margin-top:2.5rem}
.ig-head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin-bottom:.8rem}
.ig-head h2{margin:0;font-size:var(--fs-xl)}
.ig-all{color:var(--green);font-size:var(--fs-note);white-space:nowrap}
.ig-row{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 5 * 10px) / 6);gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px;scrollbar-width:thin}
.ig-it{position:relative;display:block;aspect-ratio:1/1;border-radius:14px;overflow:hidden;background:var(--green-soft);scroll-snap-align:start}
.ig-it img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease}
.ig-it:hover img{transform:scale(1.05)}
.ig-video::after{content:"";position:absolute;top:10px;right:10px;width:0;height:0;border-left:11px solid #fff;border-top:7px solid transparent;border-bottom:7px solid transparent;filter:drop-shadow(0 1px 2px rgba(0,0,0,.5))}
@media (max-width:760px){.ig-row{grid-auto-columns:calc((100% - 10px) / 2.4)}}

/* ── «Садовые работы» (page-aiatood.php) ─────────────────────────────── */
.gw-hero{padding:1rem 0 1rem}
.gw-hero-card{position:relative;border-radius:var(--r-lg);overflow:hidden;min-height:340px;display:flex;align-items:flex-end;background:var(--green-deep);color:#fff}
.gw-hero-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:100% 50%;filter:brightness(.85) saturate(1.06)}   /* фото садовницы справа: луковицы на перчатке и улыбка */
.gw-hero-card::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(9,28,18,.82) 0%,rgba(9,28,18,.55) 50%,rgba(9,28,18,.12) 100%)}
.gw-hero-txt{position:relative;z-index:2;padding:2.6rem;max-width:800px}
.gw-hero h1{font-size:var(--h1-page);color:#fff}
.gw-hero p{color:rgba(255,255,255,.86);margin:.6rem 0 .9rem}
.gw-price{display:block;font-size:var(--fs-xl);color:var(--sun);margin-bottom:1.2rem;white-space:nowrap}
.gw-hero .cta{display:flex;gap:.6rem;flex-wrap:wrap}
.gw-btn-ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.4)}
.gw-btn-ghost:hover{border-color:#fff}
.gw-hero .btn:hover{transform:translateY(-2px)}
.gw-sec{padding:2rem 0}
.gw-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.gw-tile{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:1.1rem;display:grid;grid-template-columns:44px 1fr;grid-template-rows:auto 1fr;column-gap:.9rem;row-gap:.2rem;align-items:start;transition:.3s var(--ease)}
.gw-tile:hover{border-color:var(--green);transform:translateY(-3px);box-shadow:0 20px 30px -24px rgba(22,35,27,.4)}
.gw-tile .ic{grid-row:1/3;width:44px;height:44px;border-radius:12px;background:var(--green-soft);display:grid;place-items:center;color:var(--green);transition:.3s var(--ease)}
.gw-tile:hover .ic{background:var(--lime);color:var(--green-deep)}
.gw-tile b{font-weight:600;font-size:var(--fs-text);line-height:1.25}
.gw-tile span{font-size:var(--fs-sm);color:var(--ink-2)}
.gw-steps{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,1fr);gap:10px;counter-reset:gw}
.gw-steps li{counter-increment:gw;background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:1.1rem;display:flex;flex-direction:column;gap:.25rem;transition:.3s var(--ease)}
.gw-steps li:hover{border-color:var(--green);transform:translateY(-3px);box-shadow:0 20px 30px -24px rgba(22,35,27,.4)}
.gw-steps li::before{content:counter(gw);width:32px;height:32px;border-radius:50%;background:var(--green);color:#fff;display:grid;place-items:center;font-weight:600;font-size:var(--fs-note);margin-bottom:.4rem}
.gw-steps b{font-weight:600;font-size:var(--fs-text);white-space:nowrap}
.gw-steps span{font-size:var(--fs-sm);color:var(--ink-2)}
.gw-band{background:var(--band);padding:1.5rem 0;margin:.5rem 0}
/* Вся полоса цены на одной линии: подпись и пункты стоят на базовой линии большого «25 €/час». */
.gw-band-in{display:flex;align-items:baseline;gap:1rem 2.4rem;flex-wrap:wrap}
.gw-band-in>div{white-space:nowrap}
.gw-big{font-size:2rem;color:var(--green-deep);margin-right:.5rem}
.gw-band ul{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:.5rem 1.6rem}
.gw-band li{font-size:var(--fs-note);display:flex;gap:.45rem;align-items:baseline}
.gw-band li::before{content:"✓";color:var(--green);font-weight:700}
.gw-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:1.2rem}
.gw-col{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:.85rem 1rem;font:inherit;font-weight:600;font-size:var(--fs-note);text-align:left;color:var(--ink);cursor:pointer;transition:.3s var(--ease);white-space:nowrap}
.gw-col:hover{border-color:var(--green);transform:translateY(-2px);box-shadow:0 16px 26px -22px rgba(22,35,27,.4)}
.gw-col.on{background:var(--green);border-color:var(--green);color:#fff}
.gw-col:focus-visible{outline:3px solid var(--sun);outline-offset:2px}
.gw-faq{display:grid;grid-template-columns:1fr 1fr;gap:0 2rem;align-items:start}
.gw-faq details{border-bottom:1px solid var(--line)}
.gw-faq summary{cursor:pointer;list-style:none;padding:1rem 2rem 1rem 0;font-weight:600;font-size:var(--fs-text);position:relative;transition:color .25s}
.gw-faq summary::-webkit-details-marker{display:none}
.gw-faq summary::after{content:"+";position:absolute;right:.2rem;top:.85rem;font-size:1.3rem;color:var(--green);transition:transform .3s var(--ease)}
.gw-faq details[open] summary::after{transform:rotate(45deg)}
.gw-faq summary:hover{color:var(--green)}
.gw-faq p{padding:0 0 1rem;color:var(--ink-2);font-size:var(--fs-note)}
.gw-req{display:grid;grid-template-columns:1fr 1.2fr;gap:2rem;align-items:start}
.gw-req h2{font-size:var(--h2-sec);margin-bottom:.4rem}
.gw-req>div>p{color:var(--ink-2)}
.gw-req-links{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:1.2rem}
.gw-req-links .btn:hover,.gw-f .btn:hover{transform:translateY(-2px)}
.gw-f-note{display:block;color:var(--ink-2);font-size:var(--fs-xs);margin-top:.7rem}
.gw-f-msg{margin-top:.6rem;color:#A33A2B;font-size:var(--fs-note)}
.gw-f-msg.ok{color:var(--green)}
.gw-f .fld [aria-invalid="true"]{border-color:#A33A2B;box-shadow:0 0 0 1px #A33A2B}
@media (max-width:1000px){
  .gw-tiles{grid-template-columns:1fr 1fr}
  .gw-steps{grid-template-columns:1fr 1fr}
  .gw-req{grid-template-columns:1fr}
}
@media (max-width:560px){
  .gw-hero-card{min-height:0}
  /* Телефон: под текстом фото не разглядеть — горизонтальная полоса фото сверху (улыбка и луковицы), текст под ней. */
  .gw-hero-card{flex-direction:column;align-items:stretch}
  .gw-hero-card::before{display:none}
  .gw-hero-card img{position:relative;height:auto;aspect-ratio:4/3;object-position:50% 78%;filter:none}   /* вертикальное фото: улыбка и луковицы */
  .gw-hero-txt{padding:1.6rem 1.4rem}
  .gw-tiles{grid-template-columns:1fr}.gw-tile{padding:.85rem 1rem}
  #gw-plants .sec-head{flex-direction:column;align-items:flex-start;gap:.6rem}
  .gw-cols{grid-template-columns:1fr 1fr;grid-auto-rows:1fr}
  .gw-col{white-space:normal;min-height:3.6em;line-height:1.25}
  .gw-faq{grid-template-columns:1fr}
  .gw-band-in{gap:.8rem}
  .gw-band ul{flex-direction:column}
}

/* ===== Главная: «Наши партнёры» — две узкие карточки: фото слева, текст справа; вся карточка — ссылка */
.ptn-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.ptn{display:grid;grid-template-columns:40% 1fr;min-height:236px;background:#fff;border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;color:inherit;transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .25s}
.ptn:hover{transform:translateY(-3px);border-color:var(--lime-line);box-shadow:0 18px 34px -24px rgba(22,35,27,.45)}
.ptn:focus-visible{outline:2px solid var(--green);outline-offset:3px}
.ptn-ph{position:relative;background:var(--cream-2)}
.ptn-ph>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.ptn:hover .ptn-ph>img{transform:scale(1.04)}
.ptn-logo{position:absolute;left:10px;bottom:10px;display:flex;padding:7px 10px;background:rgba(255,255,255,.94);border-radius:var(--r-sm)}
.ptn-logo img{height:20px;width:auto}
.ptn-logo.red{background:#FE0002}  /* Narva Bazar: белый знак на их красном (как на их логотипе) */
.ptn-tx{display:flex;flex-direction:column;gap:.4rem;padding:1.2rem 1.4rem;min-width:0}
.ptn-tx small{font-size:var(--fs-2xs);font-weight:600;letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--lime-ink);white-space:nowrap}
.ptn-tx b{font:700 var(--fs-6xl)/1.05 var(--wordmark);color:var(--green-deep);white-space:nowrap}
.ptn-tx span{color:var(--ink-2);font-size:var(--fs-note);line-height:1.5}
.ptn-tx em{margin-top:auto;padding-top:.3rem;display:flex;flex-direction:column;font-style:normal;font-size:var(--fs-2xs);color:var(--ink-2);line-height:1.45}   /* адрес и телефон — как подпись над названием: 3 размера в карточке */
.ptn-tx i{font-style:normal;white-space:nowrap}
@media (max-width:1000px){.ptn-row{grid-template-columns:1fr}}
@media (max-width:560px){
  .ptn{grid-template-columns:1fr;min-height:0}
  .ptn-ph{aspect-ratio:2/1}
}

/* Карточка товара — 3 размера шрифта везде, где она есть (каталог, главная, подборки, продавец, поиск, «С этим часто берут»;
   решение Кристины 24.10.2026): мелкая строка — бейдж, раздел, продавец, наличие, «от», старая цена (--fs-2xs);
   название, кнопка, «−/+» и количество (--fs-text); цена (--fs-lg). Мини-карточки подборок: --fs-2xs / --fs-sm / --fs-text. */
html body .p .badge,html body .p .cat-l,html body .p .as-seller,html body .p .stock,html body .p .stock *,html body .p .qty-pill,html body .p .qty-pill i,html body .p .price .from,html body .p .price s{font-size:var(--fs-2xs)}
html body .p h3,html body .p h3 a,html body .p .add .btn,html body .p .add .qty button,html body .p .add .qty .qn{font-size:var(--fs-text)}
html body .p .price b{font-size:var(--fs-lg)}
html body .as-bundle--mini .p h3,html body .as-bundle--mini .p h3 a,html body .as-bundle--mini .p .add .btn{font-size:var(--fs-sm)}
html body .as-bundle--mini .p .price b{font-size:var(--fs-text)}

/* Герой главной — сад с высоты (просьба Кристины 24.10.2026): на телефоне — свой файл, по центру круглые клумбы и теплицы. */
@media (max-width:560px){.hero-card{background:linear-gradient(180deg,rgba(13,45,29,.3) 0%,rgba(10,34,22,.6) 50%,rgba(9,30,19,.85) 100%),url(img/hero-garden-m.jpg) 45% 45%/cover no-repeat,var(--green)}}
/* Узкие телефоны: кнопка карточки — 13,6 px, иначе длинные надписи (lv «Izvēlēties iepakojumu») обрезаются. */
@media (max-width:420px){html body .p .add .btn{font-size:var(--fs-ui);padding-left:.8rem;padding-right:.8rem}}