/* ============================================================
   HANUKKAH THEME — eight nights of light and small gifts.
   Same class surface as editorial/theme.css, so shared header,
   footer, drawer and component classes stay styled.

   Built from the festival's own objects: a polished silver
   menorah, its arms ringed with knops and almond cups; candles
   twisted in blue and white wax and one of beeswax for the
   shamash; gelt in gold and silver foil, crimped at the edge;
   dreidels; presents wrapped in lapis paper printed with silver
   and tied with silver ribbon. Crisp white and lapis by day;
   after dark the window at night, deep blue with silver glints
   and the candles burning in it.

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

:root {
  --font-display: 'Frank Ruhl Libre', Georgia, 'PingFang SC', 'Microsoft YaHei', 'Noto Serif CJK SC', serif;
  --font-ui:      'Heebo', system-ui, 'Segoe UI', 'Noto Sans', sans-serif;

  --paper:        #f5f7fc;
  --paper-2:      #ffffff;
  --paper-3:      #e8eef9;
  --ink:          #0d1a3a;
  --ink-2:        #2a3a63;
  --ink-soft:     #5f6f94;
  --rule:         rgba(13, 26, 58, 0.13);
  --rule-soft:    rgba(13, 26, 58, 0.07);
  --radius:       14px;
  --radius-sm:    9px;
  --shadow:       0 1px 2px rgba(13, 26, 58, .06), 0 6px 16px -8px rgba(13, 26, 58, .22);
  --shadow-md:    0 2px 4px rgba(13, 26, 58, .06), 0 18px 34px -16px rgba(13, 26, 58, .34);

  /* Lapis */
  --theme-50:  #eef3fc;
  --theme-100: #d8e3f8;
  --theme-200: #b0c6f0;
  --theme-300: #7d9fe3;
  --theme-400: #4b76d1;
  --theme-500: #2556b8;
  --theme-600: #1d47a0;
  --theme-700: #183a84;
  --theme-800: #142f68;
  --theme-900: #0f234e;
  --theme-500-rgb: 37, 86, 184;
  --theme-600-rgb: 29, 71, 160;

  /* Wax, foil and flame */
  --hk-lapis: #1d47a0; --hk-deep: #123274; --hk-sky: #5d8ae0; --hk-midnight: #0b1736;
  --hk-silver: #c3ccdb; --hk-silver-hi: #f4f7fb; --hk-silver-lo: #7d8aa2; --hk-silver-edge: #5d6a82;
  --hk-gold: #f0c04e; --hk-gold-hi: #fff1b8; --hk-gold-lo: #c48a1c; --hk-gold-edge: #7a5410;
  --hk-flame: #ffb53a; --hk-wax: #f7f5ee; --hk-beeswax: #f0d58c; --hk-jam: #c4213c;

  /* The window at night: footer, winners, splash and login in both modes */
  --night:   #0b1736;
  --night-2: #12245a;
  --night-3: #1b3170;
  --on-night: #eef3fd;
  --on-night-soft: rgba(238, 243, 253, .78);

  /* Names other themes' shared markup reaches for */
  --gold:       #1d47a0;
  --gold-2:     #f0c04e;
  --gold-soft:  rgba(29, 71, 160, 0.08);
  --gold-ink:   #0d1a3a;
  --felt:       #0b1736;
  --felt-2:     #12245a;
  --on-felt:    #eef3fd;
  --on-felt-soft: rgba(238, 243, 253, 0.78);
  --peacock:    #1f7a8c;
  --peacock-soft: rgba(31, 122, 140, 0.1);
  --red:        #b8243a;
  --red-soft:   rgba(184, 36, 58, 0.09);
  --rose:       #2556b8;
  --rose-soft:  rgba(29, 71, 160, 0.08);

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

  /* Buttons: lapis with white lettering by day; after dark, polished silver */
  --btn-bg:       #1d47a0;
  --btn-bg-hover: #2556b8;
  --btn-ink:      #ffffff;
  --btn-shadow:   0 2px 0 #0d2564, 0 10px 20px -10px rgba(29, 71, 160, .7);
  --btn-shadow-hover: 0 3px 0 #0d2564, 0 14px 24px -10px rgba(29, 71, 160, .75);

  /* The menorah rail, the theme's edge wherever a section needs one: a
     polished silver bar strung with round knops and little almond cups,
     as the menorah's arms are worked. */
  --hk-rail-img: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='12' viewBox='0 0 28 12'><rect y='4.4' width='28' height='3.2' fill='%23c3ccdb'/><rect y='4.4' width='28' height='.8' fill='%23ffffff'/><rect y='6.9' width='28' height='.7' fill='%237d8aa2'/><circle cx='7' cy='6' r='3.7' fill='%23e3e9f2' stroke='%235d6a82' stroke-width='.7'/><circle cx='5.9' cy='4.9' r='1.2' fill='%23ffffff'/><path d='M17.6 2.6C17.8 7.4 24.2 7.4 24.4 2.6C23 3.8 22 4.2 21 3.2C20 4.2 19 3.8 17.6 2.6Z' fill='%23dfe6f2' stroke='%235d6a82' stroke-width='.6' stroke-linejoin='round'/><path d='M21 7.4V9.2' stroke='%235d6a82' stroke-width='.8'/><circle cx='21' cy='9.4' r='1.1' fill='%23c3ccdb' stroke='%235d6a82' stroke-width='.5'/></svg>");
  --hk-rail: var(--hk-rail-img) repeat-x left center / 28px 12px;

  /* Gift wrap, very faint, on the page: silver dots, little dreidels and
     a flame now and then, in a half-drop */
  --hk-paper-faint: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'><g fill='%231d47a0' fill-opacity='.05'><path d='M27 22h6v6l-3 5l-3-5Z'/><rect x='29.2' y='18.5' width='1.6' height='3.5'/><path d='M87 82h6v6l-3 5l-3-5Z'/><rect x='89.2' y='78.5' width='1.6' height='3.5'/></g><g fill='%231d47a0' fill-opacity='.07'><circle cx='90' cy='30' r='1.5'/><circle cx='30' cy='90' r='1.5'/><circle cx='60' cy='60' r='1.1'/><circle cx='0' cy='60' r='1.1'/><circle cx='120' cy='60' r='1.1'/></g><path d='M90 92c1.8 2.2 1.8 4 0 5c-1.8-1-1.8-2.8 0-5Z' fill='%23f0c04e' fill-opacity='.18'/></svg>");

  /* The window at night behind the footer, winners, splash and login: deep
     lapis going to midnight, silver glints, candlelight warming the sill */
  --hk-glints: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='140' viewBox='0 0 180 140'><g fill='%23dfe6f2'><path d='M24 18L25 22L29 23L25 24L24 28L23 24L19 23L23 22Z' fill-opacity='.6'/><path d='M132 66L132.7 68.3L135 69L132.7 69.7L132 72L131.3 69.7L129 69L131.3 68.3Z' fill-opacity='.5'/><circle cx='96' cy='22' r='1.1' fill-opacity='.55'/><circle cx='60' cy='104' r='1.2' fill-opacity='.4'/><circle cx='160' cy='120' r='.9' fill-opacity='.55'/><circle cx='150' cy='14' r='.8' fill-opacity='.5'/><circle cx='12' cy='76' r='.8' fill-opacity='.45'/></g></svg>");
  --night-bg:
    radial-gradient(620px 220px at 50% 118%, rgba(255, 181, 58, .22), transparent 70%),
    radial-gradient(420px 260px at 92% -60px, rgba(93, 138, 224, .3), transparent 70%),
    radial-gradient(380px 220px at 6% -40px, rgba(195, 204, 219, .14), transparent 70%),
    linear-gradient(180deg, #0a1533 0%, #0f1f4c 58%, #16296a 100%);

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

html.dark {
  --paper:        #081230;
  --paper-2:      #0f1d44;
  --paper-3:      #172a5a;
  --ink:          #edf2fc;
  --ink-2:        #c9d4ec;
  --ink-soft:     #8ea0c6;
  --rule:         rgba(223, 230, 242, 0.14);
  --rule-soft:    rgba(223, 230, 242, 0.07);
  --shadow:       0 1px 2px rgba(0, 0, 0, .4), 0 6px 18px -8px rgba(0, 0, 0, .7);
  --shadow-md:    0 2px 4px rgba(0, 0, 0, .4), 0 18px 36px -14px rgba(0, 0, 0, .85);

  /* Silver-blue by candlelight */
  --theme-50:  #101f47;
  --theme-100: #172a5a;
  --theme-200: #2c4584;
  --theme-300: #c7d6f8;
  --theme-400: #b4c8f6;
  --theme-500: #9fb9f3;
  --theme-600: #b4c8f6;
  --theme-700: #cfdcfa;
  --theme-800: #e2eafc;
  --theme-900: #f2f6fe;
  --theme-500-rgb: 159, 185, 243;
  --theme-600-rgb: 180, 200, 246;

  --gold:       #b4c8f6;
  --gold-2:     #f5cf6a;
  --gold-soft:  rgba(159, 185, 243, 0.12);
  --felt:       #060d24;
  --felt-2:     #0f1d44;
  --peacock:    #6fc3d3;
  --peacock-soft: rgba(111, 195, 211, 0.13);
  --red:        #ff8a98;
  --red-soft:   rgba(255, 138, 152, 0.13);
  --rose:       #b4c8f6;
  --rose-soft:  rgba(159, 185, 243, 0.12);

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

  --btn-bg:       #dfe6f1;
  --btn-bg-hover: #f2f5fa;
  --btn-ink:      #0b1736;
  --btn-shadow:   0 2px 0 #6d7a93, 0 10px 26px -10px rgba(223, 230, 242, .38);
  --btn-shadow-hover: 0 3px 0 #6d7a93, 0 14px 30px -10px rgba(223, 230, 242, .5);

  --hk-rail-img: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='12' viewBox='0 0 28 12'><rect y='4.4' width='28' height='3.2' fill='%23a7b3c8'/><rect y='4.4' width='28' height='.8' fill='%23eef2f8'/><rect y='6.9' width='28' height='.7' fill='%23485670'/><circle cx='7' cy='6' r='3.7' fill='%23c9d2e1' stroke='%23384560' stroke-width='.7'/><circle cx='5.9' cy='4.9' r='1.2' fill='%23ffffff'/><path d='M17.6 2.6C17.8 7.4 24.2 7.4 24.4 2.6C23 3.8 22 4.2 21 3.2C20 4.2 19 3.8 17.6 2.6Z' fill='%23bcc7d8' stroke='%23384560' stroke-width='.6' stroke-linejoin='round'/><path d='M21 7.4V9.2' stroke='%23384560' stroke-width='.8'/><circle cx='21' cy='9.4' r='1.1' fill='%23a7b3c8' stroke='%23384560' stroke-width='.5'/></svg>");
  --hk-paper-faint: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'><g fill='%23dfe6f2' fill-opacity='.05'><path d='M27 22h6v6l-3 5l-3-5Z'/><rect x='29.2' y='18.5' width='1.6' height='3.5'/><path d='M87 82h6v6l-3 5l-3-5Z'/><rect x='89.2' y='78.5' width='1.6' height='3.5'/></g><g fill='%23dfe6f2' fill-opacity='.12'><circle cx='90' cy='30' r='1'/><circle cx='30' cy='90' r='1'/><circle cx='60' cy='60' r='.8'/></g><path d='M90 92c1.8 2.2 1.8 4 0 5c-1.8-1-1.8-2.8 0-5Z' fill='%23ffb53a' fill-opacity='.2'/></svg>");
  --page-bg:
    radial-gradient(900px 420px at 86% -160px, rgba(255, 181, 58, 0.07), transparent 70%) no-repeat,
    radial-gradient(900px 420px at 8% -140px, rgba(93, 138, 224, 0.13), transparent 70%) no-repeat,
    var(--hk-paper-faint) repeat,
    var(--paper);
}

/* ── The festival's materials ──
   Every surface beyond the hero and footer is built from these, so a
   panel anywhere in the shop reads as Hanukkah at a glance:
   - the menorah rail (--hk-rail above) along the top of sheets and under
     table heads, and stood on its end (--hk-rail-v) for a leading edge;
   - foil crimp (--hk-crimp): the crinkled silver edge of a coin of gelt,
     along the top of stat cards, tickets, order slips and tags;
   - gelt (.hk-gelt in the system skin, --coin and friends): a foil coin
     with a milled rim for icon tiles, toast icons, the current page and
     step numbers — gold, silver, blue foil or copper by meaning;
   - a candle flame (--hk-flame-img) for eyebrows, list marks and the
     shamash rule under titles (--hk-shamash-rule);
   - twisted candle wax (--hk-twist): blue and white spirals filling
     progress bars, with a flame at the end where there is room;
   - gift wrap (--hk-wrap): lapis paper printed with silver dots, little
     dreidels and flames, tied with silver ribbon (--hk-ribbon), for
     feature panels;
   - a white linen cloth (--hk-linen) for products to stand on. */
:root {
  --hk-c1: #1d47a0; --hk-c2: #d99a1f; --hk-c3: #7d8aa2; --hk-c4: #0e2154; --hk-c5: #3b82c4;
  --hk-lapis-ink: #1a3f91; --hk-gold-ink: #85580a; --hk-silver-ink: #46536d; --hk-good-ink: #17725a; --hk-bad-ink: #a51d33;
  --hk-lapis-soft: rgba(29, 71, 160, .09); --hk-gold-soft: rgba(217, 154, 31, .14); --hk-silver-soft: rgba(125, 138, 162, .13); --hk-good-soft: rgba(23, 114, 90, .1); --hk-bad-soft: rgba(184, 36, 58, .09);
  --theme-600-ink: #ffffff;

  --hk-rail-v-img: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='28' viewBox='0 0 12 28'><rect x='4.4' width='3.2' height='28' fill='%23c3ccdb'/><rect x='4.4' width='.8' height='28' fill='%23ffffff'/><rect x='6.9' width='.7' height='28' fill='%237d8aa2'/><circle cx='6' cy='7' r='3.7' fill='%23e3e9f2' stroke='%235d6a82' stroke-width='.7'/><circle cx='4.9' cy='5.9' r='1.2' fill='%23ffffff'/><circle cx='6' cy='21' r='2.2' fill='%23dfe6f2' stroke='%235d6a82' stroke-width='.6'/></svg>");
  --hk-rail-v: var(--hk-rail-v-img) repeat-y center top / 12px 28px;
  --hk-crimp-img: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='6' height='9' viewBox='0 0 6 9'><path d='M0 0H6V6.4Q4.5 9 3 6.4Q1.5 9 0 6.4Z' fill='%23aeb9cc'/><path d='M0 0H3V6.4Q1.5 9 0 6.4Z' fill='%23eef2f8'/><path d='M0 0H6V1.4H0Z' fill='%231d47a0'/></svg>");
  --hk-crimp: var(--hk-crimp-img) repeat-x left top / 6px 9px;
  --hk-crimp-gold-img: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='6' height='9' viewBox='0 0 6 9'><path d='M0 0H6V6.4Q4.5 9 3 6.4Q1.5 9 0 6.4Z' fill='%23d9a63a'/><path d='M0 0H3V6.4Q1.5 9 0 6.4Z' fill='%23fff1b8'/><path d='M0 0H6V1.4H0Z' fill='%237a5410'/></svg>");
  --hk-flame-img: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 20'><path d='M8 1C12 6 13.4 9.6 13.4 12.6C13.4 16 11 18.6 8 18.6C5 18.6 2.6 16 2.6 12.6C2.6 9.6 4 6 8 1Z' fill='%23ffb53a'/><path d='M8 6.4C10.4 9.4 11 11.4 11 13.2C11 15.4 9.6 16.8 8 16.8C6.4 16.8 5 15.4 5 13.2C5 11.4 5.6 9.4 8 6.4Z' fill='%23fff2b0'/><path d='M8 12.6C9 13.6 9.2 14.6 8 15.6C6.8 14.6 7 13.6 8 12.6Z' fill='%232f6be0' fill-opacity='.6'/></svg>");
  --hk-flame: var(--hk-flame-img) center / contain no-repeat;
  /* A little candle on the rail: the shamash rule under titles */
  --hk-candle-img: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 30'><path d='M10 1C12.4 4 13.2 6 13.2 7.6C13.2 9.6 11.8 11 10 11C8.2 11 6.8 9.6 6.8 7.6C6.8 6 7.6 4 10 1Z' fill='%23ffb53a'/><path d='M10 4.6C11.2 6.2 11.5 7.2 11.5 8C11.5 9 10.8 9.7 10 9.7C9.2 9.7 8.5 9 8.5 8C8.5 7.2 8.8 6.2 10 4.6Z' fill='%23fff2b0'/><rect x='7' y='12' width='6' height='13' rx='1' fill='%23f0d58c'/><path d='M7 15.5L13 13.5M7 19.5L13 17.5M7 23.5L13 21.5' stroke='%23c89a3a' stroke-width='.8'/><path d='M3 25H17L15 29H5Z' fill='%23c3ccdb' stroke='%235d6a82' stroke-width='.6'/></svg>");
  --hk-shamash-rule: var(--hk-candle-img) center bottom / 20px 30px no-repeat, linear-gradient(90deg, transparent, #9aa6bb 18%, #9aa6bb 82%, transparent) center calc(100% - 2px) / 100% 1.5px no-repeat;
  --hk-kn-relief: 0 0 0 1px rgba(13, 26, 58, .28), 0 2px 0 rgba(13, 26, 58, .25), 0 8px 14px -8px rgba(13, 26, 58, .5);
  /* A silver setting round a frame or the chosen option */
  --hk-setting: 0 0 0 2px var(--paper-2), 0 0 0 4px #c3ccdb, 0 0 0 5px #5d6a82, 0 10px 22px -12px rgba(13, 26, 58, .5);
  --hk-silver-grad: linear-gradient(100deg, #7d8aa2 0%, #c3ccdb 22%, #f6f8fc 40%, #c3ccdb 60%, #8a96ad 88%, #6d7a93 100%);
  --hk-twist:
    linear-gradient(180deg, rgba(255, 255, 255, .45), transparent 55%),
    repeating-linear-gradient(-55deg, #2556b8 0 7px, #f7f5ee 7px 12px);
  --hk-linen:
    radial-gradient(60% 50% at 50% 42%, rgba(255, 255, 255, .95), transparent 72%),
    repeating-linear-gradient(0deg, rgba(29, 71, 160, .025) 0 2px, transparent 2px 4px),
    repeating-linear-gradient(90deg, rgba(29, 71, 160, .025) 0 2px, transparent 2px 4px),
    linear-gradient(170deg, #eef3fb, #f8fafd 55%, #e4ebf7);
  --hk-wrap-print: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'><g fill='%23dfe6f2' fill-opacity='.55'><circle cx='7' cy='7' r='1.5'/><circle cx='35' cy='35' r='1.5'/><circle cx='35' cy='7' r='.9'/><circle cx='7' cy='35' r='.9'/></g><g fill='%239fb6e8' fill-opacity='.55'><path d='M18 17h6v5.4l-3 4.6l-3-4.6Z'/><rect x='20.2' y='13.6' width='1.6' height='3.4'/><path d='M46 45h6v5.4l-3 4.6l-3-4.6Z'/><rect x='48.2' y='41.6' width='1.6' height='3.4'/></g><g fill='%23f0c04e' fill-opacity='.75'><path d='M49 13c2 2.4 2 4.4 0 5.6c-2-1.2-2-3.2 0-5.6Z'/><path d='M21 41c2 2.4 2 4.4 0 5.6c-2-1.2-2-3.2 0-5.6Z'/></g></svg>");
  --hk-wrap:
    var(--hk-wrap-print) 0 0 / 56px 56px repeat,
    linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .1) 46%, transparent 60%),
    linear-gradient(160deg, #2556b8, #1d47a0 55%, #163a88);
  /* The silver ring on the menorah's arm, its well left white for a
     product to stand in; and the same ring drawn only as a fine line,
     behind products on cards */
  --hk-ring: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-50 -50 100 100'><circle r='48.5' fill='%23c3ccdb' stroke='%235d6a82' stroke-width='1.2'/><circle r='48' fill='none' stroke='%23ffffff' stroke-width='1' stroke-dasharray='40 200' transform='rotate(200)'/><g stroke='%237d8aa2' stroke-width='2'><path transform='rotate(0)' d='M0 -43V-47'/><path transform='rotate(10)' d='M0 -43V-47'/><path transform='rotate(20)' d='M0 -43V-47'/><path transform='rotate(30)' d='M0 -43V-47'/><path transform='rotate(40)' d='M0 -43V-47'/><path transform='rotate(50)' d='M0 -43V-47'/><path transform='rotate(60)' d='M0 -43V-47'/><path transform='rotate(70)' d='M0 -43V-47'/><path transform='rotate(80)' d='M0 -43V-47'/><path transform='rotate(90)' d='M0 -43V-47'/><path transform='rotate(100)' d='M0 -43V-47'/><path transform='rotate(110)' d='M0 -43V-47'/><path transform='rotate(120)' d='M0 -43V-47'/><path transform='rotate(130)' d='M0 -43V-47'/><path transform='rotate(140)' d='M0 -43V-47'/><path transform='rotate(150)' d='M0 -43V-47'/><path transform='rotate(160)' d='M0 -43V-47'/><path transform='rotate(170)' d='M0 -43V-47'/><path transform='rotate(180)' d='M0 -43V-47'/><path transform='rotate(190)' d='M0 -43V-47'/><path transform='rotate(200)' d='M0 -43V-47'/><path transform='rotate(210)' d='M0 -43V-47'/><path transform='rotate(220)' d='M0 -43V-47'/><path transform='rotate(230)' d='M0 -43V-47'/><path transform='rotate(240)' d='M0 -43V-47'/><path transform='rotate(250)' d='M0 -43V-47'/><path transform='rotate(260)' d='M0 -43V-47'/><path transform='rotate(270)' d='M0 -43V-47'/><path transform='rotate(280)' d='M0 -43V-47'/><path transform='rotate(290)' d='M0 -43V-47'/><path transform='rotate(300)' d='M0 -43V-47'/><path transform='rotate(310)' d='M0 -43V-47'/><path transform='rotate(320)' d='M0 -43V-47'/><path transform='rotate(330)' d='M0 -43V-47'/><path transform='rotate(340)' d='M0 -43V-47'/><path transform='rotate(350)' d='M0 -43V-47'/></g><circle r='40' fill='%23ffffff' stroke='%235d6a82' stroke-width='1.2'/><circle r='37.5' fill='none' stroke='%23eef2f8' stroke-width='2'/></svg>");
  --hk-halo: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-50 -50 100 100'><g fill='none' stroke='%239aa6bb' stroke-opacity='.55'><circle r='47' stroke-width='1.2'/><circle r='41' stroke-width='.8' stroke-dasharray='1.6 2.4'/><circle r='36' stroke-width='.8'/></g></svg>");
  /* Coins of gelt as backgrounds, one per foil, with the shadow of their
     rim; the ink that reads stamped into each */
  --hk-coin-gold: radial-gradient(circle at 34% 28%, rgba(255, 255, 255, .65) 0 7%, transparent 22%), radial-gradient(circle, #f0c04e 0 58%, #c48a1c 59.5% 62%, transparent 63.5%), repeating-conic-gradient(#c48a1c 0 6deg, #fff1b8 6deg 12deg);
  --hk-coin-silver: radial-gradient(circle at 34% 28%, rgba(255, 255, 255, .65) 0 7%, transparent 22%), radial-gradient(circle, #e3e8f0 0 58%, #9aa6bb 59.5% 62%, transparent 63.5%), repeating-conic-gradient(#9aa6bb 0 6deg, #ffffff 6deg 12deg);
  --hk-coin-blue: radial-gradient(circle at 34% 28%, rgba(255, 255, 255, .65) 0 7%, transparent 22%), radial-gradient(circle, #2a5bc2 0 58%, #123274 59.5% 62%, transparent 63.5%), repeating-conic-gradient(#123274 0 6deg, #9fb6e8 6deg 12deg);
  --hk-coin-copper: radial-gradient(circle at 34% 28%, rgba(255, 255, 255, .65) 0 7%, transparent 22%), radial-gradient(circle, #cf6248 0 58%, #8e3a22 59.5% 62%, transparent 63.5%), repeating-conic-gradient(#8e3a22 0 6deg, #ffd2c2 6deg 12deg);
  --hk-coin-gold-rim: 0 0 0 1px #7a5410, 0 2px 0 #7a5410, 0 6px 10px -6px rgba(13, 26, 58, .55);
  --hk-coin-silver-rim: 0 0 0 1px #5d6a82, 0 2px 0 #5d6a82, 0 6px 10px -6px rgba(13, 26, 58, .55);
  --hk-coin-blue-rim: 0 0 0 1px #0a1d4a, 0 2px 0 #0a1d4a, 0 6px 10px -6px rgba(13, 26, 58, .55);
  --hk-coin-copper-rim: 0 0 0 1px #5a2010, 0 2px 0 #5a2010, 0 6px 10px -6px rgba(13, 26, 58, .55);
  /* The silver satin ribbon round a present, as a band */
  --hk-ribbon: linear-gradient(180deg, #8a96ad 0, #f6f8fc 22%, #c3ccdb 50%, #eef2f8 74%, #7d8aa2 100%);
}
html.dark {
  --hk-c1: #9fb9f3; --hk-c2: #f5cf6a; --hk-c3: #c3ccdb; --hk-c4: #6f8fd8; --hk-c5: #7fc4e8;
  --hk-lapis-ink: #b4c8f6; --hk-gold-ink: #f5cf6a; --hk-silver-ink: #d2dae8; --hk-good-ink: #7fd8b8; --hk-bad-ink: #ff9aa6;
  --hk-lapis-soft: rgba(159, 185, 243, .12); --hk-gold-soft: rgba(245, 207, 106, .13); --hk-silver-soft: rgba(195, 204, 219, .1); --hk-good-soft: rgba(127, 216, 184, .12); --hk-bad-soft: rgba(255, 154, 166, .12);
  --theme-600-ink: #0b1736;
  --hk-crimp-img: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='6' height='9' viewBox='0 0 6 9'><path d='M0 0H6V6.4Q4.5 9 3 6.4Q1.5 9 0 6.4Z' fill='%238b97ae'/><path d='M0 0H3V6.4Q1.5 9 0 6.4Z' fill='%23d6dde9'/><path d='M0 0H6V1.4H0Z' fill='%239fb9f3'/></svg>");
  --hk-rail-v-img: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='28' viewBox='0 0 12 28'><rect x='4.4' width='3.2' height='28' fill='%23a7b3c8'/><rect x='4.4' width='.8' height='28' fill='%23eef2f8'/><rect x='6.9' width='.7' height='28' fill='%23485670'/><circle cx='6' cy='7' r='3.7' fill='%23c9d2e1' stroke='%23384560' stroke-width='.7'/><circle cx='4.9' cy='5.9' r='1.2' fill='%23ffffff'/><circle cx='6' cy='21' r='2.2' fill='%23bcc7d8' stroke='%23384560' stroke-width='.6'/></svg>");
  --hk-shamash-rule: var(--hk-candle-img) center bottom / 20px 30px no-repeat, linear-gradient(90deg, transparent, #6d7a93 18%, #6d7a93 82%, transparent) center calc(100% - 2px) / 100% 1.5px no-repeat;
  --hk-kn-relief: 0 0 0 1px rgba(0, 0, 0, .45), 0 2px 0 rgba(0, 0, 0, .35), 0 0 14px -2px rgba(223, 230, 242, .25);
  --hk-setting: 0 0 0 2px var(--paper-2), 0 0 0 4px #a7b3c8, 0 0 0 5px #384560, 0 0 18px -2px rgba(223, 230, 242, .3);
  --hk-twist:
    linear-gradient(180deg, rgba(255, 255, 255, .3), transparent 55%),
    repeating-linear-gradient(-55deg, #4b76d1 0 7px, #e9eef6 7px 12px);
  --hk-linen:
    radial-gradient(60% 50% at 50% 42%, rgba(255, 196, 110, .1), transparent 72%),
    repeating-linear-gradient(0deg, rgba(223, 230, 242, .025) 0 2px, transparent 2px 4px),
    repeating-linear-gradient(90deg, rgba(223, 230, 242, .025) 0 2px, transparent 2px 4px),
    linear-gradient(170deg, #142757, #0f1f4a 55%, #172d62);
  /* Small product wells: a lapis glow lifted off the night so black
     products keep their outline; still dark enough not to read as tiles */
  --hk-well-glow: radial-gradient(closest-side, #3b5088 0%, #2b3e72 55%, #1d2c57 100%);
  --hk-ring: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-50 -50 100 100'><circle r='48.5' fill='%23a7b3c8' stroke='%23384560' stroke-width='1.2'/><circle r='48' fill='none' stroke='%23ffffff' stroke-width='1' stroke-dasharray='40 200' transform='rotate(200)'/><g stroke='%23485670' stroke-width='2'><path transform='rotate(0)' d='M0 -43V-47'/><path transform='rotate(10)' d='M0 -43V-47'/><path transform='rotate(20)' d='M0 -43V-47'/><path transform='rotate(30)' d='M0 -43V-47'/><path transform='rotate(40)' d='M0 -43V-47'/><path transform='rotate(50)' d='M0 -43V-47'/><path transform='rotate(60)' d='M0 -43V-47'/><path transform='rotate(70)' d='M0 -43V-47'/><path transform='rotate(80)' d='M0 -43V-47'/><path transform='rotate(90)' d='M0 -43V-47'/><path transform='rotate(100)' d='M0 -43V-47'/><path transform='rotate(110)' d='M0 -43V-47'/><path transform='rotate(120)' d='M0 -43V-47'/><path transform='rotate(130)' d='M0 -43V-47'/><path transform='rotate(140)' d='M0 -43V-47'/><path transform='rotate(150)' d='M0 -43V-47'/><path transform='rotate(160)' d='M0 -43V-47'/><path transform='rotate(170)' d='M0 -43V-47'/><path transform='rotate(180)' d='M0 -43V-47'/><path transform='rotate(190)' d='M0 -43V-47'/><path transform='rotate(200)' d='M0 -43V-47'/><path transform='rotate(210)' d='M0 -43V-47'/><path transform='rotate(220)' d='M0 -43V-47'/><path transform='rotate(230)' d='M0 -43V-47'/><path transform='rotate(240)' d='M0 -43V-47'/><path transform='rotate(250)' d='M0 -43V-47'/><path transform='rotate(260)' d='M0 -43V-47'/><path transform='rotate(270)' d='M0 -43V-47'/><path transform='rotate(280)' d='M0 -43V-47'/><path transform='rotate(290)' d='M0 -43V-47'/><path transform='rotate(300)' d='M0 -43V-47'/><path transform='rotate(310)' d='M0 -43V-47'/><path transform='rotate(320)' d='M0 -43V-47'/><path transform='rotate(330)' d='M0 -43V-47'/><path transform='rotate(340)' d='M0 -43V-47'/><path transform='rotate(350)' d='M0 -43V-47'/></g><circle r='40' fill='%23142757' stroke='%23384560' stroke-width='1.2'/><circle r='37.5' fill='none' stroke='%231d3470' stroke-width='2'/></svg>");
  --hk-halo: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-50 -50 100 100'><g fill='none' stroke='%23c3ccdb' stroke-opacity='.25'><circle r='47' stroke-width='1.2'/><circle r='41' stroke-width='.8' stroke-dasharray='1.6 2.4'/><circle r='36' stroke-width='.8'/></g></svg>");
  --hk-wrap:
    var(--hk-wrap-print) 0 0 / 56px 56px repeat,
    linear-gradient(115deg, transparent 30%, rgba(223, 230, 242, .07) 46%, transparent 60%),
    linear-gradient(160deg, #15306f, #10255a 55%, #0b1b46);
}

/* ── Game palette ──
   The earn-games arena hands these to each HTML5 board. By day a board
   is a sheet of white linen under the rail: pale blue wells, the tiles
   rising from silver and pale wax through sky and lapis to candle gold
   and the deep blue of the night window; after dark the window itself,
   cells of midnight and the tiles glinting silver and gold. */
:root {
  --game-bg:        #e8eef9;
  --game-surface:   #d5dff1;
  --game-surface-2: #ffffff;
  --game-ink:       #0d1a3a;
  --game-muted:     #5f6f94;
  --game-accent:    #1d47a0;
  --game-accent-ink:#ffffff;
  --game-good:      #17725a;
  --game-bad:       #b8243a;
  --game-tile-1:    #f4f7fb;
  --game-tile-2:    #dfe6f2;
  --game-tile-3:    #b0c6f0;
  --game-tile-4:    #5d8ae0;
  --game-tile-5:    #2556b8;
  --game-tile-6:    #f0c04e;
  --game-tile-7:    #d98a1f;
  --game-tile-8:    #0e2154;
  --game-radius:    9px;
  --game-font:      'Frank Ruhl Libre', 'Heebo', Georgia, serif;
  --game-font-css:  "/assets/themes/hanukkah/assets/fonts/fonts.css";
  /* Arena chrome (assets/css/game-arena.css): a sheet of white linen, not a dark screen */
  --game-arena-screen: #e8eef9;
  --game-arena-coins:  #85580a;
  --game-arena-win:    #17725a;
  --game-arena-danger: #b8243a;
  --game-pattern:   url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'><g fill='%231d47a0' fill-opacity='.06'><path d='M27 22h6v6l-3 5l-3-5Z'/><rect x='29.2' y='18.5' width='1.6' height='3.5'/></g><g fill='%231d47a0' fill-opacity='.08'><circle cx='90' cy='90' r='1.6'/><circle cx='90' cy='30' r='1'/></g></svg>");
}
html.dark {
  --game-bg:        #0f1d44;
  --game-surface:   #081230;
  --game-surface-2: #1b3170;
  --game-ink:       #edf2fc;
  --game-muted:     #8ea0c6;
  --game-accent:    #dfe6f1;
  --game-accent-ink:#0b1736;
  --game-good:      #7fd8b8;
  --game-bad:       #ff9aa6;
  --game-tile-1:    #172a5a;
  --game-tile-2:    #213a78;
  --game-tile-3:    #2c4f9e;
  --game-tile-4:    #4b76d1;
  --game-tile-5:    #8fb0f5;
  --game-tile-6:    #c3ccdb;
  --game-tile-7:    #f5cf6a;
  --game-tile-8:    #fff1b8;
  --game-arena-screen: #0f1d44;
  --game-arena-coins:  #f5cf6a;
  --game-arena-win:    #7fd8b8;
  --game-arena-danger: #ff9aa6;
  --game-pattern:   url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'><g fill='%23dfe6f2' fill-opacity='.06'><path d='M27 22h6v6l-3 5l-3-5Z'/><rect x='29.2' y='18.5' width='1.6' height='3.5'/></g><path d='M90 82L91 86L95 87L91 88L90 92L89 88L85 87L89 86Z' fill='%23dfe6f2' fill-opacity='.2'/></svg>");
}

/* ── Base ──
   Tailwind's compiled sheet loads after the theme, so selectors that must
   beat its single-class utilities carry an extra html qualifier. */
html body {
  background: var(--page-bg);
  color: var(--ink);
  font-family: var(--font-ui);
}
html .font-sans { font-family: var(--font-ui); }

html .font-display, h1.display, h2.display, h3.display {
  font-family: var(--font-display);
  font-weight: 700;
  font-synthesis: none;
  letter-spacing: -.01em;
}
.display-italic { font-style: normal; }
/* Frank Ruhl Libre has no italic: the small italic asides shared markup
   sets in the display face (card blurbs, bid notes) stand upright. */
html .font-display.italic, html .italic.font-display { font-style: normal; font-weight: 500; }
/* Figures in tabular columns read better in the UI face. */
html .font-display.tabular-nums, html .font-display[class*="tabular"] { font-family: var(--font-ui); font-weight: 700; letter-spacing: 0; }

::selection { background: #d8e3f8; color: #0d1a3a; }

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

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

/* A candle flame worn by section eyebrows, the hero kicker and the season
   chip */
.hk-flame, html .section-eyebrow::before { background: var(--hk-flame); }
.hk-flame { display: inline-block; flex-shrink: 0; width: 14px; height: 18px; }

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

.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 3px;
  border-bottom: 0;
  background: linear-gradient(90deg, var(--theme-500), var(--theme-500)) left bottom / 100% 2px no-repeat;
  text-decoration: none;
  transition: gap 0.18s ease;
}
.btn-view-all:hover { gap: 0.75rem; }
[dir="rtl"] .btn-view-all svg { transform: scaleX(-1); }

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

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

[data-hk-phase][hidden] { display: none !important; }
[dir="rtl"] .hk-flip-rtl { transform: scaleX(-1); }
/* Hebrew set small inside a page in another script */

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

.hdr-strip, .hdr-strip .ed-status { color: rgba(238, 243, 253, 0.88); }
.hdr-strip a:hover, .hdr-strip button:hover { color: #f5cf6a; }

/* The menorah rail under the main header bar and wherever a section
   needs an edge */
.hk-band { height: 12px; background: var(--hk-rail); }

/* The season chip in the status strip */
.hk-strip-chip { display: inline-flex; align-items: center; gap: .45rem; font-weight: 700; letter-spacing: .06em; color: #f5cf6a; }
.hk-strip-chip .hk-flame { width: 10px; height: 13px; }
.hk-strip-chip__up { text-transform: uppercase; }
/* The desktop strip shares its line with the menu; the note joins the
   chip only on the widest screens, and the day's date gives way to the
   chip below 1440px. Where a long language still runs out of room,
   hanukkah.js marks the strip .hk-strip-tight and the chip keeps only
   the date or the night. */
@media (max-width: 639px), (min-width: 1024px) and (max-width: 1679px) { .hk-strip-chip__extra { display: none; } }
@media (min-width: 1024px) and (max-width: 1439px) { .hdr-strip .hk-strip-date { display: none; } }
.hk-strip-chip__short, .hk-strip-tight .hk-strip-chip__full { display: none; }
.hk-strip-tight .hk-strip-chip__short { display: inline; }

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

/* ── Links and buttons ──
   Buttons are a squarer pill, like a wrapped present's edge, with a
   firm shadow under them. */
.ed-link-arrow {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-family: var(--font-ui); font-size: 0.94rem; font-weight: 700;
  color: var(--ink); text-decoration: none;
  padding-bottom: 3px; border-bottom: 2px solid var(--theme-500);
  transition: gap 0.18s ease;
}
.ed-link-arrow:hover { gap: 0.7rem; }

html .ed-btn-primary, html .ed-plan-cta, html .drawer-login {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
  padding: 0.8rem 1.55rem;
  white-space: nowrap;
  font-family: var(--font-ui); font-size: 1rem; 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, html.dark body .ed-plan-featured .ed-plan-cta { background: #dfe6f1; color: #0b1736; box-shadow: 0 2px 0 #6d7a93; }
.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.35rem;
  font-family: var(--font-ui); font-size: 0.98rem; font-weight: 700;
  color: var(--ink); background: var(--paper-2);
  border: 1px solid var(--rule); border-radius: 12px;
  box-shadow: 0 2px 0 var(--rule);
  transition: background 0.15s ease, border-color .15s ease;
}
.ed-btn-secondary:hover { background: var(--paper-3); border-color: var(--ink-soft); }
html.dark .ed-btn-secondary { color: var(--ink); }
:is([data-bnr-layout="cover"], [data-bnr-layout="product"]) .ed-btn-primary { color: var(--btn-ink); }

/* ── Cards: white with a fine edge, a lift on hover ── */
html .ed-plan, html .shop-card {
  position: relative;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
html .ed-plan:hover, html .shop-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
html .ed-plan-featured {
  position: relative;
  background: var(--hk-glints) repeat, var(--night-bg); color: #eef3fd;
  border: 1px solid rgba(223, 230, 242, .3); border-radius: var(--radius);
  overflow: hidden;
}
.ed-plan-featured::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 4px; height: 12px;
  background: var(--hk-rail); pointer-events: none;
}
.ed-plan-hairline { border-color: var(--rule); }
.ed-plan-featured .ed-plan-hairline { border-color: rgba(238, 243, 253, .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(238, 243, 253, 0.88); text-decoration: none; transition: color 0.16s ease; }
.ed-topnav-link:hover, .ed-topnav-link.active { color: #f5cf6a; }

/* ── 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: 12px; background: var(--hk-rail); opacity: .7; }
/* header.css greys the labels after dark with !important (3.7:1 here) */
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; }
.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: 700;
  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(245, 247, 252, 0.95);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--rule);
}
html.dark .mobile-glass-header { background: rgba(8, 18, 48, 0.95); }

.ed-avatar-ring { box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px #c3ccdb, 0 0 0 5px 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.96rem; 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); }

/* ── The menorah's candles (hanuk_menorah_svg()) ──
   An unlit candle shows its wick alone; a lit one its flame, swaying a
   little in the draught from the window. */
.hk-m { display: block; overflow: visible; }
.hk-m .hk-m__well { fill: var(--hk-well, #ffffff); }
.hk-c:not(.is-lit) .hk-c__flame { opacity: 0; }
.hk-c__flame { transition: opacity .5s ease; }
@media (prefers-reduced-motion: no-preference) {
  .hk-c.is-lit .hk-c__flame path:first-of-type { animation: hk-flicker 2.6s ease-in-out 4 forwards; transform-box: fill-box; transform-origin: 50% 100%; }
  .hk-c.is-lit:nth-child(2n) .hk-c__flame path:first-of-type { animation-duration: 3.1s; animation-delay: -.8s; }
  .hk-c.is-lit:nth-child(3n) .hk-c__flame path:first-of-type { animation-duration: 2.2s; animation-delay: -1.4s; }
  .hk-c.is-lit .hk-c__glow { animation: hk-glow 2.6s ease-in-out 4 forwards; transform-box: fill-box; transform-origin: 50% 50%; }
}
@keyframes hk-flicker { 0%, 100% { transform: scale(1, 1) skewX(0); } 30% { transform: scale(.94, 1.06) skewX(-3deg); } 60% { transform: scale(1.04, .95) skewX(2deg); } }
@keyframes hk-glow { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .8; transform: scale(.92); } }

/* ── Dark/light toggle: a dreidel spins in at the middle of the screen
   and its four painted faces sweep out round it, a spinning top's blur
   widening until it covers the page; the mode flips under the blur, then
   the dreidel topples onto a letter and the blur spins away ──
   assets/themes/hanukkah/assets/js/hanukkah.js registers it. Its colours
   are set on the overlay itself for the direction it plays, so nothing
   on it changes shade when the mode flips underneath. */
.px-fx--hk-spin { position: fixed; inset: 0; z-index: 2147483000; pointer-events: none; overflow: hidden; }
.px-fx--hk-spin .hk-fx-veil { position: absolute; inset: 0; background: var(--fx-veil); opacity: 0; }
.px-fx--hk-spin .hk-fx-blur {
  position: absolute; left: var(--cx); top: var(--cy); width: var(--d); height: var(--d);
  margin: calc(var(--d) / -2) 0 0 calc(var(--d) / -2);
  border-radius: 50%; overflow: hidden;
  background: var(--fx-veil);
  transform: scale(0);
}
/* The four painted faces smeared round by the spin */
.px-fx--hk-spin .hk-fx-swirl {
  position: absolute; inset: 0; border-radius: 50%;
  background:
    radial-gradient(circle, var(--fx-core) 0 6%, transparent 9%),
    conic-gradient(from 0deg, var(--fx-a), var(--fx-b) 25%, var(--fx-c) 50%, var(--fx-d) 75%, var(--fx-a));
  animation: hk-fx-swirl .5s linear infinite;
}
@keyframes hk-fx-swirl { to { transform: rotate(360deg); } }
.px-fx--hk-spin .hk-fx-blur::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: repeating-radial-gradient(circle, transparent 0 34px, var(--fx-ring) 34px 36px);
  opacity: .5;
}
.px-fx--hk-spin .hk-fx-top {
  position: absolute; left: var(--cx); top: var(--cy); width: 150px; height: 225px; margin: -138px 0 0 -75px;
  transform: translateY(-60vh) rotate(0); opacity: 0;
  filter: drop-shadow(0 12px 16px rgba(0, 0, 0, .35)) drop-shadow(0 0 26px var(--fx-glow));
}
.px-fx--hk-spin .hk-fx-top svg { display: block; width: 100%; height: 100%; overflow: visible; }
.px-fx--hk-spin .hk-fx-faces { transform-box: fill-box; transform-origin: 50% 50%; }
.px-fx--hk-spin.is-in .hk-fx-top { transition: transform .42s cubic-bezier(.2, .9, .35, 1.15), opacity .15s; transform: translateY(0) rotate(0); opacity: 1; }
.px-fx--hk-spin.is-in .hk-fx-faces { animation: hk-fx-wobble .16s linear infinite; }
.px-fx--hk-spin.is-blur .hk-fx-blur { transition: transform .6s cubic-bezier(.5, 0, .3, 1); transform: scale(1); }
.px-fx--hk-spin.is-blur .hk-fx-veil { transition: opacity .16s ease .44s; opacity: 1; }
.px-fx--hk-spin.is-topple .hk-fx-top { transition: transform .6s cubic-bezier(.5, -.2, .5, 1.2); transform: translate(26px, 34px) rotate(84deg); }
.px-fx--hk-spin.is-topple .hk-fx-faces { animation: none; }
.px-fx--hk-spin.is-away .hk-fx-blur { transition: transform .62s cubic-bezier(.5, 0, .7, 1), opacity .5s ease .1s; transform: scale(1.6); opacity: 0; }
.px-fx--hk-spin.is-away .hk-fx-veil { transition: opacity .45s ease .1s; opacity: 0; }
.px-fx--hk-spin.is-away .hk-fx-top { transition: transform .6s ease, opacity .4s ease .15s; transform: translate(60px, 60px) rotate(100deg) scale(.6); opacity: 0; }
@keyframes hk-fx-wobble { 0% { transform: scaleX(1); } 25% { transform: scaleX(.82); } 50% { transform: scaleX(-1); } 75% { transform: scaleX(-.82); } 100% { transform: scaleX(1); } }

/* ── Footer: the window at night in both modes — the menorah's rail run
   along its top edge with candles standing on it, the shamash raised in
   the middle, burning over deep blue glinting with silver ── */
.hk-footer {
  --paper:     #0b1736;
  --paper-2:   #12245a;
  --paper-3:   #1b3170;
  --ink:       #eef3fd;
  --ink-2:     #d2dcf2;
  --ink-soft:  #a5b4d6;
  --rule:      rgba(238, 243, 253, 0.15);
  --rule-soft: rgba(238, 243, 253, 0.08);
  --theme-500: #f5cf6a; --theme-600: #f5cf6a; --theme-700: #fbe2a0;
  --theme-500-rgb: 245, 207, 106;
  position: relative;
}
html.dark .hk-footer { --paper: #060d24; --paper-2: #0f1d44; --paper-3: #172a5a; }
.hk-footer-top {
  position: relative; height: 128px; margin-bottom: -1px; overflow: hidden;
  background: var(--hk-glints) repeat, radial-gradient(70% 120% at 50% 100%, rgba(255, 181, 58, .16), transparent 70%), linear-gradient(180deg, #13275e 0%, #0b1736 100%);
}
html.dark .hk-footer-top { background: var(--hk-glints) repeat, radial-gradient(70% 120% at 50% 100%, rgba(255, 181, 58, .14), transparent 70%), linear-gradient(180deg, #0a1638 0%, #060d24 100%); }
/* The rail the candles stand on */
.hk-footer-top::after { content: ''; position: absolute; left: 0; right: 0; bottom: 14px; height: 12px; background: var(--hk-rail); }
html.dark .hk-footer-top::after { background: var(--hk-rail); }
.hk-footer-candle {
  position: absolute; left: var(--x); bottom: 22px; width: 18px; height: var(--h, 62px); margin-left: -9px;
}
.hk-footer-candle svg { display: block; width: 100%; height: 100%; overflow: visible; }
@media (prefers-reduced-motion: no-preference) {
  .hk-footer-candle .hk-ff { animation: hk-flicker 2.8s ease-in-out 4 forwards; animation-delay: var(--w, 0s); transform-box: fill-box; transform-origin: 50% 100%; }
}
.hk-footer a:hover { color: #f5cf6a; }
html .hk-footer .ed-footer-heading { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; letter-spacing: 0; text-transform: none; color: #f5cf6a; }
html.dark #desktopFooter li { color: var(--ink-2) !important; }
/* header.css greys every footer h4 after dark with an ID rule */
html.dark #desktopFooter .ed-footer-heading { color: #f5cf6a !important; }
html.dark #desktopFooter .ed-newsletter h4 { color: #0d1a3a !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: .95rem; font-weight: 600; color: var(--ink-2); }
html .ed-floating-nav .ed-floating-link:hover { background: var(--paper-3); color: var(--ink); }
html body .ed-floating-nav a.ed-floating-link.active { background: var(--btn-bg); color: var(--btn-ink) !important; }
html body .ed-floating-nav a.ed-floating-link.active > span { color: var(--btn-ink) !important; }

/* The newsletter as a present: a white card, a silver ribbon tied along
   its top with a bow at the corner */
html body .hk-footer .ed-newsletter {
  position: relative;
  background:
    linear-gradient(90deg, transparent calc(100% - 92px), rgba(29, 71, 160, .06) calc(100% - 92px)),
    #ffffff;
  color: #0d1a3a;
  border: 0; border-radius: 16px;
  box-shadow: 0 18px 34px -16px rgba(0, 0, 0, .6);
  overflow: hidden;
  padding-top: 2.4rem; padding-bottom: 2.2rem;
}
html body .hk-footer .ed-newsletter::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 10px; pointer-events: none;
  background: var(--hk-ribbon);
  box-shadow: 0 1px 0 #5d6a82;
}
html body .hk-footer .ed-newsletter::after {
  content: ''; position: absolute; inset-inline-start: 18px; top: -4px; right: auto; bottom: auto; width: 50px; height: 37px; display: block;
  border-radius: 0; opacity: 1; filter: drop-shadow(0 2px 2px rgba(13, 26, 58, .3)); transform: none; pointer-events: none;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-30 -20 60 40'><path d='M0 0C-10 -16 -28 -14 -24 -4C-20 4 -9 4 0 0Z' fill='%23dfe6f2' stroke='%235d6a82' stroke-width='1'/><path d='M0 0C10 -16 28 -14 24 -4C20 4 9 4 0 0Z' fill='%23eef2f8' stroke='%235d6a82' stroke-width='1'/><path d='M-1 1L-9 16M1 1L9 16' stroke='%239aa6bb' stroke-width='4.4' stroke-linecap='round'/><ellipse rx='5.6' ry='4.6' fill='%23c3ccdb' stroke='%235d6a82' stroke-width='1'/></svg>") center / contain no-repeat;
}
html body .hk-footer .ed-newsletter, html body .hk-footer .ed-newsletter * { --ink: #0d1a3a; --ink-2: #2a3a63; }
html body .hk-footer .ed-newsletter h4, html.dark body .hk-footer .ed-newsletter h4 { color: #0d1a3a !important; font-family: var(--font-display); font-weight: 700; }
html.dark body .hk-footer .ed-newsletter p:not(#newsletter-msg) { color: #2a3a63 !important; }
html body .hk-footer .ed-newsletter-input, html.dark body .hk-footer .ed-newsletter input[type="email"].ed-newsletter-input:not(.no-dark):not([type="checkbox"]) { background: #f5f7fc !important; color: #0d1a3a !important; border: 1px solid rgba(13, 26, 58, .2) !important; border-radius: 12px; }
html body .hk-footer .ed-newsletter-input::placeholder { color: #5f6f94; }
html body .hk-footer .ed-newsletter-input:focus { border-color: #1d47a0 !important; box-shadow: 0 0 0 3px rgba(29, 71, 160, .16); }
html body .hk-footer .ed-newsletter-btn {
  background: #1d47a0; color: #ffffff; border: 0; border-radius: 12px; box-shadow: 0 2px 0 #0d2564;
  font-family: var(--font-ui); font-weight: 700;
}
html body .hk-footer .ed-newsletter-age { color: #2a3a63; }

/* Corner pieces: a dreidel, and a little stack of gelt */
:root {
  --hk-dreidel-lapis: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 60' aria-hidden='true' focusable='false'%3E%3Cg transform='translate(20.0 30.0) rotate(0.0) scale(1.000)'%3E%3Cpath d='M-2.2 -11.5V-23.5a2.2 2.2 0 0 1 4.4 0V-11.5Z' fill='%23173a85' stroke='%230e2559' stroke-width='.6'/%3E%3Cpath d='M-1.4 -22.5v9' stroke='%23ffffff' stroke-opacity='.55' stroke-width='.9' stroke-linecap='round'/%3E%3Cpath d='M-13 -9L-5 -13H13L5 -9Z' fill='%235d8ae0' stroke='%230e2559' stroke-width='.6' stroke-linejoin='round'/%3E%3Cpath d='M5 -9L13 -13V7L5 11Z' fill='%23173a85' stroke='%230e2559' stroke-width='.6' stroke-linejoin='round'/%3E%3Cpath d='M-13 -9H5V11H-13Z' fill='%232a5bc2' stroke='%230e2559' stroke-width='.6' stroke-linejoin='round'/%3E%3Cpath d='M-13 11H5L-3 26Z' fill='%232a5bc2' stroke='%230e2559' stroke-width='.6' stroke-linejoin='round'/%3E%3Cpath d='M5 11L13 7L-3 26Z' fill='%23173a85' stroke='%230e2559' stroke-width='.6' stroke-linejoin='round'/%3E%3Cpath d='M-11.5 -7.5V9.5' stroke='%23ffffff' stroke-opacity='.35' stroke-width='1.2'/%3E%3Cpath transform='translate(-4 1)' d='M-3 -3.5h.01M3 -3.5h.01M-3 3.5h.01M3 3.5h.01' fill='none' stroke='%23f4f7fb' stroke-width='3.2' stroke-linecap='round'/%3E%3C/g%3E%3C/svg%3E");
  --hk-dreidel-silver: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 60' aria-hidden='true' focusable='false'%3E%3Cg transform='translate(20.0 30.0) rotate(0.0) scale(1.000)'%3E%3Cpath d='M-2.2 -11.5V-23.5a2.2 2.2 0 0 1 4.4 0V-11.5Z' fill='%23a6b1c4' stroke='%235d6a82' stroke-width='.6'/%3E%3Cpath d='M-1.4 -22.5v9' stroke='%23ffffff' stroke-opacity='.55' stroke-width='.9' stroke-linecap='round'/%3E%3Cpath d='M-13 -9L-5 -13H13L5 -9Z' fill='%23ffffff' stroke='%235d6a82' stroke-width='.6' stroke-linejoin='round'/%3E%3Cpath d='M5 -9L13 -13V7L5 11Z' fill='%23a6b1c4' stroke='%235d6a82' stroke-width='.6' stroke-linejoin='round'/%3E%3Cpath d='M-13 -9H5V11H-13Z' fill='%23e7ecf4' stroke='%235d6a82' stroke-width='.6' stroke-linejoin='round'/%3E%3Cpath d='M-13 11H5L-3 26Z' fill='%23e7ecf4' stroke='%235d6a82' stroke-width='.6' stroke-linejoin='round'/%3E%3Cpath d='M5 11L13 7L-3 26Z' fill='%23a6b1c4' stroke='%235d6a82' stroke-width='.6' stroke-linejoin='round'/%3E%3Cpath d='M-11.5 -7.5V9.5' stroke='%23ffffff' stroke-opacity='.35' stroke-width='1.2'/%3E%3Cpath transform='translate(-4 1)' d='M-3 -3.5h.01M3 3.5h.01' fill='none' stroke='%231d47a0' stroke-width='3.2' stroke-linecap='round'/%3E%3C/g%3E%3C/svg%3E");
  --hk-gelt-stack: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Cellipse cx='24.0' cy='47.7' rx='16.0' ry='6.0' fill='%23c48a1c'/%3E%3Cellipse cx='24.0' cy='46.0' rx='16.0' ry='6.0' fill='%23f0c04e' stroke='%237a5410' stroke-width='.7'/%3E%3Cpath d='M37.1 46.0L39.5 46.0M36.8 47.1L39.1 47.3M35.8 48.1L38.0 48.5M34.3 49.1L36.1 49.6M32.2 49.8L33.7 50.6M29.7 50.4L30.7 51.2M26.9 50.8L27.5 51.7M24.0 50.9L24.0 51.8M21.1 50.8L20.5 51.7M18.3 50.4L17.3 51.2M15.8 49.8L14.3 50.6M13.7 49.1L11.9 49.6M12.2 48.1L10.0 48.5M11.2 47.1L8.9 47.3M10.9 46.0L8.5 46.0M11.2 44.9L8.9 44.7M12.2 43.9L10.0 43.5M13.7 42.9L11.9 42.4M15.8 42.2L14.3 41.4M18.3 41.6L17.3 40.8M21.1 41.2L20.5 40.3M24.0 41.1L24.0 40.2M26.9 41.2L27.5 40.3M29.7 41.6L30.7 40.8M32.2 42.2L33.7 41.4M34.3 42.9L36.1 42.4M35.8 43.9L38.0 43.5M36.8 44.9L39.1 44.7' stroke='%23c48a1c' stroke-width='1.12'/%3E%3Cellipse cx='24.0' cy='46.0' rx='11.8' ry='4.4' fill='none' stroke='%23c48a1c' stroke-width='.7'/%3E%3Cellipse cx='20.0' cy='44.2' rx='5.6' ry='1.2' fill='%23fff1b8' fill-opacity='.55'/%3E%3Cg transform='translate(24.0 46.0) scale(1.600 0.600)' fill='%23c48a1c'%3E%3Crect x='-1.3' y='-1.5' width='2.6' height='6' rx='.4'/%3E%3Cpath d='M0 -6C1.6 -4 1.6 -2.6 0 -2.2C-1.6 -2.6 -1.6 -4 0 -6Z'/%3E%3C/g%3E%3Cellipse cx='26.0' cy='41.7' rx='16.0' ry='6.0' fill='%239aa6bb'/%3E%3Cellipse cx='26.0' cy='40.0' rx='16.0' ry='6.0' fill='%23d5dce8' stroke='%235d6a82' stroke-width='.7'/%3E%3Cpath d='M39.1 40.0L41.5 40.0M38.8 41.1L41.1 41.3M37.8 42.1L40.0 42.5M36.3 43.1L38.1 43.6M34.2 43.8L35.7 44.6M31.7 44.4L32.7 45.2M28.9 44.8L29.5 45.7M26.0 44.9L26.0 45.8M23.1 44.8L22.5 45.7M20.3 44.4L19.3 45.2M17.8 43.8L16.3 44.6M15.7 43.1L13.9 43.6M14.2 42.1L12.0 42.5M13.2 41.1L10.9 41.3M12.9 40.0L10.5 40.0M13.2 38.9L10.9 38.7M14.2 37.9L12.0 37.5M15.7 36.9L13.9 36.4M17.8 36.2L16.3 35.4M20.3 35.6L19.3 34.8M23.1 35.2L22.5 34.3M26.0 35.1L26.0 34.2M28.9 35.2L29.5 34.3M31.7 35.6L32.7 34.8M34.2 36.2L35.7 35.4M36.3 36.9L38.1 36.4M37.8 37.9L40.0 37.5M38.8 38.9L41.1 38.7' stroke='%239aa6bb' stroke-width='1.12'/%3E%3Cellipse cx='26.0' cy='40.0' rx='11.8' ry='4.4' fill='none' stroke='%239aa6bb' stroke-width='.7'/%3E%3Cellipse cx='22.0' cy='38.2' rx='5.6' ry='1.2' fill='%23ffffff' fill-opacity='.55'/%3E%3Cg transform='translate(26.0 40.0) scale(1.600 0.600)' fill='%239aa6bb'%3E%3Crect x='-1.3' y='-1.5' width='2.6' height='6' rx='.4'/%3E%3Cpath d='M0 -6C1.6 -4 1.6 -2.6 0 -2.2C-1.6 -2.6 -1.6 -4 0 -6Z'/%3E%3C/g%3E%3Cellipse cx='23.0' cy='35.7' rx='16.0' ry='6.0' fill='%23c48a1c'/%3E%3Cellipse cx='23.0' cy='34.0' rx='16.0' ry='6.0' fill='%23f0c04e' stroke='%237a5410' stroke-width='.7'/%3E%3Cpath d='M36.1 34.0L38.5 34.0M35.8 35.1L38.1 35.3M34.8 36.1L37.0 36.5M33.3 37.1L35.1 37.6M31.2 37.8L32.7 38.6M28.7 38.4L29.7 39.2M25.9 38.8L26.5 39.7M23.0 38.9L23.0 39.8M20.1 38.8L19.5 39.7M17.3 38.4L16.3 39.2M14.8 37.8L13.3 38.6M12.7 37.1L10.9 37.6M11.2 36.1L9.0 36.5M10.2 35.1L7.9 35.3M9.9 34.0L7.5 34.0M10.2 32.9L7.9 32.7M11.2 31.9L9.0 31.5M12.7 30.9L10.9 30.4M14.8 30.2L13.3 29.4M17.3 29.6L16.3 28.8M20.1 29.2L19.5 28.3M23.0 29.1L23.0 28.2M25.9 29.2L26.5 28.3M28.7 29.6L29.7 28.8M31.2 30.2L32.7 29.4M33.3 30.9L35.1 30.4M34.8 31.9L37.0 31.5M35.8 32.9L38.1 32.7' stroke='%23c48a1c' stroke-width='1.12'/%3E%3Cellipse cx='23.0' cy='34.0' rx='11.8' ry='4.4' fill='none' stroke='%23c48a1c' stroke-width='.7'/%3E%3Cellipse cx='19.0' cy='32.2' rx='5.6' ry='1.2' fill='%23fff1b8' fill-opacity='.55'/%3E%3Cg transform='translate(23.0 34.0) scale(1.600 0.600)' fill='%23c48a1c'%3E%3Crect x='-1.3' y='-1.5' width='2.6' height='6' rx='.4'/%3E%3Cpath d='M0 -6C1.6 -4 1.6 -2.6 0 -2.2C-1.6 -2.6 -1.6 -4 0 -6Z'/%3E%3C/g%3E%3Cellipse cx='40.0' cy='26.0' rx='15.0' ry='15.0' fill='%23f0c04e' stroke='%237a5410' stroke-width='.7'/%3E%3Cpath d='M52.3 26.0L54.5 26.0M52.0 28.7L54.2 29.2M51.1 31.3L53.1 32.3M49.6 33.7L51.4 35.1M47.7 35.6L49.1 37.4M45.3 37.1L46.3 39.1M42.7 38.0L43.2 40.2M40.0 38.3L40.0 40.5M37.3 38.0L36.8 40.2M34.7 37.1L33.7 39.1M32.3 35.6L30.9 37.4M30.4 33.7L28.6 35.1M28.9 31.3L26.9 32.3M28.0 28.7L25.8 29.2M27.7 26.0L25.5 26.0M28.0 23.3L25.8 22.8M28.9 20.7L26.9 19.7M30.4 18.3L28.6 16.9M32.3 16.4L30.9 14.6M34.7 14.9L33.7 12.9M37.3 14.0L36.8 11.8M40.0 13.7L40.0 11.5M42.7 14.0L43.2 11.8M45.3 14.9L46.3 12.9M47.7 16.4L49.1 14.6M49.6 18.3L51.4 16.9M51.1 20.7L53.1 19.7M52.0 23.3L54.2 22.8' stroke='%23c48a1c' stroke-width='1.05'/%3E%3Cellipse cx='40.0' cy='26.0' rx='11.1' ry='11.1' fill='none' stroke='%23c48a1c' stroke-width='.7'/%3E%3Cellipse cx='36.2' cy='21.5' rx='5.2' ry='3.0' fill='%23fff1b8' fill-opacity='.55'/%3E%3Cg transform='translate(40.0 26.0) scale(1.500 1.500)' fill='%23c48a1c'%3E%3Crect x='-1.3' y='-1.5' width='2.6' height='6' rx='.4'/%3E%3Cpath d='M0 -6C1.6 -4 1.6 -2.6 0 -2.2C-1.6 -2.6 -1.6 -4 0 -6Z'/%3E%3C/g%3E%3C/svg%3E");
  --hk-menorah-img: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 400' aria-hidden='true' focusable='false'%3E%3Cdefs%3E%3ClinearGradient id='hkm1s' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%237d8aa2'/%3E%3Cstop offset='.28' stop-color='%23f6f8fc'/%3E%3Cstop offset='.55' stop-color='%23c3ccdb'/%3E%3Cstop offset='.8' stop-color='%23eef2f8'/%3E%3Cstop offset='1' stop-color='%238a96ad'/%3E%3C/linearGradient%3E%3ClinearGradient id='hkm1v' x1='0' x2='0' y1='0' y2='1'%3E%3Cstop offset='0' stop-color='%23f4f7fb'/%3E%3Cstop offset='.5' stop-color='%23bcc6d6'/%3E%3Cstop offset='1' stop-color='%237d8aa2'/%3E%3C/linearGradient%3E%3Cpattern id='hkm1w' width='9' height='9' patternUnits='userSpaceOnUse' patternTransform='rotate(32)'%3E%3Crect width='9' height='9' fill='%23f7f5ee'/%3E%3Crect width='4.6' height='9' fill='%232a5bc2'/%3E%3Crect x='4.6' width='.8' height='9' fill='%23ffffff' fill-opacity='.7'/%3E%3C/pattern%3E%3ClinearGradient id='hkm1x' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%23000' stop-opacity='.22'/%3E%3Cstop offset='.35' stop-color='%23fff' stop-opacity='.3'/%3E%3Cstop offset='.6' stop-color='%23fff' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23000' stop-opacity='.26'/%3E%3C/linearGradient%3E%3ClinearGradient id='hkm1b' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%23e9c66f'/%3E%3Cstop offset='.4' stop-color='%23fbe9b6'/%3E%3Cstop offset='1' stop-color='%23d7a94a'/%3E%3C/linearGradient%3E%3CradialGradient id='hkm1f' cx='.5' cy='.72' r='.62'%3E%3Cstop offset='0' stop-color='%23ffffff'/%3E%3Cstop offset='.3' stop-color='%23fff2b0'/%3E%3Cstop offset='.7' stop-color='%23ffb53a'/%3E%3Cstop offset='1' stop-color='%23f07a1a'/%3E%3C/radialGradient%3E%3CradialGradient id='hkm1g'%3E%3Cstop offset='0' stop-color='%23ffd76a' stop-opacity='.55'/%3E%3Cstop offset='.45' stop-color='%23ffb53a' stop-opacity='.18'/%3E%3Cstop offset='1' stop-color='%23ffb53a' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cpath d='M242 156V210A78 43 0 0 0 398 210V156' fill='none' stroke='%235d6a82' stroke-width='12' stroke-linecap='round'/%3E%3Cpath d='M242 156V210A78 43 0 0 0 398 210V156' fill='none' stroke='url(%23hkm1v)' stroke-width='9' stroke-linecap='round'/%3E%3Cpath d='M242 156V210A78 43 0 0 0 398 210V156' fill='none' stroke='%23ffffff' stroke-opacity='.7' stroke-width='1.6' transform='translate(-2 -1)'/%3E%3Cpath d='M176 156V210A144 79 0 0 0 464 210V156' fill='none' stroke='%235d6a82' stroke-width='12' stroke-linecap='round'/%3E%3Cpath d='M176 156V210A144 79 0 0 0 464 210V156' fill='none' stroke='url(%23hkm1v)' stroke-width='9' stroke-linecap='round'/%3E%3Cpath d='M176 156V210A144 79 0 0 0 464 210V156' fill='none' stroke='%23ffffff' stroke-opacity='.7' stroke-width='1.6' transform='translate(-2 -1)'/%3E%3Cpath d='M110 156V210A210 116 0 0 0 530 210V156' fill='none' stroke='%235d6a82' stroke-width='12' stroke-linecap='round'/%3E%3Cpath d='M110 156V210A210 116 0 0 0 530 210V156' fill='none' stroke='url(%23hkm1v)' stroke-width='9' stroke-linecap='round'/%3E%3Cpath d='M110 156V210A210 116 0 0 0 530 210V156' fill='none' stroke='%23ffffff' stroke-opacity='.7' stroke-width='1.6' transform='translate(-2 -1)'/%3E%3Cpath d='M44 156V210A276 152 0 0 0 596 210V156' fill='none' stroke='%235d6a82' stroke-width='12' stroke-linecap='round'/%3E%3Cpath d='M44 156V210A276 152 0 0 0 596 210V156' fill='none' stroke='url(%23hkm1v)' stroke-width='9' stroke-linecap='round'/%3E%3Cpath d='M44 156V210A276 152 0 0 0 596 210V156' fill='none' stroke='%23ffffff' stroke-opacity='.7' stroke-width='1.6' transform='translate(-2 -1)'/%3E%3Cpath d='M313 110H327V368H313Z' fill='url(%23hkm1s)' stroke='%235d6a82' stroke-width='1.2'/%3E%3Cellipse cx='320' cy='180' rx='13' ry='7' fill='url(%23hkm1s)' stroke='%235d6a82' stroke-width='1.2'/%3E%3Cellipse cx='316' cy='178' rx='5' ry='2' fill='%23ffffff' fill-opacity='.8'/%3E%3Cellipse cx='320' cy='250' rx='13' ry='7' fill='url(%23hkm1s)' stroke='%235d6a82' stroke-width='1.2'/%3E%3Cellipse cx='316' cy='248' rx='5' ry='2' fill='%23ffffff' fill-opacity='.8'/%3E%3Cellipse cx='320' cy='316' rx='13' ry='7' fill='url(%23hkm1s)' stroke='%235d6a82' stroke-width='1.2'/%3E%3Cellipse cx='316' cy='314' rx='5' ry='2' fill='%23ffffff' fill-opacity='.8'/%3E%3Cpath d='M308 362C300 374 278 380 252 384C246 385 244 392 252 394H388C396 392 394 385 388 384C362 380 340 374 332 362Z' fill='url(%23hkm1s)' stroke='%235d6a82' stroke-width='1.2'/%3E%3Cpath d='M262 386H378' stroke='%23ffffff' stroke-opacity='.75' stroke-width='1.6' stroke-linecap='round'/%3E%3Cellipse cx='320' cy='396' rx='74' ry='3.4' fill='%235d6a82' fill-opacity='.55'/%3E%3Cg data-hk-candle='1'%3E%3Crect x='37' y='88' width='14' height='60' rx='2' fill='url(%23hkm1w)'/%3E%3Crect x='37' y='88' width='14' height='60' rx='2' fill='url(%23hkm1x)'/%3E%3Cpath d='M44 88V81' stroke='%232b2b2b' stroke-width='1.6' stroke-linecap='round'/%3E%3Cg style='transform-origin:44px 82px'%3E%3Cpath d='M44 81C51 76 49 64 44 44C53 64 39 76 44 81Z' fill='url(%2337f)'/%3E%3Cpath d='M44 81C46 79 46 74 44 71C41 74 41 79 44 81Z' fill='%232f6be0' fill-opacity='.55'/%3E%3C/g%3E%3C/g%3E%3Cg data-hk-candle='2'%3E%3Crect x='103' y='88' width='14' height='60' rx='2' fill='url(%23hkm1w)'/%3E%3Crect x='103' y='88' width='14' height='60' rx='2' fill='url(%23hkm1x)'/%3E%3Cpath d='M110 88V81' stroke='%232b2b2b' stroke-width='1.6' stroke-linecap='round'/%3E%3Cg style='transform-origin:110px 82px'%3E%3Cpath d='M110 81C117 76 115 64 110 110C53 64 105 76 110 81Z' fill='url(%23103f)'/%3E%3Cpath d='M110 81C112 79 112 74 110 71C107 74 107 79 110 81Z' fill='%232f6be0' fill-opacity='.55'/%3E%3C/g%3E%3C/g%3E%3Cg data-hk-candle='3'%3E%3Crect x='169' y='88' width='14' height='60' rx='2' fill='url(%23hkm1w)'/%3E%3Crect x='169' y='88' width='14' height='60' rx='2' fill='url(%23hkm1x)'/%3E%3Cpath d='M176 88V81' stroke='%232b2b2b' stroke-width='1.6' stroke-linecap='round'/%3E%3Cg style='transform-origin:176px 82px'%3E%3Cpath d='M176 81C183 76 181 64 176 176C53 64 171 76 176 81Z' fill='url(%23169f)'/%3E%3Cpath d='M176 81C178 79 178 74 176 71C173 74 173 79 176 81Z' fill='%232f6be0' fill-opacity='.55'/%3E%3C/g%3E%3C/g%3E%3Cg data-hk-candle='4'%3E%3Crect x='235' y='88' width='14' height='60' rx='2' fill='url(%23hkm1w)'/%3E%3Crect x='235' y='88' width='14' height='60' rx='2' fill='url(%23hkm1x)'/%3E%3Cpath d='M242 88V81' stroke='%232b2b2b' stroke-width='1.6' stroke-linecap='round'/%3E%3Cg style='transform-origin:242px 82px'%3E%3Cpath d='M242 81C249 76 247 64 242 242C53 64 237 76 242 81Z' fill='url(%23235f)'/%3E%3Cpath d='M242 81C244 79 244 74 242 71C239 74 239 79 242 81Z' fill='%232f6be0' fill-opacity='.55'/%3E%3C/g%3E%3C/g%3E%3Cg data-hk-candle='5'%3E%3Crect x='391' y='88' width='14' height='60' rx='2' fill='url(%23hkm1w)'/%3E%3Crect x='391' y='88' width='14' height='60' rx='2' fill='url(%23hkm1x)'/%3E%3Cpath d='M398 88V81' stroke='%232b2b2b' stroke-width='1.6' stroke-linecap='round'/%3E%3Cg style='transform-origin:398px 82px'%3E%3Cpath d='M398 81C405 76 403 64 398 398C53 64 393 76 398 81Z' fill='url(%23391f)'/%3E%3Cpath d='M398 81C400 79 400 74 398 71C395 74 395 79 398 81Z' fill='%232f6be0' fill-opacity='.55'/%3E%3C/g%3E%3C/g%3E%3Cg data-hk-candle='6'%3E%3Crect x='457' y='88' width='14' height='60' rx='2' fill='url(%23hkm1w)'/%3E%3Crect x='457' y='88' width='14' height='60' rx='2' fill='url(%23hkm1x)'/%3E%3Cpath d='M464 88V81' stroke='%232b2b2b' stroke-width='1.6' stroke-linecap='round'/%3E%3Cg style='transform-origin:464px 82px'%3E%3Cpath d='M464 81C471 76 469 64 464 464C53 64 459 76 464 81Z' fill='url(%23457f)'/%3E%3Cpath d='M464 81C466 79 466 74 464 71C461 74 461 79 464 81Z' fill='%232f6be0' fill-opacity='.55'/%3E%3C/g%3E%3C/g%3E%3Cg data-hk-candle='7'%3E%3Crect x='523' y='88' width='14' height='60' rx='2' fill='url(%23hkm1w)'/%3E%3Crect x='523' y='88' width='14' height='60' rx='2' fill='url(%23hkm1x)'/%3E%3Cpath d='M530 88V81' stroke='%232b2b2b' stroke-width='1.6' stroke-linecap='round'/%3E%3Cg style='transform-origin:530px 82px'%3E%3Cpath d='M530 81C537 76 535 64 530 530C53 64 525 76 530 81Z' fill='url(%23523f)'/%3E%3Cpath d='M530 81C532 79 532 74 530 71C527 74 527 79 530 81Z' fill='%232f6be0' fill-opacity='.55'/%3E%3C/g%3E%3C/g%3E%3Cg data-hk-candle='8'%3E%3Crect x='589' y='88' width='14' height='60' rx='2' fill='url(%23hkm1w)'/%3E%3Crect x='589' y='88' width='14' height='60' rx='2' fill='url(%23hkm1x)'/%3E%3Cpath d='M596 88V81' stroke='%232b2b2b' stroke-width='1.6' stroke-linecap='round'/%3E%3Cg style='transform-origin:596px 82px'%3E%3Cpath d='M596 81C603 76 601 64 596 596C53 64 591 76 596 81Z' fill='url(%23589f)'/%3E%3Cpath d='M596 81C598 79 598 74 596 71C593 74 593 79 596 81Z' fill='%232f6be0' fill-opacity='.55'/%3E%3C/g%3E%3C/g%3E%3Cg%3E%3Crect x='312' y='40' width='16' height='62' rx='2' fill='url(%23hkm1b)'/%3E%3Crect x='312' y='40' width='16' height='62' rx='2' fill='url(%23hkm1x)'/%3E%3Cpath d='M314 52Q320 49 326 52M314 66Q320 63 326 66M314 80Q320 77 326 80' fill='none' stroke='%23c89a3a' stroke-opacity='.5' stroke-width='1'/%3E%3Cpath d='M320 40V33' stroke='%232b2b2b' stroke-width='1.6' stroke-linecap='round'/%3E%3Cg style='transform-origin:320px 34px'%3E%3Cpath d='M320 33C327 28 325 16 320 320C5 16 315 28 320 33Z' fill='url(%23313f)'/%3E%3Cpath d='M320 33C322 31 322 26 320 23C317 26 317 31 320 33Z' fill='%232f6be0' fill-opacity='.55'/%3E%3C/g%3E%3C/g%3E%3Cpath d='M35 152C35 164 53 164 53 152' fill='none'/%3E%3Cpath d='M29 146H59L53 158Q44 163 35 158Z' fill='url(%23hkm1s)' stroke='%235d6a82' stroke-width='1.2' stroke-linejoin='round'/%3E%3Cellipse cx='44' cy='146' rx='17' ry='3.6' fill='url(%23hkm1s)' stroke='%235d6a82' stroke-width='1.2'/%3E%3Cpath d='M101 152C101 164 119 164 119 152' fill='none'/%3E%3Cpath d='M95 146H125L119 158Q110 163 101 158Z' fill='url(%23hkm1s)' stroke='%235d6a82' stroke-width='1.2' stroke-linejoin='round'/%3E%3Cellipse cx='110' cy='146' rx='17' ry='3.6' fill='url(%23hkm1s)' stroke='%235d6a82' stroke-width='1.2'/%3E%3Cpath d='M167 152C167 164 185 164 185 152' fill='none'/%3E%3Cpath d='M161 146H191L185 158Q176 163 167 158Z' fill='url(%23hkm1s)' stroke='%235d6a82' stroke-width='1.2' stroke-linejoin='round'/%3E%3Cellipse cx='176' cy='146' rx='17' ry='3.6' fill='url(%23hkm1s)' stroke='%235d6a82' stroke-width='1.2'/%3E%3Cpath d='M233 152C233 164 251 164 251 152' fill='none'/%3E%3Cpath d='M227 146H257L251 158Q242 163 233 158Z' fill='url(%23hkm1s)' stroke='%235d6a82' stroke-width='1.2' stroke-linejoin='round'/%3E%3Cellipse cx='242' cy='146' rx='17' ry='3.6' fill='url(%23hkm1s)' stroke='%235d6a82' stroke-width='1.2'/%3E%3Cpath d='M389 152C389 164 407 164 407 152' fill='none'/%3E%3Cpath d='M383 146H413L407 158Q398 163 389 158Z' fill='url(%23hkm1s)' stroke='%235d6a82' stroke-width='1.2' stroke-linejoin='round'/%3E%3Cellipse cx='398' cy='146' rx='17' ry='3.6' fill='url(%23hkm1s)' stroke='%235d6a82' stroke-width='1.2'/%3E%3Cpath d='M455 152C455 164 473 164 473 152' fill='none'/%3E%3Cpath d='M449 146H479L473 158Q464 163 455 158Z' fill='url(%23hkm1s)' stroke='%235d6a82' stroke-width='1.2' stroke-linejoin='round'/%3E%3Cellipse cx='464' cy='146' rx='17' ry='3.6' fill='url(%23hkm1s)' stroke='%235d6a82' stroke-width='1.2'/%3E%3Cpath d='M521 152C521 164 539 164 539 152' fill='none'/%3E%3Cpath d='M515 146H545L539 158Q530 163 521 158Z' fill='url(%23hkm1s)' stroke='%235d6a82' stroke-width='1.2' stroke-linejoin='round'/%3E%3Cellipse cx='530' cy='146' rx='17' ry='3.6' fill='url(%23hkm1s)' stroke='%235d6a82' stroke-width='1.2'/%3E%3Cpath d='M587 152C587 164 605 164 605 152' fill='none'/%3E%3Cpath d='M581 146H611L605 158Q596 163 587 158Z' fill='url(%23hkm1s)' stroke='%235d6a82' stroke-width='1.2' stroke-linejoin='round'/%3E%3Cellipse cx='596' cy='146' rx='17' ry='3.6' fill='url(%23hkm1s)' stroke='%235d6a82' stroke-width='1.2'/%3E%3Cpath d='M311 106C311 118 329 118 329 106' fill='none'/%3E%3Cpath d='M305 100H335L329 112Q320 117 311 112Z' fill='url(%23hkm1s)' stroke='%235d6a82' stroke-width='1.2' stroke-linejoin='round'/%3E%3Cellipse cx='320' cy='100' rx='17' ry='3.6' fill='url(%23hkm1s)' stroke='%235d6a82' stroke-width='1.2'/%3E%3C/svg%3E");
}

/* Logo card: the light-mode logo on a white tag tied with silver ribbon,
   wherever it sits on the night window (footer, app splash) */
.hk-plaque {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 1.05rem 1.6rem;
  background: #ffffff;
  border-radius: 14px;
  box-shadow: 0 0 0 3px #dfe6f2, 0 0 0 4.5px #7d8aa2, 0 14px 28px -12px rgba(0, 0, 0, .6);
}

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

/* ── 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(8, 18, 48, 0.95) !important; border-bottom-color: var(--rule) !important; }
html.dark #desktopFooter { background: var(--paper) !important; }
html.dark .floating-nav-shell,
html.dark .safe-area-bottom > div.mobile-bottom-nav { background: rgba(15, 29, 68, 0.96) !important; }
html.dark .premium-side-menu { background: var(--paper) !important; }
html.dark #langSheet { background: var(--paper-2) !important; border-top-color: var(--rule) !important; }
html.dark .premium-profile-header { background: var(--paper-2) !important; }
html.dark .premium-dropdown,
html.dark #mobileExploreSheet .bg-white,
html.dark #logoutModal .bg-white,
html.dark .bg-white,
html.dark [x-data] .bg-white,
html.dark .bg-white.shadow-xl,
html.dark .bg-slate-50,
html.dark .bg-slate-100,
html.dark .odd\:bg-white:nth-child(odd) { background-color: var(--paper-2) !important; }
html.dark .bg-gray-50,
html.dark .even\:bg-gray-50:nth-child(even) { background-color: var(--paper) !important; }
html.dark .bg-gray-100,
html.dark #mobileExploreSheet .bg-gray-100,
html.dark thead { background-color: var(--paper-3) !important; }
html.dark .from-white, html.dark .from-gray-50 { --tw-gradient-from: var(--paper) !important; }
html.dark .to-white, html.dark .to-gray-50 { --tw-gradient-to: var(--paper) !important; }
html.dark .via-white, html.dark .via-gray-50 { --tw-gradient-via: var(--paper-2) !important; }
html.dark .from-gray-100 { --tw-gradient-from: var(--paper-2) !important; }
html.dark .to-gray-100 { --tw-gradient-to: var(--paper-2) !important; }
html.dark .search-input,
html.dark select:not(.no-dark) { background-color: var(--paper-2) !important; }
html.dark .gradient-bg { background: linear-gradient(-45deg, #172a5a, #081230, #12245a, #050b20) !important; }
html.dark [class*="dark:bg-[#121218]"], html.dark [class*="dark:bg-[#0"] { background-color: var(--paper-2) !important; }

/* header.css fills every dark-mode field with a navy #0d1117; here fields
   take the night window's own blue. 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: #060f2a !important;
  border-color: rgba(223, 230, 242, .2) !important;
  color: #edf2fc !important;
}

/* Inverted panels: shared markup paints some panels with background
   var(--ink) and letters them in var(--paper), which only works while ink
   is dark. After dark those panels take the deepest night blue. */
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: #050b20;
  --paper: #edf2fc;
  border-color: rgba(223, 230, 242, .3);
}

html header.safe-top-header[style] { background: rgba(245, 247, 252, .95) !important; }
html.dark header.safe-top-header[style] { background: rgba(8, 18, 48, .95) !important; }
/* The winners page's tab bar, near-black in assets/css/pages/winners.css */
html.dark .wn-tab-bar { background: rgba(8, 18, 48, .95); }

/* ── Login / register / forgot-password brand panel: the window at night,
   the menorah's rail along its top and a dreidel in its corner ── */
:root, html.dark {
  --brand-gradient: var(--night-bg);
  --brand-glow-1: rgba(255, 181, 58, 0.2);
  --brand-glow-2: rgba(93, 138, 224, 0.26);
}
.brand-panel { background: var(--hk-glints) repeat, var(--night-bg) !important; }
/* assets/css/pages/login.css loads after the theme and draws ::after as a
   round glow; here it is a dreidel at rest. */
html .brand-panel::after {
  content: ''; position: absolute;
  top: 110px !important; right: 10% !important; left: auto !important; bottom: auto !important;
  width: 92px !important; height: 138px !important;
  border-radius: 0 !important; opacity: 1 !important; filter: drop-shadow(0 10px 16px rgba(0, 0, 0, .45)) !important; transform: rotate(12deg) !important;
  background: var(--hk-dreidel-silver) center / contain no-repeat !important;
  box-shadow: none !important;
}
[dir="rtl"] .brand-panel::after { right: auto !important; left: 10% !important; transform: rotate(-12deg) !important; }
/* login.css's other glow becomes the rail along the top */
html .brand-panel::before {
  top: 6px !important; left: 0 !important; right: 0 !important; width: auto !important; height: 12px !important;
  border-radius: 0 !important; opacity: 1 !important; filter: none !important; transform: none !important;
  background: var(--hk-rail) !important;
}
.brand-panel .text-purple-200,
.brand-panel [class*="text-purple-200"] { color: rgba(238, 243, 253, 0.84) !important; }
.brand-panel h2 { font-family: var(--font-display); font-weight: 700 !important; }

/* ── Wallet balance card: a present in lapis paper printed with silver,
   tied across its foot with a silver satin ribbon, a stack of gelt in
   its corner ── */
html body .wallet-hero {
  position: relative;
  background: var(--hk-wrap);
  border: 0;
  border-radius: 18px;
  box-shadow: 0 2px 0 #0b1f55, 0 22px 40px -18px rgba(13, 37, 100, .7);
  color: #f4f7fd;
  overflow: hidden;
  padding-bottom: calc(1.5rem + 26px) !important;
}
/* The ribbon, with its shadow on the paper */
html body .wallet-hero::before {
  content: ''; position: absolute; left: 0; right: 0; bottom: 6px; top: auto; width: auto; height: 18px;
  border: 0; border-radius: 0; transform: none; opacity: 1;
  background: var(--hk-ribbon);
  box-shadow: 0 1px 0 #5d6a82, 0 4px 8px -2px rgba(5, 15, 45, .45);
  pointer-events: none;
}
/* The gelt */
html body .wallet-hero::after {
  content: ''; position: absolute; right: 44px; top: 50%; left: auto; bottom: auto; width: 116px; height: 116px; margin-top: -72px;
  border-radius: 0; transform: none; opacity: 1; filter: drop-shadow(0 8px 10px rgba(5, 15, 45, .45));
  background: var(--hk-gelt-stack) center / contain no-repeat;
  pointer-events: none;
}
html[dir="rtl"] body .wallet-hero::after { right: auto; left: 40px; }
@media (max-width: 639px) {
  html body .wallet-hero::after { width: 58px; height: 58px; top: 54px; margin-top: 0; right: 14px; }
  html[dir="rtl"] body .wallet-hero::after { right: auto; left: 14px; }
}
html body .wallet-hero > * { position: relative; z-index: 1; }
/* Shared markup letters the eyebrow, counts and rules in faint white for
   a black card; on the paper they need more body. */
html body .wallet-hero span:is([style*="color:rgba(255,255,255"], [style*="color:color-mix(in srgb, var(--paper)"]) { color: rgba(244, 247, 253, .86) !important; }
html body .wallet-hero .h-px { background: repeating-linear-gradient(90deg, rgba(223, 230, 242, .55) 0 5px, transparent 5px 9px) !important; }
html body .wallet-balance-num {
  font-family: var(--font-display); font-variation-settings: normal; font-weight: 700; letter-spacing: -.01em;
  color: #ffffff; overflow-wrap: normal; font-variant-numeric: lining-nums tabular-nums;
  text-shadow: 0 2px 0 rgba(5, 15, 45, .4);
}
html body .wallet-hero-btn-primary { background: #ffffff; color: #123274; border: 0; font-family: var(--font-ui); font-weight: 700; border-radius: 12px; box-shadow: 0 2px 0 #7d8aa2; }
html body .wallet-hero-btn-primary:hover { background: #f4f7fb; color: #123274; }
html body .wallet-hero-btn-secondary { font-family: var(--font-ui); font-weight: 700; color: #f4f7fd; border-color: rgba(223, 230, 242, .6); border-radius: 12px; }

/* ── Mystery box card (styled by assets/css/pages/home.css): the menorah
   rail across its top ── */
html .ed-card-mystery {
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
}
html .ed-card-mystery:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
html .ed-card-mystery::before {
  top: 0; left: 0; right: 0; bottom: auto; width: auto; height: 12px; border-radius: 0;
  background: var(--hk-rail); opacity: 1; z-index: 2;
}
html .ed-card-mystery img { position: relative; z-index: 1; }

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

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

/* Shared markup's stock purple, indigo and blue accents (coupon buttons,
   tier chips, focus rings) take the theme's lapis. */
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: 12px;
}
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(29, 71, 160, .3); }
html.dark .border-violet-200 { border-color: rgba(159, 185, 243, .35) !important; }
html .focus\:ring-purple-400:focus { --tw-ring-color: rgba(29, 71, 160, .35); }
html .focus\:border-purple-400:focus { border-color: var(--theme-500); }

/* Shared buttons drawn in the accent with white lettering (Place Order,
   Buy Now bars) are the theme's main buttons. */
html .bg-theme-600.text-white, html .bg-theme-500.text-white,
html .bg-blue-600.text-white, html .bg-blue-500.text-white {
  background: var(--btn-bg) !important;
  color: var(--btn-ink) !important;
  box-shadow: var(--btn-shadow) !important;
}
html .bg-theme-600.text-white:hover, html .bg-theme-500.text-white:hover { background: var(--btn-bg-hover) !important; }
html .bg-theme-600.text-white [class*="border-white"] { border-color: rgba(255, 255, 255, .3); border-top-color: var(--btn-ink); }

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

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

/* ── Cart and checkout: the order total on a white sheet under the rail ──
   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.7rem !important;
}
html .rounded-2xl:has(> div > div > #summary-total)::before,
html section.rounded-2xl:has([x-text="totalDisplay()"])::before {
  content: ''; position: absolute; left: 0; right: 0; top: 2px; height: 12px;
  background: var(--hk-rail);
}
html .rounded-2xl:has(> div > div > #summary-total) > div,
html section.rounded-2xl:has([x-text="totalDisplay()"]) > div { border-style: dashed !important; }
html #summary-total,
html section.rounded-2xl [x-text="totalDisplay()"] {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.75rem;
  color: var(--theme-600);
  overflow-wrap: normal;
}

/* The status strip holds one line, never wrapping inside its 32px. */
.hdr-strip .ed-status, .hdr-strip .ed-status * { white-space: nowrap; }
.hdr-strip .ed-status { font-size: 11px; letter-spacing: .05em; }
@media (max-width: 1023px) { .hdr-strip .hk-strip-chip { font-size: 10px; gap: .35rem; } }
/* Small phones: the dark-mode switch and the App chip in the header drop
   their words and keep their icons. */
@media (max-width: 419px) {
  html .hdr-strip .dark-mode-toggle span { display: none; }
  html .mobile-glass-header .pwa-chip__label { display: none; }
  html .mobile-glass-header .pwa-chip { padding: 0 .6rem; }
}

/* ── My Winnings: each prize as a present — the paper with its silver
   ribbon tied both ways, the prize on a round white gift tag where the
   ribbons cross — over a white panel for its details ── */
.hk-win {
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: transform .18s ease, box-shadow .18s ease;
}
.hk-win:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.hk-win__wrap {
  position: relative; container-type: inline-size;
  display: flex; align-items: center; justify-content: center;
  padding: 3rem 14px 2rem;
  background: var(--hk-wrap);
}
.hk-win:nth-child(3n+2) .hk-win__wrap {
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'><g fill='%231d47a0' fill-opacity='.5'><circle cx='10' cy='10' r='1.6'/><circle cx='30' cy='30' r='1.6'/></g><path d='M30 6c2 2.4 2 4.4 0 5.6c-2-1.2-2-3.2 0-5.6Z' fill='%23d99a1f' fill-opacity='.7'/><path d='M10 26c2 2.4 2 4.4 0 5.6c-2-1.2-2-3.2 0-5.6Z' fill='%23d99a1f' fill-opacity='.7'/></svg>") 0 0 / 40px 40px,
    linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .5) 46%, transparent 60%),
    linear-gradient(160deg, #f4f7fb, #dfe6f2 60%, #cbd4e3);
}
.hk-win:nth-child(3n+3) .hk-win__wrap {
  background:
    var(--hk-wrap-print) 0 0 / 56px 56px,
    linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .08) 46%, transparent 60%),
    linear-gradient(160deg, #13275e, #0e2154 55%, #0a1838);
}
html.dark .hk-win:nth-child(3n+2) .hk-win__wrap {
  background:
    var(--hk-glints) repeat,
    linear-gradient(115deg, transparent 30%, rgba(223, 230, 242, .1) 46%, transparent 60%),
    linear-gradient(160deg, #3a4a6a, #2a3856 60%, #1f2a44);
}
/* The ribbons, crossing under the tag */
.hk-win__wrap::before, .hk-win__wrap::after { content: ''; position: absolute; pointer-events: none; }
.hk-win__wrap::before { left: 0; right: 0; top: 50%; height: 16px; margin-top: -8px; background: var(--hk-ribbon); box-shadow: 0 1px 0 #5d6a82, 0 3px 6px -2px rgba(5, 15, 45, .35); }
.hk-win__wrap::after { top: 0; bottom: 0; left: 50%; width: 16px; margin-left: -8px; background: linear-gradient(90deg, #8a96ad 0, #f6f8fc 22%, #c3ccdb 50%, #eef2f8 74%, #7d8aa2 100%); box-shadow: 1px 0 0 #5d6a82; }
.hk-win__tagwrap { position: relative; z-index: 2; display: block; width: min(56%, 11rem); aspect-ratio: 1; }
.hk-win__bow { position: absolute; left: 50%; top: -12%; width: 52%; transform: translateX(-50%); z-index: 3; filter: drop-shadow(0 3px 3px rgba(5, 15, 45, .35)); }
.hk-win__bow svg { display: block; width: 100%; height: auto; }
.hk-win__prize {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center; border-radius: 50%;
  background: radial-gradient(circle at 50% 42%, #ffffff 0 58%, #eef2f8 70%);
  box-shadow: 0 0 0 4px #dfe6f2, 0 0 0 5.5px #7d8aa2, 0 10px 18px -8px rgba(5, 15, 45, .55);
  overflow: hidden;
}
.hk-win__prize img { max-width: 72%; max-height: 72%; object-fit: contain; transition: transform .3s ease; }
.hk-win:hover .hk-win__prize img { transform: scale(1.06) rotate(-2deg); }
.hk-win__wrap > .absolute { z-index: 3; top: .9rem; }
.hk-win__tag {
  display: inline-flex; align-items: center;
  padding: .22rem .65rem;
  font-size: 11px; font-weight: 700; letter-spacing: .04em;
  color: #0d1a3a; background: #ffffff; border-radius: 6px;
  box-shadow: 0 1px 0 rgba(13, 26, 58, .25), inset 0 0 0 1px rgba(13, 26, 58, .12);
}
.hk-win__tag--open { color: #3d2600; background: #f5cf6a; }
.hk-win__tag--done { color: #ffffff; background: #17725a; }
.hk-win__name { font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; line-height: 1.25; color: var(--ink); overflow-wrap: anywhere; }
.hk-win__label { padding-top: .6rem; border-top: 1px dashed var(--rule); }
.hk-win__price { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.15rem, 4vw, 1.4rem); line-height: 1; color: var(--theme-600); overflow-wrap: normal; white-space: nowrap; }
.hk-win__btn { min-height: 2.75rem; padding: .55rem .9rem; font-size: .92rem; }
.hk-win__cart, .hk-win__btn-off {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  border-radius: 12px; font-weight: 700;
}
.hk-win__cart { color: var(--ink); background: var(--paper-2); border: 1px solid var(--rule); box-shadow: 0 2px 0 var(--rule); }
.hk-win__cart:hover { border-color: var(--theme-500); color: var(--theme-600); }
.hk-win__btn-off { color: var(--ink-soft); background: transparent; border: 1px dashed var(--rule); cursor: not-allowed; }
.hk-win__claimed {
  display: flex; align-items: center; justify-content: center; gap: .4rem;
  min-height: 2.75rem; padding: .5rem;
  font-size: .92rem; font-weight: 700;
  color: var(--hk-good-ink); background: var(--hk-good-soft); border-radius: 12px;
}

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

/* Phones: headings break only between words, never mid-word. */
@media (max-width: 639px) {
  html body .reveal.flex-row:has(> .btn-view-all) h2.text-fit { font-size: clamp(1.5rem, 8vw, 1.875rem); }
  html body :is(h1, h2, h3):is(.text-fit, .truncate) { overflow-wrap: break-word; word-break: normal; hyphens: manual; }
}

/* Phones: a ticket's two dates stack rather than run into each other; the
   bids page's four tiles go two by two ("Gesamtgebote" was cut off); the
   auction page's browse link drops under its heading ("Andere Auktionen
   durchstöbern" pushed the page wider). */
@media (max-width: 639px) {
  html body .grid.grid-cols-2.rtl-text-right:has(> div > .whitespace-nowrap) { grid-template-columns: minmax(0, 1fr); gap: .75rem; }
  html body .grid.grid-cols-4:has(> div > p.text-3xl.font-extrabold) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html body div.flex.justify-between:has(> a.ed-link-arrow.whitespace-nowrap) { flex-wrap: wrap; row-gap: .75rem; }
}

/* 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: #17735a; --px-warn: #b45309; --px-crit: #b7243a; --px-info: #1d47a0; }
html.dark:root { --px-good: #7ed8b7; --px-warn: #fbbf23; --px-crit: #ff9eaa; --px-info: #b6caf6; }

/* Changing language, the scene (hanukkah.js): the menorah, its candles lit
   from the shamash out before the reload and the rest after it, and the
   plate that shows the new language once the last one catches. The menorah
   is the same on both pages, so the reload never shows. */
.hk-lang-stage { background: color-mix(in srgb, var(--hk-midnight) 58%, transparent); }
.hk-lang-scene {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 14px;
  width: min(560px, 100%); box-sizing: border-box; padding: 18px 22px 24px; border-radius: 18px;
  background: linear-gradient(180deg, var(--night-2), var(--night)); color: var(--on-night);
  border: 1px solid rgba(195, 204, 219, .22); box-shadow: 0 34px 70px -28px rgba(0, 0, 0, .65);
  font-family: var(--font-ui); text-align: center;
}
.hk-lang-glow {
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: .4;
  background: radial-gradient(ellipse 62% 48% at 50% 36%, rgba(255, 190, 80, .3), transparent 72%);
}
.hk-lang-top {
  position: relative; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 18px;
  font: 600 12px/1.2 var(--font-ui); letter-spacing: .08em; color: var(--on-night-soft);
}
.hk-lang-top svg { width: 18px; height: 18px; flex: none; color: var(--hk-silver, currentColor); }
.hk-lang-menorah { position: relative; display: flex; flex-direction: column; align-items: center; padding-top: 24px; }
.hk-lang-candles {
  display: flex; align-items: flex-end; gap: 14px; padding: 0 12px 9px;
  background: var(--hk-silver-grad) center bottom / 100% 7px no-repeat;
}
.hk-lang-candle {
  position: relative; width: 8px; height: 30px; border-radius: 2px 2px 1px 1px;
  background: repeating-linear-gradient(160deg, var(--hk-wax) 0 5px, var(--hk-sky) 5px 9px);
  box-shadow: inset -2px 0 0 rgba(0, 0, 0, .14);
}
.hk-lang-candle::before {
  content: ''; position: absolute; left: -4px; bottom: -5px; width: 16px; height: 6px;
  border-radius: 1px 1px 8px 8px; background: var(--hk-silver-grad);
}
.hk-lang-shamash { margin-bottom: 16px; background: repeating-linear-gradient(160deg, var(--hk-beeswax) 0 5px, #e2bd62 5px 7px); }
.hk-lang-shamash::after {
  content: ''; position: absolute; left: 50%; top: calc(100% + 1px); width: 4px; height: 16px; margin-left: -2px;
  background: var(--hk-silver-grad);
}
.hk-lang-flame {
  position: absolute; left: 50%; bottom: 100%; width: 10px; height: 16px; margin: 0 0 2px -5px;
  border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%; transform-origin: 50% 100%;
  background: radial-gradient(ellipse at 50% 70%, #fff 0 18%, #fff1b8 32%, #ffb53a 62%, rgba(255, 181, 58, 0) 74%);
  box-shadow: 0 0 14px 3px rgba(255, 190, 80, .5); opacity: 0;
}
.hk-lang-candle:nth-child(n+5) .hk-lang-flame { opacity: 1; }
.hk-lang-stem { display: block; width: 10px; height: 30px; background: var(--hk-silver-grad); }
.hk-lang-foot { display: block; width: 88px; height: 12px; border-radius: 40px 40px 4px 4px; background: var(--hk-silver-grad); }
.hk-lang-plate {
  position: relative; display: grid; max-width: 100%; box-sizing: border-box; padding: 10px 22px; border-radius: 10px;
  background: var(--hk-silver-grad); color: var(--hk-midnight);
  box-shadow: 0 0 0 1px var(--hk-silver-edge), 0 10px 20px -12px rgba(0, 0, 0, .6);
  font: 700 clamp(22px, 6.4vw, 32px)/1.15 var(--font-display);
}
.hk-lang-plate > span { grid-area: 1 / 1; min-width: 0; overflow-wrap: anywhere; }
.hk-lang-new { opacity: 0; color: var(--hk-deep); }
/* Out: the menorah comes up, the shamash catches and lights four candles. */
.px-lang-stage-out .hk-lang-scene { animation: hk-lang-scene-in .32s cubic-bezier(.2, .8, .3, 1.1) both; }
.px-lang-stage-out .hk-lang-glow { animation: hk-lang-glow-up .6s ease-out .3s both; }
.px-lang-stage-out .hk-lang-candle:nth-child(n+5) .hk-lang-flame { animation: hk-lang-light .22s ease-out .3s both; }
.px-lang-stage-out .hk-lang-candle:nth-child(9) .hk-lang-flame { animation-delay: .42s; }
.px-lang-stage-out .hk-lang-candle:nth-child(8) .hk-lang-flame { animation-delay: .5s; }
.px-lang-stage-out .hk-lang-candle:nth-child(7) .hk-lang-flame { animation-delay: .58s; }
.px-lang-stage-out .hk-lang-candle:nth-child(6) .hk-lang-flame { animation-delay: .66s; }
/* In: the last four catch, the plate glows and shows the new name. */
.px-lang-stage-in .hk-lang-candle:nth-child(n+5) .hk-lang-flame { animation: hk-lang-flicker .4s ease-in-out infinite alternate; }
.px-lang-stage-in .hk-lang-candle:nth-child(-n+4) .hk-lang-flame { animation: hk-lang-catch .22s ease-out .05s both; }
.px-lang-stage-in .hk-lang-candle:nth-child(3) .hk-lang-flame { animation-delay: .15s; }
.px-lang-stage-in .hk-lang-candle:nth-child(2) .hk-lang-flame { animation-delay: .25s; }
.px-lang-stage-in .hk-lang-candle:nth-child(1) .hk-lang-flame { animation-delay: .35s; }
.px-lang-stage-in .hk-lang-glow { animation: hk-lang-glow-full .4s ease-out .2s both; }
.px-lang-stage-in .hk-lang-old { animation: hk-lang-old-out .3s ease-in .5s both; }
.px-lang-stage-in .hk-lang-new { animation: hk-lang-new-in .4s ease-out .6s both; }
.px-lang-stage-in .hk-lang-plate { animation: hk-lang-plate-glow .4s ease-out .6s both; }
.px-lang-stage-in .hk-lang-scene { animation: hk-lang-scene-out .25s ease-in 1s both; }
@keyframes hk-lang-scene-in { from { transform: translateY(36px) scale(.96); opacity: 0; } }
@keyframes hk-lang-scene-out { to { transform: translateY(-24px); opacity: 0; } }
@keyframes hk-lang-glow-up { from { opacity: 0; } }
@keyframes hk-lang-glow-full { to { opacity: 1; } }
@keyframes hk-lang-light { from { transform: scale(.2); opacity: 0; } }
@keyframes hk-lang-catch { from { transform: scale(.2); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes hk-lang-flicker { to { transform: scaleY(1.12) skewX(-4deg); } }
@keyframes hk-lang-old-out { to { transform: translateY(-6px); filter: blur(3px); opacity: 0; } }
@keyframes hk-lang-new-in { from { transform: translateY(6px); filter: blur(4px); opacity: 0; } to { transform: none; filter: none; opacity: 1; } }
@keyframes hk-lang-plate-glow { to { box-shadow: 0 0 0 1px var(--hk-silver-edge), 0 0 30px 4px rgba(255, 200, 90, .5); } }
@media (max-width: 460px) {
  .hk-lang-scene { padding: 16px 16px 20px; }
  .hk-lang-candles { gap: 10px; }
  .hk-lang-plate { padding: 9px 16px; }
}

/* Phones: the hero's two buttons stay side by side, each as wide as its
   label needs, their text and padding shrinking with the screen; a label
   still too long takes two even lines inside its button. A home section's title and its "View all" link
   share one row too: the title keeps a little under half of it, breaking
   between words if it must, and only a very long link label takes two
   lines. */
@media (max-width: 639px) {
  html body :is(div, p):has(> .ed-btn-primary):has(> .ed-btn-secondary) { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: stretch; gap: .5rem; }
  html body :is(div, p):has(> .ed-btn-primary):has(> .ed-btn-secondary) > :is(.ed-btn-primary, .ed-btn-secondary) {
    flex: 1 1 auto; min-width: min-content; width: auto; margin: 0; justify-content: center; text-align: center; white-space: normal; text-wrap: balance;
    padding-inline: clamp(.5rem, 2.6vw, 1.25rem); font-size: clamp(.75rem, 3.5vw, .9375rem); line-height: 1.15;
  }
  html body :is(div, p):has(> .ed-btn-primary):has(> .ed-btn-secondary) > :is(.ed-btn-primary, .ed-btn-secondary) > :is(svg, i, img) { flex: none; }
  html body div.flex.justify-between:has(> div h2.text-fit):has(> a) { flex-direction: row; flex-wrap: nowrap; align-items: flex-end; column-gap: .75rem; }
  html body div.flex.justify-between:has(> div h2.text-fit):has(> a) > div { flex: 1 1 0; min-width: 45%; }
  html body div.flex.justify-between:has(> div h2.text-fit):has(> a) > a { flex: 0 1 auto; max-width: 55%; margin: 0; white-space: normal; text-wrap: balance; text-align: center; font-size: .8125rem; line-height: 1.2; letter-spacing: .02em; gap: .375rem; }
  html body div.flex.justify-between:has(> div h2.text-fit):has(> a) h2.text-fit { font-size: clamp(1.25rem, 6.4vw, 1.75rem); overflow-wrap: break-word; }
}

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

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