/* ============================================================
   BACK TO SCHOOL THEME — the new-term stationery shop.
   Same class surface as editorial/theme.css, so shared header,
   footer, drawer and component classes stay styled.

   Built from the desk in the first week of term: squared exercise
   paper with a red margin, a wooden ruler, pencils and crayons,
   sticky notes, washi tape and a corkboard of index cards. Paper
   and ink by day (the default); by night the classroom chalkboard,
   chalk-white letters on slate green with chalk-yellow highlights.

   The theme sets the --theme-* accent ramp itself (board green by
   day, chalk yellow by night), so the admin's accent colour setting
   does not apply while it is active.
   ============================================================ */

:root {
  --font-display: 'Playpen Sans', 'Fira Sans', 'Segoe UI', system-ui, sans-serif;
  --font-ui:      'Fira Sans', 'Segoe UI', system-ui, sans-serif;

  --paper:        #fbf8ef;
  --paper-2:      #ffffff;
  --paper-3:      #f2ede0;
  --ink:          #1f2a44;
  --ink-2:        #3c4763;
  --ink-soft:     #687089;
  --rule:         rgba(31, 42, 68, 0.14);
  --rule-soft:    rgba(31, 42, 68, 0.07);
  --radius:       14px;
  --radius-sm:    9px;
  --shadow:       0 1px 1px rgba(31, 42, 68, .08), 0 3px 10px -4px rgba(31, 42, 68, .16);
  --shadow-md:    0 2px 3px rgba(31, 42, 68, .08), 0 14px 28px -12px rgba(31, 42, 68, .3);

  /* Board green */
  --theme-50:  #eef6f2;
  --theme-100: #d6eadf;
  --theme-200: #acd4bf;
  --theme-300: #7db99c;
  --theme-400: #4f9a7a;
  --theme-500: #2f7f61;
  --theme-600: #266a51;
  --theme-700: #1f5641;
  --theme-800: #184332;
  --theme-900: #102e22;
  --theme-500-rgb: 47, 127, 97;
  --theme-600-rgb: 38, 106, 81;

  /* Stationery: pencil yellow, red pen, crayon blue, sticky pink, mint,
     crayon orange — the soft fills, then deeper marks for text on white */
  --s-yellow: #ffd95a; --s-pink: #ffb3c7; --s-mint: #a9e2c8; --s-blue: #b5d3ff; --s-orange: #ffc187;
  --pen-red: #d43f33;
  --pen-blue: #2f5fc4;
  --pencil: #f5bf2e;
  --cork: #c8925a;
  --wood: #b77b45;
  --wood-2: #8d5a2f;
  --board: #234a3d;
  --board-2: #1a3a30;
  --grid-line: rgba(47, 95, 196, .085);
  --rose-soft: rgba(47, 127, 97, 0.09);

  /* Names other themes' shared markup reaches for */
  --gold:       #c48a12;
  --gold-2:     #f5bf2e;
  --gold-soft:  rgba(47, 127, 97, 0.08);
  --gold-ink:   #1f2a44;
  --felt:       #234a3d;
  --felt-2:     #1a3a30;
  --on-felt:    #f4f6ef;
  --on-felt-soft: rgba(244, 246, 239, 0.78);
  --peacock:    #2f7f61;
  --peacock-soft: rgba(47, 127, 97, 0.11);
  --red:        #2f7f61;
  --red-soft:   rgba(47, 127, 97, 0.09);
  --rose:       #2f7f61;

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

  --btn-bg:       #2b7258;
  --btn-bg-hover: #2f7f61;
  --btn-ink:      #ffffff;
  --theme-600-ink: #ffffff;
  --btn-shadow:   0 2px 0 #1a4a39, 0 8px 16px -10px rgba(26, 74, 57, .8);
  --btn-shadow-hover: 0 3px 0 #1a4a39, 0 12px 20px -10px rgba(26, 74, 57, .8);

  /* The ruler: the theme's border band. A clear yellow ruler with
     millimetre ticks, longer every half centimetre and at each centimetre. */
  --ruler:
    repeating-linear-gradient(90deg, rgba(31, 42, 68, .7) 0 1px, transparent 1px 40px) left bottom / 100% 9px no-repeat,
    repeating-linear-gradient(90deg, transparent 0 20px, rgba(31, 42, 68, .55) 20px 21px, transparent 21px 40px) left bottom / 100% 6px no-repeat,
    repeating-linear-gradient(90deg, rgba(31, 42, 68, .38) 0 1px, transparent 1px 4px) left bottom / 100% 3.5px no-repeat,
    linear-gradient(180deg, rgba(255, 255, 255, .55) 0 1px, transparent 1px 100%),
    linear-gradient(180deg, #fbe28c, #f6d266);
  /* Squared exercise paper */
  --squares:
    linear-gradient(var(--grid-line) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px) 0 0 / 24px 24px;
  /* Cork: warm speckle over a soft grain */
  --cork-bg:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='c'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' seed='7'/><feColorMatrix values='0 0 0 0 .3  0 0 0 0 .16  0 0 0 0 .05  0 0 0 -2.4 1.5'/></filter><rect width='180' height='180' filter='url(%23c)' opacity='.55'/></svg>") 0 0 / 180px 180px,
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='l'><feTurbulence type='fractalNoise' baseFrequency='.6' numOctaves='1' seed='3'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 .9  0 0 0 0 .75  0 0 0 -2.6 1.1'/></filter><rect width='140' height='140' filter='url(%23l)' opacity='.45'/></svg>") 0 0 / 140px 140px,
    radial-gradient(ellipse at 30% 20%, #d7a46c, transparent 70%),
    radial-gradient(ellipse at 80% 90%, #b57d48, transparent 60%),
    #c48d55;
  /* The chalkboard: slate green, the faint swirls of last lesson's chalk
     wiped off — the ground of the footer, the earn hub and dark mode */
  --chalkboard:
    radial-gradient(420px 120px at 18% 30%, rgba(255, 255, 255, .055), transparent 70%),
    radial-gradient(520px 140px at 78% 70%, rgba(255, 255, 255, .045), transparent 70%),
    radial-gradient(300px 90px at 55% 12%, rgba(255, 255, 255, .04), transparent 70%),
    linear-gradient(175deg, #284f42 0%, #21463a 55%, #1b3c32 100%);

  --page-bg: var(--squares), var(--paper);
}

html.dark {
  --paper:        #17302a;
  --paper-2:      #1e3b33;
  --paper-3:      #27483f;
  --ink:          #f1f4ec;
  --ink-2:        #d3ddd2;
  --ink-soft:     #a2b5a9;
  --rule:         rgba(241, 244, 236, 0.15);
  --rule-soft:    rgba(241, 244, 236, 0.07);
  --shadow:       0 1px 2px rgba(0, 0, 0, .3), 0 6px 18px -8px rgba(0, 0, 0, .55);
  --shadow-md:    0 2px 4px rgba(0, 0, 0, .3), 0 18px 36px -14px rgba(0, 0, 0, .75);

  /* Chalk yellow */
  --theme-50:  #2a3a28;
  --theme-100: #384a2d;
  --theme-200: #5c6a37;
  --theme-300: #fbe7a4;
  --theme-400: #f7dc84;
  --theme-500: #f3d16b;
  --theme-600: #f6da86;
  --theme-700: #fbe7a4;
  --theme-800: #fdf0c8;
  --theme-900: #fff8e3;
  --theme-500-rgb: 243, 209, 107;
  --theme-600-rgb: 246, 218, 134;

  --pen-red: #ff8f84;
  --pen-blue: #9cc0ff;
  --grid-line: rgba(241, 244, 236, .045);
  --rose-soft: rgba(243, 209, 107, 0.13);
  --red:        #f3d16b;
  --red-soft:   rgba(243, 209, 107, 0.13);
  --rose:       #f3d16b;

  --gold:       #f3d16b;
  --gold-2:     #fbe7a4;
  --gold-soft:  rgba(243, 209, 107, 0.12);
  --felt:       #12251f;
  --felt-2:     #1e3b33;
  --peacock:    #8fe0bd;
  --peacock-soft: rgba(143, 224, 189, 0.14);

  --nav-accent:    var(--theme-500);
  --hdr-strip-bg:  #0f201b;

  --btn-bg:       #f3d16b;
  --btn-bg-hover: #f7dc84;
  --btn-ink:      #1b2c26;
  /* Lettering on the accent itself: chalk yellow needs dark ink, not white. */
  --theme-600-ink: #1b2c26;
  --btn-shadow:   0 2px 0 #b8973a, 0 8px 22px -8px rgba(243, 209, 107, .35);
  --btn-shadow-hover: 0 3px 0 #b8973a, 0 12px 26px -8px rgba(243, 209, 107, .5);

  /* After dark the ruler is an old wooden one, ticks burnt in */
  --ruler:
    repeating-linear-gradient(90deg, rgba(43, 24, 8, .8) 0 1px, transparent 1px 40px) left bottom / 100% 9px no-repeat,
    repeating-linear-gradient(90deg, transparent 0 20px, rgba(43, 24, 8, .65) 20px 21px, transparent 21px 40px) left bottom / 100% 6px no-repeat,
    repeating-linear-gradient(90deg, rgba(43, 24, 8, .45) 0 1px, transparent 1px 4px) left bottom / 100% 3.5px no-repeat,
    linear-gradient(180deg, rgba(255, 230, 190, .35) 0 1px, transparent 1px 100%),
    linear-gradient(180deg, #c8915a, #a87240);
  --page-bg:
    radial-gradient(700px 200px at 12% 8%, rgba(255, 255, 255, .04), transparent 70%) no-repeat,
    radial-gradient(800px 220px at 88% 40%, rgba(255, 255, 255, .035), transparent 70%) no-repeat,
    var(--squares),
    var(--paper);
}

/* ── Materials ──
   The pieces every surface is built from, shared by the skin sheets
   (assets/css/skin/) and the plugin variants:
   - five crayons: the soft fills (--s-yellow … --s-orange) and their
     marks (--k1 … --k5: red pen, pen blue, board green, crayon orange,
     sticky pink), with --kN-ink for lettering on paper;
   - the ruler (--ruler) as the band along the top of panels and sheets;
   - a spiral binding (--spiral) across the top of dialogs and sheets,
     and the perforated edge (--perf) a page leaves when torn from it;
   - index cards (--index-card) and ruled exercise paper (--ruled) with
     its red margin (--margin);
   - a gold star sticker (--star-mask), a red-pen ring (--pen-ring), a
     pencil squiggle under headings (--squiggle) and a highlighter swipe;
   - the crayon box stripe (--crayons) and a yellow pencil (--pencil)
     for progress bars. */
:root {
  --k1: #d43f33; --k2: #2f5fc4; --k3: #2b7258; --k4: #e07a1f; --k5: #d24f86;
  --k1-ink: #b4332a; --k2-ink: #2a54ad; --k3-ink: #22604a; --k4-ink: #9a520e; --k5-ink: #a8325f;
  --card-line-red: rgba(212, 63, 51, .55);
  --card-line-blue: rgba(47, 95, 196, .16);
  --index-card:
    linear-gradient(180deg, transparent 0 26px, var(--card-line-red) 26px 28px, transparent 28px) 0 0 / 100% 100% no-repeat,
    repeating-linear-gradient(180deg, transparent 0 21px, var(--card-line-blue) 21px 22px) 0 28px / 100% 100% no-repeat,
    var(--paper-2);
  --ruled: repeating-linear-gradient(180deg, transparent 0 27px, var(--card-line-blue) 27px 28px);
  --margin: linear-gradient(90deg, transparent 0 2.1rem, var(--card-line-red) 2.1rem calc(2.1rem + 1.5px), transparent calc(2.1rem + 1.5px) calc(2.1rem + 4px), var(--card-line-red) calc(2.1rem + 4px) calc(2.1rem + 5.5px), transparent calc(2.1rem + 5.5px));
  --margin-rtl: linear-gradient(270deg, transparent 0 2.1rem, var(--card-line-red) 2.1rem calc(2.1rem + 1.5px), transparent calc(2.1rem + 1.5px) calc(2.1rem + 4px), var(--card-line-red) calc(2.1rem + 4px) calc(2.1rem + 5.5px), transparent calc(2.1rem + 5.5px));
  --spiral: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='28' viewBox='0 0 22 28'><ellipse cx='11' cy='21' rx='3.4' ry='3' fill='%231f2a44' fill-opacity='.55'/><path d='M9 21 C8 12 8 3 12.5 2.5 C16 2.2 15.6 9 14 15' fill='none' stroke='%23707a8c' stroke-width='3' stroke-linecap='round'/><path d='M9.6 18 C9 11 9.3 4.6 12.4 4' fill='none' stroke='%23e9edf3' stroke-width='1.1' stroke-linecap='round'/></svg>");
  --perf: radial-gradient(circle 4.5px at 50% 0, transparent 96%, #000 100%) 0 0 / 15px 100% repeat-x;
  --star-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M50 3 C53 3 54 5 56 10 L64 31 L87 33 C93 33 95 37 90 41 L72 56 L78 79 C79 85 76 87 71 84 L50 71 L29 84 C24 87 21 85 22 79 L28 56 L10 41 C5 37 7 33 13 33 L36 31 L44 10 C46 5 47 3 50 3 Z'/></svg>") center / contain no-repeat;
  --star: radial-gradient(circle at 38% 32%, #fff4b8 0 10%, #f5bf2e 42%, #d99a12 100%);
  --pen-ring: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 80' preserveAspectRatio='none'><path d='M64 6 C98 5 116 22 113 42 C110 64 82 75 56 74 C28 73 6 61 7 39 C8 19 30 7 70 10' fill='none' stroke='%23d43f33' stroke-width='4' stroke-linecap='round' vector-effect='non-scaling-stroke'/></svg>") center / 100% 100% no-repeat;
  --squiggle: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='36' height='10' viewBox='0 0 36 10'><path d='M0 6 C4 1 8 1 9 5 S14 9 18 5 S23 1 27 5 S32 9 36 5' fill='none' stroke='%23d43f33' stroke-width='2.2' stroke-linecap='round'/></svg>") repeat-x left center / 36px 10px;
  --highlight: linear-gradient(176deg, transparent 0 52%, rgba(255, 217, 90, .8) 52% 88%, transparent 88%);
  --crayons: repeating-linear-gradient(90deg, #ffd95a 0 18px, #ffb3c7 18px 36px, #a9e2c8 36px 54px, #b5d3ff 54px 72px, #ffc187 72px 90px);
  --pencil: linear-gradient(180deg, #ffe58f 0 34%, #f5bf2e 34% 68%, #dda112 68%);
  --kraft: linear-gradient(180deg, rgba(255, 255, 255, .12), transparent 40%), #c8996a;
}
html.dark {
  --k1: #ff8f84; --k2: #9cc0ff; --k3: #8fe0bd; --k4: #ffb877; --k5: #ff9fc0;
  --k1-ink: #ffa49b; --k2-ink: #b3cfff; --k3-ink: #a6ead0; --k4-ink: #ffc896; --k5-ink: #ffb3cf;
  --card-line-red: rgba(255, 143, 132, .45);
  --card-line-blue: rgba(241, 244, 236, .08);
  --pen-ring: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 80' preserveAspectRatio='none'><path d='M64 6 C98 5 116 22 113 42 C110 64 82 75 56 74 C28 73 6 61 7 39 C8 19 30 7 70 10' fill='none' stroke='%23f3d16b' stroke-width='4' stroke-linecap='round' vector-effect='non-scaling-stroke'/></svg>") center / 100% 100% no-repeat;
  --squiggle: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='36' height='10' viewBox='0 0 36 10'><path d='M0 6 C4 1 8 1 9 5 S14 9 18 5 S23 1 27 5 S32 9 36 5' fill='none' stroke='%23f3d16b' stroke-width='2.2' stroke-linecap='round' stroke-opacity='.85'/></svg>") repeat-x left center / 36px 10px;
  --highlight: linear-gradient(176deg, transparent 0 56%, rgba(243, 209, 107, .32) 56% 90%, transparent 90%);
  --crayons: repeating-linear-gradient(90deg, #f3d16b 0 18px, #ff9fc0 18px 36px, #8fe0bd 36px 54px, #9cc0ff 54px 72px, #ffb877 72px 90px);
  --kraft: linear-gradient(180deg, rgba(255, 255, 255, .08), transparent 40%), #8a6440;
}

/* ── Game palette ──
   The earn-games arena hands these to each HTML5 board. By day a board is
   squared exercise paper and its tiles are sticky notes rising from pale
   pencil yellow through the crayons to pen blue and board green; after
   dark it is the chalkboard, the tiles in coloured chalk. */
:root {
  --game-bg:        #fbf8ef;
  --game-surface:   #efe8d6;
  --game-surface-2: #ffffff;
  --game-ink:       #1f2a44;
  --game-muted:     #687089;
  --game-accent:    #2b7258;
  --game-accent-ink:#ffffff;
  --game-good:      #2b7258;
  --game-bad:       #d43f33;
  --game-tile-1:    #fff3c2;
  --game-tile-2:    #ffd95a;
  --game-tile-3:    #ffc187;
  --game-tile-4:    #ffb3c7;
  --game-tile-5:    #a9e2c8;
  --game-tile-6:    #b5d3ff;
  --game-tile-7:    #2f5fc4;
  --game-tile-8:    #234a3d;
  --game-radius:    6px;
  --game-font:      'Playpen Sans', 'Fira Sans', 'Segoe UI', system-ui, sans-serif;
  --game-font-css:  "/assets/themes/back-to-school/assets/fonts/fonts.css";
  /* Arena chrome (assets/css/game-arena.css): exercise paper, not a dark screen */
  --game-arena-screen: #fbf8ef;
  --game-arena-coins:  #b8860b;
  --game-arena-win:    #2b7258;
  --game-arena-danger: #d43f33;
  --game-pattern:   url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path d='M0 .5 H24 M.5 0 V24' stroke='%232f5fc4' stroke-opacity='.11' stroke-width='1'/></svg>");
}
html.dark {
  --game-bg:        #17302a;
  --game-surface:   #12251f;
  --game-surface-2: #1e3b33;
  --game-ink:       #f1f4ec;
  --game-muted:     #a2b5a9;
  --game-accent:    #f3d16b;
  --game-accent-ink:#1b2c26;
  --game-good:      #8fe0bd;
  --game-bad:       #ff8f84;
  --game-tile-1:    #27483f;
  --game-tile-2:    #3a6455;
  --game-tile-3:    #8fe0bd;
  --game-tile-4:    #9cc0ff;
  --game-tile-5:    #ff9fc0;
  --game-tile-6:    #ffb877;
  --game-tile-7:    #f3d16b;
  --game-tile-8:    #f1f4ec;
  --game-arena-screen: #17302a;
  --game-arena-coins:  #f3d16b;
  --game-arena-win:    #8fe0bd;
  --game-arena-danger: #ff8f84;
  --game-pattern:   url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'><g fill='%23ffffff' fill-opacity='.05'><ellipse cx='40' cy='40' rx='60' ry='14'/><ellipse cx='120' cy='118' rx='70' ry='16'/></g></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: 700;
  font-synthesis: none;
  letter-spacing: 0;
}
.display-italic { font-style: normal; }

::selection { background: #ffe27a; color: #1f2a44; }

.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: 700;
  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 short crayon 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: 700;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--theme-600);
  margin-bottom: 0.7rem;
}
html .section-eyebrow::before {
  content: ''; flex-shrink: 0;
  width: 22px; height: 8px;
  background:
    linear-gradient(90deg, transparent 0 4px, rgba(255, 255, 255, .55) 4px 5px, transparent 5px 15px, rgba(0, 0, 0, .14) 15px 16px, transparent 16px),
    #f08a3c;
  clip-path: polygon(0 0, 78% 0, 100% 50%, 78% 100%, 0 100%);
  border-radius: 2px 0 0 2px;
}
[dir="rtl"] .section-eyebrow::before { transform: scaleX(-1); }
html .section-eyebrow > .rounded-full { display: none; }

.btn-view-all {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-family: var(--font-ui);
  font-size: 0.9rem; font-weight: 600;
  white-space: nowrap; flex-shrink: 0;
  color: var(--ink);
  padding: .3rem .1rem 2px;
  border-bottom: 2px solid var(--theme-500);
  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: var(--squares); }

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

/* ── Header ── */
#desktopHeader .hdr-search {
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 10px;
}
#desktopHeader .hdr-search:focus-within { border-color: var(--theme-500); box-shadow: 0 0 0 3px var(--red-soft); }
.ed-search { background: transparent; border: none; }

.hdr-strip, .hdr-strip .ed-status { color: rgba(244, 246, 239, 0.9); }
.hdr-strip a:hover, .hdr-strip button:hover { color: #ffd95a; }

/* The ruler under the main header bar and wherever a section needs an edge */
.bs-band { height: 14px; background: var(--ruler); box-shadow: 0 1px 0 rgba(31, 42, 68, .12); }

/* The sale chip in the status strip */
.bs-strip-chip { display: inline-flex; align-items: center; gap: .45rem; font-weight: 700; letter-spacing: .06em; color: #ffd95a; }
.bs-strip-chip svg { width: 18px; height: 8px; flex-shrink: 0; }
/* The desktop strip shares its line with the menu; the second half of the
   chip joins it only where there is room for both. */
@media (max-width: 639px), (min-width: 1024px) and (max-width: 1439px) { .bs-strip-chip__extra { display: none; } }

.ed-subnav { align-items: center; background: var(--paper-2); border-bottom: 1px solid var(--rule); }
.ed-subnav-inner { display: flex; align-items: center; gap: 1.25rem; width: 100%; padding: 0.6rem 2rem; }
@media (min-width: 1280px) { .ed-subnav-inner { padding-left: 2.5rem; padding-right: 2.5rem; } }
.ed-subnav-eyebrow {
  flex-shrink: 0;
  font-family: var(--font-ui); font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.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.42rem 0.85rem; border-radius: 8px;
  font-family: var(--font-ui); font-size: 0.9rem; font-weight: 500;
  color: var(--ink-2); text-decoration: none;
}
.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(--btn-bg); color: var(--btn-ink); }
.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.92rem; font-weight: 600;
  color: var(--ink); text-decoration: none;
  padding-bottom: 2px; border-bottom: 2px solid var(--theme-500);
  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.8rem 1.55rem;
  white-space: nowrap;
  font-family: var(--font-ui); font-size: 0.97rem; font-weight: 600;
  color: var(--btn-ink);
  background: var(--btn-bg);
  border: 0;
  border-radius: 10px;
  box-shadow: var(--btn-shadow);
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
html .ed-btn-primary:hover, html .ed-plan-cta:hover, html .drawer-login:hover {
  background: var(--btn-bg-hover); color: var(--btn-ink);
  transform: translateY(-1px); box-shadow: var(--btn-shadow-hover);
}
html .ed-btn-primary:active, html .ed-plan-cta:active { transform: translateY(1px); }
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: 0; box-shadow: var(--btn-shadow);
}
html body .ed-plan-featured .ed-plan-cta { background: #ffd95a; color: #1f2a44; box-shadow: 0 2px 0 #c9a12f; }
.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.95rem; font-weight: 600;
  color: var(--ink); background: var(--paper-2);
  border: 1px solid var(--rule); border-radius: 10px;
  transition: background 0.15s ease, border-color .15s ease;
}
.ed-btn-secondary:hover { background: var(--paper-3); border-color: var(--ink-soft); }
html.dark .ed-btn-secondary { color: var(--ink); }
:is([data-bnr-layout="cover"], [data-bnr-layout="product"]) .ed-btn-primary { color: var(--btn-ink); }

/* ── Cards: paper corners, a fine edge, a lift on hover ── */
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 0.18s ease, box-shadow 0.18s ease;
}
html .ed-plan:hover, html .shop-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
html .ed-plan-featured {
  position: relative;
  background: var(--chalkboard); color: #f4f6ef;
  border: 1px solid rgba(255, 217, 90, .3); border-radius: var(--radius);
  overflow: hidden;
}
.ed-plan-featured::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 14px;
  background: var(--ruler); pointer-events: none;
}
.ed-plan-hairline { border-color: var(--rule); }
.ed-plan-featured .ed-plan-hairline { border-color: rgba(244, 246, 239, .2); }

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

/* ── Drawer ── */
.drawer-section-label {
  display: flex; align-items: center; gap: 0.6rem;
  font-family: var(--font-ui); font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--theme-600); padding: 1.1rem 1.5rem 0.4rem;
}
.drawer-section-label::after { content: ''; flex: 1; height: 1px; background: var(--rule); }
.drawer-nav-row {
  display: flex; align-items: center; gap: 0.85rem;
  padding: 0.65rem 1.5rem;
  font-family: var(--font-ui); font-size: 1rem; font-weight: 500;
  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: 10px; font-family: var(--font-ui); font-size: 0.95rem; font-weight: 600;
  color: var(--theme-600); border: 1px solid var(--theme-600); text-decoration: none;
}
.drawer-logout:hover { background: var(--gold-soft); }

.mobile-glass-header {
  background: rgba(251, 248, 239, 0.95);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--rule);
}
html.dark .mobile-glass-header { background: rgba(23, 48, 42, 0.95); }

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

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

.ed-dropdown {
  background: var(--paper-2);
  border: 1px solid var(--rule); border-radius: 12px;
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.ed-dropdown-item {
  display: flex; align-items: center; gap: 0.85rem;
  padding: 0.68rem 1rem;
  font-family: var(--font-ui); font-size: 0.95rem; font-weight: 500;
  color: var(--ink-2); text-decoration: none;
}
.ed-dropdown-item:hover { background: var(--paper-3); color: var(--ink); }
.ed-section-cap {
  font-family: var(--font-ui); font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--theme-600); padding: 0.9rem 1rem 0.4rem;
}

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

/* ── Small stationery shared by the components ── */
/* Washi tape: a strip of patterned paper tape, translucent, with torn ends */
.bs-tape {
  position: absolute; width: 74px; height: 22px; z-index: 3; pointer-events: none;
  background:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, .35) 0 5px, transparent 5px 10px),
    var(--tape, rgba(255, 179, 199, .85));
  clip-path: polygon(3% 0, 97% 4%, 100% 30%, 97% 52%, 100% 76%, 96% 100%, 4% 96%, 0 74%, 3% 50%, 0 24%);
  box-shadow: 0 1px 2px rgba(31, 42, 68, .12);
}
/* A push pin, seen from above: a coloured head with a highlight and its shadow */
.bs-pin {
  position: absolute; left: 50%; top: -9px; z-index: 4; width: 20px; height: 20px; margin-left: -10px;
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 35% 32%, rgba(255, 255, 255, .85) 0 2.5px, transparent 4px), radial-gradient(circle at 50% 50%, var(--pin, #d43f33) 0 62%, color-mix(in srgb, var(--pin, #d43f33) 70%, #000) 100%);
  box-shadow: 3px 5px 4px -1px rgba(40, 20, 5, .4);
}
[dir="rtl"] .bs-flip-rtl { transform: scaleX(-1); }

/* ── Dark/light toggle: the board wiped clean ──
   assets/themes/back-to-school/assets/js/back-to-school.js registers the
   transition: a felt board eraser sweeps the screen row by row, back and
   forth, leaving clean chalkboard behind it; the mode flips while the board
   covers the page, and a second pass wipes the board away. */
.px-fx--bs-wipe { position: fixed; inset: 0; z-index: 2147483000; pointer-events: none; overflow: hidden; }
.px-fx--bs-wipe .bs-row {
  position: absolute; left: 0; right: 0; height: calc(25% + 1px);
  background:
    repeating-linear-gradient(180deg, rgba(255, 255, 255, .035) 0 3px, transparent 3px 11px),
    radial-gradient(60% 120% at 50% 50%, rgba(255, 255, 255, .06), transparent 70%),
    #21463a;
  transform: scaleX(0);
}
.px-fx--bs-wipe .bs-row:nth-child(odd) { transform-origin: 0 50%; }
.px-fx--bs-wipe .bs-row:nth-child(even) { transform-origin: 100% 50%; }
.px-fx--bs-wipe .bs-eraser {
  position: absolute; left: 0; top: 0; z-index: 2;
  width: clamp(130px, 26vh, 240px); height: clamp(56px, 11vh, 104px); margin: calc(clamp(56px, 11vh, 104px) / -2) 0 0 calc(clamp(130px, 26vh, 240px) / -2);
  border-radius: 10px;
  background:
    linear-gradient(180deg, #d9a56b 0 58%, #6b4a2c 58% 62%, #3a3f4a 62% 100%);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .35), 0 10px 18px -6px rgba(0, 0, 0, .5);
}
.px-fx--bs-wipe .bs-eraser::after {
  content: ''; position: absolute; left: 10%; right: 10%; top: 16%; height: 22%; border-radius: 4px;
  background: repeating-linear-gradient(90deg, rgba(90, 55, 25, .35) 0 2px, transparent 2px 7px);
}
/* Chalk dust drifting off the eraser */
.px-fx--bs-wipe .bs-dust {
  position: absolute; left: 0; top: 0; z-index: 1; width: 300px; height: 25vh; margin: -12.5vh 0 0 -150px;
  background:
    radial-gradient(circle at 20% 40%, rgba(255, 255, 255, .55) 0 2px, transparent 3px),
    radial-gradient(circle at 60% 70%, rgba(255, 255, 255, .45) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 80% 30%, rgba(255, 255, 255, .4) 0 2px, transparent 3px),
    radial-gradient(ellipse at 50% 50%, rgba(255, 255, 255, .22), transparent 70%);
  filter: blur(1px);
}

/* ── Footer: a chalkboard in both modes, its wooden chalk tray along the
   top edge holding chalk and a felt eraser ── */
.bs-footer {
  --paper:     #1f4337;
  --paper-2:   #285246;
  --paper-3:   #2f5d50;
  --ink:       #f4f6ef;
  --ink-2:     #dfe7dc;
  --ink-soft:  #b2c4b7;
  --rule:      rgba(244, 246, 239, 0.17);
  --rule-soft: rgba(244, 246, 239, 0.08);
  --theme-500: #ffd95a; --theme-600: #ffd95a; --theme-700: #ffe78f;
  --theme-500-rgb: 255, 217, 90;
  position: relative;
}
html.dark .bs-footer { --paper: #13261f; --paper-2: #1c362d; --paper-3: #244238; }
html body #desktopFooter.bs-footer { background: var(--chalkboard) !important; }
html.dark body #desktopFooter.bs-footer {
  background:
    radial-gradient(420px 120px at 18% 30%, rgba(255, 255, 255, .04), transparent 70%),
    radial-gradient(520px 140px at 78% 70%, rgba(255, 255, 255, .03), transparent 70%),
    linear-gradient(175deg, #193a30 0%, #13261f 100%) !important;
}
.bs-tray { position: relative; height: 34px; background: var(--paper); }
html.dark .bs-tray { background: transparent; }
.bs-tray__ledge {
  position: absolute; left: 0; right: 0; bottom: 0; height: 16px; z-index: 1;
  background:
    repeating-linear-gradient(90deg, rgba(90, 50, 20, .14) 0 2px, transparent 2px 23px, rgba(255, 230, 190, .1) 23px 24px, transparent 24px 61px),
    linear-gradient(180deg, #c99159 0 30%, #a86f3d 30% 85%, #7f5129 85%);
  box-shadow: 0 -1px 0 rgba(255, 230, 190, .5) inset, 0 3px 6px -2px rgba(0, 0, 0, .35);
}
.bs-tray__things { position: absolute; left: 0; right: 0; bottom: 12px; z-index: 2; height: 22px; max-width: 80rem; margin: 0 auto; }
.bs-tray__chalk {
  position: absolute; bottom: 0; width: 46px; height: 9px; border-radius: 3px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .45), transparent 60%), var(--c, #f7f7f2);
  box-shadow: 0 2px 2px rgba(0, 0, 0, .3);
  transform: rotate(var(--r, 0deg));
}
.bs-tray__eraser {
  position: absolute; bottom: 0; width: 84px; height: 20px; border-radius: 4px;
  background: linear-gradient(180deg, #d9a56b 0 55%, #6b4a2c 55% 62%, #3a3f4a 62%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 3px 4px -1px rgba(0, 0, 0, .4);
}
.bs-footer a:hover { color: #ffd95a; }
html.dark #desktopFooter li { color: var(--ink-2) !important; }

html .ed-floating-nav {
  background: var(--paper-2);
  border: 1px solid var(--rule);
  box-shadow: var(--shadow-md);
}
html .ed-floating-nav .ed-floating-link { font-family: var(--font-ui); font-size: .92rem; font-weight: 500; color: var(--ink-2); }
html .ed-floating-nav .ed-floating-link:hover { background: var(--paper-3); color: var(--ink); }
html body .ed-floating-nav a.ed-floating-link.active { background: var(--btn-bg); color: var(--btn-ink) !important; }
html body .ed-floating-nav a.ed-floating-link.active > span { color: var(--btn-ink) !important; }

/* Newsletter: a sheet of ruled loose-leaf, three punched holes down its
   margin edge, taped to the board */
html body .bs-footer .ed-newsletter {
  position: relative;
  background:
    linear-gradient(90deg, transparent 0 58px, rgba(212, 63, 51, .45) 58px 59.5px, transparent 59.5px 62px, rgba(212, 63, 51, .45) 62px 63.5px, transparent 63.5px),
    repeating-linear-gradient(180deg, transparent 0 31px, rgba(47, 95, 196, .2) 31px 32px),
    #fffdf6;
  color: #1f2a44;
  border: 0; border-radius: 4px;
  box-shadow: 0 18px 34px -16px rgba(0, 0, 0, .55);
  padding-inline-start: 5.25rem;
}
html body .bs-footer .ed-newsletter::before {
  content: ''; position: absolute; left: 20px; top: 0; bottom: 0; width: 18px; pointer-events: none;
  background: radial-gradient(circle at 50% 50%, #234a3d 0 8px, rgba(0, 0, 0, .18) 8px 9px, transparent 9.5px) 0 50% / 18px 33.3% repeat-y;
}
html.dark body .bs-footer .ed-newsletter::before { background: radial-gradient(circle at 50% 50%, #17302a 0 8px, rgba(0, 0, 0, .18) 8px 9px, transparent 9.5px) 0 50% / 18px 33.3% repeat-y; }
[dir="rtl"] body .bs-footer .ed-newsletter { background: linear-gradient(270deg, transparent 0 58px, rgba(212, 63, 51, .45) 58px 59.5px, transparent 59.5px 62px, rgba(212, 63, 51, .45) 62px 63.5px, transparent 63.5px), repeating-linear-gradient(180deg, transparent 0 31px, rgba(47, 95, 196, .2) 31px 32px), #fffdf6; }
[dir="rtl"] body .bs-footer .ed-newsletter::before { left: auto; right: 20px; }
html body .bs-footer .ed-newsletter::after { display: none; }
html body .bs-footer .ed-newsletter, html body .bs-footer .ed-newsletter * { --ink: #1f2a44; --ink-2: #3c4763; }
html body .bs-footer .ed-newsletter h4 { font-family: var(--font-display); font-weight: 700; color: #1f2a44 !important; }
html body .bs-footer .ed-newsletter p { color: #3c4763 !important; }
html.dark body .bs-footer .ed-newsletter input.ed-newsletter-input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not(.no-dark) { background-color: #ffffff !important; color: #1f2a44 !important; border-color: rgba(31, 42, 68, .2) !important; }
html body .bs-footer .ed-newsletter-input { background: #ffffff !important; color: #1f2a44 !important; border: 1px solid rgba(31, 42, 68, .2) !important; border-radius: 10px; }
html body .bs-footer .ed-newsletter-input::placeholder { color: #687089; }
html body .bs-footer .ed-newsletter-input:focus { border-color: #2f7f61 !important; box-shadow: 0 0 0 3px rgba(47, 127, 97, .15); }
html body .bs-footer .ed-newsletter-btn {
  background: #2b7258; color: #ffffff; border: 0; border-radius: 10px;
  font-family: var(--font-ui); font-weight: 700;
}
html body .bs-footer .ed-newsletter-age { color: #3c4763; }
@media (max-width: 479px) {
  html body .bs-footer .ed-newsletter { padding-inline-start: 3.6rem; padding-inline-end: 1.25rem; background-position: -18px 0, 0 0, 0 0; }
  [dir="rtl"] body .bs-footer .ed-newsletter { background-position: 18px 0, 0 0, 0 0; }
  html body .bs-footer .ed-newsletter::before { left: 12px; }
  [dir="rtl"] body .bs-footer .ed-newsletter::before { left: auto; right: 12px; }
}

/* Logo card: the light-mode logo on a white index card held by a strip of
   tape, wherever it sits on the chalkboard (footer, app splash). */
.bs-plaque {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 1.1rem 1.6rem 1rem;
  background: repeating-linear-gradient(180deg, transparent 0 21px, rgba(47, 95, 196, .16) 21px 22px) 0 12px, #ffffff;
  border-top: 3px solid rgba(212, 63, 51, .55);
  border-radius: 3px;
  box-shadow: 0 12px 24px -12px rgba(0, 0, 0, .55);
  transform: rotate(-1.2deg);
}
.bs-plaque::before {
  content: ''; position: absolute; left: 50%; top: -12px; width: 70px; height: 20px; margin-left: -35px;
  background: repeating-linear-gradient(45deg, rgba(255, 255, 255, .35) 0 5px, transparent 5px 10px), rgba(255, 217, 90, .85);
  clip-path: polygon(3% 0, 97% 4%, 100% 30%, 97% 52%, 100% 76%, 96% 100%, 4% 96%, 0 74%, 3% 50%, 0 24%);
  transform: rotate(2deg);
}

/* 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; }
/* On phones the words of a heading wrap whole ("Mystery Boxen"), never mid-word. */
@media (max-width: 639px) {
  html body h2.text-fit { overflow-wrap: break-word; word-break: normal; hyphens: manual; font-size: clamp(1.5rem, 8vw, 1.875rem); }
  /* 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; }
  /* ticket dates ("28 Oct 2026, 06:18 AM") wrap after the comma in their half-width column */
  html body .grid.grid-cols-2 > div > .whitespace-nowrap.text-sm.font-medium { white-space: normal; }
}

/* ── 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(23, 48, 42, 0.95) !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(30, 59, 51, 0.96) !important; }
html.dark .premium-side-menu { background: var(--paper) !important; }
html.dark #langSheet { background: var(--paper) !important; border-top-color: var(--rule); }
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, #27483f, #17302a, #21463a, #12251f) !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 a navy #0d1117; here fields
   take the board's own deep green. 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: #12251f !important;
  border-color: rgba(241, 244, 236, .2) !important;
  color: #f1f4ec !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 board green. */
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: #12251f;
  --paper: #f1f4ec;
  border-color: rgba(243, 209, 107, .3);
}

html header.safe-top-header[style] { background: rgba(251, 248, 239, .95) !important; }
html.dark header.safe-top-header[style] { background: rgba(23, 48, 42, .95) !important; }

/* Tab bars on shared pages (Earn's #pillNavBar, the winners filter) sit on
   the theme's own surface, never a black band. */
html.dark #pillNavBar, html.dark #pillNavBar > div { background-color: var(--paper) !important; border-color: var(--rule) !important; }
html body .wn-tab-bar { background: rgba(251, 248, 239, .95); }
html.dark body .wn-tab-bar { background: rgba(23, 48, 42, .95); }
html body .wn-tab-active, html body .wn-view-btn-active, html.dark body .wn-tab-active, html.dark body .wn-view-btn-active { background: var(--btn-bg); color: var(--btn-ink); box-shadow: var(--btn-shadow); }
html body .wn-tab { font-family: var(--font-ui); border-radius: 10px; }

/* ── Login / register / forgot-password brand panel: the chalkboard ── */
:root, html.dark {
  --brand-gradient: var(--chalkboard);
  --brand-glow-1: rgba(255, 217, 90, 0.22);
  --brand-glow-2: rgba(255, 179, 199, 0.18);
}
.brand-panel { background: var(--chalkboard) !important; }
/* assets/css/pages/login.css loads after the theme and draws ::after as a
   round glow; here it is the board's wooden chalk tray. */
html .brand-panel::after {
  content: ''; position: absolute;
  left: 0 !important; right: 0 !important; bottom: 0 !important; top: auto !important;
  width: 100% !important; height: 18px !important;
  border-radius: 0 !important; transform: none !important; opacity: 1 !important;
  background:
    repeating-linear-gradient(90deg, rgba(90, 50, 20, .14) 0 2px, transparent 2px 23px, rgba(255, 230, 190, .1) 23px 24px, transparent 24px 61px),
    linear-gradient(180deg, #c99159 0 30%, #a86f3d 30% 85%, #7f5129 85%) !important;
}
.brand-panel .text-purple-200,
.brand-panel [class*="text-purple-200"] { color: rgba(244, 246, 239, 0.84) !important; }
.brand-panel h2 { font-family: var(--font-display); font-weight: 700 !important; }

/* ── Wallet balance card: a zipped fabric pencil case, the zip running
   along its top with the pull hanging at the end ── */
html body .wallet-hero {
  position: relative;
  background:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, .035) 0 2px, transparent 2px 5px),
    repeating-linear-gradient(-45deg, rgba(0, 0, 0, .06) 0 2px, transparent 2px 5px),
    radial-gradient(380px 200px at 85% 110%, rgba(255, 217, 90, .18), transparent 70%),
    linear-gradient(170deg, #2f5fc4 0%, #274f9f 60%, #213f80 100%);
  border: 0;
  border-radius: 22px;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .08), var(--shadow-md);
  color: #f6f8ff;
  overflow: hidden;
  padding-top: 2.6rem !important;
}
html.dark body .wallet-hero { background: repeating-linear-gradient(45deg, rgba(255, 255, 255, .03) 0 2px, transparent 2px 5px), repeating-linear-gradient(-45deg, rgba(0, 0, 0, .08) 0 2px, transparent 2px 5px), linear-gradient(170deg, #284f9c 0%, #1f3d78 100%); }
/* The zip: two rows of teeth meeting along a seam, stitched each side */
html body .wallet-hero::before {
  content: ''; position: absolute; left: 0; right: 0; top: 12px; bottom: auto; height: 20px; border-radius: 0; opacity: 1;
  background:
    repeating-linear-gradient(90deg, transparent 0 4px, #f3d27a 4px 6px, #b88a2a 6px 8px) 0 9px / 100% 7px no-repeat,
    repeating-linear-gradient(90deg, #f3d27a 0 2px, #b88a2a 2px 4px, transparent 4px 8px) 0 4px / 100% 7px no-repeat,
    linear-gradient(180deg, transparent 0 1px, rgba(255, 255, 255, .45) 1px 2px, transparent 2px 18px, rgba(255, 255, 255, .45) 18px 19px, transparent 19px),
    #182a55;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .12), 0 -1px 0 rgba(0, 0, 0, .2);
  pointer-events: none;
}
/* The slider sits on the zip, its pull tab hanging down */
html body .wallet-hero::after {
  content: ''; position: absolute; right: 26px; top: 8px; left: auto; bottom: auto; width: 22px; height: 46px; opacity: 1;
  border-radius: 6px 6px 9px 9px;
  background:
    radial-gradient(circle at 50% 80%, #182a55 0 3.5px, transparent 4px),
    linear-gradient(90deg, rgba(255, 255, 255, .5) 0 2px, transparent 2px),
    linear-gradient(180deg, #f6dc8e 0 52%, #a77b22 52% 56%, #e6c26a 56%);
  box-shadow: 0 4px 6px rgba(0, 0, 0, .4);
  transform: rotate(-6deg); transform-origin: 50% 20%;
  pointer-events: none;
}
html[dir="rtl"] body .wallet-hero::after { right: auto; left: 26px; transform: rotate(6deg); }
/* The pull hangs over the corner; the label row keeps clear of it */
html body .wallet-hero > div:first-child { padding-inline-end: 2.4rem; }
html body .wallet-balance-num {
  font-family: var(--font-display); font-variation-settings: normal; font-weight: 700;
  color: #ffffff;
  overflow-wrap: normal; word-break: normal;
}
html body .wallet-hero-btn-primary { background: #ffd95a; color: #1f2a44; border: 0; font-family: var(--font-ui); font-weight: 700; border-radius: 10px; }
html body .wallet-hero-btn-primary:hover { background: #ffe68f; color: #1f2a44; }
html body .wallet-hero-btn-secondary { font-family: var(--font-ui); font-weight: 500; color: #f6f8ff; border-color: rgba(246, 248, 255, .45); border-radius: 10px; }

/* ── Mystery box card (styled by assets/css/pages/home.css): a parcel tied
   with a crayon-striped ribbon down its side ── */
html .ed-card-mystery {
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
}
html .ed-card-mystery:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
html .ed-card-mystery::before {
  top: 0; bottom: 0; left: 20%; right: auto; width: 12px; height: auto; border-radius: 0;
  background: repeating-linear-gradient(180deg, var(--s-yellow) 0 14px, var(--s-pink) 14px 28px, var(--s-mint) 28px 42px, var(--s-blue) 42px 56px); opacity: 1; z-index: 0;
}
[dir="rtl"] .ed-card-mystery::before { left: auto; right: 20%; }
html .ed-card-mystery img { position: relative; z-index: 1; }

/* ── Product page buy box: the ruler along its top ── */
html body .pd-buybox {
  position: relative;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 14px;
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
html body .pd-buybox::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 14px;
  background: var(--ruler);
}
html body .pd-buybox .font-display.text-4xl { font-weight: 700; color: var(--theme-600); }
.pd-title { font-weight: 700 !important; }

/* 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 green. */
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 and take the colour of the main buttons. */
html .bg-purple-600.text-white, html .bg-indigo-600.text-white, html .bg-violet-600.text-white {
  background-color: var(--btn-bg) !important; color: var(--btn-ink) !important; border-radius: 10px;
}
html .bg-purple-50, html .bg-indigo-50, html .bg-violet-50, html .bg-purple-100 { background-color: var(--gold-soft); }
html.dark .bg-purple-50, html.dark .bg-indigo-50, html.dark .bg-violet-50 { background-color: var(--gold-soft) !important; }
html .border-purple-200, html .border-indigo-200, html .border-violet-200 { border-color: rgba(47, 127, 97, .3); }
html.dark .border-violet-200 { border-color: rgba(243, 209, 107, .35) !important; }
html .focus\:ring-purple-400:focus { --tw-ring-color: rgba(47, 127, 97, .35); }
html .focus\:border-purple-400:focus { border-color: var(--red); }

/* Shared buttons drawn in the accent with white lettering (Place Order,
   Buy Now bars) are the theme's main buttons. */
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;
  box-shadow: var(--btn-shadow) !important;
}
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(255, 253, 247, .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); }
html .wnc:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }

/* ── Cart and checkout: the order total under the ruler ──
   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: 12px !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: 14px !important;
  box-shadow: var(--shadow-md) !important;
  overflow: hidden;
  padding-top: 1.6rem !important;
}
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: 14px;
  background: var(--ruler);
}
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: 700;
  font-size: 1.7rem;
  color: var(--theme-600);
}

/* 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: .05em; }
@media (max-width: 1023px) { .hdr-strip .bs-strip-chip { font-size: 10px; gap: .35rem; } }
/* 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; }
}


/* ── My Winnings: each prize a gold-star piece of work — the picture
   taped onto squared paper, a gold star stuck in its corner, the name
   written up on ruled lines ── */
.bs-win {
  --c: var(--s-yellow);
  position: relative;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 6px;
  box-shadow: var(--shadow);
  transition: transform .18s ease, box-shadow .18s ease;
}
.bs-win:nth-child(4n+2) { --c: var(--s-pink); }
.bs-win:nth-child(4n+3) { --c: var(--s-mint); }
.bs-win:nth-child(4n+4) { --c: var(--s-blue); }
.bs-win:hover { transform: translateY(-3px) rotate(-.4deg); box-shadow: var(--shadow-md); }
.bs-win__wrap { background: var(--squares), color-mix(in srgb, var(--c) 26%, var(--paper-2)); border-radius: 6px 6px 0 0; }
.bs-win__photo { position: relative; margin: 2.9rem 1.4rem 1rem; background: #ffffff; padding: .5rem; box-shadow: 0 6px 12px -8px rgba(31, 42, 68, .5); transform: rotate(-1.5deg); }
.bs-win:nth-child(even) .bs-win__photo { transform: rotate(1.2deg); }
.bs-win__photo .bs-tape { top: -11px; left: 50%; margin-left: -37px; --tape: color-mix(in srgb, var(--c) 80%, transparent); }
.bs-win__star {
  position: absolute; z-index: 3; top: 6px; right: 10px; width: 42px; height: 42px;
  background: radial-gradient(circle at 40% 35%, #fff4b8 0 12%, #f5bf2e 40%, #d99a12 100%);
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  filter: drop-shadow(0 2px 1px rgba(120, 80, 0, .35));
}
[dir="rtl"] .bs-win__star { right: auto; left: 12px; }
.bs-win__wrap > .absolute { z-index: 4; }
.bs-win__tag {
  display: inline-flex; align-items: center;
  padding: .22rem .6rem;
  font-size: 11px; font-weight: 600; letter-spacing: .04em;
  color: #1f2a44; background: #ffffff; border: 1px solid rgba(31, 42, 68, .14); border-radius: 6px;
}
.bs-win__tag--open { color: #ffffff; background: #d43f33; border-color: transparent; }
.bs-win__tag--done { color: #ffffff; background: #2b7258; border-color: transparent; }
html.dark .bs-win__tag--done { color: #12251f; background: #8fe0bd; }
.bs-win__body { background: repeating-linear-gradient(180deg, transparent 0 27px, var(--grid-line) 27px 28px); }
.bs-win__name { font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; line-height: 1.3; color: var(--ink); overflow-wrap: anywhere; }
.bs-win__label { padding-top: .6rem; border-top: 2px solid color-mix(in srgb, var(--pen-red) 45%, transparent); }
.bs-win__price { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.05rem, 4vw, 1.25rem); line-height: 1.1; color: var(--theme-600); overflow-wrap: normal; word-break: normal; }
.bs-win__btn { min-height: 2.75rem; padding: .55rem .9rem; font-size: .9rem; }
.bs-win__cart, .bs-win__btn-off {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  border-radius: 10px; font-weight: 600;
}
.bs-win__cart { color: var(--ink); background: var(--paper-2); border: 1px solid var(--rule); }
.bs-win__cart:hover { border-color: var(--theme-500); color: var(--theme-600); }
.bs-win__btn-off { color: var(--ink-soft); background: transparent; border: 1px dashed var(--rule); cursor: not-allowed; }
.bs-win__claimed {
  display: flex; align-items: center; justify-content: center; gap: .4rem;
  min-height: 2.75rem; padding: .5rem;
  font-size: .9rem; font-weight: 600;
  color: var(--theme-600); background: var(--rose-soft); border-radius: 10px;
}

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

/* 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: #2b7359; --px-warn: #b45a09; --px-crit: #d33d31; --px-info: #1a6dff; }
html.dark:root { --px-good: #afe9d0; --px-warn: #fde096; --px-crit: #ffd1cc; --px-info: #c2d8ff; }
/* The cart's urgent "Complete Payment" prints white on the crit tone; the
   night crit is light, so its label takes the dark paper instead. */
html.dark body a[style*="background:var(--px-crit)"] { color: var(--paper) !important; }
/* 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 (back-to-school.js): the chalkboard. The
   duster wipes the old name off and the new one is chalked in; after the
   reload it is underlined and ticked. The board stays green in both modes,
   so the chalk is a fixed off-white. The board is the same on both pages,
   so the reload never shows. */
.bs-lang-stage { background: color-mix(in srgb, #102e22 55%, transparent); }
.bs-lang-board {
  position: relative; width: min(560px, 100%); box-sizing: border-box; padding: 16px 22px 0;
  color: #f4f6ef; background: radial-gradient(ellipse at 30% 20%, rgba(255, 255, 255, .06), transparent 60%), var(--board, #234a3d);
  border: 10px solid var(--wood, #b77b45); border-radius: 10px;
  box-shadow: inset 0 0 0 2px var(--wood-2, #8d5a2f), inset 0 0 30px rgba(0, 0, 0, .3), 0 34px 70px -28px rgba(0, 0, 0, .6);
  font-family: var(--font-ui);
}
.bs-lang-head { display: flex; align-items: center; gap: 8px; font: 600 13px/1.2 var(--font-display); color: rgba(244, 246, 239, .78); }
.bs-lang-head img { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; opacity: .9; }
.bs-lang-code { letter-spacing: .12em; }
.bs-lang-date { margin-inline-start: auto; }
.bs-lang-write {
  position: relative; display: grid; align-items: center; justify-items: center; min-height: 120px; margin-top: 8px; padding: 8px 4px;
  overflow: hidden; text-align: center;
}
.bs-lang-write > span:not(.bs-lang-sweep) {
  grid-area: 1 / 1; max-width: 100%; overflow-wrap: anywhere;
  text-shadow: 0 0 1px rgba(244, 246, 239, .7), 0 0 8px rgba(244, 246, 239, .18);
}
.bs-lang-old {
  font: 500 clamp(24px, 7vw, 36px)/1.15 var(--font-display); color: rgba(244, 246, 239, .9);
  opacity: 0; clip-path: inset(-20% -5% -20% 100%);
}
.bs-lang-name {
  position: relative; z-index: 4; color: #f4f6ef;
  font: 600 clamp(30px, 9vw, 50px)/1.1 var(--font-display); clip-path: inset(-20% -5% -20% -5%);
}
.bs-lang-smear {
  position: absolute; inset: 14px 6%; z-index: 1; border-radius: 40px; opacity: 0;
  background: radial-gradient(ellipse at center, rgba(244, 246, 239, .2), rgba(244, 246, 239, .06) 60%, transparent 75%);
  filter: blur(4px);
}
.bs-lang-sweep { position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0; transform: translateX(100%); }
.bs-lang-duster {
  position: absolute; left: 0; top: 50%; width: 80px; height: 32px; margin-top: -16px; border-radius: 6px;
  background: linear-gradient(180deg, var(--wood, #b77b45) 0 55%, #3a3f4a 55%);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .25), 0 6px 10px -4px rgba(0, 0, 0, .5);
}
.bs-lang-under { position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; height: 34px; }
.bs-lang-line {
  width: min(220px, 60%); height: 3px; border-radius: 2px; background: rgba(244, 246, 239, .85);
  transform-origin: left center; transform: scaleX(0);
}
.bs-lang-tick { font: 700 28px/1 var(--font-display); color: #ffd95a; clip-path: inset(-10% 100% -10% -10%); }
.bs-lang-tray {
  display: flex; align-items: center; gap: 10px; height: 14px; margin: 6px -22px 0; padding: 0 30px;
  background: var(--wood-2, #8d5a2f); box-shadow: inset 0 3px 0 rgba(255, 255, 255, .18);
}
.bs-lang-chalk { width: 34px; height: 7px; border-radius: 3px; background: #f4f6ef; }
.bs-lang-chalk-b { width: 22px; background: #ffd95a; }

/* Out: the duster wipes the old name off and the new one is chalked in. */
.px-lang-stage-out .bs-lang-board { animation: bs-lang-board-in .32s cubic-bezier(.2, .8, .3, 1.1) both; }
.px-lang-stage-out .bs-lang-sweep { animation: bs-lang-sweep .95s ease-in-out both; }
.px-lang-stage-out .bs-lang-old { animation: bs-lang-wipe .95s ease-in-out both; }
.px-lang-stage-out .bs-lang-smear { animation: bs-lang-smear .95s ease-out both; }
.px-lang-stage-out .bs-lang-name { animation: bs-lang-chalk .36s steps(9, end) .6s both; }
/* In: it starts where out ended; underlined, ticked, and the board goes. */
.px-lang-stage-in .bs-lang-line { animation: bs-lang-line .28s ease-out .15s both; }
.px-lang-stage-in .bs-lang-tick { animation: bs-lang-tick .26s steps(5, end) .45s both; }
.px-lang-stage-in .bs-lang-board { animation: bs-lang-board-out .28s ease-in 1s both; }
@keyframes bs-lang-board-in { from { transform: translateY(40px); opacity: 0; } }
@keyframes bs-lang-board-out { to { transform: translateY(26px); opacity: 0; } }
@keyframes bs-lang-sweep {
  0%, 22% { opacity: 0; transform: translateX(-12%) rotate(-4deg); }
  30% { opacity: 1; transform: translateX(-6%) rotate(3deg); }
  45% { transform: translateX(28%) rotate(-3deg); }
  60% { transform: translateX(58%) rotate(3deg); }
  78% { opacity: 1; transform: translateX(86%) rotate(-2deg); }
}
@keyframes bs-lang-wipe {
  0%, 30% { opacity: 1; clip-path: inset(-20% -5% -20% -5%); }
  80% { opacity: .5; clip-path: inset(-20% -5% -20% 100%); }
}
@keyframes bs-lang-smear { 0%, 32% { opacity: 0; } 65% { opacity: 1; } }
@keyframes bs-lang-chalk { from { clip-path: inset(-20% 100% -20% -5%); } }
@keyframes bs-lang-line { to { transform: none; } }
@keyframes bs-lang-tick { to { clip-path: inset(-10% -10% -10% -10%); } }
@media (max-width: 460px) {
  .bs-lang-board { padding: 12px 14px 0; border-width: 8px; }
  .bs-lang-tray { margin: 6px -14px 0; padding: 0 18px; }
  .bs-lang-date { display: none; }
  .bs-lang-duster { width: 60px; }
}

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