/* ============================================================
   Customer site — styling is themed at runtime; this file is client-agnostic.
   ============================================================ */
:root{
  --ink:#16110d;
  --ink-2:#2a211a;
  --paper:#fdfbf7;
  --paper-2:#f6f0e6;
  --line:#e6dccb;
  --muted:#7d7266;
  --saffron:#e0761b;
  --saffron-dk:#b85c0c;
  --curry:#c8992c;
  --leaf:#2f6b46;
  --chilli:#b5342a;
  --shadow:0 1px 2px rgba(22,17,13,.05),0 8px 28px rgba(22,17,13,.07);
  --shadow-lg:0 24px 60px rgba(22,17,13,.16);
  --r:14px;

  /* The operational scale, same four steps as the dashboard. Used only
     for chrome that is OURS — pills, chips, badges. Everything that
     frames the restaurant's own content keeps var(--r) above, which
     their Appearance → Corner shape slider drives: a place that chose
     4px meant it, and a house style must not quietly round it off. */
  --radius-sm:8px; --radius-md:12px; --radius-lg:16px; --radius-pill:9999px;
  --serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;

  /* Heights of the two sticky bars. Measured at runtime in app.js —
     these are only sensible fallbacks for the first paint. Everything
     that sticks or scrolls into view is positioned from them, so the
     basket can never end up tucked under the menu bar. */
  --header-h:72px;
  --bar-h:134px;
  --stick-gap:28px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--sans);background:var(--paper);color:var(--ink);
  line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;border:none;background:none}
a{color:inherit;text-decoration:none}

/* Long words — email addresses, postcodes, URLs — never break a box. */
p,a,li,h1,h2,h3,h4,span,dd,dt{overflow-wrap:break-word}

.wrap{width:100%;max-width:1180px;margin:0 auto;padding:0 20px}
.serif{font-family:var(--serif)}
.center{text-align:center}
.muted{color:var(--muted)}
.stack{display:flex;flex-direction:column}

/* ============================================================
   BUTTONS — one system.
   min-height + line-height:1 keeps the label optically centred
   whatever it contains, and guarantees a 46px tap target.
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:46px;padding:0 24px;border-radius:var(--radius-pill);
  font-weight:600;font-size:.94rem;line-height:1;letter-spacing:.01em;
  border:1.5px solid transparent;text-align:center;
  transition:background .18s,border-color .18s,color .18s,transform .12s,box-shadow .18s;
}
.btn .ic{font-size:1.05em;line-height:1;position:relative;top:.5px}
.btn-primary{background:var(--saffron);color:#fff;box-shadow:0 4px 14px rgba(224,118,27,.28)}
.btn-primary:hover{background:var(--saffron-dk);transform:translateY(-1px);box-shadow:0 8px 22px rgba(224,118,27,.34)}
.btn-dark{background:var(--ink);color:var(--paper)}
.btn-dark:hover{background:var(--ink-2);transform:translateY(-1px)}
.btn-ghost{border-color:var(--line);background:#fff;color:var(--ink)}
.btn-ghost:hover{border-color:var(--ink);background:var(--paper-2)}
.btn-outline-light{border-color:rgba(255,255,255,.5);color:#fff}
.btn-outline-light:hover{background:rgba(255,255,255,.12);border-color:#fff}
.btn:disabled{opacity:.4;cursor:not-allowed;transform:none!important;box-shadow:none}
.btn-sm{min-height:38px;padding:0 16px;font-size:.85rem}
.btn-block{width:100%}
/* ============================================================
   HEADER
   Dark, because the restaurant's logo is white artwork on a
   transparent background — on a pale header it disappears.
   It also carries the hero's tone up to the top of the page.
   ============================================================ */
header{
  position:sticky;top:0;z-index:60;
  background:var(--header-bg,#16110d);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--header-line,rgba(255,255,255,.09));
}
/* A light header is a theme option, because not every restaurant's logo
   is white artwork. The whole header inverts together — logo, links and
   burger — rather than leaving invisible text on a pale bar. */
body[data-header="light"] .brand,
body[data-header="light"] .burger{color:var(--header-ink,#16110d)}
body[data-header="light"] .nav-links a{color:var(--muted)}
body[data-header="light"] .nav-links a:hover{background:var(--paper-2);color:var(--ink)}
body[data-header="light"] .burger{border-color:var(--line)}
body[data-header="light"] header .brand img{filter:none}
.nav{display:flex;align-items:center;gap:16px;min-height:72px;padding:10px 0}
.brand{
  display:flex;align-items:center;gap:11px;color:#fff;
  font-family:var(--serif);font-size:1.34rem;font-weight:700;letter-spacing:-.01em;line-height:1
}
.brand img{height:42px;width:auto;max-width:190px;object-fit:contain;display:block}
.brand .mark{
  width:38px;height:38px;border-radius:10px;flex:0 0 38px;
  background:linear-gradient(140deg,var(--saffron),var(--chilli));
  color:#fff;display:grid;place-items:center;font-size:1rem;font-weight:800;font-family:var(--sans);
  box-shadow:0 3px 10px rgba(181,52,42,.28)
}
.nav-links{display:flex;gap:2px;margin-left:auto;align-items:center}
.nav-links a{
  display:inline-flex;align-items:center;min-height:40px;padding:0 14px;border-radius:9px;
  font-size:.89rem;font-weight:500;line-height:1;color:rgba(253,251,247,.78);transition:.15s;white-space:nowrap
}
.nav-links a:hover{background:rgba(255,255,255,.1);color:#fff}
.cart-btn{
  position:relative;display:inline-flex;align-items:center;gap:9px;min-height:42px;padding:0 18px;
  border-radius:var(--radius-pill);background:var(--saffron);color:#fff;font-size:.88rem;font-weight:600;line-height:1;
  margin-left:8px;white-space:nowrap
}
.cart-btn:hover{background:var(--saffron-dk)}
.cart-count{
  background:rgba(0,0,0,.28);color:#fff;border-radius:var(--radius-pill);min-width:22px;height:22px;
  display:inline-grid;place-items:center;font-size:.74rem;font-weight:700;padding:0 7px;line-height:1
}
.burger{
  display:none;margin-left:auto;color:#fff;font-size:1.4rem;line-height:1;
  width:44px;height:44px;place-items:center;border-radius:10px;border:1px solid rgba(255,255,255,.18)
}
.burger:hover{background:rgba(255,255,255,.1)}

/* Footer sits on the same dark ground, so the white logo works as-is.
   The filter is a safety net in case the asset is ever swapped for a
   dark one — it normalises either version to white. */
footer .brand img{height:52px;max-width:210px;filter:brightness(0) invert(1);opacity:.95}

/* ---------- Hero ---------- */
/* Derived from the theme's ink and accent, so a sushi bar doesn't get a
   warm brown hero behind its artwork. The scrim below is what makes the
   headline readable over any photograph, so the gradient only has to set
   the mood, not carry the contrast. */
.hero{
  position:relative;min-height:min(90vh,780px);display:grid;align-items:center;
  background:linear-gradient(150deg,
    var(--hero-1,#1b130d) 0%,
    var(--hero-2,#2c1c10) 48%,
    var(--hero-3,#3a2312) 100%);
  color:#fff;overflow:hidden
}
/* The restaurant's own hero artwork, sat behind a readable scrim. */
.hero-media{position:absolute;inset:0;z-index:0}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:center 32%}
.hero-media::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(100deg,rgba(22,14,8,.94) 0%,rgba(22,14,8,.82) 42%,rgba(22,14,8,.35) 72%,rgba(22,14,8,.55) 100%),
    linear-gradient(to top,rgba(22,14,8,.8),transparent 45%)
}
.hero::after{
  content:"";position:absolute;inset:0;opacity:.07;pointer-events:none;z-index:1;
  background-image:radial-gradient(circle at 1px 1px,#fff 1px,transparent 0);
  background-size:26px 26px
}
.hero-inner{position:relative;z-index:2;padding:80px 0;max-width:700px}
.eyebrow{
  display:inline-flex;align-items:center;gap:9px;padding:7px 16px;border-radius:var(--radius-pill);
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);
  font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;margin-bottom:24px
}
.hero h1{font-family:var(--serif);font-size:clamp(2.9rem,7.5vw,5.1rem);line-height:1.02;font-weight:700;letter-spacing:-.02em}
.hero h1 em{font-style:italic;color:var(--hero-em,#f5b155)}
.hero p.lede{font-size:1.14rem;color:rgba(255,255,255,.8);margin:24px 0 36px;max-width:560px}
.hero-cta{display:flex;gap:13px;flex-wrap:wrap}
.hero-facts{display:flex;gap:30px;margin-top:52px;flex-wrap:wrap;font-size:.86rem;color:rgba(255,255,255,.65)}
.hero-facts b{display:block;color:#fff;font-size:1.02rem;font-weight:600;margin-bottom:2px}

/* ---------- Sections ---------- */
section{padding:88px 0}
.sec-head{max-width:640px;margin-bottom:46px}
.sec-head.center{margin-left:auto;margin-right:auto}
.kicker{color:var(--saffron);font-size:.76rem;letter-spacing:.18em;text-transform:uppercase;font-weight:700;margin-bottom:12px}
.sec-head h2{font-family:var(--serif);font-size:clamp(2rem,4.4vw,2.9rem);line-height:1.12;font-weight:700;letter-spacing:-.015em}
.sec-head p{color:var(--muted);margin-top:14px;font-size:1.04rem}

.alt{background:var(--paper-2)}
.dark{background:var(--ink);color:var(--paper)}
.dark .sec-head p{color:rgba(253,251,247,.62)}

/* ============================================================
   SIGNATURE DISH CARDS
   Not decoration — each one says what the dish is and lets you
   put it straight in the basket.
   ============================================================ */
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px}
.tile{
  background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;
  transition:transform .2s,box-shadow .2s,border-color .2s;box-shadow:var(--shadow);
  display:flex;flex-direction:column
}
.tile:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:#d9c9ad}
.tile-img{
  position:relative;aspect-ratio:4/3;display:grid;place-items:center;font-size:2.7rem;
  background:linear-gradient(135deg,#f8ecd8,#f0dcc0);overflow:hidden;cursor:zoom-in
}
/* Photo sits over the emoji placeholder, so a failed image reveals the
   emoji underneath instead of leaving a gap. */
.tile-img img,.dish-emoji img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tile-img img{transition:transform .45s ease}
.tile:hover .tile-img img{transform:scale(1.05)}
.tile-rank{
  position:absolute;top:10px;left:10px;z-index:2;
  background:rgba(22,17,13,.82);color:#fff;border-radius:var(--radius-pill);
  padding:5px 11px;font-size:.7rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;line-height:1
}
.tile-body{padding:16px 17px 17px;display:flex;flex-direction:column;flex:1;gap:8px}
.tile-body h4{font-size:1.02rem;font-weight:700;line-height:1.3}
.tile-why{
  color:var(--muted);font-size:.85rem;line-height:1.5;flex:1;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden
}
.tile-foot{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding-top:12px;border-top:1px solid var(--paper-2);margin-top:2px
}
.tile-foot .p{color:var(--ink);font-weight:700;font-size:1.02rem;line-height:1}
.tile-tags{display:flex;gap:5px;flex-wrap:wrap;min-height:0}

/* ---------- Lightbox ---------- */
.lightbox{position:fixed;inset:0;z-index:250;display:none;align-items:center;justify-content:center;padding:24px}
.lightbox.open{display:flex}
.lightbox-bg{position:absolute;inset:0;background:rgba(16,12,9,.9);backdrop-filter:blur(6px)}
.lightbox figure{position:relative;max-width:760px;width:100%;text-align:center}
.lightbox img{width:100%;max-height:78vh;object-fit:contain;border-radius:14px}
.lightbox figcaption{color:#fff;font-family:var(--serif);font-size:1.5rem;margin-top:16px}
.lightbox .lb-sub{color:rgba(255,255,255,.6);font-size:.9rem;font-family:var(--sans);margin-top:4px}
.lightbox .x{position:absolute;top:-46px;right:0;color:#fff;font-size:1.9rem}

/* ---------- Feature offer band (shown when exactly one offer is live) ----
   Named for what it is, not for this client's buffet — the next restaurant's
   single offer might be a Sunday roast or an all-you-can-eat sushi hour.
   Vertical rhythm lives on the flex container so the call to action can
   never end up crowding the paragraph above it. */
.offer-feature{
  background:linear-gradient(135deg,var(--accent-2,#2f6b46),var(--accent-2-dk,#1f4a30));
  color:#fff;border-radius:22px;
  padding:46px;display:grid;grid-template-columns:1.3fr 1fr;gap:40px;align-items:center;
  box-shadow:var(--shadow-lg)
}
.offer-feature-main{display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.offer-feature h3{font-family:var(--serif);font-size:2.1rem;line-height:1.14}
.offer-feature p{color:rgba(255,255,255,.8);max-width:52ch}
.offer-feature ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.offer-feature li{background:rgba(255,255,255,.13);padding:6px 13px;border-radius:var(--radius-pill);font-size:.83rem}
/* Extra breathing room above the button — it's the one thing on the block
   that gets clicked, and it shouldn't read as part of the paragraph. */
.offer-feature .btn{margin-top:8px}

.offer-price-box{
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);
  border-radius:16px;padding:30px 26px;text-align:center;
  display:flex;flex-direction:column;gap:6px;align-items:center;justify-content:center
}
.offer-price-box .lbl{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;opacity:.8;line-height:1.4}
.offer-price-box .big{font-family:var(--serif);font-size:3.4rem;line-height:1;font-weight:700}
.offer-price-box .big.ask{font-size:2rem;line-height:1.2}
.offer-price-box .sub{font-size:.9rem;opacity:.82;line-height:1.45}

/* ============================================================
   BALANCED GRIDS
   The column count comes from layoutGrid() in store.js, which picks the
   arrangement that leaves no stranded last row — six cards go 3/3, never
   4/2. Each breakpoint reads its own pre-computed count.
   ============================================================ */
.grid-auto{
  display:grid;gap:18px;
  grid-template-columns:repeat(var(--cols,3),minmax(0,1fr));
  align-items:stretch
}
@media(max-width:1000px){ .grid-auto{grid-template-columns:repeat(var(--cols-md,2),minmax(0,1fr))} }
@media(max-width:620px){  .grid-auto{grid-template-columns:repeat(var(--cols-sm,1),minmax(0,1fr))} }

/* ---------- Offer cards (two or more running at once) ---------- */
.offer-grid{gap:20px}
.offer-card{
  background:#fff;border:1px solid var(--line);border-radius:18px;padding:26px 26px 24px;
  box-shadow:var(--shadow);display:flex;flex-direction:column;gap:10px;transition:.2s
}
.offer-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.offer-when{
  font-size:.74rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--saffron);font-weight:700;line-height:1.4
}
.offer-card h3{font-family:var(--serif);font-size:1.6rem;line-height:1.15;font-weight:700}
.offer-card p{color:var(--muted);font-size:.9rem;line-height:1.55}
.offer-inc{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:2px 0}
.offer-inc li{background:var(--paper-2);padding:5px 11px;border-radius:var(--radius-pill);font-size:.79rem}
.offer-foot{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-top:auto;padding-top:14px;border-top:1px solid var(--paper-2)
}
.offer-price{font-size:1.5rem;font-weight:700;font-family:var(--serif)}

/* ---------- Story split ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center}
.split-media{border-radius:20px;overflow:hidden;box-shadow:var(--shadow-lg);aspect-ratio:4/5;background:var(--paper-2)}
.split-media img{width:100%;height:100%;object-fit:cover}
.split p{color:var(--muted);font-size:1.02rem;margin-bottom:16px}
.pull{
  border-left:3px solid var(--saffron);padding:4px 0 4px 20px;margin:22px 0;
  font-family:var(--serif);font-size:1.34rem;line-height:1.45;color:var(--ink);font-style:italic
}
.facts{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:26px}
.fact{background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px 18px}
.fact b{display:block;font-size:.74rem;letter-spacing:.13em;text-transform:uppercase;color:var(--saffron);margin-bottom:6px}
.fact span{font-size:.87rem;color:var(--muted);line-height:1.5}

/* ---------- Menu / ordering ---------- */
.order-bar{
  position:sticky;top:var(--header-h);z-index:40;background:var(--paper);
  border-bottom:1px solid var(--line);padding:14px 0
}
.order-bar .wrap{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.seg{display:inline-flex;background:var(--paper-2);border:1px solid var(--line);border-radius:var(--radius-pill);padding:3px}
.seg button{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:40px;padding:0 20px;
  border-radius:var(--radius-pill);font-size:.87rem;font-weight:600;line-height:1;color:var(--muted);transition:.15s
}
.seg button.on{background:var(--ink);color:var(--paper)}
.search{
  flex:1;min-width:180px;display:flex;align-items:center;gap:9px;background:#fff;
  border:1px solid var(--line);border-radius:var(--radius-pill);padding:0 18px;min-height:44px
}
.search input{border:none;outline:none;background:none;width:100%;min-width:0;font-size:16px}
.chips{display:flex;gap:8px;overflow-x:auto;padding-bottom:2px}
.chip{
  display:inline-flex;align-items:center;gap:6px;min-height:38px;padding:0 16px;
  border:1px solid var(--line);background:#fff;border-radius:var(--radius-pill);
  font-size:.84rem;font-weight:500;line-height:1;white-space:nowrap;transition:.15s;flex:0 0 auto
}
.chip:hover{border-color:var(--ink)}
.chip.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}

.menu-layout{display:grid;grid-template-columns:1fr 340px;gap:34px;align-items:start;padding:34px 0 90px}
.cat-block{margin-bottom:40px}
/* Category headings clear both sticky bars when jumped to */
.cat-block,section[id]{scroll-margin-top:calc(var(--header-h) + var(--bar-h) + 16px)}
.cat-title{
  font-family:var(--serif);font-size:1.72rem;font-weight:700;margin-bottom:4px;
  display:flex;align-items:center;gap:11px
}
.cat-rule{height:1px;background:var(--line);margin:14px 0 20px}

.dish{
  display:flex;gap:16px;align-items:flex-start;padding:16px;border:1px solid transparent;
  border-radius:12px;transition:.15s
}
.dish:hover{background:#fff;border-color:var(--line);box-shadow:var(--shadow)}
.dish-emoji{
  width:76px;height:76px;flex:0 0 76px;border-radius:12px;display:grid;place-items:center;
  font-size:1.6rem;background:linear-gradient(135deg,#f8ecd8,#f0dcc0);overflow:hidden;
  cursor:pointer;position:relative
}
.dish-emoji img{transition:transform .35s ease}
.dish:hover .dish-emoji img{transform:scale(1.08)}
.dish-main{flex:1;min-width:0}
.dish-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.dish-head h4{font-size:1rem;font-weight:600}
.dish-desc{color:var(--muted);font-size:.87rem;margin-top:4px;line-height:1.5}
.dish-side{text-align:right;flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-end;gap:9px}
.price{font-weight:700;font-size:1rem}
.tags{display:flex;gap:5px;flex-wrap:wrap}
.tag{font-size:.66rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:3px 7px;border-radius:5px}
.tag-v{background:#e6f2ea;color:var(--leaf)}
.tag-gf{background:#eef0f7;color:#4a5578}
.tag-pop{background:#fdf0dc;color:var(--saffron-dk)}
.tag-off{background:#f3eeea;color:var(--muted)}
.tag-alg{background:#fdf0e2;color:var(--saffron-dk)}
.tag-ask{background:#f3eeea;color:var(--muted)}

.alg-head{font-size:.84rem;color:var(--muted);margin-bottom:9px}
.alg-notice{
  background:#fdf6e8;border:1px solid #f0dcb8;border-radius:11px;
  padding:13px 16px;margin-bottom:20px;font-size:.86rem;line-height:1.55;color:#7a5a10
}
.alg-notice b{display:block;color:var(--ink);margin-bottom:3px}
.heat{color:var(--chilli);font-size:.76rem;letter-spacing:1px}

.qty{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:var(--radius-pill);background:#fff;overflow:hidden}
.qty button{
  display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;font-size:1.05rem;font-weight:600;line-height:1;color:var(--ink);transition:.12s
}
.qty button:hover{background:var(--paper-2)}
.qty span{min-width:28px;text-align:center;font-weight:600;font-size:.9rem;line-height:1}
.dish.sold-out{opacity:.45}

/* ---------- Cart panel ----------
   Sits clear of BOTH sticky bars: header + menu bar + a breathing gap,
   all measured at runtime so it stays right whatever the bars contain. */
.cart-panel{
  position:sticky;
  top:calc(var(--header-h) + var(--bar-h) + var(--stick-gap));
  max-height:calc(100vh - var(--header-h) - var(--bar-h) - var(--stick-gap) - 24px);
  display:flex;flex-direction:column;
  background:#fff;border:1px solid var(--line);
  border-radius:18px;box-shadow:var(--shadow);overflow:hidden
}
.cart-head{
  padding:18px 20px;border-bottom:1px solid var(--line);
  display:flex;justify-content:space-between;align-items:center;gap:12px;flex:0 0 auto
}
.cart-head h3{font-size:1.02rem;font-weight:700;line-height:1.3}
.cart-items{flex:1 1 auto;min-height:0;overflow-y:auto;padding:8px 0}
.cart-foot{flex:0 0 auto}
.cart-row{display:flex;gap:11px;align-items:center;padding:11px 20px}
.cart-row .nm{flex:1;font-size:.88rem;line-height:1.35}
.cart-row .pr{font-weight:600;font-size:.86rem}
.cart-empty{padding:44px 20px;text-align:center;color:var(--muted);font-size:.9rem}
.cart-foot{padding:18px 20px;border-top:1px solid var(--line);background:var(--paper)}
.cart-line{display:flex;justify-content:space-between;font-size:.88rem;margin-bottom:8px;color:var(--muted)}
.cart-line.total{font-size:1.14rem;font-weight:700;color:var(--ink);padding-top:10px;border-top:1px dashed var(--line);margin-top:10px}
.note{background:#fdf5e8;border:1px solid #f0dcb8;border-radius:9px;padding:10px 13px;font-size:.8rem;color:#8a6420;margin-bottom:12px}

/* ---------- Forms ---------- */
.field{margin-bottom:16px;min-width:0}
label.lb{display:block;font-size:.8rem;font-weight:600;margin-bottom:7px;letter-spacing:.02em;line-height:1.4}
.inp{
  width:100%;min-height:46px;padding:11px 15px;border:1.5px solid var(--line);border-radius:10px;
  background:#fff;font-size:16px;outline:none;transition:border-color .15s,box-shadow .15s
}
.inp:focus{border-color:var(--saffron);box-shadow:0 0 0 3px rgba(224,118,27,.13)}
.inp.bad{border-color:var(--chilli)}
textarea.inp{resize:vertical;min-height:76px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.err{color:var(--chilli);font-size:.78rem;margin-top:5px;display:none}
.err.show{display:block}

.pick{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.pick label{
  border:1.5px solid var(--line);border-radius:12px;padding:15px;cursor:pointer;
  background:#fff;transition:.15s;display:block
}
.pick label:hover{border-color:#cdbfa6}
.pick input{position:absolute;opacity:0}
.pick input:checked + .pick-in{color:var(--saffron-dk)}
.pick label:has(input:checked){border-color:var(--saffron);background:#fffaf3;box-shadow:0 0 0 3px rgba(224,118,27,.1)}
.pick-in b{display:block;font-size:.94rem;margin-bottom:3px}
.pick-in span{font-size:.79rem;color:var(--muted)}

.slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:8px;max-height:230px;overflow-y:auto;padding:2px}
.slot{
  display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 6px;
  border:1.5px solid var(--line);border-radius:10px;background:#fff;
  font-size:.87rem;font-weight:600;line-height:1;transition:.13s
}
.slot:hover:not(:disabled){border-color:var(--ink)}
.slot.on{background:var(--saffron);border-color:var(--saffron);color:#fff}
.slot:disabled{opacity:.32;cursor:not-allowed;background:var(--paper-2);text-decoration:line-through}

/* party size pills */
.party{display:flex;gap:7px;flex-wrap:wrap}
.party button{
  width:44px;height:44px;border:1.5px solid var(--line);border-radius:11px;background:#fff;
  font-weight:600;transition:.13s
}
.party button:hover{border-color:var(--ink)}
.party button.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}

/* Consent tick — deliberately readable, not buried small print */
.consent{
  display:flex;align-items:flex-start;gap:11px;padding:13px 15px;margin-bottom:16px;
  background:var(--paper-2);border:1px solid var(--line);border-radius:11px;cursor:pointer
}
.consent input{
  width:20px;height:20px;flex:0 0 20px;margin-top:1px;accent-color:var(--saffron);cursor:pointer
}
.consent span{font-size:.85rem;line-height:1.5;color:var(--ink-2)}

/* ---------- Booking section ---------- */
.book-grid{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:start}
.book-card{background:#fff;border:1px solid var(--line);border-radius:20px;padding:30px;box-shadow:var(--shadow-lg)}
.dark .book-card{color:var(--ink)}
.steps{display:flex;gap:0;margin-bottom:24px}
.step{flex:1;text-align:center;font-size:.74rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding-bottom:11px;border-bottom:2.5px solid var(--line)}
.step.on{color:var(--saffron);border-color:var(--saffron)}
.step.done{color:var(--leaf);border-color:var(--leaf)}

/* ============================================================
   INFO / CONTACT CARDS
   Long values (emails, addresses) wrap inside the box instead
   of running into the edge.
   ============================================================ */
/* Column count set by layoutGrid() — see .grid-auto above. */
.info-grid{gap:18px}
.info-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:24px 26px;display:flex;flex-direction:column;gap:10px;min-width:0
}
.dark .info-card{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.13)}
.info-card .ic{font-size:1.45rem;line-height:1;margin-bottom:2px}
.info-card h4{
  font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--saffron);
  font-weight:700;line-height:1.3;margin:0
}
.info-card p{margin:0;line-height:1.6;overflow-wrap:anywhere;hyphens:auto}
.info-card a{overflow-wrap:anywhere}
.info-card .btn{align-self:flex-start;margin-top:4px}
.info-val{font-weight:600;font-size:1rem;line-height:1.5;display:block}
.info-note{font-size:.85rem;color:var(--muted);line-height:1.5}

.hours-row{
  display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  padding:8px 0;font-size:.88rem;border-bottom:1px solid rgba(255,255,255,.08)
}
.hours-row span:last-child{white-space:nowrap;text-align:right}
.hours-row.today{color:var(--curry);font-weight:700}
.dark .hours-row:last-child{border:none}


/* ============================================================
   FOOTER
   Every column is a min-width:0 grid child so long values wrap
   rather than pushing against the edge of their box.
   ============================================================ */
footer{background:var(--ink);color:rgba(253,251,247,.66);padding:64px 0 28px;font-size:.89rem}
.foot-grid{
  display:grid;grid-template-columns:1.5fr 1fr 1fr 1.3fr;gap:40px 32px;margin-bottom:44px;
  align-items:start
}
.foot-col{min-width:0;display:flex;flex-direction:column}
footer h5{
  color:var(--paper);font-size:.73rem;letter-spacing:.14em;text-transform:uppercase;
  margin-bottom:16px;font-weight:700;line-height:1.3
}
footer a{transition:color .15s}
footer a:hover{color:var(--saffron)}
footer ul{list-style:none;display:flex;flex-direction:column;gap:2px}
footer li a{display:inline-block;padding:5px 0;line-height:1.5}
footer p{line-height:1.6;overflow-wrap:anywhere}

/* Contact block — the values need room to breathe and to wrap */
.foot-contact{display:flex;flex-direction:column;gap:16px}
.foot-item{display:flex;gap:12px;align-items:flex-start;min-width:0}
.foot-item .ic{
  flex:0 0 34px;width:34px;height:34px;border-radius:9px;display:grid;place-items:center;
  background:rgba(255,255,255,.08);font-size:.95rem;line-height:1
}
.foot-item .tx{min-width:0;flex:1;padding-top:2px}
.foot-item .lb{
  display:block;font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;
  color:rgba(253,251,247,.45);font-weight:700;margin-bottom:4px;line-height:1.3
}
.foot-item .vl{
  display:block;color:var(--paper);font-weight:500;line-height:1.55;
  overflow-wrap:anywhere;word-break:break-word
}
.foot-item .vl:hover{color:var(--saffron)}

.newsletter{display:flex;flex-direction:column;gap:10px;margin-top:4px}
.newsletter .inp{
  background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.16);color:#fff;width:100%
}
.newsletter .inp::placeholder{color:rgba(253,251,247,.42)}

/* Consent tick. Generous hit area — a 13px checkbox with the label
   floating beside it is a fiddle on a phone, and this is the control
   that decides whether the sign-up is lawful. */
.nl-consent{
  display:flex;align-items:flex-start;gap:10px;margin-top:14px;cursor:pointer;
  font-size:.83rem;line-height:1.5;color:rgba(253,251,247,.7)
}
.nl-consent input{
  width:18px;height:18px;flex:0 0 18px;margin-top:2px;cursor:pointer;
  accent-color:var(--accent,#e0761b)
}
.nl-consent:hover{color:rgba(253,251,247,.9)}
.nl-note{font-size:.76rem;color:rgba(253,251,247,.42);margin-top:8px;line-height:1.5}

.foot-bottom{
  border-top:1px solid rgba(255,255,255,.1);padding-top:24px;
  display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;
  font-size:.82rem;line-height:1.6
}

/* ---------- Modal ---------- */
.modal{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;padding:20px}
.modal.open{display:flex}
.modal-bg{position:absolute;inset:0;background:rgba(22,17,13,.6);backdrop-filter:blur(4px)}
.modal-card{
  position:relative;background:var(--paper);border-radius:20px;width:100%;max-width:520px;
  max-height:92vh;overflow-y:auto;box-shadow:var(--shadow-lg);animation:pop .22s ease
}
@keyframes pop{from{opacity:0;transform:translateY(16px) scale(.98)}}
.modal-head{padding:22px 26px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;position:sticky;top:0;background:var(--paper);z-index:2}
.modal-head h3{font-family:var(--serif);font-size:1.5rem;font-weight:700}
.modal-body{padding:26px}
.x{font-size:1.5rem;line-height:1;color:var(--muted);padding:4px 8px;border-radius:8px}
.x:hover{background:var(--paper-2);color:var(--ink)}

/* success */
.tick{width:66px;height:66px;border-radius:50%;background:var(--leaf);color:#fff;display:grid;place-items:center;font-size:2rem;margin:0 auto 20px;animation:pop .3s ease}
.recap{background:#fff;border:1px solid var(--line);border-radius:13px;padding:20px;margin:20px 0;text-align:left}
.recap-row{display:flex;justify-content:space-between;padding:8px 0;font-size:.9rem;border-bottom:1px solid var(--paper-2)}
.recap-row:last-child{border:none}
.recap-row b{font-weight:600}

/* toast
   Hidden with opacity + visibility, NOT by sliding it off the bottom.
   translateY(120%) moves the element by 120% of its OWN height, and an
   empty toast is barely one line tall — so it stayed on screen as a small
   dark tab above the bottom edge, looking like a button that did nothing.
   visibility:hidden also takes it out of the tab order and off screen
   readers, which a purely visual offset never did. */
.toast{
  position:fixed;bottom:22px;left:50%;transform:translateX(-50%) translateY(14px);
  background:var(--ink);color:var(--paper);padding:13px 24px;border-radius:var(--radius-pill);
  font-size:.89rem;font-weight:500;z-index:300;
  box-shadow:var(--shadow-lg);display:flex;align-items:center;gap:9px;
  max-width:calc(100vw - 32px);text-align:center;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .22s ease,transform .3s cubic-bezier(.2,.9,.3,1.2),visibility .22s
}
.toast.show{transform:translateX(-50%) translateY(0);opacity:1;visibility:visible}

/* mobile cart bar */
.mob-cart{
  position:fixed;bottom:0;left:0;right:0;background:var(--ink);color:var(--paper);
  padding:12px 18px;display:none;justify-content:space-between;align-items:center;gap:14px;z-index:80;
  box-shadow:0 -8px 30px rgba(0,0,0,.2);
  padding-bottom:calc(12px + env(safe-area-inset-bottom))
}
.mob-cart .mc-tx{min-width:0;line-height:1.35}
.mob-cart .btn{flex:0 0 auto}

/* demo ribbon */
.demo-bar{
  background:linear-gradient(90deg,#2a211a,#3a2c1e);color:#f0e2cc;font-size:.78rem;line-height:1.5;
  padding:9px 18px;display:flex;gap:8px 18px;justify-content:center;align-items:center;flex-wrap:wrap;text-align:center
}
.demo-bar a{color:var(--curry);font-weight:700;text-decoration:underline;text-underline-offset:3px}

/* ============================================================
   RESPONSIVE — mobile-first behaviour, largest breakpoints first
   ============================================================ */
@media(max-width:1000px){
  .split{grid-template-columns:1fr;gap:34px}
  .split-media{aspect-ratio:16/10;max-height:360px}
  .menu-layout{grid-template-columns:1fr;gap:0}
  .cart-panel{display:none}
  .mob-cart{display:flex}
  .book-grid{grid-template-columns:1fr;gap:30px}
  .offer-feature{grid-template-columns:1fr;padding:32px}
  .foot-grid{grid-template-columns:1fr 1fr;gap:34px 28px}
}

@media(max-width:760px){
  /* Nav collapses into a full-width dark sheet under the header */
  .nav{min-height:64px}
  .nav-links{
    display:none;position:absolute;top:100%;left:0;right:0;
    background:rgba(22,17,13,.98);backdrop-filter:blur(14px);
    flex-direction:column;align-items:stretch;padding:10px 14px 16px;gap:2px;
    border-bottom:1px solid rgba(255,255,255,.1);box-shadow:0 18px 40px rgba(0,0,0,.3)
  }
  .nav-links.open{display:flex}
  .nav-links a{min-height:48px;padding:0 14px;font-size:.95rem}
  .burger{display:grid}
  .cart-btn{margin:8px 0 0;justify-content:center;min-height:48px}
  .brand img{height:36px}

  section{padding:56px 0}
  .wrap{padding:0 18px}
  .hero{min-height:auto}
  .hero-inner{padding:52px 0 56px}
  .hero-cta{gap:10px}
  .hero-cta .btn{flex:1 1 100%}
  .hero-facts{gap:18px 26px;margin-top:38px}

  .sec-head{margin-bottom:32px}
  .grid2,.pick{grid-template-columns:1fr}
  .tiles{grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}

  /* Menu rows go full width and lose the hover chrome */
  .dish{padding:14px 0;gap:13px}
  .dish:hover{background:none;border-color:transparent;box-shadow:none}
  .dish-emoji{width:64px;height:64px;flex:0 0 64px}
  .dish-side{gap:8px}

  .order-bar{padding:12px 0}
  .order-bar .wrap{gap:10px}
  .search{order:-1;flex:1 1 100%}
  .seg{flex:1}
  .seg button{flex:1;padding:0 12px;min-height:40px}

  .offer-feature{padding:26px 22px;gap:26px}
  .offer-price-box{padding:24px 20px}
  .book-card{padding:22px 20px}
  .info-card{padding:20px 22px}
  .facts{grid-template-columns:1fr}

  .foot-grid{grid-template-columns:1fr;gap:30px;margin-bottom:32px}
  .foot-bottom{flex-direction:column;align-items:flex-start;gap:8px}

  /* Room for the sticky basket bar */
  body{padding-bottom:76px}
  .modal{padding:0;align-items:flex-end}
  .modal-card{max-width:none;border-radius:20px 20px 0 0;max-height:94vh}
  .lightbox{padding:16px}
  .lightbox .x{top:-40px;right:4px}
}

@media(max-width:420px){
  .wrap{padding:0 15px}
  .hero h1{font-size:2.5rem}
  .tiles{grid-template-columns:1fr}
  .party button{width:42px;height:42px}
  .slots{grid-template-columns:repeat(auto-fill,minmax(76px,1fr))}
  .steps{font-size:.68rem}
  .step{font-size:.66rem}
}

/* Respect people who don't want motion */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
}

/* A payment option that isn't available yet. Shown rather than hidden so
   the restaurant can see it's coming, but obviously not selectable. */
.pick-off{opacity:.5;cursor:not-allowed}
.pick-off .pick-in b{text-decoration:line-through;text-decoration-thickness:1px}