@charset "utf-8";
/* ═══════════════════════════════════════════════════════════════════════════
   ВЕРАНДА · витрина гостя. Вёрстка.

   🔴 Ни одного цвета, шрифта и «магического» отступа в этом файле нет —
   всё берётся из css/токены.css (шаг 2). Появился hex — значит один факт
   начал жить в двух местах. Проверяется поиском: в файле не должно быть
   ни решётки с шестью знаками, ни слова rgb.

   Мобильный — основной макет. Всё, что ниже, написано под 390 px;
   десктоп приезжает двумя медиа-запросами в конце и только расширяет.

   Три правила расстановки, взятые из DESIGN.md §4 и проверяемые машиной:
     1. расстояние задаёт контейнер через gap, а не соседи через margin;
     2. у детей одной сетки одинаковая ширина и одинаковое верхнее поле;
     3. внутри карточки один шаг — --v-gap-2, и ни одного исключения.
   ═══════════════════════════════════════════════════════════════════════════ */

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

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

body{
  margin:0;
  background:var(--v-paper);
  color:var(--v-ink);
  font:400 var(--v-fs)/var(--v-lh) var(--v-font-text);
  /* страховка от вылета вбок, а не лечение вёрстки: вёрстка чинится там,
     где сломалась, а это — ремень безопасности */
  overflow-x:hidden;
  position:relative;
  min-height:100vh;
}

/* Зерно бумаги. Одна строка data-URI из токенов: ни файла, ни запроса наружу.
   Это тактильность печатного меню, а не текстура ради текстуры. */
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  opacity:var(--v-grain-op); mix-blend-mode:multiply;
  background-image:var(--v-grain);
}
body>*{ position:relative; z-index:1; }

img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; }
h1,h2,h3,h4{
  margin:0; font-family:var(--v-font-h); font-weight:600;
  color:var(--v-brand); line-height:var(--v-lh-h);
}
p{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }
figure{ margin:0; }
button{ font:inherit; color:inherit; }

/* Длинные строки — адреса, названия вин, ссылки — рвутся, а не выталкивают
   страницу вбок. Château "Grape Dance", Saperavi, Russia на 390 без этого
   даёт горизонтальную прокрутку. */
p,li,h1,h2,h3,h4,dd,dt,span,a,figcaption{ overflow-wrap:anywhere; }

/* Ссылка для клавиатуры. Держит цель нажатия и вне экрана: правило «ниже 48
   нет ничего» действует и на то, что видно только с клавиатуры. */
.skip{
  position:absolute; left:var(--v-pad); top:calc(-1 * var(--v-9));
  z-index:9; display:flex; align-items:center;
  min-height:var(--v-tap); min-width:200px; padding:0 var(--v-4);
  background:var(--v-brand); color:var(--v-paper-2); text-decoration:none;
  font:600 var(--v-fs-2)/1 var(--v-font-ui);
}
.skip:focus{ top:var(--v-2); }

:where(a,button,select,input,summary):focus-visible{
  outline:var(--v-focus-w) solid var(--v-focus);
  outline-offset:var(--v-focus-off);
}
.on-dark :where(a,button):focus-visible,
.on-green :where(a,button):focus-visible{ outline-color:var(--v-focus-light); }

/* ── полоса содержания и раздел ────────────────────────────────────────── */
.wrap{ width:100%; max-width:var(--v-maxw); margin:0 auto; padding:0 var(--v-pad); }
.sec{ padding:var(--v-sec) 0; }
.sec>.wrap{ display:grid; gap:var(--v-7); align-content:start; }
/* кнопка живёт в своей обёртке: у неё есть внутренние поля, у соседей по
   колонке их нет, и в одну сетку с ними её ставить нельзя */
.act{ display:grid; justify-items:start; gap:var(--v-3); }
.act-2{ display:grid; gap:var(--v-3); }
/* Стопка. Блок с внутренними полями (панель, врезка, записка) никогда не
   стоит прямым соседом блока без полей: у соседей по одной сетке верхнее
   поле обязано быть одинаковым. Поэтому панели живут в своей стопке. */
.stack{ display:grid; gap:var(--v-gap); align-content:start; }

.paper-2{ background:var(--v-paper-2); border-top:var(--v-bw) solid var(--v-line); border-bottom:var(--v-bw) solid var(--v-line); }
.on-dark{ background:var(--v-dark); color:var(--v-dark-ink); }
.on-dark h1,.on-dark h2,.on-dark h3{ color:var(--v-dark-ink); }
.on-green{ background:var(--v-green); color:var(--v-green-ink); }
.on-green h1,.on-green h2,.on-green h3{ color:var(--v-green-ink); }

/* ── кикер: их приём с меню-досок, мелкие прописные с разрядкой ─────────── */
.kicker{
  font:600 var(--v-fs-cap)/1.2 var(--v-font-ui);
  letter-spacing:var(--v-track); text-transform:uppercase;
  color:var(--v-gold-ink);
  display:flex; align-items:center; gap:var(--v-3);
}
.kicker::after{ content:""; flex:1; height:var(--v-bw); background:var(--v-gold); opacity:.45; }
.on-dark .kicker{ color:var(--v-dark-ink-2); }
.on-dark .kicker::after{ background:var(--v-dark-ink-2); }
.on-green .kicker{ color:var(--v-green-ink-2); }
.on-green .kicker::after{ background:var(--v-green-ink-2); }

.sec-head{ display:grid; gap:var(--v-3); align-content:start; }
.sec-head h2{ font-size:var(--v-fs-d2); }
.sub{ max-width:var(--v-maxc); color:var(--v-ink-2); font-size:var(--v-fs); }
.on-dark .sub{ color:var(--v-dark-ink-2); }
.on-green .sub{ color:var(--v-green-ink-2); }

.cap{
  font:500 var(--v-fs-cap)/1.45 var(--v-font-ui);
  letter-spacing:var(--v-track-2); text-transform:uppercase; color:var(--v-ink-2);
}

/* ── кнопки. Ни одной ниже 48: телефон, улица, мокрые руки с пляжа ──────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--v-2);
  min-height:var(--v-tap-2); padding:var(--v-3) var(--v-5);
  font:600 var(--v-fs-2)/1.2 var(--v-font-ui); letter-spacing:.02em;
  text-align:center; text-decoration:none; cursor:pointer;
  border:var(--v-bw) solid transparent; border-radius:var(--v-r);
  transition:background var(--v-t), color var(--v-t), border-color var(--v-t);
}
.btn-main{ background:var(--v-brand); color:var(--v-paper-2); }
.btn-main:hover{ background:var(--v-brand-2); }
.btn-line{ background:transparent; color:var(--v-brand); border-color:var(--v-brand); }
.btn-line:hover{ background:var(--v-brand); color:var(--v-paper-2); }
.btn-light{ background:var(--v-paper-2); color:var(--v-dark); }
.btn-light:hover{ background:var(--v-paper-3); }
.btn-green{ background:var(--v-green-ink); color:var(--v-green); }
.btn-green:hover{ background:var(--v-green-ink-2); }
.btn-wide{ width:100%; }
.ic{ width:22px; height:22px; flex:none; }

/* ── шапка ──────────────────────────────────────────────────────────────
   Знак крупно: 216 px при исходнике 420 — растяжения нет ни на одной
   ширине, а «логотип маленький» было отдельной претензией по трём
   вариантам главной из шести.                                            */
.masthead{ background:var(--v-paper); }
.mast-top{
  display:flex; align-items:center; justify-content:space-between; gap:var(--v-4);
  min-height:var(--v-tap); border-bottom:var(--v-bw) solid var(--v-line);
}
.mast-place{
  font:600 var(--v-fs-cap)/1.2 var(--v-font-ui);
  letter-spacing:var(--v-track-2); text-transform:uppercase;
  color:var(--v-ink-2); white-space:nowrap;
}
.mast-wa{
  display:inline-flex; align-items:center; gap:var(--v-2);
  min-height:var(--v-tap); padding-left:var(--v-3);
  font:600 var(--v-fs-cap)/1 var(--v-font-ui); letter-spacing:var(--v-track-2);
  text-transform:uppercase; color:var(--v-brand); text-decoration:none;
}
.mast-logo{ display:block; padding:var(--v-5) 0 var(--v-4); }
.mast-logo img{ width:216px; margin:0 auto; }
.nav-wrap{ width:100%; max-width:var(--v-maxw); margin:0 auto; }
.mast-nav{ border-top:var(--v-bw) solid var(--v-line); }
.mast-nav ul{ display:grid; grid-template-columns:repeat(3,1fr); }
.mast-nav a{
  display:flex; align-items:center; justify-content:center;
  min-height:var(--v-tap); text-decoration:none;
  font:600 var(--v-fs-cap)/1.2 var(--v-font-ui);
  letter-spacing:.10em; text-transform:uppercase; color:var(--v-brand);
  border-right:var(--v-bw) solid var(--v-line);
  border-bottom:var(--v-bw) solid var(--v-line);
}
.mast-nav li:nth-child(3n) a{ border-right:0; }
.mast-nav li:nth-child(n+4) a{ border-bottom:0; }
.mast-nav a:hover{ background:var(--v-paper-3); }
.mast-nav a[aria-current="page"]{ background:var(--v-paper-3); color:var(--v-brand); }

/* ── гирлянда: приём под нишу, а не со склада. Гирлянды висят в каждом их
      зале и на каждом фасаде — видно на кадрах Раваи, Карона и Ката Хилл.
      preserveAspectRatio="slice": при "none" узкий экран сжимал бы лампы
      в капли.                                                             */
.garland-row{ width:100%; max-width:var(--v-maxw); margin:0 auto; padding:0 var(--v-pad); }
.garland{ display:block; width:100%; height:46px; color:var(--v-gold); }

/* ── первый экран ───────────────────────────────────────────────────────
   Кадр стоит сразу под заголовком и на 390 попадает в первый экран
   целиком: на одном из прежних вариантов первое фото начиналось на
   y=698, и гость три секунды видел только текст.                          */
.hero{ padding:var(--v-6) 0 0; }
.hero-in{ display:grid; gap:var(--v-5); }
.hero-head{ display:grid; gap:var(--v-3); align-content:start; }
.hero h1{ font-size:var(--v-fs-d1); letter-spacing:-.015em; }
.hero h1 em{ font-style:italic; color:var(--v-gold-ink); font-weight:500; display:block; }
/* 🔴 Потолок кадра: исходник зала 600×800, шире 600 он не показывается
   нигде. Полноэкранного фона на витрине нет ни одного (DESIGN.md §3). */
.hero-media{ display:grid; gap:var(--v-2); align-content:start; max-width:600px; margin-inline:auto; }
.shot{ overflow:hidden; background:var(--v-paper-3); border:var(--v-bw) solid var(--v-line); }
.shot img{ width:100%; height:100%; object-fit:cover; }
.ar-dish{ aspect-ratio:var(--v-ar-dish); }
.ar-point{ aspect-ratio:var(--v-ar-point); }
.ar-board{ aspect-ratio:var(--v-ar-board); }
/* Исходник зала 600×800. Кадр в первом экране режется под 5:4, чтобы на 390
   он попадал до сгиба целиком, вместе с подписью; точка кадрирования 40%
   сверху — по потолку с папоротниками, из-за которого сеть и «Веранда». */
.ar-hero{ aspect-ratio:5/4; }
.ar-hero img{ object-position:50% 40%; }
.hero-body{ display:grid; gap:var(--v-5); align-content:start; }
.lead{ font-size:var(--v-fs-lead); }
.lead::first-letter{
  float:left; font-family:var(--v-font-h); font-weight:600; color:var(--v-gold-ink);
  font-size:4.05em; line-height:.8; padding:6px 12px 0 0;
}
.hero-tel{ border-top:2px solid var(--v-gold); display:grid; }
.hero-tel a{
  font:700 21px/1.3 var(--v-font-ui); font-variant-numeric:tabular-nums;
  color:var(--v-brand); text-decoration:none;
  display:flex; align-items:center; min-height:var(--v-tap);
}
.hero-tel p{ font-size:var(--v-fs-2); color:var(--v-ink-2); }

/* ── индекс районов ─────────────────────────────────────────────────────
   Три числа — счёт по полю area в данные/сеть.json: Карон 2, Ката 3,
   Раваи 2. Не оценка и не округление.                                    */
.rayony{
  display:grid; grid-template-columns:repeat(3,1fr); gap:var(--v-bw);
  background:var(--v-line); border:var(--v-bw) solid var(--v-line);
}
.rayon{
  background:var(--v-paper-2); padding:var(--v-4) var(--v-2);
  display:grid; gap:var(--v-1); justify-items:center; text-align:center;
}
.ray-n{
  font:600 var(--v-fs-cap)/1.2 var(--v-font-ui);
  letter-spacing:var(--v-track); text-transform:uppercase; color:var(--v-brand);
}
.ray-c{ font:500 var(--v-fs-cap)/1.2 var(--v-font-ui); color:var(--v-ink-2); }

/* ── карточка точки ─────────────────────────────────────────────────────
   Один шаг внутри карточки — --v-gap-2 — и ни одного исключения.
   Прежняя карточка держала 10 px между строками и 30 перед кнопкой, и
   машина считала это разнобоем шесть раз подряд.                          */
.grid-points{ display:grid; grid-template-columns:1fr; gap:var(--v-gap); }
/* 🔴 Верхнее поле у тела карточки задаёт row-gap, а не padding-top. Это то же
   правило «расстояние задаёт контейнер», просто доведённое до конца: у всех
   прямых детей карточки верхнее поле одинаковое и равно нулю, а воздух между
   ними один на всю карточку. Машина считает разнобоем именно разные верхние
   поля у соседей по сетке — и была бы права: пока поле живёт у ребёнка, его
   в следующей карточке поправят на другое. */
.point{
  display:grid; grid-template-rows:auto 1fr auto; row-gap:var(--v-5);
  background:var(--v-paper); border:var(--v-bw) solid var(--v-line);
}
.paper-2 .point{ background:var(--v-paper-2); }
.point>.shot{ border:0; border-bottom:var(--v-bw) solid var(--v-line); }
.point .body{ padding:0 var(--v-5); display:grid; gap:var(--v-gap-2); align-content:start; }
.point-head{ display:grid; gap:var(--v-1); align-content:start; }
.point .num{
  display:flex; align-items:center; gap:var(--v-2);
  font:700 var(--v-fs-cap)/1.2 var(--v-font-ui);
  letter-spacing:var(--v-track); color:var(--v-gold-ink);
  font-variant-numeric:tabular-nums;
}
.point .num i{ font-style:normal; color:var(--v-ink-2); letter-spacing:var(--v-track-2); text-transform:uppercase; }
.point h3{ font-size:var(--v-fs-d3); }
.point .addr{ font-size:var(--v-fs-2); line-height:var(--v-lh-2); color:var(--v-ink-2); }
.point .blurb{ font-size:var(--v-fs-2); line-height:var(--v-lh); }

/* метки. Высота ниже цели нажатия намеренно: это не кнопки, а подписи */
.marks{ display:flex; flex-wrap:wrap; gap:var(--v-2); }
.mark{
  font:600 var(--v-fs-cap)/1 var(--v-font-ui); letter-spacing:.04em;
  padding:var(--v-2) var(--v-3);
  border:var(--v-bw) solid var(--v-line); background:var(--v-paper-2);
  color:var(--v-ink-2); white-space:nowrap;
}
.mark-open{ color:var(--v-brand); border-color:var(--v-gold); }
.mark-closed{ color:var(--v-red); border-color:var(--v-red); background:var(--v-red-tint); }
/* 🔴 «Уточняется» — своя роль цвета, и она не красная: неизвестностей на
   витрине столько, что красный перестал бы значить «стоп» (DESIGN.md §5) */
.mark-ask{ color:var(--v-ask-ink); border-color:var(--v-ask-line); background:var(--v-ask-bg); }
.mark-stop{ color:var(--v-red); border-color:var(--v-red); background:var(--v-red-tint); }
.mark-new{ color:var(--v-gold-ink); border-color:var(--v-gold); }

/* «Маршрут» и «Меню точки» — подвал карточки во всю ширину. Было 92×25 при
   пороге 44, стало 350×56: промахнуться нечем. И кнопки соседних карточек
   встают на одну линию сами, без вспомогательных полей. */
.point-foot{ display:grid; }
.row-link{
  display:flex; align-items:center; justify-content:space-between; gap:var(--v-3);
  min-height:var(--v-tap-2); padding:var(--v-2) var(--v-5);
  border-top:var(--v-bw) solid var(--v-line);
  background:var(--v-paper-2); color:var(--v-brand); text-decoration:none;
  font:600 var(--v-fs-cap)/1.2 var(--v-font-ui);
  letter-spacing:var(--v-track-2); text-transform:uppercase;
}
.point .row-link{ background:var(--v-paper-3); }
.row-link .arw{ width:20px; height:20px; flex:none; color:var(--v-gold-ink); }
.row-link:hover{ background:var(--v-brand); color:var(--v-paper-2); }
.row-link:hover .arw{ color:var(--v-paper-2); }
.row-link[aria-disabled="true"]{
  background:var(--v-ask-bg); color:var(--v-ask-ink); cursor:default;
}

/* ── врезка «мы не знаем» ───────────────────────────────────────────────
   Золото на тёплой подложке плюс иконка. Восьмая клетка сетки точек — она
   же: при семи карточках пустая клетка держит смысл, а не зияет.         */
.ask{
  background:var(--v-paper-3); border:var(--v-bw) solid var(--v-line);
  display:grid;
}
.ask-in{ padding:var(--v-5); display:grid; gap:var(--v-gap-2); align-content:center; }
.ask-in h3{ font-size:var(--v-fs-d4); }
.ask-in p{ font-size:var(--v-fs-2); line-height:var(--v-lh); color:var(--v-ink-2); }
.ask-ic{ width:30px; height:30px; color:var(--v-gold); }

/* ── две кухни ──────────────────────────────────────────────────────────
   Их собственная меловая доска: борщ на одной строке с пад таем. Это
   доказывает за один взгляд то, чего абзац про «сочетание кухонь» не
   докажет никогда.                                                        */
.board-block{ display:grid; gap:var(--v-2); justify-items:center; }
.board{ width:100%; max-width:900px; }
.two-cols{ display:grid; grid-template-columns:1fr; gap:var(--v-gap); }
.col-card{
  background:var(--v-paper-2); border:var(--v-bw) solid var(--v-line);
  padding:var(--v-5); display:grid; gap:var(--v-gap-2); align-content:start;
}
.col-card h3{ font-size:var(--v-fs-d4); }
.col-card p{ font-size:var(--v-fs-2); color:var(--v-ink-2); }

/* ── блюда ──────────────────────────────────────────────────────────────
   Сетка одна, шаг один, кадры порезаны под 4:5 заранее. Раздел «Меню» на
   прежних вариантах ругали сильнее всех: «картинки разного размера с
   разными отступами, ничего не центрируется».                             */
.grid-dish{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--v-4); }
.dish{ display:grid; gap:var(--v-2); align-content:start; }
/* 🔴 Потолок показа = ширина исходника, и ни пикселем больше. Кадры блюд
   порезаны под 4:5 в 560 px, кадр морозильной витрины Фабрики — самый мелкий
   исходник отбора, 467 px. Растяжение выше исходника и есть та «шакальность»,
   за которую забраковали два варианта главной из шести. */
/* width:100% обязателен рядом с margin-inline:auto: без него авто-поля
   съедают ширину элемента сетки до нуля, и кадр пропадает совсем. */
.dish .shot{ width:100%; max-width:560px; margin-inline:auto; }
.dish .shot-narrow{ max-width:467px; }
/* Одиночный кадр на странице точки: исходник 780×520 (порезан шагом 5). */
.media{ display:grid; }
.media>.shot{ width:100%; max-width:780px; margin-inline:auto; }
.dish figcaption{ font-size:var(--v-fs-3); line-height:var(--v-lh-2); color:var(--v-ink-2); }

/* ── числовая плитка ────────────────────────────────────────────────────  */
.tiles{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--v-bw); background:var(--v-line); border:var(--v-bw) solid var(--v-line); }
.tile{ background:var(--v-paper-2); padding:var(--v-4); display:grid; gap:var(--v-1); }
.tile b{
  font:600 28px/1 var(--v-font-ui); color:var(--v-brand);
  font-variant-numeric:tabular-nums;
}
.tile span{ font:500 var(--v-fs-cap)/1.3 var(--v-font-ui); color:var(--v-ink-2); }
.on-dark .tile{ background:var(--v-dark-2); }
.on-dark .tiles{ background:var(--v-dark-line); border-color:var(--v-dark-line); }
.on-dark .tile b{ color:var(--v-dark-ink); }
.on-dark .tile span{ color:var(--v-dark-ink-2); }

/* ── шаги доставки ──────────────────────────────────────────────────────  */
.steps{ display:grid; gap:var(--v-4); }
.step{
  background:var(--v-green-2); border:var(--v-bw) solid var(--v-green-line);
  padding:var(--v-5); display:grid; gap:var(--v-gap-2); align-content:start;
}
.step b{ font:600 var(--v-fs-cap)/1 var(--v-font-ui); letter-spacing:var(--v-track); text-transform:uppercase; color:var(--v-green-ink-2); }
.step h3{ font-size:var(--v-fs-d4); }
.step p{ font-size:var(--v-fs-2); color:var(--v-green-ink-2); }
.note-green{
  border:var(--v-bw) solid var(--v-green-line-2); padding:var(--v-5);
  display:grid; gap:var(--v-gap-2); align-content:start;
}
.note-green p{ font-size:var(--v-fs-2); color:var(--v-green-ink-2); }

/* ── подвал ─────────────────────────────────────────────────────────────  */
.foot{ background:var(--v-dark); color:var(--v-dark-ink); padding:var(--v-8) 0 var(--v-7); }
.foot>.wrap{ display:grid; gap:var(--v-6); }
.foot-logo img{ width:200px; }
.foot-t{ display:grid; gap:var(--v-3); }
.foot-t p{ color:var(--v-dark-ink-2); font-size:var(--v-fs-2); }
.foot-links{ display:grid; }
.foot-links a{
  display:flex; align-items:center; justify-content:space-between; gap:var(--v-3);
  min-height:var(--v-tap); text-decoration:none; color:var(--v-dark-ink);
  border-bottom:var(--v-bw) solid var(--v-dark-line);
  font:600 var(--v-fs-cap)/1.2 var(--v-font-ui); letter-spacing:var(--v-track-2); text-transform:uppercase;
}
.foot-links a:hover{ color:var(--v-dark-ink-2); }
.foot-links a i{ font-style:normal; color:var(--v-dark-ink-2); letter-spacing:0; text-transform:none; font-family:var(--v-font-ui); font-variant-numeric:tabular-nums; }
.foot-fine{ font-size:var(--v-fs-3); color:var(--v-dark-ink-2); }

/* ═══ ЭКРАН ТОЧКИ ═══════════════════════════════════════════════════════ */
.crumbs{ display:grid; justify-items:start; }
.back{
  display:inline-flex; align-items:center; gap:var(--v-2);
  min-height:var(--v-tap); padding-right:var(--v-3);
  font:600 var(--v-fs-cap)/1 var(--v-font-ui); letter-spacing:var(--v-track-2);
  text-transform:uppercase; color:var(--v-ink-2); text-decoration:none;
}
.back:hover{ color:var(--v-brand); }
.page-head{ display:grid; gap:var(--v-3); align-content:start; }
.page-head h1{ font-size:var(--v-fs-d2); }
.page-head .where{
  font:500 var(--v-fs-cap)/1.3 var(--v-font-ui);
  letter-spacing:var(--v-track-2); text-transform:uppercase; color:var(--v-ink-2);
}
.panel{
  background:var(--v-paper-2); border:var(--v-bw) solid var(--v-line);
  padding:var(--v-5); display:grid; gap:var(--v-gap-2); align-content:start;
}
.panel h2,.panel h3{ font-size:var(--v-fs-d4); }
.panel p{ font-size:var(--v-fs-2); line-height:var(--v-lh); }
.panel .quiet{ color:var(--v-ink-2); }
.panel-ask{ background:var(--v-ask-bg); }
.hours-line{
  font:600 26px/1.2 var(--v-font-ui); color:var(--v-brand);
  font-variant-numeric:tabular-nums; letter-spacing:.02em;
}
.dl{ display:grid; gap:var(--v-gap-2); }
.dl>div{ display:grid; gap:var(--v-1); }
.dl dt{ font:600 var(--v-fs-cap)/1.2 var(--v-font-ui); letter-spacing:var(--v-track-2); text-transform:uppercase; color:var(--v-ink-2); }
.dl dd{ margin:0; font-size:var(--v-fs-2); line-height:var(--v-lh-2); }
.stop-list{ display:flex; flex-wrap:wrap; gap:var(--v-2); }

/* ═══ ЭКРАН МЕНЮ ════════════════════════════════════════════════════════ */
.menu-bar{
  position:sticky; top:0; z-index:5;
  background:var(--v-paper-2); border-bottom:var(--v-bw) solid var(--v-line);
  padding:var(--v-3) 0;
}
.menu-bar .wrap{ display:grid; gap:var(--v-3); }
.field{ display:grid; gap:var(--v-1); }
.field label{ font:600 var(--v-fs-cap)/1.2 var(--v-font-ui); letter-spacing:var(--v-track-2); text-transform:uppercase; color:var(--v-ink-2); }
.field input,.field select{
  width:100%; min-height:var(--v-tap); padding:0 var(--v-3);
  font:400 var(--v-fs-2)/1.2 var(--v-font-ui); color:var(--v-ink);
  background:var(--v-paper-2); border:var(--v-bw) solid var(--v-line-2);
  border-radius:var(--v-r); -webkit-appearance:none; appearance:none;
}
.field select{ padding-right:var(--v-7); }
/* Уголок выпадающего списка рисуется рамкой, а не картинкой: цвет тогда
   приходит из токенов, а не из hex внутри data-URI. */
.sel{ position:relative; display:grid; }
.sel::after{
  content:""; position:absolute; right:var(--v-4); top:50%;
  width:9px; height:9px; margin-top:-7px; pointer-events:none;
  border-right:2px solid var(--v-gold-ink); border-bottom:2px solid var(--v-gold-ink);
  transform:rotate(45deg);
}
.menu-cats{ display:grid; gap:var(--v-7); align-content:start; }
.menu-cat{ display:grid; gap:var(--v-4); scroll-margin-top:var(--v-9); }
.menu-cat h2{
  font-size:var(--v-fs-d4); font-family:var(--v-font-ui); font-weight:600;
  letter-spacing:var(--v-track-2); text-transform:uppercase;
  padding-bottom:var(--v-2); border-bottom:2px solid var(--v-gold);
}
.menu-list{ display:grid; }
.menu-item{
  display:grid; grid-template-columns:1fr auto; gap:var(--v-3);
  padding:var(--v-4) 0; border-bottom:var(--v-bw) solid var(--v-line);
  align-items:start;
}
.mi-main{ display:grid; gap:var(--v-2); align-content:start; min-width:0; }
.mi-name{ font-size:var(--v-fs-2); line-height:var(--v-lh-2); font-weight:500; }
.mi-descr{ font-size:var(--v-fs-3); line-height:var(--v-lh-2); color:var(--v-ink-2); }
.mi-side{ display:grid; gap:var(--v-2); justify-items:end; align-content:start; text-align:right; }
.mi-price{
  font:600 var(--v-fs-lead)/1.2 var(--v-font-ui); color:var(--v-brand);
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.mi-note{ font:400 var(--v-fs-3)/1.3 var(--v-font-ui); color:var(--v-ink-3); }
.mi-vars{ display:flex; flex-wrap:wrap; gap:var(--v-2); justify-content:flex-end; }
.mi-var{
  font:500 var(--v-fs-cap)/1 var(--v-font-ui); font-variant-numeric:tabular-nums;
  padding:var(--v-2) var(--v-3); border:var(--v-bw) solid var(--v-line);
  background:var(--v-paper-2); color:var(--v-ink-2); white-space:nowrap;
}
.mi-var b{ color:var(--v-brand); }
.menu-item.stop .mi-name{ color:var(--v-ink-3); }
.mi-shot{ width:88px; }
.menu-item.with-shot{ grid-template-columns:88px 1fr auto; }

/* ═══ ЭКРАН АДРЕСОВ ═════════════════════════════════════════════════════ */
.area-h{
  font-size:var(--v-fs-d4); font-family:var(--v-font-ui); font-weight:600;
  letter-spacing:var(--v-track-2); text-transform:uppercase;
  padding-bottom:var(--v-2); border-bottom:2px solid var(--v-gold);
}
.addr-list{ display:grid; gap:var(--v-gap); }
.addr-card{
  background:var(--v-paper-2); border:var(--v-bw) solid var(--v-line);
  display:grid; grid-template-rows:1fr auto; row-gap:var(--v-5); padding-top:var(--v-5);
}
.addr-card .body{ padding:0 var(--v-5); display:grid; gap:var(--v-gap-2); align-content:start; }
.addr-card h3{ font-size:var(--v-fs-d4); }
.addr-card p{ font-size:var(--v-fs-2); line-height:var(--v-lh-2); }
.addr-card .quiet{ color:var(--v-ink-2); }
.maps-name{
  font:500 var(--v-fs-3)/1.3 var(--v-font-ui); color:var(--v-ink-3);
}

/* ═══ КОРЗИНА, ОФОРМЛЕНИЕ, ЗАКАЗ ════════════════════════════════════════
   Шаг 12. Три экрана и одна кнопка, которая живёт в меню.

   Правило целей нажатия здесь строже, чем везде: гость жмёт «плюс» стоя, на
   ходу, часто одной рукой. Ни одной цели ниже --v-tap (48), у полос — 56.   */

/* 🔴 Скрытое скрыто, чем бы оно ни было. У витрины половина блоков — сетки
   (`display:grid` от класса), а правило браузера для [hidden] слабее любого
   класса: без этой строки «спрятанный» адрес доставки остаётся на экране.  */
[hidden]{ display:none !important; }

/* Узкая колонка для страниц-форм: у детей одной полосы ширина обязана быть
   одинаковой, а поле ввода во всю полосу в 1240 px — это не форма. */
.sec-narrow>.wrap{ max-width:800px; }

/* ── кнопка «в корзину» в строке меню ──────────────────────────────────────
   Значок, а не слово: строка меню и так подписана именем блюда, а слово
   «в корзину» в 354 строках — это 354 лишних слова в столбце цен. Как только
   позиция в корзине, значок сменяется числом: гость видит, сколько взял, не
   уходя из списка. */
.ic-s{ width:20px; height:20px; flex:none; }
.add{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--v-2);
  min-width:var(--v-tap); min-height:var(--v-tap); padding:0 var(--v-3);
  background:var(--v-paper-2); color:var(--v-brand);
  border:var(--v-bw) solid var(--v-line-2); border-radius:var(--v-r); cursor:pointer;
  transition:background var(--v-t), color var(--v-t), border-color var(--v-t);
}
.add:hover{ background:var(--v-brand); color:var(--v-paper-2); border-color:var(--v-brand); }
.add.in{ background:var(--v-brand); color:var(--v-paper-2); border-color:var(--v-brand); }
.add-n{ font:600 var(--v-fs-2)/1 var(--v-font-ui); font-variant-numeric:tabular-nums; }

/* Объёмы — те же кнопки: нажатие на объём и есть выбор объёма. Сервер его не
   угадывает, и лишнего шага «выбрать, потом добавить» здесь нет. */
.add-vars{ display:grid; gap:var(--v-2); }
.add-var{
  display:grid; grid-template-columns:1fr auto auto; gap:var(--v-3);
  align-items:center; text-align:left; padding:0 var(--v-3);
}
.add-var-l{ font:500 var(--v-fs-cap)/1.2 var(--v-font-ui); }
.add-var-p{ font:600 var(--v-fs-cap)/1 var(--v-font-ui); font-variant-numeric:tabular-nums; }
.add-var .add-state{ display:inline-flex; align-items:center; justify-content:center; min-width:20px; }
.mi-side{ gap:var(--v-3); }

/* ── полоса корзины внизу экрана ───────────────────────────────────────────
   Меню длиной в 34 000 px: если корзина живёт только наверху, гость до неё
   не вернётся. Полоса лежит вне #экран, поэтому смена маршрута её не стирает. */
#полоса-корзины{ position:fixed; left:0; right:0; bottom:0; z-index:6; }
body.с-полосой{ padding-bottom:var(--v-9); }
.cart-bar{
  background:var(--v-brand); color:var(--v-paper-2);
  border-top:2px solid var(--v-gold);
}
.cart-bar-in{
  display:grid; grid-template-columns:auto 1fr auto; gap:var(--v-4);
  align-items:center; min-height:var(--v-tap-2);
  padding-top:var(--v-3); padding-bottom:var(--v-3); text-decoration:none;
}
.cart-bar-ic{ position:relative; display:inline-flex; }
.cart-n{
  position:absolute; top:-6px; right:-10px; min-width:22px; height:22px;
  display:inline-flex; align-items:center; justify-content:center; padding:0 var(--v-1);
  background:var(--v-gold); color:var(--v-paper-2);
  font:600 var(--v-fs-cap)/1 var(--v-font-ui); font-variant-numeric:tabular-nums;
}
.cart-bar-t{ display:grid; gap:var(--v-1); min-width:0; }
.cart-bar-t b{ font:600 var(--v-fs-2)/1.2 var(--v-font-ui); }
.cart-bar-t i{ font-style:normal; font:400 var(--v-fs-3)/1.2 var(--v-font-ui); color:var(--v-paper-3); }
.cart-bar-go{
  display:inline-flex; align-items:center; gap:var(--v-2);
  font:600 var(--v-fs-cap)/1 var(--v-font-ui);
  letter-spacing:var(--v-track-2); text-transform:uppercase;
}
.cart-bar-go .arw{ width:20px; height:20px; flex:none; }
.cart-bar :where(a,button):focus-visible{ outline-color:var(--v-focus-light); }
/* Вопрос «заменить корзину» занимает ту же полосу: это тот же разговор, и
   уводить ради него на отдельный экран — потерять место в меню. */
.cart-bar-ask{ background:var(--v-paper-3); color:var(--v-ink); border-top-color:var(--v-line-2); }
.cart-bar-ask .wrap{ display:grid; gap:var(--v-3); padding-top:var(--v-4); padding-bottom:var(--v-4); }
.cart-bar-ask p{ font-size:var(--v-fs-2); line-height:var(--v-lh-2); }
.cart-bar-acts{ display:grid; gap:var(--v-2); }

/* ── экран корзины ──────────────────────────────────────────────────────── */
.cart-blocks{ display:grid; gap:var(--v-7); }
.cart-block{ display:grid; gap:var(--v-4); align-content:start; }
.cart-block-h{ display:grid; gap:var(--v-1); padding-bottom:var(--v-2); border-bottom:2px solid var(--v-gold); }
.cart-block-h h2{
  font-size:var(--v-fs-d4); font-family:var(--v-font-ui); font-weight:600;
  letter-spacing:var(--v-track-2); text-transform:uppercase;
}
.cart-block-h .quiet{ font-size:var(--v-fs-3); color:var(--v-ink-2); }
.cart-lines{ display:grid; }
/* Четыре области вместо четырёх колонок: на 390 название и цена стоят в
   строку, а счётчик с «убрать» — под ними. Одна сетка на обе ширины. */
.cart-line{
  display:grid; grid-template-columns:1fr auto;
  grid-template-areas:"t p" "q d";
  gap:var(--v-3); align-items:start;
  padding:var(--v-4) 0; border-bottom:var(--v-bw) solid var(--v-line);
}
.cart-line-t{ grid-area:t; display:grid; gap:var(--v-1); min-width:0; }
.cart-line-p{ grid-area:p; display:grid; gap:var(--v-1); justify-items:end; text-align:right; }
.cart-qty{ grid-area:q; justify-self:start; }
.cart-del{ grid-area:d; justify-self:end; }
.cart-name{ font-size:var(--v-fs-2); line-height:var(--v-lh-2); font-weight:500; }
.cart-sub{ font:400 var(--v-fs-3)/1.3 var(--v-font-ui); color:var(--v-ink-2); }
.cart-bad{ font:500 var(--v-fs-3)/1.3 var(--v-font-ui); color:var(--v-red); }
.cart-line-bad{ background:var(--v-red-tint); }
.cart-price{
  font:600 var(--v-fs-lead)/1.2 var(--v-font-ui); color:var(--v-brand);
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.cart-qty{
  display:inline-grid; grid-auto-flow:column; align-items:center;
  background:var(--v-paper-2); border:var(--v-bw) solid var(--v-line-2);
}
.qty-b{
  width:var(--v-tap); height:var(--v-tap); display:inline-flex;
  align-items:center; justify-content:center;
  background:transparent; border:0; color:var(--v-brand); cursor:pointer;
}
.qty-b:hover{ background:var(--v-paper-3); }
.qty-n{
  min-width:var(--v-6); text-align:center;
  font:600 var(--v-fs-2)/1 var(--v-font-ui); font-variant-numeric:tabular-nums;
}
.cart-del{
  display:inline-flex; align-items:center; gap:var(--v-2);
  min-height:var(--v-tap); padding:0 var(--v-3);
  background:transparent; border:0; cursor:pointer; color:var(--v-ink-2);
  font:500 var(--v-fs-cap)/1 var(--v-font-ui);
}
.cart-del:hover{ color:var(--v-red); }

/* Суммы стоят колонка в колонку: цифры табличные, иначе в столбце «итого»
   единица уже двойки и строка едет. */
/* Суммы стоят своей стопкой, а не вперемешку с абзацами панели: у соседей
   по одной сетке верхнее поле обязано быть одинаковым, а у итоговой строки
   оно своё — над ней черта. */
.cart-sums{ display:grid; gap:var(--v-3); }
.cart-sum-line{
  display:flex; align-items:baseline; justify-content:space-between; gap:var(--v-4);
  font-size:var(--v-fs-2);
}
.cart-sum-line b{ font:600 var(--v-fs-2)/1.2 var(--v-font-ui); font-variant-numeric:tabular-nums; white-space:nowrap; }
.cart-sum-big{ padding-top:var(--v-3); border-top:var(--v-bw) solid var(--v-line); }
.cart-sum-big span{ font-family:var(--v-font-h); font-size:var(--v-fs-d4); color:var(--v-brand); }
.cart-sum-big i{
  display:block; font-style:normal; color:var(--v-ink-2);
  font:400 var(--v-fs-3)/1.3 var(--v-font-ui); letter-spacing:0;
}
.cart-sum-big b{ font-size:var(--v-fs-d4); color:var(--v-brand); }
.cart-block>.cart-sum-line{ padding-top:var(--v-2); }
.cart-total{ gap:var(--v-3); }

/* ── форма оформления ───────────────────────────────────────────────────── */
.form{ display:grid; gap:var(--v-6); }
.fset{ margin:0; padding:0; border:0; display:grid; gap:var(--v-4); }
.fset legend{
  padding:0; margin-bottom:var(--v-3);
  font:600 var(--v-fs-cap)/1.2 var(--v-font-ui);
  letter-spacing:var(--v-track); text-transform:uppercase; color:var(--v-ink-2);
}
.field textarea{
  width:100%; min-height:var(--v-9); padding:var(--v-3);
  font:400 var(--v-fs-2)/var(--v-lh-2) var(--v-font-ui); color:var(--v-ink);
  background:var(--v-paper-2); border:var(--v-bw) solid var(--v-line-2);
  border-radius:var(--v-r); resize:vertical;
}
.field-note{ font:400 var(--v-fs-3)/1.4 var(--v-font-ui); color:var(--v-ink-3); }
.field-err{ font:500 var(--v-fs-3)/1.4 var(--v-font-ui); color:var(--v-red); }
.field input.bad,.field textarea.bad{ border-color:var(--v-red); border-width:2px; }

/* Выбор способа получения — карточка целиком, а не точка радио в 16 px:
   на телефоне попасть в точку невозможно, а в карточку невозможно не попасть. */
.picks{ display:grid; gap:var(--v-3); }
.pick{ display:grid; cursor:pointer; }
.pick input{ position:absolute; opacity:0; width:1px; height:1px; }
.pick-in{
  display:grid; gap:var(--v-1); align-content:center;
  min-height:var(--v-tap-2); padding:var(--v-3) var(--v-4);
  background:var(--v-paper-2); border:var(--v-bw) solid var(--v-line-2);
}
.pick-in b{ font:600 var(--v-fs-2)/1.2 var(--v-font-ui); }
.pick-in i{ font-style:normal; font:400 var(--v-fs-3)/1.3 var(--v-font-ui); color:var(--v-ink-2); }
.pick input:checked+.pick-in{ background:var(--v-brand); color:var(--v-paper-2); border-color:var(--v-brand); }
.pick input:checked+.pick-in i{ color:var(--v-paper-3); }
.pick input:focus-visible+.pick-in{ outline:var(--v-focus-w) solid var(--v-focus); outline-offset:var(--v-focus-off); }
.pick-off .pick-in{ background:var(--v-paper-3); color:var(--v-ink-3); border-style:dashed; cursor:default; }
.code-row{ display:grid; gap:var(--v-3); align-items:end; }
.panel-bad{ background:var(--v-red-tint); border-color:var(--v-red); }
.panel-ok{ background:var(--v-paper-2); border-color:var(--v-gold); border-left-width:3px; }
.nums{ display:grid; gap:var(--v-2); }
.num-line{
  display:flex; align-items:baseline; gap:var(--v-3);
  font:400 var(--v-fs-2)/1.2 var(--v-font-ui);
}
.num-line b{
  font:600 var(--v-fs-d4)/1.1 var(--v-font-ui); color:var(--v-brand);
  font-variant-numeric:tabular-nums; letter-spacing:.02em;
}
.num-line span{ color:var(--v-ink-2); font-size:var(--v-fs-3); }
.btn.ждём{ opacity:.6; cursor:progress; }

/* ── страница заказа ────────────────────────────────────────────────────── */
.track-list{ display:grid; gap:var(--v-7); }
.track-card{ display:grid; gap:var(--v-5); align-content:start; }
.track-head{ display:grid; gap:var(--v-3); }
.live-dot{
  display:inline-block; width:9px; height:9px; margin-right:var(--v-2);
  background:var(--v-gold); vertical-align:middle;
}
/* Лестница, а не полоска: гостю важно не «сколько процентов», а что именно
   сейчас происходит и во сколько это случилось. */
.track-steps{ display:grid; }
.track-step{
  display:grid; grid-template-columns:auto 1fr auto; gap:var(--v-3);
  align-items:start; padding:var(--v-3) 0;
  border-bottom:var(--v-bw) solid var(--v-line);
}
.track-dot{
  width:26px; height:26px; margin-top:2px;
  display:inline-flex; align-items:center; justify-content:center;
  border:2px solid var(--v-line-2); background:var(--v-paper-2); color:var(--v-paper-2);
}
.track-t{ display:grid; gap:var(--v-1); min-width:0; }
.track-t b{ font:600 var(--v-fs-2)/1.3 var(--v-font-ui); }
.track-t i{ font-style:normal; font:400 var(--v-fs-3)/1.4 var(--v-font-ui); color:var(--v-ink-2); }
.track-when{
  font:500 var(--v-fs-3)/1.4 var(--v-font-ui); color:var(--v-ink-2);
  font-variant-numeric:tabular-nums;
}
.track-was .track-dot{ background:var(--v-gold); border-color:var(--v-gold); }
.track-now .track-dot{ background:var(--v-brand); border-color:var(--v-brand); }
.track-now .track-t b{ color:var(--v-brand); font-size:var(--v-fs-lead); }
.track-next .track-t b{ color:var(--v-ink-3); font-weight:500; }
.track-body{ display:grid; gap:var(--v-gap); }
.track-items{ display:grid; gap:var(--v-2); }
.track-items li{
  display:grid; grid-template-columns:1fr auto auto; gap:var(--v-3);
  align-items:baseline; font-size:var(--v-fs-2);
}
.ti-n i{ font-style:normal; color:var(--v-ink-2); font-size:var(--v-fs-3); }
.ti-q,.ti-p{ font:500 var(--v-fs-2)/1.2 var(--v-font-ui); font-variant-numeric:tabular-nums; white-space:nowrap; }
.ti-p{ font-weight:600; color:var(--v-brand); }
.code-big{
  font:600 var(--v-fs-d2)/1.1 var(--v-font-ui); color:var(--v-brand);
  letter-spacing:var(--v-track-2); font-variant-numeric:tabular-nums;
}

/* ═══ СЛУЖЕБНОЕ ═════════════════════════════════════════════════════════ */
/* Полоса «данные из снимка». Появляется только когда движок не ответил:
   лучше сказать это вслух, чем показать вчерашнюю цену как сегодняшнюю. */
.snapshot-bar{ background:var(--v-ask-bg); border-bottom:var(--v-bw) solid var(--v-ask-line); }
.snapshot-bar .wrap{ padding-top:var(--v-3); padding-bottom:var(--v-3); }
.snapshot-bar p{ font:500 var(--v-fs-3)/1.4 var(--v-font-ui); color:var(--v-ask-ink); }
.center-note{ display:grid; gap:var(--v-4); justify-items:start; padding:var(--v-8) 0; }
.center-note h1{ font-size:var(--v-fs-d2); }
.center-note p{ font-size:var(--v-fs-lead); color:var(--v-ink-2); max-width:var(--v-maxc); }

/* ═══ ВТОРОЙ ПЛАН НА ТЁМНОМ И НА ЗЕЛЕНИ ═════════════════════════════════
   Стоит в конце нарочно: перекрывает второй план бумаги везде, где сюжет
   тёмный или зелёный. Чернила бумаги на тёмном дают 2.3 при пороге 4.5 —
   это машина и поймала. --v-dark-ink-2 даёт 7.4 на тёмном, --v-green-ink-2
   — 6.1 на зелени (DESIGN.md §2, там же таблица пар).                      */
.on-dark .cap,.on-dark .quiet,.on-dark figcaption,.on-dark .maps-name,
.on-dark .mi-note,.on-dark .mi-descr,.on-dark .back,
.on-dark .page-head .where{ color:var(--v-dark-ink-2); }
/* 🔴 «Назад» на тёмном сюжете Фабрики: чернила второго плана бумаги дают на
   нём 2.34 при пороге 4.5 — это поймала машина. --v-dark-ink-2 даёт 7.4. */
.on-dark .back:hover{ color:var(--v-dark-ink); }
.on-green .cap,.on-green .quiet,.on-green figcaption,.on-green .maps-name{ color:var(--v-green-ink-2); }

/* ═══ ДЕСКТОП ═══════════════════════════════════════════════════════════
   Производный от мобильного: шире полоса, больше колонок — и ни одного
   решения, которого нет на 390.                                          */
@media (min-width:760px){
  .mast-logo img{ width:300px; }
  .mast-nav ul{ grid-template-columns:repeat(6,1fr); }
  .mast-nav li:nth-child(3n) a{ border-right:var(--v-bw) solid var(--v-line); }
  .mast-nav li:last-child a{ border-right:0; }
  .mast-nav li:nth-child(n+4) a{ border-bottom:0; }
  .mast-nav a{ border-bottom:0; }

  /* Заголовок и текст в левой колонке, кадр — в правой на обе строки.
     Ни один из трёх блоков не растягивается на две колонки: у соседей по
     одной сетке ширина обязана быть одинаковой. */
  .hero-in{ grid-template-columns:1fr 1fr; align-items:start; gap:var(--v-6); }
  .hero-head{ grid-column:1; grid-row:1; }
  .hero-body{ grid-column:1; grid-row:2; }
  .hero-media{ grid-column:2; grid-row:1 / span 2; margin-inline:0; }

  .grid-points{ grid-template-columns:repeat(2,1fr); }
  .grid-dish{ grid-template-columns:repeat(3,1fr); }
  .two-cols{ grid-template-columns:repeat(2,1fr); }
  .tiles{ grid-template-columns:repeat(4,1fr); }
  .steps{ grid-template-columns:repeat(3,1fr); }
  .addr-list{ grid-template-columns:repeat(2,1fr); }
  .menu-bar .wrap{ grid-template-columns:1fr 1fr; align-items:end; }
  .menu-list{ grid-template-columns:repeat(2,1fr); column-gap:var(--v-7); }
  .foot>.wrap{ grid-template-columns:1fr 1fr; }
  .act-2{ grid-auto-flow:column; justify-content:start; }
  .act-2 .btn{ min-width:260px; }

  /* Корзина и оформление на широком экране. Строка корзины разворачивается в
     одну линию: название, цена, счётчик, «убрать» — те же четыре области, что
     на 390, только в ряд. */
  .cart-line{
    grid-template-columns:1fr auto auto auto;
    grid-template-areas:"t p q d";
    align-items:center; gap:var(--v-5);
  }
  .cart-line-p{ min-width:120px; }
  .picks{ grid-auto-flow:column; grid-auto-columns:1fr; }
  .code-row{ grid-template-columns:1fr auto; }
  .cart-bar-acts{ grid-auto-flow:column; justify-content:start; }
  .cart-bar-acts .btn{ min-width:260px; width:auto; }
  .track-body{ grid-template-columns:repeat(2,1fr); align-items:start; }

  /* На широком экране цена и кнопка встают в одну строку: места хватает, а
     строка меню становится ниже — на 354 позициях это восемь экранов
     прокрутки разницы. На 390 они остаются друг под другом: там дороже
     ширина имени блюда, а не высота строки. */
  .mi-side{ grid-template-columns:auto auto; align-items:center; justify-content:end; }
  .mi-side .mi-price{ grid-column:1; grid-row:1; }
  .mi-side .add{ grid-column:2; grid-row:1; }
  .mi-side .mi-note,.mi-side .add-vars{ grid-column:1 / -1; }
}

@media (min-width:1080px){
  .grid-points{ grid-template-columns:repeat(3,1fr); }
  .grid-dish{ grid-template-columns:repeat(6,1fr); }
  .addr-list{ grid-template-columns:repeat(3,1fr); }
  /* 🔴 Одиночный кадр не выходит из колонки: исходников крупнее 1080 px
     по короткой стороне у сети нет ни одного (DESIGN.md §3). */
  .hero-media{ max-width:var(--v-shot-maxw); }
  .page-head h1{ font-size:var(--v-fs-d1); }
}