/* ============================================================================================================
   bazaar-tokens.css  —  Shubh Bazaar design tokens (paste-ready; contrast-verified with
   /root/.github/skills/next-level-website-designer/scripts/contrast.py, light + dark, see scout/design.md §1.4)

   RULES
   · Components read ONLY --bz-* role tokens. Never a hex, never a raw --gold/--rose (those belong to other products).
   · Brand values that already exist in the repo are the source (vivah.css / match.css / patrika-site.css); the
     "brand-source" comment beside each token says where. A drift test (tests/test_bazaar_tokens.py) compares them.
   · Gold is a FILL / decoration colour (dark text on it). Gold as TEXT on light surfaces fails (2.54:1) → use --bz-gold-ink.
   · Dark = a re-map of the same roles. It applies to (a) the OS setting unless the user chose light,
     (b) <html data-theme="dark">, (c) ANY subtree marked data-bz-theme="dark" (the admin console is always dark).
   ============================================================================================================ */

/* ── 1 · COLOUR (light) ─────────────────────────────────────────────────────────────────────────────────── */
:root,
[data-bz-theme="light"] {
  /* surfaces */
  --bz-paper:         #FAF8F3;   /* page              brand-source: vivah.css --ivory */
  --bz-paper-raised:  #FFFFFF;   /* cards, sheets     brand-source: match.css --card */
  --bz-paper-sunken:  #F4EFE4;   /* chips, wells      brand-source: vivah.css --cream */
  --bz-line:          #E6D9C0;   /* hairlines, card borders (decorative, 1.3:1 by design)   brand-source: --sand */
  --bz-line-strong:   #8F7F66;   /* input / control boundary — 3.67:1 on paper, 3.89:1 on white (WCAG 1.4.11) */
  /* text */
  --bz-ink:           #160F04;   /* body + headings   brand-source: vivah.css --deep */
  --bz-ink-2:         #6E5F49;   /* secondary text — a notch darker than brand --muted #7A6A54, which fails on tints (4.38–4.45) */
  /* primary = the deep brand colour (buttons, links, active states, focus) */
  --bz-primary:       #7A1E2C;   /* ≈ patrika-site.css --wineDeep #7A1F30 (ΔE<1) = spec maroon */
  --bz-primary-press: #5E1722;   /* hover/pressed: DARKER on light themes so contrast rises */
  --bz-on-primary:    #FFFFFF;
  --bz-primary-tint:  #F5E8E9;   /* selected row, active tab wash */
  /* accent = gold, the celebratory colour (badges, rings, confetti, focus halo) */
  --bz-gold:          #C9943C;   /* brand-source: vivah.css --gold */
  --bz-gold-ink:      #8C6320;   /* gold as TEXT/ICON on light — brand-source: --gold-d (5.05:1 on paper) */
  --bz-on-gold:       #160F04;   /* text ON a gold fill: 7.05:1 (white on gold is 2.70 — never) */
  --bz-gold-tint:     #F7ECD3;
  --bz-star:          #B27A1A;   /* rating-star fill — 3.48:1 on paper (non-text ≥3), always paired with a number */
  /* semantic (all AA as text on paper, raised AND their own tint) */
  --bz-success:       #2D7A4F;   /* brand-source: vivah.css --green */
  --bz-success-tint:  #E5F1EA;
  --bz-warning:       #8F5B00;   /* brand has none that passes (#D4A648 = 2.12:1; spec #B7791F = 3.48:1) */
  --bz-warning-tint:  #FBEFD6;
  --bz-error:         #B42318;   /* spec value; brand --error #EF4444 = 3.55:1 fails */
  --bz-error-tint:    #FBE9E7;
  --bz-info:          #1A4A7A;   /* brand-source: vivah.css --blue */
  --bz-info-tint:     #E6EEF7;
  /* sponsored label */
  --bz-spons-bg:      #F6EEDD;
  --bz-spons-ink:     #6E5F49;
  /* dramatic dark sections (hero, footer) stay dark in BOTH themes */
  --bz-deep:          #160F04;
  --bz-on-deep:       #F3E9D8;   /* = shared header --vh-ivory */
  /* focus + halo */
  --bz-focus:         var(--bz-primary);
  --bz-halo:          rgba(201, 148, 60, .32);
  /* availability calendar (never colour alone: each state also has an icon/pattern in the component) */
  --bz-cal-available: var(--bz-success);
  --bz-cal-tentative: var(--bz-warning);
  --bz-cal-booked:    var(--bz-error);
  --bz-cal-blocked:   var(--bz-ink-2);
  --bz-cal-muhurat:   var(--bz-gold);
  /* extras added by the kit (the scout file stops above). Components read ONLY --bz-* tokens, so every colour they need lives here. */
  --bz-scrim:        rgba(22, 15, 4, .56);   /* behind sheets / modals */
  --bz-hover:        rgba(22, 15, 4, .05);   /* row / menu hover wash */
  --bz-shimmer:      rgba(255, 255, 255, .6);
  --bz-photo-shade:  rgba(22, 15, 4, .68);   /* gradient under text laid on photos (white on it >= 7:1) */
  --bz-on-photo:     #FFFFFF;
  --bz-on-error:     #FFFFFF;                /* text on a solid error fill: 6.57:1 */
  --bz-lightbox:     #0E0A03;                /* the lightbox stays dark in both themes */
  --bz-on-lightbox:  #F3E9D8;
  /* chart categorical order (dataviz skill validate_palette.js: ALL CHECKS PASS light on #FFFFFF, dark on #221A0D) */
  --bz-chart-1: #B03A52; --bz-chart-2: #B8861B; --bz-chart-3: #119483; --bz-chart-4: #3C6FC4; --bz-chart-5: #D4622A; --bz-chart-6: #7F55B0;
  color-scheme: light;
}

/* ── 2 · COLOUR (dark) — two identical copies; tests/test_bazaar_tokens.py asserts they never drift ───────── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bz-paper: #160F04; --bz-paper-raised: #221A0D; --bz-paper-sunken: #1D1509;
    --bz-line: #3B2F1E; --bz-line-strong: #8A7B62;
    --bz-ink: #F3E9D8; --bz-ink-2: #C3B497;
    --bz-primary: #E08A96; --bz-primary-press: #F2A9B3; --bz-on-primary: #160F04; --bz-primary-tint: #3A1A1F;
    --bz-gold: #E8B85A; --bz-gold-ink: #E8B85A; --bz-on-gold: #160F04; --bz-gold-tint: #33260F; --bz-star: #E8B85A;
    --bz-success: #7FC49A; --bz-success-tint: #14291D;
    --bz-warning: #E6B35A; --bz-warning-tint: #33260F;
    --bz-error: #F2908A;   --bz-error-tint: #3A1B18;
    --bz-info: #86B4EA;    --bz-info-tint: #13243A;
    --bz-spons-bg: #2A2010; --bz-spons-ink: #C3B497;
    --bz-halo: rgba(232, 184, 90, .30);
    --bz-scrim: rgba(22, 15, 4, .7); --bz-hover: rgba(243, 233, 216, .08); --bz-shimmer: rgba(255, 255, 255, .07); --bz-on-error: #160F04;
    --bz-chart-1: #CC5A74; --bz-chart-2: #BE8A1F; --bz-chart-3: #1F9D8A; --bz-chart-4: #5B8BDA; --bz-chart-5: #D2652D; --bz-chart-6: #9B7BCF;
    color-scheme: dark;
  }
}
:root[data-theme="dark"],
[data-bz-theme="dark"] {
  --bz-paper: #160F04; --bz-paper-raised: #221A0D; --bz-paper-sunken: #1D1509;
  --bz-line: #3B2F1E; --bz-line-strong: #8A7B62;
  --bz-ink: #F3E9D8; --bz-ink-2: #C3B497;
  --bz-primary: #E08A96; --bz-primary-press: #F2A9B3; --bz-on-primary: #160F04; --bz-primary-tint: #3A1A1F;
  --bz-gold: #E8B85A; --bz-gold-ink: #E8B85A; --bz-on-gold: #160F04; --bz-gold-tint: #33260F; --bz-star: #E8B85A;
  --bz-success: #7FC49A; --bz-success-tint: #14291D;
  --bz-warning: #E6B35A; --bz-warning-tint: #33260F;
  --bz-error: #F2908A;   --bz-error-tint: #3A1B18;
  --bz-info: #86B4EA;    --bz-info-tint: #13243A;
  --bz-spons-bg: #2A2010; --bz-spons-ink: #C3B497;
  --bz-halo: rgba(232, 184, 90, .30);
  --bz-scrim: rgba(22, 15, 4, .7); --bz-hover: rgba(243, 233, 216, .08); --bz-shimmer: rgba(255, 255, 255, .07); --bz-on-error: #160F04;
  --bz-chart-1: #CC5A74; --bz-chart-2: #BE8A1F; --bz-chart-3: #1F9D8A; --bz-chart-4: #5B8BDA; --bz-chart-5: #D2652D; --bz-chart-6: #9B7BCF;
  color-scheme: dark;
}

/* ── 3 · TYPE ───────────────────────────────────────────────────────────────────────────────────────────── */
:root {
  /* Latin: the platform's own pair (Cormorant Garamond + Outfit). "Bz Rupee" is a 1.1 KB ₹-only subset of Noto Sans
     Devanagari (Outfit has NO ₹ glyph — it would fall back to the OS font); Noto Sans Devanagari is listed before
     system-ui so Hindi never falls to Mangal/Nirmala. */
  --bz-font-body:       "Bz Rupee", "Outfit", "Noto Sans Devanagari", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --bz-font-display:    "Cormorant Garamond", Georgia, "Times New Roman", serif;   /* H1–H3 only (≥24 px). Digits: lining-nums! */
  --bz-font-display-hi: "Tiro Devanagari Hindi", "Noto Serif Devanagari", "Cormorant Garamond", serif;   /* Hindi H1–H3, weight 400 only */
  --bz-font-data:       "Bz Rupee", "Outfit", system-ui, sans-serif;               /* tables/prices: with font-variant-numeric: tabular-nums lining-nums */

  --bz-scale: 1;   /* large-text mode sets 1.25 — every font-size below multiplies it (header is px-based and is NOT scaled) */
  --bz-fs-caption: calc(.75rem  * var(--bz-scale));    /* 12 — badge labels, chart ticks; NEVER a sentence */
  --bz-fs-small:   calc(.875rem * var(--bz-scale));    /* 14 */
  --bz-fs-body:    calc(1rem    * var(--bz-scale));    /* 16 (inputs: max(16px, …) so iOS never focus-zooms) */
  --bz-fs-lead:    calc(1.125rem * var(--bz-scale));   /* 18 */
  --bz-fs-h4:      calc(1.25rem * var(--bz-scale));    /* 20 — Outfit 600, not Cormorant */
  --bz-fs-h3:      calc(1.5rem  * var(--bz-scale));    /* 24 */
  --bz-fs-h2:      calc(1.875rem * var(--bz-scale));   /* 30 */
  --bz-fs-h1:      calc(clamp(2.375rem, 2.05rem + 1.2vw, 3rem) * var(--bz-scale));   /* 38 @390 → 48 @1280 */
  --bz-lh-body: 1.5;  --bz-lh-head: 1.2;
  --bz-lh-body-hi: 1.7;  --bz-lh-head-hi: 1.35;       /* Devanagari needs room (matras above/below) */
}
:root[data-bz-large="1"] { --bz-scale: 1.25; }

/* ── 4 · SHAPE, SPACE, DEPTH, MOTION, LAYERS ────────────────────────────────────────────────────────────── */
:root {
  --bz-s-1: .25rem; --bz-s-2: .5rem; --bz-s-3: .75rem; --bz-s-4: 1rem;     /* 4 8 12 16  — the spec's 4-px grid */
  --bz-s-5: 1.5rem; --bz-s-6: 2rem;  --bz-s-7: 3rem;   --bz-s-8: 4rem;     /* 24 32 48 64 */
  --bz-gutter: clamp(16px, 4vw, 32px);                                       /* 16 px phone gutter */
  --bz-content-max: 1200px;

  --bz-r-input: 10px; --bz-r-btn: 12px; --bz-r-card: 16px; --bz-r-sheet: 20px; --bz-r-pill: 999px;   /* brand: match.css 12/16, studio 22 (spec 8/12/16 is the Tailwind default) */
  --bz-tap: 44px;                                                             /* minimum touch target */
  --bz-header-h: 68px;     /* shared header; bazaar/core/layout.js re-measures it (+44 when the sub-header row is present) */
  --bz-tabbar-h: 56px;  --bz-sidebar-w: 248px;

  --bz-shadow-float: 0 1px 2px rgba(22, 15, 4, .06), 0 12px 32px rgba(22, 15, 4, .16);   /* floating layers ONLY (sheet, popover, toast); cards are flat + 1px border */

  --bz-dur-1: 150ms; --bz-dur-2: 200ms; --bz-dur-3: 250ms;
  --bz-ease: cubic-bezier(.16, 1, .3, 1);    /* ease-out arrival */

  /* z-index ladder. Fixed by other code: shared header 500 (mobile drawer 499, account menu 1300), consent banner 490.
     Toasts sit in the top layer (see design.md §2.4); modals/sheets ≤ 9999 per banner-toast-dnd rule. */
  --bz-z-sticky: 40; --bz-z-tabbar: 60; --bz-z-sheet: 1000; --bz-z-modal: 9000; --bz-z-pop: 9500; --bz-z-toast: 99999;
}
:root[data-theme="dark"] { --bz-shadow-float: 0 1px 2px rgba(0, 0, 0, .5), 0 12px 32px rgba(0, 0, 0, .6); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bz-shadow-float: 0 1px 2px rgba(0, 0, 0, .5), 0 12px 32px rgba(0, 0, 0, .6); } }

/* ── 5 · REDUCED MOTION (system setting; also honoured: <html data-bz-motion="reduce"> for the gallery/tests) ─ */
@media (prefers-reduced-motion: reduce) {
  :root { --bz-dur-1: .01ms; --bz-dur-2: .01ms; --bz-dur-3: .01ms; }
}
:root[data-bz-motion="reduce"] { --bz-dur-1: .01ms; --bz-dur-2: .01ms; --bz-dur-3: .01ms; }
/* components: `@media (prefers-reduced-motion: reduce){ .bz-confetti{display:none} .bz-skel{animation:none} }` — no scroll-jacking, no parallax */

/* ── 6 · LANGUAGE ───────────────────────────────────────────────────────────────────────────────────────── */
.bz :lang(hi), .bz:lang(hi) { line-height: var(--bz-lh-body-hi); letter-spacing: 0; }     /* never letter-space joined scripts */
.bz :is(h1, h2, h3):lang(hi), .bz :is(.bz-h1, .bz-h2, .bz-h3):lang(hi) {
  font-family: var(--bz-font-display-hi); font-weight: 400; line-height: var(--bz-lh-head-hi); font-synthesis: none;   /* Tiro has one weight: no faux bold */
}
.bz :is(h1, h2, h3, .bz-h1, .bz-h2, .bz-h3) { font-family: var(--bz-font-display); font-weight: 600; line-height: var(--bz-lh-head); font-variant-numeric: lining-nums; }   /* Cormorant's DEFAULT digits are old-style */
.bz .bz-num, .bz table { font-variant-numeric: tabular-nums lining-nums; }

/* ── 7 · FONTS (self-hosted; docs/bazaar/DESIGN.md §3) ───────────────────────────────────────────────────── */
/* Absolute urls on the existing /static mount (7-day public cache from NoCacheMiddleware, works behind every serving mode).
   font-display: swap; the shell preloads the two Latin files (and, when vivah_lang=hi, the Devanagari pair) so CLS stays ~0.
   Outfit has no U+20B9, hence "Bz Rupee" (1.1 KB, rupee only) first in --bz-font-body. */
@font-face { font-family: "Outfit"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(/static/assets/bazaar/fonts/outfit-var-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Outfit"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(/static/assets/bazaar/fonts/outfit-var-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20B8, U+20BA-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 600; font-display: swap;
  src: url(/static/assets/bazaar/fonts/cormorant-600-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 600; font-display: swap;
  src: url(/static/assets/bazaar/fonts/cormorant-600-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Noto Sans Devanagari"; font-style: normal; font-weight: 400 700; font-stretch: 100%; font-display: swap;
  src: url(/static/assets/bazaar/fonts/noto-sans-deva-400-700.woff2) format("woff2");
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09; }
@font-face { font-family: "Tiro Devanagari Hindi"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/static/assets/bazaar/fonts/tiro-deva-hindi.woff2) format("woff2");
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09; }
@font-face { font-family: "Bz Rupee"; font-style: normal; font-weight: 100 900; font-display: swap; size-adjust: 96%;
  src: url(/static/assets/bazaar/fonts/bz-rupee-var.woff2) format("woff2"); unicode-range: U+20B9; }

/* ── 8 · BASE (everything below applies only inside a .bz root, so the shared site header keeps its own look) ─────── */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
  scroll-padding-top: calc(var(--bz-header-h) + var(--bz-s-3));
  scroll-padding-bottom: calc(var(--bz-tabbar-h) + var(--bz-s-5) + var(--vivah-consent-h, 0px)); }   /* WCAG 2.4.11: focus never sits under a sticky bar */
body.bz-body { margin: 0; background: var(--bz-paper); color: var(--bz-ink); font-family: var(--bz-font-body); font-size: var(--bz-fs-body); line-height: var(--bz-lh-body); }
html.bz-lock, html.bz-lock body { overflow: hidden; }                                  /* a sheet / modal is open: the page behind never scrolls */
.bz, .bz *, .bz *::before, .bz *::after { box-sizing: border-box; }
.bz { font-family: var(--bz-font-body); font-size: var(--bz-fs-body); line-height: var(--bz-lh-body); color: var(--bz-ink);
  -webkit-font-smoothing: antialiased; font-variant-numeric: lining-nums; text-rendering: optimizeLegibility; }
.bz [hidden] { display: none !important; }
.bz a { color: var(--bz-primary); text-decoration-thickness: 1px; text-underline-offset: .2em; }
.bz a:hover { color: var(--bz-primary-press); }
.bz img, .bz svg, .bz video, .bz canvas { max-width: 100%; }
.bz img { height: auto; }
.bz button, .bz input, .bz textarea { font: inherit; color: inherit; letter-spacing: inherit; }
.bz button { cursor: pointer; }
.bz button:disabled, .bz [aria-disabled="true"] { cursor: not-allowed; }
.bz p { margin: 0 0 var(--bz-s-3); }
.bz ul, .bz ol { margin: 0; padding: 0; list-style: none; }
.bz table { border-collapse: collapse; border-spacing: 0; }
.bz hr { border: 0; border-top: 1px solid var(--bz-line); margin: var(--bz-s-5) 0; }
.bz :is(h1, h2, h3, h4, .bz-h1, .bz-h2, .bz-h3, .bz-h4) { margin: 0 0 var(--bz-s-3); color: var(--bz-ink); text-wrap: balance; }
.bz :is(h1, .bz-h1) { font-size: var(--bz-fs-h1); }
.bz :is(h2, .bz-h2) { font-size: var(--bz-fs-h2); }
.bz :is(h3, .bz-h3) { font-size: var(--bz-fs-h3); }
.bz :is(h4, .bz-h4) { font-family: var(--bz-font-body); font-weight: 600; font-size: var(--bz-fs-h4); line-height: 1.3; }
.bz .bz-lead { font-size: var(--bz-fs-lead); line-height: 1.55; }
.bz .bz-small { font-size: var(--bz-fs-small); }
.bz .bz-caption { font-size: var(--bz-fs-caption); line-height: 1.4; }                 /* badge labels + chart ticks only — never a sentence */
.bz .bz-muted { color: var(--bz-ink-2); }
.bz .bz-strong { font-weight: 600; }
.bz .bz-eyebrow { font-size: var(--bz-fs-caption); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--bz-gold-ink); }
.bz :lang(hi) .bz-eyebrow, .bz:lang(hi) .bz-eyebrow { letter-spacing: 0; text-transform: none; }
.bz :focus { outline: none; }
.bz :focus-visible { outline: 3px solid var(--bz-focus); outline-offset: 2px; }
.bz [data-bz-theme="dark"] :focus-visible { outline-color: var(--bz-focus); }
.bz ::selection { background: var(--bz-gold-tint); color: var(--bz-ink); }
.bz-sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.bz-skip { position: fixed; left: var(--bz-s-3); top: var(--bz-s-3); z-index: var(--bz-z-toast); padding: var(--bz-s-2) var(--bz-s-4); border-radius: var(--bz-r-btn);
  background: var(--bz-primary); color: var(--bz-on-primary); transform: translateY(-200%); text-decoration: none; }
.bz a.bz-skip { color: var(--bz-on-primary); }
.bz-skip:focus { transform: none; }
.bz .bz-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.bz .bz-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bz .bz-nowrap { white-space: nowrap; }
.bz .bz-wrap-any { overflow-wrap: anywhere; }
.bz .bz-center { text-align: center; }
.bz .bz-right { text-align: right; }

/* ── 9 · LAYOUT PRIMITIVES (device classes: phone <= 767 · tablet 768-1024 · desktop >= 1025) ──────────────────── */
:root { --bz-bottom-chrome: 0px; }
@media (max-width: 767px) { :root { --bz-bottom-chrome: calc(var(--bz-tabbar-h) + env(safe-area-inset-bottom, 0px)); } }
.bz-page { width: 100%; max-width: calc(var(--bz-content-max) + 2 * var(--bz-gutter)); margin: 0 auto;
  padding: var(--bz-s-5) var(--bz-gutter) calc(var(--bz-s-8) + var(--bz-bottom-chrome) + var(--vivah-consent-h, 0px)); }
.bz-page.bz-page-flush { padding-top: 0; }
.bz-page.bz-wide { max-width: none; }
.bz-section { margin: 0 0 var(--bz-s-7); }
.bz-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--bz-s-3); flex-wrap: wrap; margin-bottom: var(--bz-s-4); }
.bz-section-head > :is(h1, h2, h3, h4) { margin: 0; }
.bz-stack { display: flex; flex-direction: column; gap: var(--bz-s-4); }
.bz-stack.bz-gap-2 { gap: var(--bz-s-2); } .bz-stack.bz-gap-3 { gap: var(--bz-s-3); } .bz-stack.bz-gap-5 { gap: var(--bz-s-5); } .bz-stack.bz-gap-6 { gap: var(--bz-s-6); }
.bz-row { display: flex; align-items: center; gap: var(--bz-s-3); flex-wrap: wrap; }
.bz-row.bz-gap-2 { gap: var(--bz-s-2); } .bz-row.bz-gap-4 { gap: var(--bz-s-4); } .bz-row.bz-gap-5 { gap: var(--bz-s-5); }
.bz-row.bz-between { justify-content: space-between; }
.bz-row.bz-end { justify-content: flex-end; }
.bz-row.bz-nowrap-row { flex-wrap: nowrap; }
.bz-row.bz-top { align-items: flex-start; }
.bz-grow { flex: 1 1 0; min-width: 0; }
.bz-grid { display: grid; gap: var(--bz-s-4); grid-template-columns: repeat(var(--bz-cols, 1), minmax(0, 1fr)); }
.bz-grid.bz-cards { grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); }
.bz-grid.bz-cards-sm { grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr)); }
.bz-grid.bz-cols-2 { --bz-cols: 2; } .bz-grid.bz-cols-3 { --bz-cols: 3; } .bz-grid.bz-cols-4 { --bz-cols: 4; }
@media (max-width: 767px) { .bz-grid.bz-cols-3, .bz-grid.bz-cols-4 { --bz-cols: 2; } .bz-grid.bz-stack-phone { --bz-cols: 1; } }
.bz-split { display: grid; gap: var(--bz-s-5); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 1025px) { .bz-split { grid-template-columns: minmax(0, 1fr) minmax(0, var(--bz-split-aside, 24rem)); } .bz-split.bz-split-rev { grid-template-columns: minmax(0, var(--bz-split-aside, 18rem)) minmax(0, 1fr); } }
.bz-aside-sticky { position: sticky; top: calc(var(--bz-header-h) + var(--bz-s-4)); }
@media (max-width: 1024px) { .bz-aside-sticky { position: static; } }
.bz-surface { background: var(--bz-paper-raised); border: 1px solid var(--bz-line); border-radius: var(--bz-r-card); padding: var(--bz-s-4); }   /* cards are flat + 1px border */
.bz-surface.bz-sunken { background: var(--bz-paper-sunken); }
.bz-divider { border: 0; border-top: 1px solid var(--bz-line); margin: var(--bz-s-4) 0; }
.bz-hide-phone { } .bz-show-phone { display: none !important; }
@media (max-width: 767px) { .bz-hide-phone { display: none !important; } .bz-show-phone { display: revert !important; } }
@media (min-width: 768px) and (max-width: 1024px) { .bz-hide-tablet { display: none !important; } }
@media (min-width: 1025px) { .bz-hide-desktop { display: none !important; } }
.bz-scroll-x { position: relative; overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }      /* wide tables scroll in their own container, never the page */

/* phone chrome: top app bar + bottom tab bar (customer: Home · Search · Shortlist · Inbox · My Event; vendor: Dashboard · Leads · Calendar · Inbox · More) */
.bz-appbar { display: none; }
.bz-tabbar { display: none; }
@media (max-width: 767px) {
  .bz-appbar { position: sticky; top: var(--bz-header-h); z-index: var(--bz-z-sticky); display: flex; align-items: center; gap: var(--bz-s-1); min-height: 48px; padding: 0 var(--bz-s-2);
    background: var(--bz-paper); border-bottom: 1px solid var(--bz-line); }
  .bz-appbar-title { flex: 1; min-width: 0; margin: 0; padding: 0 var(--bz-s-2); font: 600 var(--bz-fs-lead)/1.2 var(--bz-font-body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .bz-tabbar { position: fixed; left: 0; right: 0; bottom: var(--vivah-consent-h, 0px); z-index: var(--bz-z-tabbar); display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
    padding: var(--bz-s-1) var(--bz-s-1) calc(var(--bz-s-1) + env(safe-area-inset-bottom, 0px)); background: var(--bz-paper-raised); border-top: 1px solid var(--bz-line); }
  .bz-tabbar a, .bz-tabbar button { position: relative; display: grid; justify-items: center; align-content: center; gap: var(--bz-s-1); min-height: calc(var(--bz-tabbar-h) - var(--bz-s-2)); min-width: 0; padding: var(--bz-s-1) 0;
    background: none; border: 0; border-radius: var(--bz-r-btn); color: var(--bz-ink-2); font-size: var(--bz-fs-caption); font-weight: 500; text-decoration: none; }
  .bz-tabbar [aria-current="page"], .bz-tabbar .is-on { color: var(--bz-primary); font-weight: 600; }
  .bz-tabbar [aria-current="page"]::before, .bz-tabbar .is-on::before { content: ""; position: absolute; top: calc(-1 * var(--bz-s-1)); width: 28px; height: 3px; border-radius: 0 0 3px 3px; background: var(--bz-gold); }
  .bz-tabbar span.bz-tab-label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 2px; }
  .bz-tabbar .bz-count { position: absolute; top: 2px; left: calc(50% + 6px); }
}
/* sticky action bar: the one primary action rides the thumb zone (above the tab bar and the cookie banner) */
.bz-sticky-bar { position: sticky; bottom: 0; z-index: var(--bz-z-sticky); display: flex; gap: var(--bz-s-3); align-items: center; justify-content: flex-end; padding: var(--bz-s-3) 0; background: var(--bz-paper); border-top: 1px solid var(--bz-line); }
@media (max-width: 767px) {
  .bz-sticky-bar { position: fixed; left: 0; right: 0; bottom: calc(var(--bz-bottom-chrome) + var(--vivah-consent-h, 0px)); padding: var(--bz-s-3) var(--bz-gutter); z-index: var(--bz-z-tabbar); }
  .bz-sticky-bar > .bz-btn { flex: 1; }
  body.bz-has-sticky .bz-page { padding-bottom: calc(var(--bz-s-8) + var(--bz-s-8) + var(--bz-bottom-chrome) + var(--vivah-consent-h, 0px)); }
}
/* vendor console: sidebar on desktop, slim rail on tablets is NOT used (a 248 px sidebar is cramped on a portrait iPad) - tablets keep the bottom tabs */
.bz-sidebar { display: none; }
@media (min-width: 1025px) {
  .bz-console { display: grid; grid-template-columns: var(--bz-sidebar-w) minmax(0, 1fr); align-items: start; }
  .bz-sidebar { display: block; position: sticky; top: var(--bz-header-h); align-self: start; max-height: calc(100vh - var(--bz-header-h)); max-height: calc(100dvh - var(--bz-header-h));
    overflow-y: auto; padding: var(--bz-s-4) var(--bz-s-3); border-right: 1px solid var(--bz-line); background: var(--bz-paper-raised); }
  .bz-sidebar a { display: flex; align-items: center; gap: var(--bz-s-3); min-height: var(--bz-tap); padding: 0 var(--bz-s-3); border-radius: var(--bz-r-btn); color: var(--bz-ink); text-decoration: none; font-weight: 500; }
  .bz-sidebar a:hover { background: var(--bz-hover); }
  .bz-sidebar a[aria-current="page"] { background: var(--bz-primary-tint); color: var(--bz-primary); font-weight: 600; }
}
/* the admin console is always dark: wrap a Bazaar view root in data-bz-theme="dark" and the same components render correctly */
[data-bz-theme="dark"] { color: var(--bz-ink); background: var(--bz-paper); }
[data-bz-theme="light"] { color: var(--bz-ink); background: var(--bz-paper); }

/* ── 10 · REDUCED MOTION + FORCED COLOURS ───────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .bz *, .bz *::before, .bz *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
:root[data-bz-motion="reduce"] .bz *, :root[data-bz-motion="reduce"] .bz *::before, :root[data-bz-motion="reduce"] .bz *::after {
  animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
@media (forced-colors: active) {
  .bz :focus-visible { outline: 3px solid Highlight; }
  .bz-btn, .bz-input, .bz-chip, .bz-surface { border: 1px solid CanvasText; }
}
@media print { .bz-tabbar, .bz-appbar, .bz-sticky-bar, #bz-layer, #bz-toast { display: none !important; } }