/* =================================================================
   BAZAARIA THEME — Consolidated stylesheet
   Source files:
     · layout master  (chrome, tokens, font stack)
     · auth modal     (login/register popup)
     · pages/home     (slider, products, categories)
     · pages/details  (gallery, info, related)
     · pages/profile  (dashboard, sidebar, forms)
     · pages/wishlist (cards grid)

   Dynamic values (--primary, --secondary, font-family) are still
   injected by the master layout via a small inline <style> block.
================================================================= */


/* ─────────────────────────────────────────────────────────────────
   1. THEME TOKENS (light + dark)
   --bz-font is overridden inline by the layout per-vendor; the value
   below is the safe fallback if the layout forgot to set it.
───────────────────────────────────────────────────────────────── */
:root {
  --bg:#F8F9FB; --surface:#FFFFFF; --ink:#0F172A; --ink-2:#475569; --ink-3:#94A3B8;
  --line:#E5E7EB; --soft:#F3F4F6; --primary:#0F172A; --secondary:#EF4444;
  --success:#10B981; --warn:#F59E0B; --info:#3B82F6; --danger:#EF4444;
  --r-sm:10px; --r-md:14px; --r-lg:18px; --r-xl:24px; --r-pill:999px;
  --bz-font: 'Zain', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
html[data-bz-mode="dark"] {
  --bg:#0b0f17; --surface:#11151f; --ink:#f1f5f9; --ink-2:#cbd5e1; --ink-3:#94a3b8;
  --line:#1f2937; --soft:#0f1622; --softer:#0c111a; --primary:#f1f5f9;
}
/* 2026-09-30 — the --bz-* names the SHARED pages read (cart, checkout,
   wishlist… via their --msc-* bridges) were only mode-aware inside the home
   design's .bzh scope. Outside it they fell back to hard light values while
   a merchant's dark_text still applied → light text on white cards in dark
   mode. Alias them to this sheet's own mode-aware tokens; merchant colour
   overrides (inline, emitted later) still win, and .bzh keeps its own. */
:root {
  --bz-bg: var(--bg); --bz-card: var(--surface); --bz-surface: var(--surface);
  --bz-text: var(--ink);
}

/* Dark-mode keyboard focus ring — the browser's default outline
   resolves to a near-black colour that's invisible against the dark
   header/surfaces, so every focusable control needs an explicit,
   high-contrast ring here. .bz-nav :focus-visible below already
   covers the main nav row; this catches the topbar mode toggle
   (rendered there instead when header_topbar_visible is on) and
   everything else — footer, forms, modals. */
html[data-bz-mode="dark"] :focus-visible {
  outline: 2px solid var(--bz-coral, #ff5a36);
  outline-offset: 2px;
}


/* ─────────────────────────────────────────────────────────────────
   2. RESET + TYPOGRAPHY
   The vendor's chosen font is applied via the --bz-font CSS variable
   so it cascades through every element naturally. Font Awesome opts
   out via its own font-family.
───────────────────────────────────────────────────────────────── */
* { margin: 0; padding: 0; box-sizing: border-box; }

html, body, button, input, select, textarea, optgroup,
.bz-container, .bz-section, .bz-card, .bz-panel,
h1, h2, h3, h4, h5, h6, p, span, a, div, label, small, strong, b, em, li {
  font-family: 'Zain', system-ui, -apple-system, 'Segoe UI', sans-serif !important;
}

.fa, .fas, .far, .fab, .fal, .fad, [class^="fa-"], [class*=" fa-"] { font-family: inherit !important; }
.fa-solid, .fa-regular, .fa-light, .fa-thin, .fa-duotone, .fa-sharp {
  font-family: "Font Awesome 6 Free", "Font Awesome 6 Pro", "Font Awesome 6 Brands" !important;
}
.fa-brands { font-family: "Font Awesome 6 Brands" !important; }

html, body { background: var(--bg); color: var(--ink); font-size: 14px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
.bz-container { max-width: 1180px; margin: 0 auto; padding: 0 22px; }


/* ─────────────────────────────────────────────────────────────────
   3. SHELL LAYOUT (sticky chrome + flex body so footer hugs bottom)
───────────────────────────────────────────────────────────────── */
body { display: flex; flex-direction: column; min-height: 100dvh; min-height: 100vh; }
.bz-chrome {
  position: sticky; top: 0; z-index: 60;
  background: var(--surface);
  box-shadow: 0 2px 0 0 var(--line);
}
.bz-chrome .bz-nav { position: static; box-shadow: none; }
.bz-chrome .bz-topbar { border-bottom: 1px solid var(--line); }
.bz-main { flex: 1 0 auto; }
.bz-footer-mini, .bz-footer { flex-shrink: 0; }
.bz-chrome.is-scrolled { box-shadow: 0 6px 18px -8px rgba(15,23,42,.15); }
html[data-bz-mode="dark"] .bz-chrome.is-scrolled { box-shadow: 0 6px 18px -8px rgba(0,0,0,.55); }


/* ─────────────────────────────────────────────────────────────────
   4. TOP UTILITY BAR (phone, email, lang switch, mode toggle)
───────────────────────────────────────────────────────────────── */
.bz-topbar { background: var(--soft); border-bottom: 1px solid var(--line); font-size: 12px; }
html[data-bz-mode="dark"] .bz-topbar { background: var(--softer, var(--soft)); }
.bz-topbar-row { display: flex; align-items: center; justify-content: space-between; min-height: 38px; gap: 14px; flex-wrap: wrap; }
.bz-topbar-contact { display: inline-flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.bz-topbar-item { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); font-weight: 600; transition: color .15s; text-decoration: none; }
.bz-topbar-item:hover { color: var(--primary); }
.bz-topbar-item i { font-size: 11px; color: var(--ink-3); }
.bz-topbar-tools { display: inline-flex; align-items: center; gap: 4px; }
.bz-topbar-tool { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px; background: transparent; border: 0; border-radius: var(--r-sm); color: var(--ink-2); font-size: 12px; font-weight: 700; cursor: pointer; font-family: inherit; transition: background .15s, color .15s; text-decoration: none; }
.bz-topbar-tool:hover { background: var(--soft); color: var(--ink); }
.bz-topbar-tool > i { font-size: 12px; color: var(--ink-3); transition: color .15s; }
.bz-topbar-tool:hover > i { color: var(--ink); }

.bz-lang-dd { position: relative; }
.bz-lang-chev { font-size: 9px !important; transition: transform .2s; opacity: .7; margin-inline-start: 2px; }
.bz-lang-dd.is-open .bz-lang-chev { transform: rotate(180deg); }
.bz-lang-menu { position: absolute; top: calc(100% + 6px); inset-inline-end: 0; min-width: 180px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 32px -8px rgba(15,23,42,.18); padding: 5px; opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .18s, transform .18s, visibility .18s; z-index: 100; }
html[data-bz-mode="dark"] .bz-lang-menu { box-shadow: 0 12px 32px -8px rgba(0,0,0,.55); }
.bz-lang-dd.is-open .bz-lang-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.bz-lang-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 8px; border: 0; background: transparent; color: var(--ink); font-size: 13px; font-weight: 600; text-align: start; font-family: inherit; cursor: pointer; width: 100%; transition: background .15s; }
.bz-lang-item:hover, .bz-lang-item.is-active { background: var(--soft); }
.bz-lang-flag { width: 22px; height: 16px; border-radius: 3px; overflow: hidden; flex-shrink: 0; box-shadow: 0 0 0 1px rgba(0,0,0,.08); }
.bz-lang-name { flex: 1; }
.bz-lang-check { color: var(--primary); font-size: 11px; }
html[data-bz-mode="dark"] .bz-lang-check { color: var(--ink); }


/* ─────────────────────────────────────────────────────────────────
   5. MAIN NAV (logo, wishlist, account, cart)
───────────────────────────────────────────────────────────────── */
.bz-nav { background: var(--surface); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 50; }
.bz-nav-row { display: flex; align-items: center; gap: 16px; height: 72px; }
.bz-logo { display: inline-flex; align-items: center; gap: 10px; font-weight: 900; font-size: 20px; color: var(--primary); letter-spacing: -.02em; flex-shrink: 0; text-decoration: none; transition: opacity .15s; }
.bz-logo:hover { opacity: .85; }
.bz-logo--image-only { gap: 0; }
.bz-logo-img { max-height: 150px; width: auto; object-fit: contain; display: block; }
.bz-logo-name { display: inline-block; line-height: 1.1; }
.bz-logo-mark {
  width: 36px; height: 36px; border-radius: 10px;
  background: linear-gradient(135deg, var(--primary), color-mix(in srgb, var(--primary) 70%, #000));
  color: var(--surface);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 900; overflow: hidden;
  box-shadow: 0 4px 10px -3px color-mix(in srgb, var(--primary) 55%, transparent), inset 0 1px 0 rgba(255,255,255,.15);
  letter-spacing: -.02em;
}
.bz-logo-mark img { width: 100%; height: 100%; object-fit: cover; }
html[data-bz-mode="dark"] .bz-logo-mark { color: #0b0f17; box-shadow: 0 4px 10px -3px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.25); }
.bz-nav-spacer { flex: 1; }
.bz-nav-icon { width: 42px; height: 42px; border-radius: var(--r-sm); background: var(--soft); border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: center; color: var(--ink); font-size: 14px; cursor: pointer; flex-shrink: 0; position: relative; transition: background .15s; text-decoration: none; }
.bz-nav-icon:hover { background: var(--surface); }
.bz-nav-icon-badge { position: absolute; top: -4px; inset-inline-end: -4px; min-width: 18px; height: 18px; background: var(--secondary); color: #fff; border: 2px solid var(--surface); border-radius: 999px; font-size: 10px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; padding: 0 5px; }


/* ─────────────────────────────────────────────────────────────────
   6. ACCOUNT DROPDOWN + STAFF BACK-TO-ADMIN BUTTON
───────────────────────────────────────────────────────────────── */
.bz-account-dd { position: relative; }
.bz-account-trigger { padding: 0; overflow: hidden; }
.bz-account-avatar { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.bz-account-initials { width: 100%; height: 100%; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--primary), color-mix(in srgb, var(--primary) 60%, #000)); color: var(--surface); font-weight: 800; font-size: 13px; border-radius: inherit; }
html[data-bz-mode="dark"] .bz-account-initials { color: #0b0f17; }
.bz-account-menu { position: absolute; top: calc(100% + 8px); inset-inline-start: 0; width: 280px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 18px 48px -12px rgba(15,23,42,.22); padding: 0; opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .18s, transform .18s, visibility .18s; z-index: 200; overflow: hidden; }
html[data-bz-mode="dark"] .bz-account-menu { box-shadow: 0 18px 48px -12px rgba(0,0,0,.65); }
.bz-account-dd.is-open .bz-account-menu,
.bz-account-dd:hover .bz-account-menu { opacity: 1; visibility: visible; transform: translateY(0); }

/* Invisible bridge so the cursor can travel from the trigger button down
   into the menu without crossing a "no-hover" gap that would close it. */
.bz-account-dd::after {
  content: ''; position: absolute;
  top: 100%; left: 0; right: 0; height: 12px;
  pointer-events: none;
}
.bz-account-dd:hover::after { pointer-events: auto; }
.bz-account-menu-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--line); background: var(--soft); }
.bz-account-menu-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.bz-account-menu-initials { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, var(--primary), color-mix(in srgb, var(--primary) 60%, #000)); color: var(--surface); display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 15px; flex-shrink: 0; }
html[data-bz-mode="dark"] .bz-account-menu-initials { color: #0b0f17; }
.bz-account-menu-info strong { display: block; font-size: 13.5px; font-weight: 800; color: var(--ink); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bz-account-menu-info small { font-size: 11px; color: var(--ink-3); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bz-account-menu-body { padding: 6px; }
.bz-account-menu-foot { padding: 6px; border-top: 1px solid var(--line); }
.bz-account-menu-item { display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: 8px; color: var(--ink); font-size: 13px; font-weight: 600; text-decoration: none; transition: background .15s, color .15s; }
.bz-account-menu-item:hover { background: var(--soft); }
.bz-account-menu-item i { width: 18px; font-size: 13px; color: var(--ink-3); text-align: center; }
.bz-account-menu-item:hover i { color: var(--primary); }
html[data-bz-mode="dark"] .bz-account-menu-item:hover i { color: var(--ink); }
.bz-account-menu-logout { color: var(--danger); }
.bz-account-menu-logout:hover { background: rgba(239,68,68,.08); color: var(--danger); }
.bz-account-menu-logout i { color: var(--danger) !important; }

.bz-staff-back { color: var(--ink); }
.bz-staff-back i { color: var(--ink); }
.bz-staff-back:hover { background: var(--surface); }


/* ─────────────────────────────────────────────────────────────────
   7. FOOTER
───────────────────────────────────────────────────────────────── */
/* Full multi-column footer (customizer-driven) */
.bz-footer { background: var(--surface); border-top: 1px solid var(--line); }
.bz-footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
  gap: 40px;
  padding: 48px 0 36px;
}
.bz-footer-col h4 { font-size: 14px; font-weight: 800; color: var(--ink); margin-bottom: 16px; letter-spacing: .2px; }
.bz-footer-about p { font-size: 13px; line-height: 1.7; color: var(--ink-2); max-width: 34ch; }
.bz-footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.bz-footer-col ul li a { font-size: 13px; color: var(--ink-2); transition: color .15s; }
.bz-footer-col ul li a:hover { color: var(--secondary); }
.bz-footer-social { display: flex; align-items: center; gap: 10px; margin-top: 18px; }
.bz-footer-social a { width: 36px; height: 36px; border-radius: 50%; background: var(--soft); display: inline-flex; align-items: center; justify-content: center; color: var(--ink-2); transition: background .15s, color .15s; }
.bz-footer-social a:hover { background: var(--secondary); color: #fff; }
.bz-footer-contact { gap: 12px; }
.bz-footer-contact li { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--ink-2); }
.bz-footer-contact li:has(span) { align-items: flex-start; }
.bz-footer-contact li i { width: 32px; height: 32px; border-radius: 8px; background: var(--soft); color: var(--secondary); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 13px; }
.bz-footer-contact li a { color: var(--ink-2); transition: color .15s; }
.bz-footer-contact li a:hover { color: var(--secondary); }
.bz-footer-contact li span { padding-top: 7px; line-height: 1.5; }

/* Bottom credit strip — ALWAYS rendered (platform branding) */
.bz-footer-bottom {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  gap: 14px; padding: 20px 0; border-top: 1px solid var(--line);
  font-size: 12.5px; color: var(--ink-3);
}
.bz-footer:has(.bz-footer-grid) .bz-footer-bottom { /* keep border when grid present */ }
.bz-footer-mini-store { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px; font-weight: 700; color: var(--ink-2); }
.bz-footer-mini-sep { opacity: .5; font-weight: 300; margin: 0 2px; }
.bz-footer-mini-brand { color: var(--secondary); font-weight: 700; text-decoration: none; padding: 0 4px; transition: opacity .15s; }
.bz-footer-mini-brand:hover { text-decoration: none; opacity: .8; }
.bz-footer-mini-social { display: inline-flex; align-items: center; gap: 10px; }
.bz-footer-mini-social a { width: 30px; height: 30px; border-radius: 50%; background: var(--soft); display: inline-flex; align-items: center; justify-content: center; color: var(--ink-2); transition: background .15s, color .15s; }
.bz-footer-mini-social a:hover { background: var(--secondary); color: #fff; }

@media (max-width: 900px) { .bz-footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; } }
@media (max-width: 560px) {
  .bz-footer-grid { grid-template-columns: 1fr; gap: 28px; padding: 36px 0 28px; }
  .bz-footer-bottom { flex-direction: column; text-align: center; justify-content: center; }
}

@media (max-width: 640px) { .bz-topbar-row { justify-content: center; } }


/* ─────────────────────────────────────────────────────────────────
   8. AUTH MODAL (guest login / register popup)
───────────────────────────────────────────────────────────────── */
.bz-auth-overlay { position: fixed; inset: 0; background: rgba(15,23,42,.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); display: none; align-items: center; justify-content: center; z-index: 9999; padding: 20px; opacity: 0; transition: opacity .25s; }
.bz-auth-overlay.is-open { display: flex; opacity: 1; }
.bz-auth-modal { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; max-width: 440px; width: 100%; max-height: 92vh; overflow-y: auto; padding: 28px 28px 26px; position: relative; box-shadow: 0 32px 80px -20px rgba(15,23,42,.45); transform: scale(.96); transition: transform .28s cubic-bezier(.16,1,.3,1); }
.bz-auth-overlay.is-open .bz-auth-modal { transform: scale(1); }
.bz-auth-close { position: absolute; top: 14px; inset-inline-end: 14px; width: 34px; height: 34px; border: 0; background: var(--soft); border-radius: 50%; color: var(--ink-2); font-size: 14px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background .15s, color .15s; }
.bz-auth-close:hover { background: var(--line); color: var(--ink); }
.bz-auth-head { text-align: center; margin-bottom: 22px; }
.bz-auth-logo { width: 56px; height: 56px; margin: 0 auto 14px; border-radius: 14px; background: var(--primary); display: inline-flex; align-items: center; justify-content: center; overflow: hidden; }
.bz-auth-logo img { width: 100%; height: 100%; object-fit: cover; }
.bz-auth-logo-mark { color: var(--surface); font-weight: 900; font-size: 24px; }
html[data-bz-mode="dark"] .bz-auth-logo-mark { color: #0b0f17; }
.bz-auth-title { font-size: 19px; font-weight: 900; color: var(--ink); letter-spacing: -.02em; margin-bottom: 4px; }
.bz-auth-sub { font-size: 12.5px; color: var(--ink-3); }
.bz-auth-tabs { display: flex; background: var(--soft); border-radius: 999px; padding: 4px; margin-bottom: 20px; }
.bz-auth-tab { flex: 1; padding: 9px 14px; border: 0; background: transparent; border-radius: 999px; color: var(--ink-2); font-size: 12.5px; font-weight: 800; cursor: pointer; font-family: inherit; transition: background .2s, color .2s, box-shadow .2s; }
.bz-auth-tab.is-active { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgba(15,23,42,.08); }
.bz-auth-pane { display: none; }
.bz-auth-pane.is-active { display: block; animation: bzAuthFade .25s ease; }
@keyframes bzAuthFade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
.bz-auth-alert { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 10px; font-size: 12.5px; margin-bottom: 14px; }
.bz-auth-alert--err { background: rgba(239,68,68,.08); border: 1px solid rgba(239,68,68,.25); color: var(--danger); }
.bz-auth-field { margin-bottom: 14px; }
.bz-auth-field label { display: block; font-size: 12px; font-weight: 700; color: var(--ink); margin-bottom: 6px; }
.bz-auth-input-wrap { position: relative; display: flex; align-items: center; background: var(--soft); border: 1px solid var(--line); border-radius: 12px; transition: background .18s ease; }
.bz-auth-input-wrap:hover { background: color-mix(in srgb, var(--soft) 75%, var(--line)); }
.bz-auth-input-wrap:focus-within {
  background: var(--surface);
  border-color: var(--line) !important;
  outline: none !important;
  box-shadow: none !important;
}
html[data-bz-mode="dark"] .bz-auth-input-wrap { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.08); }
html[data-bz-mode="dark"] .bz-auth-input-wrap:hover { background: rgba(255,255,255,.06); }
html[data-bz-mode="dark"] .bz-auth-input-wrap:focus-within { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.08) !important; box-shadow: none !important; }
.bz-auth-input-wrap input:focus,
.bz-auth-input-wrap input:focus-visible { outline: 0 !important; box-shadow: none !important; border: 0 !important; }
.bz-auth-input-wrap > i { position: absolute; top: 50%; transform: translateY(-50%); color: var(--ink-3); font-size: 13px; pointer-events: none; }
html[dir="rtl"] .bz-auth-input-wrap > i { right: 14px; }
html[dir="ltr"] .bz-auth-input-wrap > i { left: 14px; }
.bz-auth-input-wrap input { width: 100%; height: 44px; padding: 0 42px; background: transparent; border: 0; color: var(--ink); font-size: 13.5px; font-weight: 500; font-family: inherit; outline: none; }
.bz-auth-eye { position: absolute; inset-inline-end: 6px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; background: transparent; border: 0; color: var(--ink-3); font-size: 13px; cursor: pointer; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; }
.bz-auth-eye:hover { color: var(--ink); }
.bz-auth-input-error { display: block; font-size: 11.5px; color: var(--danger); margin-top: 5px; font-weight: 600; min-height: 1em; }
.bz-auth-submit { width: 100%; height: 46px; background: linear-gradient(135deg, var(--primary), color-mix(in srgb, var(--primary) 75%, #000)); color: var(--surface); border: 0; border-radius: 11px; font-size: 13.5px; font-weight: 800; cursor: pointer; font-family: inherit; display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: transform .15s, filter .15s, box-shadow .2s; box-shadow: 0 6px 18px -6px color-mix(in srgb, var(--primary) 60%, transparent); }
html[data-bz-mode="dark"] .bz-auth-submit { color: #0b0f17; }
.bz-auth-submit:hover { transform: translateY(-1px); filter: brightness(1.08); }
.bz-auth-divider { display: flex; align-items: center; gap: 10px; margin: 16px 0; color: var(--ink-3); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.bz-auth-divider::before, .bz-auth-divider::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.bz-auth-google { width: 100%; height: 46px; background: var(--surface); border: 1.5px solid var(--line); border-radius: 11px; color: var(--ink); font-size: 13.5px; font-weight: 700; cursor: pointer; font-family: inherit; display: inline-flex; align-items: center; justify-content: center; gap: 10px; transition: background .15s, border-color .15s; }
.bz-auth-google:hover { background: var(--soft); border-color: var(--ink-3); }
.bz-auth-google svg { flex-shrink: 0; }
.bz-auth-terms { margin-top: 16px; text-align: center; font-size: 11px; color: var(--ink-3); }
.bz-auth-terms a { color: var(--primary); font-weight: 700; }


/* ─────────────────────────────────────────────────────────────────
   9. HOME PAGE — hero slider
───────────────────────────────────────────────────────────────── */
.bz-slider { position: relative; margin: 22px 0; border-radius: var(--r-xl); overflow: hidden; background: var(--soft); border: 1px solid var(--line); aspect-ratio: 8 / 3; }
.bz-slider-track { display: flex; height: 100%; transition: transform .55s cubic-bezier(.65,0,.35,1); }
.bz-slide { flex: 0 0 100%; position: relative; height: 100%; display: block; text-decoration: none; color: inherit; }
.bz-slide-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bz-slide-overlay { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.20) 45%, rgba(0,0,0,0) 100%); pointer-events: none; }
html[dir="rtl"] .bz-slide-overlay { background: linear-gradient(270deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.20) 45%, rgba(0,0,0,0) 100%); }
.bz-slide-caption { position: absolute; inset-block: 0; inset-inline-start: 0; display: flex; flex-direction: column; justify-content: center; padding: 32px 44px; max-width: 50%; color: #fff; }
.bz-slide-title { font-size: clamp(22px, 3.4vw, 38px); font-weight: 900; line-height: 1.1; letter-spacing: -.02em; margin-bottom: 8px; text-shadow: 0 2px 10px rgba(0,0,0,.35); }
.bz-slide-desc { font-size: 14px; opacity: .92; margin-bottom: 14px; max-width: 90%; }
.bz-slide-cta { display: inline-flex; align-items: center; gap: 8px; padding: 11px 22px; background: var(--primary); color: var(--surface); border-radius: var(--r-pill); font-size: 13px; font-weight: 800; text-decoration: none; align-self: flex-start; transition: transform .15s, filter .15s; }
.bz-slide-cta:hover { transform: translateY(-1px); filter: brightness(1.1); }
html[data-bz-mode="dark"] .bz-slide-cta { color: #0b0f17; }
.bz-slider-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 42px; height: 42px; border: 0; border-radius: 50%; background: rgba(255,255,255,.85); color: #0b0f17; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; font-size: 14px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 6px 16px -4px rgba(0,0,0,.35); transition: background .15s, transform .15s; z-index: 2; }
.bz-slider-arrow:hover { background: #fff; transform: translateY(-50%) scale(1.06); }
.bz-slider-arrow.is-prev { inset-inline-start: 18px; }
.bz-slider-arrow.is-next { inset-inline-end: 18px; }
.bz-slider-dots { position: absolute; inset-inline: 0; bottom: 16px; display: flex; justify-content: center; gap: 7px; z-index: 2; }
.bz-slider-dot { width: 8px; height: 8px; border: 0; border-radius: 50%; background: rgba(255,255,255,.55); cursor: pointer; transition: width .25s, background .15s; padding: 0; }
.bz-slider-dot.is-active { width: 24px; border-radius: 999px; background: #fff; }
.bz-slider-placeholder { width: 100%; height: 100%; background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 12%, transparent), color-mix(in srgb, var(--secondary) 10%, transparent)); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 32px; }
.bz-slider-placeholder i { font-size: 56px; color: var(--primary); margin-bottom: 12px; }
.bz-slider-placeholder h2 { font-size: clamp(22px, 3vw, 32px); font-weight: 900; color: var(--ink); letter-spacing: -.02em; margin-bottom: 6px; }
.bz-slider-placeholder p  { font-size: 13px; color: var(--ink-2); }
@media (max-width: 768px) {
  .bz-slide-caption { padding: 16px 18px; max-width: 88%; }
  .bz-slide-title   { font-size: clamp(16px, 4.5vw, 22px); }
  .bz-slide-desc    { font-size: 12px; }
  .bz-slider-arrow  { width: 34px; height: 34px; font-size: 12px; }
  .bz-slider-arrow.is-prev { inset-inline-start: 8px; }
  .bz-slider-arrow.is-next { inset-inline-end: 8px; }
  .bz-slider-dots   { bottom: 10px; }
}


/* ─────────────────────────────────────────────────────────────────
   10. HOME PAGE — category circles row
───────────────────────────────────────────────────────────────── */
.bz-cats { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 18px 26px; margin-bottom: 22px; }
.bz-cats-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)); gap: 12px; }
.bz-cat { display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer; transition: transform .2s; text-decoration: none; }
.bz-cat:hover { transform: translateY(-2px); }
.bz-cat-circle { width: 56px; height: 56px; border-radius: 50%; background: var(--soft); display: inline-flex; align-items: center; justify-content: center; color: var(--ink); font-size: 20px; overflow: hidden; transition: background .2s, color .2s; }
.bz-cat-circle img { width: 100%; height: 100%; object-fit: cover; }
.bz-cat:hover .bz-cat-circle { background: var(--primary); color: var(--surface); }
html[data-bz-mode="dark"] .bz-cat:hover .bz-cat-circle { background: var(--primary); color: #0b0f17; }
.bz-cat span { font-size: 11.5px; font-weight: 600; color: var(--ink-2); text-align: center; line-height: 1.3; }


/* ─────────────────────────────────────────────────────────────────
   11. HOME / DETAILS — section base + product cards
───────────────────────────────────────────────────────────────── */
.bz-section { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 22px 26px; margin-bottom: 22px; }
.bz-section-head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.bz-section-head h2 { font-size: 19px; font-weight: 900; color: var(--ink); letter-spacing: -.02em; display: inline-flex; align-items: center; gap: 10px; }
.bz-section-head.center { justify-content: center; }
.bz-section-link { margin-inline-start: auto; font-size: 12.5px; font-weight: 700; color: var(--primary); display: inline-flex; align-items: center; gap: 4px; text-decoration: none; }
html[data-bz-mode="dark"] .bz-section-link { color: var(--ink); }
.bz-flash-ico { width: 34px; height: 34px; border-radius: 50%; background: var(--ink); color: #FBBF24; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; }

.bz-products-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.bz-product { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; transition: transform .25s, box-shadow .25s; display: block; color: inherit; text-decoration: none; }
.bz-product:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -16px rgba(15,23,42,.16); color: inherit; }
.bz-product-img { position: relative; aspect-ratio: 1; background: var(--soft); display: flex; align-items: center; justify-content: center; color: var(--ink-3); overflow: hidden; }
.bz-product-img > .bz-product-fallback { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 56px; color: var(--ink-3); opacity: .45; z-index: 0; }
.bz-product-img-tag, .bz-product-img img { position: relative; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.bz-product-fav { position: absolute; top: 10px; inset-inline-end: 10px; width: 30px; height: 30px; background: var(--surface); border: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--ink-3); font-size: 12px; box-shadow: 0 2px 6px rgba(15,23,42,.10); z-index: 2; cursor: pointer; padding: 0; }
.bz-product-fav.is-active { color: #ef4444; }
.bz-product-fav.is-active .fa-heart { font-weight: 900; }
.bz-product-discount-badge { position: absolute; top: 10px; inset-inline-start: 10px; background: var(--secondary); color: #fff; padding: 3px 9px; border-radius: var(--r-pill); font-size: 10.5px; font-weight: 800; z-index: 2; }
.bz-product-body { padding: 12px 14px 14px; }
.bz-product-name { font-size: 13px; font-weight: 700; color: var(--ink); line-height: 1.35; margin-bottom: 6px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 35px; }
.bz-product-rating { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--ink-3); font-weight: 600; margin-bottom: 8px; }
.bz-product-rating i { color: #F59E0B; font-size: 10px; }
.bz-product-rating b { color: var(--ink); font-weight: 800; }
.bz-product-price-row { display: flex; align-items: baseline; gap: 6px; }
.bz-product-price { font-size: 14px; font-weight: 800; color: var(--ink); }
.bz-product-price-old { font-size: 11.5px; color: var(--secondary); text-decoration: line-through; font-weight: 600; }

.bz-empty { text-align: center; padding: 50px 20px; color: var(--ink-3); font-size: 13.5px; }
.bz-empty i { display: block; font-size: 38px; margin-bottom: 10px; color: var(--ink-3); opacity: .6; }


/* ─────────────────────────────────────────────────────────────────
   12. HOME PAGE — shop-by-category strip
───────────────────────────────────────────────────────────────── */
.bz-stores-layout { display: flex; flex-direction: column; gap: 14px; }
.bz-store-featured { background: linear-gradient(135deg, var(--soft), color-mix(in srgb, var(--soft) 70%, var(--line))); border: 1px solid var(--line); border-radius: var(--r-md); padding: 18px 22px; display: flex; flex-direction: row; align-items: center; gap: 18px; text-decoration: none; color: inherit; transition: box-shadow .2s, transform .2s; }
html[data-bz-mode="dark"] .bz-store-featured { background: linear-gradient(135deg, color-mix(in srgb, var(--surface) 80%, var(--soft)), var(--surface)); }
.bz-store-featured:hover { box-shadow: 0 20px 40px -20px rgba(15,23,42,.18); transform: translateY(-2px); }
.bz-store-featured-img { flex: 0 0 auto; }
.bz-store-featured-img .bz-cat-hero-icon { width: 62px; height: 62px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: center; color: var(--ink); font-size: 24px; box-shadow: 0 6px 18px -6px rgba(15,23,42,.18); overflow: hidden; }
.bz-store-featured-text { flex: 1; min-width: 0; }
.bz-store-featured h3 { font-size: 18px; font-weight: 900; color: var(--ink); letter-spacing: -.02em; margin-bottom: 4px; }
.bz-store-featured p  { font-size: 12.5px; color: var(--ink-2); line-height: 1.55; }
.bz-store-featured-cta { flex-shrink: 0; display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: var(--r-pill); background: var(--ink); color: var(--surface); font-size: 12.5px; font-weight: 800; text-decoration: none; transition: filter .15s, transform .15s; }
.bz-store-featured-cta:hover { filter: brightness(1.12); transform: translateY(-1px); }
html[data-bz-mode="dark"] .bz-store-featured-cta { color: #0b0f17; }
@media (max-width: 640px) { .bz-store-featured { flex-direction: column; text-align: center; } .bz-store-featured-text { text-align: center; } }
.bz-store-mini-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.bz-store-mini { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 14px; transition: box-shadow .2s; }
.bz-store-mini:hover { box-shadow: 0 14px 30px -14px rgba(15,23,42,.18); }
.bz-store-mini-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.bz-store-mini-logo { width: 38px; height: 38px; border-radius: 50%; background: var(--soft); border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: center; color: var(--ink); font-size: 14px; font-weight: 900; overflow: hidden; flex-shrink: 0; }
.bz-store-mini-info strong { display: block; font-size: 12.5px; font-weight: 800; color: var(--ink); line-height: 1.2; }
.bz-store-mini-info small  { font-size: 11px; color: var(--ink-3); }
.bz-cat-count { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 800; color: var(--ink-3); background: var(--soft); padding: 5px 9px; border-radius: var(--r-pill); margin-inline-start: auto; }
.bz-store-mini-products { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding-bottom: 4px; scrollbar-width: thin; }
.bz-store-mini-products::-webkit-scrollbar { height: 4px; }
.bz-store-mini-products::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; }
.bz-store-prod { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: 0 0 80px; scroll-snap-align: start; text-decoration: none; color: inherit; }
.bz-store-prod-img { width: 100%; aspect-ratio: 1; background: var(--soft); border-radius: 8px; display: flex; align-items: center; justify-content: center; color: var(--ink-3); font-size: 22px; overflow: hidden; transition: transform .15s, background .15s; }
.bz-store-prod:hover .bz-store-prod-img { transform: scale(1.04); background: var(--line); }
.bz-store-prod-price { font-size: 10.5px; font-weight: 700; color: var(--ink); white-space: nowrap; }
@media (max-width: 860px) { .bz-store-mini-grid { grid-template-columns: 1fr; } }

.bz-cta { background: linear-gradient(135deg, var(--primary) 0%, color-mix(in srgb, var(--primary) 80%, #000) 100%); border-radius: var(--r-xl) var(--r-xl) 0 0; padding: 60px 44px; margin: 28px 0 0; color: #fff; text-align: center; position: relative; overflow: hidden; }
.bz-cta h2 { font-size: clamp(22px, 3.5vw, 34px); font-weight: 900; font-style: italic; letter-spacing: -.02em; color: #fff; }

@media (max-width: 991px) { .bz-products-grid { grid-template-columns: repeat(2, 1fr); } }


/* ─────────────────────────────────────────────────────────────────
   13. DETAILS PAGE — breadcrumbs + gallery + info + related
───────────────────────────────────────────────────────────────── */
.bz-crumbs { margin: 20px 0 14px; display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--ink-3); font-weight: 600; flex-wrap: wrap; }
.bz-crumbs a { color: var(--ink-2); text-decoration: none; }
.bz-crumbs a:hover { color: var(--primary); }
.bz-crumbs i { font-size: 9px; }
html[dir="rtl"] .bz-crumbs .fa-chevron-right { transform: scaleX(-1); }
.bz-crumbs .is-current { color: var(--ink); font-weight: 700; }

.bz-product-page { display: grid; grid-template-columns: 1.1fr 1fr; gap: 26px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); padding: 26px; margin-bottom: 24px; }
@media (max-width: 991px) { .bz-product-page { grid-template-columns: 1fr; } }

.bz-gallery { display: flex; flex-direction: column; gap: 12px; }
.bz-gallery-main { aspect-ratio: 1; background: var(--soft); border-radius: var(--r-lg); display: flex; align-items: center; justify-content: center; color: var(--ink-3); position: relative; overflow: hidden; border: 1px solid var(--line); }
.bz-gallery-main .bz-gallery-fallback { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 90px; color: var(--ink-3); opacity: .55; z-index: 0; }
.bz-gallery-main-img { width: 100%; height: 100%; object-fit: cover; position: relative; z-index: 1; }
.bz-gallery-badge { position: absolute; top: 16px; inset-inline-start: 16px; background: var(--secondary); color: #fff; padding: 5px 12px; border-radius: var(--r-pill); font-size: 11.5px; font-weight: 800; z-index: 2; }
.bz-gallery-fav { position: absolute; top: 16px; inset-inline-end: 16px; width: 38px; height: 38px; background: var(--surface); border: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--ink-3); cursor: pointer; box-shadow: 0 4px 12px -2px rgba(15,23,42,.12); z-index: 2; transition: color .15s; padding: 0; font-size: 14px; }
.bz-gallery-fav i { font-size: 14px !important; }
.bz-gallery-fav:hover, .bz-gallery-fav.is-active { color: #ef4444; }
.bz-gallery-fav.is-active .fa-heart { font-weight: 900; }
.bz-gallery-thumbs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.bz-gallery-thumb { aspect-ratio: 1; background: var(--soft); border: 2px solid var(--line); border-radius: var(--r-sm); display: flex; align-items: center; justify-content: center; color: var(--ink-3); font-size: 22px; cursor: pointer; transition: border-color .15s, transform .15s; overflow: hidden; }
.bz-gallery-thumb img { width: 100%; height: 100%; object-fit: cover; }
.bz-gallery-thumb:hover { transform: translateY(-1px); border-color: var(--ink-2); }
.bz-gallery-thumb.is-active { border-color: var(--ink); }

.bz-info { display: flex; flex-direction: column; gap: 16px; }
.bz-info-cat { font-size: 11.5px; font-weight: 800; color: var(--ink-3); text-transform: uppercase; letter-spacing: .07em; display: inline-flex; align-items: center; gap: 6px; }
.bz-info-cat i { font-size: 10px; color: var(--success); }
.bz-info h1 { font-size: clamp(20px, 2.6vw, 28px); font-weight: 900; color: var(--ink); letter-spacing: -.025em; line-height: 1.2; }
.bz-info-rating { display: flex; align-items: center; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.bz-info-rating-stars { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 800; color: var(--ink); }
.bz-info-rating-stars i { color: #F59E0B; font-size: 13px; }
.bz-info-rating-stars small { color: var(--ink-3); font-weight: 500; }
.bz-info-price-block { background: var(--soft); border-radius: var(--r-md); padding: 16px 18px; }
.bz-info-price-row { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.bz-info-price { font-size: 30px; font-weight: 900; color: var(--ink); letter-spacing: -.02em; }
.bz-info-price-old { font-size: 15px; color: var(--secondary); text-decoration: line-through; font-weight: 700; }
.bz-info-price-discount { display: inline-flex; align-items: center; gap: 4px; background: color-mix(in srgb, var(--secondary) 14%, transparent); color: var(--secondary); padding: 3px 10px; border-radius: var(--r-pill); font-size: 11.5px; font-weight: 800; }
.bz-info-tax { font-size: 11.5px; color: var(--ink-3); margin-top: 6px; }

.bz-qty-row { display: flex; align-items: center; gap: 14px; }
.bz-qty { display: inline-flex; align-items: center; background: var(--surface); border: 1.5px solid var(--line); border-radius: var(--r-sm); overflow: hidden; }
.bz-qty button { width: 38px; height: 42px; border: 0; background: transparent; color: var(--ink); font-size: 14px; cursor: pointer; font-family: inherit; }
.bz-qty button:hover { background: var(--soft); }
.bz-qty input { width: 50px; height: 42px; border: 0; background: transparent; text-align: center; font-size: 14px; font-weight: 800; color: var(--ink); outline: none; font-family: inherit; }
.bz-qty-stock { font-size: 11.5px; color: var(--ink-3); font-weight: 600; }
.bz-qty-stock b { color: var(--success); }

.bz-cta-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.bz-btn-cart, .bz-btn-buy { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 50px; padding: 0 20px; border: 0; border-radius: var(--r-sm); font-size: 14px; font-weight: 800; cursor: pointer; font-family: inherit; transition: transform .15s, filter .15s; }
.bz-btn-cart { background: var(--surface); color: var(--ink); border: 1.5px solid var(--ink); }
.bz-btn-cart:hover { background: var(--soft); transform: translateY(-1px); }
.bz-btn-buy { background: var(--primary); color: var(--surface); }
html[data-bz-mode="dark"] .bz-btn-buy { color: #0b0f17; }
.bz-btn-buy:hover { transform: translateY(-1px); filter: brightness(1.1); }
@media (max-width: 540px) { .bz-cta-row { grid-template-columns: 1fr; } }

.bz-trust { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; padding-top: 14px; border-top: 1px solid var(--line); }
.bz-trust-item { display: flex; align-items: center; gap: 9px; font-size: 12px; color: var(--ink-2); line-height: 1.4; }
.bz-trust-item i { width: 32px; height: 32px; border-radius: 8px; background: rgba(16,185,129,.10); color: var(--success); display: inline-flex; align-items: center; justify-content: center; font-size: 13px; flex-shrink: 0; }
.bz-trust-item strong { color: var(--ink); font-weight: 800; display: block; font-size: 12px; }
@media (max-width: 640px) { .bz-trust { grid-template-columns: 1fr; } }

.bz-tabs-section { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 22px 26px; margin-bottom: 24px; }
.bz-tabs-section h3 { font-size: 17px; font-weight: 900; color: var(--ink); margin-bottom: 14px; letter-spacing: -.02em; }
.bz-desc-content { color: var(--ink-2); font-size: 13.5px; line-height: 1.75; }
.bz-desc-content :is(h1,h2,h3,h4) { color: var(--ink); margin: 14px 0 6px; font-weight: 800; }
.bz-desc-content p { margin-bottom: 10px; }
.bz-desc-content ul, .bz-desc-content ol { margin: 8px 0 8px 22px; }
.bz-desc-content img { border-radius: var(--r-sm); margin: 10px 0; }

.bz-related { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 22px 26px; margin-bottom: 24px; }
.bz-related-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.bz-related-head h2 { font-size: 19px; font-weight: 900; color: var(--ink); letter-spacing: -.02em; }
.bz-related-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 991px) { .bz-related-grid { grid-template-columns: repeat(2, 1fr); } }


/* ─────────────────────────────────────────────────────────────────
   14. PROFILE PAGE — hero, stats, sidebar, panel
───────────────────────────────────────────────────────────────── */
.bz-prof-hero { padding: 26px 0 18px; }
.bz-prof-hero-row { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.bz-prof-avatar { width: 86px; height: 86px; border-radius: 50%; background: linear-gradient(135deg, var(--primary), color-mix(in srgb, var(--primary) 60%, #000)); color: var(--surface); display: inline-flex; align-items: center; justify-content: center; font-size: 32px; font-weight: 900; overflow: hidden; flex-shrink: 0; box-shadow: 0 12px 26px -10px rgba(15,23,42,.25); }
html[data-bz-mode="dark"] .bz-prof-avatar { color: #0b0f17; }
.bz-prof-avatar img { width: 100%; height: 100%; object-fit: cover; }
.bz-prof-hero-info h1 { font-size: 22px; font-weight: 900; color: var(--ink); letter-spacing: -.02em; margin-bottom: 4px; }
.bz-prof-hero-info p  { font-size: 13px; color: var(--ink-3); }
.bz-prof-hero-meta { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 11.5px; color: var(--ink-3); }
.bz-prof-hero-meta i { color: var(--success); font-size: 8px; }

.bz-prof-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 18px 0 26px; }
.bz-prof-stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 16px 18px; display: flex; align-items: center; gap: 12px; transition: transform .15s, box-shadow .15s; }
.bz-prof-stat:hover { transform: translateY(-2px); box-shadow: 0 12px 26px -14px rgba(15,23,42,.18); }
.bz-prof-stat-ico { width: 42px; height: 42px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; }
.bz-prof-stat.s-blue   .bz-prof-stat-ico { background: rgba(59,130,246,.12);  color: var(--info); }
.bz-prof-stat.s-amber  .bz-prof-stat-ico { background: rgba(245,158,11,.12);  color: var(--warn); }
.bz-prof-stat.s-green  .bz-prof-stat-ico { background: rgba(16,185,129,.12);  color: var(--success); }
.bz-prof-stat.s-red    .bz-prof-stat-ico { background: rgba(239,68,68,.12);   color: var(--secondary); }
.bz-prof-stat-val { font-size: 20px; font-weight: 900; color: var(--ink); letter-spacing: -.02em; line-height: 1; }
.bz-prof-stat-lbl { font-size: 11.5px; font-weight: 700; color: var(--ink-3); margin-top: 4px; text-transform: uppercase; letter-spacing: .04em; }
@media (max-width: 720px) { .bz-prof-stats { grid-template-columns: repeat(2, 1fr); } }

.bz-prof-layout { display: grid; grid-template-columns: 260px 1fr; gap: 18px; margin-bottom: 40px; }
@media (max-width: 860px) { .bz-prof-layout { grid-template-columns: 1fr; } }

.bz-prof-side { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 14px; height: fit-content; position: sticky; top: 90px; }
.bz-prof-side-nav { display: flex; flex-direction: column; gap: 3px; }
.bz-prof-side-link { display: flex; align-items: center; gap: 11px; padding: 11px 13px; border-radius: 10px; font-size: 13px; font-weight: 700; color: var(--ink-2); transition: background .15s, color .15s; }
.bz-prof-side-link i { width: 18px; font-size: 13px; color: var(--ink-3); text-align: center; }
.bz-prof-side-link:hover { background: var(--soft); color: var(--ink); }
.bz-prof-side-link.is-active { background: var(--primary); color: var(--surface); }
html[data-bz-mode="dark"] .bz-prof-side-link.is-active { color: #0b0f17; }
.bz-prof-side-link.is-active i { color: inherit !important; }
.bz-prof-side-divider { height: 1px; background: var(--line); margin: 8px 4px; }
.bz-prof-side-link.is-danger { color: var(--danger); }
.bz-prof-side-link.is-danger i { color: var(--danger); }
.bz-prof-side-link.is-danger:hover { background: rgba(239,68,68,.08); color: var(--danger); }

.bz-prof-panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 24px 26px; }
.bz-prof-panel-head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 18px; border-bottom: 1px solid var(--line); margin-bottom: 22px; gap: 12px; flex-wrap: wrap; }
.bz-prof-panel-head h2 { font-size: 17px; font-weight: 900; color: var(--ink); letter-spacing: -.02em; display: inline-flex; align-items: center; gap: 8px; }
.bz-prof-panel-head h2 i { color: var(--primary); }
html[data-bz-mode="dark"] .bz-prof-panel-head h2 i { color: var(--ink); }

.bz-prof-alert { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: var(--r-sm); font-size: 13px; font-weight: 600; margin-bottom: 16px; }
.bz-prof-alert.is-ok  { background: rgba(16,185,129,.10); color: var(--success); border: 1px solid rgba(16,185,129,.22); }
.bz-prof-alert.is-err { background: rgba(239,68,68,.10);  color: var(--danger);  border: 1px solid rgba(239,68,68,.22); }

.bz-prof-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 640px) { .bz-prof-form-grid { grid-template-columns: 1fr; } }
.bz-prof-field { margin-bottom: 12px; }
.bz-prof-field.is-full { grid-column: 1 / -1; }
.bz-prof-field label { display: block; font-size: 12px; font-weight: 800; color: var(--ink-2); margin-bottom: 6px; }
.bz-prof-field input { width: 100%; height: 44px; padding: 0 14px; background: var(--soft); border: 1px solid var(--line); border-radius: var(--r-sm); color: var(--ink); font-size: 13.5px; font-weight: 500; font-family: inherit; outline: none; transition: border-color .15s, box-shadow .15s, background .15s; }
.bz-prof-field input:focus { border-color: var(--line); background: var(--surface); box-shadow: 0 0 0 4px rgba(99,102,241,.12); }
.bz-prof-field input[type="file"] { padding: 10px; cursor: pointer; }

/* Avatar uploader — polished design with custom upload button */
.bz-prof-avatar-uploader {
  display: flex; align-items: center; gap: 18px;
  padding: 18px; margin-bottom: 18px;
  background: var(--soft);
  border: 1px dashed var(--line);
  border-radius: var(--r-md);
  transition: border-color .15s, background .15s;
}
.bz-prof-avatar-uploader:hover { border-color: var(--ink-3); }

.bz-prof-avatar-preview {
  position: relative;
  width: 84px; height: 84px;
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--line);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 30px; color: var(--ink-3);
  overflow: hidden; flex-shrink: 0;
  box-shadow: 0 6px 18px -8px rgba(15,23,42,.18);
}
.bz-prof-avatar-preview img { width: 100%; height: 100%; object-fit: cover; }
.bz-prof-avatar-edit {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(15,23,42,.55);
  color: #fff; font-size: 18px;
  opacity: 0; transition: opacity .15s;
  border-radius: 50%;
  pointer-events: none;
}
.bz-prof-avatar-uploader:hover .bz-prof-avatar-edit { opacity: 1; }

.bz-prof-avatar-info { flex: 1; min-width: 0; }
.bz-prof-avatar-label { display: block; font-size: 13px; font-weight: 800; color: var(--ink); margin-bottom: 2px; }
.bz-prof-avatar-hint  { font-size: 11.5px; color: var(--ink-3); margin-bottom: 10px; }

.bz-prof-avatar-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

.bz-prof-avatar-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 18px;
  background: var(--primary); color: var(--surface);
  border: 0; border-radius: var(--r-sm);
  font-size: 12.5px; font-weight: 800;
  cursor: pointer; user-select: none;
  transition: filter .15s, transform .15s;
}
.bz-prof-avatar-btn:hover { filter: brightness(1.1); transform: translateY(-1px); }
html[data-bz-mode="dark"] .bz-prof-avatar-btn { color: #0b0f17; }

.bz-prof-avatar-file {
  font-size: 12px; color: var(--ink-3); font-weight: 600;
  font-style: italic;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 200px;
}

.bz-prof-avatar-input { display: none; }

.bz-prof-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 22px; border: 0; border-radius: var(--r-sm); font-size: 13.5px; font-weight: 800; cursor: pointer; font-family: inherit; transition: filter .15s, transform .15s; text-decoration: none; }
.bz-prof-btn-primary { background: var(--primary); color: var(--surface); }
html[data-bz-mode="dark"] .bz-prof-btn-primary { color: #0b0f17; }
.bz-prof-btn-primary:hover { filter: brightness(1.1); transform: translateY(-1px); }
.bz-prof-btn-ghost { background: var(--soft); color: var(--ink); border: 1px solid var(--line); }
.bz-prof-btn-ghost:hover { background: var(--line); }

.bz-prof-orders { display: flex; flex-direction: column; gap: 10px; }
.bz-prof-order-row { display: flex; align-items: center; gap: 14px; padding: 14px 16px; background: var(--soft); border: 1px solid var(--line); border-radius: var(--r-sm); transition: border-color .15s, background .15s; }
.bz-prof-order-row:hover { border-color: var(--ink-3); background: var(--surface); }
.bz-prof-order-ico { width: 38px; height: 38px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: center; color: var(--primary); flex-shrink: 0; }
html[data-bz-mode="dark"] .bz-prof-order-ico { color: var(--ink); }
.bz-prof-order-info { flex: 1; min-width: 0; }
.bz-prof-order-info strong { display: block; font-size: 13.5px; font-weight: 800; color: var(--ink); margin-bottom: 2px; }
.bz-prof-order-info small  { font-size: 11.5px; color: var(--ink-3); }
.bz-prof-order-total { font-size: 14px; font-weight: 900; color: var(--success); white-space: nowrap; }
.bz-prof-order-pill { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: var(--r-pill); font-size: 11px; font-weight: 800; border: 1px solid; }
.bz-prof-order-pill.warn    { background: rgba(245,158,11,.10); color: var(--warn);    border-color: rgba(245,158,11,.22); }
.bz-prof-order-pill.info    { background: rgba(59,130,246,.10); color: var(--info);    border-color: rgba(59,130,246,.22); }
.bz-prof-order-pill.success { background: rgba(16,185,129,.10); color: var(--success); border-color: rgba(16,185,129,.22); }
.bz-prof-order-pill.danger  { background: rgba(239,68,68,.10);  color: var(--danger);  border-color: rgba(239,68,68,.22); }

.bz-prof-empty { padding: 40px 20px; text-align: center; }
.bz-prof-empty i { font-size: 36px; color: var(--ink-3); display: block; margin-bottom: 10px; }
.bz-prof-empty h3 { font-size: 14px; font-weight: 800; color: var(--ink-2); margin-bottom: 4px; }
.bz-prof-empty p  { font-size: 12.5px; color: var(--ink-3); }


/* ─────────────────────────────────────────────────────────────────
   15. WISHLIST PAGE
───────────────────────────────────────────────────────────────── */
.bz-wish-crumbs { padding: 16px 0 8px; font-size: 12.5px; color: var(--ink-3); }
.bz-wish-crumbs a { color: var(--ink-2); font-weight: 600; }
.bz-wish-crumbs strong { color: var(--ink); font-weight: 800; }
.bz-wish-hero { padding: 8px 0 22px; text-align: center; }
.bz-wish-hero h1 { font-size: 26px; font-weight: 900; color: var(--ink); margin-bottom: 6px; letter-spacing: -.02em; }
.bz-wish-hero p { font-size: 13.5px; color: var(--ink-2); }
.bz-wish-count { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: var(--r-pill); background: rgba(239,68,68,.08); color: var(--secondary); font-size: 12px; font-weight: 800; margin-top: 10px; border: 1px solid rgba(239,68,68,.18); }

.bz-wish-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; margin-bottom: 40px; }
.bz-wish-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; display: flex; flex-direction: column; transition: transform .15s, box-shadow .15s, border-color .15s; }
.bz-wish-card:hover { transform: translateY(-3px); box-shadow: 0 20px 40px -20px rgba(15,23,42,.18); border-color: var(--ink-3); }
.bz-wish-card-img { position: relative; aspect-ratio: 1; background: var(--soft); display: flex; align-items: center; justify-content: center; color: var(--ink-3); font-size: 36px; }
.bz-wish-card-img img { width: 100%; height: 100%; object-fit: cover; }
.bz-wish-discount { position: absolute; top: 10px; inset-inline-start: 10px; background: var(--secondary); color: #fff; padding: 4px 9px; border-radius: var(--r-pill); font-size: 11px; font-weight: 800; }
.bz-wish-remove { position: absolute; top: 10px; inset-inline-end: 10px; width: 32px; height: 32px; border-radius: 50%; background: var(--surface); border: 0; display: inline-flex; align-items: center; justify-content: center; color: var(--secondary); cursor: pointer; font-size: 13px; box-shadow: 0 4px 12px -4px rgba(15,23,42,.18); transition: background .15s, transform .15s; }
.bz-wish-remove:hover { background: var(--secondary); color: #fff; transform: scale(1.08); }
.bz-wish-card-body { padding: 14px 14px 16px; }
.bz-wish-card-name { font-size: 13.5px; font-weight: 800; color: var(--ink); margin-bottom: 8px; line-height: 1.35; min-height: 36px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bz-wish-card-prices { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.bz-wish-card-price { font-size: 15px; font-weight: 900; color: var(--secondary); }
.bz-wish-card-price-old { font-size: 12px; color: var(--ink-3); text-decoration: line-through; }
.bz-wish-card-cta { width: 100%; height: 38px; border-radius: 10px; background: var(--ink); color: var(--surface); font-size: 12.5px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; gap: 6px; transition: filter .15s, transform .15s; text-decoration: none; }
html[data-bz-mode="dark"] .bz-wish-card-cta { color: #0b0f17; }
.bz-wish-card-cta:hover { filter: brightness(1.1); transform: translateY(-1px); }

.bz-wish-empty { padding: 60px 24px; text-align: center; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); margin-bottom: 40px; }
.bz-wish-empty-icon { width: 84px; height: 84px; border-radius: 50%; background: var(--soft); margin: 0 auto 18px; display: inline-flex; align-items: center; justify-content: center; color: var(--ink-3); font-size: 36px; }
.bz-wish-empty h3 { font-size: 18px; font-weight: 900; color: var(--ink); margin-bottom: 8px; }
.bz-wish-empty p { font-size: 13px; color: var(--ink-2); margin-bottom: 22px; }
.bz-wish-empty-cta { display: inline-flex; align-items: center; gap: 8px; padding: 11px 24px; border-radius: var(--r-pill); background: var(--ink); color: var(--surface); font-size: 13px; font-weight: 800; }
html[data-bz-mode="dark"] .bz-wish-empty-cta { color: #0b0f17; }
.bz-wish-empty-cta:hover { filter: brightness(1.1); }


/* ─────────────────────────────────────────────────────────────────
   16. PROFILE — Wishlist tab (inside profile panel)
   Uniform cards: every card is the same width/height regardless of
   how the image is cropped or how long the product name wraps.
───────────────────────────────────────────────────────────────── */
.bz-prof-wish-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 14px;
  align-items: stretch;
}
.bz-prof-wish-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  display: flex; flex-direction: column;
  position: relative;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.bz-prof-wish-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px -16px rgba(15,23,42,.18);
  border-color: var(--ink-3);
}

/* Image area — perfect square, image cropped via object-fit:cover */
.bz-prof-wish-img {
  position: relative;
  aspect-ratio: 1;
  background: var(--soft);
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-3); font-size: 30px;
  overflow: hidden;
  text-decoration: none;
}
.bz-prof-wish-img img {
  width: 100%; height: 100%; object-fit: cover;
  display: block;
  transition: transform .25s ease;
}
.bz-prof-wish-card:hover .bz-prof-wish-img img { transform: scale(1.04); }

.bz-prof-wish-discount {
  position: absolute; top: 8px; inset-inline-start: 8px;
  background: var(--secondary); color: #fff;
  padding: 3px 9px; border-radius: var(--r-pill);
  font-size: 10.5px; font-weight: 800; line-height: 1;
  letter-spacing: -.01em; z-index: 2;
}
.bz-prof-wish-remove {
  position: absolute; top: 8px; inset-inline-end: 8px;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--surface); border: 0;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--secondary); cursor: pointer; font-size: 11.5px;
  box-shadow: 0 4px 10px -3px rgba(15,23,42,.22);
  transition: background .15s, transform .15s, color .15s;
  z-index: 2;
}
.bz-prof-wish-remove:hover { background: var(--secondary); color: #fff; transform: scale(1.08); }

/* Card body — flex column so prices stay pinned at the bottom even
   when the name only takes 1 line. */
.bz-prof-wish-body {
  padding: 12px 14px 14px;
  display: flex; flex-direction: column;
  flex: 1 1 auto; gap: 8px;
}
.bz-prof-wish-name {
  font-size: 13px; font-weight: 800; color: var(--ink);
  line-height: 1.35;
  /* Reserve space for exactly 2 lines so cards align across the grid. */
  min-height: calc(1.35em * 2);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; text-decoration: none;
}
.bz-prof-wish-prices {
  display: flex; align-items: baseline; gap: 7px;
  flex-wrap: wrap;
  margin-top: auto;        /* pushes prices to the bottom */
}
.bz-prof-wish-price { font-size: 14px; font-weight: 900; color: var(--secondary); }
.bz-prof-wish-price-old { font-size: 11.5px; color: var(--ink-3); text-decoration: line-through; font-weight: 600; }

@media (max-width: 540px) {
  .bz-prof-wish-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}


/* ─────────────────────────────────────────────────────────────────
   17. PROFILE — Wallet tab (compact: balance inline under the heading)
───────────────────────────────────────────────────────────────── */
.bz-wallet-head { display: flex; flex-direction: column; gap: 4px; }
.bz-wallet-head h2 { margin-bottom: 2px; }
.bz-wallet-head-line {
  display: inline-flex; align-items: baseline; gap: 10px;
  flex-wrap: wrap;
  margin-inline-start: 28px;     /* align under the icon in the heading */
}
.bz-wallet-head-label { font-size: 12.5px; font-weight: 700; color: var(--ink-3); }
.bz-wallet-head-value { font-size: 22px; font-weight: 900; color: var(--ink); letter-spacing: -.02em; line-height: 1; }
.bz-wallet-head-hint  { font-size: 11.5px; color: var(--ink-3); margin-inline-start: 28px; margin-top: 2px; }

/* The old gradient banner classes can stay as fallback for templates
   that haven't migrated yet but the bazaaria tab no longer uses them. */
.bz-wallet-balance,
.bz-wallet-balance-left,
.bz-wallet-balance-right,
.bz-wallet-balance-value,
.bz-wallet-balance-label,
.bz-wallet-balance-hint { display: none; }

.bz-wallet-section-title {
  font-size: 13px; font-weight: 800;
  color: var(--ink-3); letter-spacing: .06em;
  text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 8px;
  margin-bottom: 12px;
}
.bz-wallet-section-title i { font-size: 11px; }

.bz-wallet-txns { display: flex; flex-direction: column; gap: 8px; }
.bz-wallet-txn-row {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px;
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  transition: border-color .15s, background .15s;
}
.bz-wallet-txn-row:hover { border-color: var(--ink-3); background: var(--surface); }
.bz-wallet-txn-ico {
  width: 38px; height: 38px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; flex-shrink: 0;
}
.bz-wallet-txn-ico--in  { background: rgba(16,185,129,.12);  color: var(--success); }
.bz-wallet-txn-ico--out { background: rgba(239,68,68,.12);   color: var(--danger); }
.bz-wallet-txn-info { flex: 1; min-width: 0; }
.bz-wallet-txn-info strong { display: block; font-size: 13.5px; font-weight: 800; color: var(--ink); margin-bottom: 2px; }
.bz-wallet-txn-info small  { font-size: 11.5px; color: var(--ink-3); }
.bz-wallet-txn-amount {
  font-size: 14.5px; font-weight: 900; white-space: nowrap;
  letter-spacing: -.02em;
}
.bz-wallet-txn-amount--in  { color: var(--success); }
.bz-wallet-txn-amount--out { color: var(--danger); }


/* ─────────────────────────────────────────────────────────────────
   18. PROFILE — Cart tab
───────────────────────────────────────────────────────────────── */
.bz-cart-tab-list {
  display: flex; flex-direction: column; gap: 12px;
  margin-bottom: 22px;
}
.bz-cart-tab-row {
  display: grid;
  grid-template-columns: 80px 1fr auto auto 40px;
  align-items: center; gap: 14px;
  padding: 12px 14px;
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  transition: border-color .15s, background .15s;
}
.bz-cart-tab-row:hover { border-color: var(--ink-3); background: var(--surface); }

.bz-cart-tab-img {
  width: 80px; height: 80px;
  border-radius: 10px; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-3); font-size: 22px;
  flex-shrink: 0;
}
.bz-cart-tab-img img { width: 100%; height: 100%; object-fit: cover; }

.bz-cart-tab-info { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.bz-cart-tab-name { font-size: 13.5px; font-weight: 800; color: var(--ink); line-height: 1.35; text-decoration: none; }
.bz-cart-tab-name:hover { color: var(--primary); }
html[data-bz-mode="dark"] .bz-cart-tab-name:hover { color: var(--ink); }
.bz-cart-tab-variant { font-size: 11px; color: var(--ink-3); font-weight: 600; }
.bz-cart-tab-unit { font-size: 11.5px; color: var(--ink-3); font-weight: 600; margin-top: 4px; }

.bz-cart-tab-qty-form {
  display: inline-flex; align-items: center;
  background: var(--surface); border: 1.5px solid var(--line);
  border-radius: var(--r-sm); overflow: hidden;
  height: 36px;
}
.bz-cart-tab-qty-btn {
  width: 32px; height: 100%; border: 0; background: transparent;
  color: var(--ink); font-size: 16px; font-weight: 700;
  cursor: pointer; font-family: inherit;
  transition: background .15s;
}
.bz-cart-tab-qty-btn:hover { background: var(--soft); }
.bz-cart-tab-qty-val {
  min-width: 32px; padding: 0 4px;
  text-align: center; font-size: 13.5px; font-weight: 800; color: var(--ink);
}

.bz-cart-tab-line { font-size: 14.5px; font-weight: 900; color: var(--ink); white-space: nowrap; letter-spacing: -.02em; }

.bz-cart-tab-remove-form { display: inline-flex; }
.bz-cart-tab-remove {
  width: 36px; height: 36px; border: 0;
  background: transparent; border-radius: 10px;
  color: var(--ink-3); cursor: pointer; font-size: 13px;
  transition: background .15s, color .15s;
}
.bz-cart-tab-remove:hover { background: rgba(239,68,68,.10); color: var(--danger); }

/* Footer with totals + checkout */
.bz-cart-tab-foot {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 18px; flex-wrap: wrap;
  padding: 18px 20px;
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.bz-cart-tab-totals { flex: 1; min-width: 220px; }
.bz-cart-tab-total-row {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 14px; font-size: 14px; color: var(--ink-2); font-weight: 700;
  margin-bottom: 4px;
}
.bz-cart-tab-total-row strong { font-size: 20px; font-weight: 900; color: var(--ink); letter-spacing: -.02em; }
.bz-cart-tab-totals small { font-size: 11.5px; color: var(--ink-3); }
.bz-cart-tab-cta-row { display: inline-flex; gap: 10px; align-items: center; flex-wrap: wrap; }

@media (max-width: 640px) {
  .bz-cart-tab-row { grid-template-columns: 64px 1fr auto; }
  .bz-cart-tab-img { width: 64px; height: 64px; }
  .bz-cart-tab-qty-form { grid-column: 2; justify-self: start; margin-top: 4px; }
  .bz-cart-tab-line     { grid-column: 3; align-self: start; }
  .bz-cart-tab-remove-form { grid-column: 3; align-self: end; }
}


/* ─────────────────────────────────────────────────────────────────
   19. PROFILE — Order tracking tab (per-order progress pipeline)
───────────────────────────────────────────────────────────────── */
.bz-track-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 18px 20px;
  margin-bottom: 14px;
  transition: border-color .15s, box-shadow .15s;
}
.bz-track-card:hover { border-color: var(--ink-3); }
.bz-track-card.is-cancelled { background: rgba(239,68,68,.04); border-color: rgba(239,68,68,.2); }

.bz-track-card-head {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 14px; border-bottom: 1px solid var(--line); margin-bottom: 22px;
  gap: 12px; flex-wrap: wrap;
}
.bz-track-card-head strong { display: block; font-size: 14px; font-weight: 900; color: var(--ink); margin-bottom: 2px; }
.bz-track-card-head small  { font-size: 11.5px; color: var(--ink-3); font-weight: 600; }
.bz-track-card-total { font-size: 16px; font-weight: 900; color: var(--success); letter-spacing: -.02em; }

.bz-track-cancelled {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px;
  background: rgba(239,68,68,.08);
  color: var(--danger); font-size: 13px; font-weight: 700;
  border-radius: var(--r-sm);
}
.bz-track-cancelled i { font-size: 16px; }

/* Progress pipeline — 4 connected steps with a filled bar showing progress */
.bz-track-steps {
  position: relative;
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  padding: 10px 0;
}
/* Connector line behind all steps */
.bz-track-steps::before {
  content: '';
  position: absolute;
  top: 26px;                     /* aligns with center of the 36px circles */
  inset-inline: calc(100% / 8);  /* start at center of first circle */
  height: 3px;
  background: var(--line);
  border-radius: 2px;
  z-index: 0;
}
/* Filled connector showing how far progress reached */
.bz-track-steps::after {
  content: '';
  position: absolute;
  top: 26px;
  inset-inline-start: calc(100% / 8);
  /* (step-1) / 3 steps × usable width (3/4 of full) */
  width: calc((var(--step, 0) - 1) * (75% / 3));
  height: 3px;
  background: var(--success);
  border-radius: 2px;
  z-index: 0;
  transition: width .4s ease;
}
html[dir="rtl"] .bz-track-steps::after { right: calc(100% / 8); left: auto; }

.bz-track-step {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  text-align: center;
}
.bz-track-step-ico {
  width: 50px; height: 50px; border-radius: 50%;
  background: var(--surface);
  border: 3px solid var(--line);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink-3); font-size: 16px;
  transition: background .25s, border-color .25s, color .25s, transform .25s;
}
.bz-track-step.is-done .bz-track-step-ico {
  background: var(--success); border-color: var(--success); color: #fff;
}
.bz-track-step.is-current .bz-track-step-ico {
  transform: scale(1.08);
  box-shadow: 0 0 0 6px rgba(16,185,129,.18);
}
.bz-track-step-label {
  font-size: 11.5px; font-weight: 700; color: var(--ink-3);
  line-height: 1.3; max-width: 100px;
}
.bz-track-step.is-done    .bz-track-step-label,
.bz-track-step.is-current .bz-track-step-label { color: var(--ink); font-weight: 800; }

@media (max-width: 540px) {
  .bz-track-steps { grid-template-columns: 1fr; gap: 18px; }
  .bz-track-steps::before, .bz-track-steps::after { display: none; }
  .bz-track-step { flex-direction: row; gap: 14px; text-align: start; }
  .bz-track-step-label { max-width: none; }
}


/* ─────────────────────────────────────────────────────────────────
   20. ADD-MONEY MODAL (wallet top-up dialog)
───────────────────────────────────────────────────────────────── */
.bz-modal-overlay {
  position: fixed; inset: 0;
  background: rgba(15,23,42,.55);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  display: none; align-items: center; justify-content: center;
  z-index: 9000; padding: 20px;
  opacity: 0; transition: opacity .25s;
}
.bz-modal-overlay.is-open { display: flex; opacity: 1; }

.bz-modal {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 18px;
  max-width: 500px; width: 100%;
  max-height: 92vh; overflow-y: auto;
  padding: 26px 28px;
  position: relative;
  box-shadow: 0 32px 80px -20px rgba(15,23,42,.45);
  transform: scale(.96);
  transition: transform .28s cubic-bezier(.16,1,.3,1);
}
.bz-modal-overlay.is-open .bz-modal { transform: scale(1); }

.bz-modal-close {
  position: absolute; top: 14px; inset-inline-end: 14px;
  width: 34px; height: 34px; border: 0;
  background: var(--soft); color: var(--ink-2);
  border-radius: 50%; cursor: pointer; font-size: 13px;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s;
}
.bz-modal-close:hover { background: var(--line); color: var(--ink); }

.bz-modal-head { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; padding-inline-end: 40px; }
.bz-modal-head-ico {
  width: 48px; height: 48px; border-radius: 14px;
  background: color-mix(in srgb, var(--primary) 14%, transparent);
  color: var(--primary); font-size: 20px;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
html[data-bz-mode="dark"] .bz-modal-head-ico { color: var(--ink); }
.bz-modal-head h3 { font-size: 17px; font-weight: 900; color: var(--ink); margin-bottom: 4px; letter-spacing: -.02em; }
.bz-modal-head p  { font-size: 12.5px; color: var(--ink-3); }

.bz-modal-field { margin-bottom: 22px; }
.bz-modal-field > label { display: block; font-size: 12.5px; font-weight: 800; color: var(--ink); margin-bottom: 8px; }

/* Amount input */
.bz-modal-amount-wrap {
  position: relative;
  background: var(--soft); border: 1.5px solid var(--line);
  border-radius: var(--r-sm);
  display: flex; align-items: center;
  transition: border-color .15s, background .15s;
}
.bz-modal-amount-wrap:focus-within { background: var(--surface); border-color: var(--primary); }
.bz-modal-amount-wrap input {
  flex: 1; height: 52px; padding: 0 14px;
  background: transparent; border: 0; outline: 0;
  color: var(--ink); font-size: 22px; font-weight: 900; letter-spacing: -.02em;
  font-family: inherit;
  -moz-appearance: textfield;
}
.bz-modal-amount-wrap input::-webkit-outer-spin-button,
.bz-modal-amount-wrap input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.bz-modal-amount-currency {
  padding: 0 14px; color: var(--ink-3); font-size: 13px; font-weight: 700;
  border-inline-start: 1px solid var(--line);
  white-space: nowrap;
}

/* Preset amount chips */
.bz-modal-amount-chips {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: 10px;
}
.bz-modal-amount-chip {
  padding: 6px 12px; border-radius: var(--r-pill);
  background: var(--soft); border: 1px solid var(--line);
  color: var(--ink-2); font-size: 11.5px; font-weight: 700;
  cursor: pointer; font-family: inherit;
  transition: background .15s, color .15s, border-color .15s;
}
.bz-modal-amount-chip:hover { background: var(--surface); color: var(--ink); border-color: var(--ink-3); }

/* Payment methods grid */
.bz-modal-pay-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px;
}
.bz-modal-pay {
  position: relative;
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
  background: var(--soft); border: 1.5px solid var(--line);
  border-radius: var(--r-sm); cursor: pointer;
  transition: border-color .15s, background .15s;
}
.bz-modal-pay:hover { border-color: var(--ink-3); }
.bz-modal-pay.is-selected { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 7%, var(--soft)); }
.bz-modal-pay input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.bz-modal-pay-ico {
  width: 32px; height: 32px; border-radius: 8px;
  background: var(--surface); border: 1px solid var(--line);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink-3); font-size: 13px; flex-shrink: 0; overflow: hidden;
}
.bz-modal-pay-ico img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.bz-modal-pay-name { flex: 1; font-size: 12.5px; font-weight: 700; color: var(--ink); }
.bz-modal-pay-check {
  width: 18px; height: 18px; border-radius: 50%;
  background: transparent; color: transparent; border: 2px solid var(--line);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 9px; transition: all .15s;
  flex-shrink: 0;
}
.bz-modal-pay.is-selected .bz-modal-pay-check { background: var(--primary); border-color: var(--primary); color: var(--surface); }
html[data-bz-mode="dark"] .bz-modal-pay.is-selected .bz-modal-pay-check { color: #0b0f17; }

.bz-modal-empty {
  padding: 18px; text-align: center;
  background: rgba(245,158,11,.10); border: 1px solid rgba(245,158,11,.22);
  color: var(--warn); font-size: 12.5px; font-weight: 700;
  border-radius: var(--r-sm);
}
.bz-modal-empty i { display: block; font-size: 22px; margin-bottom: 6px; }

.bz-modal-foot {
  display: flex; justify-content: flex-end; gap: 10px;
  padding-top: 18px; border-top: 1px solid var(--line);
}
.bz-modal-foot .bz-prof-btn:disabled { opacity: .5; cursor: not-allowed; }

@media (max-width: 500px) {
  .bz-modal { padding: 22px 20px; }
  .bz-modal-foot { flex-direction: column-reverse; }
  .bz-modal-foot .bz-prof-btn { width: 100%; }
}


/* ═══════════════════════════════════════════════════════════
   MOBILE BOTTOM NAVIGATION  (.bz-bottom-nav)
   Visible only below 768 px. Five tabs: Home · Categories ·
   Cart (badge) · Orders · Profile (or Sign-in).
═══════════════════════════════════════════════════════════ */
.bz-bottom-nav {
  display: none;               /* hidden on desktop */
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 90;
  background: var(--surface);
  border-top: 1px solid var(--line);
  box-shadow: 0 -4px 20px rgba(15,23,42,.10);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
html[data-bz-mode="dark"] .bz-bottom-nav {
  box-shadow: 0 -4px 24px rgba(0,0,0,.55);
}
.bz-bn-inner {
  display: flex;
  align-items: stretch;
  height: 58px;
}
.bz-bn-item {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px;
  padding: 0 4px 2px;
  font-size: 10px; font-weight: 700; line-height: 1.2;
  color: var(--ink-3);
  text-decoration: none;
  transition: color .18s;
  cursor: pointer; background: none; border: none;
  font-family: inherit;
}
.bz-bn-item i { font-size: 19px; display: block; }
.bz-bn-item.is-active,
.bz-bn-item:hover { color: var(--primary); }
.bz-bn-ico-wrap { position: relative; display: inline-flex; }
.bz-bn-badge {
  position: absolute; top: -5px; inset-inline-end: -7px;
  min-width: 16px; height: 16px;
  background: var(--secondary, #EF4444); color: #fff;
  border-radius: 999px;
  font-size: 9px; font-weight: 900;
  display: flex; align-items: center; justify-content: center;
  padding: 0 3px; line-height: 1;
}

/* Push main content up so it clears the bar */
@media (max-width: 768px) {
  .bz-bottom-nav { display: block; }
  .bz-main { padding-bottom: 68px; }
}

/* ====================================================================
   BAZAARIA HOME DESIGN — ported from demo template, scoped under .bzh
   so it never affects category/detail/profile/wishlist pages which
   share the generic .bz-section/.bz-card/.bz-container classes.
   ==================================================================== */
/* ─────────────────────────────────────────────────────────────
   DESIGN TOKENS
   ────────────────────────────────────────────────────────────── */
.bzh {
    /* Brand colors */
    --bz-ink:      #0a0a0b;
    --bz-ink-soft: #1a1a1d;
    --bz-coral:    #ff5a36;
    --bz-coral-soft:#ff7a5c;
    --bz-cream:    #faf8f5;
    --bz-cream-2:  #f5f1eb;

    /* Surfaces */
    --bz-bg:       #ffffff;
    --bz-surface:  #faf8f5;
    --bz-surface-2:#f3efe9;
    --bz-card:     #ffffff;
    --bz-border:   #ebe7df;
    --bz-border-strong:#d8d2c7;

    /* Text */
    --bz-text:     #0a0a0b;
    --bz-text-soft:#4a4a52;
    --bz-text-mute:#8a8a93;

    /* Accent */
    --bz-success:  #10b981;
    --bz-warning:  #f59e0b;
    --bz-danger:   #ef4444;

    /* Typography */
    --bz-font-head: 'Zain', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --bz-font-body: 'Zain', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --bz-font-mono: 'Zain', system-ui, -apple-system, 'Segoe UI', sans-serif;

    /* Spacing scale */
    --bz-1: 4px;  --bz-2: 8px;  --bz-3: 12px; --bz-4: 16px;
    --bz-5: 24px; --bz-6: 32px; --bz-7: 48px; --bz-8: 64px;
    --bz-9: 96px; --bz-10: 128px;

    /* Radius */
    --bz-r-sm: 8px; --bz-r-md: 12px; --bz-r-lg: 16px; --bz-r-xl: 24px; --bz-r-pill: 999px;

    /* Shadows */
    --bz-sh-sm: 0 1px 2px rgba(10,10,11,.06), 0 1px 1px rgba(10,10,11,.04);
    --bz-sh-md: 0 4px 12px rgba(10,10,11,.06), 0 2px 4px rgba(10,10,11,.04);
    --bz-sh-lg: 0 12px 32px rgba(10,10,11,.08), 0 4px 12px rgba(10,10,11,.04);
    --bz-sh-xl: 0 24px 64px rgba(10,10,11,.12), 0 8px 24px rgba(10,10,11,.06);

    /* Transition */
    --bz-ease: cubic-bezier(.22, .61, .36, 1);
    --bz-ease-pop: cubic-bezier(.34, 1.56, .64, 1);

    /* Container */
    --bz-container: 1280px;
    --bz-container-px: clamp(16px, 4vw, 48px);

    /* Header height */
    --bz-header-h: 72px;
}

/* Dark mode tokens */
html[data-bz-mode="dark"] .bzh {
    --bz-bg:       #0a0a0b;
    --bz-surface:  #131316;
    --bz-surface-2:#1a1a1f;
    --bz-card:     #16161a;
    --bz-border:   #2a2a30;
    --bz-border-strong:#3a3a42;
    --bz-text:     #f5f5f5;
    --bz-text-soft:#b8b8c0;
    --bz-text-mute:#7a7a85;
    --bz-cream:    #131316;
    --bz-cream-2:  #1a1a1f;
}

/* ─────────────────────────────────────────────────────────────
   RESET
   ────────────────────────────────────────────────────────────── */
.bzh *, .bzh *::before, .bzh *::after { box-sizing: border-box; }
html .bzh { scroll-behavior: smooth; }
.bzh {
    margin: 0;
    padding: 0;
    background: var(--bz-bg);
    color: var(--bz-text);
    font-family: 'Zain', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: 15px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* `overflow-x: clip` instead of `hidden`. Both stop horizontal
       overflow from creating a page scrollbar, BUT `hidden` also
       establishes a scroll-context that makes every position:sticky
       descendant (the navbar) reference .bzh instead of the viewport —
       which is why the sticky header wasn't pinning before. `clip`
       achieves the same visual clipping without creating that context,
       so position:sticky on .bz-header now works against the viewport. */
    overflow-x: clip;
    transition: background .3s var(--bz-ease), color .3s var(--bz-ease);
}
.bzh img { max-width: 100%; display: block; }
.bzh a { color: inherit; text-decoration: none; transition: color .2s var(--bz-ease); }
.bzh button { font-family: inherit; cursor: pointer; }
.bzh input, .bzh textarea, .bzh select { font-family: inherit; font-size: inherit; }
.bzh h1, .bzh h2, .bzh h3, .bzh h4, .bzh h5, .bzh h6 { margin: 0; font-family: 'Zain', system-ui, -apple-system, 'Segoe UI', sans-serif; font-weight: 700; color: var(--bz-text); letter-spacing: -.01em; }
.bzh p { margin: 0; color: var(--bz-text-soft); }

/* For RTL, use Cairo as primary font instead of Playfair */
html[dir="rtl"] .bzh h1, html[dir="rtl"] .bzh h2, html[dir="rtl"] .bzh h3, html[dir="rtl"] .bzh h4, html[dir="rtl"] .bzh h5, html[dir="rtl"] .bzh h6 {
    font-family: 'Zain', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-weight: 800;
    letter-spacing: -.005em;
}
/* Hero h1 specifically uses Zain in both LTR and RTL */
html[dir="rtl"] .bzh .bz-hero h1 {
    font-family: 'Zain', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-weight: 900;
    letter-spacing: -.025em;
}

/* ─────────────────────────────────────────────────────────────
   CONTAINER & UTILITIES
   ────────────────────────────────────────────────────────────── */
.bzh .bz-container {
    width: 100%;
    max-width: var(--bz-container);
    margin: 0 auto;
    padding-inline: var(--bz-container-px);
}
.bzh .bz-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2.5px;
    color: var(--bz-text-mute);
    font-family: 'Zain', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
.bzh .bz-eyebrow::before, .bzh .bz-eyebrow::after {
    content: '';
    width: 28px;
    height: 1px;
    background: currentColor;
    display: inline-block;
    opacity: .5;
    flex-shrink: 0;
}
.bzh .bz-eyebrow-coral { color: var(--bz-coral); }
.bzh .bz-eyebrow-coral::before, .bzh .bz-eyebrow-coral::after { opacity: 1; }
.bzh .bz-section {
    /* The legacy chrome at the top of this file declares
       `.bz-section { background: var(--surface); border: 1px solid …;
                      border-radius: var(--r-lg); padding: 22px 26px;
                      margin-bottom: 22px; }`
       which wraps EVERY new-theme section in a white-card box and squishes
       its content. The demo is the opposite — sections are full-width, open,
       and breathing. Reset everything the legacy rule paints and only keep
       the demo's vertical rhythm. */
    background: transparent;
    border: 0;
    border-radius: 0;
    margin-bottom: 0;
    padding: clamp(72px, 10vw, 128px) 0;
}
.bzh .bz-section-head {
    /* Legacy `.bz-section-head { display:flex; align-items:center; gap:12px; }`
       forces eyebrow + h2 side-by-side. The demo stacks them vertically with
       breathing room — reset display so children layout naturally. */
    display: block;
    align-items: initial;
    gap: 0;
    flex-wrap: initial;
    margin-bottom: clamp(36px, 5vw, 64px);
}
.bzh .bz-section-head h2 {
    /* Legacy `.bz-section-head h2 { display:inline-flex; … }` forces the
       heading to sit inline with the eyebrow. Demo uses a full block heading. */
    display: block;
    align-items: initial;
    gap: 0;
    font-size: clamp(32px, 4.5vw, 56px);
    line-height: 1.05;
    margin: 16px 0 12px;
    letter-spacing: -.015em;
}
.bzh .bz-section-head p { font-size: 16px; max-width: 580px; line-height: 1.6; }
.bzh .bz-section-head-flex { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.bzh .bz-section-head-center { text-align: center; }
.bzh .bz-section-head-center .bz-eyebrow { display: inline-flex; }
.bzh .bz-section-head-center p { margin-inline: auto; }
.bzh .bz-link-arrow {
    font-size: 13px;
    font-weight: 600;
    color: var(--bz-text);
    border-bottom: 1.5px solid var(--bz-text);
    padding-bottom: 2px;
    transition: gap .2s var(--bz-ease);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.bzh .bz-link-arrow:hover { gap: 10px; }
.bzh .bz-link-arrow i { font-size: 11px; }

/* ─────────────────────────────────────────────────────────────
   BUTTONS
   ────────────────────────────────────────────────────────────── */
.bzh .bz-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 24px;
    border: 1.5px solid transparent;
    border-radius: var(--bz-r-md);
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: transform .2s var(--bz-ease), background .2s var(--bz-ease), color .2s var(--bz-ease), border-color .2s var(--bz-ease), box-shadow .2s var(--bz-ease);
    white-space: nowrap;
    text-decoration: none;
}
.bzh .bz-btn:active { transform: translateY(1px) scale(.99); }
.bzh .bz-btn-primary {
    background: var(--bz-ink);
    color: #fff;
    border-color: var(--bz-ink);
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
.bzh .bz-btn-primary::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--bz-coral);
    transform: translateY(101%);
    transition: transform .4s var(--bz-ease);
    z-index: -1;
}
.bzh .bz-btn-primary:hover {
    border-color: var(--bz-coral);
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(255,90,54,.28);
}
.bzh .bz-btn-primary:hover::before { transform: translateY(0); }
.bzh .bz-btn-secondary {
    background: transparent;
    color: var(--bz-text);
    border-color: var(--bz-text);
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
.bzh .bz-btn-secondary::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--bz-ink);
    transform: translateY(101%);
    transition: transform .4s var(--bz-ease);
    z-index: -1;
}
.bzh .bz-btn-secondary:hover {
    color: var(--bz-bg);
    border-color: var(--bz-ink);
}
.bzh .bz-btn-secondary:hover::before { transform: translateY(0); }
/* ── Dark mode button fixes ── */
html[data-bz-mode="dark"] .bzh .bz-btn-primary {
    background: #fff;
    color: #0a0a0b;
    border-color: #fff;
}
html[data-bz-mode="dark"] .bzh .bz-btn-primary:hover {
    color: #fff;
    border-color: var(--bz-coral);
}
html[data-bz-mode="dark"] .bzh .bz-btn-secondary {
    border-color: rgba(255,255,255,.55);
    color: #f5f5f5;
}
html[data-bz-mode="dark"] .bzh .bz-btn-secondary:hover {
    color: #fff;
    border-color: #fff;
}
html[data-bz-mode="dark"] .bzh .bz-btn-secondary::before {
    background: rgba(255,255,255,.12);
}

.bzh .bz-btn-coral {
    background: var(--bz-coral);
    color: #fff;
    border-color: var(--bz-coral);
}
.bzh .bz-btn-coral:hover {
    background: var(--bz-coral-soft);
    border-color: var(--bz-coral-soft);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(255,90,54,.4);
}
.bzh .bz-btn-lg { padding: 17px 32px; font-size: 15px; }
.bzh .bz-btn-sm { padding: 10px 16px; font-size: 13px; }

/* ─────────────────────────────────────────────────────────────
   ANNOUNCEMENT BAR
   ────────────────────────────────────────────────────────────── */
.bzh .bz-announce {
    background: var(--bz-surface-2);
    color: var(--bz-text);
    border-bottom: 1px solid var(--bz-border);
    padding: 10px 16px;
    text-align: center;
    font-size: 12.5px;
    letter-spacing: .3px;
    position: relative;
    z-index: 50;
    transition: background .3s var(--bz-ease), color .3s var(--bz-ease), border-color .3s var(--bz-ease);
}
.bzh .bz-announce i { color: var(--bz-coral); margin-inline-end: 6px; }

/* ─────────────────────────────────────────────────────────────
   DEMO BAR (lang/mode toggles)
   ────────────────────────────────────────────────────────────── */
.bzh .bz-demo-bar {
    background: var(--bz-surface);
    border-bottom: 1px solid var(--bz-border);
    padding: 8px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 12px;
    position: sticky;
    top: 0;
    z-index: 60;
}
.bzh .bz-demo-back {
    color: var(--bz-text-soft);
    font-weight: 500;
    transition: color .2s;
}
.bzh .bz-demo-back:hover { color: var(--bz-coral); }
.bzh .bz-demo-tools { display: flex; gap: 8px; align-items: center; }
.bzh .bz-demo-tools button {
    background: var(--bz-card);
    border: 1px solid var(--bz-border);
    border-radius: var(--bz-r-pill);
    padding: 6px 14px;
    color: var(--bz-text);
    font-size: 12px;
    font-weight: 600;
    transition: all .2s var(--bz-ease);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.bzh .bz-demo-tools button:hover { background: var(--bz-ink); color: #fff; border-color: var(--bz-ink); }

/* ─────────────────────────────────────────────────────────────
   HEADER / NAV
   ────────────────────────────────────────────────────────────── */
.bzh .bz-header {
    /* Sticky so the announce strip above scrolls away naturally and the
       navbar pins to the top of the viewport from then on. We rely on
       `.bzh { overflow-x: clip }` (set below) to keep this working —
       `overflow-x: hidden` would establish a scroll-context on .bzh and
       make sticky reference .bzh instead of the viewport, breaking it. */
    background: rgba(255,255,255,.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--bz-border);
    position: sticky;
    top: 0;
    z-index: 50;
    transition: background .3s var(--bz-ease), box-shadow .3s var(--bz-ease);
}
html[data-bz-mode="dark"] .bzh .bz-header { background: rgb(0 0 0 / 85%); }
.bzh .bz-header.is-scrolled {
    box-shadow: 0 1px 0 var(--bz-border), 0 8px 24px rgba(0,0,0,.05);
}
.bzh .bz-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--bz-header-h);
    gap: 24px;
}
.bzh .bz-logo {
    font-family: 'Zain', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: 28px;
    font-weight: 800;
    color: var(--bz-text);
    letter-spacing: -.025em;
    flex-shrink: 0;
    font-style: italic;
    line-height: 1;
}
html[dir="rtl"] .bzh .bz-logo { font-style: normal; font-family: 'Zain', system-ui, -apple-system, 'Segoe UI', sans-serif; font-weight: 800; }
.bzh .bz-logo span { color: var(--bz-coral); font-style: normal; }
.bzh .bz-nav-links {
    display: flex;
    gap: 32px;
    list-style: none;
    margin: 0;
    padding: 0;
    flex: 1;
    justify-content: center;
}
.bzh .bz-nav-links a {
    font-size: 14px;
    font-weight: 500;
    color: var(--bz-text);
    position: relative;
    padding: 4px 0;
}
.bzh .bz-nav-links a::after {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    bottom: -2px;
    width: 0;
    height: 1.5px;
    background: var(--bz-coral);
    transition: width .25s var(--bz-ease);
}
.bzh .bz-nav-links a:hover::after { width: 100%; }
.bzh .bz-nav-tools { display: flex; gap: 4px; align-items: center; }
.bzh .bz-nav-icon {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--bz-text);
    border-radius: var(--bz-r-pill);
    position: relative;
    transition: background .2s var(--bz-ease);
}
.bzh .bz-nav-icon:hover { background: var(--bz-surface); }
.bzh .bz-nav-icon i { font-size: 17px; }
.bzh .bz-nav-badge {
    position: absolute;
    top: 4px;
    inset-inline-end: 4px;
    background: var(--bz-coral);
    color: #fff;
    font-size: 9.5px;
    font-weight: 700;
    min-width: 16px;
    height: 16px;
    border-radius: var(--bz-r-pill);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
}
.bzh .bz-burger { display: none; }

/* ─────────────────────────────────────────────────────────────
   HERO
   ────────────────────────────────────────────────────────────── */
.bzh .bz-hero {
    background: var(--bz-cream);
    padding: clamp(56px, 9vw, 112px) 0 clamp(64px, 10vw, 128px);
    overflow: hidden;
    position: relative;
}
.bzh .bz-hero::before {
    content: '';
    position: absolute;
    top: 0; bottom: 0; inset-inline-end: 0;
    width: 50%;
    background: radial-gradient(ellipse at 80% 50%, rgba(255,90,54,.04), transparent 65%);
    pointer-events: none;
}
.bzh .bz-hero-grid {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: clamp(40px, 6vw, 96px);
    align-items: center;
}
.bzh .bz-hero-text { z-index: 2; position: relative; }
.bzh .bz-hero-text .bz-eyebrow { margin-bottom: 28px; }
.bzh .bz-hero h1 {
    font-family: 'Zain', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: clamp(44px, 6.5vw, 86px);
    line-height: 1.18;
    font-weight: 900;
    letter-spacing: -.025em;
    margin-bottom: 28px;
    color: var(--bz-text);
}
/* Override .bz-line's display:block so the span shrinks to text-width
   (higher specificity: 3 classes + 1 element beats 2 classes + 1 element) */
.bzh .bz-hero h1 .bz-line.bz-italic {
    display: inline-block;
}
.bzh .bz-hero h1 .bz-italic {
    font-family: 'Zain', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-style: italic;
    font-weight: 900;
    letter-spacing: -.01em;
    color: var(--bz-coral);
    position: relative;
}
html[dir="rtl"] .bzh .bz-hero h1 .bz-italic {
    font-family: 'Zain', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-style: italic;
    font-weight: 900;
}
.bzh .bz-hero h1 .bz-line { display: block; }
.bzh .bz-hero p {
    font-size: clamp(16px, 1.4vw, 18px);
    line-height: 1.65;
    max-width: 480px;
    margin-bottom: 40px;
    color: var(--bz-text-soft);
}
.bzh .bz-hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.bzh .bz-hero-meta {
    margin-top: 56px;
    display: flex;
    gap: 36px;
    padding-top: 28px;
    border-top: 1px solid var(--bz-border);
}
.bzh .bz-hero-meta-item .bz-meta-num {
    font-family: 'Zain', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: 28px;
    font-weight: 700;
    color: var(--bz-text);
    line-height: 1;
    letter-spacing: -.01em;
}
.bzh .bz-hero-meta-item .bz-meta-lbl {
    font-size: 11.5px;
    color: var(--bz-text-mute);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-top: 6px;
    display: block;
}

/* Hero image */
.bzh .bz-hero-visual {
    position: relative;
    aspect-ratio: 4 / 5;
    border-radius: var(--bz-r-xl);
    overflow: hidden;
    background: var(--bz-surface-2);
    z-index: 1;
}
.bzh .bz-hero-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.2s var(--bz-ease);
}
.bzh .bz-hero-visual:hover img { transform: scale(1.04); }
.bzh .bz-hero-tag {
    position: absolute;
    bottom: 28px;
    inset-inline-start: 28px;
    inset-inline-end: 28px;
    background: rgba(255,255,255,.98);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: var(--bz-r-lg);
    padding: 16px 18px;
    display: flex;
    align-items: center;
    gap: 14px;
    box-shadow: 0 20px 40px rgba(0,0,0,.12);
}
html[data-bz-mode="dark"] .bzh .bz-hero-tag { background: rgba(22,22,26,.95); }
.bzh .bz-hero-tag-img {
    width: 56px;
    height: 56px;
    border-radius: var(--bz-r-md);
    background: var(--bz-surface);
    overflow: hidden;
    flex-shrink: 0;
}
.bzh .bz-hero-tag-img img { width: 100%; height: 100%; object-fit: cover; }
.bzh .bz-hero-tag-info { line-height: 1.3; flex: 1; min-width: 0; }
.bzh .bz-hero-tag-info .bz-tag-brand { font-size: 10px; color: var(--bz-text-mute); font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 2px; }
.bzh .bz-hero-tag-info .bz-tag-name { font-size: 13.5px; font-weight: 600; color: var(--bz-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bzh .bz-hero-tag-info .bz-tag-price { font-size: 14px; font-weight: 700; color: var(--bz-text); margin-top: 2px; }
.bzh .bz-hero-tag-cta {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--bz-ink);
    color: #fff;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s, transform .2s;
    flex-shrink: 0;
}
.bzh .bz-hero-tag-cta:hover { background: var(--bz-coral); transform: scale(1.08); }
.bzh .bz-hero-tag-cta i { font-size: 13px; }
/* NOTE: NO `transform: scaleX(-1)` for RTL here. The blade picks the
   correct Font Awesome icon (`fa-arrow-left` in RTL, `fa-arrow-right`
   in LTR), so any CSS flip would *double-mirror* the arrow and point
   it the wrong way. Leave the icon as-is. */

/* Floating rating chip (top of hero image) */
.bzh .bz-hero-rating {
    position: absolute;
    top: 24px;
    inset-inline-end: 24px;
    background: rgba(255,255,255,.96);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: var(--bz-r-pill);
    padding: 9px 16px 9px 12px;
    display: flex;
    align-items: center;
    gap: 9px;
    box-shadow: 0 10px 28px rgba(0,0,0,.14);
    z-index: 3;
}
html[data-bz-mode="dark"] .bzh .bz-hero-rating { background: rgba(22,22,26,.92); }
.bzh .bz-hero-rating .bz-hr-stars { display: flex; gap: 1px; color: #ffb007; font-size: 12px; }
.bzh .bz-hero-rating .bz-hr-num {
    font-family: 'Zain', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-weight: 700;
    font-size: 16px;
    color: var(--bz-text);
    line-height: 1;
}
.bzh .bz-hero-rating .bz-hr-lbl { font-size: 10px; color: var(--bz-text-mute); font-weight: 600; letter-spacing: .3px; }

/* Trusted-by avatar cluster */
.bzh .bz-hero-trust {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 28px;
}
.bzh .bz-hero-avatars { display: flex; }
.bzh .bz-hero-avatars img,
.bzh .bz-hero-avatars .bz-hero-avatar-icon {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    object-fit: cover;
    border: 2.5px solid var(--bz-cream);
    margin-inline-start: -12px;
    box-shadow: 0 2px 6px rgba(0,0,0,.08);
    flex-shrink: 0;
}
.bzh .bz-hero-avatars img:first-child,
.bzh .bz-hero-avatars .bz-hero-avatar-icon:first-child {
    margin-inline-start: 0;
}
/* Person-icon fallback for customers without a profile photo. The blade
   stamps a tone class (0..3) so the row of icon-circles looks like a
   varied group of customers — coral, indigo, teal, amber — rather than
   four identical disks. Each tile is a flex centring container around a
   solid Font Awesome user glyph.                                        */
.bzh .bz-hero-avatars .bz-hero-avatar-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    line-height: 1;
    user-select: none;
}
.bzh .bz-hero-avatars .bz-hero-avatar-icon i { font-size: 16px; }
/* Tone palette — coral lead + 3 complementary accents that play nicely
   on both light and dark backgrounds. Slightly desaturated so the row
   reads as "people", not "flashy badges". */
.bzh .bz-hero-avatar-tone-0 { background: linear-gradient(135deg, #ff7a5c, #ff5a36); }
.bzh .bz-hero-avatar-tone-1 { background: linear-gradient(135deg, #6366f1, #4f46e5); }
.bzh .bz-hero-avatar-tone-2 { background: linear-gradient(135deg, #14b8a6, #0d9488); }
.bzh .bz-hero-avatar-tone-3 { background: linear-gradient(135deg, #f59e0b, #d97706); }
.bzh .bz-hero-trust-text { line-height: 1.35; }
.bzh .bz-hero-trust-text .bz-htt-stars { color: #d97706; font-size: 11px; letter-spacing: 1px; } /* 3.2:1 on white (was #ffb007, 1.7:1) */
html[data-bz-mode="dark"] .bzh .bz-hero-trust-text .bz-htt-stars { color: #ffb007; }
.bzh .bz-hero-trust-text .bz-htt-lbl { font-size: 12.5px; color: var(--bz-text-soft); font-weight: 500; }
.bzh .bz-hero-trust-text .bz-htt-lbl b { color: var(--bz-text); font-weight: 700; }

/* Scroll indicator */
.bzh .bz-hero-scroll {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    color: var(--bz-text-mute);
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 2px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    pointer-events: none;
}
.bzh .bz-hero-scroll::after {
    content: '';
    width: 1px;
    height: 32px;
    background: linear-gradient(to bottom, var(--bz-text-mute) 50%, transparent);
    animation: bz-scroll-line 2.2s ease-in-out infinite;
}
@keyframes bz-scroll-line {
    0% { transform: scaleY(0); transform-origin: top; }
    50% { transform: scaleY(1); transform-origin: top; }
    50.01% { transform-origin: bottom; }
    100% { transform: scaleY(0); transform-origin: bottom; }
}

/* ─────────────────────────────────────────────────────────────
   TRUST STRIP
   ────────────────────────────────────────────────────────────── */
.bzh .bz-trust {
    /* `display: block` here is CRITICAL — the legacy chrome (at the top of
       this file) declares `.bz-trust { display: grid; grid-template-columns:
       1fr 1fr 1fr; }` for the OLD storefront's trust strip. Without this
       reset, our <section class="bz-trust"> would itself become a 3-col grid
       and the single .bz-trust-grid container would occupy only the first
       cell — pushing all 4 items into one narrow column on the start side.
       Belt-and-braces: also reset grid-template-columns so any inherited
       grid leftovers from the old rule don't leak through.                */
    display: block;
    grid-template-columns: none;
    background: var(--bz-bg);
    border-block: 1px solid var(--bz-border);
    padding: 20px 0;
}
.bzh .bz-trust-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}
.bzh .bz-trust-item {
    display: flex;
    align-items: center;
    gap: 16px;
    position: relative;
}
.bzh .bz-trust-item:not(:last-child)::after {
    content: '';
    position: absolute;
    inset-inline-end: -12px;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 32px;
    background: var(--bz-border);
}
.bzh .bz-trust-icon {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--bz-text);
    flex-shrink: 0;
    border: 1px solid var(--bz-border);
    border-radius: 50%;
    transition: background .3s, color .3s, border-color .3s;
}
.bzh .bz-trust-item:hover .bz-trust-icon {
    background: var(--bz-ink);
    color: #fff;
    border-color: var(--bz-ink);
}
.bzh .bz-trust-icon i {
    /* Reset the legacy `.bz-trust-item i` rule (declared near line 470) that
       paints every <i> inside a trust item as a 32×32 green pill. In the new
       theme the *wrapper* .bz-trust-icon owns the circle styling and the <i>
       is just an icon glyph — so we strip the legacy box/bg/colour and let
       the wrapper drive the look. */
    width: auto;
    height: auto;
    background: transparent;
    border-radius: 0;
    color: inherit;
    font-size: 16px;
}
.bzh .bz-trust-text .bz-trust-t { font-size: 14px; font-weight: 700; color: var(--bz-text); line-height: 1.2; letter-spacing: -.005em; }
.bzh .bz-trust-text .bz-trust-s { font-size: 12.5px; color: var(--bz-text-mute); margin-top: 4px; }

/* ─────────────────────────────────────────────────────────────
   BENTO CATEGORIES
   ────────────────────────────────────────────────────────────── */
.bzh .bz-bento {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: 280px 280px;
    gap: 16px;
}
.bzh .bz-bento-item {
    position: relative;
    border-radius: var(--bz-r-lg);
    overflow: hidden;
    cursor: pointer;
    background: var(--bz-surface-2);
    isolation: isolate;
}
.bzh .bz-bento-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1s var(--bz-ease);
}
.bzh .bz-bento-item:hover img { transform: scale(1.06); }
.bzh .bz-bento-item::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 35%, rgba(0,0,0,.4) 70%, rgba(0,0,0,.78) 100%);
    transition: opacity .3s var(--bz-ease);
}
.bzh .bz-bento-item:hover::after { background: linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.55) 60%, rgba(0,0,0,.85) 100%); }
.bzh .bz-bento-content {
    position: absolute;
    bottom: 24px;
    inset-inline-start: 24px;
    inset-inline-end: 24px;
    z-index: 2;
    color: #fff;
}
.bzh .bz-bento-content h3 {
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 6px;
    letter-spacing: -.01em;
}
.bzh .bz-bento-content .bz-bento-count {
    font-size: 12px;
    color: rgba(255,255,255,.85);
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.bzh .bz-bento-content .bz-bento-count::after {
    content: '';
    display: inline-block;
    width: 18px;
    height: 1px;
    background: rgba(255,255,255,.7);
    transition: width .25s var(--bz-ease);
}
.bzh .bz-bento-item:hover .bz-bento-count::after { width: 28px; background: var(--bz-coral); }

/* Bento layout: 1 large (span 2×2) + 4 small (each 1×1) = 5 tiles total */
.bzh .bz-bento-item:nth-child(1) { grid-column: span 2; grid-row: span 2; }
.bzh .bz-bento-item:nth-child(1) h3 { font-size: 40px; letter-spacing: -.02em; }
.bzh .bz-bento-item:nth-child(1) .bz-bento-content { bottom: 32px; inset-inline-start: 32px; inset-inline-end: 32px; }
.bzh .bz-bento-item:nth-child(2) { grid-column: span 1; grid-row: span 1; }
.bzh .bz-bento-item:nth-child(3) { grid-column: span 1; grid-row: span 1; }
.bzh .bz-bento-item:nth-child(4) { grid-column: span 1; grid-row: span 1; }
.bzh .bz-bento-item:nth-child(5) { grid-column: span 1; grid-row: span 1; }

/* ─────────────────────────────────────────────────────────────
   PRODUCT CARDS (used in New Arrivals + Best Sellers)
   ────────────────────────────────────────────────────────────── */
/* ── Product Card ── */
.bzh .bz-card {
    background: var(--bz-card);
    border-radius: var(--bz-r-lg);
    border: 1px solid var(--bz-border);
    overflow: hidden;
    transition: transform .35s var(--bz-ease), box-shadow .35s var(--bz-ease);
    position: relative;
    display: flex;
    flex-direction: column;
    cursor: pointer;
}
.bzh .bz-card:hover {
    transform: translateY(-6px);
}

.bzh .bz-card-img {
    aspect-ratio: 4 / 5;
    background: var(--bz-surface);
    overflow: hidden;
    position: relative;
}
.bzh .bz-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .8s var(--bz-ease);
}
.bzh .bz-card:hover .bz-card-img img { transform: scale(1.06); }

/* Badge */
.bzh .bz-card-badge {
    position: absolute;
    top: 12px;
    inset-inline-start: 12px;
    background: rgba(255,255,255,.92);
    color: var(--bz-ink);
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
    padding: 5px 10px;
    border-radius: var(--bz-r-pill);
    z-index: 2;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow: 0 2px 8px rgba(0,0,0,.10);
    line-height: 1;
}
.bzh .bz-card-badge-sale {
    background: var(--bz-coral);
    color: #fff;
    box-shadow: 0 2px 10px rgba(255,90,54,.35);
}

/* Wishlist */
.bzh .bz-card-wish {
    position: absolute;
    top: 12px;
    inset-inline-end: 12px;
    width: 36px;
    height: 36px;
    background: rgba(255,255,255,.92);
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .22s var(--bz-ease), color .22s var(--bz-ease), transform .22s var(--bz-ease), opacity .25s;
    color: var(--bz-text-mute);
    z-index: 3;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow: 0 2px 8px rgba(0,0,0,.10);
    opacity: 0;
    transform: scale(.75);
    cursor: pointer;
}
.bzh .bz-card:hover .bz-card-wish { opacity: 1; transform: scale(1); }
.bzh .bz-card-wish:hover { background: #fff; color: var(--bz-coral); transform: scale(1.1); }
.bzh .bz-card-wish i { font-size: 13px; }

/* Quick add — full-width bar sliding up from bottom */
.bzh .bz-card-add {
    position: absolute;
    bottom: 0;
    inset-inline-start: 0;
    inset-inline-end: 0;
    height: 48px;
    background: var(--bz-ink);
    color: #fff;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 12.5px;
    font-weight: 700;
    font-family: 'Zain', system-ui, -apple-system, 'Segoe UI', sans-serif;
    letter-spacing: .04em;
    text-transform: uppercase;
    z-index: 3;
    cursor: pointer;
    transition: background .22s var(--bz-ease), transform .35s var(--bz-ease), opacity .3s;
    opacity: 0;
    transform: translateY(100%);
}
.bzh .bz-card:hover .bz-card-add { opacity: 1; transform: translateY(0); }
.bzh .bz-card-add:hover { background: var(--bz-coral); }
.bzh .bz-card-add i { font-size: 12px; }

/* Body */
.bzh .bz-card-body { padding: 14px 16px 16px; }
.bzh .bz-card-brand {
    font-size: 10px;
    color: var(--bz-text-mute);
    text-transform: uppercase;
    letter-spacing: .14em;
    font-weight: 700;
    margin-bottom: 5px;
    line-height: 1;
}
.bzh .bz-card-name {
    font-family: 'Zain', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--bz-text);
    line-height: 1.4;
    margin-bottom: 10px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
html[dir="rtl"] .bzh .bz-card-name { font-family: 'Zain', system-ui, -apple-system, 'Segoe UI', sans-serif; font-weight: 600; }

/* Swatches */
.bzh .bz-card-swatches {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 12px;
}
.bzh .bz-swatch {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1.5px solid var(--bz-border);
    cursor: pointer;
    transition: transform .15s var(--bz-ease), border-color .15s, box-shadow .15s;
    flex-shrink: 0;
}
.bzh .bz-swatch:hover { transform: scale(1.18); }
.bzh .bz-swatch.is-on { border-color: var(--bz-ink); border-width: 2px; box-shadow: 0 0 0 2.5px rgba(10,10,11,.12); }

/* Price row */
.bzh .bz-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    flex-wrap: wrap;
    row-gap: 4px;
}
.bzh .bz-card-price {
    display: flex;
    align-items: baseline;
    gap: 6px;
    flex-wrap: wrap;
    flex: 1;
    min-width: 0;
}
.bzh .bz-card-rating { flex-shrink: 0; }
.bzh .bz-card-price .bz-price-now {
    font-family: 'Zain', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: 17px;
    font-weight: 700;
    color: var(--bz-text);
    font-variant-numeric: tabular-nums;
    letter-spacing: -.01em;
    line-height: 1;
}
html[dir="rtl"] .bzh .bz-card-price .bz-price-now { font-family: 'Zain', system-ui, -apple-system, 'Segoe UI', sans-serif; }
.bzh .bz-card-price .bz-price-old {
    font-size: 12.5px;
    color: var(--bz-text-mute);
    text-decoration: line-through;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}
.bzh .bz-card-rating {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 11.5px;
    color: var(--bz-text-mute);
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
}
.bzh .bz-card-rating .bz-stars { color: #d97706; font-size: 10px; letter-spacing: .5px; }
html[data-bz-mode="dark"] .bzh .bz-card-rating .bz-stars { color: #f5a623; }

/* Dark mode */
html[data-bz-mode="dark"] .bzh .bz-card { border-color: rgba(255,255,255,.07); }
html[data-bz-mode="dark"] .bzh .bz-card-wish, html[data-bz-mode="dark"] .bzh .bz-card-badge:not(.bz-card-badge-sale) {
    background: rgba(22,22,26,.90);
    color: var(--bz-text);
}
html[data-bz-mode="dark"] .bzh .bz-card-wish:hover { background: rgba(22,22,26,1); color: var(--bz-coral); }
html[data-bz-mode="dark"] .bzh .bz-card-add { background: rgba(255,255,255,.15); backdrop-filter: blur(6px); }
html[data-bz-mode="dark"] .bzh .bz-card-add:hover { background: var(--bz-coral); }

/* ─────────────────────────────────────────────────────────────
   NEW ARRIVALS CAROUSEL
   ────────────────────────────────────────────────────────────── */
.bzh .bz-carousel-wrap { position: relative; }
.bzh .bz-carousel {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - 60px) / 4);
    gap: 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding-bottom: 4px;
    scroll-behavior: smooth;
}
.bzh .bz-carousel::-webkit-scrollbar { display: none; }
.bzh .bz-carousel > * { scroll-snap-align: start; }
.bzh .bz-carousel-nav {
    display: flex;
    gap: 8px;
}
.bzh .bz-carousel-btn {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1.5px solid var(--bz-border-strong);
    background: var(--bz-bg);
    color: var(--bz-text);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .25s var(--bz-ease);
}
.bzh .bz-carousel-btn:hover:not(:disabled) {
    background: var(--bz-ink);
    color: #fff;
    border-color: var(--bz-ink);
    transform: scale(1.05);
}
.bzh .bz-carousel-btn:disabled {
    opacity: .35;
    cursor: not-allowed;
}

/* ─────────────────────────────────────────────────────────────
   EDITORIAL BANNER
   ────────────────────────────────────────────────────────────── */
.bzh .bz-editorial {
    background: var(--bz-cream);
}
.bzh .bz-editorial-grid {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: clamp(40px, 6vw, 96px);
    align-items: center;
}
.bzh .bz-editorial-img {
    aspect-ratio: 5 / 6;
    border-radius: var(--bz-r-xl);
    overflow: hidden;
    background: var(--bz-surface);
    position: relative;
}
.bzh .bz-editorial-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s ease; }
.bzh .bz-editorial:hover .bz-editorial-img img { transform: scale(1.04); }
/* Decorative number overlay */
.bzh .bz-editorial-img::before {
    content: '01';
    position: absolute;
    top: 24px;
    inset-inline-start: 24px;
    font-family: 'Zain', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: 60px;
    font-weight: 800;
    color: rgba(255,255,255,.85);
    line-height: 1;
    letter-spacing: -.03em;
    z-index: 2;
    text-shadow: 0 4px 16px rgba(0,0,0,.2);
}
.bzh .bz-editorial-text { padding-inline: clamp(8px, 2vw, 32px); }
.bzh .bz-editorial-text .bz-eyebrow { margin-bottom: 24px; }
.bzh .bz-editorial h2 {
    font-size: clamp(32px, 4.5vw, 56px);
    line-height: 1.05;
    margin-bottom: 24px;
    letter-spacing: -.02em;
}
.bzh .bz-editorial h2 .bz-italic {
    font-family: 'Zain', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-style: italic;
    font-weight: 400;
    color: var(--bz-text);
}
html[dir="rtl"] .bzh .bz-editorial h2 .bz-italic { font-family: 'Zain', system-ui, -apple-system, 'Segoe UI', sans-serif; font-style: normal; font-weight: 300; }
.bzh .bz-editorial p {
    font-size: 16px;
    line-height: 1.7;
    margin-bottom: 32px;
    max-width: 500px;
}
.bzh .bz-editorial-features {
    display: flex;
    gap: 24px;
    margin: 32px 0;
    padding-block: 28px;
    border-block: 1px solid var(--bz-border);
}
.bzh .bz-editorial-feature .bz-ef-num {
    font-family: 'Zain', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: 28px;
    font-weight: 700;
    color: var(--bz-text);
    line-height: 1;
}
.bzh .bz-editorial-feature .bz-ef-lbl {
    font-size: 12px;
    color: var(--bz-text-mute);
    margin-top: 6px;
    display: block;
    line-height: 1.4;
}

/* ─────────────────────────────────────────────────────────────
   BEST SELLERS GRID
   ────────────────────────────────────────────────────────────── */
.bzh .bz-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

/* ─────────────────────────────────────────────────────────────
   COLLECTIONS TILES
   ────────────────────────────────────────────────────────────── */
.bzh .bz-collections {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
.bzh .bz-col-tile {
    position: relative;
    aspect-ratio: 3 / 4;
    border-radius: var(--bz-r-xl);
    overflow: hidden;
    background: var(--bz-surface-2);
    cursor: pointer;
    isolation: isolate;
}
.bzh .bz-col-tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.2s var(--bz-ease);
}
.bzh .bz-col-tile:hover img { transform: scale(1.08); }
.bzh .bz-col-tile::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 35%, rgba(0,0,0,.55) 75%, rgba(0,0,0,.85) 100%);
    transition: opacity .3s;
}
.bzh .bz-col-number {
    position: absolute;
    top: 24px;
    inset-inline-start: 28px;
    color: rgba(255,255,255,.85);
    font-family: 'Zain', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: 16px;
    font-weight: 600;
    z-index: 2;
    letter-spacing: 2px;
}
.bzh .bz-col-content {
    position: absolute;
    bottom: 32px;
    inset-inline-start: 32px;
    inset-inline-end: 32px;
    z-index: 2;
    color: #fff;
}
.bzh .bz-col-content h3 {
    font-size: 32px;
    color: #fff;
    margin-bottom: 8px;
    letter-spacing: -.015em;
    line-height: 1.05;
}
.bzh .bz-col-content .bz-col-count {
    font-size: 12px;
    color: rgba(255,255,255,.75);
    margin-bottom: 20px;
    display: block;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 600;
}
.bzh .bz-col-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    padding: 12px 0 4px;
    border-bottom: 1px solid rgba(255,255,255,.4);
    transition: gap .25s var(--bz-ease), border-color .25s;
}
.bzh .bz-col-tile:hover .bz-col-cta { gap: 14px; border-color: #fff; }

/* ─────────────────────────────────────────────────────────────
   DEAL OF THE DAY
   ────────────────────────────────────────────────────────────── */
.bzh .bz-deal {
    background: var(--bz-ink);
    color: #fff;
    border-radius: var(--bz-r-xl);
    overflow: hidden;
    position: relative;
    box-shadow: 0 24px 64px rgba(10,10,11,.30);
}
.bzh .bz-deal::before {
    content: '';
    position: absolute;
    top: -140px; inset-inline-end: -100px;
    width: 420px; height: 420px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,90,54,.35) 0%, transparent 70%);
    pointer-events: none;
    z-index: 1;
}
.bzh .bz-deal-grid {
    display: grid;
    grid-template-columns: 1fr 1.05fr;
    align-items: stretch;
    min-height: 520px;
    position: relative;
    z-index: 2;
}
.bzh .bz-deal-img {
    background: var(--bz-surface-2);
    overflow: hidden;
    position: relative;
}
.bzh .bz-deal-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s ease; }
.bzh .bz-deal:hover .bz-deal-img img { transform: scale(1.04); }
.bzh .bz-deal-img::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, transparent 55%, rgba(10,10,11,.35));
    pointer-events: none;
}
.bzh .bz-deal-text {
    padding: clamp(32px, 4vw, 60px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0;
}
/* Eyebrow lines visible on dark bg */
.bzh .bz-deal-text .bz-eyebrow {
    color: var(--bz-coral);
    margin-bottom: 18px;
}
.bzh .bz-deal-text .bz-eyebrow::before, .bzh .bz-deal-text .bz-eyebrow::after { background: var(--bz-coral); opacity: .7; }

.bzh .bz-deal-text h2 {
    font-size: clamp(28px, 3.5vw, 48px);
    color: #fff;
    line-height: 1.08;
    margin-bottom: 12px;
    letter-spacing: -.02em;
}
.bzh .bz-deal-text .bz-deal-name {
    font-size: 15px;
    color: rgba(255,255,255,.6);
    margin-bottom: 22px;
    line-height: 1.5;
}

/* Price row */
.bzh .bz-deal-prices {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}
.bzh .bz-deal-now {
    font-family: 'Zain', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: clamp(32px, 3.5vw, 48px);
    font-weight: 800;
    color: #fff;
    line-height: 1;
    letter-spacing: -.025em;
}
html[dir="rtl"] .bzh .bz-deal-now { font-family: 'Zain', system-ui, -apple-system, 'Segoe UI', sans-serif; font-weight: 800; }
.bzh .bz-deal-old {
    font-size: 18px;
    text-decoration: line-through;
    color: rgba(255,255,255,.38);
    font-weight: 400;
}
.bzh .bz-deal-save {
    background: var(--bz-coral);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    padding: 5px 11px;
    border-radius: var(--bz-r-pill);
    letter-spacing: .04em;
    box-shadow: 0 4px 12px rgba(255,90,54,.40);
}

/* Countdown */
.bzh .bz-countdown-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: rgba(255,255,255,.45);
    margin-bottom: 10px;
    font-weight: 600;
}
.bzh .bz-countdown {
    display: flex;
    gap: 8px;
    margin-bottom: 24px;
}
.bzh .bz-cd-unit {
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.10);
    border-radius: var(--bz-r-md);
    border-top: 2px solid var(--bz-coral);
    padding: 12px 10px 10px;
    min-width: 60px;
    text-align: center;
    flex: 1;
    max-width: 72px;
}
.bzh .bz-cd-num {
    font-family: 'Zain', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}
.bzh .bz-cd-lbl {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: rgba(255,255,255,.5);
    margin-top: 5px;
}

.bzh .bz-deal-meta {
    display: flex;
    gap: 16px;
    margin-bottom: 24px;
    font-size: 12.5px;
    color: rgba(255,255,255,.65);
    flex-wrap: wrap;
}
.bzh .bz-deal-meta span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.bzh .bz-deal-meta i { color: var(--bz-coral); font-size: 11px; }

/* Dark mode — deal card: --bz-ink (#0a0a0b) == --bz-bg in dark mode → zero
   contrast.  Lift to --bz-card (#16161a) so the card is visually distinct
   from the page background and the coral ::before glow reads against it. */
html[data-bz-mode="dark"] .bzh .bz-deal {
    background: var(--bz-card);
    box-shadow: 0 24px 64px rgba(0,0,0,.55);
}

/* ─────────────────────────────────────────────────────────────
   REVIEWS
   ────────────────────────────────────────────────────────────── */
.bzh .bz-reviews-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    margin-bottom: 40px;
    flex-wrap: wrap;
}
.bzh .bz-reviews-rating {
    text-align: end;
}
.bzh .bz-reviews-rating .bz-rate-num {
    font-family: 'Zain', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: 56px;
    font-weight: 800;
    line-height: 1;
    color: var(--bz-text);
}
.bzh .bz-reviews-rating .bz-rate-stars { color: #f5a623; font-size: 18px; margin: 6px 0 4px; letter-spacing: 2px; }
.bzh .bz-reviews-rating .bz-rate-count { font-size: 13px; color: var(--bz-text-mute); }
.bzh .bz-rev-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

/* Empty-state for the reviews section — used only when the merchant has no
   testimonials yet. Centred prompt that keeps the section's vertical rhythm
   while inviting real shoppers to contribute. */
.bzh .bz-rev-empty {
    text-align: center;
    background: var(--bz-card);
    border: 1px dashed var(--bz-border);
    border-radius: var(--bz-r-lg);
    padding: clamp(48px, 8vw, 88px) clamp(24px, 4vw, 48px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}
.bzh .bz-rev-empty-ico {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--bz-coral) 12%, transparent);
    color: var(--bz-coral);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
}
.bzh .bz-rev-empty-title {
    font-size: clamp(20px, 2.4vw, 26px);
    font-weight: 800;
    color: var(--bz-text);
    letter-spacing: -.01em;
    margin: 4px 0 2px;
}
.bzh .bz-rev-empty-sub {
    font-size: 14.5px;
    color: var(--bz-text-mute);
    max-width: 520px;
    line-height: 1.65;
    margin-bottom: 10px;
}
.bzh .bz-rev-card {
    background: var(--bz-card);
    border: 1px solid var(--bz-border);
    border-radius: var(--bz-r-lg);
    padding: 28px 26px;
    transition: transform .35s var(--bz-ease), box-shadow .35s var(--bz-ease), border-color .35s;
    position: relative;
    display: flex;
    flex-direction: column;
}
.bzh .bz-rev-card::before {
    content: '"';
    position: absolute;
    top: 12px;
    inset-inline-end: 22px;
    font-family: 'Zain', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: 72px;
    line-height: 1;
    color: var(--bz-coral);
    opacity: .18;
    font-weight: 800;
}
.bzh .bz-rev-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--bz-sh-lg);
    border-color: var(--bz-border-strong);
}
.bzh .bz-rev-card .bz-rev-stars { color: #f5a623; font-size: 14px; letter-spacing: 1.5px; margin-bottom: 16px; }
.bzh .bz-rev-card .bz-rev-text {
    font-size: 14.5px;
    color: var(--bz-text);
    line-height: 1.65;
    margin-bottom: 22px;
    flex: 1;
}
.bzh .bz-rev-product {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--bz-text-mute);
    font-weight: 600;
    margin-bottom: 18px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.bzh .bz-rev-product i { color: var(--bz-success); font-size: 11px; }
.bzh .bz-rev-author { display: flex; align-items: center; gap: 12px; padding-top: 16px; border-top: 1px solid var(--bz-border); }
.bzh .bz-rev-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    background: var(--bz-surface);
}
.bzh .bz-rev-avatar img { width: 100%; height: 100%; object-fit: cover; }

/* Initials variant — used when the testimonial has no real avatar.
   A coloured circle with the reviewer's first letter (or two letters) in
   bold. Driven by the `is-initials` class the blade applies up-front;
   the `<img>` onerror handler also flips the class at runtime if the
   image URL ends up 404. Keeps the row visually consistent across the
   three cards instead of falling back to a generic camera-icon image. */
.bzh .bz-rev-avatar.is-initials {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--bz-coral) 18%, var(--bz-surface));
    color: var(--bz-coral);
    font-size: 15px;
    font-weight: 800;
    letter-spacing: .5px;
    line-height: 1;
    text-transform: uppercase;
    user-select: none;
}
.bzh .bz-rev-avatar.is-initials span { display: block; }
html[data-bz-mode="dark"] .bzh .bz-rev-avatar.is-initials {
    background: color-mix(in srgb, var(--bz-coral) 22%, transparent);
}
.bzh .bz-rev-name { font-size: 14px; font-weight: 700; color: var(--bz-text); line-height: 1.2; }
.bzh .bz-rev-loc { font-size: 11.5px; color: var(--bz-text-mute); margin-top: 3px; display: inline-flex; align-items: center; gap: 5px; }
.bzh .bz-rev-loc i { font-size: 9px; }

/* ─────────────────────────────────────────────────────────────
   BRANDS MARQUEE
   ────────────────────────────────────────────────────────────── */
.bzh .bz-brands {
    /* Demo-faithful framing: hairline rules above and below frame the
       strip into its own band, with the small title sitting on top of
       the upper rule and the logos beneath. */
    background: var(--bz-bg);
    padding: 48px 0;
    overflow: hidden;
    border-block: 1px solid var(--bz-border);
    position: relative;
}
.bzh .bz-brands::before, .bzh .bz-brands::after {
    content: '';
    position: absolute;
    top: 0; bottom: 0;
    width: 120px;
    z-index: 2;
    pointer-events: none;
}
.bzh .bz-brands::before { inset-inline-start: 0; background: linear-gradient(to right, var(--bz-bg), transparent); }
.bzh .bz-brands::after { inset-inline-end: 0;   background: linear-gradient(to left,  var(--bz-bg), transparent); }
html[dir="rtl"] .bzh .bz-brands::before { background: linear-gradient(to left, var(--bz-bg), transparent); }
html[dir="rtl"] .bzh .bz-brands::after { background: linear-gradient(to right,var(--bz-bg), transparent); }
.bzh .bz-brands-title {
    text-align: center;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 3px;
    font-weight: 600;
    color: var(--bz-text-mute);
    margin-bottom: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
}
.bzh .bz-brands-title::before, .bzh .bz-brands-title::after {
    content: '';
    width: 36px;
    height: 1px;
    background: var(--bz-border-strong);
}
/* Wrapper crops the moving track. Without `overflow: hidden` the duplicated
   strip would extend past the viewport and add horizontal scroll. */
.bzh .bz-marquee-wrap {
    overflow: hidden;
    width: 100%;
}

/* Moving track — mirrors the landing strip pattern.
   The blade duplicates the brand list N times (where N adapts to the
   brand count so the rendered track always overflows the viewport),
   then passes the per-cycle translation ratio in via CSS variables:
     --bz-marquee-shift     (LTR, negative %)
     --bz-marquee-shift-rtl (RTL, positive %)
   That ratio is exactly `100 / N` so one cycle slides the track by the
   width of a single copy → seamless infinite loop for ANY brand count
   (1, 2, 8, 50 — all work).

   The fallbacks (-16.6667% / 16.6667%) keep the strip moving when the
   blade variable isn't set, matching the original 6-duplicate layout.

   A negative start-delay (-16s on a 32s loop) makes the strip appear
   mid-flight on first paint so there's no jarring "starts from edge"
   moment when the page loads.                                          */
.bzh .bz-marquee {
    display: flex;
    align-items: center;
    gap: 64px;
    width: max-content;
    animation: bz-marquee 32s linear infinite;
    animation-delay: -16s;
    will-change: transform;
}
@keyframes bz-marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(var(--bz-marquee-shift, -16.6667%)); }
}
/* RTL flip — Arabic content moves rightward instead of leftward so it
   visually scrolls "into" the page, matching the way Arabic text is read. */
html[dir="rtl"] .bzh .bz-marquee {
    animation-name: bz-marquee-rtl;
}
@keyframes bz-marquee-rtl {
    from { transform: translateX(0); }
    to   { transform: translateX(var(--bz-marquee-shift-rtl, 16.6667%)); }
}

/* Each brand tile — non-interactive on purpose (the merchant doesn't want
   the strip to feel clickable). pointer-events:none ensures nothing in the
   tile (img included) catches mouse/touch events, so the marquee keeps
   feeling like a moving display, not a row of buttons.                     */
.bzh .bz-brand-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 64px;
    height: 44px;
    padding: 0 12px;
    font-family: 'Zain', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: var(--bz-text);
    white-space: nowrap;
    flex: 0 0 auto;
    pointer-events: none;
    user-select: none;
}

/* The image itself uses the landing strip's brightness/invert trick:
     • Light mode → brightness(0) turns any colour logo into a black
       silhouette, then opacity .55 softens it to a tasteful neutral grey.
     • Dark mode → brightness(0) invert(1) flips that black silhouette to
       white, with opacity .65 to take the harsh edge off pure white.
   No grayscale, no per-hover toggle — strip stays uniform end-to-end.      */
.bzh .bz-brand-logo img {
    width: auto;
    height: 38px;
    max-width: 140px;
    object-fit: contain;
    display: block;
    filter: brightness(0);
    opacity: .55;
}
html[data-bz-mode="dark"] .bzh .bz-brand-logo img {
    filter: brightness(0) invert(1);
    opacity: .65;
}

/* Text fallback (when a brand row has no uploaded logo). Mute it the same
   way the image variant is muted so the strip stays visually consistent. */
.bzh .bz-brand-logo span {
    opacity: .55;
}
html[data-bz-mode="dark"] .bzh .bz-brand-logo span {
    opacity: .65;
}

/* ─────────────────────────────────────────────────────────────
   INSTAGRAM FEED
   ────────────────────────────────────────────────────────────── */
.bzh .bz-insta-head {
    text-align: center;
    margin-bottom: 48px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}
.bzh .bz-insta-head h2 {
    /* Display-scale headline: large, very bold, tracked tight — matches the
       editorial weight of the rest of the Bazaaria home headings while still
       reading as a clear callout, not a section sub-head. */
    font-size: clamp(36px, 6vw, 64px);
    font-weight: 900;
    color: var(--bz-text);
    line-height: 1.05;
    letter-spacing: -.02em;
    margin: 0;
}
.bzh .bz-insta-head p {
    font-size: clamp(14px, 1.4vw, 16px);
    color: var(--bz-text-mute);
    font-weight: 500;
    margin: 0;
    letter-spacing: .01em;
}
.bzh .bz-insta-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 4px;
}
.bzh .bz-insta-tile {
    aspect-ratio: 1;
    overflow: hidden;
    position: relative;
    cursor: pointer;
}
.bzh .bz-insta-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--bz-ease); }
.bzh .bz-insta-tile::after {
    content: '\f16d';
    font-family: 'Font Awesome 6 Brands';
    position: absolute;
    inset: 0;
    background: rgba(10,10,11,.55);
    color: #fff;
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity .25s;
}
.bzh .bz-insta-tile:hover img { transform: scale(1.1); }
.bzh .bz-insta-tile:hover::after { opacity: 1; }

/* ─────────────────────────────────────────────────────────────
   NEWSLETTER
   ────────────────────────────────────────────────────────────── */
.bzh .bz-newsletter {
    background: var(--bz-ink);
    color: #fff;
    padding: clamp(64px, 9vw, 108px) 16px;
    position: relative;
    overflow: hidden;
}
.bzh .bz-newsletter::before, .bzh .bz-newsletter::after {
    content: '';
    position: absolute;
    width: 480px;
    height: 480px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,90,54,.18) 0%, transparent 70%);
    pointer-events: none;
}
.bzh .bz-newsletter::before { top: -200px; inset-inline-start: -160px; }
.bzh .bz-newsletter::after { bottom: -200px; inset-inline-end: -160px; }
.bzh .bz-newsletter-content {
    position: relative;
    z-index: 2;
    max-width: var(--bz-container-max, 1280px);
    margin: 0 auto;
    padding: 0 var(--bz-container-px, 40px);
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 48px;
}
.bzh .bz-nl-text { text-align: start; }
.bzh .bz-nl-form { display: flex; flex-direction: column; gap: 14px; }
.bzh .bz-newsletter .bz-eyebrow { color: var(--bz-coral); margin-bottom: 20px; justify-content: flex-start; }
.bzh .bz-newsletter .bz-eyebrow::before, .bzh .bz-newsletter .bz-eyebrow::after { background: var(--bz-coral); }
.bzh .bz-newsletter h2 {
    font-size: clamp(36px, 4.5vw, 64px);
    color: #fff;
    line-height: 1.05;
    margin-bottom: 16px;
    letter-spacing: -.025em;
}
.bzh .bz-newsletter h2 .bz-italic {
    font-family: 'Zain', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-style: italic;
    color: var(--bz-coral);
    font-weight: 400;
    display: inline-block;
}
html[dir="rtl"] .bzh .bz-newsletter h2 .bz-italic { font-family: 'Zain', system-ui, -apple-system, 'Segoe UI', sans-serif; font-style: normal; font-weight: 300; }
.bzh .bz-newsletter p {
    font-size: 16px;
    color: rgba(255,255,255,.65);
    line-height: 1.6;
    margin: 0;
}
.bzh .bz-newsletter-form {
    display: flex;
    gap: 8px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.15);
    border-radius: var(--bz-r-pill);
    padding: 6px;
}
.bzh .bz-newsletter-form input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: #fff;
    padding: 12px 20px;
    font-size: 14px;
    min-width: 0;
}
.bzh .bz-newsletter-form input::placeholder { color: rgba(255,255,255,.45); }
.bzh .bz-newsletter-form button {
    background: var(--bz-coral);
    color: #fff;
    border: none;
    padding: 12px 28px;
    border-radius: var(--bz-r-pill);
    font-weight: 700;
    font-size: 14px;
    white-space: nowrap;
    transition: background .2s, transform .15s;
    flex-shrink: 0;
}
.bzh .bz-newsletter-form button:hover { background: var(--bz-coral-soft); transform: scale(1.03); }
.bzh .bz-newsletter-terms { font-size: 12px; color: rgba(255,255,255,.4); }

/* Dark mode — newsletter: same issue as deal card.  --bz-ink == --bz-bg in
   dark mode → section is invisible against the page.  Lift to --bz-card so
   the section has clear visual separation while keeping the dark-accent feel. */
html[data-bz-mode="dark"] .bzh .bz-newsletter {
    background: var(--bz-card);
}

/* Tablet/Mobile: stack vertically */
@media (max-width: 860px) {

    .bzh .bz-newsletter-content { grid-template-columns: 1fr; gap: 32px; text-align: center; }
    .bzh .bz-newsletter .bz-eyebrow { justify-content: center; }
    .bzh .bz-nl-text { text-align: center; }
    .bzh .bz-newsletter-form { max-width: 460px; margin: 0 auto; }

}

/* ─────────────────────────────────────────────────────────────
   FOOTER
   ────────────────────────────────────────────────────────────── */
.bzh .bz-footer {
    background: var(--bz-cream);
    padding: 64px 0 24px;
    border-top: 1px solid var(--bz-border);
}
html[data-bz-mode="dark"] .bzh .bz-footer { background: var(--bz-surface); }
.bzh .bz-footer-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: 48px;
    margin-bottom: 48px;
}
.bzh .bz-footer-brand .bz-logo { font-size: 32px; margin-bottom: 16px; display: inline-block; }
.bzh .bz-footer-brand p {
    font-size: 14px;
    color: var(--bz-text-soft);
    max-width: 320px;
    margin-bottom: 24px;
    line-height: 1.6;
}
.bzh .bz-footer-socials { display: flex; gap: 8px; }
.bzh .bz-footer-socials a {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--bz-card);
    border: 1px solid var(--bz-border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--bz-text);
    transition: all .2s var(--bz-ease);
}
.bzh .bz-footer-socials a:hover { background: var(--bz-ink); color: #fff; border-color: var(--bz-ink); transform: translateY(-2px); }
.bzh .bz-footer-col h4 {
    font-family: 'Zain', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--bz-text);
    margin-bottom: 16px;
    font-weight: 700;
}
.bzh .bz-footer-col ul { list-style: none; margin: 0; padding: 0; }
.bzh .bz-footer-col li { margin-bottom: 10px; }
.bzh .bz-footer-col a { font-size: 13.5px; color: var(--bz-text-soft); transition: color .2s; }
.bzh .bz-footer-col a:hover { color: var(--bz-coral); }
.bzh .bz-footer-bottom {
    border-top: 1px solid var(--bz-border);
    padding-top: 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    font-size: 12.5px;
    color: var(--bz-text-mute);
}
.bzh .bz-footer-bottom a { color: var(--bz-text-soft); text-decoration: none; }
/* Platform credit link — picks up its colour from the inline style the
   footer.blade.php sets (vendor's secondary brand colour). The selector
   is more specific than the generic `.bz-footer-bottom a` so hover/focus
   keep the same brand colour with a subtle underline reveal instead of
   resetting to the muted footer-link tone. */
.bzh .bz-footer-platform {
    font-weight: 700;
    text-decoration: none;
    transition: opacity .2s, text-decoration-color .2s;
}
.bzh .bz-footer-platform:hover,
.bzh .bz-footer-platform:focus-visible {
    opacity: .85;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.bzh .bz-payment-icons { display: flex; gap: 6px; align-items: center; }
.bzh .bz-payment-icons span {
    width: 38px;
    height: 26px;
    background: var(--bz-card);
    border: 1px solid var(--bz-border);
    border-radius: 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--bz-text-soft);
    transition: transform .2s, border-color .2s;
}
.bzh .bz-payment-icons span:hover { transform: translateY(-2px); border-color: var(--bz-border-strong); }
.bzh .bz-payment-icons i { font-size: 16px; }

/* ─────────────────────────────────────────────────────────────
   MOBILE BOTTOM NAV
   ────────────────────────────────────────────────────────────── */
.bzh .bz-mobile-nav {
    display: none;
    position: fixed;
    bottom: 0;
    inset-inline: 0;
    background: var(--bz-bg);
    border-top: 1px solid var(--bz-border);
    z-index: 40;
    box-shadow: 0 -4px 16px rgba(0,0,0,.05);
}
.bzh .bz-mobile-nav-grid {
    /* `auto-fit` so the grid adapts to however many tabs end up rendered:
       guests get login + 5 → 6 cells; customers get account + 5 → 6 cells;
       staff (logged-in non-customer) gets admin + 4 → 5 cells. */
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
}
/* Each tab is an <a>, not a <button>, in the new theme — keep both
   selectors working so any legacy markup still styles correctly.       */
.bzh .bz-mobile-nav a,
.bzh .bz-mobile-nav button {
    background: transparent;
    border: none;
    padding: 10px 4px 12px;
    color: var(--bz-text-soft);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    font-size: 10.5px;
    font-weight: 500;
    transition: color .2s;
    position: relative;
}
.bzh .bz-mobile-nav a.is-active,
.bzh .bz-mobile-nav button.is-active { color: var(--bz-coral); }
.bzh .bz-mobile-nav a i,
.bzh .bz-mobile-nav button i { font-size: 17px; }
.bzh .bz-mobile-nav-ico { position: relative; display: inline-flex; }
.bzh .bz-mobile-nav-badge {
    position: absolute;
    top: -4px;
    inset-inline-end: -6px;
    min-width: 15px;
    height: 15px;
    background: var(--bz-coral);
    color: #fff;
    font-size: 8px;
    font-weight: 700;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 2px;
    line-height: 1;
}

/* ─────────────────────────────────────────────────────────────
   TOAST
   ────────────────────────────────────────────────────────────── */
.bzh .bz-toast {
    position: fixed;
    bottom: 28px;
    inset-inline: 0;
    margin-inline: auto;
    width: max-content;
    max-width: min(92vw, 460px);
    background: rgba(10,10,11,.94);
    backdrop-filter: blur(14px);
    color: #fff;
    font-size: 13.5px;
    padding: 13px 22px;
    border-radius: var(--bz-r-pill);
    z-index: 9999;
    opacity: 0;
    transform: translateY(12px) scale(.97);
    pointer-events: none;
    transition: opacity .25s ease, transform .25s ease;
    box-shadow: 0 12px 32px rgba(0,0,0,.3);
}
.bzh .bz-toast.is-on { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.bzh .bz-toast i { color: var(--bz-coral); margin-inline-end: 6px; }

/* ─────────────────────────────────────────────────────────────
   FADE-IN ON SCROLL
   ────────────────────────────────────────────────────────────── */
.bzh .bz-reveal { opacity: 0; transform: translateY(20px); transition: opacity .8s var(--bz-ease), transform .8s var(--bz-ease); }
.bzh .bz-reveal.is-visible { opacity: 1; transform: translateY(0); }

/* ─────────────────────────────────────────────────────────────
   RESPONSIVE
   ────────────────────────────────────────────────────────────── */

/* ── Large tablet / small desktop (≤1200px) ── */
@media (max-width: 1200px) {

    .bzh .bz-hero h1 { font-size: clamp(44px, 5.5vw, 76px); }
    .bzh .bz-footer-grid { grid-template-columns: 1.2fr 1fr 1fr 1fr; }

}

/* ── Tablet landscape (≤1024px) ── */
@media (max-width: 1024px) {

    .bzh { --bz-container-px: 32px; }
    .bzh .bz-section { padding: clamp(56px, 8vw, 88px) 0; }

    /* Hero */
    .bzh .bz-hero-grid { grid-template-columns: 1fr; gap: 40px; }
    .bzh .bz-hero-visual { aspect-ratio: 16 / 9; max-height: 500px; }
    .bzh .bz-hero-scroll { display: none; }
    .bzh .bz-hero-meta { margin-top: 32px; padding-top: 24px; gap: 28px; }
    .bzh .bz-hero-tag { padding: 14px 16px; }
    .bzh .bz-hero-tag-img { width: 50px; height: 50px; }

    /* Bento: 2 cols × 3 rows */
    .bzh .bz-bento { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(3, 240px); grid-auto-rows: 240px; }
    .bzh .bz-bento-item:nth-child(1) { grid-column: span 2; grid-row: span 1; }
    .bzh .bz-bento-item:nth-child(1) h3 { font-size: 32px; }
    .bzh .bz-bento-item:nth-child(2), .bzh .bz-bento-item:nth-child(3), .bzh .bz-bento-item:nth-child(4), .bzh .bz-bento-item:nth-child(5) { grid-column: span 1; grid-row: span 1; }

    /* Grids */
    .bzh .bz-grid-4 { grid-template-columns: repeat(3, 1fr); }
    .bzh .bz-collections { grid-template-columns: repeat(2, 1fr); gap: 16px; }
    .bzh .bz-rev-grid { grid-template-columns: repeat(2, 1fr); }
    .bzh .bz-carousel { grid-auto-columns: calc((100% - 20px) / 2.3); }
    .bzh .bz-trust-grid { grid-template-columns: repeat(2, 1fr); gap: 20px 28px; }
    .bzh .bz-trust-item::after { display: none; }
    .bzh .bz-footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
    .bzh .bz-deal-grid { grid-template-columns: 1fr; min-height: auto; }
    .bzh .bz-deal-img { aspect-ratio: 16 / 9; }
    .bzh .bz-editorial-grid { grid-template-columns: 1fr; }
    .bzh .bz-editorial-img { max-height: 500px; aspect-ratio: 16 / 10; }
    .bzh .bz-insta-grid { grid-template-columns: repeat(3, 1fr); }

}

/* ── Tablet portrait (≤768px) ── */
@media (max-width: 768px) {

    .bzh { --bz-container-px: 24px; }
    .bzh { padding-bottom: 64px; }

    /* Nav */
    .bzh .bz-announce { font-size: 11.5px; padding: 9px 14px; }
    .bzh .bz-nav-links { display: none; }
    .bzh .bz-burger { display: inline-flex; }
    .bzh .bz-nav-icon[aria-label="Account"] { display: none; }
    .bzh .bz-mobile-nav { display: block; }

    /* Hero */
    .bzh .bz-hero { padding: 40px 0 52px; }
    .bzh .bz-hero h1 { font-size: clamp(36px, 8vw, 52px); }
    .bzh .bz-hero p { font-size: 15px; max-width: 100%; }
    .bzh .bz-hero-trust { margin-top: 22px; gap: 12px; }
    .bzh .bz-hero-avatars img { width: 34px; height: 34px; }
    .bzh .bz-hero-rating { top: 14px; inset-inline-end: 14px; padding: 6px 12px 6px 10px; }
    .bzh .bz-hero-rating .bz-hr-num { font-size: 14px; }
    .bzh .bz-hero-tag { padding: 12px 14px; gap: 10px; }
    .bzh .bz-hero-tag-img { width: 44px; height: 44px; }
    .bzh .bz-hero-tag-info .bz-tag-name { font-size: 12.5px; }
    .bzh .bz-hero-tag-info .bz-tag-price { font-size: 13px; }
    .bzh .bz-hero-tag-cta { width: 32px; height: 32px; }

    /* Section headings */
    .bzh .bz-section-head h2 { font-size: clamp(26px, 5vw, 38px); }
    .bzh .bz-section-head-flex { flex-direction: column; align-items: flex-start; gap: 12px; }

    /* Bento */
    .bzh .bz-bento { grid-template-rows: repeat(3, 200px); grid-auto-rows: 200px; gap: 12px; }
    .bzh .bz-bento-item:nth-child(1) h3 { font-size: 26px; }
    .bzh .bz-bento-content h3 { font-size: 21px; }

    /* Cards & carousel */
    .bzh .bz-grid-4 { grid-template-columns: repeat(2, 1fr); gap: 14px 12px; }
    .bzh .bz-carousel { grid-auto-columns: min(68vw, 280px); gap: 12px; }
    .bzh .bz-card-name { font-size: 13.5px; }
    .bzh .bz-card-price .bz-price-now { font-size: 15.5px; }
    .bzh .bz-card-add { opacity: 1; transform: translateY(0); font-size: 11px; height: 42px; }
    .bzh .bz-card-wish { opacity: 1; transform: scale(1); width: 32px; height: 32px; }
    .bzh .bz-card-wish i { font-size: 12px; }

    /* Collections, trust, deal */
    .bzh .bz-collections { grid-template-columns: 1fr; gap: 12px; }
    .bzh .bz-col-tile { aspect-ratio: 16 / 7; }
    .bzh .bz-trust-grid { grid-template-columns: 1fr 1fr; gap: 18px 12px; }
    .bzh .bz-trust-item { flex-direction: column; text-align: center; gap: 8px; }
    .bzh .bz-trust { padding: 24px 0; }
    .bzh .bz-trust-icon { width: 40px; height: 40px; }
    .bzh .bz-deal-text { padding: 32px 24px 40px; }
    .bzh .bz-deal-now { font-size: 36px; }
    .bzh .bz-deal-old { font-size: 16px; }

    /* Reviews */
    .bzh .bz-rev-grid { grid-template-columns: 1fr; }
    .bzh .bz-reviews-head { flex-direction: column; align-items: flex-start; }
    .bzh .bz-reviews-rating { text-align: start; }
    .bzh .bz-reviews-rating .bz-rate-num { font-size: 40px; }

    /* Instagram */
    .bzh .bz-insta-grid { grid-template-columns: repeat(2, 1fr); }

    /* Collections content */
    .bzh .bz-col-content h3 { font-size: 26px; }

    /* Footer */
    .bzh .bz-footer-grid { grid-template-columns: 1fr; gap: 28px; }
    .bzh .bz-footer-bottom { flex-direction: column-reverse; align-items: flex-start; gap: 10px; }

    /* Misc */
    .bzh .bz-brand-logo { font-size: 22px; }
    .bzh .bz-marquee { gap: 48px; }
    .bzh #dwa-root { bottom: 88px !important; }

}

/* ── Small phones (≤480px) ── */
@media (max-width: 480px) {

    .bzh { --bz-container-px: 16px; }

    /* Hero */
    .bzh .bz-hero { padding: 28px 0 44px; }
    .bzh .bz-hero h1 { font-size: clamp(30px, 8vw, 38px); line-height: 1.2; }
    .bzh .bz-hero p { font-size: 14.5px; }
    .bzh .bz-hero-ctas { flex-direction: column; align-items: stretch; }
    .bzh .bz-hero-ctas .bz-btn { width: 100%; justify-content: center; }
    .bzh .bz-hero-tag { display: none; }

    /* Bento */
    .bzh .bz-bento { grid-template-rows: repeat(3, 160px); grid-auto-rows: 160px; }
    .bzh .bz-bento-item:nth-child(1) h3 { font-size: 22px; }
    .bzh .bz-bento-content h3 { font-size: 18px; }

    /* Cards */
    .bzh .bz-grid-4 { gap: 12px 10px; }
    .bzh .bz-card-body { padding: 10px 12px 12px; }
    .bzh .bz-carousel { grid-auto-columns: min(80vw, 260px); }

    /* Section */
    .bzh .bz-section-head h2 { font-size: clamp(22px, 6vw, 28px); }
    .bzh .bz-section { padding: clamp(40px, 8vw, 64px) 0; }

    /* Deal */
    .bzh .bz-deal-now { font-size: 30px; }
    .bzh .bz-cd-unit { min-width: 52px; padding: 10px 6px; }
    .bzh .bz-cd-num { font-size: 20px; }
    .bzh .bz-countdown { gap: 5px; }
    .bzh .bz-deal-meta { flex-wrap: wrap; gap: 8px 14px; }

    /* Reviews */
    .bzh .bz-reviews-rating .bz-rate-num { font-size: 34px; }

    /* Collections */
    .bzh .bz-col-content h3 { font-size: 22px; }

    /* Newsletter */
    .bzh .bz-newsletter h2 { font-size: clamp(28px, 7vw, 36px); }
    .bzh .bz-newsletter p { font-size: 14.5px; }
    .bzh .bz-newsletter-content { padding: 0 16px; }

    /* Footer */
    .bzh .bz-footer-grid { gap: 24px; }
    .bzh .bz-payment-icons span { width: 34px; height: 23px; }

    /* Instagram: 3 cols on small phones */
    .bzh .bz-insta-grid { grid-template-columns: repeat(3, 1fr); }

}

/* ── Extra-small phones (≤360px) ── */
@media (max-width: 360px) {

    .bzh { --bz-container-px: 12px; }
    .bzh .bz-hero h1 { font-size: 28px; }
    .bzh .bz-bento { grid-template-rows: repeat(3, 140px); grid-auto-rows: 140px; }
    .bzh .bz-grid-4 { grid-template-columns: 1fr; gap: 12px; }
    .bzh .bz-carousel { grid-auto-columns: 88vw; }
    .bzh .bz-deal-now { font-size: 26px; }
    .bzh .bz-cd-unit { min-width: 46px; }
    .bzh .bz-cd-num { font-size: 18px; }
    .bzh .bz-insta-grid { grid-template-columns: repeat(2, 1fr); }

}

/* ═══════════════════════════════════════════════════════════════════
   DEVICE PREVIEW OVERRIDES
   The preview banner constrains content width via max-width but the
   viewport stays wide, so @media queries don't fire. These rules use
   the body class set by the preview switcher instead.
   ═══════════════════════════════════════════════════════════════════ */

/* Remove per-section shadow (preview banner adds it to every direct body child,
   causing a visible "gap" between adjacent sections) */
body.tm-device-tablet .bzh > *:not(#tm-preview-banner), body.tm-device-mobile .bzh > *:not(#tm-preview-banner) {
    box-shadow: none !important;
}
/* Single frame shadow on first visible element only */
body.tm-device-tablet .bzh > .bz-announce, body.tm-device-mobile .bzh > .bz-announce {
    box-shadow: 0 -4px 0 0 var(--bz-border) !important;
}
body.tm-device-tablet .bzh > footer, body.tm-device-mobile .bzh > footer {
    box-shadow: 0 4px 40px rgba(0,0,0,.18) !important;
}

/* ── Shared: both tablet & mobile ── */
body.tm-device-tablet .bzh .bz-nav-links, body.tm-device-mobile .bzh .bz-nav-links { display: none; }
body.tm-device-tablet .bzh .bz-burger, body.tm-device-mobile .bzh .bz-burger { display: inline-flex; }
body.tm-device-tablet .bzh .bz-nav-icon[aria-label="Account"], body.tm-device-mobile .bzh .bz-nav-icon[aria-label="Account"] { display: none; }
body.tm-device-tablet .bzh .bz-mobile-nav, body.tm-device-mobile .bzh .bz-mobile-nav { display: block; }
body.tm-device-tablet .bzh .bz-trust-item::after, body.tm-device-mobile .bzh .bz-trust-item::after { display: none; }
body.tm-device-tablet .bzh .bz-card-add, body.tm-device-mobile .bzh .bz-card-add { opacity: 1; transform: translateY(0); }
body.tm-device-tablet .bzh .bz-card-wish, body.tm-device-mobile .bzh .bz-card-wish { opacity: 1; transform: scale(1); }
body.tm-device-tablet .bzh .bz-section-head-flex, body.tm-device-mobile .bzh .bz-section-head-flex { flex-direction: column; align-items: flex-start; gap: 12px; }
body.tm-device-tablet .bzh .bz-footer-bottom, body.tm-device-mobile .bzh .bz-footer-bottom { flex-direction: column-reverse; align-items: flex-start; }
body.tm-device-tablet .bzh .bz-newsletter-content, body.tm-device-mobile .bzh .bz-newsletter-content { grid-template-columns: 1fr; gap: 28px; text-align: center; }
body.tm-device-tablet .bzh .bz-nl-text, body.tm-device-mobile .bzh .bz-nl-text { text-align: center; }
body.tm-device-tablet .bzh .bz-newsletter .bz-eyebrow, body.tm-device-mobile .bzh .bz-newsletter .bz-eyebrow { justify-content: center; }
body.tm-device-tablet .bzh .bz-deal-grid, body.tm-device-mobile .bzh .bz-deal-grid { grid-template-columns: 1fr; min-height: auto; }
body.tm-device-tablet .bzh .bz-editorial-grid, body.tm-device-mobile .bzh .bz-editorial-grid { grid-template-columns: 1fr; gap: 24px; }
body.tm-device-tablet .bzh .bz-editorial-img { aspect-ratio: 16 / 9; max-height: 380px; }
body.tm-device-mobile .bzh .bz-editorial-img { aspect-ratio: 16 / 9; max-height: 260px; }
body.tm-device-tablet .bzh .bz-editorial-text, body.tm-device-mobile .bzh .bz-editorial-text { padding-inline: 0; }
body.tm-device-tablet .bzh .bz-editorial h2 { font-size: 28px !important; }
body.tm-device-mobile .bzh .bz-editorial h2 { font-size: 24px !important; }
body.tm-device-tablet .bzh .bz-bento, body.tm-device-mobile .bzh .bz-bento { grid-template-columns: repeat(2, 1fr); }
body.tm-device-tablet .bzh .bz-bento-item:nth-child(1), body.tm-device-mobile .bzh .bz-bento-item:nth-child(1) { grid-column: span 2; grid-row: span 1; }

/* ── Tablet preview (820px) ── */
body.tm-device-tablet .bzh .bz-hero-grid { grid-template-columns: 1fr; gap: 32px; }
body.tm-device-tablet .bzh .bz-hero-visual { aspect-ratio: 16/9; max-height: 460px; }
body.tm-device-tablet .bzh .bz-bento { grid-template-rows: repeat(3, 220px); grid-auto-rows: 220px; }
body.tm-device-tablet .bzh .bz-bento-item:nth-child(1) h3 { font-size: 28px; }
body.tm-device-tablet .bzh .bz-grid-4 { grid-template-columns: repeat(2, 1fr); gap: 14px 12px; }
body.tm-device-tablet .bzh .bz-collections { grid-template-columns: 1fr; }
body.tm-device-tablet .bzh .bz-carousel { grid-auto-columns: calc(50% - 6px); gap: 12px; }
body.tm-device-tablet .bzh .bz-trust-grid { grid-template-columns: repeat(4, 1fr); gap: 12px; }
body.tm-device-tablet .bzh .bz-rev-grid { grid-template-columns: repeat(2, 1fr); }
body.tm-device-tablet .bzh .bz-insta-grid { grid-template-columns: repeat(3, 1fr); }
body.tm-device-tablet .bzh .bz-footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
body.tm-device-tablet .bzh .bz-deal-img { aspect-ratio: 16/9; }
body.tm-device-tablet .bzh .bz-deal-text { padding: 32px 28px 36px !important; }
body.tm-device-tablet .bzh .bz-deal-now { font-size: 36px !important; }
body.tm-device-tablet .bzh .bz-deal-text h2 { font-size: 28px !important; }
body.tm-device-tablet .bzh .bz-cd-unit { min-width: 52px; }
body.tm-device-tablet .bzh .bz-cd-num { font-size: 20px; }
/* Force section padding based on device frame width, not viewport */
body.tm-device-tablet .bzh .bz-section, body.tm-device-tablet .bzh .bz-editorial, body.tm-device-tablet .bzh .bz-newsletter, body.tm-device-tablet .bzh .bz-trust, body.tm-device-tablet .bzh .bz-brands { padding-top: 52px !important; padding-bottom: 52px !important; }

/* ── Mobile preview (420px) ── */
body.tm-device-mobile .bzh .bz-hero-grid { grid-template-columns: 1fr; gap: 24px; }
body.tm-device-mobile .bzh .bz-hero h1 { font-size: 28px; line-height: 1.2; }
body.tm-device-mobile .bzh .bz-hero p { font-size: 14px; }
body.tm-device-mobile .bzh .bz-hero-ctas { flex-direction: column; align-items: stretch; }
body.tm-device-mobile .bzh .bz-hero-ctas .bz-btn { width: 100%; justify-content: center; }
body.tm-device-mobile .bzh .bz-hero-tag { display: none; }
body.tm-device-mobile .bzh .bz-hero-visual { aspect-ratio: 4/3; max-height: 300px; }
body.tm-device-mobile .bzh .bz-hero-trust { margin-top: 18px; gap: 10px; }
body.tm-device-mobile .bzh .bz-bento { grid-template-rows: repeat(3, 148px); grid-auto-rows: 148px; gap: 10px; }
body.tm-device-mobile .bzh .bz-bento-item:nth-child(1) h3 { font-size: 20px; }
body.tm-device-mobile .bzh .bz-bento-content h3 { font-size: 17px; }
body.tm-device-mobile .bzh .bz-grid-4 { grid-template-columns: repeat(2, 1fr); gap: 10px 8px; }
body.tm-device-mobile .bzh .bz-carousel { grid-auto-columns: 100%; gap: 10px; }
body.tm-device-mobile .bzh .bz-carousel-nav { display: none; }
body.tm-device-mobile .bzh .bz-card-body { padding: 10px 10px 12px; }
body.tm-device-mobile .bzh .bz-card-name { font-size: 12.5px; }
body.tm-device-mobile .bzh .bz-card-price .bz-price-now { font-size: 14px; }
body.tm-device-mobile .bzh .bz-card-add { font-size: 10px; height: 38px; }
body.tm-device-mobile .bzh .bz-card-wish { width: 30px; height: 30px; }
body.tm-device-mobile .bzh .bz-collections { grid-template-columns: 1fr; gap: 10px; }
body.tm-device-mobile .bzh .bz-col-tile { aspect-ratio: 16 / 7; }
body.tm-device-tablet .bzh .bz-col-tile { aspect-ratio: 16 / 8; }
body.tm-device-mobile .bzh .bz-trust-grid { grid-template-columns: 1fr 1fr; gap: 18px 12px; }
body.tm-device-mobile .bzh .bz-trust-item { flex-direction: column; text-align: center; gap: 8px; }
body.tm-device-mobile .bzh .bz-deal-img { aspect-ratio: 16/9; }
body.tm-device-mobile .bzh .bz-deal-text { padding: 24px 20px 28px !important; }
body.tm-device-mobile .bzh .bz-deal-now { font-size: 28px !important; }
body.tm-device-mobile .bzh .bz-deal-text h2 { font-size: 22px !important; }
body.tm-device-mobile .bzh .bz-cd-unit { min-width: 44px; max-width: 56px; }
body.tm-device-mobile .bzh .bz-cd-num { font-size: 18px; }
body.tm-device-mobile .bzh .bz-deal-old { font-size: 14px; }
body.tm-device-mobile .bzh .bz-deal-meta { gap: 12px; font-size: 11.5px; }
body.tm-device-mobile .bzh .bz-rev-grid { grid-template-columns: 1fr; }
body.tm-device-mobile .bzh .bz-insta-grid { grid-template-columns: repeat(3, 1fr); }
body.tm-device-mobile .bzh .bz-footer-grid { grid-template-columns: 1fr; gap: 22px; }
body.tm-device-mobile .bzh .bz-newsletter h2 { font-size: 22px; }
body.tm-device-mobile .bzh .bz-newsletter p { font-size: 13px; }
body.tm-device-mobile .bzh .bz-newsletter-content { padding-inline: 4px; }
body.tm-device-mobile .bzh .bz-newsletter-form { flex-direction: column; gap: 10px; border-radius: 16px; padding: 10px; }
body.tm-device-mobile .bzh .bz-newsletter-form input { padding: 10px 14px; text-align: center; }
body.tm-device-mobile .bzh .bz-newsletter-form button { width: 100%; border-radius: 12px; padding: 12px 20px; }
body.tm-device-mobile .bzh .bz-section-head h2 { font-size: 22px; }
body.tm-device-mobile .bzh .bz-section, body.tm-device-mobile .bzh .bz-editorial, body.tm-device-mobile .bzh .bz-newsletter, body.tm-device-mobile .bzh .bz-trust, body.tm-device-mobile .bzh .bz-brands { padding-top: 36px !important; padding-bottom: 36px !important; }
body.tm-device-mobile .bzh #dwa-root { bottom: 88px !important; inset-inline-end: 16px !important; }
body.tm-device-tablet .bzh #dwa-root { bottom: 88px !important; }

/* ═══════════════════════════════════════════════════════════════════
   BAZAARIA HOME (.bzh) — token bridge to merchant branding.
   The ported demo design uses --bz-* tokens. Map the accent + primary
   ink + body font onto the vendor's chosen --primary/--secondary/
   --bz-font so per-store customization flows through the home design.
   Editorial serif headings keep the demo's --bz-font-head on purpose.
   ═══════════════════════════════════════════════════════════════════ */
.bzh {
    --bz-coral:      var(--secondary, #ff5a36);
    --bz-coral-soft: var(--secondary, #ff7a5c);
    --bz-ink:        var(--primary,  #0a0a0b);
    --bz-ink-soft:   var(--primary,  #1a1a1d);
    --bz-font-body:  'Zain', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* ═══════════════════════════════════════════════════════════════════
   BAZAARIA — CHROME PARITY OVERRIDES  (header / footer → demo look)
   Appended last so these rules win over the base chrome rules above on
   equal specificity. Brand-adaptive: only --primary / --secondary /
   --surface / --soft / --line / --ink* tokens (the .bzh-scoped --bz-*
   set is undefined out here). Adds the demo's glassy header, ghost-
   circular icons, centered nav menu and footer payment badges WITHOUT
   touching any data/markup contract. color-mix() is already used by the
   base chrome (.bz-logo-mark), so it is safe to rely on here too.
   ═══════════════════════════════════════════════════════════════════ */

/* Announcement bar — sibling above the sticky chrome (scrolls away). */
.bz-announce {
    background: var(--primary);
    /* on-primary colour that follows the mode (--primary is near-white in dark) */
    color: var(--bg);
    text-align: center;
    font-size: 12.5px;
    letter-spacing: .2px;
    line-height: 1.45;
    padding: 9px 16px;
}
.bz-announce i { color: var(--secondary); margin-inline-end: 7px; }

/* Match the demo's container width (1280px). The base chrome rule is
   1180px which makes the header/footer feel noticeably narrower than the
   body sections (which already live under .bzh at 1280px). Unifying both
   removes the "tight chrome over wide body" mismatch. */
.bz-container { max-width: 1280px; }

/* Pull the nav-row gap up to 24px to match the demo's breathing room
   between logo · nav-links · tools (base is 16px which feels cramped). */
.bz-nav-row { gap: 24px; }

/* Nav-link weight tuned to the demo (500 vs the parity rule's 600 — a
   touch lighter, more editorial). */
.bz-nav-links a { font-weight: 500; }

/* Glassy translucent header — mirrors the demo's blurred .bz-header. */
.bz-chrome {
    background: color-mix(in srgb, var(--surface) 82%, transparent);
    -webkit-backdrop-filter: saturate(180%) blur(18px);
    backdrop-filter: saturate(180%) blur(18px);
}
.bz-chrome .bz-nav { background: transparent; }

/* Logo image — constrain to the nav-row height so an oversized vendor upload
   never overflows into the hero (the base rule above allows up to 150px,
   which is twice the nav-row height and was visibly breaking the layout). */
.bz-logo-img { max-height: 44px; max-width: 200px; }
@media (max-width: 560px) { .bz-logo-img { max-height: 38px; max-width: 160px; } }

/* Primary nav menu — centered, brand-accent underline on hover. */
.bz-nav-links {
    display: flex;
    flex: 1;
    justify-content: center;
    align-items: center;
    gap: 30px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.bz-nav-links a {
    position: relative;
    padding: 6px 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
    white-space: nowrap;
    transition: color .2s ease;
}
.bz-nav-links a::after {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    bottom: -2px;
    width: 0;
    height: 2px;
    background: var(--secondary);
    border-radius: 2px;
    transition: width .25s ease;
}
.bz-nav-links a:hover { color: var(--secondary); }
.bz-nav-links a:hover::after { width: 100%; }

/* Tools cluster (search + account + wishlist + cart) pinned to the end. */
.bz-nav-tools {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-inline-start: auto;
}

/* Ghost-circular nav icons (demo look) — override the boxed base style. */
.bz-nav-icon {
    width: 40px;
    height: 40px;
    background: transparent;
    border: 0;
    border-radius: var(--r-pill);
}
.bz-nav-icon:hover { background: var(--soft); }

/* Honour the [hidden] attribute on every nav-icon badge variant — the
   base rules' `display: inline-flex` overrides the browser default and
   makes empty cart/wishlist counters stick on screen with a stale "0".
   Both class names appear in the codebase (.bz-nav-icon-badge in the old
   chrome, .bz-nav-badge in the demo-aligned themes/bazaaria chrome). */
.bz-nav-icon-badge[hidden],
.bz-nav-badge[hidden] { display: none !important; }

/* Tighter logo-image cap inside the new theme — vendor-uploaded logos can
   ship at 600-800px wide with embedded artwork; the demo's text logo sits
   at ~28px font-size so this matches it visually. */
.bzh .bz-logo-img { max-height: 40px; max-width: 180px; object-fit: contain; }
@media (max-width: 560px) { .bzh .bz-logo-img { max-height: 34px; max-width: 140px; } }

/* Solid background under the new theme — paint BOTH <html> and <body>
   the same colour so the user-agent's white default never shows through
   anywhere (top overscroll, body margin gap, sticky-header backdrop, etc).
   The demo's .bz-header uses rgba(10,10,11,.85) in dark mode and its
   translucency lets whatever sits behind it bleed through, so any pixel
   of stray white instantly contaminates the dark palette. */
html { background: #ffffff; }
html[data-bz-mode="dark"] { background: #0a0a0b; }
body.bz-body { margin: 0; padding: 0; background: #ffffff; min-height: 100vh; }
html[data-bz-mode="dark"] body.bz-body { background: #0a0a0b; }
.bzh { background: inherit; }

/* CRITICAL: neutralise the legacy chrome's `.bz-nav` rule for the new
   theme. The chrome section at the top of this file declares
       .bz-nav { background: var(--surface); border-bottom: 1px solid var(--line); position: sticky; ... }
   for the OLD `<header class="bz-nav">` element. The demo (and therefore
   the new theme) reuses the SAME class name but as the inner flex
   container, with no background of its own — so the chrome rule paints
   our container in `--surface` (#11151f in dark mode), creating a
   visible darker-blue strip inside the header while the body around it
   stays pure black. Resetting these properties under `.bzh .bz-nav`
   restores the demo's edge-to-edge uniform header colour. */
.bzh .bz-nav {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    position: static !important;
    z-index: auto !important;
}

/* Language switch — show the CURRENT locale as bold AR / EN text inside the
   nav-icon (paired with data-bz-lang in the markup; same JS handler the
   topbar dropdown uses, so cookie + reload happens automatically). */
.bz-nav-icon--lang .bz-nav-lang-code {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .5px;
    color: var(--ink);
    font-family: 'Zain', system-ui, -apple-system, 'Segoe UI', sans-serif;
    line-height: 1;
}

/* Footer accepted-payment badges. */
.bz-payment-icons { display: inline-flex; align-items: center; gap: 7px; }
.bz-payment-icons span {
    width: 38px;
    height: 26px;
    border-radius: 6px;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--ink-2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform .15s ease, border-color .15s ease;
}
.bz-payment-icons span:hover { transform: translateY(-2px); border-color: var(--ink-3); }
.bz-payment-icons i { font-size: 17px; }

/* Collapse the centered menu on tablet/mobile (the bottom-nav covers those). */
@media (max-width: 900px) {
    .bz-nav-links { display: none; }
}

/* ════════════════════════════════════════════════════════════════════════
   SHARED PAGES — Bazaaria flavour overrides
   ────────────────────────────────────────────────────────────────────────
   The platform's shared pages (product detail, search, profile, orders,
   wishlist, cart) extend `$themeLayout` so they already render with
   Bazaaria's chrome (header / footer / announce / bottom-nav). What they
   DON'T inherit is the editorial typography, generous spacing, and coral
   accents that define the Bazaaria home page.

   Rather than fork each shared blade, we override the .ms-pd__* / .ms-*__
   utility classes when they appear inside .bzh. This keeps the shared
   blades as the single source of truth for behaviour, while giving every
   Bazaaria storefront a cohesive visual identity end-to-end.
   ════════════════════════════════════════════════════════════════════════ */

/* ── PRODUCT DETAIL — .ms-pd__* ─────────────────────────────────────── */
.bzh .ms-pd__container {
    max-width: var(--bz-container, 1280px);
    padding-inline: var(--bz-container-px, clamp(16px, 4vw, 48px));
    margin-inline: auto;
}
.bzh .ms-pd__crumb {
    font-family: 'Zain', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: var(--bz-text-mute);
    letter-spacing: .5px;
    padding-block: 18px;
}
.bzh .ms-pd__crumb a { color: var(--bz-text-mute); transition: color .15s; }
.bzh .ms-pd__crumb a:hover { color: var(--bz-coral); }
.bzh .ms-pd__grid {
    gap: clamp(24px, 4vw, 56px);
}
.bzh .ms-pd__title {
    font-family: 'Zain', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: clamp(28px, 4vw, 44px);
    font-weight: 900;
    line-height: 1.08;
    letter-spacing: -.02em;
    color: var(--bz-text);
}
.bzh .ms-pd__price {
    font-family: 'Zain', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: clamp(24px, 3vw, 32px);
    font-weight: 900;
    color: var(--bz-text);
    letter-spacing: -.015em;
}
.bzh .ms-pd__discount {
    background: var(--bz-coral);
    color: #fff;
    font-weight: 800;
    border-radius: var(--bz-r-pill, 999px);
    padding: 4px 10px;
    font-size: 12px;
    letter-spacing: .3px;
}
.bzh .ms-pd__stock { font-size: 13px; font-weight: 600; }
.bzh .ms-pd__rating i { color: #F59E0B; }
.bzh .ms-pd__rating b { color: var(--bz-text); font-weight: 800; }
.bzh .ms-pd__opts {
    gap: 10px;
}
.bzh .ms-pd__opt {
    border: 1.5px solid var(--bz-border);
    border-radius: var(--bz-r-pill, 999px);
    padding: 9px 18px;
    font-weight: 700;
    font-size: 13px;
    color: var(--bz-text);
    transition: border-color .15s, background .15s, color .15s, transform .15s;
}
.bzh .ms-pd__opt:hover {
    border-color: var(--bz-ink);
    transform: translateY(-1px);
}
.bzh .ms-pd__opt.is-active,
.bzh .ms-pd__opt[aria-pressed="true"] {
    background: var(--bz-ink);
    color: #fff;
    border-color: var(--bz-ink);
}
.bzh .ms-pd__qty button {
    width: 38px; height: 38px;
    border: 1.5px solid var(--bz-border);
    border-radius: 50%;
    background: var(--bz-surface);
    color: var(--bz-text);
    font-weight: 800;
    transition: border-color .15s, transform .15s;
}
.bzh .ms-pd__qty button:hover { border-color: var(--bz-ink); transform: scale(1.05); }

/* CTA buttons — match Bazaaria's primary/secondary system */
.bzh .ms-pd__actions .ms-btn,
.bzh .ms-pd__actions button[type="submit"],
.bzh .ms-pd__actions a.btn,
.bzh .ms-pd__actions .ms-btn--primary {
    height: 52px;
    padding: 0 28px;
    border-radius: var(--bz-r-pill, 999px);
    font-weight: 800;
    font-size: 14px;
    letter-spacing: .3px;
    background: var(--bz-ink);
    color: #fff;
    border: 0;
    box-shadow: 0 8px 22px -10px rgba(10,10,11,.45);
    transition: transform .15s, filter .15s, box-shadow .2s;
}
.bzh .ms-pd__actions .ms-btn:hover,
.bzh .ms-pd__actions button[type="submit"]:hover,
.bzh .ms-pd__actions a.btn:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
}
.bzh .ms-pd__actions .ms-btn--secondary {
    background: transparent;
    color: var(--bz-text);
    border: 1.5px solid var(--bz-border-strong, var(--bz-border));
    box-shadow: none;
}
.bzh .ms-pd__actions .ms-btn--secondary:hover {
    border-color: var(--bz-ink);
    background: var(--bz-surface);
}

/* Gallery thumbnails */
.bzh .ms-pd__thumbs { gap: 10px; }
.bzh .ms-pd__thumb {
    border-radius: var(--bz-r-md, 12px);
    border: 2px solid transparent;
    overflow: hidden;
    transition: border-color .15s, transform .15s;
}
.bzh .ms-pd__thumb.is-active,
.bzh .ms-pd__thumb[aria-current="true"] {
    border-color: var(--bz-coral);
}
.bzh .ms-pd__thumb:hover { transform: translateY(-2px); }

/* Description card */
.bzh .ms-pd__description {
    background: var(--bz-surface);
    border: 1px solid var(--bz-border);
    border-radius: var(--bz-r-lg, 16px);
    padding: clamp(24px, 3vw, 36px);
    margin-block: clamp(40px, 5vw, 64px);
}
.bzh .ms-pd__description h2 {
    font-family: 'Zain', system-ui, sans-serif;
    font-size: clamp(20px, 2.5vw, 26px);
    font-weight: 900;
    color: var(--bz-text);
    margin-bottom: 16px;
    letter-spacing: -.01em;
}
.bzh .ms-pd__description h2::after {
    content: '';
    display: block;
    width: 36px; height: 3px;
    background: var(--bz-coral);
    margin-top: 10px;
    border-radius: 2px;
}
.bzh .ms-pd__description-body { color: var(--bz-text-soft); line-height: 1.75; font-size: 15px; }

/* Related products section */
.bzh .ms-pd__related {
    padding-block: clamp(48px, 6vw, 80px);
}
.bzh .ms-pd__related h2 {
    font-family: 'Zain', system-ui, sans-serif;
    font-size: clamp(24px, 3vw, 36px);
    font-weight: 900;
    color: var(--bz-text);
    letter-spacing: -.02em;
    margin-bottom: clamp(20px, 3vw, 32px);
}

/* Extras / addon checkboxes — match the Bazaaria card aesthetic */
.bzh .ms-pd__extras {
    background: var(--bz-surface);
    border: 1px solid var(--bz-border);
    border-radius: var(--bz-r-lg, 16px);
    padding: 18px;
}
.bzh .ms-pd__extra {
    padding: 10px 0;
    border-bottom: 1px dashed var(--bz-border);
}
.bzh .ms-pd__extra:last-child { border-bottom: 0; }

/* ── SHARED FORMS / INPUTS — used across profile, checkout, etc. ───── */
.bzh input[type="text"], .bzh input[type="email"], .bzh input[type="password"],
.bzh input[type="tel"],  .bzh input[type="number"], .bzh input[type="search"],
.bzh select, .bzh textarea {
    font-family: 'Zain', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* ════════════════════════════════════════════════════════════════════
   BAZAARIA · RESPONSIVE HARDENING LAYER (2026-07-12)

   Ports the 7-breakpoint discipline that landed on Classic + Voltex +
   Velora. Bazaaria already has 13 breakpoints (360/480/500/540/560/
   640/720/768/860/900/991/1024/1200) covering the middle range in
   detail — so this layer only adds the extremes (320 + 1440 + 1920)
   plus the global safety block. Warm coral --bz-coral (#ff5a36) is
   preserved as the accent. Additive only.
   ════════════════════════════════════════════════════════════════════ */

html, body { overflow-x: clip; }
.bz-container img, .bz-section img, .bzh img { max-width: 100%; height: auto; }
.bz-hero :focus-visible,
.bz-card :focus-visible,
.bz-cats :focus-visible,
.bz-btm :focus-visible,
.bz-nav :focus-visible {
    outline: 2px solid var(--bz-coral, #ff5a36);
    outline-offset: 2px;
    border-radius: 4px;
}
.bz-card-add:active,
.bz-btn:active { transform: scale(.98); }

/* ── 320-374 · narrow phones (iPhone SE, small Androids) ────────
   Bazaaria's smallest existing breakpoint is 360; extend to catch
   iPhone SE (320) properly. */
@media (max-width: 374px) {
    .bz-container { padding-inline: 12px; }
    .bz-hero { padding-block: 24px 20px; }
    .bz-hero-title { font-size: clamp(20px, 5.4vw, 26px); }
    .bz-hero-sub { font-size: 12.5px; }
    .bz-section { padding-block: 32px; }
    .bz-section-title { font-size: clamp(18px, 5.2vw, 22px); }
    .bz-cats-grid { gap: 8px; }
    .bz-card { padding: 10px; }
    .bz-card-name { font-size: 12.5px; }
    .bz-card-price { font-size: 15px; }
    .bz-card-add { padding: 8px 10px; font-size: 11.5px; min-height: 40px; }
}

/* ── ≥1440 · large desktops ───────────────────────────────────
   Bazaaria container caps at 1180 (`.bz-container`). Bump for
   wide screens so tiles have room to breathe. */
@media (min-width: 1440px) {
    .bz-container { max-width: 1320px; }
    .bz-cats-grid { gap: 20px; }
}

/* ── ≥1920 · ultrawide ────────────────────────────────────────── */
@media (min-width: 1920px) {
    .bz-container { max-width: 1440px; padding-inline: 32px; }
}
.bzh select { font-weight: 500; }

/* ════════════════════════════════════════════════════════════════════
   BAZAARIA · CATEGORY + CATEGORIES PAGE STYLES (2026-07-12 · D9 fix)

   Root cause: template-bazaaria/pages/category.blade.php +
   categories.blade.php emit these classes but style.css never had
   matching rules. Result: both pages rendered with raw browser
   defaults — a broken guest-facing surface for every Bazaaria
   vendor.

   This block adds the missing rules using Bazaaria's own token
   system: coral accent, cream backgrounds, soft shadows, generous
   rounding. No !important, no shortcut. Follows the same visual
   language as .bz-card, .bz-hero, .bz-container already in the theme.
   ════════════════════════════════════════════════════════════════════ */
   2026-09-30: text uses the MODE-AWARE --ink / --ink-2 tokens. --bz-ink is the
   dark brand FILL (buttons), so in dark mode the category title and copy were
   dark-on-dark (contrast 1.01).

/* ── SHARED · category page hero + breadcrumb ─────────────────── */
.bz-cat-page-hero {
    background: var(--bz-cream, var(--bz-surface, #fff));
    border: 1px solid var(--bz-border, rgba(15,23,42,.08));
    border-radius: var(--bz-r-lg, 20px);
    padding: 28px 28px;
    margin-block: 12px 24px;
    box-shadow: var(--bz-sh-sm, 0 1px 2px rgba(15,23,42,.04));
}
.bz-cat-page-hero h1 {
    font-size: clamp(22px, 3.2vw, 32px);
    font-weight: 800;
    color: var(--ink, #0f172a);
    margin: 0 0 8px;
    letter-spacing: -.01em;
}
.bz-cat-page-hero p {
    font-size: 14.5px;
    color: var(--ink-2, #475569);
    margin: 0 0 14px;
    line-height: 1.55;
    max-width: 62ch;
}
.bz-cat-page-hero-count {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--bz-coral, #ff5a36) 12%, transparent);
    color: var(--bz-coral, #ff5a36);
    font-size: 12.5px;
    font-weight: 700;
}
.bz-cat-page-hero-count i { font-size: 12px; }

/* ── Category page 2-column layout: sidebar + main ────────────── */
.bz-cat-page-layout {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 28px;
    align-items: start;
    margin-bottom: 40px;
}
.bz-cat-sidebar {
    background: var(--bz-card, #fff);
    border: 1px solid var(--bz-border, rgba(15,23,42,.08));
    border-radius: var(--bz-r-lg, 20px);
    padding: 18px;
    position: sticky;
    top: calc(var(--bz-header-h, 72px) + 20px);
    max-height: calc(100vh - var(--bz-header-h, 72px) - 40px);
    overflow-y: auto;
}
.bz-cat-sidebar h3 {
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--ink-2, #64748b);
    margin: 0 0 12px;
}
.bz-cat-side-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: var(--bz-r-sm, 10px);
    color: var(--ink, #0f172a);
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    transition: background var(--bz-ease, .2s ease), color var(--bz-ease, .2s ease);
}
.bz-cat-side-link i {
    font-size: 13px;
    color: var(--ink-2, #64748b);
    width: 16px;
    text-align: center;
}
.bz-cat-side-link:hover {
    background: var(--bz-cream, var(--bz-surface-2, #f8fafc));
    color: var(--bz-coral, #ff5a36);
}
.bz-cat-side-link:hover i { color: var(--bz-coral, #ff5a36); }
.bz-cat-side-link.is-active {
    background: color-mix(in srgb, var(--bz-coral, #ff5a36) 10%, transparent);
    color: var(--bz-coral, #ff5a36);
    font-weight: 800;
}
.bz-cat-side-link.is-active i { color: var(--bz-coral, #ff5a36); }

/* ── Category pagination ──────────────────────────────────────── */
.bz-cat-pagination {
    display: flex;
    justify-content: center;
    margin-block: 32px 8px;
}
.bz-cat-pagination nav {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.bz-cat-pagination ul.pagination {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    list-style: none;
    padding: 0;
    margin: 0;
}
.bz-cat-pagination .page-item .page-link,
.bz-cat-pagination a,
.bz-cat-pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 12px;
    border-radius: 10px;
    border: 1px solid var(--bz-border, rgba(15,23,42,.10));
    background: var(--bz-card, #fff);
    color: var(--ink, #0f172a);
    text-decoration: none;
    font-size: 13.5px;
    font-weight: 700;
    transition: background var(--bz-ease, .2s), color var(--bz-ease, .2s), border-color var(--bz-ease, .2s);
}
.bz-cat-pagination .page-item.active .page-link,
.bz-cat-pagination .active a,
.bz-cat-pagination a:hover {
    background: var(--bz-coral, #ff5a36);
    color: #fff;
    border-color: var(--bz-coral, #ff5a36);
}
.bz-cat-pagination .page-item.disabled .page-link {
    opacity: .4;
    cursor: not-allowed;
}

/* ── Empty state — category has no products ───────────────────── */
.bz-cat-empty {
    background: var(--bz-cream, var(--bz-surface, #fff));
    border: 1px dashed var(--bz-border-strong, rgba(15,23,42,.16));
    border-radius: var(--bz-r-lg, 20px);
    padding: 56px 24px;
    text-align: center;
}
.bz-cat-empty-icon {
    width: 76px;
    height: 76px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--bz-coral, #ff5a36) 12%, transparent);
    color: var(--bz-coral, #ff5a36);
    display: inline-grid;
    place-items: center;
    font-size: 30px;
    margin-bottom: 18px;
}
.bz-cat-empty h3 {
    font-size: 18px;
    font-weight: 800;
    color: var(--ink, #0f172a);
    margin: 0 0 8px;
}
.bz-cat-empty p {
    font-size: 14px;
    color: var(--ink-2, #64748b);
    margin: 0 0 20px;
    max-width: 42ch;
    margin-inline: auto;
    line-height: 1.6;
}
.bz-cat-empty-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 22px;
    border-radius: 999px;
    background: var(--bz-coral, #ff5a36);
    color: #fff;
    text-decoration: none;
    font-size: 14px;
    font-weight: 700;
    transition: filter var(--bz-ease, .2s ease), transform var(--bz-ease, .2s ease);
}
.bz-cat-empty-cta:hover { filter: brightness(1.06); transform: translateY(-1px); }
.bz-cat-empty-cta:active { transform: translateY(0) scale(.98); }

/* ═══════════════════════════════════════════════════════════════
   CATEGORIES INDEX PAGE (all-categories listing)
   ═══════════════════════════════════════════════════════════════ */

.bz-cats-hero {
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--bz-coral, #ff5a36) 8%, var(--bz-cream, #fef7f4)),
        var(--bz-cream, var(--bz-surface, #fff)));
    border: 1px solid var(--bz-border, rgba(15,23,42,.08));
    border-radius: var(--bz-r-lg, 20px);
    padding: 40px 32px;
    margin-block: 12px 28px;
    text-align: start;
}
.bz-cats-hero h1 {
    font-size: clamp(24px, 3.6vw, 36px);
    font-weight: 800;
    color: var(--ink, #0f172a);
    margin: 0 0 10px;
    letter-spacing: -.015em;
}
.bz-cats-hero p {
    font-size: 15px;
    color: var(--ink-2, #475569);
    margin: 0 0 16px;
    line-height: 1.6;
    max-width: 62ch;
}
.bz-cats-hero-count {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 999px;
    background: var(--bz-card, #fff);
    border: 1px solid var(--bz-border, rgba(15,23,42,.10));
    color: var(--ink, #0f172a);
    font-size: 12.5px;
    font-weight: 700;
}
.bz-cats-hero-count i { color: var(--bz-coral, #ff5a36); }

/* ── Categories grid: 3 cols by default, fluid ─────────────────── */
.bz-cats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
    margin-bottom: 48px;
}

/* ── Category card (large) — head + 4-item preview ─────────────── */
.bz-cat-card {
    display: block;
    background: var(--bz-card, #fff);
    border: 1px solid var(--bz-border, rgba(15,23,42,.08));
    border-radius: var(--bz-r-lg, 20px);
    padding: 18px;
    text-decoration: none;
    color: inherit;
    transition: transform var(--bz-ease, .22s), box-shadow var(--bz-ease, .22s), border-color var(--bz-ease, .22s);
    box-shadow: var(--bz-sh-sm, 0 1px 2px rgba(15,23,42,.04));
}
.bz-cat-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--bz-sh-lg, 0 12px 32px rgba(15,23,42,.10));
    border-color: color-mix(in srgb, var(--bz-coral, #ff5a36) 30%, var(--bz-border, rgba(15,23,42,.08)));
}
.bz-cat-card-head {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    margin-bottom: 14px;
}
.bz-cat-card-ico {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--bz-coral, #ff5a36) 12%, transparent);
    color: var(--bz-coral, #ff5a36);
    font-size: 18px;
    overflow: hidden;
}
.bz-cat-card-ico img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.bz-cat-card-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.bz-cat-card-info strong {
    font-size: 15px;
    font-weight: 800;
    color: var(--ink, #0f172a);
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
}
.bz-cat-card-info small {
    font-size: 12px;
    color: var(--ink-2, #64748b);
    font-weight: 500;
}
.bz-cat-card-arrow {
    color: var(--ink-2, #94a3b8);
    font-size: 14px;
    transition: transform var(--bz-ease, .2s), color var(--bz-ease, .2s);
}
.bz-cat-card:hover .bz-cat-card-arrow {
    color: var(--bz-coral, #ff5a36);
    transform: translateX(3px);
}
html[dir="rtl"] .bz-cat-card:hover .bz-cat-card-arrow {
    transform: translateX(-3px);
}

/* Preview strip — 4 thumbs in a row */
.bz-cat-card-preview {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
}
.bz-cat-card-thumb {
    aspect-ratio: 1 / 1;
    border-radius: 10px;
    background: var(--bz-cream, var(--bz-surface-2, #f8fafc));
    display: grid;
    place-items: center;
    color: var(--ink-2, #cbd5e1);
    font-size: 15px;
    overflow: hidden;
}
.bz-cat-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.bz-cat-card-empty {
    grid-column: 1 / -1;
    padding: 20px 12px;
    text-align: center;
    background: var(--bz-cream, var(--bz-surface-2, #f8fafc));
    border-radius: 10px;
    color: var(--ink-2, #94a3b8);
    font-size: 12.5px;
    font-weight: 600;
}

/* ── Empty state — no categories at all ───────────────────────── */
.bz-cats-empty {
    background: var(--bz-cream, var(--bz-surface, #fff));
    border: 1px dashed var(--bz-border-strong, rgba(15,23,42,.16));
    border-radius: var(--bz-r-lg, 20px);
    padding: 60px 24px;
    text-align: center;
    color: var(--ink-2, #64748b);
}
.bz-cats-empty > i {
    font-size: 44px;
    color: var(--bz-coral, #ff5a36);
    opacity: .55;
    margin-bottom: 14px;
    display: block;
}
.bz-cats-empty h3 {
    font-size: 18px;
    font-weight: 800;
    color: var(--ink, #0f172a);
    margin: 0 0 8px;
}
.bz-cats-empty p {
    font-size: 14px;
    max-width: 42ch;
    margin: 0 auto;
    line-height: 1.6;
}

/* ═══════════════════════════════════════════════════════════════
   Responsive scaling for the newly-added category pages.
   Follows the same 320 / 640 / 900 / 1440 / 1920 discipline.
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
    .bz-cat-page-layout { grid-template-columns: 1fr; gap: 20px; }
    .bz-cat-sidebar {
        position: static;
        max-height: none;
        display: flex;
        overflow-x: auto;
        gap: 6px;
        padding: 12px;
        -webkit-overflow-scrolling: touch;
    }
    .bz-cat-sidebar h3 { display: none; }
    .bz-cat-side-link { white-space: nowrap; flex: 0 0 auto; padding: 8px 14px; }
    .bz-cats-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
    .bz-cats-hero { padding: 30px 24px; }
    .bz-cat-page-hero { padding: 22px 22px; }
}

@media (max-width: 640px) {
    .bz-cats-grid { grid-template-columns: 1fr; gap: 12px; }
    .bz-cat-card { padding: 14px; }
    .bz-cats-hero { padding: 24px 20px; margin-block: 8px 20px; }
    .bz-cat-page-hero { padding: 20px 18px; margin-block: 8px 18px; }
    .bz-cat-empty, .bz-cats-empty { padding: 44px 20px; }
}

@media (max-width: 374px) {
    .bz-cat-page-hero { padding: 16px 14px; }
    .bz-cats-hero { padding: 20px 16px; }
    .bz-cats-hero h1 { font-size: clamp(20px, 5.4vw, 26px); }
    .bz-cats-hero p { font-size: 13px; }
    .bz-cats-hero-count,
    .bz-cat-page-hero-count { padding: 5px 11px; font-size: 11.5px; }
    .bz-cat-card { padding: 12px; }
    .bz-cat-card-head { grid-template-columns: 38px minmax(0, 1fr) auto; gap: 10px; margin-bottom: 12px; }
    .bz-cat-card-ico { width: 38px; height: 38px; font-size: 15px; }
    .bz-cat-card-info strong { font-size: 14px; }
    .bz-cat-card-info small { font-size: 11px; }
    .bz-cat-side-link { padding: 8px 12px; font-size: 13px; }
    .bz-cat-empty, .bz-cats-empty { padding: 36px 16px; }
    .bz-cat-empty-icon { width: 60px; height: 60px; font-size: 24px; }
    .bz-cat-empty h3, .bz-cats-empty h3 { font-size: 16px; }
    .bz-cat-empty p, .bz-cats-empty p { font-size: 13px; }
    .bz-cat-empty-cta { padding: 10px 18px; font-size: 13.5px; }
    .bz-cat-pagination .page-link, .bz-cat-pagination a, .bz-cat-pagination span {
        min-width: 34px; height: 34px; padding: 0 10px; font-size: 12.5px;
    }
}

@media (min-width: 1440px) {
    .bz-cat-page-layout { grid-template-columns: 280px minmax(0, 1fr); gap: 32px; }
    .bz-cats-grid { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 20px; }
    .bz-cat-card { padding: 22px; }
}

/* ── Dark mode overrides for the new category pages ───────────
   Follows Bazaaria's html[data-bz-mode="dark"] convention. */
html[data-bz-mode="dark"] .bz-cat-page-hero,
html[data-bz-mode="dark"] .bz-cats-hero,
html[data-bz-mode="dark"] .bz-cat-sidebar,
html[data-bz-mode="dark"] .bz-cat-card,
html[data-bz-mode="dark"] .bz-cat-empty,
html[data-bz-mode="dark"] .bz-cats-empty,
html[data-bz-mode="dark"] .bz-cat-pagination .page-link,
html[data-bz-mode="dark"] .bz-cat-pagination a,
html[data-bz-mode="dark"] .bz-cat-pagination span {
    background: var(--bz-card, #16161a);
    border-color: rgba(255,255,255,.10);
    color: var(--bz-text, #f5f5f5);
}
html[data-bz-mode="dark"] .bz-cats-hero {
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--bz-coral, #ff5a36) 12%, #1a1a1e),
        #16161a);
}
html[data-bz-mode="dark"] .bz-cat-side-link { color: var(--bz-text, #e5e7eb); }
html[data-bz-mode="dark"] .bz-cat-side-link:hover { background: rgba(255,255,255,.05); }
html[data-bz-mode="dark"] .bz-cat-card-thumb,
html[data-bz-mode="dark"] .bz-cat-card-empty { background: #1a1a1e; }
html[data-bz-mode="dark"] .bz-cat-card-info small,
html[data-bz-mode="dark"] .bz-cat-page-hero p,
html[data-bz-mode="dark"] .bz-cats-hero p,
html[data-bz-mode="dark"] .bz-cat-empty p,
html[data-bz-mode="dark"] .bz-cats-empty p { color: rgba(255,255,255,.65); }

/* ════════════════════════════════════════════════════════════════════
   BAZAARIA · narrow-phone header fix (2026-09-23)
   At ≤374px the inner-page nav row did not fit: logo 123px (flex 0 0 auto,
   image-only so it never shrank) + tools 172px (4 × 40px icons) + 2 × 24px
   gap = 343px inside 296px of usable width, so the tools cluster hung 35px
   past the start edge on /cart, /checkout, /category, /detail and /search.
   Measured in Chromium at 320px. Tightened the gaps and the icon/logo sizing
   instead of hiding any control — every icon stays reachable.
   Verified: body overflow 35 → 0 at 320/360/375/390.
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 420px) {
    .bz-nav-row  { gap: 8px; }
    .bz-nav-tools { gap: 2px; }
    .bz-nav-icon,
    .bzh .bz-nav-icon { width: 36px; height: 36px; }
    .bz-logo { min-width: 0; }
    .bz-logo-img { max-width: 110px; }

    /* The HOME page uses a different header container — `.bzh .bz-nav`
       (flex, gap 24px) rather than `.bz-nav-row` — and it carries an extra
       burger button, so it stayed 52px too wide at 320 and 12px at 360 once
       the `overflow-x: clip` safety net was neutralised. Same treatment:
       shrink the gap, let the wordmark shrink instead of forcing the tools
       out of view. Nothing is hidden. */
    .bzh .bz-nav { gap: 8px; }
    .bzh .bz-nav-tools { gap: 2px; }
    .bzh .bz-logo {
        min-width: 0;
        flex-shrink: 1;
        font-size: clamp(17px, 5.6vw, 28px);
        overflow-wrap: anywhere;
    }

    /* Newsletter headline: clamp()'s 36px floor is wider than a 320px screen
       once a long Arabic word is in it (measured +82px). Let it scale down and
       break, rather than pushing the section past the viewport. */
    .bzh .bz-newsletter h2 { font-size: clamp(24px, 7.5vw, 36px); overflow-wrap: anywhere; }
    .bzh .bz-nl-text { min-width: 0; }
}

/* ═══════════════════════════════════════════════════════════════════════
   BAZAARIA · visual-responsive pass (2026-09-24)
   ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    /* ── Fixed bottom nav vs the real end of the page ────────────────
       `.bz-bottom-nav` is position:fixed with a 58px inner row + safe-area.
       The reservation lived on `.bz-main { padding-bottom: 68px }`, but
       `<footer class="bz-footer">` is a SIBLING of <main>, so that padding
       inserted 68px of dead space between the content and the footer while
       leaving the real page end — the footer's last row — under the bar.
       Reserve the bar's height where the page actually ends. The footer
       carries `background: var(--surface)`, so padding the footer (rather
       than <body>) keeps that surface continuous to the bottom.
       Voltex already does the equivalent with `body{padding-block-end}`. */
    .bz-main { padding-bottom: 0; }
    .bz-footer { padding-bottom: calc(58px + env(safe-area-inset-bottom, 0px)); }
}

/* ── Legacy Bootstrap `front.newsletter` include ──────────────────────
   Rendered on /contact, /search, /wishlist, /wallet, /addmoney,
   /change-password, /delete and the blog pages. Bazaaria ships no
   Bootstrap — verified: zero bootstrap references in any theme tree — so
   `container`, `row`, `col-lg-6`, `w-100`, `p-3`, `btn` and
   `form-floating` were all inert. Measured at 390px: the section ran
   edge-to-edge (no container inset at all, while the page's own sections
   sit inside `.bz-container`), with a browser-default 220x29 input and a
   57x25 button — the "squeezed and detached" newsletter.
   Re-skinned with Bazaaria's own tokens. This is the approach ArtWall,
   Farida and Voltex already take for this same legacy markup; it is not a
   new system, and the markup is untouched so those themes keep working. */
.newsletter { padding: clamp(32px, 6vh, 72px) 0; margin: 0; }
.newsletter .container { width: 100%; max-width: 1180px; margin-inline: auto; padding-inline: 22px; }
.newsletter .bg-light {
    background: var(--soft) !important;
    border: 1px solid var(--line);
    border-radius: 10px !important;
    padding: clamp(20px, 4vw, 40px) !important;
}
.newsletter .row {
    width: 100%; margin: 0;
    display: flex; align-items: center; justify-content: space-between;
    gap: 28px; flex-wrap: wrap;
}
.newsletter .row > div { flex: 1 1 320px; min-width: 0; }
.newsletter h2 { color: var(--ink); font-size: clamp(20px, 3.2vw, 30px); font-weight: 800; margin: 0 0 8px; }
.newsletter p { color: var(--ink-2); margin: 0; }
.newsletter form { margin-top: 16px; }
.newsletter .form-floating { display: flex; gap: 10px; flex-wrap: wrap; width: 100%; padding-bottom: 0 !important; }
.newsletter input[type=email] {
    flex: 1 1 220px; min-width: 0;
    background: var(--surface) !important;
    border: 1px solid var(--line) !important;
    color: var(--ink) !important;
    padding: 13px 16px !important;
    border-radius: 10px !important;
    margin: 0 !important;
}
.newsletter .btn-store, .newsletter button[type=submit] {
    flex: 0 0 auto;
    /* --primary flips to near-white in dark mode; a fixed #fff label was
       invisible there. --bg is the matching on-primary colour in both modes. */
    background: var(--primary) !important; color: var(--bg) !important;
    border: 0 !important; padding: 13px 26px !important;
    font-weight: 700; border-radius: 10px !important; margin: 0 !important;
    white-space: nowrap; cursor: pointer;
}
/* The markup marks the image `d-md-block d-none` — desktop only. Without
   Bootstrap that intent was lost and the image showed on phones. Restore
   the intent rather than deleting the content. */
.newsletter .newsletter-img { display: none; }
.newsletter .newsletter-img img { width: 100%; height: auto; display: block; border-radius: 10px; }
@media (min-width: 768px) {
    .newsletter .newsletter-img { display: block; flex: 0 0 30%; max-width: 30%; }
}
@media (max-width: 560px) {
    /* Phones: a proper stacked composition — heading, description, input,
       button, each full width. Nothing squeezed, nothing detached. */
    .newsletter .form-floating { flex-direction: column; }
    .newsletter input[type=email],
    .newsletter .btn-store,
    .newsletter button[type=submit] { width: 100%; flex: 1 1 auto; }
}

/* ── Performance (2026-10-19) ─────────────────────────────────────────────
   Backdrop blur is re-rendered on every scroll frame. The card badge and wish button repeat on every
   product card (32 per page) and sit on 92% white — the blur showed nothing. Hidden toast: no blur. */
.bzh .bz-card-badge, .bzh .bz-card-wish{ -webkit-backdrop-filter:none; backdrop-filter:none; }
.bzh .bz-toast:not(.is-on){ -webkit-backdrop-filter:none; backdrop-filter:none; }