/* ============================================================
   SINGLES' DAY THEME — 11.11, the four ones.
   Same class surface as editorial/theme.css, so shared header,
   footer, drawer and component classes stay styled.

   The numeral 1, repeated, is the whole kit: tall single
   strokes standing in columns like shop windows, the 11.11
   date as a monument, every countdown a split-flap board with
   a hinge across each cell, and a receipt for whatever you
   won. Hot coral for what sells, deep plum for the ink, white
   for the floor and one acid lime kept for the 11. After dark
   it is midnight on the 11th: plum-black, with the four 1s
   glowing.

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

:root {
  --font-display: 'Oswald', 'Arial Narrow', 'Roboto Condensed', 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', system-ui, sans-serif;
  --font-ui:      'Golos Text', 'Segoe UI', system-ui, 'Noto Sans', sans-serif;
  --font-num:     'Oswald', 'Arial Narrow', system-ui, sans-serif;

  --paper:        #fff6f4;
  --paper-2:      #ffffff;
  --paper-3:      #fbe6e7;
  --ink:          #2b0f3a;
  --ink-2:        #4a2a58;
  --ink-soft:     #6f5179;
  --rule:         rgba(43, 15, 58, 0.15);
  --rule-soft:    rgba(43, 15, 58, 0.07);
  --radius:       6px;
  --radius-sm:    4px;
  --shadow:       0 1px 0 rgba(43, 15, 58, .06), 0 10px 22px -16px rgba(43, 15, 58, .45);
  --shadow-md:    0 1px 0 rgba(43, 15, 58, .06), 0 22px 38px -22px rgba(43, 15, 58, .6);

  /* Coral: what sells */
  --theme-50:  #fff1f0;
  --theme-100: #ffdfdc;
  --theme-200: #ffbcb6;
  --theme-300: #ff8e85;
  --theme-400: #ff6157;
  --theme-500: #ff3b30;
  --theme-600: #d4241a;
  --theme-700: #b81d14;
  --theme-800: #8f170f;
  --theme-900: #5e0f0a;
  --theme-500-rgb: 255, 59, 48;
  --theme-600-rgb: 212, 36, 26;
  --theme-600-ink: #ffffff;

  /* The night's colours, each with its deep shade, an ink that reads on
     paper, and a soft wash */
  --sgd-coral:      #ff3b30;
  --sgd-coral-deep: #d8261c;
  --sgd-coral-ink:  #c81e14;
  --sgd-coral-soft: rgba(255, 59, 48, .1);
  --sgd-plum:       #2b0f3a;
  --sgd-plum-deep:  #1a0724;
  --sgd-plum-ink:   #5b2a73;
  --sgd-plum-soft:  rgba(91, 42, 115, .1);
  --sgd-lime:       #c6ff3d;
  --sgd-lime-deep:  #8fc712;
  --sgd-lime-ink:   #4a6b00;
  --sgd-lime-soft:  rgba(198, 255, 61, .3);
  --sgd-gold:       #ffb21f;
  --sgd-gold-deep:  #d98a00;
  --sgd-gold-ink:   #8a5300;
  --sgd-gold-soft:  rgba(255, 178, 31, .16);
  --sgd-green:      #12a36b;
  --sgd-green-deep: #0a7a4e;
  --sgd-green-ink:  #0b7348;
  --sgd-green-soft: rgba(18, 163, 107, .11);

  /* The deep panels: footer, splash, the receipt's ground, the boards */
  --night:   #1a0724;
  --night-2: #2b0f3a;
  --night-3: #3d1a50;
  --on-night: #fff1f5;
  --on-night-soft: rgba(255, 241, 245, .76);

  /* Names other themes' shared markup reaches for */
  --gold:       #d4241a;
  --gold-2:     #c6ff3d;
  --gold-soft:  rgba(255, 59, 48, 0.08);
  --gold-ink:   #2b0f3a;
  --felt:       #1a0724;
  --felt-2:     #2b0f3a;
  --on-felt:    #fff1f5;
  --on-felt-soft: rgba(255, 241, 245, 0.76);
  --peacock:    #d4241a;
  --peacock-soft: rgba(255, 59, 48, 0.1);
  --red:        #c81e14;
  --red-soft:   rgba(255, 59, 48, 0.1);
  --rose:       #ff3b30;
  --rose-soft:  rgba(255, 59, 48, 0.09);

  --notify-accent: var(--theme-600);
  --nav-accent:    var(--ink);
  --hdr-strip-bg:  #2b0f3a;
  --hdr-strip-rule: #2b0f3a;
  --text-primary:  var(--ink);

  /* Buttons: a coral flap with its hinge across the middle, standing on
     a plum edge; pressed, the top half folds down onto the bottom */
  --btn-bg:       #e0281d;
  --btn-bg-hover: #e61c10;
  --btn-ink:      #ffffff;
  --btn-side:     #2b0f3a;
  --btn-hinge:    linear-gradient(180deg, rgba(255, 255, 255, .16) 0 50%, rgba(43, 15, 58, .14) 50% calc(50% + 1px), transparent calc(50% + 1px));
  --btn-shadow:   0 3px 0 var(--btn-side);
  --btn-shadow-hover: 0 4px 0 var(--btn-side), 0 12px 20px -12px rgba(224, 40, 29, .8);

  /* The columns: tall strokes in fours, the rhythm of 1111, for walls,
     the footer and the hero's backdrop */
  --sgd-led: repeating-linear-gradient(90deg, rgba(255, 255, 255, .09) 0 3px, transparent 3px 9px, rgba(255, 255, 255, .09) 9px 12px, transparent 12px 18px, rgba(255, 255, 255, .09) 18px 21px, transparent 21px 27px, rgba(198, 255, 61, .16) 27px 30px, transparent 30px 58px);
  --sgd-seams: linear-gradient(transparent, transparent);
  /* A step deeper than the coral fills, so small white copy on it reads */
  --sgd-wall: var(--sgd-led), radial-gradient(120% 90% at 50% 110%, #ea2f24, #e0281d 45%, #cc2117);
  /* The ground the pillars stand on */
  --sgd-floor: linear-gradient(180deg, #2b0f3a, #1a0724);
  --sgd-gloss: linear-gradient(180deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 40%);
  /* One stroke: the coral underline that lights on a card's foot */
  --sgd-strip: linear-gradient(90deg, var(--sgd-coral) 0 calc(100% - 22px), transparent calc(100% - 22px) calc(100% - 16px), var(--sgd-lime-deep) calc(100% - 16px));
  --sgd-strip-glow: 0 0 0 transparent;
  --sgd-chip-bg: rgba(43, 15, 58, .06);

  /* A split-flap cell: two leaves of plum and the hinge between them */
  --sgd-flap: linear-gradient(180deg, #43195a 0 49%, #12051a 49% 51%, #33124a 51%);
  --sgd-flap-ink: #ffffff;

  /* Art colours (includes/art.php reads these, the light set its fallback) */
  --sgd-a-ground: #f3dfe4; --sgd-a-ground2: #e6c4cd;
  --sgd-a-coral: #ff3b30; --sgd-a-coral2: #d8261c;
  --sgd-a-plum: #2b0f3a; --sgd-a-plum2: #5b2a73;
  --sgd-a-lime: #c6ff3d; --sgd-a-lime2: #8fc712;
  --sgd-a-paper: #ffffff; --sgd-a-paper2: #fbeef1;
  --sgd-a-line: #2b0f3a; --sgd-a-soft: #ead8ee;

  /* A calm column down the middle; out in the gutters the strokes stand
     in their fours */
  --sgd-gutters: linear-gradient(90deg, transparent calc(50% - 700px), var(--paper) calc(50% - 664px), var(--paper) calc(50% + 664px), transparent calc(50% + 700px));
  --sgd-gutter-pat: repeating-linear-gradient(90deg, rgba(255, 59, 48, .1) 0 2px, transparent 2px 8px, rgba(255, 59, 48, .1) 8px 10px, transparent 10px 16px, rgba(255, 59, 48, .1) 16px 18px, transparent 18px 24px, rgba(255, 59, 48, .1) 24px 26px, transparent 26px 56px);
  --page-bg: radial-gradient(1400px 420px at 50% -160px, rgba(255, 59, 48, .07), transparent 70%) no-repeat, var(--sgd-gutters), var(--sgd-gutter-pat), var(--paper);
}

/* After dark: midnight on the 11th */
html.dark {
  --paper:        #12051a;
  --paper-2:      #1e0a2a;
  --paper-3:      #2e1240;
  --ink:          #fff1f5;
  --ink-2:        #ead3e2;
  --ink-soft:     #c3a3bf;
  --rule:         rgba(255, 190, 220, 0.16);
  --rule-soft:    rgba(255, 190, 220, 0.08);
  --shadow:       0 1px 0 rgba(0, 0, 0, .4), 0 14px 30px -16px rgba(0, 0, 0, .85);
  --shadow-md:    0 1px 0 rgba(0, 0, 0, .4), 0 24px 44px -20px rgba(0, 0, 0, .9);

  --theme-50:  #2a0d22;
  --theme-100: #3d1226;
  --theme-200: #5a1a2a;
  --theme-300: #ff9a91;
  --theme-400: #ff7a70;
  --theme-500: #ff5a4f;
  --theme-600: #ff4a3f;
  --theme-700: #ff8a80;
  --theme-800: #ffb3ac;
  --theme-900: #ffdcd8;
  --theme-500-rgb: 255, 90, 79;
  --theme-600-rgb: 255, 74, 63;
  --theme-600-ink: #1a0724;

  --sgd-coral:      #ff5a4f;
  --sgd-coral-deep: #e83a30;
  --sgd-coral-ink:  #ff8f86;
  --sgd-coral-soft: rgba(255, 90, 79, .16);
  --sgd-plum:       #7d3f9a;
  --sgd-plum-deep:  #4f2166;
  --sgd-plum-ink:   #d9a6f0;
  --sgd-plum-soft:  rgba(160, 90, 200, .18);
  --sgd-lime:       #ccff4a;
  --sgd-lime-deep:  #a6e021;
  --sgd-lime-ink:   #d6ff6e;
  --sgd-lime-soft:  rgba(204, 255, 74, .14);
  --sgd-gold:       #ffc14d;
  --sgd-gold-deep:  #d99a1c;
  --sgd-gold-ink:   #ffd27a;
  --sgd-gold-soft:  rgba(255, 193, 77, .14);
  --sgd-green:      #3ad69a;
  --sgd-green-deep: #18a06c;
  --sgd-green-ink:  #6be6b6;
  --sgd-green-soft: rgba(58, 214, 154, .14);

  --gold:       #ff8f86;
  --gold-2:     #ccff4a;
  --gold-soft:  rgba(255, 90, 79, 0.14);
  --gold-ink:   #fff1f5;
  --peacock:    #ff8f86;
  --peacock-soft: rgba(255, 90, 79, 0.16);
  --red:        #ff8f86;
  --red-soft:   rgba(255, 90, 79, 0.15);
  --rose:       #ff5a4f;
  --rose-soft:  rgba(255, 90, 79, 0.14);

  --hdr-strip-bg:  #0b0310;
  --hdr-strip-rule: rgba(255, 190, 220, .12);

  --btn-bg:       #ff4a3f;
  --btn-bg-hover: #ff5f55;
  --btn-ink:      #1a0724;
  --btn-side:     #0b0310;
  --btn-hinge:    linear-gradient(180deg, rgba(255, 255, 255, .14) 0 50%, rgba(26, 7, 36, .22) 50% calc(50% + 1px), transparent calc(50% + 1px));
  --btn-shadow:   0 3px 0 var(--btn-side), 0 0 22px -6px rgba(255, 74, 63, .7);
  --btn-shadow-hover: 0 4px 0 var(--btn-side), 0 0 30px -4px rgba(255, 74, 63, .9);

  --sgd-wall: var(--sgd-led), radial-gradient(110% 90% at 50% 105%, #4a1b5e, #2b0f3a 50%, #12051a);
  --sgd-floor: linear-gradient(180deg, #0b0310, #050107);
  --sgd-gloss: linear-gradient(180deg, rgba(255, 140, 180, .08), rgba(255, 140, 180, 0) 45%);
  --sgd-strip-glow: 0 0 14px rgba(255, 90, 79, .7);
  --sgd-chip-bg: rgba(255, 190, 220, .08);

  --sgd-a-ground: #2c1239; --sgd-a-ground2: #3d1b4f;
  --sgd-a-coral: #ff5a4f; --sgd-a-coral2: #e83a30;
  --sgd-a-plum: #f4d6e4; --sgd-a-plum2: #7d3f9a;
  --sgd-a-lime: #ccff4a; --sgd-a-lime2: #a6e021;
  --sgd-a-paper: #3a1a4c; --sgd-a-paper2: #4a2560;
  --sgd-a-line: #f4d6e4; --sgd-a-soft: #55306b;

  --sgd-gutter-pat: repeating-linear-gradient(90deg, rgba(255, 90, 79, .13) 0 2px, transparent 2px 8px, rgba(255, 90, 79, .13) 8px 10px, transparent 10px 16px, rgba(255, 90, 79, .13) 16px 18px, transparent 18px 24px, rgba(204, 255, 74, .14) 24px 26px, transparent 26px 56px);
  --page-bg:
    radial-gradient(1300px 520px at 50% -200px, rgba(125, 63, 154, .32), transparent 70%) no-repeat,
    var(--sgd-gutters),
    var(--sgd-gutter-pat),
    var(--paper);
}

/* ── Game palette ──
   The earn-games arena hands these to each HTML5 board: white with
   coral by day, plum-black after midnight; tiles climb from blush
   through coral to plum, with the lime at the top. */
:root {
  --game-bg:        #fbe6e7;
  --game-surface:   #f1cfd5;
  --game-surface-2: #ffffff;
  --game-ink:       #2b0f3a;
  --game-muted:     #6f5179;
  --game-accent:    #d4241a;
  --game-accent-ink:#ffffff;
  --game-good:      #0b7348;
  --game-bad:       #c81e14;
  --game-tile-1:    #ffffff;
  --game-tile-2:    #ffd9d5;
  --game-tile-3:    #ffa59e;
  --game-tile-4:    #ff6157;
  --game-tile-5:    #e0281d;
  --game-tile-6:    #7d3f9a;
  --game-tile-7:    #2b0f3a;
  --game-tile-8:    #c6ff3d;
  --game-radius:    4px;
  --game-font:      'Oswald', 'Arial Narrow', sans-serif;
  --game-font-css:  "/assets/themes/singles-day/assets/fonts/fonts.css";
  --game-arena-screen: #fbe6e7;
  --game-arena-coins:  #c81e14;
  --game-arena-win:    #0b7348;
  --game-arena-danger: #c81e14;
  --game-pattern:   repeating-linear-gradient(90deg, rgba(255, 59, 48, .08) 0 2px, transparent 2px 10px);
}
html.dark {
  --game-bg:        #1e0a2a;
  --game-surface:   #12051a;
  --game-surface-2: #2e1240;
  --game-ink:       #fff1f5;
  --game-muted:     #c3a3bf;
  --game-accent:    #ff5a4f;
  --game-accent-ink:#1a0724;
  --game-good:      #3ad69a;
  --game-bad:       #ff8f86;
  --game-tile-1:    #2e1240;
  --game-tile-2:    #4a1d5e;
  --game-tile-3:    #7d3f9a;
  --game-tile-4:    #b8406a;
  --game-tile-5:    #ff5a4f;
  --game-tile-6:    #ff9a6a;
  --game-tile-7:    #fff1f5;
  --game-tile-8:    #ccff4a;
  --game-arena-screen: #1e0a2a;
  --game-arena-coins:  #ccff4a;
  --game-arena-win:    #3ad69a;
  --game-arena-danger: #ff8f86;
  --game-pattern:   repeating-linear-gradient(90deg, rgba(255, 90, 79, .1) 0 2px, transparent 2px 10px);
}

/* Number tiles the theme draws (.sgd-ball): one colour per band of ten,
   in both modes, each deep enough for its white figure */
:root {
  --sgd-ball-1: #e0281d; --sgd-ball-1-hi: #ff8e85;
  --sgd-ball-2: #2b0f3a; --sgd-ball-2-hi: #5b2a73;
  --sgd-ball-3: #c2560f; --sgd-ball-3-hi: #ffb27a;
  --sgd-ball-4: #5b2a73; --sgd-ball-4-hi: #a06cbd;
  --sgd-ball-5: #c81e5a; --sgd-ball-5-hi: #ff7aa8;
  --sgd-ball-6: #0b7348; --sgd-ball-6-hi: #5fd4a0;
}

/* Oswald covers Latin, Cyrillic and Vietnamese; Arabic, Bengali,
   Chinese and Greek get a heavy system face rather than a narrow
   fallback that never matches */
html:is(:lang(ar), :lang(ur), :lang(bn), :lang(zh), :lang(el)) {
  --font-display: system-ui, 'Segoe UI', 'Noto Sans', 'PingFang SC', 'Microsoft YaHei', sans-serif;
}

/* ── Base ── */
html body {
  font-family: var(--font-ui);
  background: var(--page-bg);
  color: var(--ink);
}
html .font-sans { font-family: var(--font-ui); }
html .font-display, h1.display, h2.display, h3.display {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: .005em;
}
.display-italic { font-style: normal; }
/* Figures in tabular columns stand tall in the display face */
html .font-display.tabular-nums, html .font-display[class*="tabular"], html .tabular-nums { font-family: var(--font-num); font-variant-numeric: tabular-nums lining-nums; letter-spacing: 0; }
::selection { background: #c6ff3d; color: #2b0f3a; }
html.dark ::selection { background: #ff5a4f; color: #12051a; }

.text-gradient-theme { background: none; -webkit-background-clip: initial; background-clip: initial; color: var(--theme-600); }

.ed-eyebrow {
  font-family: var(--font-ui);
  font-size: 11.5px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-soft);
}
.ed-eyebrow-tight { font-size: 9px !important; letter-spacing: 0 !important; white-space: nowrap !important; }

/* The eyebrow: four strokes, the last one lime, then the words */
html .section-eyebrow {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--font-ui); font-size: 12px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: .8rem;
}
html .section-eyebrow::before {
  content: ''; flex-shrink: 0; width: 23px; height: 14px;
  background: linear-gradient(90deg, var(--sgd-coral) 0 3px, transparent 3px 6.5px, var(--sgd-coral) 6.5px 9.5px, transparent 9.5px 13px, var(--sgd-coral) 13px 16px, transparent 16px 19.5px, var(--sgd-lime-deep) 19.5px 22.5px, transparent 22.5px);
}
html.dark .section-eyebrow::before { background: linear-gradient(90deg, var(--sgd-coral) 0 3px, transparent 3px 6.5px, var(--sgd-coral) 6.5px 9.5px, transparent 9.5px 13px, var(--sgd-coral) 13px 16px, transparent 16px 19.5px, var(--sgd-lime) 19.5px 22.5px, transparent 22.5px); }

/* View all: a narrow white flap; its arrow slides on hover or focus */
.btn-view-all {
  position: relative;
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .45rem .85rem;
  font-family: var(--font-ui); font-size: 12.5px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink); white-space: nowrap;
  background: var(--paper-2);
  border: 2px solid var(--ink);
  border-radius: 4px;
  box-shadow: 3px 3px 0 var(--sgd-coral);
  transition: transform .15s ease, box-shadow .15s ease, gap .3s ease;
}
.btn-view-all:hover, .btn-view-all:focus-visible { gap: .8rem; outline: none; transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--sgd-coral); }
.btn-view-all:active { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--sgd-coral); }
[dir="rtl"] .btn-view-all { box-shadow: -3px 3px 0 var(--sgd-coral); }
[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: var(--sgd-gloss); }

.ed-folio { font-family: var(--font-num); font-weight: 500; color: var(--ink-soft); }

[dir="rtl"] .sgd-flip-rtl { transform: scaleX(-1); }

/* ── Header ── */
#desktopHeader .hdr-search {
  background: var(--paper-2);
  border: 2px solid var(--rule);
  border-radius: 4px;
}
#desktopHeader .hdr-search:focus-within { border-color: var(--sgd-coral); box-shadow: 0 0 0 4px var(--sgd-coral-soft); }
.ed-search { background: transparent; border: none; }

/* The top strip: deep plum, like the band along a shop's awning */
.hdr-strip, .hdr-strip .ed-status { color: #f6dbe7; }
.hdr-strip a:hover, .hdr-strip button:hover { color: #ffffff; }
html.dark .hdr-strip, html.dark .hdr-strip .ed-status { color: var(--ink-2); }
html.dark .hdr-strip a:hover, html.dark .hdr-strip button:hover { color: #ffffff; }

/* Under the main header bar: a row of short strokes, coral, every fourth
   one lime */
.sgd-led-line {
  height: 6px;
  background: repeating-linear-gradient(90deg, var(--sgd-coral) 0 3px, transparent 3px 8px, var(--sgd-coral) 8px 11px, transparent 11px 16px, var(--sgd-coral) 16px 19px, transparent 19px 24px, var(--sgd-lime-deep) 24px 27px, transparent 27px 40px), var(--paper-2);
  box-shadow: 0 1px 0 var(--rule);
}
html.dark .sgd-led-line { background: repeating-linear-gradient(90deg, var(--sgd-coral) 0 3px, transparent 3px 8px, var(--sgd-coral) 8px 11px, transparent 11px 16px, var(--sgd-coral) 16px 19px, transparent 19px 24px, var(--sgd-lime) 24px 27px, transparent 27px 40px), var(--paper-2); }

.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; padding-right: 1.25rem; border-right: 1px solid var(--rule);
  font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft);
}
[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.35rem; flex-wrap: wrap; }
.ed-subnav-item {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .45rem .85rem; border-radius: 4px;
  font-size: 13.5px; font-weight: 600; color: var(--ink-2);
  transition: background-color .2s ease, color .2s ease;
}
.ed-subnav-item svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; flex-shrink: 0; }
.ed-subnav-item:hover { color: var(--ink); background: var(--paper-3); }
.ed-subnav-item.active { background: var(--ink); color: var(--paper-2); box-shadow: inset 0 -3px 0 var(--sgd-coral); }
html.dark .ed-subnav-item.active { background: var(--sgd-coral); color: #1a0724; box-shadow: inset 0 -3px 0 var(--sgd-lime); }
.ed-subnav-item:focus-visible { outline: 2px solid var(--sgd-coral); outline-offset: 2px; }

/* ── Links and buttons ──
   Primary: a coral flap with a hinge across its middle, on a plum
   edge; pressed, it drops onto the edge and the top leaf folds.
   Secondary: white with a plum rim and the same edge. */
.ed-link-arrow {
  display: inline-flex; align-items: center; gap: .45rem;
  font-weight: 700; font-size: 14px; color: var(--ink);
  background: linear-gradient(var(--sgd-coral), var(--sgd-coral)) left 100% / 22px 3px no-repeat;
  padding-bottom: 3px;
  transition: gap .25s ease, background-size .3s ease;
}
.ed-link-arrow:hover, .ed-link-arrow:focus-visible { gap: 0.7rem; background-size: 100% 3px; }
[dir="rtl"] .ed-link-arrow { background-position: right 100%; }

html .ed-btn-primary, html .ed-plan-cta, html .drawer-login {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  padding: .78rem 1.45rem;
  font-family: var(--font-ui); font-size: 15px; font-weight: 700; letter-spacing: .02em;
  text-decoration: none;
  color: var(--btn-ink);
  background: var(--btn-hinge), var(--btn-bg);
  border: 0;
  border-radius: 4px;
  box-shadow: var(--btn-shadow);
  transform: translateY(0);
  transition: background-color .2s ease, box-shadow .15s ease, transform .12s ease;
}
html .ed-btn-primary:hover, html .ed-plan-cta:hover, html .drawer-login:hover {
  background: var(--btn-hinge), var(--btn-bg-hover); color: var(--btn-ink); box-shadow: var(--btn-shadow-hover); transform: translateY(-1px);
}
html .ed-btn-primary:active, html .ed-plan-cta:active, html .drawer-login:active {
  transform: translateY(3px); box-shadow: 0 0 0 var(--btn-side);
  background: linear-gradient(180deg, rgba(43, 15, 58, .22) 0 50%, transparent 50%), var(--btn-bg);
}
html.dark .ed-plan-cta, html.dark .ed-plan-cta:hover, html.dark button.ed-plan-cta { color: var(--btn-ink); }
html body .ed-plan-featured .ed-plan-cta, html.dark body .ed-plan-featured .ed-plan-cta { background: var(--btn-hinge), #c6ff3d; color: #2b0f3a; box-shadow: 0 3px 0 #0b0310; }
.ed-btn-primary:focus-visible, .ed-btn-secondary:focus-visible, .ed-plan-cta:focus-visible { outline: 3px solid var(--sgd-plum-ink); outline-offset: 3px; }
html.dark .ed-btn-primary:focus-visible, html.dark .ed-btn-secondary:focus-visible { outline-color: var(--sgd-lime); }

.ed-btn-secondary {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .74rem 1.35rem;
  font-family: var(--font-ui); font-size: 15px; font-weight: 700; letter-spacing: .02em;
  color: var(--ink);
  background: var(--paper-2);
  border: 2px solid var(--ink);
  border-radius: 4px;
  box-shadow: 0 3px 0 var(--ink);
  transition: box-shadow .15s ease, transform .12s ease, color .2s ease, border-color .2s ease;
}
.ed-btn-secondary:hover { transform: translateY(-1px); color: var(--sgd-coral-ink); border-color: var(--ink); box-shadow: 0 4px 0 var(--sgd-coral); }
.ed-btn-secondary:active { transform: translateY(3px); box-shadow: 0 0 0 var(--ink); }
html.dark .ed-btn-secondary { background: rgba(30, 10, 42, .75); color: var(--ink); border-color: rgba(255, 220, 235, .6); box-shadow: 0 3px 0 rgba(255, 220, 235, .3); }
html.dark .ed-btn-secondary:hover { color: #fff; border-color: var(--sgd-lime); box-shadow: 0 4px 0 var(--sgd-lime), 0 0 22px -8px rgba(204, 255, 74, .7); }
:is([data-bnr-layout="cover"], [data-bnr-layout="product"]) .ed-btn-primary { color: var(--btn-ink); }
@media (prefers-reduced-motion: reduce) {
  html .ed-btn-primary, html .ed-btn-secondary, html .ed-plan-cta, .btn-view-all { transition: none; }
  html .ed-btn-primary:hover, html .ed-btn-secondary:hover { transform: none; }
}

/* ── Cards: white, nearly square, with a short coral stroke and its
   flag at the top inline-start corner; on hover or focus the stroke
   runs the card's full height and the card steps up ── */
html .ed-plan, html .shop-card {
  position: relative;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: transform .3s cubic-bezier(.2, .9, .3, 1.2), box-shadow .3s ease, border-color .3s ease;
}
html .shop-card::after, html .ed-plan::after {
  content: ''; position: absolute; inset-inline-start: -1px; top: 12px; width: 4px; height: 34px;
  background: var(--sgd-coral); pointer-events: none; z-index: 3;
  transform-origin: top; transition: height .35s cubic-bezier(.2, .8, .3, 1), background-color .3s ease;
}
html .ed-plan:hover, html .shop-card:hover, html .shop-card:focus-within { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: rgba(255, 59, 48, .4); }
html .shop-card:hover::after, html .shop-card:focus-within::after, html .ed-plan:hover::after { height: calc(100% - 24px); }
html .ed-plan-featured {
  background: var(--night) !important;
  color: var(--on-night);
  border-color: transparent;
}
html .ed-plan-featured::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: var(--sgd-led); opacity: .8; pointer-events: none; }
html .ed-plan-featured::after { background: var(--sgd-lime); }
.ed-plan-hairline { border-color: var(--rule); }
.ed-plan-featured .ed-plan-hairline { border-color: rgba(255, 241, 245, .16); }
@media (prefers-reduced-motion: reduce) {
  html .ed-plan:hover, html .shop-card:hover, html .shop-card:focus-within { transform: none; }
  html .shop-card::after, html .ed-plan::after { transition: none; }
}

/* ── Status text ── */
.ed-status { font-family: var(--font-ui); font-size: 11px; font-weight: 700; letter-spacing: 0.12em; color: var(--ink-soft); }
.ed-topnav-link { color: inherit; text-decoration: none; transition: color 0.2s ease; }
.ed-topnav-link:hover, .ed-topnav-link.active { color: #ffffff; }

/* ── Drawer ── */
.drawer-section-label {
  display: flex; align-items: center; gap: .7rem;
  padding: 1.2rem 1.5rem .5rem;
  font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft);
}
.drawer-section-label::before { content: ''; flex-shrink: 0; width: 11px; height: 12px; background: linear-gradient(90deg, var(--sgd-coral) 0 3px, transparent 3px 8px, var(--sgd-coral) 8px); }
.drawer-section-label::after { content: ''; flex: 1; height: 1px; background: var(--rule); }
html body #sideMenu .drawer-section-label { color: var(--ink-soft) !important; }
/* Count badges on drawer rows: a coral tag */
html body #sideMenu span.rounded-full.text-white[style*="--theme-600"] { background: var(--sgd-coral-deep) !important; color: #fff !important; border-radius: 3px !important; }
.drawer-nav-row {
  display: flex; align-items: center; gap: .9rem;
  padding: .75rem 1.5rem;
  font-size: 15.5px; font-weight: 600; color: var(--ink-2);
  transition: background-color .2s ease, color .2s ease, box-shadow .2s ease;
}
.drawer-nav-row:hover { background: var(--paper-3); color: var(--ink); box-shadow: inset 4px 0 0 var(--sgd-coral); }
[dir="rtl"] .drawer-nav-row:hover { box-shadow: inset -4px 0 0 var(--sgd-coral); }
.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: .6rem;
  border: 2px solid var(--rule); border-radius: 4px;
  font-weight: 700; color: var(--red);
}
.drawer-logout:hover { background: var(--red-soft); }

.mobile-glass-header {
  background: rgba(255, 246, 244, 0.95);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule);
  box-shadow: 0 2px 0 rgba(255, 59, 48, .35);
}
html.dark .mobile-glass-header { background: rgba(18, 5, 26, 0.95); }

.ed-avatar-ring { box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--sgd-coral); }

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

.ed-dropdown {
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 6px;
  box-shadow: var(--shadow-md);
}
.ed-dropdown::before { content: ''; display: block; height: 4px; margin: -1px -1px 0; border-radius: 6px 6px 0 0; background: var(--sgd-strip); }
.ed-dropdown-item {
  display: flex; align-items: center; gap: .75rem;
  padding: .6rem 1.25rem;
  font-size: 14.5px; color: var(--ink-2);
  transition: background-color .2s ease, color .2s ease;
}
.ed-dropdown-item:hover { background: var(--paper-3); color: var(--ink); }
.ed-section-cap {
  padding: .7rem 1.25rem .35rem;
  font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft);
}
.ed-mobile-link.active { color: var(--nav-accent); }

/* ── Dark/light toggle: the four 1s flap over ──
   Four tall columns cover the screen like the cells of a split-flap
   board, each carrying a giant 1 (the last one lime); their leaves
   swing shut one column after another, the mode turns behind the
   closed board, and the leaves fall open again column by column onto
   the new mode. A solid plum veil sits under the leaves once they are
   shut, and every colour on the overlay is fixed, so nothing changes
   at the flip. Built by singles-day.js. */
.px-fx--sgd-flap { position: fixed; inset: 0; z-index: 2147483000; pointer-events: none; overflow: hidden; }
.px-fx--sgd-flap .sgd-fx-veil { position: absolute; inset: 0; background: #2b0f3a; opacity: 0; }
.px-fx--sgd-flap.is-shut .sgd-fx-veil { opacity: 1; }
.px-fx--sgd-flap.is-open .sgd-fx-veil { opacity: 0; }
.px-fx--sgd-flap .sgd-fx-cols { position: absolute; inset: 0; display: flex; }
.px-fx--sgd-flap .sgd-fx-col {
  position: relative; flex: 1 1 0; height: 100%;
  perspective: 1400px;
}
.px-fx--sgd-flap .sgd-fx-leaf {
  position: absolute; left: 0; right: 0; height: 50.2%; overflow: hidden;
  background: #2b0f3a;
  box-shadow: inset 1px 0 0 #12051a, inset -1px 0 0 #12051a;
  backface-visibility: hidden;
}
.px-fx--sgd-flap .sgd-fx-leaf--top { top: 0; transform-origin: 50% 100%; transform: rotateX(90deg); background: linear-gradient(180deg, #3a1550, #2b0f3a); }
.px-fx--sgd-flap .sgd-fx-leaf--bot { bottom: 0; transform-origin: 50% 0; transform: rotateX(-90deg); background: linear-gradient(180deg, #24092f, #2b0f3a); }
/* The hinge across every cell */
.px-fx--sgd-flap .sgd-fx-leaf--top::after { content: ''; position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; height: 5px; background: linear-gradient(180deg, #0b0310 0 70%, rgba(255, 255, 255, .12) 70%); }
/* Each leaf shows its own half of the column's 1 */
.px-fx--sgd-flap .sgd-fx-one { position: absolute; left: 0; right: 0; height: 199.2%; display: grid; place-items: center; }
.px-fx--sgd-flap .sgd-fx-leaf--top .sgd-fx-one { top: 0; }
.px-fx--sgd-flap .sgd-fx-leaf--bot .sgd-fx-one { bottom: 0; }
.px-fx--sgd-flap .sgd-fx-one svg { width: min(74%, 30vh); height: auto; max-height: 72%; }
.px-fx--sgd-flap .sgd-fx-one path { fill: #ff3b30; }
.px-fx--sgd-flap .sgd-fx-col:last-child .sgd-fx-one path { fill: #c6ff3d; }
.px-fx--sgd-flap.is-in .sgd-fx-leaf--top { animation: sgd-fx-top-in .26s cubic-bezier(.3, .6, .4, 1) forwards; animation-delay: calc(var(--i) * 90ms); }
.px-fx--sgd-flap.is-in .sgd-fx-leaf--bot { animation: sgd-fx-bot-in .3s cubic-bezier(.5, 0, .7, 1.2) forwards; animation-delay: calc(var(--i) * 90ms + 150ms); }
.px-fx--sgd-flap.is-open .sgd-fx-leaf--top { transform: none; animation: sgd-fx-top-out .3s cubic-bezier(.55, 0, .9, .6) forwards; animation-delay: calc(var(--i) * 80ms); }
.px-fx--sgd-flap.is-open .sgd-fx-leaf--bot { transform: none; animation: sgd-fx-bot-out .26s cubic-bezier(.4, 0, .8, .6) forwards; animation-delay: calc(var(--i) * 80ms + 120ms); }
@keyframes sgd-fx-top-in { from { transform: rotateX(90deg); } to { transform: none; } }
@keyframes sgd-fx-bot-in { from { transform: rotateX(-90deg); } to { transform: none; } }
@keyframes sgd-fx-top-out { from { transform: none; } to { transform: rotateX(-92deg); } }
@keyframes sgd-fx-bot-out { from { transform: none; } to { transform: rotateX(92deg); } }

/* ── Footer: closing time on the 11th. The night's wall in a band, the
   four 1s on the kerb in the middle, the date on flap cells at one end
   and a bag at the other; the credits on the white floor by day,
   plum-black after midnight ── */
.sgd-footer {
  background: linear-gradient(180deg, #ffffff, #fff3f2) !important;
  color: var(--ink-2);
}
html.dark .sgd-footer {
  background:
    radial-gradient(900px 260px at 50% 0%, rgba(125, 63, 154, .3), transparent 70%),
    #0b0310 !important;
}
.sgd-footer-top {
  position: relative; height: 118px; overflow: hidden;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem;
  padding: 0 6% 14px;
  background: var(--sgd-wall);
}
.sgd-footer-top::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 14px; background: var(--sgd-floor); }
.sgd-footer-sign { position: relative; z-index: 1; width: 86px; margin-bottom: -2px; }
.sgd-footer-sign .sgd-mark { display: block; width: 100%; height: auto; }
/* White on the coral wall by day; the theme's own coral at midnight */
html:not(.dark) .sgd-footer-sign .sgd-mark__one:not(.sgd-mark__one--d) { fill: #ffffff; }
.sgd-footer-date { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 6px; margin-bottom: 22px; }
.sgd-footer-date .sgd-flaps { --fs: 26px; }
.sgd-footer-dot { width: 6px; height: 6px; background: #c6ff3d; border-radius: 1px; }
.sgd-footer-bag { position: relative; z-index: 1; width: 96px; margin-bottom: 4px; }
.sgd-footer-bag svg { display: block; width: 100%; height: auto; }
@media (max-width: 639px) {
  .sgd-footer-top { height: 96px; padding-bottom: 12px; }
  .sgd-footer-sign { width: 62px; }
  .sgd-footer-date .sgd-flaps { --fs: 20px; }
  .sgd-footer-date { margin-bottom: 16px; }
  .sgd-footer-bag { width: 70px; }
}
.sgd-footer a:hover { color: var(--theme-600); }
html .sgd-footer .ed-footer-heading {
  font-family: var(--font-display); font-weight: 600; font-size: 15px;
  letter-spacing: .08em; text-transform: uppercase; color: var(--ink);
}
html.dark #desktopFooter li { color: var(--ink-2) !important; }
/* header.css greys every footer h4 after dark with an ID rule */
html.dark #desktopFooter .ed-footer-heading { color: var(--ink) !important; }
html .sgd-footer .ed-footer-link { color: var(--ink-2); background: linear-gradient(var(--sgd-coral), var(--sgd-coral)) left 100% / 0 2px no-repeat; transition: background-size .3s ease, color .2s ease; }
html .sgd-footer .ed-footer-link:hover, html .sgd-footer .ed-footer-link:focus-visible { background-size: 100% 2px; color: var(--ink); }
[dir="rtl"] .sgd-footer .ed-footer-link { background-position: right 100%; }

/* The floating nav: a row of flaps, the current one turned plum */
html .ed-floating-nav {
  position: relative;
  background: rgba(255, 255, 255, .97);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 2px solid var(--ink);
  border-radius: 6px;
  box-shadow: 0 4px 0 var(--sgd-coral), var(--shadow-md);
}
html.dark .ed-floating-nav { background: rgba(30, 10, 42, .97); border-color: rgba(255, 220, 235, .4); box-shadow: 0 4px 0 #0b0310, 0 0 0 1px rgba(255, 90, 79, .25), 0 20px 40px -20px rgba(0, 0, 0, .9); }
html .ed-floating-nav .ed-floating-link { font-family: var(--font-ui); font-size: .95rem; font-weight: 600; color: var(--ink-2); border-radius: 3px; }
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(--sgd-flap); color: #fff !important; box-shadow: inset 0 -3px 0 var(--sgd-coral); }
html body .ed-floating-nav a.ed-floating-link.active > span { color: #fff !important; }

/* The newsletter: a coral panel of the night's wall, a lime stroke at
   its start */
html body .sgd-footer .ed-newsletter {
  position: relative; overflow: hidden;
  background: var(--sgd-wall) !important;
  border: 0 !important;
  border-radius: 6px !important;
  box-shadow: 0 5px 0 #2b0f3a, 0 20px 40px -22px rgba(43, 15, 58, .6) !important;
}
html.dark body .sgd-footer .ed-newsletter { box-shadow: 0 5px 0 #000, 0 0 50px -14px rgba(125, 63, 154, .7) !important; }
html body .sgd-footer .ed-newsletter::before { display: block !important; content: ''; position: absolute; inset-block: 0; inset-inline-start: 0; width: 8px; background: #c6ff3d; opacity: 1; border-radius: 0; }
html body .sgd-footer .ed-newsletter::after { display: none !important; }
html body .sgd-footer .ed-newsletter, html body .sgd-footer .ed-newsletter * { --ink: #ffffff; --ink-2: #fff1f0; --ink-soft: #ffe3e0; }
html body .sgd-footer .ed-newsletter h4, html.dark body .sgd-footer .ed-newsletter h4 { color: #ffffff !important; font-family: var(--font-display); font-weight: 600; letter-spacing: .01em; }
html body .sgd-footer .ed-newsletter p:not(#newsletter-msg), html.dark body .sgd-footer .ed-newsletter p:not(#newsletter-msg) { color: #ffffff !important; opacity: 1; }
html body .sgd-footer .ed-newsletter-age { opacity: 1; color: #ffffff; }
html.dark body .sgd-footer .ed-newsletter p:not(#newsletter-msg) { color: #f6dbe7 !important; }
html body .sgd-footer .ed-newsletter-input, html.dark body .sgd-footer .ed-newsletter input[type="email"].ed-newsletter-input:not(.no-dark):not([type="checkbox"]) { background: #ffffff !important; color: #2b0f3a !important; border: 2px solid #2b0f3a !important; border-radius: 4px; }
html body .sgd-footer .ed-newsletter-input::placeholder { color: #6f5179; }
html body .sgd-footer .ed-newsletter-input:focus { border-color: #2b0f3a !important; box-shadow: 0 0 0 4px rgba(198, 255, 61, .6); }
html body .sgd-footer .ed-newsletter-btn { background: var(--btn-hinge), #2b0f3a; color: #fff; border: 0; border-radius: 4px; font-family: var(--font-ui); font-weight: 700; box-shadow: 0 3px 0 #0b0310; transition: transform .12s ease, box-shadow .12s ease; }
html body .sgd-footer .ed-newsletter-btn:hover { background: var(--btn-hinge), #43195a; }
html body .sgd-footer .ed-newsletter-btn:active { transform: translateY(3px); box-shadow: 0 0 0 #0b0310; }
html body .sgd-footer .ed-newsletter-age, html body .sgd-footer .ed-newsletter label { color: #fff1f0 !important; }

/* Logo card: the light-mode logo on a white tag wherever it sits on a
   dark wall */
.sgd-plaque {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  padding: .9rem 1.4rem;
  background: #ffffff;
  border-radius: 4px;
  box-shadow: 0 4px 0 #ff3b30, 0 14px 28px -14px rgba(0, 0, 0, .7);
}

/* Long titles and descriptions show in full; a card grows instead of
   clipping them. */
html [class*="line-clamp-"] { -webkit-line-clamp: unset; }
html body .truncate { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
/* .text-fit (assets/css/header.css) shrinks a title to one line with JS,
   measured before the display face loads; under this theme it wraps. */
html body .text-fit { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }

/* ── Dark-mode greys from assets/css/header.css ──
   header.css forces a neutral near-black palette onto Tailwind's light
   utilities with !important; these follow midnight instead. */
html.dark body { background-color: var(--paper) !important; }
html.dark .mobile-glass-header { background: rgba(18, 5, 26, 0.95) !important; border-bottom-color: var(--rule) !important; }
html.dark #desktopFooter { background: #0b0310 !important; }
html.dark .floating-nav-shell,
html.dark .safe-area-bottom > div.mobile-bottom-nav { background: rgba(30, 10, 42, 0.97) !important; }
html.dark .premium-side-menu { background: var(--paper) !important; }
html.dark #langSheet { background: var(--paper-2) !important; border-top-color: var(--sgd-coral) !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, #2e1240, #12051a, #1e0a2a, #0b0310) !important; }
html.dark [class*="dark:bg-[#121218]"], html.dark [class*="dark:bg-[#0"] { background-color: var(--paper-2) !important; }

/* header.css fills every dark-mode field with #0d1117; here fields are
   the deepest plum. Same selector shape so it outranks it. */
html.dark input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not(.no-dark),
html.dark textarea:not(.no-dark),
html.dark select:not(.no-dark) {
  background-color: #0e0414 !important;
  border-color: rgba(255, 190, 220, .24) !important;
  color: #fff1f5 !important;
}

/* 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 those panels take the deepest plum. */
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: #0b0310;
  --paper: #fff1f5;
  border-color: rgba(255, 190, 220, .18);
}

html header.safe-top-header[style] { background: rgba(255, 246, 244, .96) !important; }
html.dark header.safe-top-header[style] { background: rgba(18, 5, 26, .96) !important; }
/* The winners page's tab bar, near-black in assets/css/pages/winners.css */
html.dark .wn-tab-bar { background: rgba(18, 5, 26, .96); }

/* ── Login / register / forgot-password brand panel: the night's wall,
   coral by day and plum at midnight, with the four 1s standing at its
   foot ── */
:root {
  --brand-gradient: linear-gradient(170deg, #ff4a3f, #e0281d);
  --brand-glow-1: rgba(255, 255, 255, 0.18);
  --brand-glow-2: rgba(198, 255, 61, 0.2);
}
html.dark {
  --brand-gradient: linear-gradient(170deg, #3d1a50, #1a0724);
  --brand-glow-1: rgba(255, 140, 180, 0.16);
  --brand-glow-2: rgba(204, 255, 74, 0.14);
}
html body .brand-panel {
  position: relative;
  background: var(--sgd-wall) !important;
  color: #ffffff;
}
/* assets/css/pages/login.css loads after the theme and draws ::after as a
   round glow; here it is the four 1s on the kerb. */
html .brand-panel::after {
  content: ''; position: absolute;
  top: auto !important; bottom: 22px !important; right: 7% !important; left: auto !important;
  width: 150px !important; height: 112px !important;
  border-radius: 0 !important; opacity: 1 !important; filter: none !important; transform: none !important;
  background: var(--art-pillar) center bottom / contain no-repeat !important;
  box-shadow: none !important;
}
[dir="rtl"] .brand-panel::after { right: auto !important; left: 7% !important; transform: scaleX(-1) !important; }
/* login.css's other glow becomes the kerb along the foot */
html .brand-panel::before {
  top: auto !important; bottom: 0 !important; left: 0 !important; right: 0 !important; width: auto !important; height: 26px !important;
  border-radius: 0 !important; opacity: 1 !important; filter: none !important; transform: none !important;
  background: var(--sgd-floor) !important;
  box-shadow: none !important;
}
html body .brand-panel .text-purple-200,
html body .brand-panel [class*="text-purple-200"],
html body .brand-panel .text-white\/80, html body .brand-panel .text-white\/70 { color: rgba(255, 255, 255, .9) !important; }
html body .brand-panel .text-white, html body .brand-panel h1, html body .brand-panel h2 { color: #ffffff !important; }
.brand-panel h2 { font-family: var(--font-display); font-weight: 600 !important; }

/* ── Wallet balance card: a coral card stood on its long edge, the
   four 1s embossed down its end, a lime chip, and the balance in the
   tall numerals ── */
html body .wallet-hero {
  position: relative;
  background:
    var(--sgd-led),
    linear-gradient(135deg, #ff5146, #ff3b30 45%, #e0281d);
  border: 0;
  border-radius: 8px;
  box-shadow: 0 5px 0 #2b0f3a, 0 24px 40px -22px rgba(43, 15, 58, .7);
  color: #ffffff;
  overflow: hidden;
  margin-bottom: 8px;
}
/* The plum band down the inline-start edge */
html body .wallet-hero::before {
  content: ''; position: absolute; inset-inline-start: 0; top: 0; bottom: 0; right: auto; width: 10px; height: auto; margin: 0;
  border: 0; border-radius: 0; transform: none; opacity: 1;
  background: #2b0f3a;
  pointer-events: none;
}
[dir="rtl"] body .wallet-hero::before { left: auto; }
/* The four 1s in the corner, the last one lime */
html body .wallet-hero::after {
  content: ''; position: absolute; inset-inline-end: 24px; top: 22px; left: auto; bottom: auto; width: 62px; height: 60px; margin: 0;
  border-radius: 0; transform: none; opacity: 1; filter: none;
  background: var(--sgd-ones-white) center / contain no-repeat;
  pointer-events: none;
}
[dir="rtl"] body .wallet-hero::after { right: auto; transform: scaleX(-1); }
@media (max-width: 639px) {
  html body .wallet-hero::after { width: 40px; height: 40px; top: 24px; inset-inline-end: 14px; }
}
html body .wallet-hero > * { position: relative; z-index: 1; }
html body .wallet-hero .wallet-ref { margin-inline-end: 92px; color: #ffffff !important; letter-spacing: .16em; font-size: .66rem; font-weight: 700; }
@media (max-width: 639px) { html body .wallet-hero .wallet-ref { margin-inline-end: 50px; } }
html body .wallet-hero span:is([style*="color:rgba(255,255,255"], [style*="color:color-mix(in srgb, var(--paper)"]) { color: #ffffff !important; }
html body .wallet-hero [style*="color:#fff"], html body .wallet-hero [style*="color: #fff"], html body .wallet-hero .text-white { color: #ffffff !important; }
html body .wallet-hero .h-px { background: rgba(255, 255, 255, .32) !important; }
html body .wallet-balance-num {
  font-family: var(--font-num); font-variation-settings: normal; font-weight: 600; letter-spacing: .005em;
  color: #ffffff; overflow-wrap: normal; font-variant-numeric: lining-nums tabular-nums;
}
html body .wallet-hero-btn-primary { background: var(--btn-hinge), #ffffff; color: #2b0f3a; border: 0; font-family: var(--font-ui); font-weight: 700; border-radius: 4px; box-shadow: 0 3px 0 #2b0f3a; transition: transform .12s ease, box-shadow .12s ease; }
html body .wallet-hero-btn-primary:hover { background: var(--btn-hinge), #fff4f3; color: #2b0f3a; }
html body .wallet-hero-btn-primary:active { transform: translateY(3px); box-shadow: 0 0 0 #2b0f3a; }
html body .wallet-hero-btn-secondary { font-family: var(--font-ui); font-weight: 700; color: #ffffff; background: rgba(43, 15, 58, .28); border: 2px solid rgba(255, 255, 255, .6); border-radius: 4px; }
html body .wallet-hero-btn-secondary:hover { background: rgba(43, 15, 58, .42); }
/* At midnight the card is plum, its 1s glowing coral */
html.dark body .wallet-hero {
  background:
    var(--sgd-led),
    linear-gradient(135deg, #4a1d5e, #2b0f3a 50%, #1a0724);
  box-shadow: 0 5px 0 #000, 0 0 0 1px rgba(255, 90, 79, .35), 0 0 60px -16px rgba(255, 90, 79, .55);
}
html.dark body .wallet-hero::before { background: #ff5a4f; }
:root {
  --sgd-ones-white: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 98 96'%3E%3Cg fill='%23ffffff' fill-opacity='.92'%3E%3Cpath d='M11.68 6H24V90H11.68V31.94L2 34.6V13.64Z'/%3E%3Cpath d='M35.68 6H48V90H35.68V31.94L26 34.6V13.64Z'/%3E%3Cpath d='M59.68 6H72V90H59.68V31.94L50 34.6V13.64Z'/%3E%3C/g%3E%3Cpath fill='%23c6ff3d' d='M83.68 6H96V90H83.68V31.94L74 34.6V13.64Z'/%3E%3C/svg%3E");
}

/* ── Box card (styled by assets/css/pages/home.css) ── */
html .ed-card-mystery {
  position: relative;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform .3s cubic-bezier(.2, .9, .3, 1.2), box-shadow .3s ease;
}
html .ed-card-mystery:hover { box-shadow: var(--shadow-md); transform: translateY(-4px); }
html .ed-card-mystery::before {
  top: 12px; left: 0; right: auto; bottom: auto; width: 4px; height: 34px; border-radius: 0;
  background: var(--sgd-coral); opacity: 1; z-index: 2;
}
html .ed-card-mystery img { position: relative; z-index: 1; }

/* ── Product page buy box: a white panel with the coral stroke along
   its head ── */
html body .pd-buybox {
  position: relative;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 8px;
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
html body .pd-buybox::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 5px;
  background: var(--sgd-topline);
}
html body .pd-buybox .font-display.text-4xl { color: var(--ink); overflow-wrap: normal; font-family: var(--font-num); letter-spacing: 0; }
.pd-title { font-weight: 700 !important; }

/* The box page's own spin button is ink on paper and dynamic-theme's
   ".dark button" turns its label the colour of its fill; readable here on
   plugin releases without their own fix. */
html.dark button.spin-btn:not(:disabled) { color: var(--btn-ink); }

/* Shared markup's stock purple, indigo and blue accents (coupon buttons,
   tier chips, focus rings) take the night's plum and coral. */
html .bg-purple-600, html .bg-indigo-600, html .bg-violet-600 { background-color: var(--theme-600); }
html .hover\:bg-purple-700:hover, html .hover\:bg-indigo-700:hover, html .hover\:bg-violet-700:hover { background-color: var(--theme-700); }
html .text-purple-500, html .text-purple-600, html .text-indigo-500, html .text-indigo-600, html .text-violet-600, html .text-blue-600, html .text-blue-500 { color: var(--sgd-plum-ink); }
html .bg-purple-600.text-white, html .bg-indigo-600.text-white, html .bg-violet-600.text-white {
  background: var(--btn-hinge), var(--btn-bg) !important; color: var(--btn-ink) !important; border-radius: 4px; box-shadow: 0 3px 0 var(--btn-side);
}
html .bg-purple-50, html .bg-indigo-50, html .bg-violet-50, html .bg-purple-100, html .bg-blue-50 { background-color: var(--sgd-plum-soft); }
html.dark .bg-purple-50, html.dark .bg-indigo-50, html.dark .bg-violet-50, html.dark .bg-blue-50 { background-color: var(--sgd-plum-soft) !important; }
html .border-purple-200, html .border-indigo-200, html .border-violet-200, html .border-blue-200 { border-color: rgba(91, 42, 115, .28); }
html.dark .border-violet-200 { border-color: rgba(200, 140, 230, .35) !important; }
html .focus\:ring-purple-400:focus { --tw-ring-color: rgba(255, 59, 48, .3); }
html .focus\:border-purple-400:focus { border-color: var(--sgd-coral); }

/* Shared buttons drawn in the accent with white lettering (Place Order,
   Buy Now bars) are the theme's coral flaps. */
html .bg-theme-600.text-white, html .bg-theme-500.text-white,
html .bg-blue-600.text-white, html .bg-blue-500.text-white {
  background: var(--btn-hinge), var(--btn-bg) !important;
  color: var(--btn-ink) !important;
  box-shadow: var(--btn-shadow) !important;
}
html .bg-theme-600.text-white:hover, html .bg-theme-500.text-white:hover { background: var(--btn-hinge), var(--btn-bg-hover) !important; }
html .bg-theme-600.text-white [class*="border-white"] { border-color: rgba(255, 255, 255, .3); border-top-color: var(--btn-ink); }

/* ── Winners page cards ── */
html .wnc { border-radius: var(--radius); background: var(--paper-2); border: 1px solid var(--rule); box-shadow: var(--shadow); transition: transform .3s cubic-bezier(.2, .9, .3, 1.2), box-shadow .3s ease; }
html .wnc:hover { box-shadow: var(--shadow-md); transform: translateY(-4px); }

/* ── Cart and checkout: the order total on a receipt ──
   Picked out by what the panels contain, so no copies of their markup
   (or their Alpine hooks) live in the theme. */
html [id^="cart-row-"] { background: var(--paper-2) !important; border: 1px solid var(--rule) !important; border-radius: 6px !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 var(--rule) !important;
  border-radius: 6px 6px 0 0 !important;
  box-shadow: var(--shadow-md) !important;
  overflow: visible;
  -webkit-mask: var(--sgd-tear-mask); mask: var(--sgd-tear-mask);
  padding-bottom: 1.6rem;
}
html .rounded-2xl:has(> div > div > #summary-total)::before,
html section.rounded-2xl:has([x-text="totalDisplay()"])::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 5px; border-radius: 6px 6px 0 0;
  background: var(--sgd-topline);
}
html #summary-total,
html section.rounded-2xl [x-text="totalDisplay()"] {
  font-family: var(--font-num);
  font-weight: 600;
  font-size: clamp(1.4rem, 5vw, 1.9rem);
  letter-spacing: 0;
  color: var(--ink);
  overflow-wrap: normal;
  font-variant-numeric: lining-nums tabular-nums;
}
/* A receipt's torn foot: a row of small teeth along the bottom edge */
:root { --sgd-tear-mask: linear-gradient(#000 0 0) top / 100% calc(100% - 9px) no-repeat, conic-gradient(from 135deg at 50% 0, #000 90deg, transparent 0) bottom / 14px 9px repeat-x; }

/* The status strip holds one line, never wrapping inside its 32px. */
.hdr-strip .ed-status, .hdr-strip .ed-status * { white-space: nowrap; }
.hdr-strip .ed-status { font-size: 11px; letter-spacing: .12em; }
/* Small phones: the dark-mode switch and the App chip in the header drop
   their words and keep their icons. */
@media (max-width: 419px) {
  html .hdr-strip .dark-mode-toggle span { display: none; }
  html .mobile-glass-header .pwa-chip__label { display: none; }
  html .mobile-glass-header .pwa-chip { padding: 0 .6rem; }
}

/* The hero's pillars are drawn by components/home/hero.css, which
   arrives after this sheet; until it does they wait out of sight. */
.sgd-hero__scene { visibility: hidden; max-height: 0; overflow: hidden; }

/* ── The night's small pieces ── */
/* The five colours banners and categories are mapped to (sgd_tone_for()) */
:root { --sgd-t1: #ff3b30; --sgd-t2: #5b2a73; --sgd-t3: #8fc712; --sgd-t4: #ff8a1f; --sgd-t5: #e0337a; }
html.dark { --sgd-t1: #ff5a4f; --sgd-t2: #9a5cbd; --sgd-t3: #ccff4a; --sgd-t4: #ffa04d; --sgd-t5: #ff5c9c; }
.sgd-strip-dot { display: inline-block; width: 3px; height: 11px; background: currentColor; opacity: .45; flex-shrink: 0; }

/* The 11.11 lamp: a plum tag with the lime numerals, lit while the
   season is on (.is-off when it is not) */
.sgd-onair {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .32rem .7rem .3rem;
  font-family: var(--font-display); font-weight: 600;
  font-size: 12px; line-height: 1.1; letter-spacing: .1em; text-transform: uppercase;
  color: #c6ff3d;
  background: linear-gradient(180deg, #43195a 0 50%, #2b0f3a 50%);
  border-radius: 3px;
  box-shadow: 0 0 0 2px #2b0f3a, 0 3px 0 2px #0b0310;
  white-space: nowrap;
}
.sgd-onair::before { content: ''; width: 3px; height: 11px; background: #ff3b30; flex-shrink: 0; box-shadow: 5px 0 0 #ff3b30; margin-inline-end: 5px; }
.sgd-onair.is-off { color: rgba(255, 241, 245, .72); }
.sgd-onair.is-off::before { background: rgba(255, 255, 255, .35); box-shadow: 5px 0 0 rgba(255, 255, 255, .35); }
html:is(:lang(ar), :lang(ur), :lang(bn), :lang(zh), :lang(ru), :lang(el)) .sgd-onair { letter-spacing: .02em; font-size: 12.5px; }
@media (prefers-reduced-motion: no-preference) {
  .sgd-onair:not(.is-off) { animation: sgd-onair 2.8s ease-in-out 4; }
}
@keyframes sgd-onair { 50% { box-shadow: 0 0 0 2px #2b0f3a, 0 3px 0 2px #0b0310, 0 0 18px rgba(198, 255, 61, .45); } }

/* "Live": a short coral stroke that pulses */
.sgd-live { position: relative; display: inline-block; width: 4px; height: 12px; border-radius: 1px; background: #ff3b30; box-shadow: 0 0 8px rgba(255, 59, 48, .7); flex-shrink: 0; }
@media (prefers-reduced-motion: no-preference) {
  .sgd-live { animation: sgd-tally 1.4s ease-in-out infinite; }
}
@keyframes sgd-tally { 50% { opacity: .4; transform: scaleY(.6); } }

/* A number on its own split-flap cell: --s its size, --b its band
   (1..6), the number in a <span> */
.sgd-ball {
  --s: 40px; --b: 1;
  position: relative; display: inline-grid; place-items: center; flex-shrink: 0;
  width: calc(var(--s) * .82); height: var(--s); border-radius: 4px;
  background: linear-gradient(180deg, var(--hi) 0 49%, rgba(0, 0, 0, .35) 49% 51%, var(--c) 51%);
  background-blend-mode: normal;
  box-shadow: 0 3px 0 rgba(0, 0, 0, .28);
  --c: var(--sgd-ball-1); --hi: var(--sgd-ball-1);
}
.sgd-ball[data-b="2"] { --c: var(--sgd-ball-2); --hi: var(--sgd-ball-2); }
.sgd-ball[data-b="3"] { --c: var(--sgd-ball-3); --hi: var(--sgd-ball-3); }
.sgd-ball[data-b="4"] { --c: var(--sgd-ball-4); --hi: var(--sgd-ball-4); }
.sgd-ball[data-b="5"] { --c: var(--sgd-ball-5); --hi: var(--sgd-ball-5); }
.sgd-ball[data-b="6"] { --c: var(--sgd-ball-6); --hi: var(--sgd-ball-6); }
.sgd-ball > span {
  position: relative; z-index: 1;
  font: 600 calc(var(--s) * .52)/1 var(--font-num); letter-spacing: 0; color: #fff;
}
.sgd-ball::after { content: ''; position: absolute; inset: 0 0 50%; border-radius: 4px 4px 0 0; background: rgba(255, 255, 255, .12); }

/* Split-flap figures (sgd_flaps()): each figure on its own cell, --fs
   the figure's size */
.sgd-flaps { --fs: 32px; display: inline-flex; align-items: stretch; gap: calc(var(--fs) * .1); direction: ltr; }
.sgd-flapcell {
  position: relative; display: inline-grid; place-items: center;
  min-width: calc(var(--fs) * .74); height: calc(var(--fs) * 1.3); padding: 0 calc(var(--fs) * .06);
  font: 600 var(--fs)/1 var(--font-num); color: var(--sgd-flap-ink); font-variant-numeric: tabular-nums lining-nums;
  background: var(--sgd-flap);
  border-radius: calc(var(--fs) * .1);
  box-shadow: 0 calc(var(--fs) * .08) 0 #0b0310;
}
.sgd-flapcell::before, .sgd-flapcell::after { content: ''; position: absolute; top: 50%; width: 3px; height: 7px; margin-top: -3.5px; background: #0b0310; border-radius: 1px; }
.sgd-flapcell::before { left: -1px; }
.sgd-flapcell::after { right: -1px; }
.sgd-flapcell--sep { min-width: 0; padding: 0 calc(var(--fs) * .04); background: none; box-shadow: none; color: var(--sgd-coral); }
.sgd-flapcell--sep::before, .sgd-flapcell--sep::after { display: none; }

/* A price flag: a plum tab and a white bar with a notched tail */
.sgd-l3 { display: inline-flex; align-items: stretch; max-width: 100%; filter: drop-shadow(0 6px 10px rgba(43, 15, 58, .2)); }
.sgd-l3__tab {
  display: inline-flex; align-items: center; padding: .3rem .7rem;
  font: 600 12px/1.2 var(--font-display); letter-spacing: .1em; text-transform: uppercase; color: #c6ff3d;
  background: #2b0f3a;
  flex-shrink: 0; white-space: nowrap;
}
.sgd-l3__bar {
  display: inline-flex; align-items: center; padding: .3rem 1.3rem .3rem .75rem; min-width: 0;
  font: 700 12px/1.25 var(--font-ui); letter-spacing: .06em; text-transform: uppercase; color: #2b0f3a;
  background: #fff;
  clip-path: polygon(0 0, 100% 0, calc(100% - 9px) 50%, 100% 100%, 0 100%);
}
[dir="rtl"] .sgd-l3__bar { padding: .3rem .75rem .3rem 1.3rem; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 9px 50%); }
html.dark .sgd-l3__bar { background: #fff1f5; }

.sgd-balance, .sgd-icon-btn { border: 2px solid var(--rule); color: var(--ink); background: var(--paper-2); transition: border-color .2s ease, transform .12s ease, box-shadow .12s ease; box-shadow: 0 2px 0 var(--rule); border-radius: 4px !important; }
.sgd-balance:hover, .sgd-icon-btn:hover { border-color: var(--sgd-coral); }
.sgd-balance:active, .sgd-icon-btn:active { transform: translateY(2px); box-shadow: 0 0 0 var(--rule); }
.sgd-balance [data-raw] { font-family: var(--font-num); font-weight: 600; letter-spacing: .01em; }
/* A panel for dialogs and sheets: white, the coral stroke with its lime
   end along the top */
.sgd-sheet {
  position: relative; overflow: hidden;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 8px;
  box-shadow: 0 5px 0 var(--ink), 0 24px 50px -24px rgba(43, 15, 58, .5);
}
.sgd-sheet::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: var(--sgd-topline); }
html.dark .sgd-sheet { box-shadow: 0 5px 0 #000, 0 0 0 1px rgba(255, 90, 79, .2), 0 24px 50px -20px rgba(0, 0, 0, .9); }
html body [style*="background:#16a34a"] { background: var(--sgd-green) !important; }
/* The floating nav pill is printed inside the footer; it floats over the
   page and keeps the page's own colours. */
html body .sgd-footer .ed-floating-nav { --ink: #2b0f3a; --ink-2: #4a2a58; --paper-3: #fbe6e7; }
html.dark body .sgd-footer .ed-floating-nav { --ink: #fff1f5; --ink-2: #ead3e2; --paper-3: #2e1240; }
/* The phone menu button: a white flap */
html body .menu-btn, html.dark body .menu-btn { background: var(--paper-2) !important; border: 2px solid var(--rule) !important; border-radius: 4px !important; box-shadow: 0 2px 0 var(--rule); }
html body .menu-btn:hover, html.dark body .menu-btn:hover { background: var(--paper-3) !important; transform: none; }
html body .menu-btn:active { transform: translateY(2px); box-shadow: none; }

/* ── Micro-interactions shared by the whole night ──
   A badge drops in on its hinge like a flap when it first appears
   (.sgd-light-in); the main countdown's figures roll up as a minute
   turns over and every second through the last ten, card countdowns
   keep still (.sgd-tick); in its last ten seconds a countdown goes
   coral (.sgd-final, singles-day.js); a tall 1 lands in whatever bids, buys
   or adds to the cart (.sgd-drop). */
@media (prefers-reduced-motion: no-preference) {
  .sgd-light-in { animation: sgd-light-in .5s cubic-bezier(.3, .7, .4, 1.3) both; transform-origin: 50% 0; }
  .sgd-tick { animation: sgd-tick .34s cubic-bezier(.3, .7, .4, 1); }
}
@keyframes sgd-light-in { 0% { transform: perspective(240px) rotateX(-90deg); opacity: .3; } 100% { transform: none; opacity: 1; } }
@keyframes sgd-tick { 0% { transform: translateY(18%); clip-path: inset(0 0 12% 0); } 100% { transform: none; clip-path: inset(0); } }
.sgd-final { color: var(--sgd-coral) !important; }
.sgd-drop {
  position: fixed; z-index: 2147482000; pointer-events: none;
  width: 14px; height: 30px; margin: -30px 0 0 -7px;
  background: var(--sgd-ones-one) center / contain no-repeat;
  animation: sgd-drop .75s cubic-bezier(.5, 0, .75, 0) forwards;
}
:root { --sgd-ones-one: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 50'%3E%3Cpath fill='%23c6ff3d' stroke='%232b0f3a' stroke-width='2.5' stroke-linejoin='round' d='M11 2h11v46H11V17L2 20V8z'/%3E%3C/svg%3E"); }
@keyframes sgd-drop {
  0% { transform: translateY(-90px) rotate(-14deg); opacity: 0; }
  12% { opacity: 1; }
  62% { transform: translateY(0) rotate(0); opacity: 1; animation-timing-function: cubic-bezier(.2, .8, .3, 1); }
  76% { transform: translateY(-10px) rotate(4deg); }
  90% { transform: translateY(0) scale(1.1, .86); opacity: 1; }
  100% { transform: translateY(6px) scale(.5); opacity: 0; }
}
.sgd-slot-flash { box-shadow: 0 0 0 3px rgba(198, 255, 61, .8), var(--btn-shadow) !important; }

/* ── Walls: the 1111 strokes beside the words ──
   A wall that carries words draws its strokes on a layer of its own,
   masked away from the copy: down both sides of a centred copy, on the
   far side of a copy that sits to one side, nowhere at phone width. */
:root {
  --sgd-wall-pat: repeating-linear-gradient(90deg, rgba(255, 59, 48, .16) 0 3px, transparent 3px 9px, rgba(255, 59, 48, .16) 9px 12px, transparent 12px 18px, rgba(255, 59, 48, .16) 18px 21px, transparent 21px 27px, rgba(143, 199, 18, .3) 27px 30px, transparent 30px 60px);
  --sgd-mask-c: linear-gradient(90deg, #000 0, #000 7%, transparent 19%, transparent 81%, #000 93%, #000 100%);
  --sgd-mask-s: linear-gradient(90deg, transparent 0, transparent 52%, #000 64%, #000 100%);
}
html.dark { --sgd-wall-pat: repeating-linear-gradient(90deg, rgba(255, 90, 79, .2) 0 3px, transparent 3px 9px, rgba(255, 90, 79, .2) 9px 12px, transparent 12px 18px, rgba(255, 90, 79, .2) 18px 21px, transparent 21px 27px, rgba(204, 255, 74, .24) 27px 30px, transparent 30px 60px); }
[dir="rtl"] { --sgd-mask-s: linear-gradient(270deg, transparent 0, transparent 52%, #000 64%, #000 100%); }
@media (max-width: 1023px) {
  :root, [dir="rtl"] { --sgd-mask-c: linear-gradient(transparent, transparent); --sgd-mask-s: linear-gradient(transparent, transparent); }
}
.sgd-wn, html body .sgd-lamplit, html body .sgd-err, body.sgd-404, .sgd-draw, html body .brand-panel, .ga-marquee { isolation: isolate; }
.sgd-wn::before, html body .sgd-lamplit::before, html body .sgd-err::before, body.sgd-404::before, .sgd-draw::before, .ga-marquee::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: var(--sgd-wall-pat);
  -webkit-mask: var(--sgd-mask-c); mask: var(--sgd-mask-c);
}
.ga-marquee::after { -webkit-mask: var(--sgd-mask-s); mask: var(--sgd-mask-s); display: block; }
body.sgd-404::before { position: fixed; }
.sgd-lamps { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--sgd-wall-pat); -webkit-mask: var(--sgd-mask-c); mask: var(--sgd-mask-c); }

/* 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.4rem, 7vw, 1.8rem); }
  html body :is(h1, h2, h3):is(.text-fit, .truncate) { overflow-wrap: break-word; word-break: normal; hyphens: manual; }
}

/* Phones: a ticket's two dates stack rather than run into each other; the
   bids page's four tiles go two by two (a long German label was cut
   off); a lot page's browse link drops under its heading (its German
   label 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; }
}

/* The four 1s mark (sgd_pillars_svg()), wherever it stands */
.sgd-mark__one { fill: #ff3b30; stroke: #2b0f3a; stroke-width: 2.4; stroke-linejoin: round; }
.sgd-mark__one--d { fill: #c6ff3d; }
html.dark .sgd-mark__one { fill: #ff5a4f; stroke: #0b0310; }
html.dark .sgd-mark__one--d { fill: #ccff4a; }
html.dark .sgd-mark { filter: drop-shadow(0 0 12px rgba(255, 90, 79, .45)); }

/* The top edge of a white tag: the coral stroke, a gap, the lime end */
:root { --sgd-topline: linear-gradient(90deg, var(--sgd-coral) 0 calc(100% - 46px), transparent calc(100% - 46px) calc(100% - 40px), var(--sgd-lime-deep) calc(100% - 40px)); }
html.dark { --sgd-topline: linear-gradient(90deg, var(--sgd-coral) 0 calc(100% - 46px), transparent calc(100% - 46px) calc(100% - 40px), var(--sgd-lime) calc(100% - 40px)); }
[dir="rtl"] { --sgd-topline: linear-gradient(270deg, var(--sgd-coral) 0 calc(100% - 46px), transparent calc(100% - 46px) calc(100% - 40px), var(--sgd-lime-deep) calc(100% - 40px)); }
html.dark[dir="rtl"], html.dark [dir="rtl"] { --sgd-topline: linear-gradient(270deg, var(--sgd-coral) 0 calc(100% - 46px), transparent calc(100% - 46px) calc(100% - 40px), var(--sgd-lime) calc(100% - 40px)); }

/* A product's white ground: thumbnails, the prize in a dialog, the icon
   of a notice */
:root {
  --sgd-face: linear-gradient(180deg, #ffffff, #fdeeee);
  --sgd-face-ring: inset 0 0 0 1px rgba(43, 15, 58, .1), inset 0 -3px 0 var(--sgd-coral);
  /* A pool of light for walls that want one */
  --sgd-window: radial-gradient(closest-side, rgba(255, 255, 255, .8), rgba(255, 255, 255, 0));
  /* A meter: tall strokes filling in coral */
  --sgd-meter: repeating-linear-gradient(90deg, transparent 0 6px, rgba(255, 255, 255, .55) 6px 8px), linear-gradient(90deg, var(--sgd-coral), #ff7a5c);
}
html.dark {
  --sgd-face: linear-gradient(180deg, #3a1a4c, #241031);
  --sgd-face-ring: inset 0 0 0 1px rgba(255, 190, 220, .2), inset 0 -3px 0 var(--sgd-coral);
  --sgd-window: radial-gradient(closest-side, rgba(255, 90, 79, .25), rgba(255, 90, 79, 0));
  --sgd-meter: repeating-linear-gradient(90deg, transparent 0 6px, rgba(18, 5, 26, .55) 6px 8px), linear-gradient(90deg, var(--sgd-coral), #ff8a6a);
}
/* Phones: a long single word in a big section title ("funktioniert's")
   gets a size that fits the row instead of breaking */
@media (max-width: 639px) {
  html body h2.text-fit.text-4xl { font-size: clamp(1.35rem, 6.6vw, 2.25rem); }
}

/* 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: #0b7449; --px-warn: #b45309; --px-crit: #c71e14; --px-info: #b148e0; }
html.dark:root { --px-good: #39d699; --px-warn: #fbbf23; --px-crit: #ff928a; --px-info: #daa8f0; }

/* Changing language, the scene (singles-day.js): the two ones close on the
   old code into 11, flash, and part again on the new name and its heart;
   after the reload the heart beats and the ones glow. The panel is the
   midnight plum in both modes, so its colours are fixed. The picture is the
   same on both pages, so the reload never shows. */
.sgd-lang-stage { background: rgba(26, 7, 36, .62); }
.sgd-lang-scene {
  --sgd-lang-gap: min(170px, calc(50vw - 72px));
  position: relative; width: min(560px, 100%); min-height: 230px; box-sizing: border-box; padding: 24px 0; overflow: hidden;
  display: grid; place-items: center;
  color: #fff1f5; background: radial-gradient(70% 90% at 50% 50%, #3d1a50, #1a0724 75%);
  border-radius: var(--radius, 6px); box-shadow: 0 34px 70px -28px rgba(0, 0, 0, .7); font-family: var(--font-ui);
}
.sgd-lang-one {
  position: absolute; left: 50%; top: 50%; z-index: 1; margin-top: -.52em;
  font: 700 clamp(110px, 30vw, 170px)/1 var(--font-num); color: #c6ff3d;
}
.sgd-lang-one-l { transform: translateX(calc(-100% - var(--sgd-lang-gap))); }
.sgd-lang-one-r { transform: translateX(var(--sgd-lang-gap)); }
.sgd-lang-flash {
  position: absolute; left: 50%; top: 50%; z-index: 0; width: 260px; height: 260px; margin: -130px 0 0 -130px; border-radius: 50%;
  background: radial-gradient(circle, #ffffff 0 12%, rgba(198, 255, 61, .7) 30%, transparent 68%); opacity: 0;
}
.sgd-lang-old {
  position: absolute; left: 50%; top: 50%; z-index: 2; font: 700 clamp(28px, 8vw, 40px)/1 var(--font-num); letter-spacing: .08em;
  color: #fff1f5; transform: translate(-50%, -50%) scale(.3); opacity: 0;
}
.sgd-lang-new {
  position: relative; z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 6px;
  max-width: calc(2 * var(--sgd-lang-gap) - 16px); text-align: center;
}
.sgd-lang-heart { font-size: 22px; line-height: 1; color: #ff3b30; }
.sgd-lang-name { max-width: 100%; font: 600 clamp(24px, 7vw, 42px)/1.12 var(--font-display); color: #fff1f5; overflow-wrap: anywhere; }
.sgd-lang-code { display: inline-flex; align-items: center; gap: 6px; font: 700 12px/1 var(--font-num); letter-spacing: .14em; color: #c6ff3d; }
.sgd-lang-code img { width: 18px; height: 18px; border-radius: 50%; object-fit: cover; }

/* Out: the ones meet over the old code, flash as 11 and part on the new name. */
.px-lang-stage-out .sgd-lang-scene { animation: sgd-lang-up .3s cubic-bezier(.2, .8, .3, 1.1) both; }
.px-lang-stage-out .sgd-lang-one-l { animation: sgd-lang-meet-l .74s cubic-bezier(.5, 0, .3, 1) .26s both; }
.px-lang-stage-out .sgd-lang-one-r { animation: sgd-lang-meet-r .74s cubic-bezier(.5, 0, .3, 1) .26s both; }
.px-lang-stage-out .sgd-lang-old { animation: sgd-lang-squeeze .74s linear .26s both; }
.px-lang-stage-out .sgd-lang-flash { animation: sgd-lang-flash .74s linear .26s both; }
.px-lang-stage-out .sgd-lang-new { animation: sgd-lang-split .74s ease-out .26s both; }
/* In: it starts where out ended; the heart beats, the ones glow. */
.px-lang-stage-in .sgd-lang-heart { animation: sgd-lang-beat .45s ease-in-out .15s 2 both; }
.px-lang-stage-in .sgd-lang-one { animation: sgd-lang-glow .7s ease-in-out .1s both; }
.px-lang-stage-in .sgd-lang-scene { animation: sgd-lang-away .28s ease-in 1s both; }
@keyframes sgd-lang-up { from { transform: translateY(40px); opacity: 0; } }
@keyframes sgd-lang-away { to { transform: translateY(26px); opacity: 0; } }
@keyframes sgd-lang-meet-l {
  35%, 58% { transform: translateX(-97%); filter: none; }
  46%      { filter: brightness(1.5) drop-shadow(0 0 14px #c6ff3d); }
}
@keyframes sgd-lang-meet-r {
  35%, 58% { transform: translateX(-3%); filter: none; }
  46%      { filter: brightness(1.5) drop-shadow(0 0 14px #c6ff3d); }
}
@keyframes sgd-lang-squeeze {
  from, 22% { transform: translate(-50%, -50%); opacity: 1; }
  36%       { transform: translate(-50%, -50%) scale(.3); opacity: 0; }
}
@keyframes sgd-lang-flash {
  from, 40% { opacity: 0; transform: scale(.4); }
  50%       { opacity: 1; transform: none; }
  78%, to   { opacity: 0; transform: scale(1.3); }
}
@keyframes sgd-lang-split { from, 56% { opacity: 0; transform: scale(.5); } }
@keyframes sgd-lang-beat { 30% { transform: scale(1.35); } 60% { transform: scale(.95); } }
@keyframes sgd-lang-glow { 50% { filter: drop-shadow(0 0 12px rgba(198, 255, 61, .8)); } }

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

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

/* Confirm windows: the shared hover brightens the OK button, which took
   white text under 4.5:1 here; it darkens a touch instead. */
html:not(.dark) body .px-confirm__btn--ok:not(.px-confirm__btn--destructive):hover { filter: brightness(.92); }

/* 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: #d43128;
}
html:not(.dark) :is([role="dialog"], #logoutModal) {
  --btn-bg: #c5231a;
  --btn-bg-hover: #c5231a;
}
html.dark :is([role="dialog"], #logoutModal) {
  --btn-bg: #ff6a60;
  --btn-bg-hover: #ff6a60;
}
/* rev 868fe5109c9f2a2b */