/* ============================================================
   styles.css — ВСЕ стили сайта одним файлом (заход 5, ТЗ 15.09 блок M): один запрос вместо 17.
   Собран из css/_parts/ в порядке каскада: fonts, tokens, base, header, hero, idea, comparison, occasions, nutrition, value, reviews, about, order, faq, footer, modal, desktop.
   Править — файл в css/_parts/, затем пересобрать: merge_css_z5.py --rebuild
   (сайты\_CLAUDE_РАБОЧЕЕ\_qa-claude-code-2026-09-15-z5\scripts\). Этот файл руками не править.
   ============================================================ */

/* ---------- fonts.css ---------- */
/* Шрифты локально — вместо внешнего подключения Google Fonts (ТЗ 13.09.2026, блок D).
   Источник: Google Fonts, подмножество latin, woff2, статические начертания.
   Лицензия всех трёх семейств — SIL Open Font License 1.1. */

@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/barlow-condensed-700.woff2") format("woff2");
}

@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/barlow-condensed-800.woff2") format("woff2");
}

@font-face {
  font-family: "Bebas Neue";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/bebas-neue-400.woff2") format("woff2");
}

@font-face {
  font-family: "Noto Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/noto-sans-400.woff2") format("woff2");
}

@font-face {
  font-family: "Noto Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/noto-sans-600.woff2") format("woff2");
}

@font-face {
  font-family: "Noto Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/noto-sans-700.woff2") format("woff2");
}

/* ---------- tokens.css ---------- */
/* ============================================================
   THE CRAVING CLUB · V10 (мобильный макет)
   tokens.css — палитра, типографика, размеры. Все числа — из
   _makety_v3/HANDOFF.md (разделы 1.2–1.4) и ТЗ-09 §4 (comparison).
   Правило проекта: hex только здесь, в правилах — var().
   Сборка мобильная: базовый холст 390px, значения фиксированные.
   ============================================================ */

:root {
  /* ---------- ПАЛИТРА (HANDOFF §1.2) ---------- */
  --c-ivory:      #FFF8F1;   /* фон hero / about / faq */
  --c-white:      #FFFFFF;   /* карточки, occasions, taste-first */
  --c-dark:       #2E1F47;   /* тёмный блок + footer */
  --c-lav:        #F1EAF8;   /* лавандовые секции: nutrition/reviews/purchase */
  --c-lav-2:      #E6DCF2;   /* неактивный control, раскрытый FAQ */
  --c-peach:      #F7C2AB;   /* промо-полоса + акценты на тёмном */
  --c-ink:        #2E1F47;   /* основной текст */
  --c-muted:      #6E637C;   /* приглушённый текст */
  --c-border:     #E8DFEC;   /* рамки, разделители */
  --c-cta:        #C43A6C;   /* основная кнопка */
  --c-cta-ink:    #FFFFFF;   /* текст кнопки */
  --c-milk-pill:  #FBE1EA;   /* фон пилла-аллергена CONTAINS MILK */
  --c-eyebrow:    #A62D5B;   /* мелкий eyebrow-текст: контраст ≥4.5 на лаванде */
  --c-teal-dark:  #0A6A66;   /* мелкий тёмно-бирюзовый eyebrow на лаванде ≥4.5 */
  --c-allerg-ink: #5B5075;   /* текст аллергена MAY CONTAIN на лаванде ≥4.5 */
  --c-star:       #F5A623;   /* звёзды рейтинга в отзывах */

  /* на тёмном фоне */
  --c-on-dark:        #FFFFFF;
  --c-on-dark-muted:  #E9DEEF;
  --c-on-dark-peach:  #F7C2AB;

  /* ---------- COMPARISON — точные токены (ТЗ-09 §4) ---------- */
  --c-cmp-outer:  #FBADC2;   /* внешний розовый фон */
  --c-cmp-inner:  #E6D9F4;   /* внутренняя форма (картинка) */
  --c-cmp-ink:    #271545;   /* H2, eyebrow, subtitle, подписи, значения, линии, сноска */
  --c-cmp-num:    #076269;   /* крупные цифры и BAKED */
  --c-cmp-dot:    #AFD7CB;   /* точка на конце выноски */

  /* ---------- АКЦЕНТЫ ВКУСОВ (HANDOFF §1.2) ----------
     --fa — акцент (крупный текст ≥19px, рамки, графика),
     --fa-ink — тёмный вариант для мелкого текста <19px. */
  --fa:      #119B9B;
  --fa-ink:  #0C7B78;

  /* ---------- ТИПОГРАФИКА (HANDOFF §1.1) ---------- */
  --ff-head: 'Barlow Condensed', 'Arial Narrow', system-ui, sans-serif;
  --ff-body: 'Noto Sans', system-ui, -apple-system, sans-serif;
  --ff-num:  'Bebas Neue', 'Arial Narrow', system-ui, sans-serif;

  /* ---------- ЕДИНАЯ ШКАЛА КЕГЛЕЙ (ТЗ-10 §1) ----------
     База 16px (браузерный default → 1rem), все размеры в rem.
     Пикселей в font-size по всему сайту не остаётся — только эти токены. */
  --fs-h1:        2.5rem;    /* 40px — H1 первого экрана (ТЗ-11 §1: заголовок доминирует) */
  --fs-h2:        1.875rem;  /* 30px — H2 секции (ТЗ-11 §1, пропорционально H1) */
  --fs-sub:       1.125rem;  /* 18px — подзаголовок под H2 (ТЗ-11 §1: две строки вместо трёх) */
  --fs-h3:        1.25rem;   /* 20px — H3 карточки, название вкуса */
  --fs-body:      1.125rem;  /* 18px — основной текст */
  --fs-lead:      1.0625rem; /* 17px — уплотнённый подзаголовок тёмного блока (idea__body), ТЗ-12 §4.1 */
  --fs-note:      1rem;      /* 16px — описания карточек (val__d) и нижний текст сценариев (occ__close), ТЗ-12 §4.2/§4.4 */
  --fs-card-d:    0.9375rem; /* 15px — плотное описание 2-колоночных карточек сценариев (occ__d), ТЗ-12 §4.3 */
  --fs-btn:       1rem;      /* 16px — кнопки и поля ввода */
  --fs-cap:       0.875rem;  /* 14px — подписи, сноски, метаданные */
  --fs-eyebrow:   0.75rem;   /* 12px — eyebrow, микроподписи капсом */
  /* дисплейные числа (вне текстовой шкалы, но тоже токены — px в правилах нет) */
  --fs-num-xl:    4rem;      /* 64px — крупные цифры сравнения 3× / 92% / 4× */
  --fs-num-baked: 3.25rem;   /* 52px — BAKED */
  --fs-yes:       2.5rem;    /* 40px — YES, YOU CAN */
  --fs-num-lg:    1.5rem;    /* 24px — TOTAL, цифры КБЖУ в карточках состава */
  --fs-num-md:    1.25rem;   /* 20px — цифры макро-строки героя */

  /* межстрочные интервалы (ТЗ-10 §1.1) */
  --lh-head:  1.1;    /* заголовки 1.05–1.15 */
  --lh-body:  1.5;    /* основной текст */
  --lh-sub:   1.4;    /* подзаголовки под H1/H2 (ТЗ-11 §1.2) */
  --lh-cap:   1.45;   /* подписи */

  /* ---------- РАДИУСЫ (HANDOFF §1.4) ---------- */
  --r-cta:     25px;
  --r-card:    22px;
  --r-review:  24px;
  --r-metric:  17px;
  --r-strip:   18px;
  --r-tile:    14px;
  --r-order:   18px;
  --r-faq:     18px;
  --r-img:     16px;
  --r-pill:    999px;
  --r-burger:  14px;

  /* ---------- ТЕНИ (HANDOFF §1.4) ---------- */
  --sh-card:    0 5px 20px rgba(46,31,71,.07);
  --sh-pack:    0 9px 24px rgba(46,31,71,.18);
  --sh-cmp:     0 16px 32px rgba(46,31,71,.16);
  --sh-panel:   0 12px 28px rgba(46,31,71,.14);
  --sh-cta:     0 10px 24px rgba(196,58,108,.26);

  /* ---------- СЕТКА ---------- */
  --side:      16px;    /* боковые поля */
  --content:   358px;   /* контентная ширина */

  --dur: .24s;
  --ease: cubic-bezier(.4,0,.2,1);
}

/* ---------- 5 АКЦЕНТОВ ВКУСОВ (+ mix — цвет бренда, заход 5) ---------- */
[data-flavour="mix"]     { --fa: #C43A6C; --fa-ink: #A62D5B; }
[data-flavour="choc"]    { --fa: #119B9B; --fa-ink: #0C7B78; }
[data-flavour="cinn"]    { --fa: #A66F45; --fa-ink: #906541; }
[data-flavour="caramel"] { --fa: #B84E7D; --fa-ink: #8F2D5B; }
[data-flavour="paprika"] { --fa: #C94435; --fa-ink: #9F2F27; }
[data-flavour="sour"]    { --fa: #C95427; --fa-ink: #9D3518; }

/* ---------- base.css ---------- */
/* ============================================================
   base.css — reset, холст 390px, типографика, доступность.
   Холст: фиксированный 390px. Ниже 390 масштабируется transform:scale
   (чтобы не было горизонтальной прокрутки и элементов за краем — прод-канон
   и check_layout), выше 390 центрируется в колонке 390px (ТЗ-09 §0).
   ============================================================ */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: var(--scroll-behavior, smooth);
  overflow-x: clip;
}

body {
  font-family: var(--ff-body);
  font-weight: 400;
  color: var(--c-ink);
  background: var(--c-ivory);
  overflow-x: clip;
  /* холст центрируется по горизонтали; ниже 390 масштаб делает своё */
  display: flex;
  justify-content: center;
  align-items: flex-start;
  overscroll-behavior-y: contain;
}

/* Холст 390px. При ширине ≥390 — без трансформации (важно: при рендере на 390
   попиксельная сверка идёт без transform, иначе IntersectionObserver ломает
   ленивую загрузку картинок). Ниже 390 — пропорционально уменьшаем, чтобы не
   было горизонтальной прокрутки и элементов за краем (прод-канон, check_layout). */
#page {
  width: 390px;
  flex: 0 0 390px;
  transform-origin: top center;
  position: relative;
}
@media (max-width: 389.9px) {
  #page { transform: scale(calc(100vw / 390px)); }
}

img, svg, video { display: block; max-width: 100%; }
picture { display: contents; }
img { height: auto; }

button { background: none; border: 0; cursor: pointer; text-align: inherit; color: inherit; font: inherit; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }

a, button, summary, label, [role="button"] { touch-action: manipulation; }

/* ---------- ТИПОГРАФИКА ---------- */
h1, h2, h3 { font-family: var(--ff-head); font-weight: 800; line-height: var(--lh-head); }

/* Кегли — только из шкалы токенов (tokens.css §1). Пол чекера check_layout — 12px,
   минимальный токен --fs-eyebrow = 0.75rem = 12px. */

/* ---------- ХОЛСТ-СЕКЦИИ (ТЗ-10 §1.2) ----------
   Высота по содержимому: секции — обычный поток, фиксированных высот нет,
   контент не обрезается. Боковые поля и вертикальные отступы задаёт сама секция. */
.sec { width: 390px; position: relative; }

/* Якоря секций под несколько px, чтобы smooth-scroll не прятал заголовок */
[id] { scroll-margin-top: 8px; }

/* ---------- КНОПКА CTA ---------- */
.cta {
  display: flex; align-items: center; justify-content: center;
  width: var(--content); min-height: 52px; margin-inline: auto;
  padding: 14px 20px;
  font-family: var(--ff-body); font-weight: 700; font-size: var(--fs-btn);
  line-height: 1.1; letter-spacing: .2px; text-transform: uppercase; text-align: center;
  color: var(--c-cta-ink); background: var(--c-cta);
  border-radius: var(--r-cta); box-shadow: var(--sh-cta);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), filter var(--dur) var(--ease);
}
@media (hover: hover) { .cta:hover { transform: translateY(-2px); } }
.cta:active { transform: translateY(0); filter: brightness(.96); }

/* ---------- ФОКУС ---------- */
:focus-visible { outline: 3px solid var(--c-cta); outline-offset: 3px; border-radius: 6px; }

/* ---------- БЛОКИРОВКА СКРОЛЛА (бургер) ---------- */
body.is-locked { position: fixed; left: 0; right: 0; width: 100%; overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  :root { --dur: .001ms; --scroll-behavior: auto; }
}

/* ==== ТЗ 14.09, заход 3: ниже 390 px — zoom вместо transform на всех страницах ====
   transform: scale() выше уменьшает страницу на экране, но не её высоту в раскладке: после прокрутки до конца
   под подвалом оставалась пустая полоса (главная на 360 — 639 px). zoom с тем же масштабом уменьшает и раскладку.
   Браузер, который не умеет zoom с таким calc(), пропускает блок целиком — остаётся transform выше.
   thanks и документы получили то же правило в заходе 2 (footer.css). */
@media (max-width: 389.9px) {
  @supports (zoom: calc(100vw / 390px)) {
    #page { transform: none; zoom: calc(100vw / 390px); }
  }
}

/* ---------- header.css ---------- */
/* ============================================================
   header.css — промо-полоса + шапка + бургер-меню. Кегли — из шкалы (ТЗ-10 §1).
   ============================================================ */

.promo {
  width: 390px; min-height: 28px; padding: 6px 12px;
  display: flex; align-items: center; justify-content: center;
  background: var(--c-peach); color: var(--c-ink);
  font-weight: 700; font-size: var(--fs-eyebrow); line-height: var(--lh-cap);
  letter-spacing: .5px; text-transform: uppercase; text-align: center;
}

.head {
  width: 390px; min-height: 56px;
  padding: 6px var(--side);
  display: flex; align-items: center; justify-content: space-between;
  background: var(--c-ivory);
}

.logo {
  font-family: var(--ff-head); font-weight: 800; font-size: var(--fs-h3);
  letter-spacing: .2px; color: var(--c-ink); line-height: 1;
}
.logo em { font-style: normal; color: var(--c-cta); margin-left: 14px; }
a.logo { display: inline-flex; align-items: center; min-height: 44px; }

.burger {
  width: 46px; height: 46px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--r-burger);
  color: var(--c-ink);
}
.burger svg { width: 24px; height: 24px; }

/* ---------- БУРГЕР-МЕНЮ (оверлей) ---------- */
.menu { position: fixed; inset: 0; z-index: 60; }
.menu[hidden] { display: none; }
.menu::before { content: ""; position: absolute; inset: 0; background: rgba(46,31,71,.55); }
.menu__panel {
  position: absolute; top: 0; right: 0; height: 100%;
  width: min(78vw, 320px);
  background: var(--c-ivory);
  padding: 20px;
  display: flex; flex-direction: column;
  box-shadow: -12px 0 40px rgba(46,31,71,.3);
}
.menu__close {
  align-self: flex-end;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  color: var(--c-ink);
}
.menu__links { display: flex; flex-direction: column; margin-top: 8px; }
.menu__links a {
  font-family: var(--ff-head); font-weight: 700; font-size: var(--fs-sub);
  text-transform: uppercase; letter-spacing: .3px;
  color: var(--c-ink);
  min-height: 52px; display: flex; align-items: center;
  border-bottom: 1px solid var(--c-border);
}

/* ---------- ГЛАВНАЯ: промо-полоса и шапка первого экрана (дизайн-пакет 16.09, ТЗ «hero_финал») ----------
   Только index.html (классы promo--hero, head--hero) — остальные страницы не меняются.
   Полоса: цвет — из верхней кромки кадра (COLORS), меняется вместе со вкусом (data-flavour ставит app.js), переход 0,28 с;
   на 390–760 холст 390 стоит по центру, а полоса — во всю ширину окна (тень-заливка, обрезанная по высоте полосы).
   Шапка: прозрачная и лежит на кадре (кадр начинается от её верха). От 761 шапка липкая: пока видна промо-полоса,
   она ещё не прилипла и прозрачная (is-top); после — светлый фон. Без JS класса is-top нет — фон светлый. */
.promo.promo--hero {
  --promo-bg: #E7D8CC;
  height: 29px; min-height: 0; padding: 0 12px;
  font-weight: 700; font-size: .75rem; line-height: 1;                 /* 12 */
  letter-spacing: .5px; color: #2E1F47;
  background-color: var(--promo-bg);
  box-shadow: 0 0 0 100vmax var(--promo-bg); clip-path: inset(0 -100vmax);
  transition: background-color .28s var(--ease), box-shadow .28s var(--ease);
}
.promo--hero[data-flavour="mix"]     { --promo-bg: #E7D8CC; }
.promo--hero[data-flavour="choc"]    { --promo-bg: #E1D0C3; }
.promo--hero[data-flavour="cinn"]    { --promo-bg: #D9C7B9; }
.promo--hero[data-flavour="caramel"] { --promo-bg: #DEC1BF; }
.promo--hero[data-flavour="paprika"] { --promo-bg: #C8D6DF; }
.promo--hero[data-flavour="sour"]    { --promo-bg: #C3AB99; }
@media (min-width: 1024px) {
  .promo.promo--hero { height: 34px; }
  .promo--hero[data-flavour="mix"]     { --promo-bg: #D9C5B5; }
  .promo--hero[data-flavour="choc"]    { --promo-bg: #CDB9A9; }
  .promo--hero[data-flavour="cinn"]    { --promo-bg: #CEBAAA; }
  .promo--hero[data-flavour="caramel"] { --promo-bg: #E1C1BD; }
  .promo--hero[data-flavour="paprika"] { --promo-bg: #B8CAD4; }
  .promo--hero[data-flavour="sour"]    { --promo-bg: #D1BBA8; }
}
@media (prefers-reduced-motion: reduce) {
  .promo.promo--hero { transition: none; }
}

.head.head--hero {
  height: 50px; min-height: 0; padding: 0 16px;
  background: transparent;
}
@media (max-width: 760px) {
  .head.head--hero { position: relative; z-index: 3; }              /* над кадром первого экрана */
}
.head--hero .logo { font-size: 1.25rem; letter-spacing: 0; color: #1D2B36; }   /* 20 */
.head--hero .logo em { margin-left: 14px; color: #C43A6C; }
.head--hero .burger {
  width: 44px; height: 44px; border: 0; border-radius: 13px;
  background: #FFFFFF; box-shadow: 0 4px 14px rgba(46, 31, 71, .10); color: #1D2B36;
}
.head--hero .burger svg { width: 28px; height: 28px; }                          /* линии 19 px, как в макете */
.head--hero :focus-visible { outline: 2px solid #119B9B; outline-offset: 2px; }
@media (min-width: 761px) {
  .head.head--hero { height: 74px; padding: 0 68px; background: var(--c-ivory); }
  .head.head--hero.is-top { background: transparent; }
  .head--hero .logo { font-size: 1.5625rem; }                                  /* 25 */
  .head--hero .logo em { margin-left: 19px; }
  .head--hero .head__nav { gap: 24px; }
  .head--hero .head__nav a:not(.cta) {
    position: relative; min-width: 0; padding: 0;
    font-family: var(--ff-body); font-weight: 600; font-size: .9375rem;        /* 15 */
    letter-spacing: 0; text-transform: none; color: #1D2B36;
  }
  .head--hero .head__nav a:not(.cta)::before { content: ""; position: absolute; inset: 0 -10px; }   /* зона нажатия ≥ 44 */
  /* кнопка в шапке — цвета главной кнопки, радиус 25, высота 44, без подъёма */
  .head--hero .head__cta {
    margin-left: 6px; min-height: 44px; padding: 10px 22px; border-radius: 25px;
    font-size: .875rem; line-height: 24px; letter-spacing: .2px;               /* 14 */
    background: #C43A6C; box-shadow: 0 10px 24px rgba(196, 58, 108, .26);
    transition: none;
  }
  .head--hero .head__cta:hover { transform: none; background: #A62D5B; }
  .head--hero .head__cta:active { transform: translateY(1px); background: #A62D5B; box-shadow: none; filter: none; }
  .head--hero .head__cta:focus-visible { border-radius: 25px; }
}
/* заход 9 (пакет 17.09): кадр первого экрана начинается от верха страницы — промо-полоса лежит над ним;
   поля шапки — по колонке героя (макеты: логотип и кнопка на 40 при 1024, 56 при 1440 и 1849, 236 при 2560) */
@media (min-width: 1024px) {
  .promo.promo--hero { position: relative; z-index: 2; }
  .head.head--hero { padding: 0 calc(40 * 100vw / 1024); }
}
@media (min-width: 1200px) {
  .head.head--hero { padding: 0 max(56px, calc((100vw - 2200px) / 2 + 56px)); }
}

/* ---------- hero.css ---------- */
/* ============================================================
   hero.css — первый экран по дизайн-пакету handoff/SPEC.md (16.09.2026, ТЗ «hero_финал»).
   Всё о первом экране — здесь: раздел 5 desktop.css снят, промо-полоса и шапка главной — в header.css
   (классы promo--hero / head--hero). Раскладки: до 1023 — мобильная (кадр 1024×1536), от 1024 — десктопная (1672×941).

   Кадр — готовый снимок с композицией (baked-frames), во всю ширину окна, без обрезки, от верха шапки.
   Над ним полоса фона, под ним продолжение — кромки того же файла, растянутые background-size 100% 60000px
   (SPEC «Продолжение фона»). Геометрия — формулы SPEC, одинаковые для всех шести состояний:
     телефон:  кадр H = W × 1,5;   полоса = max(0, T + 26 − 0,281·H);   подтяг = 26 − 0,104·H
               T — текстовый блок: шапка + надзаголовок + H1 + подзаголовок (задан ниже в rem → 187,44 px)
     десктоп:  H = W × 941/1672;   отступ текста = max(20, 0,238·H − 102);   полоса = 102 + отступ − 0,238·H
               добор = max(0, низ колонки − кадр) — min-height колонки (.hero__col)
   Контроль: 390 → полоса 49, подтяг −35; 1440 → отступ 91, полоса 0.
   Заход 8 (ТЗ 17.09): кадр на десктопе — не выше 900 px, картинка растёт до 1648 px ширины, лишнее срезается
   сверху; шире 1648 кадр прижат вправо, слева — продолжение его кромки. Верх композиции = 0,238 · высоты картинки
   минус срез, по нему считаются отступ и полоса. Заголовок — без <br>, колонка и кегль резиновые.
   Заход 9 (ТЗ 17.09, пакет 17.09): десктоп переигран целиком — раздел «десктоп от 1024» ниже; формулы 16.09
   и захода 8 для десктопа больше не действуют. Мобильная часть (до 1023) не менялась.
   W кадра — ширина окна (SPEC: «кадр на 100% ширины окна»), 100vw: на 390–760 холст сайта 390 стоит по центру,
   а кадр во всю ширину окна; на компьютере с полосой прокрутки кадр на 15 px шире страницы, край уходит под обрез
   (overflow-x: clip у html/body), зато 1440 даёт ровно те числа, что в SPEC. Ниже 390 весь холст уменьшен zoom —
   там кадр равен холсту (100cqw, герой — контейнер).
   ============================================================ */

.hero {
  --hh: 50px;                                   /* шапка на телефоне (макет 390: 29–79) */
  --fw: 100cqw;                                 /* ширина кадра — только для потомков (cqw считается от героя) */
  --fh: calc(var(--fw) * 1.5);                  /* высота кадра 1024×1536 */
  /* T: шапка 50 + 2,5 + надзаголовок 12 + 6,5 + H1 2×34×1,03 + 4,8 + подзаголовок 2×16×1,3 = 187,44 */
  --t: calc(var(--hh) + 2.5px + 0.75rem + 6.5px + 4.3775rem + 4.8px + 2.6rem);
  --band: max(0px, calc(var(--t) + 26px - 0.281 * var(--fh)));
  --colw: 390px;                                /* колонка содержимого на телефоне */
  --cw: calc(var(--colw) - 32px);               /* минус поля 16 */
  --pb: 112px;                                  /* базовая высота пачки в селекторе */
  --veil: 255, 248, 241;                        /* вуаль — цвет страницы #FFF8F1 */
  container-type: inline-size;
  position: relative; isolation: isolate;
  width: 390px;
  padding: 0 0 25.5px;
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
@media (min-width: 390px) {
  .hero { --fw: 100vw; }
}

/* ---------- кадр и продолжение фона ---------- */
.hero__bg {
  position: absolute; z-index: -1;
  top: calc(-1 * var(--hh)); bottom: 0;         /* от верха шапки: шапка прозрачная и лежит на кадре */
  left: calc(50% - var(--fw) / 2); width: var(--fw);
  overflow: hidden;
  background: #FAE2CA;                          /* подложка, пока кадр не пришёл (COLORS) */
}
.hero__layer {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  opacity: 0; transition: opacity .28s var(--ease);
}
.hero__layer.is-on  { opacity: 1; z-index: 1; }
.hero__layer.is-off { opacity: 1; transition: none; }   /* уходящий кадр держится под новым до конца перехода */
.hero__layer[data-lazy] { display: none; }             /* неактивный до подгрузки: ни кадра, ни кромок не запрашивает */
.hero__ext { flex: none; background-repeat: no-repeat; background-size: 100% 60000px; }
/* +1 px под кадр: стык без просвета при дробной высоте кадра (кадр рисуется поверх) */
.hero__ext--top { height: calc(var(--band) + 1px); background-position: center top; }
.hero__img { flex: none; display: block; width: 100%; max-width: none; height: var(--fh); margin-top: -1px; }
.hero__ext--bot { flex: 1 1 auto; margin-top: -1px; background-position: center bottom; }
/* кромки — тот же файл, что у кадра; у неактивных слоёв фона нет, пока слой не подгружен */
.hero__layer[data-state="mix"]:not([data-lazy])     .hero__ext { background-image: url(../assets/hero/frame-mix@m.webp); }
.hero__layer[data-state="choc"]:not([data-lazy])    .hero__ext { background-image: url(../assets/hero/frame-choc@m.webp); }
.hero__layer[data-state="cinn"]:not([data-lazy])    .hero__ext { background-image: url(../assets/hero/frame-cinn@m.webp); }
.hero__layer[data-state="caramel"]:not([data-lazy]) .hero__ext { background-image: url(../assets/hero/frame-caramel@m.webp); }
.hero__layer[data-state="paprika"]:not([data-lazy]) .hero__ext { background-image: url(../assets/hero/frame-paprika@m.webp); }
.hero__layer[data-state="sour"]:not([data-lazy])    .hero__ext { background-image: url(../assets/hero/frame-sour@m.webp); }

/* подсветка фона у тёмных кадров (ТЗ §6 п.19 «текст читается на всех кадрах»). Вуаль SPEC рассчитана на светлый
   пол кадра mix; у sour и caramel пол темнее (название и описание под подставкой — контраст 2,0–4,0), у тёмных
   десктопных кадров темнее правый верх (меню шапки — 1,8–2,3). Подсветка лежит внутри слоя кадра — проявляется
   вместе с ним, сила — по состоянию (--lt верх, --lb низ; на десктопе --lh шапка, --ld под селектором);
   где 0 — вид как в SPEC */
.hero__layer { --lt: 0; --lb: 0; --lh: 0; --ld: 0; }
.hero__layer::before, .hero__layer::after { content: ""; position: absolute; left: 0; right: 0; pointer-events: none; }
.hero__layer::before {                                                   /* верх: под шапкой и текстовым блоком */
  top: 0; height: calc(var(--band) + 0.46 * var(--fh));
  background: linear-gradient(180deg,
    rgba(var(--veil), var(--lt)) 0, rgba(var(--veil), var(--lt)) var(--t), rgba(var(--veil), 0) 100%);
}
.hero__layer::after {                                                    /* низ: от подставки до конца секции */
  top: calc(var(--band) + 0.896 * var(--fh)); bottom: 0;
  background: linear-gradient(180deg,
    rgba(var(--veil), 0) 0, rgba(var(--veil), var(--lb)) 26px, rgba(var(--veil), var(--lb)) 100%);
}
.hero__layer[data-state="caramel"] { --lt: .1; --lb: .45; }
.hero__layer[data-state="paprika"] { --lb: .1; }
.hero__layer[data-state="sour"]    { --lt: .3; --lb: .85; }

/* светлая вуаль (SPEC «Светлая вуаль под текстом»): поверх полосы — ровно 0,80, поверх кадра — градиент
   на 46 % высоты кадра; поверх блока под кадром (от названия вкуса до низа) — второй градиент */
.hero__veil {
  position: absolute; z-index: 2; left: 0; right: 0; top: 0;
  height: calc(var(--band) + 0.46 * var(--fh));
  background: linear-gradient(180deg,
    rgba(var(--veil), .8) 0, rgba(var(--veil), .8) var(--band),
    rgba(var(--veil), .46) calc(var(--band) + 0.2392 * var(--fh)),
    rgba(var(--veil), 0) 100%);
  pointer-events: none;
}
.hero__veil--bot {
  top: calc(var(--band) + 0.896 * var(--fh) + 26px); bottom: 0; height: auto;
  background: linear-gradient(180deg,
    rgba(var(--veil), 0) 0%, rgba(var(--veil), .5) 22%, rgba(var(--veil), .72) 100%);
}

/* ---------- текст (телефон: одна колонка, обёртки раскрыты, порядок — order) ---------- */
.hero__col, .hero__acts { display: contents; }
.hero__eyebrow {
  width: var(--cw); margin-top: 2.5px;
  font-weight: 700; font-size: .75rem; line-height: 1;               /* 12 */
  letter-spacing: 1.4px; text-transform: uppercase; color: #0A6F6C;
}
/* <br> в заголовке больше нет (ТЗ 17.09 §1.1): на телефоне две строки «WHEN THE CRAVING / HITS, SAY YES», как было,
   держит balance (жадный перенос дал бы «…HITS, / SAY YES»); на 761–1023 колонка 688 — заголовок в неё влез бы
   одной строкой, поэтому ширина строки не больше 358, как на телефоне */
.hero__h1 {
  width: var(--cw); max-width: 358px; margin-top: 6.5px;
  font-family: var(--ff-head); font-weight: 800;
  font-size: 2.125rem; line-height: 1.03; letter-spacing: 0;         /* 34 */
  color: #1D2B36; text-wrap: balance;
}
.hero__sub {
  width: var(--cw); margin-top: 4.8px;
  font-size: 1rem; line-height: 1.3; color: #000;                     /* 16; чёрный — решение заказчика (COLORS) */
}
/* место под композицию: верх композиции на 26 px ниже подзаголовка, название — на 26 px ниже подставки */
.hero__gap {
  flex: none; width: 100%;
  height: calc(var(--band) + 0.896 * var(--fh) + 26px - var(--t));
  touch-action: pan-y;                                                /* свайп по композиции — app.js */
}
.hero__flav { width: var(--cw); }
.hero__name {
  padding-top: 1.2px;                                                 /* буква на месте макета; верх блока — по формуле */
  font-family: var(--ff-head); font-weight: 700;
  font-size: 1.5rem; line-height: 1; letter-spacing: 0;              /* 24 */
  text-transform: uppercase; color: #0A6F6C;
}
.hero__tag { margin-top: 3.4px; font-size: 1rem; line-height: 1.4; color: #5A6A74; }
.hero__tag-long { display: none; }                  /* подпись микса — «Average per bag» на всех ширинах (заход 10 §4) */

/* макросы: белая плашка из 4 колонок */
.hero__macros {
  width: var(--cw); margin-top: 14px; padding: 12px 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  background: #FFFFFF; border-radius: 22px;
  box-shadow: 0 6px 22px rgba(46, 31, 71, .08);
}
.hero__macros li { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.hero__macros li + li { border-left: 1px solid #E8DFEC; }
.hero__macros b { font-weight: 700; font-size: 1.3125rem; line-height: 1; color: #1D2B36; }   /* 21 */
.hero__macros span {
  font-weight: 700; font-size: .75rem; line-height: 1;                /* 12 */
  letter-spacing: .6px; text-transform: uppercase; color: #5A6A74;
}

/* высота 44 (строка 43 + линия 1); inline-block, не flex — иначе пробел перед «+ INGREDIENTS» схлопывается.
   Межбуквенное 0,3 и у главной кнопки 0,2 — как в макете (прежние значения сайта) */
.hero__link {
  align-self: center; margin-top: 12px;
  display: inline-block;
  border-bottom: 1px solid rgba(29, 43, 54, .28);
  font-weight: 700; font-size: .875rem; line-height: 43px;            /* 14 */
  letter-spacing: .3px; text-transform: uppercase; color: #1D2B36; white-space: nowrap;
}
@media (hover: hover) { .hero__link:hover { border-bottom-color: #1D2B36; } }

/* главная кнопка (SPEC «Кнопки»): без подъёма и переходов — только смена фона, при нажатии сдвиг на 1 px */
.hero .hero__shop {
  order: 3; width: var(--cw); margin-top: 25.5px; min-height: 52px;
  padding: 14px 20px; border-radius: 26px;
  font-size: 1rem; line-height: 1.5; letter-spacing: .2px;            /* 16 */
  color: #FFFFFF; background: #C43A6C;
  box-shadow: 0 10px 24px rgba(196, 58, 108, .26);
  transition: none;
}
.hero .hero__shop:hover { transform: none; background: #A62D5B; }
.hero .hero__shop:active { transform: translateY(1px); background: #A62D5B; box-shadow: none; filter: none; }
.hero .hero__shop:focus-visible,
.hero .hero__link:focus-visible,
.hero .fpick__b:focus-visible,
.hero .fpick__all:focus-visible { outline: 2px solid #119B9B; outline-offset: 2px; border-radius: 6px; }
.hero .hero__shop:focus-visible { border-radius: 26px; }

/* строка доставки и «Tap a pack…» — темнее серого #5A6A74 (ТЗ 17.09 §4.1: контраст ≥ 4,5 цветом текста, не вуалью).
   Хуже всего фон на 1440 у корицы: нужна яркость текста ≤ 0,0806; #404E57 даёт 4,81 и больше на всех ширинах и вкусах */
.hero__ships {
  order: 4; width: var(--cw); margin-top: 10px;
  font-size: .875rem; line-height: 1.4; color: #404E57;               /* 14 */
}

/* ---------- селектор вкусов, вариант «без плашек» ---------- */
.fpick { order: 2; width: var(--colw); margin-top: 22px; text-align: left; }
.fpick__head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 0 16px;
}
.fpick__h {
  font-family: var(--ff-head); font-weight: 800;
  font-size: 1.6875rem; line-height: 1; letter-spacing: 0; color: #0A6F6C;   /* 27 */
}
/* ALL 5: видна, только когда выбран один вкус; место занято всегда — ряд не прыгает */
.fpick__all {
  position: relative; flex: none;
  height: 36px; margin-block: -4.5px; padding: 0 14px;
  border-radius: 18px; background: rgba(255, 255, 255, .8);
  font-weight: 700; font-size: .6875rem; line-height: 1;              /* 11 */
  letter-spacing: 0; text-transform: uppercase; color: #0A6F6C; white-space: nowrap;
}
.fpick__all::before { content: ""; position: absolute; inset: -4px -2px; }   /* зона нажатия 44 px */
@media (hover: hover) { .fpick__all:hover { background: #FFFFFF; } }
.fpick__all-d { display: none; }
.hero[data-pick="mix"] .fpick__all { visibility: hidden; }
.fpick__sub {
  margin-top: 3.3px; padding: 0 16px;
  font-size: .875rem; line-height: 1.4; color: #404E57;               /* 14; цвет — как у строки доставки */
}
/* пять слотов в один экран, ряд без полей: слот = (100% − 16) / 5, зазор 4 */
.fpick__row {
  margin-top: 2.5px;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: 4px;
}
.fpick__b {
  min-width: 0; min-height: 44px;
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
}
/* пачка — фон бокса постоянной высоты (112 % базы): база — контентная часть (--pb), сверху поле 12 % под выбранную.
   Размер — размером фона (88 % / 112 % базы), не transform: с drop-shadow трансформ мылит картинку (SPEC).
   Бокс шире слота на 6 px с каждой стороны: выбранная пачка шире слота и не должна обрезаться */
.fpick__img {
  display: block; align-self: stretch; margin-inline: -6px;
  height: calc(var(--pb) * 1.12); padding-top: calc(var(--pb) * .12);
  background-repeat: no-repeat; background-position: center bottom;
  background-origin: content-box; background-size: auto 88%;
  filter: drop-shadow(0 10px 20px rgba(46, 31, 71, .16));
  pointer-events: none;                                              /* нажатие — по слоту-кнопке */
}
.fpick__b.is-on .fpick__img { background-size: auto 112%; }
/* ряд без полей (SPEC): выбранная крайняя пачка шире слота и на 390 уходила бы за край экрана
   (SOUR CREAM на 4,1 px, CHOCOLATE на 1,2 px) — выбранную крайнюю сдвигаем внутрь; невыбранные стоят как в макете */
.fpick__b:first-child.is-on .fpick__img { background-position: calc(50% + 2px) bottom; }
.fpick__b:last-child.is-on  .fpick__img { background-position: calc(50% - 5px) bottom; }
/* до 1023 пачки не выше 125 px — файлы 250 px (ТЗ 17.09 §4.2); десктопные 400 px — в разделе «от 1024» */
.fpick__b[data-flavour="choc"]    .fpick__img { background-image: url(../assets/hero/pick-choc@m.webp); }
.fpick__b[data-flavour="cinn"]    .fpick__img { background-image: url(../assets/hero/pick-cinn@m.webp); }
.fpick__b[data-flavour="caramel"] .fpick__img { background-image: url(../assets/hero/pick-caramel@m.webp); }
.fpick__b[data-flavour="paprika"] .fpick__img { background-image: url(../assets/hero/pick-paprika@m.webp); }
.fpick__b[data-flavour="sour"]    .fpick__img { background-image: url(../assets/hero/pick-sour@m.webp); }
.fpick__l {
  display: block; margin-top: 5px;
  font-family: var(--ff-head); font-weight: 800;
  font-size: .625rem; line-height: 1;                                 /* 10 */
  letter-spacing: .5px; text-transform: uppercase; color: #1D2B36; white-space: nowrap;
}
/* линия 3 px под подписью, отступ 6: у невыбранных прозрачная — высота ряда одна во всех состояниях */
.fpick__l::after { content: ""; display: block; height: 3px; margin-top: 6px; background: transparent; }
.fpick__b.is-on .fpick__l { color: #0A6F6C; }
.fpick__b.is-on .fpick__l::after { background: #119B9B; }

/* ---------- 761–1023: мобильная раскладка, шапка десктопная ---------- */
@media (min-width: 761px) {
  .hero { --hh: 74px; --colw: 720px; width: 100%; }
}

/* ---------- десктоп от 1024 — пакет 17.09 (ТЗ «десктоп_новый_пакет», заход 9) ----------
   handoff/SPEC.md, COORDS.md, TYPE.md. Два режима: 1024–1199 — НАКЛАДНОЙ (родной кадр 1672×941 во всю ширину,
   сдвинут вправо на 90, текст поверх левого пола), от 1200 — РАЗДЕЛЬНЫЙ (обрезанный кадр 1070×941 справа, колонка текста
   слева, селектор внутри колонки). 761–1023 — прежняя мобильная раскладка (выше), до 760 — телефон (не тронуты).
   Накладной — макет 1024, умноженный на u = ширина окна / 1024. Раздельный — размеры по ломаным (опоры 1200/1440/1849/2200
   по cw = min(окно, 2200)), кадр по SPEC:
     F = min((cw − 100 − колонка) / 1,137;  max((высота окна − 192) / 0,762, F для пачки 90);  942)
     кадр F × 1,137, правый край — поле + 24; бокс от max(0, 160 − 0,238F) до 160 + 0,762F, картинка прижата к низу;
     линия подставки = 160 + 0,722F (накладной: 0,96F); пачка = min(подставка − верх ряда, (колонка − 4 зазора) / 5 / 0,63),
     слот = целая часть 0,63 × пачка, добор = подставка − верх ряда − пачка — отступом НАД рядом: низ пачек = линия подставки.
   Верх ряда — сумма фиксированных высот строк (у всех строк высота задана явно, H1 и подписи не переносятся) — без замера. */
@media (min-width: 1024px) {
  .hero {
    --u: calc(100vw / 1024);                         /* 1 px макета 1024 */
    --d-side: 0px;
    --d-padx: calc(40 * var(--u));
    --d-pt: calc(122 * var(--u) - 108px);            /* от низа шапки до надзаголовка: 14 на 1024 */
    --d-g2: calc(8 * var(--u));
    --d-ef: calc(12 * var(--u));
    --d-eh: calc(16.8 * var(--u));
    --d-h1f: calc(32 * var(--u));
    --d-g3: calc(10 * var(--u));
    --d-subf: calc(15 * var(--u));
    --d-sublh: calc(19.5 * var(--u));
    --d-g4: calc(12 * var(--u));
    --d-nameh: calc(24 * var(--u));
    --d-namef: calc(22 * var(--u));
    --d-tagf: calc(13 * var(--u));
    --d-g5: calc(10 * var(--u));
    --d-plateh: calc(36 * var(--u));
    --d-numf: calc(18 * var(--u));
    --d-mlabf: calc(10 * var(--u));
    --d-mpx: calc(9 * var(--u));
    --d-g6: calc(14 * var(--u));
    --d-btnh: calc(44 * var(--u));
    --d-btnf: calc(14 * var(--u));
    --d-btnw: calc(226 * var(--u));
    --d-linkf: calc(13 * var(--u));
    --d-actg: calc(14 * var(--u));
    --d-g7: calc(10 * var(--u));
    --d-pickh: calc(30 * var(--u));
    --d-pickf: calc(24 * var(--u));
    --d-pksubf: calc(13 * var(--u));
    --d-allh: calc(40 * var(--u));
    --d-g8: calc(6 * var(--u));
    --d-lf: calc(12 * var(--u));
    --d-col: calc(404 * var(--u));
    --d-rt: calc(414.76 * var(--u));                    /* верх ряда до добора, от верха страницы */
    --d-lg: calc(5 * var(--u)); --d-gap: calc(8 * var(--u)); --d-uline: calc(3 * var(--u)); --d-ulg: calc(6 * var(--u));
    --d-flg: calc(14 * var(--u)); --d-pkg: calc(14 * var(--u)); --d-mg: calc(5 * var(--u)); --d-btnpx: calc(30 * var(--u)); --d-allf: calc(13 * var(--u)); --d-allpx: calc(16 * var(--u));
    --d-linklh: calc(43 * var(--u));                    /* ссылка: строка 43 + линия 1 = 44, как на телефоне */
    --d-lpad: calc(1.75 * var(--u));                    /* запас под линией подписи пачки (см. .fpick__b) */
    --d-platepx: calc(4 * var(--u));
    --d-allw: calc(136 * var(--u));                    /* кнопка SHOW ALL 5 с запасом: 135,41 при 1024 */
    --hv: 0.42;                                           /* подложка под прозрачной шапкой (заход 10 §3) */
    --d-F: calc(100vw * 941 / 1672);                 /* родной кадр во всю ширину */
    --d-fw: 100vw;
    --d-fx: calc(90 * var(--u));                     /* сдвиг вправо 90 */
    --d-boxt: 0px;
    --d-boxb: var(--d-F);
    --d-stand: calc(0.96 * var(--d-F));
    /* пачка и добор (общие для обоих режимов) */
    --d-hs: calc(var(--d-stand) - var(--d-rt));
    --d-hw: calc((var(--d-col) - 4 * var(--d-gap)) / 3.15);
    --d-slot: calc(0.63 * min(var(--d-hs), var(--d-hw)));
    --d-ph: calc(var(--d-slot) / 0.63);
    --d-dobor: calc(var(--d-hs) - var(--d-ph));
    --d-labh: calc(1.05 * var(--d-lf) + var(--d-ulg) + var(--d-uline));
    display: block; width: 100%; padding: 0; text-align: left;
    min-height: calc(var(--d-boxb) - 108px);          /* полоса героя — не короче кадра */
  }
  @supports (width: round(down, 1.5px, 1px)) {
    .hero { --d-slot: round(down, calc(0.63 * min(var(--d-hs), var(--d-hw))), 1px); }   /* целый слот: ряд 402 / 512 / 737 / 927 */
  }

  /* ----- фон: кадр в боксе и продолжение его кромок (SPEC «Продолжение фона и стык»).
     Слой кадра — контекст наложения; зоны — его потомки, кадр поверх них (z-index 1).
     ::before слоя — левая зона (левая колонка кадра, растянутая по ширине, строки как у кадра);
     ::after слоя — правая зона (нижний правый пиксель кадра, плоско; только в раздельном режиме);
     .hero__ext--top — полоса над боксом (когда бокс начинается ниже 0), его ::before — растворение стыка (от 1200);
     .hero__ext--bot — под боксом; picture — бокс кадра (overflow: hidden), картинка прижата к низу. */
  .hero__bg { top: -108px; left: 0; width: 100vw; }
  .hero__layer { display: block; }
  .hero__layer.is-off { z-index: 0; }
  .hero__layer::before, .hero__layer::after, .hero__ext, .hero__layer > picture { position: absolute; margin: 0; }
  .hero__layer::before {
    left: 0; right: auto; top: var(--d-boxt); bottom: auto; width: calc(var(--d-fx) + 2px); height: calc(var(--d-boxb) - var(--d-boxt));
    background: none; background-repeat: no-repeat; background-size: 60000px var(--d-F); background-position: left bottom;
  }
  .hero__layer::after { content: none; background: none; }
  .hero__ext--top {
    left: 0; top: 0; width: calc(var(--d-fx) + var(--d-fw)); height: calc(var(--d-boxt) + 1px);
    background-repeat: no-repeat; background-size: var(--d-fw) 60000px, 60000px 60000px; background-position: var(--d-fx) top, left top;
  }
  .hero__ext--bot {
    left: 0; top: calc(var(--d-boxb) - 1px); bottom: 0; width: calc(var(--d-fx) + var(--d-fw)); height: auto; flex: none;
    background-repeat: no-repeat; background-size: var(--d-fw) 60000px, 60000px 60000px; background-position: var(--d-fx) bottom, left bottom;
  }
  .hero__layer > picture {
    display: block; z-index: 1; overflow: hidden;
    left: var(--d-fx); top: var(--d-boxt); width: var(--d-fw); height: calc(var(--d-boxb) - var(--d-boxt));
  }
  .hero__img {
    position: absolute; left: 0; bottom: 0; width: 100%; height: var(--d-F); max-width: none;
    margin: 0; object-fit: fill; -webkit-mask-image: none; mask-image: none;
  }
  .hero__ext--top::before { content: none; }
  /* вуаль под текстом — ровно до левой кромки кадра (SPEC «Вуаль под текстом») */
  .hero__veil { top: 0; bottom: 0; left: 0; right: auto; width: var(--d-fx); height: auto;
    background: linear-gradient(90deg, rgba(var(--veil), .8) 0%, rgba(var(--veil), .46) 58%, rgba(var(--veil), 0) 100%); }
  .hero__veil--bot { display: none; }
  /* подложка под прозрачной шапкой (заход 10 §3): пока шапка не прилипла (is-top) — цвет страницы с силой --hv,
     на всех шести вкусах. Полная сила до 50 px от верха шапки (там текст меню), дальше гаснет плавно (smoothstep)
     и кончается в 50 px ниже шапки. Лежит в фоне героя: над кадром, под текстом героя и под шапкой */
  .head.head--hero.is-top ~ .hero .hero__veil--bot {
    display: block; top: 34px; bottom: auto; left: 0; right: 0; width: auto; height: 124px;
    background: linear-gradient(180deg,
      rgba(var(--veil), var(--hv)) 0,
      rgba(var(--veil), var(--hv)) 50px,
      rgba(var(--veil), calc(var(--hv) * 0.957)) 59.25px,
      rgba(var(--veil), calc(var(--hv) * 0.844)) 68.5px,
      rgba(var(--veil), calc(var(--hv) * 0.684)) 77.75px,
      rgba(var(--veil), calc(var(--hv) * 0.5)) 87px,
      rgba(var(--veil), calc(var(--hv) * 0.316)) 96.25px,
      rgba(var(--veil), calc(var(--hv) * 0.156)) 105.5px,
      rgba(var(--veil), calc(var(--hv) * 0.043)) 114.75px,
      rgba(var(--veil), 0) 124px);
  }

  /* ----- колонка текста: у каждой строки высота задана — верх ряда пачек считается без замера */
  .hero__col {
    display: block; box-sizing: border-box; min-height: 0;
    width: calc(var(--d-side) + var(--d-padx) + var(--d-col));
    padding: var(--d-pt) 0 0 calc(var(--d-side) + var(--d-padx));
  }
  .hero__eyebrow { width: auto; height: var(--d-eh); margin: 0; font-size: var(--d-ef); line-height: var(--d-eh); letter-spacing: 1.5px; white-space: nowrap; }
  .hero__h1 { width: auto; max-width: none; height: calc(1.03 * var(--d-h1f)); margin: var(--d-g2) 0 0;
    font-size: var(--d-h1f); line-height: calc(1.03 * var(--d-h1f)); white-space: nowrap; text-wrap: nowrap; }
  .hero__sub { width: auto; height: calc(2 * var(--d-sublh)); margin: var(--d-g3) 0 0;
    font-size: var(--d-subf); line-height: var(--d-sublh); white-space: nowrap; color: #1D2B36; }
  .hero__gap { display: none; }
  /* название и подпись — одной строкой, высота строки фиксирована (TYPE «Фиксированные высоты») */
  .hero__flav { width: auto; height: var(--d-nameh); margin: var(--d-g4) 0 0; overflow: visible;
    display: flex; flex-wrap: nowrap; align-items: baseline; column-gap: var(--d-flg); white-space: nowrap; }
  .hero__name { padding: 0; font-size: var(--d-namef); line-height: 1; letter-spacing: .3px; }
  .hero__tag { margin: 0; font-size: var(--d-tagf); line-height: 1.4; }
  /* плашка макросов — полупрозрачное стекло по содержимому (TYPE «Плашка макросов») */
  .hero__macros {
    width: fit-content; height: var(--d-plateh); margin: var(--d-g5) 0 0; padding: 0 var(--d-platepx);   /* TYPE: «паддинг 11 / 4» */
    display: flex; align-items: center; box-sizing: border-box;
    background: rgba(255, 255, 255, .62); border: 1px solid rgba(255, 255, 255, .75); border-radius: 16px;
    box-shadow: 0 4px 18px rgba(46, 31, 71, .07); -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px);
  }
  .hero__macros li { flex-direction: row; align-items: baseline; gap: var(--d-mg); padding: 0 var(--d-mpx); white-space: nowrap; }
  .hero__macros li + li { border-left: 1px solid rgba(29, 43, 54, .14); }
  .hero__macros b { font-size: var(--d-numf); line-height: 1; }
  .hero__macros span { font-size: var(--d-mlabf); line-height: 1; letter-spacing: .6px; }
  /* кнопка и ссылка */
  .hero__acts { display: flex; align-items: center; height: var(--d-btnh); margin: var(--d-g6) 0 0; gap: var(--d-actg); }
  .hero .hero__shop { order: 0; width: auto; min-width: var(--d-btnw); height: var(--d-btnh); min-height: 0; margin: 0;
    padding: 0 var(--d-btnpx); border-radius: 27px; font-size: var(--d-btnf); line-height: 1.1; white-space: nowrap; }
  .hero .hero__shop:focus-visible { border-radius: 27px; }
  .hero__link { margin: 0; font-size: var(--d-linkf); line-height: var(--d-linklh); letter-spacing: .4px; }
  .hero__link-more { display: none; }
  .hero__ships { display: none; }                   /* строка под кнопкой — только на телефоне (TEXTS §8) */

  /* ----- селектор внутри колонки: PICK A FLAVOUR и подпись — одной строкой, SHOW ALL 5 вне потока */
  .fpick {
    position: relative; box-sizing: border-box;
    width: calc(var(--d-side) + var(--d-padx) + var(--d-col)); margin: var(--d-g7) 0 0;
    padding: 0 0 0 calc(var(--d-side) + var(--d-padx));
    display: grid; grid-template-columns: auto 1fr; grid-template-rows: var(--d-pickh) auto; column-gap: var(--d-pkg);
    align-items: baseline; text-align: left;
  }
  .fpick__head { display: contents; }
  /* выбранная пачка (112 %) выше ряда на 12 % базы — на 1849–2560 это 27–34 px при зазоре 10: она заходит в строку PICK.
     Порядок наложения пакет не задаёт; заголовок, подпись и SHOW ALL 5 — над пачками, иначе choc закрывает буквы, sour — кнопку */
  .fpick__h, .fpick__sub { position: relative; z-index: 1; }
  /* заголовок — у низа строки ряда: строка 1,1 прижата вниз отступом сверху, высота бокса = высоте строки ряда;
     так буквы стоят, как в макетах (от верха кнопки до верха букв 63 / 92 / 93 / 92). Подпись — по его базовой линии */
  .fpick__h { grid-column: 1; grid-row: 1; padding-top: calc(var(--d-pickh) - 1.1 * var(--d-pickf));
    font-size: var(--d-pickf); line-height: 1.1; letter-spacing: .3px; white-space: nowrap; }
  /* подпись — левее SHOW ALL 5: отступ справа = кнопка + 12, длинный текст обрезается многоточием, а не уходит
     под кнопку (заход 10 §1). Цвет #1D2B36 (§2): на кадре #5A6A74 не держит 4,5 */
  .fpick__sub { grid-column: 2; grid-row: 1; margin: 0; padding: 0 calc(var(--d-allw) + 12px) 0 0;
    font-size: var(--d-pksubf); line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #1D2B36; }
  .fpick__all {
    position: absolute; z-index: 2; right: 0; top: calc((var(--d-pickh) - var(--d-allh)) / 2);
    height: var(--d-allh); margin: 0; padding: 0 var(--d-allpx) 0 calc(var(--d-allpx) + 2px);
    display: block; border-radius: 20px;             /* не flex: во flex пробел в конце «SHOW » схлопывается */
    background: rgba(255, 255, 255, .82); box-shadow: 0 3px 12px rgba(46, 31, 71, .10);
    font-size: var(--d-allf); letter-spacing: .5px;    /* макеты: «SHOW ALL 5» 81 px при кегле 13 */
  }
  .fpick__all::before { inset: calc((44px - var(--d-allh)) / -2) 0; }   /* зона нажатия 44 */
  @media (hover: hover) { .fpick__all:hover { background: #FFFFFF; } }
  .fpick__all-d { display: inline; }
  .fpick__all-d::before {                             /* шеврон «‹» */
    content: ""; display: inline-block; width: .5em; height: .5em; margin: 0 .8em .1em .15em;
    border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg);
  }
  .fpick__row {
    grid-column: 1 / -1; grid-row: 2; align-self: start;
    margin-top: calc(var(--d-g8) + var(--d-dobor));   /* добор — СВЕРХУ ряда (SPEC) */
    display: grid; grid-template-columns: repeat(5, var(--d-slot)); column-gap: var(--d-gap); justify-content: start;
  }
  /* кнопка пачки чуть ниже линии подписи: в COORDS ряд кончается на 1–2 px ниже подписи (581/579, 710/708, 816/814, 875/873);
     1,75 — из диапазона 1,55–1,94, где все четыре ширины (и полоса героя 1440 = 709) укладываются в ±1 */
  .fpick__b { width: var(--d-slot); height: calc(var(--d-ph) + var(--d-lg) + var(--d-labh) + var(--d-lpad)); min-height: 0; }
  /* бокс пачки — база + 12 % сверху под выбранную; выбранная 112 %, невыбранная 88 %, размер фоном (SPEC) */
  .fpick__img {
    align-self: stretch; height: calc(1.12 * var(--d-ph)); padding-top: calc(.12 * var(--d-ph));
    margin: calc(-.12 * var(--d-ph)) calc(-.07 * var(--d-slot)) 0;
    background-position: center bottom; filter: drop-shadow(0 8px 16px rgba(46, 31, 71, .16));
  }
  .fpick__b:first-child.is-on .fpick__img, .fpick__b:last-child.is-on .fpick__img { background-position: center bottom; }
  .fpick__l { position: static; margin-top: var(--d-lg); font-size: var(--d-lf); line-height: 1.05; letter-spacing: .4px; }
  .fpick__l::after { height: var(--d-uline); margin-top: var(--d-ulg); }
  .fpick__b.is-on .fpick__l::before { content: none; }
  /* пачки на десктопе — файлы 400 px (слот до 179, выбранная до 318 px высоты); @m 250 px — только до 1023 */
  .fpick__b[data-flavour="choc"]    .fpick__img { background-image: url(../assets/hero/pick-choc.webp); }
  .fpick__b[data-flavour="cinn"]    .fpick__img { background-image: url(../assets/hero/pick-cinn.webp); }
  .fpick__b[data-flavour="caramel"] .fpick__img { background-image: url(../assets/hero/pick-caramel.webp); }
  .fpick__b[data-flavour="paprika"] .fpick__img { background-image: url(../assets/hero/pick-paprika.webp); }
  .fpick__b[data-flavour="sour"]    .fpick__img { background-image: url(../assets/hero/pick-sour.webp); }

  /* кадры накладного режима — родные (frame-<код>.webp, тот же файл, что у картинки) */
  .hero__layer[data-state="mix"]:not([data-lazy]) .hero__ext { background-image: url(../assets/hero/frame-mix.webp), url(../assets/hero/frame-mix.webp); }
  .hero__layer[data-state="mix"]:not([data-lazy])::before, .hero__layer[data-state="mix"]:not([data-lazy])::after, .hero__layer[data-state="mix"]:not([data-lazy]) .hero__ext--top::before { background-image: url(../assets/hero/frame-mix.webp); }
  .hero__layer[data-state="choc"]:not([data-lazy]) .hero__ext { background-image: url(../assets/hero/frame-choc.webp), url(../assets/hero/frame-choc.webp); }
  .hero__layer[data-state="choc"]:not([data-lazy])::before, .hero__layer[data-state="choc"]:not([data-lazy])::after, .hero__layer[data-state="choc"]:not([data-lazy]) .hero__ext--top::before { background-image: url(../assets/hero/frame-choc.webp); }
  .hero__layer[data-state="cinn"]:not([data-lazy]) .hero__ext { background-image: url(../assets/hero/frame-cinn.webp), url(../assets/hero/frame-cinn.webp); }
  .hero__layer[data-state="cinn"]:not([data-lazy])::before, .hero__layer[data-state="cinn"]:not([data-lazy])::after, .hero__layer[data-state="cinn"]:not([data-lazy]) .hero__ext--top::before { background-image: url(../assets/hero/frame-cinn.webp); }
  .hero__layer[data-state="caramel"]:not([data-lazy]) .hero__ext { background-image: url(../assets/hero/frame-caramel.webp), url(../assets/hero/frame-caramel.webp); }
  .hero__layer[data-state="caramel"]:not([data-lazy])::before, .hero__layer[data-state="caramel"]:not([data-lazy])::after, .hero__layer[data-state="caramel"]:not([data-lazy]) .hero__ext--top::before { background-image: url(../assets/hero/frame-caramel.webp); }
  .hero__layer[data-state="paprika"]:not([data-lazy]) .hero__ext { background-image: url(../assets/hero/frame-paprika.webp), url(../assets/hero/frame-paprika.webp); }
  .hero__layer[data-state="paprika"]:not([data-lazy])::before, .hero__layer[data-state="paprika"]:not([data-lazy])::after, .hero__layer[data-state="paprika"]:not([data-lazy]) .hero__ext--top::before { background-image: url(../assets/hero/frame-paprika.webp); }
  .hero__layer[data-state="sour"]:not([data-lazy]) .hero__ext { background-image: url(../assets/hero/frame-sour.webp), url(../assets/hero/frame-sour.webp); }
  .hero__layer[data-state="sour"]:not([data-lazy])::before, .hero__layer[data-state="sour"]:not([data-lazy])::after, .hero__layer[data-state="sour"]:not([data-lazy]) .hero__ext--top::before { background-image: url(../assets/hero/frame-sour.webp); }
}

/* ---------- от 1200 — раздельный режим ---------- */
@media (min-width: 1200px) {
  .hero {
    --w: min(100vw, 2200px);                          /* контент */
    --d-side: max(0px, calc((100vw - 2200px) / 2));
    --d-padx: 56px;
    --d-pt: 24px;
    --d-g2: calc(28px - var(--d-eh));                 /* верх H1 = 160 */
    --d-col: calc(450px + clamp(0px, (var(--w) - 1200px) * 0.304167, 73px) + clamp(0px, (var(--w) - 1440px) * 0.596577, 244px) + clamp(0px, (var(--w) - 1849px) * 0.675214, 237px));
    --d-ef: calc(12px + clamp(0px, (var(--w) - 1200px) * 0.004167, 1px) + clamp(0px, (var(--w) - 1440px) * 0.002445, 1px));
    --d-eh: calc(16.8px + clamp(0px, (var(--w) - 1200px) * 0.005833, 1.4px) + clamp(0px, (var(--w) - 1440px) * 0.003423, 1.4px));
    --d-h1f: calc(32px + clamp(0px, (var(--w) - 1200px) * 0.029167, 7px) + clamp(0px, (var(--w) - 1440px) * 0.03423, 14px));
    --d-g3: calc(10px + clamp(0px, (var(--w) - 1200px) * 0.008333, 2px));
    --d-subf: calc(15px + clamp(0px, (var(--w) - 1200px) * 0.0125, 3px) + clamp(0px, (var(--w) - 1440px) * 0.00489, 2px));
    --d-sublh: calc(19.5px + clamp(0px, (var(--w) - 1200px) * 0.02225, 5.34px) + clamp(0px, (var(--w) - 1440px) * 0.006748, 2.76px));
    --d-g4: calc(12px + clamp(0px, (var(--w) - 1200px) * 0.033333, 8px));
    --d-nameh: calc(24px + clamp(0px, (var(--w) - 1200px) * 0.041667, 10px) + clamp(0px, (var(--w) - 1440px) * 0.00978, 4px) + clamp(-4px, (var(--w) - 1849px) * -0.011396, 0px));
    --d-namef: calc(22px + clamp(0px, (var(--w) - 1200px) * 0.016667, 4px) + clamp(0px, (var(--w) - 1440px) * 0.00978, 4px));
    --d-tagf: calc(13px + clamp(0px, (var(--w) - 1200px) * 0.008333, 2px) + clamp(0px, (var(--w) - 1440px) * 0.002445, 1px));
    --d-g5: calc(10px + clamp(0px, (var(--w) - 1200px) * 0.016667, 4px));
    --d-plateh: calc(36px + clamp(0px, (var(--w) - 1200px) * 0.041667, 10px) + clamp(0px, (var(--w) - 1440px) * 0.012225, 5px) + clamp(0px, (var(--w) - 1849px) * 0.002849, 1px));
    --d-numf: calc(18px + clamp(0px, (var(--w) - 1200px) * 0.0125, 3px) + clamp(0px, (var(--w) - 1440px) * 0.007335, 3px));
    --d-mlabf: calc(10px + clamp(0px, (var(--w) - 1200px) * 0.004167, 1px) + clamp(0px, (var(--w) - 1440px) * 0.002445, 1px));
    --d-mpx: calc(9px + clamp(0px, (var(--w) - 1200px) * 0.029167, 7px));
    --d-g6: calc(14px + clamp(0px, (var(--w) - 1200px) * 0.033333, 8px));
    --d-btnh: calc(44px + clamp(0px, (var(--w) - 1200px) * 0.041667, 10px) + clamp(0px, (var(--w) - 1440px) * 0.00978, 4px));
    --d-btnf: calc(14px + clamp(0px, (var(--w) - 1200px) * 0.008333, 2px) + clamp(0px, (var(--w) - 1440px) * 0.002445, 1px));
    --d-btnw: calc(226px + clamp(0px, (var(--w) - 1200px) * 0.266667, 64px));
    --d-linkf: calc(13px + clamp(0px, (var(--w) - 1200px) * 0.004167, 1px));
    --d-actg: calc(14px + clamp(0px, (var(--w) - 1200px) * 0.033333, 8px));
    --d-g7: calc(10px + clamp(0px, (var(--w) - 1200px) * 0.041667, 10px));
    --d-pickh: calc(30px + clamp(0px, (var(--w) - 1200px) * 0.058333, 14px));
    --d-pickf: calc(24px + clamp(0px, (var(--w) - 1200px) * 0.025, 6px) + clamp(0px, (var(--w) - 1440px) * 0.00978, 4px));
    --d-pksubf: calc(13px + clamp(0px, (var(--w) - 1200px) * 0.008333, 2px) + clamp(0px, (var(--w) - 1440px) * 0.002445, 1px));
    --d-allh: 40px;
    --d-g8: calc(6px + clamp(0px, (var(--w) - 1200px) * 0.016667, 4px));
    --d-lf: calc(12px + clamp(0px, (var(--w) - 1200px) * 0.0125, 3px) + clamp(0px, (var(--w) - 1440px) * 0.002445, 1px) + clamp(0px, (var(--w) - 1849px) * 0.002849, 1px));
    --d-rt: calc(427.96px + clamp(0px, (var(--w) - 1200px) * 0.407875, 97.89px) + clamp(0px, (var(--w) - 1440px) * 0.080538, 32.94px) + clamp(-3px, (var(--w) - 1849px) * -0.008547, 0px));
    --d-lg: 5px; --d-gap: 8px; --d-uline: 3px; --d-ulg: 6px;
    --d-flg: 14px; --d-pkg: 14px; --d-mg: 5px; --d-btnpx: 30px; --d-allf: 13px; --d-allpx: 16px;
    --d-linklh: 43px; --d-lpad: 1.75px; --d-platepx: 4px; --d-allw: 136px;
    /* кадр (SPEC «Раздельный режим»): ширина, бюджет высоты (не меньше, чем нужно для пачки 90), потолок 942 */
    --d-F: min(calc((var(--w) - 100px - var(--d-col)) * 941 / 1070), 942px,
               max(calc((100vh - 192px) / 0.762), calc((var(--d-rt) - 70px) / 0.722)));
    --d-fw: calc(var(--d-F) * 1070 / 941);
    --d-fx: calc(100vw - var(--d-side) - 24px - var(--d-fw));
    --d-boxt: max(0px, calc(160px - 0.238 * var(--d-F)));
    --d-boxb: calc(160px + 0.762 * var(--d-F));
    --d-stand: calc(160px + 0.722 * var(--d-F));        /* линия подставки: 96 % кадра */
  }
  .hero__layer::after {                                  /* правая зона — плоский нижний правый пиксель кадра */
    content: ""; left: calc(var(--d-fx) + var(--d-fw) - 1px); right: 0; top: 0; bottom: 0; width: auto; height: auto;
    background-repeat: no-repeat; background-size: 60000px 60000px; background-position: right bottom;
  }
  /* растворение стыка (SPEC): левая колонка кадра от «левая зона − 2» шириной 170 поверх кадра, маска гаснет.
     Псевдоэлемент полосы над боксом: координаты — от верха слоя, поверх кадра (z-index 2), бокс его не обрезает */
  .hero__ext--top::before {
    content: ""; position: absolute; z-index: 2; pointer-events: none;
    left: calc(var(--d-fx) - 2px); top: var(--d-boxt); width: 170px; height: calc(var(--d-boxb) - var(--d-boxt));
    background-repeat: no-repeat; background-size: 60000px var(--d-F); background-position: left bottom;
    -webkit-mask-image: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, .34) 26%, transparent 100%);
            mask-image: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, .34) 26%, transparent 100%);
  }
  /* кадры раздельного режима — обрезанные (frame-<код>@c.webp) */
  .hero__layer[data-state="mix"]:not([data-lazy]) .hero__ext { background-image: url(../assets/hero/frame-mix@c.webp), url(../assets/hero/frame-mix@c.webp); }
  .hero__layer[data-state="mix"]:not([data-lazy])::before, .hero__layer[data-state="mix"]:not([data-lazy])::after, .hero__layer[data-state="mix"]:not([data-lazy]) .hero__ext--top::before { background-image: url(../assets/hero/frame-mix@c.webp); }
  .hero__layer[data-state="choc"]:not([data-lazy]) .hero__ext { background-image: url(../assets/hero/frame-choc@c.webp), url(../assets/hero/frame-choc@c.webp); }
  .hero__layer[data-state="choc"]:not([data-lazy])::before, .hero__layer[data-state="choc"]:not([data-lazy])::after, .hero__layer[data-state="choc"]:not([data-lazy]) .hero__ext--top::before { background-image: url(../assets/hero/frame-choc@c.webp); }
  .hero__layer[data-state="cinn"]:not([data-lazy]) .hero__ext { background-image: url(../assets/hero/frame-cinn@c.webp), url(../assets/hero/frame-cinn@c.webp); }
  .hero__layer[data-state="cinn"]:not([data-lazy])::before, .hero__layer[data-state="cinn"]:not([data-lazy])::after, .hero__layer[data-state="cinn"]:not([data-lazy]) .hero__ext--top::before { background-image: url(../assets/hero/frame-cinn@c.webp); }
  .hero__layer[data-state="caramel"]:not([data-lazy]) .hero__ext { background-image: url(../assets/hero/frame-caramel@c.webp), url(../assets/hero/frame-caramel@c.webp); }
  .hero__layer[data-state="caramel"]:not([data-lazy])::before, .hero__layer[data-state="caramel"]:not([data-lazy])::after, .hero__layer[data-state="caramel"]:not([data-lazy]) .hero__ext--top::before { background-image: url(../assets/hero/frame-caramel@c.webp); }
  .hero__layer[data-state="paprika"]:not([data-lazy]) .hero__ext { background-image: url(../assets/hero/frame-paprika@c.webp), url(../assets/hero/frame-paprika@c.webp); }
  .hero__layer[data-state="paprika"]:not([data-lazy])::before, .hero__layer[data-state="paprika"]:not([data-lazy])::after, .hero__layer[data-state="paprika"]:not([data-lazy]) .hero__ext--top::before { background-image: url(../assets/hero/frame-paprika@c.webp); }
  .hero__layer[data-state="sour"]:not([data-lazy]) .hero__ext { background-image: url(../assets/hero/frame-sour@c.webp), url(../assets/hero/frame-sour@c.webp); }
  .hero__layer[data-state="sour"]:not([data-lazy])::before, .hero__layer[data-state="sour"]:not([data-lazy])::after, .hero__layer[data-state="sour"]:not([data-lazy]) .hero__ext--top::before { background-image: url(../assets/hero/frame-sour@c.webp); }
}

@media (prefers-reduced-motion: reduce) {
  .hero__layer { transition: none; }
}

/* ---------- idea.css ---------- */
/* ============================================================
   idea.css — секция 2 «NO MORE COMPROMISES» (тёмный фон). Поток, токены.
   ============================================================ */

.idea {
  background: var(--c-dark);
  padding: 40px var(--side) 44px;
  display: flex; flex-direction: column; align-items: center; text-align: center;
}

.idea__eyebrow {
  font-weight: 700; font-size: var(--fs-eyebrow); line-height: var(--lh-cap);
  letter-spacing: 1.2px; text-transform: uppercase; color: var(--c-on-dark-peach);
}
.idea__h2 {
  margin-top: 10px;
  font-family: var(--ff-head); font-weight: 800;
  font-size: var(--fs-h2); line-height: var(--lh-head); color: var(--c-on-dark);
}
.idea__body {
  margin-top: 14px; max-width: 350px;
  font-size: var(--fs-lead); line-height: var(--lh-body); color: var(--c-on-dark-muted);
}

/* ---------- 3 иллюстрации + подписи ---------- */
.idea__arts {
  margin-top: 26px; width: 100%;
  display: flex; align-items: flex-end; justify-content: center; gap: 12px;
}
.idea__art { margin: 0; flex: 1; display: flex; align-items: flex-end; justify-content: center; }
.idea__art img { width: auto; object-fit: contain; max-width: 100%; }
.idea__art--l img { height: 150px; }
.idea__art--c img { height: 168px; }
.idea__art--r img { height: 128px; }

.idea__labs { margin-top: 14px; width: 100%; display: flex; }
.idea__lab {
  flex: 1; text-align: center;
  font-family: var(--ff-head); font-weight: 700; font-size: var(--fs-cap);
  line-height: 1.15; letter-spacing: .4px; text-transform: uppercase; color: var(--c-on-dark);
}
.idea__lab--c { color: var(--c-on-dark-peach); }

/* ---------- метрик-пиллы ---------- */
.idea__pills {
  margin-top: 26px; width: 100%;
  display: flex; gap: 10px; justify-content: center;
}
.idea__pills li {
  flex: 1; min-height: 40px; padding: 8px 6px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255,255,255,.35);
  border-radius: var(--r-pill);
  font-weight: 700; font-size: var(--fs-cap); letter-spacing: .3px;
  text-align: center; color: var(--c-on-dark);
}

.idea__yes {
  margin-top: 30px;
  font-family: var(--ff-head); font-weight: 800;
  font-size: var(--fs-yes); line-height: 1; letter-spacing: .5px; color: var(--c-on-dark);
}

/* ---------- comparison.css ---------- */
/* ============================================================
   comparison.css — секция 3 (розовая сцена, холст 843, ТЗ-09 §4 + ТЗ-10 §3).
   Геометрический блок: форма-картинка + абсолютные выноски по координатам.
   Кегли — из шкалы (ТЗ-10 §1). Зазор H2↔подзаголовок сокращён (§3.1).
   ============================================================ */

/* ТЗ-12 §3: пустота под подзаголовком убрана — всё содержимое (продукт, выноски,
   линии, сноска, блоб) поднято на --cmp-shift, на неё же уменьшена высота секции.
   Блоб двигаем через top (не через height): уменьшение height сквошит object-fit:fill
   и выноски съезжают с лавандовой формы на розовое. */
.cmp { --cmp-shift: 80px; width: 390px; height: calc(843px - var(--cmp-shift)); background: var(--c-cmp-outer); overflow: hidden; position: relative; }
.cmp > * { position: absolute; }
.cmp > picture { display: block; }

.cmp__blob { top: calc(0px - var(--cmp-shift)); left: 0; width: 390px; height: 843px; }
.cmp__blob img { width: 390px; height: 843px; object-fit: fill; }

.cmp__eyebrow {
  top: 30px; left: 0; right: 0; text-align: center;
  font-weight: 700; font-size: var(--fs-eyebrow); line-height: 1;
  letter-spacing: 1.6px; text-transform: uppercase; color: var(--c-cmp-ink);
}
.cmp__h2 {
  top: 50px; left: 8px; right: 8px; text-align: center;
  font-family: var(--ff-head); font-weight: 800;
  font-size: var(--fs-h2); line-height: var(--lh-head); letter-spacing: .6px; color: var(--c-cmp-ink);
}
.cmp__subtitle {
  top: 120px; left: 0; right: 0; text-align: center;
  font-weight: 700; font-size: var(--fs-cap); line-height: 1;
  letter-spacing: .6px; text-transform: uppercase; color: var(--c-cmp-ink);
}

.cmp__product { top: calc(339.16px - var(--cmp-shift)); left: 73.61px; width: 267.01px; height: 267.01px; }
.cmp__product img {
  width: 100%; height: 100%; object-fit: contain;
  filter: drop-shadow(0 16px 32px rgba(46,31,71,.16));
}

.cmp__lines { top: calc(0px - var(--cmp-shift)); left: 0; }
.cmp__lines path { stroke: var(--c-cmp-ink); stroke-width: 1; fill: none; }
.cmp__lines circle { fill: var(--c-cmp-dot); }

.cmp__co { display: flex; flex-direction: column; }
.cmp__co--protein { top: calc(250px - var(--cmp-shift)); left: 29.72px; width: 130px; }
.cmp__co--fat     { top: calc(255px - var(--cmp-shift)); left: 262px;   width: 110px; align-items: flex-start; }
.cmp__co--fibre   { top: calc(636px - var(--cmp-shift)); left: 32.46px; width: 130px; }
.cmp__co--baked   { top: calc(665px - var(--cmp-shift)); left: 250px;   width: 132px; }

.cmp__num {
  align-self: flex-start;
  font-family: var(--ff-num); font-weight: 400; font-size: var(--fs-num-xl); line-height: .92;
  letter-spacing: -.3px; color: var(--c-cmp-num);
  background: var(--c-cmp-inner);          /* совпадает с формой-блобом (контраст-чекер) */
}
.cmp__num--baked { font-size: var(--fs-num-baked); }

.cmp__lab {
  font-family: var(--ff-head); font-weight: 700; font-size: var(--fs-body); line-height: 1.1;
  letter-spacing: .6px; text-transform: uppercase; color: var(--c-cmp-ink); margin-top: 4px;
}
.cmp__val {
  font-family: var(--ff-head); font-weight: 700; font-size: var(--fs-cap); line-height: 1.1;
  letter-spacing: .2px; color: var(--c-cmp-ink); margin-top: 8px;
}

.cmp__foot {
  top: calc(800px - var(--cmp-shift)); left: 0; right: 0; text-align: center;
  font-size: var(--fs-cap); color: var(--c-cmp-ink);
}

/* ---------- occasions.css ---------- */
/* ============================================================
   occasions.css — секция 4 «THERE'S A BAG FOR THAT» (белый). Поток, токены.
   ============================================================ */

.occ {
  background: var(--c-white);
  padding: 40px var(--side) 44px;
  display: flex; flex-direction: column; align-items: center; text-align: center;
}

.occ__eyebrow {
  font-weight: 700; font-size: var(--fs-eyebrow); line-height: var(--lh-cap);
  letter-spacing: 1.2px; text-transform: uppercase; color: var(--c-eyebrow);
}
.occ__h2 {
  margin-top: 10px;
  font-family: var(--ff-head); font-weight: 800;
  font-size: var(--fs-h2); line-height: var(--lh-head); color: var(--c-ink);
}
.occ__sub {
  margin-top: 12px;
  font-size: var(--fs-sub); line-height: var(--lh-sub); color: var(--c-muted);
}

.occ__grid {
  margin-top: 24px; width: 100%;
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
.occ__card {
  background: var(--c-ivory);
  border-radius: var(--r-card); padding: 8px 8px 16px;
  box-shadow: var(--sh-card);
  display: flex; flex-direction: column; text-align: left;
}
.occ__ph { width: 100%; aspect-ratio: 6 / 5; border-radius: var(--r-tile); overflow: hidden; }
.occ__ph img { width: 100%; height: 100%; object-fit: cover; }
.occ__t {
  margin: 12px 6px 0;
  font-family: var(--ff-head); font-weight: 700; font-size: var(--fs-h3);
  line-height: 1.05; letter-spacing: .2px; text-transform: uppercase; color: var(--c-ink);
}
.occ__d {
  margin: 8px 6px 0;
  font-size: var(--fs-card-d); line-height: var(--lh-body); color: var(--c-muted);
}

.occ__close {
  margin-top: 26px;
  font-family: var(--ff-body); font-weight: 700;
  font-size: var(--fs-note); line-height: var(--lh-body); color: var(--c-ink);
}

.occ__cta { margin-top: 24px; }

/* ---------- nutrition.css ---------- */
/* ============================================================
   nutrition.css — секция 5 «WHAT'S INSIDE THE BAG» (лаванда). Поток, токены.
   Лево-выравнивание заголовка; пачка + 2×2 карточки КБЖУ, пиллы, панель состава.
   ============================================================ */

.nut { background: var(--c-lav); padding: 40px var(--side) 44px; }

/* ТЗ-12 §2: шапка блока по центру (eyebrow + H2 + подзаголовок). */
.nut__eyebrow {
  font-weight: 700; font-size: var(--fs-eyebrow); line-height: var(--lh-cap);
  letter-spacing: 1.2px; text-transform: uppercase; color: var(--c-teal-dark);
  text-align: center;
}
.nut__h2 {
  margin-top: 10px; text-align: center;
  font-family: var(--ff-head); font-weight: 800; font-size: var(--fs-h2);
  line-height: var(--lh-head); color: var(--c-ink);
}
.nut__sub {
  margin-top: 12px; text-align: center;
  font-size: var(--fs-sub); line-height: var(--lh-sub); color: var(--c-muted);
}

.nut__row {
  margin-top: 24px;
  display: flex; gap: 14px; align-items: stretch;
}
.nut__pack {
  flex: 0 0 128px;
  display: flex; align-items: center; justify-content: center;
}
.nut__pack img { width: 100%; height: auto; max-height: 210px; object-fit: contain; filter: drop-shadow(0 9px 24px rgba(46,31,71,.16)); }

.nut__cards {
  flex: 1;
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
.nut__c {
  background: var(--c-white); border-radius: var(--r-metric);
  box-shadow: var(--sh-card); padding: 14px 6px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
}
.nut__c b { font-weight: 700; font-size: var(--fs-num-lg); line-height: 1; color: var(--fa); }
.nut__c span { font-weight: 700; font-size: var(--fs-eyebrow); letter-spacing: .6px; text-transform: uppercase; color: var(--c-muted); }

.nut__pills {
  margin-top: 20px;
  display: flex; gap: 6px;
  /* ТЗ-11 §2.2 шаг 3: ряд прокручивается, если плашки не влезают. Полосу прячем,
     край следующей плашки подглядывает. overscroll-behavior-x — прод-канон in-app. */
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.nut__pills::-webkit-scrollbar { display: none; }
.npill {
  /* ТЗ-11 §2.2 шаг 2: ширина по содержимому, а не по сетке. min-width держит
     тап-таргет ≥44px (a11y). Шаг 1: подпись Barlow Condensed — уже, чем Noto. */
  flex: 0 0 auto; min-width: 44px; min-height: 44px; padding: 6px 12px;
  scroll-snap-align: start;
  display: flex; align-items: center; justify-content: center;
  background: var(--c-white); border: 1px solid var(--c-border);
  border-radius: var(--r-pill);
  font-family: var(--ff-head);
  font-weight: 700; font-size: var(--fs-eyebrow); line-height: 1;
  letter-spacing: .2px; text-transform: uppercase; color: var(--c-muted);
  white-space: nowrap;
}
.npill.is-on { border: 2px solid var(--fa); color: var(--fa-ink); }

.nut__panel {
  margin-top: 20px;
  background: var(--c-white); border-radius: var(--r-card);
  box-shadow: var(--sh-card); padding: 20px;
}
.nut__ph {
  font-family: var(--ff-head); font-weight: 700; font-size: var(--fs-h3);
  line-height: 1.1; letter-spacing: .2px; text-transform: uppercase; color: var(--c-ink);
}
.nut__ing {
  margin-top: 14px;
  font-size: var(--fs-cap); line-height: var(--lh-body); color: var(--c-muted);
}
.nut__allerg { margin-top: 16px; display: flex; gap: 10px; flex-wrap: wrap; }
.nut__al {
  padding: 9px 14px; border-radius: var(--r-pill);
  background: var(--c-lav-2); color: var(--c-allerg-ink);
  font-weight: 700; font-size: var(--fs-eyebrow); letter-spacing: .3px; text-transform: uppercase;
}
.nut__al--milk { background: var(--c-milk-pill); color: var(--c-eyebrow); }

/* ---------- value.css ---------- */
/* ============================================================
   value.css — секция 6 «TASTE FIRST» (белый). Поток, токены.
   3 горизонтальные карточки: фото слева, номер+заголовок+описание справа.
   ============================================================ */

.val { background: var(--c-white); padding: 40px var(--side) 44px; }

/* ТЗ-12 §2: шапка блока по центру (eyebrow + H2). */
.val__eyebrow {
  font-weight: 700; font-size: var(--fs-eyebrow); line-height: var(--lh-cap);
  letter-spacing: 1.2px; text-transform: uppercase; color: var(--c-eyebrow);
  text-align: center;
}
.val__h2 {
  margin-top: 10px; text-align: center;
  font-family: var(--ff-head); font-weight: 800; font-size: var(--fs-h2);
  line-height: var(--lh-head); color: var(--c-ink);
}

/* ТЗ-12 §6: карточка перестроена. Номер + заголовок сверху одной строкой на всю
   ширину карточки (334px вместо 202) — все три заголовка встают в строку без
   уменьшения кегля. Под шапкой: фото слева (118px, не менять), описание справа. */
.val__card {
  margin-top: 16px;
  background: var(--c-ivory); border-radius: var(--r-card);
  box-shadow: var(--sh-card);
  display: block; padding: 12px;
}

.val__head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.val__num {
  flex: 0 0 auto; margin: 0;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 42px; min-height: 28px; padding: 2px 12px;
  background: var(--c-dark); color: var(--c-white);
  border-radius: var(--r-pill);
  font-family: var(--ff-head); font-weight: 700; font-size: var(--fs-cap); letter-spacing: .5px;
}
.val__t {
  margin: 0;
  font-family: var(--ff-head); font-weight: 700; font-size: var(--fs-h3);
  line-height: 1.1; letter-spacing: .2px; text-transform: uppercase; color: var(--c-ink);
  /* намеренно: если заголовок удлинится — вылезет и это заметят, а не переползёт молча */
  white-space: nowrap;
}

.val__row { display: flex; align-items: center; gap: 14px; }
.val__ph { flex: 0 0 118px; width: 118px; aspect-ratio: 1 / 1; border-radius: var(--r-img); overflow: hidden; }
.val__ph img { width: 100%; height: 100%; object-fit: cover; }
.val__d {
  margin: 0;
  font-size: var(--fs-note); line-height: 1.45; color: var(--c-muted);
}

/* ---------- reviews.css ---------- */
/* ============================================================
   reviews.css — секция 7 (лаванда). Поток, токены. Карусель из 14 карточек.
   Карточка (ТЗ-10 §5.1): фото → цитата → низ [плашка вкуса | 5 звёзд].
   ============================================================ */

.rev { background: var(--c-lav); padding: 40px var(--side) 44px; display: flex; flex-direction: column; align-items: center; text-align: center; }

.rev__eyebrow {
  font-weight: 700; font-size: var(--fs-eyebrow); line-height: var(--lh-cap);
  letter-spacing: 1.2px; text-transform: uppercase; color: var(--c-eyebrow);
}
.rev__h2 {
  margin-top: 10px;
  font-family: var(--ff-head); font-weight: 800; font-size: var(--fs-h2);
  line-height: var(--lh-head); color: var(--c-ink);
}
.rev__sub {
  margin-top: 12px;
  font-size: var(--fs-sub); line-height: var(--lh-sub); color: var(--c-muted);
}

.rev__track {
  margin-top: 24px; width: 100%;
  display: flex; gap: 14px; align-items: stretch;
  overflow-x: auto; scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain; scrollbar-width: none;
}
.rev__track::-webkit-scrollbar { display: none; }

.rev-card {
  flex: 0 0 100%; scroll-snap-align: start;
  background: var(--c-white); border-radius: var(--r-review); box-shadow: var(--sh-card);
  padding: 12px;
  display: flex; flex-direction: column; text-align: left;
}
.rev-card__ph { width: 100%; aspect-ratio: 1.6 / 1; border-radius: var(--r-strip); overflow: hidden; }
.rev-card__ph img { width: 100%; height: 100%; object-fit: cover; }
.rev-card__q {
  margin: 18px 4px 0; flex: 1;
  font-size: var(--fs-body); line-height: var(--lh-body); color: var(--c-ink);
}
.rev-card__foot {
  margin-top: 18px; padding: 0 4px;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.rev-card__tag {
  padding: 7px 14px; border-radius: var(--r-pill);
  background: var(--c-cta); color: var(--c-cta-ink);
  font-weight: 700; font-size: var(--fs-eyebrow); line-height: 1;
  letter-spacing: .4px; text-transform: uppercase;
}
.rev-card__stars { flex: 0 0 auto; display: flex; gap: 2px; color: var(--c-star); }
.rev-card__stars svg { width: 16px; height: 16px; }

.rev__dots {
  margin-top: 20px;
  display: flex; justify-content: center; align-items: center; gap: 6px;
  flex-wrap: wrap; max-width: 300px;
}
.rev__dot { width: 8px; height: 8px; border-radius: var(--r-pill); background: var(--c-lav-2); flex: 0 0 auto; }
.rev__dot.is-on { width: 22px; background: var(--c-cta); }

.rev__cta { margin-top: 24px; }

/* ---------- about.css ---------- */
/* ============================================================
   about.css — секция 8 «MADE IN THE UAE» (ivory). Поток, токены.
   Коллаж 16:9 без растяжения (§9А.2). Кнопки FOUNDER STORY нет (§6).
   ============================================================ */

/* ТЗ-12 §2: весь блок по центру (eyebrow + H2 + оба абзаца; коллаж во всю ширину). */
.abt { background: var(--c-ivory); padding: 40px var(--side) 44px; text-align: center; }

.abt__eyebrow {
  font-weight: 700; font-size: var(--fs-eyebrow); line-height: var(--lh-cap);
  letter-spacing: 1.2px; text-transform: uppercase; color: var(--c-eyebrow);
}
.abt__h2 {
  margin-top: 10px;
  font-family: var(--ff-head); font-weight: 800; font-size: var(--fs-h2);
  line-height: var(--lh-head); letter-spacing: .3px; color: var(--c-ink);
}
.abt__collage {
  margin-top: 22px; width: 100%; aspect-ratio: 16 / 9;
  border-radius: var(--r-img); overflow: hidden;
}
.abt__collage img { width: 100%; height: 100%; object-fit: cover; }

.abt__b1 {
  margin-top: 24px;
  font-size: var(--fs-sub); line-height: var(--lh-body); color: var(--c-ink);
}
.abt__b2 {
  margin-top: 16px;
  font-size: var(--fs-body); line-height: var(--lh-body); color: var(--c-muted);
}

/* ---------- order.css ---------- */
/* ============================================================
   order.css — секция 9 «BUILD YOUR 5-PACK» (лаванда). Поток, токены.
   ТЗ 11.09 (форма заказа): вместо превью коробки, плиток и чека — список вкусов
   со степперами (§2) и блок итога (§3), как конфигуратор YES YOU CAN в
   дизайн-системе чипсов. Фиксированных высот нет — всё по содержимому.
   Стили .tot__* общие с модалкой (modal.css грузится после, переопределений нет).
   ============================================================ */

.ord { background: var(--c-lav); padding: 40px var(--side) 44px; display: flex; flex-direction: column; align-items: center; text-align: center; }

.ord__eyebrow {
  font-weight: 700; font-size: var(--fs-eyebrow); line-height: var(--lh-cap);
  letter-spacing: 1.2px; text-transform: uppercase; color: var(--c-eyebrow);
}
.ord__h2 {
  margin-top: 10px;
  font-family: var(--ff-head); font-weight: 800; font-size: var(--fs-h2);
  line-height: var(--lh-head); color: var(--c-ink);
}
.ord__sub {
  margin-top: 12px;
  font-size: var(--fs-sub); line-height: var(--lh-sub); color: var(--c-muted);
}

/* ---------- ШАГ + СПИСОК ВКУСОВ СО СТЕППЕРАМИ (§2.2) ---------- */
.ord__step {
  margin-top: 24px; width: 100%; text-align: left;
  font-weight: 700; font-size: var(--fs-eyebrow); letter-spacing: 1.2px;
  text-transform: uppercase; color: var(--c-eyebrow);
}
.packs {
  margin-top: 10px; width: 100%;
  background: var(--c-white); border: 1px solid var(--c-border); border-radius: var(--r-order);
  overflow: hidden; text-align: left;
}
.prow { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 10px 14px; }
.prow + .prow { border-top: 1px solid var(--c-border); }
/* выбранная строка (количество > 0) — тот же язык, что у прежней плитки .otile.is-on */
.prow.is-selected { box-shadow: inset 0 0 0 2px var(--c-dark); }

/* миниатюра: пачка 180×240 → 33px шириной, коробка микса 280×233 → 53px */
.prow__ph { flex: 0 0 auto; height: 44px; display: flex; align-items: center; }
.prow__ph img { height: 44px; width: auto; }

/* бюджет ширины на 390: 358 − рамка 2 − поля 28 = 328; пачка 33 + 12; степпер 104 + 12 → текст 167px */
.prow__text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.prow__name {
  font-family: var(--ff-head); font-weight: 800; font-size: var(--fs-h3); line-height: 1.1;
  text-transform: uppercase; color: var(--c-ink);
}
.prow__tag { font-size: var(--fs-cap); line-height: var(--lh-cap); color: var(--c-muted); }

/* степпер — та же «пилюля», что была у количества в чеке, компактнее: 36+2+20+2+36+8 = 104px */
.stepper {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 2px; padding: 0 4px;
  background: var(--c-lav); border-radius: var(--r-pill);
}
.stepper__btn {
  width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
  color: var(--c-ink); position: relative;
}
.stepper__btn::before { content: ""; position: absolute; inset: -4px; }   /* область нажатия 44×44 */
.stepper__btn:disabled { opacity: .35; pointer-events: none; }
.stepper__btn:active { transform: translateY(1px); }
.stepper__num { min-width: 20px; text-align: center; font-weight: 700; font-size: var(--fs-body); color: var(--c-muted); }
.prow.is-selected .stepper__num { color: var(--c-ink); }

/* ---------- ИТОГ (§3, вместо чека; высота по содержимому) ---------- */
.ord__total {
  margin-top: 20px; width: 100%;
  background: var(--c-white); border-radius: var(--r-card);
  box-shadow: var(--sh-card); padding: 20px; text-align: left;
  display: grid; grid-template-columns: 1fr auto; align-items: end;
}
.tot__label { font-family: var(--ff-head); font-weight: 800; font-size: var(--fs-num-lg); color: var(--c-ink); }
.tot__packs { display: block; margin-top: 2px; font-family: var(--ff-body); font-weight: 400; font-size: var(--fs-cap); color: var(--c-muted); }
.tot__right { display: grid; grid-template-columns: auto auto; justify-items: end; align-items: center; column-gap: 8px; text-align: right; }
.tot__was { font-size: var(--fs-cap); color: var(--c-muted); text-decoration: line-through; }
.tot__off { font-weight: 700; font-size: var(--fs-eyebrow); color: var(--c-cta); }
.tot__now { grid-column: 1 / -1; font-family: var(--ff-head); font-weight: 800; font-size: var(--fs-h2); line-height: 1; color: var(--c-ink); }
.tot__free {
  grid-column: 1 / -1; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--c-border);
  font-weight: 700; font-size: var(--fs-eyebrow); letter-spacing: .3px; color: var(--c-cta);
}

.ord__note { margin-top: 14px; font-size: var(--fs-cap); line-height: var(--lh-cap); color: var(--c-muted); }
.ord__cta { margin-top: 16px; }
.ord__cta:disabled { opacity: .5; box-shadow: none; pointer-events: none; }   /* 0 коробок: «PICK YOUR FLAVOURS» */
.ord__ships { margin-top: 12px; font-size: var(--fs-cap); color: var(--c-muted); }

/* ---------- faq.css ---------- */
/* ============================================================
   faq.css — секция 10 «GOOD QUESTIONS» (ivory). Поток, токены.
   Строка 1 раскрыта (лавандовая), 2–7 свёрнуты (белые). Высота по содержимому.
   ============================================================ */

.faq { background: var(--c-ivory); padding: 40px var(--side) 44px; display: flex; flex-direction: column; align-items: center; }

.faq__eyebrow {
  font-weight: 700; font-size: var(--fs-eyebrow); line-height: var(--lh-cap);
  letter-spacing: 1.2px; text-transform: uppercase; color: var(--c-eyebrow);
}
.faq__h2 {
  margin-top: 10px;
  font-family: var(--ff-head); font-weight: 800; font-size: var(--fs-h2);
  line-height: var(--lh-head); color: var(--c-ink);
}

.faq__list { margin-top: 24px; width: 100%; }

.qa {
  background: var(--c-white); box-shadow: var(--sh-card);
  border-radius: var(--r-faq); margin-bottom: 10px; overflow: hidden;
}
.qa[open] { background: var(--c-lav); box-shadow: none; }

.qa__q {
  list-style: none; cursor: pointer;
  min-height: 60px; padding: 14px 16px;
  display: flex; align-items: center; gap: 12px;
}
.qa__q::-webkit-details-marker { display: none; }
.qa__t {
  flex: 1;
  font-family: var(--ff-head); font-weight: 700; font-size: var(--fs-body);
  line-height: 1.15; letter-spacing: .1px; text-transform: uppercase; color: var(--c-ink);
}
.qa__ic {
  flex: 0 0 auto; width: 36px; height: 36px; border-radius: var(--r-pill);
  background: var(--c-lav-2);
  display: flex; align-items: center; justify-content: center; color: var(--c-ink);
}
.qa[open] .qa__ic { background: var(--c-dark); color: var(--c-white); }
.qa .ic-m { display: none; }
.qa[open] .ic-p { display: none; }
.qa[open] .ic-m { display: block; }

/* ТЗ-11 §5: переход обязателен — на нём построена вся логика аккордеона в app.js
   (событие transitionend). Без него вопрос не закрывался и текст обрезался. */
.qa__a { overflow: hidden; padding: 0 16px; transition: max-height .28s var(--ease); }
.qa[open] .qa__a { padding: 4px 16px 18px; }
.qa__a p { font-size: var(--fs-cap); line-height: var(--lh-body); color: var(--c-muted); }

/* Уменьшение движения: переход выключаем, состояние переключается сразу (см. app.js). */
@media (prefers-reduced-motion: reduce) {
  .qa__a { transition: none; }
}

/* ---------- footer.css ---------- */
/* ============================================================
   footer.css — секция 11 (тёмный). Поток, токены. Значки соцсетей (ТЗ-10 §9).
   ============================================================ */

.foot { width: 390px; background: var(--c-dark); padding: 40px var(--side) 30px; position: relative; }

.foot__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.foot__brand { flex: 1; min-width: 0; }

.foot__logo {
  font-family: var(--ff-head); font-weight: 800; font-size: var(--fs-h3);
  letter-spacing: .2px; color: var(--c-on-dark); line-height: 1;
}
.foot__logo em { font-style: normal; color: var(--c-cta); margin-left: 14px; }

.foot__tag {
  margin-top: 12px;
  font-family: var(--ff-head); font-weight: 700; font-size: var(--fs-cap);
  letter-spacing: .3px; text-transform: uppercase; color: var(--c-on-dark-peach);
}
.foot__desc {
  margin-top: 8px;
  font-size: var(--fs-cap); line-height: var(--lh-cap); color: var(--c-on-dark-muted);
}

.foot__socials { flex: 0 0 auto; display: flex; gap: 8px; }
.foot__soc {
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  color: var(--c-on-dark-muted);
}
.foot__soc svg { width: 24px; height: 24px; }

.foot__links { margin-top: 24px; }
.foot__row {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 48px;
  border-top: 1px solid rgba(255,255,255,.14);
  font-family: var(--ff-head); font-weight: 700; font-size: var(--fs-body);
  letter-spacing: .3px; text-transform: uppercase; color: var(--c-on-dark);
}
.foot__row:last-child { border-bottom: 1px solid rgba(255,255,255,.14); }
.foot__pm { color: var(--c-on-dark-peach); font-size: var(--fs-sub); font-weight: 400; }

.foot__copy { margin-top: 20px; font-size: var(--fs-cap); letter-spacing: .2px; color: var(--c-on-dark-muted); }

/* ==== ТЗ 14.09, заход 2 ====
   thanks.html и privacy / cookies / delivery.html: подвал прижат к низу экрана (§2.3);
   строка «Privacy Policy · Cookie Policy · Delivery & Returns» в подвале (§4.7);
   текст документов (§4.2). Цвета и кегли — токены сайта, новых нет. ==== */
html[data-yyt-page="thanks"] #page,html[data-yyt-page="legal"] #page{display:flex;flex-direction:column;min-height:100dvh}
/* Ниже 390 страница уменьшена transform: scale(100vw / 390px) (base.css), а высота раскладки остаётся прежней.
   Высоту делим на тот же коэффициент, лишнюю высоту раскладки снимаем отрицательным отступом —
   иначе под подвалом остаётся полоса фона */
@media (max-width:389.9px){html[data-yyt-page="thanks"] #page,html[data-yyt-page="legal"] #page{min-height:calc(100dvh / (100vw / 390px));margin-bottom:calc(100dvh - 100dvh / (100vw / 390px))}}
/* Длинная страница (документы) этим не спасается: transform не меняет высоту раскладки, и под подвалом остаётся
   (1 − масштаб) × высота страницы. Где браузер умеет zoom с этим calc(), на thanks и документах вместо transform —
   zoom с тем же масштабом: он уменьшает и раскладку, полосы нет при любой длине. Высота экрана внутри zoom тоже
   масштабируется — делим на коэффициент. Не умеет — блок пропускается целиком, остаётся transform выше. */
@media (max-width:389.9px){@supports (zoom:calc(100vw / 390px)){html[data-yyt-page="thanks"] #page,html[data-yyt-page="legal"] #page{transform:none;zoom:calc(100vw / 390px);margin-bottom:0}}}
html[data-yyt-page="thanks"] #page>.sec,html[data-yyt-page="legal"] #page>.sec{flex:1 0 auto}
.foot__policies{margin-top:14px;font-size:var(--fs-cap);line-height:var(--lh-cap);color:var(--c-on-dark-muted)}
.foot__policies a{text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
@media (min-width:761px){.foot__policies{grid-column:1/-1;margin-top:0}}
.legal__col,.legal .faq__h2{text-align:left}
.legal p.legal__date{margin-top:8px;font-size:var(--fs-cap);line-height:var(--lh-cap);color:var(--c-muted)}
.legal h2{margin-top:28px;font-size:var(--fs-h3);color:var(--c-ink)}
.legal p,.legal ul{margin-top:10px;font-size:var(--fs-body);line-height:var(--lh-body);color:var(--c-muted)}
.legal h2+p,.legal h2+ul{margin-top:6px}
.legal ul{padding-left:1.2em;list-style:disc}
.legal li+li{margin-top:4px}
.legal a{text-decoration:underline;text-underline-offset:3px}

/* ==== Заход 6 (ТЗ 16.09, офферы): липкая кнопка заказа, халяль, доставка ====
   Правки захода 6 в CSS чипсов — только здесь (договорённость с чатом первого экрана). */

/* Липкая кнопка (§4.2) — механика .cc-sticky десертов: полоса снизу 10 + кнопка 52 + 10, выезжает снизу.
   Стоит вне #page — zoom ниже 390 px её не масштабирует. Только до 1023 px: с 1024 в шапке своя кнопка.
   z-index 40: выше плашки cookie (30), ниже шапки (50), меню (60) и окна заказа (80) */
.sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: var(--c-ivory); box-shadow: 0 -8px 24px rgba(46,31,71,.08);
  transform: translateY(120%); visibility: hidden;
  transition: transform var(--dur) var(--ease), visibility 0s linear var(--dur);
}
.sticky-cta.is-on { transform: none; visibility: visible; transition: transform var(--dur) var(--ease), visibility 0s; }
.sticky-cta__btn { width: 100%; max-width: 480px; }
@media (max-width: 1023px) {
  body:has(.sticky-cta) .foot { padding-bottom: 110px; }   /* низ подвала не прячется под кнопкой */
}
@media (min-width: 1024px) { .sticky-cta { display: none; } }
@media (prefers-reduced-motion: reduce) { .sticky-cta, .sticky-cta.is-on { transition: none; } }

/* Порог доставки (§4.2): текст в разметке обычным регистром, на экране — капсом, как прежняя плашка */
.tot__free, .modal__free { text-transform: uppercase; }

/* Халяль рядом с аллергенами (§6.3): пилюля того же устройства, зелёная — не предупреждение */
.nut__al--halal { background: #E1F3F2; color: #0B6F6F; }

/* ---------- modal.css ---------- */
/* ============================================================
   modal.css — модалка заказа (ТЗ 11.09 §6): сводка по вкусам, имя + WhatsApp,
   экран «спасибо». Каркас адаптирован из craving_club_v9. Кегли — из шкалы.
   ≤1023 — нижний лист 390px (как было); ≥1024 — панель по центру, две колонки (§6.4).
   ============================================================ */

.modal { position: fixed; inset: 0; z-index: 80; display: flex; align-items: flex-end; justify-content: center; }
.modal[hidden] { display: none; }
.modal__backdrop { position: absolute; inset: 0; background: rgba(46,31,71,.6); }

.modal__panel {
  position: relative; width: 390px; max-width: 100%; max-height: 92vh; max-height: 92dvh; overflow-y: auto;
  background: var(--c-ivory); border-radius: 24px 24px 0 0; padding: 28px 20px 24px;
  box-shadow: 0 -12px 40px rgba(46,31,71,.3);
}
.modal .cta { width: 100%; }

.modal__x {
  position: absolute; top: 12px; right: 12px; width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center; color: var(--c-ink);
}
.modal__x svg { width: 24px; height: 24px; }

.modal__eyebrow { font-weight: 700; font-size: var(--fs-eyebrow); letter-spacing: 1.2px; text-transform: uppercase; color: var(--c-eyebrow); }
.modal__title { margin-top: 6px; font-family: var(--ff-head); font-weight: 800; font-size: var(--fs-h2); line-height: var(--lh-head); color: var(--c-ink); }

/* ---------- СВОДКА: строки по вкусам + итог (.tot__* — в order.css) ---------- */
.modal__summary { margin-top: 18px; background: var(--c-white); border-radius: var(--r-card); box-shadow: var(--sh-card); padding: 16px; }
.modal__lines li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  font-family: var(--ff-head); font-weight: 800; font-size: var(--fs-h3); line-height: 1.15;
  text-transform: uppercase; color: var(--c-ink);
}
.modal__lines li + li { margin-top: 6px; }
/* «5 bags» — прижато вправо (auto-margin), количество и название остаются слева */
.modal__lines li span { margin-left: auto; font-family: var(--ff-body); font-weight: 400; font-size: var(--fs-cap); color: var(--c-muted); text-transform: none; }
.modal__tot {
  margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--c-border);
  display: flex; align-items: baseline; justify-content: flex-end; gap: 8px; flex-wrap: wrap;
}
.modal__free { margin-top: 10px; font-weight: 700; font-size: var(--fs-eyebrow); color: var(--c-cta); }

/* ---------- ФОРМА ---------- */
.modal__form { margin-top: 18px; }
.field { display: block; margin-bottom: 14px; }
.field__l { display: block; margin-bottom: 6px; font-weight: 700; font-size: var(--fs-eyebrow); letter-spacing: .8px; text-transform: uppercase; color: var(--c-muted); }
.field input {
  width: 100%; min-height: 52px; padding: 0 14px;
  font-size: var(--fs-btn); color: var(--c-ink);
  background: var(--c-white); border: 1px solid var(--c-border); border-radius: 14px;
}
.field input[aria-invalid="true"] { border-color: var(--c-cta); }
/* ошибка поля — под полем; #f-err (общая, role=alert) — только для ошибки отправки */
.field__err { display: block; margin-top: 4px; font-size: var(--fs-eyebrow); line-height: var(--lh-cap); color: var(--c-cta); }
.field__err:empty, .field__err[hidden] { display: none; }
.modal__form > .field__err { margin: 0 0 12px; }
.modal__submit { margin-top: 4px; }
.modal__submit:disabled { opacity: .5; box-shadow: none; pointer-events: none; }   /* «SENDING…» */
.modal__consent { margin-top: 12px; font-size: var(--fs-cap); line-height: var(--lh-cap); color: var(--c-muted); text-align: center; }

/* ---------- ТЗ формы 02.11: селекты (страна телефона, город), сбой отправки ---------- */
.field select {
  width: 100%; min-height: 52px; padding: 0 40px 0 14px;
  font-family: inherit; font-size: var(--fs-btn); color: var(--c-ink);
  background: var(--c-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236E637C' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 16px center / 12px 8px;
  border: 1px solid var(--c-border); border-radius: 14px;
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
}
.field select:invalid { color: var(--c-muted); }          /* пустой выбор — как плейсхолдер */
.field select option { color: var(--c-ink); }
.field select[aria-invalid="true"] { border-color: var(--c-cta); }
.phone { display: flex; gap: 8px; }
.phone input { flex: 1 1 auto; min-width: 0; }
.phone__cc {
  position: relative; flex: 0 0 auto; min-width: 104px; min-height: 52px;
  display: flex; align-items: center; padding: 0 30px 0 12px;
  font-size: var(--fs-btn); color: var(--c-ink); white-space: nowrap;
  background: var(--c-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236E637C' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 12px center / 10px 7px;
  border: 1px solid var(--c-border); border-radius: 14px;
}
.field .phone__cc select {   /* нативный список поверх подписи: на телефоне открывается системный выбор */
  position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; padding: 0;
  opacity: 0; cursor: pointer; font-size: 16px; border: 0; background: none;
}
.phone__cc:focus-within { outline: 3px solid var(--c-cta); outline-offset: 3px; }
.modal__fail { margin: 0 0 12px; }
.modal__fail .field__err { margin: 0 0 10px; }
.modal__wa { display: flex; align-items: center; justify-content: center; }
.modal__wa[hidden] { display: none; }

/* ---------- ШАГ 2 «СПАСИБО» ---------- */
.modal__step[data-step="2"] { text-align: center; padding: 12px 0; }
.modal__ok {
  width: 56px; height: 56px; margin: 0 auto 8px; border-radius: var(--r-pill);
  background: var(--fa); color: var(--c-white);
  display: flex; align-items: center; justify-content: center;
}
.modal__ok svg { width: 30px; height: 30px; }
.modal__done { margin: 12px 0 20px; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--c-muted); }

/* ---------- ДЕСКТОП ≥1024 (§6.4): панель по центру, форма слева, сводка справа ----------
   Сетка с областями — на обёртке шага 1: прямые дети .modal__panel — обёртки шагов
   (.modal__step), а не eyebrow/title/form/summary. Панель — 860, паддинг 32. */
@media (min-width: 1024px) {
  .modal { align-items: center; }
  .modal__panel { width: 860px; max-height: 90vh; max-height: 90dvh; border-radius: 24px; padding: 32px; }
  .modal__step[data-step="1"] {
    display: grid; grid-template-columns: 1fr 320px; column-gap: 32px;
    grid-template-rows: auto auto 1fr;
    grid-template-areas:
      "eyebrow summary"
      "title   summary"
      "form    summary";
    align-items: start;
  }
  .modal__eyebrow { grid-area: eyebrow; }
  .modal__title { grid-area: title; }
  .modal__form { grid-area: form; margin-top: 24px; }
  .modal__summary { grid-area: summary; margin-top: 0; align-self: start; }
  .modal__step[hidden] { display: none; }        /* display:grid не должен перебивать hidden */
  /* шаг 2 — на всю ширину панели, по центру; текст ограничен для читаемости */
  .modal__done { max-width: 560px; margin-inline: auto; }
}

/* ---------- desktop.css ---------- */
/* ============================================================
   desktop.css — ДЕСКТОП (ТЗ-14 + ТЗ-15 выравнивание/ритм).
   ВСЁ под @media (min-width: 761px). Мобильная ≤760 не тронута —
   приёмка ТЗ-12 не может регрессировать.
   Брейкпоинты: 761–1023 планшет · 1024–1439 контейнер 1120 · ≥1440 контейнер 1200.
   ВЕРТИКАЛЬНАЯ ШКАЛА (ТЗ-15 §6): 8 · 16 · 24 · 32 · 40 · 56 · 80. Только эти значения.
   ============================================================ */

/* ===================================================================
   1. ТОКЕНЫ: ширины + типографика (ТЗ-15 §3) + шкала отступов
   =================================================================== */
@media (min-width: 761px) {
  :root {
    --side: 32px;
    --content: min(720px, 100% - 64px);
    --fs-h1: 3rem;        /* 48 */
    --fs-h2: 2.25rem;     /* 36 */
    --fs-sub: 1.25rem;    /* 20 */
    --fs-h3: 1.375rem;    /* 22 */
    --fs-lead: 1.125rem;  /* 18 */
    --fs-note: 1.125rem;  /* 18 */
    --fs-card-d: 1.125rem;/* 18 */
    --fs-yes: 3.5rem;     /* 56 */
    --sp-sec: 56px;       /* вертикальные поля секции (планшет) */
  }
}
@media (min-width: 1024px) {
  :root {
    --side: 40px;
    --content: min(1120px, 100% - 80px);
    --fs-h1: 3.5rem;      /* 56 */
    --fs-h2: 2.5rem;      /* 40 */
    --fs-sub: 1.375rem;   /* 22 */
    --fs-card-d: 1rem;    /* 16 (4 колонки) */
    --fs-yes: 4.5rem;     /* 72 */
    --fs-eyebrow: 0.8125rem; /* 13 (ТЗ-15 §3) */
    --sp-sec: 80px;       /* вертикальные поля секции (десктоп) */
  }
}
@media (min-width: 1440px) {
  :root { --content: min(1200px, 100% - 80px); }
}

/* Блок сравнения масштабируется целиком (§5): его абсолютная геометрия рассчитана
   на мобильные кегли. Возвращаем cmp'у мобильные --fs-h2 и --fs-eyebrow. */
@media (min-width: 761px) { .cmp { --fs-h2: 1.875rem; --fs-eyebrow: 0.75rem; } }

/* ===================================================================
   2. АРХИТЕКТУРА: контейнер по центру, фон во всю ширину, поля секции из шкалы
   =================================================================== */
@media (min-width: 761px) {
  #page { width: 100%; max-width: 100%; flex: 1 1 100%; }
  .sec, .promo, .head, .foot { width: 100%; }   /* .hero — в hero.css (первый экран 16.09) */

  .promo, .head, .idea, .occ, .nut, .val, .rev, .abt, .ord, .faq, .foot {
    padding-inline: max(var(--side), calc((100% - var(--content)) / 2));
  }
  /* вертикальные поля секций — 80 (десктоп) / 56 (планшет), §6 */
  .idea, .occ, .nut, .val, .rev, .abt, .ord, .faq {
    padding-block: var(--sp-sec);
  }

  .cta { width: auto; min-width: 280px; padding: 16px 40px; }
}

/* ===================================================================
   3. ЗАГОЛОВКИ: снять <br> через CSS (ТЗ-15 §2). cmp__h2 НЕ трогаем — см. отчёт:
   при 30px текст 431 > бокс 390 (реальный CSS, не масштаб) → одна строка невозможна.
   =================================================================== */
@media (min-width: 761px) {
  /* Перенос убираем. В разметке перед каждым <br> добавлен ПРОБЕЛ (CSS не может
     вставить пробел вместо скрытого <br>, иначе слова склеиваются: "CRAVINGHITS").
     На мобильном этот пробел схлопывается в конце строки — вёрстка не меняется. */
  .idea__h2 br, .val__h2 br { display: none; }   /* H1 первого экрана — в hero.css, от 1024 */
}

/* ===================================================================
   4. ШАПКА: липкая + горизонтальное меню (§3)
   =================================================================== */
.head__nav { display: none; }

@media (min-width: 761px) {
  .burger, .menu { display: none; }
  .head {
    position: sticky; top: 0; z-index: 50;
    background: var(--c-ivory); min-height: 64px;
  }
  .logo { white-space: nowrap; }
  .head__nav { display: flex; align-items: center; gap: 24px; margin-left: auto; }
  .head__nav a:not(.cta) {
    font-family: var(--ff-head); font-weight: 700; font-size: var(--fs-cap);
    text-transform: uppercase; letter-spacing: .3px; color: var(--c-ink);
    min-height: 44px; min-width: 44px; padding: 0 8px;
    display: inline-flex; align-items: center; justify-content: center; white-space: nowrap;
  }
  @media (hover: hover) { .head__nav a:not(.cta):hover { color: var(--c-cta); } }
  .head__cta {
    width: auto; min-width: 0; min-height: 44px; padding: 10px 22px;
    margin-inline: 0; margin-left: 8px; font-size: var(--fs-cap); white-space: nowrap;
  }
  @media (max-width: 1023px) { .head__cta { display: none; } }
  [id] { scroll-margin-top: 72px; }
}

/* ===================================================================
   5. HERO — раздел перенесён в hero.css (первый экран по дизайн-пакету 16.09, ТЗ «hero_финал»):
   там и мобильная раскладка до 1023, и десктопная от 1024. Промо-полоса и шапка главной — header.css.
   =================================================================== */

/* ===================================================================
   6. IDEA (§4.5) — единая внутренняя ширина 720 у ВСЕХ блоков → один левый край
   =================================================================== */
@media (min-width: 761px) {
  /* единая ширина 720 у всех блоков (width:100% — иначе flex align-center сжимает
     каждый по контенту и края становятся рваными: 360/540/542/549/634 → брак) */
  .idea > * { width: 100%; max-width: 720px; margin-inline: auto; }
  .idea__h2 { margin-top: 16px; }
  .idea__body { margin-top: 16px; }
  .idea__arts { margin-top: 40px; }
  .idea__labs { margin-top: 16px; }
  .idea__pills { margin-top: 24px; }
  .idea__yes { margin-top: 40px; }
  .idea__art--l img { height: 200px; }
  .idea__art--c img { height: 224px; }
  .idea__art--r img { height: 170px; }
}
@media (min-width: 1024px) {
  .idea__art--l img { height: 240px; }
  .idea__art--c img { height: 268px; }
  .idea__art--r img { height: 205px; }
}

/* ===================================================================
   7. COMPARISON — масштабирование целиком (§5)
   =================================================================== */
@media (min-width: 761px) and (max-width: 1023px) {
  .cmp-wrap { background: var(--c-cmp-outer); display: flex; justify-content: center; height: 878px; overflow: hidden; }
  .cmp { transform: scale(1.15); transform-origin: top center; }
}
@media (min-width: 1024px) {
  .cmp-wrap { background: var(--c-cmp-outer); display: flex; justify-content: center; height: 992px; overflow: hidden; }
  .cmp { transform: scale(1.3); transform-origin: top center; }
}

/* ===================================================================
   8. OCCASIONS (§4.4/§4.7) — 2 в ряд планшет, 4 в ряд десктоп; шапка по центру
   =================================================================== */
@media (min-width: 761px) {
  /* шапка и текст — во всю ширину контейнера (края совпадают с сеткой карточек) */
  .occ__eyebrow, .occ__h2, .occ__sub, .occ__close { width: 100%; }
  .occ__h2 { margin-top: 16px; }
  .occ__sub { margin-top: 16px; }
  .occ__grid { gap: 20px; margin-top: 40px; }
  .occ__close { margin-top: 40px; }
  .occ__cta { margin-top: 24px; }
}
@media (min-width: 1024px) { .occ__grid { grid-template-columns: repeat(4, 1fr); } }

/* ===================================================================
   9. NUTRITION (§4.5) — пачка слева, КБЖУ/пиллы/панель справа
   =================================================================== */
@media (min-width: 761px) and (max-width: 1023px) {
  .nut__h2 { margin-top: 16px; }
  .nut__sub { margin-top: 16px; }
  .nut__row { align-items: flex-start; margin-top: 40px; }
  .nut__pack { flex: 0 0 240px; }
  .nut__pack img { max-height: none; }
  .nut__pills { overflow: visible; flex-wrap: wrap; margin-top: 24px; }
  .nut__panel { margin-top: 24px; }
}
@media (min-width: 1024px) {
  .nut {
    display: grid;
    grid-template-columns: 360px 1fr;
    column-gap: 56px; row-gap: 0;   /* верт. шаги — margin'ами из шкалы */
    grid-template-areas:
      "ey    ey"
      "h2    h2"
      "sub   sub"
      "pack  cards"
      "pack  pills"
      "pack  panel";
    align-items: start;
  }
  .nut__eyebrow { grid-area: ey; }
  .nut__h2 { grid-area: h2; margin: 16px 0 0; }        /* ey → h2 */
  .nut__sub { grid-area: sub; margin: 16px 0 0; }      /* h2 → sub */
  .nut__row { display: contents; }
  .nut__pack { grid-area: pack; align-self: start; margin: 40px 0 0; }   /* шапка → контент */
  .nut__pack img { max-height: none; width: 100%; }
  .nut__cards { grid-area: cards; grid-template-columns: repeat(4, 1fr); margin: 40px 0 0; }
  .nut__pills { grid-area: pills; overflow: visible; flex-wrap: wrap; margin: 24px 0 0; }
  .nut__panel { grid-area: panel; margin: 24px 0 0; }
}

/* ===================================================================
   10. TASTE FIRST (§4.6) — 3 в ряд; фото и текст с ОДНИМ левым краем
   =================================================================== */
@media (min-width: 761px) {
  .val__h2 { margin-top: 16px; }
}
@media (min-width: 1024px) {
  .val {
    display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 24px;
    align-items: start; row-gap: 0;   /* верт. шаги задаём margin'ами из шкалы */
  }
  .val__eyebrow, .val__h2 { grid-column: 1 / -1; }
  .val__h2 { margin: 16px 0 0; }       /* eyebrow → h2 = 16 */
  /* карточка: h2→карточки 40; фото сверху, номер+заголовок, описание — один левый край (padding 16) */
  .val__card { margin: 40px 0 0; display: flex; flex-direction: column; padding: 0 0 16px; overflow: hidden; }
  .val__row { display: contents; }
  .val__ph { order: 0; flex: none; width: 100%; aspect-ratio: 16 / 10; border-radius: var(--r-card) var(--r-card) 0 0; }
  .val__head { order: 1; margin: 16px 16px 0; }
  .val__d { order: 2; margin: 8px 16px 0; }
  .val__t { white-space: normal; }
}

/* ===================================================================
   11. REVIEWS (§5) — 3 в кадре + СТРЕЛКИ; шапка по центру
   =================================================================== */
@media (min-width: 761px) {
  .rev__eyebrow, .rev__h2, .rev__sub { width: 100%; }
  .rev__h2 { margin-top: 16px; }
  .rev__sub { margin-top: 16px; }
  .rev__viewport { margin-top: 40px; }
  .rev__track { margin-top: 0; }
  .rev__dots { margin-top: 24px; }
  .rev__cta { margin-top: 40px; }
}
@media (min-width: 761px) and (max-width: 1023px) {
  .rev-card { flex: 0 0 calc((100% - 14px) / 2); }
}
@media (min-width: 1024px) {
  .rev-card { flex: 0 0 calc((100% - 28px) / 3); }
}
/* стрелки: обёртка .rev__viewport (позиционирование). На десктопе у обёртки жёлоба
   56px по бокам — трек уже, стрелки стоят В жёлобах, не над карточками.
   Показываются только на десктопе; на мобильном свайп, стрелки скрыты. */
.rev__viewport { position: relative; width: 100%; }
.rev__arrow { display: none; }
@media (min-width: 761px) {
  .rev__viewport { padding-inline: 56px; }
  .rev__arrow {
    position: absolute; top: 44%; transform: translateY(-50%); z-index: 3;
    display: inline-flex; align-items: center; justify-content: center;
    width: 48px; height: 48px; border-radius: var(--r-pill);
    background: var(--c-white); color: var(--c-ink);
    box-shadow: var(--sh-card); border: 1px solid var(--c-border);
    transition: filter var(--dur) var(--ease), opacity var(--dur) var(--ease);
  }
  .rev__arrow svg { width: 22px; height: 22px; }
  .rev__arrow--prev { left: 4px; }
  .rev__arrow--next { right: 4px; }
  .rev__arrow--next svg { transform: scaleX(-1); }
  @media (hover: hover) { .rev__arrow:hover { filter: brightness(.96); } }
  .rev__arrow:disabled { opacity: .35; cursor: default; }
}

/* ===================================================================
   12. ABOUT (§4.3) — коллаж СЛЕВА целиком (аспект файла 1400/788), текст справа
   =================================================================== */
@media (min-width: 761px) { .abt__h2 { margin-top: 16px; } }
@media (min-width: 1024px) {
  .abt {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 56px;
    align-items: center;
    text-align: left;
    grid-template-areas:
      "collage eyebrow"
      "collage h2"
      "collage b1"
      "collage b2";
    grid-template-rows: auto auto auto 1fr;   /* лишнее — в нижний спейсер под текстом */
  }
  .abt__collage { grid-area: collage; aspect-ratio: 1400 / 788; margin: 0; align-self: center; }
  .abt__collage img { object-fit: cover; }   /* соотношение бокса = файлу → без обрезки */
  .abt__eyebrow { grid-area: eyebrow; align-self: end; }
  .abt__h2 { grid-area: h2; margin: 16px 0 0; }
  .abt__b1 { grid-area: b1; max-width: 46ch; margin: 24px 0 0; justify-self: start; }
  .abt__b2 { grid-area: b2; max-width: 46ch; margin: 16px 0 0; justify-self: start; align-self: start; }
}

/* ===================================================================
   13. ORDER (ТЗ 11.09 §5) — одна колонка 560 по центру, как у конфигуратора
   YES YOU CAN. Секция остаётся flex-колонкой (grid с областями prev/receipt/tiles
   снят вместе с превью, названием и чеком). Шаги между блоками — из шкалы §6.
   =================================================================== */
@media (min-width: 761px) {
  .ord__h2 { margin-top: 16px; }
  .ord__sub { margin-top: 16px; }
  .ord__step, .packs, .ord__total, .ord__note, .ord__ships { width: 560px; max-width: 100%; }
  .ord__cta { width: 560px; max-width: 100%; min-width: 0; }
  .ord__step { margin-top: 32px; }     /* подзаголовок → шаг */
  .packs { margin-top: 16px; }         /* шаг → список */
  .ord__total { margin-top: 24px; }    /* список → итог */
  .ord__note { margin-top: 16px; }     /* итог → примечание */
  .ord__cta { margin-top: 16px; }      /* примечание → кнопка */
  .ord__ships { margin-top: 16px; }    /* кнопка → доставка */
}
@media (min-width: 1024px) {
  .prow__ph img { height: 56px; }
}

/* ===================================================================
   14. FAQ (§4.10) — одна колонка ≤820 по центру; ответы 17px (§3)
   =================================================================== */
@media (min-width: 761px) {
  /* шапка той же ширины, что список (820) → общий левый край */
  .faq__eyebrow, .faq__h2 { width: 100%; max-width: 820px; margin-inline: auto; }
  .faq__h2 { margin-top: 16px; }
  .faq__list { max-width: 820px; margin-inline: auto; margin-top: 40px; }
  .qa__a p { font-size: var(--fs-cap); }
}
@media (min-width: 1024px) { .qa__a p { font-size: 1.0625rem; } }   /* 17 */

/* ===================================================================
   15. FOOTER (§4.11) — бренд шире + ссылки без плюсиков; копирайт строкой
   =================================================================== */
@media (min-width: 761px) {
  .foot {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1fr;
    column-gap: 32px; row-gap: 24px;
    align-items: start;
  }
  .foot__top { grid-column: 1; flex-direction: column; align-items: flex-start; gap: 16px; }
  .foot__links {
    grid-column: 2 / -1; margin-top: 0;
    display: flex; flex-direction: row; gap: 32px; align-items: flex-start;
    justify-content: space-between;
  }
  .foot__row { border: 0; min-height: 44px; min-width: 44px; justify-content: flex-start; }
  .foot__pm { display: none; }
  .foot__copy { grid-column: 1 / -1; margin-top: 16px; }
}