/* GORY NOCH — витрина. Ninja Sushi-стиль + палитра Gory Noch. Полноценный адаптив. */

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

:root {
  --brand:      #DA8542;
  --brand-2:    #B76B32;
  --brand-bg:   #FCF2E4;
  --text:       #14110D;
  --text-2:     #4A4438;
  --muted:      #8A8578;
  --line:       #E9E2D2;
  --bg:         #FFFCF6;
  --card:       #FFFFFF;
  /* Фон секции — на полтона глубже страницы. Нужен именно третий тон:
     на белом фоне секции белые карточки блюд сливались бы с ней, а на
     цвете страницы обводка осталась бы единственной границей. */
  --panel:      #FDF8EE;
  --add:        #2F7D5B;
  --add-2:      #245F45;
  /* Заливка при наведении. Отдельно от --add: тот тёмный, потому что служит
     цветом текста на светлом --add-bg, а сплошным фоном читается мрачно. */
  --add-h:      #3E9E70;
  --add-bg:     #EAF3EE;
  --new-bg:     #D3F0DE;
  --new:        #1F8C36;
  --hit-bg:     #FBDCD5;
  --hit:        #C34D3B;
  --gold:       #E8B84A;
  --danger:     #B0362B;
  --shadow-sm:  0 1px 2px rgba(20,17,13,.05);
  --shadow-md:  0 8px 24px rgba(20,17,13,.08);
  --shadow-lg:  0 20px 48px rgba(20,17,13,.14);
  /* Единая шкала скруглений. Овальных («таблеточных») блоков в макете нет:
     всё прямоугольное со скруглением, как в референсе. Круглыми остаются
     только микроэлементы — счётчик корзины, кружки под иконки, шаги «1-2-3». */
  --r-xs: 8px;  --r-sm: 10px;  --r: 14px;  --r-lg: 20px;
  /* Две ступени размера на весь сайт, и только две. Раньше их было пять —
     бар шапки 62, рельса 93, поиск 56, кнопки 57, чипы 44, — и сайт не
     читался как одна вещь. Теперь всё, что нажимают (кнопки, чипы, поиск,
     значки, счётчики), — --ctl; всё, что служит полкой (оба яруса шапки,
     крупная кнопка оформления), — --ctl-lg. Реальные значения задают
     медиазапросы ниже, здесь — база. */
  /* Высота полосы баннеров. Живёт здесь, а не у самой полосы: её
     вычитает из своей высоты герой, а он соседний элемент и переменную,
     объявленную на полосе, не увидел бы. */
  --banner-h: clamp(180px, 26vw, 340px);
  --ctl: 52px;
  --ctl-lg: 92px;
  /* Ширина контейнера тянется за экраном, а не прыгает ступенями:
     на 1700px даёт 1520, на 2560 — 2250, дальше упирается в потолок,
     чтобы строки текста не становились нечитаемо длинными.
     Раньше пороги 1800/2200 отставали, и на широком мониторе по бокам
     оставалось около 350px пустоты с каждой стороны. */
  --wrap: clamp(1520px, 96vw, 2440px);
  --hdr-h: 76px;
}

/* overflow-x: clip не создаёт scroll-контейнер и НЕ ломает position: sticky
   у потомков (в отличие от overflow-x: hidden). Поддержка: Chrome 90+, FF 81+, Safari 16+. */
html { overflow-x: clip; }
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text',
               'Helvetica Neue', Arial, sans-serif;
  font-size: 21px; line-height: 1.55;
  color: var(--text); background: var(--bg);
  /* Тёплая подсветка первого экрана. Живёт на body, а не на .hero:
     у героя эллипсы были центрированы у самых его краёв и обрезались
     его границами — от этого под шапкой шла ровная горизонтальная
     полоса. Здесь центры вынесены ВЫШЕ верха страницы (отрицательный
     отступ в пикселях, не в процентах: процент считался бы от высоты
     всего документа), поэтому резать нечего — свет мягко стекает вниз
     и растворяется в фоне. */
  background-image:
    radial-gradient(1150px 660px at 86% -160px, rgba(218,133,66,.14), transparent 63%),
    radial-gradient(880px 560px at 2% -110px, rgba(218,133,66,.07), transparent 60%);
  background-repeat: no-repeat;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }
img { display: block; max-width: 100%; }
svg { display: block; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 40px; }
/* На широких мониторах контейнер в 1440px занимает чуть больше половины
   экрана, и всё выглядит мелким на фоне пустых полей. Расширяем ступенями
   (на 1700px и уже остаётся 1440 — там поля и так разумные). */
@media (max-width: 1100px) { .wrap { padding: 0 28px; } }
@media (max-width: 720px)  { .wrap { padding: 0 16px; } }

/* ═════════════════════════════════════════════════════════
   HEADER
   ═════════════════════════════════════════════════════════ */
/* Оболочка шапки: фиксирована, внутри два яруса. Место в потоке держит
   padding-top у body — его выставляет hookStickyHeader(). */
/* Оболочка прозрачная: над контентом плавают только белые карточки
   ярусов — как в оригинале, где карточка рельсы наезжает на фото блюд.
   Матового фона и блюра здесь намеренно нет. */
.hdr-shell {
  position: fixed; top: 0; left: 0; right: 0; z-index: 40;
  padding-bottom: 10px;
  pointer-events: none;
}
/* Кликается только то, что видно: сами карточки ярусов. Их обёртки
   растянуты на всю ширину и иначе перехватывали бы клики по каталогу,
   который под ними проходит. */
.hdr__bar, .rail-card { pointer-events: auto; }
/* Схлопнутое состояние: верхний ярус уходит за край экрана, рельса
   поднимается к верху. Анимируем margin-top, а не transform, — рельса
   должна подтянуться следом, а не остаться на месте. */
.hdr-shell .hdr {
  transition: margin-top .26s cubic-bezier(.4, 0, .2, 1), opacity .2s;
}
.hdr-shell.is-collapsed .hdr {
  margin-top: calc(-1 * var(--hdr-h));
  opacity: 0;
  pointer-events: none;
}
/* На узких экранах прятать нечего — там весь верхний ярус и есть шапка. */
@media (max-width: 720px) {
  .hdr-shell.is-collapsed .hdr { margin-top: 0; opacity: 1; pointer-events: auto; }
}

.hdr { padding-top: 12px; }
/* Верхний ярус — белая карточка с отступами от краёв экрана.
   Флексбокс, а не грид: на мобилке навигация и телефон скрываются,
   и колонки грида разъезжались бы. */
.hdr__bar {
  display: flex;
  align-items: center; gap: 28px; min-width: 0;
  height: var(--ctl-lg); padding: 0 30px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}
/* flex-shrink: 0 — логотип не ужимается флексом при тесноте (иначе глобальный
   img{max-width:100%} сплющивал его по ширине при фиксированной высоте). */
.hdr__logo { display: inline-flex; align-items: center; height: 58px; flex-shrink: 0; }
.hdr__logo img { height: 100%; width: auto; max-width: none; flex-shrink: 0; }

.hdr__nav { display: flex; gap: 4px; justify-content: center; flex: 1; font-size: 18px; font-weight: 500; }
/* Высота пунктов ≈ высоте кнопки «Корзина» (44px), чтобы подсветка при
   наведении/активности не прилипала к верхнему и нижнему краям бара, а имела
   такой же аккуратный отступ (~9px), как у корзины. */
.hdr__nav a { padding: 8px 18px; border-radius: 14px; white-space: nowrap; transition: background .15s, color .15s; }
.hdr__nav a:hover, .hdr__nav a.active { background: var(--brand-bg); color: var(--brand-2); }

/* Телефоны двух точек. Раскрывашка нативная (<details>) — состояние держит
   браузер, JS не нужен. ponytail: клик мимо списка его не закрывает; если
   понадобится — один обработчик на document. */
.hdr__phone { position: relative; display: inline-flex; }
/* Кнопка-значок как у избранного и профиля: вид даёт общий .hdr__icon,
   здесь только убираем родную стрелку <summary> и подсвечиваем открытое. */
.hdr__phone > summary { list-style: none; }
.hdr__phone > summary::-webkit-details-marker { display: none; }
.hdr__phone[open] > summary {
  background: var(--brand-bg); color: var(--brand-2); border-color: var(--brand-2);
}
.hdr__phone-menu {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 30;
  min-width: 250px; padding: 6px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r); box-shadow: var(--shadow-md);
}
.hdr__phone-menu a {
  display: flex; flex-direction: column; gap: 2px;
  padding: 9px 12px; border-radius: var(--r-sm); transition: background .15s;
}
.hdr__phone-menu a:hover { background: var(--brand-bg); }
.hdr__phone-menu b { font-size: 13px; font-weight: 600; color: var(--muted); }
.hdr__phone-menu span { font-size: 17px; font-weight: 700; color: var(--text); }
.hdr__actions { display: flex; gap: 10px; align-items: center; }
.hdr__icon {
  width: var(--ctl); height: var(--ctl); border-radius: 14px;
  background: var(--card); border: 1px solid var(--line);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--text);
  transition: all .15s;
}
.hdr__icon:hover { background: var(--brand-bg); color: var(--brand-2); border-color: var(--brand-2); }
.hdr__icon svg { width: 22px; height: 22px; }
.hdr__icon--menu { display: none; }

.cart-btn {
  height: var(--ctl); padding: 0 22px; border-radius: 14px;
  background: var(--card); border: 1px solid var(--line);
  font-family: inherit; font-weight: 500; font-size: 18px;
  color: var(--text); cursor: pointer;
  display: inline-flex; align-items: center; gap: 10px;
  transition: all .15s;
  position: relative;
}
.cart-btn:hover { border-color: var(--brand-2); color: var(--brand-2); }
.cart-btn:not(.empty) { background: var(--brand); color: #fff; border-color: var(--brand); }
.cart-btn:not(.empty):hover { background: var(--brand-2); border-color: var(--brand-2); }
.cart-btn svg { width: 22px; height: 22px; }
.cart-btn__count {
  position: absolute; top: -6px; right: -6px;
  min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px;
  background: var(--brand); color: #fff;
  font-size: 16px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  border: 2px solid var(--card);
}
.cart-btn:not(.empty) .cart-btn__count { background: var(--card); color: var(--brand-2); border-color: var(--card); }
/* Пустую корзину не подписываем нулём — как и счётчик в рельсе, он прячется. */
.cart-btn.empty .cart-btn__count { display: none; }

/* Полоса корзины у нижнего края — только на телефоне (включается ниже, в
   мобильном блоке). Здесь спрятана: на десктопе кнопка в шапке под рукой. */
.cart-bar { display: none; }

/* Мобильная шторка */
.drawer {
  position: fixed; top: 0; left: 0; bottom: 0;
  width: min(320px, 85vw); background: var(--card);
  transform: translateX(-105%);
  transition: transform .3s cubic-bezier(.2,.6,.2,1);
  z-index: 50;
  padding: 20px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 20px;
}
.drawer.open { transform: translateX(0); }
.drawer__head { display: flex; justify-content: space-between; align-items: center; }
/* Сетка меню: две колонки, как в референсе. Плитки разделов — картинка над
   подписью, служебные строки — значок слева от подписи, но в том же ритме. */
.drawer__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.drawer__tile {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 14px 8px; border-radius: 14px;
  background: var(--bg); border: 1px solid var(--line);
  color: var(--text); font-size: 15px; font-weight: 500; text-align: center;
  transition: background .12s, border-color .12s, color .12s;
}
.drawer__tile span { line-height: 1.2; }
.drawer__tile .rail__ic { width: 44px; height: 44px; }
.drawer__tile:hover, .drawer__tile.is-active { background: var(--brand-bg); border-color: var(--brand); color: var(--brand-2); }
.drawer__tile:hover .rail__ic-on, .drawer__tile.is-active .rail__ic-on { opacity: 1; }

.drawer__nav { display: flex; flex-direction: column; gap: 2px; }
.drawer__nav a {
  padding: 12px 16px; border-radius: 10px; font-weight: 500; font-size: 18px;
  transition: background .12s, color .12s;
}
.drawer__nav a:hover { background: var(--brand-bg); color: var(--brand-2); }
.drawer__section { display: flex; flex-direction: column; gap: 6px; }
.drawer__label {
  font-size: 16px; color: var(--muted); text-transform: uppercase;
  letter-spacing: 0.06em; font-weight: 600; padding: 0 4px 4px;
}
.drawer__row {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 12px; border-radius: 12px;
  background: var(--bg); border: 1px solid var(--line); cursor: pointer;
  /* Часть строк — ссылки, часть — кнопки. Без явного цвета ссылки красились
     в фирменный, и половина списка выглядела выделенной. */
  color: var(--text); font-family: inherit; font-size: 15px; text-align: left;
  transition: background .12s, border-color .12s, color .12s;
}
.drawer__row:hover { background: var(--brand-bg); border-color: var(--brand); color: var(--brand-2); }
.drawer__row svg { width: 20px; height: 20px; flex-shrink: 0; }
/* Телефонов два — по одному на точку. margin-top:auto стоит на обоих: первый
   съедает свободное место, второй встаёт вплотную под ним. */
.drawer__phone {
  margin-top: auto;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 16px; background: var(--brand); color: #fff;
  border-radius: 12px; font-weight: 600;
}
.drawer__phone + .drawer__phone { margin-top: 8px; }
.drawer__phone span { display: flex; flex-direction: column; line-height: 1.25; }
.drawer__phone b { font-size: 13px; font-weight: 500; opacity: .85; }
.drawer__phone .ico {
  width: 22px; height: 22px; border-radius: 50%;
  background: rgba(255,255,255,.25); display: inline-flex; align-items: center; justify-content: center;
}
.drawer__phone .ico svg { width: 12px; height: 12px; }

/* ═════════════════════════════════════════════════════════
   CATEGORY RAIL
   ═════════════════════════════════════════════════════════ */
/* Нижний ярус шапки. Липкость и фон — на .hdr-shell, здесь только отступы.
   Блок, а не флекс: .wrap внутри должен иметь определённую ширину, иначе
   рельса не узнает, когда ей пора прокручиваться (см. .rail ниже). */
.rail-wrap { padding: 10px 12px 0; }
/* Корзина в карточке категорий. Появляется, когда верхний ярус уехал
   вверх. Отдельный класс, а не модификатор .cart-btn: у той кнопки есть
   правило `.cart-btn:not(.empty)` с заливкой, оно весит больше
   модификатора и перекрашивало кнопку в оранжевый прямоугольник.

   Только иконка со счётчиком: слово «Корзина» рядом с двенадцатью
   категориями съедало бы им место, а цифра и так всё говорит. */
/* Появление анимируем шириной, а не display: тот переключается мгновенно,
   и кнопка «выпрыгивала», толкая категории. Теперь она всегда в потоке,
   но схлопнута в нулевую ширину и раскрывается вместе с обрезкой по
   overflow — содержимое выезжает справа. Кривая сильно замедляющаяся,
   поэтому запас max-width сверх реальной ширины почти не заметен. */
.rail-cart {
  display: inline-flex;
  align-self: stretch; align-items: center; gap: 7px;
  flex-shrink: 0; white-space: nowrap; overflow: hidden;
  max-width: 0; padding: 0;
  border: 0; border-left: 0 solid var(--line);
  background: transparent; color: var(--muted);
  font-family: inherit; cursor: pointer;
  opacity: 0; visibility: hidden;
  transition: max-width .34s cubic-bezier(.2, .8, .2, 1),
              padding .34s cubic-bezier(.2, .8, .2, 1),
              border-left-width .34s,
              opacity .22s ease-out,
              visibility .34s,
              background .15s, color .15s;
}
.hdr-shell.is-collapsed .rail-cart {
  max-width: 140px; padding: 0 18px;
  border-left-width: 1px;
  opacity: 1; visibility: visible;
}
.rail-cart:hover { background: var(--brand-bg); color: var(--brand-2); }
/* Если в системе включено «уменьшить движение» — показываем сразу,
   без разъезжающейся анимации. */
@media (prefers-reduced-motion: reduce) {
  .rail-cart, .hdr-shell .hdr { transition: none; }
}
/* Содержимое не сжимается — при нулевой ширине оно обрезается, а не мнётся */
.rail-cart svg { width: 23px; height: 23px; flex-shrink: 0; }
/* Есть товары — иконка и счётчик брендовые; пусто — счётчик не нужен */
.rail-cart:not(.empty) { color: var(--brand); }
.rail-cart.empty .rail-cart__count { display: none; }
.rail-cart__count {
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
  background: var(--brand); color: #fff;
  font-size: 15px; font-weight: 700; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
/* Карточка нижнего яруса: категории и корзина в одной плашке.
   width: fit-content + max-width: 100% — ширина по содержимому, но не
   больше контейнера. Предок обязан иметь определённую ширину, иначе
   ограничение не сработает и прокрутка категорий не включится. */
.rail-card {
  display: flex; align-items: center; height: var(--ctl-lg);
  border: 1px solid var(--line);
  width: fit-content; max-width: 100%; margin: 0 auto;
  background: var(--card); border-radius: 18px;
  box-shadow: var(--shadow-sm);
  /* Обрезаем по скруглению: подсветка корзины при наведении иначе
     выходила бы прямым углом за скруглённый край карточки. */
  overflow: hidden;
}
/* Прокручиваемая область с категориями. min-width: 0 обязателен —
   без него флекс-элемент не даёт себя ужать, и корзина выдавливается
   за край карточки. */
.rail {
  display: flex; gap: 4px; overflow-x: auto; padding: 6px 10px;
  min-width: 0; flex-wrap: nowrap;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}
.rail::-webkit-scrollbar { display: none; }
.rail__item {
  flex-shrink: 0;
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  padding: 17px 22px; border-radius: 16px;
  color: var(--muted); font-size: 17px; font-weight: 500;
  min-width: 114px;
  transition: background .15s, color .15s;
  text-align: center;
}
/* Активная категория — брендовая подпись. */
.rail__item:hover { color: var(--brand-2); }
.rail__item.active { color: var(--brand); font-weight: 600; }
/* Иконка категории — две картинки стопкой: спокойная серая (rest) и
   «загорающаяся» оранжевая (on). При наведении и на активной категории
   оранжевая плавно проявляется поверх серой, а иконка чуть подпрыгивает. */
.rail__ic { position: relative; display: block; width: 48px; height: 48px;
  transition: transform .22s cubic-bezier(.2, .8, .2, 1); }
.rail__ic img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; display: block; transition: opacity .25s ease;
}
.rail__ic-on { opacity: 0; }
.rail__item:hover .rail__ic,
.rail__item.active .rail__ic { transform: translateY(-3px) scale(1.06); }
.rail__item:hover .rail__ic-on,
.rail__item.active .rail__ic-on { opacity: 1; }
.rail__item span { white-space: nowrap; letter-spacing: 0.01em; }

/* ═════════════════════════════════════════════════════════
   HERO
   ═════════════════════════════════════════════════════════ */
/* Первый экран.

   Бюджет по высоте: на 1920×1080 вьюпорт ≈ 950px, шапка с рельсой
   занимает ≈ 195px, герою остаётся ≈ 755px. Целимся в ≈ 560px, чтобы
   снизу было видно начало следующего блока. Отсюда потолки clamp():
   на большом мониторе размеры почти исходные, а ужимается герой только
   на низких и узких окнах (1366×768 — вьюпорт ≈ 640px). */
.hero {
  /* Первый экран занимает ровно один экран: низ героя совпадает с низом
     окна, следующий блок начинается точно за сгибом. --shell-h — реальная
     высота шапки, её меряет hookStickyHeader(). Запасное значение нужно
     на один кадр до первого замера. min-height, а не height: на низком
     окне контент должен вылезать, а не обрезаться. */
  min-height: calc(100vh - var(--shell-h, 181px));
  display: grid; align-content: center;
  padding: clamp(28px, 5vh, 52px) 0 clamp(28px, 5vh, 48px);
  /* Своего фона у героя нет — подсветка идёт от body сплошным слоем,
     иначе на стыке блоков появлялась видимая граница. */
}
.hero .wrap {
  display: grid; grid-template-columns: 1.5fr 1fr;
  gap: clamp(24px, 4vw, 56px); align-items: center;
}
.hero__badges {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin-bottom: clamp(14px, 2.4vh, 24px);
}
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: var(--r-sm);
  font-size: 17px; font-weight: 600;
  background: var(--brand-bg); color: var(--brand-2);
}
.chip.gold { background: rgba(232,184,74,.14); color: #A47D18; }
.chip.dark { background: var(--text); color: #fff; }
.chip .stars { display: inline-flex; gap: 1px; color: var(--gold); }
.chip .stars svg { width: 14px; height: 14px; }

/* 5.6vw: 1366 → 76, 1700 → 95, 1920 → 104 (потолок), шире — тоже 104.
   На 1700px размер задаёт именно коэффициент, а не потолок, поэтому
   поднимать надо было его, а не только верхнюю границу. */
.hero__brand {
  font-weight: 800; font-size: clamp(44px, 5.6vw, 104px); line-height: 0.95;
  letter-spacing: -0.045em;
  margin: 0 0 12px; color: var(--text);
}
.hero__brand span { color: var(--brand); }
.hero h1 {
  font-weight: 700; font-size: clamp(19px, 1.7vw, 32px); line-height: 1.22;
  letter-spacing: -0.01em;
  margin: 0 0 clamp(12px, 2vh, 20px); color: var(--text-2);
}
.hero__desc {
  font-size: clamp(14px, 1.15vw, 18px); color: var(--muted); line-height: 1.55;
  max-width: 640px;
  margin: 0 0 clamp(18px, 3vh, 30px);
}
.hero__cta {
  display: flex; gap: 12px; flex-wrap: wrap;
  margin-bottom: clamp(20px, 3.2vh, 36px);
}
/* Факты — одной строкой в четыре колонки, а не блоком два на два:
   так они занимают ~54px вместо ~110px и не съедают первый экран. */
.hero__facts {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0 24px; max-width: 720px; font-size: 18px;
}
.hero__fact { padding: 14px 0 0; border-top: 1px solid var(--line); color: var(--muted);
  display: flex; flex-direction: column; }
/* margin-top: auto прижимает значение к низу ячейки. Ячейки грида равны по
   высоте (align-items: stretch), поэтому значения выстраиваются в одну линию,
   даже если подписи занимают разное число строк. */
.hero__fact b { display: block; color: var(--text); font-size: 20px; font-weight: 600; margin-top: auto; padding-top: 3px; }
/* Переход по «Наши заведения» из первого экрана: тот же отступ, что у
   разделов каталога, иначе заголовок уезжает под липкую шапку. */
.spots { scroll-margin-top: calc(var(--hdr-h, 120px) + 24px); }

.hero__logo { display: flex; align-items: center; justify-content: center; }
.hero__logo img { max-width: min(400px, 26vw); width: 100%; }

/* ── Сокращённая версия главной (флаг hero_compact в админке) ──
   Логотип во весь рост убран, текст занимает всю ширину, и экран больше
   не резервируется целиком: до меню человек доезжает вдвое быстрее.
   Разметка та же, отличается только оформление. */
.gn-hero-compact .hero {
  min-height: 0;
  padding: clamp(24px, 3.5vh, 44px) 0 clamp(20px, 3vh, 36px);
}
.gn-hero-compact .hero .wrap { grid-template-columns: 1fr; gap: 0; }
.gn-hero-compact .hero__logo { display: none; }
/* Название и подзаголовок в строку: логотипа справа больше нет, и без этого
   между ними оставался бы провал во всю ширину экрана. */
.gn-hero-compact .hero__brand {
  display: inline-block; vertical-align: baseline;
  font-size: clamp(38px, 4.4vw, 76px); margin: 0 18px 10px 0;
}
.gn-hero-compact .hero h1 {
  display: inline; font-size: clamp(17px, 1.4vw, 25px);
}
/* Ограничение по строке, а не по пикселям: длина строки остаётся читаемой
   на любой ширине контейнера, а он тут во весь экран. */
.gn-hero-compact .hero__desc { max-width: 92ch; margin-top: 14px; }
.gn-hero-compact .hero__facts { max-width: 900px; }
.gn-hero-compact .hero__cta { margin-bottom: clamp(16px, 2.4vh, 26px); }

@media (max-width: 720px) {
  /* На телефоне строка короткая — название и подзаголовок снова блоками. */
  .gn-hero-compact .hero__brand { display: block; margin-right: 0; }
  .gn-hero-compact .hero h1 { display: block; }
}

/* Ниже 1200px четыре колонки фактов начинают ломать подписи в две строки */
@media (max-width: 1200px) {
  .hero__facts { grid-template-columns: 1fr 1fr; gap: 0 24px; }
}

/* ═════════════════════════════════════════════════════════
   CATALOG
   ═════════════════════════════════════════════════════════ */
main { padding: 32px 0 96px; }
.cat { margin-bottom: 56px; scroll-margin-top: calc(var(--hdr-h) + 100px); }
.cat__head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 20px; gap: 20px;
}
.cat__title { font-weight: 700; font-size: 39px; letter-spacing: -0.02em; margin: 0; }
.cat__count { color: var(--brand); font-size: 17px; font-weight: 600; white-space: nowrap; }
.cat__count:hover { color: var(--brand-2); }

/* Ссылка на весь раздел — под сеткой. Кнопка, а не строчная ссылка: под
   рядом карточек текст в углу теряется, а полоса во всю ширину сетки
   читается как продолжение ряда и сама подсказывает, что позиций больше. */
.cat__more {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: min(340px, 100%); margin: 20px auto 0; height: var(--ctl); padding: 0 28px;
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  color: var(--brand); font-size: 17px; font-weight: 600; white-space: nowrap;
  transition: background .15s, border-color .15s, color .15s;
}
.cat__more:hover { background: var(--brand-bg); border-color: var(--brand); color: var(--brand-2); }
.cat__more-all { color: var(--muted); font-weight: 500; }

.grid {
  /* Минимум карточки тянется за шириной вьюпорта: 19vw в пределах
     380…560px. Считать надо именно от CSS-вьюпорта, а не от диагонали
     монитора: при масштабе Windows 125% экран 2532px даёт вьюпорт всего
     ~2026px, и формула, рассчитанная на 2500, давала на колонку меньше.
     Итог: 4 колонки от ~1900px вьюпорта, 3 на обычных десктопах и
     ноутбуках. min(…, 100%) — чтобы на узком экране карточка не
     требовала ширины больше самого экрана. */
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(clamp(340px, 19vw, 560px), 100%), 1fr));
  gap: 22px;
}

/* «Рекомендуем» на странице товара: карточек мало (до 4) и они могут
   переноситься на второй ряд. Без этого одинокая карточка во втором ряду
   не растягивалась до высоты соседей (505 вместо 530). grid-auto-rows: 1fr
   делает все ряды равной высоты, поэтому карточки становятся строго одного
   размера независимо от длины описания и наличия бейджа «Хит»/«Новинка»
   (бейджи — абсолютный оверлей над фото, на высоту не влияют). */
#pdAlso .grid { grid-auto-rows: 1fr; }

/* Шапка страницы категории. Раньше стили были заинлайнены в разметке,
   из-за чего заголовок в 44px не ужимался на телефоне — инлайн
   медиазапросом не перебить. */
.cat-head { padding: 32px 0 0; }
.cat-head__back {
  display: inline-block; margin-bottom: 12px;
  color: var(--muted); font-size: 18px;
}
.cat-head__back:hover { color: var(--brand); }
.cat-head__title {
  margin: 0 0 6px; font-weight: 800;
  font-size: clamp(28px, 3.2vw, 44px); letter-spacing: -0.03em;
}
.cat-head__count { margin: 0 0 28px; }

/* ═════════════════════════════════════════════════════════
   ФИЛЬТРЫ КАТАЛОГА
   ═════════════════════════════════════════════════════════ */
.flt { display: flex; flex-direction: column; gap: 10px; margin-bottom: 28px; }
.flt__row { display: flex; align-items: center; gap: 12px; }
/* Чипы в одну строку с горизонтальной прокруткой: иначе на широком
   каталоге они разъезжаются на четыре ряда и забивают экран.
   Отрицательные поля дают полосе «утекать» под края контейнера. */
.flt__chips {
  display: flex; align-items: center; gap: 8px;
  flex: 1; min-width: 0;
  overflow-x: auto; scrollbar-width: none;
  padding: 2px 4px; margin: -2px -4px;
  scroll-padding-inline: 4px;
}
.flt__chips::-webkit-scrollbar { display: none; }
/* Обрезанный край полосы растворяем, а не рубим (класс ставит shop.js,
   только когда полосе есть куда прокручиваться). */
.flt__chips.has-more {
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
          mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
}

.chipf {
  display: inline-flex; align-items: center; gap: 8px;
  height: var(--ctl); padding: 0 22px; border-radius: 14px;
  background: var(--card); border: 1px solid var(--line);
  font-family: inherit; font-size: 18px; font-weight: 500; color: var(--text);
  white-space: nowrap; cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.chipf:hover { border-color: var(--brand); color: var(--brand-2); }
.chipf.is-active {
  background: var(--brand); border-color: var(--brand); color: #fff;
}
.chipf__ico {
  width: 24px; height: 24px; border-radius: 6px;
  object-fit: contain; flex-shrink: 0;
  margin-left: -6px;
}
/* Векторная заглушка вместо фото: рисуется currentColor, поэтому
   на выбранном (оранжевом) чипе становится белой. */
.chipf__ico--svg { display: inline-flex; border-radius: 0; }
.chipf__ico--svg svg { width: 24px; height: 24px; }

/* Поиск: кнопка-лупа, разворачивающаяся в поле */
.flt__search {
  display: flex; align-items: center;
  height: var(--ctl); border-radius: 14px;
  background: var(--card); border: 1px solid var(--line);
  overflow: hidden; flex-shrink: 0;
  transition: border-color .15s;
}
.flt__search:focus-within { border-color: var(--brand); }
.flt__search-btn {
  /* Квадратной быть не должна: в рельсе контейнер высотой во всю карточку,
     и aspect-ratio растягивал кнопку до 93px по ширине — её срезало краем.
     Фон прозрачный, поэтому ширину задаёт отступ, а высоту — контейнер. */
  align-self: stretch; flex-shrink: 0; padding: 0 12px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 0; cursor: pointer; color: var(--muted);
}
.flt__search-btn:hover { color: var(--brand); }
.flt__search-btn svg { width: 20px; height: 20px; }
.flt__search input {
  width: 0; padding: 0; border: 0; outline: 0; background: transparent;
  font-family: inherit; font-size: 18px; color: var(--text);
  transition: width .22s cubic-bezier(.4, 0, .2, 1), padding .22s;
}
.flt__search.is-open input { width: 260px; padding: 0 14px 0 0; }
.flt__search input::-webkit-search-cancel-button { display: none; }

/* Поиск: причал в панели фильтров и место швартовки в шапке. Оформление
   одно на оба положения — переезжая, поле не меняет ни вида, ни ширины,
   поэтому швартовка не видна как рывок.

   Ширина ограничена: во всю строку поле выглядело полосой ввода, а не
   поиском. Держится оно не серединой, а левым краем — общим с рельсой в
   шапке и с сеткой в панели, иначе висело бы само по себе. */
/* В шапке поле начинается там же, где рельса: --rail-left ставит shop.js
   в момент швартовки. Выровненное по краю страницы, оно торчало бы из-под
   рельсы само по себе — в схлопнутой шапке кроме неё ничего не видно. */
#searchSlot { padding: 6px 0 0 var(--rail-left, 0); pointer-events: none; }
#searchSlot .wrap { display: flex; max-width: none; padding: 0; }
/* В панели поле стоит вровень с фильтрами и сеткой — по левому краю. */
.search-dock { margin-bottom: 18px; display: flex; }
.flt-search {
  pointer-events: auto;
  width: min(560px, 100%); height: var(--ctl); padding: 0 10px 0 8px;
  border-radius: 18px; border: 1px solid var(--line);
  background: var(--card); box-shadow: var(--shadow-sm);
}
/* Поле раскрыто всегда: и в панели, и в шапке оно единственный орган
   поиска, прятать его за лупу здесь незачем. */
.flt-search input { flex: 1; min-width: 0; width: auto; padding: 0 14px 0 0; font-size: 17px; }
.flt-search .flt__search-btn { color: var(--muted); }

/* Возврат ко всем позициям. Стоит на месте бывших чипов категорий —
   на странице раздела это единственное, что нужно от той строки. */
.flt__back {
  display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0;
  height: var(--ctl); padding: 0 18px; border-radius: 14px;
  background: var(--card); border: 1px solid var(--line);
  color: var(--text); font-size: 16px; font-weight: 600;
}
.flt__back:hover { border-color: var(--brand); color: var(--brand); }
/* Когда верхней строки нет, сортировка встаёт слева от фильтров, а не
   справа: справа она упиралась бы в прокручиваемую полосу чипов и
   накрывала бы последний из них. */
.flt__row--facets .flt__sort { margin-left: 0; order: -1; }
.flt__back svg { width: 18px; height: 18px; }

.flt__sort { flex-shrink: 0; margin-left: auto; }

/* Брендовый select: нативный список рисует система, и он выбивается из
   стиля. Кнопка со своим меню — тот же компонент, что в админке.
   Сам <select> остаётся в DOM скрытым, поэтому value и change работают. */
.gns { position: relative; display: inline-block; min-width: 190px; }
.gns > select { display: none; }
.gns__btn {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; height: var(--ctl); padding: 0 14px 0 18px;
  background: var(--card); color: var(--text);
  border: 1px solid var(--line); border-radius: var(--r);
  font-family: inherit; font-size: 18px; font-weight: 500; text-align: left;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.gns__btn:hover { border-color: var(--brand); background: var(--brand-bg); }
.gns.is-open .gns__btn,
.gns__btn:focus-visible {
  border-color: var(--brand); outline: 0;
  box-shadow: 0 0 0 4px rgba(218, 133, 66, .15);
}
.gns__label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gns__chev { width: 16px; height: 16px; flex-shrink: 0; color: var(--brand); transition: transform .18s; }
.gns.is-open .gns__chev { transform: rotate(180deg); }

.gns__menu {
  position: absolute; top: calc(100% + 6px); right: 0; min-width: 100%;
  padding: 5px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r); box-shadow: var(--shadow-lg);
  z-index: 35;
  max-height: 320px; overflow-y: auto;
  opacity: 0; transform: translateY(-6px); pointer-events: none;
  transition: opacity .16s, transform .16s;
}
.gns.is-open .gns__menu { opacity: 1; transform: translateY(0); pointer-events: auto; }
.gns__opt {
  display: block; width: 100%; padding: 10px 14px;
  background: transparent; color: var(--text);
  border: 0; border-radius: var(--r-sm);
  font-family: inherit; font-size: 18px; font-weight: 500;
  text-align: left; white-space: nowrap; cursor: pointer;
  transition: background .12s, color .12s;
}
.gns__opt:hover:not(:disabled) { background: var(--brand-bg); color: var(--brand-2); }
.gns__opt:focus-visible { outline: 0; background: var(--brand-bg); color: var(--brand-2); }
.gns__opt.is-active { background: var(--brand); color: #fff; }
.gns__opt:disabled { opacity: .4; cursor: not-allowed; }

.flt__reset {
  height: var(--ctl); padding: 0 18px; border-radius: 14px;
  background: transparent; border: 1px dashed var(--line);
  font-family: inherit; font-size: 18px; font-weight: 500; color: var(--muted);
  cursor: pointer; flex-shrink: 0; margin-left: auto;
}
.flt__reset:hover { border-color: var(--brand); color: var(--brand-2); }

.flt__empty {
  grid-column: 1 / -1;
  padding: 56px 24px; text-align: center;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
}
.flt__empty h3 { margin: 0 0 6px; font-size: 23px; font-weight: 700; }
.flt__empty p { margin: 0 0 20px; color: var(--muted); }

@media (max-width: 720px) {
  /* В одну строку поиск, чипы и сортировка не помещаются: чипам остаётся
     полоска в сотню пикселей. Разносим на два ряда — сверху поиск и
     сортировка, под ними чипы во всю ширину с прокруткой. */
  .flt__row { gap: 8px; flex-wrap: wrap; }
  .flt__sort { order: 2; flex: 1; margin-left: 0; min-width: 0; }
  .flt__sort .gns { display: block; min-width: 0; }
  .flt__chips { order: 3; width: 100%; margin: -2px -16px; padding: 2px 16px; }
  .flt__reset { order: 4; margin-left: 0; }

  .flt { margin-bottom: 20px; }
  /* Высоту здесь не переопределяем: она общая для всего сайта (--ctl),
     а собственные 40px делали чипы и поиск ниже кнопок в карточках. */
  .chipf { padding: 0 14px; font-size: 14px; }
  .chipf__ico { width: 20px; height: 20px; margin-left: -4px; }
  .chipf__ico--svg svg { width: 20px; height: 20px; }
  /* Поле раскрывается на всю доступную ширину, а не на фиксированные 150px */
  .flt__search.is-open input { width: 100%; min-width: 0; }
  .gns__btn { font-size: 14px; padding: 0 12px 0 14px; }
  .gns__opt { font-size: 14px; padding: 9px 12px; }
  .flt__empty { padding: 40px 16px; }
}

/* ═════════════════════════════════════════════════════════
   CARD
   ═════════════════════════════════════════════════════════ */
.item {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-lg); overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: var(--shadow-sm);
  transition: transform .18s, box-shadow .18s;
  position: relative;
}
.item:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.item.oos { opacity: .45; pointer-events: none; }

.item__photo {
  /* 4:3 — ровно та пропорция, в которой сняты блюда. При любой другой
     снимок вписывается по одной стороне и не достаёт до краёв рамки:
     видимый край фото переставал совпадать с текстом под ним. */
  aspect-ratio: 4 / 3;
  background: linear-gradient(135deg, #F5EBD7 0%, #EDE0C7 60%, #E5D6B8 100%);
  display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden;
}
/* Снимки блюд сняты на светлом фоне: показываем целиком (contain), а не
   кадрируем. С cover одно блюдо выглядело крупным, другое — обрезанным,
   и масштаб «прыгал» от карточки к карточке. */
/* Под снимком — прозрачно: если пропорция кадра не совпала с рамкой,
   поле сливается с карточкой, а не выглядит рамкой вокруг фотографии. */
.item__photo.has-photo { background: transparent; }
.item__photo img { width: 100%; height: 100%; object-fit: contain; position: absolute; inset: 0; }
/* Мягкое затемнение снизу — чтобы бейджи и цена читались поверх фото.
   Белого блика в правом верхнем углу здесь намеренно нет. */
.item__photo::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(220px 160px at 24% 82%, rgba(20,17,13,.06), transparent 62%);
  pointer-events: none;
}
.item__mark { position: relative; z-index: 1; opacity: .22; width: 40%; max-width: 100px; }
/* Фото — скруглённый прямоугольник с отступом от краёв карточки, как на
   ninjasushi. Отступ одинаков на всех ширинах: на телефоне карточка теперь
   одна в ряд, и фото во всю ширину смотрелось бы врезанным в край. */
.item__photo { margin: 24px 24px 0; border-radius: 20px; }

.item__badges { position: absolute; top: 12px; left: 12px; display: flex; gap: 6px; z-index: 2; }
.item__fav {
  position: absolute; top: 10px; right: 10px; z-index: 3;
  width: 36px; height: 36px; border-radius: var(--r-sm);
  background: rgba(255,255,255,.92); border: 0; cursor: pointer;
  color: var(--muted);
  display: inline-flex; align-items: center; justify-content: center;
  transition: color .15s, background .15s, transform .1s;
  backdrop-filter: blur(4px);
  box-shadow: 0 2px 8px rgba(20,17,13,.06);
}
.item__fav:hover { color: var(--hit); background: #fff; }
.item__fav:active { transform: scale(.9); }
.item__fav.active { color: var(--hit); background: #fff; }
.item__fav.active svg { fill: currentColor; }
.item__fav svg { width: 18px; height: 18px; }

.fav-row {
  display: grid; grid-template-columns: 48px 1fr auto 32px; gap: 12px;
  padding: 10px; border-radius: 12px; align-items: center;
  transition: background .12s; cursor: pointer; color: var(--text);
  margin-bottom: 4px;
}
.fav-row:hover { background: var(--brand-bg); }
.fav-row__photo { width: 48px; height: 48px; border-radius: 8px;
  background: linear-gradient(140deg, #F5EBD7, #E5D6B8);
  display: flex; align-items: center; justify-content: center; overflow: hidden; }
.fav-row__photo.has-photo { background: transparent; }
.fav-row__photo img { width: 100%; height: 100%; object-fit: contain; }
/* Плейсхолдер вместо фото — марка логотипа, вписанная в квадрат */
.fav-row__photo img.fav-row__mark {
  width: 60%; height: auto; object-fit: contain; opacity: .32;
}
.fav-row__body { min-width: 0; }
.fav-row__name { font-weight: 500; font-size: 18px; overflow-wrap: anywhere; }
.fav-row__meta { color: var(--muted); font-size: 16px; margin-top: 2px; }
.fav-row__price { font-weight: 700; font-size: 18px; white-space: nowrap; }
.fav-row__remove {
  width: 28px; height: 28px; border-radius: var(--r-xs); border: 0; cursor: pointer;
  background: transparent; color: var(--muted);
  display: inline-flex; align-items: center; justify-content: center;
  transition: all .12s;
}
.fav-row__remove svg { width: 13px; height: 13px; }
.fav-row__remove:hover { background: var(--danger); color: #fff; }
.badge {
  padding: 5px 12px; border-radius: var(--r-xs);
  font-size: 16px; font-weight: 600; letter-spacing: 0.01em;
}
.badge.hit   { background: var(--hit-bg); color: var(--hit); }
.badge.new   { background: var(--new-bg); color: var(--new); }
.badge.spicy { background: #FCD8CC; color: #C0472A; }
.badge.veg   { background: #E4F5D5; color: #4A8028; }
.badge.kids  { background: #E5EFF7; color: #416B9A; }
.badge.alco  { background: #F0E1EA; color: #7A3E60; }

/* Боковой отступ равен отступу фото (24px), иначе название и цена стоят
   левее края снимка — расхождение в 6px было заметно на глаз.
   На мобильном фото во всю ширину карточки, и там свои отступы. */
.item__body { padding: 16px 24px 22px; flex: 1; display: flex; flex-direction: column; }
.item__name { font-size: 22px; font-weight: 700; line-height: 1.28; margin: 0 0 6px; letter-spacing: -0.01em; }
.item__meta { color: var(--brand); font-size: 17px; font-weight: 500; margin: 0 0 10px; }
.item__desc {
  color: var(--muted); font-size: 17px; line-height: 1.5; margin: 0 0 20px;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.item__foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.item__price { font-size: 38px; font-weight: 800; letter-spacing: -0.02em; line-height: 1; }
.item__price .rub { color: var(--muted); font-size: 17px; font-weight: 500; margin-left: 2px; }

/* Категории «только в зале» (бар): вместо кнопки заказа — пояснение */
.dine-in {
  display: inline-flex; align-items: center;
  padding: 8px 12px; border-radius: var(--r-sm);
  background: var(--brand-bg); color: var(--brand-2);
  font-size: 16px; font-weight: 600; line-height: 1.2;
  text-align: right;
}
.dine-in--lg { padding: 14px 20px; font-size: 17px; }

.add-btn {
  width: var(--ctl); height: var(--ctl); border-radius: 13px;
  background: var(--add-bg); color: var(--add);
  border: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: all .15s; flex-shrink: 0;
}
.add-btn svg { width: 20px; height: 20px; }
.add-btn:hover  { background: var(--add-h); color: #fff; }
.add-btn:active { transform: scale(0.92); }

.qty {
  display: inline-flex; align-items: center; gap: 4px;
  height: var(--ctl); padding: 4px;
  background: var(--add-bg); border-radius: var(--r);
}
/* Флекс-центрирование обязательно: внутри кнопок значки, а не текст,
   и на выравнивание по строке полагаться нельзя. */
.qty button {
  align-self: stretch; aspect-ratio: 1; border-radius: var(--r-sm);
  background: var(--card); border: 0; cursor: pointer;
  color: var(--add);
  display: inline-flex; align-items: center; justify-content: center;
  transition: all .12s;
}
.qty button svg { width: 18px; height: 18px; }
.qty button:hover { background: var(--add-h); color: #fff; }
.qty b { min-width: 22px; text-align: center; color: var(--add); font-weight: 700; font-size: 18px; }

/* ═════════════════════════════════════════════════════════
   BUTTONS
   ═════════════════════════════════════════════════════════ */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 10px; border: 0; cursor: pointer;
  height: var(--ctl); padding: 0 26px; border-radius: var(--r);
  font-family: inherit; font-weight: 600; font-size: 18px;
  transition: all .15s; white-space: nowrap;
}
.btn:active { transform: scale(0.98); }
.btn-primary { background: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-2); }
.btn-primary:disabled { background: #C7C1B6; color: #fff; cursor: not-allowed; transform: none; }
.btn-outline { background: transparent; color: var(--text); border: 1px solid var(--line); }
.btn-outline:hover { border-color: var(--text); background: var(--card); }
/* Крупная кнопка — вторая ступень шкалы: «Оформить заказ» и «В корзину»
   должны читаться как главное действие экрана, а не как ещё один чип. */
.btn.big { height: var(--ctl-lg); padding: 0 32px; font-size: 18px; width: 100%; }

/* ═════════════════════════════════════════════════════════
   HOME EXTRA SECTIONS
   ═════════════════════════════════════════════════════════ */
.section-title {
  font-weight: 700; font-size: 39px; letter-spacing: -0.02em;
  margin: 0 0 8px;
}
.section-sub { color: var(--muted); font-size: 18px; margin: 0 0 28px; }

/* Секции — карточки с обводкой. Разделов каталога это не касается: там
   внутри и так ряд обведённых карточек блюд, и рамка вокруг рамок читалась
   как лишний слой. Их держит вместе заголовок с акцентной чертой. */
.how, .spots, .faq, .article {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 28px 28px 32px;
  margin-bottom: 28px;
}
/* Черта под заголовком — единственный акцентный элемент, общий для всех
   секций: он и связывает их между собой, и держит оранжевый там, где он
   ничего не обещает нажать. */
.cat__title::after,
.section-title::after,
.cat-head__title::after,
.article > h1::after {
  content: ""; display: block;
  width: 44px; height: 3px; border-radius: 2px;
  background: var(--brand); margin-top: 12px;
}

/* Как заказать */
.how__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.how__step {
  background: var(--card); border-radius: var(--r-lg);
  padding: 28px; box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; gap: 12px;
}
.how__num {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--brand-bg); color: var(--brand-2);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 21px;
  flex-shrink: 0;
}
.how__num svg { width: 22px; height: 22px; }
.how__step h3 { margin: 0; font-size: 21px; font-weight: 700; letter-spacing: -0.01em; }
.how__step p { color: var(--muted); font-size: 18px; margin: 0; line-height: 1.55; }

/* Наши точки */
.spots__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.spot {
  background: var(--card); border-radius: var(--r-lg);
  padding: 28px; box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; gap: 12px;
}
.spot__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.spot__name { font-weight: 700; font-size: 25px; letter-spacing: -0.02em; margin: 0; }
.spot ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; color: var(--text-2); font-size: 18px; }
.spot ul li { display: flex; gap: 8px; }
.spot ul li b { color: var(--muted); font-weight: 500; min-width: 80px; }
.spot__actions { display: flex; gap: 10px; margin-top: 6px; flex-wrap: wrap; }

/* FAQ */
.faq__list { display: flex; flex-direction: column; gap: 12px; }
.faq__item {
  background: var(--card); border-radius: var(--r-lg);
  padding: 20px 24px; box-shadow: var(--shadow-sm);
  cursor: pointer;
}
.faq__q {
  display: flex; align-items: center; justify-content: space-between;
  font-weight: 600; font-size: 18px; letter-spacing: -0.01em;
}
.faq__q::after {
  content: "+"; font-size: 28px; color: var(--brand); font-weight: 400;
  transition: transform .18s;
}
.faq__item[open] .faq__q::after { transform: rotate(45deg); }
.faq__a { color: var(--text-2); font-size: 18px; line-height: 1.55; margin: 12px 0 0; }

/* ═════════════════════════════════════════════════════════
   CART DRAWER
   ═════════════════════════════════════════════════════════ */
.cart {
  position: fixed; right: 0; top: 0; bottom: 0;
  width: min(540px, 100vw); background: var(--card);
  transform: translateX(105%);
  transition: transform .3s cubic-bezier(.2,.6,.2,1);
  z-index: 50; display: flex; flex-direction: column;
  box-shadow: var(--shadow-lg);
}
.cart.open { transform: translateX(0); }
.scrim {
  position: fixed; inset: 0; background: rgba(20,17,13,.4);
  opacity: 0; pointer-events: none; transition: opacity .25s;
  z-index: 45;
}
.scrim.on { opacity: 1; pointer-events: auto; }
.cart__head {
  padding: 24px 24px 16px; display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid var(--line);
}
.cart__title { font-size: 25px; font-weight: 700; letter-spacing: -0.01em; }
.cart__title small { color: var(--muted); font-weight: 500; font-size: 18px; margin-left: 8px; }
.cart__close {
  background: var(--brand-bg); border: 0; width: 40px; height: 40px; border-radius: 12px;
  cursor: pointer; color: var(--brand-2);
  display: flex; align-items: center; justify-content: center;
  transition: background .12s;
}
.cart__close:hover { background: var(--brand); color: #fff; }
.cart__close svg { width: 18px; height: 18px; }

/* Прогресс до бесплатной доставки */
.cart__progress { padding: 12px 24px 4px; }
.cart__progress-text { font-size: 17px; color: var(--text-2); margin-bottom: 8px; }
.cart__progress-text b { color: var(--brand-2); font-weight: 700; }
.cart__progress-bar {
  height: 6px; border-radius: 999px; background: var(--brand-bg); overflow: hidden;
}
.cart__progress-bar span {
  display: block; height: 100%; width: 0;
  background: var(--brand); border-radius: 999px;
  transition: width .3s cubic-bezier(.4, 0, .2, 1);
}

/* Апсейл-полоса «Добавить к заказу» */
.cart__upsell { padding: 10px 24px 12px; border-top: 1px solid var(--line); }
.cart__upsell-title {
  font-size: 16px; font-weight: 600; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 6px;
}
.cart__upsell-row {
  display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none;
  margin: 0 -24px; padding: 0 24px 2px;
}
.cart__upsell-row::-webkit-scrollbar { display: none; }
.upsell {
  flex-shrink: 0; display: flex; flex-direction: column; gap: 4px;
  padding: 10px 14px; border-radius: 12px; text-align: left;
  background: var(--card); border: 1px dashed var(--line);
  font-family: inherit; cursor: pointer;
  transition: border-color .15s, background .15s;
}
.upsell:hover { border-color: var(--brand); border-style: solid; background: var(--brand-bg); }
.upsell__name { font-size: 17px; font-weight: 500; color: var(--text); white-space: nowrap; }
.upsell__price { font-size: 16px; font-weight: 700; color: var(--brand-2); }

.cart__body { flex: 1; overflow-y: auto; padding: 8px 24px 16px; }
/* Строка — самостоятельная плитка, а не ряд с разделителем:
   убрать · фото · название с весом · цена · счётчик. */
.cart-line {
  display: grid;
  grid-template-columns: 30px 84px minmax(0, 1fr) auto auto;
  gap: 12px; align-items: center;
  padding: 10px 12px 10px 6px; margin-bottom: 8px;
  border-radius: var(--r); background: var(--bg);
}
/* Крестик слева и всегда видим: по наведению его легко не заметить,
   а на тачскрине наведения нет вовсе. Оформлен кнопкой — так понятнее,
   что по нему кликают, и в него проще попасть пальцем. */
.cart-line__del {
  width: 30px; height: 30px; border-radius: var(--r-sm);
  background: var(--card); border: 1px solid var(--line); cursor: pointer;
  color: var(--muted);
  display: inline-flex; align-items: center; justify-content: center;
  transition: color .15s, background .15s, border-color .15s;
}
.cart-line__del svg { width: 13px; height: 13px; }
.cart-line__del:hover {
  color: #fff; background: var(--danger); border-color: var(--danger);
}

.cart-line__photo {
  width: 84px; height: 84px; border-radius: var(--r-sm);
  background: linear-gradient(140deg, #F5EBD7, #E5D6B8);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
/* Снимки блюд сняты на светлом фоне — показываем целиком, а не кадрируем,
   иначе одно блюдо выглядит крупнее другого. */
.cart-line__photo.has-photo { background: transparent; }
.cart-line__photo img { width: 100%; height: 100%; object-fit: contain; }
.cart-line__photo img.cart-line__mark { width: 58%; opacity: .32; }

/* min-width: 0 обязателен: колонка 1fr имеет min-width auto, и длинное
   название распирало бы строку, выдавливая цену за край. */
/* Строка ведёт на страницу блюда: из корзины часто хотят перечитать
   состав или вес, и возвращаться за этим в каталог незачем. */
.cart-line__body { min-width: 0; color: inherit; display: block; }
.cart-line__body:hover .cart-line__name { color: var(--brand); }
.cart-line__name {
  font-size: 16px; font-weight: 600; line-height: 1.3;
  overflow-wrap: anywhere; transition: color .15s;
}
.cart-line__meta { color: var(--brand); font-size: 14px; margin-top: 2px; }
.cart-line__price { font-weight: 700; font-size: 16px; white-space: nowrap; }
.cart-line__qty {
  display: inline-flex; align-items: center; gap: 2px;
  background: var(--add-bg); border-radius: var(--r-xs); padding: 3px;
}
.cart-line__qty button {
  width: 26px; height: 26px; border-radius: var(--r-xs);
  background: var(--card); border: 0; cursor: pointer;
  color: var(--add);
  display: inline-flex; align-items: center; justify-content: center;
}
.cart-line__qty button svg { width: 13px; height: 13px; }
.cart-line__qty button:hover { background: var(--add-h); color: #fff; }
.cart-line__qty b { min-width: 18px; text-align: center; font-size: 15px; color: var(--add); }

.cart__upsell-note {
  margin: 0 0 8px; color: var(--muted); font-size: 14px; line-height: 1.3;
}

.cart__empty { padding: 60px 20px; text-align: center; color: var(--muted); }
.cart__empty h4 { color: var(--text); font-size: 21px; font-weight: 600; margin: 0 0 8px; }
.cart__empty p { font-size: 18px; margin: 0 auto; max-width: 280px; }

/* Итоги занимали больше места, чем сам список: 297px против 290px на
   типовом экране. Цифры от этого не выиграли — их читают одним взглядом, —
   а позиции приходилось листать. Сжали строки и отступы; кнопка осталась
   крупной, она главное действие экрана. */
.cart__foot { border-top: 1px solid var(--line); padding: 12px 24px 16px; background: var(--card); }
.cart__foot .row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 3px; font-size: 16px; color: var(--text); }
/* display: flex перебивает браузерное [hidden] { display: none } — без этого
   скрытая строка порога всё равно оставалась на месте. */
.cart__foot .row[hidden] { display: none; }
.cart__foot .row.muted { color: var(--muted); font-size: 15px; }
.cart__foot .row.total { font-size: 16px; margin: 8px 0 12px; padding-top: 10px; border-top: 1px solid var(--line); font-weight: 500; }
.cart__foot .row.total b { font-size: 26px; font-weight: 700; letter-spacing: -0.01em; }

/* доставка/самовывоз */
.fulf { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px; }
.fulf__opt {
  position: relative; cursor: pointer;
  padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 12px;
  transition: all .15s;
  display: block;
}
.fulf__opt input { position: absolute; opacity: 0; pointer-events: none; }
.fulf__opt:hover { border-color: var(--brand); }
.fulf__opt:has(input:checked) { border-color: var(--brand); background: var(--brand-bg); }
.fulf__label { display: block; }
.fulf__label b { display: block; font-size: 18px; font-weight: 600; margin-bottom: 2px; }
.fulf__label small { color: var(--muted); font-size: 16px; }

/* ═════════════════════════════════════════════════════════
   CHECKOUT
   ═════════════════════════════════════════════════════════ */
/* Только вертикальные отступы: горизонтальные наследуем от .wrap (padding
   0 40px), иначе шорткат обнулял боковые и контент прилипал к краю экрана. */
.co { padding-top: 48px; padding-bottom: 96px; }
.co h1 { font-weight: 800; font-size: 51px; letter-spacing: -0.03em; line-height: 1; margin: 0 0 8px; }
.co__sub { color: var(--muted); font-size: 17px; margin: 0 0 40px; }
.co__grid {
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 32px; align-items: start;
}
.co__grid > aside {
  position: sticky;
  top: calc(var(--hdr-h) + 20px);
  align-self: start;
}
@media (max-width: 900px) {
  .co__grid { grid-template-columns: 1fr; }
  .co__grid > aside { position: static; top: auto; }
}
/* ПК: низ формы и низ блока «Ваш заказ» заканчиваются на одной линии.
   Колонки разной высоты по своей природе (форма фиксированная, правый блок
   зависит от числа позиций), поэтому выравниваем так: если правый блок выше
   (много позиций) — последняя карточка формы дотягивается вниз до его края;
   если выше форма (обычный случай) — правый блок остаётся компактным и sticky,
   ничего не растягивается. */
@media (min-width: 901px) {
  .co__grid { align-items: stretch; }
  .co__grid > div:first-child { display: flex; flex-direction: column; }
  .co__grid > div:first-child > .card:last-child { flex: 1 1 auto; margin-bottom: 0; }
  .co__grid > aside { align-self: start; }
}

/* Карточки оформления, шаги «Как заказать», заведения, вопросы — тот же
   контур, что у секций каталога: сайт должен читаться одним набором
   приёмов, а не набором похожих блоков без общего правила. */
.card, .how__step, .spot, .faq__item, .summary {
  border: 1px solid var(--line);
}
.card {
  background: var(--card); border-radius: var(--r-lg);
  padding: 28px; margin-bottom: 16px; box-shadow: var(--shadow-sm);
}
.card h3 { margin: 0 0 20px; font-size: 21px; font-weight: 700; letter-spacing: -0.01em; }
.card h3 .step-n {
  display: inline-flex; width: 26px; height: 26px; border-radius: 50%;
  background: var(--brand); color: #fff; font-size: 16px; font-weight: 700;
  align-items: center; justify-content: center; margin-right: 10px;
}
label {
  display: block; margin: 0 0 14px; font-size: 17px; color: var(--muted); font-weight: 500;
}
label .req { color: var(--brand); font-weight: 700; }
label input, label textarea, label select {
  display: block; width: 100%; padding: 14px 16px; margin-top: 6px;
  border: 1px solid var(--line); border-radius: var(--r);
  font-family: inherit; font-size: 17px; color: var(--text); background: var(--card);
  transition: all .12s;
}
label input::placeholder, label textarea::placeholder { color: #BFB9AC; }
label input:focus, label textarea:focus, label select:focus {
  outline: none; border-color: var(--brand);
  box-shadow: 0 0 0 4px rgba(218,133,66,.14);
}
label input.err, label textarea.err {
  border-color: var(--danger);
  box-shadow: 0 0 0 4px rgba(176,54,43,.12);
}
label .err-txt { color: var(--danger); font-size: 16px; display: block; margin-top: 6px; font-weight: 500; }
.row3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
@media (max-width: 560px) { .row3 { grid-template-columns: 1fr 1fr; } }

/* Условная панель под выбором доставка/самовывоз (адрес или заведение) */
.co__panel { margin-top: 18px; }
/* Дата и время — два поля в ряд */
.co__when { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 480px) { .co__when { grid-template-columns: 1fr; } }
.co__field-lbl { display: block; font-size: 17px; color: var(--muted); font-weight: 500; margin-bottom: 6px; }
/* Количество персон — узкое числовое поле */
.co__persons input { max-width: 140px; }

/* Красивый кастомный дропдаун (замена нативному select) */
.dd { position: relative; }
.dd__btn {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; padding: 14px 16px;
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--card); font-family: inherit; font-size: 17px; color: var(--text);
  cursor: pointer; transition: border-color .12s, box-shadow .12s;
}
.dd__btn:hover { border-color: var(--brand); }
.dd.open .dd__btn { border-color: var(--brand); box-shadow: 0 0 0 4px rgba(218,133,66,.14); }
.dd__chev { width: 18px; height: 18px; color: var(--muted); flex-shrink: 0; transition: transform .18s; }
.dd.open .dd__chev { transform: rotate(180deg); }
.dd__list {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 30;
  margin: 0; padding: 6px; list-style: none;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--shadow-md);
  max-height: 264px; overflow-y: auto; display: none;
}
.dd.open .dd__list { display: block; }
.dd__opt {
  padding: 11px 14px; border-radius: 10px; cursor: pointer;
  font-size: 17px; color: var(--text); transition: background .12s, color .12s;
}
.dd__opt:hover { background: var(--brand-bg); color: var(--brand-2); }
.dd__opt.is-sel { background: var(--brand-bg); color: var(--brand-2); font-weight: 600; }

.pay { display: grid; gap: 10px; }
.pay label {
  display: flex; align-items: center; gap: 14px; margin: 0;
  padding: 14px 18px; border: 1px solid var(--line); border-radius: var(--r);
  cursor: pointer; color: var(--text); font-size: 18px; font-weight: 500;
  transition: all .12s;
}
.pay label:hover { border-color: var(--brand); background: var(--brand-bg); }
.pay label input[type="radio"] { width: 18px; height: 18px; margin: 0; accent-color: var(--brand); }

.summary {
  background: var(--card); border-radius: var(--r-lg); padding: 28px;
  box-shadow: var(--shadow-sm);
}
.co__mobile-toggle { display: none; }
.summary h3 { margin: 0 0 16px; font-size: 17px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
.summary .co__totals { border-top: 1px solid var(--line); margin-top: 16px; padding-top: 16px; }
.summary .co__totals .row {
  display: flex; justify-content: space-between; margin-bottom: 8px; font-size: 18px; color: var(--muted);
}
.summary .co__totals .row b { color: var(--text); font-weight: 500; }
.summary .row-total {
  margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line);
  font-size: 18px; color: var(--text); font-weight: 500;
}
.summary .row-total b { font-size: 30px; font-weight: 700; letter-spacing: -0.02em; }
.err { color: var(--danger); margin-top: 12px; font-size: 17px; font-weight: 500; }
.muted { color: var(--muted); font-size: 17px; }

.autocomplete { position: relative; }
.suggest {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--shadow-md); z-index: 5; max-height: 280px; overflow-y: auto;
}
.suggest__label {
  padding: 8px 16px 6px; font-size: 15px; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--muted); font-weight: 600;
}
.suggest .s-item { padding: 12px 16px; cursor: pointer; font-size: 18px; border-bottom: 1px solid var(--bg); }
.suggest .s-item:last-child { border: 0; }
.suggest .s-item:hover { background: var(--brand-bg); color: var(--brand-2); }
.suggest .s-item small { display: block; color: var(--muted); font-size: 16px; margin-top: 2px; }
.suggest.hidden { display: none; }

/* Статичная плитка — там, где править нечего: страница статуса заказа.
   Ни крестика, ни счётчика, поэтому колонок три. */
.cart-line--static { grid-template-columns: 52px minmax(0, 1fr) auto; padding: 10px 14px; }

/* Сводка на чекауте: позиции крупнее, чем в узкой шторке корзины —
   колонка шире, и мельчить незачем. */
.summary .cart-line {
  grid-template-columns: 34px 68px minmax(0, 1fr) auto auto;
  padding: 12px 14px 12px 8px; gap: 14px; margin-bottom: 10px;
}
.summary .cart-line__photo { width: 68px; height: 68px; }
.summary .cart-line__del { width: 34px; height: 34px; }
.summary .cart-line__del svg { width: 14px; height: 14px; }
.summary .cart-line__name { font-size: 17px; }
.summary .cart-line__meta { font-size: 17px; }
.summary .cart-line__price { font-size: 18px; }

/* Мобильный collapsible summary */
.co__mobile-toggle { display: none; }

/* ═════════════════════════════════════════════════════════
   STATUS
   ═════════════════════════════════════════════════════════ */
/* Только вертикальные отступы: боковые наследуем от .wrap, иначе шорткат
   обнулял их и контент прилипал к краю (как было на чекауте). */
.st { padding-top: 48px; padding-bottom: 96px; }
.st h1 { font-weight: 800; font-size: 46px; letter-spacing: -0.02em; margin: 0 0 6px; }
.st h1 .id { color: var(--muted); font-size: 21px; font-weight: 500; margin-left: 12px; }
.steps { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; margin: 32px 0; }
.step {
  padding: 16px 12px; border-radius: var(--r);
  background: var(--card); box-shadow: var(--shadow-sm);
  font-size: 16px; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--muted); transition: all .3s;
}
.step .n { display: block; color: var(--muted); font-weight: 700; font-size: 15px; margin-bottom: 6px; }
.step.done { color: var(--add); }
.step.done .n { color: var(--add); }
.step.now { background: var(--brand); color: #fff; box-shadow: 0 6px 24px rgba(218,133,66,.35); transform: scale(1.02); }
.step.now .n { color: rgba(255,255,255,.85); }
.step.fail { background: #FBE9E1; color: var(--danger); }
.step.fail .n { color: var(--danger); }
.big-status { font-size: 37px; font-weight: 800; letter-spacing: -0.02em; margin: 4px 0 6px; }
.row-total {
  display: flex; justify-content: space-between; padding-top: 16px; margin-top: 16px;
  border-top: 1px solid var(--line); font-weight: 500;
}
.row-total b { font-size: 25px; font-weight: 700; letter-spacing: -0.02em; }

/* ═════════════════════════════════════════════════════════
   FOOTER
   ═════════════════════════════════════════════════════════ */
.ftr {
  background: var(--text); color: #C7BFA9;
  padding: 56px 0 32px; margin-top: 96px; font-size: 18px;
}
.ftr .wrap { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr; gap: 40px; }
.ftr h4 { color: #fff; margin: 0 0 16px; font-size: 17px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.ftr__logo { height: 40px; margin-bottom: 16px; }
.ftr__logo img { height: 100%; width: auto; }
.ftr__lead { max-width: 360px; margin: 0 0 14px; color: #A9A08C; }
.ftr__rating { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; background: rgba(255,255,255,.06); border-radius: 12px; font-size: 17px; color: #fff; }
.ftr__rating .stars { display: inline-flex; gap: 1px; color: var(--gold); }
.ftr__rating .stars svg { width: 14px; height: 14px; }
.ftr__rating b { font-weight: 700; }
.ftr__rating .dot { opacity: .4; }
.ftr ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.ftr a { color: #C7BFA9; }
.ftr a:hover { color: var(--brand); }
/* Номер не разрывается посреди цифр: на узкой колонке подвала «+7 (913)
   403-57-93» переносился как «403-57-» / «93» и переставал читаться. */
.ftr a[href^="tel:"] { white-space: nowrap; }
.ftr__sub {
  margin-top: 32px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.1);
  color: #A9A08C; font-size: 16px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
@media (max-width: 640px) {
  .ftr__sub { white-space: normal; }
}

/* ═════════════════════════════════════════════════════════
   MODAL
   ═════════════════════════════════════════════════════════ */
.modal {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(20,17,13,.5);
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  opacity: 0; visibility: hidden; transition: opacity .2s, visibility .2s;
}
.modal.open { opacity: 1; visibility: visible; }
.modal__box {
  background: var(--card); border-radius: var(--r-lg);
  padding: 32px; max-width: 480px; width: 100%;
  box-shadow: var(--shadow-lg);
  position: relative;
  max-height: 90vh; overflow-y: auto;
}
.modal__close {
  position: absolute; top: 16px; right: 16px;
  width: 36px; height: 36px; border-radius: var(--r-sm);
  background: var(--brand-bg); border: 0; cursor: pointer; color: var(--brand-2);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .12s;
  z-index: 5;
}
.modal__close:hover { background: var(--brand); color: #fff; }
.modal__close svg { width: 18px; height: 18px; }
/* оставляем 56px справа под кнопку закрытия, чтобы ничего в header/hero не заехало под крестик */
.modal__box h2 { margin: 0 0 12px; font-size: 25px; letter-spacing: -0.01em; padding-right: 56px; }
.modal__box p { color: var(--text-2); margin: 0 0 12px; }
.modal__box .muted { color: var(--muted); font-size: 17px; }



/* Личный кабинет клиента */
.pf { display: flex; flex-direction: column; gap: 4px; }
/* padding-right = 56px под крестик (см. .modal__close). flex-wrap на случай длинных номеров. */
.pf__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 8px;
  padding-right: 56px;
  flex-wrap: wrap; row-gap: 8px;
}
.pf__head h2 { margin: 0; font-size: 25px; letter-spacing: -0.01em; padding-right: 0; }
.pf__phone {
  color: var(--brand); font-weight: 600; font-size: 18px;
  padding: 4px 10px; background: var(--brand-bg); border-radius: var(--r-xs);
  white-space: nowrap;
}
@media (max-width: 480px) {
  /* на узких — телефон под заголовком, чтобы не толкал крестик */
  .pf__head { flex-direction: column; align-items: flex-start; }
}
.pf__tabs {
  display: flex; gap: 4px; margin-bottom: 16px;
  border-bottom: 1px solid var(--line); padding-bottom: 0;
}
.pf__tab {
  padding: 10px 14px; border: 0; background: none; cursor: pointer;
  font-family: inherit; font-size: 18px; font-weight: 500; color: var(--muted);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color .12s, border-color .12s;
}
.pf__tab:hover { color: var(--text); }
.pf__tab.active { color: var(--text); border-bottom-color: var(--brand); font-weight: 600; }
.pf__content { min-height: 120px; max-height: 55vh; overflow-y: auto; padding-right: 4px; }
.pf-order {
  display: flex; flex-direction: column; gap: 6px;
  padding: 14px; margin-bottom: 8px;
  background: var(--brand-bg); border-radius: 12px; color: var(--text);
  transition: transform .12s;
}
.pf-order:hover { transform: translateY(-1px); }
.pf-order__row { display: flex; justify-content: space-between; align-items: baseline; font-size: 18px; }
.pf-order__date { color: var(--muted); font-size: 16px; }
.pf-order__status {
  display: inline-block; padding: 3px 10px; border-radius: var(--r-xs);
  font-size: 15px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em;
  align-self: flex-start;
}
.pf-status--delivered { background: #E1F1E7; color: #24704A; }
.pf-status--cancelled, .pf-status--failed { background: #FBE0DC; color: #B0362B; }
.pf-status--on_way, .pf-status--arrived, .pf-status--courier_assigned,
.pf-status--courier_at_pickup, .pf-status--awaiting_courier { background: #fff; color: var(--brand-2); }
.pf-status--created, .pf-status--cooking, .pf-status--ready { background: #fff; color: var(--text); }
.pf-addr {
  padding: 12px; border-radius: 10px; margin-bottom: 6px;
  background: var(--brand-bg);
}
.pf-addr > div:first-child { margin-bottom: 4px; }

/* ═════════════════════════════════════════════════════════
   СТРАНИЦА БЛЮДА  /shop/product/{id}
   ═════════════════════════════════════════════════════════ */
.crumbs {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 28px 0 24px; font-size: 18px; color: var(--muted);
}
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--brand); }
.crumbs b { color: var(--text); font-weight: 600; }
.crumbs__back {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 16px 8px 12px; margin-right: 6px;
  border-radius: 12px; background: var(--card); border: 1px solid var(--line);
  color: var(--text) !important; font-weight: 500;
  transition: border-color .15s, color .15s;
}
.crumbs__back:hover { border-color: var(--brand); color: var(--brand-2) !important; }
.crumbs__back svg { width: 16px; height: 16px; }

/* Перелистывание блюд: крупные кнопки у краёв экрана.

   position: fixed, а не absolute внутри карточки: так они держатся по
   центру экрана при прокрутке и не зависят от высоты блюда.
   Позиция через max(): на широком мониторе кнопка встаёт в поле слева
   от контента, на узком прижимается к краю и не уезжает за экран.
   z-index ниже затемнения (45) — при открытой корзине или модалке
   кнопки уходят под него и не мешают. */
.pd-nav {
  position: fixed; top: 50%; transform: translateY(-50%);
  z-index: 20;
  /* Не подчиняются общей высоте намеренно: стрелки листания просили сделать
     крупнее, и на них смысл «одного масштаба» не распространяется. */
  width: 56px; height: 56px; border-radius: var(--r);
  background: var(--card); border: 1px solid var(--line);
  box-shadow: var(--shadow-md);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text) !important;
  transition: border-color .15s, color .15s, background .15s, transform .15s;
}
/* Отступ считается от края контента: (поле сбоку) + (внутренний отступ
   .wrap 40px) − (ширина кнопки 56) − (зазор 28) = поле − 44.
   На узком экране max() прижимает кнопку к краю, чтобы не уехала. */
.pd-nav--prev { left:  max(10px, calc((100vw - var(--wrap)) / 2 - 44px)); }
.pd-nav--next { right: max(10px, calc((100vw - var(--wrap)) / 2 - 44px)); }
.pd-nav:hover {
  border-color: var(--brand); color: var(--brand-2) !important;
  background: var(--brand-bg);
}
.pd-nav--prev:hover { transform: translateY(-50%) translateX(-3px); }
.pd-nav--next:hover { transform: translateY(-50%) translateX(3px); }
.pd-nav svg { width: 24px; height: 24px; }

/* Появление карточки при перелистывании. Анимируем только саму карточку:
   шапка, рельса категорий и корзина остаются на месте, поэтому переход
   читается как смена блюда, а не как перезагрузка страницы. */
@keyframes pd-in-right {
  from { opacity: 0; transform: translateX(28px); }
  to   { opacity: 1; transform: none; }
}
@keyframes pd-in-left {
  from { opacity: 0; transform: translateX(-28px); }
  to   { opacity: 1; transform: none; }
}
.pd--in-right { animation: pd-in-right .26s cubic-bezier(.2, .8, .2, 1); }
.pd--in-left  { animation: pd-in-left  .26s cubic-bezier(.2, .8, .2, 1); }

@media (prefers-reduced-motion: reduce) {
  .pd--in-right, .pd--in-left { animation: none; }
}

.pd {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 48px; align-items: stretch; margin-bottom: 72px;
}
/* 4:3 — пропорция, в которой сняты карточки блюд. У квадратного
   контейнера сверху и снизу оставались поля. */
.pd__photo {
  aspect-ratio: 4 / 3; border-radius: var(--r-lg); overflow: hidden;
  background: linear-gradient(135deg, #F5EBD7 0%, #EDE0C7 60%, #E5D6B8 100%);
  display: flex; align-items: center; justify-content: center;
  position: sticky; top: calc(var(--hdr-h) + 90px);
}
.pd__photo.has-photo { background: transparent; }
.pd__photo img { width: 100%; height: 100%; object-fit: contain; }
/* На ПК фото заполняет карточку по ВЫСОТЕ (низ снимка = кнопка «В корзину»,
   поэтому цена всегда на одном уровне с фото). object-fit: contain не даёт
   обрезать снимок, max-width — вылезти за колонку, а aspect-ratio 4:3 задаёт
   минимальную высоту (у коротких блюд карточка не схлопывается в узкую полосу).
   На широких экранах контент вписан в высоту фото (см. #product max-width и
   компактный состав ниже), так что снимок не растянут — цена стоит впритык к
   составу, без пустого зазора. */
@media (min-width: 721px) {
  .pd__photo {
    position: relative; top: auto;
    align-self: stretch; aspect-ratio: 4 / 3; max-width: 100%;
  }
  .pd__photo img { object-fit: contain; }
}
.pd__photo img.pd__mark { width: 34%; height: auto; object-fit: contain; opacity: .26; }

/* Страница товара на ПК — центрированная колонка ограниченной ширины.
   Зачем max-width на #product: при общей широкой сетке (--wrap ≈ 96vw) на
   больших экранах по бокам оставалось всего ~40px, снимок распирало (до 862px)
   и стрелкам листания негде было встать — они налезали на фото. Ограничив
   ширину, получаем поля, в которых стрелки стоят с отступом от контента, а
   фото 4:3 остаётся адекватного размера.
   Высоту карточки НЕ форсируем: она естественная, поэтому кнопка «В корзину»
   стоит сразу под составом и не уходит вниз экрана на ноутбуках. Кнопка прижата
   к низу правой колонки (margin-top:auto) — у коротких блюд её низ совпадает с
   низом фото. */
@media (min-width: 901px) {
  #product { max-width: 1500px; margin-inline: auto; }
  .pd__buy { margin-top: auto; }
  /* Стрелки — по вертикали по центру, в боковых полях с отступом ~20px от
     колонки (826 = половина ширины 750 + отступ 20 + ширина кнопки 56). */
  .pd-nav--prev { left:  max(12px, calc(50% - 826px)); }
  .pd-nav--next { right: max(12px, calc(50% - 826px)); }
}

/* Колонка с описанием тоже должна уметь ужиматься: внутри неё карусель
   состава, и без этого она распирает сетку. flex-колонка нужна и для ПК
   (кнопка прижимается к низу), и для мобайла (порядок блоков через order). */
.pd__info { min-width: 0; display: flex; flex-direction: column; }
/* Бейджи внутри заголовка, а не над ним: иначе название блюда стоит на
   разной высоте у позиций с «Хитом» и без него и скачет при листании. */
.pd__badges { display: inline-flex; gap: 6px; margin-left: 10px;
  vertical-align: middle; white-space: nowrap; }
.pd__name {
  margin: 0 0 8px; font-size: 51px; font-weight: 800;
  letter-spacing: -0.03em; line-height: 1.05;
}
.pd__weight { color: var(--brand); font-size: 21px; font-weight: 500; margin-bottom: 32px; }
.pd__desc { color: var(--text-2); font-size: 18px; line-height: 1.6; margin: 0 0 32px; }

.pd__block { margin-bottom: 32px; }
.pd__block h2 {
  margin: 0 0 14px; font-size: 17px; font-weight: 600; color: var(--text);
}
.pd__block-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.pd__block-head h2 { margin-bottom: 14px; }
.pd__nav { display: flex; gap: 6px; }
.pd__nav button {
  width: 32px; height: 32px; border-radius: 9px;
  background: var(--card); border: 1px solid var(--line); cursor: pointer;
  color: var(--muted); font-size: 21px; line-height: 1;
  transition: border-color .15s, color .15s;
}
.pd__nav button:hover { border-color: var(--brand); color: var(--brand); }

/* Состав — карусель карточек ингредиентов.
   overflow-x: auto по спецификации делает scrollable и вертикальную ось,
   поэтому подсказка, всплывающая над карточкой, обрезалась бы. Отводим
   ей место padding-ом сверху и компенсируем отрицательным margin-ом,
   чтобы визуальный отступ от заголовка остался прежним (14px). */
.ings {
  display: flex; gap: 10px;
  overflow-x: auto; scrollbar-width: none;
  padding: 76px 4px 2px; margin: -76px -4px -2px;
  scroll-snap-type: x proximity;
}
.ings::-webkit-scrollbar { display: none; }
.ing {
  position: relative;
  flex-shrink: 0; width: 118px; scroll-snap-align: start;
  padding: 10px; border-radius: 14px; text-align: center;
  background: var(--card); border: 1px solid var(--line);
}
/* :focus, а не только :focus-visible — на тачскрине наведения нет, и
   подсказка открывается по тапу (карточки сделаны фокусируемыми). */
.ing.has-tip { cursor: help; }
.ing.has-tip:hover, .ing.has-tip:focus { border-color: var(--brand); outline: none; }

/* Подсказка про ингредиент и аллергены — по наведению, а не сноской
   под составом. Всплывает над карточкой и не влияет на раскладку. */
.ing__tip {
  position: absolute; bottom: calc(100% + 10px); left: 50%;
  transform: translate(-50%, 4px);
  display: flex; flex-direction: column; gap: 2px;
  width: max-content; max-width: 240px;
  padding: 10px 14px; border-radius: 12px;
  background: var(--text); color: #fff;
  font-size: 17px; line-height: 1.35; text-align: left;
  box-shadow: var(--shadow-md);
  opacity: 0; visibility: hidden; pointer-events: none; z-index: 5;
  transition: opacity .16s, transform .16s, visibility .16s;
}
/* Хвостик подсказки */
.ing__tip::after {
  content: ""; position: absolute; top: 100%; left: 50%;
  margin-left: -6px; border: 6px solid transparent;
  border-top-color: var(--text);
}
.ing.has-tip:hover .ing__tip,
.ing.has-tip:focus .ing__tip {
  opacity: 1; visibility: visible; transform: translate(-50%, 0);
}
/* У крайних карточек подсказка иначе вылезала бы за пределы карусели */
.ing:first-child .ing__tip { left: 0; transform: translate(0, 4px); }
.ing:first-child .ing__tip::after { left: 44px; }
.ing.has-tip:first-child:hover .ing__tip,
.ing.has-tip:first-child:focus .ing__tip { transform: translate(0, 0); }
.ing:last-child .ing__tip { left: auto; right: 0; transform: translate(0, 4px); }
.ing:last-child .ing__tip::after { left: auto; right: 38px; }
.ing.has-tip:last-child:hover .ing__tip,
.ing.has-tip:last-child:focus .ing__tip { transform: translate(0, 0); }
.ing__pic {
  position: relative; aspect-ratio: 1; margin-bottom: 8px;
  border-radius: 10px; overflow: hidden; background: var(--bg);
  display: flex; align-items: center; justify-content: center;
}
.ing__pic img { width: 100%; height: 100%; object-fit: contain; }
/* Пока фото ингредиента не загружено (Админка → Ингредиенты) */
.ing__letter { font-size: 30px; font-weight: 700; color: var(--line); }
/* Отметка «содержит аллерген» */
.ing__flag {
  position: absolute; top: 4px; right: 4px;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--brand); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 700; line-height: 1;
}
.ing__name {
  font-size: 17px; line-height: 1.25; color: var(--text-2);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
  /* Карточка фиксированной ширины, а названия ингредиентов какие угодно:
     без переноса длинное слово («Творожный») просто срезается краем. */
  overflow-wrap: break-word;
}

.allergen-list { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; }
.allergen-list li {
  padding: 7px 14px; border-radius: 10px;
  background: var(--hit-bg); color: var(--hit);
  font-size: 18px; font-weight: 600;
}

.nut { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.nut__cell {
  padding: 14px 10px; border-radius: 12px; text-align: center;
  background: var(--card); border: 1px solid var(--line);
}
.nut__cell b { display: block; font-size: 23px; font-weight: 700; letter-spacing: -0.02em; }
.nut__cell span { font-size: 16px; color: var(--muted); }

.note { margin: 12px 0 0; font-size: 17px; line-height: 1.5; color: var(--muted); }

.pd__buy {
  display: flex; align-items: center; gap: 16px;
  padding-top: 24px; border-top: 1px solid var(--line);
}
.pd__price { font-size: 39px; font-weight: 800; letter-spacing: -0.03em; line-height: 1; }
.pd__buy .btn { padding: 0 32px; font-size: 18px; }
.pd__fav {
  width: var(--ctl); height: var(--ctl); border-radius: 14px; flex-shrink: 0;
  background: var(--card); border: 1px solid var(--line); cursor: pointer;
  color: var(--muted);
  display: inline-flex; align-items: center; justify-content: center;
  transition: color .15s, border-color .15s, background .15s;
}
.pd__fav svg { width: 22px; height: 22px; }
.pd__fav:hover { border-color: var(--hit); color: var(--hit); }
.pd__fav.active { border-color: var(--hit); color: var(--hit); background: var(--hit-bg); }
.pd__fav.active svg { fill: currentColor; }
.qty--lg { height: var(--ctl); padding: 6px; }
.qty--lg button svg { width: 18px; height: 18px; }
.qty--lg b { font-size: 18px; min-width: 28px; }

/* Компактность страницы товара на ПК: чтобы контент даже насыщенных блюд
   вписывался в высоту фото 4:3 — тогда карточка = высота фото (у всех блюд
   одинаковая, без скачка), а цена стоит впритык к составу, ровно на низе фото.
   Блок идёт ПОСЛЕ базовых правил намеренно: иначе базовые (.pd__badges, .ing,
   .pd__buy и т.д.) перебили бы его — у них та же специфичность, но они ниже. */
@media (min-width: 901px) {
  .pd__name { margin-bottom: 6px; }
  .pd__weight { margin-bottom: 10px; }
  .pd__block { margin-bottom: 10px; }
  .pd__desc { margin-bottom: 10px; }
  .pd__buy { padding-top: 14px; }
  /* Карточка здесь ужимается до 90px, а подпись оставалась 17px — «Креветка»
     и «Творожный» не помещались в строку и рвались посередине слова. */
  .ing { width: 104px; padding: 8px; }
  .ing__name { font-size: 15px; }
  .ing__pic { margin-bottom: 6px; }
}

@media (max-width: 900px) {
  /* minmax(0, 1fr), а не 1fr: у «1fr» минимальная ширина считается по
     содержимому, и колонка раздувалась шире экрана. Из-за этого фото
     обрезалось, а карусель состава не могла стать прокручиваемой —
     она просто уезжала за правый край вместе со страницей. */
  .pd { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .pd__photo { position: static; aspect-ratio: 4 / 3; }
  .pd__name { font-size: 30px; }
  .pd__weight { font-size: 16px; margin-bottom: 22px; }
  /* Раскладка как на ninjasushi: кнопка «В корзину» сразу под названием и
     весом, а состав/аллергены/ценность — ниже. Порядок задаём через order
     (в разметке кнопка остаётся последней — так на ПК она внизу колонки).
     Разделитель-черту над ценой убираем: она нужна, только когда блок внизу. */
  .pd__buy { order: 2; margin: 0 0 26px; padding-top: 0; border-top: 0; flex-wrap: wrap; }
  .pd__buy .btn { flex: 1; }
  .pd__block, .pd__desc { order: 3; }
  .nut { grid-template-columns: repeat(2, 1fr); }
}

/* ─── Выбор заведения на чекауте ─── */
.locs { display: grid; gap: 10px; }
/* .loc — это <label>, поэтому глобальные правила формы («label input»
   растягивает поле на всю ширину) надо явно перебить, иначе радиокнопка
   раздувается в блок во всю карточку. */
.loc {
  display: flex; gap: 12px; align-items: flex-start;
  margin: 0; padding: 14px 16px; border-radius: 14px; cursor: pointer;
  background: var(--card); border: 1px solid var(--line);
  color: var(--text); font-size: 18px; font-weight: 400;
  transition: border-color .15s, background .15s;
}
.loc:hover { border-color: var(--brand); }
.loc.is-active { border-color: var(--brand); background: var(--brand-bg); }
.loc input[type="radio"] {
  display: inline-block; width: auto; flex-shrink: 0;
  margin: 3px 0 0; padding: 0;
  border: 0; border-radius: 0; box-shadow: none; background: none;
  accent-color: var(--brand);
}
.loc__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.loc__body b { font-size: 17px; font-weight: 600; }
.loc__body small { font-size: 17px; color: var(--text-2); }
.loc__body small.muted { font-size: 16px; color: var(--muted); }
/* Бейдж «ближайшая» у авто-выбранного заведения на чекауте. */
.loc__near {
  display: inline-block; margin-left: 8px; vertical-align: middle;
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  color: var(--brand-2); background: var(--brand-bg);
  padding: 2px 7px; border-radius: 999px;
}

/* Кнопка «← Назад» на чекауте */
.co__back {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--muted); font-size: 18px; font-weight: 500;
  margin-bottom: 20px; padding: 8px 14px 8px 10px;
  border-radius: 12px; background: transparent; border: 1px solid var(--line);
  cursor: pointer; transition: all .15s;
}
.co__back:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-bg); }
.co__back svg { width: 16px; height: 16px; }

/* ═════════════════════════════════════════════════════════
   COOKIE BANNER
   ═════════════════════════════════════════════════════════ */
.cookie {
  position: fixed; left: 16px; right: 16px; bottom: 16px;
  z-index: 55;
  background: var(--card); border: 1px solid var(--line); border-radius: 16px;
  box-shadow: var(--shadow-lg);
  padding: 16px; opacity: 0; visibility: hidden; transform: translateY(20px);
  transition: opacity .3s, transform .3s, visibility .3s;
}
.cookie.open { opacity: 1; visibility: visible; transform: translateY(0); }
.cookie__inner { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center; padding: 0; }
.cookie__text { font-size: 18px; color: var(--text-2); line-height: 1.5; }
.cookie__text a { color: var(--brand); font-weight: 500; }
.cookie__text a:hover { text-decoration: underline; }
.cookie__actions { display: flex; gap: 10px; flex-shrink: 0; }

/* ═════════════════════════════════════════════════════════
   ARTICLE / LEGAL PAGES
   ═════════════════════════════════════════════════════════ */
.article { margin: 32px auto 64px; max-width: 820px; }
.article h1 { font-weight: 800; font-size: 51px; letter-spacing: -0.03em; margin: 0 0 24px; }
.article h2 { font-weight: 700; font-size: 25px; letter-spacing: -0.01em; margin: 40px 0 14px; }
.article h3 { font-weight: 700; font-size: 20px; margin: 24px 0 10px; }
.article p { color: var(--text); font-size: 17px; line-height: 1.65; margin: 0 0 12px; }
.article ul, .article ol { line-height: 1.75; font-size: 17px; padding-left: 22px; margin: 0 0 16px; }
.article ul li, .article ol li { margin-bottom: 6px; }
.article__meta { color: var(--muted); font-size: 17px; margin-bottom: 20px; }
.article table { border-collapse: collapse; width: 100%; margin: 16px 0; font-size: 18px; }
.article th, .article td { border: 1px solid var(--line); padding: 10px 14px; text-align: left; }
.article th { background: var(--brand-bg); font-weight: 600; }

/* ═════════════════════════════════════════════════════════
   MEDIA — низкое окно (ноутбуки 1366×768, 1536×864 и масштаб 125–150%)
   ═════════════════════════════════════════════════════════
   Там вьюпорт всего 640–730px, и шапка с рельсой в полный рост
   (≈195px) съедает почти треть экрана — каталог уходит за сгиб.
   Ужимаем именно шапку, а не типографику героя: текст должен
   оставаться читаемым. Высоту шапки скрипт меряет сам, поэтому
   отступ у body и --hdr-h подстраиваются автоматически. */
/* Порог 760px, а не 820: типовое окно 1700×817 попадало в компактный
   режим и шапка ужималась до 68px — на большом мониторе это читалось
   как «мелкий интерфейс». Теперь режим включается только на реально
   низких окнах (ноутбуки 1366×768 и масштаб 150%). */
/* Шапка в полный рост занимает ~260px. На большом мониторе это уместно,
   а на ноутбуке съедало бы треть экрана — поэтому на невысоких окнах
   ужимаем её примерно на четверть. Порог 900px: ниже этого начинаются
   ноутбучные разрешения. */
/* Шапка по пропорциям ninjasushi (верхний бар ~62px, иконки ~37px) — одинаково
   комфортная на ВСЕХ десктопных экранах, а не громоздкая базовая версия. */
@media (min-width: 721px) {
  /* Высота бара 62px не позволяет органам управления быть выше ~44px, поэтому
     общий размер на десктопе задаётся здесь. Раньше шапка жила на 44px, а
     чипы, поиск, селект и кнопки карточек — на базовых 52px, отчего шапка и
     каталог смотрелись в разном масштабе. Отдельных высот у них больше нет. */
  :root { --ctl: 44px; --ctl-lg: 80px; }
  .hdr-shell { padding-bottom: 6px; }
  .hdr { padding-top: 8px; }
  .hdr__bar { padding: 0 22px; }
  .hdr__logo { height: 44px; }
  .rail-wrap { padding-top: 6px; }
  /* Высоту рельсе задаёт --ctl-lg, поэтому у прокручиваемой полосы своих
     вертикальных полей нет: иначе они складывались бы с высотой карточки
     и категории обрезались по нижнему краю. */
  .rail { padding: 0 10px; }
  .rail__item { padding: 5px 16px; min-width: 92px; font-size: 14px; gap: 3px; }
  .rail__ic { width: 44px; height: 44px; }
}
/* Компактность контента (герой/страница товара) — по высоте окна. */
@media (min-width: 721px) and (max-height: 1200px) {
  .hero { padding: clamp(16px, 3.5vh, 34px) 0 clamp(16px, 3.5vh, 30px); }
  /* Крошки (‹ Назад / Меню / …) — меньше воздуха сверху и снизу на ноутбучных
     и мониторных окнах (базовые 28/24 великоваты для невысоких экранов). */
  .crumbs { padding: 14px 0 12px; }
  .pd { margin-bottom: 28px; gap: 40px; }
  .pd__name { font-size: 32px; }
  .pd__weight { margin-bottom: 10px; }
  .pd__block { margin-bottom: 10px; }
  .pd__desc { margin-bottom: 10px; }
  .co { padding-top: 24px; }
}

/* Очень низкие окна (нетбуки, невысокие/незакреплённые окна): ужимаем
   ТОЛЬКО контент карточки блюда (не шапку — она всегда остаётся комфортной,
   как на ninjasushi), чтобы кнопка «В корзину» помещалась на экран. */
@media (min-width: 721px) and (max-height: 900px) {
  .pd { margin-bottom: 16px; gap: 32px; }
  .pd__name { font-size: 28px; }
  .pd__weight { margin-bottom: 6px; }
  .pd__block { margin-bottom: 8px; }
  .pd__block h2 { margin-bottom: 8px; }
  .pd__buy { padding-top: 12px; }
  /* Состав компактнее (карточки ингредиентов чуть меньше) — на невысоких
     ноутбуках освобождает место под кнопку. Названия не обрезаем. */
  .ing { width: 96px; padding: 8px; }
  .ing__pic { margin-bottom: 6px; }
  .ing__name { font-size: 13px; }
}

/* 1366×768 — вьюпорт всего ~640px, самый тесный из ходовых десктопных.
   Дополнительно подрезаем крупный логотип-заголовок и отступы, иначе
   каталог не показывается совсем. */
@media (min-width: 721px) and (max-height: 700px) {
  .hero { padding: 18px 0 16px; }
  .hero__brand { font-size: clamp(44px, 4.4vw, 60px); }
  .hero__badges { margin-bottom: 12px; }
  .hero__cta { margin-bottom: 18px; }
  .hero__logo img { max-width: min(240px, 20vw); }
}

/* ═════════════════════════════════════════════════════════
   MEDIA — планшет
   ═════════════════════════════════════════════════════════ */
@media (max-width: 1100px) {
  /* Размеры героя тут не задаём: clamp() выше уже даёт плавную шкалу,
     а фиксированные значения ломали её ступенькой на границе. */
  .hero .wrap { gap: 32px; }
  .how__grid { grid-template-columns: 1fr; }
  .spots__grid { grid-template-columns: 1fr; }
  .ftr .wrap { grid-template-columns: 1fr 1fr 1fr; }
  .ftr .wrap > *:first-child { grid-column: 1 / -1; }
}

/* Шапка в один ряд не всегда влезает между мобильным (≤720) и десктопом:
   на планшетах/узких ноутах телефон и меню-ссылки не помещаются рядом с
   «Корзиной», и правый край карточки обрезался. Прячем телефон, а ниже —
   уводим навигацию в бургер (drawer со всеми ссылками уже есть). */
@media (min-width: 721px) and (max-width: 1000px) {
  .hdr__bar { justify-content: space-between; }
  .hdr__nav { display: none; }
  .hdr__icon--menu { display: inline-flex; }
}

/* ═════════════════════════════════════════════════════════
   MEDIA — мобилка
   ═════════════════════════════════════════════════════════ */
@media (max-width: 720px) {
  /* Корзина и бургер в баре — 44px, поэтому и общая высота здесь такая же:
     иначе избранное, которое теперь тоже живёт в баре, торчало бы выше них. */
  :root { --hdr-h: 60px; --ctl: 44px; --ctl-lg: 64px; }

  /* HEADER компактный */
  .hdr { padding-top: 8px; }
  .hdr__bar {
    gap: 8px; padding: 0 6px;
    border-radius: 14px;
    justify-content: space-between; align-items: center;
  }
  .hdr__logo { height: 30px; min-width: 0; }
  /* Логотип — картинка с фиксированной пропорцией: без разрешения ужаться
     он распирал карточку шапки, и правый край с закруглением уезжал за
     экран. Отсюда «пропадает правая граница». */
  .hdr__logo img { max-width: 100%; object-fit: contain; object-position: left; }
  /* Скрываем всё лишнее в шапке — доступно через шторку */
  .hdr__nav, .hdr__phone { display: none; }
  /* Избранное остаётся в баре и на мобильном — оно нужно так же часто, как
     корзина. Уведомления и профиль уходят в шторку. */
  .hdr__actions .hdr__icon:not(.hdr__icon--menu):not([data-modal="favs"]) { display: none; }
  .hdr__icon--menu { display: inline-flex; }
  /* Единый вид кнопок-действий на мобильном: корзина и бургер — одинаковые
     квадраты, ровно по центру бара (как на топовых сайтах). */
  .cart-btn, .hdr__icon--menu {
    width: 44px; height: 44px; min-width: 44px; padding: 0; font-size: 13px;
    border-radius: 12px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
  }
  /* Корзина переезжает вниз, поэтому из шапки убираем и её, и дубль в
     рельсе: две кнопки на одно действие только путают. */
  .cart-btn, .rail-cart { display: none; }

  .cart-bar {
    position: fixed; left: 12px; right: 12px; z-index: 46;
    /* Отступ снизу учитывает панель браузера на телефоне (safe-area). */
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    height: 56px; padding: 0 18px; border: 0; border-radius: 16px;
    background: var(--brand); color: #fff;
    font-family: inherit; font-size: 15px; cursor: pointer;
    box-shadow: var(--shadow-lg);
    /* Прячем сдвигом вниз, а не display: так появление можно анимировать. */
    transition: transform .26s cubic-bezier(.2, .8, .2, 1), opacity .2s;
  }
  .cart-bar.empty { transform: translateY(140%); opacity: 0; pointer-events: none; }
  .cart-bar__left { display: flex; align-items: center; gap: 6px; opacity: .92; }
  .cart-bar__left b { font-weight: 700; opacity: 1; }
  .cart-bar__cta {
    display: inline-flex; align-items: center; gap: 8px;
    font-weight: 700; padding-left: 12px; border-left: 1px solid rgba(255,255,255,.35);
  }
  .cart-bar__cta svg { width: 20px; height: 20px; }
  /* Чтобы полоса не накрывала последнюю карточку и подвал. */
  body { padding-bottom: 84px; }
  .cart-btn svg, .hdr__icon--menu svg { width: 20px; height: 20px; }

  /* Боковых полей у яруса нет: карточка категорий должна вставать ровно
     по краям верхнего бара, поиска и сетки — все три блока равняются
     по полям .wrap. Лишние 8px делали рельсу заметно уже соседей. */
  /* Меню — окно посередине, а не панель сбоку. Выезжающая слева шторка
     закрывала экран целиком и читалась как переход на другую страницу;
     окно в рамке остаётся поверх того же экрана, и возврат из него
     очевиден. Высоту ограничиваем — длинный список категорий прокручивается
     внутри окна, а не растягивает его за края экрана. */
  .drawer {
    top: 50%; left: 50%; right: auto; bottom: auto;
    width: min(360px, calc(100vw - 32px));
    max-height: calc(100vh - 64px);
    border-radius: 24px; padding: 18px;
    box-shadow: var(--shadow-lg);
    transform: translate(-50%, -50%) scale(.96);
    opacity: 0; visibility: hidden;
    transition: opacity .2s, transform .2s, visibility .2s;
  }
  .drawer.open { transform: translate(-50%, -50%) scale(1); opacity: 1; visibility: visible; }
  /* Список категорий прокручивается внутри окна, поэтому шапку с крестиком
     держим на месте: иначе закрыть окно можно только пролистав его обратно. */
  .drawer__head {
    position: sticky; top: -18px; z-index: 1;
    margin: -18px -18px 0; padding: 18px 18px 10px;
    background: var(--card);
  }
  /* Телефоны прижимались к низу панели во весь экран; в окне по размеру
     содержимого прижимать не к чему — идут сразу за списком. */
  .drawer__phone { margin-top: 0; }

  .rail-wrap { padding: 8px 0 0; }
  /* На телефоне рельса почти во всю ширину, поэтому равняем не по ней, а
     по верхнему бару: обёртке возвращаем её боковые поля, а привязку к
     краю рельсы отключаем — иначе поле разъезжается на всю ширину экрана. */
  #searchSlot { padding: 8px 0 0; }
  #searchSlot .wrap { padding: 0 16px; }
  .flt-search { width: 100%; max-width: none; }
  .flt-search input { font-size: 16px; }
  .search-dock { margin-bottom: 14px; }
  /* Нижний отступ оболочки задаёт просвет до поиска — держим его равным
     верхнему отступу рельсы, иначе третий блок стоит дальше двух других. */
  .hdr-shell { padding-bottom: 8px; }
  .rail { padding: 0 6px; gap: 2px; }
  .rail-card { border-radius: 14px; }
  /* Верхний ярус на мобилке не схлопывается, корзина и так на месте —
     плавающий дубль только налез бы на прокручиваемую рельсу. */
  .rail-cart { display: none !important; }
  .rail__item {
    min-width: 78px; padding: 4px 10px;
    font-size: 13px; gap: 2px;
  }
  .rail__ic { width: 30px; height: 30px; }

  /* HERO */
  /* На узком экране герой в одну колонку и заметно выше — привязка к
     высоте окна тут только мешала бы. */
  .hero { padding: 32px 0 24px; min-height: 0; display: block; }
  .hero .wrap { gap: 24px; grid-template-columns: 1fr; }
  .hero__badges { gap: 6px; margin-bottom: 16px; }
  .chip { padding: 6px 12px; font-size: 14px; }
  .hero__brand { font-size: 48px; margin-bottom: 8px; }
  .hero h1 { font-size: 18px; margin-bottom: 16px; line-height: 1.3; }
  .hero__desc { font-size: 14px; margin-bottom: 20px; }
  .hero__cta { margin-bottom: 24px; }
  .hero__cta .btn { flex: 1; padding: 12px 16px; font-size: 14px; }
  .hero__facts { grid-template-columns: 1fr 1fr; gap: 0 16px; }
  .hero__fact { padding: 10px 0; }
  .hero__fact b { font-size: 14px; }
  .hero__logo { order: -1; }
  .hero__logo img { max-width: 180px; }

  /* CATALOG */
  main { padding: 20px 0 60px; }
  /* Одна позиция в ряд, как в референсе: карточка во всю ширину читается
     лучше двух сжатых, и фото блюда видно целиком. */
  .grid { grid-template-columns: 1fr; gap: 12px; }
  .cat { margin-bottom: 40px; scroll-margin-top: calc(var(--hdr-h) + 90px); }
  .cat__title { font-size: 26px; }
  .cat__head { margin-bottom: 14px; }
  .cat__more { width: 100%; margin-top: 14px; font-size: 16px; padding: 0 16px; }
  .cat__more-all { display: none; }

  /* CARD. Размеры ниже когда-то выставлялись под две карточки в ряд, где на
     текст оставалась колонка ~180px, — оттого состав съезжал до 11px. Теперь
     карточка одна в ряд и вдвое шире, и жать шрифт больше незачем. */
  .item { border-radius: 14px; }
  .item__mark { width: 34%; max-width: 72px; }
  .item__body { padding: 14px 16px 16px; }
  .item__name { font-size: 19px; margin: 0 0 4px; line-height: 1.25; letter-spacing: -0.005em; }
  .item__meta { font-size: 15px; margin: 0 0 8px; }
  .item__desc { font-size: 15px; line-height: 1.4; -webkit-line-clamp: 2; margin: 0 0 14px; }
  .item__foot { gap: 8px; }
  .item__price { font-size: 26px; }
  .item__price .rub { font-size: 15px; }
  .add-btn { width: 44px; height: 44px; }
  .add-btn svg { width: 20px; height: 20px; }
  .qty { height: 44px; padding: 4px; gap: 3px; }
  .qty button svg { width: 16px; height: 16px; }
  .qty b { min-width: 22px; font-size: 16px; }
  .badge { font-size: 13px; padding: 4px 10px; }
  .item__badges { top: 6px; left: 6px; gap: 4px; }
  .item__fav { top: 6px; right: 6px; width: 30px; height: 30px; }
  .item__fav svg { width: 14px; height: 14px; }

  /* ШАПКА КАТЕГОРИИ */
  .cat-head { padding: 18px 0 0; }
  .cat-head__back { margin-bottom: 8px; font-size: 15px; }
  .cat-head__count { margin-bottom: 20px; font-size: 15px; }

  /* СТРАНИЦА БЛЮДА */
  /* Хлебные крошки в четыре звена на 360px переносятся в две строки и
     дублируют кнопку «Назад» — оставляем только её. */
  .crumbs { padding: 16px 0 14px; gap: 8px; font-size: 15px; }
  .crumbs > a:not(.crumbs__back), .crumbs > span, .crumbs > b { display: none; }
  .crumbs__back { padding: 8px 14px 8px 10px; margin-right: 0; }

  /* Стрелки на телефоне остаются вместе со свайпом: жест знают не все,
     а промахнуться по кнопке сложнее, чем угадать движение. Полупрозрачны,
     чтобы не закрывать фото, и прижаты к самым краям. */
  .pd-nav {
    width: 42px; height: 42px; border-radius: var(--r-sm);
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  }
  .pd-nav svg { width: 20px; height: 20px; }
  .pd-nav--prev { left: 8px; }
  .pd-nav--next { right: 8px; }

  .pd { gap: 22px; margin-bottom: 40px; }
  .pd__photo { border-radius: 18px; }
  .pd__name { font-size: 27px; line-height: 1.12; }
  .pd__weight { font-size: 16px; margin-bottom: 18px; }
  .pd__desc { font-size: 15px; margin-bottom: 22px; }
  .pd__block { margin-bottom: 22px; }
  /* Стрелки прокрутки состава на тачскрине не нужны — там свайп */
  .pd__nav { display: none; }

  .ing { width: 104px; padding: 8px; }
  .ing__name { font-size: 14px; }
  .ing__tip { max-width: min(240px, 70vw); font-size: 14px; padding: 8px 12px; }

  .allergen-list li { font-size: 15px; padding: 7px 14px; }
  .nut__cell { padding: 12px 8px; }
  .nut__cell b { font-size: 18px; }
  .note { font-size: 14px; }

  /* Цена и кнопка в одной строке (как на ninjasushi): цена слева, кнопка
     занимает остаток, сердечко справа. Разделитель убран — блок теперь вверху. */
  .pd__buy { gap: 12px; padding-top: 0; border-top: 0; }
  .pd__price { font-size: 30px; width: auto; }
  .pd__buy .btn { padding: 15px 22px; font-size: 16px; }
  .pd__fav { width: var(--ctl); height: var(--ctl); }
  .pd__fav svg { width: 20px; height: 20px; }
  .qty--lg { height: 48px; flex: 1; justify-content: center; }

  /* ВЫБОР ЗАВЕДЕНИЯ НА ЧЕКАУТЕ */
  .loc { padding: 12px 14px; gap: 10px; }
  .loc__body b { font-size: 14px; }
  .loc__body small { font-size: 14px; }
  .loc__body small.muted { font-size: 14px; }

  /* HOME секции */
  .section-title { font-size: 24px; }
  .how, .spots, .faq { padding: 20px 0; margin-bottom: 24px; }
  .how__step, .spot { padding: 20px; }
  .spot__name { font-size: 18px; }
  .spot ul li b { min-width: 68px; font-size: 15px; }
  .spot__actions .btn { flex: 1; padding: 13px 16px; font-size: 15px; }

  /* CART */
  .cart { width: 100%; }
  .cart__head { padding: 16px 16px 12px; }
  .cart__body { padding: 4px 16px; }
  .cart__foot { padding: 12px 16px 14px; }
  .cart__progress { padding: 10px 16px 4px; }
  .cart__upsell { padding: 12px 16px; }
  .cart__upsell-row { margin: 0 -16px; padding: 0 16px 2px; }
  .upsell { padding: 9px 12px; }
  .upsell__name { font-size: 14px; }
  /* Узкая шторка: цена уезжает под название, счётчик остаётся справа */
  .cart-line {
    grid-template-columns: 28px 72px minmax(0, 1fr) auto;
    gap: 10px; padding: 10px 10px 10px 4px;
  }
  .cart-line__photo { width: 72px; height: 72px; }
  .cart-line__del { width: 28px; height: 28px; }
  .cart-line__del svg { width: 12px; height: 12px; }
  .cart-line__name { font-size: 15px; }
  .cart-line__meta { font-size: 13px; }
  .cart-line__price { grid-column: 3; grid-row: 2; font-size: 14px; }
  .cart-line__qty { grid-column: 4; grid-row: 1 / span 2; }
  .cart-line__body { grid-column: 3; grid-row: 1; }
  .cart-line__del { grid-column: 1; grid-row: 1 / span 2; }
  .cart-line__photo { grid-column: 2; grid-row: 1 / span 2; }
  /* Сводка на чекауте на узком экране ужимается до размеров корзины —
     иначе крупные плитки не помещаются в свёрнутую панель. */
  .summary .cart-line {
    grid-template-columns: 28px 52px minmax(0, 1fr) auto;
    gap: 10px; padding: 10px 10px 10px 4px;
  }
  .summary .cart-line__photo { width: 52px; height: 52px; }
  .summary .cart-line__del { width: 28px; height: 28px; }
  .summary .cart-line__del svg { width: 12px; height: 12px; }
  .summary .cart-line__name { font-size: 14px; }
  .summary .cart-line__meta { font-size: 14px; }
  .summary .cart-line__price { font-size: 14px; }

  /* У статичной плитки (страница статуса) нет ни крестика, ни счётчика —
     возвращаем ей три колонки в одну строку. */
  .cart-line--static { grid-template-columns: 44px minmax(0, 1fr) auto; }
  .cart-line--static .cart-line__photo { grid-column: 1; grid-row: 1; width: 44px; height: 44px; }
  .cart-line--static .cart-line__body  { grid-column: 2; grid-row: 1; }
  .cart-line--static .cart-line__price { grid-column: 3; grid-row: 1; }
  .fulf { gap: 6px; }
  .fulf__opt { padding: 10px 12px; }
  .fulf__label b { font-size: 15px; }
  .fulf__label small { font-size: 14px; }

  /* CHECKOUT */
  .co { padding-top: 24px; padding-bottom: 60px; }
  .co h1 { font-size: 26px; }
  .co__sub { margin-bottom: 20px; font-size: 14px; }
  .co__grid { gap: 16px; }
  .card { padding: 20px; margin-bottom: 12px; border-radius: 16px; }
  .card h3 { font-size: 16px; margin-bottom: 16px; }
  label { margin-bottom: 12px; }
  label input, label textarea, label select { padding: 12px 14px; font-size: 15px; }

  /* Мобильный summary — ПОД формой (кнопка «Оформить» внизу, после заполнения),
     свёрнут по умолчанию, разворачивается тапом по заголовку. */
  .co__grid > aside { order: 1; }
  .summary { padding: 16px 18px; border-radius: 16px; }
  .summary h3 { display: none; }
  .co__mobile-toggle {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; padding: 0; cursor: pointer;
    background: none; border: 0; margin: 0;
    font-family: inherit; font-size: 15px; font-weight: 700;
  }
  .co__mobile-toggle .chev { transition: transform .18s; color: var(--muted); }
  .co__mobile-toggle .chev svg { width: 16px; height: 16px; }
  .summary.expanded .co__mobile-toggle .chev { transform: rotate(180deg); }
  .summary #coItems, .summary .co__totals {
    max-height: 0; overflow: hidden; opacity: 0;
    transition: max-height .25s, opacity .2s, margin .25s;
    margin-top: 0;
  }
  .summary.expanded #coItems, .summary.expanded .co__totals {
    max-height: 1000px; opacity: 1; margin-top: 12px;
  }

  /* Status */
  .st { padding: 24px 0 60px; }
  .st h1 { font-size: 26px; }
  .st h1 .id { display: block; font-size: 14px; margin: 6px 0 0; }
  .big-status { font-size: 22px; }
  .steps { grid-auto-flow: row; grid-auto-columns: unset; grid-template-columns: 1fr 1fr; gap: 6px; }
  .step { padding: 12px 10px; font-size: 14px; }

  /* FOOTER */
  .ftr { padding: 40px 0 24px; margin-top: 40px; }
  /* Две колонки, но только пока в них помещается телефон: он не переносится
     (см. .ftr a[href^="tel:"]) и занимает 168px, а на 360px и ýже колонка
     столько не даёт — подвал становился шире экрана и правый столбец срезало. */
  .ftr .wrap { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 24px; }
  /* Номер на пункт мельче остального списка: при 18px он требует 168px, и на
     390px вторая колонка уже не помещалась — подвал вытягивался вдвое. */
  .ftr a[href^="tel:"] { font-size: 17px; }
  .ftr .wrap > *:first-child { grid-column: 1 / -1; }
  .ftr__lead { font-size: 15px; }
  .ftr h4 { margin-bottom: 12px; }
  .ftr ul { gap: 8px; }

  /* Article */
  .article { padding-top: 24px; padding-bottom: 60px; }
  .article h1 { font-size: 26px; }
  .article h2 { font-size: 18px; margin-top: 28px; }
  .article p, .article ul, .article ol { font-size: 14px; }
  .article table { font-size: 15px; }
  .article th, .article td { padding: 8px 10px; }

  /* Modal */
  .modal { padding: 8px; }
  .modal__box { padding: 22px 20px; border-radius: 18px; }
  .modal__box h2 { font-size: 20px; }


  /* Cookie */
  .cookie { left: 8px; right: 8px; bottom: 8px; padding: 14px; }
  .cookie__inner { grid-template-columns: 1fr; gap: 12px; }
  .cookie__text { font-size: 15px; }
  .cookie__actions .btn { flex: 1; padding: 13px 16px; font-size: 15px; }
}

/* ═════════════════════════════════════════════════════════
   ВХОДНОЙ ВОПРОС: доставка или зал
   ═════════════════════════════════════════════════════════ */
.gate {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center; padding: 20px;
  background: rgba(31, 24, 16, .55); backdrop-filter: blur(4px);
}
.gate__card {
  width: min(560px, 100%); max-height: 100%; overflow-y: auto;
  background: var(--card); border-radius: 24px; padding: 36px 32px 32px;
  box-shadow: 0 24px 70px rgba(31, 24, 16, .28); text-align: center;
}
.gate__logo { width: 120px; margin: 0 auto 20px; }
.gate__title { font-size: 30px; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 8px; }
.gate__sub { color: var(--muted); font-size: 17px; margin: 0 0 24px; }
.gate__opts { display: grid; gap: 12px; }
/* Кнопки в колонку, а не в ряд: подписи под ними разной длины, и в ряду
   одна карточка вытягивалась бы выше другой. */
.gate__opt {
  display: grid; grid-template-columns: 48px 1fr; gap: 4px 16px;
  align-items: center; text-align: left;
  padding: 18px 20px; border-radius: 18px; cursor: pointer;
  background: var(--bg); border: 1px solid var(--line);
  transition: border-color .15s, background .15s;
}
.gate__opt b { grid-column: 2; font-size: 19px; font-weight: 700; }
.gate__opt .muted { grid-column: 2; font-size: 15px; line-height: 1.35; }
.gate__ico {
  grid-row: 1 / span 2; width: 48px; height: 48px; border-radius: 14px;
  background: var(--brand-bg); color: var(--brand);
  display: inline-flex; align-items: center; justify-content: center;
}
.gate__ico svg { width: 24px; height: 24px; }
.gate__opt:hover { border-color: var(--brand); background: var(--brand-bg); }

/* Режим «в зале — только меню»: гость уже за столом, заказ принимает
   официант. Каталог, состав и цены остаются, всё для оформления убираем. */
.gn-menu-only .cart-btn,
.gn-menu-only .rail-cart,
.gn-menu-only .cart-bar,
.gn-menu-only .cart,
.gn-menu-only .add-btn,
.gn-menu-only .qty,
.gn-menu-only .pd__buy > div:not(.pd__price),
.gn-menu-only .cart__upsell { display: none !important; }
/* «Показать ещё» и ссылки первого экрана остаются: гость за столом всё так
   же листает меню целиком, просто не собирает заказ сам. */
body.gn-menu-only { padding-bottom: 0; }

@media (max-width: 720px) {
  .gate__card { padding: 26px 18px 22px; border-radius: 20px; }
  .gate__logo { width: 92px; margin-bottom: 14px; }
  .gate__title { font-size: 24px; }
  .gate__sub { font-size: 15px; margin-bottom: 18px; }
  .gate__opt { padding: 14px 16px; grid-template-columns: 42px 1fr; gap: 2px 12px; }
  .gate__ico { width: 42px; height: 42px; border-radius: 12px; }
  .gate__opt b { font-size: 17px; }
  .gate__opt .muted { font-size: 14px; }
}

/* ─── Полоса баннеров ───
   Листается самой прокруткой: scroll-snap ловит и палец на телефоне, и
   колесо на десктопе, поэтому скрипту остаются только точки. Высота задана
   не пропорцией, а clamp-ом: пропорция на широком экране растянула бы
   пустой прямоугольник на пол-страницы. */
.banners { margin: 18px 0 26px; }
/* Герой держит ровно один экран. Раз над ним теперь полоса баннеров,
   вычитаем её из его высоты — сгиб остаётся там же, где был. */
.banners ~ .hero { min-height: calc(100vh - var(--shell-h, 181px) - var(--banner-h, 0px) - 64px); }
.banners__track {
  /* position нужен точкам: по нему offsetLeft плиток считается от самой
     полосы и сравнивается со scrollLeft напрямую. */
  position: relative;
  display: flex; gap: 14px;
  overflow-x: auto; scrollbar-width: none;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
}
.banners__track::-webkit-scrollbar { display: none; }
.banner {
  flex: 0 0 100%; scroll-snap-align: start;
  height: var(--banner-h);
  border-radius: var(--r-lg);
  background: var(--panel);
  border: 1px solid var(--line);
}
.banners__dots { display: flex; justify-content: center; gap: 8px; margin-top: 12px; }
.banners__dot {
  width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%;
  background: var(--line); cursor: pointer;
  transition: background .15s, transform .15s;
}
.banners__dot:hover { background: var(--muted); }
.banners__dot.is-active { background: var(--brand); transform: scale(1.15); }

@media (max-width: 720px) {
  .banners { margin: 12px 0 20px; }
  .banners__track { gap: 10px; }
  .banner { border-radius: var(--r); }
}

/* ─── Код выдачи и оценка заказа ───
   Код называют на кассе, поэтому он крупный: гость показывает экран,
   не вчитываясь. Оценку спрашиваем только у доставленного заказа. */
.pin-card {
  margin-top: 14px; padding: 14px 18px; text-align: center;
  border: 1px solid var(--brand); border-radius: var(--r);
  background: var(--brand-bg);
}
.pin-card__lbl { color: var(--brand-2); font-size: 14px; }
.pin-card__val {
  font-size: 38px; font-weight: 800; letter-spacing: .22em;
  color: var(--brand-2); font-variant-numeric: tabular-nums;
}
.rate { display: grid; gap: 12px; }
.rate__stars { display: flex; gap: 6px; }
.rate__stars button {
  border: 0; background: none; cursor: pointer; padding: 0;
  font-size: 34px; line-height: 1; color: var(--gold);
}
.rate textarea {
  width: 100%; padding: 12px 14px; font: inherit; resize: vertical;
  border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--card);
}
.rate textarea:focus { outline: none; border-color: var(--brand); }