/* Halloween 2026 (Nathan, 2026-10-29: "for the day of halloween, i want the site themed as halloween, color scheme
   change, pumpkins and stuff, then the next day, back to normal"). Loaded by _Layout ONLY on 31 October, with
   html.theme-halloween. Friendly spooky - pumpkins, ghosts, witches' hats, bats - never scary: kids shop here too.
   The brand colours are swapped through the site's own custom properties, so buttons, badges and highlights follow:
   the yellow becomes pumpkin orange, the navy a midnight purple. Red stays red - it means "sale" on this site. */

:root.theme-halloween {
    --yellow: #FF8A1F;
    --yellow-700: #EF7300;
    --navy: #2A1446;
    --navy-800: #1E0E33;
    --text: #22183A;
    --ring: 0 0 0 3px rgba(42,20,70,.22);
    --hw-orange: #FF8A1F;
    --hw-purple: #2A1446;
    --hw-violet: #8A4FE0;
    --hw-night: #1A0B2E;
    --hw-cream: #FFE9D2;
}

/* The thin strip above the header: candy stripes. */
.theme-halloween .sw-topstrip {
    height: 6px;
    background: repeating-linear-gradient(-45deg, var(--hw-orange) 0 12px, var(--hw-purple) 12px 24px);
}

/* The logo's "S" square becomes a pumpkin: rounder, with a stem. */
.theme-halloween .sw-brand .mark {
    position: relative; background: var(--hw-orange); color: var(--hw-purple);
    border-color: var(--hw-purple); border-radius: 46% 46% 40% 40% / 52% 52% 44% 44%;
}
.theme-halloween .sw-brand .mark::before {
    content: ""; position: absolute; top: -7px; left: 50%; width: 6px; height: 9px; margin-left: -3px;
    background: #3E7B27; border-radius: 3px 3px 1px 1px; transform: rotate(10deg);
}
.theme-halloween .sw-brand .mark::after {
    content: ""; position: absolute; top: -6px; left: 50%; width: 10px; height: 6px; margin-left: 2px;
    background: #5BA33B; border-radius: 0 8px 0 8px;
}

/* ---------- The strip under the header ---------- */
.hw-strip { background: linear-gradient(90deg, var(--hw-night), #3D1F66 50%, var(--hw-night)); color: var(--hw-cream); border-bottom: 3px solid var(--hw-orange); }
.hw-strip-in { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px 14px; padding: 7px 22px; text-align: center; min-height: 48px; }
.hw-strip-icon { display: inline-flex; width: 30px; height: 30px; flex: 0 0 auto; }
.hw-strip-icon svg { width: 100%; height: 100%; }
.hw-strip-text { display: inline-flex; align-items: baseline; flex-wrap: wrap; justify-content: center; gap: 4px 10px; }
.hw-spooky { font-family: 'Creepster', 'Montserrat', cursive; font-weight: 400; color: var(--hw-orange); font-size: 1.35rem; letter-spacing: .05em; line-height: 1.1; }
.hw-strip-deals { font-size: .95rem; font-weight: 600; }
.hw-left { display: inline-block; background: var(--hw-orange); color: var(--hw-purple); font-family: 'Montserrat'; font-weight: 800; font-size: .82rem; border-radius: 999px; padding: 4px 11px; white-space: nowrap; }
.hw-strip-cta { color: #fff; font-weight: 700; font-size: .92rem; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.hw-strip-cta:hover { color: var(--hw-orange); }

/* ---------- The home page hero: a night sky, a moon, bats, a cobweb and two pumpkins ---------- */
.theme-halloween .hero { background: radial-gradient(120% 95% at 22% 8%, #47247A 0%, var(--hw-purple) 48%, var(--hw-night) 100%); }
.theme-halloween .hero::after { background: var(--hw-violet); }
.hw-hero-deco { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0;
                 /* a few stars in the night sky */
                 background-image: radial-gradient(1.6px 1.6px at 12% 78%, rgba(255,255,255,.7), transparent 60%), radial-gradient(1.4px 1.4px at 33% 12%, rgba(255,255,255,.65), transparent 60%),
                                   radial-gradient(1.8px 1.8px at 41% 62%, rgba(255,255,255,.55), transparent 60%), radial-gradient(1.4px 1.4px at 58% 8%, rgba(255,255,255,.7), transparent 60%),
                                   radial-gradient(1.6px 1.6px at 22% 5%, rgba(255,255,255,.6), transparent 60%), radial-gradient(1.4px 1.4px at 52% 46%, rgba(255,255,255,.5), transparent 60%); }
.hw-web { position: absolute; top: 0; left: 0; width: 150px; height: 150px; color: rgba(255,255,255,.22); }
.hw-web svg, .hw-bat svg { width: 100%; height: 100%; display: block; }
.hw-moon { position: absolute; top: 34px; left: 47%; width: 92px; height: 92px; border-radius: 50%;
           background: radial-gradient(circle at 36% 34%, #FFFBEA 0%, #FFE9A8 62%, #F5D27A 100%);
           box-shadow: 0 0 46px 12px rgba(255,226,150,.28); }
.hw-bat { position: absolute; display: block; animation: hw-flap 1.6s ease-in-out infinite alternate; }
.hw-bat-1 { top: 52px; left: 49%; width: 64px; height: 32px; }
.hw-bat-2 { top: 132px; left: 55%; width: 48px; height: 24px; animation-delay: .5s; }
.hw-bat-3 { top: 104px; left: 41%; width: 40px; height: 20px; animation-delay: .9s; }
.theme-halloween .hero .hw-bat svg path { fill: #12081F; stroke: rgba(205,184,245,.35); stroke-width: .8; }
@keyframes hw-flap { from { transform: translateY(0) scaleY(1); } to { transform: translateY(-6px) scaleY(.72); } }
.hw-hero-pumpkins { position: absolute; bottom: 10px; left: 44%; display: flex; align-items: flex-end; gap: 2px; }
.hw-hero-pumpkins svg { width: 64px; height: 64px; display: block; }
.hw-hero-pumpkins svg + svg { width: 46px; height: 46px; }

/* ---------- The Spooky Springbok Special on the home page ---------- */
.hw-special { position: relative; overflow: hidden; margin-top: 30px; padding: 26px 26px 24px; border-radius: 18px;
              background: radial-gradient(110% 120% at 85% 0%, #47247A 0%, var(--hw-purple) 55%, var(--hw-night) 100%);
              color: #fff; border: 3px solid var(--hw-orange); box-shadow: var(--shadow); }
.hw-special-web { position: absolute; top: 0; right: 0; width: 130px; height: 130px; color: rgba(255,255,255,.16); transform: scaleX(-1); }
.hw-special-web svg { width: 100%; height: 100%; }
.hw-special-head { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 18px; align-items: center; }
.hw-special-hat { width: 86px; height: 86px; display: block; }
.hw-special-hat svg { width: 100%; height: 100%; }
.hw-kicker { margin: 0 0 4px; font-family: 'Montserrat'; font-weight: 800; font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: #CDB8F5; }
.hw-title { margin: 0; font-family: 'Creepster', 'Montserrat', cursive; font-weight: 400; font-size: clamp(2.1rem, 5vw, 3.3rem); line-height: 1; letter-spacing: .04em; color: var(--hw-orange); }
.hw-sub { margin: 8px 0 0; color: #E8DEFA; max-width: 56ch; }
.hw-timer { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.hw-timer-label { font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #CDB8F5; }
.hw-timer .hw-left { font-size: 1.05rem; padding: 9px 16px; border-radius: 12px; }
.hw-deals { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 22px; }
.hw-deal { display: flex; flex-direction: column; background: #fff; color: var(--text); border-radius: 14px; overflow: hidden;
           text-decoration: none; box-shadow: 0 8px 22px rgba(0,0,0,.28); transition: transform .15s ease; }
.hw-deal:hover { transform: translateY(-3px); color: var(--text); }
.hw-deal-img { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden;
               background: radial-gradient(circle at 50% 70%, #FFF1E0 0%, #F4EDFC 70%); }
.hw-fan img { position: absolute; top: 8%; left: 50%; height: 84%; width: auto; object-fit: contain;
              filter: drop-shadow(0 6px 10px rgba(30,14,51,.28)); }
.hw-fan-back { transform: translateX(-88%) rotate(-9deg); }
.hw-fan-front { transform: translateX(-18%) rotate(6deg); }
.hw-deal-img svg { width: 40%; height: 100%; margin: 0 auto; display: block; }
.hw-deal-body { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px 16px; }
.hw-deal-name { font-family: 'Montserrat'; font-weight: 800; font-size: 1.08rem; }
.hw-deal-price { font-size: .95rem; color: var(--muted); }
.hw-deal-price s { color: var(--muted-2); }
.hw-deal-price strong { font-family: 'Montserrat'; font-size: 1.7rem; font-weight: 800; color: var(--red); margin: 0 2px; }
.hw-deal-cta { align-self: flex-start; margin-top: 4px; background: var(--hw-orange); color: var(--hw-purple); font-weight: 800; font-size: .92rem; padding: 8px 16px; border-radius: 10px; }
.hw-note { position: relative; margin: 14px 0 0; font-size: .82rem; color: #CDB8F5; }
.hw-special-pumpkins { position: absolute; right: 18px; bottom: 8px; display: flex; align-items: flex-end; gap: 4px; }
.hw-special-pumpkins svg { width: 40px; height: 40px; display: block; }

/* ---------- The footer: a row of friendly faces ---------- */
.hw-foot-row { display: flex; justify-content: center; align-items: flex-end; gap: 22px; padding: 26px 22px 0; }
.hw-foot-row svg { width: 40px; height: 40px; display: block; }
.hw-foot-row svg:nth-child(even) { transform: translateY(-6px); }

/* Tablet */
@media (max-width: 991.98px) {
    .hw-moon { left: auto; right: 7%; top: 22px; width: 64px; height: 64px; }
    .hw-bat-1 { left: auto; right: 16%; top: 40px; }
    .hw-bat-2 { left: auto; right: 6%; top: 100px; }
    .hw-bat-3 { display: none; }
    .hw-hero-pumpkins { left: auto; right: 12px; bottom: 8px; }
    .hw-hero-pumpkins svg { width: 48px; height: 48px; }
    .hw-hero-pumpkins svg + svg { width: 36px; height: 36px; }
    .hw-deals { grid-template-columns: 1fr; }
    .hw-deal { flex-direction: row; }
    .hw-deal-img { flex: 0 0 40%; aspect-ratio: 1 / 1; align-self: center; margin-left: 10px; border-radius: 10px; }
}

/* Phone */
@media (max-width: 640px) {
    .hw-strip-in { padding: 7px 14px; gap: 4px 10px; }
    .hw-strip-deals { display: none; }
    .hw-strip.is-special .hw-strip-icon-end { display: none; }
    .hw-spooky { font-size: 1.2rem; }
    .hw-web { width: 96px; height: 96px; }
    .hw-moon { display: none; }
    .hw-bat-1 { right: 5%; top: 6px; width: 44px; height: 22px; }
    .hw-bat-2 { right: 20%; top: 18px; width: 30px; height: 15px; }
    .hw-special { padding: 20px 16px 58px; margin-top: 22px; }
    .hw-special-head { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .hw-special-hat { display: none; }
    .hw-timer { grid-column: 1 / -1; flex-direction: row; justify-content: flex-start; }
    .hw-deal-img { flex-basis: 38%; margin-left: 8px; }
    .hw-deal-body { padding: 12px 12px 14px; }
    .hw-deal-price strong { font-size: 1.45rem; }
    .hw-foot-row { gap: 12px; }
    .hw-foot-row svg { width: 32px; height: 32px; }
}

@media (prefers-reduced-motion: reduce) {
    .hw-bat { animation: none; }
    .hw-deal { transition: none; }
}