/* ============================================================
   GRAND OPENING THEME — opening day at the shop's own front.
   Same class surface as editorial/theme.css, so shared header,
   footer, drawer and component classes stay styled.

   Built from a shopfront on the morning it opens: a deep emerald
   awning striped in cream with a scalloped valance, a fascia board
   lettered in gilt and ringed with bulbs, a brass-framed display
   window, a scarlet satin ribbon with a bow, gold ceremonial
   scissors, congratulatory flower stands, balloons and confetti,
   fresh price tags and a doormat on the step. Clean white and
   cream by day with emerald ink; after dark the shop on its
   opening night, the window glowing and the awning lit from below.

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

:root {
  --font-display: 'DM Serif Display', 'Didot', 'Bodoni 72', Georgia, 'Songti SC', 'Noto Serif CJK SC', serif;
  --font-ui:      'Montserrat', system-ui, 'Segoe UI', 'Noto Sans', sans-serif;

  --paper:        #fbf7ee;
  --paper-2:      #ffffff;
  --paper-3:      #f2ebdb;
  --ink:          #10241f;
  --ink-2:        #2f443d;
  --ink-soft:     #687a72;
  --rule:         rgba(16, 36, 31, 0.13);
  --rule-soft:    rgba(16, 36, 31, 0.07);
  --radius:       14px;
  --radius-sm:    8px;
  --shadow:       0 1px 2px rgba(16, 36, 31, .06), 0 6px 16px -8px rgba(16, 36, 31, .24);
  --shadow-md:    0 2px 4px rgba(16, 36, 31, .06), 0 18px 34px -16px rgba(16, 36, 31, .38);

  /* Emerald */
  --theme-50:  #eaf6f1;
  --theme-100: #cdeadf;
  --theme-200: #9dd5c0;
  --theme-300: #66b99c;
  --theme-400: #2f9a7a;
  --theme-500: #0f7a60;
  --theme-600: #0f5c4c;
  --theme-700: #0b4a3e;
  --theme-800: #083b31;
  --theme-900: #052a23;
  --theme-500-rgb: 15, 122, 96;
  --theme-600-rgb: 15, 92, 76;
  --theme-600-ink: #ffffff;

  /* The shop's materials, by name */
  --go-emerald: #0f5c4c; --go-emerald-hi: #2a8a70; --go-emerald-lo: #083b31;
  --go-cream: #fbf3e1; --go-cream-lo: #e8dcc0;
  --go-scarlet: #c8102e; --go-scarlet-hi: #f2556c; --go-scarlet-lo: #8e0b20;
  --go-brass: #b8862f; --go-brass-hi: #fff0c2; --go-brass-mid: #d4a748; --go-brass-lo: #8a6220;

  /* The shopfront drawing reads these (gop_facade_svg() and friends) */
  --sf-wall: #efe6d2; --sf-wall-hi: #f8f2e4;
  --sf-stone: #e6dcc6; --sf-stone-hi: #f6efe0; --sf-stone-lo: #cbbd9f;
  --sf-board: #0f5c4c; --sf-board-hi: #1d7b64; --sf-board-lo: #083b31;
  --sf-frame: #0f5c4c; --sf-frame-hi: #2a8a70;
  --aw-a: #0f5c4c; --aw-b: #fbf3e1; --aw-lift: .08;
  --brass-lo: #8a6220; --brass-mid: #d4a748; --brass-hi: #fff0c2;
  --rb: #c8102e; --rb-hi: #f2556c; --rb-lo: #8e0b20;
  --bulb: #f6ecd2; --lamp-glass: #fdf3d6; --lamp-glow: transparent;
  --glass: .55;
  --win-wall: #fff8ea; --win-wall-2: #f4e6c8; --win-floor: #e9dab8; --win-spot: rgba(255, 236, 190, .9);
  --leaf: #2f7d4f; --leaf-lo: #1f5c39; --stand-leg: #6b4a1e; --sash-2: #f3e3b0;

  /* The opening night: footer, winners, splash and login in both modes */
  --night:   #0b1a16;
  --night-2: #11241f;
  --night-3: #1a3129;
  --on-night: #f6efdf;
  --on-night-soft: rgba(246, 239, 223, .76);

  /* Names other themes' shared markup reaches for */
  --gold:       #b8862f;
  --gold-2:     #d4a748;
  --gold-soft:  rgba(15, 122, 96, 0.08);
  --gold-ink:   #10241f;
  --felt:       #0b1a16;
  --felt-2:     #11241f;
  --on-felt:    #f6efdf;
  --on-felt-soft: rgba(246, 239, 223, 0.78);
  --peacock:    #0f7a60;
  --peacock-soft: rgba(15, 122, 96, 0.12);
  --red:        #c8102e;
  --red-soft:   rgba(200, 16, 46, 0.09);
  --rose:       #c8102e;
  --rose-soft:  rgba(200, 16, 46, 0.08);

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

  /* Buttons: emerald enamel with a brass foot by day; after dark polished
     brass, lit */
  --btn-bg:       #0f5c4c;
  --btn-bg-hover: #136b58;
  --btn-ink:      #ffffff;
  --btn-shadow:   0 2px 0 #b8862f, 0 10px 20px -10px rgba(15, 92, 76, .7);
  --btn-shadow-hover: 0 3px 0 #b8862f, 0 14px 24px -10px rgba(15, 92, 76, .75);

  /* The awning's valance: emerald and cream canvas on a brass rod, cut in
     scallops. The theme's band wherever a section needs an edge. */
  --awning-img: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='18' viewBox='0 0 28 18'><rect width='28' height='1.2' fill='%23fff0c2'/><rect y='1.2' width='28' height='2' fill='%23b8862f'/><rect y='3.2' width='14' height='8' fill='%230f5c4c'/><rect x='14' y='3.2' width='14' height='8' fill='%23fbf3e1'/><path d='M0 11.2A7 6 0 0 0 14 11.2Z' fill='%230f5c4c'/><path d='M14 11.2A7 6 0 0 0 28 11.2Z' fill='%23fbf3e1'/><path d='M14 11.2A7 6 0 0 0 28 11.2' fill='none' stroke='%23cbbd9f' stroke-width='.8'/><rect y='3.2' width='28' height='1.4' fill='%23000' fill-opacity='.16'/></svg>");
  --awning: var(--awning-img) repeat-x left top / 28px 18px;
  --awning-thin-img: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='10' viewBox='0 0 16 10'><rect width='16' height='1.4' fill='%23b8862f'/><rect y='1.4' width='8' height='5' fill='%230f5c4c'/><rect x='8' y='1.4' width='8' height='5' fill='%23fbf3e1'/><path d='M0 6.4A4 3.4 0 0 0 8 6.4Z' fill='%230f5c4c'/><path d='M8 6.4A4 3.4 0 0 0 16 6.4Z' fill='%23fbf3e1'/><path d='M8 6.4A4 3.4 0 0 0 16 6.4' fill='none' stroke='%23cbbd9f' stroke-width='.6'/></svg>");
  --awning-thin: var(--awning-thin-img) repeat-x left top / 16px 10px;
  /* Scarlet satin, lit along its middle */
  --ribbon: linear-gradient(180deg, #8e0b20 0%, #c8102e 26%, #f2556c 46%, #d4203d 62%, #8e0b20 100%);
  --ribbon-v: linear-gradient(90deg, #8e0b20 0%, #c8102e 26%, #f2556c 46%, #d4203d 62%, #8e0b20 100%);
  /* Polished brass, and the brass round a frame or the chosen option */
  --brass-grad: linear-gradient(100deg, #8a6220 0%, #d4a748 26%, #fff0c2 44%, #d4a748 64%, #8a6220 100%);
  --brass-ring: 0 0 0 2px #ffffff, 0 0 0 4px #d4a748, 0 0 0 5px #8a6220, 0 10px 22px -12px rgba(16, 36, 31, .45);

  /* Confetti, very faint, on the page */
  --confetti-faint: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300' viewBox='0 0 300 300'><g fill-opacity='.12'><rect x='40' y='50' width='9' height='5' transform='rotate(24 44 52)' fill='%230f7a60'/><rect x='214' y='36' width='9' height='5' transform='rotate(-30 218 38)' fill='%23c8102e'/><rect x='262' y='150' width='8' height='5' transform='rotate(60 266 152)' fill='%23b8862f'/><rect x='118' y='190' width='9' height='5' transform='rotate(-14 122 192)' fill='%230f7a60'/><rect x='56' y='262' width='9' height='5' transform='rotate(40 60 264)' fill='%23b8862f'/><rect x='240' y='258' width='8' height='5' transform='rotate(-50 244 260)' fill='%23c8102e'/></g><g fill-opacity='.14'><circle cx='150' cy='26' r='2.2' fill='%23b8862f'/><circle cx='20' cy='160' r='2' fill='%23c8102e'/><circle cx='292' cy='222' r='2.2' fill='%230f7a60'/><circle cx='176' cy='112' r='1.8' fill='%23b8862f'/></g></svg>");

  /* The opening night behind the footer, winners, splash and login: a
     shop window's warm light pooling at the foot, the green of the awning
     above, and the soft points of the street's lamps */
  --bokeh: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='420' height='220' viewBox='0 0 420 220'><g fill='%23ffd98a'><circle cx='40' cy='60' r='2.2' fill-opacity='.5'/><circle cx='186' cy='150' r='1.6' fill-opacity='.35'/><circle cx='330' cy='40' r='2' fill-opacity='.45'/><circle cx='392' cy='170' r='1.4' fill-opacity='.4'/></g><g fill='%23f6efdf'><circle cx='150' cy='30' r='1.2' fill-opacity='.4'/><circle cx='300' cy='200' r='1' fill-opacity='.3'/><circle cx='12' cy='120' r='1' fill-opacity='.35'/></g></svg>");
  --night-bg:
    radial-gradient(640px 240px at 50% 112%, rgba(255, 214, 128, .26), transparent 70%),
    radial-gradient(420px 240px at 92% -60px, rgba(47, 154, 122, .26), transparent 70%),
    radial-gradient(380px 220px at 6% -40px, rgba(200, 16, 46, .14), transparent 70%),
    linear-gradient(180deg, #08201b 0%, #0c241f 58%, #12302a 100%);

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

html.dark {
  --paper:        #0b1a16;
  --paper-2:      #11241f;
  --paper-3:      #19302a;
  --ink:          #f6efdf;
  --ink-2:        #e1d8c4;
  --ink-soft:     #a3b2aa;
  --rule:         rgba(246, 239, 223, 0.13);
  --rule-soft:    rgba(246, 239, 223, 0.07);
  --shadow:       0 1px 2px rgba(0, 0, 0, .4), 0 6px 18px -8px rgba(0, 0, 0, .7);
  --shadow-md:    0 2px 4px rgba(0, 0, 0, .4), 0 18px 36px -14px rgba(0, 0, 0, .85);

  /* Brass, lit */
  --theme-50:  #172a22;
  --theme-100: #22382c;
  --theme-200: #5c5230;
  --theme-300: #f4dc9c;
  --theme-400: #efd18a;
  --theme-500: #e6c46e;
  --theme-600: #efd28a;
  --theme-700: #f6e2ae;
  --theme-800: #faecc8;
  --theme-900: #fff7e4;
  --theme-500-rgb: 230, 196, 110;
  --theme-600-rgb: 239, 210, 138;
  --theme-600-ink: #10241f;

  /* The shop on its opening night: the stone in shadow, the board lit by
     its bulbs, the awning washed in light from below, the window glowing */
  --sf-wall: #1b2c27; --sf-wall-hi: #24382f;
  --sf-stone: #2a3a33; --sf-stone-hi: #3a4c43; --sf-stone-lo: #17241f;
  --sf-board: #0d4a3d; --sf-board-hi: #17644f; --sf-board-lo: #062a22;
  --sf-frame: #0c3f34; --sf-frame-hi: #1d6a56;
  --aw-a: #13705a; --aw-b: #efe2c2; --aw-lift: .3;
  --brass-lo: #9a7024; --brass-mid: #e6c46e; --brass-hi: #fff6d6;
  --rb: #d4203d; --rb-hi: #ff6f83; --rb-lo: #8e0b20;
  --bulb: #ffe7a6; --lamp-glass: #ffe8a8; --lamp-glow: rgba(255, 214, 128, .22);
  --glass: .22;
  --win-wall: #ffe3a3; --win-wall-2: #e9b765; --win-floor: #c58f45; --win-spot: rgba(255, 246, 214, .95);
  --leaf: #2a6e46; --leaf-lo: #174a2e; --stand-leg: #8a6a34; --sash-2: #e8d49c;

  --gold:       #e6c46e;
  --gold-2:     #f6e2ae;
  --gold-soft:  rgba(230, 196, 110, 0.12);
  --felt:       #071410;
  --felt-2:     #11241f;
  --peacock:    #7fd3b5;
  --peacock-soft: rgba(127, 211, 181, 0.13);
  --red:        #ff6f83;
  --red-soft:   rgba(255, 111, 131, 0.13);
  --rose:       #ff6f83;
  --rose-soft:  rgba(230, 196, 110, 0.12);

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

  --btn-bg:       #e6c46e;
  --btn-bg-hover: #f0d48a;
  --btn-ink:      #10241f;
  --btn-shadow:   0 2px 0 #9a7024, 0 10px 26px -10px rgba(230, 196, 110, .5);
  --btn-shadow-hover: 0 3px 0 #9a7024, 0 14px 30px -10px rgba(230, 196, 110, .65);

  --awning-img: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='18' viewBox='0 0 28 18'><rect width='28' height='1.2' fill='%23fff6d6'/><rect y='1.2' width='28' height='2' fill='%23c79a45'/><rect y='3.2' width='14' height='8' fill='%2313705a'/><rect x='14' y='3.2' width='14' height='8' fill='%23efe2c2'/><path d='M0 11.2A7 6 0 0 0 14 11.2Z' fill='%2313705a'/><path d='M14 11.2A7 6 0 0 0 28 11.2Z' fill='%23efe2c2'/><rect y='9.2' width='28' height='2' fill='%23ffe3a3' fill-opacity='.25'/></svg>");
  --awning-thin-img: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='10' viewBox='0 0 16 10'><rect width='16' height='1.4' fill='%23c79a45'/><rect y='1.4' width='8' height='5' fill='%2313705a'/><rect x='8' y='1.4' width='8' height='5' fill='%23efe2c2'/><path d='M0 6.4A4 3.4 0 0 0 8 6.4Z' fill='%2313705a'/><path d='M8 6.4A4 3.4 0 0 0 16 6.4Z' fill='%23efe2c2'/></svg>");
  --brass-ring: 0 0 0 2px #11241f, 0 0 0 4px #e6c46e, 0 0 0 5px #9a7024, 0 0 18px -2px rgba(255, 214, 128, .35);
  --confetti-faint: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300' viewBox='0 0 300 300'><g fill-opacity='.1'><rect x='40' y='50' width='9' height='5' transform='rotate(24 44 52)' fill='%237fd3b5'/><rect x='214' y='36' width='9' height='5' transform='rotate(-30 218 38)' fill='%23ff6f83'/><rect x='262' y='150' width='8' height='5' transform='rotate(60 266 152)' fill='%23e6c46e'/><rect x='118' y='190' width='9' height='5' transform='rotate(-14 122 192)' fill='%237fd3b5'/><rect x='56' y='262' width='9' height='5' transform='rotate(40 60 264)' fill='%23e6c46e'/></g><g fill='%23e6c46e' fill-opacity='.12'><circle cx='150' cy='26' r='2.2'/><circle cx='292' cy='222' r='2.2'/></g></svg>");
  --page-bg:
    radial-gradient(900px 420px at 80% -160px, rgba(255, 214, 128, 0.07), transparent 70%) no-repeat,
    radial-gradient(900px 420px at 8% -140px, rgba(47, 154, 122, 0.1), transparent 70%) no-repeat,
    var(--confetti-faint) repeat,
    var(--paper);
}

/* ── 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;
  letter-spacing: 0;
}
.display-italic { font-style: italic; }
/* Figures in tabular columns read better in the UI face. */
html .font-display.tabular-nums, html .font-display[class*="tabular"] { font-family: var(--font-ui); font-weight: 700; letter-spacing: 0; }

::selection { background: #cdeadf; color: #10241f; }

.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.16em;
  color: var(--theme-600);
}
.ed-eyebrow-tight { font-size: 9px !important; letter-spacing: 0 !important; white-space: nowrap !important; }

/* A price tag on its string: section eyebrows wear it */
html .section-eyebrow::before, .go-tag-ico {
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 14'><path d='M5.5 1H20.5V13H5.5L1 7Z' fill='%23ffffff' stroke='%23b8862f' stroke-width='1.6' stroke-linejoin='round'/><circle cx='5.6' cy='7' r='1.5' fill='none' stroke='%23b8862f' stroke-width='1.1'/><rect x='9.5' y='5' width='8' height='4' rx='1' fill='%23c8102e'/></svg>") center / contain no-repeat;
}
html.dark .section-eyebrow::before, html.dark .go-tag-ico {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 14'><path d='M5.5 1H20.5V13H5.5L1 7Z' fill='%2311241f' stroke='%23e6c46e' stroke-width='1.6' stroke-linejoin='round'/><circle cx='5.6' cy='7' r='1.5' fill='none' stroke='%23e6c46e' stroke-width='1.1'/><rect x='9.5' y='5' width='8' height='4' rx='1' fill='%23ff6f83'/></svg>");
}
.go-tag-ico { display: inline-block; flex-shrink: 0; width: 20px; height: 13px; }
[dir="rtl"] .go-tag-ico, [dir="rtl"] .section-eyebrow::before { transform: scaleX(-1); }

/* A little hanging "open" sign: the hero kicker and the season chip */
.go-sign-ico {
  display: inline-block; flex-shrink: 0; width: 16px; height: 16px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M8 1L2.5 7M8 1L13.5 7' stroke='%23d4a748' stroke-width='1.2' fill='none'/><circle cx='8' cy='1.4' r='1.1' fill='%23d4a748'/><rect x='.8' y='6.4' width='14.4' height='8.8' rx='1.6' fill='%23d4a748'/><rect x='2' y='7.6' width='12' height='6.4' rx='1' fill='%23c8102e'/><path d='M5 10.8L7 12.4L11 8.8' stroke='%23ffffff' stroke-width='1.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / contain no-repeat;
}

html .section-eyebrow {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-family: var(--font-ui);
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.16em;
  color: var(--theme-600);
  margin-bottom: 0.7rem;
}
html .section-eyebrow::before { content: ''; flex-shrink: 0; width: 20px; height: 13px; }

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

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

[data-go-phase][hidden] { display: none !important; }
[dir="rtl"] .go-flip-rtl { transform: scaleX(-1); }

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

.hdr-strip, .hdr-strip .ed-status { color: rgba(246, 239, 223, 0.88); }
.hdr-strip a:hover, .hdr-strip button:hover { color: #f4dc9c; }

/* The awning's valance under the main header bar and wherever a section
   needs an edge */
.go-band { height: 18px; background: var(--awning); }
.go-band--thin { height: 10px; background: var(--awning-thin); }

/* The opening chip in the status strip */
.go-strip-chip { display: inline-flex; align-items: center; gap: .45rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #f4dc9c; }
.go-strip-chip .go-sign-ico { width: 14px; height: 14px; }
/* The desktop strip shares its line with the menu; the date gives way to
   the chip below 1440px. Where a long language still runs out of room,
   grand-opening.js marks the strip .go-strip-tight and the chip keeps
   only its short form. */
@media (min-width: 1024px) and (max-width: 1439px) { .hdr-strip .go-strip-date { display: none; } }
.go-strip-chip__short, .go-strip-tight .go-strip-chip__full { display: none; }
.go-strip-tight .go-strip-chip__short { display: inline; }

.ed-subnav { align-items: center; background: var(--paper-2); border-bottom: 1px solid var(--rule); }
.ed-subnav-inner { display: flex; align-items: center; gap: 1.25rem; width: 100%; padding: 0.6rem 2rem; }
@media (min-width: 1280px) { .ed-subnav-inner { padding-left: 2.5rem; padding-right: 2.5rem; } }
.ed-subnav-eyebrow {
  flex-shrink: 0;
  font-family: var(--font-ui); font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--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: 999px;
  font-family: var(--font-ui); font-size: 0.92rem; font-weight: 600;
  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.94rem; font-weight: 700;
  color: var(--ink); text-decoration: none;
  padding-bottom: 2px; border-bottom: 2px solid var(--go-scarlet);
  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.6rem;
  white-space: nowrap;
  font-family: var(--font-ui); font-size: 1rem; font-weight: 700; letter-spacing: .01em;
  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, html.dark body .ed-plan-featured .ed-plan-cta { background: #e6c46e; color: #10241f; box-shadow: 0 2px 0 #9a7024; }
.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: .98rem; font-weight: 700;
  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: white with 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(--bokeh) repeat left top / 420px 220px, var(--night-bg); color: #f6efdf;
  border: 1px solid rgba(230, 196, 110, .3); border-radius: var(--radius);
  overflow: hidden;
  padding-top: 1.6rem;
}
.ed-plan-featured::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 18px;
  background: var(--awning); pointer-events: none;
}
.ed-plan-hairline { border-color: var(--rule); }
.ed-plan-featured .ed-plan-hairline { border-color: rgba(246, 239, 223, .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(246, 239, 223, 0.88); text-decoration: none; transition: color 0.16s ease; }
.ed-topnav-link:hover, .ed-topnav-link.active { color: #f4dc9c; }

/* ── Drawer ── */
.drawer-section-label {
  display: flex; align-items: center; gap: 0.6rem;
  font-family: var(--font-ui); font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--theme-600); padding: 1.1rem 1.5rem 0.4rem;
}
.drawer-section-label::after { content: ''; flex: 1; height: 2px; background: var(--brass-grad); opacity: .6; }
.drawer-nav-row {
  display: flex; align-items: center; gap: 0.85rem;
  padding: 0.65rem 1.5rem;
  font-family: var(--font-ui); font-size: .98rem; 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: 10px; font-family: var(--font-ui); font-size: 0.95rem; font-weight: 700;
  color: var(--go-scarlet); border: 1px solid var(--go-scarlet); text-decoration: none;
}
html.dark .drawer-logout { color: #ff6f83; border-color: #ff6f83; }
.drawer-logout:hover { background: var(--red-soft); }

.mobile-glass-header {
  background: rgba(251, 247, 238, 0.95);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--rule);
}
html.dark .mobile-glass-header { background: rgba(11, 26, 22, 0.95); }

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

[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.96rem; font-weight: 600;
  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.14em;
  color: var(--theme-600); padding: 0.9rem 1rem 0.4rem;
}

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

/* ── Dark/light toggle: the ribbon cutting ──
   assets/js/grand-opening.js registers it. A scarlet satin ribbon
   unspools across the screen in wide folds, band under band, until it
   covers the page; gold ceremonial scissors swing in and snip it down the
   middle; the mode flips under the cut and the two halves fall away to
   either side. The satin keeps its colours both ways. */
.px-fx--go-ribbon { position: fixed; inset: 0; z-index: 2147483000; pointer-events: none; overflow: hidden; }
.px-fx--go-ribbon .go-fx-half {
  position: absolute; inset: 0;
  transition: transform .6s cubic-bezier(.55, 0, .85, .45), opacity .3s ease .4s;
}
.px-fx--go-ribbon .go-fx-half--a { clip-path: inset(0 50% 0 0); transform-origin: 0% 0%; }
.px-fx--go-ribbon .go-fx-half--b { clip-path: inset(0 0 0 50%); transform-origin: 100% 0%; }
/* The solid satin under the folds: fades in as they arrive, so the cover
   is whole however the bands land on a tall phone or a wide screen */
.px-fx--go-ribbon .go-fx-veil { position: absolute; inset: 0; background: #b10d28; opacity: 0; transition: opacity .3s ease; }
.px-fx--go-ribbon.is-covered .go-fx-veil { opacity: 1; }
.px-fx--go-ribbon .go-fx-band {
  position: absolute; left: -12%; width: 124%;
  top: calc(var(--i) * var(--bh) - 2px); height: calc(var(--bh) + 4px);
  background:
    linear-gradient(180deg, rgba(0, 0, 0, .28) 0%, rgba(0, 0, 0, 0) 14%, rgba(255, 255, 255, .0) 30%, rgba(255, 190, 200, .55) 46%, rgba(255, 255, 255, 0) 62%, rgba(0, 0, 0, .1) 84%, rgba(0, 0, 0, .34) 100%),
    linear-gradient(90deg, #a50c25, #d4203d 40%, #c8102e 70%, #9a0b22);
  box-shadow: 0 6px 10px -4px rgba(60, 0, 10, .55);
  transform: translateX(var(--from));
  transition: transform .3s cubic-bezier(.2, .7, .25, 1);
  transition-delay: var(--d);
}
/* A fold where the ribbon turns back on itself at the screen's edge */
.px-fx--go-ribbon .go-fx-band::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 9%;
  background: linear-gradient(90deg, rgba(0, 0, 0, .35), rgba(255, 255, 255, .18) 60%, rgba(0, 0, 0, .2));
}
.px-fx--go-ribbon .go-fx-band[data-side="l"]::after { right: 0; }
.px-fx--go-ribbon .go-fx-band[data-side="r"]::after { left: 0; transform: scaleX(-1); }
.px-fx--go-ribbon.is-unspool .go-fx-band { transform: translateX(0); }
/* The scissors: in from the corner, open, then shut across the middle */
.px-fx--go-ribbon .go-fx-scissors {
  position: absolute; left: 50%; top: 50%; width: min(64vmin, 420px); height: min(64vmin, 420px);
  margin: calc(min(64vmin, 420px) / -2) 0 0 calc(min(64vmin, 420px) / -2);
  transform: translate(60vw, 40vh) rotate(60deg); opacity: 0;
  transition: transform .36s cubic-bezier(.2, .8, .3, 1), opacity .2s ease;
  filter: drop-shadow(0 12px 18px rgba(40, 0, 6, .5));
}
.px-fx--go-ribbon.is-scissors .go-fx-scissors { transform: translate(0, 0) rotate(-90deg); opacity: 1; }
.px-fx--go-ribbon .go-fx-scissors svg { width: 100%; height: 100%; overflow: visible; }
.px-fx--go-ribbon .go-fx-blade { transform-origin: 100px 100px; transition: transform .16s cubic-bezier(.6, 0, .4, 1); }
.px-fx--go-ribbon .go-fx-blade--a { transform: rotate(-22deg); }
.px-fx--go-ribbon .go-fx-blade--b { transform: rotate(22deg); }
.px-fx--go-ribbon.is-snip .go-fx-blade--a, .px-fx--go-ribbon.is-snip .go-fx-blade--b { transform: rotate(0deg); }
/* The cut: a bright line down the middle as the blades meet */
.px-fx--go-ribbon .go-fx-cut {
  position: absolute; left: 50%; top: 0; bottom: 0; width: 3px; margin-left: -1.5px;
  background: linear-gradient(180deg, transparent, #fff6d6 20%, #fff 50%, #fff6d6 80%, transparent);
  transform: scaleY(0); opacity: 0; transition: transform .2s ease, opacity .2s ease;
}
.px-fx--go-ribbon.is-snip .go-fx-cut { transform: scaleY(1); opacity: .9; }
.px-fx--go-ribbon.is-away .go-fx-cut, .px-fx--go-ribbon.is-away .go-fx-scissors { opacity: 0; transition: opacity .2s ease; }
.px-fx--go-ribbon.is-away .go-fx-half--a { transform: translate(-46vw, 70vh) rotate(-24deg); opacity: 0; }
.px-fx--go-ribbon.is-away .go-fx-half--b { transform: translate(46vw, 70vh) rotate(24deg); opacity: 0; }

/* ── Footer: the shop's awning to close the page — its valance on a
   brass rod, a sign hung from it — and below it the street on opening
   night ── */
.go-footer {
  --paper:     #0b231d;
  --paper-2:   #11302a;
  --paper-3:   #193c34;
  --ink:       #f6efdf;
  --ink-2:     #e3dac6;
  --ink-soft:  #aebcb4;
  --rule:      rgba(246, 239, 223, 0.15);
  --rule-soft: rgba(246, 239, 223, 0.08);
  --theme-500: #e6c46e; --theme-600: #e6c46e; --theme-700: #f6e2ae;
  --theme-500-rgb: 230, 196, 110;
  position: relative;
}
html.dark .go-footer { --paper: #071511; --paper-2: #0f2620; --paper-3: #16322b; }
html body #desktopFooter.go-footer {
  background:
    var(--bokeh) repeat left 30px / 420px 220px,
    radial-gradient(900px 300px at 50% 0%, rgba(255, 214, 128, .1), transparent 70%),
    var(--paper) !important;
}
.go-footer-top { position: relative; height: 96px; margin-bottom: -1px; pointer-events: none; }
/* The awning's front edge in perspective: canvas stripes over a scalloped
   valance, the brass rod along its top */
.go-footer-awning {
  position: absolute; left: 0; right: 0; bottom: 0; height: 54px;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, .22), rgba(0, 0, 0, 0) 45%),
    repeating-linear-gradient(90deg, #0f5c4c 0 36px, #fbf3e1 36px 72px);
  -webkit-mask: radial-gradient(18px 13px at 18px 40px, #000 98%, transparent) 0 0 / 36px 54px repeat-x, linear-gradient(#000, #000) 0 0 / 100% 40px no-repeat;
          mask: radial-gradient(18px 13px at 18px 40px, #000 98%, transparent) 0 0 / 36px 54px repeat-x, linear-gradient(#000, #000) 0 0 / 100% 40px no-repeat;
}
.go-footer-rod { position: absolute; left: 0; right: 0; bottom: 50px; height: 6px; background: linear-gradient(180deg, #fff0c2, #d4a748 40%, #8a6220); box-shadow: 0 2px 4px rgba(0, 0, 0, .25); }
html.dark .go-footer-awning { background: linear-gradient(180deg, rgba(0, 0, 0, .3), rgba(0, 0, 0, 0) 45%, rgba(255, 227, 163, .18)), repeating-linear-gradient(90deg, #13705a 0 36px, #efe2c2 36px 72px); }
/* A row of bulbs strung along the rod, lit after dark */
.go-footer-bulbs { position: absolute; left: 0; right: 0; bottom: 58px; height: 14px; background: radial-gradient(circle at 50% 60%, #fff6d6 0 3px, #d4a748 3.6px 4.6px, transparent 5px) 12px 0 / 36px 14px repeat-x; }
html.dark .go-footer-bulbs { background: radial-gradient(circle at 50% 60%, #fffbe8 0 3px, #ffd98a 3.6px 5px, rgba(255, 214, 128, .35) 6px 8px, transparent 10px) 12px 0 / 36px 14px repeat-x; }
/* The sign that hangs from the rod in the end corner, in front of the
   valance */
.go-footer-sign {
  position: absolute; inset-inline-end: 7%; top: 36px; z-index: 2;
  display: flex; flex-direction: column; align-items: center;
}
.go-footer-sign::before { content: ''; width: 46px; height: 18px; border: 2px solid #d4a748; border-bottom: 0; border-radius: 50% 50% 0 0 / 100% 100% 0 0; margin-bottom: -2px; }
.go-footer-sign span {
  display: block; padding: .32rem .9rem .36rem; border-radius: 6px;
  font-family: var(--font-display); font-size: 1.15rem; line-height: 1; color: #fff;
  background: #c8102e; box-shadow: 0 0 0 2px #d4a748, 0 0 0 3px #8a6220, 0 8px 14px -6px rgba(0, 0, 0, .6);
  transform: rotate(-4deg); transform-origin: 50% 0;
}
@media (prefers-reduced-motion: no-preference) {
  .go-footer-sign span { animation: go-swing 5s ease-in-out 3 forwards; }
}
@keyframes go-swing { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(3deg); } }
.go-footer a:hover { color: #f4dc9c; }
html .go-footer .ed-footer-heading { font-family: var(--font-display); font-weight: 400; font-size: 1.25rem; letter-spacing: 0; text-transform: none; color: #f4dc9c; }
html.dark #desktopFooter li { color: var(--ink-2) !important; }
/* header.css greys every footer h4 after dark with an ID rule */
html.dark #desktopFooter .ed-footer-heading { color: #f4dc9c !important; }
html.dark #desktopFooter .ed-newsletter h4 { color: #10241f !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: .94rem; font-weight: 600; 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; }

/* The newsletter as the shop's window card: cream under the awning's
   valance, a price tag tied in its corner */
html body .go-footer .ed-newsletter {
  position: relative;
  background:
    radial-gradient(260px 160px at 100% 50%, rgba(212, 167, 72, .18), transparent 70%),
    #fbf7ee;
  color: #10241f;
  border: 0; border-radius: 14px;
  box-shadow: 0 0 0 3px #d4a748, 0 18px 34px -16px rgba(0, 0, 0, .6);
  overflow: hidden;
  padding-top: 2.8rem; padding-bottom: 2.2rem;
}
html body .go-footer .ed-newsletter::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 18px; pointer-events: none;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='18' viewBox='0 0 28 18'><rect width='28' height='1.2' fill='%23fff0c2'/><rect y='1.2' width='28' height='2' fill='%23b8862f'/><rect y='3.2' width='14' height='8' fill='%230f5c4c'/><rect x='14' y='3.2' width='14' height='8' fill='%23fbf3e1'/><path d='M0 11.2A7 6 0 0 0 14 11.2Z' fill='%230f5c4c'/><path d='M14 11.2A7 6 0 0 0 28 11.2Z' fill='%23fbf3e1'/><path d='M14 11.2A7 6 0 0 0 28 11.2' fill='none' stroke='%23cbbd9f' stroke-width='.8'/></svg>") repeat-x left top / 28px 18px;
}
html body .go-footer .ed-newsletter::after {
  content: ''; position: absolute; right: 22px; top: 34px; bottom: auto; left: auto; width: 74px; height: 48px; display: block;
  border-radius: 0; opacity: 1; filter: none; transform: rotate(10deg); pointer-events: none;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 74 48'><path d='M2 8C8 2 16 6 14 14' fill='none' stroke='%2310241f' stroke-width='1' stroke-opacity='.5'/><path d='M14 14L26 4H70V44H26Z' fill='%23ffffff' stroke='%23d4a748' stroke-width='2.4' stroke-linejoin='round'/><circle cx='24' cy='24' r='3.4' fill='none' stroke='%23d4a748' stroke-width='1.8'/><rect x='34' y='14' width='28' height='5' rx='2.5' fill='%230f5c4c'/><rect x='34' y='25' width='20' height='4' rx='2' fill='%23e8dcc0'/><rect x='34' y='33' width='26' height='7' rx='2' fill='%23c8102e'/></svg>") center / contain no-repeat;
}
[dir="rtl"] body .go-footer .ed-newsletter::after { right: auto; left: 22px; transform: rotate(-10deg) scaleX(-1); }
@media (max-width: 767px) { html body .go-footer .ed-newsletter::after { width: 52px; height: 34px; top: 30px; right: 14px; } [dir="rtl"] body .go-footer .ed-newsletter::after { right: auto; left: 14px; } }
/* Side by side, the form keeps clear of the tag */
@media (min-width: 768px) { html body .go-footer .ed-newsletter { padding-inline-end: 7.5rem; } }
html body .go-footer .ed-newsletter, html body .go-footer .ed-newsletter * { --ink: #10241f; --ink-2: #2f443d; }
html body .go-footer .ed-newsletter h4, html.dark body .go-footer .ed-newsletter h4 { color: #10241f !important; font-family: var(--font-display); font-weight: 400; }
html.dark body .go-footer .ed-newsletter p:not(#newsletter-msg) { color: #2f443d !important; }
html body .go-footer .ed-newsletter-input, html.dark body .go-footer .ed-newsletter input[type="email"].ed-newsletter-input:not(.no-dark):not([type="checkbox"]) { background: #ffffff !important; color: #10241f !important; border: 1px solid rgba(16, 36, 31, .22) !important; border-radius: 10px; }
html body .go-footer .ed-newsletter-input::placeholder { color: #687a72; }
html body .go-footer .ed-newsletter-input:focus { border-color: #0f5c4c !important; box-shadow: 0 0 0 3px rgba(15, 92, 76, .18); }
html body .go-footer .ed-newsletter-btn {
  background: #0f5c4c; color: #ffffff; border: 0; border-radius: 10px;
  font-family: var(--font-ui); font-weight: 700; box-shadow: 0 2px 0 #b8862f;
}
html body .go-footer .ed-newsletter-age { color: #2f443d; }

/* Logo plate: the light-mode logo on a cream enamel shop sign in a
   brass frame, wherever it sits on the night (footer, app splash) */
.go-plaque {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 1rem 1.6rem;
  background: #fbf7ee;
  border-radius: 10px;
  box-shadow: 0 0 0 3px #fbf7ee, 0 0 0 5px #d4a748, 0 0 0 6px #8a6220, 0 14px 28px -12px rgba(0, 0, 0, .6);
}
.go-plaque::before {
  content: ''; position: absolute; inset: 6px; border-radius: 6px; pointer-events: none;
  border: 1px solid rgba(15, 92, 76, .35);
}

/* 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: fit-title.js keeps it on one line and
   shrinks or slides it, which needs the flex item free to narrow, or a long
   name pushes the balance chip off the screen. */
html body header.safe-top-header .truncate { min-width: 0; }
/* .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; }
}

/* ── 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(11, 26, 22, 0.95) !important; border-bottom-color: var(--rule) !important; }
html.dark .floating-nav-shell,
html.dark .safe-area-bottom > div.mobile-bottom-nav { background: rgba(17, 36, 31, 0.96) !important; }
html.dark .premium-side-menu { background: var(--paper) !important; }
html.dark #langSheet { background: var(--paper-2) !important; border-top-color: var(--rule) !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, #19302a, #0b1a16, #11241f, #071410) !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 theme's own night. 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: #071410 !important;
  border-color: rgba(246, 239, 223, .2) !important;
  color: #f6efdf !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 night. */
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: #071410;
  --paper: #f6efdf;
  border-color: rgba(230, 196, 110, .3);
}

html header.safe-top-header[style] { background: rgba(251, 247, 238, .95) !important; }
html.dark header.safe-top-header[style] { background: rgba(11, 26, 22, .95) !important; }
/* The winners page's tab bar, near-black in assets/css/pages/winners.css */
html.dark .wn-tab-bar { background: rgba(11, 26, 22, .95); }

/* ── Login / register / forgot-password brand panel: the street on
   opening night, the awning's valance along its top and a bunch of
   balloons in its corner ── */
:root, html.dark {
  --brand-gradient: var(--night-bg);
  --brand-glow-1: rgba(255, 214, 128, 0.22);
  --brand-glow-2: rgba(47, 154, 122, 0.24);
}
.brand-panel { background: var(--bokeh) repeat left top / 420px 220px, var(--night-bg) !important; }
/* assets/css/pages/login.css loads after the theme and draws ::after as a
   round glow; here it is a bunch of three balloons. */
html .brand-panel::after {
  content: ''; position: absolute;
  top: 70px !important; right: 8% !important; left: auto !important; bottom: auto !important;
  width: 120px !important; height: 168px !important;
  border-radius: 0 !important; opacity: 1 !important; filter: drop-shadow(0 0 24px rgba(255, 214, 128, .2)) !important; transform: rotate(4deg) !important;
  background: var(--go-balloons) center / contain no-repeat !important;
  box-shadow: none !important;
}
[dir="rtl"] .brand-panel::after { right: auto !important; left: 8% !important; }
/* login.css's other glow becomes the awning's valance along the top */
html .brand-panel::before {
  top: 0 !important; left: 0 !important; right: 0 !important; width: auto !important; height: 18px !important;
  border-radius: 0 !important; opacity: 1 !important; filter: none !important; transform: none !important;
  background: var(--awning) !important;
}
.brand-panel .text-purple-200,
.brand-panel [class*="text-purple-200"] { color: rgba(246, 239, 223, 0.84) !important; }
.brand-panel h2 { font-family: var(--font-display); font-weight: 400 !important; }

/* ── Wallet balance card: the shop's cash drawer in emerald lacquer,
   framed in brass, the awning's valance along its top, a satin ribbon
   tied across it and a brass pull at its foot ── */
html body .wallet-hero {
  position: relative;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .14), rgba(255, 255, 255, .06) 30%, rgba(255, 255, 255, 0) 55%, rgba(0, 0, 0, .16)),
    radial-gradient(120% 90% at 20% 0%, #1d7b64, transparent 60%),
    linear-gradient(180deg, #0f5c4c, #0a4438);
  border: 0;
  border-radius: 14px;
  box-shadow: 0 0 0 3px #d4a748, 0 0 0 4px #8a6220, 0 22px 40px -18px rgba(8, 59, 49, .75);
  color: #fbf7ee;
  overflow: hidden;
  padding-top: calc(1.5rem + 18px) !important;
  padding-bottom: calc(1.5rem + 14px) !important;
}
html body .wallet-hero::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; bottom: auto; width: auto; height: 18px;
  border: 0; border-radius: 0; transform: none; opacity: 1;
  background: var(--awning-img) repeat-x left top / 28px 18px;
  pointer-events: none;
}
/* The drawer's brass pull along its foot */
html body .wallet-hero::after {
  content: ''; position: absolute; left: 50%; bottom: 7px; top: auto; right: auto; width: 96px; height: 7px; margin-left: -48px;
  border-radius: 4px; transform: none; opacity: 1;
  background: linear-gradient(180deg, #fff0c2, #d4a748 45%, #8a6220);
  box-shadow: 0 1px 0 rgba(0, 0, 0, .3);
  pointer-events: none;
}
html body .wallet-hero > * { position: relative; z-index: 1; }
/* The ornament row becomes a ribbon tied across the drawer in a bow */
html body .wallet-hero .flex-1.h-px { height: 6px !important; background: var(--ribbon) !important; border-radius: 1px; opacity: 1; }
html body .wallet-hero .flex-1.h-px + span { font-size: 0 !important; width: 46px; height: 26px; margin: 0 -10px; background: var(--go-bow); position: relative; z-index: 1; }
/* Shared markup letters the eyebrow, counts and rules in faint white for
   a black card; on the lacquer they need more body. */
html body .wallet-hero span:is([style*="color:rgba(255,255,255"], [style*="color:color-mix(in srgb, var(--paper)"]) { color: rgba(251, 247, 238, .86) !important; }
html body .wallet-balance-num {
  font-family: var(--font-ui); font-variation-settings: normal; font-weight: 700; letter-spacing: -.01em;
  color: #fff6d6; overflow-wrap: normal; font-variant-numeric: lining-nums tabular-nums;
  text-shadow: 0 2px 0 rgba(4, 30, 24, .5);
}
html body .wallet-hero-btn-primary { background: #e6c46e; color: #10241f; border: 0; font-family: var(--font-ui); font-weight: 700; border-radius: 10px; box-shadow: 0 2px 0 #8a6220; }
html body .wallet-hero-btn-primary:hover { background: #f0d48a; color: #10241f; }
html body .wallet-hero-btn-secondary { font-family: var(--font-ui); font-weight: 700; color: #fbf7ee; border-color: rgba(251, 247, 238, .55); border-radius: 10px; }
/* Three buttons share a phone row; each label stays on one line and the
   row wraps instead of a button folding "Add Balance" in two. */
html body .wallet-hero-btn-primary, html body .wallet-hero-btn-secondary { white-space: nowrap; }
@media (max-width: 420px) {
  html body .wallet-hero-btn-primary, html body .wallet-hero-btn-secondary { padding: .55rem .95rem; font-size: .8125rem; gap: .375rem; }
}
html.dark body .wallet-hero {
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .2), rgba(255, 255, 255, .04) 30%, rgba(255, 255, 255, 0) 55%, rgba(0, 0, 0, .2)),
    radial-gradient(60% 90% at 88% 100%, rgba(255, 214, 128, .22), transparent 70%),
    linear-gradient(180deg, #0d4a3d, #072e26);
  box-shadow: 0 0 0 3px #e6c46e, 0 0 0 4px #9a7024, 0 0 50px -14px rgba(255, 214, 128, .3);
}

/* ── Mystery box card (styled by assets/css/pages/home.css): the
   valance across its top ── */
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; left: 0; right: 0; bottom: auto; width: auto; height: 18px; border-radius: 0;
  background: var(--awning); opacity: 1; z-index: 2;
}
html .ed-card-mystery img { position: relative; z-index: 1; }

/* ── Product page buy box: the valance along its top ── */
html body .pd-buybox {
  position: relative;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 16px;
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
html body .pd-buybox::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 18px;
  background: var(--awning);
}
html body .pd-buybox .font-display.text-4xl { font-family: var(--font-ui); font-weight: 700; color: var(--theme-600); overflow-wrap: normal; }
.pd-title { font-weight: 400 !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(--btn-ink); }

/* Shared markup's stock purple, indigo and blue accents (coupon buttons,
   tier chips, focus rings) take the theme's emerald. */
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); }
html.dark :is(.dark\:text-purple-400, .dark\:text-indigo-400, .dark\:text-violet-400) { 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(15, 122, 96, .3); }
html.dark .border-violet-200 { border-color: rgba(230, 196, 110, .35) !important; }
html .focus\:ring-purple-400:focus { --tw-ring-color: rgba(15, 122, 96, .35); }
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 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, 255, 255, .3); border-top-color: var(--btn-ink); }

/* The game arena's Play button letters itself in white on the accent;
   after dark the accent is brass, so it takes the button ink. */
html.dark .arena-play { color: var(--btn-ink); text-shadow: none; }
html.dark .arena-play .pic { background: rgba(11, 26, 22, .12); }
html.dark .arena-play .cost { border-left-color: rgba(11, 26, 22, .3); }

/* ── 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 on a white panel under the
   valance. 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: 14px !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: 16px !important;
  box-shadow: var(--shadow-md) !important;
  overflow: hidden;
  padding-top: 1.8rem !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: 18px;
  background: var(--awning);
}
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-ui);
  font-weight: 700;
  font-size: 1.7rem;
  color: var(--theme-600);
  overflow-wrap: normal;
}

/* 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 .go-strip-chip { font-size: 10px; gap: .35rem; } }

/* Search results: the gift-box section prints its own slate panel with no
   theme hook; hang it on the shop wall like the other result blocks. */
html body section.rounded-xl.from-gray-900:has(img[src$="/emoji/gift.svg"]) {
  background: var(--confetti), var(--paper-2) !important;
  border: 1px solid var(--rule) !important;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
html body section.rounded-xl.from-gray-900:has(img[src$="/emoji/gift.svg"]) h2.font-extrabold {
  font-family: var(--font-display); font-weight: 400; color: var(--ink) !important;
}
html body section.rounded-xl.from-gray-900:has(img[src$="/emoji/gift.svg"]) .text-gray-400 { color: var(--ink-soft) !important; }

/* 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 in a little display window of its own,
   under a striped awning, standing on a riser with a price tag, over a
   white panel for its details ── */
.go-win {
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: transform .18s ease, box-shadow .18s ease;
}
.go-win:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.go-win__window {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  padding: 3.2rem 16px 0;
  background: var(--sf-wall);
  border-bottom: 1px solid var(--rule);
}
/* The awning over it */
.go-win__window::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 18px;
  background: var(--awning); z-index: 2;
}
.go-win__glass {
  position: relative; width: 100%;
  display: flex; align-items: flex-end; justify-content: center;
  padding: 1.6rem 12px 0;
  min-height: 11rem;
  background:
    linear-gradient(115deg, transparent 0 22%, rgba(255, 255, 255, .5) 22% 26%, transparent 26% 30%, rgba(255, 255, 255, .35) 30% 31.5%, transparent 31.5%),
    radial-gradient(60% 55% at 50% 0%, var(--win-spot), transparent 70%),
    linear-gradient(180deg, var(--win-wall), var(--win-wall-2));
  box-shadow: inset 0 0 0 5px var(--sf-frame), inset 0 0 0 7px var(--go-brass-mid);
  border-radius: 4px 4px 0 0;
}
.go-win__riser {
  position: relative; display: flex; flex-direction: column; align-items: center;
  width: min(72%, 13rem);
}
.go-win__prize { display: flex; align-items: flex-end; justify-content: center; height: 8rem; position: relative; z-index: 1; }
.go-win__prize img { max-width: 100%; max-height: 100%; object-fit: contain; filter: drop-shadow(0 8px 8px rgba(16, 36, 31, .25)); transition: transform .3s ease; }
html.dark .go-win__prize img { filter: drop-shadow(0 0 14px rgba(255, 214, 128, .3)); }
.go-win:hover .go-win__prize img { transform: translateY(-4px) scale(1.04); }
.go-win__block {
  display: block; width: 100%; height: 26px; margin-top: -2px;
  background: linear-gradient(180deg, #ffffff, #efe6d2);
  border-top: 3px solid var(--go-brass-mid);
  box-shadow: 0 -1px 0 var(--go-brass-lo);
}
html.dark .go-win__block { background: linear-gradient(180deg, #f6efdf, #d8c9a6); }
.go-win__swing {
  position: absolute; top: 2.4rem; right: 10%; width: 46px; height: 34px; z-index: 3;
  background: var(--go-tag-art) center / contain no-repeat;
  transform-origin: 18% 0;
}
[dir="rtl"] .go-win__swing { right: auto; left: 10%; transform: scaleX(-1); }
@media (prefers-reduced-motion: no-preference) {
  .go-win__swing { animation: go-swing 5s ease-in-out 3 forwards; }
  [dir="rtl"] .go-win__swing { animation: none; }
}
.go-win__window > .absolute { z-index: 3; top: 1.6rem; }
.go-win__tag {
  display: inline-flex; align-items: center;
  padding: .22rem .7rem .22rem 1rem;
  font-size: 11px; font-weight: 700; letter-spacing: .06em;
  color: #10241f; background: #fbf7ee;
  clip-path: polygon(8px 0, 100% 0, 100% 100%, 8px 100%, 0 50%);
}
[dir="rtl"] .go-win__tag { padding: .22rem 1rem .22rem .7rem; clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 0 100%); }
.go-win__tag--open { color: #ffffff; background: #c8102e; }
.go-win__tag--done { color: #ffffff; background: #0f7a60; }
.go-win__name { font-family: var(--font-display); font-weight: 400; font-size: 1.32rem; line-height: 1.25; color: var(--ink); overflow-wrap: anywhere; }
.go-win__label { padding-top: .6rem; border-top: 1px dashed var(--rule); }
.go-win__price { font-family: var(--font-ui); font-weight: 700; font-size: clamp(1.1rem, 4vw, 1.3rem); line-height: 1; color: var(--theme-600); overflow-wrap: normal; white-space: nowrap; }
.go-win__btn { min-height: 2.75rem; padding: .55rem .9rem; font-size: .92rem; }
.go-win__cart, .go-win__btn-off {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  border-radius: 10px; font-weight: 700;
}
.go-win__cart { color: var(--ink); background: var(--paper-2); border: 1px solid var(--rule); }
.go-win__cart:hover { border-color: var(--theme-500); color: var(--theme-600); }
.go-win__btn-off { color: var(--ink-soft); background: transparent; border: 1px dashed var(--rule); cursor: not-allowed; }
.go-win__claimed {
  display: flex; align-items: center; justify-content: center; gap: .4rem;
  min-height: 2.75rem; padding: .5rem;
  font-size: .92rem; font-weight: 700;
  color: var(--theme-600); background: var(--gold-soft); border-radius: 10px;
}

/* The hero's scene is drawn by components/home/hero.css, which arrives
   after this sheet; until it does, the bare SVGs would paint at their
   natural size, so the scene waits out of sight. */
.go-hero__scene { visibility: hidden; max-height: 0; overflow: hidden; }

/* ── The shop's materials ──
   Every surface beyond the hero and footer is built from these, so a
   panel anywhere in the shop reads as opening day at a glance:
   - the awning's valance (--awning) along the top of sheets, a narrow
     cousin (--awning-thin) for table heads, tabs and toasts;
   - the scarlet satin ribbon (--ribbon, --ribbon-v) for rules, progress
     bars and the leading edge of a notice, tied off with a bow (--go-bow);
   - polished brass (--brass-grad, --brass-ring) for frames, rods, the
     chosen option and step medallions;
   - the fresh price tag (--go-tag-shape) for badges, chips and the
     current page, with a punched eyelet;
   - the display window (--window) behind products: cream walls, a spot
     from above, a streak of reflection on the glass and a brass sill;
   - enamel shop signs in five colours (--go-c1 emerald, --go-c2 scarlet,
     --go-c3 brass, --go-c4 marine, --go-c5 plum) for icon tiles and
     rotating accents, each with an ink and a soft wash;
   - confetti (--confetti) behind drawings and placeholders. */
:root {
  --go-c1: #0f7a60; --go-c2: #c8102e; --go-c3: #b8862f; --go-c4: #1d5f7a; --go-c5: #7a3b62;
  --go-emerald-ink: #0b4a3e; --go-scarlet-ink: #a00d26; --go-brass-ink: #7a5414; --go-marine-ink: #164d64; --go-plum-ink: #5e2b4b;
  --go-emerald-soft: rgba(15, 122, 96, .1); --go-scarlet-soft: rgba(200, 16, 46, .08); --go-brass-soft: rgba(184, 134, 47, .14); --go-marine-soft: rgba(29, 95, 122, .1); --go-plum-soft: rgba(122, 59, 98, .1);

  /* The tag's outline as a clip-path, the eyelet drawn on top */
  --go-tag-shape: polygon(10px 0, 100% 0, 100% 100%, 10px 100%, 0 50%);
  --go-tag-shape-rtl: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%);
  --go-tag-art: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 34'><path d='M8 1V9' stroke='%2310241f' stroke-opacity='.5' stroke-width='1'/><path d='M8 9L16 3H44V31H16Z' fill='%23ffffff' stroke='%23d4a748' stroke-width='2' stroke-linejoin='round'/><circle cx='15' cy='17' r='2.6' fill='none' stroke='%23d4a748' stroke-width='1.4'/><path d='M22 12H36' stroke='%2310241f' stroke-opacity='.3' stroke-width='1.6' stroke-linecap='round'/><path d='M22 16H31' stroke='%2310241f' stroke-opacity='.3' stroke-width='1.6' stroke-linecap='round'/><circle cx='26' cy='24' r='3.4' fill='%23d4a748'/><path d='M32 24H39' stroke='%23c8102e' stroke-width='3.4' stroke-linecap='round'/></svg>");
  /* A satin bow, 54×30 */
  --go-bow: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 54 30'><defs><radialGradient id='t' cx='.4' cy='.35' r='.8'><stop offset='0' stop-color='%23f2556c'/><stop offset='.55' stop-color='%23c8102e'/><stop offset='1' stop-color='%238e0b20'/></radialGradient></defs><path d='M25 12L16 28L21 26.6L24 30L28 13Z' fill='url(%23t)'/><path d='M29 12L38 28L33 26.6L30 30L26 13Z' fill='url(%23t)'/><path d='M27 11C22 1 6 -2 5 7C4 15 18 15 27 11Z' fill='url(%23t)'/><path d='M27 11C32 1 48 -2 49 7C50 15 36 15 27 11Z' fill='url(%23t)'/><path d='M24 9C19 4 11 3 9 7' fill='none' stroke='%23ffffff' stroke-opacity='.45' stroke-width='1.4' stroke-linecap='round'/><ellipse cx='27' cy='11' rx='4.6' ry='4' fill='%238e0b20'/></svg>") center / contain no-repeat;
  /* A bunch of balloons in the shop's colours */
  --go-balloons: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 168'><defs><radialGradient id='e' cx='.34' cy='.28' r='.8'><stop offset='0' stop-color='%239fe0c6'/><stop offset='.48' stop-color='%2316876a'/><stop offset='1' stop-color='%230b4d3d'/></radialGradient><radialGradient id='g' cx='.34' cy='.28' r='.8'><stop offset='0' stop-color='%23fff3c4'/><stop offset='.48' stop-color='%23e2b54e'/><stop offset='1' stop-color='%2394671c'/></radialGradient><radialGradient id='s' cx='.34' cy='.28' r='.8'><stop offset='0' stop-color='%23ff9aa8'/><stop offset='.48' stop-color='%23d4203d'/><stop offset='1' stop-color='%237e0a1c'/></radialGradient></defs><g fill='none' stroke='%23d4a748' stroke-width='1.2'><path d='M30 66Q44 120 60 166'/><path d='M90 58Q74 120 60 166'/><path d='M60 100Q58 130 60 166'/></g><ellipse cx='30' cy='42' rx='24' ry='27' fill='url(%23e)'/><ellipse cx='90' cy='34' rx='24' ry='27' fill='url(%23g)'/><ellipse cx='60' cy='76' rx='24' ry='27' fill='url(%23s)'/><g fill='%23ffffff' fill-opacity='.6'><ellipse cx='20' cy='30' rx='4' ry='8' transform='rotate(30 20 30)'/><ellipse cx='80' cy='22' rx='4' ry='8' transform='rotate(30 80 22)'/><ellipse cx='50' cy='64' rx='4' ry='8' transform='rotate(30 50 64)'/></g></svg>");
  /* Enamel shop signs in the shop's colours, for icon plates and badges */
  --enamel-emerald: linear-gradient(160deg, rgba(255, 255, 255, .28), rgba(255, 255, 255, 0) 48%), #0f7a60;
  --enamel-scarlet: linear-gradient(160deg, rgba(255, 255, 255, .28), rgba(255, 255, 255, 0) 48%), #c8102e;
  --enamel-brass: linear-gradient(160deg, rgba(255, 255, 255, .32), rgba(255, 255, 255, 0) 48%), #b8862f;
  --enamel-marine: linear-gradient(160deg, rgba(255, 255, 255, .28), rgba(255, 255, 255, 0) 48%), #1d5f7a;
  --enamel-lift: inset 0 0 0 1.5px rgba(255, 255, 255, .3), 0 0 0 2px #d4a748, 0 6px 12px -6px rgba(16, 36, 31, .5);
  --enamel-ink: #ffffff;
  --emerald-bar: linear-gradient(180deg, #2a8a70, #0f5c4c);
  /* The display window behind a product */
  --window:
    linear-gradient(180deg, transparent calc(100% - 7px), #d4a748 calc(100% - 7px), #8a6220 100%),
    linear-gradient(115deg, transparent 0 18%, rgba(255, 255, 255, .55) 18% 22%, transparent 22% 26%, rgba(255, 255, 255, .35) 26% 27.5%, transparent 27.5%),
    radial-gradient(60% 55% at 50% 0%, rgba(255, 236, 190, .9), transparent 70%),
    linear-gradient(180deg, #fffaf0, #f4e6c8);
  /* A brass rail with its fixings, for the foot of a card or sheet */
  --rail-img: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='10' viewBox='0 0 32 10'><rect y='3' width='32' height='4' fill='%23d4a748'/><rect y='3' width='32' height='1.2' fill='%23fff0c2'/><rect y='6' width='32' height='1' fill='%238a6220'/><circle cx='16' cy='5' r='2.4' fill='%23d4a748' stroke='%238a6220' stroke-width='.8'/><circle cx='15.4' cy='4.4' r='.8' fill='%23fff0c2'/></svg>");
  --rail: var(--rail-img) repeat-x left bottom / 32px 10px;
  /* Satin on its side, for a leading edge (repeat-y) */
  --ribbon-v-img: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='24' viewBox='0 0 8 24'><defs><linearGradient id='r' x1='0' x2='1'><stop offset='0' stop-color='%238e0b20'/><stop offset='.3' stop-color='%23c8102e'/><stop offset='.5' stop-color='%23f2556c'/><stop offset='.68' stop-color='%23d4203d'/><stop offset='1' stop-color='%238e0b20'/></linearGradient></defs><rect width='8' height='24' fill='url(%23r)'/></svg>");
  /* A price tag's outline as a mask, for heading dots and list markers */
  --tag-mask-img: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 22'><path fill-rule='evenodd' d='M8 0L16 6V22H0V6ZM8 5.2A1.8 1.8 0 1 0 8 8.8A1.8 1.8 0 1 0 8 5.2Z'/></svg>");
  --tag-mask: var(--tag-mask-img) center / contain no-repeat;
  /* A tick on a little emerald price tag */
  --go-tick: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M7 3H22V21H7L2 12Z' fill='%230f7a60' stroke='%23d4a748' stroke-width='1.6' stroke-linejoin='round'/><circle cx='7' cy='12' r='1.6' fill='%23fbf3e1'/><path d='M10.5 12.4L13.2 15L18.5 8.8' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / contain no-repeat;
  /* The shop's step for the foot of night scenes: a stone kerb and the
     doorstep's brass edge */
  --go-step: linear-gradient(180deg, #d4a748 0 3px, #8a6220 3px 4px, #e6dcc6 4px, #cbbd9f 100%);
  --confetti: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='80' viewBox='0 0 120 80'><g fill-opacity='.36'><rect x='14' y='14' width='7' height='4' transform='rotate(24 17 16)' fill='%230f7a60'/><rect x='62' y='8' width='7' height='4' transform='rotate(-30 65 10)' fill='%23c8102e'/><rect x='98' y='30' width='6' height='4' transform='rotate(60 101 32)' fill='%23b8862f'/><rect x='36' y='50' width='7' height='4' transform='rotate(-14 39 52)' fill='%230f7a60'/><rect x='84' y='62' width='7' height='4' transform='rotate(40 87 64)' fill='%23b8862f'/><rect x='8' y='64' width='6' height='4' transform='rotate(-50 11 66)' fill='%23c8102e'/></g><g fill-opacity='.3'><circle cx='50' cy='30' r='1.6' fill='%23b8862f'/><circle cx='108' cy='58' r='1.6' fill='%23c8102e'/></g></svg>");
}
html.dark {
  --go-step: linear-gradient(180deg, #e6c46e 0 3px, #9a7024 3px 4px, #2a3a33 4px, #17241f 100%);
  /* A small product picture's well after dark: the window's glow turned
     low, warm graphite in the middle, so black goods keep their outline */
  --go-well: radial-gradient(circle at 50% 42%, #5b5038 0%, #3d3b2d 48%, #22302a 100%);
  --enamel-ink: #10241f;
  --enamel-brass: linear-gradient(160deg, rgba(255, 255, 255, .32), rgba(255, 255, 255, 0) 48%), #e6c46e;
  --enamel-lift: inset 0 0 0 1.5px rgba(255, 255, 255, .3), 0 0 0 2px #9a7024, 0 0 14px -4px rgba(255, 214, 128, .35);
  --go-c1: #7fd3b5; --go-c2: #ff6f83; --go-c3: #e6c46e; --go-c4: #8cc8e2; --go-c5: #e0a6c8;
  --go-emerald-ink: #8fe0c2; --go-scarlet-ink: #ff8a9b; --go-brass-ink: #f0d48a; --go-marine-ink: #9fd3ea; --go-plum-ink: #ebb8d6;
  --go-emerald-soft: rgba(127, 211, 181, .12); --go-scarlet-soft: rgba(255, 111, 131, .12); --go-brass-soft: rgba(230, 196, 110, .13); --go-marine-soft: rgba(140, 200, 226, .1); --go-plum-soft: rgba(224, 166, 200, .1);
  --go-tag-art: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 34'><path d='M8 1V9' stroke='%23f6efdf' stroke-opacity='.5' stroke-width='1'/><path d='M8 9L16 3H44V31H16Z' fill='%23fbf7ee' stroke='%23e6c46e' stroke-width='2' stroke-linejoin='round'/><circle cx='15' cy='17' r='2.6' fill='none' stroke='%23e6c46e' stroke-width='1.4'/><path d='M22 12H36' stroke='%2310241f' stroke-opacity='.3' stroke-width='1.6' stroke-linecap='round'/><path d='M22 16H31' stroke='%2310241f' stroke-opacity='.3' stroke-width='1.6' stroke-linecap='round'/><circle cx='26' cy='24' r='3.4' fill='%23d4a748'/><path d='M32 24H39' stroke='%23c8102e' stroke-width='3.4' stroke-linecap='round'/></svg>");
  --window:
    linear-gradient(180deg, transparent calc(100% - 7px), #e6c46e calc(100% - 7px), #9a7024 100%),
    linear-gradient(115deg, transparent 0 18%, rgba(255, 255, 255, .16) 18% 22%, transparent 22% 26%, rgba(255, 255, 255, .1) 26% 27.5%, transparent 27.5%),
    radial-gradient(60% 55% at 50% 0%, rgba(255, 246, 214, .95), transparent 70%),
    linear-gradient(180deg, #ffe3a3, #e9b765);
  --confetti: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='80' viewBox='0 0 120 80'><g fill-opacity='.3'><rect x='14' y='14' width='7' height='4' transform='rotate(24 17 16)' fill='%237fd3b5'/><rect x='62' y='8' width='7' height='4' transform='rotate(-30 65 10)' fill='%23ff6f83'/><rect x='98' y='30' width='6' height='4' transform='rotate(60 101 32)' fill='%23e6c46e'/><rect x='36' y='50' width='7' height='4' transform='rotate(-14 39 52)' fill='%237fd3b5'/><rect x='84' y='62' width='7' height='4' transform='rotate(40 87 64)' fill='%23e6c46e'/></g></svg>");
}

/* ── Game palette (the earn-games arena posts these into each game) ──
   By day a cream board in an emerald well, its pieces rising from cream
   canvas through brass and scarlet to the awning's green; after dark the
   shop's night, the pieces lit warm. */
:root {
  --game-bg: #fbf7ee;
  --game-surface: #e7efe9;
  --game-surface-2: #ffffff;
  --game-ink: #10241f;
  --game-muted: #687a72;
  --game-accent: #0f5c4c;
  --game-accent-ink: #ffffff;
  --game-good: #0f7a60;
  --game-bad: #c8102e;
  --game-tile-1: #fbf3e1;
  --game-tile-2: #f1e2b8;
  --game-tile-3: #e6c46e;
  --game-tile-4: #c9d9a8;
  --game-tile-5: #66b99c;
  --game-tile-6: #f2556c;
  --game-tile-7: #c8102e;
  --game-tile-8: #0f5c4c;
  --game-radius: 10px;
  --game-font: 'Montserrat', system-ui, sans-serif;
  --game-font-css: "/assets/themes/grand-opening/assets/fonts/fonts.css";
  --game-pattern: var(--confetti);
  --game-arena-screen: #fbf7ee;
  --game-arena-coins: #8a6220;
  --game-arena-win: #0f7a60;
  --game-arena-danger: #c8102e;
}
html.dark {
  --game-bg: #0b1a16;
  --game-surface: #11241f;
  --game-surface-2: #19302a;
  --game-ink: #f6efdf;
  --game-muted: #a3b2aa;
  --game-accent: #e6c46e;
  --game-accent-ink: #10241f;
  --game-good: #7fd3b5;
  --game-bad: #ff6f83;
  --game-tile-1: #24382f;
  --game-tile-2: #3a4a2c;
  --game-tile-3: #6e5a26;
  --game-tile-4: #2f5a3e;
  --game-tile-5: #13705a;
  --game-tile-6: #8e2034;
  --game-tile-7: #d4203d;
  --game-tile-8: #e6c46e;
  --game-arena-screen: #0b1a16;
  --game-arena-coins: #e6c46e;
  --game-arena-win: #7fd3b5;
  --game-arena-danger: #ff6f83;
}

/* Share row: the theme's black-button rule dressed X as the main button, so
   it read as the picked one; it keeps its own brand black like its
   neighbours keep theirs. */
html body #px-spa-content a.bg-black.text-white.rounded-xl[href*="/intent/"] {
  background: #000 !important; color: #fff !important; border-radius: .75rem !important;
  box-shadow: none !important; border: 0 !important; font-family: inherit;
}
html.dark body #px-spa-content a.bg-black.text-white.rounded-xl[href*="/intent/"] { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22) !important; }

/* 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: #0f7b60; --px-warn: #b45309; --px-crit: #c6102e; --px-info: #2362eb; }
html.dark:root { --px-good: #7ed3b4; --px-warn: #fbbf23; --px-crit: #ffa3b0; --px-info: #a2bcf6; }

/* Changing language, the scene (grand-opening.js): the ribbon across the
   shop doors is cut, the fascia turns from the old name to the new flag and
   code and the new name lights up behind the glass; after the reload the
   doors swing open onto it and the confetti flies. The shopfront is the
   same on both pages, so the reload never shows. */
.go-lang-stage { background: color-mix(in srgb, var(--theme-900, #052a23) 55%, transparent); }
.go-lang-shop {
  position: relative; width: min(560px, 100%); box-sizing: border-box; padding: 0 0 18px; overflow: hidden;
  color: var(--ink, #10241f); background: var(--paper, #fbf7ee); border-radius: var(--radius, 14px);
  box-shadow: 0 34px 70px -28px rgba(0, 0, 0, .6); font-family: var(--font-ui, system-ui, sans-serif);
}
.go-lang-shop::before {
  content: ""; display: block; height: 18px;
  background:
    radial-gradient(10px 8px at 10px 18px, var(--paper, #fbf7ee) 98%, transparent) repeat-x 0 0 / 20px 18px,
    repeating-linear-gradient(90deg, var(--aw-a, #0f5c4c) 0 20px, var(--aw-b, #fbf3e1) 20px 40px);
}
.go-lang-sign {
  display: grid; width: calc(100% - 40px); max-width: 420px; box-sizing: border-box; margin: 14px auto 14px; padding: 8px 14px;
  border: 3px solid var(--go-brass-mid, #d4a748); border-radius: 6px; text-align: center;
  background: var(--sf-board, #0f5c4c); color: var(--go-brass-hi, #fff0c2);
  font: 400 clamp(20px, 6vw, 28px)/1.2 var(--font-display, Georgia, serif);
  box-shadow: inset 0 0 0 1px var(--sf-board-lo, #083b31), 0 6px 14px -8px rgba(0, 0, 0, .5);
}
.go-lang-sign > span { grid-area: 1 / 1; display: flex; align-items: center; justify-content: center; gap: 10px; overflow-wrap: anywhere; min-width: 0; }
.go-lang-sign-old { opacity: 0; transform: perspective(400px) rotateX(90deg); }
.go-lang-sign-new { color: var(--go-brass-mid, #d4a748); }
.go-lang-sign-new b { color: var(--go-brass-hi, #fff0c2); letter-spacing: .08em; }
.go-lang-sign img { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px var(--go-brass-mid, #d4a748); }
.go-lang-front { display: flex; align-items: flex-end; justify-content: center; gap: 12px; padding: 0 16px; }
.go-lang-pot { flex: 0 0 auto; font-size: 34px; line-height: 1; color: var(--go-scarlet, #c8102e); text-shadow: 0 10px 0 var(--leaf, #2f7d4f); padding-bottom: 12px; }
.go-lang-door {
  position: relative; flex: 1 1 auto; max-width: 340px; height: 210px; box-sizing: border-box; perspective: 800px;
  border: 6px solid var(--sf-frame, #0f5c4c); border-bottom: 0; border-radius: 8px 8px 0 0;
  background: linear-gradient(180deg, var(--win-wall, #fff8ea), var(--win-wall-2, #f4e6c8));
}
.go-lang-inside {
  position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  padding: 0 16px; text-align: center; color: #10241f;
}
.go-lang-inside img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px #fff; }
.go-lang-name { max-width: 100%; font: 400 clamp(28px, 9vw, 46px)/1.1 var(--font-display, Georgia, serif); overflow-wrap: anywhere; }
.go-lang-leaf {
  position: absolute; top: 0; bottom: 0; z-index: 2; width: 50%;
  background: linear-gradient(115deg, rgba(255, 255, 255, .45), rgba(255, 255, 255, .1) 45%, rgba(255, 255, 255, .32));
  box-shadow: inset 0 0 0 5px var(--sf-frame, #0f5c4c);
}
.go-lang-leaf::after {
  content: ""; position: absolute; top: 44%; width: 5px; height: 34px; border-radius: 3px;
  background: linear-gradient(90deg, var(--go-brass-lo, #8a6220), var(--go-brass-hi, #fff0c2), var(--go-brass-mid, #d4a748));
}
.go-lang-leaf-l { left: 0; transform-origin: left center; }
.go-lang-leaf-l::after { right: 12px; }
.go-lang-leaf-r { right: 0; transform-origin: right center; }
.go-lang-leaf-r::after { left: 12px; }
.go-lang-rib {
  position: absolute; top: 56%; z-index: 4; width: calc(50% + 12px); height: 14px; margin-top: -7px;
  background: linear-gradient(180deg, var(--go-scarlet-hi, #f2556c), var(--go-scarlet, #c8102e) 45%, var(--go-scarlet-lo, #8e0b20));
  box-shadow: 0 3px 6px -2px rgba(0, 0, 0, .35);
}
.go-lang-rib-l { left: -12px; transform-origin: left center; transform: rotate(24deg) scaleX(.8); }
.go-lang-rib-r { right: -12px; transform-origin: right center; transform: rotate(-24deg) scaleX(.8); }
.go-lang-bow {
  position: absolute; left: 50%; top: 56%; z-index: 5; width: 12px; height: 14px; margin: -7px 0 0 -6px; border-radius: 3px;
  background: var(--go-scarlet-lo, #8e0b20); opacity: 0; transform: translateY(60px) rotate(30deg);
}
.go-lang-bow::before, .go-lang-bow::after {
  content: ""; position: absolute; top: -5px; width: 18px; height: 14px; border: 5px solid var(--go-scarlet, #c8102e); border-radius: 50%;
}
.go-lang-bow::before { right: 8px; transform: rotate(-18deg); }
.go-lang-bow::after { left: 8px; transform: rotate(18deg); }
.go-lang-scissors {
  position: absolute; left: 50%; top: 56%; z-index: 6; width: 40px; height: 40px; margin: -20px 0 0 -20px;
  display: grid; place-items: center; font-size: 38px; line-height: 1; color: var(--go-brass-mid, #d4a748);
  text-shadow: 0 2px 0 var(--go-brass-lo, #8a6220), 0 6px 10px rgba(0, 0, 0, .3);
  opacity: 0; transform: translate(40px, -60px) rotate(90deg) scale(1);
}
.go-lang-confetti { position: absolute; left: 50%; top: 45%; z-index: 7; width: 0; height: 0; }
.go-lang-confetti i { position: absolute; left: -4px; top: -6px; width: 8px; height: 12px; border-radius: 2px; background: var(--go-scarlet, #c8102e); opacity: 0; }
.go-lang-confetti i:nth-child(4n+2) { background: var(--go-brass-mid, #d4a748); }
.go-lang-confetti i:nth-child(4n+3) { background: var(--go-emerald-hi, #2a8a70); border-radius: 50%; }
.go-lang-confetti i:nth-child(4n) { background: var(--go-brass-hi, #fff0c2); }
.go-lang-confetti i:nth-child(1)  { --x: -130px; --y: -100px; --r: 220deg; }
.go-lang-confetti i:nth-child(2)  { --x: -80px;  --y: -130px; --r: -180deg; }
.go-lang-confetti i:nth-child(3)  { --x: -25px;  --y: -150px; --r: 260deg; }
.go-lang-confetti i:nth-child(4)  { --x: 30px;   --y: -145px; --r: -240deg; }
.go-lang-confetti i:nth-child(5)  { --x: 85px;   --y: -125px; --r: 200deg; }
.go-lang-confetti i:nth-child(6)  { --x: 130px;  --y: -95px;  --r: -280deg; }
.go-lang-confetti i:nth-child(7)  { --x: -150px; --y: -20px;  --r: 160deg; }
.go-lang-confetti i:nth-child(8)  { --x: 150px;  --y: -15px;  --r: -160deg; }
.go-lang-confetti i:nth-child(9)  { --x: -110px; --y: 50px;   --r: 300deg; }
.go-lang-confetti i:nth-child(10) { --x: 115px;  --y: 55px;   --r: -300deg; }
.go-lang-confetti i:nth-child(11) { --x: -55px;  --y: -90px;  --r: 120deg; }
.go-lang-confetti i:nth-child(12) { --x: 60px;   --y: -85px;  --r: -120deg; }

/* Out: the scissors cut the ribbon, the fascia turns, the window lights. */
.px-lang-stage-out .go-lang-shop { animation: go-lang-shop-in .32s cubic-bezier(.2, .8, .3, 1.1) both; }
.px-lang-stage-out .go-lang-scissors { animation: go-lang-snip .62s ease-in-out .2s both; }
.px-lang-stage-out .go-lang-rib { animation: go-lang-cut .3s cubic-bezier(.3, 1.4, .5, 1) .6s both; }
.px-lang-stage-out .go-lang-bow { animation: go-lang-drop .35s ease-in .6s both; }
.px-lang-stage-out .go-lang-sign-old { animation: go-lang-flip-off .2s ease-in .7s both; }
.px-lang-stage-out .go-lang-sign-new { animation: go-lang-flip-on .22s ease-out .86s both; }
.px-lang-stage-out .go-lang-inside { animation: go-lang-light .3s ease-out .78s both; }
/* In: it starts where out ended; the doors swing open onto the new name. */
.px-lang-stage-in .go-lang-rib { animation: go-lang-fade .2s ease .1s both; }
.px-lang-stage-in .go-lang-leaf-l { animation: go-lang-open-l .6s cubic-bezier(.3, .6, .3, 1) .15s both; }
.px-lang-stage-in .go-lang-leaf-r { animation: go-lang-open-r .6s cubic-bezier(.3, .6, .3, 1) .15s both; }
.px-lang-stage-in .go-lang-name { animation: go-lang-hello .4s ease-out .5s both; }
.px-lang-stage-in .go-lang-confetti i { animation: go-lang-pop .75s cubic-bezier(.15, .7, .4, 1) .35s both; }
.px-lang-stage-in .go-lang-shop { animation: go-lang-shop-out .26s ease-in 1s both; }
@keyframes go-lang-shop-in { from { transform: translateY(40px); opacity: 0; } }
@keyframes go-lang-shop-out { to { transform: translateY(26px); opacity: 0; } }
@keyframes go-lang-snip {
  0%   { opacity: 0; transform: translate(60px, -140px) rotate(90deg) scale(1); }
  30%  { opacity: 1; transform: translate(0, -34px) rotate(90deg) scale(1); }
  55%  { opacity: 1; transform: translate(0, -6px) rotate(90deg) scale(1); }
  65%  { opacity: 1; transform: translate(0, -6px) rotate(90deg) scale(.82, 1); }
  75%  { opacity: 1; transform: translate(0, -6px) rotate(90deg) scale(1); }
  100% { opacity: 0; transform: translate(40px, -60px) rotate(90deg) scale(1); }
}
@keyframes go-lang-cut { from { transform: none; } }
@keyframes go-lang-drop { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(60px) rotate(30deg); } }
@keyframes go-lang-flip-off { from { opacity: 1; transform: perspective(400px) rotateX(0deg); } to { opacity: 0; transform: perspective(400px) rotateX(90deg); } }
@keyframes go-lang-flip-on { from { opacity: 0; transform: perspective(400px) rotateX(-90deg); } to { opacity: 1; transform: perspective(400px) rotateX(0deg); } }
@keyframes go-lang-light { from { opacity: .5; filter: brightness(.6) saturate(.4); } to { opacity: 1; filter: none; } }
@keyframes go-lang-fade { to { opacity: 0; } }
@keyframes go-lang-open-l { to { transform: rotateY(80deg); } }
@keyframes go-lang-open-r { to { transform: rotateY(-80deg); } }
@keyframes go-lang-hello { 50% { transform: scale(1.08); } }
@keyframes go-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) {
  .go-lang-pot { display: none; }
  .go-lang-front { padding: 0 14px; }
  .go-lang-sign { width: calc(100% - 28px); }
  .go-lang-door { height: 190px; }
}

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

/* The voucher link in the top-up window: the accent a little deeper on the
   window's panel, so it reads at 4.5:1. */
html:not(.dark) body #addMoneyModal [data-px-call="giftCards.openVoucher"] { color: #0e755c !important; }

/* A full-width button on a phone wraps a long label ("Andere Auktionen
   durchstöbern") rather than running past its own edge. */
@media (max-width: 639px) {
  html body :is(a, button).ed-btn-primary.w-full { white-space: normal; text-wrap: balance; text-align: center; }
}

/* Windows (wallet, sign-out and the plugins' windows) sit on their own panel,
   so the secondary text, accent links and buttons in them take the deeper
   shades below to read at 4.5:1 there; the page around keeps its own. */
html:not(.dark) [role="dialog"] {
  --ink-soft: #607069;
}
/* rev 868fe5109c9f2a2b */