/* ============================================================
   BAZAAR THEME — warm, ornamental, RTL-aware storefront design system.
   Same class surface as editorial/theme.css (so every shared header/
   footer/drawer/card/component class stays styled), restyled as a
   sunlit-souk marketplace: parchment grounds, garnet ink, saffron-gold
   hairlines + arabesque texture, and a pomegranate primary action.

   FIXED IDENTITY: unlike classic, Bazaar uses its own jewel tokens
   (--bz-*) for the prominent surfaces instead of the admin accent axis
   (--theme-*), so the storefront always matches the demo. A handful of
   incidental spots still read --theme-*-rgb (always globally defined).
   RTL is driven by language (dir on <html>), not the theme — Bazaar is
   built to read well in both directions.
   ============================================================ */

/* ── Bazaar design system ── */
:root {
  --font-display: 'Marcellus', 'Amiri', Georgia, 'Times New Roman', serif;

  --paper:     #fbf4e6;   /* warm parchment ground            */
  --paper-2:   #fffbf2;   /* lifted warm white — cards/fields */
  --ink:       #241016;   /* deep garnet-black text           */
  --ink-2:     #4c2e33;   /* secondary text                   */
  --ink-soft:  #8a6d63;   /* muted taupe                      */
  --rule:      rgba(120, 86, 32, 0.22);   /* gold-brown hairline */
  --rule-soft: rgba(120, 86, 32, 0.11);

  /* Jewel accents — the Bazaar signature */
  --bz-gold:          #b8862f;   /* saffron / brass */
  --bz-gold-strong:   #d9a83c;
  --bz-primary:       #9c2c46;   /* pomegranate / ruby — primary action */
  --bz-primary-strong:#7e2138;
  --bz-teal:          #14695a;   /* emerald accent (badges/links, sparing) */
  /* Garnet for the filled panels that carry ivory text (banners, featured
     plans, pay bars). Not redefined for dark: the lightened dark ruby
     would leave their ivory text on pink. */
  --bz-garnet:        #9c2c46;
  --bz-garnet-deep:   #7e2138;
  --notify-accent:    var(--bz-primary);   /* unified popup engine accent */
  /* rgb components (for rgba() — referenced by some component overrides) */
  --bz-gold-rgb:        184, 134, 47;
  --bz-gold-strong-rgb: 217, 168, 60;
  --bz-primary-rgb:     156, 44, 70;

  /* Un-migrated shared pages (profile.php, edit-profile.php, order.php, terms.php,
     etc.) still read the admin accent axis (--theme-*) directly instead of the
     Bazaar jewel tokens. Alias it here so those hover/active/icon states pick up
     the ruby identity instead of the admin's raw --theme-color (often blue). */
  --theme-500:     var(--bz-primary);
  --theme-600:     var(--bz-primary-strong);
  --theme-700:     var(--bz-primary-strong);
  --theme-500-rgb: var(--bz-primary-rgb);

  /* Mashrabiya lattice — faint gold texture behind every page */
  --pattern: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='44' height='44'><g fill='none' stroke='%23b8862f' stroke-width='1' stroke-opacity='0.07'><path d='M22 0L44 22 22 44 0 22Z'/><path d='M22 13L31 22 22 31 13 22Z'/></g></svg>");
  --noise:   var(--pattern);
  --page-bg: var(--pattern) repeat, var(--paper);

  --radius:    14px;
  --radius-sm: 9px;
  --shadow:    0 1px 2px rgba(74, 30, 20, .06), 0 10px 26px -18px rgba(74, 30, 20, .35);
  --shadow-md: 0 6px 22px -10px rgba(74, 30, 20, .30);

  --hdr-strip-bg:   var(--paper-2);
  --hdr-strip-rule: var(--rule);

  /* Mobile pill nav active-tab accent (see includes/footer.php .ed-mobile-link) */
  --nav-accent: var(--bz-primary);
}
html.dark {
  --paper:     #1a0f14;   /* deep aubergine-black — lantern-lit night */
  --paper-2:   #241620;
  --ink:       #f4e7d2;   /* warm ivory */
  --ink-2:     #dbc9ae;
  --ink-soft:  #a08a78;
  --rule:      rgba(216, 168, 60, 0.20);   /* gold hairlines glow */
  --rule-soft: rgba(216, 168, 60, 0.10);

  --bz-gold:          #e6b84a;
  --bz-gold-strong:   #f2ce74;
  --bz-primary:       #e06a82;   /* ruby lightened to read on dark */
  --bz-primary-strong:#c9475f;
  --bz-teal:          #4fb79f;
  --notify-accent:    var(--bz-primary);
  --bz-gold-rgb:        230, 184, 74;
  --bz-gold-strong-rgb: 242, 206, 116;
  --bz-primary-rgb:     224, 106, 130;

  --theme-300:     var(--bz-primary);
  --theme-400:     var(--bz-primary);
  --theme-500:     var(--bz-primary);
  --theme-600:     var(--bz-primary-strong);
  --theme-700:     var(--bz-primary-strong);
  --theme-500-rgb: var(--bz-primary-rgb);

  --pattern: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='44' height='44'><g fill='none' stroke='%23e6b84a' stroke-width='1' stroke-opacity='0.055'><path d='M22 0L44 22 22 44 0 22Z'/><path d='M22 13L31 22 22 31 13 22Z'/></g></svg>");
  --noise:   var(--pattern);
  --page-bg:
    radial-gradient(1200px 720px at 50% -140px, rgba(230, 184, 74, 0.10), transparent 60%) no-repeat,
    var(--pattern) repeat,
    var(--paper);

  --shadow:    0 1px 2px rgba(0, 0, 0, .45), 0 12px 30px -16px rgba(0, 0, 0, .65);
  --shadow-md: 0 6px 24px -10px rgba(0, 0, 0, .6);
  --hdr-strip-bg: var(--paper-2);
}

body { background: var(--page-bg); color: var(--ink); }

/* Display headlines — Marcellus serif, gentle tracking */
.font-display, h1.display, h2.display, h3.display {
  font-family: var(--font-display);
  letter-spacing: 0.005em;
  font-weight: 400;
}
.display-italic { font-style: italic; }

/* Gilt gradient text — gold into pomegranate */
.text-gradient-theme {
  background: linear-gradient(105deg, var(--bz-gold-strong) 0%, var(--bz-gold) 40%, var(--bz-primary) 115%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Eyebrow label — small caps, gold */
.ed-eyebrow {
  font-family: 'Inter', sans-serif;
  font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.2em;
  color: var(--bz-gold);
}

/* Tight eyebrow — same style, letter-spacing stripped so it stays on one line
   in narrow cards. !important guards against the Tailwind CDN Preflight
   (injected after this stylesheet) winning the cascade on these props. */
.ed-eyebrow-tight {
  font-size: 9px !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
}

/* Section eyebrow — gold rule with a diamond ornament */
.section-eyebrow {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-family: 'Inter', sans-serif;
  font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.2em;
  color: var(--bz-gold);
  margin-bottom: 0.7rem;
}
.section-eyebrow::before {
  content: ''; width: 1.6rem; height: 1px;
  background: linear-gradient(90deg, transparent, var(--bz-gold));
  flex-shrink: 0;
}
.section-eyebrow::after {
  content: '\25C6';                 /* ◆ */
  font-size: 7px; color: var(--bz-gold); opacity: .8;
}

/* View-all hairline arrow */
.btn-view-all {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-family: 'Inter', sans-serif;
  font-size: 0.8rem; font-weight: 600; letter-spacing: 0.02em;
  white-space: nowrap; flex-shrink: 0;
  color: var(--ink);
  padding-bottom: 3px;
  border-bottom: 1px solid var(--bz-gold);
  text-decoration: none;
  transition: gap 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.btn-view-all svg { transition: transform 0.2s ease; }
.btn-view-all:hover { gap: 0.75rem; color: var(--bz-primary); border-bottom-color: var(--bz-primary); }
[dir="rtl"] .btn-view-all svg { transform: scaleX(-1); }

.ed-rule { background-color: var(--rule); }
.ed-rule-soft { background-color: var(--rule-soft); }

/* Grain/texture overlay (used on hero) — reuse the lattice */
.ed-grain::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: var(--pattern);
}

/* Number ornament — italic serif flourish */
.ed-folio {
  font-family: var(--font-display);
  font-style: italic; font-weight: 400;
  color: var(--bz-gold);
}

/* Header search — warm filled field with gold focus ring */
.ed-search {
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.ed-search:focus-within { border-color: var(--bz-gold); box-shadow: 0 0 0 3px rgba(184, 134, 47, 0.14); }
/* Beat the legacy grey #desktopHeader .hdr-search (assets/css/header.css) */
#desktopHeader .hdr-search {
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
}
#desktopHeader .hdr-search:hover { border-color: rgba(184, 134, 47, 0.5); }
#desktopHeader .hdr-search:focus-within {
  border-color: var(--bz-gold);
  box-shadow: 0 0 0 3px rgba(184, 134, 47, 0.14);
}
html.dark #desktopHeader .hdr-search { background: var(--paper-2); border-color: var(--rule); }
html.dark #desktopHeader .hdr-search:focus-within { border-color: var(--bz-gold); }

/* Text link with arrow */
.ed-link-arrow {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-family: 'Inter', sans-serif;
  font-size: 0.8rem; font-weight: 600;
  color: var(--bz-primary); text-decoration: none;
  transition: gap 0.18s ease, color 0.18s ease;
}
.ed-link-arrow:hover { gap: 0.7rem; color: var(--bz-primary-strong); }
html.dark .ed-link-arrow:hover { color: var(--bz-gold); }

/* Primary CTA — pomegranate with a gilt inner hairline */
.ed-btn-primary {
  display: inline-flex; align-items: center; gap: 0.55rem;
  padding: 0.75rem 1.5rem;
  white-space: nowrap;
  font-family: 'Inter', sans-serif;
  font-size: 0.85rem; font-weight: 600; letter-spacing: 0.01em;
  color: #fff5ec;
  background: var(--bz-primary);
  border-radius: 999px;
  border: 1px solid var(--bz-primary);
  box-shadow: inset 0 0 0 1px rgba(217, 168, 60, 0.35), var(--shadow);
  transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.ed-btn-primary:hover {
  background: var(--bz-primary-strong); border-color: var(--bz-primary-strong);
  color: #fff5ec;
  box-shadow: inset 0 0 0 1px rgba(217, 168, 60, 0.6), var(--shadow-md);
  transform: translateY(-1px);
}
html.dark .ed-btn-primary { color: #1a0f14; }
/* …and index.php's homepage `.ed-btn-primary:hover { background: var(--paper) }`
   (editorial invert) — re-assert the ruby chip so the dark ink stays legible. */
html.dark .ed-btn-primary:hover {
  color: #1a0f14;
  background: #ce596e;
  border-color: #ce596e;
}

.ed-btn-secondary {
  display: inline-flex; align-items: center; gap: 0.55rem;
  padding: 0.72rem 1.4rem;
  font-family: 'Inter', sans-serif;
  font-size: 0.82rem; font-weight: 600;
  color: var(--ink);
  background: var(--paper-2);
  border-radius: 999px;
  border: 1px solid var(--rule);
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.ed-btn-secondary:hover { background: var(--paper); border-color: var(--bz-gold); color: var(--bz-primary); }

/* Shared pill CTA */
.ed-plan-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
  padding: 0.75rem 1.5rem; border-radius: 999px;
  font-family: 'Inter', sans-serif;
  font-size: 0.85rem; font-weight: 600;
  background: var(--bz-primary); color: #fff5ec;
  border: 1px solid var(--bz-primary);
  box-shadow: inset 0 0 0 1px rgba(217, 168, 60, 0.35);
  transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
  text-decoration: none;
}
.ed-plan-cta:hover { background: var(--bz-primary-strong); border-color: var(--bz-primary-strong); color: #fff5ec; transform: translateY(-1px); }
html.dark .ed-plan-cta { color: #1a0f14; }
/* Re-assert ruby chip over index.php homepage `.ed-plan-cta:hover { background: var(--paper) }`. */
html.dark .ed-plan-cta:hover {
  color: #1a0f14;
  background: #ce596e;
  border-color: #ce596e;
}

/* Plan / dossier cards — warm card, gold hairline, lift on hover */
.ed-plan {
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.ed-plan:hover { border-color: var(--bz-gold); box-shadow: var(--shadow-md); transform: translateY(-2px); }

.ed-plan-featured {
  position: relative;
  background: linear-gradient(160deg, #2f131c 0%, var(--bz-garnet-deep, #7e2138) 70%, var(--bz-garnet, #9c2c46) 130%);
  color: #fbeede;
  border: 1px solid var(--bz-primary);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.ed-plan-featured:hover { transform: translateY(-2px); }
html.dark .ed-plan-featured {
  background: linear-gradient(160deg, #3a1622 0%, var(--bz-garnet-deep) 80%);
  color: #fbeede; border-color: var(--bz-garnet-deep);
}
.ed-plan-hairline { border-color: var(--rule); }
.ed-plan-featured .ed-plan-hairline { border-color: rgba(255, 233, 200, 0.22); }
html.dark .ed-plan-featured .ed-plan-hairline { border-color: rgba(255, 233, 200, 0.22); }
.ed-plan-featured .ed-plan-cta { background: var(--bz-gold); color: #241016; border-color: var(--bz-gold); box-shadow: none; }
.ed-plan-featured .ed-plan-cta:hover { background: var(--bz-gold-strong); border-color: var(--bz-gold-strong); color: #241016; }
html.dark .ed-plan-featured .ed-plan-cta { background: var(--bz-gold); color: #241016; border-color: var(--bz-gold); }
html.dark .ed-plan-featured button.ed-plan-cta { color: #241016; }

/* Shop card — warm card, gold hairline */
.shop-card {
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.shop-card:hover { border-color: var(--bz-gold); box-shadow: var(--shadow-md); transform: translateY(-2px); }

/* Header status strip */
.ed-status {
  font-family: 'Inter', sans-serif;
  font-size: 11px; letter-spacing: 0.05em;
  color: var(--ink-soft);
}

/* Drawer typography */
.drawer-section-label {
  display: flex; align-items: center; gap: 0.6rem;
  font-family: 'Inter', sans-serif;
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.16em;
  color: var(--bz-gold);
  padding: 1.1rem 1.5rem 0.4rem;
}
.drawer-section-label::after { content: ''; flex: 1; height: 1px; background: var(--rule); }
.drawer-nav-row {
  display: flex; align-items: center; gap: 0.85rem;
  padding: 0.65rem 1.5rem;
  font-family: 'Inter', sans-serif;
  font-size: 0.92rem; font-weight: 500;
  color: var(--ink-2);
  transition: background 0.15s ease, color 0.15s ease;
  text-decoration: none;
}
.drawer-nav-row:hover { background: var(--paper); color: var(--bz-primary); }
.drawer-logout, .drawer-login {
  display: flex; align-items: center; justify-content: center; gap: 0.5rem;
  margin: 1rem 1.5rem 1.25rem;
  padding: 0.85rem 1rem;
  border-radius: 999px;
  font-family: 'Inter', sans-serif;
  font-size: 0.86rem; font-weight: 600;
  text-decoration: none;
  transition: background 0.18s ease;
}
.drawer-logout { color: #b8431a; border: 1px solid rgba(184, 67, 26, 0.28); }
.drawer-logout:hover { background: rgba(184, 67, 26, 0.07); }
.drawer-login { color: #fff5ec; background: var(--bz-primary); }
.drawer-login:hover { background: var(--bz-primary-strong); }
html.dark .drawer-login { color: #1a0f14; }
html.dark .drawer-logout { color: #f0a284; border-color: rgba(240, 162, 132, 0.22); }

/* Mobile glass header */
.mobile-glass-header {
  background: rgba(251, 244, 230, 0.85);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  border-bottom: 1px solid var(--rule);
}
html.dark .mobile-glass-header { background: rgba(26, 15, 20, 0.82); }

/* Avatar ring — thin gold */
.ed-avatar-ring {
  box-shadow: 0 0 0 1px var(--paper-2), 0 0 0 2px var(--bz-gold);
}

/* Hide Alpine cloak */
[x-cloak] { display: none !important; }

/* Premium dropdown */
.ed-dropdown {
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: 0 30px 60px -20px rgba(74, 30, 20, 0.28), 0 8px 20px -12px rgba(74, 30, 20, 0.18);
  overflow: hidden;
}
html.dark .ed-dropdown { background: var(--paper-2); box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.6); }

.ed-dropdown-item {
  display: flex; align-items: center; gap: 0.85rem;
  padding: 0.7rem 1rem;
  font-family: 'Inter', sans-serif;
  font-size: 0.88rem; font-weight: 500;
  color: var(--ink-2);
  text-decoration: none;
  transition: background 0.14s ease, color 0.14s ease;
}
.ed-dropdown-item:hover { background: var(--paper); color: var(--bz-primary); }
html.dark .ed-dropdown-item:hover { background: rgba(230, 184, 74, 0.06); color: var(--bz-gold); }

.ed-section-cap {
  font-family: 'Inter', sans-serif;
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.18em;
  color: var(--bz-gold);
  padding: 0.9rem 1rem 0.4rem;
}

/* Header elevation */
#desktopHeader { box-shadow: var(--shadow); }

/* ── Auth (login/register) brand panel — garnet & gold ── */
:root {
  --brand-gradient: linear-gradient(150deg, #2b0f18 0%, #591d2e 55%, #7e2138 100%);
  --brand-glow-1:   rgba(184, 134, 47, 0.32);
  --brand-glow-2:   rgba(156, 44, 70, 0.22);
}
html.dark {
  --brand-gradient: linear-gradient(150deg, #1a0f14 0%, #3a1622 60%, #591d2e 110%);
}

/* ── Home: mystery-box card frame + winner-ticker accent ── */
.ed-card-mystery {
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.ed-card-mystery:hover { border-color: var(--bz-gold); box-shadow: var(--shadow-md); }
body .wt-card:hover { border-color: var(--bz-gold); }

/* Bazaar payment cluster (bz-pay-*) — ported from classic */
.bz-pay-topbar {
  background: var(--paper); border-bottom: 1px solid var(--rule);
  box-shadow: var(--shadow);
}
.bz-pay-crest {
  width: 1.75rem; height: 1.75rem; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  color: #fff; background: var(--bz-primary, #9c2c46);
}

.bz-pay-card {
  background: var(--paper-2); border: 1px solid var(--rule);
  border-radius: var(--radius, 12px); box-shadow: var(--shadow);
}

.bz-pay-eyebrow {
  font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-soft);
}
.bz-pay-collapse-btn { border-bottom: 1px solid var(--rule); background: none; }
.bz-pay-collapse-btn:hover { background: rgba(156,44,70,.03); }

.bz-pay-lineitem {
  border-radius: var(--radius-sm, 8px); background: var(--paper);
  border: 1px solid var(--rule);
}
.bz-pay-qty-hero {
  position: absolute; top: .625rem; right: .625rem;
  font-size: 12px; font-weight: 800; color: #fff;
  background: rgba(15,23,42,.62); backdrop-filter: blur(4px);
  padding: .125rem .625rem; border-radius: 999px;
}
.bz-pay-qty-badge {
  position: absolute; bottom: -.375rem; right: -.375rem;
  font-size: 10px; font-weight: 800; color: #fff;
  background: var(--bz-primary, #9c2c46);
  padding: .0625rem .375rem; border-radius: 999px; line-height: 1.5;
  box-shadow: 0 1px 4px rgba(0,0,0,.2);
}

.bz-pay-countdown {
  display: flex; align-items: center; gap: .5rem;
  padding: .5rem .75rem; border-radius: var(--radius-sm, 8px);
  background: rgba(156,44,70,.07);
}
.bz-pay-countdown-time {
  font-size: 11px; font-weight: 700; color: var(--bz-primary, #9c2c46);
  background: var(--paper-2); border-radius: 999px; padding: .125rem .625rem;
}

.bz-pay-row { border-bottom: 1px solid var(--rule); }
.bz-pay-total {
  border-top: 2px solid var(--rule); font-size: 15px; font-weight: 800; color: var(--ink);
}

.bz-pay-address-inner {
  border: 1.5px solid var(--rule); border-radius: var(--radius-sm, 8px);
  background: var(--paper);
}

.bz-pay-gw {
  border: 2px solid var(--rule); border-radius: var(--radius-sm, 8px);
  background: var(--paper-2);
  transition: border-color .14s, background .14s, transform .14s, box-shadow .14s;
}
.bz-pay-gw:hover { border-color: var(--bz-gold-strong, #d9a83c); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.bz-pay-gw-on {
  border-color: var(--bz-gold, #b8862f); background: rgba(156,44,70,.06);
  box-shadow: 0 0 0 1px var(--bz-gold, #b8862f);
}
.bz-pay-gw-radio {
  width: 1rem; height: 1rem; border-radius: 999px; border: 2px solid var(--rule);
  transition: border-color .14s, background .14s;
}
.bz-pay-gw-radio-on { border-color: var(--bz-primary, #9c2c46); background: var(--bz-primary, #9c2c46); }

.bz-pay-cta {
  font-weight: 800; font-size: 14px; letter-spacing: -.01em; color: #fff;
  border: none; border-radius: 999px; cursor: pointer;
  background: var(--bz-primary, #9c2c46);
  transition: filter .15s, transform .15s, box-shadow .15s;
}
.bz-pay-cta:hover:not(:disabled) { filter: brightness(1.05); box-shadow: var(--shadow-md); }
.bz-pay-cta:active:not(:disabled) { transform: scale(.99); }
.bz-pay-cta-off, .bz-pay-cta:disabled {
  background: var(--rule); color: var(--ink-soft); cursor: not-allowed;
}

.bz-pay-fixed {
  background: var(--paper-2); border-top: 1px solid var(--rule);
  box-shadow: 0 -4px 24px rgba(0,0,0,.09);
}

.bz-pay-modal {
  background: var(--paper-2); border: 1px solid var(--rule);
  border-radius: 1.5rem; box-shadow: 0 24px 64px rgba(0,0,0,.3);
}

/* Result / status card (payment-success · -failed · -cancelled) */
.bz-pay-result { position: relative; overflow: hidden; }
.bz-pay-result-stripe {
  height: 3px;
  background: linear-gradient(90deg, var(--bz-gold, #b8862f), var(--bz-primary, #9c2c46));
}
.bz-pay-result-medallion {
  width: 4rem; height: 4rem; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid transparent;
  box-shadow: inset 0 0 0 4px var(--paper), 0 6px 20px -10px rgba(0,0,0,.25);
}
.bz-pay-result-btn2 {
  font-weight: 700; font-size: 13px; letter-spacing: -.01em;
  color: var(--bz-primary, #9c2c46);
  border: 1px solid var(--rule); border-radius: 999px;
  background: var(--paper-2);
  transition: border-color .15s, background .15s, color .15s;
}
.bz-pay-result-btn2:hover { border-color: var(--bz-gold-strong, #d9a83c); background: rgba(156,44,70,.06); }

/* ── Dark/light toggle: "drape" ──
   header.js (runBazaarDrapeTransition) builds two lattice-textured,
   pomegranate/gold-trimmed panels inside #pxThemeFx once, then toggles
   .is-covering / .is-receding. The panels slide in from the left and right
   edges to meet (and slightly overlap) at center, like stall curtains
   closing. The mode swap happens once they meet, then they part back out
   to their edges — a curtain reveal rather than a color snap. Panels slide
   toward/away from center either way, so this reads the same in RTL.
   The curtains keep the day palette's garnet, lattice and gold in both
   modes: the mode flips under them, and colours read from the mode tokens
   would change while they are closed. */
.px-fx__bz-panel {
  position: absolute; top: 0; bottom: 0; width: 52%;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='44' height='44'><g fill='none' stroke='%23b8862f' stroke-width='1' stroke-opacity='0.07'><path d='M22 0L44 22 22 44 0 22Z'/><path d='M22 13L31 22 22 31 13 22Z'/></g></svg>") repeat, linear-gradient(180deg, #9c2c46 0%, #7e2138 100%);
  box-shadow: 0 0 30px -4px rgba(0,0,0,.4);
}
.px-fx__bz-panel--l { left: 0; transform: translateX(-100%); border-right: 3px solid #b8862f; }
.px-fx__bz-panel--r { right: 0; transform: translateX(100%); border-left: 3px solid #b8862f; }
.px-fx--bazaar.is-covering .px-fx__bz-panel--l { animation: pxBzInL 360ms cubic-bezier(.5,0,.1,1) forwards; }
.px-fx--bazaar.is-covering .px-fx__bz-panel--r { animation: pxBzInR 360ms cubic-bezier(.5,0,.1,1) forwards; }
.px-fx--bazaar.is-receding .px-fx__bz-panel--l { animation: pxBzOutL 380ms cubic-bezier(.5,0,.1,1) forwards; }
.px-fx--bazaar.is-receding .px-fx__bz-panel--r { animation: pxBzOutR 380ms cubic-bezier(.5,0,.1,1) forwards; }
@keyframes pxBzInL { to { transform: translateX(0); } }
@keyframes pxBzInR { to { transform: translateX(0); } }
@keyframes pxBzOutL { from { transform: translateX(0); } to { transform: translateX(-100%); } }
@keyframes pxBzOutR { from { transform: translateX(0); } to { transform: translateX(100%); } }

@media (prefers-reduced-motion: reduce) {
  .px-fx__bz-panel { animation: none !important; }
}

/* Dark mode brightens the gold and ruby buttons, and the shared dark rule
   for buttons (dynamic-theme.css) letters them near-white; they take dark
   lettering instead, as .drawer-login does. */
html.dark #buyNowBtn,
html.dark #buyNowBtnMobile,
html.dark .spin-btn.mb-open,
html.dark .wallet-hero-btn-primary { color: #1a0f14; }

/* Phones: names, titles and labels wrap instead of ending in "…", in the
   page headers too; a ticket's two dates stack rather than run into each
   other; the wallet's label-and-status row wraps; the auction page's
   browse link drops under its heading ("Andere Auktionen durchstöbern"). */
@media (max-width: 639px) {
  html body :is(.truncate, .bz-lintel__title b, .bz-mmh__title span) { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: break-word; }
  html body :is(.bz-lintel__title b, .bz-mmh__title span) { line-height: 1.2; text-align: center; }
  html body .grid.grid-cols-2.rtl-text-right:has(> div > .whitespace-nowrap) { grid-template-columns: minmax(0, 1fr); gap: .75rem; }
  html body .tx-row .flex.items-center.gap-2 { flex-wrap: wrap; row-gap: .25rem; }
  html body div.flex.justify-between:has(> a.ed-link-arrow.whitespace-nowrap) { flex-wrap: wrap; row-gap: .75rem; }
  /* listing-page titles keep their words whole when they wrap */
  html body h2.text-fit { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: break-word; word-break: normal; hyphens: manual; }
}

/* The policy page titles are .text-fit (one line, overflow hidden from 640px)
   at 1.05 leading, which is shorter than this face's descenders reach. */
h1.font-display.text-fit { line-height: 1.2; padding-bottom: .04em; }

/* Search results: the lottery and mystery-box plugins print their own section
   panels in stock Tailwind white/grey with no theme hook, so match them here. */
html body section.rounded-xl:has(> div > div > h2.text-amber-600),
html body section.rounded-xl.from-gray-900:has(img[src$="/emoji/gift.svg"]) {
  background: radial-gradient(120% 90% at 50% 0%, rgba(var(--bz-gold-rgb), .10), transparent 70%);
  background-color: var(--paper-2) !important; /* the shared dark sheet forces .bg-white */
  border: 1px solid var(--rule); border-radius: var(--radius, 18px);
  box-shadow: inset 0 0 0 1px rgba(var(--bz-gold-rgb), .08);
}
html body section.rounded-xl:has(> div > div > h2.text-amber-600) h2.font-extrabold,
html body section.rounded-xl.from-gray-900:has(img[src$="/emoji/gift.svg"]) h2.font-extrabold {
  font-family: var(--font-display); font-weight: 400; color: var(--ink) !important; filter: none; text-shadow: none;
}
html body section.rounded-xl.from-gray-900:has(img[src$="/emoji/gift.svg"]) .text-gray-400 { color: var(--ink-soft) !important; }

/* Winner cards take their accent from each product's own colour; swap the
   stock violet, amber and blue for the souk's. Newer kernels print the colour
   as data-tone, 1.1.168 as --wnc-ring (and data-src), older ones as --wnc-src. */
.wnc[data-tone="violet"], .wnc[data-src="mystery"], .wnc[style*="--wnc-src:#a855f7"] { --wnc-src: var(--bz-primary) !important; --wnc-grad: linear-gradient(135deg, var(--bz-primary), var(--bz-primary-strong)) !important; }
.wnc[data-tone="amber"], .wnc[style*="--wnc-ring:#f59e0b"], .wnc[style*="--wnc-src:#f59e0b"] { --wnc-src: var(--bz-gold) !important; --wnc-grad: linear-gradient(135deg, var(--bz-gold-strong), var(--bz-gold)) !important; }
.wnc[data-tone="blue"], .wnc[style*="--wnc-ring:#3b82f6"], .wnc[style*="--wnc-src:#3b82f6"] { --wnc-src: var(--bz-teal) !important; --wnc-grad: linear-gradient(135deg, var(--bz-teal), #0e4c41) !important; }

/* The shared dark sheet tints .bg-yellow-50 but has no light partner for
   .text-yellow-800, which leaves search's "Did you mean" notice brown on brown. */
html.dark body .bg-yellow-50.text-yellow-800 { color: var(--ink) !important; }

/* The negotiate-price Send button on a product page: the pomegranate
   plaque, not the stock amber. */
html body #shopB2bNegotiateForm button[type="submit"] { background: linear-gradient(180deg, var(--bz-primary), var(--bz-primary-strong)) !important; color: #fff5ec !important; box-shadow: inset 0 0 0 1px rgba(var(--bz-gold-strong-rgb), .38); }

/* Display titles shrunk to one line by .text-fit are clipped to their box
   (header.css), and at leading-[1.05] that box cuts off the descenders of
   "Privacy Policy". The padding gives them room; the negative margin keeps
   the layout where it was. */
html body :is(h1, h2).font-display.text-fit:not([class*="mb-"]) { padding-bottom: .14em; margin-bottom: -.14em; }
html body :is(h1, h2).font-display.text-fit[class*="mb-"] { padding-bottom: .14em; }

/* Status tones (kernel 1.1.166): this theme's own green, amber, red and info hues
   for the shared .px-tone-* chips and notes, each set so its chip and text
   read at 4.5:1 or better on this theme's paper in light and dark. */
html:root { --px-good: #157f3d; --px-warn: #b45309; --px-crit: #ba1c1c; --px-info: #7d2138; }
html.dark:root { --px-good: #4ade80; --px-warn: #fbbf23; --px-crit: #f76363; --px-info: #61a5fa; }

/* Changing language, the scene (bazaar.js): a stall shut under its awning
   with the old name painted on the canvas. The awning rolls up and shows
   the hand-painted sign with the new name; after the reload the lanterns
   sway. Canvas and sign keep their own paint in both modes, so their ink is
   fixed. The stall is the same on both pages, so the reload never shows. */
.bz-lang-stage { background: color-mix(in srgb, #1a0f14 58%, transparent); }
.bz-lang-stall {
  position: relative; width: min(560px, 100%); box-sizing: border-box; padding: 0 0 16px;
  color: var(--ink); background: var(--paper-2); border-radius: var(--radius, 14px); overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--rule), 0 34px 70px -28px rgba(0, 0, 0, .6);
  font-family: var(--font-display);
}
.bz-lang-beam {
  display: block; height: 16px;
  background: linear-gradient(180deg, #8a5a2e, #6b4220); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .25), inset 0 2px 0 rgba(255, 255, 255, .15);
}
.bz-lang-lamp {
  position: absolute; left: 22px; top: 16px; z-index: 1; width: 28px; height: 74px; transform-origin: 50% 0;
  background: linear-gradient(var(--bz-gold, #b8862f), var(--bz-gold, #b8862f)) 50% 0 / 2px 28px no-repeat;
}
.bz-lang-lamp-r { left: auto; right: 22px; }
.bz-lang-lamp i {
  position: absolute; left: 0; bottom: 0; width: 28px; height: 46px; border-radius: 40% 40% 46% 46%;
  background: radial-gradient(circle at 50% 55%, #ffe39a, #e6a63a 45%, #9c2c46 90%);
  box-shadow: 0 0 18px 4px rgba(242, 206, 116, .45), inset 0 0 0 2px rgba(110, 50, 10, .35);
}
.bz-lang-lamp i::before {
  content: ""; position: absolute; left: 8px; right: 8px; top: -6px; height: 7px; border-radius: 3px 3px 0 0; background: var(--bz-gold, #b8862f);
}
.bz-lang-front { position: relative; margin: 0 64px; padding-top: 18px; }
.bz-lang-sign {
  position: relative; z-index: 4; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  min-height: 150px; box-sizing: border-box; padding: 22px 16px; text-align: center; border-radius: 10px;
  background: radial-gradient(ellipse at 50% 30%, #1b7a68, #0f4f44 70%); color: #fff3d6;
  box-shadow: inset 0 0 0 3px #d9a83c, inset 0 0 0 6px #0f4f44, inset 0 0 0 7px rgba(217, 168, 60, .6), 0 10px 18px -10px rgba(0, 0, 0, .55);
}
.bz-lang-sign img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px #d9a83c; }
.bz-lang-name {
  max-width: 100%; color: #fff3d6; font: 400 clamp(28px, 8.5vw, 46px)/1.08 var(--font-display); overflow-wrap: anywhere;
  text-shadow: 0 2px 0 rgba(0, 0, 0, .3);
}
.bz-lang-code { font: 400 13px/1 var(--font-display); letter-spacing: .24em; color: #f2ce74; }
.bz-lang-awning {
  position: absolute; left: -6px; right: -6px; top: 14px; bottom: -6px; z-index: 5; display: grid; place-items: center; padding: 0 18px;
  background: repeating-linear-gradient(90deg, #9c2c46 0 26px, #fbf3e1 26px 52px);
  box-shadow: inset 0 -10px 12px -8px rgba(0, 0, 0, .35);
  transform-origin: 50% 0; transform: scaleY(0);
}
.bz-lang-was {
  max-width: 100%; padding: 6px 14px; border-radius: 6px; background: #fbf3e1; color: #241016; opacity: 0;
  font: 400 clamp(20px, 6vw, 28px)/1.15 var(--font-display); text-align: center; overflow-wrap: anywhere;
  box-shadow: 0 0 0 2px #b8862f;
}
.bz-lang-roll {
  position: absolute; left: -10px; right: -10px; top: 6px; z-index: 6; height: 18px; border-radius: 9px;
  background: repeating-linear-gradient(90deg, #7e2138 0 26px, #e9dcc0 26px 52px);
  box-shadow: inset 0 -5px 0 rgba(0, 0, 0, .25), inset 0 3px 0 rgba(255, 255, 255, .25), 0 3px 6px -2px rgba(0, 0, 0, .4);
}
.bz-lang-counter {
  display: flex; align-items: flex-end; justify-content: center; gap: 12px; height: 22px; margin: 14px 18px 0; padding: 0 10px;
  border-bottom: 8px solid #8a5a2e; border-radius: 0 0 4px 4px;
}
.bz-lang-counter i { width: 34px; height: 16px; border-radius: 50% 50% 6px 6px / 90% 90% 6px 6px; background: #c8642c; box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .2); }
.bz-lang-counter i:nth-child(2) { background: #d9a83c; }
.bz-lang-counter i:nth-child(3) { background: #9c2c46; }
.bz-lang-counter i:nth-child(4) { background: #5d7b3a; }
.bz-lang-counter i:nth-child(5) { background: #e0b84a; }

/* Out: the awning rolls up onto its pole and shows the sign. */
.px-lang-stage-out .bz-lang-stall { animation: bz-lang-stall-in .32s cubic-bezier(.2, .8, .3, 1.1) both; }
.px-lang-stage-out .bz-lang-awning { animation: bz-lang-roll-up .9s cubic-bezier(.5, 0, .3, 1) both; }
.px-lang-stage-out .bz-lang-was { animation: bz-lang-was .6s ease-in both; }
.px-lang-stage-out .bz-lang-roll { animation: bz-lang-thicken .9s cubic-bezier(.5, 0, .3, 1) both; }
.px-lang-stage-out .bz-lang-sign { animation: bz-lang-reveal .95s ease-out both; }
.px-lang-stage-out .bz-lang-lamp { animation: bz-lang-sway-a .95s ease-in-out both; }
/* In: it starts where out ended; the lanterns sway and the stall goes. */
.px-lang-stage-in .bz-lang-lamp { animation: bz-lang-sway-b .9s ease-in-out .05s both; }
.px-lang-stage-in .bz-lang-lamp-r { animation-delay: .15s; }
.px-lang-stage-in .bz-lang-lamp i { animation: bz-lang-glow .9s ease-in-out .05s both; }
.px-lang-stage-in .bz-lang-stall { animation: bz-lang-stall-out .28s ease-in 1s both; }
@keyframes bz-lang-stall-in { from { transform: translateY(40px); opacity: 0; } }
@keyframes bz-lang-stall-out { to { transform: translateY(26px); opacity: 0; } }
@keyframes bz-lang-roll-up { 0%, 35% { transform: none; } }
@keyframes bz-lang-was { 0%, 50% { opacity: 1; } 100% { opacity: 0; } }
@keyframes bz-lang-thicken { 0%, 35% { transform: scaleY(.7); } }
@keyframes bz-lang-reveal { 0%, 40% { filter: brightness(.55); } }
@keyframes bz-lang-sway-a { 0% { transform: rotate(4deg); } 50% { transform: rotate(-3deg); } }
@keyframes bz-lang-sway-b { 25% { transform: rotate(9deg); } 55% { transform: rotate(-6deg); } 80% { transform: rotate(3deg); } }
@keyframes bz-lang-glow { 40% { box-shadow: 0 0 26px 8px rgba(242, 206, 116, .7), inset 0 0 0 2px rgba(110, 50, 10, .35); } }
@media (max-width: 460px) {
  .bz-lang-lamp { display: none; }
  .bz-lang-front { margin: 0 18px; }
  .bz-lang-counter i:nth-child(n+4) { display: none; }
}

/* The lottery page's countdown comes in stock amber, too faint on the
   cream card; a deeper brass reads at a glance. Dark keeps the stock gold. */
html:not(.dark) #countdown.text-amber-600 { color: #8a5f14 !important; }

/* Phones: the hero's two buttons stay side by side, each as wide as its
   label needs, their text and padding shrinking with the screen; a label
   still too long takes two even lines inside its button. A home section's title and its "View all" link
   share one row too: the title keeps a little over half of it, breaking
   between words if it must, and only a very long link label takes two
   lines. */
@media (max-width: 639px) {
  html body :is(div, p):has(> .ed-btn-primary):has(> .ed-btn-secondary) { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: stretch; gap: .5rem; }
  html body :is(div, p):has(> .ed-btn-primary):has(> .ed-btn-secondary) > :is(.ed-btn-primary, .ed-btn-secondary) {
    flex: 1 1 auto; min-width: min-content; width: auto; margin: 0; justify-content: center; text-align: center; white-space: normal; text-wrap: balance;
    padding-inline: clamp(.5rem, 2.6vw, 1.25rem); font-size: clamp(.75rem, 3.5vw, .9375rem); line-height: 1.15;
  }
  html body :is(div, p):has(> .ed-btn-primary):has(> .ed-btn-secondary) > :is(.ed-btn-primary, .ed-btn-secondary) > :is(svg, i, img) { flex: none; }
  html body div.flex.justify-between:has(> div h2.text-fit):has(> a) { flex-direction: row; flex-wrap: nowrap; align-items: flex-end; column-gap: .75rem; }
  html body div.flex.justify-between:has(> div h2.text-fit):has(> a) > div { flex: 1 1 0; min-width: 55%; }
  html body div.flex.justify-between:has(> div h2.text-fit):has(> a) > a { flex: 0 1 auto; max-width: 45%; margin: 0; white-space: normal; text-wrap: balance; text-align: center; font-size: .8125rem; line-height: 1.2; letter-spacing: .02em; gap: .375rem; }
  html body div.flex.justify-between:has(> div h2.text-fit):has(> a) h2.text-fit { font-size: clamp(1.25rem, 6.4vw, 1.75rem); overflow-wrap: break-word; }
}

/* Confirm windows: OK at night takes the dark ink of the theme's night
   buttons; white on the lightened ruby stood at 3:1. */
html.dark body .px-confirm__btn--ok:not(.px-confirm__btn--destructive) { color: #1a0f14; }

/* dynamic-theme.css paints every dark field, select and grey surface from
   these, in a cool slate that belongs to no theme; the souk's night takes
   its own aubergine steps. */
html.dark {
  --bg-primary: #1a0f14; --bg-secondary: #241620; --bg-tertiary: #2f1e29;
  --text-primary: #f4e7d2; --text-secondary: #dbc9ae; --text-tertiary: #a99383;
  --border-primary: rgba(216, 168, 60, .22); --border-secondary: rgba(216, 168, 60, .34);
}

/* Product pictures are shot on white or cut out, and black speakers, phones
   and shredders sank into the night's dark wells; in dark mode the wells
   are lit like a lantern-lit stall instead (the bidding cards' wells are
   lit the same way in their own stylesheet). */
html.dark body :is(.bz-plate, .bz-win-plate, .bz-gal__stage, .bz-vit, .bz-cart-line__coin, .mb-item-img, .sp-deal-img) {
  background: radial-gradient(ellipse 72% 70% at 50% 46%, #7a5a58 0%, #5a3f45 52%, #3b2731 100%) !important;
}

/* Recent winners strip. It also stops while one of its cards has focus,
   slides towards the reading side on right-to-left pages (the shared loop
   only runs leftwards, which empties the row there), and holds still with
   each winner shown once when there are too few of them to fill the row
   (data-wt-still, set by assets/js/components/home/winner-ticker.js). */
html body .wt-wrap:focus-within .wt-track { animation-play-state: paused; }
@keyframes wt-scroll-rtl { from { transform: translateX(0); } to { transform: translateX(50%); } }
@media (prefers-reduced-motion: no-preference) {
  html[dir="rtl"] body .wt-track { animation-name: wt-scroll-rtl; }
}
html body .wt-wrap[data-wt-still] .wt-track { animation: none; transform: none; margin-inline: auto; }
html body .wt-wrap[data-wt-still] .wt-card[data-wt-repeat] { display: none; }

/* A deeper secondary text for "Load more"'s count, the delete and
   download-your-data pages and the password section of Edit profile, whose
   small text sits on the parchment ground. */
html:not(.dark) .px-more, html:not(.dark) .da-wrap, html:not(.dark) .ep-security {
  --ink-soft: #83685e;
}

/* ── The language picker (kernel components/layout/language-picker.php):
   woven rugs hung from a brass rail in the souk. The theme's gilt rail
   becomes a brass rod along the top of the sheet and the title is in
   Marcellus. Every language is a strip of parchment with a kilim hanging
   from a short rail at its start, rolled up so only its border shows, in
   muted madder and indigo. The chosen rug is unrolled and bright, its
   border, its stack of plain diamonds and its fringe all showing in
   saffron, garnet and emerald, and its strip turns to pomegranate with
   the name bold in ivory and the tick. In the lantern-lit night the
   strips are aubergine and the chosen one is parchment. As the picker
   opens the rugs drop onto their rails, only when motion is welcome. ── */
html body .px-lang-picker {
  --bzp-sheet: #fffbf2;
  --bzp-ink: #241016;
  --bzp-ink-soft: #7e2138;
  --bzp-field: #fffbf2;
  --bzp-field-lo: #f3e7cf;
  --bzp-on-field: #241016;
  --bzp-edge: #dcc6a0;
  --bzp-glow: rgba(184, 134, 47, .22);
  --bzp-row: #fffbf2;
  --bzp-row-lo: #f8eedb;
  --bzp-row-edge: rgba(120, 86, 32, .38);
  --bzp-on-row: #241016;
  --bzp-lit: #9c2c46;
  --bzp-lit-lo: #7e2138;
  --bzp-lit-edge: #5c1426;
  --bzp-on-lit: #fff6e8;
  --px-focus-ring: #7e2138;
  --px-focus-halo: #fffbf2;
}

html.dark body .px-lang-picker {
  --bzp-sheet: #241620;
  --bzp-ink: #f4e7d2;
  --bzp-ink-soft: #f2ce74;
  --bzp-field: #1a0f14;
  --bzp-field-lo: #33202c;
  --bzp-on-field: #f4e7d2;
  --bzp-edge: #4a3040;
  --bzp-glow: rgba(242, 206, 116, .2);
  --bzp-row: #1e1218;
  --bzp-row-lo: #1a0f14;
  --bzp-row-edge: rgba(216, 168, 60, .3);
  --bzp-on-row: #f4e7d2;
  --bzp-lit: #fffbf2;
  --bzp-lit-lo: #f3e2c2;
  --bzp-lit-edge: #e6b84a;
  --bzp-on-lit: #241016;
  --px-focus-ring: #f2ce74;
  --px-focus-halo: #1a0f14;
}

html body .px-lang-picker {
  --bzp-rolled: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 47'> <rect x='8' y='4' width='28' height='9' fill='%238a4a4f' stroke='%233b1f14' stroke-width='1'/> <path d='M12 13 V9 H32 V13' fill='%23c9a780' stroke='%233b1f14' stroke-width='.6'/> <path d='M22 9 L25 13 H19 Z' fill='%233d4f72'/> <rect x='6' y='12' width='32' height='10' rx='5' fill='%238a4a4f' stroke='%233b1f14' stroke-width='1'/> <path d='M10 14.5 H34 M10 19.5 H34' stroke='%233d4f72' stroke-width='.9' stroke-dasharray='3 2'/> <circle cx='38' cy='17' r='5' fill='%23c9a780' stroke='%233b1f14' stroke-width='1'/> <path d='M38 17 m-2.6 0 a2.6 2.6 0 1 1 2.6 2.6 a1.4 1.4 0 1 1 -1.4 -1.4' fill='none' stroke='%233b1f14' stroke-width='.8'/> <rect x='1' y='2' width='42' height='4' rx='2' fill='%23b8862f' stroke='%235e3d10' stroke-width='.8'/><rect x='3' y='2.6' width='38' height='1.2' rx='.6' fill='%23f2ce74' fill-opacity='.8'/><circle cx='2' cy='4' r='2.6' fill='%23d9a83c' stroke='%235e3d10' stroke-width='.8'/><circle cx='42' cy='4' r='2.6' fill='%23d9a83c' stroke='%235e3d10' stroke-width='.8'/></svg>");
  --bzp-rug: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 47'> <rect x='8' y='4' width='28' height='38.5' fill='%231d3a5f' stroke='%232a120c' stroke-width='1'/> <rect x='12' y='9' width='20' height='29.5' fill='%239c2c46' stroke='%232a120c' stroke-width='.6'/> <path d='M10 6 l2 2.5 l2 -2.5' fill='none' stroke='%23f2ce74' stroke-width='.9'/><path d='M14 6 l2 2.5 l2 -2.5' fill='none' stroke='%23f2ce74' stroke-width='.9'/><path d='M18 6 l2 2.5 l2 -2.5' fill='none' stroke='%23f2ce74' stroke-width='.9'/><path d='M22 6 l2 2.5 l2 -2.5' fill='none' stroke='%23f2ce74' stroke-width='.9'/><path d='M26 6 l2 2.5 l2 -2.5' fill='none' stroke='%23f2ce74' stroke-width='.9'/><path d='M30 6 l2 2.5 l2 -2.5' fill='none' stroke='%23f2ce74' stroke-width='.9'/><path d='M22 10 L27 15 L22 20 L17 15 Z' fill='%23f2ce74' stroke='%232a120c' stroke-width='.6'/><path d='M22 19 L27 24 L22 29 L17 24 Z' fill='%2314695a' stroke='%232a120c' stroke-width='.6'/><path d='M22 28 L27 33 L22 38 L17 33 Z' fill='%23f2ce74' stroke='%232a120c' stroke-width='.6'/> <path d='M8 39.5 H36' stroke='%23f2ce74' stroke-width='1' stroke-dasharray='2 2'/> <path d='M9 42 V46' stroke='%23e9dcc2' stroke-width='.9' stroke-linecap='round'/><path d='M11 42 V46' stroke='%23e9dcc2' stroke-width='.9' stroke-linecap='round'/><path d='M13 42 V46' stroke='%23e9dcc2' stroke-width='.9' stroke-linecap='round'/><path d='M15 42 V46' stroke='%23e9dcc2' stroke-width='.9' stroke-linecap='round'/><path d='M17 42 V46' stroke='%23e9dcc2' stroke-width='.9' stroke-linecap='round'/><path d='M19 42 V46' stroke='%23e9dcc2' stroke-width='.9' stroke-linecap='round'/><path d='M21 42 V46' stroke='%23e9dcc2' stroke-width='.9' stroke-linecap='round'/><path d='M23 42 V46' stroke='%23e9dcc2' stroke-width='.9' stroke-linecap='round'/><path d='M25 42 V46' stroke='%23e9dcc2' stroke-width='.9' stroke-linecap='round'/><path d='M27 42 V46' stroke='%23e9dcc2' stroke-width='.9' stroke-linecap='round'/><path d='M29 42 V46' stroke='%23e9dcc2' stroke-width='.9' stroke-linecap='round'/><path d='M31 42 V46' stroke='%23e9dcc2' stroke-width='.9' stroke-linecap='round'/><path d='M33 42 V46' stroke='%23e9dcc2' stroke-width='.9' stroke-linecap='round'/><path d='M35 42 V46' stroke='%23e9dcc2' stroke-width='.9' stroke-linecap='round'/><rect x='1' y='2' width='42' height='4' rx='2' fill='%23b8862f' stroke='%235e3d10' stroke-width='.8'/><rect x='3' y='2.6' width='38' height='1.2' rx='.6' fill='%23f2ce74' fill-opacity='.8'/><circle cx='2' cy='4' r='2.6' fill='%23d9a83c' stroke='%235e3d10' stroke-width='.8'/><circle cx='42' cy='4' r='2.6' fill='%23d9a83c' stroke='%235e3d10' stroke-width='.8'/></svg>");
}
html.dark body .px-lang-picker {
  --bzp-rolled: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 47'> <rect x='8' y='4' width='28' height='9' fill='%237a3e44' stroke='%230d0609' stroke-width='1'/> <path d='M12 13 V9 H32 V13' fill='%23a88c6c' stroke='%230d0609' stroke-width='.6'/> <path d='M22 9 L25 13 H19 Z' fill='%237d8fb8'/> <rect x='6' y='12' width='32' height='10' rx='5' fill='%237a3e44' stroke='%230d0609' stroke-width='1'/> <path d='M10 14.5 H34 M10 19.5 H34' stroke='%237d8fb8' stroke-width='.9' stroke-dasharray='3 2'/> <circle cx='38' cy='17' r='5' fill='%23a88c6c' stroke='%230d0609' stroke-width='1'/> <path d='M38 17 m-2.6 0 a2.6 2.6 0 1 1 2.6 2.6 a1.4 1.4 0 1 1 -1.4 -1.4' fill='none' stroke='%230d0609' stroke-width='.8'/> <rect x='1' y='2' width='42' height='4' rx='2' fill='%23b8862f' stroke='%235e3d10' stroke-width='.8'/><rect x='3' y='2.6' width='38' height='1.2' rx='.6' fill='%23f2ce74' fill-opacity='.8'/><circle cx='2' cy='4' r='2.6' fill='%23d9a83c' stroke='%235e3d10' stroke-width='.8'/><circle cx='42' cy='4' r='2.6' fill='%23d9a83c' stroke='%235e3d10' stroke-width='.8'/></svg>");
}

html body .px-lang-picker .px-lang-picker__panel {
  padding-top: 10px;
  background: var(--bzp-sheet);
  color: var(--bzp-ink);
  border: 0;
  border-radius: 1.25rem 1.25rem 0 0;
  box-shadow: 0 -18px 40px -22px rgba(36, 16, 22, .5);
}
/* the theme's gilt rail, here a brass rod along the top */
html body .px-lang-picker .px-lang-picker__panel::before { content: ''; position: absolute; inset-inline: 0; top: 0; height: 8px; background: linear-gradient(180deg, #f2ce74 0 2px, #d9a83c 2px 4px, #b8862f 4px 6px, #5e3d10 6px 8px); opacity: 1; pointer-events: none; }
html body .px-lang-picker .px-lang-picker__handle { margin-top: 10px; background: var(--bzp-ink); opacity: .28; }
html body .px-lang-picker .px-lang-picker__head { padding: .5rem 1.25rem 1rem; border: 0; }
html body .px-lang-picker .px-lang-picker__eyebrow {
  margin: 0 0 .3rem;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--bzp-ink-soft);
}
html:is(:lang(ar), :lang(ur), :lang(bn), :lang(hi), :lang(zh)) body .px-lang-picker :is(.px-lang-picker__eyebrow, .px-lang-picker__title) { letter-spacing: 0; text-transform: none; }
html body .px-lang-picker .px-lang-picker__title {
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 400;
  font-synthesis: none;
  line-height: 1.15;
  letter-spacing: 0;
  color: var(--bzp-ink);
}
html body .px-lang-picker .px-lang-picker__close {
  border-radius: 50%;
  background: var(--bzp-field);
  color: var(--bzp-ink);
  border: 2px solid var(--bzp-edge);
}
html body .px-lang-picker .px-lang-picker__close:hover { background: var(--bzp-field-lo); }

html body .px-lang-picker .px-lang-picker__search { padding: .2rem 1rem .6rem; }
html body .px-lang-picker .px-lang-picker__search-icon { inset-inline-start: 1.85rem; top: calc(.2rem + 22px); color: var(--bzp-on-field); }
html body .px-lang-picker .px-lang-picker__search-input {
  height: 44px;
  /* the edge is drawn inside and the face is an image, so the dark page's
     field colours can't paint over either */
  border: 0;
  border-radius: 10px;
  background-image: linear-gradient(var(--bzp-field), var(--bzp-field));
  box-shadow: inset 0 0 0 2px var(--bzp-field-ring, var(--bzp-edge));
  color: var(--bzp-on-field);
  -webkit-text-fill-color: var(--bzp-on-field);
  caret-color: var(--bzp-on-field);
  font-family: 'Inter', system-ui, sans-serif;
}
html body .px-lang-picker .px-lang-picker__search-input::placeholder { color: var(--bzp-on-field); -webkit-text-fill-color: var(--bzp-on-field); opacity: .72; }
html body .px-lang-picker .px-lang-picker__search-input:focus { box-shadow: inset 0 0 0 2px var(--bzp-ink-soft), 0 0 0 4px var(--bzp-glow); outline: none; }
/* the field's edge, held apart from the panel where its face and the
   panel are near the same colour */
html:not(.dark) body .px-lang-picker .px-lang-picker__search-input { --bzp-field-ring: #ab843f; }
html.dark body .px-lang-picker .px-lang-picker__search-input { --bzp-field-ring: #905d7c; }
html body .px-lang-picker .px-lang-picker__list { padding: .4rem 1rem 1.1rem; }

/* every row a strip of parchment, a rug rolled up under a short rail at
   its start */
html body .px-lang-picker .px-lang-picker__item {
  position: relative;
  overflow: hidden;
  min-height: 64px;
  margin: 0 0 .5rem;
  padding: .75rem 1rem;
  padding-inline-start: 70px;
  gap: .8rem;
  border: 1px solid var(--bzp-row-edge);
  border-radius: 10px;
  background: linear-gradient(180deg, var(--bzp-row), var(--bzp-row-lo));
  color: var(--bzp-on-row);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 1rem;
  font-weight: 500;
}
html body .px-lang-picker .px-lang-picker__item::before {
  content: '';
  position: absolute;
  inset-inline-start: 12px;
  top: 5px;
  width: 46px;
  height: 50px;
  background: var(--bzp-rolled) center top / contain no-repeat;
  pointer-events: none;
}
html[dir="rtl"] body .px-lang-picker .px-lang-picker__item::before { scale: -1 1; }
html body .px-lang-picker .px-lang-picker__item:hover { border-color: var(--bzp-ink-soft); }

/* the chosen rug unrolled and bright, its strip turned pomegranate */
html body .px-lang-picker .px-lang-picker__item.is-current {
  border: 2px solid var(--bzp-lit-edge);
  background: linear-gradient(180deg, var(--bzp-lit), var(--bzp-lit-lo));
  color: var(--bzp-on-lit);
  font-weight: 700;
}
html body .px-lang-picker .px-lang-picker__item.is-current::before { top: 4px; height: 54px; background-image: var(--bzp-rug); }

html body .px-lang-picker .px-lang-picker__check { width: 1.25rem; height: 1.25rem; color: currentColor; }
html body .px-lang-picker .px-lang-picker__empty {
  margin: 0;
  padding: 1.1rem 1rem;
  border: 2px dashed var(--bzp-edge);
  border-radius: 10px;
  background: var(--bzp-field);
  color: var(--bzp-on-field);
  font-family: 'Inter', system-ui, sans-serif;
}

@media (min-width: 1024px) {
  html body .px-lang-picker .px-lang-picker__panel {
    border-radius: 1.25rem;
    padding-bottom: 0;
    box-shadow: 0 36px 70px -28px rgba(36, 16, 22, .5);
  }
  html body .px-lang-picker .px-lang-picker__head { padding-top: 1.1rem; }
}

/* The rugs drop onto their rails as the picker opens */
@media (prefers-reduced-motion: no-preference) {
  html body .px-lang-picker.is-open .px-lang-picker__item::before { animation: bzp-drop .44s cubic-bezier(.4, 0, .6, 1) both; }
  html body .px-lang-picker.is-open .px-lang-picker__item:nth-child(2)::before { animation-delay: .03s; }
  html body .px-lang-picker.is-open .px-lang-picker__item:nth-child(3)::before { animation-delay: .06s; }
  html body .px-lang-picker.is-open .px-lang-picker__item:nth-child(4)::before { animation-delay: .09s; }
  html body .px-lang-picker.is-open .px-lang-picker__item:nth-child(n+5)::before { animation-delay: .12s; }
}
@keyframes bzp-drop {
  0% { transform: translateY(-50px); opacity: 0; }
  30% { opacity: 1; }
  70% { transform: translateY(2px); }
  85% { transform: translateY(-2px); }
  100% { transform: none; }
}

/* Forced colours: the rails and rugs are painted, so every row keeps a
   frame and the chosen one a system outline and its tick */
@media (forced-colors: active) {
  html body .px-lang-picker .px-lang-picker__panel { border: 1px solid CanvasText; }
  html body .px-lang-picker .px-lang-picker__panel::before,
  html body .px-lang-picker .px-lang-picker__item::before { display: none; }
  html body .px-lang-picker .px-lang-picker__item,
  html body .px-lang-picker .px-lang-picker__item.is-current { border: 1px solid CanvasText; padding: .6rem 1rem; }
  html body .px-lang-picker .px-lang-picker__item.is-current { outline: 3px solid Highlight; outline-offset: 1px; }
  html body .px-lang-picker .px-lang-picker__check { color: Highlight; }
  html body .px-lang-picker .px-lang-picker__search-input { border: 1px solid FieldText; -webkit-text-fill-color: FieldText; }
  html body .px-lang-picker .px-lang-picker__search-input::placeholder { -webkit-text-fill-color: GrayText; }
}

/* Windows (wallet, sign-out and the plugins' windows) sit on their own panel,
   so the secondary text, accent links and buttons in them take the deeper
   shades below to read at 4.5:1 there; the page around keeps its own. */
html:not(.dark) [role="dialog"] {
  --ink-soft: #83685e;
  --bz-gold: #8d6724;
}
html.dark .wallet-modal-panel .amount-btn.selected {
  border-color: #7e2138;
  background: linear-gradient(180deg, #9c2c46, #7e2138);
}
/* rev 9ebb72f2de9bf230 */