/* ==========================================================================
   Grind & Grill — Handcrafted Comfort Food
   Built from the Claude Design canvas (design-source/Grind & Grill.dc.html).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */
:root {
  /* Surfaces — darkest to lightest */
  --ink:        #0D0A08;  /* page background            */
  --ink-2:      #14100D;  /* "Our Story" band           */
  --ink-3:      #171210;  /* order drawer               */
  --ink-4:      #241C16;  /* inputs, cart lines         */
  --char:       #1C1512;  /* borders, hard shadows      */

  /* Warm neutrals */
  --cream:      #F4E9D3;  /* body text on dark, menu bg */
  --card:       #FFFCF3;  /* menu card face             */
  --muted:      #6E6152;  /* secondary text on cream    */

  /* Fire palette */
  --gold:       #FFB61E;
  --gold-lt:    #FFC24D;
  --amber:      #F5A623;
  --ember:      #E8541A;
  --red:        #A81E1E;
  --clay:       #B4651A;
  --sand:       #E8925A;

  /* Typography */
  --display: 'Alfa Slab One', Georgia, serif;
  --script:  'Kaushan Script', 'Segoe Script', cursive;
  --body:    'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --arabic:  'Aref Ruqaa', 'Traditional Arabic', serif;

  /* Chrome */
  --nav-h: 64px;
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--cream);
  font-family: var(--body);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--amber); text-decoration: none; }
a:hover { color: var(--gold-lt); }

::selection { background: var(--gold); color: var(--char); }

input, textarea, button { font-family: inherit; }

img { max-width: 100%; }

/* Visible focus for keyboard users, suppressed for mouse clicks. */
:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

.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;
}

/* Aref Ruqaa is calligraphic — its ascenders and descenders overshoot a
   normal line box and get clipped, so give every Arabic run room to breathe. */
.ar { font-family: var(--arabic); line-height: 1.75; }

.shell { max-width: 1240px; margin: 0 auto; padding: 0 24px; }

/* --------------------------------------------------------------------------
   3. Animations
   -------------------------------------------------------------------------- */
@keyframes marq   { from { transform: translateX(0); }  to { transform: translateX(-50%); } }
@keyframes ember  { 0% { transform: translateY(0); opacity: 0; } 12% { opacity: .85; } 100% { transform: translateY(-46vh); opacity: 0; } }
@keyframes flame  { from { transform: scale(1); opacity: .96; } to { transform: scale(1.025); opacity: 1; } }
@keyframes slidein{ from { transform: translateX(40px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes spin   { to { transform: rotate(360deg); } }
@keyframes popupY { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes pulse  { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.78); } }
@keyframes popup  { from { transform: translate(-50%, 20px); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } }
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }

/* Respect users who ask for less motion: kill the ambient loops, keep the
   entrance transitions short rather than removing the feedback entirely. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .marquee__track,
  .ember,
  .hero__logo,
  .dot--live,
  .spinner { animation: none !important; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* --------------------------------------------------------------------------
   4. Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-block;
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: .5px;
  border-radius: 999px;
  cursor: pointer;
  text-align: center;
  transition: transform .12s ease, background-color .12s ease, color .12s ease,
              box-shadow .12s ease, border-color .12s ease;
}

/* Primary — gold face, hard offset shadow that deepens on hover */
.btn--primary {
  background: var(--gold);
  color: var(--char);
  border: 3px solid var(--char);
  box-shadow: 5px 5px 0 var(--red);
  padding: 16px 34px;
  font-size: 17px;
}
.btn--primary:hover {
  transform: translate(-2px, -2px);
  box-shadow: 7px 7px 0 var(--red);
  color: var(--char);
}
.btn--primary:active { transform: translate(1px, 1px); box-shadow: 3px 3px 0 var(--red); }

/* Ghost — outlined, for secondary calls to action on dark */
.btn--ghost {
  background: transparent;
  color: var(--cream);
  border: 3px solid rgba(244, 233, 211, .4);
  padding: 16px 34px;
  font-size: 17px;
}
.btn--ghost:hover { border-color: var(--gold-lt); color: var(--gold-lt); }

/* Nav pill */
.btn--nav {
  background: var(--gold);
  color: var(--char);
  border: 2px solid var(--char);
  box-shadow: 3px 3px 0 rgba(255, 182, 30, .35);
  padding: 10px 20px;
  font-size: 13px;
}
.btn--nav:hover { background: var(--gold-lt); color: var(--char); transform: translate(-1px, -1px); }

/* Dark "ADD +" on menu cards */
.btn--add {
  background: var(--char);
  color: var(--cream);
  border: 2.5px solid var(--char);
  padding: 9px 20px;
  font-size: 13px;
}
.btn--add:hover { background: var(--gold); color: var(--char); }

.btn--add-lg { padding: 12px 26px; font-size: 14px; }

/* Full-width drawer action */
.btn--block {
  display: block;
  width: 100%;
  background: var(--gold);
  color: var(--char);
  border: 3px solid var(--char);
  box-shadow: 4px 4px 0 var(--red);
  padding: 15px;
  font-size: 15px;
  letter-spacing: 1px;
}
.btn--block:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--red); }

/* Disabled twin of .btn--block — rendered as a div, never focusable */
.btn--disabled {
  display: block;
  width: 100%;
  background: rgba(255, 182, 30, .18);
  color: rgba(244, 233, 211, .45);
  border: 3px solid rgba(244, 233, 211, .15);
  border-radius: 999px;
  padding: 15px;
  font-family: var(--display);
  font-size: 15px;
  letter-spacing: 1px;
  text-align: center;
}

.btn--outline {
  background: none;
  color: var(--cream);
  border: 3px solid rgba(244, 233, 211, .4);
  padding: 12px 26px;
  font-size: 13.5px;
  letter-spacing: 1px;
}
.btn--outline:hover { border-color: var(--gold); color: var(--gold); }

.btn--link {
  background: none;
  border: none;
  color: var(--amber);
  font-family: var(--body);
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  padding: 0;
  align-self: flex-start;
}
.btn--link:hover { color: var(--gold-lt); }

/* --------------------------------------------------------------------------
   5. Navigation
   -------------------------------------------------------------------------- */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 80;
  background: rgba(13, 10, 8, .9);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255, 182, 30, .22);
}
.nav__inner {
  max-width: 1240px;
  margin: 0 auto;
  height: var(--nav-h);
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.nav__brand { display: flex; align-items: center; gap: 12px; }
.nav__mark {
  width: 44px; height: 44px;
  border-radius: 50%;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--gold);
  background: var(--gold-lt);
  flex: none;
}
/* The logo art has built-in padding, so overscale and crop to fill the disc. */
.nav__mark img, .hero__logo img, .foot__mark img {
  width: 122%; height: 122%; object-fit: cover;
}
.nav__names { display: flex; flex-direction: column; line-height: 1; }
.nav__name {
  font-family: var(--display);
  font-size: 15px;
  letter-spacing: 1.5px;
  color: var(--cream);
}
.nav__tag {
  font-family: var(--script);
  font-size: 12px;
  color: var(--amber);
  margin-top: 3px;
}
.nav__links { display: flex; align-items: center; gap: 26px; }
.nav__link { color: var(--cream); font-size: 14px; font-weight: 600; }
.nav__link:hover { color: var(--gold-lt); }

.nav__toggle {
  display: none;
  background: none;
  border: 2px solid rgba(244, 233, 211, .3);
  color: var(--cream);
  width: 40px; height: 40px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 17px;
  line-height: 1;
}
.nav__toggle:hover { border-color: var(--gold); color: var(--gold); }

/* --------------------------------------------------------------------------
   6. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
  background: radial-gradient(ellipse 90% 65% at 50% 26%, #2E1B0C 0%, #160F0A 52%, var(--ink) 100%);
  padding: 120px 24px 90px;
  text-align: center;
}
.ember {
  position: absolute;
  border-radius: 50%;
  filter: blur(1px);
  animation: ember 8s linear infinite;
  pointer-events: none;
}
.hero__inner {
  max-width: 820px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}
.hero__logo {
  width: 330px; height: 330px;
  max-width: 68vw;
  border-radius: 50%;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  border: 4px solid var(--gold);
  background: var(--gold-lt);
  box-shadow: 0 0 120px rgba(232, 84, 26, .55), 0 0 36px rgba(255, 182, 30, .4);
  animation: flame 3s ease-in-out infinite alternate;
  flex: none;
}
.hero__welcome { font-family: var(--arabic); font-size: 21px; color: var(--amber); margin-top: 30px; }
.hero__script  { font-family: var(--script); font-size: 30px; color: var(--amber); margin-top: 4px; }
.hero__title {
  font-family: var(--display);
  font-weight: 400;
  font-size: 58px;
  line-height: 1.06;
  margin: 18px 0 0;
  color: var(--cream);
}
.hero__title .flame {
  background: linear-gradient(100deg, var(--gold-lt) 10%, var(--amber) 45%, var(--ember) 90%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero__lede {
  max-width: 560px;
  font-size: 17px;
  line-height: 1.65;
  color: rgba(244, 233, 211, .75);
  margin: 20px 0 0;
}
.hero__ar { font-family: var(--arabic); font-size: 20px; color: var(--sand); margin-top: 14px; }
.hero__cta { display: flex; gap: 14px; margin-top: 32px; flex-wrap: wrap; justify-content: center; }
.hero__meta {
  margin-top: 26px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1px;
  color: rgba(244, 233, 211, .5);
  text-transform: uppercase;
}
.hero__meta .ar { font-size: 14px; letter-spacing: 0; text-transform: none; }

/* --------------------------------------------------------------------------
   7. Marquee + harlequin rule
   -------------------------------------------------------------------------- */
.marquee {
  background: var(--gold);
  border-top: 3px solid var(--char);
  border-bottom: 3px solid var(--char);
  overflow: hidden;
  padding: 11px 0;
}
.marquee__track { display: flex; width: max-content; animation: marq 26s linear infinite; }
.marquee__run {
  font-family: var(--display);
  font-size: 19px;
  letter-spacing: 1px;
  color: var(--red);
  white-space: nowrap;
  padding-right: 24px;
}
.marquee__run .ar { font-size: 21px; letter-spacing: 0; }

.rule {
  height: 13px;
  background: repeating-conic-gradient(from 45deg, var(--red) 0% 25%, var(--gold) 25% 50%) 0 0 / 13px 13px;
}
.rule--under { border-bottom: 3px solid var(--char); }
.rule--over  { border-top: 3px solid var(--char); }

/* --------------------------------------------------------------------------
   8. Menu section
   -------------------------------------------------------------------------- */
.menu {
  background: var(--cream);
  color: var(--char);
  scroll-margin-top: var(--nav-h);
  padding-bottom: 96px;
}
.menu__head { text-align: center; padding: 64px 24px 8px; }
.menu__eyebrow { display: flex; align-items: center; justify-content: center; gap: 14px; }
.menu__eyebrow-en { font-family: var(--script); font-size: 34px; color: var(--red); }
.menu__eyebrow-ar { font-family: var(--arabic); font-size: 26px; color: var(--clay); }
.menu__title {
  font-family: var(--display);
  font-weight: 400;
  font-size: 44px;
  margin: 6px 0 0;
  letter-spacing: 1px;
}
.menu__sub { color: var(--muted); font-size: 16px; margin: 12px auto 0; max-width: 520px; }

/* Signature bun banner */
.bun {
  background: var(--char);
  border-radius: 20px;
  border: 3px solid var(--char);
  box-shadow: 6px 6px 0 var(--red);
  padding: 30px 36px;
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
  margin-top: 28px;
}
.bun__copy { flex: 1; min-width: 280px; }
.bun__kicker { font-family: var(--script); font-size: 24px; color: var(--amber); }
.bun__kicker .ar { font-size: 18px; margin-left: 8px; }
.bun__name {
  font-family: var(--display);
  font-size: 28px;
  color: var(--cream);
  letter-spacing: 1px;
  margin-top: 2px;
}
.bun__text {
  color: rgba(244, 233, 211, .72);
  font-size: 15px;
  line-height: 1.6;
  margin: 10px 0 0;
  max-width: 640px;
}
.bun__photo {
  flex: none;
  width: 118px; height: 118px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid rgba(255, 182, 30, .55);
}
.bun__stamp {
  flex: none;
  width: 112px; height: 112px;
  border-radius: 50%;
  background: var(--gold);
  border: 3px dashed var(--red);
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  transform: rotate(-8deg);
  font-family: var(--display);
  font-size: 13px;
  line-height: 1.3;
  color: var(--red);
  padding: 10px;
}

/* Sticky category rail */
.rail {
  position: sticky;
  top: var(--nav-h);
  z-index: 60;
  background: rgba(244, 233, 211, .94);
  backdrop-filter: blur(8px);
  border-bottom: 2px solid rgba(28, 21, 18, .14);
  margin-top: 38px;
}
.rail__inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 12px 24px;
  display: flex;
  gap: 9px;
  overflow-x: auto;
  scrollbar-width: thin;
}
.rail__chip {
  flex: none;
  border: 2px solid var(--char);
  border-radius: 999px;
  padding: 8px 16px;
  font-family: var(--display);
  font-size: 12.5px;
  letter-spacing: .5px;
  color: var(--char);
  background: transparent;
  transition: background-color .12s ease, color .12s ease, border-color .12s ease;
}
.rail__chip:hover,
.rail__chip[aria-current="true"] {
  background: var(--red);
  color: var(--cream);
  border-color: var(--red);
}

/* Category heading */
.cat { scroll-margin-top: 140px; padding-top: 52px; }
.cat__head { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.cat__name {
  font-family: var(--display);
  font-weight: 400;
  font-size: 33px;
  margin: 0;
  letter-spacing: 1px;
}
.cat__sub { font-family: var(--script); font-size: 22px; color: var(--red); }
.cat__ar  { margin-left: auto; font-family: var(--arabic); font-size: 22px; color: var(--clay); }
.cat__underline { height: 3px; background: var(--char); margin-top: 10px; border-radius: 2px; max-width: 76px; }

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 18px;
  margin-top: 24px;
}

/* Menu card */
.card {
  background: var(--card);
  border: 2.5px solid var(--char);
  border-radius: 16px;
  padding: 20px 20px 16px;
  box-shadow: 4px 4px 0 rgba(28, 21, 18, .85);
  display: flex;
  flex-direction: column;
  transition: transform .14s ease, box-shadow .14s ease;
}
.card:hover {
  transform: translate(-2px, -2px);
  box-shadow: 7px 7px 0 rgba(168, 30, 30, .9);
}
.card__media {
  height: 168px;
  border-radius: 11px;
  overflow: hidden;
  border: 2px solid rgba(28, 21, 18, .14);
  margin-bottom: 14px;
  flex: none;
}
.card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
/* h4 — the browser's default heading margin would add ~38px of dead space
   to every card, so it is reset here rather than fought per breakpoint. */
.card__name { font-family: var(--display); font-size: 17px; line-height: 1.25; margin: 0; font-weight: 400; }
.card__tag {
  flex: none;
  background: var(--red);
  color: var(--cream);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 999px;
}
.card__desc {
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.55;
  margin: 8px 0 0;
  flex: 1;
}
.bits { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.bit {
  border: 1.5px solid rgba(28, 21, 18, .22);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .4px;
  color: var(--muted);
  text-transform: uppercase;
}
.card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 2px dashed rgba(28, 21, 18, .25);
  margin-top: 14px;
  padding-top: 12px;
}
.card__price { font-family: var(--display); font-size: 19px; color: var(--red); }

/* Quantity stepper */
.qty {
  display: flex;
  align-items: center;
  background: var(--gold);
  border: 2.5px solid var(--char);
  border-radius: 999px;
  overflow: hidden;
}
.qty__btn {
  background: none;
  border: none;
  width: 34px; height: 34px;
  font-size: 18px;
  font-weight: 800;
  color: var(--char);
  cursor: pointer;
  line-height: 1;
}
.qty__btn:hover { background: var(--gold-lt); }
.qty__n {
  font-family: var(--display);
  font-size: 15px;
  min-width: 20px;
  text-align: center;
  color: var(--char);
}

/* Photo slot — real <img>, or a striped placeholder when the file is absent */
.slot {
  width: 100%; height: 100%;
  display: block;
  object-fit: cover;
  background: repeating-linear-gradient(45deg, #F7EDD9 0 14px, #F2E4C8 14px 28px);
}
.slot--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 12px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: rgba(28, 21, 18, .38);
  line-height: 1.4;
}
.bun__photo .slot--empty, .slot--circle { border-radius: 50%; }

/* Breakfast plate */
.plate {
  background: var(--card);
  border: 2.5px solid var(--char);
  border-radius: 16px;
  box-shadow: 4px 4px 0 rgba(28, 21, 18, .85);
  margin-top: 24px;
  padding: 26px 26px 22px;
  display: flex;
  gap: 30px;
  flex-wrap: wrap;
  align-items: flex-end;
}
.plate__media {
  width: 250px; min-width: 210px; height: 190px;
  flex: none;
  align-self: center;
  border-radius: 11px;
  overflow: hidden;
  border: 2px solid rgba(28, 21, 18, .14);
}
.plate__copy { flex: 1; min-width: 300px; }
.plate__name { font-family: var(--display); font-size: 22px; }
.plate__desc { color: var(--muted); font-size: 14px; line-height: 1.6; margin: 8px 0 0; }
.plate__choices { display: flex; gap: 9px; margin-top: 16px; flex-wrap: wrap; }
.chip {
  background: transparent;
  border: 2.5px solid rgba(28, 21, 18, .3);
  border-radius: 999px;
  padding: 9px 18px;
  font-weight: 600;
  font-size: 13.5px;
  color: var(--char);
  cursor: pointer;
  transition: border-color .12s ease, background-color .12s ease;
}
.chip:hover { border-color: var(--char); }
.chip[aria-pressed="true"] {
  background: var(--gold);
  border-color: var(--char);
  font-weight: 800;
}
.plate__buy { display: flex; align-items: center; gap: 18px; }
.plate__price { font-family: var(--display); font-size: 22px; color: var(--red); }

/* --------------------------------------------------------------------------
   9. Camel teaser
   -------------------------------------------------------------------------- */
.camel {
  background: var(--red);
  border-top: 3px solid var(--char);
  border-bottom: 3px solid var(--char);
  padding: 64px 24px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.camel__badge {
  display: inline-block;
  transform: rotate(-6deg);
  border: 3px dashed rgba(244, 233, 211, .55);
  border-radius: 12px;
  padding: 9px 18px;
  font-family: var(--display);
  font-size: 14px;
  letter-spacing: 2px;
  color: rgba(244, 233, 211, .8);
  margin-bottom: 22px;
}
.camel__badge .ar { font-size: 15px; }
.camel__script { font-family: var(--script); font-size: 28px; color: var(--gold-lt); }
.camel__title {
  font-family: var(--display);
  font-weight: 400;
  font-size: 52px;
  color: var(--cream);
  margin: 8px 0 0;
  letter-spacing: 2px;
}
.camel__ar { font-family: var(--arabic); font-size: 23px; color: var(--gold-lt); margin-top: 10px; }
.camel__text {
  color: rgba(244, 233, 211, .78);
  max-width: 520px;
  margin: 16px auto 0;
  font-size: 16px;
  line-height: 1.6;
}
.camel__btn {
  margin-top: 26px;
  background: transparent;
  color: var(--cream);
  border: 3px solid var(--cream);
  padding: 13px 30px;
  font-size: 14px;
  letter-spacing: 1px;
}
.camel__btn:hover { background: var(--cream); color: var(--red); }
.camel__btn[data-done="true"] { background: var(--cream); color: var(--red); cursor: default; }

/* --------------------------------------------------------------------------
   10. Our Story
   -------------------------------------------------------------------------- */
.story { background: var(--ink-2); padding: 96px 24px; scroll-margin-top: var(--nav-h); }
.story__inner {
  max-width: 1140px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 60px;
  align-items: center;
}
.story__figure {
  border-radius: 18px;
  overflow: hidden;
  border: 3px solid var(--gold);
  box-shadow: 14px 14px 0 var(--red);
  margin: 0;
}
.story__figure img { width: 100%; height: 440px; object-fit: cover; display: block; }
.story__kicker { font-family: var(--script); font-size: 28px; color: var(--amber); }
.story__kicker .ar { font-size: 21px; margin-left: 8px; }
.story__title {
  font-family: var(--display);
  font-weight: 400;
  font-size: 40px;
  line-height: 1.15;
  color: var(--cream);
  margin: 8px 0 0;
  letter-spacing: 1px;
}
.story__text {
  color: rgba(244, 233, 211, .72);
  font-size: 15.5px;
  line-height: 1.7;
  margin: 18px 0 0;
}
.points { display: flex; flex-direction: column; gap: 14px; margin-top: 26px; padding: 0; list-style: none; }
.points li { display: flex; gap: 14px; align-items: baseline; }
.points li::before {
  content: "";
  width: 12px; height: 12px;
  background: var(--gold);
  border-radius: 3px;
  flex: none;
  transform: rotate(45deg);
}
.points span { font-size: 15px; color: rgba(244, 233, 211, .85); }
.points b { font-family: var(--display); font-weight: 400; color: var(--cream); }
.points .ar { color: var(--amber); }

/* --------------------------------------------------------------------------
   11. Footer
   -------------------------------------------------------------------------- */
.foot {
  background: var(--ink);
  border-top: 3px solid var(--char);
  padding: 72px 24px 32px;
  scroll-margin-top: var(--nav-h);
}
.foot__inner {
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 48px;
}
.foot__mark {
  width: 72px; height: 72px;
  border-radius: 50%;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  border: 3px solid var(--gold);
  background: var(--gold-lt);
}
.foot__script { font-family: var(--script); font-size: 22px; color: var(--amber); margin-top: 14px; }
.foot__ar { font-family: var(--arabic); font-size: 17px; color: var(--sand); margin-top: 4px; }
.foot__text {
  color: rgba(244, 233, 211, .6);
  font-size: 14px;
  line-height: 1.6;
  margin: 10px 0 0;
  max-width: 320px;
}
.foot__head {
  font-family: var(--display);
  font-size: 15px;
  letter-spacing: 2px;
  color: var(--gold);
}
.foot__head .ar { font-size: 16px; letter-spacing: 0; margin-left: 6px; }
.foot__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
  color: rgba(244, 233, 211, .75);
  font-size: 14.5px;
  line-height: 1.5;
}
.foot__cta {
  display: inline-block;
  margin-top: 18px;
  background: var(--gold);
  color: var(--char);
  font-family: var(--display);
  font-size: 14px;
  letter-spacing: .5px;
  padding: 13px 26px;
  border-radius: 999px;
  border: 2.5px solid var(--char);
  box-shadow: 4px 4px 0 var(--red);
  transition: transform .12s ease, box-shadow .12s ease;
}
.foot__cta:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--red); color: var(--char); }
.foot__bar {
  max-width: 1240px;
  margin: 56px auto 0;
  border-top: 1px solid rgba(244, 233, 211, .15);
  padding-top: 20px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  color: rgba(244, 233, 211, .4);
  font-size: 12.5px;
}

/* --------------------------------------------------------------------------
   12. Floating chips (cart bar, tracker, toast)
   -------------------------------------------------------------------------- */
.cartbar {
  position: fixed;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 90;
  background: var(--char);
  border: 2.5px solid var(--gold);
  border-radius: 999px;
  padding: 10px 12px 10px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, .55);
  animation: popup .25s ease;
}
.cartbar__count {
  background: var(--gold);
  color: var(--char);
  font-family: var(--display);
  font-size: 14px;
  width: 30px; height: 30px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.cartbar__total {
  color: var(--cream);
  font-family: var(--display);
  font-size: 15px;
  letter-spacing: .5px;
}
.cartbar__btn {
  background: var(--gold);
  color: var(--char);
  border: none;
  padding: 10px 22px;
  font-size: 13.5px;
}
.cartbar__btn:hover { background: var(--gold-lt); }

.trackchip {
  position: fixed;
  bottom: 22px;
  left: 22px;
  z-index: 90;
  background: var(--char);
  border: 2.5px solid var(--gold);
  border-radius: 999px;
  padding: 10px 12px 10px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, .55);
  animation: popupY .25s ease;
}
.dot--live {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--ember);
  animation: pulse 1.1s ease-in-out infinite;
  flex: none;
}
.trackchip__label {
  color: var(--cream);
  font-family: var(--display);
  font-size: 12px;
  letter-spacing: .5px;
}
.trackchip__btn {
  background: var(--gold);
  color: var(--char);
  border: none;
  padding: 8px 16px;
  font-size: 11.5px;
}
.trackchip__btn:hover { background: var(--gold-lt); }

.toast {
  position: fixed;
  bottom: 92px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 97;
  background: var(--char);
  border: 2px solid var(--gold);
  color: var(--cream);
  border-radius: 999px;
  padding: 10px 22px;
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .5);
  animation: popup .2s ease;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   13. Order drawer
   -------------------------------------------------------------------------- */
.scrim {
  position: fixed;
  inset: 0;
  background: rgba(8, 5, 4, .6);
  backdrop-filter: blur(3px);
  z-index: 95;
  border: none;
  animation: fadein .2s ease;
}
.drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: 430px;
  max-width: 92vw;
  background: var(--ink-3);
  border-left: 3px solid var(--gold);
  z-index: 96;
  display: flex;
  flex-direction: column;
  animation: slidein .28s ease;
}
.drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 24px;
  border-bottom: 1px solid rgba(244, 233, 211, .14);
}
.drawer__title {
  font-family: var(--display);
  font-size: 20px;
  letter-spacing: 1px;
  color: var(--cream);
}
.drawer__close {
  background: none;
  border: 2px solid rgba(244, 233, 211, .3);
  color: var(--cream);
  width: 36px; height: 36px;
  border-radius: 50%;
  font-size: 16px;
  cursor: pointer;
  line-height: 1;
}
.drawer__close:hover { border-color: var(--gold); color: var(--gold); }
.drawer__body {
  flex: 1;
  overflow-y: auto;
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.drawer__body--center {
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 16px;
  padding: 30px;
}
.drawer__foot {
  border-top: 1px solid rgba(244, 233, 211, .14);
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Pickup / delivery + payment segmented control */
.seg { display: flex; background: var(--ink-4); border-radius: 999px; padding: 4px; gap: 4px; }
.seg__btn {
  flex: 1;
  background: none;
  color: rgba(244, 233, 211, .6);
  border: none;
  border-radius: 999px;
  padding: 10px;
  font-family: var(--display);
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color .12s ease, color .12s ease;
}
.seg__btn:hover { color: var(--cream); }
.seg__btn[aria-pressed="true"] { background: var(--gold); color: var(--char); }
.seg--pay .seg__btn { padding: 9px 8px; font-family: var(--body); font-weight: 700; font-size: 12.5px; }
.seg--pay .seg__btn[aria-pressed="true"] { font-weight: 800; }

.empty {
  text-align: center;
  color: rgba(244, 233, 211, .5);
  padding: 60px 10px;
  font-size: 15px;
}

/* Cart line */
.line {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--ink-4);
  border-radius: 14px;
  padding: 14px 16px;
}
.line__copy { flex: 1; min-width: 0; }
.line__name { font-weight: 700; font-size: 14.5px; color: var(--cream); line-height: 1.3; }
.line__price { font-family: var(--display); font-size: 13px; color: var(--amber); margin-top: 4px; }
.line__qty { display: flex; align-items: center; background: var(--gold); border-radius: 999px; }
.line__qty .qty__btn { width: 30px; height: 30px; font-size: 16px; }
.line__qty .qty__n { font-size: 13.5px; min-width: 16px; }
.line__remove {
  background: none;
  border: none;
  color: rgba(244, 233, 211, .4);
  font-size: 15px;
  cursor: pointer;
  padding: 4px;
  line-height: 1;
}
.line__remove:hover { color: var(--ember); }

/* Totals */
.tot { display: flex; justify-content: space-between; font-size: 14px; color: rgba(244, 233, 211, .7); }
.tot__hint { font-size: 12.5px; color: var(--amber); }
.tot--grand {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-top: 2px dashed rgba(244, 233, 211, .2);
  padding-top: 12px;
  margin-top: 6px;
}
.tot--grand dt { font-family: var(--display); font-size: 15px; color: var(--cream); letter-spacing: 1px; }
.tot--grand dd { font-family: var(--display); font-size: 24px; color: var(--gold); margin: 0; }
.tot__vat { font-size: 11.5px; color: rgba(244, 233, 211, .4); }
.totals { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.totals dd { margin: 0; }

/* Forms */
.field {
  display: flex;
  flex-direction: column;
  gap: 7px;
  font-size: 13px;
  font-weight: 700;
  color: rgba(244, 233, 211, .8);
}
.field__opt { font-weight: 500; color: rgba(244, 233, 211, .45); }
.field input, .field textarea {
  background: var(--ink-4);
  border: 2px solid rgba(244, 233, 211, .2);
  border-radius: 10px;
  padding: 12px 14px;
  color: var(--cream);
  font-size: 14.5px;
  outline: none;
  width: 100%;
  transition: border-color .12s ease;
}
.field textarea { resize: none; font-family: inherit; }
.field input:focus, .field textarea:focus { border-color: var(--gold); }
.field input::placeholder, .field textarea::placeholder { color: rgba(244, 233, 211, .3); }
.field--card input { letter-spacing: 1px; }
.field-row { display: flex; gap: 12px; }
.field-row .field { flex: 1; }

.paying {
  background: var(--ink-4);
  border: 2px dashed rgba(255, 182, 30, .35);
  border-radius: 14px;
  padding: 14px 16px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.paying__label { font-size: 13.5px; color: rgba(244, 233, 211, .7); }
.paying__amt { font-family: var(--display); font-size: 20px; color: var(--gold); }

.secure {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: rgba(244, 233, 211, .5);
}
.secure__lock {
  width: 10px; height: 13px;
  border: 2px solid rgba(244, 233, 211, .5);
  border-radius: 3px 3px 4px 4px;
  border-top-width: 5px;
  flex: none;
}

.hint { font-size: 12px; color: rgba(244, 233, 211, .45); text-align: center; }

/* Processing / declined / done */
.spinner {
  width: 54px; height: 54px;
  border-radius: 50%;
  border: 4px solid rgba(255, 182, 30, .22);
  border-top-color: var(--gold);
  animation: spin .9s linear infinite;
}
.state__title {
  font-family: var(--display);
  font-size: 18px;
  letter-spacing: 1px;
  color: var(--cream);
  margin-top: 8px;
}
.state__ar { font-family: var(--arabic); font-size: 20px; color: var(--amber); }
.state__note { font-size: 12.5px; color: rgba(244, 233, 211, .45); }

.seal {
  width: 92px; height: 92px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 36px;
  border: 3px solid var(--char);
}
.seal--bad { background: var(--red); color: var(--cream); box-shadow: 5px 5px 0 rgba(0, 0, 0, .45); }
.seal--good {
  width: 80px; height: 80px;
  background: var(--gold);
  color: var(--char);
  box-shadow: 5px 5px 0 var(--red);
}
.state__big {
  font-family: var(--display);
  font-size: 23px;
  color: var(--cream);
  letter-spacing: 1px;
  margin-top: 18px;
}
.state__body {
  color: rgba(244, 233, 211, .65);
  font-size: 14px;
  line-height: 1.6;
  margin: 14px 0 0;
  max-width: 280px;
}

.done { align-items: center; text-align: center; padding: 34px 30px 26px; overflow-y: auto; }
.done__no { display: flex; align-items: baseline; gap: 12px; margin-top: 8px; }
.done__no-en { font-family: var(--display); font-size: 17px; color: var(--amber); }
.done__no-ar { font-family: var(--arabic); font-size: 21px; color: var(--gold-lt); }
.done__eta { font-size: 13.5px; color: rgba(244, 233, 211, .6); margin-top: 6px; }

/* Tracker timeline */
.track {
  width: 100%;
  max-width: 290px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  text-align: left;
}
.track__step {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding-bottom: 24px;
  position: relative;
}
.track__step:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 10px; top: 24px; bottom: 0;
  width: 2px;
  background: rgba(255, 182, 30, .18);
}
.track__mark {
  flex: none;
  width: 22px; height: 22px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  position: relative;
  z-index: 1;
  box-sizing: border-box;
}
.track__mark--done { background: var(--gold); color: var(--char); font-size: 12px; font-weight: 800; }
.track__mark--active { border: 2.5px solid var(--gold); background: var(--ink-3); }
.track__mark--next { border: 2px solid rgba(244, 233, 211, .2); background: var(--ink-3); }
.track__label {
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
}
.track__step--next .track__label > span { font-size: 14px; font-weight: 600; color: rgba(244, 233, 211, .4); }
.track__step--done .track__label > span { font-size: 14px; font-weight: 700; color: rgba(244, 233, 211, .75); }
.track__step--active .track__label > .en { font-family: var(--display); font-size: 14px; color: var(--gold); }
.track__step--active .track__label > .ar { font-family: var(--arabic); font-size: 16px; color: var(--sand); }

.cancel {
  background: none;
  border: none;
  color: rgba(244, 233, 211, .45);
  font-size: 12.5px;
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
}
.cancel:hover { color: var(--ember); }

/* --------------------------------------------------------------------------
   14. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 980px) {
  .story__inner { grid-template-columns: 1fr; gap: 36px; }
  .story__figure img { height: 320px; }
  .foot__inner { grid-template-columns: 1fr 1fr; gap: 36px; }
}

/* Compact menu rows — through tablet portrait, not just phones.
   -----------------------------------------------------------------------
   Menu cards become list rows: a square thumbnail on the left, all the text
   on the right, price and ADD on a full-width row beneath. A photo banner
   per card cost ~415px each — under two dishes per screen and 16 screens of
   scrolling for one menu. This runs to 900px so tablet portrait gets the
   same density; the grid stays multi-column above 760px, so a tablet shows
   two rows side by side. Everything else (navigation, hero scale) stays on
   the 760px phone breakpoint below. */
@media (max-width: 900px) {
  .card {
    display: grid;
    grid-template-columns: 84px minmax(0, 1fr);
    grid-template-areas:
      "media top"
      "media desc"
      "media bits"
      ".     ."
      "foot  foot";
    /* Row four is an empty spacer that takes up the slack, pinning the
       price/ADD row to the bottom so buttons line up across a row even when
       one dish name wraps. The thumbnail must NOT span it: an item spanning
       an `fr` track forces that track to its own height, which silently
       added ~35px to every card. */
    grid-template-rows: auto auto auto 1fr auto;
    column-gap: 12px;
    padding: 12px;
    border-radius: 13px;
    box-shadow: 3px 3px 0 rgba(28, 21, 18, .85);
  }
  .card__media {
    grid-area: media;
    width: 84px; height: 84px;
    margin-bottom: 0;
    align-self: start;
    border-radius: 9px;
  }
  .card__top  { grid-area: top; }
  .card__desc { grid-area: desc; }
  .bits       { grid-area: bits; }
  .card__foot { grid-area: foot; }

  .card__name { font-size: 14.5px; }
  .card__tag { font-size: 9px; padding: 3px 7px; letter-spacing: .5px; }

  /* Two lines of description is enough to choose by; the rest is detail. */
  .card__desc {
    font-size: 12.5px;
    line-height: 1.45;
    margin: 3px 0 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* Keep the ingredient chips, but only as many as fit one tidy line. */
  .bits { margin-top: 5px; gap: 4px; flex-wrap: nowrap; overflow: hidden; }
  .bit { font-size: 9px; padding: 2px 7px; white-space: nowrap; }
  .bit:nth-child(n+3) { display: none; }

  .card__foot { margin-top: 8px; padding-top: 8px; }
  .card__price { font-size: 16px; }
  .btn--add { padding: 7px 15px; font-size: 11.5px; border-width: 2px; }
  .qty__btn { width: 29px; height: 29px; font-size: 16px; }
  .qty__n { font-size: 13.5px; }

  /* The placeholder label doesn't fit a small square — the dish name is
     already right beside it, so show the stripes alone. */
  .slot--empty { font-size: 0; }

  /* Tighter gutters so two rows sit comfortably side by side on a tablet. */
  .grid { gap: 12px; }
  .cat { padding-top: 40px; }
  .cat__name { font-size: 26px; }
}

/* Tap doesn't un-hover on touch, so the lifted card state would stick.
   Keyed to the input device rather than a width, which also covers touch
   laptops and large tablets above the breakpoints. */
@media (hover: none) {
  .card:hover { transform: none; box-shadow: 4px 4px 0 rgba(28, 21, 18, .85); }
  .btn--primary:hover, .foot__cta:hover, .btn--block:hover, .btn--nav:hover { transform: none; }
}
@media (hover: none) and (max-width: 900px) {
  .card:hover { box-shadow: 3px 3px 0 rgba(28, 21, 18, .85); }
}

@media (max-width: 760px) {
  .nav__links {
    position: absolute;
    top: var(--nav-h);
    left: 0; right: 0;
    background: rgba(13, 10, 8, .97);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(255, 182, 30, .22);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 24px 20px;
    display: none;
  }
  .nav__links[data-open="true"] { display: flex; }
  .nav__link { padding: 14px 0; border-bottom: 1px solid rgba(244, 233, 211, .1); }
  .nav__links .btn--nav { margin-top: 14px; text-align: center; }
  .nav__toggle { display: block; }

  /* The hero ran to 1164px — nearly one and a half screens before a visitor
     saw a single dish. Everything here is scaled to end above the fold. */
  .hero { padding: 84px 20px 48px; }
  .hero__logo { width: 200px; height: 200px; max-width: 54vw; border-width: 3px; }
  .hero__welcome { font-size: 17px; margin-top: 18px; }
  .hero__script { font-size: 21px; }
  .hero__title { font-size: 32px; margin-top: 10px; }
  .hero__lede { font-size: 14px; line-height: 1.55; margin-top: 12px; }
  .hero__ar { font-size: 16px; margin-top: 9px; }
  .hero__cta { margin-top: 20px; gap: 9px; width: 100%; flex-wrap: nowrap; }
  .hero__cta .btn { flex: 1 1 0; min-width: 0; padding: 13px 8px; font-size: 13px; }
  .hero__meta { margin-top: 16px; font-size: 10.5px; letter-spacing: .5px; }
  .btn--primary, .btn--ghost { padding: 14px 26px; font-size: 15px; }

  .marquee { padding: 8px 0; }
  .marquee__run { font-size: 16px; }
  .marquee__run .ar { font-size: 18px; }

  /* Fixed chips must stay compact — a wrapped label made this 73px tall. */
  .trackchip { padding: 8px 10px 8px 14px; gap: 9px; }
  .trackchip__label {
    font-size: 11px; white-space: nowrap; overflow: hidden;
    text-overflow: ellipsis; max-width: 42vw;
  }
  .trackchip__btn { padding: 7px 13px; font-size: 11px; }

  .menu__title { font-size: 34px; }
  .grid { grid-template-columns: 1fr; gap: 10px; margin-top: 18px; }
  .cat { padding-top: 34px; }

  /* Name and Arabic share the top line; the script subtitle drops beneath,
     rather than the Arabic being orphaned on a line of its own. */
  .cat__head {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: baseline;
    column-gap: 12px;
  }
  /* Placed explicitly: DOM order is name, sub, ar, so auto-placement would
     drop the Arabic onto a third row of its own once the full-width subtitle
     claimed row two — costing ~60px on every category heading. */
  .cat__name { grid-area: 1 / 1 / 2 / 2; font-size: 22px; }
  .cat__ar   { grid-area: 1 / 2 / 2 / 3; margin-left: 0; font-size: 18px; }
  .cat__sub  { grid-area: 2 / 1 / 3 / -1; font-size: 15.5px; margin-top: 1px; }
  .cat__underline { margin-top: 7px; max-width: 60px; height: 2.5px; }

  /* Menu intro */
  .menu__head { padding: 40px 20px 4px; }
  .menu__eyebrow-en { font-size: 26px; }
  .menu__eyebrow-ar { font-size: 21px; }
  .menu__sub { font-size: 13.5px; margin-top: 8px; }

  /* Signature-bun banner: copy and photo side by side instead of stacked,
     which is what pushed this one card past half a screen. */
  .bun { padding: 16px; gap: 12px; border-radius: 15px; box-shadow: 4px 4px 0 var(--red); flex-wrap: nowrap; }
  .bun__copy { min-width: 0; }
  .bun__kicker { font-size: 17px; }
  .bun__kicker .ar { font-size: 14px; margin-left: 5px; }
  .bun__name { font-size: 19px; line-height: 1.15; }
  .bun__text {
    font-size: 12.5px; line-height: 1.5; margin-top: 7px;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  }
  .bun__photo { width: 68px; height: 68px; border-width: 2px; align-self: center; }
  .bun__stamp { display: none; }

  /* Breakfast plate */
  .plate { padding: 16px; gap: 14px; border-radius: 14px; }
  .plate__media { width: 100%; min-width: 0; height: 150px; }
  .plate__copy { min-width: 0; }
  .plate__name { font-size: 18px; }
  .plate__desc {
    font-size: 13px; margin-top: 6px;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  }
  .plate__choices { gap: 7px; margin-top: 12px; }
  .chip { padding: 7px 13px; font-size: 12.5px; border-width: 2px; }
  .plate__buy { width: 100%; justify-content: space-between; }
  .plate__price { font-size: 19px; }
  .btn--add-lg { padding: 10px 20px; font-size: 12.5px; }

  /* Camel teaser */
  .camel { padding: 44px 20px; }
  .camel__badge { margin-bottom: 16px; padding: 7px 14px; font-size: 12px; border-width: 2px; }
  .camel__script { font-size: 21px; }
  .camel__title { font-size: 32px; letter-spacing: 1px; }
  .camel__ar { font-size: 19px; margin-top: 6px; }
  .camel__text { font-size: 14px; margin-top: 12px; }
  .camel__btn { margin-top: 20px; padding: 11px 24px; font-size: 12.5px; border-width: 2px; }

  /* Our Story */
  .story { padding: 52px 20px; }
  .story__figure { border-width: 2px; box-shadow: 8px 8px 0 var(--red); }
  .story__figure img { height: 220px; }
  .story__kicker { font-size: 22px; }
  .story__title { font-size: 27px; }
  .story__text { font-size: 14.5px; line-height: 1.65; margin-top: 14px; }
  .points { gap: 11px; margin-top: 20px; }
  .points span { font-size: 13.5px; }

  /* Footer */
  .foot { padding: 48px 20px 24px; }
  .foot__inner { grid-template-columns: 1fr; gap: 28px; }
  .foot__text { font-size: 13.5px; }
  .foot__list { font-size: 14px; gap: 8px; }
  .foot__bar { justify-content: flex-start; margin-top: 32px; }

  /* Keep the cart bar clear of the viewport edges on small screens */
  .cartbar { left: 12px; right: 12px; transform: none; justify-content: space-between; }
  .toast { left: 12px; right: 12px; transform: none; text-align: center; white-space: normal; }
  @keyframes popup { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
  .trackchip { bottom: 88px; }
}

@media (max-width: 420px) {
  .hero__title { font-size: 33px; }
  .camel__title { font-size: 29px; }
  .menu__eyebrow-en { font-size: 27px; }
}

/* --------------------------------------------------------------------------
   15. Print — a plain paper menu, no chrome
   -------------------------------------------------------------------------- */
@media print {
  .nav, .rail, .cartbar, .trackchip, .toast, .drawer, .scrim,
  .hero__cta, .camel, .marquee, .rule { display: none !important; }
  body { background: #fff; color: #000; }
  .menu { background: #fff; padding-bottom: 0; }
  .card { box-shadow: none; break-inside: avoid; }
  .card__media { display: none; }
  .grid { grid-template-columns: 1fr 1fr; }
}