/* =========================================================
   Hebi Sushi — components. Shared by every page.
   ========================================================= */

body{
  background:var(--ink);
  color:var(--white);
  font-family:var(--font-body);
  font-size:var(--fs-base);
  line-height:var(--lh-base);
  letter-spacing:var(--tracking-body);
  overflow-x:hidden;
}

/* Film grain. A flat dark page reads as an absence of light; a very
   slightly grained one reads as a photograph of a dark room. Generated
   inline so it costs no request, pinned to the viewport so it does not
   scroll with content, and inert to the pointer. */
body::after{
  content:""; position:fixed; inset:0; z-index:9999; pointer-events:none;
  opacity:.032; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media print{ body::after{ display:none } }

/* ---------- layout primitives ---------- */
.container{
  width:100%;
  max-width:calc(var(--container) + var(--gutter) * 2);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.section{ padding-block:var(--s-section) }
/* A menu page already carries two sticky bars above it; a full section's
   worth of air on top of those just pushes the food off the screen. */
.subbar + main.section,
.subbar + .subbar + main.section{ padding-top:var(--s-6) }
.stack-48{ display:flex; flex-direction:column; align-items:center; gap:var(--s-7) }

/* ---------- display type ---------- */
.h2{
  font-family:var(--font-display);
  font-size:var(--fs-h2); line-height:var(--lh-h2);
  letter-spacing:var(--tracking-tight);
  font-weight:var(--fw-display);
}
.h3{
  font-family:var(--font-display);
  font-size:var(--fs-h3); line-height:var(--lh-h3);
  font-weight:600;
}

/* Small-caps eyebrow. The connective tissue of the whole design: it
   labels a section without competing with the serif above it. */
.eyebrow{
  display:flex; align-items:center; gap:var(--s-3);
  font-size:var(--fs-label); line-height:1;
  letter-spacing:var(--tracking-label); text-transform:uppercase;
  font-weight:500; color:var(--gold);
}
/* A rule that fades out rather than stopping — the fade is what keeps
   it from looking like a table border. */
.eyebrow::after{
  content:""; flex:1 1 auto; height:1px; min-width:20px; max-width:110px;
  background:var(--grad-rule);
}
.eyebrow--center{ justify-content:center }
.eyebrow--plain::after{ display:none }
.eyebrow--center::before{
  content:""; flex:1 1 auto; height:1px; min-width:24px;
  background:linear-gradient(270deg, var(--gold-deep), transparent);
}

/* Section header: eyebrow, then the serif, left-aligned. Centring
   everything was most of why the old page read as a template. */
.sec-head{
  display:flex; flex-direction:column; align-items:flex-start; gap:var(--s-3);
  width:100%; margin-bottom:var(--s-6);
}
.sec-head .eyebrow{ width:min(100%, 300px) }
.sec-head__row{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:var(--s-5); width:100%; flex-wrap:wrap;
}
/* :not(.eyebrow) matters — a bare `.sec-head p` outranks `.eyebrow` on
   specificity and would silently restyle the label. */
.sec-head p:not(.eyebrow){ color:var(--muted); font-size:var(--fs-lead); max-width:52ch }

/* Armenian optical sizing.
   Cormorant is an old-style face with a short x-height; Noto Serif Armenian —
   which picks up the Armenian glyphs — is not. At an identical px size the
   Armenian sets noticeably larger and wider, enough to push the hero onto a
   third line. Trim the display sizes so all three languages hold one shape. */
:lang(hy) .hero__title{ font-size:calc(var(--fs-hero) * .88) }
:lang(hy) .h1,
:lang(hy) .h2{ font-size:calc(var(--fs-h2) * .9) }
:lang(hy) .item-modal__title{ font-size:calc(var(--fs-h1) * .82) }
/* Armenian has no uppercase/lowercase distinction of the kind Latin
   small-caps tracking assumes; the wide tracking just fragments it. */
:lang(hy) .eyebrow{ letter-spacing:.08em }
/* Noto Serif Armenian is a much heavier colour on the page than Cormorant at
   the same numeric weight — 500/600 reads as bold. Take the display weight
   down a step for Armenian so the three languages match in tone. */
:lang(hy) .hero__title,
:lang(hy) .h1,
:lang(hy) .h2,
:lang(hy) .item-modal__title{ font-weight:400 }
:lang(hy) .h3,
:lang(hy) .cat span,
:lang(hy) .prose h2,
:lang(hy) .line__name,
:lang(hy) .panel__title,
:lang(hy) .summary h2{ font-weight:450 }

.visually-hidden{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ---------- buttons ----------
   Squared off and set in the grotesque at label size. The old pill in a
   gold gradient was the single most "template" element on the page. */
.btn{
  position:relative; overflow:hidden;
  display:inline-flex; align-items:center; justify-content:center; gap:var(--s-2);
  height:52px; padding-inline:var(--s-7);
  border-radius:var(--r-pill);
  background:var(--gold); color:var(--ink);
  font-size:var(--fs-label); font-weight:600;
  letter-spacing:var(--tracking-label); text-transform:uppercase;
  transition:background .25s ease, color .25s ease;
}
.btn:hover{ background:var(--gold-lift) }
.btn svg{ width:15px; height:15px; fill:currentColor; transition:transform .25s ease }
.btn:hover svg{ transform:translateX(3px) }

/* Secondary: a gold hairline, filling in on hover. */
.btn--line{
  background:transparent; color:var(--white);
  box-shadow:inset 0 0 0 1px var(--hairline-2);
}
.btn--line:hover{ background:var(--gold); color:var(--ink); box-shadow:inset 0 0 0 1px var(--gold) }

.btn-ghost{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--s-2);
  height:42px; padding-inline:var(--s-5);
  border:1px solid var(--hairline); border-radius:var(--r-pill);
  font-size:var(--fs-sm);
  transition:background .2s ease, border-color .2s ease;
}
.btn-ghost:hover{ background:var(--surface-hover); border-color:var(--hairline-2) }

.btn-round{
  display:inline-flex; align-items:center; justify-content:center;
  width:42px; height:42px; flex:none;
  border-radius:var(--r-pill); background:var(--gold); color:var(--ink);
  transition:background .2s ease, transform .2s ease;
}
.btn-round:hover{ background:var(--gold-lift); transform:scale(1.06) }
.btn-round svg{ width:15px; height:15px; fill:currentColor }

/* =========================================================
   HEADER
   ========================================================= */
.site-header{
  position:sticky; top:0; z-index:50;
  height:var(--header-h);
  display:flex; align-items:center;
  background:var(--header-bg);
  -webkit-backdrop-filter:blur(20px) saturate(140%);
          backdrop-filter:blur(20px) saturate(140%);
}
.site-header .container{
  position:relative;
  display:flex; align-items:center; justify-content:space-between; gap:var(--s-6);
}

/* brand */
.brand{ display:flex; align-items:center; flex:none }
.brand__logo{ width:118px; height:42px }

/* search — a ruled line rather than a filled box; one less rectangle */
.search{
  /* Pinned to the true centre of the header, not centred in whatever space
     the brand and the actions happen to leave over — those two sides are
     different widths, so `margin-inline:auto` lands it off-centre. */
  position:absolute; left:50%; transform:translateX(-50%);
  width:min(360px, 38vw);
  display:flex; align-items:center; gap:var(--s-3);
  height:42px; padding-inline:var(--s-5);
  background:var(--surface); border:1px solid transparent;
  border-radius:var(--r-field);
  transition:border-color .25s ease, background .25s ease;
}
.search:focus-within{ border-color:var(--surface-line); background:var(--surface-hover) }
.search svg{
  width:14px; height:14px; flex:none; color:var(--faint);
  fill:none; stroke:currentColor; stroke-width:1.4;
  stroke-linecap:round; stroke-linejoin:round;
  transition:color .25s ease;
}
.search:focus-within svg{ color:var(--white) }
.search input{
  flex:1; min-width:0; border:0; background:none; color:var(--white);
  font-size:var(--fs-sm);
}
.search input::placeholder{ color:var(--faint) }
/* The native type=search clear button is a browser-drawn glyph that ignores
   the page's palette, so it is switched off and replaced with one that matches
   every other close control on the site. */
.search input::-webkit-search-cancel-button,
.search input::-webkit-search-decoration{ -webkit-appearance:none; appearance:none; display:none }
.search__clear{
  width:24px; height:24px; flex:none;
  display:grid; place-items:center;
  font-size:20px; line-height:1; color:var(--muted);
  border-radius:50%;
  transition:color .15s ease, background .15s ease;
}
.search__clear:hover{ color:var(--white); background:var(--surface-hover) }

/* ---------- search results dropdown ---------- */
.search-results{
  position:absolute; top:calc(100% + var(--s-2)); left:0; right:0; z-index:60;
  max-height:min(60vh, 420px); overflow-y:auto;
  padding:var(--s-2);
  background:var(--ink-1);
  border:1px solid var(--hairline); border-radius:var(--r-field);
  box-shadow:0 18px 44px rgba(0,0,0,.55);
}
.search-results__row{
  display:flex; align-items:center; gap:var(--s-3);
  width:100%; padding:var(--s-2);
  border-radius:var(--r-control);
  text-align:left;
  transition:background .12s ease;
}
.search-results__row:hover,
.search-results__row[data-active="true"]{ background:var(--surface-hover) }
.search-results__media{
  width:42px; height:42px; flex:none;
  display:grid; place-items:center;
  border-radius:var(--r-sm); overflow:hidden;
  background:var(--surface);
}
.search-results__media img{ width:100%; height:100%; object-fit:cover }
.search-results__mark svg{ width:22px; height:22px; opacity:.55 }
.search-results__text{ display:flex; flex-direction:column; gap:2px; min-width:0 }
.search-results__name{
  font-size:var(--fs-sm); color:var(--white);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.search-results__meta{ font-size:var(--fs-xs); color:var(--muted) }
.search-results__empty{
  padding:var(--s-4); text-align:center;
  font-size:var(--fs-sm); color:var(--muted);
}
.search input:focus{ outline:none }

/* header actions */
.header-actions{ display:flex; align-items:center; justify-content:flex-end; gap:var(--s-4); flex:none }
.lang{
  display:inline-flex; align-items:center; gap:var(--s-2);
  font-size:var(--fs-sm); color:var(--muted);
  transition:color .2s ease;
}
.lang:hover{ color:var(--white) }
.lang svg{ width:15px; height:15px; fill:currentColor }
.cart{ position:relative }
.cart__count{
  position:absolute; top:-3px; right:-3px; min-width:19px; height:19px;
  display:none; place-items:center; padding-inline:5px;
  font-size:10px; line-height:19px; font-weight:700;
  color:var(--ink); background:var(--white);
  border-radius:var(--r-pill);
}
.cart__count[data-visible="true"]{ display:grid }

/* burger — mobile only */
.burger{ display:none; width:42px; height:42px; place-items:center }
.burger span{ display:block; width:20px; height:1px; background:var(--white); margin:4px 0 }

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position:relative;
  min-height:calc(var(--hero-h) - var(--header-h));
  display:flex; align-items:center;
  padding-block:var(--s-9);
  isolation:isolate;
}
/* Full-bleed photo, sitting behind the header too. It is an <img> rather
   than a background-image so the path resolves against the document — a
   url() inside a custom property resolves against the stylesheet instead,
   which silently 404s. */
.hero__bg{
  position:absolute; inset:calc(var(--header-h) * -1) 0 0; z-index:-3;
  width:100%; height:calc(100% + var(--header-h));
  object-fit:cover; object-position:68% 50%;
  background:radial-gradient(120% 120% at 70% 40%, var(--ink-3) 0%, var(--ink) 70%);
}
/* Two scrims, not one. The directional one keeps the type legible on the
   left while letting the photograph survive on the right; the second
   dissolves the image into the page so there is no hard seam. */
.hero::before{
  content:""; position:absolute; inset:calc(var(--header-h) * -1) 0 0; z-index:-2;
  background:var(--scrim-hero);
}
.hero::after{
  content:""; position:absolute; inset:calc(var(--header-h) * -1) 0 0; z-index:-1;
  background:var(--scrim-hero-foot);
}
.hero__inner{
  display:flex; flex-direction:column; align-items:flex-start; gap:var(--s-5);
  max-width:min(100%, 880px);
}
.hero__eyebrow{ width:min(100%, 300px) }
.hero__title{
  font-family:var(--font-display); font-weight:var(--fw-display);
  font-size:var(--fs-hero); line-height:var(--lh-hero);
  letter-spacing:var(--tracking-tight);
  text-wrap:balance;
}
.hero__lead{
  color:var(--muted); font-size:var(--fs-lead); line-height:var(--lh-prose);
  max-width:44ch;
}
.hero__actions{
  display:flex; align-items:center; gap:var(--s-6);
  flex-wrap:wrap; margin-top:var(--s-3);
}
/* Opening hours as a quiet status line, not a badge. */
.hero__hours{
  display:flex; align-items:center; gap:var(--s-2);
  font-size:var(--fs-label); letter-spacing:var(--tracking-label);
  text-transform:uppercase; color:var(--muted); white-space:nowrap;
}
.hero__hours .sep{ color:var(--faint) }

@media (max-width:760px){
  .hero__inner{ max-width:none }
  .hero__title{ max-width:none }
  .hero__bg{ object-position:60% 50% }
}

/* =========================================================
   MENU CARDS
   ========================================================= */
.card-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:var(--s-6) var(--s-5);
  width:100%;
}
/* Hairline under each menu section heading — the rule that turns a list of
   sections into a printed menu. */
.menu-section__rule{
  height:1px; margin:var(--s-3) 0 var(--s-5);
  background:linear-gradient(90deg, var(--hairline-2), transparent 65%);
}
@media (max-width:1200px){ .card-grid{ grid-template-columns:repeat(3, minmax(0,1fr)) } }
@media (max-width:900px){  .card-grid{ grid-template-columns:repeat(2, minmax(0,1fr)) } }
@media (max-width:480px){  .card-grid{ grid-template-columns:1fr } }

/* No box. The photograph is the card; a border around it only competes
   with the food. What separates one card from the next is space. */
/* A contained card: outline, not fill — the same rule the account rows follow.
   The photograph runs flush to the card's edges and the text sits in padding
   beneath it, so the price and name read as *inside* something rather than
   floating under a picture. */
.card{
  position:relative; display:flex; flex-direction:column;
  border:1px solid var(--hairline); border-radius:var(--r-control);
  overflow:hidden; isolation:isolate;
  transition:border-color .25s ease;
}
.card:hover,
.card:focus-within{ border-color:var(--hairline-2) }
.card__media{
  position:relative; height:var(--card-media-h); flex:none;
  overflow:hidden;
  background:var(--ink-2);
  border-bottom:1px solid var(--hairline);
}
.card__media img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .7s cubic-bezier(.2,.7,.3,1);
}
.card:hover .card__media img{ transform:scale(1.045) }
.card__media::after{
  content:""; position:absolute; inset:0; background:var(--scrim-card);
}
/* A gold hairline that draws itself under the photo on hover. */
.card__media::before{
  content:""; position:absolute; left:0; right:0; bottom:0; z-index:3;
  height:1px; background:var(--grad-gold);
  transform:scaleX(0); transform-origin:left;
  transition:transform .45s cubic-bezier(.2,.7,.3,1);
}
.card:hover .card__media::before,
.card:focus-within .card__media::before{ transform:scaleX(1) }

.card__badge{
  position:absolute; top:var(--s-3); left:var(--s-3); z-index:2;
  padding:5px var(--s-2);
  font-size:var(--fs-label); line-height:1;
  letter-spacing:var(--tracking-label); text-transform:uppercase;
  color:var(--white); background:rgba(11,10,9,.62);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  border-radius:var(--r-sm);
}

.card__body{ display:flex; flex-direction:column; gap:var(--s-2); padding:var(--s-4) var(--s-4) 0 }
.card__desc{
  font-size:var(--fs-sm); line-height:var(--lh-sm); color:var(--muted);
}
.card__foot{
  margin-top:auto; padding:var(--s-4);
  display:flex; align-items:center; justify-content:space-between; gap:var(--s-4);
}
.card__price{
  font-size:var(--fs-base); line-height:1; font-weight:500;
  font-variant-numeric:tabular-nums;
}
.card__price--sale{ color:var(--gold) }
.card__price-was{
  margin-left:var(--s-2); color:var(--faint);
  font-size:var(--fs-sm); text-decoration:line-through;
}
/* Outlined, not filled. A solid gold disc on every card turns the accent
   into wallpaper; here the gold arrives only on intent. */
.card .btn-round{
  width:38px; height:38px;
  background:transparent; color:var(--white);
  box-shadow:inset 0 0 0 1px var(--hairline-2);
  transition:background .2s ease, color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.card .btn-round:hover{
  background:var(--gold); color:var(--ink);
  box-shadow:inset 0 0 0 1px var(--gold);
  transform:scale(1.06);
}
.card .btn-round svg{ width:15px; height:15px }

/* =========================================================
   FEATURES
   ========================================================= */
.features{ border-top:1px solid var(--hairline) }
.features .container{
  display:flex; flex-direction:column; align-items:flex-start; gap:var(--s-8);
  padding-block:var(--s-section);
}
.features__list{
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr));
  gap:var(--s-6); width:100%;
}
@media (max-width:760px){ .features__list{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s-7) } }
/* Hairline rules between items instead of tiles around them. */
.feature{
  display:flex; flex-direction:column; align-items:flex-start; gap:var(--s-4);
  padding-left:var(--s-5); border-left:1px solid var(--hairline);
}
.feature:first-child{ padding-left:0; border-left:0 }
@media (max-width:760px){
  .feature:nth-child(odd){ padding-left:0; border-left:0 }
}
.icon-tile{
  width:40px; height:40px; flex:none;
  display:grid; place-items:center;
}
/* Inside a control row the glyph gets its own tile; standing alone in the
   features band it does not. */
.box .icon-tile{ background:var(--surface-hover); border-radius:10px }
.icon-tile svg{ width:36px; height:36px }
/* Every glyph in the sprite (moon, fish, clock, burger, chopsticks, the brand
   mark) ships with its own gold gradient baked in, so none of them is
   recoloured from CSS. */

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{ border-top:1px solid var(--hairline) }
.site-footer .container{
  display:flex; align-items:flex-start; gap:var(--s-7);
  padding-block:var(--s-8);
  flex-wrap:wrap;
}
.footer-col{ flex:1 1 200px; display:flex; flex-direction:column; gap:var(--s-4) }
.footer-col > ul,
.footer-col .contact-list{ display:flex; flex-direction:column; gap:var(--s-3) }
.footer-col a, .footer-col li, .footer-col address{
  font-size:var(--fs-sm); line-height:var(--lh-sm); color:var(--muted);
  font-style:normal;
}
.footer-col a{ transition:color .2s ease }
.footer-col a:hover{ color:var(--gold) }

.socials{ display:flex; gap:var(--s-2); margin-top:var(--s-2) }
.social{
  width:34px; height:34px; display:grid; place-items:center;
  border:1px solid var(--hairline); border-radius:var(--r-sm);
  color:var(--muted);
  transition:border-color .2s ease, color .2s ease;
}
.social:hover{ border-color:var(--gold-deep); color:var(--gold) }
.social svg{ width:15px; height:15px; fill:currentColor }

.payments{ display:flex; flex-wrap:wrap; gap:var(--s-2) }
/* Not interactive — no hover affordance. These are a statement of what is
   accepted, not something to click. */
.payment{
  width:46px; height:29px; display:grid; place-items:center; padding-inline:var(--s-1);
  border:1px solid var(--hairline); border-radius:var(--r-sm);
  opacity:.85;
}
/* The supplied marks are a mix of wide (Visa, ArCa) and square (Idram).
   Explicit px caps rather than percentages: a percentage height on a centred
   grid item resolves inconsistently once the image is square, which let the
   Idram mark grow past the chip. */
.payment img{ width:auto; height:auto; max-width:36px; max-height:21px; object-fit:contain }

@media (max-width:760px){
  .site-footer .container{ flex-direction:column; gap:var(--s-7) }
}

/* =========================================================
   RESPONSIVE HEADER
   ========================================================= */
@media (max-width:1000px){
  .site-header .container{ gap:var(--s-4) }
  .lang span{ display:none }
}
/* Below this the header stacks, so the search returns to normal flow. */
@media (max-width:760px){
  .brand__logo{ width:100px; height:36px }
  .burger{ display:grid }
  .search{
    position:relative; left:auto; transform:none;
    order:3; flex:1 1 100%; width:auto;
  }
  .site-header{ height:auto; padding-block:var(--s-3) }
  .site-header .container{ flex-wrap:wrap }
  .btn-ghost{ height:40px }
  .btn-round{ width:40px; height:40px }
}

/* ---------- hero: tighter on small screens ---------- */
@media (max-width:760px){
  .hero{ padding-block:var(--s-7); min-height:380px }
  /* On a phone the job of the hero is to be seen and scrolled past, so the
     section under it starts sooner. */
  .hero + .section{ padding-top:var(--s-7) }
}

/* =========================================================
   MENU PAGE — category strip, filter chips, sections
   ========================================================= */

/* ---------- sticky bars under the header ---------- */
.subbar{
  position:sticky; z-index:40;
  background:var(--header-bg);
  -webkit-backdrop-filter:blur(20px) saturate(140%);
          backdrop-filter:blur(20px) saturate(140%);
  border-bottom:1px solid var(--hairline);
}
.subbar--cats{ top:var(--header-h) }
.subbar--chips{ top:calc(var(--header-h) + 77px); margin-top:-1px }
.subbar .container{ display:flex; align-items:center; gap:var(--s-3) }

/* ---------- category tabs ----------
   Same shape as the account tabs: a small bordered pill with an icon slot and
   a label. The category photograph fills the icon slot, so the artwork still
   earns its place without a 92px tile pushing the food below the fold. */
.cats .container{ padding-block:var(--s-3); overflow-x:auto; scrollbar-width:none }
.cats .container::-webkit-scrollbar{ display:none }
.cat{
  display:inline-flex; align-items:center; gap:var(--s-3); flex:none;
  height:52px; padding:4px var(--s-5) 4px 4px;
  border:1px solid var(--hairline); border-radius:var(--r-pill);
  color:var(--muted); font-size:var(--fs-sm); white-space:nowrap;
  transition:border-color .2s ease, color .2s ease;
}
.cat:hover{ color:var(--white); border-color:var(--hairline-2) }
.cat[aria-current="page"]{ border-color:var(--white); color:var(--white) }
.cat img{
  width:44px; height:44px; flex:none;
  border-radius:50%; object-fit:cover;
  background:var(--surface);
  opacity:.85; transition:opacity .2s ease;
}
.cat:hover img,
.cat[aria-current="page"] img{ opacity:1 }

/* ---------- filter chips ---------- */
.chips .container{ padding-block:var(--s-3); overflow-x:auto; scrollbar-width:none }
.chips .container::-webkit-scrollbar{ display:none }
.chip{
  display:inline-flex; align-items:center; flex:none;
  height:32px; padding-inline:var(--s-4);
  border:1px solid var(--hairline); border-radius:var(--r-pill);
  font-size:var(--fs-xs); letter-spacing:.04em;
  color:var(--muted); white-space:nowrap;
  transition:border-color .2s ease, color .2s ease;
}
.chip:hover{ color:var(--white); border-color:var(--hairline-2) }
.chip[aria-current="true"]{ color:var(--ink); background:var(--white); border-color:var(--white) }

/* ---------- menu sections ----------
   Left-aligned with a hairline under the heading: a printed menu, not a
   stack of centred blocks. */
.menu-section{ display:flex; flex-direction:column; align-items:stretch }
.menu-section + .menu-section{ margin-top:var(--s-8) }
.menu-section__head{
  display:flex; align-items:baseline; gap:var(--s-4);
  flex-wrap:wrap;
}
.tag{
  display:inline-flex; align-items:center;
  padding:5px var(--s-2);
  font-size:var(--fs-label); line-height:1;
  letter-spacing:var(--tracking-label); text-transform:uppercase;
  color:var(--gold); border:1px solid var(--gold-deep);
  border-radius:var(--r-sm);
}

@media (max-width:900px){
  .subbar--chips{ top:auto; position:static }
}
@media (max-width:760px){
  .subbar--cats{ position:static }
}

/* anchor targets must clear both sticky bars */
.menu-section{ scroll-margin-top:calc(var(--header-h) + 138px) }
@media (max-width:900px){ .menu-section{ scroll-margin-top:var(--s-5) } }

/* =========================================================
   LANGUAGE MENU
   ========================================================= */
.lang-wrap{ position:relative }
.lang[aria-expanded="true"]{ color:var(--white) }
.lang[aria-expanded="true"] svg{ fill:var(--white) }
.lang-menu{
  position:absolute; top:calc(100% + var(--s-3)); right:0; z-index:60;
  min-width:132px; padding:var(--s-2);
  background:var(--ink-1); border:1px solid var(--hairline);
  border-radius:var(--r-field);
  box-shadow:0 16px 40px rgba(0,0,0,.6);
  display:none;
}
.lang-menu[data-open="true"]{ display:block }
.lang-menu button{
  display:flex; align-items:center; gap:var(--s-3);
  width:100%; padding:var(--s-2) var(--s-3);
  border-radius:var(--r-control); text-align:left;
  font-size:var(--fs-sm); color:var(--muted);
  transition:background .15s ease, color .15s ease;
}
.lang-menu button:hover{ background:var(--surface); color:var(--white) }
.lang-menu button[aria-current="true"]{ color:var(--white) }

/* =========================================================
   MOBILE DRAWER
   ========================================================= */
.drawer{
  position:fixed; inset:0; z-index:100;
  display:none;
  background:rgba(4,6,6,.7);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
}
.drawer[data-open="true"]{ display:block }
.drawer__panel{
  position:absolute; inset:0 0 0 auto;
  width:min(320px, 86vw); height:100%;
  padding:var(--s-5);
  display:flex; flex-direction:column; gap:var(--s-5);
  background:var(--ink); border-left:1px solid var(--hairline);
}
.drawer__head{ display:flex; align-items:center; justify-content:space-between }
.drawer__close{ width:38px; height:38px; display:grid; place-items:center; font-size:24px; line-height:1; border-radius:var(--r-pill) }
.drawer nav{ display:flex; flex-direction:column; gap:var(--s-1); align-items:stretch }
/* The auth entry is a <button>, which does not inherit the left alignment the
   links get — without text-align it centres itself in the column. */
.drawer nav a,
.drawer nav button{
  display:block; width:100%; text-align:left;
  padding:var(--s-3) var(--s-2); border-radius:var(--r-control);
  font-size:inherit; color:inherit;
  transition:background .15s ease;
}
.drawer nav a:hover,
.drawer nav button:hover{ background:var(--surface) }

/* =========================================================
   TOAST
   ========================================================= */
.toast-stack{
  position:fixed; z-index:200; left:50%; bottom:var(--s-7); transform:translateX(-50%);
  display:flex; flex-direction:column; gap:var(--s-2); align-items:center;
  pointer-events:none;
}
.toast{
  display:flex; align-items:center; gap:var(--s-2);
  padding:var(--s-3) var(--s-4);
  font-size:var(--fs-sm);
  color:var(--ink); background:var(--grad-gold);
  border-radius:var(--r-pill);
  box-shadow:0 12px 32px rgba(0,0,0,.5);
  animation:toast-in .22s ease-out;
}
@keyframes toast-in{ from{ opacity:0; transform:translateY(8px) } to{ opacity:1; transform:none } }
.toast[data-leaving="true"]{ opacity:0; transition:opacity .2s ease }

/* =========================================================
   CARD MEDIA PLACEHOLDER (dish with no photo yet)
   ========================================================= */
/* Shared by the card tile and the dish-details pane, so a dish without a
   photograph looks the same wherever it appears — and looks chosen rather
   than missing. */
.card__media--empty,
.item-modal__media--empty{
  display:grid; place-items:center;
  background:
    repeating-linear-gradient(-45deg,
      rgba(235,213,92,.035) 0 1px, transparent 1px 9px),
    radial-gradient(90% 90% at 50% 20%, rgba(235,213,92,.10) 0%, rgba(235,213,92,0) 65%),
    var(--ink-2);
}
.card__media--empty svg{ width:46px; height:46px; opacity:.5 }
.card__media--empty::after{ content:none }

/* =========================================================
   PAGE HEADINGS + PROSE (delivery, terms, privacy, …)
   ========================================================= */
.page-head{
  display:flex; flex-direction:column; align-items:flex-start; gap:var(--s-3);
  padding-block:var(--s-7) var(--s-5);
  border-bottom:1px solid var(--hairline); margin-bottom:var(--s-6);
}
.page-head p{ max-width:60ch; color:var(--muted); font-size:var(--fs-lead) }
.h1{
  font-family:var(--font-display); font-weight:var(--fw-display);
  font-size:var(--fs-h1); line-height:var(--lh-h2);
  letter-spacing:var(--tracking-tight);
}

/* Legal and policy copy sets to a measure, not to the full container —
   a 72ch line is the readable maximum. */
.prose{ max-width:74ch; padding-bottom:var(--s-8) }
/* Sans: the sub-headings inside a document are signposts, not display type.
   The page title above them stays in the serif. */
.prose h2{
  font-family:var(--font-body); font-size:var(--fs-h3); line-height:var(--lh-h3);
  font-weight:600; letter-spacing:var(--tracking-body);
  margin-top:var(--s-7); margin-bottom:var(--s-3);
}
.prose h2:first-child{ margin-top:0 }
.prose p, .prose li{ color:var(--muted); font-size:var(--fs-sm); line-height:var(--lh-prose) }
.prose p + p{ margin-top:var(--s-3) }
.prose ul{ display:flex; flex-direction:column; gap:var(--s-2); margin-top:var(--s-3) }
.prose li{ position:relative; padding-left:var(--s-5) }
/* A short gold rule instead of a bullet — the same mark as the eyebrow. */
.prose li::before{
  content:""; position:absolute; left:0; top:.72em;
  width:10px; height:1px; background:var(--gold-deep);
}
.prose strong{ color:var(--white); font-weight:600 }

/* info grid used on the delivery page */
.info-grid{
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:var(--s-6);
  padding-bottom:var(--s-section);
}
@media (max-width:760px){ .info-grid{ grid-template-columns:1fr } }
/* Divided only by the vertical rules between them — same treatment as the
   features band on the homepage. No rule across the top. */
.info-card{
  display:flex; flex-direction:column; gap:var(--s-3);
  padding-left:var(--s-6); border-left:1px solid var(--hairline);
}
.info-card:first-child{ padding-left:0; border-left:0 }
@media (max-width:760px){
  /* Stacked, so the divider has to lie down with them. */
  .info-card{ padding-left:0; border-left:0 }
  .info-card + .info-card{ padding-top:var(--s-5); border-top:1px solid var(--hairline) }
}
.info-card__value{
  font-weight:600;
  font-size:var(--fs-h2); line-height:1.05; color:var(--white);
  letter-spacing:var(--tracking-body); font-variant-numeric:tabular-nums;
  letter-spacing:var(--tracking-tight);
}
.info-card p{ color:var(--muted); font-size:var(--fs-sm); line-height:var(--lh-sm) }

/* =========================================================
   EMPTY STATE
   ========================================================= */
.empty{
  display:flex; flex-direction:column; align-items:center; gap:var(--s-4);
  padding:var(--s-9) var(--s-5); text-align:center;
}
.empty .icon-tile{ margin-bottom:var(--s-2) }
.empty p{ max-width:44ch; color:var(--muted) }

/* =========================================================
   CART
   ========================================================= */
.cart-layout{
  display:grid; grid-template-columns:minmax(0,1fr) 360px; gap:var(--s-7);
  align-items:start; padding-bottom:var(--s-8);
}
@media (max-width:900px){ .cart-layout{ grid-template-columns:1fr } }

.line-items{ display:flex; flex-direction:column; gap:var(--s-3) }
.line{
  display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:var(--s-4);
  align-items:center;
  padding-right:var(--s-4);
  border:1px solid var(--hairline); border-radius:var(--r-control);
  overflow:hidden;
}
.line__media{
  width:84px; align-self:stretch; min-height:84px; overflow:hidden;
  background:var(--surface);
}
.line__media img{ width:100%; height:100%; object-fit:cover }
.line__body{ display:flex; flex-direction:column; gap:var(--s-3); min-width:0; padding-block:var(--s-3) }
/* Not --fs-h3: the drawer column is narrow and 23px Cormorant wraps every
   two-word dish name onto a second line. */
/* Sans, not the display serif: these are numbers and short labels read at a
   glance, and Cormorant's old-style figures are the wrong tool for that. */
.line__name{ font-weight:600; font-size:var(--fs-sm); line-height:1.25; letter-spacing:var(--tracking-body) }
.line__meta{ font-size:var(--fs-xs); line-height:1.3; color:var(--muted); white-space:nowrap }
.line__controls{ display:flex; align-items:center; gap:var(--s-3) }
.line__total{ text-align:right; font-weight:600; white-space:nowrap; font-size:var(--fs-base); font-variant-numeric:tabular-nums; justify-self:end }
.line__remove{
  width:30px; height:30px; display:grid; place-items:center;
  color:var(--muted); border-radius:var(--r-pill);
  transition:color .15s ease, background .15s ease;
}
.line__remove:hover{ color:var(--white); background:var(--surface) }
.line__remove svg{ width:14px; height:14px; fill:currentColor }
@media (max-width:600px){
  .line{ grid-template-columns:72px minmax(0,1fr) }
  .line__media{ width:72px; height:56px }
  .line__side{ grid-column:1 / -1; justify-content:space-between }
}

/* qty stepper */
.stepper{
  display:inline-flex; align-items:center; gap:2px;
  padding:2px; background:var(--surface); border-radius:var(--r-pill);
}
.stepper button{
  /* flex:none — as flex items these shrink by default, and the reset's
     `svg{max-width:100%}` then clips the glyph rather than the box, so the
     icon silently came out narrower than it was set to. */
  width:28px; height:28px; flex:none;
  display:grid; place-items:center;
  border-radius:var(--r-pill); color:var(--white);
  transition:background .15s ease;
}
.stepper button:hover{ background:var(--surface-hover) }
/* The + and − paths span only half their 24-unit viewBox, so the drawn mark is
   half whatever size is set here: 22px renders an ~11px glyph. The button stays
   28px for the touch target — only the glyph is scaled. */
.stepper button svg{ width:22px; height:22px; fill:currentColor }
.stepper output{
  min-width:22px; flex:none; text-align:center;
  font-size:var(--fs-sm); font-variant-numeric:tabular-nums;
}

/* summary panel */
.summary{
  position:sticky; top:calc(var(--header-h) + var(--s-5));
  display:flex; flex-direction:column; gap:var(--s-4);
  padding:var(--s-5);
  border:1px solid var(--hairline); border-radius:var(--r-lg);
  background:var(--surface);
}
.summary h2{
  font-family:var(--font-display); font-size:var(--fs-h3); line-height:var(--lh-h3);
  font-weight:600;
}
.summary__row{
  display:flex; align-items:baseline; justify-content:space-between; gap:var(--s-3);
  font-size:var(--fs-sm); color:var(--muted);
}
.summary__row strong{ color:var(--white); font-weight:400 }
.summary__row--total{
  padding-top:var(--s-4); border-top:1px solid var(--hairline);
  font-size:var(--fs-base); color:var(--white);
}
.summary__row--total strong{ font-weight:600 }
.summary__note{ font-size:var(--fs-xs); line-height:16px; color:var(--muted) }
.summary .btn{ width:100% }
.free-ship{ color:var(--ok) }

/* =========================================================
   FORMS (login, checkout)
   ========================================================= */
/* No box. The other account tabs are bare lists under the page heading, so a
   bordered card around the profile and password fields made those two pages
   look like a different product. The fields carry their own chrome already. */
.form-card{
  width:100%; max-width:420px;
  display:flex; flex-direction:column; gap:var(--s-4);
}

.tabs{ display:flex; gap:var(--s-1); padding:3px; background:var(--surface); border-radius:var(--r-control) }
.tabs button{
  flex:1; height:34px; border-radius:calc(var(--r-control) - 3px); color:var(--muted);
  font-size:var(--fs-sm);
  border:1px solid transparent;
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}
/* The selected tab is marked with a gold hairline rather than a filled block —
   it reads as a selection without adding another large light area. */
.tabs button[aria-selected="true"]{
  background:var(--ink); border-color:var(--gold-deep); color:var(--gold);
}

/* ---------- auth modal ---------- */
.auth-modal .panel{ max-width:400px }
.panel__head--center{ position:relative; justify-content:center; text-align:center }
.panel__head--center .panel__title{ font-size:var(--fs-h3) }
.panel__head--center .panel__close{ position:absolute; right:var(--s-3); top:50%; transform:translateY(-50%) }
.auth-modal .panel__body{ gap:var(--s-4); padding:var(--s-5) }
.auth-form{ display:flex; flex-direction:column; gap:var(--s-3) }
.auth-form .btn{ width:100%; margin-top:var(--s-1) }
.auth-forgot{
  align-self:flex-end;
  font-size:var(--fs-xs); color:var(--gold);
  border-bottom:1px solid transparent;
  transition:border-color .18s ease;
}
.auth-forgot:hover{ border-bottom-color:currentColor }
.field{ display:flex; flex-direction:column; gap:var(--s-2); min-width:0 }
/* +374 is a fixed adornment, not something you can type over or delete.
   The wrapper carries the field's chrome and the input sits transparent
   inside it, so the two never drift apart visually. */
.field--phone .field__wrap{
  display:flex; align-items:center; gap:var(--s-2);
  height:46px; padding-inline:var(--s-5);
  background:var(--surface); border:1px solid transparent;
  border-radius:var(--r-field);
  transition:border-color .15s ease;
}
.field--phone .field__wrap:focus-within{ border-color:var(--surface-line) }
.field--phone .field__prefix{
  flex:none; color:var(--muted); font-size:var(--fs-sm);
  letter-spacing:var(--tracking-body); user-select:none;
}
/* `.field__wrap input` (0,3,1), not `.field--phone input` (0,2,1): the generic
   `.field input` rule is defined further down at the same specificity and was
   winning, so the input painted its own filled, rounded, 24px-padded box
   inside the wrapper — a visible seam where the typing area began. */
.field--phone .field__wrap input{
  flex:1; min-width:0;
  height:100%; padding:0;
  background:none; border:0; border-radius:0;
}
.field--phone .field__wrap input:focus{ border:0; outline:none }
.field--phone[data-invalid="true"] .field__wrap{ border-color:var(--danger) }
.field label{ font-size:var(--fs-xs); color:var(--muted) }
.field input, .field textarea, .field select{
  height:46px; padding-inline:var(--s-5);
  background:var(--surface); border:1px solid transparent; border-radius:var(--r-field);
  color:var(--white);
  /* `input{font:inherit}` in the reset would pull --fs-base in, which is a
     reading size, not a control size. Controls sit one step down. */
  font-size:var(--fs-sm); letter-spacing:var(--tracking-body);
  transition:border-color .15s ease;
}
.field textarea{ height:auto; min-height:76px; padding-block:var(--s-3); resize:vertical; border-radius:var(--r-field) }
.field input:focus, .field textarea:focus, .field select:focus{
  outline:none; border-color:var(--surface-line);
}
.field[data-invalid="true"] input,
.field[data-invalid="true"] textarea{ border-color:var(--danger) }
.field__error{ font-size:var(--fs-xs); color:var(--danger); display:none }
.field[data-invalid="true"] .field__error{ display:block }
.form-note{ font-size:var(--fs-xs); line-height:16px; color:var(--muted); text-align:center }
.form-note a{ color:var(--gold) }
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s-4) }
@media (max-width:600px){ .form-grid{ grid-template-columns:1fr } }

/* =========================================================
   OPEN / CLOSED PILL
   ========================================================= */
.status-dot{
  width:6px; height:6px; border-radius:50%; flex:none;
  background:var(--ok); box-shadow:0 0 0 3px var(--ok-soft);
}
.status-dot[data-open="false"]{ background:var(--danger); box-shadow:0 0 0 3px rgba(225,82,82,.2) }

/* search: no-results state */
.no-results{ display:none }
body[data-filtered="empty"] .no-results{ display:flex }

/* cart line with no photo yet — same treatment as the card placeholder */
.line__media--empty{
  display:grid; place-items:center;
  background:
    radial-gradient(120% 120% at 30% 0%, rgba(235,213,92,.10) 0%, rgba(235,213,92,0) 60%),
    var(--ink-2);
}
.line__media--empty svg{ width:28px; height:28px; opacity:.5 }

/* =========================================================
   OVERLAY SYSTEM — one mechanism for the cart drawer and
   every modal. [data-overlay] is the scrim; [data-open]
   drives visibility.
   ========================================================= */
.overlay{
  position:fixed; inset:0; z-index:120;
  display:flex;
  background:rgba(2,3,3,.72);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  opacity:0; visibility:hidden;
  transition:opacity .22s ease, visibility .22s ease;
}
.overlay[data-open="true"]{ opacity:1; visibility:visible }

/* right-hand drawer (cart) */
.overlay--drawer{ justify-content:flex-end }
.overlay--drawer .panel{
  width:min(560px, 100vw); height:100%;
  border-left:1px solid var(--hairline);
  transform:translateX(24px);
  transition:transform .26s cubic-bezier(.22,.8,.3,1);
}
.overlay[data-open="true"] .panel{ transform:none }

/* centred modal */
.overlay--modal{ align-items:center; justify-content:center; padding:var(--s-5) }
.overlay--modal .panel{
  width:min(560px, 100%); max-height:calc(100vh - var(--s-8));
  border:1px solid var(--hairline); border-radius:var(--r-lg);
  transform:translateY(12px) scale(.99);
  transition:transform .22s cubic-bezier(.22,.8,.3,1);
}
.overlay--modal.overlay--wide .panel{ width:min(1000px, 100%) }
.overlay--modal.overlay--media .panel{ width:min(1200px, 100%) }

.panel{
  position:relative;
  display:flex; flex-direction:column; min-height:0;
  background:var(--ink);
  overflow:hidden;
}
.panel__head{
  display:flex; align-items:center; justify-content:space-between; gap:var(--s-4);
  padding:var(--s-3) var(--s-5);
  border-bottom:1px solid var(--hairline);
  flex:none;
  /* Frosted, like the site header — the content scrolls under it now that the
     step indicator is no longer pinned. */
  position:sticky; top:0; z-index:5;
  background:var(--header-bg);
  -webkit-backdrop-filter:blur(20px) saturate(140%);
          backdrop-filter:blur(20px) saturate(140%);
}
.panel__title{
  font-family:var(--font-display); font-size:var(--fs-h3); line-height:var(--lh-h3);
  font-weight:600;
}
/* The cart is a working surface, not an editorial one — its title sits with
   the numbers beside it, so it takes the grotesque. */
.overlay--drawer .panel__title{
  font-family:var(--font-body); font-size:var(--fs-base);
  letter-spacing:var(--tracking-body);
}
/* The item count belongs to the title, not to the close button. */
.overlay--drawer .panel__meta{ margin-right:auto }
.panel__meta{ font-size:var(--fs-xs); color:var(--muted) }

.panel__body{
  flex:1 1 auto; min-height:0; overflow-y:auto;
  padding:var(--s-4) var(--s-5);
  display:flex; flex-direction:column; gap:var(--s-4);
}
/* One scroll region for the whole drawer body. The step indicator lives
   inside it, so it scrolls away with the content rather than staying pinned
   above it. */
.panel__scroll{
  flex:1 1 auto; min-height:0; overflow-y:auto;
  display:flex; flex-direction:column;
}
.panel__scroll > .panel__body{ flex:0 0 auto; overflow:visible }
.panel__scroll > [data-cart-empty]{ flex:1 1 auto }
.panel__scroll > .steps{ padding-bottom:0 }

.panel__foot{
  flex:none;
  padding:var(--s-3) var(--s-5) var(--s-4);
  border-top:1px solid var(--hairline);
  display:flex; flex-direction:column; gap:var(--s-3);
}
.panel__close{
  width:38px; height:38px; flex:none;
  display:grid; place-items:center;
  font-size:24px; line-height:1; color:var(--muted);
  border-radius:var(--r-pill);
  transition:color .15s ease, background .15s ease;
}
.panel__close:hover{ color:var(--white); background:var(--surface) }
/* floating close, for the panels that have no header bar */
.panel__close--float{
  position:absolute; top:var(--s-3); right:var(--s-3); z-index:2;
  background:rgba(4,6,6,.6);
}

body[data-overlay-open="true"]{ overflow:hidden }

@media (max-width:760px){
  .overlay--modal{ padding:0; align-items:flex-end }
  .overlay--modal .panel{
    width:100%; max-height:92vh;
    border-radius:var(--r-lg) var(--r-lg) 0 0; border-bottom:0;
  }
}

/* =========================================================
   PANELS INSIDE A DRAWER / MODAL
   ========================================================= */
.box{
  padding:var(--s-3) var(--s-4);
  /* Only things you type into get a filled surface. Everything else —
     addresses, cards, orders, the people stepper — is an outlined card, so
     "filled" reliably means "editable". */
  background:none;
  border:1px solid var(--hairline); border-radius:var(--r-control);
  display:flex; flex-direction:column; gap:var(--s-2);
  font-size:var(--fs-sm);
}
.box--row{ flex-direction:row; align-items:center; justify-content:space-between; gap:var(--s-4) }
.panel__body .box--row{ padding:var(--s-3) var(--s-4) }
.box__label{ display:flex; align-items:center; gap:var(--s-3); min-width:0 }

/* =========================================================
   CHECKOUT STEP HEADER
   ========================================================= */
.steps{
  display:grid; grid-auto-flow:column; grid-auto-columns:1fr;
  gap:var(--s-3); flex:none;
  padding:var(--s-4) var(--s-5) 0;
}
.step{
  display:flex; flex-direction:column; align-items:center; gap:6px;
  font-size:var(--fs-xs); color:var(--muted);
  background:none; cursor:default;
}
.step__dot{
  width:22px; height:22px; display:grid; place-items:center;
  border-radius:50%;
  background:var(--ink-3); color:var(--muted);
  font-size:var(--fs-xs); font-weight:600;
}
.step__dot svg{ width:13px; height:13px; fill:var(--ink) }
.step[data-state="current"]{ color:var(--white) }
.step[data-state="current"] .step__dot{ background:var(--white); color:var(--ink) }
.step[data-state="done"]{ color:var(--muted); cursor:pointer }
.step[data-state="done"] .step__dot{ background:var(--white) }

/* =========================================================
   SEGMENTED CONTROL (payment method)
   ========================================================= */
.segmented{ display:flex; gap:var(--s-2); flex-wrap:wrap }
.segmented button{
  flex:1 1 0; min-width:96px;
  display:inline-flex; align-items:center; justify-content:center; gap:var(--s-2);
  height:44px; padding-inline:var(--s-4);
  border:1px solid var(--hairline); border-radius:var(--r-control);
  color:var(--white); font-size:var(--fs-sm);
  transition:border-color .15s ease, color .15s ease, background .15s ease;
}
.segmented button svg{ width:16px; height:16px; fill:currentColor }
.segmented button:hover{ background:var(--surface) }
.segmented button[aria-pressed="true"]{ border-color:var(--white); color:var(--white) }

/* =========================================================
   RADIO / CHECK LIST ROWS
   ========================================================= */
.choice{
  display:flex; align-items:center; gap:var(--s-3);
  padding:var(--s-2) 0;
  font-size:var(--fs-sm); cursor:pointer;
}
.choice input{ appearance:none; margin:0; flex:none;
  width:18px; height:18px; border-radius:50%;
  border:1.5px solid var(--muted); position:relative;
}
.choice input[type="checkbox"]{ border-radius:var(--r-sm) }
.choice input:checked{ border-color:var(--white) }
.choice input:checked::after{
  content:""; position:absolute; inset:3px;
  border-radius:inherit; background:var(--white);
}
.choice__text{ min-width:0 }
.choice img{ width:22px; height:auto; flex:none }

.add-link{
  display:inline-flex; align-items:center; gap:var(--s-2);
  color:var(--gold); font-size:var(--fs-sm);
  align-self:flex-start;
}
.add-link:hover{ text-decoration:underline }

/* =========================================================
   PROMO CODE
   ========================================================= */
.promo{ display:flex; align-items:center; gap:var(--s-2) }
.promo input{
  flex:1; min-width:0; height:46px; padding-inline:var(--s-5);
  background:var(--surface); border:1px solid transparent; border-radius:var(--r-field);
  color:var(--white); font-size:var(--fs-sm);
}
.promo input:focus{ outline:none; border-color:var(--surface-line) }
.promo button{
  width:46px; height:46px; flex:none;
  display:grid; place-items:center;
  background:var(--gold); color:var(--ink); border-radius:var(--r-pill);
  transition:filter .15s ease;
}
.promo button:hover{ filter:brightness(1.08) }
.promo button svg{ width:20px; height:20px; fill:currentColor }
.promo__msg{ font-size:var(--fs-xs); color:var(--muted) }
.promo__msg[data-state="ok"]{ color:var(--ok) }
.promo__msg[data-state="bad"]{ color:var(--danger) }

/* =========================================================
   DRAWER FOOTER TOTALS
   ========================================================= */
/* A badge, not a banner — it is a nudge, not a line item, so it stays small
   and sits close to the totals it is talking about. */
.free-note{
  align-self:center;
  display:inline-flex; align-items:center;
  margin-bottom:calc(var(--s-3) * -0.5);
  padding:3px var(--s-3);
  font-size:calc(var(--fs-label) * .92); letter-spacing:.06em;
  text-transform:uppercase; color:var(--gold);
  border:1px solid var(--gold-deep); border-radius:var(--r-pill);
}
/* Empty once free delivery is reached — don't leave a floating outline. */
.free-note:empty{ display:none }
.totals{ display:flex; flex-direction:column; gap:3px }
.totals__row{
  display:flex; align-items:baseline; justify-content:space-between; gap:var(--s-3);
  font-size:var(--fs-xs); color:var(--muted);
}
.totals__row strong{ color:var(--white); font-weight:400; font-variant-numeric:tabular-nums }
.totals__row--pay{ font-size:var(--fs-sm); color:var(--white); padding-top:2px }
.totals__row--pay strong{ font-weight:600 }
.foot-actions{ display:flex; gap:var(--s-3) }
/* Back and Proceed are one pair of controls and must read as one.
   `flex:1 1 0` + `min-width:0` is what actually equalises them — without
   min-width:0 the longer label's min-content width wins extra space, which is
   why Proceed was 46px wider than Back. The label treatment is restated here
   too: .btn-ghost is sentence-case body text elsewhere (header, order-again),
   and only needs to match .btn inside this footer. */
.foot-actions .btn,
.foot-actions .btn-ghost{
  flex:1 1 0; min-width:0;
  /* Matching borders matter: with `flex-basis:0` under border-box, a border
     floors the basis, so the bordered ghost button ended up exactly 2px wider
     than the borderless primary. A transparent border evens the boxes —
     but the ghost gets its hairline back below, or Back reads as bare text. */
  border:1px solid transparent;
  height:44px; padding-inline:var(--s-4);
  justify-content:center;
  border-radius:var(--r-pill);
  font-size:var(--fs-label); font-weight:600;
  letter-spacing:var(--tracking-label); text-transform:uppercase;
}
.foot-actions .btn-ghost{ border-color:var(--hairline-2) }

/* =========================================================
   ORDER PLACED
   ========================================================= */
.placed{
  display:flex; flex-direction:column; align-items:center; gap:var(--s-4);
  padding:var(--s-8) var(--s-5); text-align:center;
}
.placed__check{
  width:56px; height:56px; display:grid; place-items:center;
  border-radius:50%;
  background:rgba(134,225,82,.12); border:1px solid rgba(134,225,82,.4);
}
.placed__check svg{ width:26px; height:26px; fill:var(--ok) }
.placed p{ color:var(--muted); font-size:var(--fs-sm); max-width:40ch }
.placed__eta{ color:var(--white); font-size:var(--fs-base) }
.help-row{
  display:flex; align-items:center; justify-content:space-between; gap:var(--s-4);
  width:100%; padding:var(--s-3) 0 0;
  border-top:1px solid var(--hairline);
  font-size:var(--fs-sm);
}
.help-row span{ color:var(--muted) }
.help-row a{ color:var(--gold) }

/* =========================================================
   ITEM DETAILS MODAL
   ========================================================= */
.item-modal .panel{ flex-direction:row; padding:0 }
.item-modal__media{
  flex:1 1 50%; min-width:0; align-self:stretch;
  background:var(--ink-2);
}
.item-modal__media img{ width:100%; height:100%; object-fit:cover }
.item-modal__media svg{ width:72px; height:72px; opacity:.5; margin:auto }

.item-modal__body{
  flex:1 1 50%; min-width:0;
  display:flex; flex-direction:column; gap:var(--s-3);
  padding:var(--s-7);
}
.item-modal__title{
  font-family:var(--font-display); font-size:var(--fs-h1); line-height:1.12;
  font-weight:var(--fw-display); letter-spacing:var(--tracking-tight);
}
.item-modal__pcs{ color:var(--muted); font-size:var(--fs-sm) }
.item-modal__desc{ color:var(--muted); font-size:var(--fs-sm); line-height:var(--lh-prose) }
.item-modal__price-row{
  display:flex; align-items:center; justify-content:space-between; gap:var(--s-4);
  margin-top:auto; padding-top:var(--s-5);
}
.item-modal__price{ font-size:var(--fs-base); font-weight:600; font-variant-numeric:tabular-nums }
.item-modal .btn{ width:100%; height:56px; margin-top:var(--s-4) }
@media (max-width:760px){
  .item-modal .panel{ flex-direction:column }
  .item-modal__media{ flex:none; height:220px }
  .item-modal__body{ padding:var(--s-5) }
}

/* the whole card is clickable, the + button is not part of that */
.card__open{
  position:absolute; inset:0; z-index:1;
  border-radius:var(--r-lg);
}
.card__foot{ position:relative; z-index:2 }
.card__badge{ z-index:3 }   /* stays absolutely positioned, just above .card__open */

/* =========================================================
   ADDRESS MODAL (form + map)
   ========================================================= */
.addr-modal .panel{ flex-direction:row; padding:0 }
.addr-modal__form{
  flex:1 1 50%; min-width:0;
  display:flex; flex-direction:column; gap:var(--s-4);
  padding:var(--s-7);
}
/* minmax(0,1fr), not 1fr: an <input> carries an intrinsic min-width, and a
   plain 1fr track refuses to shrink below it — which pushed the right-hand
   column out under the map pane. */
.addr-grid{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:var(--s-3) }
.addr-grid .field{ min-width:0 }
.map-pane{
  flex:1 1 50%; min-width:0; align-self:stretch; position:relative;
  min-height:380px;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, transparent 1px 56px),
    repeating-linear-gradient(0deg,  rgba(255,255,255,.05) 0 1px, transparent 1px 56px),
    radial-gradient(120% 120% at 30% 20%, var(--ink-3) 0%, var(--ink) 70%);
}
.map-pane::before{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(115deg, transparent 46%, rgba(235,213,92,.10) 47%, rgba(235,213,92,.10) 48%, transparent 49%),
    linear-gradient(24deg,  transparent 62%, rgba(235,213,92,.08) 63%, rgba(235,213,92,.08) 64%, transparent 65%);
}
.map-pane__pin{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-100%);
  display:grid; place-items:center;
  width:34px; height:34px; border-radius:50% 50% 50% 0;
  rotate:-45deg;
  background:var(--grad-gold);
}
.map-pane__pin svg{ width:15px; height:15px; fill:var(--ink); rotate:45deg }
.map-pane__note{
  position:absolute; left:var(--s-4); right:var(--s-4); bottom:var(--s-4);
  padding:var(--s-3);
  font-size:var(--fs-xs); line-height:16px; color:var(--muted); text-align:center;
  background:rgba(4,6,6,.75); border:1px solid var(--hairline); border-radius:var(--r-md);
}
@media (max-width:760px){
  .addr-modal .panel{ flex-direction:column }
  .map-pane{ flex:none; min-height:180px; order:-1 }
  .addr-modal__form{ padding:var(--s-5) }
}

/* =========================================================
   HEADER: address picker + signed-in state
   ========================================================= */
.addr-btn{
  display:inline-flex; align-items:center; gap:var(--s-2); flex:none;
  max-width:220px; height:40px; padding-inline:var(--s-3);
  border-radius:var(--r-md); color:var(--muted);
  transition:background .15s ease, color .15s ease;
}
.addr-btn:hover{ background:var(--surface); color:var(--white) }
.addr-btn svg{ width:16px; height:16px; fill:currentColor; flex:none }
.addr-btn span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.btn-ghost svg{ width:16px; height:16px; fill:currentColor }
.btn-ghost{ gap:var(--s-2) }
@media (max-width:1200px){ .addr-btn{ max-width:140px } }
@media (max-width:900px){ .addr-btn{ display:none } }

/* =========================================================
   ACCOUNT PAGE
   ========================================================= */
.account-tabs .container{ padding-block:var(--s-3); overflow-x:auto; scrollbar-width:none }
.account-tabs .container::-webkit-scrollbar{ display:none }
.account-tabs a{
  display:inline-flex; align-items:center; gap:var(--s-2); flex:none;
  height:34px; padding-inline:var(--s-4);
  border:1px solid var(--hairline); border-radius:var(--r-pill);
  color:var(--muted);
  font-size:var(--fs-xs); white-space:nowrap;
  transition:background .15s ease, border-color .15s ease, color .15s ease;
}
.account-tabs a svg{ width:13px; height:13px; fill:currentColor }
.account-tabs a:hover{ color:var(--white); border-color:var(--hairline-2) }
.account-tabs a[aria-current="page"]{ border-color:var(--white); color:var(--white) }

/* Left-aligned to the same edge as the page heading above it — a centred
   column under a left-aligned head reads as two different pages. */
.panel-list{
  display:flex; flex-direction:column; gap:var(--s-3);
  max-width:680px; padding-bottom:var(--s-8);
}
.panel-list .box{ gap:var(--s-2) }
.row-actions{ display:flex; gap:var(--s-2); flex:none }
.row-actions button{
  width:32px; height:32px; display:grid; place-items:center;
  color:var(--muted); border-radius:var(--r-pill);
  transition:color .15s ease, background .15s ease;
}
.row-actions button:hover{ color:var(--white); background:var(--surface) }
.row-actions svg{ width:14px; height:14px; fill:currentColor }
.tag-default{
  padding:2px var(--s-2); font-size:var(--fs-xs);
  color:var(--gold); border:1px solid var(--gold-deep); border-radius:var(--r-sm);
}
/* ---------- active-order banner ---------- */
.live-bar{
  position:relative;
  display:flex; align-items:center; gap:var(--s-3);
  padding:var(--s-2) calc(var(--gutter) + 34px) var(--s-2) var(--gutter);
  background:linear-gradient(90deg, rgba(150,120,62,.28), rgba(150,120,62,.10));
  border-bottom:1px solid var(--gold-deep);
  font-size:var(--fs-xs); color:var(--white);
}
.live-bar__label{ letter-spacing:var(--tracking-label); text-transform:uppercase }
.live-bar__id{ color:var(--gold); font-variant-numeric:tabular-nums }
.live-bar__go{ margin-left:auto; color:var(--gold) }
.live-bar svg{ width:12px; height:12px; fill:var(--gold); transition:transform .25s ease }
.live-bar:hover svg{ transform:translateX(3px) }
.live-bar__close{
  position:absolute; right:calc(var(--gutter) - 30px); top:50%; transform:translateY(-50%);
  width:26px; height:26px; display:grid; place-items:center;
  font-size:18px; line-height:1; color:var(--muted); border-radius:var(--r-pill);
  transition:color .15s ease, background .15s ease;
}
.live-bar__close:hover{ color:var(--white); background:rgba(255,255,255,.10) }
@media (max-width:600px){
  .live-bar__label{ display:none }
  .live-bar{ padding-inline:var(--gutter) calc(var(--gutter) + 26px) }
}

/* ---------- order in progress ---------- */
.live-order{
  display:flex; flex-direction:column; gap:var(--s-3);
  padding:var(--s-5);
  border:1px solid var(--gold-deep); border-radius:var(--r-control);
  margin-bottom:var(--s-4);
}
.live-order__top{ display:flex; align-items:center; justify-content:space-between; gap:var(--s-4) }
.live-order__top .eyebrow{ gap:var(--s-2) }
.live-dot{
  width:7px; height:7px; flex:none; border-radius:50%;
  background:var(--gold); box-shadow:0 0 0 0 rgba(235,213,92,.55);
  animation:live-pulse 2.2s ease-out infinite;
}
@keyframes live-pulse{
  70%{ box-shadow:0 0 0 8px rgba(235,213,92,0) }
  100%{ box-shadow:0 0 0 0 rgba(235,213,92,0) }
}
@media (prefers-reduced-motion:reduce){ .live-dot{ animation:none } }
.live-order__id{
  font-size:var(--fs-base); font-weight:600;
  font-variant-numeric:tabular-nums;
}
.live-order__facts{ display:flex; flex-wrap:wrap; gap:var(--s-3) var(--s-7) }
.live-order__facts div{ display:flex; flex-direction:column; gap:2px }
.live-order__facts dt{ font-size:var(--fs-xs); color:var(--muted) }
.live-order__facts dd{ margin:0; font-size:var(--fs-sm) }

.order-row__again{ align-self:flex-start; margin-top:var(--s-2); height:36px }
.order-row__again svg{ width:13px; height:13px; fill:currentColor }

.order-row{ display:flex; flex-direction:column; gap:var(--s-2) }
.order-row__head{ display:flex; align-items:baseline; justify-content:space-between; gap:var(--s-3) }
.order-row__id{ font-size:var(--fs-sm); color:var(--muted) }
.order-row__items{ font-size:var(--fs-sm); color:var(--muted) }
/* One badge per lifecycle state. Outlined rather than filled, so a row of
   orders does not turn into a row of coloured blocks; the colour is carried by
   the text and the hairline. */
.badge-status{
  display:inline-flex; align-items:center; gap:6px;
  padding:3px var(--s-3); border-radius:var(--r-pill);
  font-size:var(--fs-label); letter-spacing:var(--tracking-label);
  text-transform:uppercase; white-space:nowrap;
  color:var(--muted); border:1px solid var(--hairline);
}
.badge-status::before{
  content:""; width:5px; height:5px; border-radius:50%;
  background:currentColor; flex:none;
}
.badge-status[data-state="placed"]{     color:var(--white);  border-color:var(--hairline-2) }
.badge-status[data-state="preparing"]{  color:var(--gold-lift); border-color:var(--gold-deep) }
.badge-status[data-state="on-the-way"]{ color:var(--gold);   border-color:var(--gold-deep) }
.badge-status[data-state="delivered"]{  color:var(--ok);     border-color:rgba(143,190,110,.42) }
.badge-status[data-state="cancelled"]{  color:var(--danger); border-color:rgba(217,97,79,.42) }

/* =========================================================
   MOBILE
   Consolidated on purpose. These rules have to beat component
   defaults defined earlier in this file, and keeping them in one
   block makes the small-screen behaviour readable in one place
   instead of scattered across twenty media queries.
   ========================================================= */
@media (max-width: 760px){

  /* ---- header: one compact row + search ----
     Brand + lang + cart + burger fit on a single line only once the auth
     button leaves; it moves into the drawer, which is where a phone user
     looks for account actions anyway. */
  .site-header .container{ gap:var(--s-3) }
  .header-actions{ gap:var(--s-2) }
  .header-actions .btn-ghost{ display:none }
  .brand__logo{ width:96px; height:34px }

  /* ---- tap targets ----
     Anything you press gets ~44px of hit area even when the ink is small.
     The globe was a 15px icon with no padding — a genuinely hard tap. */
  .lang{
    min-width:44px; min-height:44px;
    display:inline-flex; align-items:center; justify-content:center;
  }
  .btn-round{ width:44px; height:44px }
  .burger{ width:44px; height:44px }
  .chip{ height:40px; padding-inline:var(--s-5) }
  .social{ width:42px; height:42px }
  .footer-col a{ display:inline-block; padding-block:6px }
  .line__remove{ width:40px; height:40px }
  .stepper button{ width:38px; height:38px }
  .search__clear{ width:38px; height:38px }
  /* `.card .btn-round` is (0,2,0) — a media query adds no specificity, so the
     plain `.btn-round` rule above cannot reach it. */
  .card .btn-round{ width:44px; height:44px }
  .panel__close{ width:44px; height:44px }
  .account-tabs a{ height:40px }
  .auth-forgot{ padding:var(--s-2) 0 }
  .footer-col a{ padding-block:9px }
  .brand{ padding-block:var(--s-1) }
  /* The bar is what people aim at; make the input fill it so the whole
     rounded field focuses rather than just the 26px text line. */
  .search input{ height:100%; align-self:stretch }

  /* ---- search results: full width, and tall enough to be worth opening ---- */
  .search-results{ max-height:56vh }
  .search-results__row{ padding:var(--s-3) var(--s-2) }

  /* ---- drawer + modals clear the home indicator ---- */
  .panel__foot{ padding-bottom:calc(var(--s-4) + env(safe-area-inset-bottom, 0px)) }
  .drawer__panel{ padding-bottom:env(safe-area-inset-bottom, 0px) }
}

@media (max-width: 600px){

  /* ---- menu cards: horizontal ----
     A 200px photo per dish means one and a half cards per screen and a very
     long scroll. Turning the card on its side puts five or six in view, which
     is what makes a menu browsable on a phone. The photo is still the biggest
     thing in the row. */
  .card{
    display:grid;
    grid-template-columns:118px minmax(0,1fr);
    align-items:stretch;
  }
  /* Explicit placement: with two columns and three children, auto-placement
     drops the price row into column 1 underneath the photo. */
  .card__media{
    grid-row:1 / 3;
    height:auto; min-height:118px;
    border-bottom:0; border-right:1px solid var(--hairline);
  }
  .card__body{ grid-column:2; padding:var(--s-3) var(--s-4) 0 }
  .card__foot{ grid-column:2; padding:var(--s-2) var(--s-4) var(--s-3) }
  .card__price{ white-space:nowrap }
  .card__badge{ top:var(--s-2); left:var(--s-2); padding:3px 6px }
  .card-grid{ gap:var(--s-4) }

  /* ---- payment methods: three across 390px ----
     "Bank card" wrapped to two lines and threw the row out of alignment.
     Tighter padding and a smaller label keep all three on one line with
     their icons. */
  .segmented button{
    min-width:0; padding-inline:var(--s-2); gap:6px;
    font-size:var(--fs-xs); white-space:nowrap;
  }
  .segmented button svg{ width:14px; height:14px }

  /* ---- cart line: the total was being clipped ----
     Three columns do not fit at 390px; the total overflowed and `overflow:hidden`
     ate it, so prices read "00 AMD". Give the total its own row under the
     controls and let the photo span both. */
  .line{
    grid-template-columns:auto minmax(0,1fr);
    row-gap:var(--s-1);
    align-items:start;
  }
  .line__media{ grid-row:1 / 3; align-self:stretch }
  .line__body{ grid-column:2; padding-bottom:0 }
  .line__total{
    grid-column:2; justify-self:start;
    padding-bottom:var(--s-3); font-size:var(--fs-base);
  }
}