/* ==========================================================================
   Пуд Мёда — компоненты. Токены (палитра, шкалы, тени) — в tokens.css,
   он загружается раньше и является единственным источником истины для
   кастомных свойств; повторно их здесь не определяем.
   ========================================================================== */
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body { margin:0; background:var(--bg); color:var(--ink); font-family:var(--font-ui); font-size:17px; line-height:var(--lh-body); -webkit-font-smoothing:antialiased; overflow-x:hidden; }

h1,h2,h3,h4 { font-family:var(--font-ui); font-weight:800; margin:0; line-height:var(--lh-tight); text-wrap:balance; }
p { margin:0; } a { color:inherit; text-decoration:none; } img { max-width:100%; }
.mono { font-variant-numeric:tabular-nums; }
.voice { font-family:var(--font-voice); }
.prose { font-family:var(--font-read); line-height:var(--lh-long); max-width:var(--measure); }
/* viewport-fit=cover: в ландшафте на телефонах с вырезом добавляем безопасные отступы */
.wrap { width:100%; max-width:var(--maxw); margin-inline:auto;
  padding-inline:calc(var(--gut) + env(safe-area-inset-left)) calc(var(--gut) + env(safe-area-inset-right)); }
.muted { color:var(--ink-soft); }
.eyebrow { font-family:var(--font-voice); font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--honey-deep); font-weight:500; display:inline-flex; align-items:center; gap:9px; }
.eyebrow::before { content:""; width:22px; height:1.5px; background:var(--honey); }

.btn { --_bg:var(--honey); --_fg:var(--on-honey); font-family:var(--font-sans); font-weight:650; font-size:16px; display:inline-flex; align-items:center; justify-content:center; gap:.5em; padding:13px 24px; border-radius:999px; border:1px solid transparent; background:var(--_bg); color:var(--_fg); cursor:pointer; transition:transform .25s var(--spring), box-shadow .25s var(--ease), background .2s; box-shadow:0 6px 20px -8px rgba(224,144,14,.7); position:relative; overflow:hidden; }
.btn:hover { transform:translateY(-3px); box-shadow:0 14px 28px -8px rgba(224,144,14,.85); }
.btn--sm { padding:9px 16px; font-size:14px; }
.btn--ghost { --_bg:color-mix(in srgb, var(--honey) 8%, transparent); --_fg:var(--ink); border-width:1.5px; border-color:color-mix(in srgb, var(--ink) 58%, transparent); box-shadow:none; }
.btn--ghost:hover { --_bg:color-mix(in srgb, var(--honey) 16%, transparent); --_fg:var(--honey-deep); border-color:var(--honey); box-shadow:none; }
.btn:focus-visible, a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline:2px solid var(--honey); outline-offset:2px; }
/* Капля мёда — разовый смыв по нажатию, а не бесконечный цикл под курсором. */
.btn--drip::before { content:""; position:absolute; top:-3px; left:30%; width:10px; height:10px; border-radius:50%; background:var(--honey-bright); transform:translateY(-14px) scale(.6); opacity:0; }
.btn--drip:active::before { animation:drip .5s var(--ease); }
@keyframes drip { 0%{transform:translateY(-14px) scale(.6);opacity:0} 30%{opacity:1} 100%{transform:translateY(40px) scale(1.1);opacity:0} }
.hex { aspect-ratio:1/1; clip-path:polygon(25% 4%, 75% 4%, 100% 50%, 75% 96%, 25% 96%, 0% 50%); }

/* header */
header.nav { position:sticky; top:0; z-index:50; transition:background .3s, border-color .3s, backdrop-filter .3s; border-bottom:1px solid transparent; }
header.nav.scrolled { background:color-mix(in srgb, var(--bg) 84%, transparent); backdrop-filter:saturate(1.4) blur(12px); border-bottom-color:var(--line); }
.nav-inner { display:flex; align-items:center; gap:20px; height:var(--nav-h); }
.brand { display:flex; align-items:center; gap:11px; font-family:var(--font-voice); font-weight:600; font-size:19px; }
.brand-mark, .cert__brand .bm { background:var(--honey-deep); color:var(--on-honey); display:grid; place-items:center; }
.brand-mark { width:30px; height:34px; box-shadow:0 2px 0 rgb(var(--shadow-rgb) / .35); }
.brand-mark svg { width:15px; height:15px; }
.nav-links { display:flex; gap:24px; margin-left:16px; }
.nav-links a { font-size:15px; color:var(--ink-soft); position:relative; padding:4px 0; }
.nav-links a.active, .nav-links a:hover { color:var(--ink); }
.nav-links a::after { content:""; position:absolute; left:0; right:100%; bottom:-2px; height:2px; background:var(--honey); transition:right .3s var(--ease); border-radius:2px; }
.nav-links a.active::after, .nav-links a:hover::after { right:0; }
.nav-right { margin-left:auto; display:flex; align-items:center; gap:12px; }
.nav-auth { display:flex; align-items:center; gap:12px; }
/* Один рецепт icon-кнопки на семь мест: круг/капсула фиксированного --size,
   тонкая рамка, цвет — единственное, что меняется при hover. */
.msgr, .cart, .theme-toggle, .mnav__close, .modal__close,
.carousel__btn, .cart-row__del, .step-btn {
  --size: 40px;
  inline-size:var(--size); block-size:var(--size);
  display:grid; place-items:center; border-radius:var(--r-pill);
  border:var(--rule); background:transparent; color:var(--ink-soft);
  cursor:pointer; transition:color var(--d-fast), border-color var(--d-fast), transform var(--d-fast) var(--ease-out);
}
.msgr, .cart { --size:38px; position:relative; }
.msgr:hover, .cart:hover { color:var(--honey-deep); border-color:var(--honey); transform:translateY(-2px); }
.msgr svg, .cart svg { width:18px; height:18px; }
.cart__count { position:absolute; top:-5px; right:-5px; min-width:18px; height:18px; padding:0 4px; border-radius:9px; background:var(--seal); color:#fff; font-size:11px; font-weight:600; font-variant-numeric:tabular-nums; display:grid; place-items:center; transform:scale(0); transition:transform .25s var(--spring); }
.cart__count.show { transform:scale(1); }
.lk-btn { font-size:15px; font-weight:600; padding:9px 18px; border-radius:999px; border:1px solid var(--line); transition:all .2s; }
.lk-btn:hover { border-color:var(--honey); color:var(--honey-deep); }
button.lk-btn { background:transparent; color:inherit; cursor:pointer; font-family:inherit; }
.logout-form { display:inline-flex; margin:0; }
.theme-toggle { --size:38px; }
.theme-toggle:hover { color:var(--honey-deep); border-color:var(--honey); transform:translateY(-2px); }
.theme-toggle svg { width:17px; height:17px; }

/* бургер + мобильное меню (по умолчанию скрыты, включаются в media-запросах) */
.burger { display:none; width:42px; height:42px; border-radius:12px; border:1px solid var(--line); background:transparent; cursor:pointer; padding:0; place-items:center; gap:5px; flex-direction:column; }
.burger:hover { border-color:var(--honey); }
.burger__bar { display:block; width:19px; height:2px; border-radius:2px; background:var(--ink); transition:transform .28s var(--ease), opacity .18s var(--ease); }
.burger[aria-expanded="true"] .burger__bar:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] .burger__bar:nth-child(2) { opacity:0; }
.burger[aria-expanded="true"] .burger__bar:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

.mnav-scrim { position:fixed; inset:0; z-index:60; background:rgba(20,14,6,.5); backdrop-filter:blur(2px); opacity:0; transition:opacity .28s var(--ease); }
.mnav-scrim.open { opacity:1; }
.mnav { position:fixed; z-index:70; top:0; right:0; bottom:0; width:min(340px, 88vw); display:flex; flex-direction:column;
  background:var(--bg-elev); border-left:1px solid var(--line); box-shadow:-24px 0 60px -30px rgba(var(--shadow),.9);
  transform:translateX(100%); transition:transform .32s var(--ease); overflow-y:auto; overscroll-behavior:contain;
  padding-bottom:max(20px, env(safe-area-inset-bottom)); }
.mnav.open { transform:none; }
.mnav[hidden], .mnav-scrim[hidden] { display:none; }   /* иначе display:flex перебивает [hidden] и панель остаётся в потоке */
.mnav__head { display:flex; align-items:center; justify-content:space-between; padding:20px 20px 14px; border-bottom:1px solid var(--line-soft); position:sticky; top:0; background:var(--bg-elev); z-index:2; }
.mnav__title { font-size:11px; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-faint); }
.mnav__close { color:var(--ink); font-size:17px; }
.mnav__close:hover { border-color:var(--honey); color:var(--honey-deep); }
.mnav__links { display:flex; flex-direction:column; padding:10px 12px; }
.mnav__links a { padding:14px 14px; border-radius:12px; font-size:17px; font-weight:600; color:var(--ink); min-height:48px; display:flex; align-items:center; }
.mnav__links a:hover { background:var(--bg-sunk); }
.mnav__links a.active { color:var(--honey-deep); background:color-mix(in srgb, var(--honey) 11%, transparent); }
.mnav__foot { margin-top:auto; display:grid; gap:10px; padding:18px 20px 8px; border-top:1px solid var(--line-soft); }
.mnav__foot .btn, .mnav__foot form, .mnav__foot form .btn { width:100%; }
body.mnav-open { overflow:hidden; }

/* sections — единая плавная вертикальная шкала вместо ступеней в media-запросах */
.sect { padding-block:clamp(48px, 6.5vw, 88px); }
.sect-head { max-width:56ch; margin-bottom:clamp(28px, 3.5vw, 44px); }
.sect-head h2 { font-size:clamp(30px,4vw,46px); letter-spacing:-.015em; margin-top:14px; }
.sect-head p { margin-top:14px; color:var(--ink-soft); font-size:18px; max-width:52ch; }
.band { background:var(--bg-elev); border-block:1px solid var(--line); }

/* hero */
/* Одна и та же медовая подложка у героя и у «внутреннего героя» (.phero) —
   не два похожих градиента, а один визуальный язык. */
.hero, .phero { background:linear-gradient(180deg, color-mix(in srgb, var(--honey) 9%, var(--bg)) 0%, var(--bg) 82%); }
/* Герой — цельный блок: медовая заливка во всю ширину, растворяющаяся в фоне страницы. */
.hero { position:relative; display:flex; align-items:center; min-height:clamp(540px, 72vh, 760px);
  padding-block:clamp(36px,5vw,56px) clamp(56px,7vw,96px); overflow:hidden; }
/* Узор равномерен по всей ширине — никаких боковых масок, иначе фон «проявляется» с одной стороны.
   Гасим только вниз, чтобы полотно не обрывалось линией на стыке со следующей секцией.
   Размеры холста задаёт CSS: даже с устаревшим буфером он всегда закрывает герой целиком. */
#comb { position:absolute; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; opacity:.7;
  -webkit-mask-image:linear-gradient(to bottom, #000 0 58%, rgba(0,0,0,.28) 86%, transparent 100%);
  mask-image:linear-gradient(to bottom, #000 0 58%, rgba(0,0,0,.28) 86%, transparent 100%); }
.hero-grid { position:relative; z-index:2; width:100%; display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:clamp(28px,4vw,56px); align-items:center; }
.hero-copy { max-width:640px; }
/* Верхняя граница кегля подобрана так, чтобы неразрывное «под вашим именем»
   помещалось в свою колонку и не наезжало на иллюстрацию. */
.hero h1 { font-size:clamp(36px,4.4vw,60px); letter-spacing:-.02em; margin-top:20px; }
.hero h1 .accent { position:relative; font-style:italic; color:var(--honey-deep); white-space:nowrap; }
.hero h1 .accent svg { position:absolute; left:-2%; right:-2%; bottom:-.3em; width:104%; height:.4em; color:var(--honey); overflow:visible; }
.hero h1 .accent svg path { stroke-dasharray:340; stroke-dashoffset:340; animation:draw 1.1s var(--ease) .7s forwards; }
@keyframes draw { to { stroke-dashoffset:0; } }
.hero .lead { margin-top:22px; font-size:19px; color:var(--ink-soft); max-width:34em; }
.hero .cta { margin-top:30px; display:flex; gap:14px; flex-wrap:wrap; }
/* Цифры доверия — равные колонки с разделителями вместо «слипшегося» flex-ряда.
   Колонки подстраиваются под количество фактов: их задаёт пасека в настройках,
   поэтому жёсткое «repeat(3)» оставляло бы четвёртый пункт висеть в одиночку. */
.hero .trust { margin-top:clamp(26px,3.5vw,36px); padding-top:22px; border-top:1.5px dashed var(--line);
  display:grid; grid-template-columns:repeat(auto-fit, minmax(120px, 1fr)); gap:14px 0; max-width:620px; }
.trust > div { padding-inline:18px; border-left:1px solid var(--line); }
.trust > div:first-child { padding-left:0; border-left:none; }
.trust b { display:block; font-family:var(--font-voice); font-size:clamp(20px,2.2vw,25px); font-weight:600; line-height:1.1; letter-spacing:-.01em; font-variant-numeric:tabular-nums; }
.trust span { display:block; margin-top:7px; font-size:12px; line-height:1.4; color:var(--ink-soft); }

/* летящая пчела — путь в vw/vh, а не в абсолютных px: не «убегает» за герой
   на широких экранах и не требует JS/resize-обработчика (main.css было
   авторское под ~1360px и ломалось на любой другой ширине). */
.bee { position:absolute; top:0; left:0; width:40px; height:40px; z-index:3; pointer-events:none;
  transform:translate(-8vw, 44vh); animation:fly 17s linear infinite; will-change:transform; }
@keyframes fly {
  0%   { transform:translate(-8vw, 44vh) rotate(6deg); opacity:0; }
  4%   { opacity:1; }
  25%  { transform:translate(20vw, 12vh) rotate(-10deg); }
  50%  { transform:translate(48vw, 30vh) rotate(8deg); }
  75%  { transform:translate(76vw, 10vh) rotate(-6deg); }
  94%  { opacity:1; }
  100% { transform:translate(104vw, 34vh) rotate(4deg); opacity:0; }
}
/* transform-box:view-box — точка вращения задаётся в координатах viewBox
   (18,14)/(26,14) — плечевой сустав крыла, а не bbox-проценты, которые для
   составной группы из двух эллипсов было бы неочевидно считать. */
.bee .wing { transform-box:view-box; }
.bee .wing.l { transform-origin:18px 14px; animation:flap-l .12s ease-in-out infinite alternate; }
.bee .wing.r { transform-origin:26px 14px; animation:flap-r .12s ease-in-out infinite alternate; animation-delay:.06s; }
@keyframes flap-l { from { transform:rotate(-6deg) } to { transform:rotate(26deg) } }
@keyframes flap-r { from { transform:rotate(6deg) } to { transform:rotate(-26deg) } }

/* hero honey illustration — статична: атмосфера, а не аттракцион */
.hero-art { position:relative; display:flex; justify-content:center; align-items:center; }
.honey-art { width:100%; max-width:min(100%, 420px); height:auto; overflow:visible; }

/* products — auto-fill: ширина карточки одинакова при любом их числе
   (с auto-fit единственный товар растянулся бы во всю ленту). */
.products { display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap:20px; }
/* Один рецепт карточки на десять контекстов: глубина — тональная ступень и
   тень, а не рамка. Отличаются только --pad (задаётся точечно ниже) и то,
   что реагирует на hover (не все карточки кликабельны). */
.prod, .feat, .kpi, .hive-card, .card-basic, .crm-card,
.about-fig, .review, .rep-month, .gift-cta__list {
  --pad: 22px;
  background:var(--bg-elev); border:0; border-radius:var(--r-s); padding:var(--pad);
  box-shadow:var(--e1);
}
.prod { transition:transform .3s var(--spring), box-shadow .3s var(--ease); }
.prod:hover { transform:translateY(-6px); box-shadow:var(--e3); }
.prod__hex { width:56px; margin-bottom:18px; transition:transform .4s var(--spring); }
.prod:hover .prod__hex { transform:scale(1.08); }
.prod h3 { font-size:20px; } .prod .desc { color:var(--ink-soft); font-size:14px; margin-top:6px; min-height:2.6em; }
.prod__foot { display:flex; align-items:baseline; justify-content:space-between; margin-top:16px; padding-top:14px; border-top:1px solid var(--line-soft); }
.price { font-weight:700; font-size:19px; font-variant-numeric:tabular-nums; } .price small { color:var(--ink-faint); font-weight:400; font-size:11.5px; }
.prod__foot .more { font-size:14px; color:var(--honey-deep); font-weight:600; }
.cert-card { display:block; }
.cert-card__ic { width:42px; height:46px; display:grid; place-items:center; background:color-mix(in srgb, var(--honey) 14%, transparent); color:var(--honey-deep); margin-bottom:14px; transition:transform .4s var(--spring); }
.cert-card__ic svg { width:20px; height:20px; }
.cert-card:hover .cert-card__ic { transform:scale(1.08); }
.cert-card__more { display:inline-block; margin-top:14px; font-size:14px; font-weight:600; color:var(--honey-deep); }
.cert-card__more.muted { color:var(--ink-faint); font-weight:500; }

/* pills */
.pill { font-size:13px; font-weight:600; padding:5px 11px; border-radius:999px; display:inline-flex; align-items:center; gap:6px; white-space:nowrap; }
.pill::before { content:""; width:6px; height:6px; border-radius:50%; background:currentColor; }
.pill.ok, .pill.in { color:var(--ok); background:color-mix(in srgb, var(--meadow) 15%, transparent); }
.pill.warn, .pill.low { color:var(--warn); background:color-mix(in srgb, var(--honey) 16%, transparent); }
.pill.crit, .pill.order { color:var(--crit); background:color-mix(in srgb, var(--seal) 15%, transparent); }

/* calculator */
.calc { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:clamp(28px,3.5vw,44px); align-items:start; }
.locs { display:flex; flex-direction:column; gap:12px; }
/* Один автомат состояний на пять «выбираемых карточек» (.loc/.fchip/.pack/.plan/.check):
   рамка цвета var(--line) в покое, медовая рамка при hover, медовая рамка +
   тонированный фон при выборе. .fchip — тумблер-фильтр, а не радио-выбор,
   поэтому его «нажатое» состояние осознанно другое (залит, а не тонирован). */
.loc, .fchip, .pack, .plan, .check {
  border:1.5px solid var(--line); background:var(--bg-elev); cursor:pointer;
  transition:border-color var(--d-fast), background var(--d-fast), color var(--d-fast), transform var(--d-fast) var(--ease-out);
}
.loc:hover, .fchip:hover, .pack:hover, .plan:hover, .check:hover {
  border-color:color-mix(in srgb, var(--honey) 45%, var(--line));
}
/* :has() и обычные атрибутные селекторы намеренно НЕ смешаны в одном списке:
   в паре браузеров смена aria-pressed на элементе не переучитывала стиль,
   если то же правило параллельно содержало ветку с :has() — отдельные
   правила с одинаковым телом работают надёжно везде. */
.loc[aria-pressed="true"], .plan[aria-pressed="true"], .pack[aria-pressed="true"] {
  border-color:var(--honey); background:color-mix(in srgb, var(--honey) 9%, var(--bg-elev));
}
.loc--radio:has(input:checked), .plan--radio:has(input:checked), .check:has(input:checked) {
  border-color:var(--honey); background:color-mix(in srgb, var(--honey) 9%, var(--bg-elev));
}
.loc--radio:has(input:focus-visible), .plan--radio:has(input:focus-visible) { outline:2px solid var(--honey); outline-offset:2px; }

.loc { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:16px; text-align:left; padding:17px 20px; border-radius:var(--r-s); font:inherit; color:inherit; }
.loc:hover { transform:translateX(3px); }
.loc__dot { width:18px; height:18px; border-radius:50%; border:2px solid var(--line); transition:all .2s var(--spring); }
.loc[aria-pressed="true"] .loc__dot, .loc--radio:has(input:checked) .loc__dot { border-color:var(--honey); background:var(--honey); box-shadow:inset 0 0 0 3px var(--bg-elev); }
/* Те же карточки участка/варианта, но на радиокнопках — в форме оформления. */
.visually-hidden { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.loc__name { font-weight:700; font-size:16px; } .loc__meta { font-size:13px; color:var(--honey-deep); margin-top:2px; font-variant-numeric:tabular-nums; }
.loc__price { font-weight:700; font-size:15px; white-space:nowrap; text-align:right; font-variant-numeric:tabular-nums; }
.qty { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-top:14px; padding:15px 20px; border:1.5px solid var(--line); border-radius:var(--r-md); background:var(--bg-elev); }
.qty__label b { display:block; font-size:15px; } .qty__label span { font-size:12.5px; color:var(--ink-soft); }
.stepper { display:flex; align-items:center; gap:6px; }
.step-btn { border-radius:var(--r-s); background:var(--bg); color:var(--ink); font-size:20px; }
.step-btn:hover:not(:disabled) { border-color:var(--honey); color:var(--honey-deep); transform:scale(1.08); }
.step-btn:disabled { opacity:.35; cursor:not-allowed; }
.qty__val { font-size:22px; font-weight:700; width:42px; text-align:center; font-variant-numeric:tabular-nums; }
.summary { background:var(--bg-elev); border:1px solid var(--line); border-radius:var(--r-lg); padding:26px; position:sticky; top:calc(var(--nav-h) + 20px); box-shadow:0 40px 80px -60px rgba(var(--shadow),.9); }
.sum-amt { font-size:clamp(30px,5vw,42px); font-weight:800; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.sum-amt small { font-size:16px; color:var(--ink-soft); font-weight:400; }
.sum-rows { margin-top:18px; border-top:1px solid var(--line-soft); padding-top:14px; display:grid; gap:9px; }
.sum-row { display:flex; justify-content:space-between; font-size:14px; color:var(--ink-soft); }
.sum-row .mono { color:var(--ink); font-variant-numeric:tabular-nums; }
.disc-badge { display:inline-flex; gap:6px; font-size:13px; font-weight:600; color:var(--meadow); background:color-mix(in srgb, var(--meadow) 14%, transparent); padding:4px 10px; border-radius:999px; margin-top:10px; opacity:0; transform:scale(.9); transition:opacity .25s, transform .25s var(--spring); }
.disc-badge.on { opacity:1; transform:scale(1); }
.pay-note { margin-top:16px; padding:14px 16px; background:var(--bg-sunk); border-radius:var(--r-sm); font-size:13.5px; color:var(--ink-soft); }
.pay-note b { color:var(--ink); font-variant-numeric:tabular-nums; }
.summary .btn { width:100%; margin-top:18px; }
.incl-wrap { margin-top:26px; display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.incl-col h4 { font-size:13px; font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-faint); margin-bottom:12px; }
.incl-col ul { list-style:none; padding:0; margin:0; display:grid; gap:9px; }
.incl-col li { font-size:14px; color:var(--ink-soft); display:flex; gap:9px; align-items:baseline; }
.incl-col.yes li::before { content:"✓"; color:var(--meadow); font-weight:700; }
.incl-col.no li::before { content:"—"; color:var(--ink-faint); font-weight:700; }
.terms { margin-top:24px; padding:18px 20px; border-left:3px solid var(--honey); background:var(--bg-elev); border-radius:0 var(--r-sm) var(--r-sm) 0; font-size:14.5px; color:var(--ink-soft); }
.terms b { color:var(--ink); }

/* breadcrumbs + inner hero */
.phero { border-bottom:1px solid var(--line); }
.phero-inner { padding-block:34px 46px; max-width:760px; }
.crumbs { font-size:14px; color:var(--ink-soft); display:flex; gap:8px; margin-bottom:18px; }
.crumbs a:hover { color:var(--honey-deep); } .crumbs span { color:var(--ink-faint); }
.phero h1 { font-size:clamp(36px,5.5vw,58px); letter-spacing:-.02em; margin-top:12px; }
.phero .lead { margin-top:16px; font-size:18px; color:var(--ink-soft); max-width:36em; }
.chip { font-size:14px; color:var(--ink); background:var(--bg-elev); border:1px solid var(--line); padding:8px 14px; border-radius:999px; display:inline-flex; align-items:center; gap:8px; }
.chip svg { width:15px; height:15px; color:var(--meadow); }
.chips { margin-top:24px; display:flex; flex-wrap:wrap; gap:10px; }

/* how it works steps */
.steps { display:grid; grid-template-columns:repeat(3,1fr); gap:44px 22px; position:relative; }
.step { padding:26px 24px; border:1px solid var(--line); border-radius:var(--r-md); background:var(--bg); transition:transform .3s var(--spring), border-color .3s; position:relative; z-index:1; }
.steps-path { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; overflow:visible; z-index:3; }
.steps-line { fill:none; stroke:var(--honey); stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; opacity:.55; }
.steps-dot { fill:var(--honey-deep); filter:drop-shadow(0 0 5px color-mix(in srgb, var(--honey) 70%, transparent)); }
.step:hover { transform:translateY(-4px); border-color:color-mix(in srgb, var(--honey) 45%, var(--line)); }
.step__n { font-size:15px; font-weight:700; color:var(--on-honey); background:var(--honey); width:34px; height:38px; display:grid; place-items:center; margin-bottom:16px; font-variant-numeric:tabular-nums; }
.step h3 { font-size:19px; } .step p { margin-top:8px; font-size:14.5px; color:var(--ink-soft); }

/* features */
.feat-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.feat { --pad:24px; transition:transform .3s var(--spring), box-shadow .3s var(--ease); }
.feat:hover { transform:translateY(-4px); box-shadow:var(--e2); }
.feat__ic { width:44px; height:48px; display:grid; place-items:center; background:color-mix(in srgb, var(--honey) 14%, transparent); color:var(--honey-deep); margin-bottom:16px; }
.feat__ic svg { width:22px; height:22px; }
.feat h3 { font-size:18px; } .feat p { margin-top:7px; font-size:14px; color:var(--ink-soft); }

/* guarantee band */
.guar { background:linear-gradient(135deg, var(--honey), var(--honey-bright)); }
.guar-inner { display:grid; grid-template-columns:auto 1fr; gap:32px; align-items:center; color:var(--on-honey); }
.guar-num { font-family:var(--font-voice); font-size:clamp(64px,12vw,120px); font-weight:700; line-height:.9; color:var(--on-honey); font-variant-numeric:tabular-nums; }
.guar-num small { display:block; font-size:18px; font-weight:600; letter-spacing:.05em; }
.guar-txt h2 { color:var(--on-honey); font-size:clamp(26px,4vw,38px); } .guar-txt p { color:var(--on-honey); margin-top:12px; font-size:17px; max-width:40em; }

/* faq */
.faq { max-width:820px; }
.faq-item { border-bottom:1px solid var(--line); }
.faq-q { width:100%; text-align:left; background:none; border:none; cursor:pointer; padding:22px 40px 22px 0; font-family:var(--font-display); font-size:19px; font-weight:700; color:var(--ink); position:relative; }
.faq-q::after { content:"+"; position:absolute; right:6px; top:50%; transform:translateY(-50%); font-size:26px; color:var(--honey-deep); transition:transform .3s var(--ease); }
.faq-item.open .faq-q::after { transform:translateY(-50%) rotate(45deg); }
.faq-a { max-height:0; overflow:hidden; transition:max-height .35s var(--ease); }
.faq-a-inner { padding:0 0 22px; color:var(--ink-soft); font-size:16px; max-width:60em; }

/* catalog cards with jar */
.filters { position:sticky; top:var(--nav-h); z-index:40; background:color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter:saturate(1.3) blur(10px); border-bottom:1px solid var(--line); }
.filters-inner { padding-block:16px; display:flex; flex-wrap:wrap; gap:20px 28px; align-items:center; }
.filter-group { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.filter-group > .fg-label { font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint); }
.fchip { font-size:14px; font-weight:600; padding:7px 15px; border-radius:var(--r-pill); color:var(--ink-soft); }
.fchip:hover { color:var(--ink); }
.fchip[aria-pressed="true"] { border-color:var(--honey); background:var(--honey); color:var(--on-honey); }
.filter-count { margin-left:auto; font-size:13px; color:var(--ink-soft); font-variant-numeric:tabular-nums; }
.card { background:var(--bg-elev); border:0; border-radius:var(--r-s); box-shadow:var(--e1); overflow:hidden; display:flex; flex-direction:column; transition:transform .3s var(--spring), box-shadow .3s var(--ease); }
.card.clickable { cursor:pointer; }
.card.clickable:hover { transform:translateY(-6px); box-shadow:var(--e3); }
.card__img, .modal__img { background:radial-gradient(120% 100% at 50% 0%, color-mix(in srgb, var(--jar,#E0900E) 28%, var(--bg-sunk)), var(--bg-sunk)); display:grid; place-items:center; }
.card__img { position:relative; aspect-ratio:4/3; overflow:hidden; }
.card__photo { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .4s var(--spring); }
.card.clickable:hover .card__photo { transform:scale(1.04); }
.modal__photo { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.card.clickable:hover .card__img .vessel { transform:translateY(-4px); }

/* Сосуд: один компонент, четыре силуэта (apps/catalog/vessels.py). Размер и
   форма меняются вместе — банка не просто перекрашивается во флягу, она
   физически меньше. --fill двигает заливку translateY-ом, а не сменой y
   (только transform анимируется дёшево); @property делает переход плавным
   даже при явном изменении инлайновой переменной через JS. */
@property --fill { syntax:"<number>"; inherits:true; initial-value:.62; }
.vessel { height:calc(var(--vessel-scale, .7) * 80%); width:auto; transition:transform .4s var(--spring); animation:vesselIn .3s var(--ease-out); }
@keyframes vesselIn { from { opacity:0; transform:scale(.85); } }
.card__img .vessel, .modal__img .vessel { filter:drop-shadow(0 10px 16px rgb(var(--shadow-rgb) / .4)); }
.modal__img .vessel { filter:drop-shadow(0 16px 22px rgb(var(--shadow-rgb) / .45)); }
.vessel__body { fill:var(--s-raise); stroke:var(--wax-deep); stroke-width:1.5; }
.vessel__honey, .vessel__meniscus {
  transform-box:fill-box;
  transform:translateY(calc((1 - var(--fill, .62)) * 100%));
  transition:transform var(--d-slow) var(--ease-out);
}
.vessel__meniscus { opacity:.55; }
.vessel__gloss { opacity:.2; pointer-events:none; }
.vessel__cap { fill:var(--wood); }

.card__sort { position:absolute; top:12px; left:12px; font-size:12.5px; font-weight:600; background:color-mix(in srgb, var(--bg-elev) 88%, transparent); color:var(--ink); padding:5px 10px; border-radius:999px; border:1px solid var(--line); }
.avail { position:absolute; top:12px; right:12px; font-size:12.5px; font-weight:600; padding:5px 10px; border-radius:999px; display:inline-flex; align-items:center; gap:6px; background:color-mix(in srgb, var(--bg-elev) 88%, transparent); }
.avail::before { content:""; width:6px; height:6px; border-radius:50%; background:currentColor; }
.avail.in { color:var(--meadow); } .avail.low { color:var(--honey-deep); } .avail.order { color:var(--ink-faint); }
.card__body { padding:18px 20px 20px; display:flex; flex-direction:column; flex:1; }
.card__body h3 { font-size:20px; } .card__desc { color:var(--ink-soft); font-size:14px; margin-top:6px; flex:1; }
.card__foot { display:flex; align-items:baseline; justify-content:space-between; margin-top:16px; padding-top:14px; border-top:1px solid var(--line-soft); }

/* modal */
.modal { position:fixed; inset:0; z-index:100; display:none; }
.modal.open { display:block; }
.modal__scrim { position:absolute; inset:0; background:rgba(20,14,6,.55); backdrop-filter:blur(3px); opacity:0; transition:opacity .3s var(--ease); }
.modal.open .modal__scrim { opacity:1; }
.modal__box { position:absolute; left:50%; top:50%; transform:translate(-50%,-46%) scale(.96); width:min(920px, calc(100vw - 36px)); max-height:calc(100dvh - 60px); overflow:auto; overscroll-behavior:contain; background:var(--bg); border:1px solid var(--line); border-radius:var(--r-lg); opacity:0; transition:opacity .3s var(--ease), transform .35s var(--spring); box-shadow:0 50px 100px -40px rgba(0,0,0,.6); }
.modal.open .modal__box { transform:translate(-50%,-50%) scale(1); opacity:1; }
.modal__grid { display:grid; grid-template-columns:1fr 1fr; }
.modal__img { position:relative; min-height:340px; }
.modal__close { position:absolute; top:14px; right:14px; background:var(--bg-elev); color:var(--ink); font-size:20px; z-index:2; }
.modal__close:hover { border-color:var(--honey); color:var(--honey-deep); }
.modal__body { padding:32px 34px; }
.modal__body .sort-tag { font-size:14px; font-weight:600; color:var(--honey-deep); }
.modal__body h2 { font-size:30px; margin-top:6px; }
.m-avail { font-size:13px; font-weight:600; padding:5px 11px; border-radius:999px; display:inline-flex; align-items:center; gap:7px; border:1px solid var(--line); margin-top:10px; }
.m-avail::before { content:""; width:7px; height:7px; border-radius:50%; background:currentColor; }
.m-avail.in { color:var(--meadow); } .m-avail.low { color:var(--honey-deep); } .m-avail.order { color:var(--ink-faint); }
.modal__desc { margin-top:16px; color:var(--ink-soft); font-size:15.5px; }
.lab-note { margin-top:14px; font-size:14px; color:var(--ink-soft); display:flex; align-items:center; gap:8px; }
.lab-note svg { width:16px; height:16px; color:var(--meadow); flex:none; }
.pack-label { font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint); margin:22px 0 10px; }
.packs { display:flex; gap:8px; flex-wrap:wrap; }
.pack { font-size:14.5px; font-weight:600; font-variant-numeric:tabular-nums; padding:9px 14px; border-radius:var(--r-s); color:var(--ink-soft); }
.pack[aria-pressed="true"] { color:var(--ink); }
.buy-row { display:flex; align-items:center; gap:16px; margin-top:24px; }
.m-price { margin-left:auto; text-align:right; }
.m-price .amt { font-size:28px; font-weight:800; font-variant-numeric:tabular-nums; }
.m-price .per { font-size:12px; color:var(--ink-faint); }
.modal__actions { display:flex; gap:12px; margin-top:24px; }
.modal__actions .btn { flex:1; }

/* toast */
.toast { position:fixed; left:50%; bottom:28px; transform:translateX(-50%) translateY(20px); background:var(--ink); color:var(--bg); font-size:14px; font-weight:550; padding:13px 22px; border-radius:999px; box-shadow:0 16px 40px -12px rgba(0,0,0,.5); opacity:0; pointer-events:none; transition:opacity .3s, transform .3s var(--spring); z-index:120; display:flex; align-items:center; gap:10px; }
.toast.show { opacity:1; transform:translateX(-50%) translateY(0); }
.toast svg { width:18px; height:18px; color:var(--honey-bright); }

/* gift certificate preview */
.gift-layout { display:grid; grid-template-columns:1fr .92fr; gap:46px; align-items:start; }
fieldset { border:none; margin:0 0 30px; padding:0; }
.leg { display:flex; align-items:center; gap:11px; margin-bottom:16px; }
.leg b { width:26px; height:26px; border-radius:50%; background:var(--honey); color:var(--on-honey); display:grid; place-items:center; font-size:14px; font-weight:700; flex:none; font-variant-numeric:tabular-nums; }
.leg h3 { font-size:20px; }
.gift-side { position:sticky; top:calc(var(--nav-h) + 20px); display:flex; flex-direction:column; gap:20px; }
.cert { position:relative; border-radius:var(--r-lg); overflow:hidden; background:var(--bg-elev); border:1px solid var(--line); box-shadow:0 40px 80px -54px rgba(var(--shadow),.9); }
.cert__paper { position:relative; padding:30px 28px 26px; background:var(--bg-elev); }
.cert__frame { position:absolute; inset:12px; border:1.5px solid color-mix(in srgb, var(--honey) 55%, var(--line)); border-radius:16px; pointer-events:none; }
.cert__inner { position:relative; z-index:2; text-align:center; }
.cert__brand { display:inline-flex; align-items:center; gap:8px; font-family:var(--font-voice); font-weight:600; font-size:14px; }
.cert__brand .bm { width:20px; height:23px; }
.cert__brand .bm svg { width:11px; height:11px; }
.cert__kicker { font-family:var(--font-voice); font-size:11px; font-weight:500; letter-spacing:.08em; text-transform:uppercase; color:var(--honey-deep); margin-top:16px; }
.cert__title { font-size:25px; margin-top:8px; }
.cert__sub { font-size:13px; color:var(--ink-soft); margin-top:5px; }
.cert__for { margin-top:18px; font-size:12.5px; color:var(--ink-soft); }
.cert__name { font-family:var(--font-read); font-size:26px; font-style:italic; font-weight:600; color:var(--honey-deep); margin-top:2px; min-height:1.2em; word-break:break-word; }
.cert__greet { font-family:var(--font-read); font-size:16px; font-style:italic; color:var(--ink); margin-top:14px; min-height:1.4em; padding:0 6px; }
.cert__divider { border-top:1.5px dashed color-mix(in srgb, var(--honey) 45%, transparent); margin:18px 0 14px; }
.cert__meta { display:flex; justify-content:space-between; font-size:12.5px; color:var(--ink-soft); }
.cert__meta b { color:var(--ink); display:block; font-size:14px; font-variant-numeric:tabular-nums; }
.cert__code { margin-top:16px; font-size:15px; font-weight:600; letter-spacing:.08em; font-variant-numeric:tabular-nums; color:var(--ink); padding:9px; border:1px dashed color-mix(in srgb, var(--honey) 55%, var(--line)); border-radius:8px; background:color-mix(in srgb, var(--honey) 6%, transparent); }
.cert__code small { display:block; font-size:9.5px; letter-spacing:.14em; color:var(--ink-faint); margin-top:3px; }
.cert__seal { position:absolute; right:20px; bottom:16px; width:62px; height:62px; z-index:3; }
.cert__seal svg { width:100%; height:100%; filter:drop-shadow(0 4px 8px rgba(90,20,15,.35)); }
.cert__seal .st { font-family:var(--font-hand); }
.cc { text-align:right; font-size:12.5px; color:var(--ink-faint); margin-top:6px; font-variant-numeric:tabular-nums; }
.err-text { color:var(--seal); font-size:13px; margin-top:6px; }

/* forms */
.field { margin-bottom:16px; } .field-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
label.lbl { display:block; font-size:13.5px; color:var(--ink-soft); margin-bottom:7px; font-weight:550; }
label.lbl .opt { color:var(--ink-faint); font-weight:400; }
.inp, .ta, input[type=text], input[type=email], input[type=password], input[type=tel], input[type=number], textarea, select { width:100%; font:inherit; font-size:15.5px; color:var(--ink); background:var(--bg-elev); border:1.5px solid var(--line); border-radius:11px; padding:11px 14px; transition:border-color .2s; }
.inp:focus, .ta:focus, input:focus, textarea:focus, select:focus { border-color:var(--honey); outline:none; }
.ta, textarea { resize:vertical; min-height:92px; line-height:1.5; }
.auth-box { max-width:440px; margin:70px auto; background:var(--bg-elev); border:1px solid var(--line); border-radius:var(--r-lg); padding:34px; }
.auth-box h1 { font-size:26px; margin-bottom:6px; } .auth-box .btn { width:100%; margin-top:8px; }
.auth-alt { margin-top:18px; text-align:center; font-size:14px; color:var(--ink-soft); }
.auth-alt a { color:var(--honey-deep); font-weight:600; }

/* messages */
.msgs { display:grid; gap:10px; margin-block:20px; }
.msg { padding:12px 16px; border-radius:var(--r-sm); font-size:14.5px; border:1px solid var(--line); background:var(--bg-elev); }
.msg.success { border-color:color-mix(in srgb, var(--meadow) 50%, var(--line)); color:var(--meadow); }
.msg.error { border-color:color-mix(in srgb, var(--seal) 50%, var(--line)); color:var(--seal); }

/* dashboard */
.kpis { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.grid-2 { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.dash-h2 { font-size:24px; margin:36px 0 18px; }
.dash-h2:first-of-type { margin-top:0; }
.hive-card__top { display:flex; justify-content:space-between; align-items:center; gap:10px; }
.hive-card__body { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-top:16px; }
.hive-card__body > div { flex:1; min-width:0; }
.hive-card__row { display:flex; justify-content:space-between; gap:10px; font-size:13.5px; }
.hive-card__vessel { flex:none; width:52px; height:64px; display:grid; place-items:end center; }
.hive-card__vessel .vessel { height:100%; }
.hrow__side { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.kpi { --pad:18px 20px; }
.kpi__lbl { font-size:13px; color:var(--ink-soft); }
.kpi__val { font-family:var(--font-voice); font-size:28px; font-weight:600; margin-top:6px; letter-spacing:-.01em; font-variant-numeric:tabular-nums; }
.kpi__val small { font-size:15px; color:var(--ink-soft); font-weight:400; }
.hive-card { transition:box-shadow .3s var(--ease); }
.hive-card:hover { box-shadow:var(--e2); }
.hive-card.attn { border-left:3px solid var(--seal); }
.gauge__track { height:12px; border-radius:999px; background:var(--bg-sunk); overflow:hidden; border:1px solid var(--line); margin-top:8px; }
.gauge__fill { height:100%; width:0; border-radius:999px; background:linear-gradient(90deg, var(--honey-deep), var(--honey-bright)); transition:width 1.1s var(--ease); }
.hrow { display:flex; justify-content:space-between; align-items:center; padding:10px 0; font-size:14px; border-bottom:1px solid var(--line-soft); }
.hrow:last-child { border-bottom:none; }
.hrow span:first-child { color:var(--ink-soft); }

/* footer */
footer { border-top:1px solid var(--line); padding-block:52px 28px; margin-top:20px; background:var(--bg-sunk); }
.foot-grid { display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px; }
.foot-brand p { color:var(--ink-soft); margin-top:12px; font-size:15px; max-width:26em; }
.foot-msgr { display:flex; gap:10px; margin-top:12px; }
.foot-col h4 { font-size:12.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint); margin:0 0 12px; }
.foot-col a, .foot-col p { display:block; color:var(--ink-soft); font-size:15px; padding:4px 0; }
.foot-col a:hover { color:var(--honey-deep); }
.foot-bottom { margin-top:36px; padding-top:20px; border-top:1.5px dashed var(--line); display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:13px; color:var(--ink-faint); }

/* CRM layout — full-width app shell */
.crm { display:grid; grid-template-columns:240px minmax(0,1fr); align-items:start; max-width:1560px; margin-inline:auto; }
.crm > * { min-width:0; }   /* иначе лента вкладок и таблицы растягивают колонку на мобильных */
.crm-side { position:sticky; top:var(--nav-h); padding:26px 14px; border-right:1px solid var(--line); min-height:calc(100vh - var(--nav-h)); }
.crm-nav { display:flex; flex-direction:column; gap:4px; }
.crm-nav a { display:flex; align-items:center; gap:10px; padding:10px 14px; border-radius:10px; color:var(--ink-soft); font-size:15px; font-weight:550; }
.crm-nav a:hover { background:var(--bg-elev); color:var(--ink); }
.crm-nav a.active { background:color-mix(in srgb, var(--honey) 12%, var(--bg-elev)); color:var(--honey-deep); }
.crm-nav-label { font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint); padding:14px 14px 6px; margin-top:6px; border-top:1px solid var(--line-soft); }
.crm-main { padding:30px 36px 70px; min-width:0; }
.crm-title { display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; margin-bottom:22px; }
.crm-title h1 { font-size:28px; }
.kpi-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:26px; }
.crm-filters { display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:20px; }
.crm-filters select, .crm-filters input { max-width:220px; }
.crm-filters .count { margin-left:auto; font-size:13px; color:var(--ink-soft); font-variant-numeric:tabular-nums; }
.table-scroll { overflow-x:auto; border:1px solid var(--line); border-radius:var(--r-md); background:var(--bg-elev); }
.crm-table { width:100%; border-collapse:collapse; font-size:14px; min-width:640px; }
.crm-table th { text-align:left; font-size:11.5px; font-weight:600; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-faint); padding:14px 14px 12px; border-bottom:1px solid var(--line); white-space:nowrap; }
.crm-table td { padding:13px 14px; border-bottom:1px solid var(--line-soft); font-variant-numeric:tabular-nums; }
.crm-table tr:last-child td { border-bottom:none; }
.crm-table tr:hover td { background:color-mix(in srgb, var(--honey) 5%, transparent); }
.crm-table a.rowlink { color:var(--honey-deep); font-weight:600; }
.crm-form-inline { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.crm-form-inline select, .crm-form-inline input { max-width:150px; }
.crm-card { margin-bottom:20px; }
.crm-card h3 { font-size:17px; margin-bottom:14px; }
.crm-actions { display:flex; gap:8px; flex-wrap:wrap; }
.crm-two { display:grid; grid-template-columns:1fr 1fr; gap:20px; align-items:start; }
.crm-two > * { min-width:0; }

/* ==========================================================================
   Блоки, добавленные по ТЗ: О пасеке, карусель продукции, отзывы, подарок,
   варианты выкупа, корзина, календарь отчётов, настройки уведомлений.
   ========================================================================== */

/* варианты выкупа (ТЗ 4.1.3) */
.plan-label { font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint); margin:22px 0 10px; }
.plans { display:grid; gap:10px; }
.plan { display:block; text-align:left; padding:15px 18px; border-radius:var(--r-s); font:inherit; color:inherit; }
.plan__name { display:block; font-weight:650; font-size:15.5px; }
.plan__meta { display:block; font-size:13px; color:var(--ink-soft); margin-top:3px; }

/* О пасеке */
.about-grid { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:clamp(32px,4vw,56px); align-items:start; }
.about-h2 { font-size:clamp(28px,4vw,42px); letter-spacing:-.015em; margin-top:14px; }
.about-lead { margin-top:16px; color:var(--ink-soft); font-family:var(--font-read); font-size:var(--t4); line-height:var(--lh-long); max-width:46em; }
.about-vals { display:grid; gap:14px; margin-top:26px; }
.about-val { padding-left:16px; border-left:3px solid var(--honey); }
.about-val b { display:block; font-size:15.5px; }
.about-val span { font-size:14.5px; color:var(--ink-soft); }
/* Правая колонка «О пасеке»: живое фото над цифрами. */
.about-side { display:flex; flex-direction:column; gap:18px; }
.about-photo { display:block; width:100%; height:auto; border-radius:var(--r-md); border:1px solid var(--line);
  box-shadow:0 18px 40px -28px rgba(36,26,6,.55); }
.about-photo__cap { font-size:13px; line-height:1.5; color:var(--ink-soft); margin-top:-8px; }

/* Галерея: крупные кадры вперемешку с обычными, без обрезки лиц по центру. */
/* align-items:start снимает растяжение строки грида — раньше оно било
   object-fit:cover изнутри (height:100% побеждало aspect-ratio на самой
   картинке). Теперь пропорция задаётся на РАМКЕ (.gal), а не на <img>:
   у широкого слота своя, родная для альбомных снимков, у портретных фото —
   своя через data-orientation, который {% photo %} проставляет из catalog.json. */
.gallery { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); align-items:start; gap:clamp(12px,1.6vw,20px); }
.gal { margin:0; border-radius:var(--r-md); overflow:hidden; border:1px solid var(--line);
  background:var(--bg-elev); position:relative; aspect-ratio:4/3; }
.gal--wide { grid-column:span 2; aspect-ratio:16/9; }
.gal:has(picture[data-orientation="portrait"]) { aspect-ratio:3/4; grid-row:span 2; }
.gal picture { display:block; height:100%; }
.gal img { display:block; width:100%; height:100%; aspect-ratio:auto; object-fit:cover; object-position:var(--focus, 50% 38%); transition:transform .5s var(--spring); }
.gal:hover img { transform:scale(1.04); }
/* Видео в галерее ведёт себя как обычный кадр, пока его не запустят. */
.gal__video { display:block; width:100%; height:100%; object-fit:cover; object-position:var(--focus, 50% 38%); background:var(--bg-elev); }
.gal__play { position:absolute; inset:0; margin:auto; width:62px; height:62px; display:grid; place-items:center;
  border:none; border-radius:50%; cursor:pointer; font-size:20px; color:var(--on-honey);
  background:rgba(255,214,102,.94); box-shadow:0 10px 30px -10px rgba(20,15,5,.6);
  transition:transform .2s var(--spring), opacity .2s; }
.gal__play:hover { transform:scale(1.08); }
.gal__play:focus-visible { outline:3px solid #fff; outline-offset:3px; }
.gal--playing .gal__play { opacity:0; pointer-events:none; }
.gal figcaption { position:absolute; inset:auto 0 0 0; padding:22px 16px 12px;
  font-size:13px; line-height:1.4; color:#fff;
  background:linear-gradient(to top, rgba(20,15,5,.82), rgba(20,15,5,0)); }
@media (prefers-reduced-motion: reduce) { .gal img { transition:none; } .gal:hover img { transform:none; } }

.about-figures { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.about-fig { --pad:22px 20px; }
.about-fig b { display:block; font-family:var(--font-voice); font-size:32px; font-weight:600; letter-spacing:-.01em; color:var(--honey-deep); font-variant-numeric:tabular-nums; }
.about-fig span { display:block; font-size:13.5px; color:var(--ink-soft); margin-top:4px; }

/* карусель продукции */
.carousel { position:relative; }
/* Ширина слайда фиксируется: с 1fr одна карточка растягивалась на всю ленту
   и превращалась в баннер с картинкой во весь экран. */
.carousel__track { display:grid; grid-auto-flow:column; grid-auto-columns:clamp(250px, 27%, 320px); gap:20px;
  overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding-inline:2px; padding-bottom:6px;
  scrollbar-width:thin; -webkit-overflow-scrolling:touch; }
.carousel__track::-webkit-scrollbar { height:6px; }
.carousel__track::-webkit-scrollbar-thumb { background:var(--line); border-radius:3px; }
.carousel__item { scroll-snap-align:start; }
.carousel__nav { display:flex; gap:8px; justify-content:flex-end; margin-top:16px; }
.carousel--static .carousel__nav { display:none; }
.carousel__btn { --size:42px; background:var(--bg-elev); color:var(--ink); font-size:22px; line-height:1; }
.carousel__btn:hover:not(:disabled) { border-color:var(--honey); color:var(--honey-deep); }
.carousel__btn:disabled { opacity:.35; cursor:not-allowed; }

/* отзывы */
.reviews { display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap:20px; }
.review { --pad:26px 24px; margin:0; display:flex; flex-direction:column; }
.review__stars { color:var(--honey); letter-spacing:.12em; font-size:15px; }
.review__text { margin:14px 0 0; font-family:var(--font-read); font-size:var(--t3); color:var(--ink-soft); line-height:var(--lh-long); flex:1; }
.review__who { margin-top:18px; padding-top:14px; border-top:1px dashed var(--line); }
.review__who b { display:block; font-size:15px; }
.review__who span { display:block; font-size:13px; color:var(--ink-faint); margin-top:2px; }

/* блок «Подарить улей» */
.gift-cta { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:clamp(28px,3.5vw,48px); align-items:center; }
.gift-cta__list { --pad:26px 24px; list-style:none; margin:0; display:grid; gap:12px; }
.gift-cta__list li { font-size:15px; color:var(--ink-soft); display:flex; gap:10px; align-items:baseline; }
.gift-cta__list li::before { content:"✓"; color:var(--meadow); font-weight:700; flex:none; }

/* корзина каталога */
.cart-panel { position:fixed; z-index:65; right:16px; top:calc(var(--nav-h) + 12px); width:min(360px, calc(100vw - 32px));
  max-height:min(70vh, 620px); overflow:auto; overscroll-behavior:contain; display:flex; flex-direction:column;
  background:var(--bg-elev); border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:0 40px 80px -40px rgba(var(--shadow),.9); padding:18px 18px 16px; }
.cart-panel[hidden] { display:none; }
.cart-panel__head { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.cart-panel__foot { margin-top:12px; padding-top:12px; border-top:1px solid var(--line-soft); }
.cart-row { display:flex; justify-content:space-between; gap:10px; align-items:center; padding:9px 0; font-size:14px; border-bottom:1px solid var(--line-soft); }
.cart-row:last-child { border-bottom:none; }
.cart-row__del { --size:28px; color:var(--ink-faint); font-size:12px; }
.cart-row__del:hover { border-color:var(--seal); color:var(--seal); }

/* календарь отчётов в кабинете (ТЗ 4.2.1) */
.dash-h3 { font-size:17px; margin:26px 0 12px; }
.rep-cal { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.rep-month { --pad:18px 20px; }
.rep-month__head { display:flex; align-items:baseline; justify-content:space-between; padding-bottom:10px; border-bottom:1px solid var(--line-soft); }
.rep-month__head b { font-family:var(--font-display); font-size:17px; }
.rep-row { display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; padding:10px 0; font-size:14px; border-bottom:1px solid var(--line-soft); }
.rep-row:last-of-type { border-bottom:none; }
.rep-att { font-size:13px; color:var(--honey-deep); font-weight:600; padding:4px 9px; border:1px solid var(--line); border-radius:999px; }
.rep-att:hover { border-color:var(--honey); }
.rep-note { font-size:13.5px; padding:0 0 10px; }

/* формы «Мёд» и настройки уведомлений */
.honey-actions { display:flex; gap:10px; flex-wrap:wrap; margin:16px 0 20px; }
.honey-form[hidden] { display:none; }
.check-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.check { display:flex; align-items:center; gap:10px; padding:11px 14px; border-radius:var(--r-s); font-size:15px; }
.check input { width:18px; height:18px; accent-color:var(--honey); flex:none; margin:0; }

/* плавающий виджет «Написать в MAX» (ТЗ 5.2.2) */
.max-widget { position:fixed; z-index:55; right:20px; bottom:calc(20px + env(safe-area-inset-bottom));
  display:inline-flex; align-items:center; gap:9px; padding:12px 18px; border-radius:999px;
  background:var(--ink); color:var(--bg); font-size:14.5px; font-weight:600;
  box-shadow:0 16px 36px -14px rgba(0,0,0,.55); transition:transform .25s var(--spring), box-shadow .25s; }
.max-widget:hover { transform:translateY(-3px); box-shadow:0 22px 44px -14px rgba(0,0,0,.65); }
.max-widget svg { width:19px; height:19px; color:var(--honey-bright); flex:none; }

/* reveal */
.reveal { opacity:0; transform:translateY(22px); transition:opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.in { opacity:1; transform:none; }
.reveal.d1 { transition-delay:.08s; } .reveal.d2 { transition-delay:.16s; } .reveal.d3 { transition-delay:.24s; } .reveal.d4 { transition-delay:.32s; }
@media (prefers-reduced-motion: reduce) { html{scroll-behavior:auto;} *,*::before,*::after{animation:none!important; transition-duration:.01ms!important;} .reveal{opacity:1; transform:none;} .gauge__fill{transition:none;} .bee{display:none;} .hero h1 .accent svg path{stroke-dashoffset:0;} }

/* ==========================================================================
   АДАПТИВ. Ступени: 1100 (планшет-ландшафт) → 960 (планшет-портрет, бургер)
   → 720 (крупный телефон) → 560 (телефон) → 380 (узкий телефон).
   ========================================================================== */

/* --- Планшет, ландшафт --- */
@media (max-width:1100px) {
  :root { --gut:22px; }
  .gift-layout { gap:32px; }
  .crm { grid-template-columns:200px minmax(0,1fr); }
  .crm-main { padding:26px 24px 60px; }
}

/* --- Планшет, портрет: одна колонка, появляется бургер --- */
@media (max-width:960px) {
  :root { --nav-h:64px; }
  .nav-links, .nav-auth { display:none; }
  .burger { display:inline-grid; }

  .hero { min-height:auto; padding-block:32px 64px; }
  #comb { opacity:.5; }
  .hero-grid { grid-template-columns:1fr; gap:36px; }
  .hero-copy { max-width:none; }
  .hero-art { justify-content:flex-start; } .honey-art { max-width:290px; }
  .bee { display:none; }

  .calc, .gift-layout { grid-template-columns:1fr; gap:28px; }
  .summary, .gift-side { position:static; }
  .gift-side { max-width:440px; }          /* сертификат не растягиваем на всю ширину */
  .steps, .feat-grid { grid-template-columns:repeat(2,1fr); }
  .kpis { grid-template-columns:repeat(2,1fr); }
  .modal__grid { grid-template-columns:1fr; } .modal__img { min-height:200px; }
  .guar-inner { grid-template-columns:1fr; gap:18px; }
  .foot-grid { grid-template-columns:1fr 1fr; gap:26px; }
  .about-grid, .gift-cta { grid-template-columns:1fr; gap:30px; }
  .carousel__track { grid-auto-columns:clamp(230px, 62%, 320px); }

  /* CRM: боковое меню превращается в горизонтальную ленту вкладок */
  .crm { grid-template-columns:1fr; }
  .crm-two { grid-template-columns:1fr; }
  .kpi-grid { grid-template-columns:repeat(2,1fr); }
  .crm-side { position:sticky; top:var(--nav-h); z-index:39; min-height:auto; padding:10px 0;
    border-right:none; border-bottom:1px solid var(--line); background:color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter:blur(8px); }
  .crm-nav { flex-direction:row; gap:6px; overflow-x:auto; padding-inline:var(--gut); -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  .crm-nav::-webkit-scrollbar { display:none; }
  .crm-nav a { white-space:nowrap; padding:9px 14px; }
  .crm-nav-label { display:none; }
  .crm-main { padding:22px var(--gut) 56px; }
}

/* --- Крупный телефон / узкий планшет --- */
@media (max-width:720px) {
  .steps { grid-template-columns:1fr; gap:22px; }
  .steps-path { display:none; }            /* змейка между шагами не нужна в одну колонку */
  .hero-art { display:none; }
  .phero-inner { padding-block:24px 34px; }
  .phero .lead, .sect-head p { font-size:16.5px; }
  .filters-inner { padding-block:12px; gap:12px 18px; }
  .crm-filters { gap:8px; }
  .crm-filters select, .crm-filters input { max-width:none; flex:1 1 100%; }
  .crm-filters .count { margin-left:0; }
}

/* --- Телефон --- */
@media (max-width:560px) {
  :root { --gut:18px; --nav-h:60px; --r-lg:20px; }
  body { font-size:16px; }

  .steps, .feat-grid, .kpis, .kpi-grid,
  .incl-wrap, .field-row, .crm-two, .grid-2, .rep-cal,
  .check-grid, .about-figures { grid-template-columns:1fr; }
  /* На телефоне галерея в одну колонку — иначе кадры мельчают до нечитаемых. */
  .gallery { grid-template-columns:1fr; }
  .gal--wide { grid-column:span 1; }
  .foot-grid { grid-template-columns:1fr; gap:22px; }
  .foot-bottom { flex-direction:column; gap:8px; }

  /* новые блоки */
  .carousel__track { grid-auto-columns:clamp(215px, 82%, 300px); gap:14px; }
  .carousel__nav { justify-content:center; }
  .about-fig { padding:16px 18px; } .about-fig b { font-size:28px; }
  .review { padding:20px 18px; }
  .gift-cta__list { padding:20px 18px; }
  .honey-actions .btn { flex:1 1 100%; }
  .rep-month { padding:16px 16px; }
  /* корзина на телефоне — нижняя шторка на всю ширину */
  .cart-panel { right:0; left:0; top:auto; bottom:0; width:100%; max-height:82dvh;
    border-radius:var(--r-lg) var(--r-lg) 0 0; border-bottom:none;
    padding-bottom:calc(16px + env(safe-area-inset-bottom)); }
  /* виджет MAX не должен перекрывать кнопки и тост */
  .max-widget { right:auto; left:50%; transform:translateX(-50%); bottom:calc(12px + env(safe-area-inset-bottom)); padding:10px 16px; font-size:13.5px; }
  .max-widget:hover { transform:translateX(-50%) translateY(-3px); }
  .toast { bottom:calc(66px + env(safe-area-inset-bottom)); }

  /* шапка */
  .brand { font-size:17px; gap:9px; } .brand-mark { width:26px; height:30px; }
  .nav-inner { gap:10px; } .nav-right { gap:8px; }

  /* герой */
  .hero { padding-block:24px 48px; }
  .hero h1 { font-size:clamp(28px,8.2vw,44px); margin-top:14px; }
  .hero .lead { font-size:16.5px; margin-top:16px; }
  .hero .cta { margin-top:24px; gap:10px; }
  .hero .cta .btn { flex:1 1 100%; }
  .hero .trust { margin-top:24px; max-width:none; }
  .trust > div { padding-inline:12px; } .trust span { font-size:11px; }

  /* типографика разделов */
  .sect-head h2 { font-size:clamp(26px,7vw,34px); }
  .phero h1 { font-size:clamp(28px,8vw,40px); }

  /* элементы управления — палец, а не курсор */
  .btn { padding:12px 20px; min-height:46px; }
  .btn--sm { padding:9px 15px; min-height:40px; }
  .step-btn { width:44px; height:44px; }
  .msgr, .cart, .theme-toggle { width:42px; height:42px; }   /* иконки под палец, как бургер */
  .fchip, .pack { min-height:42px; padding:9px 15px; }
  .faq-q { font-size:17px; padding:18px 36px 18px 0; }
  .lk-btn { padding:9px 14px; font-size:14px; }
  .inp, .ta, input[type=text], input[type=email], input[type=password],
  input[type=tel], input[type=number], textarea, select { font-size:16px; padding:12px 14px; }  /* 16px — iOS не зумит форму */

  /* калькулятор */
  .loc { grid-template-columns:auto 1fr; gap:12px; padding:14px 16px; }
  .loc__price { grid-column:2; text-align:left; margin-top:2px; }
  .qty { flex-wrap:wrap; gap:12px; padding:14px 16px; }
  .summary { padding:20px 18px; }
  .terms { padding:15px 16px; font-size:14px; }

  /* карточки и таблицы */
  .card__body { padding:16px 16px 18px; }
  .prod { padding:18px; }
  .kpi { padding:15px 16px; } .kpi__val { font-size:26px; }
  .hive-card, .card-basic, .crm-card { padding:18px 16px; }
  .hrow { flex-wrap:wrap; gap:6px 10px; }
  .crm-title h1 { font-size:23px; }
  .crm-actions .btn { flex:1 1 auto; }

  /* модалка товара → нижняя шторка */
  .modal__box { left:0; right:0; top:auto; bottom:0; width:100%;
    max-height:88vh; max-height:88dvh;
    transform:translateY(100%); border-radius:var(--r-lg) var(--r-lg) 0 0; border-bottom:none; opacity:1; }
  .modal.open .modal__box { transform:translateY(0); opacity:1; }
  .modal__img { min-height:150px; }
  .modal__body { padding:22px 18px calc(22px + env(safe-area-inset-bottom)); }
  .modal__body h2 { font-size:25px; }
  .buy-row { flex-wrap:wrap; gap:12px; } .m-price { margin-left:auto; }
  .modal__actions { flex-direction:column; }

  /* прочее */
  .auth-box { margin:34px auto; padding:24px 20px; }
  .cert__paper { padding:24px 18px 22px; } .cert__name { font-size:22px; }
  .toast { left:var(--gut); right:var(--gut); bottom:calc(18px + env(safe-area-inset-bottom)); transform:translateY(20px); justify-content:center; }
  .toast.show { transform:translateY(0); }
  /* нижний запас — под плавающий виджет «Написать в MAX», чтобы он не перекрывал футер */
  footer { padding-block:40px calc(80px + env(safe-area-inset-bottom)); }
}

/* --- Узкий телефон (320–380) --- */
@media (max-width:380px) {
  :root { --gut:15px; }
  .hero h1 .accent { white-space:normal; }
  .msgr, .cart, .theme-toggle { width:38px; height:38px; }   /* на 320–380 экономим ширину шапки */
  .qty__val { width:36px; font-size:20px; }
  .chips { gap:8px; } .chip { font-size:11.5px; padding:7px 11px; }
}

/* --- Телефон в ландшафте: не растягиваем герой на весь экран --- */
@media (max-height:560px) and (orientation:landscape) {
  .hero { min-height:auto; padding-block:24px 40px; }
  .mnav__links a { padding:11px 14px; min-height:42px; }
}

/* --- Крупные экраны --- */
@media (min-width:1500px) { :root { --maxw:1280px; } }

/* ---- чат поддержки в CRM (ТЗ 5.2.1) ---- */
.chat { display:flex; flex-direction:column; gap:10px; margin:14px 0; max-height:340px; overflow-y:auto; padding-right:4px; }
.chat__msg { max-width:78%; padding:10px 14px; border-radius:var(--r-md); border:1px solid var(--line); background:var(--bg-elev); }
.chat__msg--in { align-self:flex-start; border-bottom-left-radius:4px; }
.chat__msg--out { align-self:flex-end; border-bottom-right-radius:4px; background:color-mix(in srgb, var(--honey) 12%, var(--bg-elev)); border-color:color-mix(in srgb, var(--honey) 40%, var(--line)); }
.chat__meta { font-size:12.5px; color:var(--ink-soft); margin-bottom:4px; font-variant-numeric:tabular-nums; }
.chat__text { font-size:14.5px; line-height:1.5; white-space:pre-wrap; overflow-wrap:anywhere; }
.chat__reply { display:flex; gap:10px; align-items:flex-start; }
.chat__reply .ta { flex:1; min-height:52px; }
@media (max-width:560px) {
  .chat__msg { max-width:92%; }
  .chat__reply { flex-direction:column; }
  .chat__reply .btn { width:100%; }
}