/* Nile Grill - shared stylesheet for all twelve pages.
   Extracted verbatim from the one-page build on 2026-09-13, then extended.
   Loaded once and cached across pages; this is why the multi-page build does NOT
   inline its CSS. Self-hosted fonts only - zero third-party requests. */

/* --- Brand fonts, self-hosted. No third-party request is made by this page. --- */
@font-face{font-family:'Convergence';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/convergence-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Convergence';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/convergence-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:100 1000;font-display:swap;
  src:url('../fonts/dmsans-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:100 1000;font-display:swap;
  src:url('../fonts/dmsans-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Cookie';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/cookie-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

/* --- Palette. Recovered from the client's own Elementor kit; every pairing below
       was contrast-checked. Terracotta #DE6C37 is theirs and is kept. --- */
/* `hidden` must actually hide. A class that sets display out-specifies the UA sheet's
   [hidden]{display:none}, and .order-groups did exactly that: the order page shipped with
   its 81-row list hidden="" and 6,878px tall, with all 176 source gates passing. Nothing
   that reads source can see a computed style - browser-check.mjs can, and does. */
[hidden]{display:none!important}
:root{
  --header-h:56px;
  --catbar-h:48px;
  --ink:#241C17;        /* 14.98:1 on cream  */
  --muted:#5A4B41;      /*  7.46:1 on cream  */
  --cream:#F5F2EB;
  --char:#1B1512;       /* dark section ground, 18.06:1 with white */
  --terra:#DE6C37;      /*  5.03:1 on charcoal — accents, never body text on cream */
  --cta:#B34E1F;        /*  5.22:1 with white — buttons */
  --open:#2E7D32;       /*  5.13:1 with white */
  --line:#DED6C9;
  --maxw:1080px;
}
/* header height steps at 1024, where the full nav appears; the sticky menu bar sits under it */
@media (min-width:1024px){
  :root{
    --header-h:64px;
  }
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--cream);color:var(--ink);
  font-family:'DM Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  font-size:17px;line-height:1.55;-webkit-text-size-adjust:100%}
h1,h2,h3{font-family:'Convergence','DM Sans',system-ui,sans-serif;font-weight:400;line-height:1.15;margin:0;text-wrap:balance}
p,li,.lede,.sub,.card p,.deal-card p,.mcard-desc,.gallery span{text-wrap:pretty}
a{color:var(--cta)}
img{max-width:100%;height:auto}
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:20px}
.skip{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip:focus{position:fixed;inset-inline-start:8px;top:8px;width:auto;height:auto;overflow:visible;clip-path:none;z-index:99;background:#fff;color:var(--ink);padding:10px 14px;border-radius:6px}

/* §1 — header: single row at every width, never wraps */
header{background:var(--char);color:#fff;position:sticky;top:0;z-index:100;border-bottom:2px solid var(--terra);box-sizing:border-box;height:var(--header-h)}
header .wrap{max-width:1440px;padding-inline:12px}
@media (min-width:1024px){
  header .wrap{padding-inline:16px}
}
@media (min-width:1280px){
  header .wrap{padding-inline:20px}
}
.bar{display:flex;align-items:center;justify-content:space-between;flex-wrap:nowrap;box-sizing:border-box;height:100%;gap:6px}
@media (min-width:768px){.bar{gap:8px}}
@media (min-width:1280px){.bar{gap:12px}}
.bar > *{height:44px;min-height:44px;max-height:44px;margin:0;box-sizing:border-box;flex-shrink:0}
.brand{display:inline-flex;align-items:center;gap:8px;text-decoration:none;color:#fff;margin-inline-end:auto;height:44px}
.brand img{width:auto;height:44px;max-width:52px;object-fit:contain;display:block}
.brand .bname{display:none}
@media (min-width:768px){
  .brand .bname{display:flex;flex-direction:column;justify-content:center}
  .brand b{font-family:'Convergence',sans-serif;font-weight:400;font-size:15px;line-height:1.1;color:#fff;display:block;letter-spacing:.2px}
  .brand .btag{display:block;font-size:10px;color:#C9BFB4;line-height:1.1;letter-spacing:.06em;text-transform:uppercase}
}
/* 768-1365: 1024-1365 carries the nav, chip, language, phone and Order button in one 64px row, and with the
   longest chip ("Opens 12pm · order ahead") plus a basket count it overflowed by up to 112px. The
   logo alone names the shop there; the written name returns at 1366, where every label fits. */
@media (min-width:768px) and (max-width:1365px){
  .brand .bname{display:none}
}
/* 360px with "Opens 12pm · order ahead" overflowed by 5px: tighten the row, keep every target 44px. */
@media (max-width:380px){
  .bar{gap:4px}
  .bar .pill{padding:0 6px}
}
@media (min-width:1280px){
  .brand{gap:10px}
  .brand b{font-size:17px}
  .brand .btag{font-size:11px}
}
.bar .headnav{display:none}
@media (min-width:1024px){
  .bar .headnav{display:inline-flex;align-items:center;gap:2px;height:44px}
  .headnav a{display:inline-flex;align-items:center;height:44px;padding:0 6px;color:#C9BFB4;text-decoration:none;font-size:13px;font-weight:600;white-space:nowrap;border-radius:6px;transition:color .15s}
}
@media (min-width:1280px){
  .headnav{gap:3px}
  .headnav a{padding:0 9px;font-size:14px}
}
.headnav a[aria-current="page"]{color:#fff;background:rgba(255,255,255,.12)}
.headnav-dropdown{position:relative;display:inline-flex;align-items:center;height:44px}
.headnav-drop-btn{display:inline-flex;align-items:center;justify-content:center;width:24px;height:44px;min-height:44px;padding:0;background:transparent;border:none;color:#C9BFB4;cursor:pointer;border-radius:4px;font-size:11px;transition:color .15s,background-color .15s;margin-inline-start:-4px}
.headnav-drop-btn:hover,.headnav-drop-btn:focus{color:#fff;background:rgba(255,255,255,.08)}
.headnav-dropdown.is-open .headnav-drop-btn{color:#fff}
.dropdown-menu{display:none;position:absolute;top:100%;inset-inline-start:0;min-width:210px;background:var(--char);border:1px solid rgba(255,255,255,.18);border-radius:8px;box-shadow:0 12px 30px rgba(0,0,0,.55);padding:6px 0;margin:0;list-style:none;z-index:120}
.headnav-dropdown.is-open .dropdown-menu,
.headnav-dropdown:hover:not(.is-dismissed) .dropdown-menu,
.headnav-dropdown:focus-within:not(.is-dismissed) .dropdown-menu{display:block}
.dropdown-menu li{margin:0;padding:0}
.headnav .dropdown-menu a{display:block;width:100%;height:auto;min-height:38px;padding:8px 16px;box-sizing:border-box;color:#C9BFB4;text-decoration:none;font-size:14px;font-weight:600;white-space:nowrap;border-radius:0;text-align:start;transition:background-color .12s,color .12s}
.headnav .dropdown-menu a:hover,.headnav .dropdown-menu a:focus{color:#fff;background:rgba(255,255,255,.1);outline:none}
.headnav .dropdown-menu a[aria-current="page"]{color:#fff;background:rgba(255,255,255,.15);font-weight:700}
.bar .headcall.btn-secondary,.headcall.btn-secondary{color:#fff;border:1.5px solid #6B5A4E;background:transparent}
.bar .headcall.btn-secondary:hover,.headcall.btn-secondary:hover{border-color:var(--terra);color:var(--terra);background:transparent}
.bar .headcall.btn-secondary:active,.headcall.btn-secondary:active{border-color:#E8A87C;color:#E8A87C;background:rgba(255,255,255,.06)}
.pill{display:inline-flex;align-items:center;justify-content:center;height:44px;padding:0 8px;font-size:12px;font-weight:700;border-radius:999px;white-space:nowrap;line-height:1;box-sizing:border-box}
@media (min-width:1280px){.pill{padding:0 12px;font-size:13px}}
.pill#status{min-width:192px;text-align:center;visibility:hidden}
@media (min-width:1280px){.pill#status{min-width:214px}}
@media (max-width:380px){.bar .pill#status{min-width:188px}}
.pill#status.is-open,.pill#status.is-ahead,.pill#status.is-shut{visibility:visible}
.pill.is-open{background:var(--open);color:#fff}
.pill.is-ahead{background:#B34E1F;color:#fff}
.pill.is-shut{background:#3A2C24;color:#E8A87C;border:1px solid #6B4B3A}
.langlink{display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:44px;padding:0 6px;color:#C9BFB4;text-decoration:none;font-size:13.5px;font-weight:700;white-space:nowrap;border-radius:6px;transition:color .15s}
@media (min-width:1280px){.langlink{padding:0 8px;font-size:14px}}
.langlink:hover,.langlink:focus{color:#fff}
.bar .headphone{display:none}
@media (min-width:1024px){
  .bar .headphone{display:inline-flex;align-items:center;justify-content:center;height:44px;padding:0 6px;color:#C9BFB4;text-decoration:none;font-size:13px;font-weight:600;gap:4px;border-radius:6px;transition:color .15s}
}
/* The number's text only from 1440px: below that it pushed "Order pickup" off screen once the
   chip read "Open · till 12am" (24px at 1280). The icon still dials it at every width. */
@media (min-width:1024px) and (max-width:1439px){
  .headphone-text{display:none}
}
@media (min-width:1440px){
  .headphone{padding:0 10px;font-size:14px;gap:6px}
  .headphone-text{display:inline}
}
.headphone:hover,.headphone:focus{color:#fff}
.headphone-icon{display:inline-flex;align-items:center}
.bar .headbtn{display:none}
@media (min-width:768px){
  .bar .headbtn{display:inline-flex;align-items:center;justify-content:center;height:44px;min-height:44px;max-height:44px;padding:0 12px;border-radius:8px;white-space:nowrap;font-size:14px;font-weight:700;position:relative;gap:6px;border:1.5px solid transparent;box-sizing:border-box}
}
@media (min-width:1280px){
  .bar .headbtn{padding:0 16px;font-size:15px;gap:8px}
}
.basket-badge{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:#fff;color:var(--cta);font-size:12px;font-weight:800;line-height:1}
.nav-toggle{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;min-width:44px;min-height:44px;background:transparent;border:1px solid rgba(255,255,255,.2);border-radius:8px;color:#fff;font-size:22px;cursor:pointer;padding:0}
@media (min-width:1024px){.bar .nav-toggle{display:none}}
.nav-toggle:hover,.nav-toggle:focus{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.4)}
#nav-sheet-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:998;backdrop-filter:blur(2px)}
#nav-sheet{position:fixed;top:0;inset-inline-end:0;width:280px;max-width:80vw;height:100vh;background:var(--char);color:#fff;z-index:999;box-shadow:-4px 0 20px rgba(0,0,0,.5);display:flex;flex-direction:column;padding:20px;box-sizing:border-box;overflow-y:auto}
#nav-sheet[hidden],#nav-sheet-backdrop[hidden]{display:none!important}
.nav-sheet-header{display:flex;align-items:center;justify-content:space-between;padding-bottom:16px;border-bottom:1px solid rgba(255,255,255,.1);margin-bottom:12px}
.nav-sheet-title{font-weight:700;font-size:18px;color:#fff}
.nav-sheet-close{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;min-width:44px;min-height:44px;background:transparent;border:none;color:#C9BFB4;font-size:22px;cursor:pointer;border-radius:6px}
.nav-sheet-close:hover,.nav-sheet-close:focus{color:#fff;background:rgba(255,255,255,.1)}
.nav-sheet-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.nav-sheet-list li{margin:0;padding:0}
.nav-sheet-list a{display:flex;align-items:center;min-height:44px;padding:8px 12px;color:#C9BFB4;text-decoration:none;font-size:16px;font-weight:600;border-radius:6px;transition:background .15s,color .15s}
.nav-sheet-list a:hover,.nav-sheet-list a:focus{color:#fff;background:rgba(255,255,255,.1)}
.nav-sheet-list a[aria-current="page"]{color:#fff;background:rgba(255,255,255,.15);font-weight:700}
.nav-sheet-sub{list-style:none;margin:4px 0 8px;padding:0;padding-inline-start:16px;border-inline-start:2px solid rgba(255,255,255,.15);display:flex;flex-direction:column;gap:2px}
.nav-sheet-sub li{margin:0;padding:0}
.nav-sheet-sub a{display:flex;align-items:center;min-height:38px;padding:6px 12px;font-size:14.5px;font-weight:500;color:#C9BFB4;border-radius:6px;text-decoration:none;transition:background-color .15s,color .15s}
.nav-sheet-sub a:hover,.nav-sheet-sub a:focus{color:#fff;background:rgba(255,255,255,.08)}
.nav-sheet-sub a[aria-current="page"]{color:#fff;background:rgba(255,255,255,.12);font-weight:700}

/* §2 — hero, photo behind a gradient that keeps the type side dark */
.hero{color:#fff;padding-block:clamp(36px,7vw,68px);
  background:linear-gradient(180deg,rgba(27,21,18,.94) 0%,rgba(27,21,18,.88) 100%),
             url('../img/hero-900.webp') center/cover no-repeat;
  background-color:var(--char)}
@media (min-width:900px){
  .hero{background:linear-gradient(90deg,rgba(27,21,18,.97) 0%,rgba(27,21,18,.93) 42%,rgba(27,21,18,.62) 100%),
              url('../img/hero-1600.webp') center/cover no-repeat;
        background-color:var(--char)}
}
.hero h1{font-size:clamp(30px,6.2vw,52px);max-width:16ch}
.hero .kicker{color:var(--terra);text-transform:uppercase;letter-spacing:.14em;font-size:13px;font-weight:700;margin-bottom:14px}
.hero p.lede{color:#D9D0C6;font-size:clamp(17px,2.4vw,20px);max-width:52ch;margin:16px 0 0}
/* Phone hero <= ~420px (REDESIGN-PLAN §5.1): the kicker repeats the trust strip just below it,
   so it goes; the lede and the gaps tighten. H1, one status line, two buttons remain. */
@media (max-width:599px){
  .hero{padding-block:24px 22px}
  .hero .kicker{display:none}
  .hero p.lede{font-size:16px;margin-top:10px}
  .hero .ctarow{margin-top:16px;gap:10px}
  .hero .today{margin-top:16px;padding-top:12px;font-size:14px}
}
.ctarow{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.btn{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;font-weight:700;padding:12px 20px;border-radius:10px;font-size:16px;box-sizing:border-box;min-height:48px;cursor:pointer;border:none;font-family:inherit;line-height:1.2;transition:background-color .15s,border-color .15s,color .15s}
@media (min-width:1024px){.btn{min-height:44px;padding:10px 18px}}
.btn-1,.btn-primary{background:var(--cta);color:#fff}
.btn-1:hover,.btn-primary:hover{background:#9C4319;color:#fff}
.btn-1:active,.btn-primary:active{background:#843714;color:#fff}
.btn-2,.btn-secondary{background:transparent;color:var(--cta);border:2px solid var(--cta)}
.btn-2:hover,.btn-secondary:hover{background:rgba(179,78,31,.08);color:#9C4319;border-color:#9C4319}
.btn-2:active,.btn-secondary:active{background:rgba(179,78,31,.16);color:#843714;border-color:#843714}
.hero .btn-2,.hero .btn-secondary{color:#fff;border:1.5px solid #6B5A4E;background:transparent}
.hero .btn-2:hover,.hero .btn-secondary:hover{border-color:var(--terra);color:var(--terra);background:transparent}
.hero .btn-2:active,.hero .btn-secondary:active{border-color:#E8A87C;color:#E8A87C;background:rgba(255,255,255,.06)}
.btn-tertiary{background:transparent;border:none;color:inherit;text-decoration:underline;min-height:44px;min-width:44px;padding:8px 12px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.btn-tertiary:hover{color:var(--cta)}
.btn-tertiary:active{color:#843714}
.btn:focus-visible,.btn-primary:focus-visible,.btn-1:focus-visible,.btn-secondary:focus-visible,.btn-2:focus-visible,.btn-tertiary:focus-visible{outline:3px solid var(--char);outline-offset:2px}
.hero .btn:focus-visible,.hero .btn-primary:focus-visible,.hero .btn-1:focus-visible,.hero .btn-secondary:focus-visible,.hero .btn-2:focus-visible{outline:3px solid #FFC93C;outline-offset:2px}
.today{margin-top:24px;font-size:15px;color:#C9BFB4;border-top:1px solid #3A2C24;padding-top:18px}
.today b{color:#fff}
.herogrid{display:grid;grid-template-columns:1fr;gap:32px;align-items:start}
@media (min-width:900px){.herogrid{grid-template-columns:1.25fr .75fr;gap:52px}}
.hcard{background:var(--cream);color:var(--ink);border-radius:14px;padding:22px 24px}
.hcard h2{font-size:19px;margin-bottom:4px}
.hcard .hnote{font-size:14px;color:var(--muted);margin:0 0 14px}
.hcard .btn{display:block;text-align:center;margin-top:18px}
/* The opening-hours card is a laptop affordance: on a phone the hero is H1, one status line and
   two buttons (REDESIGN-PLAN §5.1), and the hours live in the footer. */
@media (max-width:899px){.today-card{display:none}}
.today-hours{list-style:none;margin:8px 0 12px;padding:0;font-size:15px}
.today-hours li{padding:5px 0;border-bottom:1px solid var(--line)}
.today-addr{font-size:14.5px;color:var(--muted);margin:0 0 4px}
.today-links{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:12px 0 0}
.today-links .btn{display:inline-flex;margin:0}
.hero .today-card .btn-secondary{color:var(--cta);border:2px solid var(--cta);background:transparent}
.hero .today-card .btn-secondary:hover{background:rgba(179,78,31,.08);color:#9C4319;border-color:#9C4319}
.hero .today-card .btn-secondary:active{background:rgba(179,78,31,.16);color:#843714;border-color:#843714}
.today-links a:not(.btn){color:var(--cta);font-weight:700;min-height:44px;display:inline-flex;align-items:center}

/* §3 — trust strip. Replaced the marquee (2026-10-01): its text was rgba(255,255,255,.10) on
   charcoal (~1.3:1) and it jumped at every loop. Static, AA, and it carries the review proof. */
.trust{background:var(--char);color:#fff;padding-block:14px}
.trust-row{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 22px;font-weight:700;font-size:15px}
.trust-row>span{white-space:nowrap}
.trust-row>span+span::before{content:"·";margin-inline-end:22px;color:#E8A87C}
/* On a phone the three facts wrap, and a separator would start the second line - so no dots. */
@media (max-width:599px){.trust-row{gap:4px 16px;font-size:14px}.trust-row>span+span::before{content:none}}

/* §4 — who we are */
.about-grid{display:grid;grid-template-columns:1fr;gap:36px;align-items:center}
@media (min-width:900px){.about-grid{grid-template-columns:1fr 1fr;gap:48px}}
.about-grid img{border-radius:14px;display:block;width:100%;height:auto}
.about-copy h2{font-size:clamp(24px,4.2vw,34px);margin-bottom:14px}
.about-copy p{margin:0 0 14px;color:var(--muted);max-width:50ch}
.feats{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:22px}
.feat{background:#fff;border:1px solid var(--line);border-radius:10px;padding:16px 18px}
.feat strong{display:block;font-size:15px;color:var(--ink);margin-bottom:2px}
.feat span{font-size:14px;color:var(--muted);line-height:1.4}

/* §5 — six uniform category cards (replaced the alternating terracotta/charcoal tiles, which
   striped on a 2-column phone grid). Photo top, name, "from $X" computed by build.py. */
.section--tint{background:var(--cream)}
.catcards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (min-width:600px){.catcards{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}}
@media (min-width:1100px){.catcards{grid-template-columns:repeat(6,minmax(0,1fr))}}
.catcard{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;text-decoration:none;color:var(--ink);height:100%}
.catcard img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;background:var(--line)}
.catcard-name{font-weight:700;font-size:16px;padding:10px 12px 0}
.catcard-from{font-size:14px;color:var(--muted);padding:2px 12px 12px}
.catcard:hover .catcard-name{color:var(--cta)}

/* generic section */
section{padding-block:clamp(38px,6vw,64px)}
.eyebrow{text-transform:uppercase;letter-spacing:.14em;font-size:12.5px;font-weight:700;color:var(--cta);margin-bottom:10px}
h2{font-size:clamp(25px,4.4vw,36px);margin-bottom:8px}
.sub{color:var(--muted);max-width:60ch;margin:0 0 26px}

/* §6 — order cards */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:12px;padding:22px}
.card h3{font-size:20px;margin-bottom:6px}
.card p{margin:0 0 16px;color:var(--muted);font-size:15.5px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-block;background:var(--cream);border:1px solid var(--line);border-radius:999px;
  padding:6px 13px;font-size:14px;font-weight:600;color:var(--muted);text-decoration:none}
a.chip:hover{border-color:var(--cta);color:var(--cta)}

/* §7 — what Mirrabooka orders: the menu's own cards (render_item_li), outside a menu group */
.mgroup.mgroup--home{margin:0;padding:0;border:0}
.mgroup--home .mcards{margin:0}
@media (min-width:960px){.mgroup.mgroup--home .mcards{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* §8 — family feast band */
.feast{color:#fff;padding-block:clamp(48px,8vw,80px);
  background:linear-gradient(90deg,rgba(27,21,18,.92) 0%,rgba(27,21,18,.80) 50%,rgba(27,21,18,.50) 100%),
             url('../img/band-feast.webp') center/cover no-repeat;
  background-color:var(--char)}
.feast h2{font-size:clamp(28px,5vw,42px);max-width:20ch;margin-bottom:12px}
.feast p{color:#D9D0C6;max-width:50ch;margin:0 0 24px;font-size:clamp(16px,2vw,18px)}
.feast .feast-more{color:#E8A87C;font-weight:700;margin-inline-start:16px;display:inline-flex;align-items:center;min-height:44px}
.feast .btn-secondary{color:#fff;border:1.5px solid #6B5A4E;background:transparent}
.feast .btn-secondary:hover{border-color:var(--terra);color:var(--terra);background:transparent}
.feast .btn-secondary:active{border-color:#E8A87C;color:#E8A87C;background:rgba(255,255,255,.06)}
.feast .btn:focus-visible,.feast .btn-secondary:focus-visible{outline:3px solid #FFC93C;outline-offset:2px}
.card--primary{border:2px solid var(--cta)}
.card .btn{min-width:200px;margin-block-start:auto}
.howto-apps{margin:18px 0 0;color:var(--muted);font-size:15px}
.about-short p{max-width:62ch;color:var(--muted)}

/* §9 — menu */
.menu{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.mgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:30px 44px;margin-top:12px}
.mgroup h2{font-size:18px;text-transform:uppercase;letter-spacing:.07em;padding-bottom:8px;
  border-bottom:2px solid var(--terra);margin-bottom:12px}
.mgroup ul{list-style:none;margin:0;padding:0}
.mgroup li{display:flex;align-items:baseline;gap:8px;padding:5px 0;font-size:16px}
.mgroup li .n{flex:0 1 auto}
.mgroup li .d{flex:1 1 auto;border-bottom:1px dotted #C9BFB4;transform:translateY(-4px);min-width:14px}
.mgroup li .p{flex:0 0 auto;font-weight:700;font-variant-numeric:tabular-nums}
.mgroup li small{display:block;color:var(--muted);font-size:13.5px;line-height:1.35}
.note{margin-top:26px;font-size:14.5px;color:var(--muted);background:var(--cream);
  border-inline-start:3px solid var(--terra);padding:14px 16px;border-radius:0 8px 8px 0}

/* §10 — starters grid */
.starters{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:16px;margin-top:6px}

/* §11 — reviews band */
.reviews{background:var(--char);color:#fff;padding-block:clamp(36px,6vw,56px);text-align:center}
.reviews h2{margin-bottom:10px}
.reviews p{color:#C9BFB4;max-width:44ch;margin:0 auto;font-size:16px}
.reviews a{color:#E8A87C}

/* §12 — find us */
.split{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:30px}
table.hrs{border-collapse:collapse;width:100%;max-width:380px;font-size:16px}
table.hrs th,table.hrs td{text-align:left;padding:9px 0;border-bottom:1px solid var(--line)}
table.hrs th{font-weight:600;width:40%}
table.hrs td{font-variant-numeric:tabular-nums}
table.hrs tr.now th,table.hrs tr.now td{background:#FBF3E8;font-weight:700}
table.hrs .shut{color:var(--muted)}
.addr{font-size:17px;line-height:1.7}
.addr strong{display:block;font-size:19px}
.stars{font-size:15px;color:var(--muted);margin-top:18px}

/* §13 — footer */
footer{background:var(--char);color:#C9BFB4;padding-block:clamp(36px,5vw,52px);font-size:14.5px}
footer a{color:#E8A87C}
footer b{color:#fff}
.fcols{display:flex;flex-direction:column;gap:24px}
.fcol-contact{display:contents}
.fvisit-block{order:1}
.fcol-hours{order:2}
.fcall-block{order:3}
.fcol-explore{order:4}
.fcol-brand{order:5}
@media (min-width:1024px){
  .fcols{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;align-items:start}
  .fcol-contact{display:block}
  .fvisit-block,.fcol-hours,.fcall-block,.fcol-explore,.fcol-brand{order:initial}
}
.fcol h2,.fvisit-block h2,.fcall-block h2{font-family:'Convergence',sans-serif;font-weight:400;font-size:16px;color:#fff;margin:0 0 12px;text-transform:uppercase;letter-spacing:.08em}
.fcol ul{list-style:none;margin:0;padding:0}
.fcol li{margin-bottom:6px}
.fcol li a{text-decoration:none}
.fcol li a:hover{color:#fff}
.fnav-list a{display:flex;align-items:center;min-height:44px;padding:6px 0;border-bottom:1px solid rgba(255,255,255,.08);color:#C9BFB4;text-decoration:none;font-size:15px;font-weight:600}
@media (min-width:1024px){
  .fnav-list a{border-bottom:none;min-height:auto;padding:4px 0}
}
.fnav-list a:hover,.fnav-list a:focus{color:#fff}
.fhours-list{list-style:none;margin:0;padding:0}
.fhours-list li{margin-bottom:8px;line-height:1.4}
.faddr{margin:0 0 8px;line-height:1.4}
.foot-dir-btn,footer .btn-secondary{min-height:48px;border:2px solid #E8A87C;color:#E8A87C;background:transparent;display:inline-flex;align-items:center;justify-content:center;padding:10px 20px;border-radius:8px;text-decoration:none;font-weight:700;margin-top:8px}
@media (min-width:1024px){.foot-dir-btn,footer .btn-secondary{min-height:44px}}
.foot-dir-btn:hover,footer .btn-secondary:hover{background:#E8A87C;color:var(--char)}
.foot-dir-btn:active,footer .btn-secondary:active{background:#D99668;color:var(--char)}
footer .btn:focus-visible,footer .btn-secondary:focus-visible,.foot-dir-btn:focus-visible{outline:3px solid #FFC93C;outline-offset:2px}
.fcall-link{display:inline-flex;align-items:center;min-height:44px;font-size:18px;font-weight:700;color:#fff;text-decoration:none}
.fsocials{display:flex;flex-wrap:wrap;gap:8px 10px;margin-top:10px}
.fsocials a{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;width:44px;height:44px;padding:0;background:rgba(255,255,255,.08);border-radius:6px;color:#C9BFB4;text-decoration:none;box-sizing:border-box;transition:background-color .15s,color .15s}
.fsocials a:hover,.fsocials a:focus{background:rgba(255,255,255,.18);color:#fff}
.fsocials svg{width:22px;height:22px;display:block}
.ffoot{margin-top:28px;padding-top:20px;border-top:1px solid #3A2C24;font-size:13.5px}

/* §14 — subpage header band */
.pagehead{background:var(--cream);padding-block:clamp(32px,5vw,52px);border-bottom:1px solid var(--line)}
.pagehead .eyebrow{margin-bottom:8px}
.pagehead h1{font-size:clamp(30px,5vw,46px);color:var(--ink);margin-bottom:10px}
.pagehead .sub{color:var(--muted);font-size:clamp(16px,2vw,18px);max-width:62ch;margin:0 0 16px}
.pagehead .sub:last-child{margin-bottom:0}

/* §15 — menu jump row */
.menujump{position:sticky;top:var(--header-h);z-index:80;background:var(--cream);border-bottom:1px solid var(--line);box-sizing:border-box;min-height:var(--catbar-h);margin:0}
.menujump-track{display:flex;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;gap:8px 10px;padding:6px 20px;scrollbar-width:none;-ms-overflow-style:none;-webkit-mask-image:linear-gradient(to right,#000 0%,#000 calc(100% - 32px),transparent 100%);mask-image:linear-gradient(to right,#000 0%,#000 calc(100% - 32px),transparent 100%)}
@media (min-width:1120px){
  .menujump-track{padding-inline:calc((100% - var(--maxw)) / 2 + 20px)}
}
.menujump-track::-webkit-scrollbar{display:none}
.menujump a{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;white-space:nowrap;background:#fff;border:1px solid var(--line);border-radius:999px;min-height:36px;height:36px;box-sizing:border-box;padding:6px 14px;font-size:14px;font-weight:600;color:var(--ink);text-decoration:none;transition:background-color .15s,border-color .15s,color .15s}
.menujump a:hover,.menujump a:focus{border-color:var(--cta);color:var(--cta)}
.menujump a[aria-current="true"]{background:var(--cta);color:#fff;border-color:var(--cta)}
.menujump a[aria-current="true"]:hover,.menujump a[aria-current="true"]:focus{background:#9C4319;border-color:#9C4319;color:#fff}

/* §16 — menu page and items */
.menupage{padding-bottom:clamp(36px,6vw,60px)}
.menupage .mgroup{padding-block:clamp(32px,5vw,52px);border-bottom:1px solid var(--line);scroll-margin-top:calc(var(--header-h) + var(--catbar-h))}
.menupage .mgroup:last-child{border-bottom:none}
.mgroup-band{display:block;width:100%;height:auto;max-height:360px;object-fit:cover;border-radius:12px;margin-bottom:22px;background:var(--line)}
@media (max-width:599px){
  .mgroup-band{display:none}
}
.menupage .mgroup h2{font-size:clamp(24px,4vw,32px);color:var(--ink);margin-bottom:6px;border-bottom:none;padding-bottom:0;text-transform:none;letter-spacing:normal}
.mgroup-note{font-size:15px;color:var(--muted);margin:0 0 20px;max-width:60ch}
.mitems{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;gap:12px}
@media (min-width:960px){
  .mitems{grid-template-columns:1fr 1fr;gap:12px 36px}
}
.mitem{display:flex;align-items:center;gap:12px;padding:8px 0;border-bottom:1px solid rgba(222,214,201,.6)}
.mitem-text{flex:0 1 auto;min-width:0}
.mitem-text .n{display:block;font-size:16px;font-weight:600;color:var(--ink);line-height:1.3}
.mitem-text small{display:block;font-size:13.5px;color:var(--muted);line-height:1.35;margin-top:2px}
.mitem .d{flex:1 1 auto;border-bottom:1px dotted #C9BFB4;transform:translateY(-2px);min-width:12px;margin-inline:4px}
.mitem .p{flex:0 0 auto;font-weight:700;font-size:16px;font-variant-numeric:tabular-nums;color:var(--ink)}

/* A dish with a photograph is a card (decision 2026-10-01): photo, name, then price and Add pinned
   to the bottom so a row of cards lines up whatever the name wraps to. Every selector here is
   two classes deep because the older `.mgroup ul` / `.mgroup li` rules (0,1,1) would otherwise
   win the margin, display and padding - including inside the media queries. Under 600px a card is ~150px wide - too narrow for price + a 116px
   stepper side by side - so the control takes its own full-width row. Logical properties only;
   the Arabic page mirrors itself. */
.mgroup .mcards{list-style:none;margin:0 0 24px;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (min-width:600px){.mgroup .mcards{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}}
@media (min-width:960px){.mgroup .mcards{grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}}
.mgroup .mcards:last-child{margin-block-end:0}
.mcards .mcard{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto 1fr auto;
  align-items:center;gap:10px 8px;padding:0 0 12px;background:#fff;border:1px solid var(--line);
  border-radius:12px;overflow:hidden;font-size:16px}
.mcards .mcard img{grid-column:1/-1;display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;background:var(--line)}
.mcards .mitem-text{grid-column:1/-1;align-self:start;padding-inline:12px}
.mcards .d{display:none}
.mcards .p{grid-row:3;grid-column:1;padding-inline-start:12px;font-size:17px}
.mcards .mitem-ctrl{grid-row:3;grid-column:2;margin-inline:0 12px}
@media (max-width:599px){
  .mcards .mcard{grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr auto auto}
  .mcards .mitem-ctrl{grid-row:4;grid-column:1;margin-inline:12px}
  .mcards .mitem-add,.mcards .mitem-stepper{inline-size:100%}
  .mcards .mitem-stepper{justify-content:space-between}
}

/* §16b — category landing pages (compact head, 450px rubric) */
.cathead{padding-block:12px 10px;background:#fff;border-block-end:1px solid var(--line)}
.cathead h1{font-size:clamp(20px,4.2vw,30px);color:var(--char);margin-block-end:4px;line-height:1.2}
.cathead .today{margin:0 0 6px;font-size:13.5px;color:var(--muted);border:none;padding:0;line-height:1.3}
.cathead .today b{color:var(--char)}
/* On a phone the category head must leave the first dish's price above 450px (rubric 4). The H1
   already says "in Mirrabooka" and the footer carries the address, so the status line keeps the
   open/closed state and drops the street address. */
@media (max-width:599px){.cathead .today-addr{display:none}}
.cathead .lede{font-size:14.5px;color:var(--ink);margin:0;line-height:1.35;max-inline-size:62ch}
.catdishes{padding-block:14px 20px}
.catdishes .mgroup--cat{margin:0;padding:0;border:none}
.catcross{padding-block:24px 28px;background:var(--cream);border-block-start:1px solid var(--line)}
.catcross h2{font-size:clamp(20px,3.5vw,26px);color:var(--char);margin-block-end:16px}
.catcross .mgroup{margin:0;padding:0;border:none}
.catcross .mcards{margin-block-end:16px}
.catmore{padding-block:24px clamp(48px,8vw,72px);text-align:center}
.catmore p{margin:0}

/* §17 — gallery grid */
.gallerypage{padding-bottom:clamp(36px,6vw,60px)}
.gallery{list-style:none;margin:0;padding:clamp(24px,4vw,40px) 0 0;display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
@media (min-width:680px){
  .gallery{grid-template-columns:repeat(3,1fr);gap:20px}
}
@media (min-width:1000px){
  .gallery{grid-template-columns:repeat(4,1fr);gap:22px}
}
.gallery li{background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;display:flex;flex-direction:column}
.gallery img{display:block;width:100%;aspect-ratio:5/4;object-fit:cover;background:var(--line)}
.gallery span{display:block;padding:12px 14px 14px;font-size:14px;color:var(--muted);line-height:1.4;flex-grow:1}

/* §18 — bottom bar, mobile only (< 768px) */
.bottom-bar{position:fixed;bottom:0;left:0;right:0;width:100%;height:calc(56px + env(safe-area-inset-bottom,0px));padding-bottom:env(safe-area-inset-bottom,0px);display:flex;align-items:stretch;z-index:90;background:var(--char);box-shadow:0 -2px 10px rgba(0,0,0,.3);box-sizing:border-box}
@media (min-width:768px){
  .bottom-bar,.basket-bar{display:none!important}
}
.bottom-bar .bar-call{flex:0 0 35%;max-width:35%;display:inline-flex;align-items:center;justify-content:center;gap:6px;background:var(--char);color:#fff;text-decoration:none;font-weight:700;font-size:14px;border:none;border-inline-end:1px solid rgba(255,255,255,.15);padding:0 8px;box-sizing:border-box}
.bottom-bar .bar-call:hover,.bottom-bar .bar-call:focus{background:#2A221E}
.bottom-bar .bar-order{flex:1 1 65%;display:inline-flex;align-items:center;justify-content:center;background:var(--cta);color:#fff;text-decoration:none;font-weight:700;font-size:15px;border:none;border-radius:0;min-height:auto;padding:0 12px;box-sizing:border-box;transition:background-color .15s}
.bottom-bar .bar-order-text{display:flex;flex-direction:column;align-items:center;line-height:1.2;text-align:center}
.bottom-bar .bar-order-text small{font-size:13px;font-weight:600;opacity:.92}
.bottom-bar .bar-order:hover{background:#9C4319}
.bottom-bar .bar-order:active{background:#843714}
@media (max-width:767px){
  body:not(.orderpage){padding-bottom:calc(56px + env(safe-area-inset-bottom,0px))}
}
@media (max-width:480px){
  .hero{padding-block:30px}
  .feats{grid-template-columns:1fr}
}

/* §19 — order page & order form */
.orderpage{padding-block-end:clamp(36px,6vw,60px)}
.order-closed-panel{padding-block:clamp(24px,4vw,40px)}
.order-closed-card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:clamp(24px,4vw,40px);max-inline-size:680px;margin-inline:auto}
.order-closed-card h2{font-size:clamp(22px,3.5vw,28px);color:var(--char);margin-block-end:12px}
.order-closed-card .sub{color:var(--muted);font-size:16px;margin-block-end:20px;line-height:1.5}
.btn-call-large{font-size:18px;padding-block:14px;padding-inline:24px;display:inline-block}
.order-closed-hours{margin-block-start:28px;padding-block-start:24px;border-block-start:1px solid var(--line)}
.order-closed-hours h3{font-size:18px;color:var(--char);margin-block-end:14px}

.order-form{max-inline-size:800px;margin-inline:auto;margin-block-start:28px}
.order-closed-notice{background:#FDF3EF;border-inline-start:4px solid var(--cta);border-radius:0 8px 8px 0;padding:16px 20px;margin-block-end:24px}
.order-closed-text{margin:0;font-size:15px;line-height:1.5;color:var(--char)}
.order-closed-text a{color:var(--cta);font-weight:700}

.order-details-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:20px 24px;margin-block-end:28px}
.form-group{margin-block-end:16px}
.form-group:last-child{margin-block-end:0}
.form-group label{display:block;font-size:15px;color:var(--char);margin-block-end:6px}
.form-group input,
.form-group select,
.form-group textarea{inline-size:100%;box-sizing:border-box;font-family:inherit;font-size:16px;padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink)}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{border-color:var(--cta);outline:none}
.form-hint{display:block;font-size:13px;color:var(--muted);margin-block-start:4px}

.order-items-section{margin-block-end:28px}
.order-items-section h2{font-size:22px;color:var(--char);margin-block-end:6px}
.order-items-hint{font-size:14.5px;color:var(--muted);margin-block-end:16px}
.order-groups{display:flex;flex-direction:column;gap:12px}
.order-group{background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden;transition:border-color .15s}
.order-group[open]{border-color:#C9BFB4}
.order-group-summary{padding:14px 18px;font-weight:600;font-size:17px;color:var(--char);cursor:pointer;user-select:none;display:flex;align-items:center;justify-content:space-between}
.order-group-summary:hover{background:#FAF7F2}
.order-group-count{font-size:13px;font-weight:700;background:var(--cta);color:#fff;border-radius:999px;padding:2px 8px;display:none}
.order-group-count.is-active{display:inline-block}

.order-group-items{padding-inline:18px;padding-block-end:12px;border-block-start:1px solid #F0ECE4}
.order-item{display:flex;align-items:center;justify-content:space-between;gap:14px;padding-block:12px;border-block-end:1px solid #F0ECE4}
.order-item:last-child{border-block-end:none}
.order-item-info{flex:1 1 auto;min-inline-size:0}
.order-item-name{display:block;font-size:15.5px;font-weight:600;color:var(--ink);line-height:1.3}
.order-item-desc{display:block;font-size:13px;color:var(--muted);margin-block-start:2px;line-height:1.3}
.order-item-price{display:inline-block;font-size:14.5px;font-weight:700;color:var(--cta);margin-block-start:3px}

.order-item-qty{flex:0 0 auto;display:flex;align-items:center;gap:4px}
.order-item-qty input[type="number"]{inline-size:52px;block-size:38px;text-align:center;font-size:16px;font-weight:600;padding:4px;border:1px solid var(--line);border-radius:6px;-moz-appearance:textfield}
.order-item-qty input[type="number"]::-webkit-outer-spin-button,
.order-item-qty input[type="number"]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.qty-btn{inline-size:36px;block-size:38px;border:1px solid var(--line);background:var(--cream);border-radius:6px;font-size:18px;font-weight:700;color:var(--char);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:background-color .15s}
.qty-btn:hover{background:#E8E2D5}
.qty-btn:active{background:#DED6C9}

.order-note-group{background:#fff;border:1px solid var(--line);border-radius:12px;padding:20px 24px;margin-block-end:28px}
.hp-field{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

.order-submit-bar{background:#fff;border:1px solid var(--line);border-radius:12px;padding:24px;text-align:center}
.order-inline-error{margin:0 0 12px;padding:10px 12px;border-radius:8px;background:#FDECEA;color:#8A1C12;font-weight:700;font-size:15px;text-align:start}
.order-add-more{display:inline-flex;align-items:center;min-height:44px;margin-top:8px;color:var(--cta);font-weight:700;text-decoration:underline}
/* On a phone the review/send bar sticks to the bottom: the button carries the total, so the
   subtotal box and the call line are dropped there (the call line stays on laptop). */
@media (max-width:767px){
  .order-submit-bar{position:sticky;bottom:0;z-index:20;border-radius:12px 12px 0 0;padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px));box-shadow:0 -4px 16px rgba(27,21,18,.14)}
  .order-submit-bar .order-subtotal-box,.order-submit-bar .order-call-help{display:none}
  .order-submit-bar .btn{width:100%}
  .order-submit-bar .order-pay-notice{margin:8px 0 0;font-size:13px}
}
.order-subtotal-box{display:flex;align-items:center;justify-content:center;gap:12px;margin-block-end:16px}
.order-subtotal-label{font-size:18px;color:var(--muted)}
.order-subtotal-amount{font-size:26px;font-weight:700;color:var(--char);font-variant-numeric:tabular-nums}
.order-submit-btn{inline-size:100%;max-inline-size:360px;font-size:17px;padding-block:14px;display:inline-block;cursor:pointer}
.order-pay-notice{font-size:14px;color:var(--muted);margin-block-start:14px;margin-block-end:6px}
.order-call-help{font-size:13.5px;color:var(--muted);margin-block:0}
.order-call-help a{color:var(--cta)}

.order-error{background:#FDF3EF;border-inline-start:4px solid var(--cta);border-radius:0 8px 8px 0;padding:16px 20px;margin-block-end:24px}
.order-error-msg{font-size:16px;font-weight:600;color:#8F360E;margin-block:0 6px}
.order-error-call{font-size:15px;color:var(--char);margin-block:0}
.order-error-call a{font-weight:700;color:var(--cta)}

.order-receipt{background:#fff;border:1px solid var(--line);border-radius:12px;padding:clamp(24px,4vw,40px);max-inline-size:680px;margin-inline:auto}
.order-receipt-badge{display:inline-block;background:#E8F5E9;color:#2E7D32;font-size:14px;font-weight:700;padding:4px 12px;border-radius:999px;margin-block-end:14px}
.order-receipt h2{font-size:clamp(22px,3.5vw,28px);color:var(--char);margin-block-end:8px}
.order-receipt-ref{font-size:18px;font-weight:700;color:var(--cta);margin-block-end:16px}
.order-receipt-table{inline-size:100%;border-collapse:collapse;margin-block:20px}
.order-receipt-table th,
.order-receipt-table td{padding:10px 0;border-block-end:1px solid var(--line);text-align:start}
.order-receipt-table td:last-child{text-align:end;font-variant-numeric:tabular-nums}
.order-receipt-total td{font-size:18px;font-weight:700;color:var(--char);border-block-end:2px solid var(--char)}
/* The English name under the Arabic one on an Arabic receipt: a secondary line, not a second
   title. No letter-spacing anywhere near it - Arabic is cursive and spacing detaches the
   joins, and this cell holds both scripts. */
.order-receipt-name-en{font-size:14px;color:var(--muted,#6b6b6b);font-weight:400;letter-spacing:normal;margin-block-start:2px}
.order-receipt-callout{background:var(--cream);border-inline-start:3px solid var(--terra);padding:14px 18px;border-radius:0 8px 8px 0;font-size:15px;margin-block-start:24px}

/* §20 — basket & menu page order controls */
.mitem-ctrl{flex:0 0 auto;margin-inline-start:10px}
.mitem-add{display:inline-flex;align-items:center;justify-content:center;min-inline-size:56px;min-block-size:44px;padding-inline:14px;background:var(--cta);color:#fff;border:none;border-radius:8px;font-family:inherit;font-size:15px;font-weight:700;cursor:pointer;text-decoration:none;transition:background-color .15s}
.mitem-add:hover{background:#9C4319}
/* Every stepper reads − 1 + in Arabic too (owner, 2026-10-01): direction is pinned, not mirrored. */
.mitem-stepper{direction:ltr;display:inline-flex;align-items:center;background:var(--cta);color:#fff;border-radius:8px;overflow:hidden;min-block-size:44px}
.mitem-stepper-btn{display:inline-flex;align-items:center;justify-content:center;inline-size:44px;block-size:44px;min-inline-size:44px;min-block-size:44px;background:transparent;color:#fff;border:none;font-size:20px;font-weight:700;cursor:pointer;padding:0;transition:background-color .15s}
.mitem-stepper-btn:hover{background:#9C4319}
.mitem-stepper-btn:active{background:#843714}
.mitem-qty{min-inline-size:28px;text-align:center;font-size:16px;font-weight:700;color:#fff;font-variant-numeric:tabular-nums;user-select:none;padding-inline:2px}
/* Narrow phones. At 360px a menu row - then 84px thumbnail + name + leader + price + the "+ Add"
   button - was 341px wide inside a 320px column, and the page scrolled sideways in both
   languages. Rows no longer carry a photo (photos are cards now), but keep the tighter gaps: the
   button keeps its 44px touch target and the price never wraps. Found by mobile-sweep.mjs. */
@media (max-width:400px){
  .mitem{gap:6px}
  .mitem-ctrl{margin-inline-start:6px}
}

.basket-bar{position:fixed;inset-inline:0;bottom:0;z-index:100;background:var(--char);color:#fff;border-block-start:3px solid var(--terra);box-shadow:0 -4px 16px rgba(0,0,0,.24)}
.basket-bar-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:10px}
.basket-status{font-size:16px;font-weight:600;color:#fff;line-height:1.4;flex:1 1 auto;min-inline-size:0}
.basket-warn{font-size:14px;font-weight:400;color:#E8A87C}
.basket-review{flex:0 0 auto;min-block-size:44px;min-inline-size:44px;display:inline-flex;align-items:center;justify-content:center;padding-block:10px;padding-inline:18px;font-size:16px;font-weight:700;white-space:nowrap}
@media (max-width:480px){
  .basket-bar-inner{padding-block:8px;gap:10px}
  .basket-status{font-size:14.5px}
  .basket-review{font-size:15px;padding-inline:14px}
}

/* §21 — Stage C order journey & confirm step */
.order-status-line{background:#fff;border:1px solid var(--line);border-radius:8px;padding:14px 18px;margin-block-end:24px;font-size:15px;display:flex;align-items:center;gap:10px}
.order-status-line.is-open{border-inline-start:4px solid var(--open)}
.order-status-dot{inline-size:10px;block-size:10px;border-radius:50%;background:var(--open);display:inline-block;flex-shrink:0}

.order-pickup-section{background:#fff;border:1px solid var(--line);border-radius:12px;padding:24px;margin-block-end:24px}
.order-details-section{margin-block-end:24px}

.order-basket-view{margin-block-end:20px}
.order-basket-table{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 20px}
.order-basket-row{display:flex;align-items:center;justify-content:space-between;padding-block:12px;border-block-end:1px solid var(--line);gap:14px}
.order-basket-row:last-child{border-block-end:none}
.order-basket-info{flex:1 1 auto;min-inline-size:0}
.order-basket-name{font-weight:700;display:block;color:var(--char);overflow-wrap:break-word}
.order-basket-price{color:var(--muted);font-size:15px;display:block;margin-block-start:2px}
.order-basket-ctrl{flex:0 0 auto}
.order-basket-stepper{direction:ltr;display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:8px;background:#fff;overflow:hidden}
.order-basket-stepper button{min-inline-size:44px;min-block-size:44px;inline-size:44px;block-size:44px;border:none;background:transparent;font-size:20px;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;color:var(--char);padding:0;transition:background-color .15s}
.order-basket-stepper button:hover{background:var(--cream)}
.order-basket-stepper button:active{background:#E8E2D5}
.order-basket-qty{min-inline-size:32px;text-align:center;font-weight:700;font-size:16px;font-variant-numeric:tabular-nums;color:var(--char)}
.order-basket-empty{padding:32px 20px;text-align:center;background:#fff;border:1px dashed var(--line);border-radius:12px;margin-block-end:24px}
.order-basket-empty p{margin:0;font-size:16px;color:var(--muted);display:flex;flex-direction:column;align-items:center;gap:12px}
.order-basket-empty a{min-block-size:44px;display:inline-flex;align-items:center;justify-content:center;padding-inline:20px;text-decoration:none}

.order-confirm-step{background:#fff;border:1px solid var(--line);border-radius:12px;padding:clamp(20px,4vw,32px);margin-block-end:24px}
.order-confirm-heading{font-size:clamp(20px,3.5vw,26px);color:var(--char);margin-block-end:18px;outline:none}
.order-confirm-table{inline-size:100%;border-collapse:collapse;margin-block-end:20px}
.order-confirm-table th,
.order-confirm-table td{padding:10px 4px;border-block-end:1px solid var(--line);text-align:start}
.order-confirm-table th:last-child,
.order-confirm-table td:last-child{text-align:end;font-variant-numeric:tabular-nums}
.order-confirm-total td{font-size:18px;font-weight:700;color:var(--char);border-block-start:2px solid var(--line);border-block-end:none;padding-block-start:14px}
.order-confirm-details{background:var(--cream);border-radius:8px;padding:16px 20px;margin-block-end:20px}
.order-confirm-row{margin:0 0 8px;font-size:15.5px;color:var(--char)}
.order-confirm-row:last-child{margin-block-end:0}
.order-confirm-actions{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-block-start:24px}
.order-confirm-actions button{min-block-size:44px;padding-block:12px;padding-inline:24px;cursor:pointer}
.order-confirm-actions .btn-secondary{background:transparent;border:2px solid var(--cta);color:var(--cta);font-weight:700;border-radius:8px;font-family:inherit;font-size:16px;transition:background-color .15s,color .15s,border-color .15s}
.order-confirm-actions .btn-secondary:hover{background:rgba(179,78,31,.08);color:#9C4319;border-color:#9C4319}
.order-confirm-actions .btn-secondary:active{background:rgba(179,78,31,.16);color:#843714;border-color:#843714}

/* §22 — Stage D add-on strip on confirm step */
.order-confirm-addons{margin-block:20px 24px}
.addon-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-block-end:20px}
.addon-row:last-child{margin-block-end:0}
.addon-q{flex:0 0 100%;font-size:16px;font-weight:700;color:var(--char);margin-block:0 2px}
.addon-chip{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-inline-size:44px;min-block-size:44px;padding-block:8px;padding-inline:16px;background:var(--cream);border:1px solid var(--line);border-radius:8px;color:var(--char);font-family:inherit;font-size:15px;font-weight:700;cursor:pointer;text-decoration:none;transition:background-color .15s,border-color .15s}
.addon-chip:hover{background:#fff;border-color:var(--cta)}
.addon-chip:active{background:#E8E2D5}
.addon-price{color:var(--cta);font-weight:700;font-variant-numeric:tabular-nums}





.addon-ctrl{display:inline-flex}
.addon-stepper{direction:ltr;display:inline-flex;align-items:center;background:var(--cta);color:#fff;border-radius:8px;overflow:hidden;min-block-size:44px}
.addon-step-btn{display:inline-flex;align-items:center;justify-content:center;inline-size:44px;block-size:44px;background:transparent;color:#fff;border:none;font-size:20px;font-weight:700;cursor:pointer;padding:0}
.addon-step-btn:hover{background:#9C4319}
.addon-qty{min-inline-size:28px;text-align:center;font-size:16px;font-weight:700;color:#fff;font-variant-numeric:tabular-nums;user-select:none;padding-inline:2px}

/* §23 — Stage E Item Choices & Sheet */
.choice-sheet-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.65);z-index:1000;display:flex;align-items:flex-end;justify-content:center;transition:opacity .2s}
.choice-sheet-backdrop[hidden]{display:none!important}
.choice-sheet{background:#fff;inline-size:100%;max-inline-size:520px;border-radius:16px 16px 0 0;box-shadow:0 -8px 32px rgba(0,0,0,.3);display:flex;flex-direction:column;max-block-size:88vh;outline:none;animation:sheetSlideUp .2s ease-out}
@keyframes sheetSlideUp{from{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}
@media (min-width:768px){
  .choice-sheet-backdrop{align-items:center}
  .choice-sheet{border-radius:12px;max-block-size:85vh;box-shadow:0 12px 40px rgba(0,0,0,.35);animation:sheetPop .2s ease-out}
  @keyframes sheetPop{from{transform:scale(.96);opacity:0}to{transform:scale(1);opacity:1}}
}
.choice-sheet-header{display:flex;align-items:flex-start;justify-content:space-between;padding:20px 20px 14px;border-block-end:1px solid var(--line);gap:12px}
.choice-sheet-title-group{flex:1 1 auto;min-inline-size:0}
.choice-sheet-title{font-size:20px;font-weight:700;color:var(--char);margin:0 0 4px}
.choice-sheet-price{font-size:16px;font-weight:700;color:var(--cta)}
.choice-sheet-close{flex:0 0 44px;inline-size:44px;block-size:44px;min-inline-size:44px;min-block-size:44px;border:none;background:transparent;font-size:22px;color:var(--char);cursor:pointer;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;padding:0;transition:background-color .15s}
.choice-sheet-close:hover{background:var(--cream)}
.choice-sheet-body{padding:16px 20px;overflow-y:auto;-webkit-overflow-scrolling:touch;flex:1 1 auto}
.choice-group{border:none;margin:0 0 20px;padding:0}
.choice-group:last-child{margin-block-end:0}
.choice-group-title{font-size:15px;font-weight:700;color:var(--char);margin:0 0 10px;padding:0}
.choice-options-multi{display:flex;flex-direction:column;gap:8px}
.choice-option-price{margin-inline-start:auto;font-weight:700;color:var(--cta);white-space:nowrap}
.choice-option-checkbox{display:flex;align-items:center;min-block-size:44px;padding-block:6px;padding-inline:12px;background:var(--cream);border:1px solid var(--line);border-radius:8px;cursor:pointer;user-select:none;gap:12px;font-size:15px;font-weight:600;color:var(--char);transition:background-color .15s,border-color .15s}
.choice-option-checkbox:hover{background:#fff;border-color:var(--cta)}
.choice-option-checkbox input[type="checkbox"]{inline-size:20px;block-size:20px;margin:0;accent-color:var(--cta);cursor:pointer}
.choice-options-single{display:flex;flex-wrap:wrap;gap:8px}
.choice-option-pill{display:inline-flex;align-items:center;cursor:pointer;user-select:none}
.choice-option-pill input[type="radio"]{position:absolute;opacity:0;inline-size:0;block-size:0;pointer-events:none}
.choice-pill-text{display:inline-flex;align-items:center;justify-content:center;min-inline-size:56px;min-block-size:44px;padding-block:8px;padding-inline:16px;background:var(--cream);border:1px solid var(--line);border-radius:8px;font-size:15px;font-weight:600;color:var(--char);transition:all .15s}
.choice-option-pill:hover .choice-pill-text{background:#fff;border-color:var(--cta)}
.choice-option-pill input[type="radio"]:checked + .choice-pill-text{background:var(--char);color:#fff;border-color:var(--char)}
.choice-option-pill input[type="radio"]:focus-visible + .choice-pill-text{outline:2px solid var(--cta);outline-offset:2px}
.choice-sheet-footer{display:flex;align-items:center;gap:14px;padding:16px 20px;border-block-start:1px solid var(--line);background:#fff;border-radius:0 0 16px 16px}
@media (min-width:768px){
  .choice-sheet-footer{border-radius:0 0 12px 12px}
}
/* − 1 + in both languages (owner, 2026-10-01): direction is pinned, not mirrored. */
.choice-sheet-stepper{direction:ltr;display:inline-flex;align-items:center;background:var(--cream);border:1px solid var(--line);border-radius:8px;overflow:hidden;flex-shrink:0}
.choice-sheet-step-btn{display:inline-flex;align-items:center;justify-content:center;inline-size:44px;block-size:44px;min-inline-size:44px;min-block-size:44px;border:none;background:transparent;font-size:20px;font-weight:700;color:var(--char);cursor:pointer;padding:0;transition:background-color .15s}
.choice-sheet-step-btn:hover{background:#fff}
.choice-sheet-qty{min-inline-size:30px;text-align:center;font-size:16px;font-weight:700;color:var(--char);font-variant-numeric:tabular-nums;user-select:none}
.choice-sheet-add-btn{flex:1 1 auto;min-block-size:48px;display:inline-flex;align-items:center;justify-content:center;font-size:16px;font-weight:700;border-radius:8px;background:var(--cta);color:#fff;border:none;cursor:pointer;transition:background-color .15s}
.choice-sheet-add-btn:hover{background:#9C4319}
.choice-sheet-add-btn:active{background:#843714}

/* Deviations on Order page & Receipt */
.order-basket-deviations{font-size:13.5px;font-weight:600;color:var(--cta);margin-block-start:3px;letter-spacing:normal}
.order-confirm-deviations{font-size:13.5px;font-weight:600;color:var(--cta);margin-block-start:2px}
.order-receipt-deviations{font-size:13px;font-weight:600;color:var(--cta);margin-block-start:3px}


/* privacy (and any plain text page) */
.prose{max-width:68ch}
.prose h2{margin:28px 0 8px}
.prose ul{padding-inline-start:20px}
.prose li{margin:8px 0}
.ffoot-link{color:inherit;text-decoration:underline}
/* In an Arabic button (a flex box) the space between the words and a left-to-right number is
   dropped, so "اتصل على" ran into "(08) ...". A margin cannot be dropped. It is inline-END because
   logical sides follow the bdi's OWN direction (ltr): its end edge is the one touching the Arabic. */
[dir="rtl"] .btn bdi{margin-inline-end:.3em}
.nw{white-space:nowrap}