/* ============================================================
   DIWALI THEME — "Deepotsav", a row of lamps.
   Same class surface as editorial/theme.css, so shared header,
   footer, drawer and component classes stay styled.

   Light mode is a marigold morning (ivory paper, aubergine ink,
   marigold accent); dark mode is the new-moon night of Diwali
   (peacock-night paper, ivory ink, lamplight gold). Rani pink
   marks anything live; peacock teal is the quiet second accent.

   The theme sets the --theme-* accent ramp itself, so the admin's
   accent colour setting does not apply while Diwali is active.
   ============================================================ */

:root {
  --font-display: 'Rozha One', 'Mukta', Georgia, serif;
  --font-ui:      'Mukta', 'Inter', system-ui, sans-serif;

  --paper:        #fff6e6;
  --paper-2:      #fffcf5;
  --paper-3:      #fbe9c9;
  --ink:          #2a0e22;
  --ink-2:        #4e2a42;
  --ink-soft:     #75566a;
  --rule:         rgba(122, 62, 20, 0.17);
  --rule-soft:    rgba(122, 62, 20, 0.08);
  --radius:       14px;
  --radius-sm:    10px;
  --shadow:       0 1px 2px rgba(74, 32, 10, .08), 0 2px 6px rgba(74, 32, 10, .05);
  --shadow-md:    0 14px 34px -14px rgba(74, 32, 10, .28);

  /* Marigold by day */
  --theme-50:  #fff8e8;
  --theme-100: #ffedc4;
  --theme-200: #ffd98a;
  --theme-300: #fcc253;
  --theme-400: #f5a524;
  --theme-500: #e08a00;
  --theme-600: #b86b00;
  --theme-700: #8f5000;
  --theme-800: #6b3b00;
  --theme-900: #4a2800;
  --theme-500-rgb: 224, 138, 0;
  --theme-600-rgb: 184, 107, 0;
  /* Small gold lettering (eyebrows, labels, links): marigold 600 is 4:1 on
     the ivory paper, so by day text takes a deeper step of it. Fills keep
     --theme-600. */
  --dw-gold-text: #9a5a00;

  /* Names other themes' shared markup reaches for */
  --gold:       var(--theme-500);
  --gold-2:     var(--theme-400);
  --gold-soft:  rgba(224, 138, 0, 0.14);
  --gold-ink:   #2a0e22;
  --felt:       #1b2a6b;
  --felt-2:     #0b1230;
  --on-felt:    #fbf1dc;
  --on-felt-soft: rgba(251, 241, 220, 0.74);

  --rani:       #c2185b;
  --rani-soft:  rgba(194, 24, 91, 0.10);
  --peacock:    #0e6f73;
  --peacock-soft: rgba(14, 111, 115, 0.10);
  --flame:      #ffb11f;
  --flame-core: #fff4c2;
  --clay:       #a4502a;
  --clay-2:     #7a3519;

  --notify-accent: var(--theme-500);
  --nav-accent:    var(--theme-600);
  /* Cart badges sit on --theme-600; marigold by day, gold by night, so
     their count is dark ink in both modes. */
  --theme-600-ink: #2a0e22;
  --hdr-strip-bg:  #2a0e22;
  --hdr-strip-rule: transparent;
  --text-primary:  var(--ink);

  /* Button: brass leaf with dark ink lettering */
  --btn-bg:      linear-gradient(180deg, #f8b733 0%, #e08a00 100%);
  --btn-bg-hover: linear-gradient(180deg, #ffc44d 0%, #ec9400 100%);
  --btn-ink:     #2a0e22;
  --btn-edge:    #a35f00;

  /* Kolam dot grid — the threshold-drawing grid, very faint */
  --kolam: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='28'><circle cx='14' cy='14' r='1.1' fill='%23b86b00' fill-opacity='0.16'/></svg>");
  /* Zari border — a woven sari edge used under the header and as dividers */
  --zari: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='8' viewBox='0 0 24 8'><rect width='24' height='8' fill='%232a0e22'/><path d='M0 4 L4 1 L8 4 L4 7 Z M12 4 L16 1 L20 4 L16 7 Z' fill='%23e08a00'/><circle cx='10' cy='4' r='1' fill='%23ffd98a'/><circle cx='22' cy='4' r='1' fill='%23ffd98a'/></svg>");

  --page-bg:
    radial-gradient(1100px 520px at 50% -160px, rgba(255, 177, 31, 0.16), transparent 70%) no-repeat,
    var(--kolam) repeat,
    var(--paper);
}

html.dark {
  --paper:        #0b1230;
  --paper-2:      #131c45;
  --paper-3:      #1b2757;
  --ink:          #fbf1dc;
  --ink-2:        #e6d8bc;
  --ink-soft:     #b3a68f;
  --rule:         rgba(246, 200, 95, 0.18);
  --rule-soft:    rgba(246, 200, 95, 0.08);
  --shadow:       0 1px 3px rgba(0, 0, 0, .45), 0 1px 2px rgba(0, 0, 0, .3);
  --shadow-md:    0 16px 40px -14px rgba(0, 0, 0, .65), 0 0 0 1px rgba(246, 200, 95, .08);

  /* Lamplight gold by night */
  --theme-50:  #2a2410;
  --theme-100: #3b3114;
  --theme-200: #6e5419;
  --theme-300: #f9da8b;
  --theme-400: #f6c85f;
  --theme-500: #efb23c;
  --theme-600: #d99a22;
  --theme-700: #b07a12;
  --theme-800: #7d560c;
  --theme-900: #4d3507;
  --theme-500-rgb: 239, 178, 60;
  --theme-600-rgb: 217, 154, 34;
  --dw-gold-text: var(--theme-600);

  --gold:       var(--theme-500);
  --gold-2:     var(--theme-400);
  --gold-soft:  rgba(239, 178, 60, 0.16);
  --gold-ink:   #1a1205;

  --rani:       #ef5a8f;
  --rani-soft:  rgba(239, 90, 143, 0.14);
  --peacock:    #38c1bb;
  --peacock-soft: rgba(56, 193, 187, 0.12);

  --nav-accent:    var(--theme-400);
  --hdr-strip-bg:  #070b1f;
  /* Picture wells after dark: a low lamplit glow, warm graphite at the
     middle and night blue at the rim, so black products keep their shape
     and white ones don't glare. */
  --dw-well: radial-gradient(circle closest-side at 50% 48%, #5e4c3a 0, #574738 30%, #463f4c 60%, #2a2f5c 86%, #1c2758 100%) #1c2758;
  --dw-well-thumb: radial-gradient(circle closest-side, #5e4c3a 0, #574738 40%, #463f4c 72%, #2a2f5c 100%) #2a2f5c;
  --theme-600-ink: #1a1205;

  --btn-bg:      linear-gradient(180deg, #f9d06c 0%, #e5a52c 100%);
  --btn-bg-hover: linear-gradient(180deg, #ffdc85 0%, #efb23c 100%);
  --btn-ink:     #1a1205;
  --btn-edge:    #9a6a10;

  --kolam: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='28'><circle cx='14' cy='14' r='1.1' fill='%23f6c85f' fill-opacity='0.10'/></svg>");
  --zari: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='8' viewBox='0 0 24 8'><rect width='24' height='8' fill='%23070b1f'/><path d='M0 4 L4 1 L8 4 L4 7 Z M12 4 L16 1 L20 4 L16 7 Z' fill='%23efb23c'/><circle cx='10' cy='4' r='1' fill='%23ef5a8f'/><circle cx='22' cy='4' r='1' fill='%23ef5a8f'/></svg>");

  --page-bg:
    radial-gradient(900px 520px at 12% 108%, rgba(239, 178, 60, 0.10), transparent 70%) no-repeat,
    radial-gradient(900px 520px at 88% 108%, rgba(239, 90, 143, 0.07), transparent 70%) no-repeat,
    var(--kolam) repeat,
    var(--paper);
}

/* ── Base ──
   Tailwind's compiled sheet loads after the theme, so selectors that must
   beat its single-class utilities (.font-display, .font-sans) carry an
   extra html qualifier. */
html body {
  background: var(--page-bg);
  background-attachment: fixed;
  color: var(--ink);
  font-family: var(--font-ui);
}
html .font-sans { font-family: var(--font-ui); }

html .font-display, h1.display, h2.display, h3.display {
  font-family: var(--font-display);
  font-weight: 400;
  font-synthesis: none;
  letter-spacing: 0;
}
.display-italic { font-style: normal; }

::selection { background: rgba(var(--theme-500-rgb), 0.32); color: var(--ink); }

.text-gradient-theme {
  background: linear-gradient(180deg, var(--theme-400) 0%, var(--theme-600) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.ed-eyebrow {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--dw-gold-text);
}
html.dark .ed-eyebrow { color: var(--theme-400); }

.ed-eyebrow-tight {
  font-size: 9px !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
}

/* Section eyebrow — a small diya mark instead of a rule */
html .section-eyebrow {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-family: var(--font-ui);
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.16em;
  color: var(--dw-gold-text);
  margin-bottom: 0.7rem;
}
html.dark .section-eyebrow { color: var(--theme-400); }
html .section-eyebrow::before {
  content: ''; flex-shrink: 0;
  width: 18px; height: 14px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 28'><path d='M18 1c3 4 5 7 5 10a5 5 0 0 1-10 0c0-3 2-6 5-10z' fill='%23ffb11f'/><path d='M18 6c1.4 2 2.2 3.4 2.2 4.8a2.2 2.2 0 0 1-4.4 0c0-1.4.8-2.8 2.2-4.8z' fill='%23fff4c2'/><path d='M2 16h32c-1 6.5-7.5 11-16 11S3 22.5 2 16z' fill='%23a4502a'/><path d='M2 16h32c-.3 1.4-.9 2.6-1.7 3.6H3.7C2.9 18.6 2.3 17.4 2 16z' fill='%237a3519'/></svg>") center / contain no-repeat;
}

.btn-view-all {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-family: var(--font-ui);
  font-size: 0.86rem; font-weight: 600;
  white-space: nowrap; flex-shrink: 0;
  color: var(--ink);
  padding-bottom: 3px;
  border-bottom: 2px solid var(--theme-400);
  text-decoration: none;
  transition: gap 0.18s ease, color 0.18s ease;
}
.btn-view-all:hover { gap: 0.75rem; color: var(--dw-gold-text); }
html.dark .btn-view-all:hover { color: var(--theme-300); }
[dir="rtl"] .btn-view-all svg { transform: scaleX(-1); }

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

.ed-grain::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: var(--kolam);
}

.ed-folio {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 400;
  color: var(--dw-gold-text);
}
html.dark .ed-folio { color: var(--theme-400); }

/* ── Header ── */
#desktopHeader .hdr-search {
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 999px;
}
#desktopHeader .hdr-search:hover { border-color: rgba(var(--theme-500-rgb), 0.45); }
#desktopHeader .hdr-search:focus-within {
  border-color: var(--theme-500);
  box-shadow: 0 0 0 3px rgba(var(--theme-500-rgb), 0.18);
}
html.dark #desktopHeader .hdr-search { background: var(--paper-2); border-color: var(--rule); }
html.dark #desktopHeader .hdr-search:focus-within { border-color: var(--theme-500); }
.ed-search { background: transparent; border: none; }

/* The status strip sits on deep aubergine in both modes */
.hdr-strip, .hdr-strip .ed-status { color: rgba(251, 241, 220, 0.78); }
.hdr-strip a:hover, .hdr-strip button:hover { color: #ffd98a; }

/* Woven zari band under the main header bar */
.dw-zari {
  height: 8px;
  background: var(--zari) repeat-x;
  background-size: 24px 8px;
}
.dw-zari--thin { height: 6px; background-size: 18px 6px; }

.ed-subnav { align-items: center; background: var(--paper-2); border-bottom: 1px solid var(--rule); }
.ed-subnav-inner { display: flex; align-items: center; gap: 1.25rem; width: 100%; padding: 0.6rem 2rem; }
@media (min-width: 1280px) { .ed-subnav-inner { padding-left: 2.5rem; padding-right: 2.5rem; } }
.ed-subnav-eyebrow {
  flex-shrink: 0;
  font-family: var(--font-ui);
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--dw-gold-text);
  white-space: nowrap;
  padding-right: 1.25rem;
  border-right: 1px solid var(--rule);
}
html.dark .ed-subnav-eyebrow { color: var(--theme-400); }
[dir="rtl"] .ed-subnav-eyebrow { padding-right: 0; padding-left: 1.25rem; border-right: 0; border-left: 1px solid var(--rule); }
.ed-subnav-items { display: flex; align-items: center; gap: 0.2rem; flex-wrap: wrap; }
.ed-subnav-item {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.42rem 0.85rem;
  border-radius: 999px;
  font-family: var(--font-ui);
  font-size: 0.9rem; font-weight: 500;
  color: var(--ink-2);
  text-decoration: none;
  border: 1px solid transparent;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.ed-subnav-item svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; flex-shrink: 0; }
.ed-subnav-item:hover { color: var(--ink); background: var(--paper); border-color: var(--rule); }
.ed-subnav-item.active { background: var(--btn-bg); color: var(--btn-ink); border-color: var(--btn-edge); }
.ed-subnav-item:focus-visible { outline: 2px solid var(--theme-500); outline-offset: 2px; }

/* ── Links and buttons ── */
.ed-link-arrow {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-family: var(--font-ui);
  font-size: 0.9rem; font-weight: 600;
  color: var(--ink); text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 2px solid var(--theme-400);
  transition: gap 0.18s ease, color 0.18s ease;
}
.ed-link-arrow:hover { gap: 0.7rem; color: var(--dw-gold-text); }
html.dark .ed-link-arrow:hover { color: var(--theme-300); }

/* Primary — brass leaf: gold gradient, darker edge, dark lettering */
.ed-btn-primary, .ed-plan-cta, .drawer-login {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
  padding: 0.8rem 1.55rem;
  white-space: nowrap;
  font-family: var(--font-ui);
  font-size: 0.95rem; font-weight: 700;
  color: var(--btn-ink);
  background: var(--btn-bg);
  border: 1px solid var(--btn-edge);
  border-radius: 999px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 6px 16px -8px rgba(var(--theme-500-rgb), 0.7);
  text-decoration: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
html .ed-btn-primary:hover, html .ed-plan-cta:hover, html .drawer-login:hover {
  background: var(--btn-bg-hover);
  color: var(--btn-ink);
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 10px 22px -10px rgba(var(--theme-500-rgb), 0.85);
}
html.dark .ed-btn-primary, html.dark .ed-btn-primary:hover,
html.dark .ed-plan-cta, html.dark .ed-plan-cta:hover,
html.dark button.ed-plan-cta { color: var(--btn-ink); }
.ed-btn-primary:focus-visible, .ed-btn-secondary:focus-visible, .ed-plan-cta:focus-visible {
  outline: 2px solid var(--rani); outline-offset: 3px;
}

.ed-btn-secondary {
  display: inline-flex; align-items: center; gap: 0.55rem;
  padding: 0.78rem 1.45rem;
  font-family: var(--font-ui);
  font-size: 0.92rem; 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;
}
.ed-btn-secondary:hover { border-color: var(--theme-500); background: var(--paper); }
html.dark .ed-btn-secondary { color: var(--ink); }

:is([data-bnr-layout="cover"], [data-bnr-layout="product"]) .ed-btn-primary { color: #2a0e22; }

/* ── Cards ──
   A brass plate: hairline frame with a second inner line, and a small
   rangoli quarter in the top corner. */
html .ed-plan, html .shop-card {
  position: relative;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: inset 0 0 0 4px var(--paper-2), inset 0 0 0 5px var(--rule-soft);
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
html .ed-plan:hover, html .shop-card:hover {
  border-color: rgba(var(--theme-500-rgb), 0.6);
  box-shadow: inset 0 0 0 4px var(--paper-2), inset 0 0 0 5px rgba(var(--theme-500-rgb), 0.22), var(--shadow-md);
}
html .ed-plan-featured {
  position: relative;
  background: linear-gradient(160deg, #1b2a6b 0%, #0b1230 100%);
  color: #fbf1dc;
  border: 1px solid rgba(246, 200, 95, 0.35);
  border-radius: var(--radius);
  overflow: hidden;
}
html.dark .ed-plan-featured { background: linear-gradient(160deg, #22306f 0%, #131c45 100%); color: var(--ink); }
.ed-plan-hairline { border-color: var(--rule); }
.ed-plan-featured .ed-plan-hairline { border-color: rgba(246, 200, 95, 0.22); }

.dw-corner::after {
  content: ''; position: absolute; top: 8px; right: 8px;
  width: 34px; height: 34px; pointer-events: none;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'><g fill='none' stroke='%23e08a00' stroke-width='1.2' stroke-opacity='.55'><path d='M40 0 A40 40 0 0 1 0 40'/><path d='M40 10 A30 30 0 0 1 10 40'/><path d='M40 20 A20 20 0 0 1 20 40'/></g><g fill='%23c2185b' fill-opacity='.55'><circle cx='40' cy='0' r='3'/><circle cx='29' cy='29' r='1.6'/></g></svg>") no-repeat;
}
[dir="rtl"] .dw-corner::after { right: auto; left: 8px; transform: scaleX(-1); }

/* ── Status text ── */
.ed-status {
  font-family: var(--font-ui);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
}

.ed-topnav-link { color: rgba(251, 241, 220, 0.78); text-decoration: none; transition: color 0.16s ease; }
.ed-topnav-link:hover, .ed-topnav-link.active { color: #ffd98a; }

/* ── Drawer ── */
.drawer-section-label {
  display: flex; align-items: center; gap: 0.6rem;
  font-family: var(--font-ui);
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--dw-gold-text);
  padding: 1.1rem 1.5rem 0.4rem;
}
html.dark .drawer-section-label { color: var(--theme-400); }
.drawer-section-label::after {
  content: ''; flex: 1; height: 6px;
  background: var(--zari) repeat-x; background-size: 18px 6px; opacity: .55;
}
.drawer-nav-row {
  display: flex; align-items: center; gap: 0.85rem;
  padding: 0.65rem 1.5rem;
  font-family: var(--font-ui);
  font-size: 1rem; 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-3); color: var(--ink); }
.drawer-logout, .drawer-login {
  margin: 1rem 1.5rem 1.25rem;
  padding: 0.85rem 1rem;
}
.drawer-logout {
  display: flex; align-items: center; justify-content: center; gap: 0.5rem;
  border-radius: 999px;
  font-family: var(--font-ui); font-size: 0.95rem; font-weight: 600;
  color: var(--rani); border: 1px solid var(--rani-soft);
  text-decoration: none;
}
.drawer-logout:hover { background: var(--rani-soft); }

.mobile-glass-header {
  background: rgba(255, 246, 230, 0.9);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  border-bottom: 1px solid var(--rule);
}
html.dark .mobile-glass-header { background: rgba(11, 18, 48, 0.88); }

.ed-avatar-ring {
  box-shadow: 0 0 0 2px var(--paper), 0 0 0 3.5px var(--theme-500);
}

[x-cloak] { display: none !important; }

.ed-dropdown {
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 1.1rem;
  box-shadow: 0 30px 60px -22px rgba(74, 32, 10, 0.32);
  overflow: hidden;
}
html.dark .ed-dropdown { background: var(--paper-2); box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.65); }
.ed-dropdown-item {
  display: flex; align-items: center; gap: 0.85rem;
  padding: 0.68rem 1rem;
  font-family: var(--font-ui);
  font-size: 0.95rem; 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-3); color: var(--ink); }
.ed-section-cap {
  font-family: var(--font-ui);
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--dw-gold-text);
  padding: 0.9rem 1rem 0.4rem;
}
html.dark .ed-section-cap { color: var(--theme-400); }

/* Floating mobile pill nav (includes/footer.php) */
.ed-mobile-link.active { color: var(--nav-accent); }

/* ── Live and countdown accents ──
   Shared cards mark live state with red/green Tailwind dots; rani pink
   reads as festive rather than alarming. */
.dw-live {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .2rem .6rem; border-radius: 999px;
  background: var(--rani-soft); color: var(--rani);
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.dw-live::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor;
}

/* ── Lamps ──
   One diya, drawn in CSS so it scales with font size. The flame flickers
   slowly; the flicker stops for reduced motion and the lamp stays lit. */
.dw-diya { position: relative; display: inline-block; width: 2.4em; height: 1.9em; }
.dw-diya__bowl {
  position: absolute; left: 0; right: 0; bottom: 0; height: 0.95em;
  background: linear-gradient(180deg, var(--clay) 0%, var(--clay-2) 100%);
  border-radius: 0.1em 0.1em 1.2em 1.2em / 0.1em 0.1em 1em 1em;
  box-shadow: inset 0 0.12em 0 rgba(255, 210, 160, 0.35);
}
.dw-diya__bowl::before {
  content: ''; position: absolute; left: 12%; right: 12%; top: 0.18em; height: 0.12em;
  background: repeating-linear-gradient(90deg, #ffd98a 0 0.14em, transparent 0.14em 0.32em);
  opacity: .75; border-radius: 1em;
}
.dw-diya__flame {
  position: absolute; left: 50%; bottom: 0.82em;
  width: 0.62em; height: 0.98em; margin-left: -0.31em;
  background: radial-gradient(60% 55% at 50% 70%, var(--flame-core) 0%, #ffd34d 45%, var(--flame) 70%, rgba(255, 120, 0, 0) 100%);
  border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%;
  transform-origin: 50% 100%;
  filter: drop-shadow(0 0 0.35em rgba(255, 177, 31, 0.85));
  animation: dw-flicker 3.2s ease-in-out 4 forwards;
}
.dw-diya--out .dw-diya__flame { opacity: 0; animation: none; }
@keyframes dw-flicker {
  0%, 100% { transform: scale(1, 1) rotate(0deg); }
  30%      { transform: scale(0.94, 1.05) rotate(-2deg); }
  55%      { transform: scale(1.03, 0.96) rotate(1.5deg); }
  80%      { transform: scale(0.97, 1.03) rotate(-1deg); }
}

@media (prefers-reduced-motion: reduce) {
  .dw-diya__flame { animation: none !important; }
}

/* ── Dark/light toggle: a spiral of lamps ──
   assets/themes/diwali/assets/js/diwali.js lights one diya in a rangoli at
   the middle of the screen, then lamp after lamp along a golden-angle spiral
   out past the corners. Each lamp's glow is the new mode's ground, so the
   glows pool into it; a veil under them closes the last gaps before the mode
   flips. Going dark the ground is the Diwali night with gold lamplight;
   going light it is a saffron dawn. */
.px-fx--dw-spiral { position: fixed; inset: 0; z-index: 2147483000; pointer-events: none; overflow: hidden; }
.px-fx--dw-spiral.is-to-dark { --fx-ground: #10183d; --fx-halo: rgba(255, 186, 72, .55); --fx-petal: #e08a00; --fx-petal-2: #c2185b; --fx-hub: #f6c85f; }
.px-fx--dw-spiral.is-to-light { --fx-ground: #fff3df; --fx-halo: rgba(255, 150, 30, .45); --fx-petal: #e08a00; --fx-petal-2: #c2185b; --fx-hub: #b86b00; }
.px-fx--dw-spiral .dw-fx-veil { position: absolute; inset: 0; background: var(--fx-ground); opacity: 0; }
.px-fx--dw-spiral .dw-fx-lamp { position: absolute; left: var(--x); top: var(--y); width: 0; height: 0; }
.px-fx--dw-spiral .dw-fx-glow {
  position: absolute; left: calc(var(--glow) / -2); top: calc(var(--glow) / -2); width: var(--glow); height: var(--glow);
  border-radius: 50%; transform: scale(0); will-change: transform;
  background: radial-gradient(circle, var(--fx-halo) 0 5%, var(--fx-ground) 14% 30%, transparent 70%);
}
/* The light spreading out with the spiral, soft at its edge so the lamps
   read as lighting the page rather than stamping circles on it */
.px-fx--dw-spiral .dw-fx-bloom {
  position: absolute; left: var(--cx); top: var(--cy); width: var(--bloom); height: var(--bloom);
  margin: calc(var(--bloom) / -2) 0 0 calc(var(--bloom) / -2); border-radius: 50%;
  background: radial-gradient(circle, var(--fx-ground) 0 52%, transparent 70%);
  transform: scale(0); will-change: transform;
}
.px-fx--dw-spiral .dw-diya {
  position: absolute; left: 0; top: 0; font-size: 15px; margin: -1.3em 0 0 -1.2em;
  opacity: 0; transform: scale(.4);
  filter: drop-shadow(0 0 6px var(--fx-halo));
}
.px-fx--dw-spiral .is-first .dw-diya { font-size: 24px; z-index: 2; }
.px-fx--dw-spiral .dw-diya__flame { animation-duration: 1.1s; }
.px-fx--dw-spiral .dw-fx-rangoli {
  position: absolute; left: var(--cx); top: var(--cy); width: 150px; height: 150px; margin: -75px 0 0 -75px;
  z-index: 1; opacity: 0; transform: scale(.2) rotate(-60deg);
}
.px-fx--dw-spiral .dw-fx-rangoli__a path { fill: var(--fx-petal); }
.px-fx--dw-spiral .dw-fx-rangoli__b path { fill: var(--fx-petal-2); }
.px-fx--dw-spiral .dw-fx-rangoli circle { fill: var(--fx-hub); }

.px-fx--dw-spiral.is-lighting .dw-fx-glow { transition: transform .38s cubic-bezier(.2, .7, .3, 1) var(--d); transform: scale(1); }
.px-fx--dw-spiral.is-lighting .dw-diya { transition: opacity .16s ease var(--d), transform .3s cubic-bezier(.3, 1.6, .5, 1) var(--d); opacity: 1; transform: scale(1); }
.px-fx--dw-spiral.is-lighting .dw-fx-rangoli { transition: transform .5s cubic-bezier(.3, 1.3, .5, 1) .05s, opacity .2s ease .05s; opacity: 1; transform: scale(1) rotate(0); }
.px-fx--dw-spiral.is-lighting .dw-fx-bloom { transition: transform .82s cubic-bezier(.35, .1, .35, 1) .1s; transform: scale(1); }
.px-fx--dw-spiral.is-lighting .dw-fx-veil { transition: opacity .16s ease .7s; opacity: 1; }

.px-fx--dw-spiral.is-ebbing .dw-fx-veil { transition: none; opacity: 0; }
.px-fx--dw-spiral.is-ebbing .dw-fx-bloom { transition: transform .55s cubic-bezier(.6, 0, .8, .4), opacity .4s ease .15s; transform: scale(.15); opacity: 0; }
.px-fx--dw-spiral.is-ebbing .dw-fx-glow { transition: transform .42s cubic-bezier(.5, 0, .7, .4) var(--o), opacity .42s ease var(--o); transform: scale(.25); opacity: 0; }
.px-fx--dw-spiral.is-ebbing .dw-diya { transition: opacity .3s ease calc(var(--o) + .24s); opacity: 0; }
.px-fx--dw-spiral.is-ebbing .dw-fx-rangoli { transition: opacity .3s ease .42s, transform .5s ease .22s; opacity: 0; transform: scale(1.4) rotate(30deg); }

/* ── Footer row of lamps ── */
.dw-lamp-row {
  display: flex; justify-content: space-evenly; align-items: flex-end;
  font-size: 14px; padding: 0 1rem; margin-bottom: -2px;
  overflow: hidden;
}
@media (min-width: 768px) { .dw-lamp-row { font-size: 17px; } }
.dw-lamp-row .dw-diya:nth-child(3n+2) .dw-diya__flame { animation-delay: -1.1s; }
.dw-lamp-row .dw-diya:nth-child(3n) .dw-diya__flame { animation-delay: -2.1s; }
.dw-lamp-row .dw-diya:nth-child(n+9) { display: none; }
@media (min-width: 640px) { .dw-lamp-row .dw-diya:nth-child(n+9) { display: inline-block; } .dw-lamp-row .dw-diya:nth-child(n+15) { display: none; } }
@media (min-width: 1024px) { .dw-lamp-row .dw-diya:nth-child(n+15) { display: inline-block; } }

/* The footer is always night: it sits under the row of lamps. Re-tokened
   locally so the shared footer partials need no changes. */
.dw-footer {
  --paper:     #2a0e22;
  --paper-2:   #3a1630;
  --paper-3:   #4a1f3e;
  --ink:       #fbf1dc;
  --ink-2:     #eadcc2;
  --ink-soft:  #c6b49c;
  --rule:      rgba(246, 200, 95, 0.20);
  --rule-soft: rgba(246, 200, 95, 0.10);
  --theme-500: #efb23c; --theme-600: #f6c85f; --theme-700: #f9da8b;
  --theme-500-rgb: 239, 178, 60;
  border-top: 3px solid #efb23c;
}
html.dark .dw-footer {
  --paper:   #070b1f;
  --paper-2: #0f1638;
  --paper-3: #172052;
}
.dw-footer a:hover { color: #ffd98a; }

/* Desktop floating menu pill (layout/footer-legal.php) */
html .ed-floating-nav {
  background: var(--paper-2);
  border: 1px solid rgba(var(--theme-500-rgb), 0.35);
  box-shadow: 0 18px 40px -16px rgba(0, 0, 0, 0.45);
}
html .ed-floating-nav .ed-floating-link { font-family: var(--font-ui); font-size: .95rem; color: var(--ink-2); }
html .ed-floating-nav .ed-floating-link:hover { background: var(--paper-3); color: var(--ink); }
html body .ed-floating-nav a.ed-floating-link.active {
  background: var(--btn-bg);
  color: var(--btn-ink) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45);
}
html body .ed-floating-nav a.ed-floating-link.active > span { color: var(--btn-ink) !important; }
html.dark #desktopFooter li { color: var(--ink-2) !important; }

/* Newsletter card inside the night footer: a lit panel, not an inverted block */
html body .dw-footer .ed-newsletter {
  background:
    radial-gradient(600px 220px at 100% 0%, rgba(239, 178, 60, .16), transparent 70%),
    var(--paper-2);
  color: var(--ink);
  border: 1px solid rgba(239, 178, 60, .35);
  border-radius: 20px;
}
html body .dw-footer .ed-newsletter::after { display: none; }
html body .dw-footer .ed-newsletter-input {
  background: rgba(0, 0, 0, .22);
  color: var(--ink);
  border: 1px solid rgba(239, 178, 60, .35);
}
html body .dw-footer .ed-newsletter-input::placeholder { color: var(--ink-soft); }
html body .dw-footer .ed-newsletter-input:focus { border-color: #efb23c; background: rgba(0, 0, 0, .3); }
html body .dw-footer .ed-newsletter-btn {
  background: var(--btn-bg); color: #2a0e22; border: 1px solid #a35f00;
  font-family: var(--font-ui); font-weight: 700;
}
html body .dw-footer .ed-newsletter-age { color: var(--ink-2); }

/* Rozha One is a display face: at card-title sizes the shared markup's
   .font-display falls back to the text face in bold, which stays legible. */
html .font-display:is(.text-xs, .text-sm, .text-base, .text-\[10px\], .text-\[11px\], .text-\[12px\], .text-\[13px\], .text-\[14px\], .text-\[15px\]) {
  font-family: var(--font-ui);
  font-weight: 700;
}

/* Long titles and descriptions show in full; a card grows instead of
   clipping them. */
html [class*="line-clamp-"] { -webkit-line-clamp: unset; }

/* ── Dark-mode greys from assets/css/header.css ──
   header.css forces a neutral near-black palette onto Tailwind's light
   utilities with !important. Under Diwali those surfaces follow the night
   palette instead; html.dark out-specifies header.css's .dark selectors. */
html.dark body { background-color: var(--paper) !important; }
html.dark .mobile-glass-header { background: rgba(11, 18, 48, 0.92) !important; border-bottom-color: var(--rule) !important; }
html.dark #desktopFooter { background: var(--paper) !important; }
html.dark .floating-nav-shell,
html.dark .safe-area-bottom > div.mobile-bottom-nav { background: rgba(19, 28, 69, 0.96) !important; }
html.dark .premium-side-menu { background: var(--paper) !important; }
html.dark .premium-profile-header { background: var(--paper-2) !important; }
html.dark .premium-dropdown,
html.dark #mobileExploreSheet .bg-white,
html.dark #logoutModal .bg-white,
html.dark .bg-white,
html.dark [x-data] .bg-white,
html.dark .bg-white.shadow-xl,
html.dark .bg-slate-50,
html.dark .bg-slate-100,
html.dark .odd\:bg-white:nth-child(odd) { background-color: var(--paper-2) !important; }
html.dark .bg-gray-50,
html.dark .even\:bg-gray-50:nth-child(even) { background-color: var(--paper) !important; }
html.dark .bg-gray-100,
html.dark #mobileExploreSheet .bg-gray-100,
html.dark thead { background-color: var(--paper-3) !important; }
html.dark .from-white, html.dark .from-gray-50 { --tw-gradient-from: var(--paper) !important; }
html.dark .to-white, html.dark .to-gray-50 { --tw-gradient-to: var(--paper) !important; }
html.dark .via-white, html.dark .via-gray-50 { --tw-gradient-via: var(--paper-2) !important; }
html.dark .from-gray-100 { --tw-gradient-from: var(--paper-2) !important; }
html.dark .to-gray-100 { --tw-gradient-to: var(--paper-2) !important; }
html.dark .search-input,
html.dark select:not(.no-dark) { background-color: var(--paper-2) !important; }
html.dark .gradient-bg { background: linear-gradient(-45deg, #1b2a6b, #131c45, #0b1230, #22306f) !important; }

/* ── Login / register / forgot-password brand panel ──
   assets/css/pages/login.css paints .brand-panel from --brand-gradient and
   two glows; Diwali sets those and lays a rangoli behind the copy. */
:root, html.dark {
  --brand-gradient: linear-gradient(160deg, #1b2a6b 0%, #0b1230 60%, #070b1f 100%);
  --brand-glow-1: rgba(255, 177, 31, 0.30);
  --brand-glow-2: rgba(239, 90, 143, 0.20);
}
.brand-panel {
  background:
    url("assets/images/dark/rangoli.svg") calc(100% + 160px) calc(100% + 160px) / 460px no-repeat,
    url("assets/images/dark/rangoli.svg") -120px -120px / 300px no-repeat,
    var(--brand-gradient) !important;
}
.brand-panel > .relative { padding: 1.5rem; }
.brand-panel .text-purple-200,
.brand-panel [class*="text-purple-200"] { color: rgba(251, 241, 220, 0.82) !important; }
.brand-panel h2 { font-family: var(--font-display); font-weight: 400 !important; letter-spacing: 0; }

/* ── Wallet balance card ──
   The shared card is designed as a dark panel with light lettering. Diwali
   keeps it night in both modes — a lamplit panel with a rangoli rising from
   its corner — so the white lettering always has its dark ground. */
html body .wallet-hero {
  background:
    url("assets/images/dark/rangoli.svg") calc(100% + 120px) calc(100% + 140px) / 380px no-repeat,
    radial-gradient(520px 260px at 100% 100%, rgba(255, 177, 31, .22), transparent 70%),
    linear-gradient(150deg, #1b2a6b 0%, #0b1230 70%);
  border: 1px solid rgba(239, 178, 60, .35);
  border-radius: 20px;
  color: #fbf1dc;
}
html[dir="rtl"] body .wallet-hero {
  background-position: -120px calc(100% + 140px), 0 100%, 0 0;
}
html body .wallet-hero::before {
  left: 0; right: 0; height: 8px;
  background: var(--zari) repeat-x; background-size: 24px 8px;
}
html body .wallet-balance-num {
  font-family: var(--font-display);
  font-variation-settings: normal;
  font-weight: 400;
  letter-spacing: 0;
  color: #f9da8b;
  text-shadow: 0 0 28px rgba(255, 177, 31, .35);
}
html body .wallet-hero-btn-primary {
  background: linear-gradient(180deg, #f9d06c 0%, #e5a52c 100%);
  color: #1a1205;
  border: 1px solid #9a6a10;
  font-family: var(--font-ui);
  font-weight: 700;
}
html body .wallet-hero-btn-primary:hover { background: linear-gradient(180deg, #ffdc85 0%, #efb23c 100%); color: #1a1205; }
html body .wallet-hero-btn-secondary { font-family: var(--font-ui); color: #fbf1dc; border-color: rgba(251, 241, 220, .35); }

/* Inverted panels: shared markup paints some panels with background
   var(--ink) and letters them in var(--paper), which only works while ink is
   dark. After dark, Diwali re-tokens those panels as lamplit night blue so
   their lettering stays readable. */
html.dark [style*="background: var(--ink)"],
html.dark [style*="background:var(--ink)"],
html.dark [style*="background-color: var(--ink)"],
html.dark [style*="background-color:var(--ink)"] {
  --ink: #1b2a6b;
  --paper: #fbf1dc;
  border-color: rgba(239, 178, 60, .3);
}

/* Fixed mobile page headers (plugin pages) hard-code a near-black glass
   with ink lettering; give them the page's own paper instead. */
html header.safe-top-header[style] {
  background: rgba(255, 246, 230, .94) !important;
}
html.dark header.safe-top-header[style] {
  background: rgba(11, 18, 48, .94) !important;
}

/* Mystery box card (styled by assets/css/pages/home.css): a box of mithai —
   a rani ribbon runs down the picture side and ties at the top edge. */
html .ed-card-mystery {
  background: var(--paper-2);
  border: 1px solid rgba(var(--theme-500-rgb), .32);
  border-radius: 16px;
  overflow: hidden;
}
html .ed-card-mystery:hover { border-color: rgba(var(--theme-500-rgb), .75); box-shadow: var(--shadow-md); }
html .ed-card-mystery::before {
  top: 0; bottom: 0; left: 18%; right: auto; width: 12px; height: auto;
  border-radius: 0;
  background: linear-gradient(90deg, #ad1457, #d81b60 50%, #ad1457);
  opacity: .9; z-index: 0;
}
[dir="rtl"] .ed-card-mystery::before { left: auto; right: 18%; }
html .ed-card-mystery::after {
  content: ''; position: absolute; top: -2px; left: calc(18% - 13px);
  width: 38px; height: 20px; z-index: 1; pointer-events: none;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 38 20'><path d='M19 10 C10 0 2 2 4 9 C6 15 14 13 19 10Z M19 10 C28 0 36 2 34 9 C32 15 24 13 19 10Z' fill='%23d81b60' stroke='%23ad1457'/><circle cx='19' cy='10' r='3.4' fill='%23efb23c'/></svg>") no-repeat;
}
[dir="rtl"] .ed-card-mystery::after { left: auto; right: calc(18% - 13px); }
html .ed-card-mystery img { position: relative; z-index: 1; }

/* ── Product page buy box ──
   A gold-leaf edge along the top and a rangoli corner; the price is set in
   the display face. */
html body .pd-buybox {
  position: relative;
  background: var(--paper-2);
  border: 1px solid rgba(var(--theme-500-rgb), .35);
  box-shadow: inset 0 0 0 5px var(--paper-2), inset 0 0 0 6px var(--rule-soft), 0 24px 50px -32px rgba(0, 0, 0, .45);
}
html body .pd-buybox::before {
  content: ''; position: absolute; top: -1px; left: 24px; right: 24px; height: 4px;
  border-radius: 0 0 4px 4px;
  background: linear-gradient(90deg, #b07a12, #f9da8b 30%, #efb23c 55%, #fff4c2 70%, #b07a12);
}
html body .pd-buybox .font-display.text-4xl { font-weight: 400; color: var(--theme-700); }
html.dark body .pd-buybox .font-display.text-4xl { color: var(--theme-300); }
.pd-title { font-weight: 400 !important; }
@media (max-width: 640px) {
  html body .wallet-hero {
    background:
      url("assets/images/dark/rangoli.svg") calc(100% + 70px) -70px / 190px no-repeat,
      radial-gradient(320px 200px at 100% 0%, rgba(255, 177, 31, .2), transparent 70%),
      linear-gradient(150deg, #1b2a6b 0%, #0b1230 70%);
  }
  html[dir="rtl"] body .wallet-hero { background-position: -70px -70px, 0 0, 0 0; }
}

/* Same for single-line truncation: text wraps onto another line rather
   than ending in an ellipsis. */
html body .truncate {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: anywhere;
}

/* The mystery box plugin's own button is ink on paper, and dynamic-theme's
   ".dark button" colour rule turns its label the same colour as its fill.
   The plugin's Diwali styles fix this properly; this keeps the button
   readable on sites still running a plugin release without them. */
html.dark button.spin-btn:not(:disabled) { color: var(--paper); }

/* .text-fit (assets/css/header.css) keeps a title on one line and shrinks it
   with JS, measured before the display face has loaded; Rozha One then sets
   wider and the title ends in an ellipsis. Under Diwali the title wraps. */
html body .text-fit { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }

/* Shared markup's stock purple and indigo accents (coupon buttons, tier
   chips, focus rings) become rani pink, the theme's second accent. */
html .bg-purple-600, html .bg-indigo-600, html .bg-violet-600 { background-color: #c2185b; }
html .hover\:bg-purple-700:hover, html .hover\:bg-indigo-700:hover, html .hover\:bg-violet-700:hover { background-color: #ad1457; }
html .text-purple-500, html .text-purple-600, html .text-indigo-500, html .text-indigo-600, html .text-violet-600 { color: var(--rani); }
html .bg-purple-50, html .bg-indigo-50, html .bg-violet-50 { background-color: var(--rani-soft); }
html.dark .bg-purple-50, html.dark .bg-indigo-50, html.dark .bg-violet-50 { background-color: var(--rani-soft) !important; }
html .border-purple-200, html .border-indigo-200, html .border-violet-200 { border-color: rgba(194, 24, 91, .3); }
html.dark .border-violet-200 { border-color: rgba(239, 90, 143, .35) !important; }
html .focus\:ring-purple-400:focus { --tw-ring-color: rgba(194, 24, 91, .45); }
html .focus\:border-purple-400:focus { border-color: var(--rani); }

/* ── Winners page cards (components/winners/card.php) ── */
html .wnc {
  border-radius: 16px;
  background: var(--paper-2);
  border: 1px solid rgba(var(--theme-500-rgb), .3);
  box-shadow: inset 0 0 0 4px var(--paper-2), inset 0 0 0 5px var(--rule-soft);
}
html .wnc:hover { border-color: rgba(var(--theme-500-rgb), .75); box-shadow: var(--shadow-md); }

/* ── Cart and checkout ──
   The shared panels are picked out by what they contain, so no copies of
   their markup (or their Alpine hooks) live in the theme. The order
   total is a brass plate with a gold-leaf edge; the rows are plates. */
html [id^="cart-row-"] {
  background: var(--paper-2) !important;
  border-color: rgba(var(--theme-500-rgb), .28) !important;
}
html .rounded-2xl:has(> div > div > #summary-total),
html section.rounded-2xl:has([x-text="totalDisplay()"]) {
  position: relative;
  background: var(--paper-2) !important;
  border: 1px solid rgba(var(--theme-500-rgb), .45) !important;
  box-shadow: inset 0 0 0 4px var(--paper-2), inset 0 0 0 5px rgba(var(--theme-500-rgb), .18), 0 18px 40px -26px rgba(0, 0, 0, .5) !important;
  overflow: hidden;
}
html .rounded-2xl:has(> div > div > #summary-total)::before,
html section.rounded-2xl:has([x-text="totalDisplay()"])::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, #b07a12, #f9da8b 30%, #efb23c 55%, #fff4c2 70%, #b07a12);
}
html #summary-total,
html section.rounded-2xl [x-text="totalDisplay()"] {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.6rem;
  color: var(--theme-700) !important;
}
html.dark #summary-total,
html.dark section.rounded-2xl [x-text="totalDisplay()"] { color: var(--theme-300) !important; }

/* Shared buttons drawn in the accent with white lettering (Place Order,
   Buy Now bars) are brass leaf with dark lettering, which stays readable
   on the lighter night-mode gold. */
html .bg-theme-600.text-white,
html .bg-theme-500.text-white {
  background: var(--btn-bg) !important;
  color: var(--btn-ink) !important;
  border: 1px solid var(--btn-edge);
}
html .bg-theme-600.text-white:hover,
html .bg-theme-500.text-white:hover { background: var(--btn-bg-hover) !important; }
html .bg-theme-600.text-white [class*="border-white"] { border-color: rgba(42, 14, 34, .3); border-top-color: var(--btn-ink); }
html .bg-purple-100 { background-color: var(--rani-soft); }
html .bg-blue-600.text-white, html .bg-blue-500.text-white { background: var(--btn-bg) !important; color: var(--btn-ink) !important; border: 1px solid var(--btn-edge); }
html .hover\:bg-blue-700.text-white:hover { background: var(--btn-bg-hover) !important; }

/* Logo plate: an ivory cartouche with a gold double rule and woven zari
   along its top and bottom edges. Used wherever the logo sits on night
   blue (app splash, footer), so a logo made for light backgrounds still
   reads. */
.dw-logo-plate {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 1.1rem 1.9rem;
  background: #fff6e6;
  border: 1px solid #c98e1c;
  border-radius: 16px;
  box-shadow:
    inset 0 0 0 4px #fff6e6, inset 0 0 0 5px rgba(201, 142, 28, .55),
    0 0 0 4px rgba(255, 177, 31, .12), 0 18px 40px -16px rgba(0, 0, 0, .6);
}
.dw-logo-plate::before, .dw-logo-plate::after {
  content: ''; position: absolute; left: 14px; right: 14px; height: 6px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='6' viewBox='0 0 24 8'><rect width='24' height='8' fill='%23fff6e6'/><path d='M0 4 L4 1 L8 4 L4 7 Z M12 4 L16 1 L20 4 L16 7 Z' fill='%23e08a00'/><circle cx='10' cy='4' r='1' fill='%23c2185b'/><circle cx='22' cy='4' r='1' fill='%23c2185b'/></svg>") repeat-x;
  background-size: 18px 6px;
}
.dw-logo-plate::before { top: -3px; }
.dw-logo-plate::after { bottom: -3px; }
.dw-logo-plate--sm { padding: .75rem 1.25rem; border-radius: 12px; }

/* assets/css/pages/home.css (loaded after the theme) repaints .ed-plan-cta
   in ink; on Diwali every card action is brass leaf, as on the auction
   cards. */
html body .ed-plan-cta,
html body .ed-plan-featured .ed-plan-cta,
html.dark body .ed-plan-cta,
html.dark body .ed-plan-featured .ed-plan-cta {
  background: var(--btn-bg);
  color: var(--btn-ink);
  border: 1px solid var(--btn-edge);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 6px 16px -8px rgba(var(--theme-500-rgb), .7);
}
html body .ed-plan-cta:hover,
html body .ed-plan-featured .ed-plan-cta:hover,
html.dark body .ed-plan-cta:hover { background: var(--btn-bg-hover); color: var(--btn-ink); border-color: var(--btn-edge); }

/* ── Materials ──
   What every surface past the homepage is built from, shared by the skin
   sheets (assets/css/skin/) and the plugin variants:
   - a toran: mango leaves and marigolds on a gold cord, hung along the top
     of dialogs, sheets and section heads;
   - zari (above), the woven sari edge, for bands and table heads;
   - gold leaf, a bright gilt line, for rims and progress;
   - a rangoli rosette as a mask, behind icons and the current page;
   - a ring of rangoli dots round thumbnails and medallions;
   - the night panel: deep blue lit from one corner by lamplight. */
:root {
  --leaf:        #3f7d2c;
  --marigold:    #e8730c;
  --rg1: var(--rani);
  --rg2: var(--theme-500);
  --rg3: var(--peacock);
  --rg4: var(--leaf);

  --toran: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='56' height='30' viewBox='0 0 56 30'><path d='M0 3.2 H56' stroke='%23c98e1c' stroke-width='2.2'/><path d='M0 3.2 H56' stroke='%23fff0b8' stroke-width='.7' stroke-dasharray='2 3'/><path d='M14 4 C7.5 10 8.5 20 14 28 C19.5 20 20.5 10 14 4Z' fill='%233f7d2c'/><path d='M14 6 V25' stroke='%2391c46c' stroke-width='.9'/><path d='M42 3 V9' stroke='%23c98e1c' stroke-width='1.2'/><circle cx='42' cy='14' r='5.8' fill='%23d9620a'/><circle cx='42' cy='14' r='4' fill='%23f39a1b'/><circle cx='42' cy='14' r='1.8' fill='%23ffd04d'/><circle cx='42' cy='22.6' r='2.6' fill='%23c2185b'/></svg>");
  /* The same weave turned on end, for leading edges */
  --zari-v: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='24' viewBox='0 0 8 24'><rect width='8' height='24' fill='%232a0e22'/><path d='M4 0 L7 4 L4 8 L1 4 Z M4 12 L7 16 L4 20 L1 16 Z' fill='%23e08a00'/><circle cx='4' cy='10' r='1' fill='%23ffd98a'/><circle cx='4' cy='22' r='1' fill='%23ffd98a'/></svg>");
  --gold-leaf: linear-gradient(90deg, #b07a12, #f9da8b 30%, #efb23c 55%, #fff4c2 70%, #b07a12);
  --gold-rim: 0 0 0 2px #f0c254, 0 0 0 3.5px #9a6a10;
  --gold-metal: linear-gradient(135deg, #fff1bf 0%, #e9b949 30%, #fbe08f 52%, #b07a12 80%, #e7b54a 100%);
  --rosette-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><circle cx='50' cy='50' r='27'/><ellipse cx='50' cy='19' rx='12.5' ry='17' transform='rotate(0 50 50)'/><ellipse cx='50' cy='19' rx='12.5' ry='17' transform='rotate(45 50 50)'/><ellipse cx='50' cy='19' rx='12.5' ry='17' transform='rotate(90 50 50)'/><ellipse cx='50' cy='19' rx='12.5' ry='17' transform='rotate(135 50 50)'/><ellipse cx='50' cy='19' rx='12.5' ry='17' transform='rotate(180 50 50)'/><ellipse cx='50' cy='19' rx='12.5' ry='17' transform='rotate(225 50 50)'/><ellipse cx='50' cy='19' rx='12.5' ry='17' transform='rotate(270 50 50)'/><ellipse cx='50' cy='19' rx='12.5' ry='17' transform='rotate(315 50 50)'/></svg>");
  --diya-lit: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 28'><path d='M18 1c3 4 5 7 5 10a5 5 0 0 1-10 0c0-3 2-6 5-10z' fill='%23ffb11f'/><path d='M18 6c1.4 2 2.2 3.4 2.2 4.8a2.2 2.2 0 0 1-4.4 0c0-1.4.8-2.8 2.2-4.8z' fill='%23fff4c2'/><path d='M2 16h32c-1 6.5-7.5 11-16 11S3 22.5 2 16z' fill='%23a4502a'/><path d='M2 16h32c-.3 1.4-.9 2.6-1.7 3.6H3.7C2.9 18.6 2.3 17.4 2 16z' fill='%237a3519'/></svg>");
  --flame-img: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 28'><path d='M10 1c4 5.5 7 9.5 7 14a7 7 0 0 1-14 0c0-4.5 3-8.5 7-14z' fill='%23ffb11f'/><path d='M10 9c1.9 2.7 3 4.6 3 6.6a3 3 0 0 1-6 0c0-2 1.1-3.9 3-6.6z' fill='%23fff4c2'/></svg>");
  --rangoli-corner: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'><g fill='none' stroke='%23e08a00' stroke-width='1.2' stroke-opacity='.6'><path d='M40 0 A40 40 0 0 1 0 40'/><path d='M40 10 A30 30 0 0 1 10 40'/><path d='M40 20 A20 20 0 0 1 20 40'/></g><g fill='%23c2185b' fill-opacity='.6'><circle cx='40' cy='0' r='3'/><circle cx='29' cy='29' r='1.6'/><circle cx='12' cy='37' r='1.2'/><circle cx='37' cy='12' r='1.2'/></g></svg>");
  --rangoli-img: url("/assets/themes/diwali/assets/images/dark/rangoli.svg");
  --lamplight: radial-gradient(closest-side, rgba(255, 177, 31, .34), rgba(255, 177, 31, .12) 55%, transparent);
  --night-panel:
    radial-gradient(420px 240px at 100% 0%, rgba(255, 177, 31, .24), transparent 70%),
    radial-gradient(380px 240px at 0% 100%, rgba(239, 90, 143, .16), transparent 70%),
    linear-gradient(155deg, #1b2a6b 0%, #0b1230 72%);
  --stars: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='120' viewBox='0 0 160 120'><g fill='%23fff4c2'><circle cx='12' cy='18' r='1'/><circle cx='64' cy='9' r='.8'/><circle cx='118' cy='26' r='1.2'/><circle cx='148' cy='70' r='.8'/><circle cx='88' cy='58' r='.7'/><circle cx='34' cy='84' r='1'/><circle cx='102' cy='104' r='.8'/><circle cx='6' cy='112' r='.7'/></g></svg>");
  --frame-inset: inset 0 0 0 4px var(--paper-2), inset 0 0 0 5px rgba(var(--theme-500-rgb), .22);
  --btn-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 6px 16px -8px rgba(var(--theme-500-rgb), .7);
}
html.dark {
  --leaf:     #6fbf55;
  --marigold: #ff9a3d;
}

/* A toran across the top of whatever carries .dw-toran-top */
.dw-toran { height: 30px; background: var(--toran) repeat-x; background-size: 56px 30px; }
.dw-toran-top { position: relative; }
.dw-toran-top::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 30px; z-index: 3; pointer-events: none;
  background: var(--toran) repeat-x; background-size: 56px 30px;
}
.dw-gold-line { height: 4px; background: var(--gold-leaf); }

/* Lamplit night: soft pools of lamplight over a field of stars, for the
   scenes that are night in both modes (errors, results, the games hero). */
.dw-night {
  position: relative; isolation: isolate;
  background: var(--stars) repeat, var(--night-panel);
  color: #fbf1dc;
}
.dw-glows { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.dw-glows > i {
  position: absolute; left: var(--x); top: var(--y);
  width: var(--s, 280px); aspect-ratio: 1; translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--c, rgba(255, 177, 31, .3)), transparent);
}

/* ── Game palette ──
   The earn-games arena hands these to each HTML5 board: an ivory board
   dotted like a kolam grid by day, the new-moon night by night. Tiles rise
   from pale wheat through marigold, rani and peacock to night blue, the way
   a rangoli is filled in. */
:root {
  --game-bg:        #fff6e6;
  --game-surface:   #f6e2bf;
  --game-surface-2: #fffcf5;
  --game-ink:       #2a0e22;
  --game-muted:     #75566a;
  --game-accent:    #c2185b;
  --game-accent-ink:#ffffff;
  --game-good:      #2f7d32;
  --game-bad:       #c2185b;
  --game-tile-1:    #fde7b8;
  --game-tile-2:    #f8b733;
  --game-tile-3:    #e8730c;
  --game-tile-4:    #c2185b;
  --game-tile-5:    #0e6f73;
  --game-tile-6:    #3f7d2c;
  --game-tile-7:    #1b2a6b;
  --game-tile-8:    #2a0e22;
  --game-radius:    10px;
  --game-font:      'Rozha One', 'Mukta', Georgia, serif;
  --game-font-css:  "/assets/themes/diwali/assets/fonts/fonts.css";
  /* Arena chrome (assets/css/game-arena.css): an ivory board, not a dark screen */
  --game-arena-screen: #fff6e6;
  --game-arena-coins:  #b86b00;
  --game-arena-win:    #2f7d32;
  --game-arena-danger: #c2185b;
  --game-pattern:   url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='28'><circle cx='14' cy='14' r='1.3' fill='%23b86b00' fill-opacity='0.2'/></svg>");
}
html.dark {
  --game-bg:        #0b1230;
  --game-surface:   #131c45;
  --game-surface-2: #1f2a5e;
  --game-ink:       #fbf1dc;
  --game-muted:     #b3a68f;
  --game-accent:    #efb23c;
  --game-accent-ink:#1a1205;
  --game-good:      #7fd36a;
  --game-bad:       #ef5a8f;
  --game-tile-1:    #3b3114;
  --game-tile-2:    #b07a12;
  --game-tile-3:    #efb23c;
  --game-tile-4:    #ff8a3d;
  --game-tile-5:    #ef5a8f;
  --game-tile-6:    #38c1bb;
  --game-tile-7:    #f9da8b;
  --game-tile-8:    #fff4c2;
  --game-arena-screen: #0b1230;
  --game-arena-coins:  #f6c85f;
  --game-arena-win:    #7fd36a;
  --game-arena-danger: #ef5a8f;
  --game-pattern:   url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='28'><circle cx='14' cy='14' r='1.3' fill='%23f6c85f' fill-opacity='0.16'/></svg>");
}

/* ── Standalone pages ──
   Age check, unsubscribe and change language are their own documents that
   never run header.php's head_meta, so the skin sheets don't reach them;
   their few rules live here, where they do load. */
html body.age-check-body { background: var(--page-bg); font-family: var(--font-ui); }
html body .age-check-card {
  position: relative; overflow: hidden;
  padding-top: 3rem;
  background: var(--kolam), var(--paper-2);
  border: 1px solid rgba(var(--theme-500-rgb), .4);
  border-radius: 24px;
  box-shadow: var(--frame-inset), var(--shadow-md);
}
html body .age-check-card::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 30px;
  background: var(--toran) repeat-x; background-size: 56px 30px;
}
html body .age-check-card::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 8px;
  background: var(--zari) repeat-x; background-size: 24px 8px;
}
html body .age-check-logo { border-radius: 50%; background: radial-gradient(circle, rgba(255, 177, 31, .35), transparent 70%), var(--paper); box-shadow: var(--gold-rim); outline: 2px dotted var(--rani); outline-offset: 5px; padding: 8px; }
html body .age-check-title { font-family: var(--font-display); font-weight: 400; letter-spacing: 0; }
html body .age-check-input { border-radius: 12px; border: 1.5px solid rgba(var(--theme-500-rgb), .35); background: var(--paper-2); font-family: var(--font-ui); }
html body .age-check-input:focus { border-color: var(--theme-500); box-shadow: 0 0 0 3px var(--gold-soft); outline: none; }
html body .age-check-submit { border-radius: 999px; background: var(--btn-bg); color: var(--btn-ink); border: 1px solid var(--btn-edge); box-shadow: var(--btn-shadow); font-family: var(--font-ui); font-weight: 700; }
html body .age-check-foot a { color: var(--rani); }
html body .lang-card {
  border-radius: 16px !important;
  border: 1px dotted rgba(var(--theme-500-rgb), .55) !important;
  background: var(--paper-2) !important;
  transition: transform .15s ease, border-color .15s ease;
}
html body .lang-card:hover { transform: translateY(-2px); border-color: var(--theme-500) !important; }
html body .lang-card:has(input:checked) {
  border-style: solid !important;
  border-color: transparent !important;
  box-shadow: var(--gold-rim), 0 0 22px -6px rgba(255, 177, 31, .6) !important;
  background: var(--gold-soft) !important;
}
html body .lang-card img { border-radius: 50%; box-shadow: 0 0 0 2px var(--paper-2), 0 0 0 4px #e9b949; }
html body .lang-card:has(input:checked) .rounded-full:has(> .fa-check) { background: var(--theme-500) !important; color: #2a0e22 !important; }
html body:has(.lang-card) h1 { font-family: var(--font-display); font-weight: 400 !important; letter-spacing: 0 !important; }
html body:has(.lang-card) .footer-safe { box-shadow: 0 -12px 24px -18px rgba(42, 14, 34, .55); }
html body:has(.lang-card) .footer-safe::before { content: ''; position: absolute; left: 0; right: 0; top: -6px; height: 6px; background: var(--zari) repeat-x; background-size: 18px 6px; }
html body:has(.lang-card) .w-9.h-9.rounded-xl:has(> .fa-language) { background: var(--rani) !important; color: #fff6e6 !important; border-radius: 0 !important; -webkit-mask: var(--rosette-mask) center / contain no-repeat; mask: var(--rosette-mask) center / contain no-repeat; }

/* Phones: headings break only between words, never mid-word. */
@media (max-width: 639px) {
  html body .reveal.flex-row:has(> .btn-view-all) h2.text-fit { font-size: clamp(1.5rem, 8vw, 1.875rem); }
  html body :is(h1, h2, h3):is(.text-fit, .truncate) { overflow-wrap: break-word; word-break: normal; hyphens: manual; }
}

/* At 360 the balance chip or a long register label (German
   "Registrieren") pushed the phone bar past the screen edge: the logo
   gives way first. */
@media (max-width: 380px) {
  html body header.mobile-glass-header { padding-inline: .75rem; gap: .5rem; }
  html body header.mobile-glass-header > div:first-child { min-width: 0; gap: .5rem; }
  html body header.mobile-glass-header > div:last-child { flex-shrink: 0; gap: .375rem; }
  html body header.mobile-glass-header .menu-btn { flex-shrink: 0; }
  html body header.mobile-glass-header .logo-container { min-width: 0; }
  html body header.mobile-glass-header .logo-container img { max-width: 100%; }
}

/* Phones: a ticket's two dates stack rather than run into each other; the
   bids page's four tiles go two by two ("Gesamtgebote" was cut off); the
   auction page's browse link drops under its heading ("Andere Auktionen
   durchstöbern" pushed the page wider). */
@media (max-width: 639px) {
  html body .grid.grid-cols-2.rtl-text-right:has(> div > .whitespace-nowrap) { grid-template-columns: minmax(0, 1fr); gap: .75rem; }
  html body .grid.grid-cols-4:has(> div > p.text-3xl.font-extrabold) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html body div.flex.justify-between:has(> a.ed-link-arrow.whitespace-nowrap) { flex-wrap: wrap; row-gap: .75rem; }
}

/* Change language: on a wide screen the floating page nav sits at the foot of
   the window, so the list's sticky save bar stops above it rather than under it. */
@media (min-width: 1024px) {
  html body #langForm + .sticky.bottom-0 { bottom: 5.75rem; }
}

/* The price-offer form on an item page brings its own amber Send button;
   it takes the theme's button like every other primary action. */
html body #shopB2bNegotiateForm button[type="submit"] { background: var(--btn-bg) !important; color: var(--btn-ink) !important; box-shadow: var(--btn-shadow); }
html body #shopB2bNegotiateForm button[type="submit"]:hover { background: var(--btn-bg-hover, var(--btn-bg)) !important; }

/* While the wheel turns the spin button is disabled, and the shared
   disabled grey made it look dead; it keeps its colour, a little softer. */
html body.is-spinning #spinButton:disabled { background: var(--btn-bg) !important; color: var(--btn-ink) !important; opacity: .8; cursor: progress; }

/* Review stars take a deeper shade of the marigold by day; the accent itself
   is too pale on this paper to read as stars. */
html:not(.dark) { --px-star: #c17700; }

/* 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: #2f7e32; --px-warn: #b45309; --px-crit: #c3185c; --px-info: #0e6e72; }
html.dark:root { --px-good: #7ed369; --px-warn: #fbbf23; --px-crit: #f594b6; --px-info: #18bdc4; }

/* Changing language: each line lights like a diya (diwali.js). */
.dw-lang-unlit { opacity: .28; }
.dw-lang-lit { animation: dw-lang-flame .5s ease-out both; }
.dw-lang-snuff { animation: dw-lang-snuff .4s ease-in both; }
@keyframes dw-lang-flame {
  0%   { opacity: .28; text-shadow: none; }
  30%  { opacity: 1; color: var(--theme-400, #f5a524); text-shadow: 0 0 .5em var(--theme-400, #f5a524), 0 -.12em 1em rgba(var(--theme-500-rgb, 224, 138, 0), .55); }
  55%  { text-shadow: 0 0 .35em var(--theme-400, #f5a524), 0 -.1em .7em rgba(var(--theme-500-rgb, 224, 138, 0), .4); }
  100% { opacity: 1; text-shadow: none; }
}
@keyframes dw-lang-snuff {
  0%   { opacity: 1; }
  25%  { opacity: 1; color: var(--theme-400, #f5a524); text-shadow: 0 0 .45em var(--theme-400, #f5a524); }
  45%  { opacity: .6; }
  60%  { opacity: .85; }
  100% { opacity: .3; text-shadow: none; }
}

/* Changing language, the scene (diwali.js): a row of diyas, lit one from
   the next beside the old language's name, the new name rising in their
   light; on the new page they all glow and a rangoli blooms behind it. The
   row is the same on both pages, so the reload never shows. */
.dw-lang-stage { background: color-mix(in srgb, var(--felt-2, #0b1230) 55%, transparent); }
.dw-lang-scene {
  position: relative; width: min(560px, 100%); box-sizing: border-box; padding: 22px 24px 20px; overflow: hidden;
  border-radius: var(--radius, 14px); color: var(--on-felt, #fbf1dc); font-family: var(--font-ui, system-ui);
  background:
    radial-gradient(120% 90% at 50% 100%, color-mix(in srgb, var(--flame, #ffb11f) 16%, transparent), transparent 62%),
    linear-gradient(180deg, var(--felt, #1b2a6b), var(--felt-2, #0b1230));
  box-shadow: 0 0 0 1px rgba(246, 200, 95, .28), 0 34px 70px -28px rgba(0, 0, 0, .6);
}
.dw-lang-hero { position: relative; display: grid; place-items: center; min-height: clamp(116px, 30vw, 156px); padding: 4px 0 14px; }
.dw-lang-rangoli {
  position: absolute; left: 50%; top: 50%; width: 150px; height: 150px; margin: -75px 0 0 -75px;
  opacity: 0; transform: scale(.3) rotate(-60deg);
}
.dw-lang-rangoli i {
  position: absolute; left: 50%; top: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px;
  border-radius: 0 70% 0 70%; background: var(--rani, #c2185b); opacity: .3;
}
.dw-lang-rangoli i:nth-child(even) { background: var(--peacock, #0e6f73); }
.dw-lang-rangoli i:nth-child(1) { transform: rotate(0deg) translateY(-44px) rotate(45deg); }
.dw-lang-rangoli i:nth-child(2) { transform: rotate(45deg) translateY(-44px) rotate(45deg); }
.dw-lang-rangoli i:nth-child(3) { transform: rotate(90deg) translateY(-44px) rotate(45deg); }
.dw-lang-rangoli i:nth-child(4) { transform: rotate(135deg) translateY(-44px) rotate(45deg); }
.dw-lang-rangoli i:nth-child(5) { transform: rotate(180deg) translateY(-44px) rotate(45deg); }
.dw-lang-rangoli i:nth-child(6) { transform: rotate(225deg) translateY(-44px) rotate(45deg); }
.dw-lang-rangoli i:nth-child(7) { transform: rotate(270deg) translateY(-44px) rotate(45deg); }
.dw-lang-rangoli i:nth-child(8) { transform: rotate(315deg) translateY(-44px) rotate(45deg); }
.dw-lang-rangoli b {
  position: absolute; left: 50%; top: 50%; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%;
  background: var(--flame, #ffb11f); box-shadow: 0 0 0 4px rgba(255, 244, 194, .35); opacity: .3;
}
.dw-lang-new {
  position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 12px;
  max-width: 100%; text-align: center; color: var(--flame-core, #fff4c2);
  filter: blur(0) drop-shadow(0 0 6px rgba(255, 177, 31, .5));
}
.dw-lang-new b { min-width: 0; font: 400 clamp(32px, 10vw, 54px)/1.1 var(--font-display, Georgia, serif); overflow-wrap: anywhere; }
.dw-lang-new img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px var(--flame, #ffb11f); }
.dw-lang-new small { font: 700 12px/1 var(--font-ui, system-ui); letter-spacing: .16em; color: var(--flame, #ffb11f); }
.dw-lang-row {
  display: flex; align-items: flex-end; gap: 14px; padding-top: 14px;
  border-top: 1px solid rgba(246, 200, 95, .22);
}
.dw-lang-old {
  display: flex; align-items: center; gap: 8px; flex: 0 1 auto; min-width: 0; padding-bottom: 2px;
  font: 600 16px/1.2 var(--font-ui, system-ui); color: var(--on-felt, #fbf1dc); opacity: .5;
}
.dw-lang-old span { min-width: 0; overflow-wrap: anywhere; }
.dw-lang-old img { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.dw-lang-diyas { display: flex; flex: 1 0 auto; justify-content: space-between; gap: 10px; }
.dw-lang-diya { position: relative; flex: 0 0 auto; width: 38px; height: 44px; }
.dw-lang-flame {
  position: absolute; left: 50%; bottom: 14px; width: 11px; height: 19px; margin-left: -5.5px;
  border-radius: 50% 50% 45% 45% / 65% 65% 35% 35%; transform-origin: 50% 100%;
  background: radial-gradient(ellipse at 50% 72%, var(--flame-core, #fff4c2) 0 30%, var(--flame, #ffb11f) 58%, #ff6a00 100%);
  box-shadow: 0 0 10px 3px rgba(255, 177, 31, .55), 0 0 26px 8px rgba(255, 140, 0, .25);
}
.dw-lang-lamp {
  position: absolute; left: 0; right: 0; bottom: 0; height: 15px;
  border-radius: 3px 3px 22px 22px / 3px 3px 15px 15px;
  background: linear-gradient(180deg, var(--clay, #a4502a), var(--clay-2, #7a3519));
  box-shadow: 0 -4px 14px -2px rgba(255, 177, 31, .5);
}
.dw-lang-lamp::before { content: ''; position: absolute; left: 4px; right: 4px; top: 0; height: 3px; border-radius: 2px; background: rgba(255, 214, 140, .45); }
/* Out: the first diya burns beside the old name, its flame passes along the
   row, and the new name rises in the light. */
.px-lang-stage-out .dw-lang-scene { animation: dw-lang-rise .3s cubic-bezier(.2, .8, .3, 1.1) both; }
.px-lang-stage-out .dw-lang-diya:nth-child(n+2) .dw-lang-flame { animation: dw-lang-catch .22s ease-out both; }
.px-lang-stage-out .dw-lang-diya:nth-child(n+2) .dw-lang-lamp { animation: dw-lang-warm .22s ease-out both; }
.px-lang-stage-out .dw-lang-diya:nth-child(2) > * { animation-delay: .3s; }
.px-lang-stage-out .dw-lang-diya:nth-child(3) > * { animation-delay: .42s; }
.px-lang-stage-out .dw-lang-diya:nth-child(4) > * { animation-delay: .54s; }
.px-lang-stage-out .dw-lang-diya:nth-child(5) > * { animation-delay: .66s; }
.px-lang-stage-out .dw-lang-old { animation: dw-lang-dim .3s ease .68s both; }
.px-lang-stage-out .dw-lang-new { animation: dw-lang-new .35s ease-out .72s both; }
/* In: every diya glows, the name shines, the rangoli blooms, and away. */
.px-lang-stage-in .dw-lang-flame { animation: dw-lang-blaze .4s ease-out .1s both; }
.px-lang-stage-in .dw-lang-lamp { animation: dw-lang-glow .4s ease-out .1s both; }
.px-lang-stage-in .dw-lang-rangoli { animation: dw-lang-bloom .5s cubic-bezier(.2, .8, .3, 1.15) .25s both; }
.px-lang-stage-in .dw-lang-new { animation: dw-lang-shine .5s ease-out .2s both; }
.px-lang-stage-in .dw-lang-scene { animation: dw-lang-away .28s ease-in 1s both; }
@keyframes dw-lang-rise { from { opacity: 0; transform: translateY(24px) scale(.97); } }
@keyframes dw-lang-catch { from { opacity: 0; transform: scale(.2); } }
@keyframes dw-lang-warm { from { box-shadow: 0 -4px 14px -2px rgba(255, 177, 31, 0); } }
@keyframes dw-lang-dim { from { opacity: 1; } }
@keyframes dw-lang-new { from { opacity: 0; transform: translateY(12px); filter: blur(6px) drop-shadow(0 0 0 rgba(255, 177, 31, 0)); } }
@keyframes dw-lang-blaze { to { transform: scale(1.25); filter: brightness(1.15); } }
@keyframes dw-lang-glow { to { box-shadow: 0 -6px 22px 2px rgba(255, 177, 31, .75); } }
@keyframes dw-lang-bloom { to { opacity: 1; transform: scale(1) rotate(0deg); } }
@keyframes dw-lang-shine { to { transform: scale(1.04); filter: blur(0) drop-shadow(0 0 16px rgba(255, 177, 31, .85)); } }
@keyframes dw-lang-away { to { opacity: 0; transform: translateY(-18px) scale(.97); } }
@media (max-width: 460px) {
  .dw-lang-scene { padding: 18px 16px 16px; }
  .dw-lang-diya:nth-child(n+4) { display: none; }
  .dw-lang-row { gap: 10px; }
  .dw-lang-old { font-size: 14px; }
}

/* 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 under 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: 45%; }
  html body div.flex.justify-between:has(> div h2.text-fit):has(> a) > a { flex: 0 1 auto; max-width: 55%; 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; }
}

/* dynamic-theme.css paints every dark field, select and grey surface from
   these, in a cool slate that belongs to no theme; after dark they take the
   night's own blue steps. */
html.dark {
  --bg-primary: #0b1230; --bg-secondary: #131c45; --bg-tertiary: #1b2757;
  --text-primary: #fbf1dc; --text-secondary: #e6d8bc; --text-tertiary: #b3a68f;
  --border-primary: rgba(246, 200, 95, .2); --border-secondary: rgba(246, 200, 95, .32);
}

/* 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; }

/* 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"] {
  --theme-500: #9f6200;
}
/* rev 868fe5109c9f2a2b */