/* Crispello shop layer: bilingual / RTL, live menu, customizer, cart, reviews, QR page.
   Built on the tokens in styles.css (ink / bone / cheddar / ketchup, Archivo + JetBrains Mono). */

:root {
  --f-display: "Archivo", "Cairo", system-ui, sans-serif;
  --f-mono: "JetBrains Mono", "Cairo", ui-monospace, monospace;
  --wa: #25d366;
  --sx: 1; /* slide direction for drawers: 1 = from the right, -1 = from the left (RTL) */
}
html[dir="rtl"] { --sx: -1; }
html.modal-open, html.modal-open body { overflow: hidden; }

/* Arabic joins letters: tracking must be off. Latin wordmarks keep theirs. */
html[lang="ar"] *:not(.hero-title__a):not(.foot__word):not(.brand__word) { letter-spacing: 0 !important; }
html[lang="ar"] body { line-height: 1.7; }

/* the cinematic film + chrome keep their physical layout in RTL */
.nav, .film, .marquee, .foot__word { direction: ltr; }
html[dir="rtl"] .chapter { direction: rtl; }
html[dir="rtl"] .chapter h2 { font-weight: 400; }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- nav additions ---------- */
.nav-btn {
  position: relative; display: inline-grid; place-items: center; width: 38px; height: 38px; padding: 0;
  background: rgba(11, 9, 7, 0.4); border: 1px solid var(--line-2); color: var(--bone); cursor: pointer;
  font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.1em; border-radius: 50%;
  transition: border-color 0.3s, color 0.3s, background 0.3s;
}
.nav-btn:hover { border-color: var(--cheddar); color: var(--cheddar); }
.nav-btn svg { width: 18px; height: 18px; }
.nav-btn em {
  position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; padding: 0 4px; display: grid; place-items: center;
  border-radius: 999px; background: var(--cheddar); color: var(--ink); font: 700 10px/1 var(--f-mono); font-style: normal;
}
.nav-btn em[hidden] { display: none; }
.nav { gap: 20px; }
.nav__links { gap: clamp(14px, 1.7vw, 26px); }
.nav__links a, .live, .order-pill, .live__t { white-space: nowrap; }
.nav__links a i { letter-spacing: 0.1em; margin-inline: 0 4px; }
.nav__meta { gap: 12px; flex: none; }
/* the steel-temp readout is the first thing to go when the bar gets tight */
@media (max-width: 1500px) { .live { display: none; } }
@media (max-width: 1180px) { .nav__links { display: none; } }

/* ---------- film: scroll cue ---------- */
.scroll-cue {
  position: absolute; z-index: 5; left: 50%; bottom: 74px; translate: -50% 0;
  display: grid; justify-items: center; gap: 10px;
  font: 500 10px/1 var(--f-mono); letter-spacing: 0.42em; text-transform: uppercase; color: rgba(243, 235, 221, 0.7);
  transition: opacity 0.5s, color 0.3s;
}
.scroll-cue span { padding-inline-start: 0.42em; }
.scroll-cue:hover { color: var(--cheddar); }
.scroll-cue i { position: relative; width: 1px; height: 46px; background: var(--line-2); overflow: hidden; }
.scroll-cue i::after {
  content: ""; position: absolute; left: 0; top: 0; width: 1px; height: 18px; background: var(--cheddar);
  animation: cue 1.8s var(--ease) infinite;
}
@keyframes cue { from { transform: translateY(-18px); } to { transform: translateY(46px); } }
.film.is-past-intro .scroll-cue { opacity: 0; pointer-events: none; }
.film.is-static .scroll-cue, html:not(.js) .scroll-cue { display: none; }
@media (max-width: 820px), (max-height: 560px) { .scroll-cue { display: none; } }
@media (prefers-reduced-motion: reduce) { .scroll-cue i::after { animation: none; transform: translateY(14px); } }

/* ---------- film: keep the tall "Specifications" chapter clear of the HUD on short screens ---------- */
@media (min-width: 821px) {
  .chapter--specs { top: calc(50% + 26px); gap: 14px; }
  .chapter--specs .temp { font-size: min(8vw, 17vh, 128px) !important; }
  .chapter--specs .specs-title { font-size: min(3.6vw, 6.4vh, 54px) !important; }
}
@media (max-height: 760px) and (min-width: 821px) {
  .chapter--specs { gap: 10px; }
  .chapter--specs .spec--grid { gap: 8px 28px; padding-top: 10px; }
}

/* ---------- menu ---------- */
.menu__head { gap: 22px; }
.menu__head h2 em { font-style: normal; }
.cta-wa {
  justify-self: start; display: inline-flex; gap: 10px; align-items: center; padding: 13px 22px;
  border: 1px solid var(--bone); font-weight: 700; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase;
  transition: background 0.3s, color 0.3s;
}
.cta-wa:hover { background: var(--bone); color: var(--ink); }
.search { display: block; max-width: 420px; }
.search input {
  width: 100%; height: 50px; padding: 0 18px; background: var(--char); color: var(--bone); border: 1px solid var(--line-2);
  font: inherit; font-size: 14px; border-radius: 0; -webkit-appearance: none; appearance: none;
}
.search input::placeholder { color: var(--muted); }
.search input:focus { outline: none; border-color: var(--cheddar); }

.menu__main { min-width: 0; }
.menu__tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 28px; }
.tab {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; min-height: 44px;
  background: transparent; color: var(--muted); border: 1px solid var(--line-2); border-radius: 0; cursor: pointer;
  font: 500 11px/1 var(--f-mono); letter-spacing: 0.14em; text-transform: uppercase; transition: color 0.3s, border-color 0.3s, background 0.3s;
}
.tab sup { font-size: 9px; color: var(--cheddar); }
.tab:hover { color: var(--bone); border-color: var(--bone); }
.tab.is-on { background: var(--cheddar); color: var(--ink); border-color: var(--cheddar); }
.tab.is-on sup { color: var(--ink); }

.menu__bar { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding-bottom: 14px; flex-wrap: wrap; }
.menu__bar h3 { font-weight: 300; font-variation-settings: "wdth" 115; text-transform: uppercase; font-size: clamp(24px, 2.6vw, 38px); line-height: 1; }

.menu__state { padding: 64px 8px; text-align: center; color: var(--muted); font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; }

.dish--shop {
  grid-template-columns: 32px 92px minmax(0, 1fr) auto auto; align-items: center; gap: 20px; padding: 22px 8px;
  animation: dishIn 0.6s var(--ease) both; animation-delay: calc(var(--i, 0) * 45ms);
}
@keyframes dishIn { from { opacity: 0; transform: translateY(14px); } }
.dish__img { position: relative; width: 92px; height: 92px; background: var(--char); overflow: hidden; }
.dish__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease); }
.dish:hover .dish__img img { transform: scale(1.08); }
.dish__img i {
  position: absolute; top: 6px; inset-inline-start: 6px; font-style: normal; background: var(--cheddar); color: var(--ink);
  font: 700 9px/1 var(--f-mono); letter-spacing: 0.12em; padding: 4px 6px; text-transform: uppercase;
}
.dish--shop h3 { font-size: clamp(18px, 1.7vw, 26px); }
.dish__alt { display: block; margin-top: 4px; font-size: 12px; color: var(--muted); opacity: 0.8; }
.dish--shop .dish__body p { margin-top: 8px; font-size: 13px; line-height: 1.5; }
.dish--shop .dish__p { display: grid; justify-items: end; line-height: 1; font-size: clamp(20px, 1.9vw, 28px); white-space: nowrap; }
.dish__p b { font-weight: 300; }
.dish__p small { font: 500 10px/1 var(--f-mono); letter-spacing: 0.14em; color: var(--cheddar); margin-top: 6px; }
html[dir="rtl"] .dish:hover h3 { transform: translateX(-8px); }
.dish__add {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 16px; cursor: pointer;
  background: transparent; color: var(--bone); border: 1px solid var(--bone);
  font: 700 12px/1 var(--f-display); letter-spacing: 0.08em; text-transform: uppercase; transition: background 0.3s, color 0.3s, border-color 0.3s;
}
.dish__add span { color: var(--cheddar); font-size: 16px; transition: color 0.3s; }
.dish__add:hover { background: var(--cheddar); border-color: var(--cheddar); color: var(--ink); }
.dish__add:hover span { color: var(--ink); }

.menu__extras {
  margin-top: 56px; padding: 28px; border: 1px dashed var(--line-2); display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap;
}
.menu__extras[hidden] { display: none; }
.menu__extras-t { font-weight: 600; font-variation-settings: "wdth" 115; text-transform: uppercase; font-size: 20px; }
.menu__extras-b { color: var(--muted); font-size: 14px; margin-top: 6px; max-width: 52ch; }
button.cta-line { background-color: transparent; border: 0; color: inherit; cursor: pointer; }

/* ---------- reviews ---------- */
.reviews { padding: clamp(72px, 10vw, 140px) var(--gutter); border-top: 1px solid var(--line); display: grid; gap: 40px; }
.reviews__head { display: grid; gap: 14px; }
.reviews__head h2 { font-weight: 800; font-variation-settings: "wdth" 120; text-transform: uppercase; font-size: clamp(40px, 5vw, 76px); line-height: 0.95; }
.reviews__row { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; scrollbar-width: none; }
.reviews__row::-webkit-scrollbar { display: none; }
.review { flex: 0 0 min(340px, 82vw); scroll-snap-align: start; padding: 28px; border: 1px solid var(--line); background: var(--char); display: grid; gap: 18px; align-content: space-between; }
.review__stars { color: var(--cheddar); letter-spacing: 0.2em; font-size: 14px; }
.review blockquote { margin: 0; font-size: 16px; line-height: 1.6; color: rgba(243, 235, 221, 0.85); }
.review figcaption { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; padding-top: 14px; border-top: 1px solid var(--line); }
.review figcaption b { font-weight: 700; text-transform: uppercase; font-variation-settings: "wdth" 112; }
.review figcaption span { font: 400 10px/1 var(--f-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.reviews__cta { display: flex; }
@media (min-width: 960px) {
  .reviews__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; }
  .review { flex: none; }
}

/* ---------- numbers / visit in RTL ---------- */
.num { border-right: 0; border-inline-end: 1px solid var(--line); }
.num:last-child { border-inline-end: 0; }
.visit__grid { grid-template-columns: repeat(3, minmax(0, 240px)); }
.visit__grid a { text-decoration: underline; text-underline-offset: 3px; }
/* ---------- footer ---------- */
.foot { padding-top: clamp(48px, 6vw, 80px); border-top: 1px solid var(--line); }
.foot__grid { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr)); gap: clamp(28px, 5vw, 80px); padding-bottom: clamp(40px, 6vw, 80px); }
.foot__col { display: grid; gap: 10px; align-content: start; }
.foot__col .kicker { margin-bottom: 6px; }
.foot__col a, .foot__col p { color: rgba(243, 235, 221, 0.78); font-size: 15px; justify-self: start; transition: color 0.3s; }
.foot__col a:hover { color: var(--cheddar); }
.foot__col--brand .kicker { color: var(--cheddar); }
.foot__blurb { max-width: 36ch; font-size: clamp(18px, 1.6vw, 22px) !important; line-height: 1.45; color: var(--bone) !important; }
.foot__word { font-size: 12.4vw; margin: 0; overflow: hidden; }
.foot__row a:hover { color: var(--cheddar); }
.foot__admin { opacity: 0.55; }
@media (max-width: 820px) {
  .foot__grid { grid-template-columns: 1fr 1fr; }
  .foot__col--brand { grid-column: 1 / -1; }
}

/* ---------- shared buttons ---------- */
.icon-btn {
  width: 40px; height: 40px; flex: none; display: grid; place-items: center; background: transparent; color: var(--bone);
  border: 1px solid var(--line-2); cursor: pointer; font-size: 14px; transition: border-color 0.3s, color 0.3s;
}
.icon-btn:hover { border-color: var(--cheddar); color: var(--cheddar); }
.btn-solid, .btn-wa {
  display: flex; justify-content: center; align-items: center; gap: 10px; width: 100%; min-height: 52px; padding: 14px 24px; cursor: pointer; border: 0;
  font: 700 14px/1 var(--f-display); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink);
  clip-path: polygon(0 0, 100% 0, 100% 70%, calc(100% - 12px) 100%, 0 100%);
  transition: background 0.3s, filter 0.3s;
}
.btn-solid { background: var(--cheddar); }
.btn-solid:hover { background: var(--bone); }
.btn-solid.is-done { background: rgba(37, 211, 102, 0.16); color: var(--wa); clip-path: none; outline: 1px solid rgba(37, 211, 102, 0.45); outline-offset: -1px; }
.btn-wa { background: var(--wa); }
.btn-wa:hover { filter: brightness(1.1); }
.btn-line, .btn-ghost { width: 100%; min-height: 44px; cursor: pointer; background: transparent; color: var(--muted); font: 500 11px/1 var(--f-mono); letter-spacing: 0.14em; text-transform: uppercase; }
.btn-line { border: 1px solid var(--line-2); }
.btn-line:hover { border-color: var(--bone); color: var(--bone); }
.btn-line:disabled { opacity: 0.6; }
.btn-ghost { border: 0; min-height: 40px; }
.btn-ghost:hover { color: var(--ketchup); }

/* ---------- cart drawer ---------- */
.cart, .cz { position: fixed; inset: 0; z-index: 80; }
.cart[hidden], .cz[hidden] { display: none; }
.cz { z-index: 90; }
.cart__scrim, .cz__scrim { position: absolute; inset: 0; background: rgba(11, 9, 7, 0.72); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); opacity: 0; transition: opacity 0.35s; }
.is-open > .cart__scrim, .is-open > .cz__scrim { opacity: 1; }

.cart__panel {
  position: absolute; top: 0; bottom: 0; inset-inline-end: 0; width: min(420px, 100%); display: flex; flex-direction: column;
  background: var(--char); border-inline-start: 1px solid var(--line-2);
  transform: translateX(calc(var(--sx) * 100%)); transition: transform 0.45s var(--ease);
}
.cart.is-open .cart__panel { transform: none; }
.cart__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 20px 22px; border-bottom: 1px solid var(--line); }
.cart__head h2 { font-weight: 800; font-variation-settings: "wdth" 118; text-transform: uppercase; font-size: 26px; line-height: 1.1; margin-top: 4px; }
.cart__list { flex: 1; overflow-y: auto; padding: 8px 22px; overscroll-behavior: contain; }
.cart__empty { padding: 72px 0; text-align: center; color: var(--muted); font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.1em; line-height: 1.8; }

.cline { padding: 14px 0; border-bottom: 1px solid var(--line); }
.cline__row { display: flex; align-items: center; gap: 12px; }
.cline img, .cline__ph { width: 56px; height: 56px; flex: none; object-fit: cover; background: var(--char-2); }
.cline__t { flex: 1; min-width: 0; }
.cline__t p { font-weight: 600; text-transform: uppercase; font-variation-settings: "wdth" 110; font-size: 14px; line-height: 1.25; }
.cline__t b { display: block; margin-top: 4px; font: 500 12px/1 var(--f-mono); color: var(--cheddar); }
.cline__x { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line-2); display: grid; gap: 4px; font-size: 12px; color: var(--muted); }
.qty { display: flex; align-items: center; gap: 8px; flex: none; }
.qty span { min-width: 20px; text-align: center; font: 500 13px/1 var(--f-mono); }
.qty button, .cz__qty button {
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; font-size: 15px; line-height: 1;
  background: transparent; color: var(--bone); border: 1px solid var(--line-2); transition: border-color 0.3s, background 0.3s;
}
.qty button:hover, .cz__qty button:hover:not(:disabled) { border-color: var(--bone); }
.qty .is-plus, .cz__qty .is-plus { background: var(--cheddar); border-color: var(--cheddar); color: var(--ink); font-weight: 700; }

.cart__upsell { padding: 14px 22px 8px; border-top: 1px solid var(--line); display: grid; gap: 10px; }
.upsell { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 8px; scrollbar-width: none; }
.upsell::-webkit-scrollbar { display: none; }
.up { flex: none; width: 188px; display: flex; align-items: center; gap: 10px; padding: 8px; border: 1px solid var(--line); background: var(--char-2); }
.up img, .up .cline__ph { width: 40px; height: 40px; object-fit: cover; flex: none; }
.up > div { flex: 1; min-width: 0; }
.up p { font-size: 11px; font-weight: 700; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.up small { font: 400 10px/1 var(--f-mono); color: var(--cheddar); }
.up button { width: 32px; height: 32px; flex: none; border-radius: 50%; border: 0; background: var(--cheddar); color: var(--ink); font-weight: 700; cursor: pointer; }

.cart__foot { padding: 18px 22px 22px; border-top: 1px solid var(--line); display: grid; gap: 10px; }
.cart__total { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 6px; }
.cart__total span { font: 500 11px/1 var(--f-mono); letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }
.cart__total b { font-weight: 300; font-variation-settings: "wdth" 110; font-size: 28px; color: var(--cheddar); font-variant-numeric: tabular-nums; }
.loc { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 14px; font: 500 11px/1.3 var(--f-mono); letter-spacing: 0.08em; color: var(--wa); border: 1px solid rgba(37, 211, 102, 0.35); background: rgba(37, 211, 102, 0.07); }
.loc button { background: none; border: 0; color: var(--muted); text-decoration: underline; cursor: pointer; font: inherit; }

/* ---------- customizer sheet ---------- */
.cz__sheet {
  position: absolute; bottom: 0; left: 50%; width: min(580px, 100%); max-height: 92dvh; display: flex; flex-direction: column;
  background: var(--char); border-top: 2px solid var(--cheddar); transform: translate(-50%, 100%); transition: transform 0.45s var(--ease);
}
.cz.is-open .cz__sheet { transform: translate(-50%, 0); }
.cz__grip { width: 40px; height: 3px; margin: 12px auto 4px; background: var(--line-2); flex: none; }
.cz__body { overflow-y: auto; padding: 8px 24px 20px; display: grid; gap: 26px; overscroll-behavior: contain; }
.cz__head { display: flex; align-items: flex-start; gap: 16px; margin-top: 8px; }
.cz__t { flex: 1; min-width: 0; display: grid; gap: 6px; }
.cz__t h2 { font-weight: 800; font-variation-settings: "wdth" 118; text-transform: uppercase; font-size: clamp(24px, 4vw, 34px); line-height: 1; }
.cz__t small { color: var(--muted); font-size: 13px; }
#cz-img { width: 80px; height: 80px; object-fit: cover; flex: none; border: 1px solid var(--line-2); }
.cz__body section { display: grid; gap: 12px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 8px 14px; cursor: pointer; user-select: none;
  background: transparent; color: var(--bone); border: 1px solid var(--line-2); border-radius: 0; font: 500 13px/1.2 var(--f-display); transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.chip:hover { border-color: var(--bone); }
.chip.is-off { text-decoration: line-through; color: var(--muted); border-color: rgba(224, 65, 43, 0.5); background: rgba(224, 65, 43, 0.08); }
.chip.is-off span { color: var(--ketchup); text-decoration: none; }
.chips__sum { font-size: 12px; color: var(--muted); padding: 10px 12px; border: 1px solid rgba(224, 65, 43, 0.3); background: rgba(224, 65, 43, 0.06); }
.cz__body textarea {
  width: 100%; resize: none; padding: 12px 14px; background: var(--ink); color: var(--bone); border: 1px solid var(--line-2); font: inherit; font-size: 14px; border-radius: 0;
}
.cz__body textarea:focus { outline: none; border-color: var(--cheddar); }
.cz__qty { display: flex; align-items: center; gap: 18px; }
.cz__qty button { width: 44px; height: 44px; font-size: 18px; }
.cz__qty button:disabled { opacity: 0.4; cursor: default; }
.cz__qty span { min-width: 28px; text-align: center; font-weight: 200; font-variation-settings: "wdth" 110; font-size: 40px; line-height: 1; }
.cz__qty b { font: 500 13px/1 var(--f-mono); color: var(--cheddar); }
.cz__foot { padding: 14px 24px calc(18px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); flex: none; }

.fly { position: fixed; z-index: 100; width: 64px; height: 64px; object-fit: cover; border-radius: 50%; pointer-events: none; border: 2px solid var(--cheddar); }

/* ---------- QR page ---------- */
.page { min-height: 100vh; padding: 140px var(--gutter) 80px; }
.qr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 480px); gap: clamp(32px, 6vw, 96px); align-items: center; max-width: 1200px; margin: 0 auto; }
.qr h1 { font-weight: 800; font-variation-settings: "wdth" 122; text-transform: uppercase; font-size: clamp(48px, 7vw, 112px); line-height: 0.9; margin: 14px 0 18px; }
.qr__lead { color: var(--muted); max-width: 44ch; }
.qr__steps { margin-top: 36px; border-top: 1px solid var(--line); counter-reset: s; }
.qr__steps li { counter-increment: s; display: flex; gap: 18px; align-items: baseline; padding: 16px 0; border-bottom: 1px solid var(--line); color: rgba(243, 235, 221, 0.82); }
.qr__steps li::before { content: "0" counter(s); font: 500 12px/1 var(--f-mono); color: var(--cheddar); }
.qr__tip { margin-top: 28px; padding: 18px 20px; border: 1px solid var(--line); background: var(--char); display: grid; gap: 6px; }
.qr__tip b { font-weight: 700; text-transform: uppercase; font-variation-settings: "wdth" 112; }
.qr__tip span { color: var(--muted); font-size: 13px; }
.qr__card { padding: clamp(20px, 4vw, 36px); background: var(--char); border: 1px solid var(--line-2); display: grid; gap: 22px; justify-items: center; }
.qr__code { background: #fff; padding: 18px; width: 100%; display: grid; place-items: center; }
.qr__code canvas { width: min(100%, 300px); height: auto; image-rendering: pixelated; }
.qr__brand { text-align: center; display: grid; gap: 6px; }
.qr__brand b { font-weight: 800; font-variation-settings: "wdth" 125; text-transform: uppercase; font-size: 34px; color: var(--cheddar); line-height: 1; }
.qr__url { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; background: var(--ink); border: 1px solid var(--line); font: 500 12px/1 var(--f-mono); direction: ltr; }
.qr__url span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qr__btns { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.qr__btns .btn-solid, .qr__btns .btn-line { min-height: 50px; }
.qr__btns .btn-line { color: var(--bone); font-size: 12px; }

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .nav__meta { gap: 10px; }
}
@media (max-width: 820px) {
  .dish--shop { grid-template-columns: 76px minmax(0, 1fr) auto; grid-template-areas: "img body body" "img price add"; gap: 10px 14px; padding: 20px 2px; align-items: start; }
  .dish--shop .dish__n { display: none; }
  .dish--shop .dish__img { grid-area: img; width: 76px; height: 76px; }
  .dish--shop .dish__body { grid-area: body; }
  .dish--shop .dish__p { grid-area: price; justify-items: start; align-self: center; }
  .dish--shop .dish__add { grid-area: add; justify-self: end; }
  .num { border-inline-end: 1px solid var(--line); }
  .num:nth-child(2n) { border-inline-end: 0; }
  .visit__grid { grid-template-columns: 1fr; }
  .qr { grid-template-columns: 1fr; }
  .page { padding-top: 110px; }
  .nav-btn--lang { width: 34px; height: 34px; }
  .order-pill { padding: 9px 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .dish--shop { animation: none; }
  .cart__panel, .cz__sheet, .cart__scrim, .cz__scrim { transition: none; }
}

/* ---------- real logo ---------- */
.brand__logo { width: 44px; height: 44px; flex: none; border-radius: 50%; object-fit: cover; background: #fbf7f0; box-shadow: 0 0 0 1px var(--line-2); transition: transform 0.6s var(--ease); }
.brand:hover .brand__logo { transform: rotate(-8deg) scale(1.04); }
.foot__logo { width: 112px; height: auto; margin-bottom: 8px; background: #fbf7f0; }
.ad-login__logo { width: 110px; height: auto; justify-self: center; background: #fbf7f0; }

/* ---------- phones ---------- */
@media (max-width: 820px) {
  .nav { padding-top: max(14px, env(safe-area-inset-top)); padding-bottom: 14px; gap: 10px; }
  .brand { gap: 8px; min-width: 0; }
  .brand__logo { width: 40px; height: 40px; }
  .nav__meta { gap: 8px; }
  .nav-btn, .nav-btn--lang { width: 42px; height: 42px; }
  .order-pill { min-height: 42px; padding: 0 16px; }

  /* category tabs: one swipeable row instead of ragged wrapped rows */
  .menu__tabs {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
    margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter);
    scroll-snap-type: x proximity;
  }
  .menu__tabs::-webkit-scrollbar { display: none; }
  .tab { flex: none; scroll-snap-align: start; }

  .search { max-width: none; }
  .cta-wa { justify-self: stretch; justify-content: center; min-height: 48px; }
  .foot__row { gap: 14px 20px; }
  .cart__panel { width: 100%; }
  .cart__head { padding-top: max(20px, env(safe-area-inset-top)); }
  .cart__foot { padding-bottom: calc(22px + env(safe-area-inset-bottom)); }
}
@media (max-width: 380px) {
  .brand__word { font-size: 15px; }
  .order-pill { padding: 0 12px; font-size: 12px; }
  .nav-btn, .nav-btn--lang { width: 38px; height: 38px; }
}

/* numbers: unit sits beside the figure, label below */
.num { grid-template-columns: max-content 1fr; align-items: start; column-gap: 6px; }
.num span { grid-column: 1 / -1; }
.num sup { margin-top: 0.4em; }

/* keep phone numbers on one line */
bdi[dir="ltr"] { white-space: nowrap; }

/* small phones: the round logo already says Crispello */
@media (max-width: 400px) {
  .brand__word { display: none; }
}

/* phones in landscape: very little height, so the film chapters go compact */
@media (max-height: 520px) and (orientation: landscape) {
  .hud, .spec--grid, .stack-list, .chapter .spec { display: none; }
  .chapter--left, .chapter--specs, .chapter--finale { top: calc(50% + 18px); gap: 8px; }
  .chapter h2, .chapter--specs .specs-title { font-size: min(7vw, 9vh, 40px) !important; }
  .chapter p { font-size: 13px; max-width: 46ch; }
  .chapter .idx { margin-bottom: 0; }
  .chapter--specs .temp { font-size: min(8vw, 15vh) !important; }
  .chapter--hero { bottom: 70px; gap: 8px; }
  .hero-title__a { font-size: min(10.5vw, 22vh); }
  .hero-title__b { font-size: min(5.6vw, 10vh); }
  .finale-title { font-size: min(4.4vw, 11vh) !important; }
  .rail { bottom: 12px; }
  .menu__head { position: static; }
}

/* ======================================================================
   Footer v2: live status + one big action, fast routes, interactive wordmark
   ====================================================================== */
.foot { padding-top: clamp(56px, 7vw, 96px); }
.foot__top {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px 48px; align-items: end;
  padding-bottom: clamp(36px, 5vw, 64px); border-bottom: 1px solid var(--line);
}
.foot__brand { display: flex; align-items: center; gap: clamp(16px, 2vw, 28px); }
.foot .foot__logo { width: clamp(64px, 6vw, 88px); height: auto; margin: 0; border-radius: 50%; aspect-ratio: 1; object-fit: cover; flex: none; }
.foot .foot__blurb { max-width: 26ch; margin: 0; font-size: clamp(20px, 2.1vw, 30px) !important; line-height: 1.3; font-weight: 300; font-variation-settings: "wdth" 108; color: var(--bone) !important; }
html[lang="ar"] .foot .foot__blurb { line-height: 1.6; }

.foot__now { display: grid; justify-items: end; gap: 14px; }
.status { display: inline-flex; align-items: center; gap: 10px; font: 500 11px/1 var(--f-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--bone); }
.status b { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); flex: none; }
.status.is-open b { background: var(--wa); box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.6); animation: openPulse 2s infinite; }
.status.is-closed b { background: var(--ketchup); }
@keyframes openPulse { 70% { box-shadow: 0 0 0 9px rgba(37, 211, 102, 0); } 100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); } }

.foot__wa { display: grid; justify-items: end; gap: 6px; color: var(--bone); }
.foot__wa-l { font: 500 11px/1 var(--f-mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--cheddar); }
.foot__wa-n {
  font-weight: 200; font-variation-settings: "wdth" 112; font-size: clamp(40px, 5.2vw, 76px); line-height: 1; letter-spacing: -0.01em;
  background: linear-gradient(currentColor, currentColor) left bottom / 0 2px no-repeat; padding-bottom: 6px;
  transition: background-size 0.5s var(--ease, ease), color 0.3s;
}
.foot__wa:hover .foot__wa-n { background-size: 100% 2px; color: var(--cheddar); }

.foot__grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px clamp(24px, 4vw, 64px);
  padding: clamp(36px, 5vw, 64px) 0;
}
.foot__col { display: grid; gap: 10px; align-content: start; }
.foot__h { margin: 0 0 6px; font: 500 10px/1 var(--f-mono); letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); }
.foot__col a, .foot__col p { justify-self: start; color: rgba(243, 235, 221, 0.82); font-size: 15px; transition: color 0.3s, translate 0.3s; }
.foot__col a:hover { color: var(--cheddar); translate: calc(var(--sx) * -4px) 0; }

/* the wordmark: letters lift and catch the heat under the pointer */
.foot__word { padding-top: 0.08em; }
.foot__word .ch { transition: translate 0.35s cubic-bezier(0.2, 1.25, 0.3, 1); }
.mo .foot__word .ch { transition: transform 1s var(--snap) calc(var(--ci) * 55ms), opacity 0.6s calc(var(--ci) * 55ms), translate 0.35s var(--snap); }
@media (pointer: fine) {
  .foot__word .ch:hover { translate: 0 -9%; background: linear-gradient(to bottom, var(--cheddar) 30%, rgba(224, 65, 43, 0.35)); -webkit-background-clip: text; background-clip: text; }
}

.foot__row { align-items: center; }
.foot__row-end { display: inline-flex; gap: 24px; }

@media (max-width: 820px) {
  .foot__top { grid-template-columns: 1fr; align-items: start; }
  .foot__now { justify-items: start; }
  .foot__wa { justify-items: start; }
  .foot__grid { grid-template-columns: 1fr 1fr; }
  .foot__row { justify-content: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .status.is-open b { animation: none; }
}

/* ======================================================================
   Reviews: stagger carousel (port of 21st.dev StaggerTestimonials)
   ====================================================================== */
.stagger { position: relative; height: 600px; overflow: hidden; margin-inline: calc(var(--gutter) * -1); touch-action: pan-y; }
.stagger__stage { position: absolute; inset: 0; }
.scard {
  position: absolute; left: 50%; top: 50%; margin: 0; padding: 32px; cursor: pointer; user-select: none;
  display: flex; flex-direction: column;
  background: var(--char); color: var(--bone); border: 2px solid var(--line-2);
  clip-path: polygon(50px 0%, calc(100% - 50px) 0%, 100% 50px, 100% 100%, calc(100% - 50px) 100%, 50px 100%, 0 100%, 0 0);
  transition: transform 0.5s ease-in-out, background-color 0.5s, color 0.5s, border-color 0.5s;
}
.scard:not(.is-center):hover { border-color: rgba(244, 185, 42, 0.5); }
.scard.is-center { background: var(--cheddar); color: var(--ink); border-color: var(--cheddar); cursor: default; }
.scard__cut { position: absolute; right: -2px; top: 48px; width: 70.71px; height: 2px; background: var(--line-2); transform: rotate(45deg); transform-origin: top right; }
.scard.is-center .scard__cut { background: rgba(11, 9, 7, 0.35); }
.scard__av {
  display: grid; place-items: center; width: 48px; height: 56px; margin-bottom: 18px; flex: none;
  background: var(--char-2); color: var(--cheddar); font-weight: 800; font-size: 24px; font-variation-settings: "wdth" 120;
  box-shadow: 3px 3px 0 var(--ink); transition: background-color 0.5s, color 0.5s;
}
.scard.is-center .scard__av { background: var(--ink); color: var(--cheddar); box-shadow: 3px 3px 0 rgba(11, 9, 7, 0.25); }
.scard__stars { margin-bottom: 10px; font-size: 13px; letter-spacing: 0.2em; color: var(--cheddar); transition: color 0.5s; }
.scard.is-center .scard__stars { color: var(--ink); }
.scard__q { margin: 0; font-size: 20px; line-height: 1.4; font-weight: 500; quotes: "\201C" "\201D"; }
.scard__q::before { content: open-quote; }
.scard__q::after { content: close-quote; }
html[lang="ar"] .scard__q { quotes: "\00AB" "\00BB"; line-height: 1.7; }
.scard__by {
  position: absolute; bottom: 32px; inset-inline: 32px;
  font: 500 11px/1.5 var(--f-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); transition: color 0.5s;
}
.scard__by b { font-weight: 700; }
.scard.is-center .scard__by { color: rgba(11, 9, 7, 0.75); }

.stagger__nav { position: absolute; z-index: 5; bottom: 16px; left: 50%; translate: -50% 0; display: flex; gap: 8px; }
.stagger__btn {
  width: 56px; height: 56px; display: grid; place-items: center; cursor: pointer;
  background: var(--ink); color: var(--bone); border: 2px solid var(--line-2); transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}
.stagger__btn svg { width: 22px; height: 22px; }
.stagger__btn:hover { background: var(--cheddar); color: var(--ink); border-color: var(--cheddar); }
html[dir="rtl"] .stagger__btn svg { transform: scaleX(-1); }

@media (max-width: 639px) {
  .scard { padding: 24px; }
  .scard__q { font-size: 16px; }
  .scard__by { bottom: 24px; inset-inline: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .scard { transition: none; }
}

/* invite card at the end of the reviews row: clearly an invitation, not a review */
.scard--ask { background: var(--ink); border-style: dashed; }
.scard--ask .scard__av { background: transparent; border: 2px dashed var(--line-2); box-shadow: none; color: var(--cheddar); font-size: 28px; }
.scard__q--ask { font-size: clamp(20px, 2vw, 26px); font-weight: 300; font-variation-settings: "wdth" 110; line-height: 1.25; quotes: none; }
.scard__q--ask::before, .scard__q--ask::after { content: none; }
.scard__ask {
  position: absolute; bottom: 32px; inset-inline: 32px; display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 16px;
  background: var(--wa); color: var(--ink); font: 700 12px/1.2 var(--f-display); letter-spacing: 0.06em; text-transform: uppercase; text-align: center;
  clip-path: polygon(0 0, 100% 0, 100% 70%, calc(100% - 10px) 100%, 0 100%);
}
.scard--ask.is-center { background: var(--char); color: var(--bone); border-color: var(--cheddar); border-style: dashed; }
.scard--ask.is-center .scard__av { color: var(--cheddar); border-color: var(--cheddar); background: transparent; }
@media (max-width: 639px) { .scard__ask { bottom: 24px; inset-inline: 24px; } }

/* phone film: a video scrubbed by scroll (see app.js startVideo) */
.film__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; pointer-events: none; background: var(--ink); }
.film.is-video .film__canvas { display: none; }

/* phones & tablets: the film is a looping background video behind the hero (app.js loopMode) */
.film.is-loop { height: 100vh; height: 100svh; }
.film.is-loop .film__canvas,
.film.is-loop .rail,
.film.is-loop .scroll-cue,
.film.is-loop .hud--tr,
.film.is-loop .chapter:not(.chapter--hero) { display: none; }
.film.is-loop .film__fallback { background: url("assets/poster-m.jpg") 50% 50% / cover no-repeat, var(--ink); }
.film.is-loop .film__video { object-position: 50% 40%; }
.film.is-loop .chapter--hero { opacity: 1; transform: none; filter: none; }
/* the poster must stay visible under the loop: it is all a phone shows until (or unless) the video plays */
.film.is-loop .film__fallback { opacity: 1 !important; }
.film.is-loop .film__video { background: transparent; }