/* ============================================================================================
   Dosa Corner brand skin, customer website only (loaded after site.css by index.html).
   Version 2 (Oct 2026): white-first.

   VISUAL ONLY for the ordering system. Product cards, the menu grid, category list, search,
   filters, quantity steppers, add buttons, basket and checkout keep their sizes and positions
   (checked by tests/skin-check.mjs). Outside the ordering UI this file also sets the section
   spacing scale and the full-width bands (hero, newsletter, footer).
   The staff dashboard (portal.html) does not load it.

   Palette (only these): deep green #0F402B, secondary green #185438, warm tan #D6A874,
   warm beige #E8C99E, cream #F8F4EC, white #FFFFFF. Tints are mixes of these with white.
   Balance: white and cream first, green for type, actions, the top strip and the footer,
   tan and beige as small accents. The logo keeps its own colours.
   ============================================================================================ */

:root {
  --dc-green: #0F402B;
  --dc-green-2: #185438;
  --dc-tan: #D6A874;
  --dc-beige: #E8C99E;
  --dc-cream: #F8F4EC;
  --dc-white: #FFFFFF;
  --dc-hairline: color-mix(in srgb, var(--dc-beige) 55%, #fff);   /* warm hairline on white */
  --dc-hairline-2: color-mix(in srgb, var(--dc-beige) 35%, #fff);
  --dc-green-tint: color-mix(in srgb, var(--dc-green) 6%, #fff);  /* success/info panels */
  --dc-tan-tint: color-mix(in srgb, var(--dc-tan) 18%, #fff);     /* warnings, highlights */

  /* Spacing scale: 4 8 12 16 24 32 48 64 80 */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 80px;
  --section-y: clamp(var(--sp-7), 6vw, var(--sp-9));        /* 48 → 80 */
  --section-y-sm: clamp(var(--sp-6), 4vw, var(--sp-7));     /* 32 → 48 */

  /* Brand tokens over the shared design tokens (the dashboard's colour/font settings don't apply here) */
  --primary: var(--dc-green);
  --primary-hover: var(--dc-green-2);
  --primary-soft: var(--dc-cream);
  --primary-ink: var(--dc-green);
  --primary-ring: color-mix(in srgb, var(--dc-green) 25%, transparent);
  --dc-display: 'Fraunces', Georgia, 'Times New Roman', serif;

  --ink: var(--dc-green);                                     /* headings */
  --ink-2: color-mix(in srgb, var(--dc-green) 88%, #000);     /* body text */
  --muted: color-mix(in srgb, var(--dc-green) 76%, #fff);     /* helper text: ≥ 5.4:1 on white, ≥ 4.9:1 on cream */
  --muted-2: var(--muted);
  --bg: var(--dc-white);
  --surface: var(--dc-white);
  --surface-2: var(--dc-cream);
  --surface-3: color-mix(in srgb, var(--dc-beige) 30%, #fff);
  --line: var(--dc-hairline);
  --line-2: var(--dc-hairline-2);
  --gold: color-mix(in srgb, var(--dc-tan) 70%, #000);        /* stars and small icons, readable on white */
  --success: var(--dc-green);
  --success-soft: var(--dc-green-tint);

  /* Shapes: one radius for controls, one for cards; shadows only on things that float */
  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 8px;
  --r-xl: 8px;
  --btn-radius: 6px;
  --shadow-sm: none;
  --shadow-md: 0 8px 24px color-mix(in srgb, var(--dc-green) 10%, transparent);
  --shadow-lg: 0 16px 40px color-mix(in srgb, var(--dc-green) 16%, transparent);
  --ease: cubic-bezier(.25, .6, .3, 1);
  --t: 180ms;
}

body { background: var(--dc-white); color: var(--ink-2); }

/* ---------- Typography: Fraunces for display headings, Figtree for everything else ---------- */
h1, h2, .display { font-family: var(--dc-display); font-weight: 600; letter-spacing: -.005em; color: var(--ink); text-wrap: balance; }
html[data-font] h1, html[data-font] h2, html[data-font] .display { letter-spacing: -.005em; font-weight: 600; }
.section-head h2, .page-hero h1, .menu-group h2, .menu-side-title, .dish-info h1, .festival-banner h2,
.visit-card h2, .newsletter h2, .fest-hero h1, .auth-box h1, .account-head h1, .success-banner h1, .hero h1 {
  font-family: var(--dc-display); font-weight: 600; letter-spacing: -.005em; color: var(--ink);
}
.kicker { color: var(--dc-green-2); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: 12px; }
.lead, .hero .lead { color: var(--muted); }
::selection { background: var(--dc-beige); color: var(--dc-green); }
a { transition: color var(--t) var(--ease); }

/* Type scale outside the ordering components: 12 14 16 18 20 24 32 40 48.
   (Dish cards, menu bar, basket lines and checkout keep their sizes so nothing reflows.) */
.dropdown-head small, .notif small, .newsletter-form small, .mini-lines small, .eta small, .timeline small,
.kv dt, .field small, .hint, .table td small, .site-footer h3 { font-size: 12px; }
.hero-facts small, .review-card .reply { font-size: 14px; }
.features p, .site-footer, .offer-list p, .mini-lines, .kv { font-size: 14px; }
.page-hero p { font-size: 18px; }

/* ---------- Focus ---------- */
:focus-visible { outline: 2px solid var(--dc-green); outline-offset: 2px; }
.input:focus, .field input:focus, .field select:focus, .field textarea:focus, .select:focus,
.phone-field:focus-within { border-color: var(--dc-green); box-shadow: 0 0 0 3px var(--primary-ring); }
.type-tabs input:focus-visible + span, .seg input:focus-visible + span,
.choice input:focus-visible + span, .switch input:focus-visible + i { outline: 2px solid var(--dc-green); outline-offset: 2px; }

/* ---------- Buttons (sizes unchanged) ---------- */
.btn { transition: background-color var(--t) var(--ease), color var(--t) var(--ease), border-color var(--t) var(--ease); box-shadow: none; }
.btn:active { transform: none; }
.btn-primary, .btn-dark { background: var(--dc-green); border-color: var(--dc-green); color: var(--dc-white); letter-spacing: .04em; }
.btn-primary:hover:not([disabled]), .btn-dark:hover:not([disabled]) { background: var(--dc-green-2); border-color: var(--dc-green-2); }
.btn-primary[disabled], .btn-dark[disabled] { background: color-mix(in srgb, var(--dc-green) 45%, #fff); border-color: transparent; color: var(--dc-white); }
.btn-outline, .btn-soft { background: var(--dc-white); border-color: var(--dc-tan); color: var(--dc-green); box-shadow: none; }
.btn-outline:hover:not([disabled]), .btn-soft:hover:not([disabled]) { border-color: var(--dc-green); background: var(--dc-cream); }
.btn-ghost:hover:not([disabled]) { background: var(--dc-cream); }
.link { color: var(--dc-green); }
.switch input:checked + i, .veg-switch input:checked + i { background: var(--dc-green); }
.check input, .opt input, input[type=radio], input[type=checkbox] { accent-color: var(--dc-green); }
.choice > span { border-color: var(--line); background: var(--dc-white); }
.choice > span i { color: var(--dc-green); }
.choice input:checked + span { border-color: var(--dc-green); box-shadow: inset 0 0 0 1px var(--dc-green); background: var(--dc-white); }

.qty { border-color: var(--dc-tan); background: var(--dc-white); }
.qty button { color: var(--dc-green); transition: background-color var(--t) var(--ease); }
.qty button:hover { background: var(--dc-cream); }
.qty-primary, .dr-add .qty { background: var(--dc-green); border-color: var(--dc-green); color: var(--dc-white); }
.qty-primary button, .dr-add .qty button { color: var(--dc-white); }
.qty-primary button:hover, .dr-add .qty button:hover { background: var(--dc-green-2); }

.badge { border-radius: var(--r-sm); }
.badge-muted { background: var(--dc-cream); color: var(--muted); }
.badge-dark { background: var(--dc-green); }
.count { background: var(--dc-beige); color: var(--dc-green); }

/* Inputs: white with a warm hairline */
.input, .field input:not([type=checkbox]):not([type=radio]), .field select, .field textarea, .select, .phone-field {
  background: var(--dc-white); border-color: color-mix(in srgb, var(--dc-tan) 60%, #fff);
}
.input::placeholder, .field input::placeholder, .field textarea::placeholder { color: var(--muted); opacity: .85; }
.input-group > i { color: var(--muted); }

/* ---------- Header: white, one hairline; green announcement strip ---------- */
.announce { background: var(--dc-green); color: var(--dc-beige); border-bottom-color: var(--dc-green); letter-spacing: .02em; }
.preview-bar { background: var(--dc-green-2); color: var(--dc-cream); }
.site-header { background: var(--dc-white); border-bottom-color: var(--line); }
.site-header.scrolled { box-shadow: 0 1px 0 var(--line); }
.logo b { color: var(--dc-green); }
.logo small { color: var(--muted); }
.brand-img { border: 0; padding: 0; background: transparent; border-radius: 0; }
.site-nav > a { color: var(--ink-2); }
.site-nav > a:hover, .site-nav > a.active { color: var(--dc-green); }
.site-nav > a.active::after { background: var(--dc-tan); height: 2px; }
@media (min-width: 961px) {
  .site-nav > a::after { transition: transform var(--t) var(--ease); }
  .site-nav > a:not(.active)::after { content: ''; position: absolute; left: 14px; right: 14px; bottom: 2px; height: 2px; background: var(--dc-tan); transform: scaleX(0); transform-origin: left; }
  .site-nav > a:not(.active):hover::after { transform: scaleX(1); }
}
.dot-new { background: var(--dc-tan); }
.open-pill { background: var(--dc-white); box-shadow: none; border-color: var(--line); color: var(--dc-green); }
.basket-btn { background: var(--dc-green); transition: background-color var(--t) var(--ease); }
.basket-btn:hover { background: var(--dc-green-2); }
.dropdown-panel { background: var(--dc-white); border-color: var(--line); }
.dropdown-panel a:hover, .dropdown-panel > button:hover { background: var(--dc-cream); color: var(--dc-green); }
@media (max-width: 960px) {
  .site-nav { background: var(--dc-white); }
  .site-nav > a.active { background: var(--dc-cream); }
  body.nav-open::after { background: color-mix(in srgb, var(--dc-green) 35%, transparent); }
}
.logo-mark { gap: 0; }
.site-logo { display: block; width: auto; height: 70px; margin: 3px 0; }
.footer-logo { display: block; width: 120px; height: auto; }
@media (max-width: 960px) { .site-logo { height: 54px; margin: 5px 0; } }

/* ---------- Sections: one spacing scale, white first, cream for alternate bands ---------- */
.section { padding: var(--section-y) 0; }
.section-alt { background: var(--dc-cream); }
.section-line { border-top-color: var(--line); }
.section-head { margin-bottom: var(--sp-5); gap: var(--sp-4); }
.page-hero { padding: var(--section-y-sm) 0 var(--sp-5); background: var(--dc-white); border-bottom: 1px solid var(--line); }
.page-hero + .section { padding-top: var(--section-y-sm); }
.page-hero h1 { color: var(--dc-green); }

/* ---------- Hero (home): white, with a faint pulli kolam dot field on the photo side ---------- */
.hero { position: relative; background: var(--dc-white); padding: var(--section-y-sm) 0 var(--section-y); border-bottom: 1px solid var(--line); isolation: isolate; }
.hero::before {
  content: ''; position: absolute; inset: 0 0 0 45%; z-index: -1; pointer-events: none;
  background: var(--dc-pulli-field) 0 0 / 48px 48px repeat;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 35%); mask-image: linear-gradient(to right, transparent, #000 35%);
}
.type-tabs { border-bottom-color: var(--line); }
.type-tabs input:checked + span { color: var(--dc-green); border-bottom-color: var(--dc-green); }
.order-box-title { color: var(--ink); }
.postcode-card { border-color: var(--line); background: var(--dc-white); }
.postcode-card > label, .postcode-card > b { color: var(--dc-green); }
.hero-facts i { color: var(--dc-green); }
.hero-photo { border-radius: var(--r-lg); background: var(--dc-cream); }
.hero-offer { background: var(--dc-green); border-radius: var(--btn-radius); }
.hero-offer b { color: var(--dc-beige); }
.hero-offer small { color: var(--dc-cream); }

/* ---------- Delivery check results ---------- */
.postcode-result { color: var(--ink-2); }
.pc-ok { color: var(--dc-green); }
.pc-bad { color: color-mix(in srgb, var(--dc-green) 30%, #8B1E1E); }
.pc-ok, .pc-bad, .pc-wait { display: inline-flex; align-items: flex-start; gap: var(--sp-2); }
.pc-ok > i, .pc-bad > i { margin: 2px 0 0; }
.pc-sub { display: block; font-weight: 400; color: var(--muted); }
.pc-wait { color: var(--muted); align-items: center; }
.pc-wait .spinner { width: 14px; height: 14px; border-width: 2px; }
.pc-check-row { display: flex; gap: var(--sp-2); align-items: stretch; }
.pc-check-row input { flex: 1; min-width: 0; }
.pc-check-row .btn { flex: none; white-space: nowrap; }

/* ---------- Dish cards (sizes unchanged; the photo leads) ---------- */
.dish-card { background: var(--dc-white); border-color: var(--line); border-radius: var(--r-lg); transition: border-color var(--t) var(--ease); }
.dish-card:hover { box-shadow: none; border-color: var(--dc-tan); }
.dish-card.dish-row { background: transparent; border-bottom-color: var(--line); }
.dish-media, .dr-media > a, .dish-photo, .dish-sheet-photo, .up-img, .cat-tile img, .hero-photo { background: var(--dc-cream); }
.dish-media img, .dr-media img, .up-img img { transition: transform 250ms var(--ease); }
.dish-card:hover .dish-media img, .dish-row:hover .dr-media img { transform: scale(1.03); }
.dish-card h3, .dish-row h3 { color: var(--dc-green); font-weight: 600; }
.price, .dr-price, .price-lg { color: var(--dc-green); }
.dr-price del, .price del { color: var(--muted); }
.ribbon { background: var(--dc-white); color: var(--dc-green); border-radius: var(--r-sm); box-shadow: none; border: 1px solid var(--line); }
.ribbon i { color: var(--gold); }
.ribbon-leaf { background: var(--dc-green); color: var(--dc-white); border-color: var(--dc-green); }
.fav-btn { background: var(--dc-white); box-shadow: none; border: 1px solid var(--line); color: var(--dc-green); }
.fav-btn:hover { transform: none; border-color: var(--dc-green); }
.dr-tag { color: var(--dc-green-2); }
.dr-off { color: var(--dc-green-2); }
.dr-add .badge, .dr-add .custom-tag { background: var(--dc-white); border-color: var(--line); }
.dr-add .custom-tag { color: var(--muted); }
.more-btn { color: var(--dc-green); }
.spice { color: color-mix(in srgb, #8B1E1E 85%, var(--dc-tan)); }   /* chilli red, 6:1 on white */
.spice-0 { color: var(--dc-green-2); }

/* ---------- Festival promotion: green panel, one small kolam in the corner ---------- */
.festival-banner, .fest-hero {
  background: linear-gradient(100deg, color-mix(in srgb, var(--dc-green) 94%, transparent) 30%, color-mix(in srgb, var(--dc-green) 60%, transparent) 68%, color-mix(in srgb, var(--dc-green) 20%, transparent)), var(--img) center / cover, var(--dc-green);
}
.festival-banner { position: relative; border-radius: var(--r-lg); }
.festival-banner h2, .fest-hero h1 { color: var(--dc-white); }
.festival-banner p, .fest-hero p { color: var(--dc-beige); }
.festival-banner .kicker, .fest-hero .kicker { color: var(--dc-beige); opacity: 1; }
.festival-banner .btn-primary, .fest-hero .btn-primary { background: var(--dc-beige); border-color: var(--dc-beige); color: var(--dc-green); }
.festival-banner:hover .btn-primary, .fest-hero .btn-primary:hover { background: var(--dc-cream); }
.festival-banner::after {
  content: ''; position: absolute; top: var(--sp-5); right: var(--sp-5); width: 48px; height: 48px; opacity: .45; pointer-events: none;
  background: var(--dc-kolam-light) center / 48px 48px no-repeat;
}
@media (max-width: 700px) { .festival-banner::after { width: 32px; height: 32px; background-size: 32px; top: var(--sp-4); right: var(--sp-4); } }
.blessing { background: var(--dc-cream); }
.blessing i { color: var(--dc-green); }

/* ---------- Visit / What's on ---------- */
.visit { background: var(--dc-white); border-color: var(--line); }
.whats-on .visit { background: var(--dc-white); }
.whats-on .section-head { margin-bottom: var(--sp-5); }
.hours-dark { border-top-color: var(--line); }

/* ---------- Newsletter: a full-width cream band (no card in a card) ---------- */
.newsletter { padding: 0; background: var(--dc-cream); border-top: 1px solid var(--line); }
.newsletter-inner { background: transparent; border-radius: 0; padding: var(--section-y-sm) var(--gutter); }
.newsletter-inner .kicker { color: var(--dc-green-2); }
.newsletter-inner h2 { color: var(--dc-green); }
.newsletter-inner p, .newsletter-form small { color: var(--muted); }
.newsletter-form small a { color: var(--dc-green); }
.newsletter-form .input { background: var(--dc-white); }
/* After a cream section, the newsletter band turns white so the two don't merge */
body:has(main > :last-child.section-alt) .newsletter { background: var(--dc-white); }

/* ---------- Footer: deep green, one small pulli kolam on the top edge ---------- */
.site-footer { position: relative; background: var(--dc-green); color: var(--dc-cream); border-top: 0; }
/* Footer kolam: a small motif inside the footer's bottom line (part of the footer, never floating). */
.footer-bottom > span:first-child::before {
  content: ''; display: inline-block; width: 18px; height: 18px; margin-right: 8px; vertical-align: -4px; opacity: .7;
  background: var(--dc-kolam-light) center / 18px 18px no-repeat;
}
.site-footer h3 { color: var(--dc-beige); font-family: var(--font-body); letter-spacing: .08em; text-transform: uppercase; }
.site-footer a:hover { color: var(--dc-white); }
.site-footer .logo b, .site-footer .logo-light b { color: var(--dc-white); }
.site-footer .logo small { color: var(--dc-beige); }
.footer-brand p { color: color-mix(in srgb, var(--dc-cream) 85%, var(--dc-green)); }
.socials a { border-color: color-mix(in srgb, var(--dc-beige) 45%, transparent); color: var(--dc-beige); }
.socials a:hover { border-color: var(--dc-beige); color: var(--dc-white); }
.footer-bottom { border-top-color: color-mix(in srgb, var(--dc-beige) 25%, transparent); color: color-mix(in srgb, var(--dc-cream) 80%, var(--dc-green)); }
.footer-bottom a { display: inline-block; padding: 6px 2px; }       /* 24px+ tap targets */
.powered { color: color-mix(in srgb, var(--dc-cream) 70%, var(--dc-green)); }
.site-footer .brand-img { background: var(--dc-white); border-radius: 50%; padding: 2px; }

/* ---------- Basket bar ---------- */
.basket-bar { background: var(--dc-white); border-top-color: var(--line); box-shadow: 0 -4px 16px color-mix(in srgb, var(--dc-green) 6%, transparent); }
.bb-sum { color: var(--dc-green); }
.bb-nudge { background: var(--dc-green-2); }
.bb-offers { background: var(--dc-green); }
.bb-offers:hover { background: var(--dc-green-2); }

/* ---------- Menu page ---------- */
.menu-side { border-right-color: var(--line); }
.menu-side-title { color: var(--dc-green); }
.cat-tabs a { color: var(--ink-2); transition: color var(--t) var(--ease), background-color var(--t) var(--ease); }
.cat-tabs a span { color: var(--muted); }
.cat-tabs a:hover { color: var(--dc-green); }
.cat-tabs a.active { color: var(--dc-green); background: var(--dc-cream); border-left-color: var(--dc-green); }
.menu-tools .input, .veg-switch { box-shadow: none; background: var(--dc-white); }
.menu-status { background: var(--dc-cream); }
.menu-status b { color: var(--dc-green); }
.menu-group h2 { color: var(--dc-green); }
.allergen-note { background: var(--dc-cream); }
.allergen-note a { color: var(--dc-green); }
.type-toggle { background: var(--dc-white); }
.type-toggle button.on { background: var(--dc-green); color: var(--dc-white); }
@media (max-width: 960px) {
  .menu-side { background: var(--dc-white); }
  .cat-tabs a.active { background: var(--dc-green); color: var(--dc-white); }
  .cat-tabs a.active span { color: var(--dc-beige); }
}
.offer-card { background: var(--dc-white); border-color: var(--line); transition: border-color var(--t) var(--ease); }
.offer-card:hover { border-color: var(--dc-green); }
.offer-card b { color: var(--dc-green); }
.oc-icon { color: var(--dc-green); background: var(--dc-cream); box-shadow: none; }
.offers-head { background: var(--dc-cream); }
.offers-head p { color: var(--muted); }
.offer-code { background: var(--dc-green); }
.offer-list li.focus { background: var(--dc-cream); }
.promo-apply { color: var(--dc-green); }

/* ---------- Dish page & quick view ---------- */
.crumbs a:hover { color: var(--dc-green); }
.dish-facts { border-color: var(--line); }
.add-panel { background: var(--dc-cream); }
.add-panel .qty { background: var(--dc-white); }
.opt-group legend { background: var(--dc-cream); }
.opt-group legend b, .opt { color: var(--ink); }
.allergen-link { color: var(--dc-green); font-weight: 600; text-decoration: underline; text-decoration-color: var(--dc-tan); text-underline-offset: 3px; }
.allergen-link:hover { text-decoration-color: var(--dc-green); }
.allergen-link i { font-size: .85em; }
.allergen-hint { display: block; color: var(--muted); font-size: 13px; margin-top: 2px; }
.allergen-list { margin-right: 6px; }

/* ---------- Basket / checkout (structure unchanged): white page, hairline cards ---------- */
.order-page { background: var(--dc-white); }
.op-head h1, .op-title, .op-row b, .op-line-main .bl-name, .op-line-side b, .up-name { color: var(--ink); }
.op-line-main .muted, .op-row .muted, .seg small, .choice small { color: var(--muted); }
.op-back, .op-ic { color: var(--dc-green); }
.op-back:hover { background: var(--dc-cream); }
.op-ic { background: var(--dc-cream); }
.op-card, .order-page .order-summary { background: var(--dc-white); box-shadow: 0 0 0 1px var(--line); }
.op-change { color: var(--dc-green); }
.op-change:hover { background: var(--dc-cream); }
.op-signin { background: var(--dc-cream); }
.seg { background: var(--dc-cream); }
.seg input:checked + span { background: var(--dc-white); color: var(--dc-green); box-shadow: 0 0 0 1px var(--dc-tan); }
.offers-row { border-color: var(--line); color: var(--dc-green-2); }
.offers-row .link { color: var(--dc-green); }
.step, .min-bar div { background: var(--dc-green); }
.tiers summary { color: var(--dc-green); }
.sum-total { color: var(--ink); border-top-color: var(--line); }
.up-card { background: var(--dc-white); border-color: var(--line); }
.op-signin, .auth-perk { background: var(--dc-cream); }

/* ---------- Tracking ---------- */
.success-banner { background: var(--dc-green-tint); }
.success-banner p { color: var(--dc-green-2); }
.success-tick { background: var(--dc-green); animation: none; }
.timeline li.done .dot, .timeline li.done::before { background: var(--dc-green); }
.timeline li.current .dot { background: var(--dc-tan); color: var(--dc-green); box-shadow: 0 0 0 6px var(--dc-cream); }
.live-order { border-color: var(--line); }
.avatar, .brand-mono { color: var(--dc-white); }

/* ---------- Sheets, auth, account, info ---------- */
dialog.sheet, dialog.sheet::backdrop { background: color-mix(in srgb, var(--dc-green) 50%, transparent); }
.sheet-card, .sheet-foot, .modal-card, .card, .review-card { background: var(--dc-white); }
.sheet-x, .account-tabs a.active, .account-tabs a:hover { color: var(--dc-green); }
.sheet-x:hover { background: var(--dc-cream); }
.account-tabs a.active, .account-tabs a:hover { border-bottom-color: var(--dc-green); }
.auth-tabs { background: var(--dc-cream); }
.auth-tabs button.on { background: var(--dc-white); color: var(--dc-green); box-shadow: 0 0 0 1px var(--line); }
.auth-perk { color: var(--dc-green); }
.auth-quote { background: color-mix(in srgb, var(--dc-green) 80%, transparent); backdrop-filter: none; }
.contact-card { background: var(--dc-white); }
.contact-card:hover { border-color: var(--dc-green); }
.contact-card i { background: var(--dc-cream); color: var(--dc-green); }
.prose a { color: var(--dc-green); }
.prose h2 { color: var(--dc-green); }
.allergen-table tbody tr:nth-child(even) { background: var(--dc-cream); }
.allergen-table tbody tr:target, .allergen-pending li:target { background: var(--dc-beige); }
.allergen-pending { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; }
.allergen-pending li { padding: 2px 4px; border-radius: var(--r-sm); scroll-margin-top: 120px; }
.allergen-pending a { color: var(--dc-green); }
.allergen-table tbody tr { scroll-margin-top: 120px; }
.al-yes { color: var(--dc-green); }
.alert-info, .alert-success { background: var(--dc-green-tint); color: var(--dc-green); }
.alert-warning { background: var(--dc-tan-tint); color: color-mix(in srgb, var(--dc-green) 55%, #4A2A00); }
.toast { background: var(--dc-green); }

/* ---------- Small screens: no sideways scrolling at 320px (audit RESP-001..003) ---------- */
.menu-main, .menu-bar, .menu-tools > *, .two-col > *, .fest-body > *, .stack > * { min-width: 0; }
.menu-bar { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 360px) {
  .menu-tools .input-group { min-width: 0; flex: 1 1 100%; }
  .two-col .card { padding-left: var(--sp-4); padding-right: var(--sp-4); }
  .countdown div { min-width: 0; flex: 1 1 0; padding: 10px 8px; }
}
.countdown div { backdrop-filter: none; background: color-mix(in srgb, var(--dc-white) 10%, transparent); }
/* Unavailable basket lines stay readable (contrast), the badge says why */
.op-line.unavailable, .basket-line.unavailable { opacity: 1; }
.op-line.unavailable .bl-name { color: var(--muted); }

/* ---------- Motion: short colour/border transitions and a gentle photo zoom only ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0ms !important; animation-duration: 0ms !important; }
  .dish-card:hover .dish-media img, .dish-row:hover .dr-media img { transform: none; }
}

/* ---------- Pulli kolam motifs (thin line art on a dot grid, from the packaging) ---------- */
:root {
  /* Dot field for the hero: dots only, beige, very low contrast */
  --dc-pulli-field: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cg fill='%23E8C99E' fill-opacity='.55'%3E%3Ccircle cx='12' cy='12' r='1.4'/%3E%3Ccircle cx='36' cy='36' r='1.4'/%3E%3C/g%3E%3Cpath d='M12 12 Q24 4 36 12 Q44 24 36 36 Q24 44 12 36 Q4 24 12 12Z' fill='none' stroke='%23E8C99E' stroke-opacity='.35' stroke-width='.8'/%3E%3C/svg%3E");
  --dc-kolam-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cg fill='none' stroke='%23E8C99E' stroke-width='1.2' stroke-linecap='round'%3E%3Cpath d='M24 17.5 C30 17.5 30.5 18 30.5 24 C30.5 30 30 30.5 24 30.5 C18 30.5 17.5 30 17.5 24 C17.5 18 18 17.5 24 17.5Z'/%3E%3Cpath d='M19.5 18.5 C15 7 33 7 28.5 18.5'/%3E%3Cpath d='M29.5 19.5 C41 15 41 33 29.5 28.5'/%3E%3Cpath d='M28.5 29.5 C33 41 15 41 19.5 29.5'/%3E%3Cpath d='M18.5 28.5 C7 33 7 15 18.5 19.5'/%3E%3C/g%3E%3Cg fill='%23E8C99E'%3E%3Ccircle cx='12' cy='12' r='1.6'/%3E%3Ccircle cx='24' cy='12' r='1.6'/%3E%3Ccircle cx='36' cy='12' r='1.6'/%3E%3Ccircle cx='12' cy='24' r='1.6'/%3E%3Ccircle cx='24' cy='24' r='1.6'/%3E%3Ccircle cx='36' cy='24' r='1.6'/%3E%3Ccircle cx='12' cy='36' r='1.6'/%3E%3Ccircle cx='24' cy='36' r='1.6'/%3E%3Ccircle cx='36' cy='36' r='1.6'/%3E%3C/g%3E%3C/svg%3E");
}

/* ---------- Headings added for screen readers (audit A11Y-004/005); same look as before ---------- */
.empty .empty-title { font-size: 1.5em; margin-bottom: 6px; }
@media (max-width: 960px) { .menu-side-title { display: block !important; position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } }

/* ---------- Ordering: one cooking-instructions field; "customise" is a quiet text link ---------- */
.cook-note { display: grid; gap: 6px; margin-top: var(--sp-4); }
.cook-note > span { font-weight: 600; color: var(--ink); }
.cook-note textarea { width: 100%; min-height: 64px; resize: vertical; font: inherit; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--dc-tan) 60%, #fff); border-radius: var(--btn-radius); background: var(--dc-white); }
.cook-note textarea:focus { outline: none; border-color: var(--dc-green); box-shadow: 0 0 0 3px var(--primary-ring); }
.custom-link { background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; color: var(--dc-green); }
.dr-add .custom-link { color: var(--dc-green); }
.party-band { padding: var(--section-y-sm) 0; border-top: 1px solid var(--line); }
.party-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-5); flex-wrap: wrap; }
.party-inner h2 { margin: 4px 0 6px; font-size: clamp(24px, 3vw, 32px); }
.party-inner p { margin: 0; color: var(--muted); max-width: 52ch; }
.ticks { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.ticks li::before { content: '✓'; color: var(--dc-green); font-weight: 700; margin-right: 8px; }
.offer-pick { border: 0; padding: 0; margin: 0; display: grid; gap: 10px; }
.offer-pick legend { margin-bottom: 8px; }
.choice-line { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--btn-radius); }
.choice-line input { margin-top: 3px; }
.announce-link { color: var(--dc-beige); text-decoration: underline; text-underline-offset: 2px; display: inline-block; padding: 5px 2px; margin: -5px 0; }

/* =====================================================================================
   Mobile (≤ 960px): compact header, one navigation panel, one bottom bar, keyboard-safe.
   Sticky strategy: the header is the only sticky element at the top; the basket bar is the only
   fixed element at the bottom (hidden while the keyboard is up, on the basket page and when a
   panel is open); pop-up sheets follow the visual viewport (--vvh/--vvt from lib/viewport.js).
   ===================================================================================== */
.m-drawer[hidden] { display: none !important; }
@media (min-width: 961px) { .m-drawer, .bb-menu { display: none !important; } }
@media (max-width: 960px) {
  /* Header: ☰ left, logo centred, basket right */
  .site-nav { display: none !important; }
  .header-inner { display: grid; grid-template-columns: 48px 1fr auto; align-items: center; min-height: 60px; gap: 8px; }
  .header-inner .logo-mark { justify-self: center; }
  .site-logo { height: 48px; margin: 6px 0; }
  .menu-toggle { width: 44px; height: 44px; }
  .header-actions { gap: 6px; }
  .header-actions .dropdown, .header-actions > .btn-ghost, .header-actions .open-pill { display: none; }
  .basket-btn { height: 40px; padding: 0 12px; }
  body.nav-open { overflow: hidden; }
  body.nav-open::after { display: none; }

  /* Navigation panel */
  .m-drawer { position: fixed; inset: 0; z-index: 1200; background: color-mix(in srgb, var(--dc-green) 40%, transparent); display: flex; }
  .md-head, .md-body { width: min(86vw, 360px); background: var(--dc-white); }
  .m-drawer > * { box-sizing: border-box; }
  .m-drawer { flex-direction: column; align-items: flex-start; }
  .md-head { display: flex; align-items: center; justify-content: space-between; padding: max(10px, env(safe-area-inset-top)) var(--sp-4) 10px; border-bottom: 1px solid var(--line); }
  .md-logo img { display: block; height: 44px; width: auto; }
  .md-close { width: 44px; height: 44px; border: 0; background: var(--dc-cream); border-radius: 50%; color: var(--dc-green); font-size: 18px; display: grid; place-items: center; }
  .md-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: var(--sp-2) var(--sp-3) max(var(--sp-5), env(safe-area-inset-bottom)); display: grid; align-content: start; gap: 2px; }
  .md-link { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 0 var(--sp-3); border: 0; background: none; border-radius: var(--btn-radius); color: var(--ink); font: inherit; font-size: 16px; font-weight: 600; text-align: left; }
  .md-link > i:first-child { width: 22px; color: var(--dc-green); font-size: 18px; }
  .md-link.active, .md-link:hover { background: var(--dc-cream); }
  .md-chev { margin-left: auto; transition: transform var(--t) var(--ease); }
  .md-toggle[aria-expanded="true"] .md-chev { transform: rotate(180deg); }
  .md-cats { display: grid; margin: 0 0 var(--sp-2) 34px; border-left: 2px solid var(--dc-beige); }
  .md-cat { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 var(--sp-3); font-size: 15px; color: var(--ink-2); }
  .md-cat small { margin-left: auto; color: var(--muted); }
  .md-cat i { color: var(--muted); font-size: 12px; }
  .md-cat:first-child small { display: none; }
  .md-cat:first-child i { margin-left: auto; }
  .md-sep { height: 1px; background: var(--line); margin: var(--sp-2) var(--sp-3); }
  .md-call { color: var(--dc-green); }
}

/* Bottom bar: one compact row on phones: [☰ Menu] … [🛍 3 · £41.47 View] */
@media (max-width: 760px) {
  .basket-bar { padding: 8px 0 max(8px, env(safe-area-inset-bottom)); box-shadow: 0 -2px 10px color-mix(in srgb, var(--dc-green) 8%, transparent); }
  .basket-bar .bb-inner { flex-wrap: nowrap; gap: 8px; }
  .basket-bar .bb-nudge { display: none; }
  .bb-menu { display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--btn-radius); background: var(--dc-white); color: var(--dc-green); font-weight: 700; font-size: 14px; }
  .bb-menu i { font-size: 20px; }
  .basket-bar .bb-sum { margin-right: 0; order: 2; gap: 6px; }
  .basket-bar .bb-sum .bb-icon { display: none; }
  .basket-bar .bb-cta { order: 3; flex: 1; height: 44px; min-height: 44px; padding: 0 12px; font-size: 14px; }
  body.has-bar .site-footer { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
}
body.kb-open .basket-bar, body.nav-open .basket-bar, body:has(dialog.sheet[open]) .basket-bar { display: none; }

/* Checkout on phones: the pay button is sticky only while no keyboard is up, and stays one row. */
@media (max-width: 960px) {
  body.kb-open .order-page .pay-box { position: static; box-shadow: none; }
  .order-page .pay-box .bb-nudge { display: none; }
}

/* Forms on phones: 16px text so iOS never zooms (and shifts) the page when a field is focused. */
@media (max-width: 760px) {
  input:not([type=checkbox]):not([type=radio]), select, textarea, .input, .phone-field input { font-size: 16px !important; }
}

/* Pop-up sheets follow the visible area above the keyboard; the body scrolls, never the page. */
@media (max-width: 760px) {
  dialog.sheet { top: var(--vvt, 0px); bottom: auto; height: var(--vvh, 100dvh); align-items: end; place-items: end center; }
  .sheet-card { width: 100% !important; max-height: calc(var(--vvh, 100dvh) - 8px); border-radius: var(--r-lg) var(--r-lg) 0 0; }
  .sheet-body { overscroll-behavior: contain; }
}
.auth { min-height: calc(100dvh - 66px); }

/* Footer on phones: small, clean */
@media (max-width: 760px) {
  .site-footer { padding: var(--sp-6) 0 var(--sp-5); font-size: 14px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-5) var(--sp-4); }
  .footer-brand { grid-column: 1 / -1; display: grid; grid-template-columns: auto 1fr; gap: 4px var(--sp-4); align-items: center; }
  .footer-logo { width: 72px; }
  .footer-brand p { margin: 0; font-size: 13px; }
  .footer-brand .socials { grid-column: 1 / -1; }
  .f-hours .hours { display: none; }
  .f-links { grid-column: 1 / -1; }
  .f-links .links { display: flex; flex-wrap: wrap; gap: 4px 16px; }
  .f-links .links a { display: inline-block; padding: 6px 0; }
  .footer-bottom { margin-top: var(--sp-5); }
  .newsletter-inner { padding-top: var(--sp-6); padding-bottom: var(--sp-6); }
}
@media (min-width: 761px) { .f-hours-short { display: none; } }
.f-hours-short { margin: 0; }
@media (max-width: 960px) { .menu-side { top: 61px; } }
.party-inner .btn { max-width: 100%; white-space: normal; text-align: center; }
@media (max-width: 480px) { .party-inner .btn { width: 100%; } }
@media (max-width: 760px) { .basket-bar .bb-cta { min-width: 0; overflow: hidden; white-space: nowrap; } .basket-bar .bb-sum b { white-space: nowrap; } }
@media (max-width: 360px) { .basket-bar .bb-cta i, .bb-menu span { display: none; } .bb-menu { padding: 0 10px; } }

/* ---------- v4.5: footer layout, slim footer on ordering pages, Menu button + category sheet ---------- */
.site-footer .f-top { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; padding-bottom: var(--sp-5); border-bottom: 1px solid color-mix(in srgb, var(--dc-beige) 20%, transparent); }
.f-logo { display: block; flex: none; }
.f-logo .footer-logo { width: 84px; }
.f-tag { margin: 0; flex: 1 1 260px; max-width: 52ch; color: color-mix(in srgb, var(--dc-cream) 85%, var(--dc-green)); }
.site-footer .f-top .socials { display: flex; gap: 8px; }
.f-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-5); padding-top: var(--sp-5); }
.f-col h3 { margin: 0 0 8px; }
.f-col p, .f-col address { margin: 0; font-style: normal; line-height: 1.7; }
.f-links .links { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 2px 16px; }
.f-links .links a { display: inline-block; padding: 4px 0; }
.f-legal { display: flex; gap: 14px; flex-wrap: wrap; }
.footer-bottom { display: flex; justify-content: space-between; gap: 8px 24px; flex-wrap: wrap; align-items: center; }
.footer-bottom small { display: block; margin-top: 2px; }
.site-footer .logo { position: static; z-index: auto; }
@media (max-width: 960px) { .f-cols { grid-template-columns: 1fr 1fr; } .f-links { grid-column: 1 / -1; } }
@media (max-width: 760px) {
  .site-footer .f-top { gap: var(--sp-3); }
  .f-logo .footer-logo { width: 64px; }
  .f-tag { font-size: 13px; flex-basis: 200px; }
  .f-cols { gap: var(--sp-4) var(--sp-3); }
  .f-links .links { grid-template-columns: 1fr 1fr; }
}
/* Ordering pages: one quiet line instead of the newsletter and full footer. */
.footer-slim { padding: 14px 0; font-size: 13px; }
.footer-slim .fs-inner { display: flex; justify-content: space-between; align-items: center; gap: 6px 16px; flex-wrap: wrap; color: color-mix(in srgb, var(--dc-cream) 85%, var(--dc-green)); }
.footer-slim a { color: var(--dc-cream); display: inline-block; padding: 6px 0; }
body.has-bar .footer-slim { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }

/* Round "Menu" button (menu page, phones and tablets) and its category sheet. */
.menu-fab, .cat-sheet { display: none; }
@media (max-width: 960px) {
  .menu-fab { display: grid; place-items: center; gap: 0; position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 91; width: 76px; height: 76px; border-radius: 50%; border: 3px solid var(--dc-white); background: var(--dc-green); color: var(--dc-white); font-weight: 700; font-size: 14px; line-height: 1; box-shadow: 0 6px 18px color-mix(in srgb, var(--dc-green) 35%, transparent); padding: 10px 0 12px; }
  .menu-fab i { font-size: 24px; line-height: 1; }
  body.has-bar .menu-fab { bottom: calc(84px + env(safe-area-inset-bottom)); }
  body.kb-open .menu-fab { display: none; }
  .cat-sheet:not([hidden]) { display: flex; align-items: flex-end; position: fixed; inset: 0; z-index: 1300; background: rgba(15, 25, 20, .55); animation: cs-fade .2s ease; }
  .cs-panel { position: relative; width: 100%; max-height: min(75vh, calc(var(--vvh, 100vh) - 80px)); overflow: auto; background: var(--dc-white); border-radius: 24px 24px 0 0; padding: 20px 24px calc(84px + env(safe-area-inset-bottom)); animation: cs-up .25s cubic-bezier(.2, .8, .2, 1); }
  .cs-list { list-style: none; margin: 0 auto; padding: 0; max-width: 520px; }
  .cs-cat { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 4px; font-size: 17px; color: var(--dc-green); border-bottom: 1px solid var(--line); text-decoration: none; }
  .cs-cat small { color: var(--muted); font-size: 13px; }
  .cs-close { position: absolute; right: 20px; bottom: calc(20px + env(safe-area-inset-bottom)); width: 52px; height: 52px; border-radius: 50%; border: 0; background: transparent; color: var(--dc-green); font-size: 26px; }
  body.cat-sheet-open { overflow: hidden; }
}
@keyframes cs-up { from { transform: translateY(40px); opacity: .6; } to { transform: none; opacity: 1; } }
@keyframes cs-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .cat-sheet:not([hidden]), .cs-panel { animation: none; } }
/* Free-dish reward shown as a product card with the normal ADD button. */
.reward-card { width: auto; margin: 4px 0 10px 30px; max-width: 420px; border: 1px dashed var(--dc-green-2, var(--dc-green)); background: color-mix(in srgb, var(--dc-cream) 50%, var(--dc-white)); }
.reward-card .up-img { position: relative; }
.reward-tag { position: absolute; left: 6px; top: 6px; font-style: normal; font-size: 11px; font-weight: 800; letter-spacing: .06em; color: var(--dc-white); background: var(--dc-green); border-radius: 999px; padding: 2px 8px; }
.reward-card .up-body small { display: block; margin: 2px 0 6px; }
@media (max-width: 480px) { .reward-card { margin-left: 0; } }

/* ---------- v4.5: slim top strip ---------- */
.announce { padding: 5px 0; font-size: 12.5px; font-weight: 600; letter-spacing: .01em; }
.an-inner { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 22px; white-space: nowrap; overflow: hidden; }
.an-text { overflow: hidden; text-overflow: ellipsis; }
.announce a.an-text { color: var(--dc-beige); text-decoration: none; padding: 2px 0; margin: 0; display: inline; }
.announce a.an-text:hover { color: var(--dc-white); }
.an-text .bi-gift { color: var(--dc-tan, #D6A874); margin-right: 2px; }
.an-i { font-size: 11px; opacity: .8; margin-left: 2px; }
.pv-pill { flex: none; display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--dc-green); background: var(--dc-beige); border-radius: 999px; padding: 1px 8px; }
@media (max-width: 360px) { .an-text .bi-gift, .an-i { display: none; } .announce { font-size: 12px; } }
@media (max-width: 760px) {
  .site-footer .f-top { padding-bottom: var(--sp-4); }
  .f-cols { padding-top: var(--sp-4); gap: var(--sp-3) var(--sp-3); }
  .f-links .links { gap: 0 16px; }
  .f-links .links a { padding: 3px 0; }
  .site-footer .socials a { width: 40px; height: 40px; }
}


/* ---------- v4.5: full-bleed video hero; the hero line and buttons sit on the lower part of it ----------
   The video's own logo and "Authentic South Indian" line are in the middle of the frame, so the video
   fills the top of the hero and fades into the restaurant green, where our text sits: no overlap. */
.hero-video { position: relative; isolation: isolate; overflow: hidden; padding: 0; border-bottom: 0; color: #fff; display: flex; align-items: flex-end;
  min-height: clamp(520px, 82vh, 880px); background: #0d3624; }
.hero-video::before { content: none; }
.hv-media { position: absolute; left: 0; right: 0; top: 0; width: 100%; height: 80%; object-fit: cover; object-position: center 45%; z-index: -2; background: #0d3624 url('/assets/video/hero3-poster.webp') center / cover no-repeat; }
.hv-shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(to bottom, rgba(13, 54, 36, 0) 0%, rgba(13, 54, 36, 0) 52%, rgba(13, 54, 36, .75) 70%, #0d3624 81%, #0d3624 100%); }
.hv-over { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 12px 40px; padding-top: var(--sp-6); padding-bottom: clamp(28px, 5vh, 56px); text-align: left; }
.hero .hv-title { grid-column: 1; margin: 0; max-width: 26ch; text-align: left; font-family: var(--font-display); font-weight: 600; line-height: 1.08; color: #fff; text-wrap: balance; font-size: clamp(30px, 3.6vw, 54px); letter-spacing: -.01em; text-shadow: 0 2px 16px rgba(0, 0, 0, .3); }
.hv-l1 { display: block; }
.hv-l2 { display: block; font-style: italic; font-weight: 500; color: var(--dc-beige); }
.hv-ctas { grid-column: 2; grid-row: 1 / span 2; align-self: end; display: flex; gap: var(--sp-3); flex-wrap: wrap; margin: 0; }
.hv-ctas .btn { min-width: 200px; box-shadow: 0 6px 18px rgba(0, 0, 0, .25); }
.hv-ctas .btn-primary { background: var(--dc-green); border-color: var(--dc-beige); }
.btn-light { background: rgba(255, 255, 255, .95); color: var(--dc-green); border: 1px solid #fff; }
.btn-light:hover { background: #fff; color: var(--dc-green); }
.hv-status { grid-column: 1; margin: 0; font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; color: rgba(255, 255, 255, .85); font-weight: 600; }
.hv-status span { display: inline-flex; align-items: center; gap: 6px; }
.hv-status i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.hv-status .is-open i { background: #7BE0A4; }
@media (max-width: 900px) {
  .hero-video { min-height: max(560px, calc(100svh - 120px)); max-height: 820px; }
  .hv-media { height: 64%; }
  .hv-shade { background: linear-gradient(to bottom, rgba(13, 54, 36, 0) 0%, rgba(13, 54, 36, 0) 44%, rgba(13, 54, 36, .8) 58%, #0d3624 65%, #0d3624 100%); }
  .hv-over { grid-template-columns: 1fr; text-align: center; gap: 14px; }
  .hero .hv-title { grid-column: 1; text-align: center; margin: 0 auto; font-size: clamp(28px, 7.4vw, 40px); }
  .hv-ctas { grid-column: 1; grid-row: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .hv-ctas .btn { min-width: 0; padding-inline: 10px; }
  .hv-status { text-align: center; font-size: 11px; order: 3; }
  .hv-ctas { order: 2; }
}
@media (max-width: 360px) { .hv-ctas { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .hv-media { visibility: hidden; } } /* the poster (background) stays as a still photo */

/* ---------- v4.5: full width with even side padding ---------- */
:root { --container: 100%; --gutter: clamp(16px, 4vw, 64px); }

/* ---------- v4.5: location chip by the logo (menu, dish and specials pages) ---------- */
.loc-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-height: 36px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--dc-white); color: var(--dc-green); font-size: 13.5px; line-height: 1.2; cursor: pointer; white-space: nowrap; overflow: hidden; }
.loc-chip b { font-weight: 700; }
.loc-chip span { color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
.loc-chip .lc-chev { font-size: 11px; color: var(--muted); }
.loc-chip:hover { border-color: var(--dc-green); }
.header-inner > .loc-chip { margin-right: auto; }
.lc-toggle { width: 100%; }
.lc-toggle button { flex: 1; }
@media (max-width: 960px) {
  .header-inner > .loc-chip { grid-column: 1 / -1; grid-row: 2; justify-self: center; margin: 0 0 8px; min-height: 32px; font-size: 13px; padding: 4px 12px; }
}

/* ---------- v4.5: phones: no category scroller on the menu (the Menu button does that) ---------- */
@media (max-width: 960px) { .menu-side { display: none; } }
/* The side column (and its h1) is hidden on phones and tablets, so the page keeps one h1 for screen readers there. */
.menu-h1-m { display: none; }
@media (max-width: 960px) { .menu-h1-m { display: block; position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } }

/* ---------- basket bar: one solid bar in the brand green (no gradients, no glow) ---------- */
.basket-bar { background: transparent; border-top: 0; box-shadow: none; padding: 10px 0 max(10px, env(safe-area-inset-bottom)); pointer-events: none; }
.basket-bar .bb-inner { display: flex; justify-content: center; }
.bb-pill { pointer-events: auto; display: flex; align-items: stretch; width: min(560px, 100%); min-height: 52px; border-radius: var(--btn-radius, 6px); overflow: hidden; background: var(--dc-green); color: #fff; text-decoration: none; box-shadow: 0 4px 14px rgba(15, 64, 43, .22); font-weight: 700; }
.bb-pill:hover { color: #fff; background: var(--dc-green-2, #155A3C); }
.bb-sum2 { display: flex; align-items: center; gap: 6px; padding: 0 16px; background: rgba(0, 0, 0, .18); font-size: 15px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bb-label { flex: 1; display: flex; align-items: center; justify-content: center; font-size: 15px; letter-spacing: .04em; text-transform: uppercase; }
body.has-bar .menu-fab { bottom: calc(86px + env(safe-area-inset-bottom)); }

/* ---------- v4.5: Menu button shrinks while scrolling; up/down arrows for the long menu ---------- */
@media (max-width: 960px) {
  .menu-fab { transition: width .2s ease, height .2s ease, padding .2s ease; }
  .menu-fab.is-mini { width: 54px; height: 54px; padding: 0; }
  .menu-fab.is-mini span { display: none; }
}

/* ---------- v4.5: ordering pages end in the green footer (no white gap under the bar) ---------- */
html:has(.footer-slim) { background: var(--dc-green); }
body.has-bar .footer-slim { padding-bottom: calc(92px + env(safe-area-inset-bottom)); }
.sum-note { margin: 2px 0 6px; font-size: 12.5px; color: var(--muted); }
.auth-perk { display: block; line-height: 1.45; }

/* ---------- v4.6: dishes without a photo keep the same square, with a quiet Dosa Corner mark ---------- */
.dr-media-ph .ph-img { display: block; width: 136px; height: 136px; border-radius: var(--r-lg); background: #F8F4EC url('/assets/img/dish-placeholder.svg') center / cover no-repeat; }
.dish-row.no-photo .dr-media-ph .dr-add { position: absolute; transform: translateX(-50%); }
.dish-rows.compact .dr-media-ph .ph-img { height: 96px; }
@media (max-width: 560px) { .dr-media-ph .ph-img { width: 112px; height: 112px; } }
.dish-rows.compact .dr-media-ph .ph-img { width: 96px; }

/* ---------- v4.6: newsletter band = logo · headline · email · social links (one row on computers) ---------- */
.nl-row { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(280px, 420px) auto; align-items: center; gap: var(--sp-4) var(--sp-5); padding-top: var(--sp-6); padding-bottom: var(--sp-6); }
.nl-logo { display: block; height: 64px; width: auto; }
.nl-copy h2 { margin: 0; font-size: clamp(20px, 2vw, 26px); color: var(--dc-green); }
.nl-copy p { margin: 2px 0 0; color: var(--muted); font-size: 14px; }
.nl-row .newsletter-form { margin: 0; }
.nl-socials { display: flex; gap: 8px; }
.newsletter .socials a { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line); color: var(--dc-green); font-size: 16px; }
.newsletter .socials a:hover { border-color: var(--dc-green); }
.site-footer .f-cols { padding-top: var(--sp-6); }
@media (max-width: 960px) {
  .nl-row { grid-template-columns: auto 1fr; gap: var(--sp-3) var(--sp-4); }
  .nl-row .newsletter-form, .nl-socials { grid-column: 1 / -1; }
  .nl-logo { height: 52px; }
}
.an-terms { text-decoration: underline; text-underline-offset: 2px; opacity: .85; margin-left: 4px; font-weight: 500; }
/* Category sidebar: scrolls quietly (no heavy scrollbar). */
.menu-side { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--dc-green) 25%, transparent) transparent; }
.menu-side::-webkit-scrollbar { width: 6px; }
.menu-side::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--dc-green) 25%, transparent); border-radius: 6px; }
.auth-wait { display: inline-block; width: 32px; height: 32px; border-radius: 50%; background: var(--dc-cream); }

/* 4.6.1 target sizes (WCAG 2.5.8): larger hit areas without moving anything. */
.more-btn { padding: 4px 0; margin: -4px 0; min-width: 44px; text-align: left; }
.announce a.an-text { padding: 3px 0; margin: -3px 0; }

/* =====================================================================================
   v4.6.3: lighter footer and basket bar, calm notifications, panels that slide, even fields
   ===================================================================================== */

/* ---------- Footer: light cream with green text (was a heavy green block) ---------- */
.newsletter { background: var(--dc-white); border-top: 1px solid var(--line); }
body:has(main > :last-child.section-alt) .newsletter { background: var(--dc-white); }
.site-footer { background: var(--dc-cream); color: var(--ink); border-top: 1px solid var(--line); }
.site-footer h3 { color: #7A5B2E; }
.site-footer a { color: var(--dc-green); }
.site-footer a:hover { color: var(--dc-green-2); text-decoration: underline; text-underline-offset: 3px; }
.site-footer .f-col p, .site-footer .f-col address, .site-footer .hours { color: var(--ink); }
.footer-bottom { border-top: 1px solid var(--line); color: var(--muted); }
.footer-bottom > span:first-child::before { display: none; }
.powered { color: var(--muted); }
.socials a, .newsletter .socials a { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line); background: var(--dc-white); color: var(--dc-green); font-size: 17px; }
.socials a:hover, .newsletter .socials a:hover { border-color: var(--dc-green); color: var(--dc-green); }
/* Slim footer on ordering pages: the same light look */
.footer-slim { background: var(--dc-cream); }
.footer-slim .fs-inner { color: var(--muted); }
.footer-slim a { color: var(--dc-green); }
html:has(.footer-slim) { background: var(--dc-cream); }
@media (max-width: 960px) {
  body:has(.menu-fab) .footer-slim { padding-bottom: calc(192px + env(safe-area-inset-bottom)); } /* the round Menu and WhatsApp buttons never cover a link */
  body.has-bar:has(.menu-fab) .footer-slim { padding-bottom: calc(264px + env(safe-area-inset-bottom)); }
}

/* ---------- Basket bar: a light card with one green button ---------- */
.bb-pill { align-items: center; gap: 10px; min-height: 58px; padding: 5px 5px 5px 10px; background: var(--dc-white); color: var(--dc-green); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 8px 26px rgba(15, 64, 43, .16); }
.bb-pill:hover { background: var(--dc-white); color: var(--dc-green); border-color: var(--dc-beige); }
.bb-sum2 { background: transparent; padding: 0 4px; gap: 10px; font-size: 15px; color: var(--dc-green); }
.bb-sum2 > i { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: var(--dc-cream); font-size: 17px; }
.bb-label { flex: 0 0 auto; margin-left: auto; height: 46px; padding: 0 18px; border-radius: 10px; background: var(--dc-green); color: var(--dc-white); font-size: 14px; letter-spacing: .05em; gap: 8px; }
.bb-label::after { content: '\2192'; font-size: 16px; letter-spacing: 0; }
.bb-pill:hover .bb-label { background: var(--dc-green-2); }
@media (max-width: 360px) { .bb-label { padding: 0 12px; } .bb-sum2 > i { display: none; } }

@media (max-width: 760px) { body.has-bar .site-footer { padding-bottom: calc(96px + env(safe-area-inset-bottom)); } }

/* ---------- Notifications: a white card like a payment-app confirmation ---------- */
#toasts { align-content: start; justify-items: stretch; height: auto; bottom: auto; }
@media (max-width: 640px) { #toasts { justify-items: center; } }
.toast { align-self: start; align-items: center; gap: 12px; width: 100%; max-width: 420px; box-sizing: border-box; padding: 12px 10px 12px 12px; background: var(--dc-white); color: #16241C; border: 1px solid rgba(15, 64, 43, .10); border-radius: 16px; box-shadow: 0 14px 36px rgba(10, 30, 20, .18); font-size: 14.5px; line-height: 1.4; transform: translateY(-10px) scale(.98); transition: opacity .22s ease, transform .32s cubic-bezier(.2, 1.3, .4, 1); }
.toast.show { transform: none; }
.toast-error { background: var(--dc-white); }
.toast i { flex: 0 0 auto; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; margin: 0; font-size: 18px; }
.toast-success i { background: #E5F2EA; color: #1D6B3F; }
.toast-error i { background: #FBE9E6; color: #A12A1F; }
.toast-info i { background: #E8EFF8; color: #2456A6; }
.toast button { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%; color: #56655C; font-size: 20px; }
.toast button:hover { background: var(--dc-cream); }

/* ---------- Panels slide in and out (drawer, Menu sheet, Menu list in the drawer) ---------- */
@media (max-width: 960px) {
  .cat-sheet:not([hidden]), .cs-panel { animation: none; }
  .m-drawer.is-opening { animation: dc-fade-in .22s ease both; }
  .m-drawer.is-opening .md-head, .m-drawer.is-opening .md-body { animation: dc-from-left .28s cubic-bezier(.2, .8, .2, 1) both; }
  .m-drawer.is-closing { animation: dc-fade-out .22s ease both; }
  .m-drawer.is-closing .md-head, .m-drawer.is-closing .md-body { animation: dc-to-left .22s ease-in both; }
  .cat-sheet.is-opening { animation: dc-fade-in .2s ease both; }
  .cat-sheet.is-opening .cs-panel { animation: dc-from-below .3s cubic-bezier(.2, .8, .2, 1) both; }
  .cat-sheet.is-closing { animation: dc-fade-out .22s ease both; }
  .cat-sheet.is-closing .cs-panel { animation: dc-to-below .22s ease-in both; }
  .md-cats.is-opening { animation: dc-drop .22s ease both; }
  .md-cats.is-closing { animation: dc-lift .16s ease both; }
  /* Menu sheet: a header with the title and a close button that stays put while the list scrolls */
  .cs-panel { padding: 0 20px calc(104px + env(safe-area-inset-bottom)); }
  .cs-head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; margin: 0 -20px; padding: 14px 12px 10px 24px; background: var(--dc-white); border-bottom: 1px solid var(--line); }
  .cs-head h2 { margin: 0; font-size: 20px; color: var(--dc-green); }
  .cs-close { position: static; width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--dc-cream); color: var(--dc-green); font-size: 18px; display: grid; place-items: center; }
  /* The round button sits above the open sheet and turns into Close */
  body.cat-sheet-open .menu-fab { z-index: 1301; }
  .menu-fab .fab-open, .menu-fab .fab-shut, .menu-fab.is-mini .fab-open, .menu-fab.is-mini .fab-shut { display: grid; place-items: center; gap: 2px; }
  .menu-fab .fab-shut, .menu-fab.is-mini .fab-shut, body.cat-sheet-open .menu-fab .fab-open, body.cat-sheet-open .menu-fab.is-mini .fab-open { display: none; }
  body.cat-sheet-open .menu-fab .fab-shut, body.cat-sheet-open .menu-fab.is-mini .fab-shut { display: grid; }
  .menu-fab.is-mini .fab-open > span, .menu-fab.is-mini .fab-shut > span { display: none; }
}
@keyframes dc-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes dc-fade-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes dc-from-left { from { transform: translateX(-100%); } to { transform: none; } }
@keyframes dc-to-left { from { transform: none; } to { transform: translateX(-100%); } }
@keyframes dc-from-below { from { transform: translateY(100%); } to { transform: none; } }
@keyframes dc-to-below { from { transform: none; } to { transform: translateY(100%); } }
@keyframes dc-drop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes dc-lift { from { opacity: 1; } to { opacity: 0; transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .m-drawer, .m-drawer *, .cat-sheet, .cs-panel, .md-cats, .toast { animation: none !important; transition: none !important; } }

/* ---------- Every field the same size (iPhone draws date and time pickers wider and centred) ---------- */
.field input[type=date], .field input[type=time], .field input[type=datetime-local], input.input[type=date], input.input[type=time] {
  -webkit-appearance: none; appearance: none; display: block; width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box; min-height: 46px; text-align: left; line-height: 1.3;
}
.field input[type=date]::-webkit-date-and-time-value, .field input[type=time]::-webkit-date-and-time-value { text-align: left; }
.field select, select.input { max-width: 100%; min-width: 0; box-sizing: border-box; }
.field { min-width: 0; }

/* =====================================================================================
   v4.7: calmer ordering (reference: the delivery apps the owner likes)
   ===================================================================================== */
/* ---------- Menu sheet: just the list; the round button becomes a plain × in the same place ---------- */
@media (max-width: 960px) {
  .cs-panel { padding: 22px 24px calc(96px + env(safe-area-inset-bottom)); border-radius: 22px 22px 0 0; }
  .cs-list { max-width: 360px; margin: 0 auto; }
  .cs-cat { display: block; padding: 15px 2px; font-size: 16.5px; color: #1F2A24; border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, #fff); }
  .cs-cat:active, .cs-cat:hover { color: var(--dc-green); }
  .cs-list li:last-child .cs-cat { border-bottom: 0; }
  body.cat-sheet-open .menu-fab { background: transparent; border-color: transparent; box-shadow: none; color: #16241C; }
  body.cat-sheet-open .menu-fab i { font-size: 30px; }
}

/* ---------- Menu list: minimal rows (name, price, short description; bigger photo; white ADD) ---------- */
.dish-card.dish-row { padding: 22px 0 30px; gap: 18px; }
.dish-row h3 { font-size: 16px; color: #1F2A24; font-weight: 600; margin-top: 4px; }
.dish-row .dr-price { font-size: 15px; color: #3A453F; font-weight: 500; }
.dish-row .dish-desc { color: var(--muted); font-size: 13.5px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 6px; }
.dr-media, .dr-media > a { width: 150px; }
.dr-media > a { height: 140px; border-radius: 14px; }
.dr-media-ph .ph-img { width: 150px; height: 140px; border-radius: 14px; }
.dr-add { bottom: -18px; }
.dr-add .add-btn { min-width: 112px; min-height: 40px; background: var(--dc-white); color: var(--dc-green); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 4px 12px rgba(15, 64, 43, .12); font-weight: 700; letter-spacing: .04em; }
.dr-add .add-btn:hover { background: var(--dc-cream); }
.dr-add .custom-tag { display: block; margin-top: 4px; text-align: center; background: transparent; }
.dr-tag { font-size: 11.5px; color: #8A6A2F; }
@media (max-width: 560px) {
  .dr-media, .dr-media > a, .dr-media-ph .ph-img { width: 132px; }
  .dr-media > a, .dr-media-ph .ph-img { height: 124px; }
  .dr-add .add-btn { min-width: 100px; }
}
.dish-rows.compact .dr-media, .dish-rows.compact .dr-media > a, .dish-rows.compact .dr-media-ph .ph-img { width: 96px; height: 96px; }

/* ---------- "How would you like your food?" and saved addresses ---------- */
.mode-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mode-pick button { display: grid; justify-items: start; gap: 2px; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--dc-white); color: var(--dc-green); text-align: left; font: inherit; cursor: pointer; }
.mode-pick button i { font-size: 22px; margin-bottom: 4px; }
.mode-pick button b { font-size: 16px; }
.mode-pick button small { color: var(--muted); font-size: 12.5px; }
.mode-pick button.on { border: 2px solid var(--dc-green); padding: 13px; background: var(--dc-green-tint); }
.explore-link { display: block; margin: 4px auto 0; padding: 10px; font-weight: 600; color: var(--dc-green); }
.addr-list { display: grid; gap: 8px; }
.addr-row { display: flex; align-items: center; gap: 8px; }
.addr-pick { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--dc-white); text-align: left; font: inherit; color: var(--ink); cursor: pointer; }
.addr-pick > i:first-child { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--dc-cream); color: var(--dc-green); font-size: 16px; }
.addr-pick span { display: grid; min-width: 0; }
.addr-pick b { color: var(--dc-green); font-size: 15px; }
.addr-pick small { color: var(--muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.addr-row.is-on .addr-pick { border-color: var(--dc-green); }
.addr-tick { margin-left: auto; color: var(--dc-green); font-size: 18px; }
.tag-pick { display: flex; gap: 8px; border: 0; padding: 0; margin: 0; flex-wrap: wrap; }
.tag-pick legend { margin-bottom: 6px; font-size: 13px; color: var(--muted); }
.tag-pick label { position: relative; }
.tag-pick input { position: absolute; opacity: 0; inset: 0; }
.tag-pick span { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; color: var(--dc-green); font-weight: 600; font-size: 14px; }
.tag-pick input:checked + span { border-color: var(--dc-green); background: var(--dc-green); color: var(--dc-white); }
.tag-pick input:focus-visible + span { outline: 2px solid var(--dc-green); outline-offset: 2px; }

/* ---------- My order: calmer and shorter ---------- */
.op-closed { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; padding: 10px 14px; border-radius: 12px; background: var(--dc-cream); color: var(--ink); font-size: 14px; }
.op-closed i { color: var(--dc-green); }
.cook-note { display: block; margin-top: 14px; border: 1px solid var(--line); border-radius: 12px; padding: 0; }
.cook-note summary { list-style: none; display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 14px; cursor: pointer; color: var(--muted); font-size: 14.5px; }
.cook-note summary::-webkit-details-marker { display: none; }
.cook-note summary span { margin-left: auto; font-size: 18px; color: var(--dc-green); }
.cook-note[open] summary span { transform: rotate(45deg); }
.cook-note textarea { display: block; width: calc(100% - 24px); margin: 0 12px 12px; min-height: 64px; }
.op-more { display: inline-block; margin-top: 12px; }
.op-offers { display: flex; justify-content: space-between; align-items: center; gap: 10px; width: 100%; min-height: 56px; padding: 0 18px; border: 0; border-radius: var(--r-lg); background: var(--dc-white); box-shadow: 0 0 0 1px var(--line); color: var(--dc-green); font: inherit; font-weight: 700; font-size: 15px; text-align: left; cursor: pointer; }
.op-offers span { display: inline-flex; align-items: center; gap: 10px; }
.op-offers .bi-percent { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: var(--dc-green); color: var(--dc-white); font-size: 13px; }
.op-allergen { margin-top: 14px; padding: 12px 14px; border-radius: 12px; background: var(--dc-cream); display: grid; gap: 10px; font-size: 14px; color: var(--ink); }
.op-allergen p { margin: 0; display: flex; gap: 10px; align-items: flex-start; line-height: 1.45; }
.op-allergen p > i { color: var(--dc-green); margin-top: 2px; }
.op-allergen .check, .op-check { display: flex; align-items: flex-start; gap: 10px; margin: 0; font-size: 14px; color: var(--ink); line-height: 1.45; }
.op-check { margin-top: 14px; }
.op-allergen .check input, .op-check input { width: 20px; height: 20px; margin: 0; flex: none; }
.order-summary .sum-note { font-size: 12.5px; }
/* Pay button: the amount on the left, the action on the right */
.pay-btn { display: flex; justify-content: space-between; align-items: center; padding: 0 20px; min-height: 56px; }
.pay-btn .pb-amt { font-variant-numeric: tabular-nums; font-size: 17px; }
.pay-btn .pb-label { letter-spacing: .06em; }
.pay-box .bb-nudge { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 8px 8px 14px; background: var(--dc-cream); color: var(--ink); font-size: 13.5px; border-radius: 12px 12px 0 0; }
.pay-box .bb-nudge b { color: var(--dc-green); }
.pay-box .bb-offers { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 8px; border: 1px solid var(--line); background: var(--dc-white); color: var(--dc-green); font-weight: 700; font-size: 13px; }
@media (max-width: 960px) { .order-page .pay-box .bb-nudge { display: flex; } }
/* Next-offer line above the basket bar */
.basket-bar .bb-inner { flex-direction: column; align-items: center; gap: 6px; }
.bb-strip { pointer-events: auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; width: min(560px, 100%); padding: 6px 6px 6px 14px; border-radius: 12px; background: var(--dc-cream); border: 1px solid var(--line); color: var(--ink); font-size: 13.5px; box-shadow: 0 4px 14px rgba(15, 64, 43, .10); }
.bb-strip b { color: var(--dc-green); }
.bb-strip .bb-offers { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 8px; border: 1px solid var(--line); background: var(--dc-white); color: var(--dc-green); font-weight: 700; font-size: 13px; }
.bb-strip[hidden] { display: none; }
body.has-bar .site-footer, body.has-bar .footer-slim { padding-bottom: calc(var(--bar-h, 82px) + 16px); }
@media (max-width: 960px) {
  body.has-bar:has(.menu-fab) .footer-slim { padding-bottom: calc(var(--bar-h, 82px) + 192px); }
  body.has-bar .menu-fab { bottom: calc(var(--bar-h, 82px) + 6px); }
}

/* ---------- Offers sheet: a warm header band and simple rows ---------- */
.sheet-head.offers-band { position: relative; background: #F3E3C3; border-bottom: 0; padding-right: 96px; overflow: hidden; }
.offers-band h2 { color: #5A3E12; }
.offers-band p { color: #6B5124; margin: 4px 0 0; }
.ob-gift { position: absolute; right: 54px; top: 50%; transform: translateY(-50%) rotate(-12deg); font-size: 34px; color: #B8893F; opacity: .9; }
.offers-band .sheet-x { position: relative; z-index: 1; background: rgba(255, 255, 255, .7); }
.offer-list li { align-items: center; }
.ol-main { display: grid; gap: 3px; min-width: 0; }
.ol-title { font-size: 15.5px; color: #1F2A24; }
.ol-left { color: #9A6B1F; font-weight: 600; }

/* ===== v4.8: checkout ticks, contact, offers, upsell ===== */
.op-tick { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; align-items: start; margin: 14px 0 0; font-size: 14px; line-height: 1.45; color: var(--ink); cursor: pointer; }
.op-tick input { width: 20px; height: 20px; margin: 1px 0 0; }
.op-tick.op-allergen { padding: 12px 14px; border-radius: 12px; background: var(--dc-cream); gap: 10px; }
.op-tick a { color: var(--dc-green); font-weight: 700; }
.op-ok { color: var(--dc-green); font-weight: 600; }
.op-free { display: inline-flex; align-items: baseline; gap: 6px; white-space: nowrap; }
.op-preview { background: var(--dc-tan-tint); }
.op-preview a { color: inherit; font-weight: 700; }
.op-contact-form { display: grid; gap: 10px; }
.op-contact-form .field { margin: 0; }
.up-kind { display: block; font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); margin-bottom: 2px; }
.reward-list { display: grid; gap: 10px; margin-top: 12px; }
.offer-pick legend small { font-weight: 400; font-size: 13px; }
.offer-applied.not-used i { color: var(--muted); }
/* Menu side list: the count sits in its own column, clear of long names */
@media (min-width: 961px) {
  .cat-tabs a { gap: 16px; padding-right: 12px; line-height: 1.3; }
  .cat-tabs a span { flex: none; min-width: 26px; padding: 2px 8px; border-radius: 999px; background: var(--dc-cream); text-align: center; font-variant-numeric: tabular-nums; }
}
/* Announcement: the full offer wording, on two short lines on phones rather than cut off */
@media (max-width: 700px) {
  .an-inner { white-space: normal; flex-wrap: wrap; text-align: center; line-height: 1.35; padding-top: 2px; padding-bottom: 2px; }
  .an-text { overflow: visible; text-overflow: clip; }
}
/* Footer on phones: one centred column (newsletter, socials, details, links, legal line) */
@media (max-width: 600px) {
  .newsletter .nl-row { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .newsletter .nl-row > * { justify-self: center; }
  .newsletter .nl-logo { margin: 0 auto; }
  .newsletter .nl-copy { text-align: center; }
  .newsletter .newsletter-form { width: 100%; text-align: center; }
  .newsletter .nl-socials { justify-content: center; width: 100%; }
  .site-footer .f-cols { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .site-footer .f-col { width: 100%; }
  .site-footer .f-col p a, .site-footer .f-col address a { display: inline-block; padding: 4px 0; min-height: 24px; }
  .site-footer .f-links .links { justify-items: center; justify-content: center; }
  .site-footer .hours { margin-left: auto; margin-right: auto; }
  .site-footer .footer-bottom { flex-direction: column; align-items: center; text-align: center; gap: 8px; }
  .site-footer .f-legal { justify-content: center; }
  .footer-slim .fs-inner { flex-direction: column; align-items: center; text-align: center; gap: 6px; }
}
/* "Order again": the photo and its ADD button sit one above the other, never on top of each other */
.dish-rows.compact .dr-media, .dish-rows.compact .dr-media > a, .dish-rows.compact .dr-media-ph .ph-img { width: 112px; }
.dish-rows.compact .dr-media { height: auto; }
.dish-rows.compact .dr-media > a, .dish-rows.compact .dr-media-ph .ph-img { height: 84px; border-radius: 12px; }
.dish-rows.compact .dr-add, .dish-rows.compact .dish-row.no-photo .dr-media-ph .dr-add { position: static; transform: none; margin-top: 8px; display: grid; justify-items: stretch; }
.dish-rows.compact .dr-add .add-btn, .dish-rows.compact .dr-add .qty { width: 100%; min-width: 0; min-height: 36px; box-shadow: none; }
.dish-rows.compact .dr-add .custom-tag, .dish-rows.compact .dr-add .custom-link { text-align: center; }
.dish-rows.compact .dish-card.dish-row { padding: 14px 0 16px; }
/* Analytics question (only when Google Analytics is switched on in the dashboard) */
.consent-banner { position: fixed; left: 12px; right: 12px; bottom: calc(12px + var(--bar-h, 0px)); z-index: 1100; max-width: 520px; margin: 0 auto; background: var(--dc-white); color: var(--ink); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 12px 32px rgba(10, 30, 20, .16); padding: 12px 14px; display: grid; gap: 10px; font-size: 14px; line-height: 1.45; }
.consent-banner p { margin: 0; }
.consent-banner a { color: var(--dc-green); font-weight: 600; }
.cb-actions { display: flex; gap: 8px; justify-content: flex-end; }
.cb-actions .btn { flex: 1 1 0; min-height: 44px; }

/* ===== v4.8.3: outside opening hours the menu can be browsed but not ordered from ===== */
.menu-closed-note { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 14px; padding: 12px 14px; border-radius: 12px; background: var(--dc-cream); color: var(--ink); font-size: 14px; line-height: 1.45; }
.menu-closed-note i { color: var(--dc-green); font-size: 18px; line-height: 1.2; }
.menu-list.is-closed .dish-row, .again-card.is-closed .dish-row { opacity: .55; filter: grayscale(.6); }
.menu-list.is-closed .dish-row:hover, .menu-list.is-closed .dish-row:focus-within { opacity: .75; }
.add-btn[disabled], .qty-closed button[disabled] { cursor: not-allowed; opacity: .6; }

/* ===== v4.8.4: allergen guide built around the 14 allergens ===== */
.allergen-guide .al-h { margin: 28px 0 6px; }
.allergen-guide .al-lead { margin: 0 0 14px; }
.al-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.al-item { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--line, #E8DCC8); border-radius: 12px; background: #fff; }
.al-item div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.al-item b { font-size: 15px; color: var(--ink); }
.al-num { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--dc-cream); color: var(--dc-green); font-weight: 700; font-size: 13px; }
.al-call { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; margin-bottom: 16px; }
.al-call > i { font-size: 22px; color: var(--dc-green); line-height: 1.2; }
.al-call p { margin: 4px 0 10px; }
.al-dishes { margin-top: 8px; border: 1px solid var(--line, #E8DCC8); border-radius: 12px; padding: 0 16px; background: #fff; }
.al-dishes > summary { cursor: pointer; padding: 14px 0; font-weight: 600; color: var(--dc-green); list-style-position: inside; }
.al-dishes[open] > summary { border-bottom: 1px solid var(--line, #E8DCC8); margin-bottom: 12px; }
.al-dishes .allergen-pending { padding-bottom: 14px; }
@media (max-width: 600px) { .al-grid { grid-template-columns: 1fr; } }
/* v4.8.4: form validation errors next to the field */
.field-error { display: block; color: #B42318; font-size: 13px; margin: 4px 0 0; }
[aria-invalid="true"] { border-color: #B42318 !important; box-shadow: 0 0 0 3px rgba(180, 35, 24, .12) !important; }

/* ---------- v4.8.5: tighter footer (the columns sat ~80px below the newsletter band) ---------- */
.site-footer:not(.footer-slim) { padding-top: var(--sp-6); }
.site-footer .f-cols { padding-top: 0; }
.site-footer .footer-bottom { margin-top: var(--sp-5); padding-top: 14px; }
@media (max-width: 760px) {
  .site-footer:not(.footer-slim) { padding-top: var(--sp-5); }
  .site-footer .f-cols { gap: var(--sp-4) var(--sp-3); }
  .site-footer .f-col h3 { margin-bottom: 4px; }
  .site-footer .footer-bottom { margin-top: var(--sp-4); }
}

/* ===================== v4.9.0 ===================== */
/* Kolam border (Dosa Corner's own pattern) under the header and over the footer */
.site-header::after, .newsletter::before, .footer-slim::before {
  content: ""; display: block; height: 12px; background: url('/assets/img/kolam-border.svg') left center / auto 12px repeat-x; pointer-events: none;
}
.site-header::after { position: absolute; left: 0; right: 0; top: 100%; opacity: .9; }
.site-header { border-bottom-color: transparent; }
.newsletter::before { margin-top: -6px; }
.newsletter { position: relative; }
.footer-slim::before { margin: -14px 0 10px; }
@media (max-width: 960px) { .site-header::after { height: 9px; background-size: auto 9px; } }

/* Menu: a cleaner side list (no visible scrollbar, wider so names stay on one line, thin rule) */
@media (min-width: 961px) { .menu-layout { grid-template-columns: 248px minmax(0, 1fr); gap: 0 40px; } }
.menu-side { scrollbar-width: none; border-right: 1px solid color-mix(in srgb, var(--line) 70%, transparent); }
.menu-side::-webkit-scrollbar { display: none; }
.offer-strip, .again-row, .pb-track { scrollbar-width: none; }
.offer-strip::-webkit-scrollbar, .again-row::-webkit-scrollbar, .pb-track::-webkit-scrollbar { display: none; }

/* Every dish row the same height: the "customise" link sits under ADD without pushing the row */
.dr-add { display: grid; justify-items: center; }
.dr-add .custom-tag { position: absolute; top: calc(100% + 2px); left: 50%; transform: translateX(-50%); white-space: nowrap; margin: 0; }
.dish-card.dish-row { padding-bottom: 34px; }
.menu-group .dish-rows { border-top: 0; }
.dish-card.dish-row { border-bottom: 1px solid color-mix(in srgb, var(--line) 75%, transparent); }

/* Specials banners at the top of the menu: two side by side, the whole poster always visible */
.promo-banners { position: relative; margin: 0 0 22px; }
.pb-track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 16px) / 2); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; }
.promo-banner { scroll-snap-align: start; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: stretch; height: 210px; border-radius: 14px; overflow: hidden; text-decoration: none; border: 1px solid var(--line); }
.promo-banner.tone-green { background: var(--dc-green); color: var(--dc-cream); }
.promo-banner.tone-cream { background: #EFE6D6; color: var(--dc-green); }
.pb-text { display: flex; flex-direction: column; gap: 4px; padding: 18px 18px 16px; min-width: 0; }
.pb-kicker { font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; opacity: .85; }
.pb-title { font-family: var(--font-display, Georgia, serif); font-size: 22px; line-height: 1.15; }
.pb-sub { font-size: 13px; line-height: 1.4; opacity: .9; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.pb-cta { margin-top: auto; font-weight: 700; font-size: 14px; display: inline-flex; gap: 6px; align-items: center; }
.promo-banner { grid-template-columns: minmax(0, 1fr) 149px; }
.pb-poster { width: 149px; height: 210px; display: block; background: #F3EDE2; } /* 210 × 900/1273: the whole A3 poster */
.pb-poster img { width: 100%; height: 100%; object-fit: contain; display: block; }
.promo-banner:hover .pb-cta i { transform: translateX(3px); }
.pb-cta i { transition: transform .2s; }
.pb-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: #fff; color: var(--dc-green); box-shadow: 0 4px 14px rgba(0, 0, 0, .12); display: grid; place-items: center; font-size: 16px; z-index: 2; }
.pb-prev { display: none; } .pb-next { right: -14px; }
@media (max-width: 760px) {
  .pb-track { grid-auto-columns: 86%; }
  .promo-banner { height: 178px; grid-template-columns: minmax(0, 1fr) 126px; }
  .pb-poster { width: 126px; height: 178px; }
  .pb-title { font-size: 19px; }
  .pb-arrow { display: none; }
}

/* Order again: small cards in one sideways row (different from the menu rows) */
.again-strip { margin: 0 0 18px; }
.again-row { display: grid; grid-auto-flow: column; grid-auto-columns: 168px; gap: 14px; overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: 4px; }
.again-item { scroll-snap-align: start; display: grid; gap: 6px; align-content: start; border: 1px solid color-mix(in srgb, var(--line) 80%, transparent); border-radius: 14px; padding: 10px; background: var(--dc-white); }
.ai-img { display: block; aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; background: var(--dc-cream); }
.ai-img img, .ai-img .ph-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ai-img .ph-img { background: #F8F4EC url('/assets/img/dish-placeholder.svg') center / 60% no-repeat; }
.again-item h3 { font-size: 14px; line-height: 1.3; margin: 0; min-height: 2.6em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.again-item h3 a { color: inherit; text-decoration: none; }
.ai-foot { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.ai-price { font-weight: 600; font-size: 14px; }
.ai-foot .add-btn { min-width: 64px; min-height: 34px; padding: 4px 10px; }
.ai-foot .custom-tag { display: none; }
.again-strip.is-closed .again-item { opacity: .6; }

/* Posters (home "Chef's specials" and the Offers page): whole posters, never cropped */
.posters-band { padding-top: clamp(28px, 4vw, 48px); padding-bottom: clamp(28px, 4vw, 48px); }
.poster-row, .posters-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.poster-card { display: grid; gap: 8px; text-decoration: none; color: var(--dc-green); }
.poster-card img { width: 100%; height: auto; aspect-ratio: 900 / 1273; object-fit: contain; border-radius: 12px; box-shadow: 0 6px 20px rgba(15, 64, 43, .12); background: #F3EDE2; transition: transform .25s var(--ease); }
.poster-card:hover img { transform: translateY(-3px); }
.poster-cta { font-weight: 700; font-size: 14.5px; display: inline-flex; gap: 6px; align-items: center; }
.section-tight { padding-top: 28px; padding-bottom: 8px; }
@media (max-width: 760px) {
  .poster-row { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 72%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 6px; }
  .poster-row::-webkit-scrollbar { display: none; }
  .poster-row .poster-card { scroll-snap-align: center; }
  .posters-grid { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; }
}
.code-terms { padding-left: 1.1em; }
.code-terms li { margin-bottom: 8px; }
.ol-terms { display: block; font-size: 11.5px; line-height: 1.45; color: var(--muted); margin-top: 3px; }

/* Floating buttons, one family (NN/g back-to-top guidelines; Material 3 FAB sizes and touch targets):
   round, Dosa Corner green with a white ring, icon over a short label, stacked in the bottom-right corner.
   Phones on the menu: Menu (bottom), WhatsApp "Chat" above it (same size), "Top" above that only while
   scrolling back up a long page. Elsewhere WhatsApp takes the corner. Everything moves up with the basket bar. */
:root { --fab: 64px; --fab-gap: 12px; --fab-base: calc(16px + env(safe-area-inset-bottom)); }
body.has-bar { --fab-base: calc(var(--bar-h, 76px) + 12px + env(safe-area-inset-bottom)); }
.wa-fab, .top-fab { position: fixed; z-index: 92; right: 16px; display: grid; place-items: center; align-content: center; gap: 2px; border-radius: 50%; border: 3px solid var(--dc-white); background: var(--dc-green); color: var(--dc-white); font-weight: 700; font-size: 13px; line-height: 1; text-decoration: none; box-shadow: 0 6px 18px color-mix(in srgb, var(--dc-green) 35%, transparent); transition: transform .2s var(--ease), background .2s, opacity .2s; }
.wa-fab { width: var(--fab); height: var(--fab); bottom: var(--fab-base); }
.wa-fab:hover, .wa-fab:focus-visible, .top-fab:hover, .top-fab:focus-visible { background: var(--dc-green-2); color: var(--dc-white); transform: translateY(-2px); }
.top-fab { width: 52px; height: 52px; font-size: 11px; bottom: calc(var(--fab-base) + var(--fab) + var(--fab-gap)); right: calc(16px + (var(--fab) - 52px) / 2); opacity: 0; pointer-events: none; transform: translateY(8px); }
.top-fab i { font-size: 18px; }
.wa-fab svg { width: 30px; height: 30px; } /* WhatsApp: the logo alone says what it is (the words are its aria-label and tooltip) */
.menu-fab .fab-word { font-size: 11px; letter-spacing: -.01em; white-space: nowrap; }
.top-fab.on { opacity: 1; pointer-events: auto; transform: none; }
body.cat-sheet-open .wa-fab, body.kb-open .wa-fab, body.nav-open .wa-fab, body:has(dialog[open]) .wa-fab,
body.cat-sheet-open .top-fab, body.kb-open .top-fab, body.nav-open .top-fab, body:has(dialog[open]) .top-fab { display: none; }
.vm-fab { position: fixed; z-index: 92; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom)); transform: translate(-50%, 140%); opacity: 0; pointer-events: none; display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 0 22px; border-radius: 999px; background: var(--dc-green); color: var(--dc-cream); font-weight: 700; font-size: 15px; letter-spacing: .02em; text-decoration: none; box-shadow: 0 10px 26px rgba(15, 64, 43, .3); transition: transform .3s var(--ease), opacity .3s; }
.vm-fab.on { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
.vm-fab:hover { color: #fff; background: var(--dc-green-2, #155A3C); }
body.has-bar .vm-fab { bottom: calc(var(--bar-h, 76px) + 14px + env(safe-area-inset-bottom)); }
@media (max-width: 960px) {
  /* Phones and tablets: the same size as the round Menu button (76px), stacked above it on the menu */
  :root { --fab: 76px; }
  body.has-bar { --fab-base: calc(var(--bar-h, 82px) + 6px); }
  body:has(.menu-fab) .wa-fab { bottom: calc(var(--fab-base) + var(--fab) + var(--fab-gap)); }
  body:has(.menu-fab) .top-fab { bottom: calc(var(--fab-base) + 2 * (var(--fab) + var(--fab-gap))); }
}
@media (prefers-reduced-motion: reduce) { .vm-fab, .wa-fab, .top-fab, .poster-card img { transition: none; } }
/* Menu discounts: a small label on the dish, the old price struck through */
.dr-deal { display: inline-block; margin-left: 6px; font-size: 11px; font-weight: 800; letter-spacing: .02em; color: #fff; background: #B3261E; border-radius: 999px; padding: 1px 8px; }
/* Photo protection (see app/main.js): no dragging, no long-press "Save image", not selectable */
img, picture, video { -webkit-user-drag: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }

/* =====================================================================================
   v5.0.2 (owner, 14 Oct): one header everywhere, offers ticker, socials in the footer
   ===================================================================================== */
/* Header: logo and links on the left; delivery chip, account and basket on the right. */
.site-nav { margin: 0 auto 0 8px; }
.header-inner > .loc-chip { margin-right: 0; }
.header-actions { margin-left: 0; gap: 10px; }
:root { --hd-round: 44px; }
.hd-round { position: relative; width: var(--hd-round); height: var(--hd-round); padding: 0; border-radius: 50%; display: inline-grid; place-items: center; flex: none; font-size: 15px; font-weight: 700; letter-spacing: .02em; line-height: 1; border: 0; cursor: pointer; text-decoration: none; }
.hd-round .bi { font-size: 19px; }
.hd-round .count { position: absolute; top: -4px; right: -6px; min-width: 20px; height: 20px; padding: 0 5px; font-size: 11.5px; border: 2px solid var(--dc-white); }
.hd-round .count.is-empty { display: none; }
.hd-round.avatar { color: var(--dc-white); }
.hd-round.basket-btn { gap: 0; background: var(--dc-green); color: var(--dc-white); }
.hd-round.basket-btn:hover { background: var(--dc-green-2, #155A3C); color: var(--dc-white); }
.hd-signin { background: var(--dc-white); color: var(--dc-green); border: 1px solid var(--line); }
.hd-signin:hover { border-color: var(--dc-green); color: var(--dc-green); }
.hd-round.auth-wait { background: var(--dc-cream); }
.hd-round:focus-visible { outline: 2px solid var(--dc-tan); outline-offset: 2px; }
/* Account menu with the notifications at the top */
.acct-panel { width: 320px; max-width: calc(100vw - 24px); }
.acct-notes { display: grid; gap: 4px; padding: 6px 4px 10px; margin-bottom: 4px; border-bottom: 1px solid var(--line-2); }
.acct-notes .row-between { padding: 0 8px; }
.acct-notes .row-between b { font-size: 14px; display: inline-flex; align-items: center; gap: 6px; }
.acct-notes .badge { font-size: 11px; }
.acct-notes > p { margin: 0; padding: 2px 8px; }
.acct-notes .notif { padding: 8px; }
/* Narrow computers: keep everything on one line */
@media (min-width: 961px) and (max-width: 1240px) {
  .site-nav > a { padding: 8px 9px; font-size: 15px; }
  .header-inner > .loc-chip b { display: none; }
  .header-inner > .loc-chip { max-width: 190px; }
}
@media (max-width: 960px) {
  :root { --hd-round: 40px; }
  .header-actions .dropdown { display: block; }           /* the account button shows on phones too */
  .header-inner { grid-template-columns: 48px 1fr auto; }
  .hd-round .bi { font-size: 18px; }
  .acct-panel { position: fixed; top: auto; right: 12px; left: 12px; width: auto; margin-top: 8px; }
  .dropdown.open .acct-panel { max-height: calc(100vh - 140px); overflow: auto; }
}

/* Offers ticker: brand beige with green text */
.announce { background: var(--dc-beige); color: var(--dc-green); border-bottom: 1px solid color-mix(in srgb, var(--dc-green) 12%, transparent); padding: 0; }
.an-inner { display: flex; flex-wrap: nowrap; align-items: center; gap: 8px; min-height: 34px; justify-content: center; white-space: nowrap; padding-top: 0; padding-bottom: 0; line-height: 1.2; }
.an-ticker { position: relative; flex: 1 1 auto; min-width: 0; overflow: hidden; }
.an-track { display: flex; width: max-content; margin: 0 auto; }
.an-items { display: inline-flex; align-items: center; white-space: nowrap; }
.an-items + .an-items { display: none; }
.an-item { display: inline-flex; align-items: center; gap: 6px; padding: 7px 18px; color: var(--dc-green); font-size: 13px; font-weight: 700; letter-spacing: .01em; text-decoration: none; }
.an-item + .an-item::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: color-mix(in srgb, var(--dc-green) 45%, transparent); margin: 0 18px 0 -18px; }
.an-item .bi { font-size: 13px; }
.an-item:hover { color: var(--dc-green); text-decoration: underline; text-underline-offset: 2px; }
.an-item.is-closed { color: #7A2E12; }
.announce .pv-pill { flex: none; }
.an-pause { display: none; flex: none; width: 28px; height: 28px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--dc-green) 30%, transparent); background: transparent; color: var(--dc-green); place-items: center; cursor: pointer; font-size: 13px; }
.an-pause:hover { background: color-mix(in srgb, var(--dc-white) 45%, transparent); }
.an-pause:focus-visible, .an-item:focus-visible { outline: 2px solid var(--dc-green); outline-offset: 2px; }
.announce.is-running .an-pause { display: inline-grid; }
.announce.is-running .an-track { margin: 0; animation: an-run var(--an-dur, 30s) linear infinite; }
.announce.is-running .an-items + .an-items { display: inline-flex; }
.announce.is-running .an-ticker { -webkit-mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent); }
.announce.is-paused .an-track, .an-ticker:hover .an-track, .an-ticker:focus-within .an-track { animation-play-state: paused; }
@keyframes an-run { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  /* No movement: the offers can be scrolled sideways instead. */
  .announce.is-running .an-track { animation: none; }
  .announce.is-running .an-items + .an-items, .announce.is-running .an-pause { display: none; }
  .announce.is-running .an-ticker { overflow-x: auto; scrollbar-width: none; -webkit-mask-image: none; mask-image: none; }
}
@media (max-width: 560px) { .an-item { font-size: 12.5px; padding: 6px 14px; } .an-item + .an-item::before { margin: 0 14px 0 -14px; } }

/* Footer: social links in the bottom row, on the right */
.newsletter .nl-row { grid-template-columns: auto minmax(0, 1fr) minmax(280px, 440px); }
.footer-bottom { align-items: center; }
.fb-left { display: grid; gap: 4px; }
.fb-left .f-legal { justify-content: flex-start; }
.fb-follow { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.fb-follow-label { font-size: 13px; font-weight: 600; color: var(--dc-green); }
/* The round WhatsApp button floats bottom-right. Computers: the social links stop short of it (room on the
   right, not a tall empty band at the bottom). Phones: the links are centred, so a little room below them. */
.site-footer:not(.footer-slim) { padding-bottom: 20px; }
@media (min-width: 961px) { .footer-bottom { padding-right: calc(var(--fab, 64px) + 24px); } }
@media (max-width: 960px) { .site-footer:not(.footer-slim) { padding-bottom: calc(var(--fab, 64px) + 24px); } }
.f-socials { display: flex; gap: 8px; }
.footer-bottom .f-socials a { width: 40px; height: 40px; padding: 0; display: grid; place-items: center; border-radius: 50%; font-size: 17px; }
@media (max-width: 960px) {
  .newsletter .nl-row { grid-template-columns: auto 1fr; }
  .footer-bottom { flex-direction: column; align-items: center; text-align: center; }
  .fb-left .f-legal { justify-content: center; }
  .fb-follow { margin-left: 0; }
}

/* v5.0.3: Offers sheet: title, gift, then the close button last (far right). */
.sheet-head.offers-band { display: flex; align-items: center; gap: 10px; padding-right: 16px; }
.sheet-head.offers-band > div { flex: 1; min-width: 0; }
.offers-band .ob-gift { position: static; transform: rotate(-12deg); flex: none; font-size: 30px; line-height: 1; }
.offers-band .sheet-x { order: 3; margin-left: 4px; }
.offer-applied .oa-actions { display: inline-flex; align-items: center; gap: 10px; flex: none; }

/* v5.0.4: the bottom chrome is split into slots that redraw on their own (layout unchanged). */
#chrome-bottom > .slot { display: contents; }
.basket-bar.bb-still { animation: none; }
/* v5.0.5: offer small print folds away behind "Terms" */
.terms-d { margin-top: 3px; font-size: 11.5px; line-height: 1.45; color: var(--muted); }
.terms-d > summary { display: inline-block; cursor: pointer; color: var(--dc-green); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; padding: 4px 0; list-style: none; }
.terms-d > summary::-webkit-details-marker { display: none; }
.terms-d[open] > summary { margin-bottom: 2px; }
.code-terms .terms-d { display: inline; }
.code-terms .terms-d[open] { display: block; }
/* v5.0.6: menu offer cards: the saving stands out on one line, conditions on the next, "Know more" at the bottom */
.offer-card { width: 156px; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 12px 0; border-radius: 14px; overflow: hidden; }
.offer-card .oc-head { font-size: 22px; line-height: 1.15; font-weight: 800; color: var(--dc-green); white-space: nowrap; letter-spacing: -.01em; }
.offer-card .oc-sub { font-size: 13px; line-height: 1.3; color: var(--ink-2, #3a4a42); white-space: nowrap; }
.offer-card .oc-days { font-size: 11.5px; font-weight: 700; color: #7A4B12; background: color-mix(in srgb, var(--dc-beige) 55%, #fff); border-radius: 999px; padding: 2px 8px; margin-top: 2px; }
.offer-card .oc-more { margin-top: auto; padding: 10px 0 12px; border-top: 1px solid var(--line); width: 100%; font-size: 13px; font-weight: 600; color: var(--dc-green); }
.offer-card .oc-sub + .oc-more { margin-top: 10px; }
.offer-card:hover .oc-more { text-decoration: underline; text-underline-offset: 2px; }
.offer-strip { align-items: stretch; }
.offer-card .oc-code { font-size: 11px; font-weight: 700; letter-spacing: .06em; color: var(--muted); margin-top: 2px; }
.offer-card[data-action="coupon-apply"] .oc-more { background: var(--dc-green); color: var(--dc-white); border-top-color: var(--dc-green); }
.offer-card[data-action="coupon-apply"]:hover .oc-more { background: var(--dc-green-2); text-decoration: none; }
.offer-card.is-applied { border-color: var(--dc-green); }
.offer-card.is-applied .oc-more { background: color-mix(in srgb, var(--dc-green) 10%, #fff); color: var(--dc-green); }
.offer-card .oc-more { margin-left: -12px; margin-right: -12px; width: calc(100% + 24px); text-decoration: none; }
.offer-card[data-action="offers"]:hover .oc-more { text-decoration: none; color: var(--dc-green-2); }

/* v5.0.7 notifications: one line per order, with when it happened and a dot for new ones. */
.acct-notes .notif { position: relative; padding: 8px 26px 8px 8px; border-radius: 10px; }
.acct-notes .notif span { min-width: 0; gap: 1px; }
.acct-notes .notif b { font-size: 13.5px; line-height: 1.3; }
.acct-notes .notif small { line-height: 1.35; }
.acct-notes .notif time { font-size: 11.5px; color: var(--muted); }
.acct-notes .notif:not(.unread) b { font-weight: 600; }
.acct-notes .notif .nd { position: absolute; right: 10px; top: 14px; width: 8px; height: 8px; border-radius: 50%; background: var(--primary); }
.acct-notes .badge { font-weight: 600; }

/* v5.0.7 My orders: short cards (items in one line, date · type · count · total), Rate / Order again / Details. */
.account .po-h { font-family: var(--font-body); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted) !important; margin: 4px 0 10px; }
.account .po-h:not(:first-child) { margin-top: 26px; }
.po-list { display: grid; gap: 12px; }
.po-card { padding: 0; display: grid; overflow: hidden; }
.po-main { display: grid; gap: 4px; padding: 16px 18px 10px; color: inherit; text-decoration: none; }
.po-main:hover .po-no { text-decoration: underline; }
.po-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.po-top .po-no { font-size: 15px; margin-right: auto; }
.po-items { margin: 2px 0 0; font-size: 14.5px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.po-meta { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 0; font-size: 13px; color: var(--muted); }
.po-meta > span:not(:last-of-type)::after { content: '·'; margin: 0 7px; }
.po-meta > b { margin-left: auto; font-size: 15px; color: var(--ink, inherit); }
.po-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 18px 14px; border-top: 1px solid var(--line-2); }
.po-actions .btn { min-height: 40px; }
.po-link { margin-left: auto; font-size: 13.5px; font-weight: 600; color: var(--primary); text-decoration: none; display: inline-flex; align-items: center; gap: 4px; padding: 8px 2px; }
.po-rated { display: inline-flex; align-items: center; gap: 5px; font-size: 13.5px; font-weight: 600; color: var(--muted); padding: 0 4px; }
.po-rated i { color: var(--gold, #E0A100); }
.po-more { display: flex; justify-content: center; margin-top: 14px; }
.po-live { display: flex; align-items: center; gap: 12px; padding: 14px 18px; color: inherit; text-decoration: none; flex-wrap: wrap; }
.po-live-text { display: grid; gap: 2px; flex: 1; min-width: 160px; }
.po-live-text small { color: var(--muted); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 520px) {
  .po-main { padding: 14px 14px 8px; }
  .po-actions { padding: 10px 14px 12px; }
  .po-actions .btn { flex: 1; justify-content: center; }
  .po-link { flex-basis: 100%; justify-content: center; margin: 0; padding-bottom: 0; }
  .po-meta > b { flex-basis: 100%; margin: 4px 0 0; }
}
/* The rating sheet: one dish per row, big stars (44px), comment on request. */
.rate-form { display: grid; gap: 4px; }
.rate-row { border: 0; margin: 0; padding: 12px 0; border-bottom: 1px solid var(--line-2); display: grid; gap: 6px; min-width: 0; }
.rate-row .rate-name { font-weight: 600; font-size: 15px; padding: 0; }
.rate-row.is-done { display: flex; justify-content: space-between; align-items: center; color: var(--muted); }
.rate-row.is-done .stars { color: var(--gold, #E0A100); letter-spacing: 1px; }
.star-input.star-lg { gap: 0; justify-content: flex-end; }
.star-input.star-lg label { font-size: 30px; width: 44px; height: 44px; display: grid; place-items: center; padding: 0; }
.star-lg { justify-self: start; }
.rate-note summary { cursor: pointer; font-size: 13.5px; font-weight: 600; color: var(--primary); padding: 4px 0; list-style: none; }
.rate-note summary::-webkit-details-marker { display: none; }
.rate-note summary::before { content: '+ '; }
.rate-note[open] summary::before { content: '− '; }
.rate-note textarea { margin-top: 6px; width: 100%; resize: vertical; }
.rate-form > p { margin: 10px 0 6px; }
.po-live .btn { margin-left: auto; }
@media (max-width: 520px) {
  .po-live { padding: 14px; }
  .po-live .btn { flex: 1 0 100%; justify-content: center; margin: 0; }
  /* All four account tabs fit on a phone (Settings was off the edge): icon over a short label. */
  .account-tabs { gap: 0; overflow: visible; }
  .account-tabs a { flex: 1; flex-direction: column; gap: 2px; padding: 10px 2px; font-size: 12.5px; justify-content: center; }
  .account-tabs a i { font-size: 18px; }
}