/* Рико Бонго — витрина предзаказа.

   Сцена: человек стоит на улице или сидит дома в Юрьевце и выбирает, что съесть
   через двадцать минут. Свет дневной, тёплый — как в референсе: светлое стекло
   лежит на цветном размытом фоне, а не чёрная панель на чёрном.

   Материал взят из референса: стекло. Панели полупрозрачные, размывают то, что
   под ними, и держат светлую кромку сверху — как будто лежат над сценой, а не
   нарисованы на ней. За стеклом живёт настоящее фото нашей еды, размытое до
   пятна: оно даёт тёплые отсветы, ради которых стекло и существует.

   🔴 Контраст считан, а не прикинут. На кремовом стекле:
   уголь 11:1 · приглушённый 5.4:1 · тёмно-оранжевый 4.6:1.
   🔴 Белый текст на фирменном #E54D1D даёт 3.88 — порог не проходит, поэтому
   на оранжевых заливках надпись ТЁМНАЯ (4.9). Сам #E54D1D как ТЕКСТ по кремовому
   тоже 3.88 — для надписей берётся --brand-ink (темнее), яркий остаётся заливкам. */

:root {
  /* Фирменные — из вектора логотипа, brand/BREND.md */
  --brand:        oklch(0.626 0.196 36.5);   /* #E54D1D — заливки */
  --brand-ink: oklch(0.510 0.180 33.0);   /* оранжевый ТЕКСТОМ по стеклу: 4.8 */
  --brand-hot:    oklch(0.690 0.200 38.0);   /* ховер заливки */
  --cream:        oklch(0.959 0.037 97.1);   /* #F8F2D6 */

  /* База — тёмный тёплый уголь. Сцена и стекло строятся на ней. */
  --bg: oklch(0.945 0.018 82.0);
  --raised: oklch(1 0 0 / .55);

  /* 🔴 Стекло — это СВЕТ, пропущенный сквозь тёмное, а не светлая заливка.
     Поэтому слои задаются белым с малой непрозрачностью: сквозь них проступает
     сцена, и панель начинает выглядеть стеклом, а не картонкой. */
  --glass-app: oklch(1.000 0.004 95.0 / .14);  /* несущая плоскость экрана */
  --glass: oklch(1.000 0.003 95.0 / .52);  /* элементы НА ней */
  --glass-soft: oklch(1.000 0.002 95.0 / .26);
  --glass-deep: oklch(1.000 0.004 95.0 / .72);
  --glass-edge: oklch(1 0 0 / .95);  /* блик по верхней кромке */
  --glass-line: oklch(0.350 0.030 55.0 / .16);
  --rule:        oklch(0.350 0.030 55.0 / .16);   /* разделитель строк */
  --rule-strong: oklch(0.350 0.030 55.0 / .34);   /* черта перед итогом */
  --scene-a: oklch(0.790 0.155 45.0 / .72);
  --scene-b: oklch(0.870 0.125 78.0 / .68);
  --scene-c: oklch(0.770 0.145 28.0 / .60);
  --scene-veil: oklch(0.985 0.010 88.0 / .10);
  --hero-tint: oklch(0.800 0.145 52.0 / .95);
  --glass-sheen: oklch(1 0 0 / .60);
  --blur: blur(34px) saturate(1.9);
  --blur-lite: blur(24px) saturate(1.7);

  /* Текст. Контраст считан на стекле поверх сцены:
     кремовый 8.6 · приглушённый 6.2 · оранжевый 4.8. */
  --ink: oklch(0.235 0.024 50.0);
  --ink-soft: oklch(0.435 0.024 52.0);
  --ink-dim: oklch(0.540 0.022 56.0);
  --on-brand:     oklch(0.175 0.020 42.0);   /* тёмное на оранжевом — 4.9 */

  /* Состояния */
  --ok: oklch(0.500 0.140 152.0);
  --err: oklch(0.505 0.190 27.0);
  --warn: oklch(0.500 0.130 62.0);

  /* 🔴 Шкала кегля. Дробных значений (12.5, 13.5, 14.5) в системе нет:
     одна роль — один шаг, иначе «почти одинаковый» текст читается как брак. */
  --t-xs:  12px;   /* счётчики, подписи на плашках */
  --t-sm:  13px;   /* вес, калорийность, подсказки групп */
  --t-md:  14px;   /* подписи полей, вторичный текст */
  --t-base:15px;   /* компактный основной: слоты, строки корзины */
  --t-lg:  16px;   /* основной текст и кнопки */
  --t-xl:  18px;   /* название блюда, номер заказа в списке */
  --t-2xl: 20px;   /* цена, итог, заголовок раздела */
  --t-3xl: 24px;   /* имя блюда в карточке */

  /* 🔴 Веса — только те четыре, что реально загружены в fonts.css.
     Промежуточные (550, 620, 650, 680, 750, 780) браузер молча округлял
     до ближайшего файла: девять «весов» в коде давали три на экране. */
  --w-normal: 400;
  --w-semi:   600;
  --w-bold:   700;

  /* Шаг отступа — 4px. Всё, что не кратно, — случайность. */
  --s-1:  4px;
  --s-2:  8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-7: 32px;
  --s-8: 40px;

  --r-sm: 12px;
  --r:    16px;
  --r-lg: 20px;
  --r-xl: 24px;
  --r-app: 22px;                          /* несущая плоскость .app */
  --r-app-in: calc(var(--r-app) - 1px);   /* шапка внутри её рамки */

  /* Высоты органов управления. Две ступени, третьей быть не должно. */
  --h-ctl: 52px;   /* основное: кнопка, поле ввода */
  --h-sec: 44px;   /* вторичное: сегмент, слот, круглая кнопка */
  --tap:   44px;   /* минимальная тач-цель */

  --gap: 12px;
  /* Лист карточки блюда. Отдельный токен, потому что он НЕ стеклянный:
     под ним лежит снимок, а не сцена. В светлой теме — почти белый,
     в тёмной — приподнятая тёмная поверхность (см. тему «ночь»). */
  --sheet: color-mix(in oklab, var(--bg) 22%, white);

  --maxw: 760px;
  --tab-h: 82px;

  --ease: cubic-bezier(.16, 1, .3, 1);

  --z-sticky: 10;
  --z-bar:    20;
  --z-modal:  30;
}


/* ======================================================================
   ЗАПАСНЫЕ ТЕМЫ. Основная — кремовая, она живёт в :root.
   Переключатель — ?theme=graphite|ember
   Различие одно и принципиальное: на какой поверхности лежит еда.
   🔴 Наш оранжевый — это цвет самой шаурмы. Если он же идёт в фон, еда
   сливается с подложкой. Поэтому вариант «графит» уводит поверхность в
   нейтраль, «уголь» оставляет её тёплой, «крем» переворачивает в светлую.
   ====================================================================== */

/* ГРАФИТ — как в референсе по светлоте: нейтральная поверхность, еда светится */
body[data-theme="graphite"] {
  color-scheme: dark;
  --bg:         oklch(0.145 0.008 62.0);     /* не чистый чёрный: он «мажет» на OLED */
  --glass-app:  oklch(1 0 0 / .045);
  --glass:      oklch(1 0 0 / .06);
  --glass-soft: oklch(1 0 0 / .035);
  --glass-deep: oklch(0.175 0.008 62.0 / .88);
  --glass-edge: oklch(1 0 0 / .14);
  --glass-line: oklch(1 0 0 / .08);          /* волосяная рамка, эталон .08 */
  --rule:        oklch(1 0 0 / .08);
  --rule-strong: oklch(1 0 0 / .22);
  --raised:     oklch(1 0 0 / .08);
  --ink:        oklch(0.960 0.012 90.0);
  --ink-soft:   oklch(0.720 0.010 85.0);
  --ink-dim:    oklch(0.610 0.010 85.0);
  --brand-ink:  oklch(0.745 0.175 45.0);
  /* Свечение — атмосфера, а не подсветка сцены: 0.10, как в эталоне */
  --scene-a:    oklch(0.620 0.190 38.0 / .12);
  --scene-b:    oklch(0.680 0.150 62.0 / .08);
  --scene-c:    oklch(0.540 0.170 30.0 / .10);
  --scene-veil: oklch(0.110 0.008 60.0 / .40);
  --hero-tint:  oklch(0.520 0.140 44.0 / .30);
}

/* УГОЛЬ — тёплая поверхность, фирменный тон держит весь экран */
body[data-theme="ember"] {
  color-scheme: dark;
  --bg:         oklch(0.205 0.026 42.0);
  --glass-app:  oklch(0.800 0.055 46.0 / .16);
  --glass:      oklch(0.840 0.050 48.0 / .22);
  --glass-soft: oklch(0.860 0.040 50.0 / .12);
  --glass-deep: oklch(0.270 0.030 42.0 / .80);
  --glass-edge: oklch(0.990 0.020 70.0 / .40);
  --glass-line: oklch(0.950 0.030 60.0 / .20);
  --rule:        oklch(0.950 0.030 60.0 / .20);
  --rule-strong: oklch(0.950 0.030 60.0 / .42);
  --raised:     oklch(0.850 0.045 48.0 / .18);
  --ink:        var(--cream);
  --ink-soft:   oklch(0.830 0.020 80.0);
  --ink-dim:    oklch(0.720 0.020 80.0);
  --brand-ink:  oklch(0.735 0.175 44.0);
  --scene-a:    oklch(0.665 0.205 38.0 / .92);
  --scene-b:    oklch(0.700 0.180 60.0 / .60);
  --scene-c:    oklch(0.585 0.195 30.0 / .85);
  --scene-veil: oklch(0.130 0.018 40.0 / .50);
  --hero-tint:  oklch(0.680 0.185 44.0 / .92);
}

/* НОЧЬ — основная тема. Референс Акопа: тёмная тёплая сцена, еда светится,
   оранжевый только акцентом. Отличие от референса намеренное: база светлее
   (#291E18 против почти чёрного) — он просил «чуть посветлее», и на светлой
   базе шаурма перестаёт выглядеть вырезкой, наклеенной на чёрный лист.

   🔴 Свечение ТОЧЕЧНОЕ, а не заливкой. Наш оранжевый — это цвет самой еды:
   залив им фон (как в теме «уголь»), мы прячем шаурму в подложку. Поэтому
   отсветы слабые и уходят к краям, а центр остаётся тёмным — там лежит еда.

   Контраст считан скриптом, а не на глаз (пары «текст / фон»):
   основной 15.2 · вторичный 8.7 · приглушённый на панели 5.1 ·
   оранжевый текстом 7.4 · тёмная надпись на оранжевой кнопке 5.0. */
body[data-theme="night"] {
  color-scheme: dark;
  --bg:         oklch(0.245 0.020 46.0);     /* #291E18 — тёплый графит */
  --glass-app:  oklch(1 0 0 / .02);
  --glass:      oklch(1 0 0 / .085);
  --glass-soft: oklch(1 0 0 / .05);
  --glass-deep: oklch(0.285 0.020 46.0 / .92);
  --glass-edge: oklch(1 0 0 / .17);
  --glass-line: oklch(1 0 0 / .10);
  --glass-sheen: oklch(1 0 0 / .10);
  --rule:        oklch(1 0 0 / .10);
  --rule-strong: oklch(1 0 0 / .26);
  --raised:     oklch(1 0 0 / .09);
  --ink:        oklch(0.975 0.008 85.0);
  --ink-soft:   oklch(0.800 0.014 80.0);
  --ink-dim:    oklch(0.700 0.014 80.0);
  --brand-ink:  oklch(0.775 0.165 52.0);     /* #FF9345 — оранжевый текстом */
  --scene-a:    oklch(0.640 0.200 40.0 / .09);
  --scene-b:    oklch(0.700 0.160 66.0 / .06);
  --scene-c:    oklch(0.560 0.180 30.0 / .06);
  --scene-veil: oklch(0.160 0.014 44.0 / .72);
  --hero-tint:  oklch(0.590 0.165 44.0 / .55);
  --sheet:      oklch(0.300 0.020 46.0);   /* #372B25, основной текст 12.8 */
}

/* 🔴 Сцена тёмной темы — ДВА пятна, а не шесть. Общая сцена рассчитана на светлую
   витрину: там шесть перекрывающихся отсветов дают мягкий тёплый воздух. На тёмной
   они складываются в сплошную коричневую муть, и экран перестаёт быть тёмным.
   В референсе свет идёт сверху одним пятном, центр остаётся чёрным — там еда. */
body[data-theme="night"] .scene {
  background:
    radial-gradient(118% 40% at 50% -8%, var(--scene-a), transparent 56%),
    radial-gradient(64% 30% at 92% 26%, var(--scene-c), transparent 58%),
    var(--bg);
}
/* 🔴 Шапка на тёмной теме — сплошная, без просвета. Общие 78% рассчитаны на
   светлую витрину; здесь под шапку уезжают крупные дневные снимки, и сквозь
   стекло читались название и цена ЧУЖОЙ карточки. Размытие тут не спасает:
   .app сам лежит под backdrop-filter, вложенное стекло сквозь стекло почти
   не работает. Сплошная полоса заодно ближе к референсу — там шапка глухая. */
body[data-theme="night"] header.scrolled {
  background: var(--bg);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* ДЕНЬ — основная тема с 22.09.2026 (решение Акопа: «фон бежевый или белый,
   но чтобы стекло сохранилось»).

   🔴 Главная трудность светлой темы: СТЕКЛО НА БЕЛОМ НЕ ЧИТАЕТСЯ. Размытие
   показывает то, что лежит под панелью; под белым лежит белое, и стекло
   превращается в белый прямоугольник. Поэтому здесь оно собрано из трёх вещей
   сразу, а не из одного backdrop-filter:
     1) под панелями лежат ОЧЕНЬ слабые тёплые пятна по краям экрана — стеклу
        есть что ловить, но середина остаётся чистой и мути не даёт;
     2) размытие идёт с повышенной насыщенностью: под стеклом цвет чуть сочнее,
        чем рядом, — именно это глаз читает как стекло;
     3) светлая кромка сверху и мягкая ТЁПЛАЯ тень снизу. Серая тень на тёплом
        белом сразу выглядит грязной.

   🔴 Фон намеренно НЕ бежевый: #FCFAF6 — почти белый с еле заметной тёплой
   ноткой. Насыщенный беж на этой светлоте — самый заезженный фон 2026 года,
   его видно за версту; тепло сюда приносят логотип, еда и оранжевый акцент.

   Контраст посчитан до вёрстки: основной текст 15.4 · вторичный 6.7 ·
   подсказки 4.8 · оранжевый текстом 6.1 · надпись на оранжевой кнопке 4.9. */
body[data-theme="day"] {
  color-scheme: light;
  --bg:          oklch(0.985 0.005 80.0);     /* #FCFAF6 */
  --glass-app:   oklch(1 0 0 / .50);
  --glass:       oklch(1 0 0 / .68);
  --glass-soft:  oklch(1 0 0 / .40);
  --glass-deep:  oklch(1 0 0 / .90);
  --glass-edge:  oklch(1 0 0 / .95);
  --glass-sheen: oklch(1 0 0 / .85);
  --glass-line:  oklch(0.450 0.030 55.0 / .14);
  --rule:        oklch(0.450 0.030 55.0 / .13);
  --rule-strong: oklch(0.450 0.030 55.0 / .30);
  --raised:      oklch(1 0 0 / .70);
  --ink:         oklch(0.255 0.020 50.0);     /* #2B201A */
  --ink-soft:    oklch(0.470 0.020 50.0);
  --ink-dim:     oklch(0.545 0.018 52.0);
  --brand-ink:   oklch(0.555 0.190 34.0);     /* оранжевый ТЕКСТОМ */
  --on-brand:    oklch(0.175 0.020 42.0);     /* тёмное на оранжевой заливке */
  --sheet:       oklch(0.995 0.003 85.0);     /* лист карточки блюда — плотный */
  /* Пятна под стеклом: оранжевое сверху, жёлтое снизу. Сила подобрана так,
     чтобы стекло их поймало, а белый фон остался белым. */
  --scene-a:     oklch(0.800 0.150 48.0 / .22);
  --scene-b:     oklch(0.880 0.130 88.0 / .20);
  --scene-c:     oklch(0.820 0.130 32.0 / .16);
  --scene-veil:  oklch(1 0 0 / .00);
  --hero-tint:   oklch(0.860 0.120 60.0 / .55);
  --blur:        blur(26px) saturate(1.55);
  --blur-lite:   blur(20px) saturate(1.45);
}

/* Сцена дневной темы: тепло живёт по КРАЯМ, центр чистый.
   Пятно в центре — это и есть та муть, из-за которой тёмный вариант не пошёл. */
body[data-theme="day"] .scene {
  background:
    radial-gradient(96% 34% at 50% -6%,  var(--scene-a), transparent 62%),
    radial-gradient(58% 26% at 104% 30%, var(--scene-c), transparent 60%),
    radial-gradient(80% 32% at 50% 104%, var(--scene-b), transparent 62%),
    var(--bg);
}
body[data-theme="day"] .scene::after { background: none; }

/* Тень тёплая, не серая: серая на тёплом белом читается как грязь. */
body[data-theme="day"] .item,
body[data-theme="day"] .search,
body[data-theme="day"] .panel,
body[data-theme="day"] .tabs {
  box-shadow:
    inset 0 1px 0 var(--glass-sheen),
    0 2px 5px -3px oklch(0.400 0.090 45.0 / .28),
    0 16px 32px -22px oklch(0.400 0.090 45.0 / .50);
}

/* 🔴 Внизу сцена гасилась под цвет фона — это правило написано для тёмной темы,
   где иначе меню плавало в мареве. На светлой оно съедало нижнее жёлтое пятно,
   и стеклу таб-бара становилось нечего ловить. */
body[data-theme="day"] .scene-fade { display: none; }

/* Шапка на светлом остаётся стеклянной: под ней светлое, текст сквозь неё
   не читается — в отличие от тёмной темы, где пришлось делать её глухой. */
body[data-theme="day"] header.scrolled {
  background: color-mix(in oklab, var(--bg) 72%, transparent);
}

/* СМЭШ — вариант по референсу smashpoint.ru (Акоп прислал 22.09.2026).
   Что взято: заливка одним тёплым цветом, чёрная плакатная типографика,
   меню как ПЕЧАТНЫЙ ЛИСТ с пунктиром вместо карточек, ингредиенты в овальных
   обводках, крупные скругления 20–30 px.
   Что заменено на своё: их жёлтый #F8E08E → наш фирменный кремовый #F8F2D6
   из логотипа (тот же приём, свой цвет); их моноширинный Martian Mono →
   наш Golos Text заглавными с разрядкой (шрифт в проект пока не тащим).
   🔴 Стекла здесь НЕТ намеренно: в референсе плоские плашки, а не стекло. */
body[data-theme="smash"] {
  color-scheme: light;
  --bg:          oklch(0.959 0.037 97.1);      /* #F8F2D6 — кремовый из логотипа */
  --glass-app:   oklch(1 0 0 / .00);
  --glass:       oklch(1 0 0 / .62);
  --glass-soft:  oklch(1 0 0 / .38);
  --glass-deep:  oklch(1 0 0 / .96);
  --glass-edge:  oklch(0.180 0.010 60.0 / .16);
  --glass-sheen: oklch(1 0 0 / .00);
  --glass-line:  oklch(0.180 0.010 60.0 / .16);
  --rule:        oklch(0.180 0.010 60.0 / .18);
  --rule-strong: oklch(0.180 0.010 60.0 / .40);
  --raised:      oklch(1 0 0 / .70);
  --ink:         oklch(0.180 0.010 60.0);      /* почти чёрный */
  --ink-soft:    oklch(0.400 0.012 60.0);
  --ink-dim:     oklch(0.470 0.012 60.0);
  --brand-ink:   oklch(0.510 0.180 33.0);      /* #CE451A — 4.7 на кремовом */
  --on-brand:    oklch(0.175 0.020 42.0);
  --sheet:       oklch(0.995 0.003 85.0);
  --blur:        none;
  --blur-lite:   none;
  /* Крупные скругления — главная геометрия референса */
  --r-sm: 14px;  --r: 20px;  --r-lg: 24px;  --r-xl: 30px;
  --r-app: 30px; --r-app-in: 29px;
}

/* Фон плоский: никаких пятен и свечения — в референсе чистая заливка. */
body[data-theme="smash"] .scene { background: var(--bg); }
body[data-theme="smash"] .scene::after,
body[data-theme="smash"] .scene-fade { display: none; }
body[data-theme="smash"] .item,
body[data-theme="smash"] .search,
body[data-theme="smash"] .tabs { box-shadow: none; }

/* ---- Заголовок-плакат ---- */
body[data-theme="smash"] h1.title {
  font-family: "Unbounded", "Golos Text", sans-serif;
  text-transform: uppercase;
  font-weight: 800;
  line-height: 0.92;
  letter-spacing: -0.03em;
  font-size: clamp(38px, 13vw, 76px);
}
body[data-theme="smash"] h1.title em { font-style: normal; color: var(--brand-ink); }
body[data-theme="smash"] .hello,
body[data-theme="smash"] .lead {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: var(--t-sm);
}
body[data-theme="smash"] .facts li {
  border: 1px solid var(--glass-line);
  background: none;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: var(--t-xs);
  padding-inline: 12px;   /* иначе разрядка распирает плашки и они встают в столбик */
}

/* ---- Меню как печатный лист ---- */
body[data-theme="smash"] #menu {
  background: oklch(1 0 0 / .62);
  border-radius: var(--r-xl);
  padding: var(--s-6) var(--s-4);
  margin-top: 26px;
}
body[data-theme="smash"] .items {
  grid-template-columns: 1fr;
  gap: 0;
}
/* 🔴 Строка меню, а не карточка: ни фона, ни рамки, ни тени.
   Снимок в списке скрыт намеренно — в референсе меню текстовое, а еда живёт
   отдельным блоком. Наши снимки при этом никуда не делись: они остаются на
   экране блюда, где занимают весь верх. */
body[data-theme="smash"] .item {
  background: none;
  border: 0;
  border-radius: 0;
  padding: var(--s-5) var(--s-2);
  display: block;
  text-align: center;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
body[data-theme="smash"] .item:hover { transform: none; }
body[data-theme="smash"] .item-shot,
body[data-theme="smash"] .item-noshot { display: none; }
/* Пунктир между позициями — приём из бумажного меню */
body[data-theme="smash"] .item + .item {
  border-top: 2px dotted var(--rule);
}
body[data-theme="smash"] .item-body { padding: 0; gap: var(--s-2); align-items: center; }
body[data-theme="smash"] .item-head { justify-content: center; }
body[data-theme="smash"] .item-name {
  font-family: "Unbounded", "Golos Text", sans-serif;
  text-transform: uppercase;
  font-weight: 700;
  font-size: var(--t-xl);
  letter-spacing: 0.02em;
  -webkit-line-clamp: initial;
  display: block;
}
body[data-theme="smash"] .item-facts {
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-size: var(--t-xs);
  color: var(--ink-soft);
}
body[data-theme="smash"] .item-foot {
  justify-content: center;
  gap: var(--s-4);
  padding: var(--s-3) 0 0;
}
body[data-theme="smash"] .item-price {
  font-family: "Unbounded", "Golos Text", sans-serif;
  font-size: 30px;
  font-weight: 700;
}
/* Кнопка-пилюля с обводкой вместо круглого плюса — как «ДОСТАВКА» в референсе */
body[data-theme="smash"] .item-add {
  width: auto;
  min-width: 112px;
  height: var(--tap);
  border-radius: 999px;
  background: none;
  border: 2px solid var(--ink);
  color: var(--ink);
  font-size: var(--t-sm);
  font-weight: var(--w-bold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
/* 🔴 Плюс внутри кнопки — текстовый узел, селектором его не достать.
   Гасим размер шрифта у самой кнопки и возвращаем его псевдоэлементу. */
body[data-theme="smash"] .item-add { font-size: 0; }
body[data-theme="smash"] .item-add::after {
  content: "в заказ";
  font-size: var(--t-sm);
  font-weight: var(--w-bold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
body[data-theme="smash"] .item-add svg { display: none; }
body[data-theme="smash"] .item:hover .item-add {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--on-brand);
  transform: none;
}

/* ---- Поиск и категории в том же голосе ---- */
body[data-theme="smash"] .search {
  background: none;
  border: 2px solid var(--glass-line);
}
body[data-theme="smash"] .search input::placeholder {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: var(--t-sm);
}

/* ---- «Смэш»: экран блюда ---- */
/* Снимок — отдельный блок со скруглением 30, а не подложка под лист.
   В референсе фотография всегда живёт своей плашкой с большим радиусом. */
body[data-theme="smash"] .dish-form { background: var(--bg); }
body[data-theme="smash"] .dish-hero {
  background: none;
  margin: var(--s-3) var(--s-3) 0;
  border-radius: var(--r-xl);
  overflow: hidden;
  min-height: min(220px, 28dvh);
}
body[data-theme="smash"] .dish-hero::after { display: none; }
body[data-theme="smash"] .sheet {
  margin-top: var(--s-4);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  border-top: 0;
  box-shadow: none;
}
body[data-theme="smash"] .sheet::before { background: linear-gradient(to bottom, var(--sheet) 0 22px, transparent 34px); }
body[data-theme="smash"] #dish-name,
body[data-theme="smash"] .customize,
body[data-theme="smash"] .dish-sum {
  font-family: "Unbounded", "Golos Text", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}
body[data-theme="smash"] .dish-tag {
  background: none;
  border: 2px solid var(--ink);
  color: var(--ink);
  letter-spacing: 0.08em;
}
body[data-theme="smash"] .dish-composition,
body[data-theme="smash"] .dish-nutrition,
body[data-theme="smash"] .dish-allergens { text-align: left; }
body[data-theme="smash"] .group-name {
  font-family: "Unbounded", "Golos Text", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
body[data-theme="smash"] .group-hint {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: var(--t-xs);
}
/* Строки добавок разделяет тот же пунктир, что и позиции меню */
body[data-theme="smash"] .opt { border-bottom: 2px dotted var(--rule); }
body[data-theme="smash"] .opt-price {
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}

/* ---- «Смэш»: кнопки и оформление заказа ---- */
body[data-theme="smash"] .btn {
  border-radius: 999px;
  font-family: "Unbounded", "Golos Text", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: var(--t-base);
}
body[data-theme="smash"] .btn-quiet {
  background: none;
  border: 2px solid var(--ink);
  color: var(--ink);
}
body[data-theme="smash"] .cat-title {
  font-family: "Unbounded", "Golos Text", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: var(--t-xl);
}
body[data-theme="smash"] .panel {
  background: oklch(1 0 0 / .62);
  border-radius: var(--r-xl);
  border: 0;
  box-shadow: none;
}
/* Слот — овальная обводка, как ингредиенты в референсе */
body[data-theme="smash"] .slot {
  border-radius: 999px;
  border: 2px solid var(--glass-line);
  background: none;
  font-variant-numeric: tabular-nums;
}
body[data-theme="smash"] .slot[aria-pressed="true"] {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--on-brand);
}
body[data-theme="smash"] .seg { border-radius: 999px; border: 2px solid var(--glass-line); background: none; }
body[data-theme="smash"] .seg button { text-transform: uppercase; letter-spacing: 0.06em; font-size: var(--t-sm); }
body[data-theme="smash"] .field input {
  border-radius: 999px;
  border: 2px solid var(--glass-line);
  background: none;
}
body[data-theme="smash"] .field > span {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: var(--t-xs);
}
body[data-theme="smash"] .total {
  font-family: "Unbounded", "Golos Text", sans-serif;
  text-transform: uppercase;
}
body[data-theme="smash"] .ticket-num {
  font-family: "Unbounded", "Golos Text", sans-serif;
}
body[data-theme="smash"] .tabs { border: 1px solid var(--glass-line); }

/* БЕЛАЯ ВИТРИНА — сделана с нуля 22.09.2026 по просьбе Акопа: «белый, без
   фонов, с картинками, минимализм».

   Правило одно и жёсткое: 🔴 НИ ОДНОЙ ЗАЛИВКИ И НИ ОДНОЙ ТЕНИ. Ни у карточек,
   ни у панелей, ни у поиска, ни у таб-бара. Всё, что раньше отделялось
   подложкой, здесь отделяется воздухом и волосяной линией. Как только
   появляется серая плашка — экран перестаёт быть белым и превращается в
   обычную витрину, каких тысячи.

   Второе правило: еда крупная и одна в ряд. Две колонки уменьшают снимок
   вдвое, а снимок здесь — единственное украшение экрана.

   Третье: оранжевый только на ДЕЙСТВИИ. Цена набрана чёрным — во-первых,
   так спокойнее, во-вторых, фирменный #E54D1D на белом даёт 3.88 при норме
   4.5 и как текст не проходит. Кнопка — заливка, там он законен. */
body[data-theme="pure"] {
  color-scheme: light;
  --bg:          oklch(1 0 0);                 /* чистый белый */
  --glass-app:   oklch(1 0 0 / 0);
  --glass:       oklch(1 0 0 / 0);
  --glass-soft:  oklch(1 0 0 / 0);
  --glass-deep:  oklch(1 0 0);
  --glass-edge:  oklch(0.200 0.006 60.0 / .10);
  --glass-sheen: oklch(1 0 0 / 0);
  --glass-line:  oklch(0.200 0.006 60.0 / .12);
  --rule:        oklch(0.200 0.006 60.0 / .10);
  --rule-strong: oklch(0.200 0.006 60.0 / .28);
  --raised:      oklch(0.200 0.006 60.0 / .05);
  --ink:         oklch(0.185 0.006 60.0);
  --ink-soft:    oklch(0.470 0.008 60.0);
  --ink-dim:     oklch(0.560 0.008 60.0);
  --brand-ink:   oklch(0.510 0.180 33.0);
  /* 🔴 Заливка кнопок на шаг темнее фирменной. Причина: белая надпись на
     #E54D1D даёт 3.88 при норме 4.5 — это прямо записано в нашем брендбуке.
     Тёмная надпись прошла бы, но на белом минималистичном экране она утяжеляет
     кнопку. Поэтому не меняем цвет надписи, а притушиваем заливку до #CB3814:
     тот же фирменный тон, белый текст на нём 5.10. */
  --brand:       oklch(0.560 0.190 34.0);
  --brand-hot:   oklch(0.600 0.195 35.0);
  --on-brand:    oklch(1 0 0);
  --sheet:       oklch(1 0 0);
  --blur:        none;
  --blur-lite:   none;
  --r-sm: 10px; --r: 14px; --r-lg: 18px; --r-xl: 22px;
  --r-app: 0px; --r-app-in: 0px;
}

/* Ни сцены, ни свечения, ни рамки вокруг приложения. */
body[data-theme="pure"] .scene { background: #fff; }
body[data-theme="pure"] .scene::after,
body[data-theme="pure"] .scene-fade { display: none; }
body[data-theme="pure"] .app {
  background: none;
  border: 0;
  box-shadow: none;
  margin: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
body[data-theme="pure"] header { background: #fff; }
body[data-theme="pure"] header.scrolled {
  background: #fff;
  box-shadow: none;
  border-bottom: 1px solid var(--rule);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* ---- Первый экран ---- */
body[data-theme="pure"] h1.title {
  font-weight: var(--w-bold);
  letter-spacing: -0.035em;
  line-height: 1.02;
  font-size: clamp(36px, 10.5vw, 60px);
  margin-top: 6px;
}
body[data-theme="pure"] h1.title em { font-style: normal; color: var(--ink); }
body[data-theme="pure"] .lead { color: var(--ink-soft); }
/* Факты — не плашки, а строка через точку: плашка это фон, а фонов здесь нет */
body[data-theme="pure"] .facts {
  display: block;
  margin-top: 14px;
  color: var(--ink-soft);
  font-size: var(--t-md);
}
body[data-theme="pure"] .facts li {
  display: inline;
  background: none;
  border: 0;
  padding: 0;
  font-weight: var(--w-normal);   /* от плашек достался полужирный — здесь он лишний вес */
  color: inherit;
}
body[data-theme="pure"] .facts li + li::before { content: " · "; }

/* Поиск — одна линия снизу, ни рамки, ни заливки */
body[data-theme="pure"] .search {
  background: none;
  border: 0;
  border-bottom: 1px solid var(--glass-line);
  border-radius: 0;
  padding-inline: 0;
  margin-top: 22px;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
body[data-theme="pure"] .search:focus-within { border-bottom-color: var(--ink); }

/* ---- Список: снимок во всю ширину, текст под ним ---- */
body[data-theme="pure"] .items {
  grid-template-columns: 1fr;
  gap: 46px;
}
body[data-theme="pure"] .item {
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
body[data-theme="pure"] .item:hover { transform: none; }
body[data-theme="pure"] .item-shot {
  aspect-ratio: 4 / 3;
  border-radius: var(--r-xl);
  overflow: hidden;
}
body[data-theme="pure"] .item-shot::after { display: none; }
body[data-theme="pure"] .item-body { padding: 16px 0 0; gap: 4px; }
body[data-theme="pure"] .item-name {
  font-size: 22px;
  font-weight: var(--w-semi);
  letter-spacing: -0.02em;
  -webkit-line-clamp: initial;
  display: block;
}
body[data-theme="pure"] .item-facts { color: var(--ink-dim); font-size: var(--t-md); }
body[data-theme="pure"] .item-foot { padding: 12px 0 0; }
body[data-theme="pure"] .item-price {
  font-size: 24px;
  font-weight: var(--w-bold);
  letter-spacing: -0.02em;
}
body[data-theme="pure"] .item-add {
  background: var(--brand);
  color: #fff;
  box-shadow: none;
}

/* ---- Экран блюда ---- */
body[data-theme="pure"] .dish-form { background: #fff; }
body[data-theme="pure"] .dish-hero {
  background: none;
  margin: 12px 12px 0;
  border-radius: var(--r-xl);
  overflow: hidden;
  min-height: min(240px, 30dvh);
}
body[data-theme="pure"] .dish-hero::after { display: none; }
body[data-theme="pure"] .dish-close,
body[data-theme="pure"] .dish-weight {
  background: #fff;
  border: 1px solid var(--glass-line);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
body[data-theme="pure"] .sheet {
  background: #fff;
  border-top: 0;
  box-shadow: none;
  margin-top: 8px;
}
body[data-theme="pure"] .sheet::before { background: linear-gradient(to bottom, #fff 0 22px, transparent 34px); }
body[data-theme="pure"] .dish-tag {
  background: none;
  border: 1px solid var(--glass-line);
  color: var(--ink-soft);
}
body[data-theme="pure"] #dish-name { letter-spacing: -0.025em; }
body[data-theme="pure"] .dish-sum { color: var(--ink); }
body[data-theme="pure"] .opt { border-bottom: 1px solid var(--rule); }

/* ---- Оформление ---- */
body[data-theme="pure"] .panel {
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding-inline: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
body[data-theme="pure"] .seg,
body[data-theme="pure"] .slot,
body[data-theme="pure"] .field input {
  background: none;
  border: 1px solid var(--glass-line);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
body[data-theme="pure"] .slot[aria-pressed="true"] {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}
body[data-theme="pure"] .btn { box-shadow: none; }
body[data-theme="pure"] .tabs {
  background: #fff;
  border: 0;
  border-top: 1px solid var(--rule);
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
body[data-theme="pure"] .cart-bar .btn { box-shadow: 0 8px 24px -14px oklch(0.626 0.196 36.5 / .6); }

/* КРЕМ — светлая поверхность, тёмный текст, оранжевый только акцентом */


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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--bg);
  color-scheme: light;
  color: var(--ink);
  font: 16px/1.55 "Golos Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-feature-settings: "ss01", "cv01";
  -webkit-font-smoothing: antialiased;
  padding-bottom: calc(var(--tab-h) + env(safe-area-inset-bottom));
  overflow-x: hidden;
}
/* Место под таб-бар резервируется только там, где он есть. На странице заказа,
   заглушке и документах эти 82 px были пустой полосой внизу.
   Порядок правил безопасен: без поддержки :has останется прежний отступ. */
body:not(:has(.tabs)) { padding-bottom: var(--s-6); }

/* Сцена за стеклом: настоящее фото нашей еды, размытое до тёплого пятна,
   плюс два оранжевых отсвета. Без неё стекло размывает пустоту и выглядит
   грязным серым прямоугольником. */
.scene {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  /* Свет идёт сверху и заливает середину — именно там лежит панель, и именно
     сквозь неё цвет обязан проступать. Подсветка по углам оставляла центр
     чёрным, и стекло выглядело серой картонкой. */
  background:
    radial-gradient(130% 58% at 50% -10%, var(--scene-a), transparent 64%),
    radial-gradient(75% 46% at 106% 34%,  var(--scene-b), transparent 62%),
    radial-gradient(80% 44% at -8% 62%,   var(--scene-c), transparent 62%),
    radial-gradient(58% 32% at 18% 44%,   var(--scene-b), transparent 60%),
    radial-gradient(54% 30% at 88% 70%,   var(--scene-c), transparent 58%),
    radial-gradient(120% 52% at 50% 106%, var(--scene-a), transparent 62%),
    var(--bg);
}
/* Тёплая дымка поверх света: убирает банд-полосы градиента и даёт глубину. */
.scene::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(118% 76% at 50% 40%, transparent 46%, var(--scene-veil));
}
/* Фон гасится книзу, иначе меню плавает в мареве и текст теряет опору. */
.scene-fade {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(180deg,
    transparent 0%, transparent 50%,
    color-mix(in oklab, var(--bg) 24%, transparent) 84%,
    color-mix(in oklab, var(--bg) 38%, transparent) 100%);
}

.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 16px; }

/* Служебные страницы — политика, оферта, статус заказа, панель персонала —
   без сцены: читать там, а не любоваться. База и текст те же. */
body:not(:has(.app)) .scene,
body:not(:has(.app)) .scene-fade { display: none; }
body:not(:has(.app)) header { border-bottom: 1px solid var(--glass-line); }
body:not(:has(.app)) main.wrap { padding-block: var(--s-5) var(--s-8); }
body:not(:has(.app)) .doc > h1:first-child { margin-top: 0; }
.brand { font-family: "Unbounded", "Golos Text", sans-serif; font-size: var(--t-2xl); margin: 0; }
.brand span { color: var(--brand-ink); }
/* Длину строки ограничивает сам текст, а не колонка целиком: иначе документ
   сужается и его левый край перестаёт совпадать с логотипом в шапке. */
.doc { line-height: 1.65; }
.doc p, .doc li { max-width: 68ch; }
.doc h1, .doc h2 { font-family: "Unbounded", "Golos Text", sans-serif; letter-spacing: -0.02em; }
.doc h1 { font-size: var(--t-3xl); line-height: 1.2; margin: var(--s-6) 0 0; text-wrap: balance; }
.doc h2 { font-size: var(--t-xl); margin: var(--s-7) 0 var(--s-2); }
.doc p, .doc li { font-size: var(--t-base); color: var(--ink); max-width: 68ch; }
.doc li { margin-bottom: var(--s-1); }
.doc ul { padding-left: var(--s-5); }
.doc a { color: var(--brand-ink); }
.doc footer { margin-top: var(--s-7); }

/* Подпись под заголовком: дата редакции, состояние связи в панели. */
.head-note { margin: var(--s-2) 0 0; font-size: var(--t-md); color: var(--ink-soft); }

/* Центрированная приписка под блоком — «оплата на кассе», «назовите номер». */
.note {
  margin: var(--s-3) 0 0;
  text-align: center;
  font-size: var(--t-md);
  line-height: 1.5;
  color: var(--ink-soft);
}

/* Ожидание загрузки заказа: место под ответ сервера, чтобы страница не прыгала. */
.loading { padding-block: var(--s-8); }

/* 🔴 Отступ кнопки задаёт система, а не атрибут style= в разметке:
   пять страниц ставили его руками и все пятью разными числами. */
.panel + .btn,
.ticket + .btn,
.notice + .btn { margin-top: var(--s-5); }
.btn + .btn { margin-top: var(--s-2); }

/* Несущая плоскость. Референс показывает телефон целиком: весь экран —
   одна стеклянная поверхность, элементы лежат на ней, а сцена просвечивает
   сквозь размытие. Без неё «стекло» вырождается в тёмные плашки. */
.app {
  position: relative;
  width: 100%;
  max-width: calc(var(--maxw) + 24px);
  margin-inline: auto;
  margin-block: 10px;
  width: calc(100% - 20px);
  border: 1px solid var(--glass-line);
  border-top-color: var(--glass-edge);
  border-radius: var(--r-app);
  background: var(--glass-app);
  box-shadow:
    inset 0 1px 0 var(--glass-sheen),
    0 30px 70px -28px oklch(0 0 0 / .40);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .app { -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .app { background: color-mix(in oklab, var(--bg) 92%, white); }
}
@media (min-width: 812px) {
  .app { margin-block: var(--s-6); --r-app: 26px; }
}

a { color: var(--brand-ink); }

:focus-visible {
  outline: 2px solid var(--brand-hot);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ---------- материал: стекло ---------- */
.glass {
  background: var(--glass);
  border: 1px solid var(--glass-line);
  border-top-color: var(--glass-edge);
  box-shadow:
    inset 0 1px 0 var(--glass-sheen),
    0 14px 30px -18px oklch(0 0 0 / .32);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .glass {
    -webkit-backdrop-filter: var(--blur);
    backdrop-filter: var(--blur);
  }
}
/* Нет backdrop-filter (старый Firefox, экономия батареи) — стекло становится
   плотной поверхностью. Текст обязан читаться в обоих случаях. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass { background: color-mix(in oklab, var(--bg) 88%, white); }
}

/* ---------- шапка ---------- */
header {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  /* 12 + рамка + 4 (логотип 40 в тач-цели 48) = 17 сверху, ровно как по бокам */
  padding: var(--s-3) 0;
  border-radius: var(--r-app-in) var(--r-app-in) 0 0;   /* ровно внутри рамки .app */
  transition: background .25s var(--ease), box-shadow .25s var(--ease);
}
header.scrolled {
  background: color-mix(in oklab, var(--bg) 78%, transparent);
  /* Мягкая тень вместо линии: граница поперёк экрана режет его пополам. */
  box-shadow: 0 10px 20px -16px oklch(0 0 0 / .45);
  -webkit-backdrop-filter: var(--blur-lite);
  backdrop-filter: var(--blur-lite);
}


.head-row { display: flex; align-items: center; gap: 12px; }
.brand-mark { display: flex; align-items: center; min-height: 48px; padding-right: 6px; text-decoration: none; }
.brand-mark img { height: 40px; width: auto; display: block; }

/* Круглая стеклянная кнопка — из референса (там аватар и гамбургер).
   У нас за ней живое действие: позвонить. */
.round-btn {
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--ink);
  cursor: pointer;
  text-decoration: none;
  transition: transform .2s var(--ease), background .2s var(--ease);
}
.round-btn svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.round-btn:hover { background: var(--glass-soft); transform: scale(1.05); }
.head-row .round-btn { margin-left: auto; }

/* ---------- заголовок ---------- */
.hello {
  margin: 16px 0 0;
  font-size: var(--t-md);
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  gap: 7px;
}
.hello svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; flex: 0 0 auto; }

h1.title {
  font-family: "Unbounded", "Golos Text", sans-serif;
  margin: 6px 0 0;
  font-size: clamp(25px, 6.6vw, 36px);
  line-height: 1.12;
  letter-spacing: -0.03em;
  font-weight: var(--w-bold);
  text-wrap: balance;
}
h1.title em { font-style: normal; color: var(--brand-ink); }
/* Заглушка начинается прямо с заголовка — ему нужен воздух под шапкой,
   которого на витрине даёт строка адреса. */
main > h1.title:first-child { margin-top: var(--s-5); }

.lead {
  margin: 8px 0 0;
  font-size: var(--t-lg);
  line-height: 1.45;
  color: var(--ink-soft);
  max-width: 34ch;
}

/* Факты строкой, а не блоком: три коротких утверждения занимают одну строку
   вместо трети экрана, который раньше съедал промо-баннер. */
.facts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
}
.facts li {
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--glass);
  border: 1px solid var(--glass-line);
  font-size: var(--t-sm);
  font-weight: var(--w-semi);
  color: var(--ink);
  white-space: nowrap;
}

/* ---------- категории плитками ---------- */
/* Строка поиска. В референсе она стоит над категориями и задаёт им ритм:
   одна скруглённая плашка во всю ширину, иконка слева, крестик справа. */
.search {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-top: 18px;
  padding-inline: 14px;
  height: var(--h-ctl);
  border-radius: 999px;
  background: var(--glass);
  border: 1px solid var(--glass-line);
  border-top-color: var(--glass-edge);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .search { -webkit-backdrop-filter: var(--blur-lite); backdrop-filter: var(--blur-lite); }
}
.search:focus-within { border-color: var(--brand); }
.search > svg {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: var(--ink-dim);
  stroke-width: 2;
  stroke-linecap: round;
}
.search input {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  border: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  font-size: var(--t-lg);
  outline: none;
  /* Системный крестик Safari дублирует наш и ломает высоту строки */
  -webkit-appearance: none;
  appearance: none;
}
.search input::-webkit-search-cancel-button { display: none; }
.search input::placeholder { color: var(--ink-soft); }
.search-clear {
  flex: 0 0 auto;
  width: var(--tap);
  height: var(--tap);
  margin-right: -10px;   /* тач-цель 44, а видимый крестик прижат к краю плашки */
  display: grid;
  place-items: center;
  border: 0;
  background: none;
  color: var(--ink-soft);
  cursor: pointer;
  border-radius: 50%;
}
.search-clear svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.search-clear:hover { color: var(--ink); }
/* 🔴 display в классе перебивает браузерное правило для [hidden] — крестик
   оставался на экране при пустом поле. Прячем явно. */
.search-clear[hidden] { display: none; }

.cats {
  display: flex;
  gap: 10px;
  margin-top: 14px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 2px;
  /* Лента уезжает под край экрана, как в референсе: видно, что она длиннее. */
  margin-inline: -16px;
  padding-inline: 16px;
  scroll-padding-inline: 16px;
}
.cats::-webkit-scrollbar { display: none; }

.cat-tile {
  flex: 0 0 auto;
  width: 78px;
  min-height: 78px;
  padding: 11px 6px 9px;
  border-radius: var(--r);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: var(--ink-soft);
  cursor: pointer;
  font: inherit;
  font-size: var(--t-xs);
  text-align: center;
  transition: transform .2s var(--ease), color .2s var(--ease), background .2s var(--ease);
}
.cat-tile svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.cat-tile span {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.2;
}
.cat-tile:hover { color: var(--ink); transform: translateY(-2px); }
.cat-tile[aria-selected="true"] {
  background: var(--brand);
  border-color: transparent;
  color: var(--on-brand);
  font-weight: var(--w-semi);
  box-shadow: 0 10px 24px -14px oklch(0.626 0.196 36.5 / .45);
}

/* ---------- список блюд ----------

   Один столбец: еда — главное на экране, и её видно во всю ширину.
   На планшете и шире — две колонки, иначе карточки становятся неприлично
   большими. Сетка строится колонками, а не auto-fill: число колонок должно
   быть предсказуемым, а не зависеть от ширины на пару пикселей.
   ------------------------------------------------------------------- */
/* 🔴 Две колонки с 360 px, а не с 640. В референсе карточек видно три, у нас была
   одна на весь экран: девять блюд превращались в девять экранов прокрутки.
   Порог задаёт не медиазапрос, а минимальная ширина колонки — на 320 px две
   не помещаются и сетка сама схлопывается в одну.
   Планшет и десктоп здесь не трогаем: для них ниже в файле уже стоят свои
   правила (две колонки с 720 px, три с 1024). Свой медиазапрос на 640 я завёл
   и убрал — он ими перебивался и только путал. */
.items {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
}
#menu { margin-top: 22px; }
/* Длинное имя обрезается на второй строке. Распорки в две строки здесь НЕТ:
   короткое имя занимает одну, карточка становится ниже, а цены всё равно стоят
   на одной линии — их держит прижатый к низу подвал и растяжка ряда сеткой. */
/* 🔴 Три строки, а не две. На двух обрывались «Картофель по-деревенски, …»
   (пропадал размер порции — большая и маленькая отличались только ценой),
   «Лимонад МАДЛОБА 0…» и «Сэндвич с курицей…». Карточки в сетке всё равно
   тянутся до общей высоты, так что лишняя строка ничего не ломает. */
.item-name {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Состав в такой карточке ужимаем: место нужнее названию. */
.item:not(:has(.item-shot)) .item-noshot > p {
  -webkit-line-clamp: 3;
  line-clamp: 3;
}

.item {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr auto;   /* тело тянется, цена всегда у нижнего края */
  padding: 0 0 var(--s-4);
  border-radius: var(--r);
  background: var(--glass);
  border: 1px solid var(--glass-line);
  border-top-color: var(--glass-edge);
  box-shadow:
    inset 0 1px 0 var(--glass-sheen),
    0 16px 34px -24px oklch(0 0 0 / .38);
  color: var(--ink);
  text-align: left;
  font: inherit;
  cursor: pointer;
  overflow: hidden;
  transition: transform .2s var(--ease), border-color .2s var(--ease);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .item { -webkit-backdrop-filter: var(--blur-lite); backdrop-filter: var(--blur-lite); }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .item { background: color-mix(in oklab, var(--bg) 86%, white); }
}
/* Наведение — только у мыши: на тач-экране оно залипало после тапа (аудит 07 №12) */
@media (hover: hover) and (pointer: fine) {
  .item:hover { transform: translateY(-2px); border-color: var(--glass-edge); }
}
.item:active { transform: translateY(0); }

/* 🔴 Все снимки приведены к одному кадру 11:7 с одинаковыми полями
   (scripts нормализации в истории). Поэтому здесь достаточно contain:
   еда во всех карточках выходит одного визуального размера. */
/* 🔴 Снимок лежит во всю ширину карточки, без полей — приём из референса:
   там еда упирается в края, а имя и цена живут ниже на самой панели.
   Прежний вариант (contain + поля) оставлял вокруг кадра светлую рамку,
   и на тёмной теме фотография читалась как наклейка поверх панели. */
.item-shot {
  aspect-ratio: 11 / 7;
  padding: 0;
  overflow: hidden;
}
.item-shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .35s var(--ease);
}
/* Стык кадра с панелью. Наши снимки сняты на дневном свету, панель тёмная —
   без растушёвки между ними получается резкая горизонталь, и фото читается
   как вставленная картинка, а не как часть карточки. */
.item-shot::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 38%;
  pointer-events: none;
  background: linear-gradient(to bottom,
    transparent, color-mix(in oklab, var(--bg) 62%, transparent));
}
.item-shot { position: relative; }
@media (hover: hover) and (pointer: fine) {
  .item:hover .item-shot img { transform: scale(1.03); }
}
@media (prefers-reduced-motion: reduce) {
  .item-shot img { transition: none; }
  .item:hover .item-shot img { transform: none; }
}

/* Блюдо без снимка: тот же кадр, вместо фото — состав. Ряд не проваливается. */
.item-noshot {
  aspect-ratio: 11 / 7;
  padding: var(--s-2) var(--s-2) 0;
  display: flex;
}
.item-noshot > p {
  flex: 1;
  /* 🔴 Не flex-центрирование: в карточке шириной в половину экрана длинный
     состав перестаёт помещаться и вылезает за рамку поверх названия и цены.
     Прижимаем текст к верху и обрезаем по строкам — карточка держит форму
     при любой длине состава. Поймано глазами на 390 px 22.09.2026. */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  overflow: hidden;
  text-align: center;
  font-size: var(--t-sm);
  line-height: 1.45;
  padding: var(--s-3) var(--s-3);
  border-radius: var(--r-sm);
  background: color-mix(in oklab, var(--hero-tint) 38%, transparent);
  border: 1px solid var(--glass-line);
}

.item-body { padding: 10px var(--s-3) 0; display: flex; flex-direction: column; gap: var(--s-1); min-width: 0; }
.item-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.item-name {
  margin: 0;
  font-size: var(--t-xl);
  font-weight: var(--w-semi);
  line-height: 1.3;
  letter-spacing: -0.01em;
  min-width: 0;
}
.item-facts { margin: 0; font-size: var(--t-sm); color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.item-composition {
  margin: 0;
  font-size: var(--t-sm);
  line-height: 1.5;
  color: var(--ink-soft);
}

.item-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  padding: 10px var(--s-3) 0;
}
.item-price { font-size: var(--t-2xl); font-weight: var(--w-bold); letter-spacing: -0.015em; font-variant-numeric: tabular-nums; }
.item-add {
  width: var(--tap);
  height: var(--tap);
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--brand);
  color: var(--on-brand);
  font-size: var(--t-3xl);
  font-weight: var(--w-normal);
  line-height: 1;
  padding-bottom: 2px;
  box-shadow: 0 6px 16px -8px oklch(0.626 0.196 36.5 / .50);
  transition: background .2s var(--ease), transform .2s var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .item:hover .item-add { background: var(--brand-hot); transform: scale(1.06); }
}

/* «18+» у энергетиков (304-ФЗ): в карточке, в окне блюда и в строке корзины.
   Поле age_restricted приходит из /api/menu; нет поля — нет метки. */
.age-badge {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  padding: 1px var(--s-2);
  border: 1.5px solid currentColor;
  border-radius: 999px;
  color: var(--ink);
  font-size: var(--t-xs);
  font-weight: var(--w-bold);
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
}
.age-badge[hidden] { display: none; }
.dish-tag:not([hidden]) + .age-badge { margin-left: 6px; }
.age-note { display: flex; align-items: flex-start; gap: var(--s-2); margin: var(--s-3) 0 0; font-size: var(--t-md); line-height: 1.5; color: var(--ink); }
.age-note[hidden] { display: none; }

/* Стоковый снимок вместо своего (photo_placeholder) — подпись в углу кадра.
   Тёмная подложка: белый на ней читается поверх любого фото. */
.photo-note {
  position: absolute;
  left: var(--s-2);
  bottom: var(--s-2);
  z-index: 1;
  padding: 2px var(--s-2);
  border-radius: 999px;
  background: oklch(0.18 0.01 45 / .74);
  color: #fff;
  font-size: var(--t-xs);
  line-height: 1.5;
  pointer-events: none;
}
.photo-note[hidden] { display: none; }
/* В окне блюда низ снимка в базовых темах закрыт наездом листа (−20 px) */
.dish-hero .photo-note { bottom: calc(var(--s-5) + var(--s-3)); }

.sold-out { margin: 2px 0 0; font-size: var(--t-sm); color: var(--warn); font-weight: var(--w-semi); }
/* 🔴 Приглушается содержимое, а не сама карточка: у .item стоит анимация
   появления с `both`, и её конечный кадр перебивает opacity — правило на
   карточке выглядело рабочим, но не срабатывало ни разу (замерено). */
.item[disabled] { cursor: not-allowed; }
.item[disabled] .item-shot,
.item[disabled] .item-noshot,
.item[disabled] .item-body,
.item[disabled] .item-foot { opacity: .55; }
.item[disabled]:hover { transform: none; }

.offline-line {
  margin: 0;
  padding: 10px 0;
  font-size: var(--t-base);
  line-height: 1.5;
  border-bottom: 1px solid var(--rule);
}
.offline-line:last-child { border-bottom: 0; }

.hint {
  margin: 14px 0 0;
  text-align: center;
  color: var(--ink-soft);
  font-size: var(--t-md);
  line-height: 1.5;
}

.empty {
  margin: 24px 0;
  text-align: center;
  color: var(--ink-soft);
  font-size: var(--t-base);
}

/* Короткая лесенка появления: видно, что список подгрузился. */
@media (prefers-reduced-motion: no-preference) {
  .item {
    animation: pop .42s var(--ease) both;
    animation-delay: calc(var(--i, 0) * 38ms);
  }
  @keyframes pop {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: none; }
  }
}

.notice {
  margin: 14px 0 0;
  padding: 13px 15px;
  border-radius: var(--r);
  background: oklch(0.560 0.180 27.0 / .22);
  border: 1px solid oklch(0.680 0.180 27.0 / .40);
  color: var(--ink);
  font-size: var(--t-md);
}

/* Спокойное состояние панели персонала: всё работает — и выглядит так же. */
.notice-ok {
  background: oklch(0.500 0.140 152.0 / .12);
  border-color: oklch(0.500 0.140 152.0 / .30);
}

/* Остановка приёма заказов — действие с последствиями, но не тревога:
   пока заказы идут, кнопка обозначена рамкой, а не заливкой во весь экран. */
.btn.btn-danger {
  background: transparent;
  border: 1.5px solid color-mix(in oklab, var(--err) 55%, transparent);
  color: var(--err);
  box-shadow: none;
}
.btn.btn-danger:hover { background: color-mix(in oklab, var(--err) 10%, transparent); }

/* ---------- строка заказа в панели персонала ---------- */
.order-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--s-3);
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--rule);
}
.order-row:first-child { padding-top: 4px; }
.order-row:last-child { border-bottom: 0; padding-bottom: 4px; }
.order-num {
  font-size: var(--t-xl);
  font-weight: var(--w-bold);
  font-variant-numeric: tabular-nums;
  min-width: 3.5ch;
}
.order-main { min-width: 0; }
.order-when { font-size: var(--t-base); font-weight: var(--w-semi); }
.order-who { font-size: var(--t-sm); color: var(--ink-soft); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Блок доставки в панели — отдельно от большой кнопки приёма заказов. */
.dl-admin { margin-top: var(--s-4); }
.dl-admin[hidden] { display: none; }
/* Адрес доставки — целиком, с переносом: кассир звонит гостю и диктует курьеру. */
.order-addr { font-size: var(--t-sm); color: var(--ink); margin-top: 2px; overflow-wrap: anywhere; }
.order-right { text-align: right; max-width: 42%; }
@media (max-width: 479px) {
  .order-row { grid-template-columns: auto minmax(0, 1fr); }
  .order-right {
    grid-column: 1 / -1;
    max-width: none;
    margin-top: var(--s-2);
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s-3);
    text-align: left;
  }
  .order-status { margin-top: 0; }
}
.order-sum { font-size: var(--t-lg); font-weight: var(--w-bold); white-space: nowrap; font-variant-numeric: tabular-nums; }
.order-status { font-size: var(--t-sm); color: var(--ink-soft); margin-top: 2px; }

.cat-title {
  margin: 26px 0 12px;
  font-size: var(--t-2xl);
  font-weight: var(--w-bold);
  letter-spacing: -0.02em;
  scroll-margin-top: 76px;
}

/* ---------- карточка блюда ---------- */
dialog {
  position: fixed;          /* 🔴 не absolute: иначе уезжает вместе с прокруткой */
  border: 0;
  padding: 0;
  margin: auto auto 0;
  width: 100%;
  max-width: 560px;
  max-height: 94dvh;
  background: none;
  color: var(--ink);
  overflow: visible;
}
@media (min-width: 640px) {
  dialog { margin: auto; max-height: 90dvh; }
}
body:has(dialog[open]) { overflow: hidden; }

dialog::backdrop {
  background: oklch(0.06 0.010 44 / .70);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
@media (prefers-reduced-motion: no-preference) {
  dialog[open] { animation: sheet-up .34s var(--ease); }
  @keyframes sheet-up { from { transform: translateY(26px); opacity: 0; } to { transform: none; opacity: 1; } }
}

.dish-form {
  display: flex;
  flex-direction: column;
  max-height: 94dvh;
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  overflow: hidden;
  overflow: clip;            /* 🔴 не hidden: см. комментарий ниже */
  background: var(--glass-deep);
  border: 1px solid var(--glass-line);
  border-top-color: var(--glass-edge);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
}
@media (min-width: 640px) {
  .dish-form { border-radius: var(--r-xl); max-height: 90dvh; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .dish-form { background: color-mix(in oklab, var(--bg) 94%, white); }
}

/* Фото во всю ширину, как на втором экране референса.

   🔴 Кадр заполняет полосу целиком (cover), а не парит по центру (contain).
   В референсе еда вырезана и лежит на тёмной сцене — наши снимки сняты на
   дневном свету с доской и оранжевым сиденьем в кадре, и «парящая» подача
   превращала их в светлый прямоугольник, наклеенный на тёмный экран.
   Заполнить полосу и растворить низ — честнее для этих исходников. */
.dish-hero {
  position: relative;
  z-index: 0;              /* лист лежит поверх кадра и наезжает на него */
  flex: 0 1 auto;
  min-height: min(240px, 30dvh);
  overflow: hidden;
  display: block;
  padding: 0;
  background:
    radial-gradient(90% 80% at 50% 24%, var(--hero-tint), transparent 74%);
}
.dish-hero img {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
  display: block;
}
/* Низ кадра уходит в цвет листа — стык не режет экран пополам. */
.dish-hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 46%;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--sheet));
}
.dish-hero img[hidden] { display: none; }
.dish-hero.is-empty { min-height: 0; padding: 0; background: none; }
.dish-hero.is-empty + .sheet { margin-top: 0; padding-top: 74px; }

.dish-top {
  position: absolute;
  top: var(--s-5);
  left: var(--s-5);
  right: var(--s-5);   /* та же вертикаль, что у текста в листе ниже */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  z-index: 2;
}
.dish-close {
  width: var(--tap);
  height: var(--tap);
  border: 1px solid var(--glass-line);
  border-radius: 50%;
  background: var(--glass-deep);
  -webkit-backdrop-filter: var(--blur-lite);
  backdrop-filter: var(--blur-lite);
  color: var(--ink);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background .2s var(--ease);
}
.dish-close:hover { background: color-mix(in oklab, var(--bg) 70%, transparent); }
.dish-close svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
/* Справа в референсе сердечко-избранное. Избранного у нас нет, поэтому здесь
   стоит величина, которую человек действительно ищет глазами, — вес порции. */
.dish-weight {
  padding: 8px 14px;
  border-radius: 999px;
  font-size: var(--t-md);
  font-weight: var(--w-semi);
  color: var(--ink);
  background: var(--glass-deep);
  border: 1px solid var(--glass-line);
  -webkit-backdrop-filter: var(--blur-lite);
  backdrop-filter: var(--blur-lite);
}
.dish-weight[hidden] { display: none; }

/* Стеклянный лист наезжает на фото скруглением — ровно как в референсе. */
.sheet {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;   /* докрутил до края — страница под диалогом стоит */
  -webkit-overflow-scrolling: touch;
  margin-top: -20px;
  padding: 0 var(--s-5) var(--s-4);   /* верх отдан липкому козырьку ниже */
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  /* 🔴 Лист плотный, а не стеклянный: под ним лежит СНИМОК, и сквозь
     полупрозрачный фон еда просвечивала прямо под первой строкой добавок.
     Стекло имеет смысл там, где под ним сцена, а не кусок лаваша. */
  background: var(--sheet);
  border-top: 1px solid var(--glass-edge);
  box-shadow:
    inset 0 1px 0 var(--glass-sheen),
    0 -14px 28px -20px oklch(0 0 0 / .45);
}

.sheet::before {
  content: "";
  position: sticky;
  top: 0;
  z-index: 1;
  display: block;
  /* Полоса, в которую заходит снимок. Плотная сверху и растворяющаяся книзу:
     строка списка уходит под неё плавно, а не режется пополам. */
  height: 34px;
  margin-inline: calc(-1 * var(--s-5));
  background: linear-gradient(
    to bottom,
    var(--sheet) 0 22px,
    transparent 34px);
}

.dish-tag {
  display: inline-block;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--brand);
  color: var(--on-brand);
  font-size: var(--t-xs);
  font-weight: var(--w-semi);
}
.dish-tag[hidden] { display: none; }

.dish-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-top: 11px;
}
.sheet h3 {
  margin: 0;
  font-size: var(--t-3xl);
  line-height: 1.15;
  letter-spacing: -0.025em;
  font-weight: var(--w-bold);
  text-wrap: balance;
}
.dish-sum {
  flex: 0 0 auto;
  font-size: var(--t-2xl);
  font-weight: var(--w-bold);
  color: var(--brand-ink);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  padding-top: 2px;
}

.item-desc { margin: 10px 0 0; color: var(--ink-soft); font-size: var(--t-base); max-width: 62ch; }
.sheet .item-facts { margin-top: 8px; font-size: var(--t-md); }
.dish-composition { font-size: var(--t-md); line-height: 1.55; margin: 14px 0 0; max-width: 66ch; }
.dish-nutrition,
.dish-allergens { font-size: var(--t-sm); line-height: 1.5; color: var(--ink-soft); margin: 7px 0 0; }
.dish-allergens { color: var(--warn); font-weight: var(--w-semi); }
/* Телефон внутри фразы не рвётся на «8» и «903 830-16-62» — в аллергенах,
   подсказках адреса, плашках (как a[href^="tel:"] в pages.css у служебных страниц) */
a[href^="tel:"] { white-space: nowrap; }
.dish-allergens a { color: inherit; }

.customize {
  margin: 22px 0 10px;
  font-size: var(--t-lg);
  font-weight: var(--w-semi);
  color: var(--ink);
}
.customize[hidden] { display: none; }

/* Липкая строка действия — как «Add to Cart» в референсе. */
.dish-bar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: var(--glass-deep);
  border-top: 1px solid var(--glass-line);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
}
.dish-bar .btn { flex: 1; min-width: 0; }
.dish-price { margin-left: auto; padding-left: 12px; font-variant-numeric: tabular-nums; }

/* ---------- группы добавок ---------- */
.group { margin-top: 18px; }
.group-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.group-name { font-size: var(--t-base); font-weight: var(--w-semi); }
.group-hint { font-size: var(--t-sm); color: var(--ink-soft); white-space: nowrap; }

/* Необязательная добавка — тумблер (референс: Add Cheese). */
.opts.toggle-opts { display: flex; flex-direction: column; }
.toggle-opts .opt {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 6px 2px;
  cursor: pointer;
  border-bottom: 1px solid var(--rule);
}
.toggle-opts .opt:last-child { border-bottom: 0; }
.opt input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.opt-name { flex: 1; font-size: var(--t-base); }
.opt-price { font-size: var(--t-md); color: var(--ink-soft); font-variant-numeric: tabular-nums; }

/* Выбор одного из группы: кружок в той же колонке, что и тумблеры.
   Одна вертикаль органов управления на всю карточку — цены под ценами,
   переключатели под переключателями. */
.opt-radio {
  position: relative;
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  border-radius: 50%;
  border: 1.5px solid var(--glass-line);
  background: var(--glass);
  transition: border-color .18s var(--ease);
}
.opt-radio::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: var(--brand);
  transform: scale(0);
  transition: transform .18s var(--ease);
}
.opt input:checked ~ .opt-radio { border-color: var(--brand); }
.opt input:checked ~ .opt-radio::after { transform: scale(1); }

.opt-toggle {
  position: relative;
  width: 46px;
  height: 27px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: oklch(1 0 0 / .18);
  border: 1px solid var(--glass-line);
  transition: background .22s var(--ease);
}
.opt-toggle::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: oklch(0.88 0.01 80);
  transition: transform .22s var(--ease), background .22s var(--ease);
}
.opt input:checked ~ .opt-toggle { background: var(--brand); border-color: transparent; }
/* Кружок на включённом тумблере светлый: тёмный на оранжевом читается
   как дырка. Тёмным остаётся ТЕКСТ на заливке — у него другая задача. */
.opt input:checked ~ .opt-toggle::after { transform: translateX(19px); background: var(--cream); }
.opt:has(input:focus-visible) { outline: 2px solid var(--brand-hot); outline-offset: 3px; border-radius: 12px; }

/* ---------- кнопки ---------- */
.qty {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 0 0 auto;
  padding: var(--s-1);
  border-radius: 999px;
  background: var(--glass);
  border: 1px solid var(--glass-line);
}
.qty button {
  width: var(--tap);
  height: var(--tap);
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--ink);
  font-size: var(--t-2xl);
  line-height: 1;
  cursor: pointer;
  transition: background .18s var(--ease);
}
.qty button:hover { background: var(--raised); }
.qty output { font-size: var(--t-lg); font-weight: var(--w-bold); min-width: 2ch; text-align: center; font-variant-numeric: tabular-nums; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 52px;
  padding: 0 20px;
  border: 0;
  border-radius: 999px;
  background: var(--brand);
  color: var(--on-brand);
  font: inherit;
  font-size: var(--t-lg);
  font-weight: var(--w-bold);
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 10px 28px -12px oklch(0.626 0.196 36.5 / .55);
  transition: background .2s var(--ease), transform .15s var(--ease);
}
a.btn, a.btn:hover { text-decoration: none; }
.btn:hover { background: var(--brand-hot); }
.btn:active { transform: scale(.985); }
.btn[disabled] { background: var(--raised); color: var(--ink-dim); box-shadow: none; cursor: not-allowed; }

.btn-quiet {
  background: var(--glass);
  border: 1px solid var(--glass-line);
  color: var(--ink);
  box-shadow: none;
}
.btn-quiet:hover { background: var(--raised); }

/* ---------- нижний таб-бар (референс) ---------- */
.tabs {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(10px + env(safe-area-inset-bottom));
  z-index: var(--z-bar);
  width: min(calc(100% - 34px), 420px);
  display: flex;
  padding: 6px;
  border-radius: 999px;
  background: var(--glass-deep);
  border: 1px solid var(--glass-line);
  border-top-color: var(--glass-edge);
  box-shadow:
    inset 0 1px 0 var(--glass-sheen),
    0 18px 40px -18px oklch(0 0 0 / .45);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .tabs { background: color-mix(in oklab, var(--bg) 90%, white); }
}
.tab {
  position: relative;
  flex: 1;
  min-height: 52px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--ink-soft);
  font: inherit;
  font-size: var(--t-xs);
  cursor: pointer;
  transition: color .2s var(--ease), background .2s var(--ease);
}
.tab svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tab:hover { color: var(--ink); }
.tab[aria-current="true"] { color: var(--brand-ink); font-weight: var(--w-semi); }
.tab[disabled] { opacity: .45; cursor: not-allowed; }
/* Счётчик корзины — реальное число позиций, не украшение. */
.tab-count {
  position: absolute;
  top: 6px;
  left: calc(50% + 6px);
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--brand);
  color: var(--on-brand);
  font-size: var(--t-xs);
  font-weight: var(--w-bold);
  line-height: 18px;
  text-align: center;
}
.tab-count[hidden] { display: none; }

/* Липкая кнопка «Оформить» над таб-баром: сумма должна быть видна всегда. */
.cart-bar {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(var(--tab-h) + var(--s-2) + env(safe-area-inset-bottom));
  z-index: var(--z-bar);
  /* ровно геометрия .app: ширина панели минус её рамка и поля */
  width: min(calc(100% - 20px), calc(var(--maxw) + 24px));
  padding-inline: 17px;
  pointer-events: none;
}
.cart-bar .wrap { max-width: none; padding-inline: 0; }
.cart-bar .btn { pointer-events: auto; justify-content: flex-start; box-shadow: 0 18px 38px -14px oklch(0 0 0 / .65); }
.cart-bar .btn .grow { margin-left: auto; }
@media (prefers-reduced-motion: no-preference) {
  .cart-bar:not([hidden]) { animation: rise .3s var(--ease); }
  @keyframes rise {
    from { transform: translateX(-50%) translateY(120%); opacity: 0; }
    to   { transform: translateX(-50%); opacity: 1; }
  }
}

/* ---------- корзина и оформление ---------- */
.panel {
  padding: 16px;
  border-radius: var(--r-lg);
  background: var(--glass);
  box-shadow: inset 0 1px 0 var(--glass-sheen);
  border: 1px solid var(--glass-line);
  border-top-color: var(--glass-edge);
  -webkit-backdrop-filter: var(--blur-lite);
  backdrop-filter: var(--blur-lite);
}

/* ---------- строка корзины ---------- */
.line {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--s-3);
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--rule);
}
.line:first-child { padding-top: var(--s-1); }
.line:last-child { border-bottom: 0; padding-bottom: var(--s-1); }
/* 🔴 Колонки закреплены явно. Иначе у блюда БЕЗ снимка (а живой справочник
   такие содержит) строка съезжает на колонку влево и цена перестаёт быть
   в столбце цен — ровно тот случай, когда вёрстка ломается на живых данных. */
.line > .line-main { grid-column: 2; }
.line > .line-price { grid-column: 3; text-align: right; }
/* Каждая строка — свой грид, поэтому колонка под снимок задаётся числом:
   иначе у позиции без фото название начинается на 76 px левее соседнего.
   Класс ставит скрипт — когда снимков нет ни у кого, место не резервируется. */
.has-shots .line { grid-template-columns: 76px minmax(0, 1fr) auto; }
/* Снимков нет ни у кого (страница заказа, одни напитки без фото) — пустая первая
   колонка съедала отступ, и название стояло правее «Итого» на 12 px (08 №13). */
:not(.has-shots) > .line { grid-template-columns: minmax(0, 1fr) auto; }
:not(.has-shots) > .line > .line-main { grid-column: 1; }
:not(.has-shots) > .line > .line-price { grid-column: 2; }

.line-shot {
  width: 76px;
  height: 56px;
  flex: 0 0 auto;
  border-radius: var(--r-sm);
  background: color-mix(in oklab, var(--hero-tint) 35%, transparent);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.line-shot img { width: 100%; height: 100%; object-fit: contain; display: block; }

.line-main { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.line-name { font-size: var(--t-base); font-weight: var(--w-semi); line-height: 1.3; }
.line-mods { font-size: var(--t-sm); color: var(--ink-soft); }
.line-price {
  font-weight: var(--w-bold);
  font-size: var(--t-lg);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  padding-top: 1px;
}

/* Счётчик в строке корзины — тот же орган управления, что и в карточке блюда,
   только мельче: человек уже знает, как он работает. */
.qty-sm { margin-top: var(--s-1); align-self: flex-start; padding: 2px; }
.qty-sm button { width: var(--tap); height: var(--tap); font-size: var(--t-xl); }
.qty-sm output { font-size: var(--t-base); min-width: 2ch; }

.total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-top: var(--s-3);
  padding-top: var(--s-3);
  border-top: 1px solid var(--rule-strong);
  font-size: var(--t-2xl);
  font-weight: var(--w-bold);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.seg {
  display: flex;
  gap: 4px;
  padding: 4px;
  border-radius: 999px;
  background: var(--glass);
  border: 1px solid var(--glass-line);
}
.seg button {
  flex: 1;
  min-height: 44px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--ink-soft);
  font: inherit;
  font-size: var(--t-base);
  cursor: pointer;
  transition: background .2s var(--ease), color .2s var(--ease);
}
.seg button[aria-pressed="true"] { background: var(--brand); color: var(--on-brand); font-weight: var(--w-semi); }

.slots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-2); }
/* Сообщение вместо слотов занимает всю ширину: в колонке сетки оно рвалось
   по одному слову в строку. */
.slots .empty { grid-column: 1 / -1; margin: var(--s-2) 0; }
/* Ночью список переходит через полночь — граница дня строкой на всю ширину (05 №24) */
.slots-day { grid-column: 1 / -1; margin: var(--s-2) 0 0; font-size: var(--t-md); font-weight: var(--w-semi); color: var(--ink); }
@media (min-width: 560px) { .slots { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.slots-more {
  width: 100%;
  min-height: 44px;
  margin-top: 10px;
  border: 1px solid var(--glass-line);
  border-radius: 999px;
  background: var(--glass);
  color: var(--ink);
  font: inherit;
  font-size: var(--t-md);
  font-weight: var(--w-semi);
  cursor: pointer;
}
.slots-more:hover { background: var(--raised); }
.slot {
  min-height: 48px;
  border-radius: var(--r-sm);
  background: var(--glass);
  border: 1px solid var(--glass-line);
  color: var(--ink);
  font: inherit;
  font-size: var(--t-base);
  font-weight: var(--w-semi);
  cursor: pointer;
  font-variant-numeric: tabular-nums;
  transition: background .18s var(--ease), border-color .18s var(--ease);
}
.slot:hover { border-color: var(--brand); }
.slot[aria-pressed="true"] { background: var(--brand); border-color: transparent; color: var(--on-brand); }
.slot[disabled] { opacity: .4; cursor: not-allowed; }

.field { display: block; margin-bottom: 14px; }
.field span { display: block; font-size: var(--t-md); color: var(--ink-soft); margin-bottom: 7px; }
.field input {
  width: 100%;
  min-height: 52px;
  padding: 0 16px;
  border-radius: var(--r-sm);
  background: var(--glass);
  border: 1px solid var(--glass-line);
  color: var(--ink);
  font: inherit;
  font-size: var(--t-lg);
}
/* 🔴 Подсказка в поле — обычный текст, порог тот же 4.5, а не «серенькое для
   изящества». На тёмной теме --ink-dim давал 4.03 (замерено в браузере),
   поэтому берём ступень выше. */
.field input::placeholder { color: var(--ink-soft); }
.field input:focus { border-color: var(--brand); outline: none; }
/* Поле с ошибкой — красная рамка, а не только строка над кнопкой (08 №16) */
.field input[aria-invalid="true"],
.consent input[aria-invalid="true"] { border-color: var(--err); }

.consent {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  margin: var(--s-4) 0;
  padding-block: var(--s-3);   /* строка согласия сама по себе тач-цель: 24 + 2×12 */
  font-size: var(--t-md);
  line-height: 1.5;
  color: var(--ink-soft);
  cursor: pointer;
}
/* (24 − 14×1.5) / 2 = 1.5 — сдвиг, при котором квадрат оптически сидит на строке */
.consent input { margin-top: -1.5px; }
.consent a { color: var(--brand-ink); }
.consent input {
  appearance: none;
  -webkit-appearance: none;
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  margin: 0;
  border-radius: var(--r-sm);
  border: 1px solid var(--glass-line);
  background: var(--glass);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background .18s var(--ease), border-color .18s var(--ease);
}
.consent input::after {
  content: "";
  width: 12px;
  height: 7px;
  border: 2px solid var(--on-brand);
  border-top: 0;
  border-right: 0;
  transform: rotate(-45deg) scale(0);
  transition: transform .18s var(--ease);
  margin-top: -2px;
}
.consent input:checked { background: var(--brand); border-color: var(--brand); }
.consent input:checked::after { transform: rotate(-45deg) scale(1); }
.consent input:focus-visible { outline: 2px solid var(--brand-hot); outline-offset: 3px; }
/* Ссылка на текст согласия — отдельной строкой под галочкой, вровень с текстом
   (24 px квадрата + зазор): внутри label тап рядом с галочкой открывал вкладку. */
.consent-doc { margin: calc(-1 * var(--s-4)) 0 var(--s-2); padding-left: calc(24px + var(--s-3)); font-size: var(--t-md); }
.consent-doc a { display: inline-flex; align-items: center; min-height: 44px; color: var(--brand-ink); }

.error { color: var(--err); font-size: var(--t-md); margin: 10px 0; min-height: 1em; }

/* ---------- способ получения и доставка ----------
   🔴 display в классе перебивает браузерное [hidden] — у скрываемых скриптом
   блоков с display правило [hidden] прописано рядом. */
.seg[hidden],
.dl-list[hidden],
.total-row[hidden] { display: none; }
.seg-ful button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  white-space: nowrap;
}
/* Неактивная «Доставка»: бледный текст (--ink-dim, не opacity — контраст ≥ 4.5),
   курсор «нельзя», без отклика на наведение и нажатие. */
.seg button[aria-disabled="true"] { color: var(--ink-dim); background: none; font-weight: var(--w-normal); cursor: not-allowed; }
.soon {
  padding: 2px var(--s-2);
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
  font-size: var(--t-xs);
  font-weight: var(--w-bold);
  line-height: 1.3;
  color: var(--ink-soft);
}
.soon[hidden] { display: none; }
.seg-hint { margin: var(--s-2) 0 0; font-size: var(--t-md); line-height: 1.5; color: var(--ink-soft); }

.dl-list { display: grid; gap: var(--s-1); margin: calc(-1 * var(--s-2)) 0 var(--s-2); }
.dl-opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  min-height: var(--tap);
  padding: var(--s-2) var(--s-4);
  border: 1px solid var(--glass-line);
  border-radius: var(--r-sm);
  background: var(--glass);
  color: var(--ink);
  font: inherit;
  font-size: var(--t-base);
  text-align: left;
  cursor: pointer;
}
.dl-opt:hover { border-color: var(--brand); }
.dl-opt[aria-disabled="true"] { color: var(--ink-dim); cursor: not-allowed; }
.dl-opt[aria-disabled="true"]:hover { border-color: var(--glass-line); }
.dl-opt-tag { flex: 0 0 auto; font-size: var(--t-xs); font-weight: var(--w-bold); color: var(--ink-soft); }
.dl-status { margin: 0 0 var(--s-3); font-size: var(--t-md); color: var(--ink-soft); }
/* Пустая — без отступа, но в разметке: живой регион, спрятанный display: none, диктор может не прочитать. */
.dl-status:empty { margin: 0; }
/* Квартира, подъезд, этаж, домофон: по два в ряд на телефоне, четыре — шире. */
.dl-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-3); }
@media (min-width: 560px) { .dl-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* 🔴 .field задаёт display: block и перебивает [hidden] — «Сдача с» висела при оплате картой. */
.dl-change { margin-top: var(--s-4); }
.dl-change[hidden] { display: none; }
/* «Наличными курьеру» не помещается в половину сегмента на 320 — на узком экране
   два варианта друг под другом, а не перенос внутри капсулы. */
@media (max-width: 379px) {
  .seg-pay { flex-direction: column; border-radius: var(--r-xl); }
}
.dl-min { margin: var(--s-4) 0 0; font-size: var(--t-md); font-weight: var(--w-semi); color: var(--ink); text-align: center; }

/* Строка «Доставка» над итогом — тише самого итога. */
.total-row {
  display: flex;
  justify-content: space-between;
  gap: var(--s-3);
  margin-top: var(--s-3);
  padding-top: var(--s-3);
  border-top: 1px solid var(--rule);
  font-size: var(--t-base);
  font-variant-numeric: tabular-nums;
}
/* Время у двери «19:30–20:00» шире времени готовности — колонок меньше. */
.slots.slots-wide { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 560px) { .slots.slots-wide { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* «Заказать» до минимума доставки: бледная, но читаемая, нажатие объясняет причину. */
.btn[aria-disabled="true"] { background: var(--raised); color: var(--ink-dim); box-shadow: none; cursor: not-allowed; }

/* ---------- заказ принят ---------- */
.ticket {
  margin-top: 18px;
  padding: 26px 20px;
  border-radius: var(--r-lg);
  text-align: center;
  background: var(--glass);
  border: 1px solid var(--glass-line);
  border-top-color: var(--glass-edge);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
}
.ticket-label { font-size: var(--t-md); color: var(--ink-soft); }
/* Повтор после обрыва связи: сервер вернул уже созданный заказ (договор п. 10) */
.ticket-repeat { margin: 0 0 var(--s-3); font-size: var(--t-md); font-weight: var(--w-semi); line-height: 1.5; color: var(--ink); }
.ticket-repeat[hidden] { display: none; }
/* Телефон, который ввёл гость, — чтобы опечатку заметил он сам (аудит 05 №10) */
.ticket-phone { margin-top: var(--s-1); font-size: var(--t-md); color: var(--ink-soft); }
.ticket-num {
  font-family: "Unbounded", "Golos Text", sans-serif;
  font-size: clamp(42px, 14vw, 62px);
  font-weight: var(--w-bold);
  line-height: 1.05;
  letter-spacing: -0.04em;
  color: var(--brand-ink);
  font-variant-numeric: tabular-nums;
  margin: 4px 0 8px;
}
.ticket-when { font-size: var(--t-xl); font-weight: var(--w-semi); }
.status { margin-top: 14px; font-size: var(--t-md); color: var(--ok); font-weight: var(--w-semi); }
.status.waiting { color: var(--warn); }
.status.failed { color: var(--err); }

/* ---------- подвал ---------- */
footer { margin-top: 36px; padding-bottom: 12px; }
#legal { font-size: var(--t-sm); line-height: 1.7; color: var(--ink-soft); }
/* Подпись авторов временных фотографий: требование лицензий CC BY и CC BY-SA.
   Тише основного текста подвала — это сноска, а не адрес заведения. */
#photo-credits a {
  color: var(--ink-soft);
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);     /* палец, а не пиксель: как у остальных ссылок подвала */
  padding-inline: 2px;
}
#photo-credits {
  margin: var(--s-3) 0 0;
  font-size: var(--t-xs);
  line-height: 1.6;
  /* 🔴 Тот же цвет, что у остального текста подвала, и БЕЗ прозрачности:
     opacity снижает контраст ровно там, где текст и так самый мелкий. */
  color: var(--ink-soft);
}
#legal a {
  color: var(--ink-soft);
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);     /* 44 замером, а не «12 сверху, 12 снизу, вроде хватит» */
  padding-inline: 2px;
  line-height: 1.4;
}

/* ---------- широкие экраны ---------- */
@media (min-width: 720px) {
  .items { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }
}

/* Телефон в шапке и кнопка корзины — только на широком экране. */
.head-phone, .head-cart {
  display: none;
  align-items: center;
  gap: var(--s-2);
  min-height: var(--h-sec);
  padding: 0 var(--s-4);
  border-radius: 999px;
  font: inherit;
  font-size: var(--t-base);
  font-weight: var(--w-semi);
  text-decoration: none;
  white-space: nowrap;
}
.head-phone {
  margin-left: auto;
  color: var(--ink);
  background: var(--glass);
  border: 1px solid var(--glass-line);
}
.head-phone:hover { background: var(--raised); }
.head-cart {
  margin-left: var(--s-3);
  border: 0;
  background: var(--brand);
  color: var(--on-brand);
  cursor: pointer;
  box-shadow: 0 10px 24px -14px oklch(0.626 0.196 36.5 / .55);
  transition: background .2s var(--ease);
}
.head-cart:hover { background: var(--brand-hot); }
.head-cart[hidden] { display: none; }
/* Текстовая ссылка в шапке компьютера: «Мой заказ». */
.head-link {
  display: none;
  align-items: center;
  min-height: var(--h-sec);
  padding: 0 var(--s-3);
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--ink);
  font: inherit;
  font-size: var(--t-base);
  font-weight: var(--w-semi);
  cursor: pointer;
}
.head-link:hover { color: var(--brand-ink); }
.head-link[hidden] { display: none; }

/* Возврат из оформления. На телефоне его роль играет нижняя панель,
   на компьютере её нет — и уйти обратно было нечем. */
.back-link {
  display: none;
  align-items: center;
  min-height: var(--tap);
  margin-bottom: var(--s-2);
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink-soft);
  font: inherit;
  font-size: var(--t-md);
  cursor: pointer;
}
.back-link:hover { color: var(--ink); }

/* Скрыто визуально, но доступно для чтения с экрана и для фокуса. */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.notice-more { margin: var(--s-2) 0 0; }
.notice-retry { margin-top: var(--s-3); width: auto; padding-inline: var(--s-4); }

.head-cart svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

/* ======================================================================
   КОМПЬЮТЕР. До этого экран был телефонным макетом посреди монитора:
   колонка 784 px, по бокам по 360 пустого фона, два блюда на весь экран
   и нижняя панель навигации — приём, которому на мониторе нечего делать.
   Здесь раскладка другая: широкая сетка, телефон и корзина в шапке.
   ====================================================================== */
@media (min-width: 1080px) {
  :root { --maxw: 1140px; }

  .app { margin-block: var(--s-7); }
  body:not(:has(.tabs)),
  body { padding-bottom: var(--s-7); }

  /* Нижняя панель уступает место шапке. */
  .tabs { display: none; }
  .head-phone, .head-cart { display: inline-flex; }
  .head-link { display: inline-flex; margin-left: var(--s-5); }
  .head-phone { margin-left: auto; }
  .back-link { display: inline-flex; }
  .head-row .round-btn { display: none; }

  header { padding-block: var(--s-4); }
  .brand-mark img { height: 46px; }

  /* Три блюда в ряд: экран показывает меню, а не одну шаурму. */
  .items { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); }
  .item-name { font-size: var(--t-xl); }

  /* Заголовок и подзаголовок занимают колонку, а не всю ширину сетки. */
  h1.title { font-size: 42px; }
  .lead { font-size: var(--t-xl); max-width: 44ch; }
  .hello { font-size: var(--t-base); }

  /* Форма заказа шириной с читаемую колонку и по центру: поля на 1140 px
     нелепы, а прижатая влево колонка оставляет половину экрана пустой. */
  #screen-checkout, #screen-done { max-width: 720px; margin-inline: auto; }

  /* Липкая сумма не нужна — она есть в шапке. */
  .cart-bar { display: none; }

  footer { margin-top: var(--s-8); }
}



/* ---------- узкие экраны ---------- */
/* 320 px — не «край поддержки», а рабочая ширина: на ней название и цена
   обязаны помещаться в строку. Ужимаем поля и кегль, тач-цели не трогаем. */
@media (max-width: 359px) {
  .wrap { padding-inline: var(--s-3); }
  .cats { margin-inline: calc(-1 * var(--s-3)); padding-inline: var(--s-3); }
  .items { gap: var(--s-3); }
  .item-name { font-size: var(--t-lg); }
  .btn { font-size: var(--t-base); padding-inline: var(--s-3); }
  .tab { font-size: 11px; }
}

/* 🔴 Невысокое окно на ноутбуке (1280×620 и подобные). Снимок занимал половину
   карточки, и под «Соберите под себя» оставалась одна строка — человек видел
   заголовок группы и ни одной добавки. Еда уступает место выбору. */
@media (min-width: 640px) and (max-height: 780px) {
  /* flex: 0 0 auto обязателен — иначе слой снимка сжимается флексом ниже
     содержимого, и еда вылезает поверх текста (поймано снимком). */
  .dish-hero { flex: 0 0 auto; min-height: 0; padding-block: var(--s-2); }
  .dish-hero img { max-height: 19dvh; }
  /* Наезд оставляем и здесь: снимок теперь помещается в свой слой целиком,
     и выступ над листом ничего не перекрывает. */
  .sheet { margin-top: -14px; }
}

/* Телефон лёжа: еде остаётся полоска, а выбор и кнопка обязаны помещаться. */
@media (max-height: 540px) {
  /* 🔴 Телефон лёжа. Замер показал: слой снимка ужимался флексом до 40 px,
     а сама еда (82) и кнопка «закрыть» (42) вылезали за него и ложились
     поверх названия блюда. Слой больше не сжимается — он ровно по содержимому. */
  .dish-hero {
    flex: 0 0 auto;
    min-height: 0;
    padding: var(--s-2) var(--s-5) var(--s-2);
  }
  .dish-hero img { max-height: 21dvh; }
  .dish-bar { padding-block: var(--s-2); }
  /* Наезд листа на снимок здесь только режет еду — места на него нет. */
  .sheet { margin-top: 0; padding: var(--s-3) var(--s-5) var(--s-3); border-radius: 0; }
  .dish-tag { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}