/* ==========================================================================
   Fresh Shawarma
   Colours from the logo and the printed menu: shawarma green, spit orange,
   logo blue, on the menu's black. Headings in heavy Poppins, like the card.

   The variables keep their old --red-* names so every rule in this sheet and
   in app.css picks the new colours up without being rewritten: read "--red"
   as "the brand colour", which is now green.
   ========================================================================== */

:root {
  --red:       #2fae4a;   /* brand green — fills, borders, the mark */
  --red-lit:   #3cc65a;   /* hover */
  --red-pale:  #eaf6ec;   /* tinted blocks */
  --red-line:  #c9e8cf;   /* hairlines */
  --red-text:  #1b7f34;   /* green as readable text on a light page (5.1:1) */
  --red-fill:  #1b7f34;   /* green behind white text */
  --red-dark:  #7cf75a;   /* the menu's lime, as text on the black bars */

  --orange:      #ff7a00; /* the spit in the logo */
  --orange-text: #b85200; /* orange as readable text on white */
  --orange-pale: #fff1e4;
  --blue:        #0b46c3; /* the logo ground */

  --white:  #ffffff;
  --paper:  #fafaf7;      /* the page */
  --ink:    #0d0f0e;      /* body text, and the menu's black */
  --ink-2:  #565c58;      /* secondary text */
  --line:   #e3e6e3;
  --green:  #1b7f34;      /* open, vegetarian */

  --serif: 'Poppins', 'Inter', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;   /* headings */
  --sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --radius: 12px;
  --shadow: 0 1px 2px rgba(13,15,14,.05), 0 10px 26px -18px rgba(13,15,14,.35);
  --shadow-lift: 0 4px 12px rgba(47,174,74,.10), 0 20px 44px -24px rgba(13,15,14,.45);
  --wrap: 1140px;

  /* names older screens still use */
  --glaze: var(--red-fill);
  --saffron: var(--orange);
  --tile: var(--white);
  --tile-raised: #e3e6e3;
  --dust: #8a908c;
  --edge: var(--line);
  --data: var(--sans);
  --r-lg: 16px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { animation: none !important; transition: none !important; } }

body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--sans); font-size: 17px; line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--red-text); }

h1, h2, h3 { font-family: var(--serif); font-weight: 700; line-height: 1.12; margin: 0 0 .5em; letter-spacing: -.015em; }
h1 { font-weight: 800; }
h1 { font-size: clamp(2.15rem, 5vw, 3.4rem); }
h2 { font-size: clamp(1.65rem, 3.4vw, 2.4rem); }
h3 { font-size: 1.18rem; }
p { margin: 0 0 1rem; }

.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
.muted { color: var(--ink-2); }
.hide { display: none !important; }
:focus-visible { outline: 2px solid var(--red-text); outline-offset: 3px; }

.eyebrow {
  font-size: .78rem; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--orange-text); margin: 0 0 .7rem;
}


/* --- top strip ---------------------------------------------------------- */

.strip { background: var(--ink); color: #fff; font-size: .85rem; padding: .55rem 0; }
.strip .wrap { display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; align-items: center; }
.strip .dot { width: 8px; height: 8px; border-radius: 50%; background: #8b8b8b; flex: none; }
.strip.is-open .dot { background: #57d495; }
.strip a {
  color: var(--red); text-decoration: none; font-weight: 700;
  display: inline-flex; align-items: center; min-height: 34px; padding: 0 .2rem;
}
.strip .right { margin-left: auto; }

/* --- header -------------------------------------------------------------- */

.head {
  position: sticky; top: 0; z-index: 40;
  background: rgba(255,253,250,.97); backdrop-filter: blur(8px);
  border-bottom: 2px solid var(--red);
}
.head .wrap { display: flex; align-items: center; gap: 1rem; padding: .75rem 0; }
.logo { display: flex; align-items: center; gap: .7rem; text-decoration: none; color: var(--ink); }
.logo img { width: 52px; height: 52px; object-fit: contain; }
.logo b { font-family: var(--serif); font-weight: 400; font-size: 1.3rem; display: block; line-height: 1.1; }
.logo small {
  display: block; font-size: .72rem; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--red-text); margin-top: 2px;
}
.menu-nav { display: flex; gap: 1.7rem; margin-left: auto; }
.menu-nav a {
  color: var(--ink); text-decoration: none; font-size: .96rem; font-weight: 500;
  padding: .3rem 0; border-bottom: 2px solid transparent;
}
.menu-nav a:hover, .menu-nav a[aria-current="page"] { border-bottom-color: var(--red); }
.head-actions { display: flex; align-items: center; gap: .55rem; }
.burger { display: none; background: none; border: 1px solid var(--red-line); border-radius: 8px; padding: .4rem .65rem; font-size: 1.2rem; cursor: pointer; }
@media (max-width: 920px) {
  .burger { display: block; order: 2; }
  .head-actions { order: 3; margin-left: auto; }
  .menu-nav { order: 4; width: 100%; flex-direction: column; gap: 0; display: none; border-top: 1px solid var(--line); margin-top: .6rem; }
  .menu-nav.open { display: flex; }
  .menu-nav a { padding: .8rem 0; border-bottom: 1px solid var(--line); }
  .head .wrap { flex-wrap: wrap; }
  .logo img { width: 44px; height: 44px; }
}

/* On a narrow phone the wordmark plus three controls will not fit on one line,
   and a bar that wraps looks broken. The logo already carries the name, so the
   text drops away and the bar stays a single row. */
@media (max-width: 620px) {
  .brand span { display: none; }
  .brand img { width: 42px; height: 42px; }
  .nav-actions .btn { padding-inline: .85rem; }
  .nav-inner { padding: .6rem 0; }
}

/* --- buttons ------------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  font-family: var(--sans); font-weight: 700; font-size: .95rem; line-height: 1;
  padding: .82rem 1.4rem; border-radius: 8px; border: 2px solid transparent;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
/* dark text on brand orange — the same relationship as the logo */
.btn-primary { background: var(--red-fill); color: #fff; border-color: var(--red-fill); }
.btn-primary:hover { background: var(--red-text); border-color: var(--red-text); }
.btn-outline { background: transparent; color: var(--ink); border-color: var(--red-line); }
.btn-outline:hover { border-color: var(--red); }

/* the call button — filled, so it reads on the charcoal bar and footer as well
   as on a white page. It had no styling at all and was inheriting a red that
   sat at 2.9:1 against the dark footer. */
.btn-call { background: var(--red-fill); color: #fff; border-color: var(--red-fill); }
.btn-call:hover { background: var(--red); border-color: var(--red); }

/* a quiet button; on a dark surface it needs pale text */
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--red-line); }
.btn-ghost:hover { border-color: var(--red); }
.footer .btn-ghost, .foot-main .btn-ghost { color: #f0ece7; border-color: #4a4440; }
.btn-wa { background: #14803e; color: #fff; border-color: #14803e; }
.btn-wa:hover { background: #0f6631; border-color: #0f6631; }
.btn-sm { padding: .55rem 1rem; font-size: .87rem; border-width: 1.5px; }
.btn-block { width: 100%; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }

.basket-btn .n { background: rgba(0,0,0,.14); border-radius: 20px; padding: .05rem .45rem; font-size: .82rem; }

/* --- hero ---------------------------------------------------------------
   Words on the left, the photograph of the table on the right. Nothing is
   written over the picture, so the wording is always crisp and the whole
   table is visible — which is the point of that photograph.

   The star tile that used to sit behind the text has been taken off; a
   repeating pattern under a paragraph makes it harder to read, and the
   character comes from the black, the flame red and the photographs. */

.hero {
  padding: clamp(1.8rem, 4vw, 3.4rem) 0 clamp(2rem, 4vw, 3.4rem);
  border-bottom: 1px solid var(--red-line);
  background: linear-gradient(180deg, var(--red-pale), var(--paper) 68%);
}
.hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(1.6rem, 4vw, 3.2rem);
  align-items: center;
}
.hero-copy { max-width: 34rem; }
.hero h1 { margin-bottom: .3em; }
.hero p.lede { font-size: 1.1rem; color: var(--ink-2); max-width: 36ch; }
.hero-buttons { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.6rem; }

/* the photograph, framed like a plate on a cloth */
.hero-shot {
  margin: 0;
  border-radius: var(--radius);
  border: 1px solid var(--red-line);
  box-shadow: var(--shadow-lift);
  background: var(--white);
}
.hero-shot img {
  width: 100%; height: auto; display: block;
  aspect-ratio: 7/5; object-fit: cover;
  /* the same pointed Ottoman arch used on the dish cards */
  border-radius: 30% 30% 8px 8px / 12% 12% 8px 8px;
}

@media (max-width: 900px) {
  .hero-inner { grid-template-columns: 1fr; gap: 1.4rem; }
  .hero-copy { max-width: none; order: 2; }
  .hero p.lede { max-width: none; }
  .hero-shot { order: 1; }
  /* a little taller on a phone so the table still fills the frame */
  .hero-shot img { aspect-ratio: 4/3; }
}

/* --- sections ------------------------------------------------------------ */

.section { padding: clamp(2.5rem, 5vw, 4rem) 0; }
.section-tint { background: var(--red-pale); border-block: 1px solid var(--red-line); }
.section-head { max-width: 60ch; margin-bottom: 2rem; }
.section-head p { color: var(--ink-2); margin: 0; }

/* --- menu ---------------------------------------------------------------- */

.filters {
  display: flex; flex-wrap: wrap; gap: .45rem; align-items: center;
  padding: 1rem 0; margin-bottom: 1.5rem;
  border-block: 1px solid var(--red-line);
  position: sticky; top: 78px; z-index: 30; background: var(--paper);
}
.filters .search { margin-left: auto; min-width: 210px; flex: 0 1 250px; }
.pill {
  background: var(--white); border: 1.5px solid var(--red-line); border-radius: 20px;
  color: var(--ink); font-family: var(--sans); font-size: .88rem; font-weight: 500;
  padding: .45rem 1rem; cursor: pointer;
}
.pill:hover { border-color: var(--red); }
.pill[aria-pressed="true"] { background: var(--red-fill); border-color: var(--red-fill); color: #fff; font-weight: 700; }

input, select, textarea {
  width: 100%; font-family: var(--sans); font-size: .96rem;
  padding: .72rem .9rem; color: var(--ink);
  background: var(--white); border: 1.5px solid var(--line); border-radius: 8px;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--red); }
::placeholder { color: #a8a098; }

.course { margin: 2.8rem 0 1.2rem; }
.course:first-of-type { margin-top: 0; }
.course h2 { margin: 0 0 .3rem; }

.dish-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.5rem 1.3rem; }

.dish {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
  display: flex; flex-direction: column; box-shadow: var(--shadow);
  transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
.dish:hover { box-shadow: var(--shadow-lift); transform: translateY(-2px); border-color: var(--red-line); }
.dish figure { margin: 0; background: var(--red-pale); }
.dish figure img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }

.dish-text { padding: 1.15rem 1.2rem 1.25rem; display: flex; flex-direction: column; gap: .55rem; flex: 1; }
.dish-name { display: flex; align-items: baseline; gap: .6rem; font-family: var(--serif); font-size: 1.18rem; line-height: 1.25; margin: 0; }
.dish-name .lead { flex: 1; border-bottom: 1px dotted var(--red-line); transform: translateY(-4px); }
.dish-name .price { font-family: var(--sans); font-size: 1.02rem; font-weight: 700; color: var(--red-text); }
.dish-desc { font-size: .93rem; color: var(--ink-2); margin: 0; flex: 1; }

.marks { display: flex; flex-wrap: wrap; gap: .35rem; }
.mark { font-size: .74rem; font-weight: 600; padding: .2rem .55rem; border-radius: 4px; background: #f4f0ea; color: var(--ink-2); }
.mark.veg { background: #e7f1ec; color: var(--green); }
.mark.hot { background: #fdeadf; color: #a34500; }
.mark.top { background: var(--red-pale); color: var(--red-text); }

.allergens { font-size: .83rem; color: var(--ink-2); margin: 0; }
.allergens b { font-weight: 700; color: var(--ink); }
.dish .btn { margin-top: .35rem; }

/* dishes with no photograph yet — an arabesque plate mark, not a fake picture */
.dish.no-photo { background: var(--red-pale); border-color: var(--red-line); }
.dish.no-photo .dish-text { padding-top: 1.35rem; }

/* --- offers -------------------------------------------------------------- */

.offer-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.2rem; }
.offer {
  background: var(--white); border: 1px solid var(--line);
  border-top: 4px solid var(--red); border-radius: var(--radius);
  padding: 1.5rem; box-shadow: var(--shadow);
  display: flex; flex-direction: column; gap: .55rem;
}
.offer .tagline { font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--red-text); }
.offer h3 { margin: 0; font-size: 1.3rem; }
.offer p { margin: 0; font-size: .93rem; color: var(--ink-2); }
.offer .terms {
  margin-top: auto; padding-top: .9rem; border-top: 1px solid var(--line);
  font-size: .85rem; color: var(--ink-2);
  display: flex; justify-content: space-between; gap: .8rem; align-items: center;
}
.code {
  font-family: ui-monospace, Menlo, monospace; font-weight: 700;
  background: var(--red-pale); border: 1px dashed var(--red);
  border-radius: 5px; padding: .18rem .55rem; color: var(--red-text);
}

/* --- loyalty stamps ------------------------------------------------------ */

.stamps { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.3rem 0; }
.stamp {
  width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1.5px dashed var(--red-line); color: var(--ink-2);
  font-size: .88rem; font-weight: 700; background: var(--white);
}
.stamp.on { background: var(--red); border: 1.5px solid var(--red); color: var(--ink); }
.stamp.prize { border: 2.5px solid var(--red-text); color: var(--red-text); font-size: .8rem; }

/* --- basket drawer ------------------------------------------------------- */

.scrim { position: fixed; inset: 0; z-index: 60; background: rgba(26,26,26,.45); opacity: 0; pointer-events: none; transition: opacity .2s ease; }
.scrim.open { opacity: 1; pointer-events: auto; }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 61;
  width: min(420px, 100%); background: var(--paper);
  border-left: 3px solid var(--red);
  transform: translateX(100%); transition: transform .24s ease;
  display: flex; flex-direction: column;
}
.drawer.open { transform: none; }
.drawer header { display: flex; align-items: center; gap: .8rem; padding: 1.1rem 1.2rem; border-bottom: 1px solid var(--red-line); }
.drawer header h2 { margin: 0; font-size: 1.3rem; }
.drawer .close { margin-left: auto; background: none; border: 0; font-size: 1.7rem; line-height: 1; cursor: pointer; color: var(--ink-2); padding: .1rem .4rem; }
.drawer .body { flex: 1; overflow-y: auto; padding: 1.2rem; }
.drawer .foot { border-top: 1px solid var(--red-line); padding: 1.2rem; background: var(--white); }

.row { display: flex; gap: .85rem; align-items: center; padding: .8rem 0; border-bottom: 1px solid var(--line); }
.row:last-child { border-bottom: 0; }
.row img { width: 56px; height: 56px; border-radius: 6px; object-fit: cover; flex: none; }
.row .who { flex: 1; min-width: 0; }
.row .who strong { display: block; font-size: .95rem; font-weight: 600; }
.row .who small { color: var(--ink-2); font-size: .83rem; }
.row .money { font-weight: 700; white-space: nowrap; }

.stepper { display: inline-flex; align-items: center; gap: .5rem; }
.stepper button {
  width: 30px; height: 30px; border-radius: 50%;
  border: 1.5px solid var(--red-line); background: var(--white);
  font-size: 1.05rem; line-height: 1; cursor: pointer; color: var(--ink);
}
.stepper button:hover { background: var(--red); border-color: var(--red); color: #fff; }
.stepper span { min-width: 1.4rem; text-align: center; font-weight: 700; }

.sums { font-size: .95rem; margin-bottom: 1rem; }
.sums div { display: flex; justify-content: space-between; gap: 1rem; padding: .3rem 0; }
.sums .off { color: var(--green); }
.sums .grand { margin-top: .5rem; padding-top: .6rem; border-top: 2px solid var(--red); font-size: 1.25rem; font-weight: 700; font-family: var(--serif); }
.hint { background: var(--red-pale); border: 1px solid var(--red-line); color: #8a4500; border-radius: 6px; padding: .6rem .8rem; font-size: .87rem; margin: .6rem 0 0; }

.empty { text-align: center; padding: 3rem 1rem; color: var(--ink-2); }
.empty h3 { color: var(--ink); }

.seg { display: flex; gap: .4rem; margin-bottom: 1rem; }
.seg button {
  flex: 1; padding: .62rem; border-radius: 8px; cursor: pointer;
  border: 1.5px solid var(--red-line); background: var(--white);
  font-family: var(--sans); font-size: .9rem; font-weight: 600; color: var(--ink);
}
.seg button[aria-pressed="true"] { background: var(--red-fill); border-color: var(--red-fill); color: #fff; font-weight: 700; }

.field { display: block; margin-bottom: .8rem; }
.field span { display: block; font-size: .83rem; font-weight: 600; color: var(--ink-2); margin-bottom: .3rem; }

/* --- footer -------------------------------------------------------------- */

.foot-main { background: var(--ink); color: #e4ded6; padding: 0 0 1.6rem; margin-top: 3rem; }
.foot-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 2.2rem; }
@media (max-width: 780px) { .foot-grid { grid-template-columns: 1fr; } }
.foot-main h4 { font-family: var(--sans); font-size: .78rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--red-dark); margin: 0 0 .9rem; }
.foot-main a { color: #e4ded6; text-decoration: none; display: block; padding: .18rem 0; }
.foot-main a:hover { color: var(--red-dark); }
.foot-main p { color: #b5aca2; font-size: .92rem; }
.opening div { display: flex; justify-content: space-between; gap: 1rem; padding: .18rem 0; font-size: .92rem; }
.opening div.now { color: #fff; font-weight: 700; }
.foot-base {
  border-top: 1px solid #3a352f; margin-top: 2.2rem; padding-top: 1.3rem;
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: .8rem;
  font-size: .85rem; color: #a49a90;
}

/* --- toast, notes -------------------------------------------------------- */

.toast-wrap { position: fixed; left: 50%; bottom: 1.5rem; transform: translateX(-50%); z-index: 80; display: flex; flex-direction: column; gap: .5rem; align-items: center; pointer-events: none; }
.toast { background: var(--ink); color: #fff; padding: .72rem 1.3rem; border-radius: 30px; font-size: .9rem; font-weight: 600; box-shadow: var(--shadow-lift); }
.toast strong { color: var(--red); }

.note { background: var(--white); border: 1px solid var(--red-line); border-radius: var(--radius); padding: 1.4rem 1.5rem; box-shadow: var(--shadow); }
.note h3 { margin-top: 0; }
.note p { font-size: .93rem; color: var(--ink-2); }
.note p:last-child { margin-bottom: 0; }
.contact-line { display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; margin-top: 1rem; }


/* ==========================================================================
   Classes the full ordering system uses on top of the base theme
   ========================================================================== */

.shell { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
.data { font-variant-numeric: tabular-nums; }

/* live service band */
.service-band {
  position: sticky; top: 0; z-index: 60;
  min-height: 42px; display: flex; align-items: center; gap: .7rem;
  padding: .5rem clamp(1rem, 4vw, 2rem);
  background: var(--ink); color: #fff;
  font-size: .85rem; overflow-x: auto; scrollbar-width: none;
}
.service-band::-webkit-scrollbar { display: none; }
.service-band .dot { width: 8px; height: 8px; border-radius: 50%; background: #8b8b8b; flex: none; }
.service-band[data-state="open"] .dot { background: #57d495; }
.service-band[data-state="closing_soon"] .dot { background: var(--red-dark); }
.service-band[data-state="last_orders_passed"] .dot { background: #e0596b; }
.band-state { font-weight: 700; white-space: nowrap; }
.service-band[data-state="open"] .band-state { color: #57d495; }
.service-band[data-state="closing_soon"] .band-state { color: var(--red-dark); }
.band-sep { color: #9b9189; }
.band-item { white-space: nowrap; color: #cdc6bd; }
.band-clock { margin-left: auto; color: var(--red-dark); white-space: nowrap; padding-left: 1rem; font-weight: 700; }
@media (max-width: 640px) {
  .service-band { flex-wrap: wrap; overflow-x: visible; row-gap: .1rem; font-size: .8rem; }
  .band-sep { display: none; }
  .band-item { flex-basis: 100%; }
}

.offline-note {
  background: var(--red-pale); border-bottom: 1px solid var(--red-line);
  color: #8a4500; padding: .6rem clamp(1rem, 4vw, 2rem); font-size: .87rem;
}
.offline-note a {
  color: var(--red-text); font-weight: 700;
  display: inline-block; padding: .35rem .2rem;   /* it is a phone number — make it tappable */
}

/* nav — the full system uses .nav rather than .head */
.nav {
  position: sticky; top: 42px; z-index: 55;
  background: rgba(255,253,250,.97); backdrop-filter: blur(8px);
  border-bottom: 2px solid var(--red);
}
.nav-inner { display: flex; align-items: center; gap: 1rem; padding: .75rem 0; }
.brand { display: flex; align-items: center; gap: .7rem; text-decoration: none; color: var(--ink);
  font-family: var(--serif); font-size: 1.28rem; }
.brand img { width: 50px; height: 50px; object-fit: contain; }
.nav-links { display: flex; gap: 1.7rem; margin-left: auto; }
.nav-links a { color: var(--ink); text-decoration: none; font-size: .96rem; font-weight: 500;
  padding: .3rem 0; border-bottom: 2px solid transparent; }
.nav-links a:hover, .nav-links a[aria-current="page"] { border-bottom-color: var(--red); }
.nav-actions { display: flex; align-items: center; gap: .55rem; }
.nav-toggle { display: none; background: none; border: 1px solid var(--red-line);
  border-radius: 8px; padding: .4rem .65rem; font-size: 1.2rem; cursor: pointer; }
/* the duplicates that only appear inside the phone menu */
.nav-links .in-menu { display: none; }

@media (max-width: 920px) {
  /* On a phone the bar carries only the logo, WhatsApp and the menu button.
     Sign in and the basket move inside the menu, so the bar stays legible on
     a narrow screen instead of cramming four controls into it. */
  .nav-toggle { display: block; order: 3; margin-left: .1rem; }
  .nav-actions { order: 2; margin-left: auto; }
  .nav-inner { gap: .5rem; }
  .nav-actions .on-wide { display: none; }
  .nav-links .in-menu { display: flex; }
  .nav-links .in-menu[data-cart-count],
  .nav-links .in-menu:last-child { font-weight: 700; color: var(--red-text); }
  .nav-links { order: 4; width: 100%; flex-direction: column; gap: 0; display: none;
    border-top: 1px solid var(--line); margin-top: .6rem; }
  .nav-links.open { display: flex; }
  .nav-links a { padding: .8rem 0; border-bottom: 1px solid var(--line); }
  .nav-inner { flex-wrap: wrap; }
  .brand img { width: 44px; height: 44px; }
}
.cart-btn .cart-count { background: rgba(0,0,0,.14); border-radius: 20px; padding: .05rem .45rem; font-size: .82rem; }

/* checkout / basket layout */
.checkout-grid {
  display: grid; grid-template-columns: minmax(0,1.55fr) minmax(0,.95fr);
  gap: clamp(1.2rem,3vw,2.2rem); align-items: start;
}
.checkout-grid > aside { position: sticky; top: 130px; }
@media (max-width: 900px) { .checkout-grid { grid-template-columns: 1fr; } .checkout-grid > aside { position: static; } }

.card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem; box-shadow: var(--shadow); }
.card--tight { padding: 1.1rem; }

.notice { border: 1px solid var(--line); border-radius: var(--radius); padding: .8rem 1rem; font-size: .92rem; margin-bottom: 1rem; color: var(--ink-2); background: var(--white); }
.notice.error { border-color: #e8b4bb; color: #97202f; background: #fdf1f2; }
.notice.ok { border-color: #b7d8c6; color: var(--green); background: #f0f8f3; }
.notice.warn { border-color: var(--red-line); color: #8a4500; background: var(--red-pale); }

.line { display: flex; gap: 1rem; padding: .95rem 0; border-bottom: 1px solid var(--line); align-items: center; }
.line:last-child { border-bottom: 0; }
.line-img { width: 58px; height: 58px; border-radius: 6px; object-fit: cover; flex: none; }
.line-info { flex: 1; min-width: 0; }
.line-info strong { display: block; font-weight: 600; font-size: .95rem; }
.line-info small { color: var(--ink-2); font-size: .8rem; }
.line-total { font-weight: 700; white-space: nowrap; }

.totals { font-size: .95rem; }
.totals div { display: flex; justify-content: space-between; gap: 1rem; padding: .32rem 0; }
.totals .save { color: var(--green); }
.totals .grand { margin-top: .5rem; padding-top: .6rem; border-top: 2px solid var(--red);
  font-size: 1.25rem; font-weight: 700; font-family: var(--serif); }

.qty { display: inline-flex; align-items: center; gap: .5rem; border: 1.5px solid var(--red-line); border-radius: 999px; padding: .2rem .45rem; }
.qty button { width: 28px; height: 28px; border: 0; border-radius: 50%; background: var(--white); color: var(--ink);
  border: 1px solid var(--red-line); font-size: 1rem; line-height: 1; cursor: pointer; }
.qty button:hover { background: var(--red); border-color: var(--red); color: #fff; }

.nudge { margin: .75rem 0 0; padding: .6rem .8rem; border-radius: 6px;
  border: 1px solid var(--red-line); background: var(--red-pale); color: #8a4500; font-size: .87rem; }

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 560px) { .field-row { grid-template-columns: 1fr; } }
.check { display: flex; gap: .65rem; align-items: flex-start; font-size: .92rem; color: var(--ink-2); margin-bottom: .8rem; }
.check input {
  width: 22px; height: 22px; margin-top: .15rem;
  accent-color: var(--red); flex: none;
}
/* the whole row is the target, not just the box */
.check { padding: .35rem 0; min-height: 44px; }
.check strong { color: var(--ink); }
.check.is-disabled { opacity: .45; }

/* offer tickets on the offers page */
.tickets { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px,1fr)); gap: 1.2rem; }
.ticket { background: var(--white); border: 1px solid var(--line); border-top: 4px solid var(--red-line);
  border-radius: var(--radius); padding: 1.5rem; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: .55rem; }
.ticket.live { border-top-color: var(--red); }
.ticket-badge { align-self: flex-start; font-size: .75rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--red-text); }
.ticket h3 { margin: 0; font-size: 1.28rem; }
.ticket p { margin: 0; font-size: .93rem; color: var(--ink-2); }
.ticket-foot { margin-top: auto; padding-top: .9rem; border-top: 1px solid var(--line);
  font-size: .85rem; color: var(--ink-2); display: flex; justify-content: space-between; gap: .8rem; align-items: center; }
.ticket-code { font-family: ui-monospace, Menlo, monospace; font-weight: 700; background: var(--red-pale);
  border: 1px dashed var(--red); border-radius: 5px; padding: .18rem .55rem; color: var(--red-text); }

/* menu toolbar / chips */
.menu-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; margin-bottom: 1rem; }
.chip { background: var(--white); border: 1.5px solid var(--red-line); border-radius: 20px; color: var(--ink);
  font-family: var(--sans); font-size: .88rem; font-weight: 500; padding: .45rem 1rem; cursor: pointer; }
.chip:hover { border-color: var(--red); }
.chip[aria-pressed="true"] { background: var(--red-fill); border-color: var(--red-fill); color: #fff; font-weight: 700; }
.menu-search { margin-left: auto; min-width: 200px; flex: 0 1 260px; }

/* dish cards use .dish/.dish-img in the full system */
.dishes { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px,1fr)); gap: 1.5rem 1.3rem; }
.dish-img { width: 100%; aspect-ratio: 4/3; object-fit: cover; background: var(--red-pale); }
.dish-body { padding: 1.15rem 1.2rem 1.25rem; display: flex; flex-direction: column; gap: .55rem; flex: 1; }
.dish-top { display: flex; justify-content: space-between; align-items: baseline; gap: .7rem; }
.dish-top h3 { margin: 0; font-family: var(--serif); font-size: 1.16rem; line-height: 1.25; }
.dish-price { font-weight: 700; color: var(--red-text); white-space: nowrap; }
.dish-desc { font-size: .93rem; color: var(--ink-2); margin: 0; flex: 1; }
.dish-tags { display: flex; flex-wrap: wrap; gap: .35rem; }
.tag { font-size: .74rem; font-weight: 600; padding: .2rem .55rem; border-radius: 4px; background: #f4f0ea; color: var(--ink-2); }
.tag.veg { background: #e7f1ec; color: var(--green); }
.tag.hot { background: #fdeadf; color: #a34500; }
.tag.pop { background: var(--red-pale); color: var(--red-text); }
.dish-meta { font-size: .83rem; color: var(--ink-2); margin: 0; }
.dish-add { margin-top: .35rem; width: 100%; }
.cat-heading { grid-column: 1/-1; display: flex; align-items: center; gap: 1.1rem; margin: 2.4rem 0 .2rem; }
.cat-heading:first-child { margin-top: 0; }
.cat-heading h2 { margin: 0; white-space: nowrap; }
.cat-heading .rule { flex: 1; height: 2px; background: var(--red); opacity: .5; }

/* footer used by the full system */
.footer { background: var(--ink); color: #e4ded6; padding: 0 0 1.6rem; margin-top: 3rem; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 2.2rem; padding-top: 2.6rem; }
@media (max-width: 820px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } }
.footer h4 { font-family: var(--sans); font-size: .74rem; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--red-dark); margin: 0 0 .9rem; }
/* the plain link rule must not touch buttons, or it squashes them */
.footer a:not(.btn) {
  color: #e4ded6; text-decoration: none; font-size: .92rem;
  display: flex; align-items: center; min-height: 44px; padding: .2rem 0;
}
.footer a:not(.btn):hover { color: var(--red-dark); }
.footer .btn { min-height: 44px; margin-top: .6rem; }
.footer p { color: #b5aca2; font-size: .92rem; }
.hours-list { font-size: .9rem; color: #cdc6bd; }
.hours-list div { display: flex; justify-content: space-between; gap: 1rem; padding: .18rem 0; }
.hours-list div.today { color: #fff; font-weight: 700; }
.footer-base { border-top: 1px solid #3a352f; margin-top: 2.2rem; padding-top: 1.3rem;
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: .8rem; font-size: .85rem; color: #a49a90; }

/* assistant */
.ai-launch { color: #fff; position: fixed; right: 1.2rem; bottom: 1.2rem; z-index: 70; display: inline-flex; align-items: center;
  gap: .5rem; background: var(--red-fill); color: #fff; border: 0; border-radius: 999px;
  font-family: var(--sans); font-weight: 700; font-size: .9rem; padding: .85rem 1.3rem; cursor: pointer; box-shadow: var(--shadow-lift); }
.ai-launch:hover { background: var(--red-lit); }
.ai-launch .live-dot { width: 8px; height: 8px; border-radius: 50%; background: #fff; }
.ai-panel { position: fixed; right: 1.2rem; bottom: 1.2rem; z-index: 71; width: min(400px, calc(100vw - 2.4rem));
  height: min(560px, calc(100vh - 6rem)); background: var(--paper); border: 1px solid var(--red-line);
  border-radius: var(--radius); box-shadow: var(--shadow-lift); display: none; flex-direction: column; overflow: hidden; }
.ai-panel.open { display: flex; }
.ai-head { display: flex; align-items: center; gap: .7rem; padding: .85rem 1rem; border-bottom: 1px solid var(--red-line); background: var(--white); }
.ai-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--red-fill); color: #fff;
  display: grid; place-items: center; font-family: var(--serif); font-size: 1.05rem; flex: none; }
.ai-head-text { line-height: 1.25; flex: 1; min-width: 0; }
.ai-head-text strong { font-size: .96rem; }
.ai-head-text small { display: block; font-size: .74rem; color: var(--green); }
.ai-close { background: none; border: 0; color: var(--ink-2); font-size: 1.5rem; cursor: pointer; line-height: 1; padding: .2rem .4rem; }
.ai-log { flex: 1; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: .7rem; }
.ai-log .msg {
  max-width: 84%; padding: .6rem .85rem; border-radius: 12px;
  font-size: .92rem; line-height: 1.5; white-space: pre-wrap;
}
.ai-log .msg.bot {
  background: var(--white); border: 1px solid var(--line);
  align-self: flex-start; border-bottom-left-radius: 4px;
}
.ai-log .msg.me {
  background: var(--red-fill); color: #fff;
  align-self: flex-end; border-bottom-right-radius: 4px; font-weight: 500;
}
.ai-log .msg.sys {
  align-self: center; font-size: .8rem; color: var(--ink-2);
  background: none; border: 0; padding: .1rem 0;
}
.ai-log .msg.typing { color: var(--ink-2); font-style: italic; }
.ai-chips { display: flex; gap: .35rem; flex-wrap: wrap; padding: 0 1rem .6rem; }
.ai-chips .chip { font-size: .78rem; padding: .3rem .7rem; }
.ai-form { display: flex; gap: .45rem; padding: .75rem 1rem 1rem; border-top: 1px solid var(--red-line); background: var(--white); }
.ai-form input { flex: 1; }
.ai-mic { flex: none; width: 44px; padding: 0; }

/* toast host used by core.js */
.toast-host { position: fixed; left: 50%; bottom: 5.5rem; transform: translateX(-50%); z-index: 90;
  display: flex; flex-direction: column; gap: .5rem; align-items: center; pointer-events: none; }
.toast { background: var(--ink); color: #fff; padding: .72rem 1.3rem; border-radius: 30px;
  font-size: .9rem; font-weight: 600; box-shadow: var(--shadow-lift); }
.toast.bad { background: #97202f; }

.status-pill { display: inline-flex; align-items: center; gap: .4rem; font-size: .78rem; font-weight: 600;
  padding: .28rem .65rem; border-radius: 20px; border: 1px solid var(--line); color: var(--ink-2); background: var(--white); }
.status-pill.new, .status-pill.preparing { color: #8a4500; border-color: var(--red-line); background: var(--red-pale); }
.status-pill.ready, .status-pill.completed { color: var(--green); border-color: #b7d8c6; background: #f0f8f3; }
.status-pill.cancelled { color: #97202f; border-color: #e8b4bb; background: #fdf1f2; }

.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap: 1.6rem; }
.step-num { font-weight: 700; color: var(--red-text); font-size: .8rem; letter-spacing: .14em; margin: 0; }
.track { display: flex; gap: .4rem; margin: 1.5rem 0; }
.track span { flex: 1; height: 5px; border-radius: 3px; background: var(--line); }
.track span.done { background: var(--red); }
.track span.now { background: var(--green); }

.checker { background: var(--white); border: 1px solid var(--red-line); border-radius: var(--radius); padding: clamp(1.2rem,3vw,1.8rem); box-shadow: var(--shadow); }
.checker-row { display: flex; gap: .6rem; flex-wrap: wrap; }
.checker-row input { flex: 1 1 190px; }
.checker-result { margin-top: .85rem; font-size: .93rem; display: none; }
.checker-result.show { display: block; }
.checker-result.yes { color: var(--green); font-weight: 600; }
.checker-result.no { color: #8a4500; font-weight: 600; }

/* The four figures under the kitchen cards on the home page — opening hours,
   delivery time, radius, the Tuesday offer. This had no styling at all, so the
   number and its label ran together as one line of plain text
   ("35 minTo your door"). */
.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: .9rem;
}
.facts > div {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  padding: 1rem 1.15rem;
  background: var(--white);
  border: 1px solid var(--red-line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.facts > div > b { font-size: 1.22rem; line-height: 1.2; color: var(--red-text); }
/* Direct children only. The figures themselves sit in spans *inside* the bold
   line ("<b><span data-eta>35</span> min</b>"), and a plain `.facts span` rule
   shrinks the number while leaving its unit large. */
.facts > div > span { font-size: .84rem; color: var(--ink-2); }

.section--panel { background: var(--red-pale); border-block: 1px solid var(--red-line); }
.about-grid { display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); gap: clamp(1.5rem,4vw,3.5rem); align-items: start; }
@media (max-width: 780px) { .about-grid { grid-template-columns: 1fr; } }
.about-copy p { color: var(--ink-2); max-width: 64ch; }
.allergen-note { margin-top: 3rem; padding: 1.4rem 1.5rem; border: 1px solid var(--red-line);
  border-radius: var(--radius); background: var(--white); box-shadow: var(--shadow); }
.allergen-note h3 { margin: 0 0 .6rem; }
.allergen-note p { font-size: .9rem; color: var(--ink-2); max-width: 80ch; }
.contact-strip { display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; padding: 1rem 1.2rem;
  background: var(--red-pale); border: 1px solid var(--red-line); border-radius: var(--radius); }
.contact-strip p { margin: 0; flex: 1 1 220px; font-size: .92rem; color: var(--ink-2); }
.contact-strip strong { color: var(--ink); }

.hero-lede { font-size: 1.1rem; color: var(--ink-2); max-width: 46ch; }
.empty { text-align: center; padding: 3rem 1rem; color: var(--ink-2); }
.empty h3 { color: var(--ink); }
.loyalty-stamps { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.2rem 0; }
.loyalty-stamp { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  border: 1.5px dashed var(--red-line); color: var(--ink-2); font-size: .88rem; font-weight: 700; background: var(--white); }
.loyalty-stamp.is-filled { background: var(--red-text); border: 1.5px solid var(--red-text); color: #fff; }
.loyalty-stamp.is-reward { border: 2.5px solid var(--red-text); color: var(--red-text); font-size: .8rem; }
.loyalty-title { margin: 0 0 .35rem; }
.loyalty-note { margin: 0 0 1.1rem; color: var(--ink-2); }
.loyalty-fine { margin-top: 1rem; font-size: .86rem; color: var(--ink-2); }
.loyalty-ready-note { margin-top: 1rem; padding: .7rem .9rem; border-radius: 6px; background: #f0f8f3;
  border: 1px solid #b7d8c6; color: var(--green); font-size: .9rem; }
.loyalty-strip { display: flex; align-items: center; gap: .8rem; padding: .8rem 1rem;
  border: 1px solid var(--red-line); background: var(--red-pale); border-radius: var(--radius); font-size: .9rem; color: #8a4500; }
.loyalty-strip strong { color: var(--ink); }
.loyalty-strip.is-ready { background: #f0f8f3; border-color: #b7d8c6; color: var(--green); }
.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; }

/* --- allergen marks ------------------------------------------------------ */

.allergens { display: flex; flex-wrap: wrap; gap: .3rem; margin: 0; }

.allergen {
  display: inline-flex; align-items: center; gap: .32rem;
  font-size: .8rem; font-weight: 600; line-height: 1;
  padding: .26rem .5rem .26rem .28rem;
  border-radius: 5px;
  background: #f4f0ea; color: var(--ink-2);
  border: 1px solid var(--line);
}
/* the letter code, in a square so it reads as a mark rather than a word */
.allergen b {
  display: inline-grid; place-items: center;
  min-width: 1.15rem; height: 1.15rem;
  border-radius: 3px;
  background: var(--ink); color: #fff;
  font-size: .74rem; font-weight: 700; letter-spacing: .01em;
}
.allergen.none {
  background: #eef6f1; border-color: #cbe3d6; color: var(--green);
  padding-left: .55rem; font-weight: 600;
}
.allergen.ask {
  background: var(--red-pale); border-color: var(--red-line); color: #8a4500;
}
.allergen.ask b { background: #8a4500; }

/* a little colour so the common ones are recognisable at a glance */
.allergen.is-gluten     b { background: #8a6a1f; }
.allergen.is-milk       b { background: #4b6a8a; }
.allergen.is-nuts       b { background: #7a4a1f; }
.allergen.is-peanuts    b { background: #7a4a1f; }
.allergen.is-sesame     b { background: #81723b; }
.allergen.is-fish       b { background: #2f6b7a; }
.allergen.is-crustaceans b { background: #a8502c; }
.allergen.is-molluscs   b { background: #2f6b7a; }
.allergen.is-eggs       b { background: #8a6d23; }
.allergen.is-soya       b { background: #4a7a3f; }
.allergen.is-celery     b { background: #4a7a3f; }
.allergen.is-mustard    b { background: #8a6d23; }
.allergen.is-sulphites  b { background: #7a3f6a; }
.allergen.is-lupin      b { background: #6a5a8a; }

/* the key printed under the menu */
.allergen-key {
  display: flex; flex-wrap: wrap; gap: .4rem;
  margin: .3rem 0 1rem;
}
.allergen-key .allergen { font-size: .8rem; }

/* staff links in the footer — present for the team, quiet for customers */
.staff-links { display: inline-flex; gap: .6rem; align-items: center; color: #8b8177; }
.staff-links a {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 .15rem;
  color: #b5aca2; text-decoration: underline; text-underline-offset: 3px;
}
.staff-links a:hover { color: var(--red-dark); }
@media (max-width: 640px) { .staff-links { flex-basis: 100%; } }

/* --- table booking ------------------------------------------------------- */

.sittings { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .7rem; }
.sitting {
  display: flex; flex-direction: column; gap: .2rem; align-items: flex-start;
  padding: 1rem 1.1rem; min-height: 76px;
  background: var(--white); border: 2px solid var(--red-line);
  border-radius: var(--radius); cursor: pointer; text-align: left;
  font-family: var(--sans); color: var(--ink);
}
.sitting:hover:not(:disabled) { border-color: var(--red); }
.sitting.is-chosen { border-color: var(--red); background: var(--red-pale); }
.sitting.is-chosen::after { content: ' ✓'; position: absolute; }
.sitting-time { font-family: var(--serif); font-size: 1.5rem; line-height: 1.1; }
.sitting-meta { font-size: .84rem; color: var(--ink-2); }
.sitting.is-full { opacity: .55; cursor: not-allowed; border-style: dashed; }
.sitting.is-full .sitting-time { text-decoration: line-through; }

.booking-summary { margin-top: 1.2rem; border-top: 1px solid var(--line); }
.booking-summary div {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: .7rem 0; border-bottom: 1px solid var(--line); font-size: .95rem;
}
.booking-summary span { color: var(--ink-2); }

/* the manager's diary */
.diary-day { margin-bottom: 1.6rem; }
.diary-day h3 { margin: 0 0 .5rem; font-size: 1.05rem; }
.diary-sitting {
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: .9rem 1rem; margin-bottom: .6rem; background: var(--white);
}
.diary-sitting > h4 {
  margin: 0 0 .6rem; font-size: .8rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--red-text);
}
.diary-row {
  display: flex; flex-wrap: wrap; gap: .7rem; align-items: center;
  padding: .5rem 0; border-top: 1px dotted var(--line); font-size: .92rem;
}
.diary-row:first-of-type { border-top: 0; }
.diary-row .who { flex: 1 1 180px; min-width: 0; }
.diary-row .who strong { display: block; }
.diary-row .who small { color: var(--ink-2); }
.diary-tables {
  font-family: ui-monospace, Menlo, monospace; font-weight: 700;
  background: var(--red-pale); border: 1px solid var(--red-line);
  border-radius: 5px; padding: .15rem .5rem; color: var(--red-text);
}


/* --- touch screens -------------------------------------------------------
   A mouse is precise; a thumb is not. Anything tapped wants to be about 44px,
   and form fields want 16px text or iOS zooms the page when they are focused. */
@media (max-width: 920px), (pointer: coarse) {
  .btn { min-height: 46px; }
  .btn-sm { min-height: 44px; padding-inline: 1rem; }
  .nav-actions .btn, .nav-toggle { min-height: 44px; }
  .nav-toggle { min-width: 46px; font-size: 1.35rem; }
  input, select, textarea { min-height: 46px; font-size: 16px; }
  .chip { min-height: 42px; }
  .qty button { width: 40px; height: 40px; font-size: 1.2rem; }
  .dish-add { min-height: 46px; }
  .sitting { min-height: 84px; }
  .stepper button { width: 40px; height: 40px; }
}


/* --- Fresh Shawarma ornament ----------------------------------------------
   A short orange-and-green rule — the spit and the parsley from the logo. */

.ornament {
  height: 6px; width: 92px; margin: .2rem 0 1.3rem; border-radius: 3px;
  background: linear-gradient(90deg, var(--orange) 0 58%, transparent 58% 64%, var(--red) 64% 100%);
}
.ornament:not(.left) { margin-inline: auto; }

.ornament-band {
  height: 6px;
  background: repeating-linear-gradient(90deg, var(--orange) 0 26px, transparent 26px 34px, var(--red) 34px 60px, transparent 60px 68px);
  opacity: .9;
}

.pattern-field, .section--panel { position: relative; }
.pattern-field > * { position: relative; }

.dish-img, .dish figure img, .hero-shot img { border-radius: 10px; }

/* the printed menu's dish numbers, so a phone order matches the card */
.dish-number {
  display: inline-grid; place-items: center;
  min-width: 1.6rem; height: 1.6rem; margin-right: .5rem;
  border-radius: 50%; background: var(--orange); color: #111;
  font-family: var(--sans); font-size: .72rem; font-weight: 700; flex: none;
}
.dish-top h3 { display: flex; align-items: center; }


/* The top-bar button shows the number, because on a laptop a phone link does
   nothing — someone at a desk needs to be able to read it and dial manually.
   On a narrow phone the number is dropped; there the link does work. */
.call-number { margin-left: .3rem; }
@media (max-width: 620px) { .call-number { display: none; } }

/* ==========================================================================
   Two kitchens
   The site can carry several kitchens (Fresh Shawarma runs one) that share
   never share a ticket. Everything here is built from the variables above —
   one accent per kitchen — so several menus would feel
   like two cards of one restaurant rather than two websites.
   ========================================================================== */

.menu-switch {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: .8rem;
  margin: 1.8rem 0 1rem;
}

.menu-card-tab {
  --menu-accent: var(--red);
  display: flex;
  flex-direction: column;
  gap: .2rem;
  padding: 1rem 1.2rem;
  text-align: left;
  cursor: pointer;
  background: var(--white);
  border: 1.5px solid var(--red-line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.menu-card-tab strong {
  font-family: var(--serif);
  font-size: 1.14rem;
  font-weight: 400;
  line-height: 1.25;
  color: var(--ink);
}
.menu-card-tab small {
  font-family: var(--sans);
  font-size: .86rem;
  color: var(--ink-2);
}
.menu-card-tab:hover {
  border-color: var(--menu-accent);
  transform: translateY(-2px);
  box-shadow: var(--shadow-lift);
}
.menu-card-tab[aria-pressed="true"] {
  border-color: var(--menu-accent);
  border-width: 2px;
  background: var(--white);
  box-shadow: inset 0 -4px 0 var(--menu-accent), var(--shadow);
}
.menu-card-tab[aria-pressed="true"] strong { color: var(--menu-accent); }

.menu-blurb {
  font-size: .95rem;
  color: var(--ink-2);
  margin: 0 0 1.2rem;
}

/* the choice of filling on a dish card */
.dish-option { display: block; margin: 0; }
.dish-option > span {
  display: block;
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-bottom: .3rem;
}
.dish-option select { width: 100%; }

.dish-price .from {
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-right: .2rem;
}

/* which kitchen a basket line or an admin row belongs to */
.line-menu,
.menu-pill {
  display: inline-block;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: .16rem .5rem;
  border-radius: 4px;
  background: var(--red-pale);
  color: var(--red-text);
}
.line-menu { margin-left: .45rem; }
.menu-pill.is-indian,
.line-menu.is-indian { background: #e7f1ec; color: var(--green); }

/* the two kitchens, side by side on the home page */
.kitchen-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 1rem;
}
.kitchen-card {
  --menu-accent: var(--red);
  display: flex;
  flex-direction: column;
  gap: .45rem;
  padding: 1.5rem 1.6rem 1.35rem;
  text-decoration: none;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--red-line);
  border-top: 4px solid var(--menu-accent);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: transform .2s ease, box-shadow .2s ease;
}
.kitchen-card.is-indian { --menu-accent: var(--green); border-color: #cfe2d8; }
.kitchen-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.kitchen-kicker {
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--menu-accent);
}
.kitchen-card h3 {
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 400;
  margin: 0;
  line-height: 1.2;
}
.kitchen-card p { margin: 0; font-size: .94rem; color: var(--ink-2); }
.kitchen-meta {
  font-size: .8rem;
  font-weight: 600;
  color: var(--ink-2);
  padding-top: .3rem;
}
.kitchen-go {
  margin-top: auto;
  padding-top: .7rem;
  font-size: .92rem;
  font-weight: 600;
  color: var(--menu-accent);
}

/* ==========================================================================
   Reading the site on a phone, a tablet and a laptop
   The sticky stack is band → nav → filter bar. Those offsets are measured for
   a wide screen, where the band is one 42px line. On a phone the band wraps to
   three lines and grows past 42px, so the nav ends up underneath it and the
   filter bar floats in mid-air. Below the phone breakpoint the band simply
   stops sticking — hours are worth reading once, not all the way down a menu —
   and the nav takes the top of the screen instead.
   ========================================================================== */

@media (max-width: 640px) {
  .service-band { position: static; }
  .nav { top: 0; }
  /* the nav is about 56px once the wordmark drops away on a narrow phone */
  .filters { top: 56px; }
}

/* --- the two kitchens, at each size ------------------------------------- */

/* Laptop keeps them side by side. A tablet in portrait is 768px, which fits
   two 290px cards; anything narrower gets one card at a time so the wording
   stays readable rather than squeezed into a column of two words. */
@media (max-width: 680px) {
  .kitchen-cards { grid-template-columns: 1fr; gap: .8rem; }
  .kitchen-card { padding: 1.25rem 1.3rem 1.15rem; }
  .kitchen-card h3 { font-size: 1.32rem; }
}

/* The menu switcher is two big tap targets. Stacked on a phone they stay full
   width, which is easier to hit than two half-width tabs. */
@media (max-width: 620px) {
  .menu-switch { grid-template-columns: 1fr; gap: .55rem; margin: 1.2rem 0 .8rem; }
  .menu-card-tab { padding: .85rem 1rem; }
  .menu-card-tab strong { font-size: 1.05rem; }
  .menu-card-tab small { font-size: .82rem; }
  .menu-blurb { font-size: .9rem; margin-bottom: 1rem; }
}

/* A section chip bar 18 sections long is a wall of buttons on a phone. It
   scrolls sideways in one row instead, the way a native app does, so the
   dishes stay on screen. */
@media (max-width: 620px) {
  .menu-toolbar[data-category-chips] {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding-bottom: .3rem;
    /* .shell is min(100% - 2.5rem, --wrap), so the gutter is 1.25rem */
    margin-inline: -1.25rem;
    padding-inline: 1.25rem;
  }
  .menu-toolbar[data-category-chips]::-webkit-scrollbar { display: none; }
  .menu-toolbar[data-category-chips] .chip { flex: none; }
  .menu-search { flex-basis: 100%; min-width: 0; }
}

/* Touch targets on the filling picker, and room for a long filling name. */
@media (max-width: 920px), (pointer: coarse) {
  .dish-option select { min-height: 46px; font-size: 16px; }
  .menu-card-tab { min-height: 64px; }
  .kitchen-card { min-height: 0; }
}

/* A dish card at 280px is fine on a laptop; on a small phone one column with a
   slightly shorter photo shows more of the menu per screen. */
@media (max-width: 420px) {
  .dishes { grid-template-columns: 1fr; gap: 1.1rem; }
  .dish-img { aspect-ratio: 16/10; }
  .dish-body { padding: 1rem 1.05rem 1.1rem; }
  .dish-top h3 { font-size: 1.08rem; }
  .cat-heading { margin: 1.8rem 0 .2rem; }
  .cat-heading h2 { font-size: 1.25rem; white-space: normal; }
}

/* the section a dish belongs to, shown when cards are not under a heading */
.dish-section {
  margin: -.15rem 0 0;
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-2);
}

/* ==========================================================================
   Grand opening
   One night, half price, limited tables — so it is allowed to be the loudest
   thing on the page. It borrows the black bar and the flame red already in
   the brand rather than introducing a third colour, and every piece of it is
   marked [data-opening] so opening.js can take it away the morning after.
   ========================================================================== */

.opening-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: .55rem .9rem;
  padding: .6rem clamp(1rem, 4vw, 2rem);
  background: var(--ink); color: #fff;
  border-bottom: 3px solid var(--red);
  font-size: .88rem;
}
.opening-flag {
  font-family: var(--serif); font-size: .82rem; font-weight: 400;
  letter-spacing: .2em; text-transform: uppercase;
  background: var(--red-fill); color: #fff;
  padding: .28rem .7rem; border-radius: 3px; white-space: nowrap;
}
.opening-bar-line { color: #efe9e3; }
.opening-bar-line b { color: #fff; font-weight: 700; }
.opening-bar-count {
  color: var(--red-dark); font-weight: 700; white-space: nowrap;
  padding-left: .9rem; border-left: 1px solid #3a3740;
}
.opening-bar-cta { margin-left: auto; }
/* The walk-ins line. It used to be four words ("Part of the room only") and
   could safely be nowrap; it is a full sentence now, so it wraps instead of
   running off the edge of a phone. */
.opening-bar-limited { color: #a9a2ab; font-size: .82rem; min-width: 0; }
.opening-bar-close {
  background: none; border: 0; color: #a9a2ab; font-size: 1.25rem; line-height: 1;
  padding: .1rem .35rem; cursor: pointer; border-radius: 4px;
}
.opening-bar-close:hover { color: #fff; }

@media (max-width: 760px) {
  .opening-bar { font-size: .84rem; row-gap: .5rem; }
  .opening-bar-count { padding-left: 0; border-left: 0; }
  .opening-bar-cta { margin-left: 0; }
  .opening-bar-limited { flex-basis: 100%; line-height: 1.35; }
  .opening-bar-close { position: absolute; right: .6rem; top: .5rem; }
  .opening-bar { position: relative; padding-right: 2.4rem; }
}

/* the banner that opens the front page */
.opening-banner {
  background: var(--ink);
  padding-block: clamp(1.2rem, 3vw, 2rem);
  border-bottom: 3px solid var(--red);
}
.opening-banner-shot {
  display: block; border-radius: var(--radius); overflow: hidden;
  box-shadow: 0 24px 60px -30px rgba(0, 0, 0, .9);
  border: 1px solid #3a3740;
}
.opening-banner-shot img { width: 100%; height: auto; }
.opening-banner-shot:focus-visible { outline: 2px solid var(--red-dark); outline-offset: 4px; }

.opening-banner-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.4rem;
  margin-top: 1.2rem;
}
.opening-banner-count {
  margin: 0; font-family: var(--serif); font-size: 1.35rem; color: var(--red-dark);
}
.opening-banner-note { margin: 0; color: #a9a2ab; font-size: .88rem; flex: 1 1 16rem; }
.opening-banner .btn-ghost { color: #fff; border-color: #4a4650; }
.opening-banner .btn-ghost:hover { border-color: var(--red); }

@media (max-width: 760px) {
  .opening-banner { padding-block: .9rem 1.2rem; }
  /* the crop has no ornate frame down its sides, so give it its own gold
     hairline — otherwise it reads as a photograph that has been cut off */
  .opening-banner-shot { border-color: #6b5628; box-shadow: 0 12px 30px -18px #000; }
  .opening-banner-bar { gap: .7rem; text-align: center; justify-content: center; }
  .opening-banner-count { font-size: 1.2rem; flex-basis: 100%; text-align: center; }
  .opening-banner .hero-buttons { flex: 1 1 100%; }
  .opening-banner .hero-buttons .btn { flex: 1; justify-content: center; min-height: 48px; }
  .opening-banner-note { flex-basis: 100%; text-align: center; padding-bottom: 3.2rem; }
}

/* the one-line version, for the top of the menus */
.opening-strip {
  display: flex; flex-wrap: wrap; align-items: center; gap: .6rem .9rem;
  background: var(--red-pale); border: 1px solid var(--red-line);
  border-left: 4px solid var(--red);
  border-radius: var(--radius); padding: .8rem 1rem;
  font-size: .93rem; margin: 1.4rem 0 0;
}
.opening-strip .opening-flag { background: var(--red-fill); }
.opening-strip a { font-weight: 700; }

/* the note on the booking page */
.opening-notice { border-left: 4px solid var(--red); background: var(--red-pale); border-color: var(--red-line); color: var(--ink); }

/* what a dish costs on the night, under its everyday price */
.dish-opening {
  display: flex; align-items: baseline; gap: .5rem;
  margin: -.15rem 0 0; font-size: .8rem;
}
.dish-opening span {
  font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: #fff; background: var(--red-fill);
  padding: .12rem .45rem; border-radius: 3px; white-space: nowrap;
}
.dish-opening b { font-size: .98rem; color: var(--red-text); font-variant-numeric: tabular-nums; }

/* a service that has not opened yet — visibly there, visibly not yet on */
.chip[disabled] {
  opacity: .55; cursor: not-allowed;
  background: repeating-linear-gradient(-45deg, transparent, transparent 5px, rgba(23,22,26,.045) 5px, rgba(23,22,26,.045) 10px);
  border-style: dashed;
}
.chip[disabled]:hover { border-color: var(--line); }

/* ==========================================================================
   The waitress screen
   A phone held in one hand in a busy room: nothing under 44px, the table
   pinned to the top, the running order pinned to the bottom, and dark chrome
   so the screen is not a torch in a dim dining room.
   ========================================================================== */

.waiter-body { background: var(--paper); padding-bottom: 5.5rem; }

.waiter-bar {
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; gap: .8rem;
  padding: .7rem 1rem; padding-top: max(.7rem, env(safe-area-inset-top));
  background: var(--ink); color: #fff;
}
.waiter-logo { flex: none; border-radius: 50%; background: #fff; padding: 2px; box-shadow: 0 0 0 1px #3a3740; }
.waiter-title { flex: 1; min-width: 0; line-height: 1.25; }
.waiter-title strong { display: block; font-family: var(--serif); font-size: 1.1rem; }
.waiter-title small { display: block; color: #a9a2ab; font-size: .78rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.waiter-back, .waiter-signout {
  background: none; border: 1.5px solid #3a3740; color: #fff; border-radius: 8px;
  min-height: 40px; min-width: 44px; padding: 0 .7rem; font-size: .85rem;
  font-family: var(--sans); cursor: pointer;
}
.waiter-back { font-size: 1.15rem; }
.waiter-back:hover, .waiter-signout:hover { border-color: var(--red); }

.waiter-pad { padding: 1rem; max-width: 720px; margin-inline: auto; }
.waiter-pad h1 { font-size: 1.9rem; }
.waiter-hint { color: var(--ink-2); font-size: .9rem; margin: 0 0 .9rem; }
.waiter-fine { font-size: .82rem; margin-top: 1.2rem; }

/* the room */
.waiter-tables { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .8rem; }
.waiter-table {
  display: grid; gap: .15rem; text-align: left;
  background: var(--white); border: 1.5px solid var(--line); border-radius: var(--radius);
  padding: 1rem; min-height: 92px; cursor: pointer; font-family: var(--sans);
  box-shadow: var(--shadow);
}
.waiter-table:hover { border-color: var(--red); }
.waiter-table.is-busy { border-color: var(--red); background: var(--red-pale); }
.waiter-table-id { font-family: var(--serif); font-size: 1.7rem; line-height: 1; color: var(--ink); }
.waiter-table-seats { font-size: .8rem; color: var(--ink-2); }
.waiter-table-open { font-size: .78rem; font-weight: 700; color: var(--red-text); }

/* the menu */
.waiter-search {
  position: sticky; top: 56px; z-index: 50;
  background: var(--paper); border-bottom: 1px solid var(--line);
  padding: .7rem 1rem; display: grid; gap: .6rem;
}
.waiter-search input[type="search"] {
  width: 100%; min-height: 46px; font-size: 16px;   /* 16px stops iOS zooming in */
  border: 1.5px solid var(--line); border-radius: 10px; padding: 0 .9rem;
  font-family: var(--sans);
}
.waiter-chips { display: flex; gap: .4rem; overflow-x: auto; scrollbar-width: none; }
.waiter-chips::-webkit-scrollbar { display: none; }
.waiter-chips .chip { white-space: nowrap; min-height: 38px; }

.waiter-group { margin-bottom: 1.6rem; }
.waiter-group h3 {
  position: sticky; top: 128px; background: var(--paper); z-index: 20;
  margin: 0 0 .4rem; padding: .35rem 0; font-size: .8rem; letter-spacing: .12em;
  text-transform: uppercase; font-family: var(--sans); font-weight: 700; color: var(--red-text);
  border-bottom: 1px solid var(--line);
}
.waiter-dish { display: flex; align-items: stretch; gap: .5rem; border-bottom: 1px solid var(--line); }
.waiter-dish-main {
  flex: 1; display: flex; align-items: center; justify-content: space-between; gap: .8rem;
  background: none; border: 0; padding: .85rem .2rem; min-height: 52px;
  font-family: var(--sans); font-size: .96rem; text-align: left; cursor: pointer; color: var(--ink);
}
.waiter-dish-main:active { background: var(--red-pale); }
.waiter-dish-name b { color: var(--red-text); }
.waiter-dish-price { font-weight: 700; color: var(--red-text); white-space: nowrap; }
.waiter-dish-option {
  align-self: center; max-width: 42%; min-height: 40px; font-size: .84rem;
  border: 1.5px solid var(--line); border-radius: 8px; font-family: var(--sans);
}

.waiter-open { background: var(--red-pale); border: 1px solid var(--red-line);
  border-radius: var(--radius); padding: .9rem 1rem; margin-bottom: 1.2rem; }
.waiter-open h3 { margin: 0 0 .5rem; font-size: .95rem; }
.waiter-open-row { display: flex; justify-content: space-between; gap: .6rem; align-items: baseline;
  font-size: .88rem; padding: .25rem 0; }
.waiter-open-row small { display: block; }
.waiter-open-status { text-transform: capitalize; color: var(--ink-2); font-size: .82rem; }

/* the running order */
.waiter-tray {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  background: var(--ink); color: #fff; border-top: 3px solid var(--red);
  padding-bottom: env(safe-area-inset-bottom);
  max-height: 82vh; display: flex; flex-direction: column;
}
.waiter-tray-head {
  display: flex; align-items: center; gap: .8rem; width: 100%;
  background: none; border: 0; color: #fff; padding: .9rem 1rem; min-height: 62px;
  font-family: var(--sans); font-size: .98rem; cursor: pointer; text-align: left;
}
.waiter-tray-count {
  flex: none; display: grid; place-items: center; min-width: 32px; height: 32px;
  border-radius: 16px; background: var(--red-fill); font-weight: 700; font-size: .9rem;
}
.waiter-tray-head span:nth-child(2) { flex: 1; }
.waiter-tray-total { font-weight: 700; font-size: 1.05rem; }
.waiter-tray-body { overflow-y: auto; padding: 0 1rem 1rem; }
.waiter-tray-body .field span { color: #d9d3dc; }
.waiter-tray-body .field input { min-height: 46px; font-size: 16px; }

.waiter-line { display: flex; gap: .8rem; align-items: center; padding: .7rem 0; border-top: 1px solid #3a3740; }
.waiter-line-info { flex: 1; min-width: 0; }
.waiter-line-info strong { display: block; font-size: .95rem; }
.waiter-line-info small { color: #a9a2ab; font-size: .8rem; }
.waiter-line-note {
  margin-top: .35rem; width: 100%; background: #1e1d22; border: 1px solid #3a3740;
  color: #fff; border-radius: 6px; min-height: 36px; padding: 0 .5rem; font-size: .82rem;
  font-family: var(--sans);
}
.waiter-qty { display: flex; align-items: center; gap: .1rem; flex: none; }
.waiter-qty button {
  width: 44px; height: 44px; border-radius: 8px; border: 1.5px solid #3a3740;
  background: none; color: #fff; font-size: 1.3rem; cursor: pointer; line-height: 1;
}
.waiter-qty button:hover { border-color: var(--red); }
.waiter-qty span { min-width: 34px; text-align: center; font-weight: 700; }

.waiter-tray-totals { margin: .9rem 0; }
.waiter-total-row { display: flex; justify-content: space-between; gap: .8rem; padding: .25rem 0; font-size: .92rem; color: #d9d3dc; }
.waiter-total-row.is-off { color: var(--red-dark); }
.waiter-total-row.is-grand { border-top: 1px solid #3a3740; margin-top: .4rem; padding-top: .6rem;
  color: #fff; font-weight: 700; font-size: 1.05rem; }
.waiter-tray-body .btn-ghost { color: #fff; border-color: #4a4650; margin-top: .5rem; }

/* the code a customer types off the card on their table */
.table-code-input {
  font-size: 1.6rem; letter-spacing: .28em; text-transform: uppercase;
  text-align: center; font-weight: 700; font-variant-numeric: tabular-nums;
}
.linkish { background: none; border: 0; padding: 0; color: var(--red-text);
  font: inherit; text-decoration: underline; cursor: pointer; }

/* admin — tables & codes */
.waiter-link-row { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.copy-field {
  flex: 1 1 16rem; min-height: 40px; border: 1.5px solid var(--line); border-radius: 8px;
  padding: 0 .7rem; font-family: ui-monospace, Menlo, monospace; font-size: .82rem;
  background: var(--white); color: var(--ink-2);
}
.table-code-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 1.2rem; }
.table-code-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .9rem; }
.table-code {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1rem; display: grid; gap: .5rem;
}
.table-code.is-off { opacity: .5; }
.table-code-head { display: flex; justify-content: space-between; align-items: baseline; }
.table-code-head strong { font-family: var(--serif); font-size: 1.3rem; }
.table-code-value {
  margin: 0; font-size: 1.5rem; font-weight: 700; letter-spacing: .18em;
  color: var(--red-text); font-variant-numeric: tabular-nums;
}
.table-code-buttons { display: flex; gap: .4rem; }
.table-code-buttons .btn { flex: 1; }


/* the branded sign-in on the staff screens — kitchen, waitress, manager */
.gate-brand { text-align: center; margin-bottom: 1.4rem; }
.gate-brand img { border-radius: 50%; margin: 0 auto .7rem; }
.gate-brand h1 { margin: 0; font-size: 1.9rem; }
.gate-brand .ornament { margin: .8rem auto 0; height: 30px; }
.gate-kicker {
  margin: 0 0 .1rem; font-size: .76rem; letter-spacing: .22em;
  text-transform: uppercase; color: var(--red-text); font-weight: 700;
}
.waiter-screen[data-screen="login"] .waiter-pad { padding-top: 2rem; }
.waiter-screen[data-screen="login"] .muted { text-align: center; }

/* which services an offer covers — most are takeaway and delivery now, and a
   customer sitting in the room should not have to find that out at the till */
.ticket-services {
  margin: -.3rem 0 0; font-size: .8rem; font-weight: 700;
  letter-spacing: .04em; color: var(--red-text);
}

/* the note at the top of the menu when someone has scanned a table plaque */
.dinein-banner {
  display: flex; flex-wrap: wrap; gap: .9rem 1.2rem; align-items: center;
  justify-content: space-between;
  background: var(--ink); color: #fff; border-radius: var(--radius);
  padding: 1rem 1.2rem; margin: 1.4rem 0 0;
}
.dinein-banner strong { display: block; font-family: var(--serif); font-size: 1.08rem; }
.dinein-banner span { display: block; color: #d9d3dc; font-size: .9rem; max-width: 52ch; }
.dinein-banner .dinein-actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.dinein-banner .btn-ghost { color: #fff; border-color: #4a4650; }
.dinein-banner .btn-ghost:hover { border-color: var(--red); }


/* ==========================================================================
   Fresh Shawarma — home page pieces
   ========================================================================== */

.nav { border-bottom-color: var(--orange) !important; }

.hero-note { margin: 1.1rem 0 0; font-size: .95rem; color: var(--ink-2); }
.hero-note b { color: var(--ink); }
.hero-shot img { box-shadow: 0 30px 60px -30px rgba(13,15,14,.55); }

/* section tiles, photo + label */
.tile-grid {
  display: grid; gap: .9rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr));
}
.tile {
  position: relative; display: block; overflow: hidden; border-radius: var(--radius);
  aspect-ratio: 4 / 3; background: var(--ink); text-decoration: none; color: #fff;
  box-shadow: var(--shadow);
}
.tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; opacity: .92; }
.tile:hover img { transform: scale(1.05); }
.tile span {
  position: absolute; inset: auto 0 0 0; padding: 2.2rem .9rem .75rem;
  background: linear-gradient(transparent, rgba(0,0,0,.82));
  display: flex; flex-direction: column; gap: .1rem;
}
.tile b { font-family: var(--serif); font-weight: 700; font-size: 1.08rem; line-height: 1.2; }
.tile small { font-size: .8rem; color: var(--red-dark); font-weight: 600; }

/* delivery apps */
.apps-row { display: flex; flex-wrap: wrap; gap: .45rem; margin: .3rem 0 0; }
.apps-row span {
  display: inline-flex; align-items: center; padding: .3rem .7rem; border-radius: 999px;
  border: 1px solid #3a3f3c; color: #fff; font-size: .82rem; font-weight: 600;
}
.apps-band { background: var(--ink); color: #fff; }
.apps-band h2 { color: #fff; }
.apps-band .muted { color: #b9c0bb; }
.apps-band .eyebrow { color: var(--red-dark); }
.apps-band-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem 3rem; }
.apps-row--big span { font-size: 1.05rem; padding: .7rem 1.3rem; border-color: var(--red); }

/* the green bar the menu prints its contact strip on */
.footer { border-top: 4px solid var(--red); }
.footer h4 { color: var(--red-dark); }
.brand span { font-weight: 800; letter-spacing: -.01em; }
.card .hours-list div.today, [data-hours-list] div.today { color: var(--red-text); }