/* Шрифты лежат рядом, а не на Google Fonts: внешний CDN — лишняя точка отказа
   для российской аудитории, да и CSP в bot/web/app.py пускает только свой
   origin. Латиница и кириллица разными файлами, браузер тянет нужный
   по unicode-range.

   Rubik держит заголовки, названия позиций и цены. Onest — весь остальной
   текст. Caveat только для рукописных пометок, больше нигде. */
@font-face {
  font-family: "Rubik"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("fonts/rubik-700-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Rubik"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("fonts/rubik-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+20AC, U+2122, U+2190-2193;
}
@font-face {
  font-family: "Rubik"; font-style: normal; font-weight: 800; font-display: swap;
  src: url("fonts/rubik-800-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Rubik"; font-style: normal; font-weight: 800; font-display: swap;
  src: url("fonts/rubik-800-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+20AC, U+2122, U+2190-2193;
}
@font-face {
  font-family: "Onest"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/onest-400-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Onest"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/onest-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+20AC, U+2122, U+2190-2193;
}
@font-face {
  font-family: "Onest"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("fonts/onest-600-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Onest"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("fonts/onest-600-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+20AC, U+2122, U+2190-2193;
}
@font-face {
  font-family: "Caveat"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("fonts/caveat-700-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Caveat"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("fonts/caveat-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+20AC, U+2122, U+2190-2193;
}

/* Палитра заведения: крафтовый талон, типографская краска, штемпельный красный.
   Поверхности здесь свои, а не из темы Telegram: дизайн построен на бумаге
   определённого оттенка, и подмена фона тёмной темой его разрушает. */
:root {
  --bg: #FBF3E6;          /* фон страницы */
  --surface: #EFDDBE;     /* талон */
  --kraft-line: #DCC49C;  /* линии внутри талона */
  --perf: #C6AB80;        /* перфорация по линии отрыва */
  --rule: #E8D8BC;        /* разделители в меню */
  --leader: #CDB48D;      /* пунктир от названия к цене */
  --text: #2A1D14;        /* типографская краска */
  --hint: #6A5545;        /* вторичный текст */
  --paper: #FFFDF8;       /* текст на красном и поля ввода */
  --separator: var(--rule);

  --red: #C93A24;         /* действия, штампы, пометки */
  /* Тот же красный, но темнее: на крафте фирменный даёт 3.83 при норме 4.5,
     а этот — 4.73. Нужен для мелкого красного текста на талоне. */
  --red-ink: #B2301D;

  --pepper: var(--red);
  --dill: #3F7A4E;

  --board: "Rubik", system-ui, sans-serif;
  --hand: "Caveat", cursive;

  /* Акцент один на всё приложение — красный. Механика разделов ниже цела:
     чтобы вернуть разноцветные разделы, достаточно дописать цвета в .hue-*. */
  --accent: var(--red);
  --accent-ink: var(--paper);
  --coals: var(--red);

  --radius: 16px;
  --radius-sm: 12px;
  --gap: 12px;
  --pad: 20px;
  --tap: 44px;

  --safe-top: var(--tg-safe-area-inset-top, 0px);
  --safe-bottom: var(--tg-safe-area-inset-bottom, 0px);

  --fast: 160ms;
  --slow: 240ms;
}

/* Разделы больше не красятся каждый в свой цвет: у бумажного меню один
   штемпельный красный, и пять акцентов с ним спорят. Классы оставлены, чтобы
   разметка и скрипт продолжали работать без правок. */
.hue-1, .hue-2, .hue-3, .hue-4 { --accent: var(--red); --accent-ink: var(--paper); }


/* Крафт в этом дизайне означает талон: им залиты карточка заказа и блок
   добавок. Меню лежит прямо на бумаге и разделено тонкими линиями — иначе
   витрина и чек выглядят одинаково. */
.addon, .order-card {
  --sheen: var(--surface);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

/* Свой display в классе перебивает браузерный [hidden] — возвращаем атрибуту силу,
   иначе скелет и чипсы остаются на экране после загрузки. */
[hidden] { display: none !important; }

body {
  margin: 0;
  padding: calc(var(--safe-top) + 8px) 0 calc(var(--safe-bottom) + 24px);
  background: var(--bg);
  color: var(--text);
  font: 16px/1.5 "Onest", system-ui, -apple-system, sans-serif;
  font-variant-numeric: tabular-nums;
  overflow-x: hidden;
}

/* Отбивка точками от названия к цене — приём печатного меню. Тянется резинкой
   между соседями, поэтому цена всегда прижата к правому краю, а строка
   остаётся читаемой при любой длине названия. */
.leader {
  flex: 1 1 auto; min-width: 10px; align-self: flex-end; margin-bottom: 5px;
  border-bottom: 2px dotted var(--leader);
}

button { font: inherit; color: inherit; cursor: pointer; touch-action: manipulation; }
:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; border-radius: 4px; }

/* ── шапка ───────────────────────────────────────────── */
.bar { padding: 4px var(--pad) 12px; }
/* Заголовок шапки — единственный h1 на экране, он же название открытого блюда.
   Раньше имя блюда стояло и здесь, и ещё раз в теле экрана. */
.bar__title {
  margin: 0;
  font-family: var(--board); font-size: 30px; font-weight: 600; line-height: 1.05;
  text-transform: uppercase; letter-spacing: 0.01em;
  min-width: 0; overflow-wrap: break-word;
}
/* «Вегетарианская» капсом в 30 px шире экрана в 320 px и рвалась посреди слова. */
@media (max-width: 340px) { .bar__title { font-size: 26px; } }
.bar__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.bar__link {
  flex: 0 0 auto; min-height: var(--tap); padding: 0 4px;
  border: 0; background: none; color: var(--hint);
  font-size: 14px; text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: var(--red);
}
.bar__note { margin-top: 7px; font-size: 13px; color: var(--hint); }
.bar__note--closed { color: var(--pepper); font-weight: 600; }

/* ── разделы ─────────────────────────────────────────── */
.chips {
  display: flex; gap: 22px; overflow-x: auto; scrollbar-width: none;
  padding: 0 var(--pad) 10px; scroll-snap-type: x proximity;
  position: sticky; top: 0; z-index: 5;
}
/* Подложка — только у прилипшей полосы: см. chips--stuck в app.js. */
.chips--stuck { background: linear-gradient(var(--bg) 72%, transparent); }
.chips::-webkit-scrollbar { display: none; }
/* Разделы — не кнопки, а вкладки: просто текст, а под выбранным красная
   черта. Пилюли рядом с крупными названиями блюд читались как второй ряд
   действий и спорили с единственной кнопкой внизу экрана. */
.chip {
  position: relative; flex: 0 0 auto; min-height: var(--tap);
  padding: 0 2px 10px; scroll-snap-align: start;
  border: 0; background: transparent;
  font-family: var(--board); font-size: 19px; font-weight: 700;
  color: var(--hint); white-space: nowrap; transition: color var(--fast);
}
.chip[aria-current="true"] { color: var(--text); }
.chip[aria-current="true"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 6px; height: 3px;
  border-radius: 2px; background: var(--red);
}

/* ── экраны ──────────────────────────────────────────── */
.screen { display: none; padding: 0 var(--pad); }
.screen--active { display: block; animation: fade var(--slow) ease-out; }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Заголовок раздела — как строка на меловой доске: имя в полный тон и короткая
   янтарная подчёркивающая планка. Серая капитель с линейкой во всю ширину
   разделяет не хуже, но ей набран каждый второй интерфейс. */
.section-title {
  margin: 26px 0 12px; padding-bottom: 7px;
  font-family: var(--board); font-size: 20px; font-weight: 600; line-height: 1;
  text-transform: uppercase; letter-spacing: 0.02em; color: var(--text);
  border-bottom: 3px solid var(--red);
  display: block; width: fit-content;
}

/* ── раздел меню ─────────────────────────────────────────
   Блюда раздела собираются в одну панель, а не в стопку одинаковых плашек:
   на доске меню позиции идут подряд в общей рамке, и раздел читается как
   раздел, а не как четыре независимых объекта. */
/* Последняя позиция раздела линию не рисует: её роль берёт на себя
   заголовок следующего раздела. */
.menu-section > :last-child { border-bottom: 0; }

/* У раздела меню планка в цвете раздела. Остальные заголовки («Состав заказа»
   и подобные) разделами меню не являются — им остаётся янтарь. */
.section-title--menu { border-bottom-color: var(--accent); }

/* ── карточка блюда ──────────────────────────────────────
   Раздел, где у блюд есть фото или описание, показываем карточками.
   Фото нет — колонка под него не резервируется: пустой квадрат читался бы
   как непрогрузившаяся картинка, а не как сознательный выбор. */
.card {
  display: grid; grid-template-columns: 1fr; gap: 10px;
  width: 100%; margin-bottom: 0; padding: 16px 0; text-align: left;
  background: transparent;
  border: 0; border-bottom: 1px solid var(--rule); border-radius: 0;
}
/* minmax(0, …), а не просто 1fr: у 1fr нижняя граница — самое длинное слово
   в названии, и «Вегетарианская» раздвигала колонку шире экрана. Боковых
   полей у карточки нет, как и у карточки без фото: фото стоит по одной
   линии с заголовком раздела. */
.card--photo { grid-template-columns: 96px minmax(0, 1fr); gap: 14px; align-items: center; padding: 12px 0; }
.card__body { min-width: 0; }
.card:active { transform: scale(0.99); }
.card__photo {
  width: 96px; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--hint) 14%, transparent);
}
/* Название блюда — кнопка, открывающая карточку. Ей нужен голый сброс, чтобы
   не выглядеть кнопкой; раньше сброс висел инлайном прямо в шаблоне. */
.card__open, .row__open { all: unset; display: block; cursor: pointer; }
.card__open { width: 100%; }
.card__head { display: flex; align-items: baseline; gap: 9px; }
.card__head .card__title { flex: 0 1 auto; min-width: 0; }

/* Номер позиции. На доске он набран тем же, чем цены, и приглушён до цвета
   раздела: его читают, когда уже выбрали, а не когда просматривают меню. */
.num {
  flex: 0 0 auto;
  font-family: var(--board); font-size: 15px; font-weight: 600;
  letter-spacing: 0.04em;
  /* Доля акцента подобрана по контрасту, а не на глаз: при 82% янтаря на
     светлой теме выходило 2.4 при норме 4.5. На 50% — 4.84 и 11.6, у
     остальных цветов разделов не ниже 6.1. */
  color: color-mix(in srgb, var(--accent) 50%, var(--text));
}
.row__open { flex: 0 1 auto; display: flex; align-items: baseline; gap: 9px; min-width: 0; }

/* Перенос внутри слова — только страховка для узких экранов, где длинное
   слово не помещается в строку целиком. Обычные названия он не трогает. */
.card__title {
  font-family: var(--board); font-size: 21px; font-weight: 500;
  line-height: 1.1; letter-spacing: 0.01em; overflow-wrap: break-word;
}
.card--photo .card__title { font-size: 19px; }
/* На самых узких телефонах (320 px) «Вегетарианская» целиком не влезала
   даже во всю колонку и рвалась посреди слова. Фото ужимаем, текст чуть
   мельче — слово снова помещается в строку. */
@media (max-width: 340px) {
  .card--photo { grid-template-columns: 72px minmax(0, 1fr); gap: 12px; }
  .card__photo { width: 72px; }
  .card--photo .card__title { font-size: 17px; }
}
.card__sub {
  margin-top: 3px; font-size: 13px; color: var(--hint);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* Описание и кнопка стоят в одной строке: кнопка отдельной строкой съедала
   высоту, а в разделе из четырёх блюд ещё и выстраивалась в столбик из
   одинаковых янтарных пятен. Прижимаем её вправо последним ребёнком —
   правило работает и когда описания нет и кнопка в строке одна. */
.card__foot { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
/* Кнопка не сжимается и не переносится: ужиматься должно описание, а не
   подпись действия — «В корзину» в две строки читается как поломка. */
.card__foot > :last-child { flex: 0 0 auto; margin-left: auto; }
.card__foot .add { white-space: nowrap; }
.card__foot .card__sub { flex: 0 1 auto; margin-top: 0; min-width: 0; }
/* У карточки с фото в этой строке цена и кнопка. «2 шт. · изменить» длиннее
   «В корзину», и на узком телефоне кнопка уходит под цену, а не за край. */
.card--photo .card__foot { flex-wrap: wrap; margin-top: 10px; }

.card__row { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 10px; }
/* Тот же ряд, но в карточке блюда — там над ним стоит состав, нужен воздух. */
/* В карточке блюда в этом ряду лежит одна цена, и прижимать её вправо
   незачем — это не строка меню, а подпись к тому, что выше. */
.product__row { justify-content: flex-start; margin-top: 20px; }
/* Цена — то, что сканируют взглядом, поэтому она набрана крупно и тем же
   шрифтом вывески. Рубль мельче и приглушён: он одинаков у всех строк и
   в сравнении цен не участвует. */
.card__price { flex: 0 0 auto; font-family: var(--board); font-size: 22px; font-weight: 600; line-height: 1; white-space: nowrap; }
/* Рубль виден там, где число одно (итог, кнопка), и убран из колонки цен:
   в меню он повторялся бы в каждой строке, ничего не добавляя. */
.rub { margin-left: 2px; font-size: 0.62em; font-weight: 500; color: var(--hint); }
.card__price .rub, .row__price .rub { display: none; }

/* ── строка дозаказа ─────────────────────────────────────
   Соусы, добавки, напитки берут вдогонку к основному, поэтому раздел
   без единого фото и описания сжимается в список: цена и «плюс» на месте,
   лишнего веса нет. */
.row {
  display: flex; align-items: center; gap: 10px;
  width: 100%; margin-bottom: 8px; padding: 10px 12px 10px 14px; text-align: left;
  background: var(--sheen);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--separator));
  border-radius: var(--radius-sm);
}
.row:active { transform: scale(0.995); }
.row__title { font-family: var(--board); font-size: 18px; font-weight: 500; line-height: 1.15; }
.row__price { font-family: var(--board); font-size: 20px; font-weight: 600; line-height: 1; white-space: nowrap; }

/* ── счётчик ─────────────────────────────────────────── */
.stepper { display: inline-flex; align-items: center; gap: 2px; background: color-mix(in srgb, var(--accent) 16%, transparent); border-radius: 999px; }
.stepper__btn { min-width: var(--tap); min-height: 36px; border: 0; background: none; font-size: 20px; line-height: 1; border-radius: 999px; }
.stepper__btn:active { background: color-mix(in srgb, var(--accent) 30%, transparent); }
.stepper__qty { min-width: 28px; text-align: center; font-weight: 700; }
/* Круглая кнопка позиции: в бумажном меню это обводка, а не заливка —
   заливку держит единственное главное действие внизу экрана. */
.add {
  min-height: var(--tap); min-width: var(--tap); padding: 0 16px;
  border: 2px solid var(--text); border-radius: 999px;
  background: transparent; color: var(--text);
  font-family: var(--board); font-size: 15px; font-weight: 700;
}
.add:active { background: var(--text); color: var(--paper); }
/* Кнопки ростом 36 px, а палец требует 44. Растягиваем не саму кнопку, а
   невидимую зону нажатия — так строки остаются плотными, а промахов нет. */
.add, .stepper__btn { position: relative; }
.add::after, .stepper__btn::after { content: ""; position: absolute; inset: -4px 0; }
/* Чипсам такой трюк не годится: у полосы разделов overflow-x: auto, а он
   заодно подрезает и вертикальное переполнение — выступающая зона нажатия
   обрезается. Поэтому им просто даём честные 44 px роста. */
/* В списке дозаказа подпись не нужна — действие очевидно из контекста строки. */
.add--compact { min-width: 38px; padding: 0; font-size: 22px; line-height: 1; }

/* ── фото в карточке товара ──────────────────────────── */
/* Фото показывает блюдо, а не служит обложкой: во всю ширину экрана оно
   занимало полэкрана и оттесняло состав. Теперь оно вдвое уже и стоит
   по центру, со скруглёнными углами, как миниатюра в меню.
   height: auto обязателен. Атрибут height="900" в разметке браузер читает как
   высоту 900px, а aspect-ratio при заданной высоте не работает: фото
   растягивалось на весь экран, и до кнопки покупки было не долистать. */
.hero {
  display: block; width: min(60%, 260px); height: auto; margin: 4px auto 0;
  aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius);
  background: color-mix(in srgb, var(--hint) 14%, transparent);
}
.product__price { font-family: var(--board); font-size: 28px; font-weight: 600; line-height: 1; }
.product__text { margin: 10px 0 0; color: var(--hint); }
.product__label {
  margin-top: 18px; padding-bottom: 5px; width: fit-content;
  font-family: var(--board); font-size: 15px; font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--text);
  border-bottom: 2px solid var(--accent);
}

/* ── корзина ─────────────────────────────────────────── */
.line { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--separator); }
.line:last-of-type { border-bottom: 0; }
.line__side { display: flex; align-items: center; gap: 10px; }
.line__title { font-family: var(--board); font-size: 18px; font-weight: 500; }
.line__sum { font-family: var(--board); font-size: 19px; font-weight: 600; white-space: nowrap; }
/* Итог отбит двойной линией, как в кассовом чеке: взгляд по столбцу сумм
   упирается в неё и останавливается. */
.total {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-top: 14px; padding-top: 14px;
  border-top: 3px double color-mix(in srgb, var(--hint) 50%, transparent);
  font-family: var(--board); font-size: 24px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.02em;
}

/* ── добавки к блюду ─────────────────────────────────── */
.addon {
  display: flex; align-items: center; gap: 10px;
  width: 100%; margin-bottom: 8px; padding: 8px 8px 8px 14px;
  background: var(--sheen); border: 1px solid var(--separator); border-radius: var(--radius-sm);
  transition: border-color var(--fast);
}
.addon--on { border-color: var(--accent); }
.addon__title { font-size: 15px; }
.addon__price { font-size: 15px; font-weight: 700; white-space: nowrap; }
/* Пока добавка не выбрана, минус ни к чему — гасим, но место держим. */
.addon .stepper__btn[disabled] { opacity: 0.35; }


/* ── формы ───────────────────────────────────────────── */
.field { margin-top: 16px; }
.field__label { display: block; margin-bottom: 6px; font-size: 14px; color: var(--hint); }
.input {
  width: 100%; min-height: var(--tap); padding: 11px 14px; color: var(--text);
  background: var(--surface); border: 1px solid var(--separator); border-radius: var(--radius-sm);
  font: inherit;
}
.input:focus { border-color: var(--text); outline: none; }
.input--error { border-color: var(--pepper); }
/* Время выдачи. Системную стрелку select убираем — на крафтовом поле она
   выглядела чужой — и рисуем свою уголком из рамки. Время — главный выбор
   на экране, поэтому набрано жирнее телефона и пожеланий. */
.select { position: relative; }
.select .input {
  appearance: none; -webkit-appearance: none;
  padding-right: 44px; font-weight: 600;
}
.select::after {
  content: ""; position: absolute; right: 18px; top: 50%;
  width: 8px; height: 8px; margin-top: -6px;
  border-right: 2px solid var(--text); border-bottom: 2px solid var(--text);
  transform: rotate(45deg); pointer-events: none;
}
/* Часы и минуты — два списка через двоеточие, как на табло. Цифры набраны
   шрифтом вывески и крупнее остальных полей: это главный выбор экрана. */
.clock { display: flex; align-items: center; gap: 8px; }
.clock .select { flex: 1 1 0; min-width: 0; }
.clock .input { font-family: var(--board); font-size: 22px; }
.clock__colon { font-family: var(--board); font-size: 24px; font-weight: 700; }
.field__hint { margin: 6px 0 0; }
.error { margin-top: 6px; font-size: 13px; color: var(--pepper); }

/* Главное действие: красный прямоугольник во всю ширину, подпись слева,
   сумма справа — как на кассовом табло. */
.btn {
  min-height: 56px; padding: 12px 20px; border: 0; border-radius: var(--radius);
  background: var(--red); color: var(--paper);
  font-family: var(--board); font-size: 17px; font-weight: 700;
}
.btn--quiet { background: transparent; color: var(--text); border: 2px solid var(--text); }
/* Отмена стояла рядом с «я оплатил» и весила столько же. Отменить заказ
   нельзя откатить, поэтому кнопка остаётся тихой, но перестаёт мимикрировать
   под безобидное действие. */
.btn--danger { color: var(--red); border-color: var(--red); }
.btn--wide { display: block; width: 100%; margin-top: 12px; }

/* ── статусы заказа ──────────────────────────────────── */
.status { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; background: color-mix(in srgb, var(--hint) 16%, transparent); }
.status--paid, .status--cooking { background: color-mix(in srgb, var(--red) 14%, transparent); color: var(--red-ink); }
.status--ready, .status--done { background: color-mix(in srgb, var(--dill) 20%, transparent); color: var(--dill); }
.status--pending { background: color-mix(in srgb, var(--pepper) 16%, transparent); color: var(--pepper); }

/* Заказ — это талон с номером, который называешь на выдаче. Верхний край
   «оторван»: полукруглые выемки прорезаны повторяющимся радиальным
   градиентом, то есть одним фоном, без единого лишнего элемента в разметке. */
.order-card {
  display: block; width: 100%; margin-bottom: var(--gap);
  padding: 16px; text-align: left;
  background:
    repeating-radial-gradient(circle at 5px 0, transparent 0 4px, var(--surface) 4px 10px)
      top / 10px 6px repeat-x,
    var(--sheen);
  border: 1px solid var(--separator); border-top: 0;
  border-radius: 0 0 var(--radius) var(--radius);
}
.order-card__top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.order-num { font-family: var(--board); font-size: 22px; font-weight: 600; letter-spacing: 0.02em; }
.muted { color: var(--hint); font-size: 14px; }
/* Отступы приписок раньше стояли инлайном в шаблонах. Три роли, три класса:
   пояснение под блоком, строка-метаданные заказа, подпись карточки в списке. */
.note { margin-top: 14px; }
.order-head { margin-top: 8px; }
.order-meta { margin: 8px 0 0; }
.order-meta + .order-meta { margin-top: 4px; }
.order-card__meta { margin-top: 6px; }

/* ── пустые состояния, скелетоны, тосты ──────────────── */
.empty { padding: 48px 0; text-align: center; }
.empty__title { font-family: var(--board); font-size: 24px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.02em; }
.empty__text { margin-top: 6px; color: var(--hint); }

.skeleton-list { display: grid; gap: var(--gap); }
.skeleton-card { height: 116px; border-radius: var(--radius); background: color-mix(in srgb, var(--hint) 12%, transparent); animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: 0.45; } }

.toast {
  position: fixed; left: var(--pad); right: var(--pad); bottom: calc(var(--safe-bottom) + 16px);
  z-index: 20; padding: 12px 16px; border-radius: var(--radius-sm);
  background: var(--pepper); color: #fff; font-size: 14px; animation: rise var(--slow) ease-out;
}
@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

.fallback { padding: 64px var(--pad); text-align: center; }
.fallback__text { margin-bottom: 16px; color: var(--hint); }

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


/* ── штамп и пометки ─────────────────────────────────────
   Две детали бумажного талона. Штамп бьют под углом, пометку пишут от руки;
   на крафте оба берут затемнённый красный — фирменный там не добирает
   контраста для мелкого кегля. */
.stamp {
  display: inline-block; transform: rotate(-7deg);
  padding: 2px 8px; border: 2px solid var(--red-ink); border-radius: 6px;
  font-family: var(--board); font-size: 13px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.08em; line-height: 1;
  color: var(--red-ink);
}
.scribble {
  font-family: var(--hand); font-size: 19px; font-weight: 700; line-height: 1;
  color: var(--red);
}
.scribble--kraft { color: var(--red-ink); }
/* Подсказка в корзине — целое предложение, а не пометка в два слова, и
   рукописным Caveat оно читалось с трудом. Набираем основным шрифтом, от
   пометки остаётся красный. */
.cart-hint {
  font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--red-ink);
}


/* ── талон ───────────────────────────────────────────────
   Крафтовая плашка, на которой живёт заказ. Линия отрыва рисуется пунктиром,
   а две полукруглые выемки по краям — кружками цвета страницы: вместе это
   читается как оторванный корешок, и разметке для этого ничего не нужно. */
.ticket {
  padding: 16px; border-radius: var(--radius);
  background: var(--surface); color: var(--text);
}
.ticket__label {
  font-family: var(--board); font-size: 12px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--hint);
}
.ticket__title {
  margin: 4px 0 0; font-family: var(--board); font-size: 26px; font-weight: 800;
  line-height: 1.1;
}
.ticket__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }

.perf { position: relative; height: 0; margin: 16px 0; border-top: 2px dashed var(--perf); }
.perf::before, .perf::after {
  content: ""; position: absolute; top: -11px; width: 20px; height: 20px;
  border-radius: 999px; background: var(--bg);
}
.perf::before { left: -27px; }
.perf::after { right: -27px; }

/* Номер заказа: три знака с ведущими нулями, как на бумажном талоне. */
.ticket__num {
  position: relative; margin-top: 2px;
  font-family: var(--board); font-size: 76px; font-weight: 800;
  line-height: 0.95; letter-spacing: -0.02em;
}
.ticket__num .stamp { position: absolute; right: 2px; top: 24px; font-size: 15px; }
.ticket__hint { margin: 0; font-size: 15px; }

/* ── состав ──────────────────────────────────────────────
   Две колонки: ингредиенты короткие, и в одну они растягивают карточку так,
   что до кнопки приходится листать. Маркер — точка того же цвета, что и
   отбивка в меню, чтобы список читался как часть той же бумаги. */
.compose {
  margin: 10px 0 0; padding: 0; list-style: none;
  columns: 2; column-gap: 18px;
}
.compose li {
  position: relative; padding-left: 14px; margin-bottom: 4px;
  break-inside: avoid; font-size: 15px; line-height: 1.35;
}
.compose li::before {
  content: ""; position: absolute; left: 2px; top: 0.62em;
  width: 5px; height: 5px; border-radius: 999px; background: var(--perf);
}
@media (max-width: 340px) { .compose { columns: 1; } }

/* ── экран блюда ─────────────────────────────────────────
   Состав, а внизу полоса покупки: цена слева, действие справа. */
.product__buy {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: 22px; padding-top: 18px; border-top: 2px dashed var(--perf);
}
.product__buy .product__price { flex: 0 0 auto; }
/* Единственное действие экрана — заливкой и во всю оставшуюся ширину.
   Счётчик на его месте появляется сам, когда блюдо уже в корзине. */
.product__buy .add {
  flex: 1 1 150px; min-height: 52px;
  border: 0; border-radius: var(--radius);
  background: var(--red); color: var(--paper); font-size: 16px;
}
.product__buy .add:active { background: var(--red-ink); color: var(--paper); }
.product__buy .stepper { flex: 0 0 auto; margin-left: auto; }