/* =============================================================================
   KISMATH THEME — self-contained Malabar-Arabic palette (burgundy + gold).
   =============================================================================
   Served PER-TENANT from this bundle's CmsStylesheets row (path=theme.css) via
   /cms/assets/theme.css. Self-contained by design: it defines every --km-* token
   and .km-* utility class the Kismath templates + script.js use, and does NOT
   lean on the shared static /assets/tokens.css (that is Asharaf's --lm-* palette
   and would cross-tenant-leak its brand — the "Breizh bug").

   Namespace: --km-* tokens / .km-* classes (per-tenant, matching Breizh's
   own-namespace convention). Palette + fonts ported from the Malabar design
   reference (tijaro-storefront/templates/Kismath/malabar/).
   ============================================================================= */

/* @import must precede all other rules. Fonts from the Malabar reference:
   Cormorant Garamond (display serif), Outfit (UI sans), Yellowtail (script). */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,600&family=Outfit:wght@300;400;500;600;700&family=Yellowtail&display=swap');

:root {
  --km-bg: #360a15;            /* deep burgundy page background */
  --km-bg-1: #440d1c;          /* raised band / marquee strip */
  --km-panel: #46101e;         /* card surface */
  --km-panel-2: #551426;       /* card surface (hover / footer bar) */
  --km-surface: #46101e;       /* alias used by JS-generated cart HTML */
  --km-surface-hi: #551426;    /* qty stepper pill background */
  --km-ink: #f6ecd7;           /* cream body text */
  --km-ink-dim: #ccae93;       /* secondary text */
  --km-ink-faint: rgba(204, 174, 147, 0.55); /* tertiary / captions */
  --km-line: rgba(232, 201, 140, 0.18);       /* hairlines */
  --km-line-strong: rgba(232, 201, 140, 0.34);/* stronger hairlines */
  --km-gold: #d4a94e;          /* brand accent gold */
  --km-gold-2: #f0cf82;        /* light gold (gradient top / emphasis) */
  --km-spice: #e0863a;         /* chilli / heat accent */
  --km-leaf: #7fa07a;          /* success (booking/enquiry confirmation) */

  --km-serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --km-sans: 'Outfit', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --km-script: 'Yellowtail', cursive;
  --km-mono: 'Outfit', ui-monospace, monospace; /* used for eyebrows/micro-labels */

  --km-radius: 10px;
  --km-radius-lg: 16px;
  --km-maxw: 1240px;
  --km-shadow: 0 26px 50px rgba(0, 0, 0, 0.5);
  --km-shadow-lg: 0 40px 80px -20px rgba(0, 0, 0, 0.7);

  /* Live nav height (script.js sets the real px on load/resize); the fallback
     keeps the sticky menu category bar from clipping before the script runs. */
  --km-nav-h: 74px;

  /* Brand logo (nav). --km-logo-h is the ONE knob to tune the visible mark size;
     --km-logo-box is the flex line-box height that keeps the navbar compact (the
     logo bleeds past it via a negative margin — see .km-logo). */
  --km-logo-h: 112px;
  --km-logo-box: 48px;
}

/* ── Bridge to the storefront's React design tokens ──────────────────────────
   ADO #2194. The React (non-CMS) routes — /cart, /checkout, /order/{token},
   /account/*, /wishlist, /gifts, /bookings and the shared legal pages — paint
   from the `--lm-*` custom properties. Those used to be Asharaf's Kitchen's
   palette in the app's shared `:root`; they are a NEUTRAL PLATFORM palette now,
   which is legible on its own but is still not this client's design — and a
   neutral LIGHT default underneath Kismath's dark burgundy is its own defect:
   `--lm-danger` measured 2.16:1 on `.lm-card` before this block existed.

   So Malabar bridges the whole set onto its own tokens, the way
   cms-bundles/tijaro and cms-bundles/asianfresh already do. Nothing falls
   through to the platform any more, which makes that class of bug structurally
   impossible here rather than patched.

   Scope is the 28 `--lm-*` names a shared rule actually READS, derived by
   grepping `var(--lm-…)` across globals.css, public/assets/{tokens,boot}.css
   and every .ts/.tsx under src — not hand-copied. `--lm-bg-2`, `--lm-radius-lg`,
   `--lm-shadow` and `--lm-shadow-lg` are declared in the shared sheet and read
   by nothing, so they are deliberately absent; `--lm-leaf-deep` and
   `--lm-bg-elevated` are read but never declared anywhere, so they stay on
   their call-site fallbacks.

   SOURCE: templates/Kismath/malabar/Kismath Malabar.dc.html — the live variant
   (`DRAWER_CHECKOUT_BRAND_SIGNATURES` names `#360a15|#d4a94e` "Kismath /
   Malabar", which is that prototype's `--bg`/`--gold`). Its root element
   declares --bg/--bg2/--panel/--panel2/--ink/--dim/--gold/--gold2/--spice/--line,
   which are exactly the --km-* above. `--panel` is the answer to the white-card
   regression: this client's card surface is dark burgundy, not white.

   Two values the prototype never draws, derived from its OWN tokens rather than
   borrowed: `--lm-radius-sm` is the 8px this sheet's own `.km-input` uses, and
   `--lm-shadow-sm` is a small shade of the black this sheet's own shadows are
   made of. `--lm-on-accent` is the `#360a15` the prototype puts on its gold
   buttons, which is `--km-bg`.

   NOTE ON WHAT ACTUALLY RENDERS. For a React route the layout also writes
   `MALABAR_LM_TOKENS` INLINE on `[data-tenant-brand]`, and an inline style beats
   a `:root` rule — so for the 22 names that table carries, the inline value is
   what paints and this block is the agreeing second source. The 6 it does not
   carry (`--lm-danger`, `--lm-hover-wash`, `--lm-spinner-track`, `--lm-radius`,
   `--lm-radius-sm`, `--lm-mono`, `--lm-shadow-sm`) are the ones that were
   falling through, and here they land. */
:root {
  --lm-bg: var(--km-bg);
  --lm-bg-1: var(--km-bg-1);
  --lm-surface: var(--km-panel);
  --lm-surface-hi: var(--km-panel-2);
  --lm-line: var(--km-line);
  --lm-line-strong: var(--km-line-strong);

  --lm-ink: var(--km-ink);
  --lm-ink-dim: var(--km-ink-dim);
  --lm-ink-faint: var(--km-ink-faint);

  /* One accent — the gold. The platform's saffron/leaf split collapses onto it. */
  --lm-saffron: var(--km-gold);
  --lm-saffron-soft: var(--km-gold-2);
  --lm-accent-tint: color-mix(in srgb, var(--km-gold) 12%, transparent);
  --lm-on-accent: var(--km-bg);
  --lm-spinner-track: color-mix(in srgb, var(--km-gold) 18%, transparent);
  /* A CREAM wash, not a dark one: this is a dark page and the platform default
     mixes toward its own near-black ink. */
  --lm-hover-wash: color-mix(in srgb, var(--km-ink) 5%, transparent);

  --lm-ember: var(--km-spice);
  --lm-danger: var(--km-spice);
  --lm-leaf: var(--km-leaf);
  --lm-gold: var(--km-gold);
  --lm-cream: var(--km-ink);
  --lm-paper: var(--km-ink);
  --lm-paper-ink: var(--km-bg);

  --lm-radius: var(--km-radius);
  --lm-radius-sm: 8px;
  --lm-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35);

  --lm-sans: var(--km-sans);
  --lm-serif: var(--km-serif);
  --lm-mono: var(--km-mono);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--km-sans);
  font-weight: 300;
  color: var(--km-ink);
  background: var(--km-bg);
  line-height: 1.6;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--km-gold); color: var(--km-bg); }
::-webkit-scrollbar { width: 11px; height: 8px; }
::-webkit-scrollbar-track { background: var(--km-bg-1); }
::-webkit-scrollbar-thumb { background: #7d2c3e; border-radius: 6px; }

.km-serif { font-family: var(--km-serif); font-weight: 400; }
.km-italic { font-style: italic; }
.km-script { font-family: var(--km-script); font-weight: 400; }
.km-mono {
  font-family: var(--km-sans);
  text-transform: uppercase;
  letter-spacing: 0.16em;
}
/* Section kicker — small uppercase gold label above headlines. */
.km-eyebrow, .km-num {
  font-family: var(--km-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--km-gold);
}

.km-shell { max-width: var(--km-maxw); margin: 0 auto; padding: 0 26px; }
.km-section { padding: 90px 26px; }
.km-section-sm { padding: 60px 26px; }

.km-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  background: rgba(54, 10, 21, 0.55);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--km-line);
  transition: background 0.4s ease;
}
.km-nav-scrolled { background: rgba(54, 10, 21, 0.94); }
.km-nav-inner {
  max-width: var(--km-maxw); margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 26px; gap: 18px;
}
/* Large brand logo that BLEEDS out of the compact navbar. The negative vertical
   margin shrinks the flex line-box to --km-logo-box (so nav.offsetHeight stays
   short) while the logo renders at the full --km-logo-h — echoing the Malabar
   reference (112px logo / -32px margin). Nothing on the nav sets overflow:hidden,
   so the overhang is never clipped. Tune --km-logo-h alone; the margin follows. */
.km-logo {
  height: var(--km-logo-h);
  width: auto; display: block; flex: 0 0 auto;
  margin: calc((var(--km-logo-box) - var(--km-logo-h)) / 2) 0;
}
.km-tab {
  background: none; border: none; cursor: pointer;
  font-family: var(--km-sans); font-size: 12px; font-weight: 400;
  letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--km-ink-dim); padding: 9px 13px; border-radius: 999px;
  transition: color 0.25s ease;
}
.km-tab:hover { color: var(--km-ink); }
.km-tab.active { color: var(--km-gold-2); }

/* Mobile masthead: scale the bleeding logo down and shrink the cart pill + burger
   so the compact mobile navbar stays balanced. Redefining the tokens re-derives
   the logo margin automatically. !important overrides the icons' inline w/h. */
@media (max-width: 767px) {
  :root { --km-logo-h: 72px; --km-logo-box: 44px; }
  .km-mobcart, [data-mobile-menu-toggle] { width: 40px !important; height: 40px !important; }
  .km-mobcart svg, [data-mobile-menu-toggle] { font-size: 17px; }
}

.km-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--km-sans); font-weight: 500; font-size: 12px;
  letter-spacing: 2px; text-transform: uppercase;
  padding: 13px 26px; border-radius: 999px; border: 1px solid transparent;
  cursor: pointer; text-align: center; transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}
.km-btn:hover { transform: translateY(-1px); }
.km-btn-gold {
  background: linear-gradient(180deg, var(--km-gold-2), var(--km-gold));
  color: var(--km-bg);
  box-shadow: 0 12px 34px rgba(212, 169, 78, 0.28);
}
.km-btn-ghost {
  background: rgba(255, 255, 255, 0.06);
  color: var(--km-ink);
  border-color: var(--km-line-strong);
  backdrop-filter: blur(6px);
}
.km-btn-ghost:hover { border-color: var(--km-gold); color: var(--km-gold-2); }
.km-btn-lg { padding: 16px 34px; font-size: 13px; }
.km-btn-sm { padding: 8px 16px; font-size: 11px; letter-spacing: 1.5px; }

.km-card {
  background: var(--km-panel);
  border: 1px solid var(--km-line);
  border-radius: var(--km-radius);
}
.km-card-hover { transition: transform 0.45s cubic-bezier(.16,1,.3,1), box-shadow 0.45s ease, border-color 0.3s ease; }
.km-card-hover:hover { transform: translateY(-6px); box-shadow: var(--km-shadow); border-color: var(--km-line-strong); }

.km-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--km-sans); font-size: 10px; font-weight: 500;
  letter-spacing: 1.5px; text-transform: uppercase;
  padding: 5px 10px; border-radius: 999px;
  background: rgba(54, 10, 21, 0.6); border: 1px solid var(--km-line);
  color: var(--km-ink-dim);
}
.km-chip-accent { color: var(--km-gold-2); border-color: var(--km-line-strong); }

.km-label {
  display: block; font-family: var(--km-sans); font-size: 10px;
  letter-spacing: 2px; text-transform: uppercase; color: var(--km-ink-dim);
  margin-bottom: 6px;
}
.km-input {
  width: 100%; background: var(--km-bg-1);
  border: 1px solid var(--km-line); color: var(--km-ink);
  padding: 12px 13px; border-radius: 8px; font-size: 15px;
  font-family: var(--km-sans); outline: none; color-scheme: dark;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.km-input:focus { border-color: var(--km-gold); box-shadow: 0 0 0 3px rgba(212, 169, 78, 0.14); }
.km-input::placeholder { color: var(--km-ink-faint); }

/* Form field variant used by the auth modal, account page, book + gift forms.
   Global so the auth modal (rendered into site-layout) and account page share
   one styled input treatment. */
.km-field {
  width: 100%; background: var(--km-bg-1);
  border: 1px solid var(--km-line); color: var(--km-ink);
  padding: 12px 13px; border-radius: 8px; font-size: 15px;
  font-family: var(--km-sans); outline: none; color-scheme: dark;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.km-field:focus { border-color: var(--km-gold); box-shadow: 0 0 0 3px rgba(212, 169, 78, 0.14); }
.km-field::placeholder { color: var(--km-ink-faint); }
.km-fieldlabel {
  display: block; font-family: var(--km-sans); font-size: 10px;
  letter-spacing: 2px; text-transform: uppercase; color: var(--km-ink-dim);
  margin-bottom: 6px;
}

.km-divider { border: none; border-top: 1px solid var(--km-line); margin: 0; }

/* Auth modal show/hide — driven by theme.css (not Tailwind's .hidden) so
   script.js's classList add/remove('hidden') reliably toggles it regardless of
   utility-class load order. Centred flex overlay when shown; display:none when
   the .hidden class is present. */
[data-auth-modal] { display: flex; }
[data-auth-modal].hidden { display: none; }

/* Modifier customisation popup — same show/hide contract as the auth modal.
   The overlay is created by script.js (renderModifierModal), so the rule lives
   here rather than on the element: an inline `display` would have to be
   rewritten on every open/close and would fight the `.hidden` toggle. */
[data-modifier-modal] { display: flex; }
[data-modifier-modal].hidden { display: none; }

.km-footer { background: var(--km-bg-1); border-top: 1px solid var(--km-line); }
.km-footer h5 {
  font-family: var(--km-sans); font-size: 11px; font-weight: 500;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--km-gold);
  margin: 0 0 14px;
}
.km-footer a { color: var(--km-ink-dim); transition: color 0.2s ease; }
.km-footer a:hover { color: var(--km-gold-2); }

@keyframes km-rise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@keyframes km-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes km-bob { 0%,100% { transform: translateY(0); opacity: 0.65; } 50% { transform: translateY(8px); opacity: 1; } }
@keyframes km-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.km-fade-up { animation: km-rise 0.8s cubic-bezier(.16,1,.3,1) both; }
@media (prefers-reduced-motion: reduce) {
  .km-fade-up { animation: none; }
  html { scroll-behavior: auto; }
}
/* Marquee: script.js duplicates the inner content so the -50% loop is seamless. */
.km-marquee { display: inline-flex; white-space: nowrap; animation: km-marquee 32s linear infinite; }
.km-float { animation: km-float 6s ease-in-out infinite; }
.km-scroll { -webkit-overflow-scrolling: touch; scrollbar-width: thin; }

/* Horizontal chip rail (menu category tabs): scrollable/swipeable but with NO
   native scrollbar — the chunky light webkit bar clashed with the Malabar theme
   (the global ::-webkit-scrollbar burgundy styling didn't tame it as a bottom
   overlay). Instead of removing scroll (chips must stay reachable by
   touch/drag/trackpad), we hide the bar cross-browser and add a right-edge fade
   so it still reads as "scrolls for more". The left edge stays crisp so the
   first chip is always fully legible. Scoped to this class only — the global
   scrollbar rules and the cart sidebar's .km-scroll vertical bar are untouched. */
.km-catbar {
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;                 /* Firefox / standard */
  -ms-overflow-style: none;              /* legacy Edge */
  -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 44px), transparent 100%);
          mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 44px), transparent 100%);
}
.km-catbar::-webkit-scrollbar { height: 0; width: 0; display: none; } /* Chrome/Safari */
/* Pointer drag-to-scroll affordance (initCatbar wires the JS). Touch keeps its
   native momentum scroll; these cursors are a desktop-only hint. */
.km-catbar.km-catbar-scroll { cursor: grab; }
.km-catbar.km-catbar-dragging { cursor: grabbing; user-select: none; }
/* Left/right chevron affordances (shown only when the rail overflows). Absolutely
   positioned inside the rail's positioned parent (the sticky bar). Themed with
   the --km-* palette; hidden on touch where native scroll already works. */
.km-catbar-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 30px; height: 30px; padding: 0; border-radius: 999px; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  background: rgba(54, 10, 21, 0.9); border: 1px solid var(--km-line-strong);
  color: var(--km-gold-2); font-size: 20px; line-height: 1; cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.km-catbar-nav:hover { color: var(--km-gold); border-color: var(--km-gold); }
.km-catbar-nav-l { left: 8px; }
.km-catbar-nav-r { right: 8px; }
@media (hover: none) { .km-catbar-nav { display: none !important; } }

.km-lift { transition: transform 0.45s cubic-bezier(.16,1,.3,1), box-shadow 0.45s ease; }
.km-lift:hover { transform: translateY(-6px); box-shadow: var(--km-shadow); }
.km-imgz { overflow: hidden; }
.km-imgz img { transition: transform 1.1s cubic-bezier(.16,1,.3,1); }
.km-imgz:hover img { transform: scale(1.07); }

/* Malabar-Arabic jali ornament band (decorative divider). Data-URI SVG so it
   ships with the theme (self-contained). */
.km-jali {
  height: 28px; opacity: 0.5;
  background-repeat: repeat-x; background-position: center; background-size: auto 28px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44'%3E%3Cg fill='none' stroke='%23d4a94e' stroke-width='1'%3E%3Cpath d='M22 4 L27 17 L40 22 L27 27 L22 40 L17 27 L4 22 L17 17 Z'/%3E%3Ccircle cx='22' cy='22' r='4.5'/%3E%3C/g%3E%3C/svg%3E");
}
/* Arched top corners — echoes the Malabar mihrab arch on hero cards/tiles. */
.km-arch { border-radius: 120px 120px 10px 10px; }

/* --- Arrival / door-reveal intro (ported from the Malabar reference) --- */
/* Two jali-carved door halves slide apart while the crest fades in then out.
   The doors auto-animate on load; script.js (initIntro) only session-gates +
   removes the overlay so it never blocks clicks. */
@keyframes doorOpenL { from { transform: translateX(0); } to { transform: translateX(-101%); } }
@keyframes doorOpenR { from { transform: translateX(0); } to { transform: translateX(101%); } }
@keyframes crestOut {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.92); }
  22%  { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  55%  { opacity: 1; }
  80%  { opacity: 0; transform: translate(-50%, -50%) scale(1.05); }
  100% { opacity: 0; }
}
.km-intro { position: fixed; inset: 0; z-index: 200; display: flex; overflow: hidden; cursor: pointer; }
.km-door {
  width: 50%; height: 100%;
  background-color: #c7b48f;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%238a6a3f' stroke-width='1.1' opacity='0.45'%3E%3Cpath d='M32 6 L40 24 L58 32 L40 40 L32 58 L24 40 L6 32 L24 24 Z'/%3E%3Ccircle cx='32' cy='32' r='7'/%3E%3C/g%3E%3C/svg%3E");
}
.km-door-l {
  box-shadow: inset -20px 0 46px rgba(40, 26, 10, 0.4), inset 0 0 140px rgba(40, 26, 10, 0.22);
  border-right: 2px solid #9c7a44;
  animation: doorOpenL 1s cubic-bezier(.66, 0, .2, 1) 0.28s both;
}
.km-door-r {
  box-shadow: inset 20px 0 46px rgba(40, 26, 10, 0.4), inset 0 0 140px rgba(40, 26, 10, 0.22);
  border-left: 2px solid #9c7a44;
  animation: doorOpenR 1s cubic-bezier(.66, 0, .2, 1) 0.28s both;
}
.km-intro-crest {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  z-index: 3; text-align: center;
  animation: crestOut 1.35s ease both;
}
.km-intro-logo {
  width: 240px; height: auto; margin: 0 auto; display: block;
  filter: drop-shadow(0 10px 24px rgba(60, 40, 15, 0.3));
}
.km-intro-name { font-size: 52px; letter-spacing: 2px; color: #3a2a14; }
.km-intro-tag {
  margin-top: 6px; font-family: var(--km-sans); font-size: 10px;
  letter-spacing: 4px; text-transform: uppercase; color: #7a5c33;
}
.km-intro-skip {
  position: absolute; right: 22px; bottom: calc(22px + env(safe-area-inset-bottom));
  z-index: 4; padding: 12px 20px; border-radius: 999px; cursor: pointer;
  background: rgba(40, 26, 10, 0.28); border: 1px solid rgba(90, 62, 26, 0.5);
  color: #3a2a14; font-family: var(--km-sans); font-size: 11px;
  letter-spacing: 2px; text-transform: uppercase;
}
@media (prefers-reduced-motion: reduce) {
  .km-door-l, .km-door-r, .km-intro-crest { animation: none; }
}

/* Gold underline reveal on text links. */
.km-underline {
  background-image: linear-gradient(var(--km-gold), var(--km-gold));
  background-size: 0% 1.5px; background-position: 0 100%; background-repeat: no-repeat;
  transition: background-size 0.4s ease; padding-bottom: 4px;
}
.km-underline:hover { background-size: 100% 1.5px; }

/* --- Menu dish attribute badges (mirrors the Asharaf's menu.yml badge row) --- */
.km-badge-row { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.km-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: 999px;
  font-family: var(--km-sans); font-size: 10px; font-weight: 500;
  line-height: 1.4; letter-spacing: 0.02em; white-space: nowrap;
  background: rgba(232, 201, 140, 0.05); color: var(--km-ink-dim);
  border: 1px solid var(--km-line);
}
.km-badge-icon { font-size: 11px; line-height: 1; display: inline-block; }
.km-badge-veg { color: #9fcb6a; border-color: rgba(159, 203, 106, 0.25); }
.km-badge-vegan { color: #7fb46a; border-color: rgba(127, 180, 106, 0.25); }
.km-badge-gf { color: var(--km-gold); border-color: rgba(212, 169, 78, 0.28); }
.km-badge-df { color: #9dc4dd; border-color: rgba(157, 196, 221, 0.25); }
.km-badge-spice { color: var(--km-spice); border-color: rgba(224, 134, 58, 0.4); letter-spacing: 0; }
.km-badge-tag { color: var(--km-ink); }
.km-allergen-line {
  font-family: var(--km-sans); font-size: 11px; color: var(--km-ink-faint);
  margin-top: 6px; line-height: 1.4; letter-spacing: 0.01em;
}
.km-allergen-line strong { color: var(--km-spice); font-weight: 500; }
.km-soldout-reason {
  font-family: var(--km-sans); font-size: 11px; color: var(--km-ink-faint);
  margin-top: 6px; line-height: 1.4; font-style: italic;
}

/* Menu category tabs (sticky bar). */
[data-cat-link] {
  background: none; border: none; cursor: pointer;
  font-family: var(--km-sans); font-size: 12px; font-weight: 500;
  letter-spacing: 1px; text-transform: uppercase; white-space: nowrap;
  padding: 8px 14px; border-radius: 999px;
  color: var(--km-ink-dim); border: 1px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
[data-cat-link]:hover { color: var(--km-ink); }
[data-cat-link].active { color: var(--km-bg); background: var(--km-gold-2); border-color: var(--km-gold-2); }

/* Menu search + segmented filter. */
[data-menu-filter] {
  background: transparent; color: var(--km-ink-dim); border: none; cursor: pointer;
  padding: 8px 14px; border-radius: 999px; font-family: var(--km-sans); font-size: 12px; font-weight: 500;
}
[data-menu-filter].active { background: var(--km-gold-2); color: var(--km-bg); }

/* Two-column menu grid (dishes + sticky order summary) on desktop. */
@media (min-width: 900px) {
  #menu-grid { grid-template-columns: minmax(0, 1fr) 320px !important; gap: 34px !important; }
  /* With online ordering off, menu.yml renders no [data-cart-sidebar], so the
     320px track would be a dead gutter. .km-menu-solo (id + class, so it beats
     the rule above at equal !important) hands the whole width back to the
     dishes — the md:grid-cols-2 card grid simply gets wider. */
  #menu-grid.km-menu-solo { grid-template-columns: minmax(0, 1fr) !important; }
}

/* =============================================================================
   IN-PLACE CART + CHECKOUT DRAWER
   -----------------------------------------------------------------------------
   Right-side slide-in that opens OVER whatever page you're on (home, menu, …).
   The scrim is deliberately TRANSLUCENT (rgba(0,0,0,.45)) — NOT opaque — so the
   page the customer was reading stays visible behind it. Opening the cart never
   navigates away / "resets" to a blank checkout page. Lives in site-layout.yml
   so every CMS route has it; all behaviour is in script.js (initCartDrawer),
   no inline handlers (CSP nonce-safe).

   `.km-hide` is a bulletproof display:none !important used for JS-toggled bits
   that ALSO carry an inline `display:flex/grid` (an inline display would beat a
   plain `.hidden` class). Do NOT put inline `display` on `[data-cart-empty]` /
   `[data-cart-filled]` — those are toggled with `.hidden` by renderCartSidebar.
   ============================================================================= */
.km-hide { display: none !important; }

.km-cart-scrim {
  position: fixed; inset: 0; z-index: 190;
  background: rgba(0, 0, 0, 0.45);           /* LIGHT scrim — page stays visible */
  opacity: 0; visibility: hidden;
  transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}
.km-cart-scrim.km-open {
  opacity: 1; visibility: visible;
  transition: opacity 0.3s ease;
}
.km-cart-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 191;
  width: min(420px, 100%);
  background: var(--km-bg);
  border-left: 1px solid var(--km-line);
  box-shadow: -20px 0 50px rgba(0, 0, 0, 0.5);
  display: flex; flex-direction: column;
  transform: translateX(100%);
  visibility: hidden;
  transition: transform 0.35s cubic-bezier(.16, 1, .3, 1), visibility 0s linear 0.35s;
}
.km-cart-drawer.km-open {
  transform: translateX(0);
  visibility: visible;
  transition: transform 0.35s cubic-bezier(.16, 1, .3, 1);
}
@media (prefers-reduced-motion: reduce) {
  .km-cart-drawer, .km-cart-scrim { transition: none; }
}
/* Lock the page scroll while the drawer is open (the drawer body scrolls). */
body.km-cart-locked { overflow: hidden; }

.km-cart-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 18px 22px; border-bottom: 1px solid var(--km-line);
}
.km-cart-headl { display: flex; align-items: center; gap: 12px; min-width: 0; }
.km-cart-iconbtn {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%; flex: 0 0 auto;
  border: 1px solid var(--km-line); background: none; color: var(--km-ink);
  font-size: 16px; line-height: 1; cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.km-cart-iconbtn:hover { color: var(--km-gold-2); border-color: var(--km-gold); }
.km-cart-stepdots {
  display: flex; align-items: center; gap: 8px; padding: 12px 22px 0;
  font-family: var(--km-sans); font-size: 10px; letter-spacing: 1.5px;
  text-transform: uppercase;
}
.km-cart-stepdot { color: var(--km-ink-faint); }
.km-cart-stepdot.active { color: var(--km-gold-2); }
.km-cart-stepsep { color: var(--km-ink-faint); font-size: 11px; }
.km-cart-scrollbody { flex: 1; overflow-y: auto; padding: 16px 22px; }
.km-cart-foot { border-top: 1px solid var(--km-line); background: var(--km-panel); }
.km-cart-foot:empty { display: none; border-top: none; }

/* Fulfillment toggle (Collection / Delivery) inside the details step. */
.km-fulfill {
  display: flex; gap: 6px; border: 1px solid var(--km-line);
  border-radius: 999px; padding: 4px; margin-bottom: 18px;
}
.km-fulfill-opt {
  flex: 1; background: none; border: none; cursor: pointer;
  color: var(--km-ink-dim); padding: 10px 14px; border-radius: 999px;
  font-family: var(--km-sans); font-size: 13px; font-weight: 500;
  transition: color 0.2s ease, background 0.2s ease;
}
.km-fulfill-opt.active {
  background: linear-gradient(180deg, var(--km-gold-2), var(--km-gold));
  color: var(--km-bg);
}

/* ==========================================================================
   Sign in / reset password  (`tja-*`)  — ADO #4408
   --------------------------------------------------------------------------
   `/account/sign-in`, `/account/register` and `/account/reset-password` are
   SHARED React pages drawn by `components/auth/auth-split-layout.tsx`.
   `/account/reset-password` renders unconditionally on EVERY tenant — there
   is no `layout: "redirect"` fallback for it, unlike sign-in/register — so
   this bundle needs the layer even though sign-in still bounces to its own
   CMS auth modal (it has never declared `tijaro-auth-layout: split`).
   Without this block the reset page painted the component's generic
   fallback (12px-radius box, 800-weight uppercase labels, a leaf→saffron
   gradient panel) on top of a light default surface — the exact "neutral
   default under a dark theme" defect ADO #2194 already fixed for the rest of
   this bundle's React surfaces.

   PROVENANCE. Buttons/fields/labels are this bundle's own `.km-btn-gold`,
   `.km-field` / `.km-input` and `.km-fieldlabel` (`theme.css:221-293`) — the
   auth modal and the account page already share this exact input treatment
   (the comment on `.km-field` says so). The panel is the hero's own radial
   burgundy wash (`templates/home.yml:9`).

   The `--lm-*` bridge above already re-points colour for this surface (this
   bundle bridges the full 28-name set), so `--tja-primary`/`--tja-accent`
   below could read `var(--lm-saffron)` etc. and resolve correctly — they are
   restated directly off `--km-*` anyway, matching how every other tenant's
   `tja-*` block is written, so this section stays legible on its own.

   SPECIFICITY. The component ships its CSS as a `<style>` in the rendered
   section, after this file's `<link>` in `<head>` — equal specificity
   resolves on order, in the component's favour. Every rule below is
   therefore at least two classes deep (`.tja-wrap .tja-x`).
   ========================================================================== */

section.tja-wrap {
  --tja-ink: var(--km-ink);
  --tja-mud: var(--km-ink-dim);
  --tja-hair: var(--km-line);
  --tja-primary: var(--km-gold);
  --tja-accent: var(--km-gold-2);
  --tja-ring: rgba(212, 169, 78, 0.14);
  background: var(--km-bg);
  font-family: var(--km-sans);
}

.tja-wrap .tja-split {
  border: 1px solid var(--km-line);
  border-radius: var(--km-radius-lg);
  background: var(--km-panel);
}

/* The hero's own radial burgundy wash (`templates/home.yml:9`), not the
   component's leaf→saffron gradient. */
.tja-wrap .tja-panel {
  background: radial-gradient(120% 80% at 50% 0%, #5a1226 0%, var(--km-bg) 60%);
  color: var(--km-ink);
}
.tja-wrap .tja-panel-rule { height: 1px; background: var(--km-gold); }
.tja-wrap .tja-panel-word,
.tja-wrap .tja-panel-headline {
  font-family: var(--km-serif);
  font-weight: 400;
  color: var(--km-ink);
}
.tja-wrap .tja-panel-headline-2 { font-style: italic; color: var(--km-gold-2); }
.tja-wrap .tja-benefit { color: var(--km-ink-dim); }
.tja-wrap .tja-benefit-icon { color: var(--km-gold); }

.tja-wrap .tja-card { color: var(--km-ink); }
.tja-wrap .tja-title {
  font-family: var(--km-serif);
  font-weight: 400;
  color: var(--km-ink);
}
.tja-wrap .tja-sub { color: var(--km-ink-dim); }
.tja-wrap .tja-sub a { color: var(--km-gold-2); font-weight: 600; }

/* `.km-fieldlabel` (`theme.css:289`) — Outfit, tracked, uppercase, dim ink. */
.tja-wrap .tja-label {
  font-family: var(--km-sans);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--km-ink-dim);
}

/* `.km-field` (`theme.css:280`) — the exact box the auth modal and the
   account page already share. */
.tja-wrap .tja-input {
  border-width: 1px;
  border-style: solid;
  border-color: var(--km-line);
  border-radius: 8px;
  background: var(--km-bg-1);
  font-family: var(--km-sans);
  color: var(--km-ink);
  color-scheme: dark;
}
@media (min-width: 768px) {
  .tja-wrap .tja-input { font-size: 15px; }
}
.tja-wrap .tja-input::placeholder { color: var(--km-ink-faint); }
.tja-wrap .tja-input:focus,
.tja-wrap .tja-input:focus-visible {
  border-color: var(--km-gold);
  box-shadow: 0 0 0 3px rgba(212, 169, 78, 0.14);
}
.tja-wrap .tja-input[aria-invalid="true"] { border-color: var(--km-spice); }

/* This bundle's one heat/danger accent — the colour `data-address-remove`
   and `data-booking-cancel` already use (`templates/account.yml:110,249`). */
.tja-wrap .tja-error { color: var(--km-spice); font-weight: 600; }
.tja-wrap .tja-form-error {
  border-radius: 8px;
  border: 1px solid var(--km-spice);
  background: color-mix(in srgb, var(--km-spice) 10%, transparent);
  color: var(--km-spice);
  font-family: var(--km-sans);
  font-weight: 500;
}

/* `.km-btn-gold` (`theme.css:229`) — the gold pill this bundle's primary
   actions already use. */
.tja-wrap .tja-submit {
  border-radius: 999px;
  background: linear-gradient(180deg, var(--km-gold-2), var(--km-gold));
  box-shadow: 0 12px 34px rgba(212, 169, 78, 0.28);
  color: var(--km-bg);
  font-family: var(--km-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 2px;
}
.tja-wrap .tja-submit:hover:not(:disabled) {
  filter: none;
  transform: translateY(-1px);
}