/* ============================================================
   WINTER SALE THEME — the January sale at a mountain lodge.
   Same class surface as editorial/theme.css, so shared header,
   footer, drawer and component classes stay styled.

   Built from a lodge in the snow: fair-isle knitting, wool
   mittens and a scarf, frost on the window panes, snow falling
   outside and a mug of cocoa on the sill, in fjord blue,
   lingonberry red and wool cream on fresh snow by day (the
   default); the lodge at night by firelight, charcoal wool and
   ember, by night.

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

:root {
  --font-display: 'Bricolage Grotesque', 'Wix Madefor Text', 'Segoe UI', system-ui, sans-serif;
  --font-ui:      'Wix Madefor Text', 'Inter', 'Segoe UI', system-ui, sans-serif;
  /* Bricolage set narrow and heavy for the big lettering, like a sale
     poster pinned up in the ski room */
  --display-stretch: 82%;

  --paper:        #f3f5f7;
  --paper-2:      #ffffff;
  --paper-3:      #e7edf2;
  --ink:          #1a2a3f;
  --ink-2:        #34465c;
  --ink-soft:     #56667b;
  --rule:         rgba(26, 42, 63, 0.13);
  --rule-soft:    rgba(26, 42, 63, 0.07);
  --radius:       16px;
  --radius-sm:    10px;
  --shadow:       0 1px 2px rgba(26, 42, 63, .06), 0 4px 14px -6px rgba(26, 42, 63, .18);
  --shadow-md:    0 2px 4px rgba(26, 42, 63, .06), 0 16px 32px -14px rgba(26, 42, 63, .32);

  /* Fjord blue */
  --theme-50:  #edf3f9;
  --theme-100: #d5e3f0;
  --theme-200: #aac6e0;
  --theme-300: #79a3c9;
  --theme-400: #4f81b0;
  --theme-500: #2f6596;
  --theme-600: #244f78;
  --theme-700: #1e4162;
  --theme-800: #18334d;
  --theme-900: #112437;
  --theme-500-rgb: 47, 101, 150;
  --theme-600-rgb: 36, 79, 120;

  /* The lodge: lingonberry-red wool and its darker twist, wool cream,
     fjord navy, frost on the glass and the honey pine of the frames */
  --berry:   #b8323c;
  --berry-2: #8f222b;
  --wool:    #f4ecdd;
  --navy:    #1d3350;
  --frost:   #dcebf5;
  --frost-2: #a9cbe4;
  --pine:    #c48a52;
  --pine-2:  #9a6234;
  --ember:   #e8873a;
  --rose-soft: rgba(47, 101, 150, 0.09);

  /* Names other themes' shared markup reaches for */
  --gold:       #b7832f;
  --gold-2:     #e3b45c;
  --gold-soft:  rgba(47, 101, 150, 0.08);
  --gold-ink:   #1a2a3f;
  --felt:       #1d3350;
  --felt-2:     #15263d;
  --on-felt:    #f4ecdd;
  --on-felt-soft: rgba(244, 236, 221, 0.8);
  --peacock:    #2f7a6a;
  --peacock-soft: rgba(47, 122, 106, 0.12);
  --red:        var(--theme-500);
  --red-soft:   var(--rose-soft);
  --rose:       var(--theme-500);

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

  /* Buttons: lingonberry wool by day, ember by night */
  --btn-bg:       #b8323c;
  --btn-bg-hover: #c63f49;
  --btn-ink:      #ffffff;
  --btn-edge:     #85202a;
  --btn-shadow:   0 2px 0 var(--btn-edge), 0 8px 18px -10px rgba(133, 32, 42, .7);
  --btn-shadow-hover: 0 3px 0 var(--btn-edge), 0 12px 22px -10px rgba(133, 32, 42, .7);

  /* Knitting. --knit-band is a strip of fair-isle (navy edging, a row of
     little crosses on lingonberry); --knit-slim the narrow one under the
     header; --knit-yoke a jumper's yoke of eight-point stars; --stitch
     plain stockinette laid over any colour. */
  --knit-band: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='30.6'><defs><pattern id='k' width='4' height='3.4' patternUnits='userSpaceOnUse'><path d='M0 0q.3 2.11 2 3.4M4 0q-.3 2.11 -2 3.4' fill='none' stroke='%23000' stroke-opacity='.3' stroke-width='.7'/><path d='M0.88 0.41q.2 1.36 0.88 2.11M3.12 0.41q-.2 1.36 -0.88 2.11' fill='none' stroke='%23fff' stroke-opacity='.22' stroke-width='.6' stroke-linecap='round'/></pattern></defs><rect x='0' y='0' width='32' height='3.4' fill='%231d3350'/><rect x='0' y='3.4' width='4' height='3.4' fill='%23f4ecdd'/><rect x='4' y='3.4' width='12' height='3.4' fill='%231d3350'/><rect x='16' y='3.4' width='4' height='3.4' fill='%23f4ecdd'/><rect x='20' y='3.4' width='12' height='3.4' fill='%231d3350'/><rect x='0' y='6.8' width='32' height='3.4' fill='%23b8323c'/><rect x='0' y='10.2' width='4' height='3.4' fill='%23b8323c'/><rect x='4' y='10.2' width='4' height='3.4' fill='%23f4ecdd'/><rect x='8' y='10.2' width='12' height='3.4' fill='%23b8323c'/><rect x='20' y='10.2' width='4' height='3.4' fill='%23f4ecdd'/><rect x='24' y='10.2' width='8' height='3.4' fill='%23b8323c'/><rect x='0' y='13.6' width='12' height='3.4' fill='%23f4ecdd'/><rect x='12' y='13.6' width='4' height='3.4' fill='%23b8323c'/><rect x='16' y='13.6' width='12' height='3.4' fill='%23f4ecdd'/><rect x='28' y='13.6' width='4' height='3.4' fill='%23b8323c'/><rect x='0' y='17' width='4' height='3.4' fill='%23b8323c'/><rect x='4' y='17' width='4' height='3.4' fill='%23f4ecdd'/><rect x='8' y='17' width='12' height='3.4' fill='%23b8323c'/><rect x='20' y='17' width='4' height='3.4' fill='%23f4ecdd'/><rect x='24' y='17' width='8' height='3.4' fill='%23b8323c'/><rect x='0' y='20.4' width='32' height='3.4' fill='%23b8323c'/><rect x='0' y='23.8' width='8' height='3.4' fill='%231d3350'/><rect x='8' y='23.8' width='4' height='3.4' fill='%23f4ecdd'/><rect x='12' y='23.8' width='12' height='3.4' fill='%231d3350'/><rect x='24' y='23.8' width='4' height='3.4' fill='%23f4ecdd'/><rect x='28' y='23.8' width='4' height='3.4' fill='%231d3350'/><rect x='0' y='27.2' width='32' height='3.4' fill='%231d3350'/><rect width='100%' height='100%' fill='url(%23k)'/></svg>") repeat-x left top / 32px 30.6px;
  --knit-slim: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='15'><defs><pattern id='k' width='4' height='3' patternUnits='userSpaceOnUse'><path d='M0 0q.3 1.86 2 3M4 0q-.3 1.86 -2 3' fill='none' stroke='%23000' stroke-opacity='.3' stroke-width='.7'/><path d='M0.88 0.36q.2 1.20 0.88 1.86M3.12 0.36q-.2 1.20 -0.88 1.86' fill='none' stroke='%23fff' stroke-opacity='.22' stroke-width='.6' stroke-linecap='round'/></pattern></defs><rect x='0' y='0' width='32' height='3' fill='%23b8323c'/><rect x='0' y='3' width='8' height='3' fill='%23b8323c'/><rect x='8' y='3' width='4' height='3' fill='%23f4ecdd'/><rect x='12' y='3' width='12' height='3' fill='%23b8323c'/><rect x='24' y='3' width='4' height='3' fill='%23f4ecdd'/><rect x='28' y='3' width='4' height='3' fill='%23b8323c'/><rect x='0' y='6' width='4' height='3' fill='%23b8323c'/><rect x='4' y='6' width='4' height='3' fill='%23f4ecdd'/><rect x='8' y='6' width='4' height='3' fill='%23b8323c'/><rect x='12' y='6' width='4' height='3' fill='%23f4ecdd'/><rect x='16' y='6' width='4' height='3' fill='%23b8323c'/><rect x='20' y='6' width='4' height='3' fill='%23f4ecdd'/><rect x='24' y='6' width='4' height='3' fill='%23b8323c'/><rect x='28' y='6' width='4' height='3' fill='%23f4ecdd'/><rect x='0' y='9' width='8' height='3' fill='%23b8323c'/><rect x='8' y='9' width='4' height='3' fill='%23f4ecdd'/><rect x='12' y='9' width='12' height='3' fill='%23b8323c'/><rect x='24' y='9' width='4' height='3' fill='%23f4ecdd'/><rect x='28' y='9' width='4' height='3' fill='%23b8323c'/><rect x='0' y='12' width='32' height='3' fill='%23b8323c'/><rect width='100%' height='100%' fill='url(%23k)'/></svg>") repeat-x left top / 32px 15px;
  --knit-slim-img: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='15'><defs><pattern id='k' width='4' height='3' patternUnits='userSpaceOnUse'><path d='M0 0q.3 1.86 2 3M4 0q-.3 1.86 -2 3' fill='none' stroke='%23000' stroke-opacity='.3' stroke-width='.7'/><path d='M0.88 0.36q.2 1.20 0.88 1.86M3.12 0.36q-.2 1.20 -0.88 1.86' fill='none' stroke='%23fff' stroke-opacity='.22' stroke-width='.6' stroke-linecap='round'/></pattern></defs><rect x='0' y='0' width='32' height='3' fill='%23b8323c'/><rect x='0' y='3' width='8' height='3' fill='%23b8323c'/><rect x='8' y='3' width='4' height='3' fill='%23f4ecdd'/><rect x='12' y='3' width='12' height='3' fill='%23b8323c'/><rect x='24' y='3' width='4' height='3' fill='%23f4ecdd'/><rect x='28' y='3' width='4' height='3' fill='%23b8323c'/><rect x='0' y='6' width='4' height='3' fill='%23b8323c'/><rect x='4' y='6' width='4' height='3' fill='%23f4ecdd'/><rect x='8' y='6' width='4' height='3' fill='%23b8323c'/><rect x='12' y='6' width='4' height='3' fill='%23f4ecdd'/><rect x='16' y='6' width='4' height='3' fill='%23b8323c'/><rect x='20' y='6' width='4' height='3' fill='%23f4ecdd'/><rect x='24' y='6' width='4' height='3' fill='%23b8323c'/><rect x='28' y='6' width='4' height='3' fill='%23f4ecdd'/><rect x='0' y='9' width='8' height='3' fill='%23b8323c'/><rect x='8' y='9' width='4' height='3' fill='%23f4ecdd'/><rect x='12' y='9' width='12' height='3' fill='%23b8323c'/><rect x='24' y='9' width='4' height='3' fill='%23f4ecdd'/><rect x='28' y='9' width='4' height='3' fill='%23b8323c'/><rect x='0' y='12' width='32' height='3' fill='%23b8323c'/><rect width='100%' height='100%' fill='url(%23k)'/></svg>");
  --knit-yoke: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='80' height='91.8'><defs><pattern id='k' width='4' height='3.4' patternUnits='userSpaceOnUse'><path d='M0 0q.3 2.11 2 3.4M4 0q-.3 2.11 -2 3.4' fill='none' stroke='%23000' stroke-opacity='.3' stroke-width='.7'/><path d='M0.88 0.41q.2 1.36 0.88 2.11M3.12 0.41q-.2 1.36 -0.88 2.11' fill='none' stroke='%23fff' stroke-opacity='.22' stroke-width='.6' stroke-linecap='round'/></pattern></defs><rect x='0' y='0' width='80' height='3.4' fill='%231d3350'/><rect x='0' y='3.4' width='8' height='3.4' fill='%231d3350'/><rect x='8' y='3.4' width='4' height='3.4' fill='%23f4ecdd'/><rect x='12' y='3.4' width='12' height='3.4' fill='%231d3350'/><rect x='24' y='3.4' width='4' height='3.4' fill='%23f4ecdd'/><rect x='28' y='3.4' width='12' height='3.4' fill='%231d3350'/><rect x='40' y='3.4' width='4' height='3.4' fill='%23f4ecdd'/><rect x='44' y='3.4' width='12' height='3.4' fill='%231d3350'/><rect x='56' y='3.4' width='4' height='3.4' fill='%23f4ecdd'/><rect x='60' y='3.4' width='12' height='3.4' fill='%231d3350'/><rect x='72' y='3.4' width='4' height='3.4' fill='%23f4ecdd'/><rect x='76' y='3.4' width='4' height='3.4' fill='%231d3350'/><rect x='0' y='6.8' width='80' height='3.4' fill='%231d3350'/><rect x='0' y='10.2' width='80' height='3.4' fill='%23b8323c'/><rect x='0' y='13.6' width='8' height='3.4' fill='%23b8323c'/><rect x='8' y='13.6' width='4' height='3.4' fill='%23f4ecdd'/><rect x='12' y='13.6' width='12' height='3.4' fill='%23b8323c'/><rect x='24' y='13.6' width='4' height='3.4' fill='%23f4ecdd'/><rect x='28' y='13.6' width='12' height='3.4' fill='%23b8323c'/><rect x='40' y='13.6' width='4' height='3.4' fill='%23f4ecdd'/><rect x='44' y='13.6' width='12' height='3.4' fill='%23b8323c'/><rect x='56' y='13.6' width='4' height='3.4' fill='%23f4ecdd'/><rect x='60' y='13.6' width='12' height='3.4' fill='%23b8323c'/><rect x='72' y='13.6' width='4' height='3.4' fill='%23f4ecdd'/><rect x='76' y='13.6' width='4' height='3.4' fill='%23b8323c'/><rect x='0' y='17' width='4' height='3.4' fill='%23b8323c'/><rect x='4' y='17' width='12' height='3.4' fill='%23f4ecdd'/><rect x='16' y='17' width='4' height='3.4' fill='%23b8323c'/><rect x='20' y='17' width='12' height='3.4' fill='%23f4ecdd'/><rect x='32' y='17' width='4' height='3.4' fill='%23b8323c'/><rect x='36' y='17' width='12' height='3.4' fill='%23f4ecdd'/><rect x='48' y='17' width='4' height='3.4' fill='%23b8323c'/><rect x='52' y='17' width='12' height='3.4' fill='%23f4ecdd'/><rect x='64' y='17' width='4' height='3.4' fill='%23b8323c'/><rect x='68' y='17' width='12' height='3.4' fill='%23f4ecdd'/><rect x='0' y='20.4' width='8' height='3.4' fill='%23b8323c'/><rect x='8' y='20.4' width='4' height='3.4' fill='%23f4ecdd'/><rect x='12' y='20.4' width='12' height='3.4' fill='%23b8323c'/><rect x='24' y='20.4' width='4' height='3.4' fill='%23f4ecdd'/><rect x='28' y='20.4' width='12' height='3.4' fill='%23b8323c'/><rect x='40' y='20.4' width='4' height='3.4' fill='%23f4ecdd'/><rect x='44' y='20.4' width='12' height='3.4' fill='%23b8323c'/><rect x='56' y='20.4' width='4' height='3.4' fill='%23f4ecdd'/><rect x='60' y='20.4' width='12' height='3.4' fill='%23b8323c'/><rect x='72' y='20.4' width='4' height='3.4' fill='%23f4ecdd'/><rect x='76' y='20.4' width='4' height='3.4' fill='%23b8323c'/><rect x='0' y='23.8' width='80' height='3.4' fill='%23b8323c'/><rect x='0' y='27.2' width='80' height='3.4' fill='%231d3350'/><rect x='0' y='30.6' width='80' height='3.4' fill='%231d3350'/><rect x='0' y='34' width='36' height='3.4' fill='%231d3350'/><rect x='36' y='34' width='4' height='3.4' fill='%23f4ecdd'/><rect x='40' y='34' width='40' height='3.4' fill='%231d3350'/><rect x='0' y='37.4' width='32' height='3.4' fill='%231d3350'/><rect x='32' y='37.4' width='12' height='3.4' fill='%23f4ecdd'/><rect x='44' y='37.4' width='36' height='3.4' fill='%231d3350'/><rect x='0' y='40.8' width='12' height='3.4' fill='%231d3350'/><rect x='12' y='40.8' width='8' height='3.4' fill='%23f4ecdd'/><rect x='20' y='40.8' width='12' height='3.4' fill='%231d3350'/><rect x='32' y='40.8' width='12' height='3.4' fill='%23f4ecdd'/><rect x='44' y='40.8' width='12' height='3.4' fill='%231d3350'/><rect x='56' y='40.8' width='8' height='3.4' fill='%23f4ecdd'/><rect x='64' y='40.8' width='16' height='3.4' fill='%231d3350'/><rect x='0' y='44.2' width='12' height='3.4' fill='%231d3350'/><rect x='12' y='44.2' width='12' height='3.4' fill='%23f4ecdd'/><rect x='24' y='44.2' width='8' height='3.4' fill='%231d3350'/><rect x='32' y='44.2' width='12' height='3.4' fill='%23f4ecdd'/><rect x='44' y='44.2' width='8' height='3.4' fill='%231d3350'/><rect x='52' y='44.2' width='12' height='3.4' fill='%23f4ecdd'/><rect x='64' y='44.2' width='16' height='3.4' fill='%231d3350'/><rect x='0' y='47.6' width='16' height='3.4' fill='%231d3350'/><rect x='16' y='47.6' width='12' height='3.4' fill='%23f4ecdd'/><rect x='28' y='47.6' width='4' height='3.4' fill='%231d3350'/><rect x='32' y='47.6' width='12' height='3.4' fill='%23f4ecdd'/><rect x='44' y='47.6' width='4' height='3.4' fill='%231d3350'/><rect x='48' y='47.6' width='12' height='3.4' fill='%23f4ecdd'/><rect x='60' y='47.6' width='20' height='3.4' fill='%231d3350'/><rect x='0' y='51' width='20' height='3.4' fill='%231d3350'/><rect x='20' y='51' width='12' height='3.4' fill='%23f4ecdd'/><rect x='32' y='51' width='4' height='3.4' fill='%231d3350'/><rect x='36' y='51' width='4' height='3.4' fill='%23f4ecdd'/><rect x='40' y='51' width='4' height='3.4' fill='%231d3350'/><rect x='44' y='51' width='12' height='3.4' fill='%23f4ecdd'/><rect x='56' y='51' width='24' height='3.4' fill='%231d3350'/><rect x='0' y='54.4' width='12' height='3.4' fill='%231d3350'/><rect x='12' y='54.4' width='24' height='3.4' fill='%23f4ecdd'/><rect x='36' y='54.4' width='4' height='3.4' fill='%231d3350'/><rect x='40' y='54.4' width='24' height='3.4' fill='%23f4ecdd'/><rect x='64' y='54.4' width='16' height='3.4' fill='%231d3350'/><rect x='0' y='57.8' width='20' height='3.4' fill='%231d3350'/><rect x='20' y='57.8' width='12' height='3.4' fill='%23f4ecdd'/><rect x='32' y='57.8' width='4' height='3.4' fill='%231d3350'/><rect x='36' y='57.8' width='4' height='3.4' fill='%23f4ecdd'/><rect x='40' y='57.8' width='4' height='3.4' fill='%231d3350'/><rect x='44' y='57.8' width='12' height='3.4' fill='%23f4ecdd'/><rect x='56' y='57.8' width='24' height='3.4' fill='%231d3350'/><rect x='0' y='61.2' width='16' height='3.4' fill='%231d3350'/><rect x='16' y='61.2' width='12' height='3.4' fill='%23f4ecdd'/><rect x='28' y='61.2' width='4' height='3.4' fill='%231d3350'/><rect x='32' y='61.2' width='12' height='3.4' fill='%23f4ecdd'/><rect x='44' y='61.2' width='4' height='3.4' fill='%231d3350'/><rect x='48' y='61.2' width='12' height='3.4' fill='%23f4ecdd'/><rect x='60' y='61.2' width='20' height='3.4' fill='%231d3350'/><rect x='0' y='64.6' width='12' height='3.4' fill='%231d3350'/><rect x='12' y='64.6' width='12' height='3.4' fill='%23f4ecdd'/><rect x='24' y='64.6' width='8' height='3.4' fill='%231d3350'/><rect x='32' y='64.6' width='12' height='3.4' fill='%23f4ecdd'/><rect x='44' y='64.6' width='8' height='3.4' fill='%231d3350'/><rect x='52' y='64.6' width='12' height='3.4' fill='%23f4ecdd'/><rect x='64' y='64.6' width='16' height='3.4' fill='%231d3350'/><rect x='0' y='68' width='12' height='3.4' fill='%231d3350'/><rect x='12' y='68' width='8' height='3.4' fill='%23f4ecdd'/><rect x='20' y='68' width='12' height='3.4' fill='%231d3350'/><rect x='32' y='68' width='12' height='3.4' fill='%23f4ecdd'/><rect x='44' y='68' width='12' height='3.4' fill='%231d3350'/><rect x='56' y='68' width='8' height='3.4' fill='%23f4ecdd'/><rect x='64' y='68' width='16' height='3.4' fill='%231d3350'/><rect x='0' y='71.4' width='32' height='3.4' fill='%231d3350'/><rect x='32' y='71.4' width='12' height='3.4' fill='%23f4ecdd'/><rect x='44' y='71.4' width='36' height='3.4' fill='%231d3350'/><rect x='0' y='74.8' width='36' height='3.4' fill='%231d3350'/><rect x='36' y='74.8' width='4' height='3.4' fill='%23f4ecdd'/><rect x='40' y='74.8' width='40' height='3.4' fill='%231d3350'/><rect x='0' y='78.2' width='80' height='3.4' fill='%231d3350'/><rect x='0' y='81.6' width='80' height='3.4' fill='%231d3350'/><rect x='0' y='85' width='4' height='3.4' fill='%231d3350'/><rect x='4' y='85' width='4' height='3.4' fill='%23f4ecdd'/><rect x='8' y='85' width='12' height='3.4' fill='%231d3350'/><rect x='20' y='85' width='4' height='3.4' fill='%23f4ecdd'/><rect x='24' y='85' width='12' height='3.4' fill='%231d3350'/><rect x='36' y='85' width='4' height='3.4' fill='%23f4ecdd'/><rect x='40' y='85' width='12' height='3.4' fill='%231d3350'/><rect x='52' y='85' width='4' height='3.4' fill='%23f4ecdd'/><rect x='56' y='85' width='12' height='3.4' fill='%231d3350'/><rect x='68' y='85' width='4' height='3.4' fill='%23f4ecdd'/><rect x='72' y='85' width='8' height='3.4' fill='%231d3350'/><rect x='0' y='88.4' width='80' height='3.4' fill='%231d3350'/><rect width='100%' height='100%' fill='url(%23k)'/></svg>") repeat-x left top / 80px 91.8px;
  --stitch: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='6' height='5'><path d='M0 0q.3 3.10 3 5M6 0q-.3 3.10 -3 5' fill='none' stroke='%23000' stroke-opacity='0.3' stroke-width='.8'/><path d='M1.32 0.60q.2 2.00 1.32 3.10M4.68 0.60q-.2 2.00 -1.32 3.10' fill='none' stroke='%23fff' stroke-opacity='0.22' stroke-width='.7' stroke-linecap='round'/></svg>");
  --stitch-s: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='4' height='3.4'><path d='M0 0q.3 2.11 2 3.4M4 0q-.3 2.11 -2 3.4' fill='none' stroke='%23000' stroke-opacity='0.3' stroke-width='.8'/><path d='M0.88 0.41q.2 1.36 0.88 2.11M3.12 0.41q-.2 1.36 -0.88 2.11' fill='none' stroke='%23fff' stroke-opacity='0.22' stroke-width='.7' stroke-linecap='round'/></svg>");

  /* A snowy night: the ground of the footer, the winners and wallet
     cards, the login panel and the splash, in both modes */
  --night-bg:
    radial-gradient(2px 2px at 12% 18%, rgba(255, 255, 255, .7), transparent 60%),
    radial-gradient(1.5px 1.5px at 34% 8%, rgba(255, 255, 255, .55), transparent 60%),
    radial-gradient(2px 2px at 61% 22%, rgba(255, 255, 255, .6), transparent 60%),
    radial-gradient(1.5px 1.5px at 83% 12%, rgba(255, 255, 255, .5), transparent 60%),
    radial-gradient(480px 260px at 92% 0%, rgba(169, 203, 228, .2), transparent 70%),
    radial-gradient(420px 260px at 2% 100%, rgba(232, 135, 58, .18), transparent 70%),
    linear-gradient(180deg, #1d3350 0%, #15263d 55%, #0f1c2e 100%);
  /* Falling snow, three layers of flakes as one 220px tile */
  --snow-tile: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><g fill='%23ffffff'><circle cx='14' cy='22' r='2.2' opacity='.9'/><circle cx='70' cy='60' r='1.4' opacity='.7'/><circle cx='122' cy='18' r='1.8' opacity='.85'/><circle cx='180' cy='74' r='2.4' opacity='.9'/><circle cx='40' cy='120' r='1.6' opacity='.75'/><circle cx='98' cy='146' r='2.6' opacity='.9'/><circle cx='160' cy='132' r='1.3' opacity='.6'/><circle cx='206' cy='176' r='1.9' opacity='.8'/><circle cx='22' cy='196' r='1.2' opacity='.6'/><circle cx='132' cy='206' r='2' opacity='.85'/><circle cx='76' cy='94' r='1' opacity='.5'/><circle cx='196' cy='16' r='1.1' opacity='.55'/></g></svg>");

  /* Snowflakes scattered over the page, faint */
  --flurry: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='360' height='360'><defs><g id='f'><path d='M0 -9V9M-7.8 -4.5L7.8 4.5M-7.8 4.5L7.8 -4.5M0 -6.5L-2.2 -8.6M0 -6.5L2.2 -8.6M0 6.5L-2.2 8.6M0 6.5L2.2 8.6M5.6 -3.2L8.6 -2.6M5.6 -3.2L6.4 -6.1M-5.6 3.2L-8.6 2.6M-5.6 3.2L-6.4 6.1M5.6 3.2L8.6 2.6M5.6 3.2L6.4 6.1M-5.6 -3.2L-8.6 -2.6M-5.6 -3.2L-6.4 -6.1'/></g></defs><g fill='none' stroke='%232f6596' stroke-opacity='.1' stroke-width='1.2' stroke-linecap='round'><use href='%23f' transform='translate(60 52)'/><use href='%23f' transform='translate(268 170) scale(.8)'/><use href='%23f' transform='translate(150 290) scale(.6)'/></g><g fill='%232f6596' fill-opacity='.1'><circle cx='196' cy='64' r='1.8'/><circle cx='42' cy='212' r='1.4'/><circle cx='318' cy='312' r='2'/><circle cx='112' cy='160' r='1.1'/></g></svg>");

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

html.dark {
  --paper:        #1a1817;
  --paper-2:      #242120;
  --paper-3:      #2f2b29;
  --ink:          #f5eee5;
  --ink-2:        #ddd3c6;
  --ink-soft:     #a99f94;
  --rule:         rgba(245, 238, 229, 0.13);
  --rule-soft:    rgba(245, 238, 229, 0.07);
  --shadow:       0 1px 2px rgba(0, 0, 0, .35), 0 6px 18px -8px rgba(0, 0, 0, .6);
  --shadow-md:    0 2px 4px rgba(0, 0, 0, .35), 0 18px 36px -14px rgba(0, 0, 0, .8);

  /* Ember */
  --theme-50:  #2b1d14;
  --theme-100: #3d2717;
  --theme-200: #5e3a1d;
  --theme-300: #ffd3a8;
  --theme-400: #ffbd80;
  --theme-500: #f5a35c;
  --theme-600: #f8b574;
  --theme-700: #ffd3a8;
  --theme-800: #ffe6cc;
  --theme-900: #fff3e6;
  --theme-500-rgb: 245, 163, 92;
  --theme-600-rgb: 248, 181, 116;

  --berry:   #c9434c;
  --berry-2: #e2707a;
  --frost:   #3a4a5a;
  --frost-2: #9cc4e4;
  --rose-soft: rgba(245, 163, 92, 0.13);
  --gold:       #f0c27a;
  --gold-2:     #f5d49a;
  --gold-soft:  rgba(245, 163, 92, 0.12);
  --felt:       #141211;
  --felt-2:     #242120;
  --peacock:    #8fcdbd;
  --peacock-soft: rgba(143, 205, 189, 0.14);

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

  --btn-bg:       #f5a35c;
  --btn-bg-hover: #f8b574;
  --btn-ink:      #2a1606;
  --btn-edge:     #b86a2c;
  --btn-shadow:   0 2px 0 var(--btn-edge), 0 8px 22px -8px rgba(245, 163, 92, .4);
  --btn-shadow-hover: 0 3px 0 var(--btn-edge), 0 12px 28px -8px rgba(245, 163, 92, .55);

  --knit-band: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='30.6'><defs><pattern id='k' width='4' height='3.4' patternUnits='userSpaceOnUse'><path d='M0 0q.3 2.11 2 3.4M4 0q-.3 2.11 -2 3.4' fill='none' stroke='%23000' stroke-opacity='.3' stroke-width='.7'/><path d='M0.88 0.41q.2 1.36 0.88 2.11M3.12 0.41q-.2 1.36 -0.88 2.11' fill='none' stroke='%23fff' stroke-opacity='.22' stroke-width='.6' stroke-linecap='round'/></pattern></defs><rect x='0' y='0' width='32' height='3.4' fill='%232b2725'/><rect x='0' y='3.4' width='4' height='3.4' fill='%23efe3d0'/><rect x='4' y='3.4' width='12' height='3.4' fill='%232b2725'/><rect x='16' y='3.4' width='4' height='3.4' fill='%23efe3d0'/><rect x='20' y='3.4' width='12' height='3.4' fill='%232b2725'/><rect x='0' y='6.8' width='32' height='3.4' fill='%23a8323a'/><rect x='0' y='10.2' width='4' height='3.4' fill='%23a8323a'/><rect x='4' y='10.2' width='4' height='3.4' fill='%23efe3d0'/><rect x='8' y='10.2' width='12' height='3.4' fill='%23a8323a'/><rect x='20' y='10.2' width='4' height='3.4' fill='%23efe3d0'/><rect x='24' y='10.2' width='8' height='3.4' fill='%23a8323a'/><rect x='0' y='13.6' width='12' height='3.4' fill='%23efe3d0'/><rect x='12' y='13.6' width='4' height='3.4' fill='%23a8323a'/><rect x='16' y='13.6' width='12' height='3.4' fill='%23efe3d0'/><rect x='28' y='13.6' width='4' height='3.4' fill='%23a8323a'/><rect x='0' y='17' width='4' height='3.4' fill='%23a8323a'/><rect x='4' y='17' width='4' height='3.4' fill='%23efe3d0'/><rect x='8' y='17' width='12' height='3.4' fill='%23a8323a'/><rect x='20' y='17' width='4' height='3.4' fill='%23efe3d0'/><rect x='24' y='17' width='8' height='3.4' fill='%23a8323a'/><rect x='0' y='20.4' width='32' height='3.4' fill='%23a8323a'/><rect x='0' y='23.8' width='8' height='3.4' fill='%232b2725'/><rect x='8' y='23.8' width='4' height='3.4' fill='%23efe3d0'/><rect x='12' y='23.8' width='12' height='3.4' fill='%232b2725'/><rect x='24' y='23.8' width='4' height='3.4' fill='%23efe3d0'/><rect x='28' y='23.8' width='4' height='3.4' fill='%232b2725'/><rect x='0' y='27.2' width='32' height='3.4' fill='%232b2725'/><rect width='100%' height='100%' fill='url(%23k)'/></svg>") repeat-x left top / 32px 30.6px;
  --knit-slim: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='15'><defs><pattern id='k' width='4' height='3' patternUnits='userSpaceOnUse'><path d='M0 0q.3 1.86 2 3M4 0q-.3 1.86 -2 3' fill='none' stroke='%23000' stroke-opacity='.3' stroke-width='.7'/><path d='M0.88 0.36q.2 1.20 0.88 1.86M3.12 0.36q-.2 1.20 -0.88 1.86' fill='none' stroke='%23fff' stroke-opacity='.22' stroke-width='.6' stroke-linecap='round'/></pattern></defs><rect x='0' y='0' width='32' height='3' fill='%23a8323a'/><rect x='0' y='3' width='8' height='3' fill='%23a8323a'/><rect x='8' y='3' width='4' height='3' fill='%23efe3d0'/><rect x='12' y='3' width='12' height='3' fill='%23a8323a'/><rect x='24' y='3' width='4' height='3' fill='%23efe3d0'/><rect x='28' y='3' width='4' height='3' fill='%23a8323a'/><rect x='0' y='6' width='4' height='3' fill='%23a8323a'/><rect x='4' y='6' width='4' height='3' fill='%23efe3d0'/><rect x='8' y='6' width='4' height='3' fill='%23a8323a'/><rect x='12' y='6' width='4' height='3' fill='%23efe3d0'/><rect x='16' y='6' width='4' height='3' fill='%23a8323a'/><rect x='20' y='6' width='4' height='3' fill='%23efe3d0'/><rect x='24' y='6' width='4' height='3' fill='%23a8323a'/><rect x='28' y='6' width='4' height='3' fill='%23efe3d0'/><rect x='0' y='9' width='8' height='3' fill='%23a8323a'/><rect x='8' y='9' width='4' height='3' fill='%23efe3d0'/><rect x='12' y='9' width='12' height='3' fill='%23a8323a'/><rect x='24' y='9' width='4' height='3' fill='%23efe3d0'/><rect x='28' y='9' width='4' height='3' fill='%23a8323a'/><rect x='0' y='12' width='32' height='3' fill='%23a8323a'/><rect width='100%' height='100%' fill='url(%23k)'/></svg>") repeat-x left top / 32px 15px;

  --flurry: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='360' height='360'><defs><g id='f'><path d='M0 -9V9M-7.8 -4.5L7.8 4.5M-7.8 4.5L7.8 -4.5M0 -6.5L-2.2 -8.6M0 -6.5L2.2 -8.6M0 6.5L-2.2 8.6M0 6.5L2.2 8.6M5.6 -3.2L8.6 -2.6M5.6 -3.2L6.4 -6.1M-5.6 3.2L-8.6 2.6M-5.6 3.2L-6.4 6.1M5.6 3.2L8.6 2.6M5.6 3.2L6.4 6.1M-5.6 -3.2L-8.6 -2.6M-5.6 -3.2L-6.4 -6.1'/></g></defs><g fill='none' stroke='%23f5d49a' stroke-opacity='.07' stroke-width='1.2' stroke-linecap='round'><use href='%23f' transform='translate(60 52)'/><use href='%23f' transform='translate(268 170) scale(.8)'/><use href='%23f' transform='translate(150 290) scale(.6)'/></g><g fill='%23f5d49a' fill-opacity='.07'><circle cx='196' cy='64' r='1.8'/><circle cx='42' cy='212' r='1.4'/><circle cx='318' cy='312' r='2'/><circle cx='112' cy='160' r='1.1'/></g></svg>");
  /* Firelight: the hearth glows from the lower corner of the room and
     warms the ceiling above it */
  --page-bg:
    radial-gradient(900px 520px at 0% 100%, rgba(232, 135, 58, 0.12), transparent 70%) fixed no-repeat,
    radial-gradient(900px 420px at 12% -160px, rgba(245, 163, 92, 0.09), transparent 70%) no-repeat,
    var(--flurry) repeat,
    var(--paper);
}

/* Bricolage is drawn for Latin and Vietnamese; Wix Madefor has no Greek.
   Where a language's own letters would fall back mid-word, headings use
   the interface face at full width. */
html:is([lang="ru"], [lang="bn"], [lang="zh-CN"], [lang="ar"], [lang="ur"]) {
  --font-display: 'Wix Madefor Text', 'Segoe UI', system-ui, sans-serif;
  --display-stretch: 100%;
}
html[lang="gr"] {
  --font-display: 'Segoe UI', system-ui, 'Noto Sans', sans-serif;
  --font-ui: 'Segoe UI', system-ui, 'Noto Sans', sans-serif;
  --display-stretch: 100%;
}

/* ── 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: 800;
  font-stretch: var(--display-stretch);
  font-synthesis: none;
  letter-spacing: -0.005em;
}
html .display-italic, html .italic.font-display { font-style: normal; color: var(--berry); }

::selection { background: var(--frost-2); color: #1a2a3f; }

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

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

/* Section eyebrow: a small snowflake in front of the label */
html .section-eyebrow {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-family: var(--font-ui);
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--theme-600);
  margin-bottom: 0.7rem;
}
html .section-eyebrow::before {
  content: ''; flex-shrink: 0;
  width: 15px; height: 15px;
  background: var(--berry);
  -webkit-mask: var(--flake-mask) center / contain no-repeat;
  mask: var(--flake-mask) center / contain no-repeat;
}
:root {
  --flake-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-12 -12 24 24'><g fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'><path id='a' d='M0 0V-10.5M0 -6.5L-2.8 -9.2M0 -6.5L2.8 -9.2'/><use href='%23a' transform='rotate(60)'/><use href='%23a' transform='rotate(120)'/><use href='%23a' transform='rotate(180)'/><use href='%23a' transform='rotate(240)'/><use href='%23a' transform='rotate(300)'/></g></svg>");
}

.btn-view-all {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-family: var(--font-ui);
  font-size: 0.92rem; font-weight: 700;
  white-space: nowrap; flex-shrink: 0;
  color: var(--ink);
  padding: .3rem .1rem 2px;
  border-bottom: 2px solid var(--berry);
  text-decoration: none;
  transition: gap 0.18s ease;
}
.btn-view-all:hover { gap: 0.75rem; }
[dir="rtl"] .btn-view-all svg { transform: scaleX(-1); }

.ed-rule { background-color: var(--rule); }
.ed-rule-soft { background-color: var(--rule-soft); }
.ed-grain::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: var(--flurry); }

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

/* ── 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 var(--rose-soft); }
.ed-search { background: transparent; border: none; }

.hdr-strip, .hdr-strip .ed-status { color: rgba(244, 236, 221, 0.9); }
.hdr-strip a:hover, .hdr-strip button:hover { color: #ffffff; }

/* The knitted band under the main header bar and wherever a section
   needs a border */
.ws-band { height: 15px; background: var(--knit-slim); }
.ws-band--wide { height: 30.6px; background: var(--knit-band); }

/* The sale chip in the status strip */
.ws-strip-chip { display: inline-flex; align-items: center; gap: .45rem; font-weight: 700; letter-spacing: .06em; color: #ffffff; }
.ws-strip-chip svg { width: 13px; height: 13px; flex-shrink: 0; color: #a9cbe4; }
html.dark .ws-strip-chip svg { color: #f5a35c; }

.ed-subnav { align-items: center; background: var(--paper-2); border-bottom: 1px solid var(--rule); }
.ed-subnav-inner { display: flex; align-items: center; gap: 1.25rem; width: 100%; padding: 0.6rem 2rem; }
@media (min-width: 1280px) { .ed-subnav-inner { padding-left: 2.5rem; padding-right: 2.5rem; } }
.ed-subnav-eyebrow {
  flex-shrink: 0;
  font-family: var(--font-ui); font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--theme-600); white-space: nowrap;
  padding-right: 1.25rem; border-right: 1px solid var(--rule);
}
[dir="rtl"] .ed-subnav-eyebrow { padding-right: 0; padding-left: 1.25rem; border-right: 0; border-left: 1px solid var(--rule); }
.ed-subnav-items { display: flex; align-items: center; gap: 0.3rem; flex-wrap: wrap; }
.ed-subnav-item {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.42rem 0.85rem; border-radius: 999px;
  font-family: var(--font-ui); font-size: 0.9rem; font-weight: 500;
  color: var(--ink-2); text-decoration: none;
}
.ed-subnav-item svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; flex-shrink: 0; }
.ed-subnav-item:hover { color: var(--ink); background: var(--paper-3); }
.ed-subnav-item.active { background: var(--btn-bg); color: var(--btn-ink); }
.ed-subnav-item:focus-visible { outline: 2px solid var(--theme-500); outline-offset: 2px; }

/* ── Links and buttons ── */
.ed-link-arrow {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-family: var(--font-ui); font-size: 0.93rem; font-weight: 700;
  color: var(--ink); text-decoration: none;
  padding-bottom: 2px; border-bottom: 2px solid var(--berry);
  transition: gap 0.18s ease;
}
.ed-link-arrow:hover { gap: 0.7rem; }

html .ed-btn-primary, html .ed-plan-cta, html .drawer-login {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
  padding: 0.8rem 1.55rem;
  white-space: nowrap;
  font-family: var(--font-ui); font-size: 0.97rem; font-weight: 700;
  color: var(--btn-ink);
  background: var(--btn-bg);
  border: 0;
  border-radius: 12px;
  box-shadow: var(--btn-shadow);
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
html .ed-btn-primary:hover, html .ed-plan-cta:hover, html .drawer-login:hover {
  background: var(--btn-bg-hover); color: var(--btn-ink);
  transform: translateY(-1px); box-shadow: var(--btn-shadow-hover);
}
html .ed-btn-primary:active, html .ed-plan-cta:active { transform: translateY(1px); }
html.dark .ed-btn-primary, html.dark .ed-btn-primary:hover,
html.dark .ed-plan-cta, html.dark .ed-plan-cta:hover, html.dark button.ed-plan-cta { color: var(--btn-ink); }
html body .ed-plan-featured .ed-plan-cta, html.dark body .ed-plan-featured .ed-plan-cta,
html body .ed-plan-cta, html.dark body .ed-plan-cta {
  background: var(--btn-bg); color: var(--btn-ink); border: 0; box-shadow: var(--btn-shadow);
}
html body .ed-plan-featured .ed-plan-cta { background: #f4ecdd; color: #1a2a3f; box-shadow: 0 2px 0 #cbbd9f; }
.ed-btn-primary:focus-visible, .ed-btn-secondary:focus-visible, .ed-plan-cta:focus-visible { outline: 3px solid var(--theme-500); outline-offset: 3px; }

.ed-btn-secondary {
  display: inline-flex; align-items: center; gap: 0.55rem;
  padding: 0.76rem 1.4rem;
  font-family: var(--font-ui); font-size: 0.95rem; font-weight: 600;
  color: var(--ink); background: var(--paper-2);
  border: 1px solid var(--rule); border-radius: 12px;
  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: soft corners, a fine edge, a lift on hover ── */
html .ed-plan, html .shop-card {
  position: relative;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
html .ed-plan:hover, html .shop-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
html .ed-plan-featured {
  position: relative;
  background: var(--night-bg); color: #f4ecdd;
  border: 1px solid rgba(169, 203, 228, .3); border-radius: var(--radius);
  overflow: hidden;
}
.ed-plan-featured::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 15px;
  background: var(--knit-slim); pointer-events: none;
}
.ed-plan-hairline { border-color: var(--rule); }
.ed-plan-featured .ed-plan-hairline { border-color: rgba(244, 236, 221, .2); }

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

/* ── Drawer ── */
.drawer-section-label {
  display: flex; align-items: center; gap: 0.6rem;
  font-family: var(--font-ui); font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--theme-600); padding: 1.1rem 1.5rem 0.4rem;
}
.drawer-section-label::after { content: ''; flex: 1; height: 1px; background: var(--rule); }
/* header.css forces slate on these after dark */
html.dark .drawer-section-label { color: var(--theme-600) !important; }
.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; }
/* header.css makes these full width; with the margins here they would
   stick out of the closed drawer */
html .drawer-login, html .drawer-logout { display: flex; width: auto; }
.drawer-logout {
  display: flex; align-items: center; justify-content: center; gap: 0.5rem;
  border-radius: 12px; 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(243, 245, 247, 0.94);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--rule);
}
html.dark .mobile-glass-header { background: rgba(26, 24, 23, 0.94); }

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

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

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

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

/* ── Snow falling: two layers of the snow tile drifting down at
   different speeds. Used inside the window panes, the footer, the
   winners hero and the splash. ── */
.ws-snowfall {
  position: absolute; inset: 0; pointer-events: none;
  background: var(--snow-tile) 0 0 / 220px 220px, var(--snow-tile) 60px 90px / 140px 140px;
  opacity: .8;
}
@media (prefers-reduced-motion: no-preference) {
  .ws-snowfall { animation: ws-snow 18s linear 1 both; }
}
@keyframes ws-snow { to { background-position: 30px 220px, 100px 370px; } }

/* ── Woven wool label: cream cloth, a running stitch round its edge.
   Used for the logo plaque, the scarf's label and price rows. ── */
.ws-label {
  position: relative;
  background: #f7f0e3;
  color: #1a2a3f;
  border-radius: 6px;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .06), 0 10px 20px -12px rgba(0, 0, 0, .45);
}
.ws-label::before {
  content: ''; position: absolute; inset: 5px; pointer-events: none;
  border: 1.5px dashed rgba(184, 50, 60, .55);
  border-radius: 3px;
}

/* ── Knitted numbers: each digit a 5×7 chart of stitches (charts from
   winter_sale_glyphs()), cream on a navy panel. --c is one stitch's
   height. The scarf countdown uses the panel with whole lettered digits;
   the 404 mitten uses the charts. ── */
.ws-knit { display: flex; align-items: flex-start; gap: calc(var(--c) * 2.6); }
.ws-knit__unit { display: flex; flex-direction: column; align-items: center; gap: .4rem; }
/* The day field leaves on the last day (winter-sale.js). */
[data-ws-days][hidden], [data-ws-lastday][hidden] { display: none !important; }
.ws-knit__pair { display: flex; gap: var(--c); padding: calc(var(--c) * .9) calc(var(--c) * 1.1); border-radius: 3px; background: #142540; box-shadow: 0 0 0 2px rgba(247, 239, 226, .55), 0 3px 6px rgba(0, 0, 0, .25); }
.ws-knit__digit { display: grid; grid-template-columns: repeat(5, calc(var(--c) * 1.15)); grid-auto-rows: var(--c); }
.ws-knit__digit > i {
  display: block;
  background: #24406a;
  -webkit-mask: var(--ws-v) center / 100% 100% no-repeat;
  mask: var(--ws-v) center / 100% 100% no-repeat;
}
.ws-knit__digit > i.on { background: #fbf4e8; }
:root {
  --ws-v: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10' preserveAspectRatio='none'><path d='M.2 .1 C.4 5.6 2.6 9.2 5.9 9.95 C6 4.8 3.8 .9 .2 .1 Z M11.8 .1 C11.6 5.6 9.4 9.2 6.1 9.95 C6 4.8 8.2 .9 11.8 .1 Z'/></svg>");
}
.ws-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* ── Dark/light toggle: frost on the glass ──
   assets/js/winter-sale.js registers the transition: frost creeps in
   across the screen from its four corners until the glass is iced over,
   the mode flips behind the frost, then a warm patch melts a clear
   circle from the middle outwards and the last of the ice runs away. */
@property --ws-frost { syntax: '<percentage>'; inherits: false; initial-value: 0%; }
@property --ws-melt { syntax: '<percentage>'; inherits: false; initial-value: 0%; }
.px-fx--ws-frost { position: fixed; inset: 0; z-index: 2147483000; pointer-events: none; overflow: hidden; }
.px-fx--ws-frost .ws-ice {
  position: absolute; inset: 0;
  background:
    var(--fx-ferns) 0 0 / 260px 260px,
    var(--fx-ferns) 90px 140px / 170px 170px,
    radial-gradient(ellipse at 50% 50%, var(--fx-ice-1), var(--fx-ice-2));
  --ws-frost: 0%;
  --ws-melt: 0%;
  -webkit-mask:
    radial-gradient(circle at 50% 50%, transparent calc(var(--ws-melt) - 10%), #000 var(--ws-melt)),
    radial-gradient(circle at 0 0, #000 var(--ws-frost), transparent calc(var(--ws-frost) + 14%)),
    radial-gradient(circle at 100% 0, #000 var(--ws-frost), transparent calc(var(--ws-frost) + 14%)),
    radial-gradient(circle at 0 100%, #000 var(--ws-frost), transparent calc(var(--ws-frost) + 14%)),
    radial-gradient(circle at 100% 100%, #000 var(--ws-frost), transparent calc(var(--ws-frost) + 14%));
  -webkit-mask-composite: source-in, source-over, source-over, source-over;
  mask:
    radial-gradient(circle at 50% 50%, transparent calc(var(--ws-melt) - 10%), #000 var(--ws-melt)) intersect,
    radial-gradient(circle at 0 0, #000 var(--ws-frost), transparent calc(var(--ws-frost) + 14%)) add,
    radial-gradient(circle at 100% 0, #000 var(--ws-frost), transparent calc(var(--ws-frost) + 14%)) add,
    radial-gradient(circle at 0 100%, #000 var(--ws-frost), transparent calc(var(--ws-frost) + 14%)) add,
    radial-gradient(circle at 100% 100%, #000 var(--ws-frost), transparent calc(var(--ws-frost) + 14%));
  transition: --ws-frost .62s cubic-bezier(.35, .1, .3, 1), --ws-melt .85s cubic-bezier(.4, 0, .2, 1);
}
.px-fx--ws-frost.is-in .ws-ice { --ws-frost: 95%; }
.px-fx--ws-frost.is-out .ws-ice { --ws-frost: 95%; --ws-melt: 150%; }
/* Meltwater: a few drops run down the glass as it clears */
.px-fx--ws-frost .ws-drip {
  position: absolute; top: -12vh; width: 3px; height: 12vh; border-radius: 3px;
  background: linear-gradient(180deg, transparent, var(--fx-drop));
  opacity: 0;
}
.px-fx--ws-frost.is-out .ws-drip { animation: ws-drip .8s cubic-bezier(.5, 0, .9, .6) var(--d, 0s) forwards; }
@keyframes ws-drip { 0% { opacity: 0; transform: translateY(var(--y, 30vh)); } 20% { opacity: .9; } 100% { opacity: 0; transform: translateY(calc(var(--y, 30vh) + 70vh)); } }

/* ── Footer: the lodge from outside on a winter night — snow along the
   eaves, a row of icicles, snow falling over the links, in both modes ── */
.ws-footer {
  --paper:     #15263d;
  --paper-2:   #1d3350;
  --paper-3:   #264062;
  --ink:       #f4ecdd;
  --ink-2:     #e2e7ee;
  --ink-soft:  #a9b8ca;
  --rule:      rgba(244, 236, 221, 0.16);
  --rule-soft: rgba(244, 236, 221, 0.08);
  --theme-500: #a9cbe4; --theme-600: #a9cbe4; --theme-700: #d2e5f3;
  --theme-500-rgb: 169, 203, 228;
  position: relative;
}
html.dark .ws-footer { --paper: #121110; --paper-2: #1f1c1a; --paper-3: #2a2624; --theme-500: #f5a35c; --theme-600: #f5a35c; --theme-500-rgb: 245, 163, 92; }
html body #desktopFooter.ws-footer { background: var(--night-bg) !important; }
html.dark body #desktopFooter.ws-footer {
  background:
    radial-gradient(600px 300px at 0% 100%, rgba(232, 135, 58, .16), transparent 70%),
    linear-gradient(180deg, #1a1817, #121110) !important;
}
.ws-footer > :not(.ws-footer-snow) { position: relative; }
.ws-footer-snow {
  opacity: .5;
  /* Only over the eaves and down to the newsletter card, never behind
     the links */
  -webkit-mask: linear-gradient(180deg, #000 60px, transparent 150px);
  mask: linear-gradient(180deg, #000 60px, transparent 150px);
}
.ws-footer-top { position: relative; z-index: 1; height: 26px; margin-bottom: -1px; background: var(--paper); }
/* The eave: a timber edge with snow heaped along it */
.ws-footer-eave {
  position: absolute; left: 0; right: 0; bottom: 0; height: 26px;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='18' viewBox='0 0 180 18'><path d='M0 18 V10 C14 2 28 3 40 8 C54 13 66 4 84 5 C100 6 108 12 124 9 C140 6 150 1 166 5 C172 7 176 9 180 10 V18 Z' fill='%23ffffff'/><path d='M0 18 V14 C30 11 60 15 90 13 S150 11 180 14 V18 Z' fill='%23dcebf5'/></svg>") repeat-x left top / 180px 18px,
    linear-gradient(180deg, transparent 17px, #6b4527 17px 23px, #4d311c 23px);
}
html.dark .ws-footer-eave {
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='18' viewBox='0 0 180 18'><path d='M0 18 V10 C14 2 28 3 40 8 C54 13 66 4 84 5 C100 6 108 12 124 9 C140 6 150 1 166 5 C172 7 176 9 180 10 V18 Z' fill='%23d6e2ee'/><path d='M0 18 V14 C30 11 60 15 90 13 S150 11 180 14 V18 Z' fill='%239fb4c8'/></svg>") repeat-x left top / 180px 18px,
    linear-gradient(180deg, transparent 17px, #4a3020 17px 23px, #33200f 23px);
}
.ws-footer-icicles { position: absolute; z-index: 2; left: 0; right: 0; top: 26px; display: flex; justify-content: space-around; padding: 0 1rem; pointer-events: none; }
.ws-footer-icicles > span {
  display: block; width: 9px; height: var(--l, 20px);
  background: linear-gradient(90deg, rgba(255, 255, 255, .95), #cfe3f2 55%, #9fc0da);
  clip-path: polygon(0 0, 100% 0, 58% 100%, 46% 100%);
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .2));
}
html.dark .ws-footer-icicles > span { background: linear-gradient(90deg, #f3d6b4, #c9d6e2 55%, #8ea6bb); }
.ws-footer a:hover { color: #ffffff; }
html.dark #desktopFooter li { color: var(--ink-2) !important; }

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

/* The newsletter: a knitted cream swatch, a band of fair-isle along its
   top and a snowflake knitted into its corner */
html body .ws-footer .ed-newsletter {
  position: relative;
  background: #f7f0e3;
  color: #1a2a3f;
  border: 0; border-radius: 14px;
  padding-top: calc(30.6px + 1.5rem);
  box-shadow: 0 18px 34px -16px rgba(0, 0, 0, .55);
  overflow: hidden;
}
html body .ws-footer .ed-newsletter::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 30.6px; pointer-events: none;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='30.6'><defs><pattern id='k' width='4' height='3.4' patternUnits='userSpaceOnUse'><path d='M0 0q.3 2.11 2 3.4M4 0q-.3 2.11 -2 3.4' fill='none' stroke='%23000' stroke-opacity='.3' stroke-width='.7'/><path d='M0.88 0.41q.2 1.36 0.88 2.11M3.12 0.41q-.2 1.36 -0.88 2.11' fill='none' stroke='%23fff' stroke-opacity='.22' stroke-width='.6' stroke-linecap='round'/></pattern></defs><rect x='0' y='0' width='32' height='3.4' fill='%231d3350'/><rect x='0' y='3.4' width='4' height='3.4' fill='%23f4ecdd'/><rect x='4' y='3.4' width='12' height='3.4' fill='%231d3350'/><rect x='16' y='3.4' width='4' height='3.4' fill='%23f4ecdd'/><rect x='20' y='3.4' width='12' height='3.4' fill='%231d3350'/><rect x='0' y='6.8' width='32' height='3.4' fill='%23b8323c'/><rect x='0' y='10.2' width='4' height='3.4' fill='%23b8323c'/><rect x='4' y='10.2' width='4' height='3.4' fill='%23f4ecdd'/><rect x='8' y='10.2' width='12' height='3.4' fill='%23b8323c'/><rect x='20' y='10.2' width='4' height='3.4' fill='%23f4ecdd'/><rect x='24' y='10.2' width='8' height='3.4' fill='%23b8323c'/><rect x='0' y='13.6' width='12' height='3.4' fill='%23f4ecdd'/><rect x='12' y='13.6' width='4' height='3.4' fill='%23b8323c'/><rect x='16' y='13.6' width='12' height='3.4' fill='%23f4ecdd'/><rect x='28' y='13.6' width='4' height='3.4' fill='%23b8323c'/><rect x='0' y='17' width='4' height='3.4' fill='%23b8323c'/><rect x='4' y='17' width='4' height='3.4' fill='%23f4ecdd'/><rect x='8' y='17' width='12' height='3.4' fill='%23b8323c'/><rect x='20' y='17' width='4' height='3.4' fill='%23f4ecdd'/><rect x='24' y='17' width='8' height='3.4' fill='%23b8323c'/><rect x='0' y='20.4' width='32' height='3.4' fill='%23b8323c'/><rect x='0' y='23.8' width='8' height='3.4' fill='%231d3350'/><rect x='8' y='23.8' width='4' height='3.4' fill='%23f4ecdd'/><rect x='12' y='23.8' width='12' height='3.4' fill='%231d3350'/><rect x='24' y='23.8' width='4' height='3.4' fill='%23f4ecdd'/><rect x='28' y='23.8' width='4' height='3.4' fill='%231d3350'/><rect x='0' y='27.2' width='32' height='3.4' fill='%231d3350'/><rect width='100%' height='100%' fill='url(%23k)'/></svg>") repeat-x left top / 32px 30.6px;
}
html body .ws-footer .ed-newsletter::after {
  content: ''; position: absolute; inset: auto 18px 16px auto; width: 58px; height: 58px; pointer-events: none;
  background: #b8323c; opacity: .9; mix-blend-mode: normal;
  -webkit-mask: var(--flake-mask) center / contain no-repeat;
  mask: var(--flake-mask) center / contain no-repeat;
}
[dir="rtl"] body .ws-footer .ed-newsletter::after { inset: auto auto 16px 18px; }
@media (min-width: 768px) { html body .ws-footer .ed-newsletter { padding-inline-end: 6.5rem; } }
html body .ws-footer .ed-newsletter, html body .ws-footer .ed-newsletter * { --ink: #1a2a3f; --ink-2: #34465c; }
html body .ws-footer .ed-newsletter h4 { font-family: var(--font-display); font-weight: 800; font-stretch: var(--display-stretch); color: #1a2a3f; }
html body .ws-footer .ed-newsletter-input { background: #ffffff !important; color: #1a2a3f !important; border: 1px solid rgba(26, 42, 63, .2) !important; border-radius: 10px; }
html body .ws-footer .ed-newsletter-input::placeholder { color: #607186; }
html body .ws-footer .ed-newsletter-input:focus { border-color: #2f6596 !important; box-shadow: 0 0 0 3px rgba(47, 101, 150, .15); }
html body .ws-footer .ed-newsletter-btn {
  background: #b8323c; color: #ffffff; border: 0; border-radius: 10px;
  font-family: var(--font-ui); font-weight: 700;
}
html body .ws-footer .ed-newsletter-age { color: #34465c; }
[dir="rtl"] .ed-newsletter-btn svg { transform: scaleX(-1); }
/* The swatch stays cream after dark; header.css's dark-mode heading,
   paragraph and field colours would otherwise letter it for a dark card. */
html.dark body #desktopFooter .ed-newsletter h4 { color: #1a2a3f !important; }
html.dark body #desktopFooter .ed-newsletter :is(p, label, span) { color: #34465c !important; }
html.dark body .ws-footer .ed-newsletter input.ed-newsletter-input:not(.no-dark):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]) {
  background-color: #ffffff !important; color: #1a2a3f !important; border-color: rgba(26, 42, 63, .2) !important;
}

/* Logo plaque: the light-mode logo on a woven wool label, wherever it
   sits on the night (footer, app splash) */
.ws-plaque {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 1rem 1.6rem;
  background: #f7f0e3;
  border-radius: 8px;
  box-shadow: 0 14px 28px -12px rgba(0, 0, 0, .55);
}
.ws-plaque::before {
  content: ''; position: absolute; inset: 5px; pointer-events: none;
  border: 1.5px dashed rgba(184, 50, 60, .6); border-radius: 4px;
}

/* Long titles and descriptions show in full; a card grows instead of
   clipping them. */
html [class*="line-clamp-"] { -webkit-line-clamp: unset; }
html body .truncate { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
/* .text-fit (assets/css/header.css) shrinks a title to one line with JS,
   measured before the display face loads; under this theme it wraps. */
html body .text-fit { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
/* On phones 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, 24, 23, 0.94) !important; border-bottom-color: var(--rule) !important; }
html.dark .floating-nav-shell,
html.dark .safe-area-bottom > div.mobile-bottom-nav { background: rgba(36, 33, 32, 0.96) !important; }
html.dark .premium-side-menu { background: var(--paper) !important; }
html.dark .premium-profile-header { background: var(--paper-2) !important; }
html.dark .premium-dropdown,
html.dark #mobileExploreSheet .bg-white,
html.dark #logoutModal .bg-white,
html.dark .bg-white,
html.dark [x-data] .bg-white,
html.dark .bg-white.shadow-xl,
html.dark .bg-slate-50,
html.dark .bg-slate-100,
html.dark .odd\:bg-white:nth-child(odd) { background-color: var(--paper-2) !important; }
html.dark .bg-gray-50,
html.dark .even\:bg-gray-50:nth-child(even) { background-color: var(--paper) !important; }
html.dark .bg-gray-100,
html.dark #mobileExploreSheet .bg-gray-100,
html.dark thead { background-color: var(--paper-3) !important; }
html.dark .from-white, html.dark .from-gray-50 { --tw-gradient-from: var(--paper) !important; }
html.dark .to-white, html.dark .to-gray-50 { --tw-gradient-to: var(--paper) !important; }
html.dark .via-white, html.dark .via-gray-50 { --tw-gradient-via: var(--paper-2) !important; }
html.dark .from-gray-100 { --tw-gradient-from: var(--paper-2) !important; }
html.dark .to-gray-100 { --tw-gradient-to: var(--paper-2) !important; }
html.dark .search-input,
html.dark select:not(.no-dark) { background-color: var(--paper-2) !important; }
html.dark .gradient-bg { background: linear-gradient(-45deg, #2f2b29, #1a1817, #2a1d14, #121110) !important; }
html.dark [class*="dark:bg-[#121218]"], html.dark [class*="dark:bg-[#0"] { background-color: var(--paper-2) !important; }

/* The phone language sheet: header.css paints it near-black after dark;
   here it is the lodge's charcoal wool, the chosen language in ember. */
html.dark #langSheet { background: var(--paper) !important; border-top: 1px solid var(--rule); }
html.dark #langSheet .lang-sheet-header { border-bottom-color: var(--rule); }
html.dark #langSheet .lang-row span { color: var(--ink) !important; }
html.dark #langSheet .lang-row:hover { background: var(--paper-2) !important; }
html #langSheet .lang-row[style*="background"] { background: var(--rose-soft) !important; box-shadow: inset 0 0 0 1px rgba(var(--theme-500-rgb), .3); }
html.dark #langSheet .lang-drag-handle { background: rgba(245, 238, 229, .2); }

/* header.css fills every dark-mode field with a navy #0d1117; here fields
   take the theme's own charcoal. 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: #141211 !important;
  border-color: rgba(245, 238, 229, .2) !important;
  color: #f5eee5 !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 charcoal. */
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: #121110;
  --paper: #f5eee5;
  border-color: rgba(245, 163, 92, .3);
}

html header.safe-top-header[style] { background: rgba(243, 245, 247, .95) !important; }
html.dark header.safe-top-header[style] { background: rgba(26, 24, 23, .95) !important; }

/* ── Login / register / forgot-password brand panel: the snowy night,
   a knitted band along its foot ── */
:root, html.dark {
  --brand-gradient: var(--night-bg);
  --brand-glow-1: rgba(169, 203, 228, 0.24);
  --brand-glow-2: rgba(232, 135, 58, 0.2);
}
.brand-panel { background: var(--night-bg) !important; }
/* assets/css/pages/login.css loads after the theme and draws ::after as a
   round glow; here it is the knitted band. */
html .brand-panel::after {
  content: ''; position: absolute;
  left: 0 !important; right: 0 !important; bottom: 0 !important; top: auto !important;
  width: 100% !important; height: 30.6px !important;
  border-radius: 0 !important; transform: none !important; opacity: 1 !important;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='30.6'><defs><pattern id='k' width='4' height='3.4' patternUnits='userSpaceOnUse'><path d='M0 0q.3 2.11 2 3.4M4 0q-.3 2.11 -2 3.4' fill='none' stroke='%23000' stroke-opacity='.3' stroke-width='.7'/><path d='M0.88 0.41q.2 1.36 0.88 2.11M3.12 0.41q-.2 1.36 -0.88 2.11' fill='none' stroke='%23fff' stroke-opacity='.22' stroke-width='.6' stroke-linecap='round'/></pattern></defs><rect x='0' y='0' width='32' height='3.4' fill='%231d3350'/><rect x='0' y='3.4' width='4' height='3.4' fill='%23f4ecdd'/><rect x='4' y='3.4' width='12' height='3.4' fill='%231d3350'/><rect x='16' y='3.4' width='4' height='3.4' fill='%23f4ecdd'/><rect x='20' y='3.4' width='12' height='3.4' fill='%231d3350'/><rect x='0' y='6.8' width='32' height='3.4' fill='%23b8323c'/><rect x='0' y='10.2' width='4' height='3.4' fill='%23b8323c'/><rect x='4' y='10.2' width='4' height='3.4' fill='%23f4ecdd'/><rect x='8' y='10.2' width='12' height='3.4' fill='%23b8323c'/><rect x='20' y='10.2' width='4' height='3.4' fill='%23f4ecdd'/><rect x='24' y='10.2' width='8' height='3.4' fill='%23b8323c'/><rect x='0' y='13.6' width='12' height='3.4' fill='%23f4ecdd'/><rect x='12' y='13.6' width='4' height='3.4' fill='%23b8323c'/><rect x='16' y='13.6' width='12' height='3.4' fill='%23f4ecdd'/><rect x='28' y='13.6' width='4' height='3.4' fill='%23b8323c'/><rect x='0' y='17' width='4' height='3.4' fill='%23b8323c'/><rect x='4' y='17' width='4' height='3.4' fill='%23f4ecdd'/><rect x='8' y='17' width='12' height='3.4' fill='%23b8323c'/><rect x='20' y='17' width='4' height='3.4' fill='%23f4ecdd'/><rect x='24' y='17' width='8' height='3.4' fill='%23b8323c'/><rect x='0' y='20.4' width='32' height='3.4' fill='%23b8323c'/><rect x='0' y='23.8' width='8' height='3.4' fill='%231d3350'/><rect x='8' y='23.8' width='4' height='3.4' fill='%23f4ecdd'/><rect x='12' y='23.8' width='12' height='3.4' fill='%231d3350'/><rect x='24' y='23.8' width='4' height='3.4' fill='%23f4ecdd'/><rect x='28' y='23.8' width='4' height='3.4' fill='%231d3350'/><rect x='0' y='27.2' width='32' height='3.4' fill='%231d3350'/><rect width='100%' height='100%' fill='url(%23k)'/></svg>") repeat-x left top / 32px 30.6px !important;
}
.brand-panel .text-purple-200,
.brand-panel [class*="text-purple-200"] { color: rgba(244, 236, 221, 0.86) !important; }
.brand-panel h2 { font-family: var(--font-display); font-weight: 800 !important; font-stretch: var(--display-stretch); }

/* ── Wallet balance card: a Nordic jumper — navy stockinette with a yoke
   of eight-point stars knitted across its foot ── */
html body .wallet-hero {
  position: relative;
  padding-bottom: calc(1.5rem + 91.8px) !important;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='80' height='91.8'><defs><pattern id='k' width='4' height='3.4' patternUnits='userSpaceOnUse'><path d='M0 0q.3 2.11 2 3.4M4 0q-.3 2.11 -2 3.4' fill='none' stroke='%23000' stroke-opacity='.3' stroke-width='.7'/><path d='M0.88 0.41q.2 1.36 0.88 2.11M3.12 0.41q-.2 1.36 -0.88 2.11' fill='none' stroke='%23fff' stroke-opacity='.22' stroke-width='.6' stroke-linecap='round'/></pattern></defs><rect x='0' y='0' width='80' height='3.4' fill='%231d3350'/><rect x='0' y='3.4' width='8' height='3.4' fill='%231d3350'/><rect x='8' y='3.4' width='4' height='3.4' fill='%23f4ecdd'/><rect x='12' y='3.4' width='12' height='3.4' fill='%231d3350'/><rect x='24' y='3.4' width='4' height='3.4' fill='%23f4ecdd'/><rect x='28' y='3.4' width='12' height='3.4' fill='%231d3350'/><rect x='40' y='3.4' width='4' height='3.4' fill='%23f4ecdd'/><rect x='44' y='3.4' width='12' height='3.4' fill='%231d3350'/><rect x='56' y='3.4' width='4' height='3.4' fill='%23f4ecdd'/><rect x='60' y='3.4' width='12' height='3.4' fill='%231d3350'/><rect x='72' y='3.4' width='4' height='3.4' fill='%23f4ecdd'/><rect x='76' y='3.4' width='4' height='3.4' fill='%231d3350'/><rect x='0' y='6.8' width='80' height='3.4' fill='%231d3350'/><rect x='0' y='10.2' width='80' height='3.4' fill='%23b8323c'/><rect x='0' y='13.6' width='8' height='3.4' fill='%23b8323c'/><rect x='8' y='13.6' width='4' height='3.4' fill='%23f4ecdd'/><rect x='12' y='13.6' width='12' height='3.4' fill='%23b8323c'/><rect x='24' y='13.6' width='4' height='3.4' fill='%23f4ecdd'/><rect x='28' y='13.6' width='12' height='3.4' fill='%23b8323c'/><rect x='40' y='13.6' width='4' height='3.4' fill='%23f4ecdd'/><rect x='44' y='13.6' width='12' height='3.4' fill='%23b8323c'/><rect x='56' y='13.6' width='4' height='3.4' fill='%23f4ecdd'/><rect x='60' y='13.6' width='12' height='3.4' fill='%23b8323c'/><rect x='72' y='13.6' width='4' height='3.4' fill='%23f4ecdd'/><rect x='76' y='13.6' width='4' height='3.4' fill='%23b8323c'/><rect x='0' y='17' width='4' height='3.4' fill='%23b8323c'/><rect x='4' y='17' width='12' height='3.4' fill='%23f4ecdd'/><rect x='16' y='17' width='4' height='3.4' fill='%23b8323c'/><rect x='20' y='17' width='12' height='3.4' fill='%23f4ecdd'/><rect x='32' y='17' width='4' height='3.4' fill='%23b8323c'/><rect x='36' y='17' width='12' height='3.4' fill='%23f4ecdd'/><rect x='48' y='17' width='4' height='3.4' fill='%23b8323c'/><rect x='52' y='17' width='12' height='3.4' fill='%23f4ecdd'/><rect x='64' y='17' width='4' height='3.4' fill='%23b8323c'/><rect x='68' y='17' width='12' height='3.4' fill='%23f4ecdd'/><rect x='0' y='20.4' width='8' height='3.4' fill='%23b8323c'/><rect x='8' y='20.4' width='4' height='3.4' fill='%23f4ecdd'/><rect x='12' y='20.4' width='12' height='3.4' fill='%23b8323c'/><rect x='24' y='20.4' width='4' height='3.4' fill='%23f4ecdd'/><rect x='28' y='20.4' width='12' height='3.4' fill='%23b8323c'/><rect x='40' y='20.4' width='4' height='3.4' fill='%23f4ecdd'/><rect x='44' y='20.4' width='12' height='3.4' fill='%23b8323c'/><rect x='56' y='20.4' width='4' height='3.4' fill='%23f4ecdd'/><rect x='60' y='20.4' width='12' height='3.4' fill='%23b8323c'/><rect x='72' y='20.4' width='4' height='3.4' fill='%23f4ecdd'/><rect x='76' y='20.4' width='4' height='3.4' fill='%23b8323c'/><rect x='0' y='23.8' width='80' height='3.4' fill='%23b8323c'/><rect x='0' y='27.2' width='80' height='3.4' fill='%231d3350'/><rect x='0' y='30.6' width='80' height='3.4' fill='%231d3350'/><rect x='0' y='34' width='36' height='3.4' fill='%231d3350'/><rect x='36' y='34' width='4' height='3.4' fill='%23f4ecdd'/><rect x='40' y='34' width='40' height='3.4' fill='%231d3350'/><rect x='0' y='37.4' width='32' height='3.4' fill='%231d3350'/><rect x='32' y='37.4' width='12' height='3.4' fill='%23f4ecdd'/><rect x='44' y='37.4' width='36' height='3.4' fill='%231d3350'/><rect x='0' y='40.8' width='12' height='3.4' fill='%231d3350'/><rect x='12' y='40.8' width='8' height='3.4' fill='%23f4ecdd'/><rect x='20' y='40.8' width='12' height='3.4' fill='%231d3350'/><rect x='32' y='40.8' width='12' height='3.4' fill='%23f4ecdd'/><rect x='44' y='40.8' width='12' height='3.4' fill='%231d3350'/><rect x='56' y='40.8' width='8' height='3.4' fill='%23f4ecdd'/><rect x='64' y='40.8' width='16' height='3.4' fill='%231d3350'/><rect x='0' y='44.2' width='12' height='3.4' fill='%231d3350'/><rect x='12' y='44.2' width='12' height='3.4' fill='%23f4ecdd'/><rect x='24' y='44.2' width='8' height='3.4' fill='%231d3350'/><rect x='32' y='44.2' width='12' height='3.4' fill='%23f4ecdd'/><rect x='44' y='44.2' width='8' height='3.4' fill='%231d3350'/><rect x='52' y='44.2' width='12' height='3.4' fill='%23f4ecdd'/><rect x='64' y='44.2' width='16' height='3.4' fill='%231d3350'/><rect x='0' y='47.6' width='16' height='3.4' fill='%231d3350'/><rect x='16' y='47.6' width='12' height='3.4' fill='%23f4ecdd'/><rect x='28' y='47.6' width='4' height='3.4' fill='%231d3350'/><rect x='32' y='47.6' width='12' height='3.4' fill='%23f4ecdd'/><rect x='44' y='47.6' width='4' height='3.4' fill='%231d3350'/><rect x='48' y='47.6' width='12' height='3.4' fill='%23f4ecdd'/><rect x='60' y='47.6' width='20' height='3.4' fill='%231d3350'/><rect x='0' y='51' width='20' height='3.4' fill='%231d3350'/><rect x='20' y='51' width='12' height='3.4' fill='%23f4ecdd'/><rect x='32' y='51' width='4' height='3.4' fill='%231d3350'/><rect x='36' y='51' width='4' height='3.4' fill='%23f4ecdd'/><rect x='40' y='51' width='4' height='3.4' fill='%231d3350'/><rect x='44' y='51' width='12' height='3.4' fill='%23f4ecdd'/><rect x='56' y='51' width='24' height='3.4' fill='%231d3350'/><rect x='0' y='54.4' width='12' height='3.4' fill='%231d3350'/><rect x='12' y='54.4' width='24' height='3.4' fill='%23f4ecdd'/><rect x='36' y='54.4' width='4' height='3.4' fill='%231d3350'/><rect x='40' y='54.4' width='24' height='3.4' fill='%23f4ecdd'/><rect x='64' y='54.4' width='16' height='3.4' fill='%231d3350'/><rect x='0' y='57.8' width='20' height='3.4' fill='%231d3350'/><rect x='20' y='57.8' width='12' height='3.4' fill='%23f4ecdd'/><rect x='32' y='57.8' width='4' height='3.4' fill='%231d3350'/><rect x='36' y='57.8' width='4' height='3.4' fill='%23f4ecdd'/><rect x='40' y='57.8' width='4' height='3.4' fill='%231d3350'/><rect x='44' y='57.8' width='12' height='3.4' fill='%23f4ecdd'/><rect x='56' y='57.8' width='24' height='3.4' fill='%231d3350'/><rect x='0' y='61.2' width='16' height='3.4' fill='%231d3350'/><rect x='16' y='61.2' width='12' height='3.4' fill='%23f4ecdd'/><rect x='28' y='61.2' width='4' height='3.4' fill='%231d3350'/><rect x='32' y='61.2' width='12' height='3.4' fill='%23f4ecdd'/><rect x='44' y='61.2' width='4' height='3.4' fill='%231d3350'/><rect x='48' y='61.2' width='12' height='3.4' fill='%23f4ecdd'/><rect x='60' y='61.2' width='20' height='3.4' fill='%231d3350'/><rect x='0' y='64.6' width='12' height='3.4' fill='%231d3350'/><rect x='12' y='64.6' width='12' height='3.4' fill='%23f4ecdd'/><rect x='24' y='64.6' width='8' height='3.4' fill='%231d3350'/><rect x='32' y='64.6' width='12' height='3.4' fill='%23f4ecdd'/><rect x='44' y='64.6' width='8' height='3.4' fill='%231d3350'/><rect x='52' y='64.6' width='12' height='3.4' fill='%23f4ecdd'/><rect x='64' y='64.6' width='16' height='3.4' fill='%231d3350'/><rect x='0' y='68' width='12' height='3.4' fill='%231d3350'/><rect x='12' y='68' width='8' height='3.4' fill='%23f4ecdd'/><rect x='20' y='68' width='12' height='3.4' fill='%231d3350'/><rect x='32' y='68' width='12' height='3.4' fill='%23f4ecdd'/><rect x='44' y='68' width='12' height='3.4' fill='%231d3350'/><rect x='56' y='68' width='8' height='3.4' fill='%23f4ecdd'/><rect x='64' y='68' width='16' height='3.4' fill='%231d3350'/><rect x='0' y='71.4' width='32' height='3.4' fill='%231d3350'/><rect x='32' y='71.4' width='12' height='3.4' fill='%23f4ecdd'/><rect x='44' y='71.4' width='36' height='3.4' fill='%231d3350'/><rect x='0' y='74.8' width='36' height='3.4' fill='%231d3350'/><rect x='36' y='74.8' width='4' height='3.4' fill='%23f4ecdd'/><rect x='40' y='74.8' width='40' height='3.4' fill='%231d3350'/><rect x='0' y='78.2' width='80' height='3.4' fill='%231d3350'/><rect x='0' y='81.6' width='80' height='3.4' fill='%231d3350'/><rect x='0' y='85' width='4' height='3.4' fill='%231d3350'/><rect x='4' y='85' width='4' height='3.4' fill='%23f4ecdd'/><rect x='8' y='85' width='12' height='3.4' fill='%231d3350'/><rect x='20' y='85' width='4' height='3.4' fill='%23f4ecdd'/><rect x='24' y='85' width='12' height='3.4' fill='%231d3350'/><rect x='36' y='85' width='4' height='3.4' fill='%23f4ecdd'/><rect x='40' y='85' width='12' height='3.4' fill='%231d3350'/><rect x='52' y='85' width='4' height='3.4' fill='%23f4ecdd'/><rect x='56' y='85' width='12' height='3.4' fill='%231d3350'/><rect x='68' y='85' width='4' height='3.4' fill='%23f4ecdd'/><rect x='72' y='85' width='8' height='3.4' fill='%231d3350'/><rect x='0' y='88.4' width='80' height='3.4' fill='%231d3350'/><rect width='100%' height='100%' fill='url(%23k)'/></svg>") repeat-x left bottom / 80px 91.8px,
    var(--stitch) 0 0 / 6px 5px,
    radial-gradient(420px 220px at 90% 0%, rgba(169, 203, 228, .18), transparent 70%),
    #1d3350;
  border: 0;
  border-radius: 18px;
  box-shadow: var(--shadow-md);
  color: #f4ecdd;
  overflow: hidden;
}
html.dark body .wallet-hero {
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='80' height='91.8'><defs><pattern id='k' width='4' height='3.4' patternUnits='userSpaceOnUse'><path d='M0 0q.3 2.11 2 3.4M4 0q-.3 2.11 -2 3.4' fill='none' stroke='%23000' stroke-opacity='.3' stroke-width='.7'/><path d='M0.88 0.41q.2 1.36 0.88 2.11M3.12 0.41q-.2 1.36 -0.88 2.11' fill='none' stroke='%23fff' stroke-opacity='.22' stroke-width='.6' stroke-linecap='round'/></pattern></defs><rect x='0' y='0' width='80' height='3.4' fill='%231d3350'/><rect x='0' y='3.4' width='8' height='3.4' fill='%231d3350'/><rect x='8' y='3.4' width='4' height='3.4' fill='%23f4ecdd'/><rect x='12' y='3.4' width='12' height='3.4' fill='%231d3350'/><rect x='24' y='3.4' width='4' height='3.4' fill='%23f4ecdd'/><rect x='28' y='3.4' width='12' height='3.4' fill='%231d3350'/><rect x='40' y='3.4' width='4' height='3.4' fill='%23f4ecdd'/><rect x='44' y='3.4' width='12' height='3.4' fill='%231d3350'/><rect x='56' y='3.4' width='4' height='3.4' fill='%23f4ecdd'/><rect x='60' y='3.4' width='12' height='3.4' fill='%231d3350'/><rect x='72' y='3.4' width='4' height='3.4' fill='%23f4ecdd'/><rect x='76' y='3.4' width='4' height='3.4' fill='%231d3350'/><rect x='0' y='6.8' width='80' height='3.4' fill='%231d3350'/><rect x='0' y='10.2' width='80' height='3.4' fill='%23b8323c'/><rect x='0' y='13.6' width='8' height='3.4' fill='%23b8323c'/><rect x='8' y='13.6' width='4' height='3.4' fill='%23f4ecdd'/><rect x='12' y='13.6' width='12' height='3.4' fill='%23b8323c'/><rect x='24' y='13.6' width='4' height='3.4' fill='%23f4ecdd'/><rect x='28' y='13.6' width='12' height='3.4' fill='%23b8323c'/><rect x='40' y='13.6' width='4' height='3.4' fill='%23f4ecdd'/><rect x='44' y='13.6' width='12' height='3.4' fill='%23b8323c'/><rect x='56' y='13.6' width='4' height='3.4' fill='%23f4ecdd'/><rect x='60' y='13.6' width='12' height='3.4' fill='%23b8323c'/><rect x='72' y='13.6' width='4' height='3.4' fill='%23f4ecdd'/><rect x='76' y='13.6' width='4' height='3.4' fill='%23b8323c'/><rect x='0' y='17' width='4' height='3.4' fill='%23b8323c'/><rect x='4' y='17' width='12' height='3.4' fill='%23f4ecdd'/><rect x='16' y='17' width='4' height='3.4' fill='%23b8323c'/><rect x='20' y='17' width='12' height='3.4' fill='%23f4ecdd'/><rect x='32' y='17' width='4' height='3.4' fill='%23b8323c'/><rect x='36' y='17' width='12' height='3.4' fill='%23f4ecdd'/><rect x='48' y='17' width='4' height='3.4' fill='%23b8323c'/><rect x='52' y='17' width='12' height='3.4' fill='%23f4ecdd'/><rect x='64' y='17' width='4' height='3.4' fill='%23b8323c'/><rect x='68' y='17' width='12' height='3.4' fill='%23f4ecdd'/><rect x='0' y='20.4' width='8' height='3.4' fill='%23b8323c'/><rect x='8' y='20.4' width='4' height='3.4' fill='%23f4ecdd'/><rect x='12' y='20.4' width='12' height='3.4' fill='%23b8323c'/><rect x='24' y='20.4' width='4' height='3.4' fill='%23f4ecdd'/><rect x='28' y='20.4' width='12' height='3.4' fill='%23b8323c'/><rect x='40' y='20.4' width='4' height='3.4' fill='%23f4ecdd'/><rect x='44' y='20.4' width='12' height='3.4' fill='%23b8323c'/><rect x='56' y='20.4' width='4' height='3.4' fill='%23f4ecdd'/><rect x='60' y='20.4' width='12' height='3.4' fill='%23b8323c'/><rect x='72' y='20.4' width='4' height='3.4' fill='%23f4ecdd'/><rect x='76' y='20.4' width='4' height='3.4' fill='%23b8323c'/><rect x='0' y='23.8' width='80' height='3.4' fill='%23b8323c'/><rect x='0' y='27.2' width='80' height='3.4' fill='%231d3350'/><rect x='0' y='30.6' width='80' height='3.4' fill='%231d3350'/><rect x='0' y='34' width='36' height='3.4' fill='%231d3350'/><rect x='36' y='34' width='4' height='3.4' fill='%23f4ecdd'/><rect x='40' y='34' width='40' height='3.4' fill='%231d3350'/><rect x='0' y='37.4' width='32' height='3.4' fill='%231d3350'/><rect x='32' y='37.4' width='12' height='3.4' fill='%23f4ecdd'/><rect x='44' y='37.4' width='36' height='3.4' fill='%231d3350'/><rect x='0' y='40.8' width='12' height='3.4' fill='%231d3350'/><rect x='12' y='40.8' width='8' height='3.4' fill='%23f4ecdd'/><rect x='20' y='40.8' width='12' height='3.4' fill='%231d3350'/><rect x='32' y='40.8' width='12' height='3.4' fill='%23f4ecdd'/><rect x='44' y='40.8' width='12' height='3.4' fill='%231d3350'/><rect x='56' y='40.8' width='8' height='3.4' fill='%23f4ecdd'/><rect x='64' y='40.8' width='16' height='3.4' fill='%231d3350'/><rect x='0' y='44.2' width='12' height='3.4' fill='%231d3350'/><rect x='12' y='44.2' width='12' height='3.4' fill='%23f4ecdd'/><rect x='24' y='44.2' width='8' height='3.4' fill='%231d3350'/><rect x='32' y='44.2' width='12' height='3.4' fill='%23f4ecdd'/><rect x='44' y='44.2' width='8' height='3.4' fill='%231d3350'/><rect x='52' y='44.2' width='12' height='3.4' fill='%23f4ecdd'/><rect x='64' y='44.2' width='16' height='3.4' fill='%231d3350'/><rect x='0' y='47.6' width='16' height='3.4' fill='%231d3350'/><rect x='16' y='47.6' width='12' height='3.4' fill='%23f4ecdd'/><rect x='28' y='47.6' width='4' height='3.4' fill='%231d3350'/><rect x='32' y='47.6' width='12' height='3.4' fill='%23f4ecdd'/><rect x='44' y='47.6' width='4' height='3.4' fill='%231d3350'/><rect x='48' y='47.6' width='12' height='3.4' fill='%23f4ecdd'/><rect x='60' y='47.6' width='20' height='3.4' fill='%231d3350'/><rect x='0' y='51' width='20' height='3.4' fill='%231d3350'/><rect x='20' y='51' width='12' height='3.4' fill='%23f4ecdd'/><rect x='32' y='51' width='4' height='3.4' fill='%231d3350'/><rect x='36' y='51' width='4' height='3.4' fill='%23f4ecdd'/><rect x='40' y='51' width='4' height='3.4' fill='%231d3350'/><rect x='44' y='51' width='12' height='3.4' fill='%23f4ecdd'/><rect x='56' y='51' width='24' height='3.4' fill='%231d3350'/><rect x='0' y='54.4' width='12' height='3.4' fill='%231d3350'/><rect x='12' y='54.4' width='24' height='3.4' fill='%23f4ecdd'/><rect x='36' y='54.4' width='4' height='3.4' fill='%231d3350'/><rect x='40' y='54.4' width='24' height='3.4' fill='%23f4ecdd'/><rect x='64' y='54.4' width='16' height='3.4' fill='%231d3350'/><rect x='0' y='57.8' width='20' height='3.4' fill='%231d3350'/><rect x='20' y='57.8' width='12' height='3.4' fill='%23f4ecdd'/><rect x='32' y='57.8' width='4' height='3.4' fill='%231d3350'/><rect x='36' y='57.8' width='4' height='3.4' fill='%23f4ecdd'/><rect x='40' y='57.8' width='4' height='3.4' fill='%231d3350'/><rect x='44' y='57.8' width='12' height='3.4' fill='%23f4ecdd'/><rect x='56' y='57.8' width='24' height='3.4' fill='%231d3350'/><rect x='0' y='61.2' width='16' height='3.4' fill='%231d3350'/><rect x='16' y='61.2' width='12' height='3.4' fill='%23f4ecdd'/><rect x='28' y='61.2' width='4' height='3.4' fill='%231d3350'/><rect x='32' y='61.2' width='12' height='3.4' fill='%23f4ecdd'/><rect x='44' y='61.2' width='4' height='3.4' fill='%231d3350'/><rect x='48' y='61.2' width='12' height='3.4' fill='%23f4ecdd'/><rect x='60' y='61.2' width='20' height='3.4' fill='%231d3350'/><rect x='0' y='64.6' width='12' height='3.4' fill='%231d3350'/><rect x='12' y='64.6' width='12' height='3.4' fill='%23f4ecdd'/><rect x='24' y='64.6' width='8' height='3.4' fill='%231d3350'/><rect x='32' y='64.6' width='12' height='3.4' fill='%23f4ecdd'/><rect x='44' y='64.6' width='8' height='3.4' fill='%231d3350'/><rect x='52' y='64.6' width='12' height='3.4' fill='%23f4ecdd'/><rect x='64' y='64.6' width='16' height='3.4' fill='%231d3350'/><rect x='0' y='68' width='12' height='3.4' fill='%231d3350'/><rect x='12' y='68' width='8' height='3.4' fill='%23f4ecdd'/><rect x='20' y='68' width='12' height='3.4' fill='%231d3350'/><rect x='32' y='68' width='12' height='3.4' fill='%23f4ecdd'/><rect x='44' y='68' width='12' height='3.4' fill='%231d3350'/><rect x='56' y='68' width='8' height='3.4' fill='%23f4ecdd'/><rect x='64' y='68' width='16' height='3.4' fill='%231d3350'/><rect x='0' y='71.4' width='32' height='3.4' fill='%231d3350'/><rect x='32' y='71.4' width='12' height='3.4' fill='%23f4ecdd'/><rect x='44' y='71.4' width='36' height='3.4' fill='%231d3350'/><rect x='0' y='74.8' width='36' height='3.4' fill='%231d3350'/><rect x='36' y='74.8' width='4' height='3.4' fill='%23f4ecdd'/><rect x='40' y='74.8' width='40' height='3.4' fill='%231d3350'/><rect x='0' y='78.2' width='80' height='3.4' fill='%231d3350'/><rect x='0' y='81.6' width='80' height='3.4' fill='%231d3350'/><rect x='0' y='85' width='4' height='3.4' fill='%231d3350'/><rect x='4' y='85' width='4' height='3.4' fill='%23f4ecdd'/><rect x='8' y='85' width='12' height='3.4' fill='%231d3350'/><rect x='20' y='85' width='4' height='3.4' fill='%23f4ecdd'/><rect x='24' y='85' width='12' height='3.4' fill='%231d3350'/><rect x='36' y='85' width='4' height='3.4' fill='%23f4ecdd'/><rect x='40' y='85' width='12' height='3.4' fill='%231d3350'/><rect x='52' y='85' width='4' height='3.4' fill='%23f4ecdd'/><rect x='56' y='85' width='12' height='3.4' fill='%231d3350'/><rect x='68' y='85' width='4' height='3.4' fill='%23f4ecdd'/><rect x='72' y='85' width='8' height='3.4' fill='%231d3350'/><rect x='0' y='88.4' width='80' height='3.4' fill='%231d3350'/><rect width='100%' height='100%' fill='url(%23k)'/></svg>") repeat-x left bottom / 80px 91.8px,
    var(--stitch) 0 0 / 6px 5px,
    radial-gradient(420px 220px at 0% 100%, rgba(232, 135, 58, .22), transparent 70%),
    #1d3350;
}
html body .wallet-hero::before { display: none; }
html body .wallet-hero::after { display: none; }
/* The shared card letters its small print at a third of white, too faint
   on the knit */
html body .wallet-hero .wallet-ref, html body .wallet-hero [style*="rgba(255,255,255,0.35)"], html body .wallet-hero [style*="color:color-mix(in srgb, var(--paper)"], html body .wallet-hero [style*="rgba(255,255,255,0.4)"] { color: rgba(244, 236, 221, .8) !important; }
html body .wallet-balance-num {
  font-family: var(--font-display); font-variation-settings: normal; font-weight: 800; font-stretch: var(--display-stretch);
  letter-spacing: 0; overflow-wrap: normal;
  color: #ffffff;
}
html body .wallet-hero-btn-primary { background: #f4ecdd; color: #1a2a3f; border: 0; font-family: var(--font-ui); font-weight: 700; border-radius: 10px; }
html body .wallet-hero-btn-primary:hover { background: #ffffff; color: #1a2a3f; }
html body .wallet-hero-btn-secondary { font-family: var(--font-ui); font-weight: 600; color: #f4ecdd; border-color: rgba(244, 236, 221, .45); border-radius: 10px; }

/* ── Mystery box card (styled by assets/css/pages/home.css): a parcel
   with a knitted band down its side ── */
html .ed-card-mystery {
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
}
html .ed-card-mystery:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
html .ed-card-mystery::before {
  top: 0; bottom: 0; left: 18%; right: auto; width: 15px; height: auto; border-radius: 0;
  background: var(--stitch-s) 0 0 / 4px 3.4px, linear-gradient(90deg, var(--navy) 0 3px, var(--berry) 3px 12px, var(--navy) 12px); opacity: 1; z-index: 0;
}
[dir="rtl"] .ed-card-mystery::before { left: auto; right: 18%; }
html .ed-card-mystery img { position: relative; z-index: 1; }

/* ── Product page buy box: the knitted band along its top ── */
html body .pd-buybox {
  position: relative;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 16px;
  box-shadow: var(--shadow-md);
  overflow: hidden;
  padding-top: 1.9rem;
}
html body .pd-buybox::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 15px;
  background: var(--knit-slim);
}
html body .pd-buybox .font-display.text-4xl { font-weight: 800; color: var(--berry); }
html.dark body .pd-buybox .font-display.text-4xl { color: var(--theme-600); }

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

/* Shared markup's stock purple, indigo and blue accents (coupon buttons,
   tier chips, focus rings) take the theme's accent. */
html .bg-purple-600, html .bg-indigo-600, html .bg-violet-600 { background-color: var(--theme-500); }
html .hover\:bg-purple-700:hover, html .hover\:bg-indigo-700:hover, html .hover\:bg-violet-700:hover { background-color: var(--theme-600); }
html .text-purple-500, html .text-purple-600, html .text-indigo-500, html .text-indigo-600, html .text-violet-600 { color: var(--theme-600); }
/* Solid purple action buttons (coupon Apply and the like) sit beside a
   field and take the colour of the main buttons. */
html .bg-purple-600.text-white, html .bg-indigo-600.text-white, html .bg-violet-600.text-white {
  background-color: var(--btn-bg) !important; color: var(--btn-ink) !important; border-radius: 10px;
}
html .bg-purple-50, html .bg-indigo-50, html .bg-violet-50, html .bg-purple-100 { background-color: var(--gold-soft); }
html.dark .bg-purple-50, html.dark .bg-indigo-50, html.dark .bg-violet-50 { background-color: var(--gold-soft) !important; }
html .border-purple-200, html .border-indigo-200, html .border-violet-200 { border-color: rgba(var(--theme-500-rgb), .3); }
html.dark .border-violet-200 { border-color: rgba(var(--theme-500-rgb), .35) !important; }
html .focus\:ring-purple-400:focus { --tw-ring-color: rgba(var(--theme-500-rgb), .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, 253, 247, .3); border-top-color: var(--btn-ink); }

/* ── Winners page cards ── */
html .wnc { border-radius: var(--radius); background: var(--paper-2); border: 1px solid var(--rule); box-shadow: var(--shadow); }
html .wnc:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }

/* ── Cart and checkout: the order total under a knitted band ──
   Picked out by what the panels contain, so no copies of their markup
   (or their Alpine hooks) live in the theme. */
html [id^="cart-row-"] { background: var(--paper-2) !important; border: 1px solid var(--rule) !important; border-radius: 14px !important; }
html .rounded-2xl:has(> div > div > #summary-total),
html section.rounded-2xl:has([x-text="totalDisplay()"]) {
  position: relative;
  background: var(--paper-2) !important;
  border: 1px solid var(--rule) !important;
  border-radius: 16px !important;
  box-shadow: var(--shadow-md) !important;
  overflow: hidden;
  padding-top: 1.6rem !important;
}
html .rounded-2xl:has(> div > div > #summary-total)::before,
html section.rounded-2xl:has([x-text="totalDisplay()"])::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 15px;
  background: var(--knit-slim);
}
html .rounded-2xl:has(> div > div > #summary-total) > div,
html section.rounded-2xl:has([x-text="totalDisplay()"]) > div { border-style: dashed !important; }
html #summary-total,
html section.rounded-2xl [x-text="totalDisplay()"] {
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: var(--display-stretch);
  font-size: 1.8rem;
  color: var(--berry);
}
html.dark #summary-total, html.dark section.rounded-2xl [x-text="totalDisplay()"] { color: var(--theme-600); }

/* The status strip holds one line, never wrapping inside its 32px. */
.hdr-strip .ed-status, .hdr-strip .ed-status * { white-space: nowrap; }
.hdr-strip .ed-status { font-size: 11px; letter-spacing: .05em; }
@media (max-width: 1023px) { .hdr-strip .ws-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; }
}

/* Tab bars on the Earn hub and the winners page sit on the theme's own
   surfaces, not a black band, after dark; the chosen tab is a main button. */
html.dark #pillNavBar, html.dark #pillNavBar > div { background-color: var(--paper-2) !important; border-color: var(--rule) !important; }
html .wn-tab-bar { background: rgba(243, 245, 247, .95); }
html.dark .wn-tab-bar { background: rgba(36, 33, 32, .96); }
html .wn-tab { font-family: var(--font-ui); font-size: 14px; }
html .wn-tab-active, html.dark .wn-tab-active, html.dark button.wn-tab-active { background: var(--btn-bg); color: var(--btn-ink); box-shadow: var(--btn-shadow); }

/* ── My Winnings: each prize seen through a frosted pane in a pine frame,
   a strip of knitting along the card's top in its own colourway ── */
.ws-win {
  --k: var(--berry);
  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;
}
.ws-win:nth-child(3n+2) { --k: #2f6596; }
.ws-win:nth-child(3n+3) { --k: #3f7d72; }
.ws-win:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.ws-win__knit {
  height: 15px;
  background:
    var(--stitch-s) 0 0 / 4px 3.4px,
    radial-gradient(circle, #f4ecdd 0 1.2px, transparent 1.6px) 2px 7.5px / 8px 15px repeat-x,
    linear-gradient(180deg, #1d3350 0 3.4px, var(--k) 3.4px 11.6px, #1d3350 11.6px);
}
html.dark .ws-win__knit { background: var(--stitch-s) 0 0 / 4px 3.4px, radial-gradient(circle, #efe3d0 0 1.2px, transparent 1.6px) 2px 7.5px / 8px 15px repeat-x, linear-gradient(180deg, #2b2725 0 3.4px, var(--k) 3.4px 11.6px, #2b2725 11.6px); }
.ws-win__frame { margin: .85rem .85rem 0; padding: 8px; border-radius: 8px; background: linear-gradient(160deg, #d29a62, #a96b3a); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); }
html.dark .ws-win__frame { background: linear-gradient(160deg, #8f5a34, #5e3a20); }
.ws-win__pane { position: relative; overflow: hidden; border-radius: 3px; background: radial-gradient(ellipse 72% 66% at 50% 48%, #ffffff 45%, #dceaf5 80%, #b7d1e6); }
.ws-win__pane::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: url("assets/images/frost.svg") 0 0 / 150px 150px;
  -webkit-mask: radial-gradient(ellipse 70% 62% at 50% 46%, transparent 55%, #000 100%);
  mask: radial-gradient(ellipse 70% 62% at 50% 46%, transparent 55%, #000 100%);
  opacity: .9;
}
.ws-win__pane img { position: relative; z-index: 0; mix-blend-mode: multiply; }
.ws-win__badges { position: absolute; z-index: 3; top: .5rem; inset-inline-start: .5rem; display: flex; flex-wrap: wrap; gap: .35rem; }
.ws-win__tag {
  display: inline-flex; align-items: center;
  padding: .22rem .6rem;
  font-size: 11.5px; font-weight: 700; letter-spacing: .03em;
  color: #1a2a3f; background: rgba(255, 255, 255, .92); border: 1px solid rgba(26, 42, 63, .14); border-radius: 999px;
}
.ws-win__tag--open { color: #ffffff; background: var(--btn-bg); border-color: transparent; }
.ws-win__tag--done { color: #ffffff; background: #2f6596; border-color: transparent; }
html.dark .ws-win__tag--open { color: var(--btn-ink); }
html.dark .ws-win__tag--done { color: #121110; background: #9cc4e4; }
.ws-win__name { font-family: var(--font-display); font-weight: 800; font-stretch: var(--display-stretch); font-size: 1.3rem; line-height: 1.2; color: var(--ink); overflow-wrap: anywhere; }
.ws-win__label { padding-top: .6rem; border-top: 1.5px dashed var(--rule); }
.ws-win__price { font-family: var(--font-display); font-weight: 800; font-stretch: var(--display-stretch); font-size: clamp(1.15rem, 2.6vw, 1.4rem); line-height: 1; color: var(--berry); overflow-wrap: normal; }
html.dark .ws-win__price { color: var(--theme-600); }
.ws-win__btn { min-height: 2.75rem; padding: .55rem .9rem; font-size: .92rem; }
.ws-win__cart, .ws-win__btn-off {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  border-radius: 12px; font-weight: 600;
}
.ws-win__cart { color: var(--ink); background: var(--paper-2); border: 1px solid var(--rule); }
.ws-win__cart:hover { border-color: var(--theme-500); color: var(--theme-600); }
.ws-win__btn-off { color: var(--ink-soft); background: transparent; border: 1px dashed var(--rule); cursor: not-allowed; }
.ws-win__claimed {
  display: flex; align-items: center; justify-content: center; gap: .4rem;
  min-height: 2.75rem; padding: .5rem;
  font-size: .92rem; font-weight: 600;
  color: var(--theme-600); background: var(--rose-soft); border-radius: 12px;
}

/* The brand quote in the footer, in the display face */
html .ws-footer p.font-display { font-family: var(--font-display); font-weight: 600; font-stretch: 100%; }

/* ── Materials the skins share (assets/css/skin/*.css and the plugin
   variants) ──
   --k1 … --k5   the five yarns: lingonberry, fjord blue, spruce, honey and
                 navy (cream after dark, where navy would vanish)
   --wool        the cream of a woven label
   --pine-wood   the honey pine of the window frames
   --snowcap     a ridge of snow resting along the top of a card
   --icicles     a row of icicles hanging from an edge
   --yarn-line   a narrow knitted stripe of all five yarns, for progress
                 bars and table heads
   The frost tile (assets/images/frost.svg) is linked by each sheet with a
   path of its own, since a url() in a custom property resolves where it
   is used. */
:root {
  --k1: #b8323c;
  --k2: #2f6596;
  --k3: #2f7a6a;
  --k4: #c4862f;
  --k5: #1d3350;
  --k-ink: #ffffff;
  --wool-label: #f7f0e3;
  --stitch-red: rgba(184, 50, 60, .55);
  --pine-wood:
    repeating-linear-gradient(92deg, rgba(110, 62, 24, 0) 0 9px, rgba(110, 62, 24, .12) 9px 10px, rgba(110, 62, 24, 0) 10px 23px),
    linear-gradient(160deg, #d9a56c, #b07240 60%, #a0632f);
  --pine-edge: #7d4a22;
  --snow-1: #ffffff;
  --snow-2: #d6e6f2;
  --snowcap: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='16' viewBox='0 0 120 16'><path d='M0 16 V9 C8 4 18 2 28 5 C38 8 46 3 58 2.5 C72 2 80 8 92 7.5 C104 7 110 3 120 6 V16 Z' fill='%23d6e6f2'/><path d='M0 16 V10.5 C8 5.5 18 3.5 28 6.5 C38 9.5 46 4.5 58 4 C72 3.5 80 9.5 92 9 C104 8.5 110 4.5 120 7.5 V16 Z' fill='%23ffffff'/><path d='M14 7 C18 6 22 6 25 7 M64 5 C68 4.6 72 5 75 6' stroke='%23ffffff' stroke-width='1.2' stroke-linecap='round' fill='none' opacity='.9'/></svg>") repeat-x left bottom / 120px 16px;
  --icicles: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='64' height='20' viewBox='0 0 64 20'><path d='M0 0 H64 V3 H60 L58.5 11 L57 3 H48 L45.5 19 L43 3 H34 L32.5 9 L31 3 H22 L19.5 15 L17 3 H8 L7 7 L6 3 H0 Z' fill='%23cfe3f2'/><path d='M44.2 4 L45.5 16 M18.4 4 L19.5 12' stroke='%23ffffff' stroke-width='.9' stroke-linecap='round'/><path d='M0 0 H64 V3 H0 Z' fill='%23ffffff'/></svg>") repeat-x left top / 64px 20px;
  --yarn-line:
    var(--stitch-s) 0 0 / 4px 3.4px,
    linear-gradient(90deg, var(--k1) 0 20%, var(--k2) 0 40%, var(--k3) 0 60%, var(--k4) 0 80%, var(--k5) 0);
  --veil: rgba(17, 36, 55, .55);
  /* Ink for cart badges and the like on --theme-600 (fjord blue by day) */
  --theme-600-ink: #ffffff;
}
html.dark {
  --k1: #e2707a;
  --k2: #9cc4e4;
  --k3: #8fcdbd;
  --k4: #f0c27a;
  --k5: #efe3d0;
  --k-ink: #1a1817;
  --wool-label: #efe3d0;
  --pine-wood:
    repeating-linear-gradient(92deg, rgba(0, 0, 0, 0) 0 9px, rgba(0, 0, 0, .14) 9px 10px, rgba(0, 0, 0, 0) 10px 23px),
    linear-gradient(160deg, #94603a, #6c4122 60%, #5a3519);
  --pine-edge: #3d2412;
  --snow-1: #e9eef3;
  --snow-2: #8fa6ba;
  --snowcap: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='16' viewBox='0 0 120 16'><path d='M0 16 V9 C8 4 18 2 28 5 C38 8 46 3 58 2.5 C72 2 80 8 92 7.5 C104 7 110 3 120 6 V16 Z' fill='%238fa6ba'/><path d='M0 16 V10.5 C8 5.5 18 3.5 28 6.5 C38 9.5 46 4.5 58 4 C72 3.5 80 9.5 92 9 C104 8.5 110 4.5 120 7.5 V16 Z' fill='%23e3e9ef'/></svg>") repeat-x left bottom / 120px 16px;
  --icicles: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='64' height='20' viewBox='0 0 64 20'><path d='M0 0 H64 V3 H60 L58.5 11 L57 3 H48 L45.5 19 L43 3 H34 L32.5 9 L31 3 H22 L19.5 15 L17 3 H8 L7 7 L6 3 H0 Z' fill='%23aec4d6'/><path d='M44.2 4 L45.5 16 M18.4 4 L19.5 12' stroke='%23f3d6b4' stroke-width='.9' stroke-linecap='round'/><path d='M0 0 H64 V3 H0 Z' fill='%23e3e9ef'/></svg>") repeat-x left top / 64px 20px;
  --veil: rgba(10, 9, 8, .62);
  /* After dark the accent is a light ember */
  --theme-600-ink: #2a1606;
}

/* ── Game palette ──
   The earn-games arena hands these to each HTML5 board: by day the
   boards are fresh snow with frost-blue wells, tiles rising from wool
   cream through frost and fjord blue, spruce and honey to lingonberry and
   navy; by night they are the lodge's charcoal wool in firelight, tiles
   rising to ember and cream. */
:root {
  --game-bg:        #f3f7fa;
  --game-surface:   #e1ebf3;
  --game-surface-2: #ffffff;
  --game-ink:       #1a2a3f;
  --game-muted:     #607186;
  --game-accent:    #b8323c;
  --game-accent-ink:#ffffff;
  --game-good:      #2f7a6a;
  --game-bad:       #b8323c;
  --game-tile-1:    #f4ecdd;
  --game-tile-2:    #a9cbe4;
  --game-tile-3:    #4f81b0;
  --game-tile-4:    #2f7a6a;
  --game-tile-5:    #c4862f;
  --game-tile-6:    #b8323c;
  --game-tile-7:    #8f222b;
  --game-tile-8:    #1d3350;
  --game-radius:    10px;
  --game-font:      'Bricolage Grotesque', 'Wix Madefor Text', system-ui, sans-serif;
  --game-font-css:  "/assets/themes/winter-sale/assets/fonts/fonts.css";
  /* Arena chrome (assets/css/game-arena.css): snow, not a dark screen */
  --game-arena-screen: #f3f7fa;
  --game-arena-coins:  #b7832f;
  --game-arena-win:    #2f7a6a;
  --game-arena-danger: #b8323c;
  --game-pattern:   url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'><g fill='none' stroke='%232f6596' stroke-opacity='.1' stroke-width='1.3' stroke-linecap='round'><path d='M30 22v20M21.3 27l17.4 10M21.3 37l17.4-10'/><path d='M118 96v14M112 99l12 8M112 107l12-8'/></g><g fill='%232f6596' fill-opacity='.1'><circle cx='96' cy='30' r='2'/><circle cx='54' cy='120' r='1.6'/><circle cx='140' cy='150' r='2.2'/><circle cx='12' cy='86' r='1.4'/></g></svg>");
}
html.dark {
  --game-bg:        #1a1817;
  --game-surface:   #242120;
  --game-surface-2: #34302d;
  --game-ink:       #f5eee5;
  --game-muted:     #a99f94;
  --game-accent:    #f5a35c;
  --game-accent-ink:#2a1606;
  --game-good:      #8fcdbd;
  --game-bad:       #e2707a;
  --game-tile-1:    #3d3631;
  --game-tile-2:    #4d6274;
  --game-tile-3:    #9cc4e4;
  --game-tile-4:    #8fcdbd;
  --game-tile-5:    #f0c27a;
  --game-tile-6:    #f5a35c;
  --game-tile-7:    #e2707a;
  --game-tile-8:    #f5eee5;
  --game-arena-screen: #141211;
  --game-arena-coins:  #f0c27a;
  --game-arena-win:    #8fcdbd;
  --game-arena-danger: #e2707a;
  --game-pattern:   url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'><g fill='none' stroke='%23f5d49a' stroke-opacity='.09' stroke-width='1.3' stroke-linecap='round'><path d='M30 22v20M21.3 27l17.4 10M21.3 37l17.4-10'/><path d='M118 96v14M112 99l12 8M112 107l12-8'/></g><g fill='%23f5d49a' fill-opacity='.09'><circle cx='96' cy='30' r='2'/><circle cx='54' cy='120' r='1.6'/><circle cx='140' cy='150' r='2.2'/><circle cx='12' cy='86' r='1.4'/></g></svg>");
}

/* ── Standalone pages ──
   Age check, unsubscribe and change language are their own documents that
   never run header.php's head_meta, so the skin sheets don't reach them;
   their few rules live here, where they do load. */
html body.age-check-body { background: var(--flurry), var(--paper); font-family: var(--font-ui); }
html body .age-check-card {
  position: relative; overflow: hidden;
  padding-top: calc(30.6px + 1.6rem);
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 20px;
  box-shadow: var(--shadow-md);
}
html body .age-check-card::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 30.6px;
  background: var(--knit-band);
}
html body .age-check-logo {
  border-radius: 6px;
  background: radial-gradient(ellipse 72% 66% at 50% 48%, #ffffff 45%, #dceaf5 80%, #b7d1e6);
  box-shadow: 0 0 0 7px #c48a52, 0 0 0 8px var(--pine-edge);
  padding: 8px;
}
html body .age-check-title { font-family: var(--font-display); font-stretch: var(--display-stretch); font-weight: 800; letter-spacing: 0; }
html body .age-check-input { border-radius: 10px; border: 1.5px solid var(--rule); background: var(--paper-2); font-family: var(--font-ui); }
html body .age-check-input:focus { border-color: var(--theme-500); box-shadow: 0 0 0 3px var(--rose-soft); outline: none; }
html body .age-check-submit { border-radius: 12px; background: var(--btn-bg); color: var(--btn-ink); box-shadow: var(--btn-shadow); font-family: var(--font-ui); }
html body .age-check-foot a { color: var(--theme-600); }
html body .lang-card {
  border-radius: 14px !important;
  border: 1.5px dashed var(--rule) !important;
  background: var(--paper-2) !important;
  transition: transform .15s ease, border-color .15s ease;
}
html body .lang-card:hover { transform: translateY(-2px); border-color: var(--theme-400) !important; }
html body .lang-card:has(input:checked) {
  border-style: solid !important;
  border-color: transparent !important;
  box-shadow: 0 0 0 5px #c48a52, 0 0 0 6px var(--pine-edge), var(--shadow) !important;
  background: color-mix(in srgb, var(--frost) 30%, var(--paper-2)) !important;
}
html body .lang-card img { border-radius: 50%; box-shadow: 0 0 0 2px var(--paper-2), 0 0 0 4px var(--k2); }
html body .lang-card:has(input:checked) .rounded-full:has(> .fa-check) { background: var(--stitch-s) 0 0 / 4px 3.4px, var(--btn-bg) !important; color: var(--btn-ink) !important; }
html body:has(.lang-card) h1 { font-family: var(--font-display); font-stretch: var(--display-stretch); font-weight: 800 !important; letter-spacing: 0 !important; }
html body:has(.lang-card) .footer-safe { box-shadow: 0 -12px 24px -18px rgba(17, 36, 55, .55); }
html body:has(.lang-card) .footer-safe::before { content: ''; position: absolute; left: 0; right: 0; top: -5px; height: 5px; background: var(--yarn-line); }
html body:has(.lang-card) .w-9.h-9.rounded-xl:has(> .fa-language) { background: var(--stitch-s) 0 0 / 4px 3.4px, var(--k2) !important; color: #fff !important; outline: 1.5px dashed rgba(255, 255, 255, .55); outline-offset: -4px; }

/* 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: #2f796a; --px-warn: #b45309; --px-crit: #b8323c; --px-info: #24507a; }
html.dark:root { --px-good: #8ecdbd; --px-warn: #fbbf23; --px-crit: #efaeb4; --px-info: #9bc3e4; }
/* The cart's urgent "Complete Payment" prints white on the crit tone; the
   night crit is light, so its label takes the dark paper instead. */
html.dark body a[style*="background:var(--px-crit)"] { color: var(--paper) !important; }
/* Seller Centre keeps its own tone names; point them at the same hues. */
html body :is(.sc-page, .sc-panel) { --sc-good: var(--px-good); --sc-warn: var(--px-warn); --sc-crit: var(--px-crit); --sc-info: var(--px-info); }

/* Changing language, the scene (winter-sale.js): a window pane frosts over
   the old name before the reload; after it the ice cracks along the lines
   drawn in winter-sale.js, its four pieces thaw and slide off and the new
   name is behind the glass. The rime under the pieces hides their seams
   until the crack. The window is the same on both pages, so the reload
   never shows. */
.ws-lang-stage { overflow: hidden; background: color-mix(in srgb, var(--theme-900) 50%, transparent); }
html.dark .ws-lang-stage { background: color-mix(in srgb, #0b0a0a 56%, transparent); }
.ws-lang-window {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  width: min(560px, 100%); box-sizing: border-box; padding: 16px 16px 14px;
  background: var(--paper-2); color: var(--ink); border-radius: 14px;
  box-shadow: 0 0 0 1px var(--rule), 0 34px 70px -30px rgba(0, 0, 0, .6);
  /* Fixed faces, not the page language's (html[lang] above): the old name
     has to set the same on the new page as on the old. */
  --font-display: 'Wix Madefor Text', 'Segoe UI', system-ui, 'Noto Sans', sans-serif;
  --font-ui: 'Wix Madefor Text', 'Segoe UI', system-ui, 'Noto Sans', sans-serif;
  font-family: var(--font-ui);
}
.ws-lang-frame {
  position: relative; width: 100%; box-sizing: border-box; padding: 9px; border-radius: 8px;
  background: var(--pine-wood); box-shadow: inset 0 0 0 1px var(--pine-edge), 0 2px 0 var(--pine-edge);
}
/* Icicles along the top of the pane */
.ws-lang-frame::before {
  content: ''; position: absolute; left: 9px; right: 9px; top: 9px; height: 10px; z-index: 3; pointer-events: none;
  background: conic-gradient(from -38deg at 50% 100%, var(--snow-2) 0 76deg, transparent 76deg) 0 0 / 14px 10px repeat-x;
  opacity: .9;
}
.ws-lang-glass {
  position: relative; display: grid; place-items: center; min-height: 170px; padding: 32px 20px; box-sizing: border-box;
  border-radius: 3px; overflow: clip;
  background: linear-gradient(160deg, color-mix(in srgb, var(--frost) 55%, var(--paper-2)), var(--paper-2) 70%);
}
.ws-lang-old, .ws-lang-new {
  grid-area: 1 / 1; max-width: 100%; text-align: center; overflow-wrap: anywhere;
  font: 800 clamp(28px, 8vw, 44px)/1.1 var(--font-display);
}
.ws-lang-new { color: var(--theme-600); opacity: 0; }
.ws-lang-rime, .ws-lang-ice {
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 18% 24%, rgba(255, 255, 255, .75), transparent 26%),
    radial-gradient(circle at 80% 72%, rgba(255, 255, 255, .6), transparent 30%),
    repeating-linear-gradient(60deg, transparent 0 7px, rgba(255, 255, 255, .22) 7px 8px),
    repeating-linear-gradient(-60deg, transparent 0 9px, rgba(255, 255, 255, .18) 9px 10px),
    color-mix(in srgb, var(--snow-2) 82%, var(--frost-2));
}
.ws-lang-f1 { --dx: 0%; --dy: -34%; --rot: -5deg; clip-path: polygon(0 0, 100% 0, 88% 10%, 78% 24%, 64% 34%, 52% 46%, 40% 36%, 30% 22%, 18% 12%); }
.ws-lang-f2 { --dx: 32%; --dy: 6%; --rot: 7deg; clip-path: polygon(100% 0, 100% 100%, 90% 90%, 76% 76%, 66% 60%, 52% 46%, 64% 34%, 78% 24%, 88% 10%); }
.ws-lang-f3 { --dx: 0%; --dy: 38%; --rot: 4deg; clip-path: polygon(100% 100%, 0 100%, 14% 88%, 28% 70%, 40% 58%, 52% 46%, 66% 60%, 76% 76%, 90% 90%); }
.ws-lang-f4 { --dx: -32%; --dy: 4%; --rot: -7deg; clip-path: polygon(0 100%, 0 0, 18% 12%, 30% 22%, 40% 36%, 52% 46%, 40% 58%, 28% 70%, 14% 88%); }
.ws-lang-cracks { position: absolute; inset: 0; z-index: 2; opacity: 0; pointer-events: none; }
.ws-lang-cracks svg {
  display: block; width: 100%; height: 100%; overflow: visible;
  fill: none; stroke: #fff; stroke-width: 1.6; stroke-linejoin: round;
  filter: drop-shadow(0 0 1px var(--theme-600));
}
.ws-lang-cracks path { vector-effect: non-scaling-stroke; }
.ws-lang-sill { display: flex; align-items: center; gap: 12px; color: var(--ink-soft); font: 700 12px/1 var(--font-ui); letter-spacing: .14em; }
.ws-lang-side { display: inline-flex; align-items: center; gap: 6px; }
.ws-lang-globe { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--theme-500); stroke-width: 1.5; }
.ws-lang-flake { color: var(--frost-2); font-size: 14px; }

/* Out: the window comes up and frost creeps over the pane from its corners. */
.px-lang-stage-out .ws-lang-window { animation: ws-lang-window-in .35s cubic-bezier(.2, .8, .3, 1.1) both; }
.px-lang-stage-out .ws-lang-rime { animation: ws-lang-frost .55s ease-out .27s both; }
.px-lang-stage-out .ws-lang-ice { animation: ws-lang-frost .45s ease-out .25s both; }
.px-lang-stage-out .ws-lang-f2 { animation-delay: .33s; }
.px-lang-stage-out .ws-lang-f3 { animation-delay: .38s; }
.px-lang-stage-out .ws-lang-f4 { animation-delay: .3s; }
.px-lang-stage-out .ws-lang-old { animation: ws-lang-fog .5s ease-in .3s both; }
/* In: from the frosted pane, it cracks, the pieces thaw away and the new name is there. */
.px-lang-stage-in .ws-lang-old { animation: ws-lang-gone .3s ease-in .3s both; }
.px-lang-stage-in .ws-lang-cracks { animation: ws-lang-show .1s linear .05s both, ws-lang-clear .3s ease-in .42s forwards; }
.px-lang-stage-in .ws-lang-cracks svg { animation: ws-lang-crack .22s ease-out .05s both; }
.px-lang-stage-in .ws-lang-rime { animation: ws-lang-clear .12s linear .2s both; }
.px-lang-stage-in .ws-lang-ice { animation: ws-lang-fall .5s ease-in .3s both; }
.px-lang-stage-in .ws-lang-f2, .px-lang-stage-in .ws-lang-f4 { animation-delay: .36s; }
.px-lang-stage-in .ws-lang-new { animation: ws-lang-thaw .4s ease-out .45s both; }
.px-lang-stage-in .ws-lang-window { animation: ws-lang-window-out .25s ease-in 1s both; }
@keyframes ws-lang-window-in { from { transform: translateY(18px); opacity: 0; } }
@keyframes ws-lang-window-out { to { transform: translateY(14px); opacity: 0; } }
@keyframes ws-lang-frost { from { opacity: 0; filter: blur(8px); } }
@keyframes ws-lang-fog { to { opacity: .55; filter: blur(3px); } }
@keyframes ws-lang-gone { from { opacity: .55; filter: blur(3px); } to { opacity: 0; filter: blur(3px); } }
@keyframes ws-lang-show { from { opacity: 0; } to { opacity: 1; } }
@keyframes ws-lang-clear { from { opacity: 1; } to { opacity: 0; } }
@keyframes ws-lang-crack { from { clip-path: circle(0% at 52% 46%); } to { clip-path: circle(80% at 52% 46%); } }
@keyframes ws-lang-fall { to { transform: translate(var(--dx), var(--dy)) rotate(var(--rot)); opacity: 0; filter: blur(2px); } }
@keyframes ws-lang-thaw { from { transform: scale(.96); filter: blur(6px); opacity: 0; } to { transform: none; filter: none; opacity: 1; } }
@media (max-width: 460px) {
  .ws-lang-window { padding: 12px 12px 12px; }
  .ws-lang-glass { padding: 28px 14px; min-height: 150px; }
}

/* 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 over 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: 55%; }
  html body div.flex.justify-between:has(> div h2.text-fit):has(> a) > a { flex: 0 1 auto; max-width: 45%; margin: 0; white-space: normal; text-wrap: balance; text-align: center; font-size: .8125rem; line-height: 1.2; letter-spacing: .02em; gap: .375rem; }
  html body div.flex.justify-between:has(> div h2.text-fit):has(> a) h2.text-fit { font-size: clamp(1.25rem, 6.4vw, 1.75rem); overflow-wrap: break-word; }
}

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

/* Windows (wallet, sign-out and the plugins' windows) sit on their own panel,
   with frost and wool insets inside it, so their secondary text takes a
   deeper step of the soft ink by day; the page around keeps its own. */
html:not(.dark) :is([role="dialog"], #logoutModal, #withdrawModal, .wallet-modal-panel) {
  --ink-soft: #4d5d72;
}
/* rev 868fe5109c9f2a2b */