/* ============================================================
   MEGA SALE THEME — the shop floor on sale day.
   Same class surface as editorial/theme.css, so shared header,
   footer, drawer and component classes stay styled.

   Built from the things of retail: clearance-yellow price tags
   with a hard poster shadow, markdown red for anything urgent,
   hazard tape, barcodes and zig-zag receipt edges. Receipt white
   by day; after-hours charcoal under lit signage by night.

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

:root {
  --font-display: 'Anton', 'Archivo', Impact, sans-serif;
  --font-ui:      'Archivo', 'Inter', system-ui, sans-serif;

  --paper:        #f7f6f1;
  --paper-2:      #ffffff;
  --paper-3:      #ecebe4;
  --ink:          #111111;
  --ink-2:        #31312e;
  --ink-soft:     #5f5e58;
  --rule:         rgba(17, 17, 17, 0.16);
  --rule-soft:    rgba(17, 17, 17, 0.08);
  --radius:       10px;
  --radius-sm:    6px;
  --shadow:       0 1px 0 rgba(17, 17, 17, .08);
  --shadow-md:    5px 5px 0 #111111;

  /* Markdown red */
  --theme-50:  #fff1f0;
  --theme-100: #ffdcd9;
  --theme-200: #ffb3ad;
  --theme-300: #ff8078;
  --theme-400: #ff4a3d;
  --theme-500: #e10600;
  --theme-600: #c20500;
  --theme-700: #9e0400;
  --theme-800: #7a0300;
  --theme-900: #520200;
  --theme-500-rgb: 225, 6, 0;
  --theme-600-rgb: 194, 5, 0;
  /* Ink for cart badges on --theme-600 */
  --theme-600-ink: #ffffff;

  --yellow:      #ffd400;
  --yellow-2:    #ffe14d;
  --yellow-ink:  #111111;
  --tag-edge:    #111111;

  /* Names other themes' shared markup reaches for */
  --gold:       #ffd400;
  --gold-2:     #ffe14d;
  --gold-soft:  rgba(255, 212, 0, 0.22);
  --gold-ink:   #111111;
  --felt:       #111111;
  --felt-2:     #1c1c1c;
  --on-felt:    #f4f4ef;
  --on-felt-soft: rgba(244, 244, 239, 0.72);
  /* Second accent: the markdown red of a reduced price */
  --markdown:       #e10600;
  --markdown-soft:  rgba(225, 6, 0, 0.10);
  --peacock:    #1f6feb;
  --peacock-soft: rgba(31, 111, 235, 0.10);

  --notify-accent: var(--theme-500);
  --nav-accent:    var(--theme-600);
  --hdr-strip-bg:  #111111;
  --hdr-strip-rule: transparent;
  --text-primary:  var(--ink);

  /* Buttons: a yellow price tag with a hard black edge and poster shadow */
  --btn-bg:       #ffd400;
  --btn-bg-hover: #ffe14d;
  --btn-ink:      #111111;
  --btn-edge:     #111111;
  --btn-shadow:   3px 3px 0 #111111;
  --btn-shadow-hover: 5px 5px 0 #111111;

  --hazard: repeating-linear-gradient(-45deg, #ffd400 0 10px, #111111 10px 20px);
  --barcode: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='20' viewBox='0 0 60 20'><g fill='%23111111'><rect x='0' width='2' height='20'/><rect x='3' width='1' height='20'/><rect x='6' width='3' height='20'/><rect x='10' width='1' height='20'/><rect x='13' width='2' height='20'/><rect x='17' width='1' height='20'/><rect x='19' width='3' height='20'/><rect x='24' width='1' height='20'/><rect x='26' width='2' height='20'/><rect x='30' width='1' height='20'/><rect x='33' width='3' height='20'/><rect x='37' width='1' height='20'/><rect x='40' width='2' height='20'/><rect x='44' width='1' height='20'/><rect x='46' width='3' height='20'/><rect x='51' width='1' height='20'/><rect x='53' width='2' height='20'/><rect x='57' width='1' height='20'/></g></svg>");
  --grid: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32'><path d='M32 0H0V32' fill='none' stroke='%23111111' stroke-opacity='0.045'/></svg>");

  --page-bg: var(--grid) repeat, var(--paper);
}

html.dark {
  --paper:        #141414;
  --paper-2:      #1c1c1c;
  --paper-3:      #262626;
  --ink:          #f4f4ef;
  --ink-2:        #d7d7cf;
  --ink-soft:     #a3a39b;
  --rule:         rgba(244, 244, 239, 0.16);
  --rule-soft:    rgba(244, 244, 239, 0.08);
  --shadow:       0 1px 0 rgba(0, 0, 0, .5);
  --shadow-md:    5px 5px 0 #ffd400;

  --theme-50:  #2a1110;
  --theme-100: #3d1513;
  --theme-200: #6e1d18;
  --theme-300: #ffb3ad;
  --theme-400: #ff8078;
  --theme-500: #ff4133;
  --theme-600: #ff5a4e;
  --theme-700: #ff8078;
  --theme-800: #ffb3ad;
  --theme-900: #ffdcd9;
  --theme-500-rgb: 255, 65, 51;
  --theme-600-rgb: 255, 90, 78;
  --theme-600-ink: #111111;

  --markdown:       #ff4133;
  --markdown-soft:  rgba(255, 65, 51, 0.14);
  --peacock:    #58a6ff;
  --peacock-soft: rgba(88, 166, 255, 0.12);

  --nav-accent:    var(--yellow);
  --hdr-strip-bg:  #000000;

  --btn-edge:     #000000;
  --btn-shadow:   3px 3px 0 #000000;
  --btn-shadow-hover: 5px 5px 0 #000000;
  --tag-edge:     #000000;

  --barcode: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='20' viewBox='0 0 60 20'><g fill='%23f4f4ef'><rect x='0' width='2' height='20'/><rect x='3' width='1' height='20'/><rect x='6' width='3' height='20'/><rect x='10' width='1' height='20'/><rect x='13' width='2' height='20'/><rect x='17' width='1' height='20'/><rect x='19' width='3' height='20'/><rect x='24' width='1' height='20'/><rect x='26' width='2' height='20'/><rect x='30' width='1' height='20'/><rect x='33' width='3' height='20'/><rect x='37' width='1' height='20'/><rect x='40' width='2' height='20'/><rect x='44' width='1' height='20'/><rect x='46' width='3' height='20'/><rect x='51' width='1' height='20'/><rect x='53' width='2' height='20'/><rect x='57' width='1' height='20'/></g></svg>");
  --grid: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32'><path d='M32 0H0V32' fill='none' stroke='%23f4f4ef' stroke-opacity='0.035'/></svg>");
  --page-bg:
    radial-gradient(900px 420px at 50% -120px, rgba(255, 212, 0, 0.07), transparent 70%) no-repeat,
    var(--grid) repeat,
    var(--paper);
}

/* ── Shop-floor materials ──
   What every surface is cut from, kept as tokens so the skins and the
   plugin variants share them:
   - stickers (--s1 … --s6): markdown red, clearance yellow, hot-deal
     pink, best-buy green, last-chance orange and the black tag, the
     colours of the stickers slapped on sale stock. Green means "done" or
     "saved", so colour cycles over cards and rows skip it and take the
     black tag in its place;
   - the starburst (--burst-mask): icon tiles, toast icons, the current
     page number, seals and heading marks;
   - the price tag (--tag-mask, a punched hole on its pointed end): chosen
     pills, badges, section markers;
   - the receipt edge (--zigzag-top / --zigzag-bottom): stat cards, tickets,
     orders and anything torn off the till roll;
   - hazard tape (--hazard) across sheet and modal tops, barcodes along
     their feet, and the hard poster shadow (--poster). */
:root {
  --s1: #e10600;
  --s2: #ffd400;
  --s3: #e5007d;
  --s4: #12a150;
  --s5: #ff7a00;
  --s6: #111111;
  --sticker-ink: #111111;
  --poster: 4px 4px 0 var(--ink);
  --poster-lg: 6px 6px 0 var(--ink);
  --burst-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M50 0 L56.9 10.6 L67.1 3 L70 15.4 L82.1 11.7 L80.6 24.3 L93.3 25 L87.6 36.3 L99.2 41.3 L90 50 L99.2 58.7 L87.6 63.7 L93.3 75 L80.6 75.7 L82.1 88.3 L70 84.6 L67.1 97 L56.9 89.4 L50 100 L43.1 89.4 L32.9 97 L30 84.6 L17.9 88.3 L19.4 75.7 L6.7 75 L12.4 63.7 L0.8 58.7 L10 50 L0.8 41.3 L12.4 36.3 L6.7 25 L19.4 24.3 L17.9 11.7 L30 15.4 L32.9 3 L43.1 10.6 Z'/></svg>") center / contain no-repeat;
  --tag-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 40' preserveAspectRatio='none'><path fill-rule='evenodd' d='M14 0H116a4 4 0 0 1 4 4V36a4 4 0 0 1-4 4H14L0 20ZM17 16a4 4 0 1 0 0 8a4 4 0 1 0 0-8Z'/></svg>") 0 0 / 100% 100% no-repeat;
  --zigzag-bottom: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 14px 100%;
  --zigzag-top: conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) 50% / 14px 100%;
  --hazard-thin: repeating-linear-gradient(-45deg, #ffd400 0 6px, #111111 6px 12px);
  --hazard-red: repeating-linear-gradient(-45deg, #e10600 0 10px, #ffffff 10px 20px);
  --perf: linear-gradient(90deg, var(--rule) 50%, transparent 0) 0 0 / 10px 2px repeat-x;
}
html.dark {
  /* Picture wells after hours: a soft graphite glow, so black products read */
  --ms-well-glow: radial-gradient(circle at 50% 45%, #4d4c47 0, #2e2d2a 58%, #1f1f1d 100%);
  --s1: #ff4133;
  --s3: #ff4fa0;
  --s4: #3ddc84;
  --s5: #ff9a3d;
  --s6: #f4f4ef;
  --poster: 4px 4px 0 #000000;
  --poster-lg: 6px 6px 0 #000000;
}

/* ── Game palette ──
   The earn-games arena posts these into each HTML5 board, so 2048 tiles,
   hex cells and word-grid letters come out as sale stickers on the shop's
   squared paper: tiles climb from a pale yellow tag through orange to
   markdown red, then price-drop blue and finally black. */
:root {
  --game-bg:        #f7f6f1;
  --game-surface:   #e7e5dc;
  --game-surface-2: #ffffff;
  --game-ink:       #111111;
  --game-muted:     #5f5e58;
  --game-accent:    #e10600;
  --game-accent-ink:#ffffff;
  --game-good:      #12a150;
  --game-bad:       #e10600;
  --game-tile-1:    #fff1a8;
  --game-tile-2:    #ffd400;
  --game-tile-3:    #ffa31a;
  --game-tile-4:    #ff6a13;
  --game-tile-5:    #e10600;
  --game-tile-6:    #9e0400;
  --game-tile-7:    #1f6feb;
  --game-tile-8:    #111111;
  --game-radius:    6px;
  --game-font:      'Anton', 'Archivo', Impact, sans-serif;
  --game-font-css:  "/assets/themes/mega-sale/assets/fonts/fonts.css";
  /* Arena chrome (assets/css/game-arena.css): the shop floor, not a dark screen */
  --game-arena-screen: #f7f6f1;
  --game-arena-coins:  #b38f00;
  --game-arena-win:    #12a150;
  --game-arena-danger: #e10600;
  --game-pattern:   url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32'><path d='M32 0H0V32' fill='none' stroke='%23111111' stroke-opacity='0.06'/></svg>");
}
html.dark {
  --game-bg:        #141414;
  --game-surface:   #1f1f1f;
  --game-surface-2: #2b2b2b;
  --game-ink:       #f4f4ef;
  --game-muted:     #a3a39b;
  --game-accent:    #ffd400;
  --game-accent-ink:#111111;
  --game-good:      #3ddc84;
  --game-bad:       #ff4133;
  --game-tile-1:    #3b3518;
  --game-tile-2:    #ffd400;
  --game-tile-3:    #ffb02e;
  --game-tile-4:    #ff7a33;
  --game-tile-5:    #ff4133;
  --game-tile-6:    #c7231a;
  --game-tile-7:    #58a6ff;
  --game-tile-8:    #f4f4ef;
  --game-arena-screen: #141414;
  --game-arena-coins:  #ffd400;
  --game-arena-win:    #3ddc84;
  --game-arena-danger: #ff4133;
  --game-pattern:   url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32'><path d='M32 0H0V32' fill='none' stroke='%23f4f4ef' stroke-opacity='0.05'/></svg>");
}

/* ── Base ──
   Tailwind's compiled sheet loads after the theme, so selectors that must
   beat its single-class utilities carry an extra html qualifier. */
html body {
  background: var(--page-bg);
  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: .01em;
}
.display-italic { font-style: normal; }

/* Anton is a poster face: at card-title sizes the shared markup's
   .font-display falls back to the text face in bold. */
html .font-display:is(.text-xs, .text-sm, .text-base, .text-lg, .text-\[10px\], .text-\[11px\], .text-\[12px\], .text-\[13px\], .text-\[14px\], .text-\[15px\]) {
  font-family: var(--font-ui);
  font-weight: 800;
  letter-spacing: 0;
}

::selection { background: var(--yellow); color: #111; }

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

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

/* Section eyebrow — a little red price tag in front of the label */
html .section-eyebrow {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-family: var(--font-ui);
  font-size: 11px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--theme-600);
  margin-bottom: 0.7rem;
}
html .section-eyebrow::before {
  content: ''; flex-shrink: 0;
  width: 20px; height: 12px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 24'><path d='M10 0H38a2 2 0 0 1 2 2V22a2 2 0 0 1-2 2H10L0 12Z' fill='%23e10600'/><circle cx='11' cy='12' r='3' fill='%23ffffff'/></svg>") center / contain no-repeat;
}
[dir="rtl"] .section-eyebrow::before { transform: scaleX(-1); }

.btn-view-all {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-family: var(--font-ui);
  font-size: 0.86rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .04em;
  white-space: nowrap; flex-shrink: 0;
  color: var(--ink);
  padding: .3rem .1rem 3px;
  border-bottom: 3px solid var(--yellow);
  text-decoration: none;
  transition: gap 0.18s ease;
}
.btn-view-all:hover { gap: 0.75rem; }
[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(--grid); }

.ed-folio { font-family: var(--font-display); font-style: normal; font-weight: 400; color: var(--theme-600); }

/* ── Header ── */
#desktopHeader .hdr-search {
  background: var(--paper-2);
  border: 2px solid var(--ink);
  border-radius: 8px;
}
#desktopHeader .hdr-search:focus-within { box-shadow: 3px 3px 0 var(--yellow); }
html.dark #desktopHeader .hdr-search { background: var(--paper-2); border-color: var(--rule); }
html.dark #desktopHeader .hdr-search:focus-within { border-color: var(--yellow); }
.ed-search { background: transparent; border: none; }

.hdr-strip, .hdr-strip .ed-status { color: rgba(244, 244, 239, 0.82); }
.hdr-strip a:hover, .hdr-strip button:hover { color: var(--yellow); }

/* Hazard tape under the main header bar */
.ms-tape { height: 8px; background: var(--hazard); }
.ms-tape--thin { height: 5px; }

/* Countdown chip in the status strip */
.ms-strip-sale {
  display: inline-flex; align-items: center; gap: .5rem;
  color: var(--yellow); font-weight: 800; letter-spacing: .08em;
}
.ms-strip-sale [data-ms-countdown] { font-variant-numeric: tabular-nums; color: #fff; }

.ed-subnav { align-items: center; background: var(--paper-2); border-bottom: 2px solid var(--ink); }
html.dark .ed-subnav { border-bottom-color: 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: 800;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--theme-600); white-space: nowrap;
  padding-right: 1.25rem; border-right: 1px solid var(--rule);
}
[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.3rem; flex-wrap: wrap; }
.ed-subnav-item {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.4rem 0.8rem; border-radius: 6px;
  font-family: var(--font-ui); font-size: 0.9rem; font-weight: 600;
  color: var(--ink-2); text-decoration: none;
  border: 2px solid transparent;
}
.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); border-color: var(--rule); }
.ed-subnav-item.active { background: var(--yellow); color: #111; border-color: #111; }
.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: 800;
  color: var(--ink); text-decoration: none;
  padding-bottom: 2px; border-bottom: 3px solid var(--yellow);
  transition: gap 0.18s ease;
}
.ed-link-arrow:hover { gap: 0.7rem; }

html .ed-btn-primary, html .ed-plan-cta, html .drawer-login {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
  padding: 0.78rem 1.5rem;
  white-space: nowrap;
  font-family: var(--font-ui); font-size: 0.95rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .03em;
  color: var(--btn-ink);
  background: var(--btn-bg);
  border: 2px solid var(--btn-edge);
  border-radius: 8px;
  box-shadow: var(--btn-shadow);
  text-decoration: none;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s 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: translate(-1px, -1px); box-shadow: var(--btn-shadow-hover);
}
html .ed-btn-primary:active, html .ed-plan-cta:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--btn-edge); }
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); }
html body .ed-plan-featured .ed-plan-cta, html.dark body .ed-plan-featured .ed-plan-cta,
html body .ed-plan-cta, html.dark body .ed-plan-cta {
  background: var(--btn-bg); color: var(--btn-ink); border: 2px solid var(--btn-edge); box-shadow: var(--btn-shadow);
}
.ed-btn-primary:focus-visible, .ed-btn-secondary:focus-visible, .ed-plan-cta:focus-visible { outline: 3px solid var(--theme-500); outline-offset: 3px; }

.ed-btn-secondary {
  display: inline-flex; align-items: center; gap: 0.55rem;
  padding: 0.76rem 1.4rem;
  font-family: var(--font-ui); font-size: 0.92rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .03em;
  color: var(--ink); background: var(--paper-2);
  border: 2px solid var(--ink); border-radius: 8px;
  transition: background 0.12s ease;
}
.ed-btn-secondary:hover { background: var(--paper-3); }
html.dark .ed-btn-secondary { color: var(--ink); border-color: var(--rule); }
:is([data-bnr-layout="cover"], [data-bnr-layout="product"]) .ed-btn-primary { color: #111; }

/* ── Cards: shelf stock — white, a firm black edge, and a poster shadow
   that steps out on hover ── */
html .ed-plan, html .shop-card {
  position: relative;
  background: var(--paper-2);
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  box-shadow: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
html.dark .ed-plan, html.dark .shop-card { border-color: rgba(244, 244, 239, .22); }
html .ed-plan:hover, html .shop-card:hover { transform: translate(-2px, -2px); box-shadow: var(--shadow-md); }
html .ed-plan-featured {
  position: relative;
  background: #111111; color: #f4f4ef;
  border: 2px solid #111111; border-radius: var(--radius);
  overflow: hidden;
}
html.dark .ed-plan-featured { background: #000; border-color: var(--yellow); color: #f4f4ef; }
.ed-plan-featured::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 8px; background: var(--hazard);
}
.ed-plan-hairline { border-color: var(--rule); }
.ed-plan-featured .ed-plan-hairline { border-color: rgba(244, 244, 239, .2); }

/* ── Status text ── */
.ed-status { font-family: var(--font-ui); font-size: 11.5px; font-weight: 600; letter-spacing: 0.06em; color: var(--ink-soft); }
.ed-topnav-link { color: rgba(244, 244, 239, 0.82); text-decoration: none; transition: color 0.16s ease; }
.ed-topnav-link:hover, .ed-topnav-link.active { color: var(--yellow); }

/* ── Drawer ── */
.drawer-section-label {
  display: flex; align-items: center; gap: 0.6rem;
  font-family: var(--font-ui); font-size: 11px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--theme-600); padding: 1.1rem 1.5rem 0.4rem;
}
.drawer-section-label::after { content: ''; flex: 1; height: 10px; background: var(--barcode) repeat-x; background-size: 30px 10px; opacity: .35; }
.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: 600;
  color: var(--ink-2); 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: 8px; font-family: var(--font-ui); font-size: 0.95rem; font-weight: 800;
  color: var(--theme-600); border: 2px solid var(--theme-600); text-decoration: none;
}
.drawer-logout:hover { background: var(--markdown-soft); }

.mobile-glass-header {
  background: rgba(247, 246, 241, 0.94);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-bottom: 2px solid var(--ink);
}
html.dark .mobile-glass-header { background: rgba(20, 20, 20, 0.94); }

.ed-avatar-ring { box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--ink); }
html.dark .ed-avatar-ring { box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--yellow); }

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

.ed-dropdown {
  background: var(--paper-2);
  border: 2px solid var(--ink); border-radius: 10px;
  box-shadow: 6px 6px 0 var(--ink);
  overflow: hidden;
}
html.dark .ed-dropdown { border-color: rgba(244, 244, 239, .22); box-shadow: 6px 6px 0 #000; }
.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: 600;
  color: var(--ink-2); text-decoration: none;
}
.ed-dropdown-item:hover { background: var(--yellow); color: #111; }
.ed-section-cap {
  font-family: var(--font-ui); font-size: 11px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--theme-600); padding: 0.9rem 1rem 0.4rem;
}

.ed-mobile-link.active { color: var(--nav-accent); }

.ms-barcode { display: block; height: 22px; background: var(--barcode) repeat-x; background-size: 66px 22px; }

/* Zig-zag receipt edge along an element's bottom */
.ms-receipt-edge {
  -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 14px 100%;
          mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 14px 100%;
}

/* ── Countdown digits ── */
.ms-count { display: flex; gap: .45rem; }
.ms-count__unit { display: flex; flex-direction: column; align-items: center; gap: .2rem; min-width: 0; }
/* The day box leaves on the last day (mega-sale.js). */
[data-ms-days][hidden], [data-ms-lastday][hidden] { display: none !important; }
.ms-count__num {
  font-family: var(--font-display); font-size: clamp(1.7rem, 4vw, 2.6rem); line-height: 1;
  background: #111; color: var(--yellow);
  padding: .35rem .5rem; border-radius: 6px; min-width: 2.3ch; text-align: center;
  font-variant-numeric: tabular-nums;
}
.ms-count__label { font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; }

/* ── Dark/light toggle: a rolling shop shutter ──
   assets/themes/mega-sale/assets/js/mega-sale.js registers the transition:
   a slatted steel shutter rolls down, the mode flips while it is shut,
   then it rolls back up. */
.px-fx--ms-shutter {
  position: fixed; inset: 0; z-index: 2147483000; pointer-events: none;
  background:
    repeating-linear-gradient(180deg, #2b2b2b 0 22px, #1a1a1a 22px 24px, #3a3a3a 24px 26px),
    #222;
  transform: translateY(-100%);
  transition: transform 0.45s cubic-bezier(.7, 0, .3, 1);
}
.px-fx--ms-shutter::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 14px; background: var(--hazard);
}

/* ── Footer: a receipt torn off the till ── */
.ms-footer {
  --paper:     #111111;
  --paper-2:   #1c1c1c;
  --paper-3:   #262626;
  --ink:       #f4f4ef;
  --ink-2:     #dcdcd4;
  --ink-soft:  #a8a8a0;
  --rule:      rgba(244, 244, 239, 0.18);
  --rule-soft: rgba(244, 244, 239, 0.09);
  --theme-500: #ffd400; --theme-600: #ffd400; --theme-700: #ffe14d;
  --theme-500-rgb: 255, 212, 0;
  position: relative;
}
html.dark .ms-footer { --paper: #000000; --paper-2: #141414; }
.ms-footer-edge {
  height: 14px; background: #111;
  -webkit-mask: conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) 50% / 14px 100%;
          mask: conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) 50% / 14px 100%;
  margin-bottom: -1px;
}
html.dark .ms-footer-edge { background: #000; }
.ms-footer a:hover { color: var(--yellow); }
html.dark #desktopFooter li { color: var(--ink-2) !important; }

html .ed-floating-nav {
  background: var(--paper-2);
  border: 2px solid var(--ink);
  box-shadow: 5px 5px 0 var(--ink);
}
html.dark .ed-floating-nav { border-color: rgba(244, 244, 239, .25); box-shadow: 5px 5px 0 #000; }
html .ed-floating-nav .ed-floating-link { font-family: var(--font-ui); font-size: .92rem; font-weight: 700; 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(--yellow); color: #111 !important; box-shadow: inset 0 0 0 2px #111; }
html body .ed-floating-nav a.ed-floating-link.active > span { color: #111 !important; }

html body .ms-footer .ed-newsletter {
  background: #1c1c1c; color: var(--ink);
  border: 2px solid var(--yellow); border-radius: 12px;
  box-shadow: 6px 6px 0 var(--yellow);
}
html.dark body .ms-footer .ed-newsletter { background: #141414; }
html body .ms-footer .ed-newsletter::after { display: none; }
html body .ms-footer .ed-newsletter-input { background: #000; color: var(--ink); border: 2px solid rgba(244, 244, 239, .3); border-radius: 8px; }
html body .ms-footer .ed-newsletter-input::placeholder { color: var(--ink-soft); }
html body .ms-footer .ed-newsletter-input:focus { border-color: var(--yellow); }
html body .ms-footer .ed-newsletter-btn {
  background: var(--yellow); color: #111; border: 2px solid #000; border-radius: 8px;
  font-family: var(--font-ui); font-weight: 800; text-transform: uppercase;
}
html body .ms-footer .ed-newsletter-age { color: var(--ink-2); }

/* Logo label: the light-mode logo on a white price label with a barcode
   strip, wherever it sits on black (footer, app splash). */
.ms-logo-label {
  position: relative;
  display: inline-flex; flex-direction: column; align-items: center; gap: .55rem;
  padding: 1rem 1.6rem .75rem;
  background: #ffffff;
  border: 2px solid #111;
  border-radius: 8px;
  box-shadow: 5px 5px 0 var(--yellow);
}
.ms-logo-label .ms-barcode { width: 100%; height: 14px; background-size: 42px 14px; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='20' viewBox='0 0 60 20'><g fill='%23111111'><rect x='0' width='2' height='20'/><rect x='3' width='1' height='20'/><rect x='6' width='3' height='20'/><rect x='10' width='1' height='20'/><rect x='13' width='2' height='20'/><rect x='17' width='1' height='20'/><rect x='19' width='3' height='20'/><rect x='24' width='1' height='20'/><rect x='26' width='2' height='20'/><rect x='30' width='1' height='20'/><rect x='33' width='3' height='20'/><rect x='37' width='1' height='20'/><rect x='40' width='2' height='20'/><rect x='44' width='1' height='20'/><rect x='46' width='3' height='20'/><rect x='51' width='1' height='20'/><rect x='53' width='2' height='20'/><rect x='57' width='1' height='20'/></g></svg>"); }
.ms-logo-label--sm { padding: .7rem 1.1rem .55rem; box-shadow: 4px 4px 0 var(--yellow); }

/* 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; }
/* Except a phone back bar's title: the kernel's fit-title.js shrinks and
   slides it, and needs a box it can overflow, or a long name pushes the
   balance chip off the screen (auction and mystery-box pages at 360). */
html body header.safe-top-header .truncate { min-width: 0; overflow: hidden; }
/* .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; }
/* On phones a heading never splits mid-word; only a word wider than the
   whole column may still break. */
@media (max-width: 639px) {
  html body :is(.text-fit, :is(h1, h2, h3).truncate) { overflow-wrap: break-word; word-break: normal; hyphens: manual; }
  /* the auction page's "similar auctions" link ("Andere Auktionen durchstöbern") drops under its heading */
  html body div.flex.justify-between:has(> a.ed-link-arrow.whitespace-nowrap) { flex-wrap: wrap; row-gap: .75rem; }
  /* a full-width button wraps a long label ("Andere Auktionen durchstöbern" at 360) instead of running past its edge */
  html body .ed-btn-primary.w-full { white-space: normal; text-wrap: balance; text-align: center; }
}

/* ── 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 the theme's own surfaces. */
html.dark body { background-color: var(--paper) !important; }
html.dark .mobile-glass-header { background: rgba(20, 20, 20, 0.94) !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(28, 28, 28, 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, #1c1c1c, #111, #262626, #000) !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 stay black with light lettering. */
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: #000000;
  --paper: #f4f4ef;
  border-color: rgba(255, 212, 0, .35);
}

html header.safe-top-header[style] { background: rgba(247, 246, 241, .95) !important; }
html.dark header.safe-top-header[style] { background: rgba(20, 20, 20, .95) !important; }

/* ── Login / register / forgot-password brand panel ── */
:root, html.dark {
  --brand-gradient: linear-gradient(160deg, #1c1c1c 0%, #111 60%, #000 100%);
  --brand-glow-1: rgba(255, 212, 0, 0.18);
  --brand-glow-2: rgba(255, 65, 51, 0.16);
}
.brand-panel { background: var(--brand-gradient) !important; }
/* assets/css/pages/login.css loads after the theme and draws ::after as a
   round glow; here it is a strip of hazard tape along the panel's foot. */
html .brand-panel::after {
  content: ''; position: absolute;
  left: 0 !important; right: 0 !important; bottom: 0 !important; top: auto !important;
  width: 100% !important; height: 16px !important;
  border-radius: 0 !important; transform: none !important; opacity: 1 !important;
  background: var(--hazard) !important;
}
.brand-panel .text-purple-200,
.brand-panel [class*="text-purple-200"] { color: rgba(244, 244, 239, 0.8) !important; }
.brand-panel h2 { font-family: var(--font-display); font-weight: 400 !important; letter-spacing: .02em; text-transform: uppercase; }

/* ── Wallet balance card: a black store card ── */
html body .wallet-hero {
  background:
    linear-gradient(90deg, transparent calc(100% - 120px), rgba(255, 212, 0, .12) calc(100% - 120px)),
    linear-gradient(150deg, #1c1c1c 0%, #000 80%);
  border: 2px solid #000;
  border-radius: 16px;
  box-shadow: 6px 6px 0 var(--yellow);
  color: #f4f4ef;
}
html[dir="rtl"] body .wallet-hero { background: linear-gradient(270deg, transparent calc(100% - 120px), rgba(255, 212, 0, .12) calc(100% - 120px)), linear-gradient(210deg, #1c1c1c 0%, #000 80%); }
html body .wallet-hero::before { left: 0; right: 0; height: 10px; background: var(--hazard); }
html body .wallet-balance-num {
  font-family: var(--font-display); font-variation-settings: normal; font-weight: 400;
  letter-spacing: .01em; color: var(--yellow);
}
html body .wallet-hero-btn-primary { background: var(--yellow); color: #111; border: 2px solid #000; font-family: var(--font-ui); font-weight: 800; text-transform: uppercase; border-radius: 8px; }
html body .wallet-hero-btn-primary:hover { background: var(--yellow-2); color: #111; }
html body .wallet-hero-btn-secondary { font-family: var(--font-ui); font-weight: 700; color: #f4f4ef; border-color: rgba(244, 244, 239, .4); border-radius: 8px; }

/* ── Mystery box card (styled by assets/css/pages/home.css): a parcel —
   a strip of hazard tape seals it along the picture side. ── */
html .ed-card-mystery {
  background: var(--paper-2);
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  overflow: hidden;
}
html.dark .ed-card-mystery { border-color: rgba(244, 244, 239, .22); }
html .ed-card-mystery:hover { box-shadow: var(--shadow-md); transform: translate(-2px, -2px); }
html .ed-card-mystery::before {
  top: 0; bottom: 0; left: 18%; right: auto; width: 14px; height: auto; border-radius: 0;
  background: var(--hazard); opacity: .9; z-index: 0;
}
[dir="rtl"] .ed-card-mystery::before { left: auto; right: 18%; }
html .ed-card-mystery img { position: relative; z-index: 1; }

/* ── Product page buy box: a shelf label with a barcode foot ── */
html body .pd-buybox {
  position: relative;
  background: var(--paper-2);
  border: 2px solid var(--ink);
  box-shadow: 6px 6px 0 var(--yellow);
}
html.dark body .pd-buybox { border-color: rgba(244, 244, 239, .25); }
html body .pd-buybox::after {
  content: ''; position: absolute; left: 1.25rem; bottom: .7rem; width: 96px; height: 14px;
  background: var(--barcode) repeat-x; background-size: 42px 14px; opacity: .55;
}
html body .pd-buybox .font-display.text-4xl { font-weight: 400; color: var(--theme-600); }
.pd-title { font-weight: 400 !important; text-transform: uppercase; }

/* The mystery box plugin's own 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(--paper); }

/* Shared markup's stock purple, indigo and blue accents (coupon buttons,
   tier chips, focus rings) take the theme's markdown red. */
html .bg-purple-600, html .bg-indigo-600, html .bg-violet-600 { background-color: var(--theme-500); }
html .hover\:bg-purple-700:hover, html .hover\:bg-indigo-700:hover, html .hover\:bg-violet-700:hover { background-color: var(--theme-600); }
html .text-purple-500, html .text-purple-600, html .text-indigo-500, html .text-indigo-600, html .text-violet-600 { color: var(--theme-600); }
/* Solid purple action buttons (coupon Apply and the like) sit beside a field,
   so they match the black Search buttons rather than shouting in red. */
html .bg-purple-600.text-white, html .bg-indigo-600.text-white, html .bg-violet-600.text-white {
  background-color: var(--ink) !important; color: var(--paper) !important;
  border-radius: 8px; text-transform: uppercase; letter-spacing: .04em;
}
html .bg-purple-50, html .bg-indigo-50, html .bg-violet-50, html .bg-purple-100 { background-color: var(--markdown-soft); }
html.dark .bg-purple-50, html.dark .bg-indigo-50, html.dark .bg-violet-50 { background-color: var(--markdown-soft) !important; }
html .border-purple-200, html .border-indigo-200, html .border-violet-200 { border-color: rgba(225, 6, 0, .3); }
html.dark .border-violet-200 { border-color: rgba(255, 65, 51, .35) !important; }
html .focus\:ring-purple-400:focus { --tw-ring-color: rgba(225, 6, 0, .4); }
html .focus\:border-purple-400:focus { border-color: var(--theme-500); }

/* Shared buttons drawn in the accent with white lettering (Place Order,
   Buy Now bars) are yellow price tags with black lettering. */
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-bg) !important;
  color: var(--btn-ink) !important;
  border: 2px solid var(--btn-edge);
  box-shadow: var(--btn-shadow) !important;
  text-transform: uppercase;
}
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(17, 17, 17, .3); border-top-color: #111; }

/* header.css fills every dark-mode field with a navy #0d1117; here fields
   are the same charcoal as the cards. 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: #1c1c1c !important;
  border-color: rgba(244, 244, 239, .22) !important;
  color: #f4f4ef !important;
}

/* ── My Winnings: each prize on a shelf with a price label ── */
.ms-win {
  background: var(--paper-2);
  border: 2px solid var(--ink);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 4px 4px 0 var(--ink);
}
html.dark .ms-win { border-color: rgba(244, 244, 239, .22); box-shadow: 4px 4px 0 #000; }
.ms-win__shelf { background: var(--paper); border-bottom: 2px solid var(--ink); }
/* After hours the shelf is lit from behind, so black prizes (a camera, a speaker) keep their outline */
html.dark .ms-win__shelf { background: var(--ms-well-glow); border-bottom-color: rgba(244, 244, 239, .22); }
.ms-win__tag {
  display: inline-flex; align-items: center;
  padding: .2rem .5rem;
  font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: #111; background: #fff; border: 2px solid #111; border-radius: 4px;
}
.ms-win__tag--open { background: var(--yellow); }
.ms-win__tag--done { background: #111; color: #fff; }
.ms-win__name {
  font-family: var(--font-display); font-weight: 400; font-size: 1.35rem; line-height: 1.1;
  text-transform: uppercase; color: var(--ink); overflow-wrap: anywhere;
}
.ms-win__label { padding-top: .6rem; border-top: 2px dashed var(--rule); }
.ms-win__price { font-family: var(--font-display); font-size: 1.25rem; line-height: 1; color: var(--markdown); }
.ms-win__btn { min-height: 2.75rem; padding: .55rem .9rem; font-size: .85rem; }
.ms-win__cart, .ms-win__btn-off {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  border-radius: 8px; font-weight: 800; text-transform: uppercase;
}
.ms-win__cart { color: var(--ink); background: transparent; border: 2px solid var(--ink); }
.ms-win__cart:hover { background: var(--yellow); color: #111; border-color: #111; }
.ms-win__btn-off { color: var(--ink-soft); background: transparent; border: 2px dashed var(--rule); cursor: not-allowed; }
.ms-win__claimed {
  display: flex; align-items: center; justify-content: center; gap: .4rem;
  min-height: 2.75rem; padding: .5rem;
  font-size: .8rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: #0d7f3f; border: 2px dashed currentColor; border-radius: 8px;
}
html.dark .ms-win__claimed { color: var(--s4); }

/* ── Winners page cards ── */
html .wnc { border-radius: var(--radius); background: var(--paper-2); border: 2px solid var(--ink); }
html.dark .wnc { border-color: rgba(244, 244, 239, .22); }
html .wnc:hover { box-shadow: var(--shadow-md); transform: translate(-2px, -2px); }

/* ── Cart and checkout: the order total prints as 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: 2px solid var(--ink) !important; }
html.dark [id^="cart-row-"] { border-color: rgba(244, 244, 239, .22) !important; }
html .rounded-2xl:has(> div > div > #summary-total),
html section.rounded-2xl:has([x-text="totalDisplay()"]) {
  position: relative;
  background: #ffffff !important;
  color: #111;
  border: 0 !important;
  border-radius: 4px 4px 0 0 !important;
  box-shadow: none !important;
  padding-bottom: 1.75rem !important;
  font-family: 'Courier New', ui-monospace, monospace;
  -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 14px 100%;
          mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 14px 100%;
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .2));
}
html .rounded-2xl:has(> div > div > #summary-total) *,
html section.rounded-2xl:has([x-text="totalDisplay()"]) * { color: #111 !important; border-color: rgba(17, 17, 17, .35) !important; }
html .rounded-2xl:has(> div > div > #summary-total) > div,
html section.rounded-2xl:has([x-text="totalDisplay()"]) > div { border-style: dashed !important; }
html #summary-total,
html section.rounded-2xl [x-text="totalDisplay()"] {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.7rem;
}

/* The status strip holds one line: date or sale countdown, live dot,
   menu and toggles, 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: .05em; }
@media (max-width: 1023px) { .hdr-strip .ms-strip-sale { font-size: 10px; gap: .35rem; } }
/* Small phones: the strip keeps the countdown, so 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; }
}
/* At 360 a long Register label ("Registrieren") needs the room the header's
   side padding and gaps would otherwise take. */
@media (max-width: 379px) {
  html body .mobile-glass-header { padding-inline: .75rem; }
  html body .mobile-glass-header > div:first-child { gap: .5rem; min-width: 0; }
  html body .mobile-glass-header > div:last-child { gap: .375rem; }
}

/* ── 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(--grid), var(--paper); font-family: var(--font-ui); }
html body .age-check-card {
  position: relative; overflow: hidden;
  padding-top: 2.6rem;
  background: var(--paper-2);
  border: 2px solid var(--ink);
  border-radius: 12px;
  box-shadow: 6px 6px 0 var(--ink);
}
html.dark body .age-check-card { border-color: rgba(244, 244, 239, .3); box-shadow: 6px 6px 0 #000; }
html body .age-check-card::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 12px;
  background: var(--hazard);
}
html body .age-check-card::after {
  content: ''; position: absolute; left: 50%; bottom: 12px; width: 120px; height: 14px; margin-left: -60px;
  background: var(--barcode) repeat-x; background-size: 42px 14px; opacity: .45;
}
html body .age-check-logo { border-radius: 8px; background: #fff; border: 2px solid #111; box-shadow: inset 0 -6px 0 var(--yellow), 3px 3px 0 #111; padding: 8px 8px 12px; }
html body .age-check-title { font-family: var(--font-display); font-weight: 400; letter-spacing: .01em; text-transform: uppercase; }
html body .age-check-input { border-radius: 8px; border: 2px solid var(--ink); background: var(--paper-2); font-family: var(--font-ui); }
html body .age-check-input:focus { box-shadow: 3px 3px 0 var(--yellow); outline: none; }
html body .age-check-submit { border-radius: 8px; background: var(--btn-bg); color: var(--btn-ink); border: 2px solid var(--btn-edge); box-shadow: var(--btn-shadow); font-family: var(--font-ui); font-weight: 800; text-transform: uppercase; }
html body .age-check-foot { padding-bottom: 1.4rem; }
html body .age-check-foot a { color: var(--ink); font-weight: 700; border-bottom: 3px solid var(--yellow); }
html body .lang-card {
  border-radius: 8px !important;
  border: 2px dashed var(--rule) !important;
  background: var(--paper-2) !important;
  transition: transform .12s ease, box-shadow .12s ease;
}
html body .lang-card:hover { transform: translate(-2px, -2px); border-style: solid !important; border-color: var(--ink) !important; box-shadow: 4px 4px 0 var(--ink); }
html body .lang-card:has(input:checked) {
  border-style: solid !important;
  border-color: #111 !important;
  box-shadow: 4px 4px 0 #111 !important;
  background: var(--yellow) !important;
}
html body .lang-card:has(input:checked) :is(p, span, div):not(.rounded-full) { color: #111 !important; }
html body .lang-card img { border-radius: 4px; box-shadow: 0 0 0 2px var(--ink); }
html body .lang-card:has(input:checked) .rounded-full:has(> .fa-check) { background: #111 !important; color: var(--yellow) !important; }
html body:has(.lang-card) h1 { font-family: var(--font-display); font-weight: 400 !important; letter-spacing: .01em !important; text-transform: uppercase; }
html body:has(.lang-card) .footer-safe { border-top: 2px solid var(--ink); box-shadow: none; }
html body:has(.lang-card) .footer-safe::before { content: ''; position: absolute; left: 0; right: 0; top: -8px; height: 6px; background: var(--hazard-thin); }
html body:has(.lang-card) .w-9.h-9.rounded-xl:has(> .fa-language) { background: var(--s1) !important; color: #fff !important; border-radius: 0 !important; -webkit-mask: var(--burst-mask); mask: var(--burst-mask); }

/* 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: #108e47; --px-warn: #b45309; --px-crit: #e00600; --px-info: #0075fa; }
html.dark:root { --px-good: #3ddc84; --px-warn: #fbbf23; --px-crit: #ffa59e; --px-info: #8ac0ff; }
/* Seller Centre keeps its own tone names; point them at the same hues. */
html body :is(.sc-page, .sc-panel) { --sc-good: var(--px-good); --sc-warn: var(--px-warn); --sc-crit: var(--px-crit); --sc-info: var(--px-info); }

/* Changing language, the scene (mega-sale.js): the old language's tag is
   struck through and burst with a markdown sticker, and a fresh tag for the
   new one swings in over it; after the reload the new tag settles, the old
   one drops away and the confetti pops. The rack is the same on both pages,
   so the reload never shows. */
.ms-lang-stage { background: color-mix(in srgb, var(--theme-900, #520200) 50%, transparent); }
.ms-lang-rack {
  --ms-shift: -36%;
  position: relative; width: min(560px, 100%); box-sizing: border-box; padding: 0 16px 26px; overflow: hidden;
  color: var(--ink, #111); background: var(--paper-2, #fff); border: 3px solid var(--tag-edge, #111); border-radius: var(--radius, 10px);
  box-shadow: 6px 6px 0 var(--tag-edge, #111); font-family: var(--font-ui, system-ui, sans-serif);
}
.ms-lang-rack::before {
  content: ""; display: block; height: 12px; margin: 0 -16px;
  background: repeating-linear-gradient(-45deg, var(--yellow, #ffd400) 0 12px, #111 12px 24px);
}
.ms-lang-rail { display: block; height: 8px; margin: 18px 0 0; border-radius: 4px; background: var(--ink, #111); opacity: .85; }
.ms-lang-tags { position: relative; display: grid; justify-items: center; padding-top: 34px; }
.ms-lang-tag {
  grid-area: 1 / 1; position: relative; width: 200px; transform-origin: 50% -34px;
  filter: drop-shadow(5px 5px 0 var(--tag-edge, #111));
}
.ms-lang-tag::before { content: ""; position: absolute; left: 50%; top: -34px; width: 2px; height: 50px; margin-left: -1px; background: var(--ink, #111); }
.ms-lang-face {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  min-height: 236px; box-sizing: border-box; padding: 46px 14px 20px; text-align: center;
  clip-path: polygon(50% 0, 100% 16%, 100% 100%, 0 100%, 0 16%);
}
.ms-lang-old .ms-lang-face { background: var(--yellow, #ffd400); color: #111; }
.ms-lang-new .ms-lang-face { background: var(--markdown, #e10600); color: #fff; }
.ms-lang-hole { position: absolute; left: 50%; top: 13px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: var(--paper-2, #fff); box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .3); }
.ms-lang-globe { width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.ms-lang-code { font: 400 clamp(42px, 12vw, 58px)/1 var(--font-display, Impact, sans-serif); letter-spacing: .02em; }
.ms-lang-name { max-width: 100%; font: 800 clamp(18px, 5.4vw, 24px)/1.15 var(--font-ui, system-ui, sans-serif); overflow-wrap: anywhere; }
.ms-lang-old { z-index: 1; opacity: .8; transform: translate(var(--ms-shift), 18px) rotate(-10deg) scale(.84); }
.ms-lang-new { z-index: 2; transform: translate(0, 0) rotate(7deg); }
.ms-lang-strike {
  position: absolute; left: 8%; right: 8%; top: 60%; height: 10px; border-radius: 3px; transform-origin: left center;
  background: var(--markdown, #e10600); box-shadow: 0 0 0 2px #111; transform: rotate(-16deg);
}
.ms-lang-burst {
  position: absolute; top: 24px; right: -24px; width: 70px; height: 70px; display: grid; place-items: center;
  background: var(--markdown, #e10600); color: #fff; font: 400 32px/1 var(--font-display, Impact, sans-serif);
  clip-path: polygon(50% 0%, 60% 13%, 75% 7%, 77% 23%, 93% 25%, 87% 40%, 100% 50%, 87% 60%, 93% 75%, 77% 77%, 75% 93%, 60% 87%, 50% 100%, 40% 87%, 25% 93%, 23% 77%, 7% 75%, 13% 60%, 0% 50%, 13% 40%, 7% 25%, 23% 23%, 25% 7%, 40% 13%);
  transform: rotate(-12deg);
}
.ms-lang-star {
  position: absolute; top: 34px; left: -16px; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  background: #111; color: var(--yellow, #ffd400); font-size: 24px; line-height: 1;
  opacity: 0; transform: rotate(-20deg) scale(2);
}
.ms-lang-confetti { position: absolute; left: 50%; top: 42%; z-index: 3; width: 0; height: 0; }
.ms-lang-confetti i { position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; background: var(--yellow, #ffd400); opacity: 0; }
.ms-lang-confetti i:nth-child(3n+2) { background: var(--markdown, #e10600); }
.ms-lang-confetti i:nth-child(3n) { background: var(--ink, #111); width: 6px; height: 14px; }
.ms-lang-confetti i:nth-child(1)  { --x: -130px; --y: -110px; --r: 220deg; }
.ms-lang-confetti i:nth-child(2)  { --x: -80px;  --y: -150px; --r: -180deg; }
.ms-lang-confetti i:nth-child(3)  { --x: -25px;  --y: -170px; --r: 260deg; }
.ms-lang-confetti i:nth-child(4)  { --x: 30px;   --y: -165px; --r: -240deg; }
.ms-lang-confetti i:nth-child(5)  { --x: 85px;   --y: -140px; --r: 200deg; }
.ms-lang-confetti i:nth-child(6)  { --x: 130px;  --y: -100px; --r: -280deg; }
.ms-lang-confetti i:nth-child(7)  { --x: -150px; --y: -20px;  --r: 160deg; }
.ms-lang-confetti i:nth-child(8)  { --x: 150px;  --y: -15px;  --r: -160deg; }
.ms-lang-confetti i:nth-child(9)  { --x: -120px; --y: 60px;   --r: 300deg; }
.ms-lang-confetti i:nth-child(10) { --x: 125px;  --y: 65px;   --r: -300deg; }
.ms-lang-confetti i:nth-child(11) { --x: -60px;  --y: -100px; --r: 120deg; }
.ms-lang-confetti i:nth-child(12) { --x: 65px;   --y: -95px;  --r: -120deg; }

/* Out: the old tag swings in, is struck and stickered, the new one swings over it. */
.px-lang-stage-out .ms-lang-rack { animation: ms-lang-rack-in .3s cubic-bezier(.2, .8, .3, 1.1) both; }
.px-lang-stage-out .ms-lang-old { animation: ms-lang-old 1.1s ease-in-out both; }
.px-lang-stage-out .ms-lang-strike { animation: ms-lang-strike .16s ease-out .4s both; }
.px-lang-stage-out .ms-lang-burst { animation: ms-lang-burst .26s cubic-bezier(.2, .9, .3, 1.4) .5s both; }
.px-lang-stage-out .ms-lang-new { animation: ms-lang-new-in .36s cubic-bezier(.3, .7, .4, 1) .74s both; }
/* In: it starts where out ended; the new tag settles and the old one drops. */
.px-lang-stage-in .ms-lang-new { animation: ms-lang-swing .7s ease-out both; }
.px-lang-stage-in .ms-lang-old { animation: ms-lang-old-off .45s ease-in .2s both; }
.px-lang-stage-in .ms-lang-star { animation: ms-lang-star .28s cubic-bezier(.2, .9, .3, 1.35) .45s both; }
.px-lang-stage-in .ms-lang-confetti i { animation: ms-lang-pop .7s cubic-bezier(.15, .7, .4, 1) .3s both; }
.px-lang-stage-in .ms-lang-rack { animation: ms-lang-rack-out .26s ease-in 1s both; }
@keyframes ms-lang-rack-in { from { transform: translateY(40px); opacity: 0; } }
@keyframes ms-lang-rack-out { to { transform: translateY(26px); opacity: 0; } }
@keyframes ms-lang-old {
  0%   { opacity: 0; transform: translate(0, -110%) rotate(10deg) scale(1); }
  22%  { opacity: 1; transform: translate(0, 0) rotate(-6deg) scale(1); }
  34%  { opacity: 1; transform: translate(0, 0) rotate(3deg) scale(1); }
  46%  { opacity: 1; transform: translate(0, 0) rotate(0deg) scale(1); }
  70%  { opacity: 1; transform: translate(0, 0) rotate(0deg) scale(1); }
  100% { opacity: .8; transform: translate(var(--ms-shift), 18px) rotate(-10deg) scale(.84); }
}
@keyframes ms-lang-strike { from { transform: rotate(-16deg) scaleX(0); } to { transform: rotate(-16deg) scaleX(1); } }
@keyframes ms-lang-burst { from { transform: rotate(-120deg) scale(0); } }
@keyframes ms-lang-new-in { from { opacity: 0; transform: translate(30%, -120%) rotate(-28deg); } }
@keyframes ms-lang-swing {
  0%   { transform: translate(0, 0) rotate(7deg); }
  35%  { transform: translate(0, 0) rotate(-4deg); }
  65%  { transform: translate(0, 0) rotate(2deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}
@keyframes ms-lang-old-off { to { opacity: 0; transform: translate(var(--ms-shift), 140px) rotate(-24deg) scale(.8); } }
@keyframes ms-lang-star { to { opacity: 1; transform: rotate(-12deg) scale(1); } }
@keyframes ms-lang-pop {
  0%   { opacity: 0; transform: scale(.3); }
  15%  { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--x, 0), var(--y, 0)) rotate(var(--r, 0deg)); }
}
@media (max-width: 460px) {
  .ms-lang-rack { --ms-shift: -24%; padding: 0 12px 22px; }
  .ms-lang-rack::before { display: none; }
  .ms-lang-burst { right: -14px; width: 58px; height: 58px; font-size: 26px; }
  .ms-lang-tag { width: 180px; }
}

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


/* Withdraw window: Submit is painted in this theme's good green
   (--px-good); a shade deeper here by day, where white on it stood
   under 4.5:1. */
html:not(.dark) body #withdrawModal button[type="submit"][style*="--px-good"] { background: #0f8341 !important; }

/* Phone strip: the language button shows the language's own name, which can
   be long (Português (Brasil), Bahasa Indonesia). Tighter gaps make room, a
   long name is capped, and the strip chip gives way with an ellipsis instead
   of running under the toggles. */
@media (max-width: 1023.98px) {
  .hdr-strip { column-gap: .5rem; }
  .hdr-strip > .ed-status:last-child { column-gap: .625rem; }
  .hdr-strip [data-px-call="openLangSheet"] > span[lang] { max-width: 7.5em; overflow: hidden; text-overflow: ellipsis; }
  .hdr-strip > .ed-status:first-child { overflow-x: clip; }
  .hdr-strip > .ed-status:first-child > *, .hdr-strip > .ed-status:first-child > * > :not([aria-hidden], svg, img, i) { min-width: 0; }
  .hdr-strip > .ed-status:first-child > * > :is([aria-hidden], svg, img, i) { flex-shrink: 0; }
  .hdr-strip > .ed-status:first-child > * > :is(span, bdi):not([aria-hidden]), .hdr-strip > .ed-status:first-child bdi { overflow: hidden; text-overflow: ellipsis; }
}
/* rev 868fe5109c9f2a2b */