@charset "UTF-8";
/* ==========================================================================
   QALANDARI FOOD TRUCK — premium ordering experience
   Brand: RED #D61F26 · BLACK · WHITE
   1  Tokens
   2  Reset & base
   3  Typography
   4  Buttons & chips
   5  Header
   6  Hero
   7  Counter strip (signature)
   8  Sections
   9  Featured dish
   10 Categories rail
   11 Dish cards & rails
   12 Catering
   13 Reviews
   14 Find the truck
   15 Footer
   16 Product sheet
   17 Cart drawer & slip
   18 Mobile tab bar
   19 Menu page
   20 Order page
   21 About / Contact
   22 Chat
   23 Floating utilities
   24 Motion & RTL
   ========================================================================== */

/* ---------- 1. TOKENS ---------------------------------------------------- */
:root{
  /* brand */
  --red:#D61F26;
  --red-600:#B8161D;
  --red-800:#8E1015;
  --red-glow:#FF4046;
  --red-tint:rgba(214,31,38,.10);

  /* neutrals — cool, not cream */
  --ink:#0B0B0C;
  --ink-2:#121216;
  --ink-3:#1A1A20;
  --ink-4:#25252C;

  --paper:#FFFFFF;
  --paper-2:#F4F4F6;
  --paper-3:#EAEAEE;

  --text:#0E0E12;
  --text-2:#5B5B66;
  --text-3:#8B8B96;
  --on-dark:#F3F3F5;
  --on-dark-2:#A7A7B2;

  --line:#E4E4E9;
  --line-dark:rgba(255,255,255,.10);

  --wa:#25D366;

  /* type — Manrope for headings, Inter for everything else */
  --display:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
  --body:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --ar:"Cairo",system-ui,sans-serif;

  /* 8px spacing scale — margins, paddings and gaps are multiples of these */
  --s0:4px;  --s1:8px;  --s2:16px; --s3:24px; --s4:32px;
  --s5:40px; --s6:48px; --s7:64px; --s8:80px; --s9:96px;

  /* geometry */
  --wrap:1240px;
  --gutter:clamp(18px,4vw,40px);
  --r-xs:8px; --r-sm:12px; --r:16px; --r-lg:24px; --r-xl:32px; --pill:999px;

  /* elevation */
  --e1:0 1px 2px rgba(11,11,12,.05), 0 4px 14px -6px rgba(11,11,12,.10);
  --e2:0 2px 4px rgba(11,11,12,.05), 0 14px 32px -14px rgba(11,11,12,.20);
  --e3:0 4px 8px rgba(11,11,12,.06), 0 28px 56px -20px rgba(11,11,12,.30);
  --e-red:0 14px 34px -14px rgba(214,31,38,.65);

  /* layout rhythm */
  --nav-h:84px;
  --tabbar-h:0px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}
@media(max-width:900px){
  :root{ --nav-h:66px; --tabbar-h:calc(64px + env(safe-area-inset-bottom,0px)); }
}

/* ---------- 2. RESET & BASE --------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  background:var(--paper);
  color:var(--text);
  font-family:var(--body);
  font-size:16px;
  font-weight:400;
  line-height:1.65;
  letter-spacing:-0.006em;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-feature-settings:"kern" 1;
  padding-bottom:var(--tabbar-h);
}
img,svg,video{display:block;max-width:100%}
/* the hidden attribute must beat any display we set on a component,
   otherwise elements toggled with .hidden = true stay on screen */
[hidden]{display:none!important}
img{height:auto}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit;background:none;border:0}
button{cursor:pointer}
ul{list-style:none}
::selection{background:var(--red);color:#fff}
:focus-visible{outline:3px solid var(--red);outline-offset:3px;border-radius:6px}
.b-dark :focus-visible{outline-color:var(--red-glow)}

.wrap{width:min(var(--wrap),100% - var(--gutter)*2);margin-inline:auto}
.sr{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:fixed;left:12px;top:-100px;z-index:400;background:var(--ink);color:#fff;padding:14px 22px;border-radius:var(--r-sm);font-weight:700;transition:top .2s var(--ease)}
.skip:focus{top:12px}

/* riyal glyph (masked from images/riyal.png) */
.ry{
  display:inline-block;width:.72em;height:.8em;vertical-align:-.06em;
  background-color:currentColor;
  -webkit-mask:url("../../images/riyal.png") center/contain no-repeat;
  mask:url("../../images/riyal.png") center/contain no-repeat;
  margin-inline-end:.16em;
}

/* ---------- 3. TYPOGRAPHY ------------------------------------------------ */
h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:800;
  line-height:1.12;
  letter-spacing:-.03em;
  color:var(--text);
  text-wrap:balance;
}
h3,h4{line-height:1.25;letter-spacing:-.02em}
.b-dark h1,.b-dark h2,.b-dark h3,.b-dark h4{color:#fff}

.h-hero{font-size:clamp(2.5rem,7vw,4.5rem);font-weight:800;line-height:1.05;letter-spacing:-.04em;text-transform:uppercase}
.h-sec{font-size:clamp(1.875rem,4.4vw,3rem);text-transform:uppercase;font-weight:800;line-height:1.08;letter-spacing:-.035em}
.h-sub{font-size:clamp(1.25rem,2.4vw,1.625rem);font-weight:700;line-height:1.25;letter-spacing:-.022em}

.red{color:var(--red)}
.b-dark .red{color:var(--red-glow)}

/* eyebrow — a small label that names the section, not decoration */
.eyebrow{
  display:inline-flex;align-items:center;gap:var(--s1);
  font-family:var(--body);font-weight:600;font-size:.8125rem;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--red);
}
.eyebrow::before{content:"";width:24px;height:2px;border-radius:2px;background:var(--red)}
.b-dark .eyebrow{color:var(--red-glow)}
.b-dark .eyebrow::before{background:var(--red-glow)}

.lede{font-size:clamp(1.0625rem,1.6vw,1.1875rem);color:var(--text-2);max-width:60ch;line-height:1.7;letter-spacing:-.008em}
.b-dark .lede{color:var(--on-dark-2)}

/* Arabic sub-labels */
.ar{font-family:var(--ar);font-size:.875rem;color:var(--text-3);line-height:1.6;display:block;letter-spacing:0}
.b-dark .ar{color:var(--on-dark-2)}
.ar.big{font-size:1.05rem;color:var(--text-2)}

/* tabular numbers for prices */
.num,.price,.amt{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}

/* ---------- 4. BUTTONS & CHIPS ------------------------------------------ */
.btn{
  position:relative;overflow:hidden;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--body);font-weight:600;font-size:1rem;letter-spacing:-.01em;
  padding:16px 32px;border-radius:var(--pill);
  min-height:56px;
  transition:transform .22s var(--ease), background .2s var(--ease), box-shadow .22s var(--ease), color .2s var(--ease);
  will-change:transform;
  -webkit-tap-highlight-color:transparent;
}
.btn svg{width:20px;height:20px;flex:none}
.btn:active{transform:scale(.97)}

.btn-red{background:var(--red);color:#fff;box-shadow:var(--e-red)}
.btn-red:hover{background:var(--red-600);box-shadow:0 18px 40px -14px rgba(214,31,38,.8)}
.btn-ink{background:var(--ink);color:#fff;box-shadow:var(--e2)}
.btn-ink:hover{background:var(--ink-3)}
.btn-white{background:#fff;color:var(--ink);box-shadow:var(--e2)}
.btn-white:hover{background:var(--paper-2)}
.btn-ghost{background:rgba(255,255,255,.08);color:#fff;border:1.5px solid rgba(255,255,255,.28);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.btn-ghost:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.5)}
.btn-line{background:transparent;color:var(--ink);border:1.5px solid var(--line)}
.btn-line:hover{border-color:var(--ink);background:var(--paper-2)}
.btn-wa{background:var(--wa);color:#06351A;box-shadow:0 14px 32px -14px rgba(37,211,102,.75)}
.btn-wa:hover{background:#1FBF5B}
.btn-lg{padding:20px 40px;font-size:1.0625rem;font-weight:700;min-height:64px}
.btn-sm{padding:12px 24px;font-size:.9375rem;min-height:48px}
.btn-block{width:100%}
.btn[disabled]{opacity:.4;cursor:not-allowed;transform:none!important;box-shadow:none}

/* ripple */
.ripple{position:absolute;border-radius:50%;transform:scale(0);background:rgba(255,255,255,.42);pointer-events:none;animation:ripple .6s var(--ease-out) forwards}
.btn-white .ripple,.btn-line .ripple{background:rgba(11,11,12,.14)}
@keyframes ripple{to{transform:scale(2.6);opacity:0}}

/* small pills used for facts / tags */
.pill{
  display:inline-flex;align-items:center;gap:var(--s1);
  font-size:.875rem;font-weight:500;letter-spacing:-.005em;
  padding:8px 16px;border-radius:var(--pill);
  background:var(--paper-2);color:var(--text-2);
}
.pill svg{width:15px;height:15px;flex:none;color:var(--red)}
.pill-glass{
  background:rgba(255,255,255,.10);color:#fff;
  border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(16px) saturate(1.4);-webkit-backdrop-filter:blur(16px) saturate(1.4);
}
.pill-glass svg{color:var(--red-glow)}
.pill-red{background:var(--red);color:#fff}
.pill-red svg{color:#fff}

/* rank badge — a true fact (position in our bestseller list) */
.rank-badge{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--ink);color:#fff;
  font-family:var(--display);font-weight:800;
  font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;
  padding:8px 12px;border-radius:var(--pill);
}
.rank-badge.gold{background:var(--red)}
.rank-badge svg{width:13px;height:13px}

/* star row */
.stars{display:inline-flex;gap:2px;color:var(--red);letter-spacing:.06em}
.stars svg{width:14px;height:14px;fill:currentColor}

/* ---------- 5. HEADER ---------------------------------------------------- */
.site-head{
  position:fixed;inset:0 0 auto 0;z-index:120;
  height:var(--nav-h);
  transition:height .3s var(--ease), background .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
  background:linear-gradient(180deg,rgba(11,11,12,.72),rgba(11,11,12,0));
  border-bottom:1px solid transparent;
}
.site-head.glass{
  height:66px;
  background:rgba(11,11,12,.72);
  backdrop-filter:blur(22px) saturate(1.6);
  -webkit-backdrop-filter:blur(22px) saturate(1.6);
  border-bottom-color:var(--line-dark);
  box-shadow:0 14px 40px -26px rgba(0,0,0,.9);
}
.head-in{
  height:100%;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:14px;
}

/* left: desktop links / mobile burger */
.head-nav{display:flex;align-items:center;gap:2px;justify-self:start}
.head-nav a{
  position:relative;
  font-size:.875rem;font-weight:500;letter-spacing:.02em;
  color:rgba(255,255,255,.74);padding:8px 16px;border-radius:var(--pill);
  transition:color .2s var(--ease);
}
.head-nav a::after{
  content:"";position:absolute;left:16px;right:16px;bottom:2px;height:2px;border-radius:2px;
  background:var(--red-glow);transform:scaleX(0);transform-origin:left;
  transition:transform .34s var(--ease-out);
}
.head-nav a:hover{color:#fff}
.head-nav a:hover::after,.head-nav a.on::after{transform:scaleX(1)}
.head-nav a.on{color:#fff;font-weight:600}

/* centre: logo */
.brand{justify-self:center;display:flex;align-items:center;gap:11px;padding-inline:10px;min-height:44px}
.brand img{height:48px;width:auto;transition:height .3s var(--ease);filter:drop-shadow(0 3px 10px rgba(0,0,0,.5))}
.site-head.glass .brand img{height:40px}
.brand-wm{display:flex;flex-direction:column;line-height:1}
.brand-wm b{
  font-family:var(--display);font-weight:800;
  font-size:1rem;letter-spacing:-.01em;text-transform:uppercase;color:#fff;
}
.brand-wm span{
  font-size:.7rem;font-weight:600;letter-spacing:.24em;text-transform:uppercase;
  color:var(--red-glow);margin-top:3px;
}

/* right: language + cart + order */
.head-tools{justify-self:end;display:flex;align-items:center;gap:9px}
.icon-btn{
  position:relative;
  width:42px;height:42px;display:grid;place-items:center;
  border-radius:var(--pill);color:#fff;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  transition:background .2s var(--ease), transform .2s var(--ease);
}
.icon-btn:hover{background:rgba(255,255,255,.18)}
.icon-btn:active{transform:scale(.94)}
.icon-btn svg{width:20px;height:20px}
.lang-btn{width:auto;padding:0 15px;font-weight:700;font-size:.8rem;letter-spacing:.04em}
.cart-btn .badge{
  position:absolute;top:-4px;inset-inline-end:-4px;
  min-width:20px;height:20px;padding:0 5px;border-radius:var(--pill);
  background:var(--red);color:#fff;
  font-size:.68rem;font-weight:800;font-variant-numeric:tabular-nums;
  display:grid;place-items:center;
  border:2px solid var(--ink);
  transform:scale(0);transition:transform .3s var(--ease-out);
}
.cart-btn.has .badge{transform:scale(1)}
.head-order{
  display:inline-flex;align-items:center;gap:var(--s1);
  background:var(--red);color:#fff;
  font-weight:600;font-size:.9375rem;letter-spacing:-.01em;
  padding:12px 24px;border-radius:var(--pill);min-height:44px;
  box-shadow:var(--e-red);
  transition:background .2s var(--ease), transform .2s var(--ease);
}
.head-order:hover{background:var(--red-600);transform:translateY(-1px)}
.head-order:active{transform:scale(.97)}

.burger{display:none;width:42px;height:42px;border-radius:var(--pill);place-items:center;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);justify-self:start}
.burger i{display:block;width:18px;height:2px;border-radius:2px;background:#fff;transition:.3s var(--ease)}
.burger i+i{margin-top:5px}
.burger.x i:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.x i:nth-child(2){opacity:0}
.burger.x i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media(max-width:1000px){
  .head-nav{
    position:fixed;inset:var(--nav-h) 0 auto 0;
    flex-direction:column;align-items:stretch;gap:0;
    background:rgba(11,11,12,.97);
    backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
    padding:8px var(--gutter) 22px;
    border-bottom:1px solid var(--line-dark);
    transform:translateY(-130%);opacity:0;pointer-events:none;
    transition:transform .4s var(--ease-out), opacity .3s var(--ease);
  }
  .head-nav.open{transform:none;opacity:1;pointer-events:auto}
  .head-nav a{padding:16px 4px;font-size:.95rem;letter-spacing:.04em;border-bottom:1px solid var(--line-dark)}
  .head-nav a::after{display:none}
  .head-nav a.on{color:var(--red-glow)}
  .burger{display:grid}
  .head-order{display:none}
}
@media(max-width:560px){
  .brand{gap:8px;padding-inline:0}
  .brand img{height:38px}
  .site-head.glass .brand img{height:32px}
  .brand-wm b{font-size:.875rem;letter-spacing:-.015em}
  .brand-wm span{font-size:.5625rem;letter-spacing:.18em;margin-top:2px}
  .head-in{gap:8px}
  .head-tools{gap:6px}
  .icon-btn{width:40px;height:40px}
  .lang-btn{padding:0 10px;font-size:.8125rem}
  .burger{width:40px;height:40px}
}
@media(max-width:380px){
  :root{--gutter:12px}
  .brand img{height:34px}
  .site-head.glass .brand img{height:30px}
  .brand-wm b{font-size:.8125rem}
  .brand-wm span{font-size:.5rem;letter-spacing:.14em}
  .icon-btn{width:38px;height:38px}
  .lang-btn{padding:0 8px;font-size:.75rem}
  .burger{width:38px;height:38px}
}

/* ---------- 6. HERO ------------------------------------------------------ */
.hero{
  position:relative;isolation:isolate;
  min-height:min(88vh,760px);
  display:flex;align-items:flex-end;
  background:var(--ink);
  overflow:hidden;
}
.hero-media{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero-plate{
  position:absolute;inset:0;z-index:0;
  background:var(--ink) url("../../images/hero-truck.webp") center 42%/cover no-repeat;
  transform:scale(1.06);
  transform-origin:center 60%;
  will-change:transform;
}
/* cinematic overlay: vignette + bottom scrim so type always has contrast */
.hero-scrim{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(120% 85% at 50% 30%,transparent 30%,rgba(11,11,12,.55) 100%),
    linear-gradient(180deg,rgba(11,11,12,.78) 0%,rgba(11,11,12,.12) 26%,rgba(11,11,12,.10) 44%,rgba(11,11,12,.86) 82%,#0B0B0C 100%);
}
.hero-smoke{position:absolute;inset:0;z-index:2;width:100%;height:100%;pointer-events:none}
.hero-in{position:relative;z-index:3;width:100%;padding-block:0 clamp(38px,6vw,72px)}

.hero-facts{display:flex;flex-wrap:wrap;gap:var(--s1);margin-bottom:var(--s3)}
.hero-line{
  font-family:var(--display);font-weight:800;
  font-size:clamp(1.75rem,3.8vw,3rem);letter-spacing:-.035em;line-height:1.08;
  color:#fff;text-transform:uppercase;max-width:16ch;
  text-shadow:0 4px 30px rgba(0,0,0,.6);
}
.hero-line em{font-style:normal;color:var(--red-glow);display:block}
.hero-sub{margin-top:var(--s2);max-width:46ch;color:rgba(255,255,255,.82);font-size:1.0625rem;line-height:1.6}
.hero-cta{display:flex;gap:var(--s2);flex-wrap:wrap;margin-top:var(--s4)}

.hero-scroll{
  position:absolute;left:50%;bottom:16px;z-index:4;transform:translateX(-50%);
  width:26px;height:42px;border:2px solid rgba(255,255,255,.32);border-radius:var(--pill);
  display:grid;justify-items:center;padding-top:7px;
}
.hero-scroll i{width:4px;height:8px;border-radius:4px;background:var(--red-glow);animation:cue 1.7s var(--ease) infinite}
@keyframes cue{0%{transform:translateY(0);opacity:0}35%{opacity:1}70%{transform:translateY(14px);opacity:0}100%{opacity:0}}

/* MOBILE HERO — the source artwork is a 2.4:1 banner. Rather than shrink it
   to a thin strip, we crop into the serving window (the most characteristic
   part of the truck) and run the copy over it, app-style. */
@media(max-width:900px){
  .hero{min-height:74vh;min-height:74svh}
  .hero-plate{
    background-position:27% center;
    transform:scale(1.04);
    animation:none;
  }
  .hero-scrim{
    background:
      linear-gradient(180deg,rgba(11,11,12,.72) 0%,rgba(11,11,12,.18) 20%,rgba(11,11,12,.14) 40%,rgba(11,11,12,.88) 78%,#0B0B0C 100%);
  }
  .hero-in{padding-block:0 32px}
  .hero-line{font-size:clamp(2rem,9vw,2.8rem);max-width:12ch}
  .hero-sub{font-size:.95rem;max-width:34ch}
  .hero-facts{margin-bottom:16px;gap:7px}
  .hero-cta{margin-top:22px;gap:10px}
  .hero-cta .btn{flex:1 1 0;min-width:0;padding-inline:14px}
  .hero-scroll{display:none}
}
@media(max-width:560px){
  /* the floor keeps the copy clear of the header on short devices (e.g. 320×568) */
  .hero{min-height:max(78vh,540px);min-height:max(78svh,540px)}
  .hero-plate{background-position:25% center}
}
@media(max-width:560px){
  .hero-facts .pill{font-size:.76rem;padding:7px 11px}
}

/* ---------- 7. COUNTER STRIP (signature) --------------------------------- */
/* The lit service strip along the truck's counter — a marquee of what's true
   about this kitchen. It is the one loud element on the page. */
.strip{
  position:relative;overflow:hidden;
  background:linear-gradient(100deg,var(--red-800),var(--red) 45%,var(--red-600) 100%);
  color:#fff;
  border-block:1px solid rgba(0,0,0,.18);
}
.strip::before,.strip::after{
  content:"";position:absolute;top:0;bottom:0;width:70px;z-index:2;pointer-events:none;
}
.strip::before{left:0;background:linear-gradient(90deg,var(--red-800),transparent)}
.strip::after{right:0;background:linear-gradient(270deg,var(--red-600),transparent)}
.strip-track{display:flex;width:max-content;animation:marquee 34s linear infinite}
.strip:hover .strip-track{animation-play-state:paused}
.strip-set{display:flex;align-items:center;flex:none}
.strip-item{
  display:inline-flex;align-items:center;gap:11px;
  padding:16px 26px;
  font-family:var(--display);font-weight:800;
  font-size:.86rem;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;
}
.strip-item svg{width:17px;height:17px;flex:none;opacity:.9}
.strip-dot{width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.5);flex:none}
@keyframes marquee{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@media(max-width:560px){ .strip-item{padding:13px 18px;font-size:.75rem;letter-spacing:.1em} }

/* ---------- 8. SECTIONS -------------------------------------------------- */
.band{position:relative}
.b-white{background:var(--paper)}
.b-soft{background:var(--paper-2)}
.b-dark{background:var(--ink);color:var(--on-dark)}
.b-dark-2{background:linear-gradient(170deg,var(--ink-3) 0%,var(--ink) 60%);color:var(--on-dark)}

.sec{padding-block:clamp(48px,8vw,96px)}
.sec-sm{padding-block:clamp(40px,5vw,64px)}

.sec-head{max-width:640px;margin-bottom:clamp(32px,4vw,48px)}
.sec-head.center{margin-inline:auto;text-align:center}
.sec-head .eyebrow{margin-bottom:var(--s2)}
.sec-head .h-sec{margin-bottom:0}
.sec-head p{margin-top:var(--s2);color:var(--text-2);font-size:1.0625rem;line-height:1.65}
.b-dark .sec-head p{color:var(--on-dark-2)}

/* head with an action on the right (rails) */
.sec-head-row{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:clamp(26px,3.4vw,40px)}
.sec-head-row .sec-head{margin-bottom:0}

.rail-nav{display:flex;gap:8px}
.rail-nav button{
  width:46px;height:46px;border-radius:var(--pill);display:grid;place-items:center;
  border:1.5px solid var(--line);color:var(--text);background:var(--paper);
  transition:.2s var(--ease);
}
.rail-nav button:hover{border-color:var(--ink);background:var(--ink);color:#fff}
.rail-nav button:disabled{opacity:.3;cursor:not-allowed;border-color:var(--line);background:transparent;color:var(--text-3)}
.rail-nav svg{width:19px;height:19px}
.b-dark .rail-nav button{border-color:var(--line-dark);color:#fff;background:transparent}
.b-dark .rail-nav button:hover{background:#fff;color:var(--ink);border-color:#fff}
@media(max-width:900px){ .rail-nav{display:none} }

/* ---------- 9. FEATURED DISH --------------------------------------------- */
.featured{
  display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(28px,5vw,72px);align-items:center;
}
.featured-media{position:relative;display:grid;place-items:center;padding:clamp(10px,3vw,30px)}
.featured-media .glow{
  position:absolute;width:min(86%,420px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(214,31,38,.42),rgba(214,31,38,.08) 55%,transparent 72%);
  filter:blur(6px);
}
.featured-media .ring{
  position:absolute;width:min(78%,380px);aspect-ratio:1;border-radius:50%;
  border:1px dashed rgba(255,255,255,.16);
  animation:spin 46s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.featured-media img{
  position:relative;width:min(84%,400px);
  filter:drop-shadow(0 34px 44px rgba(0,0,0,.55));
  animation:float 7s ease-in-out infinite;
}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}

.featured-body .h-sec{margin:16px 0 0}
.featured-body .ar.big{margin-top:8px}
.featured-body p{margin-top:18px;color:var(--on-dark-2);max-width:52ch}

.ingredients{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
.ingredients .pill{background:rgba(255,255,255,.07);color:var(--on-dark);border:1px solid var(--line-dark)}

.featured-buy{
  display:flex;align-items:center;gap:clamp(16px,3vw,32px);flex-wrap:wrap;
  margin-top:30px;padding-top:26px;border-top:1px solid var(--line-dark);
}
.price-tag{display:flex;flex-direction:column;gap:4px}
.price-tag b{
  font-family:var(--display);font-weight:800;
  font-size:clamp(2.2rem,4.4vw,3rem);line-height:1;color:#fff;letter-spacing:-.03em;
}
.price-tag span{font-size:.78rem;color:var(--on-dark-2);letter-spacing:.04em}
.featured-buy .btn{flex:1 1 200px}

@media(max-width:900px){
  .featured{grid-template-columns:minmax(0,1fr);gap:8px}
  .featured-media{order:-1;padding:0 0 6px}
  .featured-media img{width:min(72%,300px)}
  .featured-media .glow{width:min(72%,300px)}
  .featured-media .ring{width:min(66%,270px)}
  .featured-body p{max-width:100%}
  .featured-buy{gap:18px}
  .featured-buy .btn{flex:1 1 100%}
}

/* ---------- 10. CATEGORIES RAIL ------------------------------------------ */
.cats{
  display:flex;gap:clamp(14px,2.4vw,30px);
  overflow-x:auto;scroll-snap-type:x mandatory;
  padding:6px 0 14px;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.cats::-webkit-scrollbar{display:none}
@media(min-width:1100px){ .cats{justify-content:center} }

.cat{
  flex:0 0 auto;width:118px;scroll-snap-align:center;
  display:flex;flex-direction:column;align-items:center;gap:13px;
  padding:0;text-align:center;
  -webkit-tap-highlight-color:transparent;
}
.cat-ph{
  position:relative;width:104px;height:104px;border-radius:50%;overflow:hidden;
  background:var(--paper);
  box-shadow:0 0 0 3px var(--paper), 0 14px 30px -12px rgba(11,11,12,.35);
  transition:transform .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
.cat-ph::after{
  content:"";position:absolute;inset:0;border-radius:50%;
  box-shadow:inset 0 0 0 2px rgba(214,31,38,0);
  transition:box-shadow .3s var(--ease);
}
.cat-ph img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease-out)}
.cat b{font-size:.9rem;font-weight:700;color:var(--text);letter-spacing:-.01em;transition:color .2s}
.cat small{font-size:.76rem;color:var(--text-3);display:block;margin-top:2px}
.cat:hover .cat-ph{transform:translateY(-8px);box-shadow:0 0 0 3px var(--paper), 0 22px 40px -14px rgba(11,11,12,.45)}
.cat:hover .cat-ph::after{box-shadow:inset 0 0 0 3px var(--red)}
.cat:hover .cat-ph img{transform:scale(1.1)}
.cat:hover b{color:var(--red)}
.cat:active .cat-ph{transform:scale(.95)}

@media(max-width:560px){
  .cats{gap:14px;padding-inline:0}
  .cat{width:92px}
  .cat-ph{width:84px;height:84px}
  .cat b{font-size:.8rem}
  .cat small{display:none}
}

/* ---------- 11. DISH CARDS & RAILS --------------------------------------- */
.rail{
  display:flex;gap:clamp(14px,1.6vw,22px);
  overflow-x:auto;scroll-snap-type:x mandatory;
  padding:6px 4px 18px;margin-inline:-4px;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.rail::-webkit-scrollbar{display:none}
.rail>.dish{flex:0 0 clamp(240px,26vw,300px);scroll-snap-align:start}

.grid{display:grid;gap:clamp(14px,1.6vw,22px)}
.g-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.g-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g-2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:1100px){ .g-4{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media(max-width:820px){ .g-4,.g-3{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media(max-width:820px){ .g-2{grid-template-columns:minmax(0,1fr)} }

.dish{
  position:relative;display:flex;flex-direction:column;
  background:var(--paper);border-radius:var(--r-lg);overflow:hidden;
  border:1px solid var(--line);
  box-shadow:var(--e1);
  transition:transform .32s var(--ease-out), box-shadow .32s var(--ease-out), border-color .3s;
  cursor:pointer;-webkit-tap-highlight-color:transparent;
}
.dish:hover{transform:translateY(-8px);box-shadow:var(--e3);border-color:transparent}
.dish:active{transform:translateY(-2px) scale(.99)}
.b-dark .dish{background:var(--ink-3);border-color:var(--line-dark)}

.dish-pic{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--paper-3)}
.dish-pic img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease-out)}
.dish:hover .dish-pic img{transform:scale(1.08)}
.dish-pic.contain{background:radial-gradient(circle at 50% 45%,#FFF 0%,var(--paper-2) 70%)}
.dish-pic.contain img{object-fit:contain;padding:12px}
.b-dark .dish-pic.contain{background:radial-gradient(circle at 50% 45%,var(--ink-4) 0%,var(--ink-3) 70%)}

.dish-tags{position:absolute;top:12px;left:12px;right:12px;display:flex;justify-content:space-between;align-items:flex-start;gap:8px;z-index:2;pointer-events:none}
.dish-kcal{
  background:rgba(11,11,12,.62);color:#fff;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  font-size:.75rem;font-weight:700;padding:6px 11px;border-radius:var(--pill);
  margin-inline-start:auto;
}

.dish-body{display:flex;flex-direction:column;flex:1;padding:var(--s3);gap:var(--s0)}
.dish-name{font-family:var(--display);font-weight:700;font-size:1.125rem;letter-spacing:-.022em;line-height:1.3;color:var(--text)}
.b-dark .dish-name{color:#fff}
.dish-desc{font-size:.9375rem;font-weight:400;color:var(--text-3);line-height:1.55;flex:1;margin-top:var(--s0);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.b-dark .dish-desc{color:var(--on-dark-2)}
.dish-foot{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);margin-top:var(--s2)}
.dish-price{
  font-family:var(--display);font-weight:800;
  font-size:1.375rem;letter-spacing:-.028em;color:var(--text);display:inline-flex;align-items:baseline;
}
.b-dark .dish-price{color:#fff}
.dish-price sup{font-size:.72rem;font-weight:700;color:var(--text-3);margin-inline-start:3px;top:-.5em}
.add-btn{
  width:48px;height:48px;flex:none;border-radius:var(--pill);
  background:var(--ink);color:#fff;display:grid;place-items:center;
  transition:background .2s var(--ease), transform .2s var(--ease);
}
.add-btn svg{width:20px;height:20px}
.add-btn:hover{background:var(--red);transform:rotate(90deg)}
.add-btn:active{transform:scale(.9)}
.b-dark .add-btn{background:var(--red)}
.b-dark .add-btn:hover{background:#fff;color:var(--ink)}

/* ---------- 12. CATERING ------------------------------------------------- */
.catering{
  position:relative;overflow:hidden;
  border-radius:var(--r-xl);
  background:linear-gradient(120deg,var(--red-800) 0%,var(--red) 52%,var(--red-glow) 130%);
  color:#fff;
  padding:clamp(30px,5vw,58px);
  box-shadow:0 40px 70px -34px rgba(214,31,38,.6);
}
.catering::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(70% 120% at 88% 20%,rgba(255,255,255,.20),transparent 60%);
}
.catering::after{
  content:"";position:absolute;inset:14px;border-radius:calc(var(--r-xl) - 12px);
  border:2px dashed rgba(255,255,255,.30);pointer-events:none;
}
.catering-in{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.1fr) auto minmax(0,.9fr);gap:clamp(22px,4vw,48px);align-items:center}
.catering h2{color:#fff;font-size:clamp(1.8rem,3.6vw,2.8rem)}
.catering h2 em{display:block;font-style:normal;font-weight:600;font-size:.5em;letter-spacing:-.01em;opacity:.88;margin-top:10px;font-family:var(--body)}
.catering-num{text-align:center}
.catering-num b{
  display:block;font-family:var(--display);font-weight:800;
  font-size:clamp(2.6rem,6vw,4.2rem);line-height:.92;letter-spacing:-.04em;
}
.catering-num span{display:block;margin-top:8px;font-size:.76rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;opacity:.86}
.catering-side{display:flex;flex-direction:column;gap:20px;align-items:flex-start}
.catering-truck{width:100%;max-width:220px;color:#fff;opacity:.92}
.catering-truck .wheel{transform-box:fill-box;transform-origin:center;animation:roll 2.4s linear infinite}
@keyframes roll{to{transform:rotate(360deg)}}

@media(max-width:900px){
  .catering-in{grid-template-columns:minmax(0,1fr);text-align:center;gap:24px}
  .catering-side{align-items:center}
  .catering-truck{max-width:180px}
  .catering .btn{width:100%}
}

/* ---------- 13. REVIEWS -------------------------------------------------- */
.rating-block{
  display:flex;align-items:center;gap:18px;
  padding:20px 24px;border-radius:var(--r);
  background:var(--paper);border:1px solid var(--line);box-shadow:var(--e1);
}
.rating-score{font-family:var(--display);font-weight:800;font-size:2.6rem;line-height:1;letter-spacing:-.04em}
.rating-meta b{display:block;font-size:.9rem;font-weight:700}
.rating-meta span{font-size:.82rem;color:var(--text-2)}
.g-logo{width:26px;height:26px;flex:none}

.review{
  display:flex;flex-direction:column;gap:14px;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:26px 24px;box-shadow:var(--e1);
  transition:transform .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
.review:hover{transform:translateY(-5px);box-shadow:var(--e2)}
.review .quote{width:30px;height:30px;color:var(--red);opacity:.28}
.review p{font-size:.98rem;line-height:1.62;color:var(--text);flex:1}
.review-who{display:flex;align-items:center;gap:12px;padding-top:16px;border-top:1px solid var(--line)}
.avatar{
  width:42px;height:42px;flex:none;border-radius:50%;display:grid;place-items:center;
  color:#fff;font-family:var(--display);font-weight:800;font-size:1.05rem;
}
.review-who b{display:block;font-size:.92rem;font-weight:700}
.review-who span{font-size:.8rem;color:var(--text-3)}

.reviews-rail{
  display:flex;gap:clamp(14px,1.6vw,22px);
  overflow-x:auto;scroll-snap-type:x mandatory;
  padding:6px 4px 20px;margin-inline:-4px;
  scrollbar-width:none;
}
.reviews-rail::-webkit-scrollbar{display:none}
.reviews-rail>.review{flex:0 0 min(88vw,380px);scroll-snap-align:center}

/* ---------- 14. FIND THE TRUCK ------------------------------------------- */
.find{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(20px,3vw,38px);align-items:stretch}
.find-panel{
  background:var(--ink-3);border:1px solid var(--line-dark);border-radius:var(--r-lg);
  padding:clamp(24px,3vw,34px);display:flex;flex-direction:column;gap:6px;
}
.find-row{display:flex;gap:16px;padding:18px 0;border-bottom:1px solid var(--line-dark)}
.find-row:last-of-type{border-bottom:0}
.find-ic{
  width:44px;height:44px;flex:none;border-radius:14px;display:grid;place-items:center;
  background:var(--red-tint);color:var(--red-glow);border:1px solid rgba(255,64,70,.24);
}
.find-ic svg{width:21px;height:21px}
.find-row b{display:block;font-size:.76rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--on-dark-2);margin-bottom:5px}
.find-row p,.find-row span{color:#fff;font-size:.98rem;line-height:1.5}
.find-row p a{display:inline-block;padding:9px 0;text-decoration:underline;text-underline-offset:4px}
.hours-list{display:flex;flex-direction:column;gap:6px;margin-top:2px}
.hours-list li{display:flex;justify-content:space-between;gap:14px;font-size:.92rem;color:#fff;padding:3px 0}
.hours-list li span{color:var(--on-dark-2)}
.hours-list li b{font-family:var(--body);font-size:.9rem;letter-spacing:0;text-transform:none;color:#fff;margin:0;font-weight:700}
.find-cta{display:flex;gap:11px;flex-wrap:wrap;margin-top:22px}
.find-cta .btn{flex:1 1 180px}

.find-map{
  position:relative;border-radius:var(--r-lg);overflow:hidden;
  border:1px solid var(--line-dark);min-height:380px;
  background:var(--ink-3);
}
.find-map iframe{position:absolute;inset:0;width:100%;height:100%;border:0;filter:grayscale(.25) contrast(1.05)}
.map-badge{
  position:absolute;z-index:2;left:16px;bottom:16px;
  display:inline-flex;align-items:center;gap:9px;
  background:rgba(11,11,12,.84);color:#fff;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid var(--line-dark);
  padding:11px 16px;border-radius:var(--pill);font-size:.82rem;font-weight:600;
}
.map-badge .live{width:8px;height:8px;border-radius:50%;background:var(--wa);box-shadow:0 0 0 0 rgba(37,211,102,.6);animation:pulse 2s infinite}
.map-badge .live.shut{background:var(--red);box-shadow:none;animation:none}
@keyframes pulse{70%{box-shadow:0 0 0 10px rgba(37,211,102,0)}100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}}

@media(max-width:900px){
  .find{grid-template-columns:minmax(0,1fr)}
  .find-map{min-height:300px;order:-1}
  .find-cta .btn{flex:1 1 100%}
}

/* ---------- 15. FOOTER --------------------------------------------------- */
.site-foot{background:var(--ink);color:var(--on-dark-2);padding-top:clamp(52px,7vw,84px)}
.foot-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1.3fr);gap:clamp(26px,3vw,44px)}
.foot-brand img{height:56px;width:auto;margin-bottom:18px}
.foot-brand p{font-size:.9375rem;max-width:38ch;line-height:1.7}
.socials{display:flex;gap:10px;margin-top:22px}
.socials a{
  width:44px;height:44px;border-radius:var(--pill);display:grid;place-items:center;
  border:1px solid var(--line-dark);color:#fff;
  transition:.22s var(--ease);
}
.socials a:hover{background:var(--red);border-color:var(--red);transform:translateY(-3px)}
.socials svg{width:19px;height:19px}
.foot-col h4{font-size:.8125rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#fff;margin-bottom:var(--s3);font-family:var(--body)}
.foot-col li+li{margin-top:4px}
.foot-col a,.foot-col span{display:inline-block;padding:10px 0;font-size:.94rem;color:var(--on-dark-2);transition:color .2s}
.foot-col a:hover{color:#fff}
.foot-col .ci{display:flex;gap:11px;align-items:flex-start}
.foot-col .ci svg{margin-top:10px}
.foot-col .ci svg{width:17px;height:17px;flex:none;color:var(--red-glow)}
.foot-bottom{
  margin-top:clamp(38px,5vw,58px);padding:24px 0;
  border-top:1px solid var(--line-dark);
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
  font-size:.84rem;
}
@media(max-width:1000px){ .foot-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} }
@media(max-width:600px){
  .foot-grid{grid-template-columns:minmax(0,1fr);gap:34px}
  .foot-bottom{flex-direction:column;text-align:center;align-items:center}
}

/* ---------- 16. PRODUCT SHEET -------------------------------------------- */
/* the scrim lives inside .sheet / .drawer, which already carry the high
   z-index — so it only needs to sit behind their panel (z-index 2). */
.scrim{
  position:fixed;inset:0;z-index:1;
  background:rgba(7,7,9,.6);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  opacity:0;pointer-events:none;transition:opacity .3s var(--ease);
}
.sheet.open .scrim,.drawer.open .scrim{opacity:1;pointer-events:auto}

.sheet{position:fixed;inset:0;z-index:181;pointer-events:none}
.sheet-card{
  position:absolute;z-index:2;
  left:50%;top:50%;transform:translate(-50%,-46%) scale(.97);
  width:min(560px,calc(100vw - 32px));max-height:min(88vh,860px);
  background:var(--paper);border-radius:var(--r-xl);overflow:hidden auto;
  box-shadow:0 50px 100px -30px rgba(0,0,0,.6);
  opacity:0;pointer-events:none;
  transition:opacity .3s var(--ease), transform .38s var(--ease-out);
  overscroll-behavior:contain;
}
.sheet.open .sheet-card{opacity:1;transform:translate(-50%,-50%) scale(1);pointer-events:auto}
.sheet-grip{display:none}
.sheet-close{
  position:absolute;top:14px;inset-inline-end:14px;z-index:3;
  width:40px;height:40px;border-radius:var(--pill);display:grid;place-items:center;
  background:rgba(11,11,12,.6);color:#fff;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.sheet-close svg{width:18px;height:18px}
.sheet-hero{position:relative;aspect-ratio:16/10;background:var(--paper-3);overflow:hidden}
.sheet-hero img{width:100%;height:100%;object-fit:cover}
.sheet-hero.contain{background:radial-gradient(circle at 50% 45%,#fff,var(--paper-2))}
.sheet-hero.contain img{object-fit:contain;padding:18px}
.sheet-badge{position:absolute;top:14px;inset-inline-start:14px;z-index:2}
.sheet-in{padding:22px 24px 26px}
.sheet-in h3{font-size:1.55rem}
.sheet-desc{margin-top:12px;color:var(--text-2);font-size:.96rem;line-height:1.6}
.sheet-facts{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}

.sheet-block{margin-top:24px}
.sheet-block>label{display:block;font-size:.76rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--text-3);margin-bottom:12px}
.sizes{display:flex;gap:9px;flex-wrap:wrap}
.size{
  display:inline-flex;align-items:center;gap:9px;
  border:1.5px solid var(--line);background:var(--paper);
  padding:12px 16px;border-radius:var(--r-sm);
  font-size:.9rem;font-weight:600;
  transition:.2s var(--ease);min-height:48px;
}
.size .sp{font-weight:800;font-variant-numeric:tabular-nums;color:var(--text-2)}
.size:hover{border-color:var(--text-3)}
.size.on{border-color:var(--red);background:var(--red-tint);color:var(--red)}
.size.on .sp{color:var(--red)}

.drinks{display:flex;flex-direction:column;gap:9px}
.drink{
  display:flex;align-items:center;gap:13px;
  padding:9px 13px 9px 9px;border-radius:var(--r-sm);
  border:1.5px solid var(--line);transition:.2s var(--ease);
}
.drink img{width:48px;height:48px;border-radius:11px;object-fit:cover;flex:none;background:var(--paper-2)}
.drink .dn{flex:1;font-size:.9rem;font-weight:600}
.drink .dp{font-weight:800;font-variant-numeric:tabular-nums;font-size:.9rem}
.drink .dadd{width:42px;height:42px;flex:none;border-radius:var(--pill);background:var(--ink);color:#fff;display:grid;place-items:center;font-weight:700;transition:.2s}
.drink .dadd:hover{background:var(--red)}
.drink.done{border-color:var(--wa);background:rgba(37,211,102,.08)}
.drink.done .dadd{background:var(--wa);color:#06351A}

.sheet-buy{
  display:flex;align-items:center;gap:12px;margin-top:26px;
  position:sticky;bottom:0;background:var(--paper);padding-top:14px;
}
.qty{display:flex;align-items:center;gap:4px;border:1.5px solid var(--line);border-radius:var(--pill);padding:4px;flex:none}
.qty button{width:42px;height:42px;border-radius:var(--pill);display:grid;place-items:center;font-size:1.2rem;font-weight:600;transition:.2s}
.qty button:hover{background:var(--paper-2)}
.qty b{min-width:30px;text-align:center;font-weight:800;font-variant-numeric:tabular-nums}
.sheet-buy .btn{flex:1}

/* mobile: true bottom sheet */
@media(max-width:640px){
  .sheet-card{
    left:0;right:0;top:auto;bottom:0;width:100%;
    max-height:92vh;
    border-radius:var(--r-xl) var(--r-xl) 0 0;
    transform:translateY(100%);
    padding-bottom:env(safe-area-inset-bottom,0px);
  }
  .sheet.open .sheet-card{transform:translateY(0)}
  .sheet-grip{display:block;position:absolute;top:9px;left:50%;transform:translateX(-50%);z-index:4;width:44px;height:5px;border-radius:5px;background:rgba(255,255,255,.7)}
  .sheet-hero{aspect-ratio:16/9}
  .sheet-in{padding:20px 18px 24px}
  .sheet-buy{padding-bottom:8px}
}

/* ---------- 17. CART DRAWER & SLIP --------------------------------------- */
.drawer{position:fixed;inset:0;z-index:182;pointer-events:none}
.drawer-panel{
  position:absolute;z-index:2;top:0;bottom:0;inset-inline-end:0;
  width:min(440px,100vw);
  background:var(--paper);
  box-shadow:-30px 0 80px -30px rgba(0,0,0,.5);
  transform:translateX(100%);opacity:0;pointer-events:none;
  transition:transform .4s var(--ease-out), opacity .3s;
  display:flex;flex-direction:column;
  padding:0 20px calc(20px + env(safe-area-inset-bottom,0px));
  overflow-y:auto;overscroll-behavior:contain;
}
[dir="rtl"] .drawer-panel{transform:translateX(-100%);box-shadow:30px 0 80px -30px rgba(0,0,0,.5)}
.drawer.open .drawer-panel{transform:none;opacity:1;pointer-events:auto}
.drawer-head{
  position:sticky;top:0;z-index:2;background:var(--paper);
  display:flex;align-items:center;justify-content:space-between;
  padding:20px 0 14px;border-bottom:1px solid var(--line);margin-bottom:18px;
}
.drawer-head h3{font-size:1.3rem}
.drawer-close{width:40px;height:40px;border-radius:var(--pill);display:grid;place-items:center;background:var(--paper-2);transition:.2s}
.drawer-close:hover{background:var(--paper-3)}
.drawer-close svg{width:18px;height:18px}
.drawer-foot{position:sticky;bottom:0;background:var(--paper);padding:14px 0 0;margin-top:auto}

/* the order slip — a receipt, because that is what the truck hands you */
.slip{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  padding:22px 20px;box-shadow:var(--e1);
}
.slip-title{font-family:var(--display);font-weight:800;font-size:1rem;letter-spacing:.06em;text-align:center;text-transform:uppercase}
.slip-sub{text-align:center;font-size:.78rem;color:var(--text-3);margin-top:5px;letter-spacing:.08em;text-transform:uppercase}
.slip-dash{height:1px;margin:16px 0;background:repeating-linear-gradient(90deg,var(--line) 0 7px,transparent 7px 14px)}
.slip-empty{text-align:center;color:var(--text-3);font-size:.92rem;padding:14px 0 20px;line-height:1.7}
.slip-li{display:grid;grid-template-columns:auto 1fr auto auto;gap:11px;align-items:start;padding:11px 0}
.slip-li+.slip-li{border-top:1px solid var(--paper-3)}
.slip-li .q{font-weight:800;font-variant-numeric:tabular-nums;color:var(--red)}
.slip-li .nm{font-size:.92rem;font-weight:600;line-height:1.35}
.slip-li .nm small{display:block;font-size:.79rem;color:var(--text-3);font-weight:400;margin-top:3px}
.qbox{display:inline-flex;gap:6px;margin-top:9px}
.qbox button{width:40px;height:40px;border-radius:10px;background:var(--paper-2);display:grid;place-items:center;font-weight:700;font-size:.95rem;transition:.18s}
.qbox button:hover{background:var(--ink);color:#fff}
.slip-li .amt{font-weight:800;font-variant-numeric:tabular-nums;font-size:.94rem}
.slip-li .rm{width:36px;height:36px;border-radius:var(--pill);color:var(--text-3);display:grid;place-items:center;font-size:1.1rem;transition:.18s}
.slip-li .rm:hover{background:var(--red-tint);color:var(--red)}
.slip-total{display:flex;justify-content:space-between;align-items:baseline;font-family:var(--display);font-weight:800;font-size:1.3rem}
.slip-stamp{text-align:center;font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3)}
.slip-li.fee .nm{color:var(--text-2)}

/* ---------- 18. MOBILE TAB BAR + STICKY CART ----------------------------- */
.tabbar{
  display:none;
  position:fixed;left:0;right:0;bottom:0;z-index:150;
  height:var(--tabbar-h);
  padding-bottom:env(safe-area-inset-bottom,0px);
  background:rgba(11,11,12,.9);
  backdrop-filter:blur(24px) saturate(1.6);-webkit-backdrop-filter:blur(24px) saturate(1.6);
  border-top:1px solid var(--line-dark);
}
.tabbar-in{height:64px;display:grid;grid-template-columns:repeat(5,1fr)}
.tab-item{
  position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  color:rgba(255,255,255,.62);font-size:.75rem;font-weight:500;letter-spacing:-.005em;
  transition:color .2s var(--ease);-webkit-tap-highlight-color:transparent;
}
.tab-item svg{width:22px;height:22px;transition:transform .28s var(--ease-out)}
.tab-item.on{color:#fff}
.tab-item.on svg{color:var(--red-glow);transform:translateY(-2px)}
.tab-item.on::before{content:"";position:absolute;top:0;width:26px;height:3px;border-radius:0 0 4px 4px;background:var(--red-glow)}
.tab-item:active svg{transform:scale(.88)}
.tab-badge{
  position:absolute;top:6px;inset-inline-end:calc(50% - 22px);
  min-width:18px;height:18px;padding:0 5px;border-radius:var(--pill);
  background:var(--red);color:#fff;font-size:.64rem;font-weight:800;
  display:grid;place-items:center;border:2px solid #101014;
  transform:scale(0);transition:transform .3s var(--ease-out);
}
.tab-item.has .tab-badge{transform:scale(1)}

/* sticky cart bar rides above the tab bar */
.cartbar{
  display:none;
  position:fixed;left:10px;right:10px;z-index:149;
  bottom:calc(var(--tabbar-h) + 10px);
  align-items:center;gap:12px;
  padding:11px 12px 11px 18px;border-radius:var(--pill);
  background:var(--ink-3);color:#fff;
  border:1px solid var(--line-dark);
  box-shadow:0 20px 44px -18px rgba(0,0,0,.7);
  transform:translateY(140%);opacity:0;pointer-events:none;
  transition:transform .42s var(--ease-out), opacity .3s var(--ease);
}
.cartbar.on{transform:none;opacity:1;pointer-events:auto}
.cartbar-info{flex:1;min-width:0}
.cartbar-info b{display:block;font-size:.86rem;font-weight:700}
.cartbar-info span{font-size:.78rem;color:var(--on-dark-2)}
.cartbar .btn{padding:12px 20px;min-height:44px;font-size:.82rem;flex:none}

@media(max-width:900px){
  .tabbar{display:block}
  .cartbar{display:flex}
}

/* ---------- 19. MENU PAGE ------------------------------------------------ */
.page-head{padding:calc(var(--nav-h) + clamp(44px,7vw,84px)) 0 clamp(40px,6vw,72px);position:relative;overflow:hidden}
.page-head::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 90% at 50% 0%,rgba(214,31,38,.24),transparent 62%);
}
.page-head .wrap{position:relative;z-index:1;text-align:center}
.page-head .eyebrow{margin-bottom:18px}
.page-head p{max-width:56ch;margin:18px auto 0;color:var(--on-dark-2)}

.tabs-bar{
  position:sticky;top:66px;z-index:90;
  background:rgba(255,255,255,.9);
  backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);
  border-bottom:1px solid var(--line);
}
.tabs{display:flex;gap:8px;overflow-x:auto;padding:14px 0;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{
  flex:0 0 auto;
  border:1.5px solid var(--line);background:var(--paper);
  border-radius:var(--pill);padding:10px 18px;
  font-size:.84rem;font-weight:600;white-space:nowrap;
  transition:.2s var(--ease);min-height:42px;
}
.tab:hover{border-color:var(--ink)}
.tab.on{background:var(--ink);color:#fff;border-color:var(--ink)}

.cat-block+.cat-block{margin-top:clamp(44px,5vw,68px)}
.cat-bar{display:flex;align-items:center;gap:16px;margin-bottom:22px}
.cat-bar h3{font-size:clamp(1.4rem,2.6vw,1.9rem);text-transform:uppercase}
.cat-bar .ln{flex:1;height:1px;background:var(--line)}
.cat-bar .cnt{font-size:.78rem;color:var(--text-3);font-weight:600}

/* ---------- 20. ORDER PAGE ----------------------------------------------- */
.order-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(20px,3vw,38px);align-items:start}
@media(max-width:900px){ .order-grid{grid-template-columns:minmax(0,1fr)} }

.card{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:var(--s4);box-shadow:var(--e1);
}
.field{margin-bottom:var(--s3)}
.field>label{display:block;font-size:.875rem;font-weight:600;letter-spacing:-.005em;color:var(--text);margin-bottom:var(--s1)}
.field input,.field select,.field textarea{
  width:100%;background:var(--paper-2);border:1.5px solid transparent;
  border-radius:var(--r-sm);padding:16px;font-size:1rem;font-weight:500;
  transition:.2s var(--ease);min-height:56px;
}
.field textarea{min-height:104px;resize:vertical;line-height:1.6;font-weight:400}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;background:var(--paper);border-color:var(--red);box-shadow:0 0 0 4px var(--red-tint);
}
.field input::placeholder,.field textarea::placeholder{color:var(--text-3)}
.hint{font-size:.875rem;color:var(--text-3);margin-top:var(--s1);line-height:1.55}
.err{display:none;font-size:.875rem;color:var(--red);font-weight:500;margin-top:var(--s1);line-height:1.5}
.err.on{display:block}

.seg{display:flex;gap:8px;background:var(--paper-2);padding:5px;border-radius:var(--pill)}
.seg button{
  flex:1;border-radius:var(--pill);padding:14px 16px;font-size:.9375rem;font-weight:500;
  color:var(--text-2);transition:.24s var(--ease);min-height:48px;letter-spacing:-.01em;
}
.seg button.on{background:var(--paper);color:var(--text);box-shadow:var(--e1);font-weight:600}

/* ---------- 21. ABOUT / CONTACT ------------------------------------------ */
.story{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(28px,4vw,58px);align-items:start}
.story p+p{margin-top:16px;color:var(--text-2)}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(86px,1fr));gap:14px;margin-top:32px}
.fact{background:var(--paper-2);border-radius:var(--r);padding:20px 18px;text-align:center}
.fact b{display:block;font-family:var(--display);font-weight:800;font-size:1.8rem;letter-spacing:-.03em}
.fact span{font-size:.78rem;color:var(--text-2);letter-spacing:.06em;text-transform:uppercase;font-weight:600}
.shots{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.shots img{width:100%;height:100%;object-fit:cover;border-radius:var(--r);box-shadow:var(--e2)}
.shots img.tall{grid-column:1/-1;aspect-ratio:16/10}
.shots img:not(.tall){aspect-ratio:1}
@media(max-width:900px){ .story{grid-template-columns:minmax(0,1fr)} .facts{gap:10px} }

.about-truck{overflow:hidden;padding-bottom:12px}
.about-truck img{width:min(100%,860px);margin-inline:auto;filter:drop-shadow(0 30px 40px rgba(0,0,0,.5))}
.contact-big{
  display:block;padding-block:4px;font-family:var(--display);font-weight:800;
  font-size:clamp(1.5rem,3vw,2rem);letter-spacing:-.02em;color:var(--red);margin-top:8px;
}
.hours-card li{display:flex;justify-content:space-between;gap:14px;padding:13px 0;border-bottom:1px solid var(--line);font-size:.94rem}
.hours-card li:last-child{border-bottom:0}
.hours-card li b{font-family:var(--body);font-variant-numeric:tabular-nums}

/* ---------- 22. CHAT ----------------------------------------------------- */
.chatbox{
  position:fixed;z-index:170;
  inset-inline-end:20px;bottom:88px;
  width:min(378px,calc(100vw - 32px));height:min(540px,70vh);
  background:var(--paper);border-radius:var(--r-lg);overflow:hidden;
  display:flex;flex-direction:column;
  box-shadow:0 40px 90px -28px rgba(0,0,0,.5);
  border:1px solid var(--line);
  transform:translateY(18px) scale(.96);opacity:0;pointer-events:none;
  transform-origin:bottom right;
  transition:.32s var(--ease-out);
}
.chatbox.open{transform:none;opacity:1;pointer-events:auto}
.chat-head{display:flex;align-items:center;gap:12px;padding:15px 16px;background:var(--ink);color:#fff}
.chat-head img{width:38px;height:38px;object-fit:contain;border-radius:11px;background:var(--ink-3);padding:4px}
.chat-head b{display:block;font-size:.92rem}
.chat-head span{font-size:.78rem;color:var(--on-dark-2)}
.chat-head .ch-t{flex:1;min-width:0}
.chat-x{width:34px;height:34px;border-radius:var(--pill);display:grid;place-items:center;color:#fff;transition:.2s}
.chat-x:hover{background:rgba(255,255,255,.12)}
.chat-log{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px;background:var(--paper-2);overscroll-behavior:contain}
.msg{max-width:84%;padding:11px 14px;border-radius:16px;font-size:.9rem;line-height:1.5;white-space:pre-line}
.msg.bot{background:var(--paper);border:1px solid var(--line);border-start-start-radius:5px;align-self:flex-start}
.msg.me{background:var(--red);color:#fff;border-end-end-radius:5px;align-self:flex-end}
.msg a{text-decoration:underline;font-weight:600}
.chat-chips{display:flex;gap:7px;overflow-x:auto;padding:11px 14px;background:var(--paper);border-top:1px solid var(--line);scrollbar-width:none}
.chat-chips::-webkit-scrollbar{display:none}
.chat-chips button{flex:none;border:1.5px solid var(--line);border-radius:var(--pill);padding:8px 14px;font-size:.8rem;font-weight:600;transition:.2s;white-space:nowrap}
.chat-chips button:hover{border-color:var(--red);color:var(--red)}
.chat-in{display:flex;gap:9px;padding:12px 14px;background:var(--paper);border-top:1px solid var(--line)}
.chat-in input{flex:1;background:var(--paper-2);border-radius:var(--pill);padding:12px 16px;font-size:.92rem;min-height:46px}
.chat-in input:focus{outline:none;box-shadow:0 0 0 3px var(--red-tint)}
.chat-in button{width:46px;height:46px;flex:none;border-radius:var(--pill);background:var(--red);color:#fff;display:grid;place-items:center}
.chat-in svg{width:19px;height:19px}
@media(max-width:640px){
  .chatbox{inset-inline:12px;bottom:calc(var(--tabbar-h) + 74px);width:auto;height:min(500px,62vh)}
}

/* ---------- 23. FLOATING UTILITIES --------------------------------------- */
.float-col{
  position:fixed;z-index:160;inset-inline-end:20px;bottom:20px;
  display:flex;flex-direction:column;gap:11px;
  transition:transform .35s var(--ease-out), opacity .3s;
}
.float-col.tuck{transform:translateY(160%);opacity:0;pointer-events:none}
.fbtn{
  width:54px;height:54px;border-radius:var(--pill);display:grid;place-items:center;
  box-shadow:var(--e3);transition:transform .24s var(--ease), background .2s;
}
.fbtn svg{width:24px;height:24px}
.fbtn:hover{transform:translateY(-3px) scale(1.05)}
.fbtn:active{transform:scale(.92)}
.fbtn-wa{background:var(--wa);color:#06351A}
.fbtn-chat{background:var(--ink);color:#fff;position:relative}
.fbtn-chat .dot{position:absolute;top:2px;inset-inline-end:2px;width:12px;height:12px;border-radius:50%;background:var(--red);border:2px solid var(--paper)}
.fbtn-chat.seen .dot{display:none}
.fbtn-top{background:var(--paper);color:var(--ink);border:1px solid var(--line);opacity:0;pointer-events:none;transform:scale(.7)}
.fbtn-top.on{opacity:1;pointer-events:auto;transform:none}
@media(max-width:900px){
  .float-col{bottom:calc(var(--tabbar-h) + 12px);inset-inline-end:12px}
  .float-col.raised{bottom:calc(var(--tabbar-h) + 78px)}
  .fbtn{width:48px;height:48px}
  .fbtn-wa,.fbtn-top{display:none}
}

.toast{
  position:fixed;z-index:200;left:50%;bottom:96px;
  transform:translateX(-50%) translateY(24px);
  display:flex;align-items:center;gap:9px;
  background:var(--ink);color:#fff;
  padding:13px 20px;border-radius:var(--pill);
  font-size:.88rem;font-weight:600;
  box-shadow:var(--e3);opacity:0;pointer-events:none;
  transition:.3s var(--ease-out);max-width:calc(100vw - 32px);
}
.toast.on{opacity:1;transform:translateX(-50%) translateY(0)}
.toast svg{width:18px;height:18px;color:var(--wa);flex:none}
@media(max-width:900px){ .toast{bottom:calc(var(--tabbar-h) + 78px)} }

/* ---------- 24. MOTION, PAGES & RTL -------------------------------------- */
.page{display:none}
.page.on{display:block}
main{min-height:60vh}

/* fallback reveal (used when GSAP is unavailable) */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)}
.reveal.in{opacity:1;transform:none}
.js-gsap .reveal{opacity:1;transform:none;transition:none}

[dir="rtl"] body{font-family:var(--ar)}
[dir="rtl"] h1,[dir="rtl"] h2,[dir="rtl"] h3,[dir="rtl"] h4{font-family:var(--ar);font-weight:800;letter-spacing:0}
[dir="rtl"] .eyebrow{letter-spacing:.06em}
[dir="rtl"] .strip-item{letter-spacing:.02em;font-family:var(--ar)}
[dir="rtl"] .strip-track{animation-direction:reverse}
[dir="rtl"] .hero-line,[dir="rtl"] .dish-name,[dir="rtl"] .price-tag b,
[dir="rtl"] .catering-num b,[dir="rtl"] .fact b,[dir="rtl"] .rating-score{font-family:var(--ar);letter-spacing:0}
[dir="rtl"] .ar{font-family:var(--body)}
[dir="rtl"] .chatbox{transform-origin:bottom left}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important;
  }
  .reveal{opacity:1;transform:none}
  .hero-plate{transform:none}
  .strip-track{animation:none}
}

/* print — the slip should print cleanly */
@media print{
  .site-head,.tabbar,.cartbar,.float-col,.chatbox,.hero,.strip,.site-foot,.sheet,.drawer{display:none!important}
  body{padding:0}
}

/* ---------- 25. CHECKOUT ------------------------------------------------- */
.co-col{display:flex;flex-direction:column;gap:var(--s3)}
.co-side{display:flex;flex-direction:column;gap:var(--s2);position:sticky;top:88px}
.co-card{padding:var(--s4)}

.co-head{display:flex;align-items:center;gap:var(--s2);margin-bottom:var(--s3)}
.co-head h3{font-size:1.125rem;font-weight:700;text-transform:none;letter-spacing:-.022em}
.co-step{
  width:32px;height:32px;flex:none;border-radius:var(--pill);
  display:grid;place-items:center;
  background:var(--ink);color:#fff;
  font-family:var(--display);font-weight:700;font-size:.9375rem;
  font-variant-numeric:tabular-nums;
}
.co-sub{font-size:.9375rem;color:var(--text-3);margin:calc(var(--s2) * -1) 0 var(--s3);line-height:1.6}
.co-mt{margin-top:20px}

.co-pickup-note{
  display:flex;gap:10px;align-items:flex-start;
  margin-top:16px;padding:14px 16px;border-radius:var(--r-sm);
  background:var(--paper-2);color:var(--text-2);font-size:.9rem;line-height:1.5;
}
.co-pickup-note svg{width:18px;height:18px;flex:none;margin-top:2px;color:var(--red)}

/* radio rows (now / scheduled) */
.co-radios{display:flex;flex-direction:column;border:1.5px solid var(--line);border-radius:var(--r);overflow:hidden}
.co-radio{
  display:flex;align-items:center;gap:14px;width:100%;text-align:start;
  padding:var(--s3);min-height:80px;transition:background .2s var(--ease);
}
.co-radio+.co-radio{border-top:1.5px solid var(--line)}
.co-radio:hover{background:var(--paper-2)}
.co-ic{width:40px;height:40px;flex:none;border-radius:12px;display:grid;place-items:center;background:var(--paper-2);color:var(--text-2)}
.co-ic svg{width:20px;height:20px}
.co-radio.on .co-ic{background:var(--red-tint);color:var(--red)}
.co-radio-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.co-radio-t b{font-size:1rem;font-weight:600;letter-spacing:-.012em}
.co-radio-t span{font-size:.9375rem;color:var(--text-3);font-variant-numeric:tabular-nums}
.co-dot{
  width:24px;height:24px;flex:none;border-radius:50%;
  border:2px solid var(--line);position:relative;transition:.2s var(--ease);
}
.co-radio.on .co-dot{border-color:var(--red);background:var(--red);box-shadow:inset 0 0 0 4px #fff}

.co-sched{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;margin-top:18px}
.co-sched .field{margin-bottom:0}
.co-sched .err{grid-column:1/-1}
@media(max-width:480px){ .co-sched{grid-template-columns:minmax(0,1fr)} }

.co-note{
  display:flex;gap:10px;align-items:flex-start;
  margin-top:16px;padding:14px 16px;border-radius:var(--r-sm);
  background:rgba(214,31,38,.07);color:var(--text-2);
  font-size:.88rem;line-height:1.55;
}
.co-note b{color:var(--text)}
.co-note:empty{display:none}

/* toggle chips (delivery instructions) */
.chip-row{display:flex;flex-wrap:wrap;gap:9px}
.chip-t{
  display:inline-flex;align-items:center;gap:var(--s1);
  border:1.5px solid var(--line);background:var(--paper);
  padding:12px 16px;border-radius:var(--pill);min-height:48px;
  font-size:.9375rem;font-weight:500;color:var(--text-2);
  transition:.2s var(--ease);
}
.chip-t svg{width:17px;height:17px;flex:none}
.chip-t:hover{border-color:var(--text-3)}
.chip-t.on{border-color:var(--red);background:var(--red-tint);color:var(--red)}

/* vouchers */
.voucher-in{display:flex;gap:9px}
.voucher-in input{
  flex:1;min-width:0;background:var(--paper-2);border:1.5px solid transparent;
  border-radius:var(--r-sm);padding:14px 16px;font-size:.98rem;min-height:52px;
  text-transform:uppercase;letter-spacing:.06em;font-weight:600;
}
.voucher-in input::placeholder{text-transform:none;letter-spacing:0;font-weight:400;color:var(--text-3)}
.voucher-in input:focus{outline:none;background:var(--paper);border-color:var(--red);box-shadow:0 0 0 4px var(--red-tint)}
.voucher-in .btn{flex:none;min-height:52px}
.e-ok{color:var(--wa)!important}

.offers{display:flex;gap:11px;overflow-x:auto;margin-top:16px;padding-bottom:4px;scrollbar-width:none}
.offers:empty{display:none}
.offers::-webkit-scrollbar{display:none}
.offer{
  flex:0 0 clamp(210px,64vw,250px);
  display:flex;flex-direction:column;gap:5px;
  border:1.5px dashed var(--line);border-radius:var(--r);
  padding:15px 16px;text-align:start;transition:.2s var(--ease);
  background:var(--paper);
}
.offer:hover{border-color:var(--red);background:var(--red-tint)}
.offer.on{border-style:solid;border-color:var(--red);background:var(--red-tint)}
.offer-code{
  align-self:flex-start;font-family:var(--display);font-weight:800;font-size:.78rem;
  letter-spacing:.08em;background:var(--ink);color:#fff;padding:5px 10px;border-radius:6px;
}
.offer.on .offer-code{background:var(--red)}
.offer b{font-size:.9375rem;font-weight:600;line-height:1.4;letter-spacing:-.01em}
.offer small{font-size:.8125rem;color:var(--text-3)}

/* tip */
.tip-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(76px,1fr));gap:9px}
.tip{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s0);
  border:1.5px solid var(--line);background:var(--paper);
  border-radius:var(--r-sm);padding:var(--s2) var(--s1);min-height:72px;
  font-weight:600;font-size:1rem;transition:.2s var(--ease);
}
.tip small{font-size:.76rem;font-weight:500;color:var(--text-3);font-variant-numeric:tabular-nums}
.tip:hover{border-color:var(--text-3)}
.tip.on{border-color:var(--red);background:var(--red-tint);color:var(--red)}
.tip.on small{color:var(--red)}
.tip-best{
  position:absolute;inset-inline:0;bottom:0;
  background:var(--red);color:#fff;font-size:.72rem;font-weight:700;
  letter-spacing:.03em;padding:3px 0;
}
.tip{position:relative;overflow:hidden}
.tip.has-flag{padding-bottom:26px}

.tip-custom{
  display:flex;align-items:center;gap:6px;margin-top:11px;
  border:1.5px solid var(--red);border-radius:var(--r-sm);
  padding:0 16px;background:var(--red-tint);color:var(--red);
  font-weight:800;
}
.tip-custom input{flex:1;min-width:0;padding:14px 0;font-weight:800;font-size:1.05rem;color:var(--text);background:none}
.tip-custom input:focus{outline:none}

.co-check{display:flex;align-items:center;gap:var(--s2);margin-top:var(--s3);font-size:.9375rem;color:var(--text-2);cursor:pointer}
.co-check input{width:22px;height:22px;flex:none;accent-color:var(--red)}

/* summary */
.summary{padding:var(--s4)}
.sum-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:6px}
.sum-h h3{font-size:1.125rem;font-weight:700;text-transform:none;letter-spacing:-.022em}
.sum-h span{font-size:.875rem;color:var(--text-3);font-weight:500}
.sum-vat{font-size:.875rem;color:var(--text-3);margin-bottom:var(--s3)}
.sum-line{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s2);padding:var(--s1) 0;font-size:.9375rem}
.sum-line span:first-child{color:var(--text-2)}
.sum-line b{font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--text)}
.sum-line.free b{color:var(--wa)}
.sum-line.free s{color:var(--text-3);font-weight:400;margin-inline-end:8px}
.sum-line.cut span:first-child,.sum-line.cut b{color:var(--red)}
.sum-rule{height:1px;background:var(--line);margin:10px 0}
.sum-save{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  background:var(--red-tint);color:var(--red);
  border-radius:var(--r-sm);padding:13px 16px;margin:12px 0;
  font-weight:700;font-size:.9375rem;
}
.sum-save b{font-variant-numeric:tabular-nums}
.sum-total{
  display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  font-family:var(--display);font-weight:800;
  font-size:1.625rem;letter-spacing:-.03em;padding-top:var(--s1);
}
.sum-total b{font-variant-numeric:tabular-nums}
.sum-pay{
  display:flex;gap:var(--s1);align-items:center;
  margin-top:var(--s3);padding-top:var(--s3);border-top:1px dashed var(--line);
  font-size:.875rem;color:var(--text-3);
}
.sum-pay svg{width:17px;height:17px;flex:none;color:var(--red)}
.sum-items{margin-bottom:8px}
.sum-item{display:flex;gap:var(--s2);font-size:.9375rem;padding:var(--s0) 0;color:var(--text-2)}
.sum-item .q{font-weight:800;color:var(--red);font-variant-numeric:tabular-nums}
.sum-item .n{flex:1;min-width:0}
.sum-item .a{font-weight:700;font-variant-numeric:tabular-nums;color:var(--text)}
.sum-empty{text-align:center;color:var(--text-3);font-size:.92rem;padding:18px 0}

.co-send{margin-top:2px}

/* sticky checkout bar — only on the order route */
.checkout-bar{
  display:none;
  position:fixed;left:10px;right:10px;z-index:149;
  bottom:calc(var(--tabbar-h) + 10px);
  align-items:center;gap:12px;
  padding:10px 10px 10px 18px;border-radius:var(--pill);
  background:var(--ink);color:#fff;
  box-shadow:0 20px 44px -18px rgba(0,0,0,.65);
}
.checkout-bar.on{display:flex}
.cb-total{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.cb-total span{font-size:.8125rem;color:var(--on-dark-2)}
.cb-total b{font-family:var(--display);font-weight:800;font-size:1.25rem;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.checkout-bar .btn{flex:none;min-height:46px;padding:12px 20px;font-size:.86rem}
@media(min-width:901px){ .checkout-bar{display:none!important} }

@media(max-width:900px){
  .co-side{position:static}
  .co-side .co-send,.co-side .hint{display:none}
  #p-order .band.sec{padding-bottom:calc(var(--tabbar-h) + 84px)}
}
.co-radio.is-shut{opacity:.5;cursor:not-allowed}
.co-radio.is-shut:hover{background:transparent}
.co-radio.is-shut .co-radio-t span{color:var(--red);font-weight:600}

/* ---------- 26. DELIVERY LOCATION (Leaflet) ------------------------------ */
/* Address type cards — Home / Work / Other */
.addr-types{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s2)}
.addr-type{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s1);
  padding:var(--s3) var(--s1);min-height:104px;
  border:1.5px solid var(--line);border-radius:var(--r);background:var(--paper);
  transition:transform .28s var(--ease-out), border-color .2s var(--ease), background .2s var(--ease);
}
.addr-type b{font-size:.9375rem;font-weight:600;color:var(--text-2);letter-spacing:-.01em;transition:color .2s}
.at-ic{
  width:44px;height:44px;border-radius:var(--r-sm);display:grid;place-items:center;
  background:var(--paper-2);color:var(--text-3);
  transition:background .28s var(--ease), color .28s var(--ease), transform .34s var(--ease-out);
}
.at-ic svg{width:22px;height:22px}
.addr-type:hover{border-color:var(--text-3);transform:translateY(-2px)}
.addr-type.on{border-color:var(--red);background:var(--red-tint)}
.addr-type.on b{color:var(--red)}
.addr-type.on .at-ic{background:var(--red);color:#fff;transform:scale(1.06)}
.addr-type:active{transform:scale(.97)}

/* Map */
.map-wrap{margin-top:var(--s3)}
.map-box{
  height:300px;border-radius:var(--r);overflow:hidden;
  background:var(--ink-3);border:1px solid var(--line);
  z-index:0;                        /* keep Leaflet panes under our overlays */
}
.map-box.is-off{display:grid;place-items:center;padding:var(--s4);text-align:center}
.map-off-note{color:var(--on-dark-2);font-size:.9375rem;line-height:1.6;max-width:34ch}
@media(max-width:560px){ .map-box{height:260px} }

/* Leaflet chrome, restyled to match the site */
.leaflet-container{font-family:var(--body);background:var(--ink-3)}
.leaflet-control-zoom a{
  border-radius:10px!important;border:0!important;
  background:rgba(11,11,12,.86)!important;color:#fff!important;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  width:36px!important;height:36px!important;line-height:36px!important;
  font-size:1.15rem!important;font-weight:600;
}
.leaflet-control-zoom a:hover{background:var(--red)!important}
.leaflet-control-zoom{border:0!important;box-shadow:none!important;display:flex;flex-direction:column;gap:6px}
.leaflet-control-attribution{
  background:rgba(11,11,12,.7)!important;color:var(--on-dark-2)!important;
  font-size:10px!important;padding:2px 8px!important;border-radius:8px 0 0 0;
}
.leaflet-control-attribution a{color:var(--on-dark-2)!important}

/* the pin */
.pin-wrap{background:none!important;border:0!important}
.pin{
  position:relative;width:34px;height:44px;
  filter:drop-shadow(0 6px 10px rgba(0,0,0,.45));
  animation:pin-drop .45s var(--ease-out);
  transform-origin:50% 100%;
}
.pin svg{width:34px;height:44px;color:var(--red)}
.pin::after{
  content:"";position:absolute;left:50%;bottom:-5px;transform:translateX(-50%);
  width:16px;height:6px;border-radius:50%;background:rgba(0,0,0,.35);
}
@keyframes pin-drop{
  0%{transform:translateY(-22px) scale(.85);opacity:0}
  60%{transform:translateY(3px) scale(1.03);opacity:1}
  100%{transform:none;opacity:1}
}
.pin.dragging{animation:none;transform:translateY(-6px) scale(1.08)}
.pin-pulse{
  position:absolute;left:50%;top:50%;width:26px;height:26px;margin:-13px 0 0 -13px;
  border-radius:50%;background:rgba(214,31,38,.35);animation:pin-pulse 2.2s var(--ease) infinite;
}
@keyframes pin-pulse{0%{transform:scale(.6);opacity:.8}100%{transform:scale(2.6);opacity:0}}

.map-locate{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s1);
  width:100%;margin-top:var(--s2);min-height:52px;
  padding:14px 24px;border-radius:var(--pill);
  background:var(--ink);color:#fff;
  font-size:.9375rem;font-weight:600;letter-spacing:-.01em;
  transition:background .2s var(--ease), transform .2s var(--ease);
}
.map-locate svg{width:19px;height:19px;flex:none}
.map-locate:hover{background:var(--red)}
.map-locate:active{transform:scale(.98)}
.map-locate.busy{opacity:.7;pointer-events:none}
.map-locate.busy svg{animation:spin 1s linear infinite}

.map-hint{margin-top:var(--s2);font-size:.875rem;color:var(--text-3);line-height:1.55}
.map-hint.err{color:var(--red);font-weight:500}
.map-coords{
  margin-top:var(--s1);font-size:.8125rem;color:var(--text-3);
  font-variant-numeric:tabular-nums;display:flex;align-items:center;gap:var(--s1);
}
.map-coords b{font-weight:600;color:var(--text-2)}
.map-coords a{display:inline-block;padding:10px 0;text-decoration:underline;text-underline-offset:3px;color:var(--red);font-weight:600}

/* address lookup spinner sitting inside the textarea's corner */
.addr-loading{
  display:inline-flex;align-items:center;gap:var(--s1);
  font-size:.8125rem;color:var(--text-3);margin-top:var(--s1);
}
.addr-loading i{
  width:13px;height:13px;border-radius:50%;
  border:2px solid var(--line);border-top-color:var(--red);
  animation:spin .7s linear infinite;
}
.req{color:var(--red);font-style:normal;font-weight:700}

/* order number chip in the summary */
.sum-no{
  display:inline-flex;align-items:center;gap:var(--s1);
  font-size:.8125rem;font-weight:600;letter-spacing:.04em;
  color:var(--text-2);background:var(--paper-2);
  padding:6px 12px;border-radius:var(--pill);margin-bottom:var(--s2);
  font-variant-numeric:tabular-nums;
}
.sum-no i{width:7px;height:7px;border-radius:50%;background:var(--red);flex:none}

/* Leaflet lays its panes out with absolute offsets, so the map stays LTR
   even when the rest of the page flips to Arabic. */
[dir="rtl"] .leaflet-container{direction:ltr}
[dir="rtl"] .map-coords,[dir="rtl"] .map-hint{direction:rtl}

/* ---------- 27. BRAND ICONS ---------------------------------------------- */
/* Instagram / TikTok / WhatsApp use the supplied artwork, so the buttons
   become a frame for the icon rather than tinting it. */
.socials a{padding:0;overflow:hidden;background:transparent;border-color:transparent}
.socials a img{width:44px;height:44px;border-radius:12px;transition:transform .24s var(--ease)}
.socials a:hover{background:transparent;border-color:transparent;transform:translateY(-3px)}
.socials a:hover img{transform:scale(1.06)}
.fbtn-wa{background:#fff;padding:0;overflow:hidden}
.fbtn-wa img{width:100%;height:100%;object-fit:cover}
.fbtn-wa:hover{background:#fff}
/* the sprite reference needs an explicit box */
svg.i{width:20px;height:20px;flex:none}

/* ---------- 28. ORDER TRACKER -------------------------------------------- */
.tracker{position:fixed;inset:0;z-index:190;pointer-events:none}
.tracker.open{pointer-events:auto}
.tracker.open .scrim{opacity:1;pointer-events:auto}
.tracker-card{
  position:absolute;z-index:2;left:50%;top:50%;
  transform:translate(-50%,-46%) scale(.96);
  width:min(420px,calc(100vw - 32px));
  background:var(--ink);color:#fff;
  border:1px solid var(--line-dark);border-radius:var(--r-xl);
  padding:var(--s6) var(--s4) var(--s4);
  text-align:center;
  box-shadow:0 50px 100px -30px rgba(0,0,0,.7);
  opacity:0;pointer-events:none;
  transition:opacity .3s var(--ease), transform .42s var(--ease-out), background .6s var(--ease);
}
.tracker.open .tracker-card{opacity:1;transform:translate(-50%,-50%) scale(1);pointer-events:auto}
.tracker-card h3{font-size:1.375rem;color:#fff;margin-top:var(--s3)}
.trk-sub{margin-top:var(--s1);color:var(--on-dark-2);font-size:.9375rem;line-height:1.6}
.trk-no{
  display:inline-block;margin-bottom:var(--s1);
  font-size:.8125rem;font-weight:600;letter-spacing:.06em;
  color:var(--on-dark-2);font-variant-numeric:tabular-nums;
}

/* countdown dial */
.trk-dial{position:relative;width:200px;height:200px;margin:0 auto}
.trk-ring{width:100%;height:100%;transform:rotate(-90deg)}
.trk-ring circle{fill:none;stroke-width:10;stroke-linecap:round}
.trk-track{stroke:rgba(255,255,255,.09)}
.trk-prog{
  stroke:var(--red-glow);
  stroke-dasharray:552.9;stroke-dashoffset:0;
  transition:stroke-dashoffset 1s linear, stroke .6s var(--ease);
}
.trk-mid{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s0)}
.trk-clock{
  font-family:var(--display);font-weight:800;font-size:3rem;line-height:1;
  letter-spacing:-.04em;font-variant-numeric:tabular-nums;color:#fff;
}
.trk-clock-l{font-size:.8125rem;letter-spacing:.1em;text-transform:uppercase;color:var(--on-dark-2)}
.trk-tick{width:76px;height:76px;color:#fff;display:none}

/* steam curling off the dial while it cooks */
.trk-steam{position:absolute;left:50%;top:-6px;transform:translateX(-50%);display:flex;gap:9px}
.trk-steam i{
  display:block;width:4px;height:22px;border-radius:4px;
  background:linear-gradient(180deg,rgba(255,255,255,.55),transparent);
  animation:steam 2.6s var(--ease) infinite;
}
.trk-steam i:nth-child(2){animation-delay:.5s;height:30px}
.trk-steam i:nth-child(3){animation-delay:1s}
@keyframes steam{
  0%{opacity:0;transform:translateY(6px) scaleY(.6)}
  35%{opacity:.9}
  100%{opacity:0;transform:translateY(-18px) scaleY(1.3)}
}

.trk-cta{display:flex;flex-direction:column;gap:var(--s2);margin-top:var(--s4)}

/* ---- READY state: the card goes green ---- */
.tracker-card.ready{background:linear-gradient(165deg,#0E7C4A 0%,#0A5F39 100%);border-color:rgba(255,255,255,.18)}
.tracker-card.ready .trk-prog{stroke:#fff}
.tracker-card.ready .trk-track{stroke:rgba(255,255,255,.2)}
.tracker-card.ready .trk-clock,
.tracker-card.ready .trk-clock-l{display:none}
.tracker-card.ready .trk-tick{display:block;animation:tick-in .5s var(--ease-out) both}
.tracker-card.ready .trk-steam{display:none}
.tracker-card.ready .trk-sub{color:rgba(255,255,255,.88)}
.tracker-card.ready .trk-no{color:rgba(255,255,255,.8)}
.tracker-card.ready .trk-dial{animation:ready-pop .6s var(--ease-out)}
@keyframes tick-in{from{transform:scale(.4);opacity:0}to{transform:none;opacity:1}}
@keyframes ready-pop{0%{transform:scale(1)}45%{transform:scale(1.07)}100%{transform:scale(1)}}

/* minimised chip */
.trk-chip{
  position:fixed;z-index:151;left:10px;
  bottom:calc(var(--tabbar-h) + 10px);
  transition:bottom .35s var(--ease-out);
  display:flex;align-items:center;gap:var(--s2);
  padding:10px 20px 10px 14px;border-radius:var(--pill);
  background:var(--ink);color:#fff;border:1px solid var(--line-dark);
  box-shadow:0 18px 40px -16px rgba(0,0,0,.7);
  animation:chip-in .4s var(--ease-out);
}
.trk-chip.ready{background:#0E7C4A;border-color:transparent}
.trk-chip-dot{width:10px;height:10px;border-radius:50%;background:var(--red-glow);flex:none;animation:pulse 1.8s infinite}
.trk-chip.ready .trk-chip-dot{background:#fff;animation:none}
.trk-chip-t{display:flex;flex-direction:column;align-items:flex-start;line-height:1.25}
.trk-chip-t b{font-size:.9375rem;font-weight:700;font-variant-numeric:tabular-nums}
.trk-chip-t span{font-size:.75rem;color:var(--on-dark-2)}
.trk-chip.ready .trk-chip-t span{color:rgba(255,255,255,.85)}
@keyframes chip-in{from{transform:translateY(20px);opacity:0}to{transform:none;opacity:1}}
.trk-chip.above{bottom:calc(var(--tabbar-h) + 92px)}
@media(min-width:901px){
  .trk-chip{left:20px;inset-inline-end:auto;bottom:20px}
  .trk-chip.above{bottom:20px}
}

/* drawer note under the single checkout button */
.drawer-note{margin-top:var(--s2);text-align:center;font-size:.875rem;color:var(--text-3)}

@media(max-width:560px){
  .tracker-card{padding:var(--s5) var(--s3) var(--s3)}
  .trk-dial{width:172px;height:172px}
  .trk-clock{font-size:2.5rem}
}