/*
  Halloween season layer for pedro.market.

  Palette
    midnight  #0b0716  page ground
    bruise    #2a1640  panels
    witch     #8a5cc7  lines, secondary controls
    pumpkin   #ff7518  primary action, accents
    candle    #ffc65c  highlights, lit windows
    bone      #f6ecd6  text

  Type
    Jolly Lodger  vintage party-poster lettering, used for names and the hook only
    Rubik         controls, numbers, body
    MinecraftSplash / PixelUI from the base theme stay for in-game details
*/

:root {
  --hw-midnight: #0b0716;
  --hw-bruise: #2a1640;
  --hw-witch: #8a5cc7;
  --hw-pumpkin: #ff7518;
  --hw-candle: #ffc65c;
  --hw-bone: #f6ecd6;
  --hw-poster: "Jolly Lodger", "Segoe UI", system-ui, cursive;
  --hw-ui: "Rubik", "Segoe UI", system-ui, sans-serif;
}

body[data-theme-season="halloween"] {
  --ground: var(--hw-midnight);
  --panel: rgba(32, 16, 52, 0.62);
  --panel-2: #170b26;
  --line: rgba(176, 132, 232, 0.26);
  --accent: var(--hw-pumpkin);
  --accent-ink: #2a0e00;
  --amber: var(--hw-candle);
  --foam: var(--hw-bone);
  --dim: #b7a6cf;
  --display: var(--hw-ui);
  --sans: var(--hw-ui);
  background: var(--hw-midnight);
  color: var(--hw-bone);
}

.hw-sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---------------------------------------------------------- Scene */

body[data-theme-season="halloween"] [class*="OceanBackground_"] { display: none !important; }

/* Painted under all page content without touching the base theme's stacking. */
.hw-scene { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }

.hw-sky {
  position: absolute; inset: 0;
  background:
    radial-gradient(60% 45% at 50% 108%, rgba(255, 117, 24, 0.34), transparent 70%),
    linear-gradient(180deg, #0a0614 0%, #170c2b 38%, #2c1340 66%, #4a1a3c 84%, #5e2232 100%);
}

.hw-stars { position: absolute; inset: 0 0 35% 0; width: 100%; height: 65%; fill: #f6ecd6; }
.hw-star { animation: hw-twinkle 6s steps(1) infinite; }
@keyframes hw-twinkle { 0%, 100% { fill-opacity: 1 } 40% { fill-opacity: .3 } 55% { fill-opacity: 1 } }

.hw-moon {
  position: absolute;
  top: clamp(4.5rem, 10vh, 7rem);
  left: calc(50% + min(27rem, 34vw));
  width: clamp(7rem, 15vw, 13rem);
  aspect-ratio: 1;
  transform: translateX(-50%);
  filter: drop-shadow(0 0 28px rgba(255, 214, 140, 0.55)) drop-shadow(0 0 90px rgba(255, 150, 60, 0.35));
}
.hw-moon svg { width: 100%; height: 100%; display: block; }

.hw-bat {
  --i: 0;
  position: absolute;
  top: calc(clamp(4.5rem, 10vh, 7rem) + 3rem);
  left: calc(50% + min(27rem, 34vw));
  width: calc(1.6rem + var(--i) * 0.25rem);
  aspect-ratio: 11 / 6;
  animation: hw-fly calc(22s + var(--i) * 5s) linear infinite;
  animation-delay: calc(var(--i) * -7.3s);
  opacity: .92;
}
.hw-bat svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.hw-bat-down { animation: hw-flap .32s steps(1) infinite; }
.hw-bat-up { animation: hw-flap .32s steps(1) infinite reverse; }
@keyframes hw-flap { 0% { opacity: 1 } 50% { opacity: 0 } }
@keyframes hw-fly {
  0%   { transform: translate(0, 0) scale(.4); opacity: 0 }
  6%   { opacity: .95 }
  30%  { transform: translate(-22vw, -3vh) scale(.8) }
  55%  { transform: translate(-48vw, 6vh) scale(1) }
  80%  { transform: translate(-80vw, -2vh) scale(1.2) }
  94%  { opacity: .95 }
  100% { transform: translate(-108vw, 4vh) scale(1.3); opacity: 0 }
}

.hw-witch {
  position: absolute;
  top: calc(clamp(4.5rem, 10vh, 7rem) + clamp(2.4rem, 5vw, 4.4rem));
  left: calc(50% + min(27rem, 34vw));
  width: clamp(2.6rem, 4.6vw, 4rem);
  aspect-ratio: 24 / 14;
  opacity: 0;
  animation: hw-witch 34s linear infinite;
  animation-delay: -27s;
}
.hw-witch svg { width: 100%; height: 100%; display: block; }
@keyframes hw-witch {
  0%   { transform: translate(clamp(6rem, 14vw, 12rem), 1.2rem) rotate(-6deg); opacity: 0 }
  1%   { opacity: 1 }
  24%  { transform: translate(clamp(-12rem, -14vw, -6rem), -1.6rem) rotate(-9deg); opacity: 1 }
  25%, 100% { transform: translate(clamp(-12rem, -14vw, -6rem), -1.6rem); opacity: 0 }
}

.hw-land { position: absolute; left: 0; right: 0; bottom: 0; height: min(50vh, 34rem); }
.hw-land > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.hw-windows rect { animation: hw-window 7s steps(1) infinite; }
.hw-windows rect:nth-child(3n) { animation-delay: -2.2s; }
.hw-windows rect:nth-child(4n+1) { animation-delay: -4.9s; }
@keyframes hw-window { 0%, 100% { opacity: 1 } 47% { opacity: .55 } 50% { opacity: 1 } 81% { opacity: .2 } 84% { opacity: 1 } }
.hw-house { filter: drop-shadow(0 0 1px rgba(255, 198, 92, .15)); }

.hw-fog {
  position: absolute; left: -30%; width: 160%; height: 40%;
  background:
    radial-gradient(38% 60% at 20% 60%, rgba(196, 176, 230, .20), transparent 70%),
    radial-gradient(30% 50% at 55% 50%, rgba(196, 176, 230, .16), transparent 70%),
    radial-gradient(34% 55% at 85% 60%, rgba(196, 176, 230, .18), transparent 70%);
  filter: blur(14px);
}
.hw-fog-back { bottom: 32%; opacity: .7; animation: hw-drift 70s linear infinite alternate; }
.hw-fog-front { bottom: -6%; height: 34%; animation: hw-drift 46s linear infinite alternate-reverse; }
@keyframes hw-drift { from { transform: translateX(-8%) } to { transform: translateX(8%) } }

.hw-patch { position: absolute; left: 0; right: 0; bottom: 0; height: 0; }
.hw-lantern {
  --s: 1;
  position: absolute; bottom: 0.6rem;
  width: calc(3.4rem * var(--s));
  transform: translateX(-50%);
  animation: hw-flicker 3.1s infinite;
}
.hw-lantern::before {
  content: ''; position: absolute; inset: -80% -90% -20%;
  background: radial-gradient(closest-side, rgba(255, 150, 40, .42), rgba(255, 110, 20, .12) 55%, transparent);
  z-index: -1;
}
.hw-lantern svg { display: block; width: 100%; height: auto; }
@keyframes hw-flicker {
  0%, 100% { filter: brightness(1) drop-shadow(0 0 10px rgba(255, 170, 60, .7)) }
  8% { filter: brightness(.86) drop-shadow(0 0 6px rgba(255, 170, 60, .5)) }
  11% { filter: brightness(1.08) drop-shadow(0 0 14px rgba(255, 170, 60, .85)) }
  46% { filter: brightness(.95) drop-shadow(0 0 9px rgba(255, 170, 60, .65)) }
  52% { filter: brightness(1.12) drop-shadow(0 0 16px rgba(255, 170, 60, .9)) }
  77% { filter: brightness(.9) drop-shadow(0 0 8px rgba(255, 170, 60, .6)) }
}

.hw-flames rect { animation: hw-candle 1.7s steps(1) infinite; }
.hw-flames rect:nth-child(2n) { animation-delay: -.6s; }
.hw-flames rect:nth-child(3n) { animation-delay: -1.1s; }
@keyframes hw-candle { 0%, 100% { opacity: 1 } 20% { opacity: .7 } 35% { opacity: 1 } 62% { opacity: .82 } 70% { opacity: 1 } }

/* The old oak framing the left edge. */
.hw-oak {
  position: absolute; left: -1.5rem; bottom: 0;
  height: min(94vh, 64rem);
  aspect-ratio: 230 / 380;
}
.hw-oak svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.hw-oak-glow {
  position: absolute; width: 9rem; height: 9rem; transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(255, 170, 70, .34), rgba(255, 120, 30, .1) 55%, transparent);
  animation: hw-glow 3.1s infinite;
}
@keyframes hw-glow { 0%, 100% { opacity: 1 } 9% { opacity: .75 } 12% { opacity: 1 } 50% { opacity: .85 } }
.hw-owl-eyes { animation: hw-blink 6s steps(1) infinite; }
@keyframes hw-blink { 0%, 100% { opacity: 1 } 61% { opacity: 0 } 63% { opacity: 1 } 88% { opacity: 0 } 89.5% { opacity: 1 } }

.hw-cloud { position: absolute; opacity: .95; animation: hw-cloud 90s ease-in-out infinite alternate; }
.hw-cloud svg { display: block; width: 100%; height: 100%; }
.hw-cloud-a { top: 9vh; left: 4vw; width: min(30vw, 26rem); }
.hw-cloud-b { top: 27vh; left: 14vw; width: min(18vw, 15rem); opacity: .8; animation-duration: 70s; }
.hw-cloud-c { top: calc(clamp(4.5rem, 10vh, 7rem) + clamp(5rem, 10vw, 9rem)); left: calc(50% + min(22rem, 26vw)); width: min(26vw, 22rem); animation-duration: 110s; }
.hw-cloud-d { top: 4vh; left: 36vw; width: min(12vw, 10rem); opacity: .7; animation-duration: 80s; }
@keyframes hw-cloud { from { transform: translateX(-2.5vw) } to { transform: translateX(2.5vw) } }

.hw-ghost {
  position: absolute; left: 12vw; bottom: 17vh;
  width: clamp(2.2rem, 3.2vw, 3.2rem); aspect-ratio: 1;
  opacity: .78;
  filter: drop-shadow(0 0 10px rgba(220, 210, 255, .55));
  animation: hw-haunt 16s ease-in-out infinite;
}
.hw-ghost svg { display: block; width: 100%; height: 100%; }
@keyframes hw-haunt {
  0%, 100% { transform: translate(0, 0); opacity: .78 }
  25% { transform: translate(3vw, -2.2vh); opacity: .55 }
  50% { transform: translate(6vw, .8vh); opacity: .8 }
  75% { transform: translate(2.5vw, -1.4vh); opacity: .35 }
}

.hw-wisps { position: absolute; inset: 0; }
.hw-wisps span {
  --c: #ffb347;
  position: absolute; width: 4px; height: 4px; background: var(--c);
  box-shadow: 0 0 8px 2px var(--c);
  opacity: 0;
  animation: hw-wisp 9s linear infinite;
}
@keyframes hw-wisp {
  0% { transform: translate(0, 0); opacity: 0 }
  15% { opacity: .9 }
  50% { transform: translate(1.2vw, -9vh); opacity: .6 }
  85% { opacity: .8 }
  100% { transform: translate(-.6vw, -18vh); opacity: 0 }
}

/* ---------------------------------------------------------- Hero */

body[data-theme-season="halloween"] .page_hero__SKW6o [class*="page_wordmark__"] {
  color: var(--hw-bone);
  text-shadow: 0 3px 0 #1a0c27, 0 0 30px rgba(10, 4, 20, .9);
}
body[data-theme-season="halloween"] .page_tld__SPNxw {
  color: var(--hw-pumpkin);
  text-shadow: 0 3px 0 #3d1500, 0 0 22px rgba(255, 117, 24, .45);
}

.hw-o {
  position: relative;
  display: inline-block;
  width: .72em;
  margin: 0 .03em 0 .05em;
  vertical-align: -0.02em;
  animation: hw-flicker 3.1s infinite;
}
.hw-o svg { display: block; width: 100%; height: auto; }

body[data-theme-season="halloween"] .Splash_splash__Uo6gX {
  color: #ffff55;
  text-shadow: .125em .125em 0 #3f3f15;
  /* A dark outline keeps the splash readable where it crosses the orange .market. */
  filter: drop-shadow(0 0 1px #12081e) drop-shadow(0 0 1px #12081e) drop-shadow(0 0 2px #12081e);
}

body[data-theme-season="halloween"] .page_hero__SKW6o .page_hook__2K6_G {
  font-family: var(--hw-poster);
  font-weight: 400;
  font-size: clamp(1.7rem, 3.4vw, 2.15rem);
  line-height: 28.6px; /* base theme line box, so the cards start where they do live */
  letter-spacing: .05em;
  color: var(--hw-bone);
  -webkit-text-fill-color: var(--hw-bone);
  text-shadow: 0 2px 0 #1a0c27, 0 0 18px rgba(10, 4, 20, .95);
}
body[data-theme-season="halloween"] .page_hero__SKW6o .page_guarantee__IBTLB {
  font-family: var(--hw-ui);
  font-weight: 700;
  color: var(--hw-bone);
  text-shadow: 0 2px 6px #000;
}
body[data-theme-season="halloween"] .page_figure__Ywd89 { color: var(--hw-pumpkin); }

/* ---------------------------------------------------------- Tabs */

body[data-theme-season="halloween"] .Storefront_tab__xnGiL {
  font-family: var(--hw-ui);
  color: var(--hw-bone);
  background: linear-gradient(180deg, rgba(120, 80, 170, .26), rgba(40, 18, 64, .55));
  border: 1px solid rgba(176, 132, 232, .38);
  border-top-color: rgba(214, 186, 255, .5);
  text-shadow: 0 1px 3px #000;
  box-shadow: inset 0 1px 0 rgba(230, 210, 255, .12), 0 4px 12px rgba(0, 0, 0, .3);
}
body[data-theme-season="halloween"] .Storefront_tab__xnGiL:hover { border-color: rgba(230, 200, 255, .8); }
body[data-theme-season="halloween"] .Storefront_tab__xnGiL[aria-pressed='true'] {
  color: #fff;
  background: linear-gradient(180deg, #ff9a3d, #e05a0c);
  border-color: #ffb36b;
  border-top-color: #ffd7a8;
  box-shadow: inset 0 -2px 0 rgba(255, 220, 170, .55), 0 0 18px rgba(255, 117, 24, .35);
}

/* ---------------------------------------------------------- Cards */

/* On desktop the whole storefront (hero, tabs, cards, trust bar, corner
   buttons) renders 12% larger than the base theme; the night scene behind
   it keeps its size. Zoom scales layout too, so nothing overlaps or wraps
   differently than it would at that size. Phones keep the base size. */
@media (min-width: 48rem) {
  body[data-theme-season="halloween"] { --hw-ui-scale: 1.12; }
  body[data-theme-season="halloween"] > main,
  body[data-theme-season="halloween"] > .CartDropdown_host__mCnlq,
  body[data-theme-season="halloween"] > .account-access { zoom: var(--hw-ui-scale); }
  /* Keep the scaled store within the same page height as the base theme. */
  body[data-theme-season="halloween"] #store-view.page_wrap__NBl5k { padding-bottom: 3rem; }
}

body[data-theme-season="halloween"] .ProductCard_card__JrE_3 {
  border: 1px solid rgba(196, 160, 245, .5);
  border-top-color: rgba(255, 196, 130, .75);
  background:
    radial-gradient(90% 55% at 50% 0%, rgba(255, 130, 40, .16), transparent 70%),
    linear-gradient(180deg, rgba(44, 22, 70, .72), rgba(20, 10, 34, .78));
  backdrop-filter: blur(10px) saturate(1.1);
  -webkit-backdrop-filter: blur(10px) saturate(1.1);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .5), 0 0 0 1px rgba(10, 4, 20, .6), 0 0 24px rgba(150, 100, 220, .14), inset 0 1px 0 rgba(255, 210, 160, .22);
}
body[data-theme-season="halloween"] .ProductCard_card__JrE_3:hover {
  border-color: rgba(255, 150, 70, .55);
  box-shadow: 0 22px 46px rgba(0, 0, 0, .55), 0 0 28px rgba(255, 117, 24, .16), inset 0 1px 0 rgba(255, 210, 160, .22);
}
body[data-theme-season="halloween"] .ProductCard_scene__qFyYr {
  background-image:
    radial-gradient(60% 55% at 50% 46%, color-mix(in srgb, var(--glow) 26%, transparent), transparent 72%),
    linear-gradient(180deg, rgba(10, 4, 20, .25), transparent 60%);
}
body[data-theme-season="halloween"] .ProductCard_scene__qFyYr::after {
  background: linear-gradient(180deg, transparent 55%, rgba(10, 4, 20, .35));
}
body[data-theme-season="halloween"] .ProductCard_body__5RnCY { background: transparent; }

body[data-theme-season="halloween"] .ProductCard_name__6lJpV {
  font-family: var(--hw-poster);
  font-weight: 400;
  font-size: 1.85rem;
  letter-spacing: .04em;
  line-height: 1.536rem; /* base theme: 1.28rem × 1.2, keeps cards at their live height */
  color: var(--hw-bone);
  text-shadow: 0 2px 0 #12081e;
}

/* The base glint uses screen blending, which washes the elytra out on dark glass. */
body[data-theme-season="halloween"] .ElytraArtwork_glint__4Y_rV { opacity: .45; }

.hw-web {
  position: absolute; top: 0; left: 0; z-index: 2;
  width: 3.4rem; height: 3.4rem;
  color: rgba(236, 226, 255, .32);
  pointer-events: none;
}
.hw-web svg { width: 100%; height: 100%; display: block; }

body[data-theme-season="halloween"] .ProductCard_sceneBadge__aCsgO { background: rgba(10, 4, 20, .62); }
body[data-theme-season="halloween"] .StockBadge_badge__vh3f_ { color: var(--hw-bone); }
body[data-theme-season="halloween"] .StockBadge_badge__vh3f_::before { background: #7dffa0; box-shadow: 0 0 8px rgba(125, 255, 160, .8); }
body[data-theme-season="halloween"] .StockBadge_low__N8mvO::before { background: var(--hw-pumpkin); box-shadow: 0 0 8px rgba(255, 117, 24, .9); }

body[data-theme-season="halloween"] .ProductCard_preset__gV6vy {
  color: rgba(232, 220, 250, .78);
  background: rgba(10, 4, 20, .42);
  border-color: rgba(176, 132, 232, .2);
}
body[data-theme-season="halloween"] .ProductCard_preset__gV6vy:hover:not(:disabled) { color: var(--hw-bone); border-color: rgba(176, 132, 232, .5); }
body[data-theme-season="halloween"] .ProductCard_preset__gV6vy[aria-pressed='true'] {
  color: var(--hw-pumpkin);
  border-color: var(--hw-pumpkin);
  background: rgba(255, 117, 24, .13);
}

body[data-theme-season="halloween"] .ProductCard_rate__aI_Gw,
body[data-theme-season="halloween"] .ProductCard_suffix__VIKNN { color: rgba(222, 208, 242, .8); }

body[data-theme-season="halloween"] .ProductCard_step__OqX1U {
  background: rgba(138, 92, 199, .14);
  border-color: rgba(176, 132, 232, .3);
}
body[data-theme-season="halloween"] .ProductCard_step__OqX1U:hover:not(:disabled) {
  background: rgba(138, 92, 199, .3);
  border-color: rgba(176, 132, 232, .55);
}
body[data-theme-season="halloween"] .ProductCard_field__dBDdW {
  background: rgba(10, 4, 20, .5);
  border-color: rgba(176, 132, 232, .3);
}

/* The buy button is the lit pumpkin of the card. */
body[data-theme-season="halloween"] .ProductCard_cta__SH03T {
  font-family: var(--hw-ui);
  color: #2a0e00;
  background:
    radial-gradient(120% 140% at 50% 0%, #ffb35c 0%, #ff8a1f 45%, #e8590a 100%);
  text-shadow: 0 1px 0 rgba(255, 220, 160, .55);
  box-shadow:
    0 10px 26px rgba(255, 117, 24, .38),
    inset 0 1px 0 rgba(255, 235, 190, .65),
    inset 0 -3px 0 rgba(150, 50, 0, .35);
}
body[data-theme-season="halloween"] .ProductCard_cta__SH03T:hover:not(:disabled) {
  filter: brightness(1.06);
  box-shadow:
    0 12px 32px rgba(255, 117, 24, .55),
    0 0 0 3px rgba(255, 170, 80, .18),
    inset 0 1px 0 rgba(255, 235, 190, .7),
    inset 0 -3px 0 rgba(150, 50, 0, .35);
}
body[data-theme-season="halloween"] .ProductCard_cta__SH03T:disabled {
  background: rgba(255, 117, 24, .28);
  color: rgba(255, 236, 214, .6);
  text-shadow: none;
  box-shadow: none;
}

body[data-theme-season="halloween"] .ProductCard_secondary__3Jx0Q {
  font-family: var(--hw-ui);
  color: var(--hw-bone);
  background: rgba(138, 92, 199, .12);
  border-color: rgba(176, 132, 232, .4);
}
body[data-theme-season="halloween"] .ProductCard_secondary__3Jx0Q:hover:not(:disabled) {
  background: rgba(138, 92, 199, .26);
  border-color: rgba(206, 172, 255, .7);
}
body[data-theme-season="halloween"] .ProductCard_secondaryDone__xAz0l {
  color: var(--hw-candle);
  border-color: rgba(255, 198, 92, .55);
  background: rgba(255, 198, 92, .12);
}

/* ---------------------------------------------------------- Trust bar */

body[data-theme-season="halloween"] .TrustBar_stats__nnw1q,
body[data-theme-season="halloween"] .TrustBar_status__zI_Xs {
  background: linear-gradient(180deg, rgba(60, 30, 90, .55), rgba(18, 8, 30, .72));
  border-color: rgba(176, 132, 232, .3);
  border-top-color: rgba(214, 186, 255, .38);
  box-shadow: 0 14px 30px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(230, 210, 255, .1);
}
body[data-theme-season="halloween"] .TrustBar_label__5jtLD,
body[data-theme-season="halloween"] .TrustBar_statusNote__vwf2j { color: rgba(222, 208, 242, .78); }
body[data-theme-season="halloween"] .TrustBar_stat__npc8K:nth-child(1) .trust-stat-icon { color: var(--hw-candle); fill: rgba(255, 198, 92, .16); }
body[data-theme-season="halloween"] .TrustBar_stat__npc8K:nth-child(2) .trust-stat-icon { color: var(--hw-pumpkin); fill: rgba(255, 117, 24, .14); }
body[data-theme-season="halloween"] .TrustBar_stat__npc8K:nth-child(3) .trust-stat-icon { color: #c9a4ff; fill: rgba(176, 132, 232, .16); }

/* ---------------------------------------------------------- Corner controls */

body[data-theme-season="halloween"] .CartDropdown_trigger__Gu95b,
body[data-theme-season="halloween"] .account-access {
  color: var(--hw-bone);
  background: rgba(44, 22, 70, .6);
  border-color: rgba(176, 132, 232, .5);
  box-shadow: inset 0 1px 0 rgba(230, 210, 255, .18);
}
body[data-theme-season="halloween"] .account-access:hover { background: rgba(80, 44, 120, .7); }

body[data-theme-season="halloween"] .CartDropdown_panel__KH4E3 {
  border-color: rgba(176, 132, 232, .4);
  border-top-color: rgba(255, 190, 120, .5);
  background:
    radial-gradient(90% 40% at 50% 0%, rgba(255, 130, 40, .12), transparent 70%),
    linear-gradient(180deg, rgba(44, 22, 70, .9), rgba(20, 10, 34, .94));
  box-shadow: 0 20px 44px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 210, 160, .16);
}

body[data-theme-season="halloween"] :focus-visible {
  outline: 2px solid var(--hw-candle);
  outline-offset: 2px;
}

/* ---------------------------------------------------------- Sound toggle */

.hw-sound {
  position: fixed; z-index: 50; top: 1rem; left: 1.25rem;
  width: 2.8rem; height: 2.8rem; display: grid; place-items: center; padding: 0;
  color: var(--hw-bone); background: rgba(44, 22, 70, .6);
  border: 1px solid rgba(176, 132, 232, .5); border-radius: .75rem;
  box-shadow: inset 0 1px 0 rgba(230, 210, 255, .18);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  cursor: pointer;
}
.hw-sound:hover { background: rgba(80, 44, 120, .7); }
.hw-sound svg { width: 1.3rem; height: 1.3rem; }
.hw-sound[aria-pressed="false"] { color: rgba(246, 236, 214, .55); }
@media (min-width: 48rem) { .hw-sound { zoom: var(--hw-ui-scale, 1); } }

/* ---------------------------------------------------------- Item fountain */

.hw-fx { position: fixed; inset: 0; z-index: 45; pointer-events: none; overflow: hidden; }
.hw-gem {
  position: absolute;
  translate: -50% -50%;
  image-rendering: pixelated; pointer-events: none;
  filter: drop-shadow(0 0 6px var(--c)) drop-shadow(0 3px 3px rgba(0, 0, 0, .5));
}

/* ---------------------------------------------------------- Soul flames */

.hw-flame { display: block; width: 100%; height: 100%; filter: drop-shadow(0 0 6px var(--c)) drop-shadow(0 0 2px var(--c)); }
.hw-flame .f1 { fill: color-mix(in srgb, var(--c) 78%, #000); }
.hw-flame .f2 { fill: var(--c); }
.hw-flame .f3 { fill: color-mix(in srgb, var(--c) 35%, #fff); }

/* The product flying to the cart, wrapped in its soul flame. */
.hw-flight { position: fixed; z-index: 80; left: 0; top: 0; width: 3.4rem; height: 4.6rem; pointer-events: none; }
.hw-flight .hw-flame { position: absolute; inset: 0; opacity: .9; }
.hw-flight img { position: absolute; left: 50%; top: 58%; width: 2.2rem; height: 2.2rem; translate: -50% -50%; object-fit: contain; image-rendering: pixelated; filter: drop-shadow(0 0 4px #000); }

/* Items circling the cart icon, one per cart line. */
.hw-orbit { position: absolute; inset: 0; pointer-events: none; animation: hw-orbit 8s linear infinite; }
.hw-orbiter {
  position: absolute; left: 50%; top: 50%; width: 1.25rem; height: 1.7rem; margin: -.85rem 0 0 -.625rem;
  /* Turns with the ring, so the flame always points away from the cart. */
  transform: rotate(calc(360deg / var(--n) * var(--i))) translateY(-2.15rem);
}
.hw-upright { position: absolute; inset: 0; }
.hw-upright .hw-flame { position: absolute; inset: 0; animation: hw-soul 1.2s steps(2) infinite; animation-delay: calc(var(--i) * -.4s); }
.hw-upright img { position: absolute; left: 50%; top: 62%; width: .85rem; height: .85rem; translate: -50% -50%; object-fit: contain; image-rendering: pixelated; }
@keyframes hw-orbit { to { transform: rotate(360deg); } }
/* Flames circling the cart pass behind the Sign in button next to it; while
   the cart dropdown is open it keeps its usual place above that button. */
body[data-theme-season="halloween"] > .account-access { z-index: 51; }
body[data-theme-season="halloween"]:has(.CartDropdown_panelOpen__VHdne) > .account-access { z-index: 44; }
@keyframes hw-soul { 50% { filter: drop-shadow(0 0 9px var(--c)) brightness(1.3); } }

/* ---------------------------------------------------------- Small screens */

@media (max-width: 40rem) {
  .hw-moon { top: .5rem; left: -1.4rem; transform: none; width: 6.2rem; }
  .hw-witch { top: 2.4rem; left: 2.2rem; width: 2.4rem; }
  .hw-bat { top: 7rem; left: auto; right: 2rem; }
  .hw-land { height: 34vh; }
  .hw-oak { height: 62vh; left: -2.5rem; opacity: .9; }
  .hw-ghost { left: auto; right: 14vw; bottom: 30vh; }
  .hw-cloud-c, .hw-cloud-d { display: none; }
  .hw-cloud-a { top: 16vh; left: 30vw; width: 60vw; }
  .hw-cloud-b { top: 44vh; left: 60vw; width: 34vw; }
  .hw-lantern { width: calc(2.4rem * var(--s)); }
  .hw-lantern:nth-child(2), .hw-lantern:nth-child(3) { display: none; }
  body[data-theme-season="halloween"] .ProductCard_name__6lJpV { font-size: 1.7rem; }
}

/* ---------------------------------------------------------- Reduced motion */

@media (prefers-reduced-motion: reduce) {
  .hw-witch { display: none; }
  .hw-orbit, .hw-upright, .hw-upright .hw-flame, .hw-flames rect, .hw-owl-eyes, .hw-oak-glow, .hw-cloud, .hw-ghost, .hw-wisps span, .hw-star, .hw-windows rect, .hw-fog, .hw-lantern, .hw-o, .hw-bat-down, .hw-bat-up { animation: none !important; }
  .hw-bat-down { display: none; }
  .hw-bat { animation: none; transform: translate(calc(var(--i) * -9vw - 4vw), calc(var(--i) * 1.1rem - 1rem)) scale(.8); }
}

/* Sold out: the stock badge is a "Notify me" button, then a small email field, then a confirmation. */
body[data-theme-season] .StockBadge_badge__vh3f_.theme-notify, body .StockBadge_badge__vh3f_.theme-notify { cursor: pointer; font: inherit; color: var(--hw-pumpkin); border-color: rgba(255, 117, 24, .55); background: rgba(255, 117, 24, .14); }
body .StockBadge_badge__vh3f_.theme-notify:hover { background: rgba(255, 117, 24, .26); }
body .StockBadge_badge__vh3f_.theme-notify::before, body .StockBadge_badge__vh3f_.theme-notify-form::before, body .StockBadge_badge__vh3f_.theme-notified::before { display: none; }
body .StockBadge_badge__vh3f_.theme-notify-form { gap: .35rem; padding: .2rem .22rem .2rem .6rem; background: rgba(20, 10, 30, .85); border-color: rgba(255, 117, 24, .55); }
.theme-notify-form input { width: 8rem; min-width: 0; border: 0; background: transparent; color: var(--hw-bone); font: inherit; text-transform: none; letter-spacing: 0; outline: none; }
.theme-notify-form button { border: 0; border-radius: 999px; padding: .22rem .6rem; background: var(--hw-pumpkin); color: #1a0b00; font: inherit; font-weight: 700; cursor: pointer; }
body[data-theme-season] .StockBadge_badge__vh3f_.theme-notified, body .StockBadge_badge__vh3f_.theme-notified { color: #8af0b6; border-color: rgba(125, 255, 160, .45); }