/* ============================================================
   STORE BIRTHDAY THEME — the shop's own birthday party.
   Same class surface as editorial/theme.css, so shared header,
   footer, drawer and component classes stay styled.

   Built from a patisserie birthday table: a grand tiered cake of
   mint, blush and vanilla under a chocolate ganache drip, number
   candles, presents wrapped in polka dots and stripes with satin
   bows, balloons on curling ribbons and a few sprinkles. The
   border language is a strawberry satin ribbon strung with sugar
   pearls. Buttercream, strawberry and mint by day, chocolate for
   ink; after dark the party after the lights go down, lit by the
   candles on the cake.

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

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

  --paper:        #fff8f1;
  --paper-2:      #ffffff;
  --paper-3:      #fbeee6;
  --ink:          #3b2018;
  --ink-2:        #5e3d32;
  --ink-soft:     #85665a;
  --rule:         rgba(59, 32, 24, 0.13);
  --rule-soft:    rgba(59, 32, 24, 0.07);
  --radius:       18px;
  --radius-sm:    10px;
  --shadow:       0 1px 2px rgba(59, 32, 24, .06), 0 6px 16px -8px rgba(59, 32, 24, .22);
  --shadow-md:    0 2px 4px rgba(59, 32, 24, .06), 0 18px 34px -16px rgba(59, 32, 24, .36);

  /* Strawberry */
  --theme-50:  #fff0f4;
  --theme-100: #ffdce6;
  --theme-200: #ffb8cc;
  --theme-300: #f98aa9;
  --theme-400: #ee5d87;
  --theme-500: #d4386a;
  --theme-600: #c22d5c;
  --theme-700: #a2224b;
  --theme-800: #80193b;
  --theme-900: #5f122c;
  --theme-500-rgb: 212, 56, 106;
  --theme-600-rgb: 194, 45, 92;

  /* The sugar: icing colours, pearls, gilt and ganache */
  --sb-strawberry: #d93d6c; --sb-blush: #f8c4d3; --sb-mint: #bfe8d8; --sb-mint-deep: #2f8f73;
  --sb-lemon: #ffe08a; --sb-cream: #fff6ea; --sb-lilac: #c9b6f0; --sb-sky: #9fd3f2;
  --sb-gold: #b8862f; --sb-cocoa: #3b2018; --sb-flame: #ffb648;

  /* The cake, the presents and the balloons read these (bday_*_svg()) */
  --k1-lo: #84c7ae; --k1-mid: #bde6d6; --k1-hi: #effaf5; --k1-top: #d8f1e7; --k1-swag: #f2a2bb;
  --k2-lo: #e48ca8; --k2-mid: #f7c2d2; --k2-hi: #fde9f0; --k2-top: #fbd7e2;
  --k2-ribbon: #d93d6c; --k2-ribbon-hi: #ff9cbb; --k2-bow: #e9517f; --k2-bow-lo: #b8274f;
  --k3-lo: #e2c8a4; --k3-mid: #f6e6cf; --k3-hi: #fffbf4;
  --ganache: #4b2418; --ganache-top: #5c2d1f; --ganache-hi: #a0604a;
  --gilt-lo: #a77a2b; --gilt-mid: #e1bb66; --gilt-hi: #fff0c4; --gilt-top: #f2dba0;
  --pearl: #f8f1e7; --pearl-lo: #d9c7b4;
  --mac-a: #bde6d6; --mac-a-lo: #7fc2a8; --mac-b: #f6b5c8; --mac-b-lo: #de86a2; --mac-cream: #fff6ea; --berry: #c8264f;

  /* The party night: footer, winners, splash and login in both modes */
  --night:   #1d1015;
  --night-2: #2a1820;
  --night-3: #3a2430;
  --on-night: #fbefe4;
  --on-night-soft: rgba(251, 239, 228, .76);

  /* Names other themes' shared markup reaches for */
  --gold:       #b8862f;
  --gold-2:     #e1bb66;
  --gold-soft:  rgba(217, 61, 108, 0.08);
  --gold-ink:   #3b2018;
  --felt:       #1d1015;
  --felt-2:     #2a1820;
  --on-felt:    #fbefe4;
  --on-felt-soft: rgba(251, 239, 228, 0.78);
  --peacock:    #2f8f73;
  --peacock-soft: rgba(47, 143, 115, 0.12);
  --red:        #c22d5c;
  --red-soft:   rgba(217, 61, 108, 0.09);
  --rose:       #d93d6c;
  --rose-soft:  rgba(217, 61, 108, 0.08);

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

  /* Buttons: strawberry with white lettering by day; after dark the warm
     light of the candles */
  --btn-bg:       #d73364;
  --btn-bg-hover: #de275f;
  --btn-ink:      #ffffff;
  --btn-shadow:   0 2px 0 #9c1f47, 0 10px 20px -10px rgba(217, 61, 108, .7);
  --btn-shadow-hover: 0 3px 0 #9c1f47, 0 14px 24px -10px rgba(217, 61, 108, .75);

  /* A strawberry satin ribbon strung with sugar pearls, gold dragées
     between them: the theme's band wherever a section needs an edge */
  --trim: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='14' viewBox='0 0 24 14'><defs><radialGradient id='p' cx='.36' cy='.34' r='.7'><stop offset='0' stop-color='%23ffffff'/><stop offset='.6' stop-color='%23fbf1e4'/><stop offset='1' stop-color='%23d8c3ac'/></radialGradient></defs><rect width='24' height='14' fill='%23d93d6c'/><rect y='1.2' width='24' height='.9' fill='%23ff9cbb'/><rect y='11.9' width='24' height='.9' fill='%23a2224b'/><circle cx='6' cy='7' r='3.6' fill='url(%23p)'/><circle cx='18' cy='7' r='3.6' fill='url(%23p)'/><circle cx='0' cy='7' r='1.3' fill='%23f2cf7c'/><circle cx='12' cy='7' r='1.3' fill='%23f2cf7c'/><circle cx='24' cy='7' r='1.3' fill='%23f2cf7c'/></svg>") repeat-x left center / 24px 14px;
  --trim-night: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='14' viewBox='0 0 24 14'><defs><radialGradient id='p' cx='.36' cy='.34' r='.7'><stop offset='0' stop-color='%23fff8ec'/><stop offset='.6' stop-color='%23f2dcc0'/><stop offset='1' stop-color='%23a88e72'/></radialGradient></defs><rect width='24' height='14' fill='%238e2349'/><rect y='1.2' width='24' height='.9' fill='%23d65f86'/><rect y='11.9' width='24' height='.9' fill='%23611534'/><circle cx='6' cy='7' r='3.6' fill='url(%23p)'/><circle cx='18' cy='7' r='3.6' fill='url(%23p)'/><circle cx='0' cy='7' r='1.3' fill='%23ffc06a'/><circle cx='12' cy='7' r='1.3' fill='%23ffc06a'/><circle cx='24' cy='7' r='1.3' fill='%23ffc06a'/></svg>") repeat-x left center / 24px 14px;

  /* A few sprinkles, very faint, on the page */
  --sprinkles-faint: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='320' viewBox='0 0 320 320'><g stroke-linecap='round' stroke-width='3.4' stroke-opacity='.13'><path d='M40 52l9 -5' stroke='%23d93d6c'/><path d='M212 38l4 9' stroke='%232f8f73'/><path d='M270 150l-9 4' stroke='%23d9a23a'/><path d='M120 196l7 7' stroke='%238d6cd0'/><path d='M60 270l9 2' stroke='%232f8f73'/><path d='M248 268l-4 9' stroke='%23d93d6c'/><path d='M168 112l8 -4' stroke='%233a9ad0'/></g><g fill-opacity='.12'><circle cx='150' cy='26' r='2.2' fill='%23b8862f'/><circle cx='22' cy='160' r='2' fill='%23d93d6c'/><circle cx='296' cy='224' r='2.2' fill='%23b8862f'/></g></svg>");

  /* The party night behind the footer, winners, splash and login: the
     candlelight from the cake pooling at its foot, a pink glow from the
     balloons above, and soft out-of-focus points of light */
  --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='%23ffc06a'><circle cx='40' cy='60' r='9' fill-opacity='.12'/><circle cx='186' cy='150' r='14' fill-opacity='.08'/><circle cx='330' cy='40' r='7' fill-opacity='.16'/><circle cx='392' cy='170' r='11' fill-opacity='.1'/></g><g fill='%23ff8fb1'><circle cx='110' cy='190' r='8' fill-opacity='.1'/><circle cx='262' cy='96' r='10' fill-opacity='.09'/></g><g fill='%23fbefe4'><circle cx='150' cy='30' r='1.6' fill-opacity='.5'/><circle cx='300' cy='200' r='1.4' fill-opacity='.4'/><circle cx='12' cy='120' r='1.2' fill-opacity='.45'/></g></svg>");
  --night-bg:
    radial-gradient(640px 240px at 50% 112%, rgba(255, 182, 90, .3), transparent 70%),
    radial-gradient(420px 240px at 92% -60px, rgba(242, 107, 147, .22), transparent 70%),
    radial-gradient(380px 220px at 6% -40px, rgba(140, 210, 185, .14), transparent 70%),
    linear-gradient(180deg, #1a0e13 0%, #26151c 58%, #331c25 100%);

  /* A balloon on a curl of ribbon, 40×112, and a row of them */
  --balloon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 112'><defs><radialGradient id='b' cx='.36' cy='.3' r='.78'><stop offset='0' stop-color='%23ffd3e0'/><stop offset='.45' stop-color='%23f26b93'/><stop offset='1' stop-color='%23b8325b'/></radialGradient></defs><path d='M20 52C18 62 26 68 22 78C18 88 16 94 20 104C22 108 20 110 20 112' fill='none' stroke='%23e1bb66' stroke-width='1.2'/><path d='M20 1C31 1 39 10 39 22C39 37 28 48 20 49C12 48 1 37 1 22C1 10 9 1 20 1Z' fill='url(%23b)'/><path d='M20 48L17 53H23Z' fill='%23b8325b'/><ellipse cx='13' cy='13' rx='3.6' ry='6.8' transform='rotate(32 13 13)' fill='%23ffffff' fill-opacity='.55'/></svg>");
  --balloon-mint: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 112'><defs><radialGradient id='b' cx='.36' cy='.3' r='.78'><stop offset='0' stop-color='%23e9fbf3'/><stop offset='.45' stop-color='%2378cdb0'/><stop offset='1' stop-color='%232f8f73'/></radialGradient></defs><path d='M20 52C22 62 14 68 18 78C22 88 24 94 20 104C18 108 20 110 20 112' fill='none' stroke='%23e1bb66' stroke-width='1.2'/><path d='M20 1C31 1 39 10 39 22C39 37 28 48 20 49C12 48 1 37 1 22C1 10 9 1 20 1Z' fill='url(%23b)'/><path d='M20 48L17 53H23Z' fill='%232f8f73'/><ellipse cx='13' cy='13' rx='3.6' ry='6.8' transform='rotate(32 13 13)' fill='%23ffffff' fill-opacity='.55'/></svg>");
  --balloon-gold: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 112'><defs><radialGradient id='b' cx='.36' cy='.3' r='.78'><stop offset='0' stop-color='%23fff6d6'/><stop offset='.45' stop-color='%23f2c35c'/><stop offset='1' stop-color='%23a77a2b'/></radialGradient></defs><path d='M20 52C18 62 26 68 22 78C18 88 16 94 20 104C22 108 20 110 20 112' fill='none' stroke='%23e1bb66' stroke-width='1.2'/><path d='M20 1C31 1 39 10 39 22C39 37 28 48 20 49C12 48 1 37 1 22C1 10 9 1 20 1Z' fill='url(%23b)'/><path d='M20 48L17 53H23Z' fill='%23a77a2b'/><ellipse cx='13' cy='13' rx='3.6' ry='6.8' transform='rotate(32 13 13)' fill='%23ffffff' fill-opacity='.6'/></svg>");

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

html.dark {
  --paper:        #1a1013;
  --paper-2:      #24161b;
  --paper-3:      #312028;
  --ink:          #fbefe4;
  --ink-2:        #ead8ca;
  --ink-soft:     #b89d92;
  --rule:         rgba(251, 239, 228, 0.13);
  --rule-soft:    rgba(251, 239, 228, 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);

  /* Candlelight */
  --theme-50:  #2c1d1d;
  --theme-100: #3a2722;
  --theme-200: #6a4a2a;
  --theme-300: #ffd9a3;
  --theme-400: #ffcb86;
  --theme-500: #ffc06a;
  --theme-600: #ffc77b;
  --theme-700: #ffd699;
  --theme-800: #ffe6c2;
  --theme-900: #fff4e2;
  --theme-500-rgb: 255, 192, 106;
  --theme-600-rgb: 255, 199, 123;

  /* The cake by candlelight: the same icing, deeper, warmed from above */
  --k1-lo: #2c5649; --k1-mid: #4f8a77; --k1-hi: #8cc4ae; --k1-top: #a8d6c2; --k1-swag: #c46a88;
  --k2-lo: #7c3a50; --k2-mid: #b56a84; --k2-hi: #e6a6ba; --k2-top: #f2c3cf;
  --k2-ribbon: #a8284f; --k2-ribbon-hi: #e3729a; --k2-bow: #c23b65; --k2-bow-lo: #7e1c3c;
  --k3-lo: #8a6b4c; --k3-mid: #cdb08a; --k3-hi: #f6e1c2;
  --ganache: #2d140d; --ganache-top: #3e1d13; --ganache-hi: #b8774f;
  --gilt-lo: #7d5a1f; --gilt-mid: #c79a45; --gilt-hi: #ffe2a0; --gilt-top: #dcb86a;
  --pearl: #f1dcc0; --pearl-lo: #8f775e;
  --mac-a: #7fb9a2; --mac-a-lo: #4f8a77; --mac-b: #d48aa2; --mac-b-lo: #a65b76; --mac-cream: #f1dcc0; --berry: #a51d43;

  --gold:       #ffc06a;
  --gold-2:     #ffd699;
  --gold-soft:  rgba(255, 192, 106, 0.12);
  --felt:       #140a0e;
  --felt-2:     #24161b;
  --peacock:    #7fd3b5;
  --peacock-soft: rgba(127, 211, 181, 0.13);
  --red:        #ff8fb1;
  --red-soft:   rgba(255, 143, 177, 0.13);
  --rose:       #ff8fb1;
  --rose-soft:  rgba(255, 192, 106, 0.12);

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

  --btn-bg:       #ffc06a;
  --btn-bg-hover: #ffcd85;
  --btn-ink:      #241016;
  --btn-shadow:   0 2px 0 #b07722, 0 10px 26px -10px rgba(255, 192, 106, .5);
  --btn-shadow-hover: 0 3px 0 #b07722, 0 14px 30px -10px rgba(255, 192, 106, .65);

  --trim: var(--trim-night);
  --sprinkles-faint: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='320' viewBox='0 0 320 320'><g stroke-linecap='round' stroke-width='3.4' stroke-opacity='.09'><path d='M40 52l9 -5' stroke='%23ff8fb1'/><path d='M212 38l4 9' stroke='%237fd3b5'/><path d='M270 150l-9 4' stroke='%23ffc06a'/><path d='M120 196l7 7' stroke='%23c9b6f0'/><path d='M60 270l9 2' stroke='%237fd3b5'/><path d='M248 268l-4 9' stroke='%23ff8fb1'/></g><g fill='%23ffc06a' fill-opacity='.1'><circle cx='150' cy='26' r='2.2'/><circle cx='296' cy='224' r='2.2'/></g></svg>");
  --page-bg:
    radial-gradient(900px 420px at 80% -160px, rgba(255, 182, 90, 0.08), transparent 70%) no-repeat,
    radial-gradient(900px 420px at 8% -140px, rgba(242, 107, 147, 0.07), transparent 70%) no-repeat,
    var(--sprinkles-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: 700;
  letter-spacing: -.005em;
  /* Playfair's default figures are old-style; prices and counts want
     them lined up */
  font-variant-numeric: lining-nums;
}
.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: 600; letter-spacing: 0; }

::selection { background: #ffd3e0; color: #3b2018; }

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

/* A balloon on its ribbon: section eyebrows wear it */
html .section-eyebrow::before, .sb-balloon-ico {
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 26'><path d='M8 1C12.4 1 15 4.4 15 8.6C15 13.6 11 17.4 8 17.6C5 17.4 1 13.6 1 8.6C1 4.4 3.6 1 8 1Z' fill='%23d93d6c'/><path d='M8 17.4L6.4 19.4H9.6Z' fill='%23d93d6c'/><path d='M8 19.4C7 21 9 22.6 8 25' fill='none' stroke='%23b8862f' stroke-width='1.1'/><ellipse cx='5.4' cy='5.6' rx='1.5' ry='2.8' transform='rotate(30 5.4 5.6)' fill='%23ffffff' fill-opacity='.6'/></svg>") center / contain no-repeat;
}
html.dark .section-eyebrow::before, html.dark .sb-balloon-ico {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 26'><path d='M8 1C12.4 1 15 4.4 15 8.6C15 13.6 11 17.4 8 17.6C5 17.4 1 13.6 1 8.6C1 4.4 3.6 1 8 1Z' fill='%23ff8fb1'/><path d='M8 17.4L6.4 19.4H9.6Z' fill='%23ff8fb1'/><path d='M8 19.4C7 21 9 22.6 8 25' fill='none' stroke='%23ffc06a' stroke-width='1.1'/><ellipse cx='5.4' cy='5.6' rx='1.5' ry='2.8' transform='rotate(30 5.4 5.6)' fill='%23ffffff' fill-opacity='.6'/></svg>");
}
.sb-balloon-ico { display: inline-block; flex-shrink: 0; width: 11px; height: 18px; }

/* A lit birthday candle, striped: the hero kicker and the season chip */
.sb-candle-ico {
  display: inline-block; flex-shrink: 0; width: 12px; height: 20px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'><defs><radialGradient id='f' cx='.5' cy='.62' r='.6'><stop offset='0' stop-color='%23fffbe8'/><stop offset='.45' stop-color='%23ffd36b'/><stop offset='1' stop-color='%23f08a2c'/></radialGradient><clipPath id='c'><rect x='3.5' y='8' width='5' height='12' rx='1.2'/></clipPath></defs><path d='M6 0.6C7.6 2.8 8.6 4.2 8.6 5.4C8.6 6.9 7.4 7.8 6 7.8C4.6 7.8 3.4 6.9 3.4 5.4C3.4 4.2 4.4 2.8 6 0.6Z' fill='url(%23f)'/><path d='M6 7.8V8.6' stroke='%233b2018' stroke-width='.8'/><g clip-path='url(%23c)'><rect x='3.5' y='8' width='5' height='12' fill='%23fff6ea'/><path d='M2 9L10 6V8.4L2 11.4ZM2 13L10 10V12.4L2 15.4ZM2 17L10 14V16.4L2 19.4Z' fill='%23d93d6c'/></g></svg>") center / contain no-repeat;
}

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

.btn-view-all {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-family: var(--font-ui);
  font-size: 0.92rem; 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-image: var(--sprinkles-faint); }

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

[data-sb-phase][hidden] { display: none !important; }
[dir="rtl"] .sb-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(251, 239, 228, 0.88); }
.hdr-strip a:hover, .hdr-strip button:hover { color: #ffcf8a; }

/* The pearl-strung ribbon under the main header bar and wherever a
   section needs an edge */
.sb-band { height: 14px; background: var(--trim); }
.sb-band--night { background: var(--trim-night); }

/* The birthday chip in the status strip */
.sb-strip-chip { display: inline-flex; align-items: center; gap: .45rem; font-weight: 600; letter-spacing: .06em; color: #ffcf8a; }
.sb-strip-chip .sb-candle-ico { width: 10px; height: 17px; }
/* The desktop strip shares its line with the menu; the date gives way to
   the chip below 1440px. Where a long shop name or language still runs
   out of room, store-birthday.js marks the strip .sb-strip-tight and the
   chip keeps only its short form. */
@media (min-width: 1024px) and (max-width: 1439px) { .hdr-strip .sb-strip-date { display: none; } }
.sb-strip-chip__short, .sb-strip-tight .sb-strip-chip__full { display: none; }
.sb-strip-tight .sb-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: 600;
  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.94rem; 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.96rem; 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.6rem;
  white-space: nowrap;
  font-family: var(--font-ui); font-size: 1.02rem; font-weight: 600; letter-spacing: .01em;
  color: var(--btn-ink);
  background: var(--btn-bg);
  border: 0;
  border-radius: 999px;
  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: #ffc06a; color: #241016; box-shadow: 0 2px 0 #b07722; }
.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: 1rem; font-weight: 600;
  color: var(--ink); background: var(--paper-2);
  border: 1px solid var(--rule); border-radius: 999px;
  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: #fbefe4;
  border: 1px solid rgba(255, 192, 106, .3); border-radius: var(--radius);
  overflow: hidden;
}
.ed-plan-featured::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 14px;
  background: var(--trim-night); pointer-events: none;
}
.ed-plan-hairline { border-color: var(--rule); }
.ed-plan-featured .ed-plan-hairline { border-color: rgba(251, 239, 228, .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(251, 239, 228, 0.88); text-decoration: none; transition: color 0.16s ease; }
.ed-topnav-link:hover, .ed-topnav-link.active { color: #ffcf8a; }

/* ── Drawer ── */
.drawer-section-label {
  display: flex; align-items: center; gap: 0.6rem;
  font-family: var(--font-ui); font-size: 11px; font-weight: 600;
  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: 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: 999px; 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(255, 248, 241, 0.95);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--rule);
}
html.dark .mobile-glass-header { background: rgba(26, 16, 19, 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: 14px;
  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.98rem; 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: 600;
  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); }

/* A birthday candle and its flame (.sb-flame), drawn in CSS so it can
   stand on the footer, the splash and the 404: a teardrop with a white-
   hot heart, a blue foot and a halo, flickering. */
.sb-flame {
  position: absolute; left: 50%; bottom: 100%;
  width: var(--fw, 12px); height: calc(var(--fw, 12px) * 1.75); margin-left: calc(var(--fw, 12px) / -2);
  border-radius: 50% 50% 50% 50% / 64% 64% 36% 36%;
  background:
    radial-gradient(40% 30% at 50% 82%, rgba(110, 150, 255, .7), transparent 70%),
    radial-gradient(48% 42% at 50% 66%, #fffdf2 0 38%, #ffe08a 62%, rgba(255, 170, 70, .95) 82%, rgba(255, 120, 40, 0) 100%);
  box-shadow: 0 0 calc(var(--fw, 12px) * 1.2) calc(var(--fw, 12px) * .3) rgba(255, 190, 90, .45);
  transform-origin: 50% 90%;
  pointer-events: none;
}
.sb-flame::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: 600%; height: 400%; transform: translate(-50%, -50%);
  border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 196, 110, .32), rgba(255, 196, 110, 0));
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .sb-flame { animation: sb-flicker 1.6s ease-in-out 4 both; animation-delay: var(--fd, 0s); }
}
@keyframes sb-flicker {
  0%, 100% { transform: scale(1, 1) skewX(0deg); }
  25% { transform: scale(.94, 1.06) skewX(-3deg); }
  50% { transform: scale(1.04, .95) skewX(2deg); }
  75% { transform: scale(.97, 1.04) skewX(-1deg); }
}

/* A number candle (.sb-numc, sized by its font-size): the figure in
   striped wax with a wick and a flame on top; the 2nd and 3rd of a row in
   mint and gold. .sb-numc--out has been blown out and trails smoke. */
.sb-numc { position: relative; display: flex; flex-direction: column-reverse; align-items: center; line-height: 1; }
.sb-numc__wax {
  display: block;
  font-family: 'Playfair Display', var(--font-display); font-weight: 900; font-size: 1em; line-height: .78;
  font-variant-numeric: lining-nums;
  padding: 0 .02em .012em;
  color: #e9517f;
  background: repeating-linear-gradient(-55deg, #f37ca0 0 .058em, #c8285a .058em .116em);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: .014em #a2224b;
  paint-order: stroke fill;
  filter: drop-shadow(0 .02em 0 rgba(59, 32, 24, .14));
}
.sb-numc:nth-child(3n+2) .sb-numc__wax { background-image: repeating-linear-gradient(-55deg, #7fd3b5 0 .058em, #2f8f73 .058em .116em); -webkit-text-stroke-color: #22705a; }
.sb-numc:nth-child(3n+3) .sb-numc__wax { background-image: repeating-linear-gradient(-55deg, #f6cf73 0 .058em, #c18a2a .058em .116em); -webkit-text-stroke-color: #8f6418; }
.sb-numc__wick { position: relative; display: block; width: .02em; height: .07em; margin-bottom: -.01em; background: #2b1710; border-radius: .01em .01em 0 0; }
.sb-numc__wick .sb-flame { --fw: .12em; bottom: calc(100% - .01em); }
.sb-numc__smoke { position: absolute; left: 50%; bottom: 100%; width: .3em; height: .6em; margin-left: -.15em; overflow: visible; }
.sb-numc__smoke path { fill: none; stroke: rgba(141, 108, 96, .5); stroke-width: 3; stroke-linecap: round; }
html.dark .sb-numc__smoke path { stroke: rgba(234, 216, 202, .4); }
@media (prefers-reduced-motion: no-preference) {
  .sb-numc__smoke { animation: sb-smoke 3.6s ease-in-out 3 both; transform-origin: 50% 100%; }
}
@keyframes sb-smoke { 0%, 100% { transform: translateX(0) skewX(0deg); opacity: .9; } 50% { transform: translateX(.02em) skewX(-6deg); opacity: .6; } }

/* ── Dark/light toggle: the candles ──
   assets/themes/store-birthday/assets/js/store-birthday.js registers it.
   Going dark, a row of birthday candles rises into the middle of the
   screen, lit; a breath sweeps across and blows them out one by one,
   their smoke curls up and thickens, and the room goes dark under it.
   Going light, the candles stand dark until a struck match passes along
   them, each wick catching in turn, and their glow swells to fill the
   screen with warm light. The mode flips under the dark or the glow. */
.px-fx--sb-candles { position: fixed; inset: 0; z-index: 2147483000; pointer-events: none; overflow: hidden; }
.px-fx--sb-candles .sb-fx-dim { position: absolute; inset: 0; opacity: 0; }
.px-fx--sb-candles.is-to-dark .sb-fx-dim { background: radial-gradient(70% 60% at 50% 62%, rgba(45, 24, 30, .5), #140a0e 80%); }
.px-fx--sb-candles.is-to-light .sb-fx-dim { background: radial-gradient(70% 60% at 50% 62%, rgba(255, 228, 180, .55), #fff3e2 80%); }
.px-fx--sb-candles .sb-fx-row {
  position: absolute; left: 50%; bottom: 0; display: flex; align-items: flex-end; gap: var(--gap);
  transform: translate(-50%, 105%); transition: transform .26s cubic-bezier(.2, .8, .3, 1);
}
.px-fx--sb-candles.is-up .sb-fx-row { transform: translate(-50%, 0); }
.px-fx--sb-candles .sb-fx-candle {
  position: relative; width: var(--cw); height: var(--ch); border-radius: calc(var(--cw) / 3) calc(var(--cw) / 3) 0 0;
  background: repeating-linear-gradient(-58deg, var(--c1) 0 calc(var(--cw) * .5), var(--c2) calc(var(--cw) * .5) calc(var(--cw) * 1));
  box-shadow: inset calc(var(--cw) * -.22) 0 0 rgba(0, 0, 0, .14), inset calc(var(--cw) * .12) 0 0 rgba(255, 255, 255, .35);
}
.px-fx--sb-candles .sb-fx-candle::before {
  content: ''; position: absolute; left: 50%; bottom: 100%; width: 3px; height: calc(var(--cw) * .5); margin-left: -1.5px;
  background: #2b1710; border-radius: 2px 2px 0 0;
}
.px-fx--sb-candles .sb-fx-candle .sb-flame { --fw: calc(var(--cw) * .62); bottom: calc(100% + var(--cw) * .32); transition: opacity .12s ease, transform .2s ease; }
.px-fx--sb-candles .sb-fx-candle.is-out .sb-flame { opacity: 0; transform: scale(.2, .1) skewX(-30deg); }
.px-fx--sb-candles .sb-fx-candle.is-unlit .sb-flame { opacity: 0; transform: scale(.1); }
/* The breath: three soft streaks crossing at flame height */
.px-fx--sb-candles .sb-fx-breath { position: absolute; left: 0; width: 100%; height: 90px; opacity: 0; }
.px-fx--sb-candles .sb-fx-breath i {
  position: absolute; left: -40%; height: 3px; width: 34%; border-radius: 3px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .85), transparent);
}
.px-fx--sb-candles .sb-fx-breath i:nth-child(1) { top: 20px; }
.px-fx--sb-candles .sb-fx-breath i:nth-child(2) { top: 44px; width: 44%; }
.px-fx--sb-candles .sb-fx-breath i:nth-child(3) { top: 66px; width: 26%; }
.px-fx--sb-candles.is-blow .sb-fx-breath { opacity: 1; }
.px-fx--sb-candles.is-blow .sb-fx-breath i { animation: sb-fx-breath .38s cubic-bezier(.3, .2, .4, 1) both; }
.px-fx--sb-candles.is-blow .sb-fx-breath i:nth-child(2) { animation-delay: .03s; }
.px-fx--sb-candles.is-blow .sb-fx-breath i:nth-child(3) { animation-delay: .06s; }
@keyframes sb-fx-breath { 0% { transform: translateX(0); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateX(380%); opacity: 0; } }
/* Smoke: a curl drawn up from each wick, thickening as it rises */
.px-fx--sb-candles .sb-fx-smoke { position: absolute; left: 50%; bottom: calc(100% + 4px); width: 120px; height: 60vh; margin-left: -60px; overflow: visible; }
.px-fx--sb-candles .sb-fx-smoke path {
  fill: none; stroke: rgba(225, 214, 222, .7); stroke-width: 4; stroke-linecap: round;
  stroke-dasharray: 1 1; stroke-dashoffset: 1; opacity: 0;
}
.px-fx--sb-candles .sb-fx-candle.is-out .sb-fx-smoke path { animation: sb-fx-smoke .7s ease-out both; }
.px-fx--sb-candles .sb-fx-candle.is-out .sb-fx-smoke path + path { animation-delay: .06s; stroke-width: 9; stroke: rgba(200, 186, 196, .35); }
@keyframes sb-fx-smoke { 0% { stroke-dashoffset: 1; opacity: .95; } 70% { opacity: .8; } 100% { stroke-dashoffset: 0; opacity: .25; transform: translateX(8px) scaleX(1.4); } }
/* The match: a stick with a red head, flaring as it is struck */
.px-fx--sb-candles .sb-fx-match {
  position: absolute; left: 0; top: 0; width: 120px; height: 7px; margin: -3.5px 0 0 -6px;
  border-radius: 3px; background: linear-gradient(180deg, #f5dcb0, #d6b07a); transform-origin: 6px 50%;
  transform: translate(var(--mx, -200px), var(--my, 50vh)) rotate(-24deg); transition: transform .12s ease-in-out;
}
.px-fx--sb-candles .sb-fx-match::before {
  content: ''; position: absolute; left: -6px; top: -4px; width: 14px; height: 15px; border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, #ff6b4a, #b21e2a);
}
.px-fx--sb-candles .sb-fx-match .sb-flame { --fw: 18px; left: 1px; bottom: 6px; transform: rotate(24deg); }
/* The glow that fills the screen once the candles are lit, and the dark
   that the smoke thickens into */
.px-fx--sb-candles .sb-fx-flood {
  position: absolute; left: 50%; bottom: 18vh; width: 40px; height: 40px; margin: 0 0 -20px -20px; border-radius: 50%;
  transform: scale(0); transition: transform .42s cubic-bezier(.5, 0, .4, 1);
}
.px-fx--sb-candles.is-to-light .sb-fx-flood { background: radial-gradient(closest-side, #fffaf0 0 55%, #ffeacb 80%, rgba(255, 222, 170, 0) 100%); }
.px-fx--sb-candles.is-to-dark .sb-fx-flood { background: radial-gradient(closest-side, #140a0e 0 60%, rgba(30, 18, 24, .96) 82%, rgba(30, 18, 24, 0) 100%); bottom: 50vh; }
.px-fx--sb-candles.is-flood .sb-fx-flood { transform: scale(var(--s)); }
.px-fx--sb-candles.is-away { opacity: 0; transition: opacity .4s ease; }

/* ── Footer: the top tier of a cake to close the page — strawberry
   fondant under a ganache drip with birthday candles standing lit on it
   and pearls round its foot — and below it the party after dark ── */
.sb-footer {
  --paper:     #24120e;
  --paper-2:   #331b15;
  --paper-3:   #42241c;
  --ink:       #fbefe4;
  --ink-2:     #ecdccd;
  --ink-soft:  #c4a99a;
  --rule:      rgba(251, 239, 228, 0.15);
  --rule-soft: rgba(251, 239, 228, 0.08);
  --theme-500: #ffc06a; --theme-600: #ffc06a; --theme-700: #ffd699;
  --theme-500-rgb: 255, 192, 106;
  position: relative;
}
html.dark .sb-footer { --paper: #1c0e0b; --paper-2: #2c1712; --paper-3: #3a2019; }
html body #desktopFooter.sb-footer {
  background:
    var(--bokeh) repeat left 30px / 420px 220px,
    radial-gradient(900px 300px at 50% 0%, rgba(255, 182, 90, .1), transparent 70%),
    var(--paper) !important;
}
.sb-footer-top { position: relative; height: 128px; margin-bottom: -1px; pointer-events: none; }
/* Strawberry fondant under the ganache, a row of pearls at its foot */
.sb-footer-tier {
  position: absolute; left: 0; right: 0; bottom: 0; height: 66px;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='44' viewBox='0 0 240 44'><path d='M0 0H240V12C232 12 230 14 230 20C230 30 222 31 221 21C220 14 214 12 204 12C196 12 194 16 194 30C194 42 184 43 183 30C182 15 176 12 166 12C158 12 156 15 156 19C156 25 149 26 148 19C147 14 142 12 132 12C122 12 120 16 120 24C120 34 111 35 110 24C109 15 104 12 92 12C84 12 82 15 82 27C82 38 73 39 72 27C71 15 66 12 56 12C48 12 46 14 46 18C46 23 40 24 39 18C38 13 32 12 22 12C14 12 12 15 12 23C12 32 4 33 3 23C2 15 1 12 0 12Z' fill='%234b2418'/><path d='M6 6C40 4 90 5 140 6C180 7 210 5 234 6' fill='none' stroke='%23a0604a' stroke-width='2' stroke-linecap='round'/><ellipse cx='188' cy='36' rx='1.6' ry='3.4' fill='%23a0604a'/><ellipse cx='76' cy='32' rx='1.5' ry='3' fill='%23a0604a'/></svg>") left top / 240px 44px repeat-x,
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'><defs><radialGradient id='p' cx='.36' cy='.34' r='.7'><stop offset='0' stop-color='%23ffffff'/><stop offset='.6' stop-color='%23fbf1e4'/><stop offset='1' stop-color='%23d8c3ac'/></radialGradient></defs><circle cx='7' cy='7' r='6.2' fill='url(%23p)'/></svg>") left bottom / 14px 14px repeat-x,
    linear-gradient(180deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, 0) 60%),
    #e2507c;
  box-shadow: 0 -1px 0 rgba(59, 32, 24, .08);
}
html.dark .sb-footer-tier {
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='44' viewBox='0 0 240 44'><path d='M0 0H240V12C232 12 230 14 230 20C230 30 222 31 221 21C220 14 214 12 204 12C196 12 194 16 194 30C194 42 184 43 183 30C182 15 176 12 166 12C158 12 156 15 156 19C156 25 149 26 148 19C147 14 142 12 132 12C122 12 120 16 120 24C120 34 111 35 110 24C109 15 104 12 92 12C84 12 82 15 82 27C82 38 73 39 72 27C71 15 66 12 56 12C48 12 46 14 46 18C46 23 40 24 39 18C38 13 32 12 22 12C14 12 12 15 12 23C12 32 4 33 3 23C2 15 1 12 0 12Z' fill='%232d140d'/><path d='M6 6C40 4 90 5 140 6C180 7 210 5 234 6' fill='none' stroke='%23b8774f' stroke-width='2' stroke-linecap='round'/><ellipse cx='188' cy='36' rx='1.6' ry='3.4' fill='%23b8774f'/><ellipse cx='76' cy='32' rx='1.5' ry='3' fill='%23b8774f'/></svg>") left top / 240px 44px repeat-x,
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'><defs><radialGradient id='p' cx='.36' cy='.34' r='.7'><stop offset='0' stop-color='%23fff8ec'/><stop offset='.6' stop-color='%23f2dcc0'/><stop offset='1' stop-color='%23a88e72'/></radialGradient></defs><circle cx='7' cy='7' r='6.2' fill='url(%23p)'/></svg>") left bottom / 14px 14px repeat-x,
    radial-gradient(60% 140% at 50% 0%, rgba(255, 182, 90, .25), transparent 70%),
    #8e2349;
}
.sb-footer-candles { position: absolute; left: 0; right: 0; bottom: 64px; height: 0; z-index: 1; }
.sb-fcandle {
  position: absolute; left: var(--x); bottom: 0; width: 11px; height: var(--h, 44px); margin-left: -5.5px;
  border-radius: 4px 4px 0 0;
  background: repeating-linear-gradient(-58deg, var(--c1, #fff6ea) 0 5px, var(--c2, #d93d6c) 5px 10px);
  box-shadow: inset -3px 0 0 rgba(0, 0, 0, .14), inset 2px 0 0 rgba(255, 255, 255, .35);
}
.sb-fcandle::before { content: ''; position: absolute; left: 50%; bottom: 100%; width: 2px; height: 6px; margin-left: -1px; background: #2b1710; }
.sb-fcandle .sb-flame { --fw: 9px; bottom: calc(100% + 4px); }
/* The glow of the outermost flames reaches past the screen edge on phones,
   and in RTL that edge scrolls. */
@media (max-width: 639px) { .sb-footer-top { overflow-x: clip; } }
.sb-fcandle:nth-child(3n+2) { --c2: #2f8f73; }
.sb-fcandle:nth-child(3n+3) { --c2: #e1a93f; }
.sb-footer a:hover { color: #ffcf8a; }
html .sb-footer .ed-footer-heading { font-family: var(--font-display); font-weight: 700; font-style: italic; font-size: 1.2rem; letter-spacing: 0; text-transform: none; color: #ffcf8a; }
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: #ffcf8a !important; }
html.dark #desktopFooter .ed-newsletter h4 { color: #3b2018 !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: .96rem; 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; }

/* The newsletter as an iced card: buttercream, the pearl ribbon along its
   top and a wrapped present tucked in its corner */
html body .sb-footer .ed-newsletter {
  position: relative;
  background:
    radial-gradient(260px 160px at 100% 50%, rgba(242, 162, 187, .22), transparent 70%),
    #fff8f0;
  color: #3b2018;
  border: 0; border-radius: 20px;
  box-shadow: 0 18px 34px -16px rgba(0, 0, 0, .6);
  overflow: hidden;
  padding-top: 2.5rem; padding-bottom: 2.2rem;
}
html body .sb-footer .ed-newsletter::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 14px; pointer-events: none;
  background: var(--trim-day, url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='14' viewBox='0 0 24 14'><defs><radialGradient id='p' cx='.36' cy='.34' r='.7'><stop offset='0' stop-color='%23ffffff'/><stop offset='.6' stop-color='%23fbf1e4'/><stop offset='1' stop-color='%23d8c3ac'/></radialGradient></defs><rect width='24' height='14' fill='%23d93d6c'/><rect y='1.2' width='24' height='.9' fill='%23ff9cbb'/><rect y='11.9' width='24' height='.9' fill='%23a2224b'/><circle cx='6' cy='7' r='3.6' fill='url(%23p)'/><circle cx='18' cy='7' r='3.6' fill='url(%23p)'/><circle cx='0' cy='7' r='1.3' fill='%23f2cf7c'/><circle cx='12' cy='7' r='1.3' fill='%23f2cf7c'/><circle cx='24' cy='7' r='1.3' fill='%23f2cf7c'/></svg>") repeat-x left center / 24px 14px);
}
html body .sb-footer .ed-newsletter::after {
  content: ''; position: absolute; right: 22px; top: 30px; bottom: auto; left: auto; width: 58px; height: 58px; display: block;
  border-radius: 0; opacity: 1; filter: none; transform: rotate(8deg); pointer-events: none;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'><defs><pattern id='d' width='9' height='9' patternUnits='userSpaceOnUse'><rect width='9' height='9' fill='%23f7a8c0'/><circle cx='2.5' cy='2.5' r='1.4' fill='%23fff6ea'/><circle cx='7' cy='7' r='1.4' fill='%23fff6ea'/></pattern></defs><rect x='8' y='24' width='44' height='32' rx='2' fill='url(%23d)'/><rect x='6' y='18' width='48' height='10' rx='2' fill='%23f7a8c0'/><rect x='26' y='18' width='8' height='38' fill='%2378cdb0'/><rect x='6' y='21' width='48' height='4' fill='%2378cdb0' fill-opacity='.5'/><path d='M30 18C26 8 14 6 15 13C16 19 26 19 30 18ZM30 18C34 8 46 6 45 13C44 19 34 19 30 18Z' fill='%2378cdb0'/><ellipse cx='30' cy='18' rx='4' ry='3' fill='%232f8f73'/></svg>") center / contain no-repeat;
}
[dir="rtl"] body .sb-footer .ed-newsletter::after { right: auto; left: 22px; }
@media (max-width: 767px) { html body .sb-footer .ed-newsletter::after { width: 38px; height: 38px; top: 24px; right: 14px; } [dir="rtl"] body .sb-footer .ed-newsletter::after { right: auto; left: 14px; } }
html body .sb-footer .ed-newsletter, html body .sb-footer .ed-newsletter * { --ink: #3b2018; --ink-2: #5e3d32; }
html body .sb-footer .ed-newsletter h4, html.dark body .sb-footer .ed-newsletter h4 { color: #3b2018 !important; font-family: var(--font-display); font-weight: 700; }
html.dark body .sb-footer .ed-newsletter p:not(#newsletter-msg) { color: #5e3d32 !important; }
html body .sb-footer .ed-newsletter-input, html.dark body .sb-footer .ed-newsletter input[type="email"].ed-newsletter-input:not(.no-dark):not([type="checkbox"]) { background: #ffffff !important; color: #3b2018 !important; border: 1px solid rgba(59, 32, 24, .2) !important; border-radius: 999px; }
html body .sb-footer .ed-newsletter-input::placeholder { color: #8d6c60; }
html body .sb-footer .ed-newsletter-input:focus { border-color: #d93d6c !important; box-shadow: 0 0 0 3px rgba(217, 61, 108, .16); }
html body .sb-footer .ed-newsletter-btn {
  background: #d93d6c; color: #ffffff; border: 0; border-radius: 999px;
  font-family: var(--font-ui); font-weight: 600;
}
html body .sb-footer .ed-newsletter-age { color: #5e3d32; }

/* Logo card: the light-mode logo on a buttercream cake board piped round
   with sugar pearls, wherever it sits on the night (footer, app splash) */
.sb-plaque {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 1.05rem 1.6rem;
  background: #fff8f0;
  border-radius: 20px;
  box-shadow: 0 0 0 3px #fff8f0, 0 0 0 5px #e1bb66, 0 14px 28px -12px rgba(0, 0, 0, .6);
}
.sb-plaque::before {
  content: ''; position: absolute; inset: 5px; border-radius: 15px; pointer-events: none;
  border: 2px dotted rgba(217, 61, 108, .45);
}

/* 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; }
/* A phone back bar's title is fitted to one line by fit-title.js (kernel),
   which needs the title free to shrink beside the balance chip. */
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(26, 16, 19, 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(36, 22, 27, 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, #312028, #1a1013, #2a1820, #140a0e) !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: #140a0e !important;
  border-color: rgba(251, 239, 228, .2) !important;
  color: #fbefe4 !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: #140a0e;
  --paper: #fbefe4;
  border-color: rgba(255, 192, 106, .3);
}

html header.safe-top-header[style] { background: rgba(255, 248, 241, .95) !important; }
html.dark header.safe-top-header[style] { background: rgba(26, 16, 19, .95) !important; }
/* The winners page's tab bar, near-black in assets/css/pages/winners.css */
html.dark .wn-tab-bar { background: rgba(26, 16, 19, .95); }

/* ── Login / register / forgot-password brand panel: the party night,
   balloons rising along its top and the cake's glow in its corner ── */
:root, html.dark {
  --brand-gradient: var(--night-bg);
  --brand-glow-1: rgba(255, 182, 90, 0.24);
  --brand-glow-2: rgba(242, 107, 147, 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, 170, 120, .22)) !important; transform: rotate(4deg) !important;
  background: var(--balloon-gold) 0 30px / 46px 129px no-repeat, var(--balloon-mint) 74px 22px / 46px 129px no-repeat, var(--balloon) 34px 0 / 52px 146px 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 pearl ribbon along the top */
html .brand-panel::before {
  top: 0 !important; left: 0 !important; right: 0 !important; width: auto !important; height: 14px !important;
  border-radius: 0 !important; opacity: 1 !important; filter: none !important; transform: none !important;
  background: var(--trim-night) !important;
}
.brand-panel .text-purple-200,
.brand-panel [class*="text-purple-200"] { color: rgba(251, 239, 228, 0.84) !important; }
.brand-panel h2 { font-family: var(--font-display); font-weight: 700 !important; }

/* ── Wallet balance card: a tier of strawberry fondant under a chocolate
   ganache drip, gold dragées scattered over it, a row of sugar pearls
   along its foot and a birthday candle burning in its corner ── */
html body .wallet-hero {
  position: relative;
  background:
    radial-gradient(2px 2px at 18% 62%, #f2cf7c 98%, transparent), radial-gradient(2px 2px at 34% 78%, #fff6ea 98%, transparent),
    radial-gradient(2.4px 2.4px at 52% 58%, #f2cf7c 98%, transparent), radial-gradient(2px 2px at 64% 82%, #fff6ea 98%, transparent),
    radial-gradient(2px 2px at 8% 84%, #fff6ea 98%, transparent), radial-gradient(2.4px 2.4px at 44% 90%, #f2cf7c 98%, transparent),
    linear-gradient(90deg, rgba(0, 0, 0, .1), rgba(255, 255, 255, .12) 28%, rgba(255, 255, 255, 0) 55%, rgba(0, 0, 0, .12)),
    linear-gradient(180deg, #e2507c, #c22d5c);
  border: 0;
  border-radius: 20px;
  box-shadow: 0 2px 0 #8a1c40, 0 22px 40px -18px rgba(138, 28, 64, .7);
  color: #fffaf4;
  overflow: hidden;
  padding-top: calc(1.5rem + 22px) !important;
  padding-bottom: calc(1.5rem + 16px) !important;
}
/* The ganache along the top, run down in drips */
html body .wallet-hero::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; bottom: auto; width: auto; height: 46px;
  border: 0; border-radius: 0; transform: none; opacity: 1;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='46' viewBox='0 0 160 46'><path d='M0 0H160V14C156 14 154 16 154 22C154 30 148 31 147 23C146 15 140 14 134 15C128 16 127 19 127 28C127 39 119 40 118 29C117 17 112 15 104 15C96 15 95 18 95 23C95 29 89 30 88 23C87 16 82 14 74 14C66 14 64 18 64 32C64 44 56 45 55 32C54 17 50 15 42 15C34 15 32 18 32 25C32 32 26 33 25 25C24 17 18 14 10 14C4 14 2 16 2 20C2 26 0 26 0 20Z' fill='%234b2418'/><path d='M8 9C30 7 50 8 72 9' fill='none' stroke='%23a0604a' stroke-width='2' stroke-linecap='round'/><ellipse cx='59' cy='38' rx='1.4' ry='3' fill='%23a0604a'/><ellipse cx='122' cy='34' rx='1.3' ry='2.6' fill='%23a0604a'/></svg>") left top / 160px 46px repeat-x;
  pointer-events: none;
}
/* Sugar pearls along the foot, and the candle in the corner */
html body .wallet-hero::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; top: auto; width: auto; height: 16px;
  border-radius: 0; transform: none; opacity: 1;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='16' viewBox='0 0 14 16'><defs><radialGradient id='p' cx='.36' cy='.34' r='.7'><stop offset='0' stop-color='%23ffffff'/><stop offset='.6' stop-color='%23fbf1e4'/><stop offset='1' stop-color='%23d8c3ac'/></radialGradient></defs><circle cx='7' cy='9' r='6' fill='url(%23p)'/></svg>") left bottom / 14px 16px repeat-x;
  pointer-events: none;
}
html body .wallet-hero > * { position: relative; z-index: 1; }
.sb-wallet-candle {
  position: absolute !important; right: 46px; top: 58px; z-index: 0 !important; width: 14px; height: 58px;
  border-radius: 5px 5px 0 0;
  background: repeating-linear-gradient(-58deg, #fff6ea 0 6px, #2f8f73 6px 12px);
  box-shadow: inset -3px 0 0 rgba(0, 0, 0, .14), inset 2px 0 0 rgba(255, 255, 255, .35);
  pointer-events: none;
}
.sb-wallet-candle::before { content: ''; position: absolute; left: 50%; bottom: 100%; width: 2px; height: 7px; margin-left: -1px; background: #2b1710; }
.sb-wallet-candle .sb-flame { --fw: 12px; bottom: calc(100% + 5px); }
html[dir="rtl"] .sb-wallet-candle { right: auto; left: 46px; }
@media (max-width: 639px) { .sb-wallet-candle { right: 20px; top: 54px; height: 40px; width: 11px; } html[dir="rtl"] .sb-wallet-candle { right: auto; left: 20px; } }
/* Shared markup letters the eyebrow, counts and rules in faint white for
   a black card; on the fondant 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(255, 250, 244, .86) !important; }
html body .wallet-hero .h-px { background: repeating-linear-gradient(90deg, rgba(255, 250, 244, .5) 0 5px, transparent 5px 9px) !important; }
html body .wallet-balance-num {
  font-family: var(--font-ui); font-variation-settings: normal; font-weight: 600; letter-spacing: -.01em;
  color: #ffffff; overflow-wrap: normal; font-variant-numeric: lining-nums tabular-nums;
  text-shadow: 0 2px 0 rgba(138, 28, 64, .35);
}
html body .wallet-hero-btn-primary { background: #fff8f0; color: #a2224b; border: 0; font-family: var(--font-ui); font-weight: 600; border-radius: 999px; box-shadow: 0 2px 0 #8a1c40; }
html body .wallet-hero-btn-primary:hover { background: #ffffff; color: #a2224b; }
html body .wallet-hero-btn-secondary { font-family: var(--font-ui); font-weight: 600; color: #fffaf4; border-color: rgba(255, 250, 244, .55); border-radius: 999px; }
/* Three pills share a phone row; each label stays on one line and the
   row wraps instead of a pill 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:
    radial-gradient(2px 2px at 18% 62%, #ffc06a 98%, transparent), radial-gradient(2px 2px at 34% 78%, #f1dcc0 98%, transparent),
    radial-gradient(2.4px 2.4px at 52% 58%, #ffc06a 98%, transparent), radial-gradient(2px 2px at 64% 82%, #f1dcc0 98%, transparent),
    radial-gradient(2px 2px at 8% 84%, #f1dcc0 98%, transparent), radial-gradient(2.4px 2.4px at 44% 90%, #ffc06a 98%, transparent),
    radial-gradient(60% 90% at 88% 30%, rgba(255, 182, 90, .28), transparent 70%),
    linear-gradient(180deg, #9a2a50, #6e1a38);
  box-shadow: 0 2px 0 #3e0d20, 0 0 50px -14px rgba(255, 182, 90, .35);
}

/* ── Mystery box card (styled by assets/css/pages/home.css): the pearl
   ribbon 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: 14px; border-radius: 0;
  background: var(--trim); opacity: 1; z-index: 2;
}
html .ed-card-mystery img { position: relative; z-index: 1; }

/* ── Product page buy box: the ribbon along its top ── */
html body .pd-buybox {
  position: relative;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 20px;
  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(--trim);
}
html body .pd-buybox .font-display.text-4xl { font-family: var(--font-ui); font-weight: 600; color: var(--theme-600); overflow-wrap: normal; }
.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(--btn-ink); }

/* Shared markup's stock purple, indigo and blue accents (coupon buttons,
   tier chips, focus rings) take the theme's strawberry. */
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: 999px;
}
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(217, 61, 108, .3); }
html.dark .border-violet-200 { border-color: rgba(255, 192, 106, .35) !important; }
html .focus\:ring-purple-400:focus { --tw-ring-color: rgba(217, 61, 108, .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 candlelight, so it takes the button ink. */
html.dark .arena-play { color: var(--btn-ink); text-shadow: none; }
html.dark .arena-play .pic { background: rgba(26, 16, 19, .12); }
html.dark .arena-play .cost { border-left-color: rgba(26, 16, 19, .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
   ribbon. 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: 18px !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: 20px !important;
  box-shadow: var(--shadow-md) !important;
  overflow: hidden;
  padding-top: 1.7rem !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(--trim);
}
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: 600;
  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 .sb-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 on a gilt cake stand against a pastel
   wall, a balloon tied beside it and a row of piped icing along the
   foot, over a white panel for its details ── */
.sb-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;
}
.sb-win:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.sb-win__wall {
  --wall: #fde4ec; --wall-2: #f8c4d3; --piping: #ffffff;
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  padding: 3.4rem 14px 22px;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .35) 0 14px, transparent 14px 28px),
    radial-gradient(70% 60% at 50% 30%, rgba(255, 255, 255, .6), transparent 70%),
    linear-gradient(180deg, var(--wall), var(--wall-2));
}
.sb-win:nth-child(3n+2) .sb-win__wall { --wall: #e3f6ee; --wall-2: #bde6d6; }
.sb-win:nth-child(3n+3) .sb-win__wall { --wall: #fff2d4; --wall-2: #f8dc9c; }
html.dark .sb-win:nth-child(n) .sb-win__wall {
  --piping: #f1dcc0;
  background:
    radial-gradient(60% 50% at 50% 34%, rgba(255, 182, 90, .3), transparent 70%),
    var(--bokeh) repeat left top / 300px 157px,
    linear-gradient(180deg, #2c1820, #3d2230);
}
/* Piped icing: a row of shells along the foot of the wall */
.sb-win__wall::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 12px;
  background: radial-gradient(circle at 50% 100%, var(--piping) 0 6.4px, transparent 7px) left bottom / 12px 12px repeat-x;
  filter: drop-shadow(0 -1px 0 rgba(59, 32, 24, .1));
}
.sb-win__stand { position: relative; display: block; width: min(68%, 12rem); }
.sb-win__prize { display: flex; align-items: flex-end; justify-content: center; height: 8.5rem; margin-bottom: -6px; position: relative; z-index: 1; }
.sb-win__prize img { max-width: 100%; max-height: 100%; object-fit: contain; filter: drop-shadow(0 8px 8px rgba(59, 32, 24, .25)); transition: transform .3s ease; }
html.dark .sb-win__prize img { filter: drop-shadow(0 0 14px rgba(255, 182, 90, .3)); }
.sb-win:hover .sb-win__prize img { transform: translateY(-4px) scale(1.04); }
.sb-win__plate { display: block; width: 100%; height: auto; }
.sb-win__balloon { position: absolute; top: 2.2rem; right: 9%; width: 30px; height: 84px; background: var(--balloon) center top / contain no-repeat; transform: rotate(6deg); }
.sb-win:nth-child(3n+2) .sb-win__balloon { background-image: var(--balloon-gold); }
.sb-win:nth-child(3n+3) .sb-win__balloon { background-image: var(--balloon-mint); }
[dir="rtl"] .sb-win__balloon { right: auto; left: 9%; transform: rotate(-6deg); }
@media (prefers-reduced-motion: no-preference) {
  .sb-win__balloon { animation: sb-bob 5s ease-in-out 3 both; }
}
@keyframes sb-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -5px; } }
.sb-win__wall > .absolute { z-index: 3; top: .9rem; }
.sb-win__tag {
  display: inline-flex; align-items: center;
  padding: .22rem .7rem;
  font-size: 11px; font-weight: 600; letter-spacing: .06em;
  color: #3b2018; background: #fff8f0; border-radius: 999px;
  box-shadow: 0 1px 0 rgba(59, 32, 24, .2);
}
.sb-win__tag--open { color: #ffffff; background: #d4386a; }
.sb-win__tag--done { color: #ffffff; background: #26775f; }
.sb-win__name { font-family: var(--font-display); font-weight: 700; font-size: 1.28rem; line-height: 1.25; color: var(--ink); overflow-wrap: anywhere; }
.sb-win__label { padding-top: .6rem; border-top: 1px dashed var(--rule); }
.sb-win__price { font-family: var(--font-ui); font-weight: 600; font-size: clamp(1.15rem, 4vw, 1.35rem); line-height: 1; color: var(--theme-600); overflow-wrap: normal; white-space: nowrap; }
.sb-win__btn { min-height: 2.75rem; padding: .55rem .9rem; font-size: .94rem; }
.sb-win__cart, .sb-win__btn-off {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  border-radius: 999px; font-weight: 600;
}
.sb-win__cart { color: var(--ink); background: var(--paper-2); border: 1px solid var(--rule); }
.sb-win__cart:hover { border-color: var(--theme-500); color: var(--theme-600); }
.sb-win__btn-off { color: var(--ink-soft); background: transparent; border: 1px dashed var(--rule); cursor: not-allowed; }
.sb-win__claimed {
  display: flex; align-items: center; justify-content: center; gap: .4rem;
  min-height: 2.75rem; padding: .5rem;
  font-size: .94rem; font-weight: 600;
  color: var(--theme-600); background: var(--rose-soft); border-radius: 999px;
}

/* 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. */
.sb-hero__scene { visibility: hidden; max-height: 0; overflow: hidden; }

/* ── The party's materials ──
   Every surface beyond the hero and footer is built from these, so a
   panel anywhere in the shop reads as the birthday at a glance:
   - the strawberry satin ribbon strung with sugar pearls (--trim) along
     the top of sheets, a narrow cousin (--trim-thin) for table heads,
     tabs and toasts, and the ribbon on its side (--trim-v) for a leading
     edge;
   - piped buttercream shells (--piping) along the foot of cards and
     under titles, the way a cake's base is finished;
   - the chocolate ganache drip (--drip) over the top of dialogs;
   - fondant in five icing colours (--sb-c1 strawberry, --sb-c2 mint,
     --sb-c3 lemon gold, --sb-c4 lilac, --sb-c5 sky) for icon tiles and
     rotating accents, each with an ink and a soft wash;
   - a striped birthday candle (--candle) for the current page, step
     numbers and the chips, a balloon (--balloon-mask) for heading dots
     and list markers, a small wrapped present (--present) for ticks;
   - the gilt cake stand (--stand) under products on a pastel striped
     wall, and its gilt (--gilt-ring) round the chosen option and frames;
   - sprinkles (--sprinkles) behind drawings and placeholders. */
:root {
  --sb-c1: #d93d6c; --sb-c2: #2f9a7a; --sb-c3: #d9a02e; --sb-c4: #8d6cd0; --sb-c5: #3a92c8;
  --sb-straw-ink: #a8224d; --sb-mint-ink: #1d6e56; --sb-gold-ink: #8a5d0c; --sb-lilac-ink: #5c3fa6; --sb-sky-ink: #1f6694;
  --sb-straw-soft: rgba(217, 61, 108, .1); --sb-mint-soft: rgba(47, 154, 122, .12); --sb-gold-soft: rgba(217, 160, 46, .16); --sb-lilac-soft: rgba(141, 108, 208, .12); --sb-sky-soft: rgba(58, 146, 200, .11);
  --theme-600-ink: #ffffff;

  --trim-thin-img: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='8' viewBox='0 0 24 8'><defs><radialGradient id='p' cx='.36' cy='.34' r='.7'><stop offset='0' stop-color='%23ffffff'/><stop offset='.6' stop-color='%23fbf1e4'/><stop offset='1' stop-color='%23d8c3ac'/></radialGradient></defs><rect width='24' height='8' fill='%23d93d6c'/><rect y='.7' width='24' height='.6' fill='%23ff9cbb'/><rect y='6.7' width='24' height='.6' fill='%23a2224b'/><circle cx='6' cy='4' r='2.1' fill='url(%23p)'/><circle cx='18' cy='4' r='2.1' fill='url(%23p)'/><circle cx='12' cy='4' r='.8' fill='%23f2cf7c'/><circle cx='0' cy='4' r='.8' fill='%23f2cf7c'/><circle cx='24' cy='4' r='.8' fill='%23f2cf7c'/></svg>");
  --trim-thin: var(--trim-thin-img) repeat-x left center / 24px 8px;
  --trim-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><radialGradient id='p' cx='.36' cy='.34' r='.7'><stop offset='0' stop-color='%23ffffff'/><stop offset='.6' stop-color='%23fbf1e4'/><stop offset='1' stop-color='%23d8c3ac'/></radialGradient></defs><rect width='8' height='24' fill='%23d93d6c'/><rect x='.7' width='.6' height='24' fill='%23ff9cbb'/><rect x='6.7' width='.6' height='24' fill='%23a2224b'/><circle cx='4' cy='6' r='2.1' fill='url(%23p)'/><circle cx='4' cy='18' r='2.1' fill='url(%23p)'/><circle cx='4' cy='12' r='.8' fill='%23f2cf7c'/><circle cx='4' cy='0' r='.8' fill='%23f2cf7c'/><circle cx='4' cy='24' r='.8' fill='%23f2cf7c'/></svg>");
  --trim-v: var(--trim-v-img) repeat-y center top / 8px 24px;

  /* Piped strawberry buttercream: a row of shells, each with its ridges */
  --piping-img: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='10' viewBox='0 0 16 10'><path d='M.6 9.4C.4 5 3.6 1.4 8.4 1.6C12.2 1.8 15.4 4.6 15.4 7.4C15.4 8.8 14.6 9.4 13.6 9.4Z' fill='%23f6a9c0'/><path d='M3 8.4C3.6 5.8 5.6 3.6 8.6 3.4M6 8.6C6.6 6.6 8.4 5 10.8 4.8M9.4 8.8C10 7.6 11.6 6.6 13.4 6.6' fill='none' stroke='%23d9668b' stroke-width='.8' stroke-linecap='round'/><path d='M4.4 4.2C5.6 2.9 7 2.4 8.6 2.4' fill='none' stroke='%23ffffff' stroke-opacity='.7' stroke-width='.9' stroke-linecap='round'/></svg>");
  --piping: var(--piping-img) repeat-x left bottom / 16px 10px;
  --piping-mint-img: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='10' viewBox='0 0 16 10'><path d='M.6 9.4C.4 5 3.6 1.4 8.4 1.6C12.2 1.8 15.4 4.6 15.4 7.4C15.4 8.8 14.6 9.4 13.6 9.4Z' fill='%23a6dcc6'/><path d='M3 8.4C3.6 5.8 5.6 3.6 8.6 3.4M6 8.6C6.6 6.6 8.4 5 10.8 4.8M9.4 8.8C10 7.6 11.6 6.6 13.4 6.6' fill='none' stroke='%235aae90' stroke-width='.8' stroke-linecap='round'/><path d='M4.4 4.2C5.6 2.9 7 2.4 8.6 2.4' fill='none' stroke='%23ffffff' stroke-opacity='.7' stroke-width='.9' stroke-linecap='round'/></svg>");

  /* Ganache run over the top edge in drips of different lengths */
  --drip-img: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='24' viewBox='0 0 120 24'><path d='M0 0H120V7C116 7 114 8 114 11C114 16 109 16 108.6 11.4C108.2 8 104 7 99 7.4C95 7.8 94 9 94 15C94 21.6 88.4 22 88 15C87.6 9 84 7.6 78 7.6C72.6 7.6 71 9 71 11.6C71 15 66.4 15.4 66 11.6C65.6 8.4 62 7 56 7C50 7 48 9 48 17C48 23.4 42 23.6 41.6 17C41.2 9.4 38 7.4 32 7.4C26 7.4 24.4 9 24.4 12.4C24.4 16 19.6 16.4 19.2 12.4C18.8 8.6 14.4 7 8 7C3 7 1 8 1 10C1 12.6 0 12.6 0 10Z' fill='%234b2418'/><path d='M6 3.6C24 2.6 40 3 58 3.6' fill='none' stroke='%23a0604a' stroke-width='1.4' stroke-linecap='round'/><ellipse cx='44.6' cy='19' rx='1' ry='2' fill='%23a0604a'/><ellipse cx='90.8' cy='17' rx='1' ry='2' fill='%23a0604a'/></svg>");
  --drip: var(--drip-img) repeat-x left top / 120px 24px;

  --candle-img: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'><defs><radialGradient id='f' cx='.5' cy='.62' r='.6'><stop offset='0' stop-color='%23fffbe8'/><stop offset='.45' stop-color='%23ffd36b'/><stop offset='1' stop-color='%23f08a2c'/></radialGradient><clipPath id='c'><rect x='3.5' y='8' width='5' height='12' rx='1.2'/></clipPath></defs><path d='M6 0.6C7.6 2.8 8.6 4.2 8.6 5.4C8.6 6.9 7.4 7.8 6 7.8C4.6 7.8 3.4 6.9 3.4 5.4C3.4 4.2 4.4 2.8 6 0.6Z' fill='url(%23f)'/><path d='M6 7.8V8.6' stroke='%233b2018' stroke-width='.8'/><g clip-path='url(%23c)'><rect x='3.5' y='8' width='5' height='12' fill='%23fff6ea'/><path d='M2 9L10 6V8.4L2 11.4ZM2 13L10 10V12.4L2 15.4ZM2 17L10 14V16.4L2 19.4Z' fill='%23d93d6c'/></g></svg>");
  --candle: var(--candle-img) center / contain no-repeat;
  /* A balloon in one colour, as a mask: fill it with any icing colour */
  --balloon-mask-img: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 22'><path d='M8 1C12.4 1 15 4.4 15 8.6C15 13.6 11 17.4 8 17.6C5 17.4 1 13.6 1 8.6C1 4.4 3.6 1 8 1Z'/><path d='M8 17.2L6 20.4H10Z'/></svg>");
  --balloon-mask: var(--balloon-mask-img) center / contain no-repeat;
  /* A small present: strawberry paper, a mint ribbon and its bow */
  --present-img: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 8C9 2 4 3 5 6C5.6 7.8 9 8 12 8C15 8 18.4 7.8 19 6C20 3 15 2 12 8Z' fill='%232f9a7a'/><rect x='3' y='8' width='18' height='4.4' rx='1' fill='%23e9517f'/><rect x='4.2' y='12.4' width='15.6' height='9.6' rx='1' fill='%23d93d6c'/><g fill='%23ffffff' fill-opacity='.55'><circle cx='7.4' cy='15.4' r='1'/><circle cx='16.6' cy='15.4' r='1'/><circle cx='7.4' cy='19.4' r='1'/><circle cx='16.6' cy='19.4' r='1'/></g><rect x='10.4' y='8' width='3.2' height='14' fill='%232f9a7a'/><rect x='3' y='12.4' width='18' height='.8' fill='%23a2224b' fill-opacity='.4'/></svg>");
  --present: var(--present-img) center / contain no-repeat;
  /* A satin bow: two loops, two tails and the knot, 54×30 */
  --sb-bow: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 54 30'><path d='M27 11C22 1 6 -2 5 7C4 15 18 15 27 11Z' fill='%23e9517f'/><path d='M27 11C32 1 48 -2 49 7C50 15 36 15 27 11Z' fill='%23e9517f'/><path d='M25 12L16 28L21 26.6L24 30L28 13Z' fill='%23b8274f'/><path d='M29 12L38 28L33 26.6L30 30L26 13Z' fill='%23b8274f'/><path d='M24 9C19 4 11 3 9 7' fill='none' stroke='%23ffb3c8' stroke-width='1.6' stroke-linecap='round'/><path d='M30 9C35 4 43 3 45 7' fill='none' stroke='%23b8274f' stroke-opacity='.5' stroke-width='1.4' stroke-linecap='round'/><ellipse cx='27' cy='11' rx='4.6' ry='4' fill='%23b8274f'/><ellipse cx='26' cy='10' rx='1.8' ry='1.2' fill='%23ffffff' fill-opacity='.45'/></svg>") center / contain no-repeat;

  /* A macaron seen from above, in each icing colour: the shell with its
     ruffled foot showing round it and a sheen across the top. Icons sit
     on these in white. */
  --macaron-straw: radial-gradient(60% 40% at 40% 28%, rgba(255, 255, 255, .55), transparent 70%), radial-gradient(circle, #e04a77 0 64%, #a2224b 66% 70%, #f8c4d3 72% 100%);
  --macaron-mint: radial-gradient(60% 40% at 40% 28%, rgba(255, 255, 255, .55), transparent 70%), radial-gradient(circle, #2f9a7a 0 64%, #1d6e56 66% 70%, #bfe8d8 72% 100%);
  --macaron-gold: radial-gradient(60% 40% at 40% 28%, rgba(255, 255, 255, .55), transparent 70%), radial-gradient(circle, #d9a02e 0 64%, #8a5d0c 66% 70%, #ffe8b0 72% 100%);
  --macaron-lilac: radial-gradient(60% 40% at 40% 28%, rgba(255, 255, 255, .55), transparent 70%), radial-gradient(circle, #8d6cd0 0 64%, #5c3fa6 66% 70%, #e2d8fa 72% 100%);
  --macaron-lift: 0 2px 0 rgba(59, 32, 24, .32), 0 8px 14px -8px rgba(59, 32, 24, .45);
  --macaron-ink: #ffffff;
  /* The stripes of a birthday candle: progress bars and switches fill
     with these */
  --candle-stripe: repeating-linear-gradient(-58deg, #fff6ea 0 5px, #d93d6c 5px 10px);
  --candle-stripe-mint: repeating-linear-gradient(-58deg, #fff6ea 0 5px, #2f9a7a 5px 10px);
  /* The gilt round a frame or the chosen option: a cream lip and a gold
     line, the way a cake board is edged */
  --gilt-ring: 0 0 0 2px #fff8f0, 0 0 0 4px #e1bb66, 0 0 0 5px #a77a2b, 0 10px 22px -12px rgba(59, 32, 24, .45);
  --gilt-grad: linear-gradient(100deg, #a77a2b 0%, #e1bb66 22%, #fff0c4 38%, #e1bb66 60%, #a77a2b 88%, #8a6420 100%);
  /* A product on a gilt cake stand against a pastel striped wall */
  --stand:
    radial-gradient(ellipse 33% 3.6% at 50% 92%, rgba(59, 32, 24, .16) 0 60%, transparent 64%),
    radial-gradient(ellipse 35% 5.4% at 50% 87.5%, #fff6d8 0 34%, #f2dba0 44%, #e1bb66 60%, #c29440 76%, #a77a2b 84%, transparent 88%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .42) 0 14px, transparent 14px 28px),
    radial-gradient(70% 58% at 50% 36%, rgba(255, 255, 255, .7), transparent 72%),
    linear-gradient(180deg, #fff1f5, #fbdbe5);
  --stand-mint:
    radial-gradient(ellipse 33% 3.6% at 50% 92%, rgba(59, 32, 24, .16) 0 60%, transparent 64%),
    radial-gradient(ellipse 35% 5.4% at 50% 87.5%, #fff6d8 0 34%, #f2dba0 44%, #e1bb66 60%, #c29440 76%, #a77a2b 84%, transparent 88%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .42) 0 14px, transparent 14px 28px),
    radial-gradient(70% 58% at 50% 36%, rgba(255, 255, 255, .7), transparent 72%),
    linear-gradient(180deg, #ecf9f3, #c9ecdd);
  --stand-lemon:
    radial-gradient(ellipse 33% 3.6% at 50% 92%, rgba(59, 32, 24, .16) 0 60%, transparent 64%),
    radial-gradient(ellipse 35% 5.4% at 50% 87.5%, #fff6d8 0 34%, #f2dba0 44%, #e1bb66 60%, #c29440 76%, #a77a2b 84%, transparent 88%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .42) 0 14px, transparent 14px 28px),
    radial-gradient(70% 58% at 50% 36%, rgba(255, 255, 255, .7), transparent 72%),
    linear-gradient(180deg, #fff7e2, #fbe6b2);
  --sprinkles: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='80' viewBox='0 0 120 80'><g stroke-linecap='round' stroke-width='2.6' stroke-opacity='.32'><path d='M14 16l7 -3' stroke='%23d93d6c'/><path d='M62 10l3 6' stroke='%232f9a7a'/><path d='M100 30l-7 3' stroke='%23d9a02e'/><path d='M38 50l5 5' stroke='%238d6cd0'/><path d='M84 64l7 1' stroke='%233a92c8'/><path d='M10 68l4 -6' stroke='%232f9a7a'/></g><g fill-opacity='.3'><circle cx='50' cy='30' r='1.6' fill='%23d93d6c'/><circle cx='108' cy='58' r='1.6' fill='%238d6cd0'/><circle cx='26' cy='36' r='1.4' fill='%23d9a02e'/></g></svg>");
}
html.dark {
  --sb-c1: #ff8fb1; --sb-c2: #7fd3b5; --sb-c3: #ffc06a; --sb-c4: #c9b6f0; --sb-c5: #9fd3f2;
  --sb-straw-ink: #ff9fbd; --sb-mint-ink: #8fe0c2; --sb-gold-ink: #ffcd85; --sb-lilac-ink: #d6c6f6; --sb-sky-ink: #aedcf6;
  --sb-straw-soft: rgba(255, 143, 177, .12); --sb-mint-soft: rgba(127, 211, 181, .12); --sb-gold-soft: rgba(255, 192, 106, .13); --sb-lilac-soft: rgba(201, 182, 240, .12); --sb-sky-soft: rgba(159, 211, 242, .1);
  --theme-600-ink: #241016;

  --trim-thin-img: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='8' viewBox='0 0 24 8'><defs><radialGradient id='p' cx='.36' cy='.34' r='.7'><stop offset='0' stop-color='%23fff8ec'/><stop offset='.6' stop-color='%23f2dcc0'/><stop offset='1' stop-color='%23a88e72'/></radialGradient></defs><rect width='24' height='8' fill='%238e2349'/><rect y='.7' width='24' height='.6' fill='%23d65f86'/><rect y='6.7' width='24' height='.6' fill='%23611534'/><circle cx='6' cy='4' r='2.1' fill='url(%23p)'/><circle cx='18' cy='4' r='2.1' fill='url(%23p)'/><circle cx='12' cy='4' r='.8' fill='%23ffc06a'/><circle cx='0' cy='4' r='.8' fill='%23ffc06a'/><circle cx='24' cy='4' r='.8' fill='%23ffc06a'/></svg>");
  --trim-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><radialGradient id='p' cx='.36' cy='.34' r='.7'><stop offset='0' stop-color='%23fff8ec'/><stop offset='.6' stop-color='%23f2dcc0'/><stop offset='1' stop-color='%23a88e72'/></radialGradient></defs><rect width='8' height='24' fill='%238e2349'/><rect x='.7' width='.6' height='24' fill='%23d65f86'/><rect x='6.7' width='.6' height='24' fill='%23611534'/><circle cx='4' cy='6' r='2.1' fill='url(%23p)'/><circle cx='4' cy='18' r='2.1' fill='url(%23p)'/><circle cx='4' cy='12' r='.8' fill='%23ffc06a'/><circle cx='4' cy='0' r='.8' fill='%23ffc06a'/><circle cx='4' cy='24' r='.8' fill='%23ffc06a'/></svg>");
  --trim-v: var(--trim-v-img) repeat-y center top / 8px 24px;
  --piping-img: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='10' viewBox='0 0 16 10'><path d='M.6 9.4C.4 5 3.6 1.4 8.4 1.6C12.2 1.8 15.4 4.6 15.4 7.4C15.4 8.8 14.6 9.4 13.6 9.4Z' fill='%23c46a88'/><path d='M3 8.4C3.6 5.8 5.6 3.6 8.6 3.4M6 8.6C6.6 6.6 8.4 5 10.8 4.8M9.4 8.8C10 7.6 11.6 6.6 13.4 6.6' fill='none' stroke='%23893a58' stroke-width='.8' stroke-linecap='round'/><path d='M4.4 4.2C5.6 2.9 7 2.4 8.6 2.4' fill='none' stroke='%23ffd9a3' stroke-opacity='.6' stroke-width='.9' stroke-linecap='round'/></svg>");
  --piping: var(--piping-img) repeat-x left bottom / 16px 10px;
  --piping-mint-img: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='10' viewBox='0 0 16 10'><path d='M.6 9.4C.4 5 3.6 1.4 8.4 1.6C12.2 1.8 15.4 4.6 15.4 7.4C15.4 8.8 14.6 9.4 13.6 9.4Z' fill='%234f8a77'/><path d='M3 8.4C3.6 5.8 5.6 3.6 8.6 3.4M6 8.6C6.6 6.6 8.4 5 10.8 4.8M9.4 8.8C10 7.6 11.6 6.6 13.4 6.6' fill='none' stroke='%232c5649' stroke-width='.8' stroke-linecap='round'/><path d='M4.4 4.2C5.6 2.9 7 2.4 8.6 2.4' fill='none' stroke='%23ffd9a3' stroke-opacity='.55' stroke-width='.9' stroke-linecap='round'/></svg>");
  --macaron-straw: radial-gradient(60% 40% at 40% 28%, rgba(255, 255, 255, .5), transparent 70%), radial-gradient(circle, #ff8fb1 0 64%, #a8224d 66% 70%, #ffd6e2 72% 100%);
  --macaron-mint: radial-gradient(60% 40% at 40% 28%, rgba(255, 255, 255, .5), transparent 70%), radial-gradient(circle, #7fd3b5 0 64%, #2c5649 66% 70%, #d8f4ea 72% 100%);
  --macaron-gold: radial-gradient(60% 40% at 40% 28%, rgba(255, 255, 255, .5), transparent 70%), radial-gradient(circle, #ffc06a 0 64%, #8a5d0c 66% 70%, #ffecc8 72% 100%);
  --macaron-lilac: radial-gradient(60% 40% at 40% 28%, rgba(255, 255, 255, .5), transparent 70%), radial-gradient(circle, #c9b6f0 0 64%, #5c3fa6 66% 70%, #efe8ff 72% 100%);
  --macaron-lift: 0 2px 0 rgba(0, 0, 0, .45), 0 0 14px -4px rgba(255, 192, 106, .3);
  --macaron-ink: #241016;
  --gilt-ring: 0 0 0 2px #24161b, 0 0 0 4px #c79a45, 0 0 0 5px #7d5a1f, 0 0 18px -2px rgba(255, 192, 106, .35);
  --stand:
    radial-gradient(ellipse 33% 3.6% at 50% 92%, rgba(0, 0, 0, .4) 0 60%, transparent 64%),
    radial-gradient(ellipse 35% 5.4% at 50% 87.5%, #ffe2a0 0 34%, #dcb86a 44%, #c79a45 60%, #9a7330 76%, #7d5a1f 84%, transparent 88%),
    radial-gradient(60% 50% at 50% 40%, rgba(255, 182, 90, .26), transparent 72%),
    var(--bokeh) repeat left top / 300px 157px,
    linear-gradient(180deg, #2c1820, #3d2230);
  --stand-mint: var(--stand);
  --stand-lemon: var(--stand);
  --sprinkles: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='80' viewBox='0 0 120 80'><g stroke-linecap='round' stroke-width='2.6' stroke-opacity='.26'><path d='M14 16l7 -3' stroke='%23ff8fb1'/><path d='M62 10l3 6' stroke='%237fd3b5'/><path d='M100 30l-7 3' stroke='%23ffc06a'/><path d='M38 50l5 5' stroke='%23c9b6f0'/><path d='M84 64l7 1' stroke='%239fd3f2'/><path d='M10 68l4 -6' stroke='%237fd3b5'/></g><g fill-opacity='.3'><circle cx='50' cy='30' r='1.6' fill='%23ffc06a'/><circle cx='108' cy='58' r='1.6' fill='%23c9b6f0'/></g></svg>");
}

/* ── Game palette (the earn-games arena posts these into each game) ──
   By day a buttercream board in a strawberry well, its pieces rising
   through the icing colours from vanilla to chocolate; after dark the
   party night, the pieces lit warm. */
:root {
  --game-bg: #fff4ec;
  --game-surface: #f8dfe6;
  --game-surface-2: #fffaf4;
  --game-ink: #3b2018;
  --game-muted: #8d6c60;
  --game-accent: #d93d6c;
  --game-accent-ink: #ffffff;
  --game-good: #2f9a7a;
  --game-bad: #c22d5c;
  --game-tile-1: #fff1d9;
  --game-tile-2: #fbd7e2;
  --game-tile-3: #bfe8d8;
  --game-tile-4: #ffe08a;
  --game-tile-5: #c9b6f0;
  --game-tile-6: #9fd3f2;
  --game-tile-7: #e9517f;
  --game-tile-8: #4b2418;
  --game-radius: 14px;
  --game-font: 'Jost', system-ui, sans-serif;
  --game-font-css: "/assets/themes/store-birthday/assets/fonts/fonts.css";
  --game-pattern: var(--sprinkles);
  --game-arena-screen: #fff4ec;
  --game-arena-coins: #b07a12;
  --game-arena-win: #2f9a7a;
  --game-arena-danger: #c22d5c;
}
html.dark {
  --game-bg: #1d1015;
  --game-surface: #2a1820;
  --game-surface-2: #3a2430;
  --game-ink: #fbefe4;
  --game-muted: #b89d92;
  --game-accent: #ffc06a;
  --game-accent-ink: #241016;
  --game-good: #7fd3b5;
  --game-bad: #ff8fb1;
  --game-tile-1: #4a3038;
  --game-tile-2: #7c3a50;
  --game-tile-3: #2c5649;
  --game-tile-4: #8a6b2c;
  --game-tile-5: #5c4a86;
  --game-tile-6: #2f5a78;
  --game-tile-7: #c23b65;
  --game-tile-8: #ffc06a;
  --game-arena-screen: #1d1015;
  --game-arena-coins: #ffc06a;
  --game-arena-win: #7fd3b5;
  --game-arena-danger: #ff8fb1;
}

/* 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: #298569; --px-warn: #b45309; --px-crit: #c32d5c; --px-info: #1582c1; }
html.dark:root { --px-good: #7ed3b4; --px-warn: #fbbf23; --px-crit: #ff99b8; --px-info: #acdbf6; }

/* The language-switch scene (PX_LANG_SCENES in store-birthday.js): the cake,
   its candles blown out and the topper turned to the new language's name. */
.sb-lang-stage { background: color-mix(in srgb, var(--night, #1d1015) 58%, transparent); overflow: hidden; }
.sb-lang-party {
  position: relative; display: flex; flex-direction: column; align-items: center;
  width: min(560px, 100%); box-sizing: border-box; padding: 26px 16px 22px;
  color: var(--ink); background: var(--paper, #fff8f1); border-radius: 28px;
  box-shadow: 0 34px 70px -28px rgba(0, 0, 0, .6); font-family: var(--font-ui);
}
.sb-lang-topper { position: relative; z-index: 2; max-width: 100%; padding-bottom: 52px; margin-bottom: -52px; perspective: 700px; }
.sb-lang-topper::before, .sb-lang-topper::after {
  content: ''; position: absolute; bottom: 0; width: 3px; height: 52px; border-radius: 2px;
  background: var(--gilt-mid, #e1bb66); box-shadow: inset -1px 0 0 var(--gilt-lo, #a77a2b);
}
.sb-lang-topper::before { left: calc(50% - 24px); }
.sb-lang-topper::after { left: calc(50% + 21px); }
.sb-lang-card { position: relative; z-index: 1; display: grid; transform-style: preserve-3d; transform: rotateY(180deg); }
.sb-lang-face {
  grid-area: 1 / 1; display: flex; align-items: center; justify-content: center; gap: 10px; min-width: 0;
  padding: 10px 18px; border-radius: 14px; background: var(--paper-2, #fff); border: 2px solid var(--theme-500, #d93d6c);
  box-shadow: 0 10px 22px -12px rgba(0, 0, 0, .45); -webkit-backface-visibility: hidden; backface-visibility: hidden;
}
.sb-lang-new { transform: rotateY(180deg); border-color: var(--gilt-mid, #e1bb66); box-shadow: 0 0 0 3px var(--sb-blush, #f8c4d3), 0 10px 22px -12px rgba(0, 0, 0, .45); }
.sb-lang-globe { width: 24px; height: 24px; flex: none; color: var(--theme-500, #d93d6c); }
.sb-lang-globe circle { fill: color-mix(in srgb, var(--sb-blush, #f8c4d3) 45%, transparent); }
.sb-lang-new .sb-lang-globe { color: #2f8f73; }
.sb-lang-new .sb-lang-globe circle { fill: color-mix(in srgb, #bfe8d8 60%, transparent); }
html.dark .sb-lang-globe circle { fill: color-mix(in srgb, #ffc06a 14%, transparent); }
html.dark .sb-lang-new .sb-lang-globe { color: #8fd3bd; }
html.dark .sb-lang-new .sb-lang-globe circle { fill: color-mix(in srgb, #8fd3bd 16%, transparent); }
.sb-lang-name { font: 700 clamp(22px, 6.5vw, 32px)/1.1 var(--font-display); color: var(--ink); overflow-wrap: anywhere; text-align: center; }
.sb-lang-cake { display: flex; flex-direction: column; align-items: center; }
.sb-lang-candles { display: flex; align-items: flex-end; gap: 16px; height: 52px; }
.sb-lang-candle {
  position: relative; display: block; width: 10px; height: 38px; border-radius: 3px 3px 1px 1px;
  background: repeating-linear-gradient(135deg, var(--sb-blush, #f8c4d3) 0 5px, #fff 5px 10px);
}
.sb-lang-candle:nth-child(2) { margin-right: 70px; }
.sb-lang-flame {
  position: absolute; bottom: calc(100% + 2px); left: 50%; width: 12px; height: 17px; margin-left: -6px;
  border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%; transform-origin: 50% 100%;
  background: radial-gradient(circle at 50% 70%, #fff6c8 0 25%, var(--sb-flame, #ffb648) 60%, #ff7a3d);
  box-shadow: 0 0 14px 3px rgba(255, 182, 72, .55);
  opacity: 0; transform: translateX(4px) scale(.15);
}
.sb-lang-smoke {
  position: absolute; bottom: calc(100% + 4px); left: 50%; width: 12px; height: 22px; margin-left: -6px; box-sizing: border-box;
  border: 2px solid transparent; border-left-color: var(--ink-soft, #8d6c60); border-radius: 50%; opacity: 0;
}
.sb-lang-tier { display: block; border-radius: 10px 10px 4px 4px; }
.sb-lang-tier-top {
  width: 150px; height: 46px;
  background: radial-gradient(circle at 10px 0, var(--sb-cream, #fff6ea) 9px, transparent 10px) 0 0 / 20px 16px repeat-x, var(--sb-blush, #f8c4d3);
}
.sb-lang-tier-low {
  width: 220px; height: 62px;
  background:
    radial-gradient(circle at 12px 0, var(--sb-blush, #f8c4d3) 11px, transparent 12px) 0 0 / 24px 18px repeat-x,
    radial-gradient(circle, #fff 2px, transparent 2.5px) 4px 34px / 16px 12px repeat-x,
    var(--sb-mint, #bfe8d8);
}
.sb-lang-plate { display: block; width: 260px; max-width: 100%; height: 10px; border-radius: 6px; background: linear-gradient(90deg, var(--gilt-lo, #a77a2b), var(--gilt-hi, #fff0c4) 45%, var(--gilt-mid, #e1bb66)); }
.sb-lang-confetti { position: absolute; left: 50%; top: 34%; width: 0; height: 0; }
.sb-lang-confetti i { position: absolute; width: 8px; height: 12px; margin: -6px 0 0 -4px; border-radius: 2px; background: var(--sb-strawberry, #d93d6c); opacity: 0; }
.sb-lang-confetti i:nth-child(6n+2) { background: var(--sb-lemon, #ffe08a); }
.sb-lang-confetti i:nth-child(6n+3) { background: var(--sb-mint-deep, #2f8f73); }
.sb-lang-confetti i:nth-child(6n+4) { background: var(--sb-lilac, #c9b6f0); }
.sb-lang-confetti i:nth-child(6n+5) { background: var(--sb-sky, #9fd3f2); }
.sb-lang-confetti i:nth-child(6n) { background: var(--gilt-mid, #e1bb66); border-radius: 50%; width: 9px; height: 9px; }
.sb-lang-confetti i:nth-child(1) { --sbx: -150px; --sby: -70px; --sbr: 220deg; }
.sb-lang-confetti i:nth-child(2) { --sbx: 140px; --sby: -84px; --sbr: -200deg; }
.sb-lang-confetti i:nth-child(3) { --sbx: -96px; --sby: -110px; --sbr: 160deg; }
.sb-lang-confetti i:nth-child(4) { --sbx: 96px; --sby: -118px; --sbr: -260deg; }
.sb-lang-confetti i:nth-child(5) { --sbx: -36px; --sby: -130px; --sbr: 300deg; }
.sb-lang-confetti i:nth-child(6) { --sbx: 40px; --sby: -126px; --sbr: -180deg; }
.sb-lang-confetti i:nth-child(7) { --sbx: -160px; --sby: 10px; --sbr: 240deg; }
.sb-lang-confetti i:nth-child(8) { --sbx: 158px; --sby: 4px; --sbr: -220deg; }
.sb-lang-confetti i:nth-child(9) { --sbx: -124px; --sby: 60px; --sbr: 190deg; }
.sb-lang-confetti i:nth-child(10) { --sbx: 126px; --sby: 66px; --sbr: -150deg; }
.sb-lang-confetti i:nth-child(11) { --sbx: -70px; --sby: -40px; --sbr: 140deg; }
.sb-lang-confetti i:nth-child(12) { --sbx: 74px; --sby: -46px; --sbr: -120deg; }
/* Out: the cake comes out lit, the candles are blown out, the topper turns. */
.px-lang-stage-out .sb-lang-party { animation: sb-lang-in .34s cubic-bezier(.2, .8, .3, 1.1) both; }
.px-lang-stage-out .sb-lang-flame { animation: sb-lang-blow .82s ease-in .1s both; }
.px-lang-stage-out .sb-lang-candle:nth-child(2) .sb-lang-flame, .px-lang-stage-out .sb-lang-candle:nth-child(3) .sb-lang-flame { animation-delay: .14s; }
.px-lang-stage-out .sb-lang-smoke { animation: sb-lang-smoke .5s ease-out .6s both; }
.px-lang-stage-out .sb-lang-card { animation: sb-lang-flip .5s cubic-bezier(.5, 0, .3, 1.25) .6s both; }
/* In: it starts where out ended, confetti goes up, the cake is carried off. */
.px-lang-stage-in .sb-lang-card { animation: sb-lang-cheer .45s ease-out .15s both; }
.px-lang-stage-in .sb-lang-confetti i { animation: sb-lang-pop .85s cubic-bezier(.15, .7, .3, 1) .1s both; }
.px-lang-stage-in .sb-lang-confetti i:nth-child(odd) { animation-delay: .16s; }
.px-lang-stage-in .sb-lang-party { animation: sb-lang-off .28s ease-in 1s both; }
@keyframes sb-lang-in { from { transform: translateY(40px) scale(.96); opacity: 0; } }
@keyframes sb-lang-off { to { transform: translateY(30px) scale(.96); opacity: 0; } }
@keyframes sb-lang-blow {
  0%   { opacity: 1; transform: none; }
  20%  { opacity: 1; transform: scale(.9, 1.12); }
  40%  { opacity: 1; transform: scale(1.05, .95); }
  55%  { opacity: 1; transform: none; }
  70%  { opacity: 1; transform: translateX(3px) skewX(-14deg) scale(.8); }
  100% { opacity: 0; transform: translateX(4px) scale(.15); }
}
@keyframes sb-lang-smoke {
  0%   { opacity: 0; transform: translateY(4px) scale(.6); }
  30%  { opacity: .8; }
  100% { opacity: 0; transform: translate(6px, -30px) rotate(30deg) scale(1.3); }
}
@keyframes sb-lang-flip { from { transform: rotateY(0); } }
@keyframes sb-lang-cheer { 50% { transform: rotateY(180deg) scale(1.1); } }
@keyframes sb-lang-pop {
  0%   { opacity: 0; transform: translate(0, 0) scale(.3); }
  12%  { opacity: 1; }
  70%  { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--sbx), var(--sby)) rotate(var(--sbr)); }
}
@media (max-width: 460px) {
  .sb-lang-candle:nth-child(1), .sb-lang-candle:nth-child(4) { display: none; }
  .sb-lang-tier-low { width: 190px; }
  .sb-lang-plate { width: 220px; }
  .sb-lang-confetti { transform: scale(.7); }
  .sb-lang-party { padding: 22px 12px 18px; }
}

/* 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; }
  /* a full-width button with a long label ("Andere Auktionen durchstöbern") wraps inside itself */
  html body .ed-btn-primary.w-full { white-space: normal; text-wrap: balance; }
}

/* Recent winners strip. It also stops while one of its cards has focus,
   slides towards the reading side on right-to-left pages (the shared loop
   only runs leftwards, which empties the row there), and holds still with
   each winner shown once when there are too few of them to fill the row
   (data-wt-still, set by assets/js/components/home/winner-ticker.js). */
html body .wt-wrap:focus-within .wt-track { animation-play-state: paused; }
@keyframes wt-scroll-rtl { from { transform: translateX(0); } to { transform: translateX(50%); } }
@media (prefers-reduced-motion: no-preference) {
  html[dir="rtl"] body .wt-track { animation-name: wt-scroll-rtl; }
}
html body .wt-wrap[data-wt-still] .wt-track { animation: none; transform: none; margin-inline: auto; }
html body .wt-wrap[data-wt-still] .wt-card[data-wt-repeat] { display: none; }

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

/* 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: #c0335d !important; }

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