/* ============================================================
   АМУР БУРГЕР — Нальчик
   Уголь + янтарь. Nunito несёт голос, JetBrains Mono — измерения.
   ============================================================ */

:root{
  /* ground */
  --ink:      #0B0B0C;
  --ink-2:    #141417;
  --ink-3:    #1B1B1F;
  --line:     #26262B;
  --line-hi:  #34343A;

  /* text */
  --paper:    #F7F4EF;
  --paper-2:  #A8A29A;

  /* accent */
  --amber:      #F2A03C;
  --amber-hi:   #FFB65C;
  --amber-deep: #C97A16;
  --amber-wash: rgba(242,160,60,.10);

  /* signal */
  --chili:      #E8543D;
  --chili-wash: rgba(232,84,61,.12);

  --r:   14px;
  --r-s: 10px;

  --ease: cubic-bezier(.16,1,.3,1);
  --pad: clamp(20px, 5vw, 72px);
  --maxw: 1280px;

  color-scheme: dark;
}

*,*::before,*::after{ box-sizing:border-box }
[hidden]{ display:none !important }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:88px }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto } }

body{
  margin:0;
  background:var(--ink);
  color:var(--paper);
  font:400 17px/1.6 Nunito, system-ui, sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
/* overflow-anchor: без него смена переполнения body при открытии панели
   запускает привязку прокрутки, и страница под затемнением уезжает */
body.is-locked{ overflow:hidden; overflow-anchor:none }
body.has-cart{ padding-bottom:104px }

/* height:auto обязателен — иначе атрибут height в разметке
   перебивает aspect-ratio и картинка тянется на всю высоту оригинала */
img{ max-width:100%; height:auto; display:block }
a{ color:inherit; text-decoration:none }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer }
h1,h2,h3{ margin:0; font-weight:900; letter-spacing:-.035em; line-height:.98; text-wrap:balance }
p{ margin:0 }
/* последнее слово абзаца не остаётся одно на строке («помидор», «входит.») */
p, dd, li{ text-wrap:pretty }

/* ---- browser surfaces ---- */
::selection{ background:var(--amber); color:var(--ink) }
:focus-visible{ outline:2px solid var(--amber); outline-offset:3px; border-radius:4px }
:where(input,textarea){ caret-color:var(--amber) }
*{ scrollbar-color:var(--line-hi) transparent; scrollbar-width:thin }
*::-webkit-scrollbar{ width:10px; height:10px }
*::-webkit-scrollbar-track{ background:transparent }
*::-webkit-scrollbar-thumb{ background:var(--line-hi); border-radius:99px; border:3px solid var(--ink) }
*::-webkit-scrollbar-thumb:hover{ background:var(--amber-deep) }

.skip{
  position:fixed; left:16px; top:-100px; z-index:200;
  background:var(--amber); color:var(--ink); font-weight:800;
  padding:12px 20px; border-radius:var(--r-s); transition:top .2s var(--ease);
}
.skip:focus{ top:16px }

/* ---- icons ---- */
.ic{
  width:22px; height:22px; flex:none;
  fill:none; stroke:currentColor; stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round;
}
.ic--brand{ stroke:none; fill:currentColor }
#i-star path, .rating__stars .ic, .rev__st .ic{ fill:currentColor; stroke:none }

/* ---- price numerals ---- */
.num{ font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1 }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  --bh:46px;
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  min-height:var(--bh); padding:0 22px;
  border-radius:99px; font-weight:800; font-size:15px; letter-spacing:-.01em;
  white-space:nowrap; cursor:pointer;
  transition:background .18s var(--ease), color .18s var(--ease),
             border-color .18s var(--ease), transform .18s var(--ease);
}
.btn:active{ transform:translateY(1px) }
.btn--lg{ --bh:56px; padding:0 30px; font-size:17px }
.btn--wide{ width:100% }

.btn--amber{ background:var(--amber); color:var(--ink) }
.btn--amber:hover{ background:var(--amber-hi) }

.btn--ink{ background:var(--ink); color:var(--paper) }
.btn--ink:hover{ background:var(--ink-3) }

.btn--ghost{ border:1.5px solid var(--line-hi); color:var(--paper) }
.btn--ghost:hover{ border-color:var(--amber); color:var(--amber) }

.btn[disabled],.btn[aria-disabled="true"]{
  opacity:.4; pointer-events:none; cursor:not-allowed;
}

.iconbtn{
  display:grid; place-items:center; width:44px; height:44px;
  border-radius:50%; color:var(--paper-2);
  transition:background .18s var(--ease), color .18s var(--ease);
}
.iconbtn:hover{ background:var(--ink-3); color:var(--paper) }

/* ============================================================
   HEADER
   ============================================================ */
.hdr{
  position:sticky; top:0; z-index:90;
  background:rgba(11,11,12,.86);
  backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid var(--line);
}
.hdr__in{
  max-width:var(--maxw); margin:0 auto; padding:0 var(--pad);
  height:72px; display:flex; align-items:center; gap:28px;
}

.brand{ display:flex; align-items:center; gap:11px; flex:none }
.brand__mark{ width:40px; height:40px; flex:none; fill:var(--paper) }
.ftr__logo{ width:88px; height:88px; mix-blend-mode:screen; flex:none }
.brand__txt{
  display:grid; line-height:.86; font-weight:900;
  font-size:15px; letter-spacing:.01em;
}
.brand__txt b:last-child{ color:var(--amber) }

.nav{ display:flex; gap:30px; margin-inline:auto; font-weight:700; font-size:15px }
.nav a{ position:relative; padding:6px 0; color:var(--paper-2); transition:color .18s var(--ease) }
.nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:var(--amber); transform:scaleX(0); transform-origin:left;
  transition:transform .28s var(--ease);
}
.nav a:hover{ color:var(--paper) }
.nav a:hover::after{ transform:scaleX(1) }

.hdr__act{ display:flex; align-items:center; gap:12px; flex:none }
.hdr__tel{ --bh:42px; padding:0 16px; font-size:14px }

/* полоски — абсолютно, с явной шириной: Safari кладёт содержимое <button>
   в свою обёртку, и пустые span во flex сжимались до нуля — бургер пропадал на iPhone */
.burger{ display:none; position:relative; width:44px; height:44px }
.burger span{
  position:absolute; left:11px; top:11px; width:22px; height:2px;
  background:var(--paper); border-radius:2px; transition:transform .3s var(--ease), opacity .2s;
}
.burger span:nth-child(2){ top:21px }
.burger span:nth-child(3){ top:31px }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(9px) rotate(45deg) }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0 }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-9px) rotate(-45deg) }

/* Мобильное меню: затемнение под шапкой и боковая панель,
   прижатая к правому краю на всю высоту. Ссылки сверху,
   кнопки связи внизу панели. Тап по затемнению закрывает меню (см. app.js). */
.mobnav{
  position:fixed; inset:72px 0 0; z-index:89;
  background:rgba(0,0,0,.6); backdrop-filter:blur(2px);
  animation:fade .25s var(--ease);
}
.mobnav__sheet{
  position:absolute; top:0; right:0; bottom:0;
  width:min(320px, 84vw);
  display:flex; flex-direction:column;
  padding:12px 0 max(16px, env(safe-area-inset-bottom));
  background:var(--ink-2); border-left:1px solid var(--line-hi);
  box-shadow:-24px 0 48px rgba(0,0,0,.5);
  overflow-y:auto; overscroll-behavior:contain;
  animation:mobnav-in .38s var(--ease);
}
.mobnav__panel{ display:grid; padding:0 12px }
.mobnav__panel a{
  display:flex; align-items:center; justify-content:space-between;
  min-height:60px; padding:0 12px;
  border-bottom:1px solid var(--line);
  font-size:22px; font-weight:800; letter-spacing:-.02em;
  transition:color .16s var(--ease);
}
.mobnav__panel a::after{
  content:""; width:9px; height:9px; flex:none;
  border-top:2px solid currentColor; border-right:2px solid currentColor;
  transform:rotate(45deg); opacity:.35;
  transition:transform .2s var(--ease), opacity .16s var(--ease);
}
.mobnav__panel a:hover,.mobnav__panel a:focus-visible{ color:var(--amber) }
.mobnav__panel a:hover::after{ opacity:1; transform:translateX(3px) rotate(45deg) }
.mobnav__app{
  margin:20px 24px 0; padding:12px 14px;
  display:flex; align-items:center; gap:12px;
  background:var(--ink-3); border:1px solid var(--line-hi); border-radius:var(--r);
  transition:border-color .16s var(--ease);
}
.mobnav__app[hidden]{ display:none }
.mobnav__app:hover,.mobnav__app:focus-visible{ border-color:var(--amber) }
.mobnav__app img{ width:44px; height:44px; flex:none; border-radius:22% }
.mobnav__app span{ flex:1; font-size:13px; line-height:1.35; color:var(--paper-2) }
.mobnav__app b{ display:block; margin-bottom:2px; font-size:16px; color:var(--paper) }
.mobnav__app::after{
  content:""; width:8px; height:8px; flex:none; margin-right:4px;
  border-top:2px solid var(--amber); border-right:2px solid var(--amber); transform:rotate(45deg);
}
.mobnav__foot{ margin-top:auto;padding:24px 24px 0; display:grid; gap:10px }
.mobnav__addr{ margin:0 0 4px; font-size:14px; color:var(--paper-2) }
.mobnav__foot .btn--ghost{ background:var(--ink-3) }
/* звонок и WhatsApp — второстепенные, пополам под «Собрать заказ» */
.mobnav__call{ display:grid; grid-template-columns:1fr 1fr; gap:10px }
@keyframes mobnav-in{ from{ transform:translateX(100%) } }
@media (prefers-reduced-motion:reduce){ .mobnav,.mobnav__sheet{ animation:none } }

/* ============================================================
   HERO
   ============================================================ */
/* Две панели во всю ширину экрана: слева логотип, заголовок и действия,
   справа фото бургера. align-items:stretch держит их одной высоты.
   Высота не больше 58vw: тогда бургер целиком входит в правую панель
   и на узких ноутбуках. Левый край текста совпадает с контейнером страницы. */
.hero{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  min-height:min(80vh,760px,58vw);
  position:relative;
}
.hero__copy{
  position:relative;
  overflow:clip; /* падающие части логотипа влетают из-за края, не залезая на шапку */
  display:flex; flex-direction:column;
  align-items:flex-start; justify-content:center; text-align:left;
  gap:18px;
  padding:clamp(40px,5vw,64px) clamp(20px,3vw,40px) clamp(40px,5vw,64px)
          max(var(--pad), calc((100vw - var(--maxw)) / 2 + var(--pad)));
}

.hero__meta{
  display:flex; align-items:center; flex-wrap:wrap; gap:8px 12px;
  font:500 13px/1 "JetBrains Mono", ui-monospace, monospace;
  letter-spacing:.12em; text-transform:uppercase; color:var(--paper-2);
}
.hero__title{
  font-size:clamp(34px,3.7vw,46px);
  margin:0; line-height:1.04; letter-spacing:-.03em;
}
.hero__sub{ font-size:clamp(17px,1.4vw,19px); color:var(--paper-2); max-width:36ch; margin-top:-4px }
.halal{
  display:inline-flex; align-items:center; gap:7px;
  padding:7px 13px 7px 10px; border-radius:99px;
  border:1px solid rgba(242,160,60,.4); background:var(--amber-wash);
  color:var(--amber); font-weight:700; letter-spacing:.12em;
}
.halal__star{ width:15px; height:15px; fill:currentColor }
.dot{ width:4px; height:4px; border-radius:50%; background:var(--line-hi) }

/* Пара «логотип + заголовок» на всех ширинах: логотип слева, по высоте
   примерно как три строки h1 (ширина ≈ 2,6 кегля). На ПК кегль h1 не
   больше 46 px: при 10,5 кегля на всю пару она входит в колонку текста
   (≈ 500 px от 1280 px и шире) и заголовок держит три строки.
   Строка адреса стоит над логотипом: части логотипа влетают из-за края
   его рамки (overflow:clip), не проходя по тексту. */
.hero__brand{ display:flex; align-items:center; gap:clamp(14px,1.6vw,22px) }
.hero__logo{ flex:none; width:clamp(88px,9.6vw,120px); overflow:clip; overflow-clip-margin:10px }
/* ---------- Анимированный логотип ----------
   Сборка ~2.4 с: нижняя булка выезжает снизу → надпись падает на неё →
   верхняя булка падает последней, весь бургер пружинит → кунжут «лопается»
   по одному. Внешние g (.blogo__part) несут сборку, внутренние
   (.blogo__press) — сжатие при наведении, чтобы анимации не перебивали
   друг друга. Сдвиги в px = единицы viewBox (ширина логотипа ~790). */
.blogo{ display:block; width:100%; height:auto; overflow:visible; fill:var(--paper) }
.blogo g, .blogo__seed{ transform-box:fill-box; transform-origin:50% 100% }

.blogo__bottom{ animation:blogo-rise .8s both }
/* надпись стартует почти сразу — название читается через ~0,5 с */
.blogo__text  { animation:blogo-drop-text .7s .08s both }
.blogo__top   { animation:blogo-drop-top .7s .5s both }
.blogo__stack { animation:blogo-jelly 1s .95s ease-in-out both }
.blogo__seed{
  fill:var(--ink); transform-origin:50% 50%;
  animation:blogo-pop .5s calc(1.3s + var(--i) * .14s) cubic-bezier(.34,1.45,.5,1) both;
}

/* Нижняя булка: мягко выезжает, чуть проседает, когда на неё ложится надпись. */
@keyframes blogo-rise{
  0%  { transform:translateY(220px); opacity:0; animation-timing-function:cubic-bezier(.22,.9,.3,1) }
  22% { opacity:1 }
  50% { transform:translateY(-10px); animation-timing-function:ease-in-out }
  70% { transform:none; animation-timing-function:ease-in-out }
  83% { transform:scale(1.025,.93); animation-timing-function:ease-in-out }
  94% { transform:scale(.995,1.015); animation-timing-function:ease-in-out }
  100%{ transform:none }
}
/* Надпись: падает и приземляется с мягким шлепком. */
@keyframes blogo-drop-text{
  0%  { transform:translateY(-460px); opacity:0; animation-timing-function:cubic-bezier(.45,0,.85,.4) }
  25% { opacity:1 }
  62% { transform:none; animation-timing-function:ease-out }
  76% { transform:scale(1.045,.9); animation-timing-function:ease-in-out }
  90% { transform:scale(.99,1.03); animation-timing-function:ease-in-out }
  100%{ transform:none }
}
/* Верхняя булка: падает последней. */
@keyframes blogo-drop-top{
  0%  { transform:translateY(-520px); opacity:0; animation-timing-function:cubic-bezier(.45,0,.85,.4) }
  25% { opacity:1 }
  65% { transform:none; animation-timing-function:ease-out }
  82% { transform:translateY(-8px); animation-timing-function:ease-in-out }
  100%{ transform:none }
}
/* Желе: весь бургер гасит удар затухающими колебаниями. */
@keyframes blogo-jelly{
  0%  { transform:none }
  14% { transform:scale(1.06,.91) }
  34% { transform:scale(.965,1.045) }
  56% { transform:scale(1.018,.985) }
  78% { transform:scale(.995,1.006) }
  100%{ transform:none }
}
/* Кунжут: вспыхивает янтарём и остывает в цвет угля. */
@keyframes blogo-pop{
  0%  { transform:scale(0); fill:var(--amber-hi) }
  45% { transform:scale(1.35); fill:var(--amber) }
  100%{ transform:none; fill:var(--ink) }
}

/* Наведение (или тап): булки мягко прижимают надпись и отпускают. */
@keyframes blogo-press-top   { 45%{ transform:translateY(30px) } }
@keyframes blogo-press-bottom{ 45%{ transform:translateY(-20px) } }
@keyframes blogo-press-text  { 45%{ transform:scale(1.04,.84) } }
.blogo__text .blogo__press{ transform-origin:50% 50% }
@media (hover:hover){
  .blogo:hover .blogo__top    .blogo__press{ animation:blogo-press-top    .55s ease-in-out }
  .blogo:hover .blogo__bottom .blogo__press{ animation:blogo-press-bottom .55s ease-in-out }
  .blogo:hover .blogo__text   .blogo__press{ animation:blogo-press-text   .55s ease-in-out }
}
.blogo:active .blogo__top    .blogo__press{ animation:blogo-press-top    .55s ease-in-out }
.blogo:active .blogo__bottom .blogo__press{ animation:blogo-press-bottom .55s ease-in-out }
.blogo:active .blogo__text   .blogo__press{ animation:blogo-press-text   .55s ease-in-out }

@media (prefers-reduced-motion:reduce){
  .blogo *{ animation:none !important }
}
.hero__cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:10px }
/* два адреса под заголовком — ссылки к карточкам точек в «Контактах» */
.hero__addr{ display:flex; flex-wrap:wrap; gap:6px 18px; margin:-2px 0 0 }
.hero__addr a{
  display:inline-flex; align-items:center; gap:6px; padding-block:4px;
  font-size:16px; font-weight:800; color:var(--paper);
  text-decoration:underline; text-decoration-color:var(--line-hi); text-underline-offset:4px;
  transition:color .18s var(--ease), text-decoration-color .18s var(--ease);
}
.hero__addr a:hover{ color:var(--amber); text-decoration-color:currentColor }
.hero__addr .ic{ width:17px; height:17px; color:var(--amber) }

.rating{
  display:inline-flex; align-items:center; gap:12px; min-height:44px;
  color:var(--paper-2); font-size:14px;
  transition:color .18s var(--ease);
}
.rating:hover{ color:var(--paper) }
.rating__num{ font-weight:900; font-size:22px; color:var(--paper); font-variant-numeric:tabular-nums }
.rating__stars{ display:flex; gap:2px; color:var(--amber) }
.rating__stars .ic{ width:15px; height:15px }

/* Широкий кадр: бургер на сланце занимает x 39–81% снимка, справа фри
   и надпись «Amur Burger» на сланце почти до края (x 97%). Кадр прижат
   к правому краю, чтобы надпись читалась целиком; бургер при этом левее
   градиента, пока панель не уже 1,05 : 1 по пропорциям. По вертикали
   20%: шпажки у самого верха снимка. Левый край мягко уходит в уголь —
   шва с левой панелью нет. */
.hero__shot{ position:relative; overflow:hidden; background:var(--ink) }
.hero__shot picture{ display:block }
.hero__shot img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover; object-position:100% 20%;
}
.hero__shot::before,
.hero__shot::after{ content:""; position:absolute; pointer-events:none; z-index:1 }
.hero__shot::before{ inset:0 auto 0 0; width:12%; background:linear-gradient(to right, var(--ink), transparent) }
.hero__shot::after{ inset:auto 0 0 0; height:14%; background:linear-gradient(to top, var(--ink), transparent) }

/* Лента об открытии (renderRibbon в app.js): наклонная янтарная полоса
   по нижнему краю снимка — там доска и стол, бургер открыт. Шире кадра,
   концы обрезает overflow:hidden у .hero__shot — горизонтальной прокрутки
   нет. Строка бежит, как бегущая строка под херо (её на это время прячет
   .has-ribbon); без движения — стоит. */
.hribbon{
  position:absolute; z-index:2; left:-6%; right:-6%; bottom:9%;
  display:block; overflow:hidden; transform:rotate(-3deg);
  background:var(--amber); color:var(--ink);
  border-block:1px solid var(--amber-deep); box-shadow:0 10px 28px rgba(0,0,0,.45);
  transition:background .18s var(--ease);
}
.hribbon:hover{ background:var(--amber-hi) }
.hribbon:focus-visible{ outline:2px solid var(--paper); outline-offset:3px }
.hribbon__row{
  display:flex; align-items:center; gap:22px; width:max-content; padding:13px 0;
  font-weight:900; font-size:15px; letter-spacing:.02em; text-transform:uppercase; white-space:nowrap;
  animation:slide 44s linear infinite;
}
.hribbon__row i{ width:7px; height:7px; border-radius:50%; background:var(--ink); flex:none }
@media (prefers-reduced-motion:reduce){
  .hribbon__row{ animation:none; padding-inline:calc(6% + 24px) }
}

/* Панель уже 1,05 : 1 — до 1099 px всегда (там высоту держит сам
   текст: часы уходят отдельной строкой), до 1558 px в окне уже 41:25
   (панель ≈ 51vw, высота — меньшее из 80vh, 760 px и 58vw; текст
   от 1100 px ниже 470 px и её не растит).
   В ней широкий кадр отрезал бы либо бургер, либо надпись. Здесь —
   вертикальный кадр hero-slate-stack (<source> в index.html, условие то
   же): он вписан по ширине и режется только сверху и снизу. 75% по
   вертикали и короткий нижний градиент оставляют надпись открытой. */
@media (min-width:960px) and (max-width:1099px),
       (min-width:960px) and (max-width:1558px) and (max-aspect-ratio:41/25){
  .hero__shot img{ object-position:50% 75% }
  .hero__shot::before{ width:7% }
  .hero__shot::after{ height:10% }
}

/* ============================================================
   TICKER
   ============================================================ */
.ticker{
  background:var(--amber); color:var(--ink); overflow:hidden;
  border-block:1px solid var(--amber-deep);
}
.ticker__row{
  display:flex; align-items:center; gap:26px; width:max-content;
  padding:15px 0; font-weight:900; font-size:15px;
  letter-spacing:.02em; text-transform:uppercase;
  animation:slide 77s linear infinite;   /* ~41 px/с при половине ленты ≈ 3160 px */
}
.ticker__row i{ width:7px; height:7px; border-radius:50%; background:var(--ink); flex:none }
/* пока над фото лента об открытии — эта строка скрыта (две бегущие подряд — много) */
.has-ribbon .ticker{ display:none }
@keyframes slide{ to{ transform:translateX(-50%) } }
@media (prefers-reduced-motion:reduce){
  .ticker__row{ animation:none; padding-inline:var(--pad) }
}

/* ============================================================
   SECTIONS
   ============================================================ */
/* ритм разделов: заметный, но без пустых экранов между блоками */
.sec{ max-width:var(--maxw); margin:0 auto; padding:clamp(32px,4.4vw,64px) var(--pad) }
.sec--get{ padding-block:clamp(20px,2.4vw,28px) }
/* меню, фото зала и доставка идут плотнее: без пустоты между ними */
.sec--menu{ padding-bottom:clamp(32px,3.6vw,52px) }
.sec--cafe{ padding-block:clamp(16px,2.5vw,36px) clamp(14px,2.4vw,32px) }
.sec__head{ margin-bottom:clamp(16px,2.4vw,32px); max-width:60ch }
/* шкала: h1 херо ≥ h2 раздела > h3 группы меню */
.sec__head h2{ font-size:clamp(32px,4vw,52px) }
.sec__head p{ margin-top:14px; color:var(--paper-2); font-size:17px; max-width:56ch }
.sec__head--row{
  max-width:none; display:flex; align-items:flex-end;
  justify-content:space-between; gap:24px; flex-wrap:wrap;
}

.ylink{
  display:inline-flex; align-items:center; gap:11px;
  padding:11px 18px; border:1px solid var(--line); border-radius:99px;
  color:var(--paper-2); font-size:14px;
  transition:border-color .18s var(--ease), color .18s var(--ease);
}
.ylink:hover{ border-color:var(--amber); color:var(--paper) }
.ylink b{ font-size:19px; color:var(--amber); font-variant-numeric:tabular-nums }
.ylink .ic{ width:16px; height:16px }

/* ============================================================
   MENU — tabs
   ============================================================ */
.tabs{
  position:sticky; top:72px; z-index:70;
  display:flex; gap:8px; overflow-x:auto; scrollbar-width:none;
  margin:0 calc(var(--pad)*-1) clamp(18px,3vw,40px);
  padding:14px var(--pad);
  background:rgba(11,11,12,.9); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.tabs::-webkit-scrollbar{ display:none }
/* Активный раздел отличается не только цветом: заливка, жирнее
   и точка-метка перед названием. */
.tab{
  display:inline-flex; align-items:center; gap:7px; flex:none;
  min-height:40px; padding:0 18px; border-radius:99px; white-space:nowrap;
  font-weight:700; font-size:14.5px; color:var(--paper-2);
  border:1px solid var(--line);
  transition:background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
}
.tab:hover{ color:var(--paper); border-color:var(--line-hi) }
.tab[aria-current="true"]{ background:var(--amber); border-color:var(--amber); color:var(--ink); font-weight:900 }
.tab[aria-current="true"]::before{ content:""; width:6px; height:6px; border-radius:50%; background:currentColor }
/* ширину вкладки JS фиксирует по активному виду — текст по центру */
.tab{ justify-content:center; min-width:var(--tw, 0) }
/* Раздел с несколькими карточками: пока лента карточек на экране
   (.is-split), вкладка делится на подписи — каждая под своей карточкой;
   у шапки — снова одно название раздела. Ширины — fitCats в app.js. */
.tab__part{ display:none }
.tabs.is-split .tab--parts{ min-width:0; padding:0; gap:6px; border:0; background:none }
.tabs.is-split .tab--parts::before,
.tabs.is-split .tab--parts .tab__one{ display:none }
.tabs.is-split .tab__part{
  display:inline-flex; align-items:center; justify-content:center; gap:7px; flex:none;
  min-height:40px; padding:0 14px; border-radius:99px;
  border:1px solid var(--line); color:var(--paper-2);
  transition:background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
}
.tabs.is-split .tab--parts:hover .tab__part{ color:var(--paper); border-color:var(--line-hi) }
.tabs.is-split .tab--parts[aria-current="true"] .tab__part{ background:var(--amber); border-color:var(--amber); color:var(--ink); font-weight:900 }
.tabs.is-split .tab--parts[aria-current="true"] .tab__part::before{ content:""; width:6px; height:6px; border-radius:50%; background:currentColor }

/* ---- фото-карточки разделов: каждая над своей вкладкой ----
   Те же поля и зазор, что у ленты вкладок; группа карточек раздела
   той же ширины, что его вкладка (fitCats в app.js): ленты листаются
   вместе. Все карточки одного размера, 3:4, в янтарной рамке. */
.cats{
  --cw:112px;
  display:flex; gap:8px; overflow-x:auto; scrollbar-width:none;
  margin:0 calc(var(--pad)*-1); padding:3px var(--pad) 0;
}
.cats::-webkit-scrollbar{ display:none }
.catg{ display:flex; gap:6px; flex:none }
.catc{ display:flex; justify-content:center; flex:none }
.cat{
  position:relative; flex:none; display:block; width:var(--cw); aspect-ratio:3/4; padding:0;
  border-radius:var(--r); overflow:hidden;
  background:var(--ink-2); border:1px solid var(--amber);
  transition:box-shadow .18s var(--ease);
}
.cat img{
  width:100%; height:100%; object-fit:cover;
  object-position:var(--pos, 50% 50%);
  transition:transform .5s var(--ease);
}
.cat--none{ display:grid; place-items:center; color:var(--line-hi) }
.cat--none .ic{ width:34px; height:34px }
/* карточки текущего раздела — рамка толще */
.cat.is-on{ box-shadow:0 0 0 1px var(--amber) }
@media (hover:hover){
  .cat:hover{ box-shadow:0 0 0 1px var(--amber) }
  .cat:hover img{ transform:scale(1.06) }
}
.cat:focus-visible{ outline-offset:-2px; border-radius:var(--r) }
@media (prefers-reduced-motion:reduce){ .cat img{ transition:none } }

/* ============================================================
   MENU — groups
   ============================================================ */
/* между разделами одна линия — низ последней строки — и отступ до плашки */
.grp{ padding-block:clamp(20px,2.6vw,32px) 0; scroll-margin-top:62px }
/* scroll-padding у html и scroll-margin складываются: 88 + 62 = 150 —
   заголовок раздела встаёт под шапку (72) и ленту разделов (71) */
.grp:first-child{ padding-top:0 }
.grp__hd{ display:flex; align-items:baseline; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-bottom:8px }
/* название раздела — чёрным на янтарной плашке во всю колонку, как кнопки:
   не теряется среди строк блюд. */
.grp__hd{
  align-items:center; flex-wrap:nowrap; padding:12px clamp(16px,2vw,24px); margin-bottom:14px;
  border-radius:var(--r); background:var(--amber);
}
/* длинное название («Сэндвичи и хот-доги») переносится само,
   счётчик позиций остаётся справа в той же плашке */
.grp__hd h3{ flex:1 1 auto; min-width:0; font-size:clamp(22px,2.5vw,32px); color:var(--ink) }
.grp__hd .grp__n{ flex:none; white-space:nowrap; color:var(--ink); opacity:.72 }
.grp__n{
  font:500 12px/1 "JetBrains Mono", ui-monospace, monospace;
  letter-spacing:.14em; text-transform:uppercase; color:var(--paper-2);
}
.grp__lead{ color:var(--paper-2); font-size:15.5px; margin-bottom:24px; max-width:52ch }
.grp__lead a{ color:var(--amber); text-decoration:underline; text-underline-offset:3px }
.grp__lead a:hover{ color:var(--amber-hi) }

.grp__body{ display:grid; grid-template-columns:1fr; gap:clamp(24px,3vw,44px) }
/* ПК: крупного фото справа нет — снимок у каждой строки (row__thumb).
   Фото над списком остаётся только на телефоне (см. RESPONSIVE). */
.grp--view .dish{ display:none }

/* rows */
/* списки — не больше двух колонок; строки с фото в две колонки
   только на широком экране, иначе названию тесно */
.rows{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 clamp(28px,4vw,56px) }
@media (max-width:1179px){ .rows--pic{ grid-template-columns:1fr } }
/* Первая линия — название, цена и кнопки на одной оси;
   приписка и размеры уходят строкой ниже. */
.row{
  display:grid; grid-template-columns:minmax(0,1fr) auto auto;
  align-items:center; column-gap:14px;
  padding:15px 0; border-bottom:1px solid var(--line);
}
.row__top{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; min-width:0 }
.row__name{ font-weight:800; font-size:16.5px; line-height:1.3; letter-spacing:-.01em }
/* простой список (соусы, напитки): одна цена, без размеров — строки ниже */
.grp--plain .row{ padding-block:7px }
.grp--plain .qty{ height:38px }
.grp--plain .add{ width:36px; height:36px }

/* ПК: строка блюда в разделе с фото — снимок слева на всю высоту строки,
   под названием состав, вес и соус (DISH_INFO в menu.js — черновик).
   У блюда без фото на месте снимка знак кафе: колонка названий ровная. */
.row__thumb, .row__info, .row__name--desk{ display:none }
@media (min-width:761px){
  .row--pic{ --th:clamp(88px,8vw,112px); grid-template-columns:var(--th) minmax(0,1fr) auto auto; column-gap:16px; padding-block:16px }
  .row--pic .row__thumb{
    display:block; grid-column:1; grid-row:1 / span 6; align-self:start;
    width:var(--th); aspect-ratio:1; overflow:hidden;
    border-radius:var(--r-s); background:var(--ink-2); border:1px solid var(--line);
  }
  .row__thumb img{ width:100%; height:100%; object-fit:cover; object-position:var(--pos, 50% 50%) }
  .row--pic .row__thumb--none{ display:grid; place-items:center; color:var(--line-hi) }
  .row__thumb--none .ic{ width:46%; height:46% }
  .row--pic .row__top{ grid-column:2 }
  .row--pic .price{ grid-column:3 }
  .row--pic .qty{ grid-column:4 }
  .row--pic .row__info, .row--pic .row__note, .row--pic .sizes, .row--pic .row__more{ grid-column:2 / -1 }
  .row--pic .row__view{ display:none }
  .row--pic .row__name--desk{ display:inline }
  .row__info{ display:grid; gap:5px; margin-top:5px }
  .row__comp{ font-size:14px; line-height:1.45; color:var(--paper-2); max-width:52ch }
  .row__stats{
    display:flex; flex-wrap:wrap; gap:4px 18px;
    font:500 11px/1.5 "JetBrains Mono", ui-monospace, monospace;
    letter-spacing:.1em; text-transform:uppercase; color:var(--paper-2);
  }
  .row__stats b{
    margin-left:5px; font:800 13.5px/1.5 Nunito, system-ui, sans-serif;
    letter-spacing:0; text-transform:none; color:var(--paper); font-variant-numeric:tabular-nums;
  }
}
.row__note{ grid-column:1/-1; display:block; margin-top:3px; font-size:13.5px; color:var(--paper-2) }

/* Название-кнопка просмотра. Зона нажатия выше строки текста,
   отрицательный отступ не даёт ей раздвинуть строку. */
.row__view{
  display:inline-block; padding:11px 0; margin-block:-11px;
  text-align:left; transition:color .18s var(--ease);
}
.row__view:hover{ color:var(--amber-hi) }
/* значок идёт за последним словом и при переносе названия */
.row__ic{ width:16px; height:16px; margin-left:7px; vertical-align:-2px; color:var(--paper-2); stroke-width:1.8 }
.row__ic--more{ display:none }
.nowrap{ white-space:nowrap }

/* ---------- фото над списком (телефон) ----------
   Кадр 3:2, положение кадра — photo.mpos/pos в menu.js. */
.dish__fig{ margin:0 }
.dish__pic{ position:relative; border-radius:var(--r); overflow:hidden; background:var(--ink-2); border:1px solid var(--line) }
.dish__pic img{ width:100%; aspect-ratio:1; max-height:calc(100vh - 230px); object-fit:cover; object-position:var(--pos, 50% 50%) }
.dish__fig.is-wide .dish__pic img{ aspect-ratio:auto }

/* Телефон: карточка блюда раскрывается под строкой (toggleRowPhoto в
   app.js) — фото слева, состав, вес и соус справа. Высота плавно
   меняется через grid-template-rows 0fr ↔ 1fr, карточка проявляется и
   чуть съезжает сверху. Размер фото задан заранее — загрузка его не
   меняет. Раскрытие — мягкое торможение (.48s); сворачивание — своя
   кривая с плавным началом и концом (.42s): кривая раскрытия резко
   срывается в начале, и при закрытии карточка «падала».
   Длительности = OPEN_MS и CLOSE_MS в app.js. */
.row__photo{
  grid-column:1/-1; display:grid; grid-template-rows:0fr;
  transition:grid-template-rows .42s cubic-bezier(.45,0,.25,1);
}
.row__photo[hidden]{ display:none }
.row__photo.is-open{ grid-template-rows:1fr; transition:grid-template-rows .48s cubic-bezier(.22,1,.36,1) }
.row__photo-in{ min-height:0; overflow:hidden }
.dinfo{
  display:grid; grid-template-columns:clamp(112px,34vw,150px) minmax(0,1fr);
  gap:14px; align-items:stretch; overflow:hidden;
  margin-top:12px; min-height:clamp(112px,34vw,150px);
  border-radius:var(--r); background:var(--ink-2); border:1px solid var(--line);
  opacity:0; transform:translateY(-10px);
  transition:opacity .3s ease, transform .42s cubic-bezier(.45,0,.25,1);
}
.row__photo.is-open .dinfo{ opacity:1; transform:none; transition:opacity .42s ease .04s, transform .48s cubic-bezier(.22,1,.36,1) }
/* фото слева вплотную к краям карточки, по всей её высоте */
.dinfo__pic{ position:relative; overflow:hidden; background:var(--ink-3) }
.dinfo__pic img{ position:absolute; inset:0 }
.dinfo__pic img{ width:100%; height:100%; object-fit:cover; object-position:var(--pos, 50% 50%) }
/* блюдо без фото: знак кафе, пока снимка нет */
.dinfo__pic--none{ display:grid; place-items:center; color:var(--line-hi) }
.dinfo__pic--none .ic{ width:46%; height:46% }
.dinfo__err{ display:grid; place-items:center; height:100%; padding:8px; font-size:12px; line-height:1.3; text-align:center; color:var(--paper-2) }
.dinfo__txt{ display:grid; gap:9px; align-content:center; min-width:0; padding:12px 14px 12px 0 }
.dinfo__comp{ font-size:13.5px; line-height:1.4; color:var(--paper-2) }
/* Вес и соус всегда в один ряд: длинный соус переносится внутри своего
   блока, а не уходит строкой под вес */
.dinfo__stats{ display:flex; gap:10px 18px; margin:0 }
.dinfo__stats > div{ flex:none }
.dinfo__stats > div + div{ flex:0 1 auto; min-width:0 }
.dinfo__stats dt{
  margin-bottom:3px; font:500 10.5px/1 "JetBrains Mono", ui-monospace, monospace;
  letter-spacing:.12em; text-transform:uppercase; color:var(--paper-2);
}
.dinfo__stats dd{ margin:0; font-weight:800; font-size:15px; font-variant-numeric:tabular-nums }
.row__view[aria-expanded="true"],
.row__view[aria-expanded="true"] .row__ic{ color:var(--amber) }
@media (prefers-reduced-motion:reduce){ .row__photo,.dinfo{ transition:none } }
@media (min-width:761px){ .row__photo{ display:none } }

.dish__text{
  display:grid; justify-items:start; gap:10px;
  padding:24px 26px; border:1px solid var(--line); border-radius:var(--r); background:var(--ink-2);
}
.dish__name{ font-size:22px; font-weight:900; letter-spacing:-.02em; line-height:1.2 }
.dish__note{ font-size:14.5px; color:var(--paper-2) }
.dish__prices{ display:flex; flex-wrap:wrap; gap:6px 18px; font-weight:900; font-size:17px }
.dish__prices i{
  font:500 12.5px/1 "JetBrains Mono", ui-monospace, monospace;
  letter-spacing:.03em; color:var(--paper-2); font-style:normal;
}

.hot{
  display:inline-flex; align-items:center; gap:4px;
  padding:3px 9px 3px 6px; border-radius:99px;
  border:1px solid rgba(232,84,61,.42); background:var(--chili-wash);
  color:var(--chili); font-weight:800; font-size:11px;
  letter-spacing:.06em; text-transform:uppercase;
}
.hot .ic{ width:12px; height:12px; stroke-width:2 }

/* size segmented control */
.sizes{ grid-column:1/-1; display:flex; gap:4px; margin-top:9px; padding:3px; border-radius:99px; background:var(--ink-2); width:max-content }
.size{
  display:inline-flex; align-items:center; min-height:36px;
  padding:0 14px; border-radius:99px;
  font:500 12.5px/1 "JetBrains Mono", ui-monospace, monospace;
  letter-spacing:.03em; color:var(--paper-2);
  transition:background .18s var(--ease), color .18s var(--ease);
}
.size:hover{ color:var(--paper) }
.size[aria-checked="true"]{ background:var(--line-hi); color:var(--paper) }
/* Начинки такос XXL: одна лента, что не влезло — листается пальцем.
   У края, за которым есть кнопки, лента затухает: --fl / --fr ставит
   sizeStrip() в app.js (0 — край виден целиком). */
.sizes--scroll{
  max-width:100%; min-width:0; overflow-x:auto; scrollbar-width:none;
  overscroll-behavior-x:contain; scroll-snap-type:x proximity;
  --fl:0px; --fr:0px;
  -webkit-mask-image:linear-gradient(to right, transparent, #000 var(--fl), #000 calc(100% - var(--fr)), transparent);
          mask-image:linear-gradient(to right, transparent, #000 var(--fl), #000 calc(100% - var(--fr)), transparent);
}
.sizes--scroll::-webkit-scrollbar{ display:none }
.sizes--scroll .size{ flex:none; white-space:nowrap; scroll-snap-align:start; scroll-margin-inline:28px }

.price{ white-space:nowrap; font-weight:900; font-size:17px; font-variant-numeric:tabular-nums; letter-spacing:-.02em }
.price small{ font-size:.72em; font-weight:700; color:var(--paper-2); margin-left:1px }

.add{
  display:grid; place-items:center;
  width:40px; height:40px; border-radius:50%; flex:none;
  border:1.5px solid var(--line-hi); color:var(--paper);
  transition:background .18s var(--ease), border-color .18s var(--ease),
             color .18s var(--ease), transform .18s var(--ease);
}
.add:hover{ background:var(--amber); border-color:var(--amber); color:var(--ink) }
.add:active{ transform:scale(.92) }

/* Слот количества. Ширина фиксирована, чтобы цена не прыгала
   при переходе «плюс» → «минус N плюс». */
.qty{
  display:flex; align-items:center; justify-content:flex-end; gap:2px;
  min-width:116px; height:42px; flex:none;
  border:1px solid transparent; border-radius:99px;
  transition:background .18s var(--ease), border-color .18s var(--ease);
}
.qty.is-in{
  background:var(--amber-wash); border-color:rgba(242,160,60,.45);
  padding-left:2px;
}
.qty__btn, .qty__n{ display:none }
.qty.is-in .qty__btn{ display:grid }
.qty.is-in .qty__n{ display:block }

.qty__btn{
  place-items:center; width:36px; height:36px; flex:none;
  border-radius:50%; color:var(--paper-2);
  transition:background .16s var(--ease), color .16s var(--ease);
}
.qty__btn:hover{ background:var(--ink-3); color:var(--paper) }
.qty__btn:active{ transform:scale(.92) }
.qty__btn .ic{ width:16px; height:16px; stroke-width:2.2 }

.qty__n{
  min-width:24px; text-align:center; color:var(--paper);
  font-weight:900; font-size:15px; font-variant-numeric:tabular-nums;
}

/* Внутри активного слота плюс — только янтарный знак: сама плашка
   уже несёт янтарь, второй заливки было бы слишком много. */
.qty.is-in .add{ border-color:transparent; color:var(--amber) }
.qty.is-in .add:hover{ background:var(--amber); color:var(--ink) }

/* ============================================================
   О КАФЕ — фото зала по этажам
   ============================================================ */
/* ПК: один крупный снимок слева и четыре небольших 2×2.
   Крупный — общий вид зала первого этажа. Ячейка шире вертикального
   кадра, поэтому срезается верх с потолком, а столы остаются (pos 88%).
   Телефон: горизонтальная лента со scroll-snap (см. RESPONSIVE). */
.cafe{
  display:grid; grid-template-columns:1.6fr 1fr 1fr;
  grid-template-rows:repeat(2, clamp(220px,22vw,320px));
  gap:12px;
}
.cafe:focus-visible{ outline-offset:6px; border-radius:var(--r) }
.cafe__ph{ margin:0; position:relative; border-radius:var(--r); overflow:hidden; background:var(--ink-2) }
.cafe__ph--main{ grid-row:span 2 }
.cafe__ph img{ width:100%; height:100%; object-fit:cover }
.cafe__ph figcaption{
  position:absolute; left:12px; bottom:12px;
  padding:8px 12px; border-radius:99px;
  background:rgba(11,11,12,.82); border:1px solid var(--line-hi);
  font:500 12px/1 "JetBrains Mono", ui-monospace, monospace;
  letter-spacing:.12em; text-transform:uppercase; color:var(--paper);
}

/* ============================================================
   ДОСТАВКА И САМОВЫВОЗ — компактно, строками, как условия в меню
   ============================================================ */
/* акция — янтарная полоса на всю ширину окна, как бегущая строка.
   Заливка выходит за колонку через border-image (это не меняет
   раскладку и не даёт горизонтальной прокрутки), текст — по колонке. */
.freedel{
  display:flex; align-items:center; gap:16px;
  margin-top:clamp(20px,3vw,32px); padding:16px 0;
  background:var(--amber); color:var(--ink);
  border-image:conic-gradient(var(--amber) 0 0) fill 0 / / 0 100vw;
}
.freedel .ic{ width:28px; height:28px; flex:none; color:var(--ink) }
.freedel p{ display:grid; gap:3px; margin:0 }
.freedel b{ font-size:clamp(19px,2.2vw,24px); font-weight:900; line-height:1.2; letter-spacing:-.02em }
.freedel span{ font-size:14.5px; font-weight:600; line-height:1.45; color:var(--ink); opacity:.78 }
.get{
  display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(28px,5vw,72px); align-items:start;
  padding-block:clamp(20px,2.6vw,36px);
  border-block:1px solid var(--line-hi);
}
.get__head h2{ font-size:clamp(32px,4vw,52px) }
.get__head p{ margin:16px 0 24px; color:var(--paper-2); max-width:42ch }
.get__list{ margin:0; display:grid }
.get__list > div{
  display:grid; grid-template-columns:150px minmax(0,1fr); gap:18px;
  padding:18px 0; border-bottom:1px solid var(--line);
}
.get__list > div:first-child{ padding-top:4px }
.get__list > div:last-child{ border-bottom:0; padding-bottom:0 }
.get__list dt{
  display:flex; align-items:center; gap:9px; align-self:start; padding-top:3px;
  font:500 12.5px/1.3 "JetBrains Mono", ui-monospace, monospace;
  letter-spacing:.12em; text-transform:uppercase; color:var(--paper);
}
.get__list dt .ic{ width:18px; height:18px; color:var(--amber) }
.get__list dd{ margin:0; font-size:16px; line-height:1.55; color:var(--paper-2) }
.get__list dd span{ display:block; margin-top:6px; color:var(--paper); font-weight:700 }

/* ============================================================
   REVIEWS
   ============================================================ */
.revs{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(12px,1.6vw,20px) }
.revs:focus-visible{ outline-offset:6px; border-radius:var(--r) }
.rev{
  display:flex; flex-direction:column; gap:12px;
  padding:22px; border:1px solid var(--line); border-radius:var(--r);
  background:var(--ink-2);
  transition:border-color .22s var(--ease), transform .22s var(--ease);
}
.rev:hover{ border-color:var(--line-hi) }
.rev__st{ display:flex; gap:3px; color:var(--amber) }
.rev__st .ic{ width:15px; height:15px }
/* отзывы с Яндекса бывают длинными — обрезаем, чтобы карточки не разъезжались */
.rev p{
  font-size:15px; line-height:1.55; color:var(--paper); flex:1;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:5; line-clamp:5; overflow:hidden;
}
/* «Читать полностью» раскрывает текст на месте */
.rev.is-open p{ display:block; -webkit-line-clamp:unset; line-clamp:none; overflow:visible }
.rev__more{ align-self:flex-start; margin-top:-6px }
.rev footer{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding-top:12px; border-top:1px solid var(--line) }
.rev footer b{ font-size:14.5px; font-weight:800 }
.rev footer time{
  font:500 12px/1 "JetBrains Mono", ui-monospace, monospace;
  letter-spacing:.02em; color:var(--paper-2);
}

/* ============================================================
   CONTACTS
   ============================================================ */
/* Заголовок, под ним карточки точек (js/locations.js): ПК и планшет —
   рядом, телефон — лента (см. RESPONSIVE). Ниже — общая карта
   с переключателем точек. */
.con__head{
  display:flex; align-items:flex-end; justify-content:space-between; flex-wrap:wrap;
  gap:10px 32px; margin-bottom:clamp(20px,3vw,36px);
}
.con__head h2{ font-size:clamp(32px,4vw,52px) }
.con__head p{ margin:0; max-width:32ch; font-size:16px; line-height:1.45; color:var(--paper-2) }

.locs{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(12px,1.6vw,20px) }
.locs:focus-visible{ outline-offset:6px; border-radius:var(--r) }
/* без JS — простой список вместо карточек */
.locs__plain{ grid-column:1 / -1; margin:0; padding:0; list-style:none; display:grid; gap:10px; font-size:17px; font-weight:700 }
.locs__plain a{ color:var(--amber) }
.locs__dots{ display:none }

.loc{
  position:relative; display:flex; flex-direction:column; min-width:0;
  background:var(--ink-2); border:1px solid var(--line); border-radius:var(--r); overflow:hidden;
  transition:border-color .25s var(--ease);
}
/* точка, которую сейчас показывает карта */
.loc.is-on{ border-color:var(--line-hi) }
.loc__ph{ position:relative; aspect-ratio:4/3; margin:0; overflow:hidden; background:var(--ink-3) }
/* снимок любой формы вписывается в 4:3 и высоту карточки не растит */
.loc__ph img{ position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:cover }
/* фото ещё нет — знак кафе на угле, как у блюд без снимка */
.loc__ph--none{
  display:grid; place-content:center; justify-items:center; gap:12px; color:var(--line-hi);
  background:radial-gradient(120% 90% at 50% 0%, var(--ink-3), var(--ink-2));
}
.loc__ph--none .ic{ width:64px; height:64px }
.loc__ph--none span{
  font:500 12px/1 "JetBrains Mono", ui-monospace, monospace;
  letter-spacing:.12em; text-transform:uppercase; color:var(--paper-2);
}
.loc__new{
  position:absolute; top:12px; left:12px; padding:7px 11px; border-radius:99px;
  background:var(--amber); color:var(--ink);
  font:800 12px/1 "JetBrains Mono", ui-monospace, monospace; letter-spacing:.06em; text-transform:uppercase;
}
.loc__body{ flex:1; display:flex; flex-direction:column; gap:14px; padding:18px 20px 20px }
.loc__title{ font-size:clamp(24px,2.4vw,30px) }
.loc__addr{ margin:-6px 0 0; font-size:15px; line-height:1.4; color:var(--paper-2) }
.loc__list{ margin:0; display:grid; gap:1px; background:var(--line); border-block:1px solid var(--line) }
.loc__list > div{ display:grid; grid-template-columns:120px minmax(0,1fr); gap:12px; align-items:baseline; padding:11px 0; background:var(--ink-2) }
.loc__list dt{
  display:flex; align-items:center; gap:8px;
  font:500 12px/1.3 "JetBrains Mono", ui-monospace, monospace;
  letter-spacing:.12em; text-transform:uppercase; color:var(--paper-2);
}
.loc__list dt .ic{ width:16px; height:16px; color:var(--amber) }
.loc__list dd{ margin:0; font-size:16px; font-weight:700; line-height:1.4 }
/* маршрут — во всю ширину, под ним звонок и WhatsApp */
/* minmax(0,…): длинная подпись не раздвигает колонку за край карточки */
.loc__btns{ margin-top:auto; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px }
.loc__btns .btn{ padding:0 14px }
.loc__btns .btn--amber{ grid-column:1 / -1 }
.loc__btns .ic{ width:19px; height:19px }

.con__map{
  margin-top:clamp(16px,2vw,24px);
  border:1px solid var(--line); border-radius:var(--r); overflow:hidden;
  background:var(--ink-2);
}
.con__mapview{ position:relative; height:clamp(260px,26vw,340px); background:var(--ink-3) }
/* Тёмная тема Яндекса синеватая — фильтр уводит её в уголь,
   а красную метку и подписи мест — в янтарь */
.con__mapview iframe{
  display:block; width:100%; height:100%; border:0;
  filter:sepia(.6) saturate(1.2) hue-rotate(25deg);
}

/* Заслонка поверх карты: пока она есть, колесо и палец листают страницу */
.con__mapguard{ position:absolute; inset:0; display:grid; place-items:center; cursor:pointer }
.con__mapguard:focus-visible{ outline-offset:-3px; border-radius:var(--r) var(--r) 0 0 }
.con__maphint{
  padding:11px 18px; border-radius:99px;
  background:rgba(11,11,12,.88); border:1px solid var(--line-hi);
  color:var(--paper); font-weight:800; font-size:14px;
  opacity:0; transform:translateY(6px); pointer-events:none;
  transition:opacity .25s var(--ease), transform .25s var(--ease);
}
.con__map.is-hint .con__maphint{ opacity:1; transform:none }
.con__map.is-live .con__mapguard{ display:none }

.con__mapbar{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:10px 10px 10px 20px; border-top:1px solid var(--line);
}
.con__mapaddr{
  display:inline-flex; align-items:center; gap:8px;
  font:500 12.5px/1 "JetBrains Mono", ui-monospace, monospace;
  letter-spacing:.02em; color:var(--paper-2);
}
.con__mapaddr .ic{ width:16px; height:16px; color:var(--amber) }
/* переключатель точки на карте — как выбор размера в меню */
.con__mapsw{ margin:0; background:var(--ink) }

/* «Амур Бургер снаружи» — над фото зала: квадратные кадры лентой,
   на ПК видно все четыре, на планшете три, на телефоне один и край
   следующего */
.outw{ margin-bottom:clamp(28px,4vw,56px) }
.outs{
  display:flex; gap:12px; overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory; padding-bottom:10px;
}
.outs:focus-visible{ outline-offset:4px; border-radius:var(--r) }
.outs__ph{
  flex:0 0 calc((100% - 36px) / 4); aspect-ratio:1; margin:0; scroll-snap-align:start;
  border-radius:var(--r); overflow:hidden; background:var(--ink-2); border:1px solid var(--line);
}
.outs__ph img{ width:100%; height:100%; object-fit:cover }
.outs__cap{
  margin-top:4px;
  font:500 12.5px/1 "JetBrains Mono", ui-monospace, monospace;
  letter-spacing:.02em; color:var(--paper-2);
}

/* ============================================================
   FOOTER
   ============================================================ */
.ftr{ border-top:1px solid var(--line); background:var(--ink-2) }
.ftr__in{
  max-width:var(--maxw); margin:0 auto; padding:clamp(44px,5vw,68px) var(--pad);
  /* соцсети слева, логотип с подписью по центру, разделы справа */
  display:grid; grid-template-columns:1fr auto 1fr;
  grid-template-areas:"soc brand nav";
  gap:clamp(24px,3vw,36px) clamp(16px,4vw,48px);
}
.ftr__brand{ grid-area:brand; display:flex; gap:16px; align-items:flex-start }
.ftr__nav{ grid-area:nav; justify-self:end; justify-items:end }
.ftr__soc{ grid-area:soc; justify-self:start }

.ftr__brand p{ font-size:14.5px; color:var(--paper-2); line-height:1.55 }
/* адреса точек — к их карточкам в «Контактах» */
.ftr__brand p a{ color:var(--paper); text-decoration:underline; text-decoration-color:var(--line-hi); text-underline-offset:3px }
.ftr__brand p a:hover{ color:var(--amber); text-decoration-color:currentColor }
.ftr__nav{ display:grid; gap:2px; align-content:start; font-weight:700; font-size:15px }
.ftr__nav a{ display:inline-flex; align-items:center; min-height:40px; color:var(--paper-2); transition:color .18s var(--ease); width:max-content }
.ftr__nav a:hover{ color:var(--amber) }
.ftr__soc{ display:grid; gap:2px; align-content:start }
.ftr__soc a{
  display:inline-flex; align-items:center; gap:11px; width:max-content; min-height:40px;
  color:var(--paper-2); font-size:15px; font-weight:700;
  transition:color .18s var(--ease);
}
.ftr__soc a:hover{ color:var(--amber) }
.ftr__soc .ic{ width:19px; height:19px }

.ftr__bar{
  max-width:var(--maxw); margin:0 auto; padding:20px var(--pad);
  border-top:1px solid var(--line);
  display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap;
  font-size:13px; color:var(--paper-2);
}
.ftr__bar a{ text-decoration:underline; text-underline-offset:3px; transition:color .18s var(--ease) }
.ftr__bar a:hover{ color:var(--amber) }

/* ============================================================
   COOKIE NOTICE  (js/cookie.js)
   ============================================================ */
/* над полосой корзины: z-index выше неё, а когда полоса видна (корзина
   не пуста и херо уже прокручен, см. heroWatch) — плашка встаёт над ней */
.cookiebar{
  position:fixed; z-index:81;
  left:max(16px,env(safe-area-inset-left)); bottom:max(16px,env(safe-area-inset-bottom));
  max-width:400px; padding:16px 16px 16px 18px;
  display:flex; align-items:center; gap:16px;
  background:var(--ink-3); border:1px solid var(--line-hi); border-radius:var(--r);
  box-shadow:0 12px 32px rgba(0,0,0,.45);
  font-size:14px; line-height:1.5; color:var(--paper-2);
  animation:cookiebar .45s var(--ease) both;
  transition:bottom .55s var(--ease);
}
body.has-cart:not(.hero-in) .cookiebar{ bottom:calc(max(16px,env(safe-area-inset-bottom)) + 92px) }
.cookiebar a{ color:var(--paper); text-decoration:underline; text-underline-offset:3px }
.cookiebar a:hover{ color:var(--amber) }
.cookiebar__ok{ --bh:42px; padding:0 18px; flex:none }
@keyframes cookiebar{ from{ opacity:0; transform:translateY(16px) } }
@media (prefers-reduced-motion:reduce){ .cookiebar{ animation:none; transition:none } }
@media (max-width:760px){
  .cookiebar{ left:10px; right:10px; max-width:none; bottom:max(10px,env(safe-area-inset-bottom)) }
  body.has-cart:not(.hero-in) .cookiebar{ bottom:calc(max(10px,env(safe-area-inset-bottom)) + 94px) }
}

/* ============================================================
   PWA  (js/pwa.js): баннер установки и плашка «нет интернета»
   ============================================================ */
/* баннер стоит там же, где плашка cookie, — они не выходят вместе */
.installbar{
  position:fixed; z-index:81;
  left:max(16px,env(safe-area-inset-left)); bottom:max(16px,env(safe-area-inset-bottom));
  max-width:420px; padding:14px 8px 14px 18px;
  display:flex; align-items:center; gap:12px;
  background:var(--ink-3); border:1px solid var(--line-hi); border-radius:var(--r);
  box-shadow:0 12px 32px rgba(0,0,0,.45);
  font-size:14px; line-height:1.45; color:var(--paper-2);
  animation:cookiebar .45s var(--ease) both;
  transition:bottom .55s var(--ease);
}
body.has-cart:not(.hero-in) .installbar{ bottom:calc(max(16px,env(safe-area-inset-bottom)) + 92px) }
.installbar p{ flex:1; margin:0 }
.installbar b{ display:block; margin-bottom:2px; color:var(--paper); font-size:15px }
.installbar b.installbar__k{ display:inline; margin:0; color:var(--amber) }
.installbar__go{ --bh:42px; padding:0 18px; flex:none }
.installbar__x{ flex:none; margin-left:-4px }
.installbar__share{
  width:18px; height:18px; vertical-align:-3px;
  fill:none; stroke:var(--amber); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;
}
@media (prefers-reduced-motion:reduce){ .installbar{ animation:none; transition:none } }
@media (max-width:760px){
  .installbar{ left:10px; right:10px; max-width:none; bottom:max(10px,env(safe-area-inset-bottom)) }
  body.has-cart:not(.hero-in) .installbar{ bottom:calc(max(10px,env(safe-area-inset-bottom)) + 94px) }
}

/* под шапкой, поверх всего, кроме окон; не мешает нажимать */
.netbar{
  position:fixed; z-index:91; top:84px; left:50%; transform:translateX(-50%);
  width:max-content; max-width:calc(100% - 20px); padding:9px 16px;
  background:var(--chili); color:#fff; border-radius:999px;
  box-shadow:0 8px 24px rgba(0,0,0,.4);
  font-size:13px; line-height:1.35; font-weight:600; text-align:center;
  pointer-events:none;
}
.netbar[hidden]{ display:none }

/* /app/ — как поставить на телефон (js/install.js) */
.inst__head{ display:flex; align-items:center; gap:20px }
.inst__icon{ width:88px; height:88px; flex:none; border-radius:22%; border:1px solid var(--line-hi) }
.inst__lead{ margin-top:18px; font-size:17px; line-height:1.55; color:var(--paper-2) }
.inst__card{
  margin-top:28px; padding:24px;
  background:var(--ink-2); border:1px solid var(--line); border-radius:var(--r);
}
.inst__card[hidden]{ display:none }
.doc .inst__card h2{ margin:0 0 14px }
.doc a.btn--amber{ color:var(--ink); text-decoration:none }
.inst__card > p + .btn,.inst__card > p + .inst__promo, .inst__promo + .btn{ margin-top:20px }
.inst__note{ margin-top:12px; font-size:14px; color:var(--paper-2); text-align:center }
.inst__steps{ list-style:none; padding:0; margin:0; counter-reset:step; display:grid; gap:14px }
.inst__steps li{ counter-increment:step; position:relative; min-height:28px; padding-left:42px; line-height:1.5 }
.doc .inst__steps li + li{ margin-top:0 }
.inst__steps li::before{
  content:counter(step); position:absolute; left:0; top:-1px; display:grid; place-items:center;
  width:28px; height:28px; border-radius:50%;
  background:var(--amber-wash); color:var(--amber); font-weight:800; font-size:14px;
}
.inst__promo{ padding:20px; border:1.5px dashed var(--amber); border-radius:var(--r); text-align:center }
.inst__promo[hidden]{ display:none }
.inst__promo-k{ font-size:13px; color:var(--paper-2); text-transform:uppercase; letter-spacing:.08em }
.inst__code{ margin:6px 0; font:700 34px/1.1 "JetBrains Mono", ui-monospace, monospace; color:var(--amber); letter-spacing:.06em }
.inst__promo-t{ font-size:15px }

/* ============================================================
   DOC PAGE  (privacy.html)
   ============================================================ */
.hdr--doc .hdr__act{ margin-left:auto }
.doc{
  max-width:760px; margin:0 auto;
  padding:clamp(40px,6vw,80px) var(--pad) clamp(56px,7vw,96px);
}
.doc h1{ font-size:clamp(32px,5.2vw,54px) }
.doc__date{ margin:14px 0 8px; font:500 13px/1.4 "JetBrains Mono", ui-monospace, monospace; color:var(--paper-2) }
.doc h2{ margin:48px 0 14px; font-size:clamp(22px,2.6vw,28px); line-height:1.15; letter-spacing:-.025em }
.doc h3{ margin:28px 0 10px; font-size:18px; line-height:1.3; letter-spacing:-.01em }
.doc p + p{ margin-top:12px }
.doc ul{ margin:12px 0; padding-left:1.2em }
.doc li + li{ margin-top:6px }
.doc li::marker{ color:var(--amber) }
.doc a{ color:var(--amber); text-decoration:underline; text-underline-offset:3px }
.doc a:hover{ color:var(--amber-hi) }
.doc code{ font:500 .88em "JetBrains Mono", ui-monospace, monospace; background:var(--ink-3); padding:1px 6px; border-radius:6px }
.doc__req{ margin:20px 0 0; border-top:1px solid var(--line) }
.doc__req div{ display:grid; grid-template-columns:200px 1fr; gap:4px 20px; padding:12px 0; border-bottom:1px solid var(--line) }
.doc__req dt{ color:var(--paper-2); font-size:15px }
.doc__req dd{ margin:0 }
/* незаполненные реквизиты видны издалека — их нельзя выкладывать как есть */
.doc__fill{ background:var(--chili-wash); color:var(--chili); padding:1px 6px; border-radius:6px; font-weight:700 }
@media (max-width:560px){
  .doc__req div{ grid-template-columns:1fr }
}
/* та же политика окном на главной (#policy): шапка с крестиком стоит
   на месте, листается только текст. Двойной класс — сильнее общих
   правил .pop__box ниже и в мобильном блоке */
.pop__box.pop__box--doc{ width:min(720px, 100%); display:flex; flex-direction:column; gap:0; padding:0; overflow:hidden }
.pop__box--doc .pop__hd{ margin:0; padding:12px 10px 12px 22px; align-items:center; border-bottom:1px solid var(--line) }
.pop__box--doc .pop__hd h2{ font-size:20px; line-height:1.2; letter-spacing:-.02em }
.pop__box--doc .doc{
  min-height:0; max-width:none; margin:0; overflow-y:auto; overscroll-behavior:contain;
  padding:4px 22px calc(28px + env(safe-area-inset-bottom)); font-size:16px;
}
.pop__box--doc .doc h2{ margin-top:32px; font-size:21px }
.doc__wait{ padding:24px 0; color:var(--paper-2) }

/* ============================================================
   STICKY CART BAR  — the authored moment
   ============================================================ */
.cartbar{
  position:fixed; z-index:80;
  left:max(16px,env(safe-area-inset-left)); right:max(16px,env(safe-area-inset-right));
  bottom:max(16px,env(safe-area-inset-bottom));
  max-width:560px; margin-inline:auto;
  background:var(--ink-3); border:1px solid var(--line-hi);
  border-radius:var(--r);
  overflow:hidden;
  transform:translateY(140%);
  transition:transform .55s var(--ease);
}
.cartbar.is-up{ transform:translateY(0) }
/* над херо полоса уезжает вниз, ниже — всегда на месте (heroWatch) */
body.hero-in .cartbar.is-up{ transform:translateY(140%) }
@media (prefers-reduced-motion:reduce){ .cartbar{ transition:none } }

.cartbar__main{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  width:100%; padding:13px 15px 13px 13px; text-align:left;
}
.cartbar__left{ display:flex; align-items:center; gap:13px; min-width:0 }
.cartbar__badge{
  display:grid; place-items:center; width:42px; height:42px; flex:none;
  border-radius:12px; background:var(--amber); color:var(--ink);
  font-weight:900; font-size:17px; font-variant-numeric:tabular-nums;
}
.cartbar__meta{ display:grid; gap:2px; min-width:0 }
.cartbar__meta b{ font-size:17px; font-weight:900; font-variant-numeric:tabular-nums; letter-spacing:-.02em }
/* «до бесплатной доставки 600 ₽» на узком телефоне переносится на вторую строку */
.cartbar__meta small{ font-size:12.5px; line-height:1.25; color:var(--paper-2); text-wrap:balance }
.cartbar__go{
  display:inline-flex; align-items:center; gap:5px; flex:none;
  padding:12px 18px; border-radius:99px;
  background:var(--amber); color:var(--ink); font-weight:800; font-size:15px;
  transition:background .18s var(--ease);
}
.cartbar__main:hover .cartbar__go{ background:var(--amber-hi) }
.cartbar__go .ic{ width:16px; height:16px; stroke-width:2.4 }

.cartbar__meter{ height:3px; background:var(--ink-3) }
.cartbar__meter i{
  display:block; height:100%; width:100%; background:var(--amber);
  transform:scaleX(0); transform-origin:left;
  transition:transform .7s var(--ease), background .3s var(--ease);
}
.cartbar__meter i.is-full{ background:var(--amber-hi) }

/* ============================================================
   DRAWER
   ============================================================ */
/* заказ поверх карусели: затемнение между ними (см. syncLayers) */
body.is-stacked .scrim{ z-index:97 }
.scrim{ position:fixed; inset:0; z-index:95; background:rgba(0,0,0,.72); backdrop-filter:blur(3px); animation:fade .3s var(--ease) }
@keyframes fade{ from{ opacity:0 } }

/* Корзина и панели — на ink-2 с рамкой line-hi: отделены от фона страницы */
.drawer{
  position:fixed; z-index:98; top:0 ;right:0; bottom:0;
  width:min(460px,100vw);
  background:var(--ink-2); border-left:1px solid var(--line-hi);
  display:flex; flex-direction:column;
  animation:slidein .32s var(--ease);
}
@keyframes slidein{ from{ transform:translateX(100%) } }
@media (prefers-reduced-motion:reduce){ .drawer,.scrim{ animation:none } }

.drawer__hd{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:20px 16px 20px 24px; border-bottom:1px solid var(--line); flex:none;
}
.drawer__hd h2{ font-size:24px }
.drawer__body{ flex:1; overflow-y:auto; padding:4px 24px 24px; overscroll-behavior:contain }
.drawer__ft{ flex:none; padding:16px 24px calc(16px + env(safe-area-inset-bottom)); border-top:1px solid var(--line-hi); background:var(--ink-3) }
.drawer:focus{ outline:none }   /* фокус ставится на панель при открытии */

/* ---- карусель фото раздела ---- */
.gal{
  position:fixed; z-index:96; left:50%; top:50%;
  width:min(520px, calc(100vw - 32px)); max-height:calc(100dvh - 32px);
  transform:translate(-50%,-50%);
  display:flex; flex-direction:column;
  background:var(--ink-2); border:1px solid var(--line-hi); border-radius:var(--r);
  overflow:hidden; animation:galin .32s var(--ease);
}
@keyframes galin{ from{ opacity:0; transform:translate(-50%,-46%) } }
.gal:focus{ outline:none }
.gal__hd{
  display:flex; align-items:center; gap:12px; flex:none;
  padding:12px 10px 12px 20px; border-bottom:1px solid var(--line);
}
.gal__hd h2{ font-size:22px; flex:1; min-width:0 }
.gal__n{ color:var(--paper-2); font-size:14px; font-weight:700 }
.gal__view{ position:relative; flex:1; min-height:0; display:flex }
.gal__track{
  flex:1; display:flex; overflow-x:auto; scrollbar-width:none;
  scroll-snap-type:x mandatory; overscroll-behavior-x:contain;
}
.gal__track::-webkit-scrollbar{ display:none }
.gal__sl{ flex:0 0 100%; margin:0; scroll-snap-align:start; scroll-snap-stop:always; display:flex; flex-direction:column; min-width:0 }
.gal__pic{
  aspect-ratio:4/5; max-height:calc(100dvh - 350px); width:100%;
  position:relative; overflow:hidden;
  background:var(--ink-3); display:grid; place-items:center;
}
.gal__pic img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:var(--pos, 50% 50%) }
.gal__err{ color:var(--paper-2); font-size:14px }
.gal__pic{ cursor:pointer }
.gal__pic--none{ color:var(--line-hi) }
.gal__pic--none .ic{ width:96px; height:96px }
/* колонка не шире слайда: лента начинок листается внутри, а не распирает подпись */
.gal__sl figcaption{ display:grid; grid-template-columns:minmax(0, 1fr); gap:8px; padding:14px 20px 0 }
/* название слева, цена справа */
.gal__top{ display:flex; align-items:baseline; justify-content:space-between; gap:12px }
.gal__name{ display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px; min-width:0 }
.gal__sl figcaption b{ font-size:18px; font-weight:900; line-height:1.25 }
.gal__top .price{ font-size:19px }
.gal__note{ font-size:13.5px; color:var(--paper-2) }
/* Состав, вес и соус: панель выезжает снизу поверх фото (#gal.is-info).
   Название — кнопка со стрелкой вверх; над подписью — «ручка», знак,
   что подпись тянется вверх. */
.gal__name--btn{ text-align:left; color:inherit }
.gal__ic{ width:16px; height:16px; margin-left:6px; vertical-align:-1px; color:var(--paper-2); stroke-width:2; transform:rotate(-90deg); transition:transform .3s var(--ease), color .2s var(--ease) }
.gal.is-info .gal__ic{ transform:rotate(90deg); color:var(--amber) }
.gal__sl figcaption.has-info{ position:relative }
.gal__sl figcaption.has-info::before{
  content:""; position:absolute; top:5px; left:50%; width:36px; height:4px; margin-left:-18px;
  border-radius:99px; background:var(--line-hi);
}
.gal__info{
  position:absolute; left:0; right:0; bottom:0; z-index:1; max-height:100%; overflow:hidden;
  padding:16px 20px 18px; cursor:auto;
  background:rgba(20,20,23,.94); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-top:1px solid var(--line-hi); border-radius:var(--r) var(--r) 0 0;
  transform:translateY(102%); visibility:hidden;
  transition:transform .38s cubic-bezier(.22,1,.36,1), visibility 0s linear .38s;
}
.gal.is-info .gal__info{ transform:none; visibility:visible; transition:transform .42s cubic-bezier(.22,1,.36,1) }
.gal__info .dinfo__txt{ padding:0; gap:12px }
.gal__info .dinfo__comp{ font-size:15px; line-height:1.45; color:var(--paper) }
.gal__info .dinfo__comp::before{
  content:"Состав"; display:block; margin-bottom:6px;
  font:500 10.5px/1 "JetBrains Mono", ui-monospace, monospace;
  letter-spacing:.12em; text-transform:uppercase; color:var(--paper-2);
}
.gal__info .dinfo__stats dd{ font-size:16px }
@media (prefers-reduced-motion:reduce){ .gal__info,.gal__ic{ transition:none } }
/* размер слева, «В корзину» или счётчик справа */
.gal__row{ display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:44px }
.gal__row .sizes{ margin-top:0; background:var(--ink-3) }
/* в карусели лента начинок ужимается, «Добавить» остаётся справа целиком */
.gal__row .sizes--scroll{ flex:0 1 auto; width:auto }
.gal__row .gal__buy{ flex:none }
.gal__nav{
  position:absolute; top:calc(50% - 40px); width:44px; height:44px;
  display:grid; place-items:center; border-radius:50%;
  background:rgba(11,11,12,.72); backdrop-filter:blur(6px); color:var(--paper);
  border:1px solid var(--line-hi);
  transition:opacity .18s var(--ease), background .18s var(--ease);
}
.gal__nav:hover{ background:var(--ink) }
.gal__nav:disabled{ opacity:0; pointer-events:none }
.gal__nav--prev{ left:12px }
.gal__nav--prev .ic{ transform:rotate(180deg) }
.gal__nav--next{ right:12px }
.gal__dots{ display:flex; justify-content:center; gap:6px; padding:10px 0 0; flex:none }
.gal__dots:empty{ display:none }
.gal__dots i{ width:6px; height:6px; border-radius:99px; background:var(--line-hi); transition:width .25s var(--ease), background .25s var(--ease) }
.gal__dots i.is-on{ width:18px; background:var(--amber) }
.gal__buy{ margin-left:auto; flex:none }
.gal__add{ --bh:44px; gap:6px; padding:0 18px }
.gal__add .ic{ width:16px; height:16px; stroke-width:2.4 }
.gal__buy .qty{ display:none; min-width:0; height:44px; padding:0 2px }
.gal__buy .qty .qty__n{ min-width:28px; font-size:16px }
.gal__buy.is-in .gal__add{ display:none }
.gal__buy.is-in .qty{ display:flex }
/* карточка корзины внизу карусели — как полоса заказа на странице */
.gal__cart{
  flex:none; margin:12px 20px calc(16px + env(safe-area-inset-bottom));
  background:var(--ink-3); border:1px solid var(--line-hi); border-radius:var(--r); overflow:hidden;
}
.gal__cart .cartbar__main{ padding:10px 10px 10px 10px }
.gal__cart .cartbar__badge{ width:38px; height:38px }
.gal__cart .cartbar__go{ padding:10px 16px }
@media (prefers-reduced-motion:reduce){ .gal,.gal__dots i{ animation:none; transition:none } }

/* строки заказа — как строки печатного меню: линии, без карточек */
.citem{ padding:16px 0 12px; border-bottom:1px solid var(--line) }
.citem__row{ display:flex; align-items:flex-start; gap:14px }
.citem__main{ flex:1; min-width:0; display:grid; gap:5px }
.citem__name{ font-weight:800; font-size:15.5px; line-height:1.3 }
.citem__sz{
  display:block;
  font:500 12px/1.3 "JetBrains Mono", ui-monospace, monospace;
  letter-spacing:.02em; color:var(--paper-2);
}
.citem__x{ font-size:13.5px; line-height:1.4; color:var(--amber) }
/* «+ Добавить» / «+ Добавить соус» под блюдом; выбранное — «Изменить» */
.citem__add{
  justify-self:start; display:inline-flex; align-items:center; gap:6px;
  min-height:34px; margin-top:3px; padding:0 13px 0 10px;
  border:1px solid var(--line-hi); border-radius:99px;
  font-weight:700; font-size:13.5px; color:var(--paper);
  transition:border-color .18s var(--ease), color .18s var(--ease);
}
.citem__add .ic{ width:14px; height:14px; color:var(--amber); stroke-width:2.4 }
.citem__add:hover{ border-color:var(--amber); color:var(--amber) }
.citem__xrow{ display:flex; flex-wrap:wrap; align-items:center; gap:0 12px }
.citem__edit{
  min-height:32px; font-weight:800; font-size:13.5px; color:var(--paper-2);
  text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px;
}
.citem__edit:hover{ color:var(--paper) }
.citem__warn{ font-size:13px; line-height:1.4; color:var(--paper-2); padding-left:10px; border-left:2px solid var(--chili) }
.citem__end{ display:grid; justify-items:end; gap:9px; flex:none }
/* одно блюдо с разными добавками: варианты под названием, с линией слева */
.cvars{ display:grid; margin-top:6px; padding-left:12px; border-left:2px solid var(--line-hi) }
.cvar{ padding:10px 0 }
.cvar + .cvar{ border-top:1px dashed var(--line) }
.cvar:last-child{ padding-bottom:0 }
.cvar__none{ font-size:13.5px; line-height:1.4; color:var(--paper-2) }
.cvar .citem__add{ margin-top:0 }
.citem__sum{ font-weight:900; font-size:15.5px; font-variant-numeric:tabular-nums }

/* кнопка-ссылка: второстепенные действия в строке */
.linkbtn{
  display:inline-flex; align-items:center; min-height:36px; padding:0;
  font-weight:800; font-size:14px; color:var(--amber);
  text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:4px;
  transition:color .16s var(--ease);
}
.linkbtn:hover{ color:var(--amber-hi) }
/* «Очистить корзину» — под списком, красным, с иконкой */
.cclear{ display:flex; justify-content:flex-end; padding-top:6px }
.linkbtn--danger{ gap:7px; color:var(--chili); text-decoration:none }
.linkbtn--danger:hover{ color:#ff7a63; text-decoration:underline }
.linkbtn--danger .ic{ width:17px; height:17px }
.cundo{ font-size:14.5px; color:var(--paper-2); margin:0 }
/* низкий экран: корзина прокручивается целиком, итог и кнопка
   не съедают всё место */
@media (max-height:600px){
  .drawer{ overflow-y:auto; overscroll-behavior:contain }
  .drawer__body{ flex:none; overflow:visible }
}

.step{ display:flex; align-items:center; gap:2px; border:1px solid var(--line); border-radius:99px; padding:2px }
.step button{ display:grid; place-items:center; width:30px; height:30px; border-radius:50%; color:var(--paper-2); transition:background .16s var(--ease), color .16s var(--ease) }
.step button:hover{ background:var(--ink-3); color:var(--paper) }
.step button .ic{ width:15px; height:15px; stroke-width:2.2 }
.step b{ min-width:24px; text-align:center; font-weight:800; font-size:14px; font-variant-numeric:tabular-nums }

/* подсказка в строке меню: порции этого блюда с добавками */
.row__more{ grid-column:1/-1; display:block; margin-top:6px; font-size:13px; color:var(--amber) }

.cempty{ display:grid; justify-items:center; gap:16px; text-align:center; padding:56px 12px }
.cempty .ic{ width:44px; height:44px; color:var(--line-hi); stroke-width:1.4 }
.cempty b{ font-size:18px; font-weight:800 }
.cempty p{ color:var(--paper-2); font-size:14.5px; max-width:30ch }

.ctot{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:4px }
.ctot span{ font-size:15px; color:var(--paper-2) }
.ctot b{ font-size:26px; font-weight:900; font-variant-numeric:tabular-nums; letter-spacing:-.03em }

/* прогресс до бесплатной доставки в итоге корзины */
.cfree{ margin:2px 0 14px }
/* остаток до бесплатной доставки — серым, как «Итого»; порог достигнут — янтарём */
.cfree p{ font-size:14px; line-height:1.35; margin-bottom:7px; color:var(--paper-2) }
.cfree.is-full p{ font-weight:800; color:var(--amber) }

/* способ получения над итогом — тот же переключатель, что размер в меню,
   на всю ширину, три равные части */
.cway{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); width:auto; margin:0 0 14px; border:1px solid transparent }
/* без выбора нажали «Отправить» — красная рамка и подсказка под ней */
.cway.is-invalid{ border-color:var(--chili); margin-bottom:8px }
.cway__err{ margin:0 0 12px 4px; font-size:13.5px; font-weight:700; color:#FF8A75 }
.cway__hd{ display:block; margin:0 0 8px 4px; font-size:15.5px; font-weight:800 }
.cway .size{ justify-content:center; padding:0 8px; white-space:nowrap; font:700 14.5px/1 Nunito, system-ui, sans-serif; letter-spacing:0 }
/* выбранный способ — светлая плашка: виден сразу, но не спорит с янтарной «Отправить» */
.cway .size[aria-checked="true"]{ background:var(--paper); color:var(--ink) }
/* точка, которая готовит, — тот же переключатель, две равные части.
   Адрес всегда в одну строку: «Шогенцукова, 16» ≈ 8.44 × размер шрифта,
   кнопка ≈ (ширина экрана − 52) / 2 − 12 — на 320 px шрифт ≈ 14.3 px, от
   330 px — 14.5 px, как у способа; уже 300 px — многоточие, не перенос */
.cpoint{ grid-template-columns:repeat(2,minmax(0,1fr)) }
.cpoint .size{ min-width:0; padding:0 6px; overflow:hidden; text-overflow:ellipsis; font-size:clamp(12px, 5.9vw - 4.6px, 14.5px) }
@media (min-width:761px){ .cpoint .size{ font-size:14.5px } }
/* точка не выбрана: «Отправить» приглушена, но нажимается — нажатие
   подсвечивает выбор (aria-disabled отключил бы нажатие) */
#send.is-wait{ opacity:.45 }
/* адрес и телефон / комментарий — под переключателем способа.
   Одна строка, растёт с текстом (fitNote в app.js). 16px — меньше iOS увеличивает страницу при фокусе */
.cnote-in{
  display:block; width:100%; margin:0 0 14px; padding:12px 16px;
  max-height:132px; resize:none; overflow-y:auto; field-sizing:content;
  font:inherit; font-size:16px; line-height:1.4; color:var(--paper);
  background:var(--ink-2); border:1px solid var(--line-hi); border-radius:var(--r);
  transition:border-color .15s;
}
.cnote-in[hidden]{ display:none }
.cnote-in::placeholder{ color:var(--paper-2); opacity:.75 }
.cnote-in:hover{ border-color:#45454C }
.cnote-in:focus{ outline:none; border-color:var(--amber) }
/* доставка без адреса — как у переключателя способа */
.cnote-in.is-invalid{ border-color:var(--chili); margin-bottom:8px }
.cfree__bar{ height:4px; border-radius:99px; background:var(--ink); overflow:hidden }
.cfree__bar i{
  display:block; height:100%; background:var(--amber);
  transform:scaleX(0); transform-origin:left; transition:transform .5s var(--ease);
}
.cfree.is-full .cfree__bar i{ background:var(--amber-hi) }
@media (prefers-reduced-motion:reduce){ .cfree__bar i{ transition:none } }
/* одна строка на любой ширине: текст ≈ 22.3 × размер шрифта, место —
   ширина экрана − 40; на 320 px ≈ 12.3 px, от 345 px — 13.5 px */
.cnote{ margin-top:14px; font-size:clamp(11.5px, 4.4vw - 1.8px, 13.5px); color:var(--paper-2); line-height:1.5; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }

/* ---- окна поверх корзины: добавки к блюду, предупреждение ----
   свой фон-затемнение, выше корзины; на телефоне — лист снизу */
.pop{
  position:fixed; inset:0; z-index:100; display:flex; align-items:center; justify-content:center;
  padding:16px; background:rgba(0,0,0,.6); animation:popbg .25s var(--ease);
}
@keyframes popbg{ from{ background-color:transparent } }
.pop[hidden]{ display:none }
.pop__box{
  width:min(420px, 100%); max-height:calc(100dvh - 32px); overflow-y:auto; overscroll-behavior:contain;
  display:grid; gap:16px; padding:20px;
  background:var(--ink-2); border:1px solid var(--line-hi); border-radius:var(--r);
  animation:popin .3s var(--ease);
}
.pop__box:focus{ outline:none }
@keyframes popin{ from{ opacity:0; transform:translateY(14px) } }
.pop__hd{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin:-4px -8px 0 0 }
.pop__hd h2{ font-size:22px }
.pop__sub{ margin:4px 0 0; font-size:14px; line-height:1.4; color:var(--paper-2) }
/* «Сколько порций: − 2 из 5 +» — подпись слева, счётчик справа */
.xcount{ display:flex; align-items:center; justify-content:space-between; gap:12px }
.xcount[hidden]{ display:none }
.xcount__txt{ display:grid; gap:3px; min-width:0 }
.xcount__txt b{ font-size:15.5px; font-weight:800 }
.xcount__txt span{ font-size:13px; color:var(--paper-2) }
.xcount__step{ flex:none; background:var(--ink-3); border-color:var(--line-hi) }
.xcount__step button{ width:38px; height:38px; color:var(--paper) }
.xcount__step button[aria-disabled="true"]{ opacity:.35; cursor:default }
.xcount__step button[aria-disabled="true"]:hover{ background:none }
.xcount__step b{ min-width:56px; font-size:15px; white-space:nowrap }
/* «Соус в блюде: Зелёный / Красный» — переключатель как размер */
.xsauce{ display:grid; gap:10px }
.xsauce__hd{ display:flex; align-items:baseline; justify-content:space-between; gap:12px }
.xsauce__hd b{ font-size:15.5px; font-weight:800 }
.xsauce__hd span{ font-size:13px; color:var(--paper-2) }
.xsauce .sizes{ display:grid; grid-template-columns:1fr 1fr; width:auto; margin:0; background:var(--ink-3) }
.xsauce .size{ justify-content:center; font:700 14px/1 Nunito, system-ui, sans-serif; letter-spacing:0 }
.xlist{ display:grid; border-top:1px solid var(--line) }
.xopt{
  display:flex; align-items:center; gap:14px; min-height:54px; padding:8px 2px;
  border-bottom:1px solid var(--line); text-align:left; color:var(--paper);
  -webkit-tap-highlight-color:transparent;
}
.xopt__box{
  width:24px; height:24px; flex:none; display:grid; place-items:center;
  border:1.5px solid var(--line-hi); border-radius:7px;
  transition:background .16s var(--ease), border-color .16s var(--ease);
}
.xopt__box .ic{ width:16px; height:16px; stroke-width:2.8; color:var(--ink); opacity:0; transition:opacity .16s var(--ease) }
.xopt:hover .xopt__box{ border-color:var(--amber) }
.xopt[aria-checked="true"] .xopt__box{ background:var(--amber); border-color:var(--amber) }
.xopt[aria-checked="true"] .xopt__box .ic{ opacity:1 }
.xopt__name{ flex:1; min-width:0; display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px; font-weight:700; font-size:15.5px }
.xopt__pr{ font-weight:800; font-size:15px; font-variant-numeric:tabular-nums; color:var(--paper-2) }
.xopt[aria-checked="true"] .xopt__pr{ color:var(--amber) }
/* предупреждение перед WhatsApp — по центру, крупный текст */
/* проверка заказа перед WhatsApp: способ и адрес, блюда, итог, кнопки */
.pop__box--check h2{ font-size:22px }
.ocheck__meta{ display:grid; gap:8px; margin:0 }
.ocheck__meta > div{ display:grid; grid-template-columns:8.5em minmax(0,1fr); gap:12px; align-items:baseline }
.ocheck__meta > div[hidden]{ display:none }
.ocheck__meta dt{ font-size:14px; color:var(--paper-2) }
.ocheck__meta dd{ margin:0; font-size:15.5px; font-weight:700; line-height:1.4; white-space:pre-line; overflow-wrap:anywhere }
.ocheck__list{ list-style:none; margin:0; padding:0; border-block:1px solid var(--line) }
.ocheck__list li{
  display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:12px; align-items:baseline;
  padding:10px 0; border-top:1px solid var(--line);
}
.ocheck__list li:first-child{ border-top:0 }
.ocheck__name{ font-weight:700; font-size:15px; line-height:1.3 }
.ocheck__name small{ display:block; margin-top:2px; font-size:13px; font-weight:600; color:var(--paper-2) }
.ocheck__qty{ font-size:13px; color:var(--paper-2); font-variant-numeric:tabular-nums; white-space:nowrap }
.ocheck__sum{ font-weight:800; font-size:15px; font-variant-numeric:tabular-nums; white-space:nowrap }
.ocheck__tot{ margin:0 }
.ocheck__ask{ margin:0; font-size:14px; line-height:1.45; color:var(--paper-2) }
.ocheck__btns{ display:grid; gap:10px }

/* ---- окно «какая точка»: звонок или WhatsApp ----
   строка — адрес и номер слева, справа кнопка; на ПК (мышь) ещё
   «скопировать», номер выделяется одним нажатием */
.pop__box--pick{ width:min(480px, 100%) }
.pick{ list-style:none; margin:0; padding:0; display:grid; gap:10px }
.pick__row{
  display:flex; align-items:center; gap:8px; padding:14px 14px 14px 16px;
  background:var(--ink); border:1px solid var(--line); border-radius:var(--r-s);
}
.pick__txt{ flex:1; min-width:0; display:grid; gap:5px }
.pick__txt b{ font-size:17px; font-weight:800; line-height:1.2 }
.pick__num{
  font:500 14px/1.2 "JetBrains Mono", ui-monospace, monospace; letter-spacing:.01em;
  color:var(--paper-2); user-select:all; white-space:nowrap;
}
.pick__copy{ display:none; flex:none }
.pick__go{ flex:none; padding:0 18px }
.pick__go .ic{ width:19px; height:19px }
.pick__note{ margin:0; min-height:1.4em; font-size:14px; color:var(--amber) }
.pick__note:empty{ display:none }
@media (hover:hover) and (pointer:fine){ .pick__copy{ display:grid } }
@media (prefers-reduced-motion:reduce){ .pop,.pop__box{ animation:none } }

/* ---- карусель фото блюд над списком раздела (телефон) ----
   лента по кругу (см. dcarWire в app.js), название — на плашке */
.dcar__track{
  display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:auto;
  overscroll-behavior-x:contain; scrollbar-width:none;
  border-radius:var(--r); border:1px solid var(--line); background:var(--ink-2);
}
.dcar__track::-webkit-scrollbar{ display:none }
.dcar__sl{
  flex:0 0 100%; position:relative; display:block; aspect-ratio:4/3; padding:0;
  scroll-snap-align:start; scroll-snap-stop:always; -webkit-tap-highlight-color:transparent;
}
.dcar__sl:focus-visible{ outline:2px solid var(--amber); outline-offset:-4px; border-radius:var(--r) }
.dcar__sl img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover }
.dcar__name{
  position:absolute; left:10px; bottom:10px; max-width:calc(100% - 20px);
  padding:7px 12px; border-radius:10px;
  background:rgba(11,11,12,.82); border:1px solid var(--line-hi);   /* как подписи фото зала */
  font-weight:800; font-size:15px; line-height:1.25; color:var(--paper); text-align:left;
}
.dcar__dots{ display:flex; justify-content:center; gap:6px; padding-top:10px }
.dcar__dots i{ width:6px; height:6px; border-radius:99px; background:var(--line-hi); transition:width .25s var(--ease), background .25s var(--ease) }
.dcar__dots i.is-on{ width:18px; background:var(--amber) }
@media (prefers-reduced-motion:reduce){ .dcar__dots i, .locs__dots i{ transition:none } }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1080px){
  .nav{ display:none }
  .hdr__act{ margin-left:auto } /* без навигации кнопки уезжают к правому краю */
  .hdr__tel span{ display:none }
  .hdr__tel{ padding:0 13px }
  .outs__ph{ flex-basis:calc((100% - 24px) / 3) }
  .revs{ grid-template-columns:repeat(2,1fr) }
}

/* ============================================================
   HERO — планшет и телефон
   ------------------------------------------------------------
   До 959 px — вертикальный кадр hero-slate-stack (верх снимка —
   ровный тёмный фон).
   ============================================================ */
@media (max-width:959px){
  .hero__brand{ gap:clamp(14px,3vw,22px) }
  .hero__shot img{ position:static; width:100%; height:auto; object-fit:fill }
  /* верх кадра растворяется в фоне страницы — шва нет. 27%: шпажки
     начинаются с 28,7% высоты снимка, градиент кончается выше них */
  .hero__shot::before{ inset:0 0 auto 0; width:auto; height:27%; background:linear-gradient(var(--ink), transparent) }
  .hero__shot::after{ height:10% }
}

/* Планшет: две колонки — текст и вертикальный кадр бургера */
@media (min-width:700px) and (max-width:959px){
  .hero{ grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr); min-height:0; align-items:center }
  .hero__copy{ padding:40px 8px 40px var(--pad); gap:16px }
  .hero__logo{ width:clamp(96px,12vw,112px) }
  .hero__title{ font-size:clamp(30px,4.3vw,38px) }
  .hero__sub{ margin:0 }
  .hero__cta{ margin-top:6px }
  /* кадр прижат к правому краю; левый край мягко уходит в фон */
  .hero__shot{ align-self:end; z-index:0 }
  .hero__shot img{ -webkit-mask-image:linear-gradient(to right, transparent, #000 14%); mask-image:linear-gradient(to right, transparent, #000 14%) }
}

/* Телефон: текст лежит на тёмном верхе снимка.
   hero__copy раскрыт (display:contents), его элементы и фото — строки
   одной сетки. Фото поднимается под текст на 40% своей ширины: это
   высота тёмной части кадра до шпажки. Текст выше — фото просто
   опустится ниже, на бургер текст не заходит. */
@media (max-width:699px){
  .hero{
    grid-template-columns:var(--pad) minmax(0,1fr) var(--pad);
    min-height:0; overflow:clip; padding-top:20px;
  }
  .hero__copy{ display:contents }
  .hero__copy > *, .hero__brand{ grid-column:2; position:relative; z-index:1 }
  .hero__meta{ font-size:12px; letter-spacing:.06em; gap:6px 9px }
  .hero__meta .halal{ padding:6px 10px 6px 8px; letter-spacing:.08em }
  .hero__brand{ margin-top:16px }
  .hero__logo{ width:clamp(84px,24vw,108px) }
  .hero__title{ font-size:clamp(24px,6.9vw,34px) }
  .hero__sub{ margin-top:12px; font-size:16.5px; line-height:1.45; max-width:34ch }
  .hero__shot{
    grid-column:1/-1; grid-row:4; z-index:0;
    justify-self:center; width:min(100%,560px);
    margin-top:calc(min(100%, 560px) * -.4);
  }
  .hero__cta{ grid-row:5; display:grid; grid-template-columns:1fr; gap:10px; margin-top:4px }
  .hero__cta .btn{ width:100% }
  .rating{ grid-row:6; margin:8px 0 26px; flex-wrap:wrap; gap:4px 12px }
  .rating__txt{ white-space:nowrap }
}
@media (min-width:480px) and (max-width:699px){
  .hero__cta{ grid-template-columns:1fr 1fr }
}
/* кадр уже экрана (600–699): боковые края снимка уходят в фон */
@media (min-width:580px) and (max-width:699px){
  .hero__shot img{ -webkit-mask-image:linear-gradient(to right, transparent, #000 10%, #000 90%, transparent); mask-image:linear-gradient(to right, transparent, #000 10%, #000 90%, transparent) }
}

@media (max-width:900px){
  .get{ grid-template-columns:1fr; gap:24px }
}

@media (max-width:760px){
  body{ font-size:16px }
  .burger{ display:flex }
  .hdr__act .btn--amber{ display:none }
  .rows{ grid-template-columns:1fr }
  .row{ padding-block:12px }
  .grp--plain .row{ padding-block:6px }

  /* меню: над списком фото cover-блюда раздела (или иллюстрация снеков),
     фото остальных блюд раскрывается над их названием */
  .grp--view .grp__body{ gap:14px }
  .grp--view .dish{ display:block; order:-1 }
  /* фото над списком — низким кадром 3:2, чтобы список начинался выше;
     кадр держит mpos из menu.js */
  .dish__pic img,
  .dish__fig.is-wide .dish__pic img{ aspect-ratio:3/2; max-height:none; object-position:var(--mpos, var(--pos, 50% 50%)) }
  /* главное фото раздела уже снято 4:3 — показываем кадр целиком */
  .dish__fig.is-hero .dish__pic img{ aspect-ratio:4/3 }
  /* значок у названия — стрелка вниз: под строкой раскрывается карточка */
  .row__ic--img{ display:none }
  .row__ic--more{
    display:inline-block; width:15px; height:15px; margin-left:6px; vertical-align:-2px;
    stroke-width:2.4; transform:rotate(90deg); transition:transform .3s var(--ease);
  }
  .row__view[aria-expanded="true"] .row__ic--more{ transform:rotate(-90deg) }
  .row:has(.row__photo){ cursor:pointer; -webkit-tap-highlight-color:transparent }

  /* фото зала — лента с прокруткой пальцем, без автолистания */
  .cafe{
    display:flex; gap:12px; overflow-x:auto; overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory; scroll-padding-inline:var(--pad);
    margin-inline:calc(var(--pad) * -1); padding:0 var(--pad) 10px;
  }
  .cafe__ph{ flex:0 0 min(78%, 340px); aspect-ratio:3/4; scroll-snap-align:start }
  .outs{ margin-inline:calc(var(--pad) * -1); padding:0 var(--pad) 10px; scroll-padding-inline:var(--pad) }
  .outs__ph{ flex-basis:min(78%, 320px) }

  /* отзывы — лента: листается пальцем влево, следующая карточка
     выглядывает справа и подсказывает, что лента прокручивается */
  .sec__head--row{ gap:14px }
  .revs{
    display:flex; gap:12px; overflow-x:auto; overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory; scroll-padding-inline:var(--pad);
    margin-inline:calc(var(--pad) * -1); padding:0 var(--pad) 10px; align-items:flex-start;
  }
  .rev{ flex:0 0 min(84%, 330px); scroll-snap-align:start; padding:18px; gap:10px }
  .rev footer{ padding-top:10px }
  .size{ min-height:40px; padding:0 16px }
  .tabs{ top:71px; padding-block:10px }
  html{ scroll-padding-top:80px }
  .grp{ scroll-margin-top:58px } /* 80 + 58 = 138 ≥ шапка 71 + лента 61 */
  /* точки — лента: листается пальцем, следующая карточка выглядывает
     справа, точки под лентой показывают, какая видна */
  .locs{
    display:flex; gap:12px; overflow-x:auto; overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory; scroll-padding-inline:var(--pad);
    margin-inline:calc(var(--pad) * -1); padding:0 var(--pad) 2px; scrollbar-width:none;
  }
  .locs::-webkit-scrollbar{ display:none }
  .loc{ flex:0 0 min(86%, 360px); scroll-snap-align:start }
  .locs__dots{ display:flex; justify-content:center; gap:6px; padding-top:12px }
  .locs__dots i{ width:6px; height:6px; border-radius:99px; background:var(--line-hi); transition:width .25s var(--ease), background .25s var(--ease) }
  .locs__dots i.is-on{ width:18px; background:var(--amber) }
  .loc__body{ padding:16px 16px 18px }
  .loc__list > div{ grid-template-columns:1fr; gap:4px; padding:9px 0 }
  /* «Позвонить» и «WhatsApp» в две колонки умещаются с 360px */
  .loc__btns .btn{ padding:0 8px; gap:7px; font-size:14px }
  .loc__btns .ic{ width:18px; height:18px }
  .get__list > div{ grid-template-columns:1fr; gap:6px; padding-block:14px }
  /* логотип с подписью — по центру сверху; ниже соцсети слева,
     разделы сайта прижаты к правому краю */
  .ftr__in{ grid-template-columns:1fr 1fr; grid-template-areas:"brand brand" "soc nav"; padding-block:28px }
  .ftr__brand{ justify-self:center; align-items:center }
  .ftr__bar{ flex-direction:column; gap:8px }
  .drawer{ top:auto; left:0; width:100vw; max-height:min(92vh, 92dvh); border-left:0; border-top:1px solid var(--line-hi); border-radius:var(--r) var(--r) 0 0; animation:slideup .32s var(--ease) }
  @keyframes slideup{ from{ transform:translateY(100%) } }
  .cats{ --cw:96px }
  .cat--none .ic{ width:30px; height:30px }
  /* карусель на телефоне — лист снизу, как заказ */
  .gal{
    left:0; top:auto; bottom:0; width:100vw; max-height:min(94vh, 94dvh); transform:none;
    border-width:1px 0 0; border-radius:var(--r) var(--r) 0 0; animation:slideup .32s var(--ease);
    touch-action:pan-x;   /* вниз лист тянет sheetSwipe() в app.js, вбок — листание фото */
  }
  .gal__hd{ padding-left:16px }
  .gal__pic{ max-height:calc(min(94vh, 94dvh) - 330px) }
  .gal__sl figcaption{ padding-inline:16px }
  .gal__cart{ margin-inline:16px }
  .gal__nav{ width:40px; height:40px }
  /* пока открыт состав, стрелки не ложатся на панель — листают пальцем */
  .gal.is-info .gal__nav{ opacity:0; pointer-events:none }
  .cartbar{ left:10px; right:10px; bottom:max(10px,env(safe-area-inset-bottom)) }
  .cartbar__main{ padding:9px 10px 9px 9px }
  .cartbar__badge{ width:38px; height:38px }
  .cartbar__go{ padding:10px 16px }
  body.has-cart{ padding-bottom:92px }
  /* итог корзины на телефоне компактнее: список и поля остаются видны */
  .drawer__hd{ padding:12px 8px 12px 20px }
  .drawer__body{ padding-inline:20px }
  .drawer__ft{ padding:12px 20px calc(12px + env(safe-area-inset-bottom)) }
  .drawer__ft .ctot b{ font-size:22px }
  .drawer__ft .btn--lg{ --bh:50px }
  .pop{ align-items:flex-end; padding:0 }
  .pop__box{
    width:100%; max-height:min(88vh, 88dvh); border-width:1px 0 0; border-radius:var(--r) var(--r) 0 0;
    padding:18px 20px calc(16px + env(safe-area-inset-bottom)); animation:slideup .32s var(--ease);
  }

}

@media (max-width:560px){
  /* на телефоне под картой — переключатель точек во всю ширину */
  .con__mapaddr{ display:none }
  .con__mapbar{ padding:10px }
  .con__mapsw{ width:100% }
  .con__mapsw .size{ flex:1; justify-content:center; padding:0 10px }
}

@media (max-width:420px){
  .cartbar__go{ padding:12px 14px }
  .cartbar__meta b{ font-size:16px }
}


/* строка «Халяль · ежедневно с 10:00 до 23:00» на 360px — плотнее */
@media (max-width:400px){
  .hero__meta{ letter-spacing:.02em; gap:6px 7px }
  .hero__meta .halal{ padding:6px 8px 6px 7px; letter-spacing:.05em }
}
/* уже 340px — шрифт чуть меньше, строка всё равно в одну */
@media (max-width:359px){ .loc__btns{ grid-template-columns:1fr } }
@media (max-width:340px){
  .hero__meta{ font-size:11px }
}


/* ============================================================
   ЗОНА КАСАНИЯ — НЕ МЕНЬШЕ 44×44 (телефон и сенсорные экраны)
   Кнопки остаются своего размера; невидимый ::after по центру
   ловит касания вокруг. Соседние зоны не перекрываются: между
   кнопками хватает места (счётчики, ряд размеров, корзина).
   В ленте размеров с прокруткой зона не выходит за её поля (3px).
   ============================================================ */
@media (max-width:760px), (pointer:coarse){
  .add, .qty__btn, .step button, .size, .tab,
  .citem__add, .citem__edit, .linkbtn, .hdr__tel{ position:relative }
  .add::after, .qty__btn::after, .step button::after, .size::after, .tab::after,
  .citem__add::after, .citem__edit::after, .linkbtn::after, .hdr__tel::after{
    content:""; position:absolute; left:50%; top:50%;
    width:max(100%, 44px); height:max(100%, 44px);
    transform:translate(-50%, -50%);
  }
  /* столбцы ссылок в подвале и контакты: просто выше строка */
  .ftr__nav, .ftr__soc{ gap:0 }
  .ftr__nav a, .ftr__soc a{ min-height:44px; min-width:44px }
}

/* ============================================================
   TELEGRAM MINI APP
   ------------------------------------------------------------
   html.is-tg — сайт открыт из Телеграма (скрипт в <head>
   index.html); html.tg-ok — скрипт Телеграма загрузился, и
   корзину ведёт его кнопка MainButton (js/tg.js). Обычный сайт
   этих правил не видит.
   Шапка ниже: 56px вместо 72. Отступы безопасных зон даёт скрипт
   Телеграма (--tg-safe-area-*, --tg-content-safe-area-*): сверху —
   под его кнопками в полноэкранном режиме, снизу — над полосой
   «домой» iPhone, если Телеграм не учёл её сам.
   ============================================================ */
html.is-tg{
  --tg-top:calc(var(--tg-safe-area-inset-top, 0px) + var(--tg-content-safe-area-inset-top, 0px));
  --tg-bot:max(env(safe-area-inset-bottom), var(--tg-safe-area-inset-bottom, 0px));
  scroll-padding-top:calc(72px + var(--tg-top));
}
/* «Установить приложение», «Приложение» и наш Телеграм — внутри Телеграма не к месту */
.is-tg [data-tg-hide]{ display:none !important }
.is-tg .hdr{ padding-top:var(--tg-top) }
.is-tg .hdr__in{ height:56px }
.is-tg .brand__mark{ width:34px; height:34px }
.is-tg .tabs{ top:calc(55px + var(--tg-top)) }
.is-tg .mobnav{ top:calc(56px + var(--tg-top)) }
.is-tg .netbar{ top:calc(68px + var(--tg-top)) }
/* tel: открывает звонок не во всех версиях Телеграма — номер можно скопировать */
.is-tg .pick__copy{ display:grid }
/* корзину ведёт MainButton Телеграма — своей полосы и отступа под неё нет */
.tg-ok .cartbar{ display:none }
.tg-ok body.has-cart{ padding-bottom:0 }
.tg-ok body.has-cart .cookiebar{ bottom:max(16px, var(--tg-bot)) }
/* в корзине главная кнопка — тоже Телеграма: «Отправить в WhatsApp» внизу
   окна (js/tg.js), своя кнопка и подпись под ней не нужны — списку больше места */
.tg-ok #send, .tg-ok .drawer__ft .cnote{ display:none }
/* шапка уезжает вверх, пока листают вниз, и возвращается при прокрутке вверх
   (html.tg-hdr-off, js/tg.js): в окне Телеграма, где сверху его заголовок, а
   снизу кнопка «Оформить», меню получает ещё 56px; лента разделов — к верху окна */
.is-tg .hdr{ transition:transform .3s var(--ease) }
.is-tg .tabs{ transition:top .3s var(--ease) }
.tg-hdr-off .hdr{ transform:translateY(calc(var(--tg-top) - 100%)) }
.tg-hdr-off .tabs{ top:var(--tg-top) }
@media (prefers-reduced-motion:reduce){ .is-tg .hdr, .is-tg .tabs{ transition:none } }
/* как в приложении: без вспышки при нажатии (Android), без меню «Сохранить
   фото» при долгом нажатии (iPhone), кнопки не выделяются как текст */
html.is-tg{ -webkit-tap-highlight-color:transparent }
.is-tg img{ -webkit-touch-callout:none }
.is-tg :is(button, .btn, .tab, .size){ -webkit-user-select:none; user-select:none }

@media (max-width:760px){
  html.is-tg{ scroll-padding-top:calc(64px + var(--tg-top)) }  /* 64 + 58 ≥ шапка 56 + лента 61 */
  .tg-ok body.has-cart .cookiebar, .is-tg .cookiebar{ bottom:max(10px, var(--tg-bot)) }
  .is-tg .drawer__ft{ padding-bottom:calc(12px + var(--tg-bot)) }
  .is-tg .pop__box{ padding-bottom:calc(16px + var(--tg-bot)) }
  .is-tg .pop__box.pop__box--doc{ padding-bottom:0 }
  .is-tg .pop__box--doc .doc{ padding-bottom:calc(28px + var(--tg-bot)) }
  .is-tg .gal__cart{ margin-bottom:calc(16px + var(--tg-bot)) }
  .is-tg .mobnav__sheet{ padding-bottom:max(16px, var(--tg-bot)) }
}

/* «Сразу меню» (html.tg-short — SHORT в <head> index.html, включено по
   решению пользователя 28.10.2026): первый экран — строка «Халяль · часы», логотип с заголовком
   и адреса точек; фото, кнопки и рейтинг убраны, меню начинается выше */
.tg-short .hero__shot, .tg-short .hero__cta, .tg-short .rating, .tg-short .ticker{ display:none }
.tg-short .hero{ display:block; min-height:0; padding-top:0 }
.tg-short .hero__copy{ display:flex; gap:12px; padding:18px var(--pad) 22px }
.tg-short .hero__brand{ margin-top:0 }
.tg-short .hero__logo{ width:72px }
.tg-short .hero__title{ font-size:clamp(22px,6vw,30px) }
.tg-short .sec--menu{ padding-top:8px }