/* ==========================================================================
   Sooz — Shared site styles
   Palette, typography, header, footer, buttons, modals, mobile menu, utilities
   ========================================================================== */

/* ==========================================================================
   Self-hosted fonts (latin subset, woff2). Served same-origin from /fonts and
   preloaded in each page's <head>, so the real faces arrive with first paint
   instead of after two cross-origin round trips to Google Fonts — no more
   fallback-font flash on load. Fredoka + Nunito are variable (one file spans
   every weight we use). The paired *-Fallback faces are Arial re-metriced with
   size-adjust/override so the pre-swap fallback occupies identical space (zero
   layout shift). Override values measured from the actual woff2 vs. Arial.
   ========================================================================== */
/* @font-face moved to components/sooz-assets.html (asset_url required on CDN) */

:root {
    /* Brand core (Sooz Brand Guidelines v1.0) */
    --sun-yellow: #FFD166;    /* Sun Yellow — secondary · callouts · warmth */
    --pop-orange: #FF6B35;    /* Pop Orange — primary accent · CTAs */
    --soft-red: #EF476F;      /* Soft Red — accent · pull quotes */
    --energy-blue: #118AB2;   /* Energy Blue — support · tags · cool moments */
    --deep-blue: #073B4C;     /* Deep Blue — primary ink · type · lines */
    --cream: #FFF9F0;         /* Cream — background · breathing room (55%) */
    --cream-soft: #F4EFE3;    /* derived — for reverse surfaces on logos */
    --ink: #073B4C;
    --muted: #4a5c66;         /* deep-blue tint for secondary body copy */
    --hairline: rgba(7, 59, 76, 0.12);
    --dashed: rgba(7, 59, 76, 0.25); /* "dashed rules" per §13 */
    --shadow-sm: 4px 4px 0px var(--deep-blue);
    --shadow-md: 6px 6px 0px var(--deep-blue);
    --radius-blob: 255px 15px 225px 15px / 15px 225px 15px 255px;
    --radius-blob-rev: 15px 225px 15px 255px / 225px 15px 255px 15px;
    --font-head: 'Fredoka', 'Fredoka Fallback', sans-serif;
    --font-body: 'Nunito', 'Nunito Fallback', sans-serif;
    --font-scribble: 'Patrick Hand', 'Patrick Hand Fallback', cursive;
    --container: 1200px;
}

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

::selection {
    background: var(--sun-yellow);
    color: var(--ink);
}

body {
    background-color: var(--cream);
    color: var(--ink);
    font-family: var(--font-body);
    line-height: 1.55;
    overflow-x: hidden;
    position: relative;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Subtle paper grain — overlays everything */
body::after {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999;
    opacity: 0.05;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: inherit;
}

/* ---------- Typography ---------- */
h1, h2, h3, h4 {
    font-family: var(--font-head);
    font-weight: 600;
    line-height: 1.1;
    color: var(--ink);
}

h1 { font-size: clamp(2.4rem, 5.5vw, 4.5rem); letter-spacing: -0.02em; }
h2 { font-size: clamp(1.9rem, 3.5vw, 2.8rem); letter-spacing: -0.015em; }
h3 { font-size: clamp(1.2rem, 2vw, 1.4rem); }

p { line-height: 1.55; }

/* Dashed rule — per §13 "dashed hairlines separate sections" */
.dashed-rule {
    border: 0;
    border-top: 2px dashed var(--dashed);
    max-width: 1100px;
    margin: 0 auto;
}

.scribble-text {
    font-family: var(--font-scribble);
    color: var(--pop-orange);
}

.highlight {
    color: var(--soft-red);
    position: relative;
    display: inline-block;
}

.highlight::before {
    content: '';
    position: absolute;
    top: -10%;
    left: -5%;
    width: 110%;
    height: 120%;
    border: 3px solid var(--energy-blue);
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
    z-index: 2;
    pointer-events: none;
    transform: rotate(-2deg);
    animation: blob-wobble 4s infinite ease-in-out;
}

/* ---------- Buttons ---------- */
.btn {
    display: inline-block;
    padding: 14px 32px;
    font-family: var(--font-head);
    font-size: 1.1rem;
    font-weight: 600;
    text-decoration: none;
    border: 2px solid var(--deep-blue);
    border-radius: var(--radius-blob);
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.2s ease, color 0.2s ease;
    background: var(--pop-orange);
    color: #fff;
    box-shadow: var(--shadow-sm);
    text-align: center;
    line-height: 1.2;
}

.btn:hover {
    transform: translate(-2px, -2px);
    box-shadow: var(--shadow-md);
    background: var(--sun-yellow);
    color: var(--deep-blue);
}

.btn-secondary {
    background: var(--cream);
    color: var(--deep-blue);
}

.btn-secondary:hover {
    background: var(--energy-blue);
    color: #fff;
}

.btn-ghost {
    background: transparent;
    color: var(--deep-blue);
    box-shadow: none;
    border-color: var(--deep-blue);
    border-radius: 50px;
    padding: 10px 22px;
    font-size: 1rem;
}

.btn-ghost:hover {
    background: var(--deep-blue);
    color: var(--cream);
    transform: none;
    box-shadow: none;
}

/* Used by old templates — preserved as alias */
.cta-button { /* same look as .btn */
    display: inline-block;
    padding: 15px 40px;
    background: var(--pop-orange);
    color: #fff;
    font-size: 1.2rem;
    font-weight: 700;
    text-decoration: none;
    border-radius: var(--radius-blob);
    border: 2px solid var(--deep-blue);
    box-shadow: var(--shadow-sm);
    transition: all 0.2s ease;
    font-family: var(--font-head);
}

.cta-button:hover {
    transform: translate(-2px, -2px);
    box-shadow: var(--shadow-md);
    background: var(--sun-yellow);
    color: var(--deep-blue);
}

/* ---------- Header ---------- */
header.site-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 5%;
    position: sticky;
    top: 0;
    background: rgba(255, 249, 240, 0.92);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 100;
    overflow: visible;
    border-bottom: 1px solid var(--hairline);
    transition: padding .35s cubic-bezier(.4, 0, .2, 1),
                box-shadow .35s ease,
                background-color .35s ease;
}

header.site-header.is-scrolled {
    padding-top: 10px;
    padding-bottom: 10px;
    background: rgba(255, 249, 240, 0.96);
    box-shadow: 0 6px 20px rgba(7, 59, 76, 0.08);
}

.logo {
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0;
    min-width: 0;
}

.logo-droplet,
.logo-letters {
    display: block;
    height: 36px;
    width: auto;
    will-change: transform, max-width, opacity;
}

.logo-droplet {
    flex-shrink: 0;
    transition: transform .35s cubic-bezier(.4, 0, .2, 1);
}

.logo-letters {
    max-width: 220px;
    opacity: 1;
    transform: translateX(0);
    transform-origin: left center;
    /* Easing: in-out for a calm condense, quicker fade than geometry */
    transition:
        max-width   .42s cubic-bezier(.4, 0, .2, 1),
        opacity     .22s ease,
        transform   .42s cubic-bezier(.4, 0, .2, 1),
        margin-left .42s cubic-bezier(.4, 0, .2, 1);
}

/* When page has scrolled, collapse the wordmark into the droplet. */
header.site-header.is-scrolled .logo-letters {
    max-width: 0;
    opacity: 0;
    transform: translateX(-8px);
    margin-left: 0;
}

header.site-header.is-scrolled .logo-droplet {
    transform: scale(1.05);
}

.logo:hover .logo-droplet {
    transform: scale(1.12) rotate(-8deg);
}

@media (max-width: 540px) {
    .logo-droplet,
    .logo-letters { height: 30px; }
    .logo-letters { max-width: 160px; }
}

@media (prefers-reduced-motion: reduce) {
    .logo-droplet,
    .logo-letters { transition: none; }
}

/* The header is space-between across logo / nav / CTA, so a fixed-gap nav sat
   as a tight cluster in the middle with dead space either side (client, Sep 9:
   "buttons could be more spread out"). Letting the nav claim the space between
   logo and CTA and distributing the links across it spreads them without
   touching either neighbour. The gap floor keeps all six on one line at 901px,
   just above the breakpoint where the nav is replaced by the hamburger. */
nav.primary-nav ul {
    display: flex;
    gap: 28px;
    list-style: none;
    align-items: center;
}

/* Client, Sep 9: "buttons could be more spread out". The header is
   space-between across logo / nav / CTA, so a content-sized nav sits as a tight
   cluster in the middle with dead space either side. Letting the nav claim the
   middle and distributing the links across it fixes that — but only where there
   is room to spare. Between 901px (where the hamburger takes over) and 1100px
   the six labels (~368px) all but fill the available nav, and spreading them
   left them 1px off the logo and the CTA. Above 1100px there is 150px+ of slack
   to distribute, which is the case the client was looking at. */
@media (min-width: 1100px) {
    nav.primary-nav { flex: 1 1 auto; min-width: 0; }
    nav.primary-nav ul {
        width: 100%;
        justify-content: space-evenly;
        gap: 18px;
    }
}

nav.primary-nav a {
    text-decoration: none;
    color: var(--deep-blue);
    font-weight: 700;
    font-size: 0.98rem;
    position: relative;
    transition: color 0.2s ease;
}

nav.primary-nav a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -7px;
    width: 100%;
    height: 6px;
    background-color: var(--soft-red);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 7' preserveAspectRatio='none'%3E%3Cpath d='M0 3.5 Q5 1 10 3.5 Q15 6 20 3.5 Q25 1 30 3.5 Q35 6 40 3.5 Q45 1 50 3.5 Q55 6 60 3.5 Q65 1 70 3.5 Q75 6 80 3.5 Q85 1 90 3.5 Q95 6 100 3.5' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 7' preserveAspectRatio='none'%3E%3Cpath d='M0 3.5 Q5 1 10 3.5 Q15 6 20 3.5 Q25 1 30 3.5 Q35 6 40 3.5 Q45 1 50 3.5 Q55 6 60 3.5 Q65 1 70 3.5 Q75 6 80 3.5 Q85 1 90 3.5 Q95 6 100 3.5' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    clip-path: inset(0 0 0 100%);
    transition: clip-path 0.25s ease;
}

nav.primary-nav a:hover { color: var(--soft-red); }
nav.primary-nav a:hover::after,
nav.primary-nav a[aria-current="page"]::after {
    clip-path: inset(0 0 0 0);
}

nav.primary-nav a[aria-current="page"] { color: var(--soft-red); }

/* --- Nav letter roll (built by app.js) ---
   The stack is two copies of the glyph; hovering slides it up by exactly half
   its own height so copy two lands where copy one was. Heights are in `em` so
   the cells track the link's font-size.
   What keeps the link box the same height as the plain text it replaced (and so
   stops the squiggle underline at `bottom: -7px` from being dragged down) is
   that EVERY child of .nav-roll is 1.25em tall — 1.25em < the nav's own
   line-height, so the inline-flex box never outgrows the line box it sits in.
   That is why .nav-roll-sp is given an explicit height below: as a bare
   inline-block it took a full line box (1.55em), which made the roll taller
   than its cells and pushed "Our Story" ~1px out of line with its neighbours.
   (Do not reach for `vertical-align` on .rl to fix alignment here — .rl is a
   flex item of .nav-roll, where vertical-align has no effect at all.) */
.nav-roll { display: inline-flex; align-items: flex-end; }
.nav-roll .rl {
    display: inline-block;
    overflow: hidden;
    height: 1.25em;
}
.nav-roll .rl-in {
    display: block;
    transition: transform 0.4s cubic-bezier(0.2, 0.9, 0.3, 1);
    transition-delay: calc(var(--i, 0) * 24ms);
}
.nav-roll .rl-c {
    display: block;
    height: 1.25em;
    line-height: 1.25;
}
/* Same height as a .rl cell, so a link containing a space keeps the same roll
   height (and therefore the same baseline) as one that doesn't — see above. */
.nav-roll-sp { display: inline-block; height: 1.25em; }

nav.primary-nav a:hover .rl-in,
nav.primary-nav a:focus-visible .rl-in { transform: translateY(-50%); }

@media (prefers-reduced-motion: reduce) {
    .nav-roll .rl-in { transition: none; }
    nav.primary-nav a:hover .rl-in,
    nav.primary-nav a:focus-visible .rl-in { transform: none; }
}

/* Nav hover hints — little scribble tooltip below the squiggly underline */
nav.primary-nav {
    overflow: visible;
}

nav.primary-nav a .nav-hint {
    position: absolute;
    left: 50%;
    top: calc(100% + 10px);
    transform: translateX(-50%) translateY(5px) rotate(-2deg);
    font-family: var(--font-scribble);
    font-size: 0.82rem;
    line-height: 1.2;
    color: var(--deep-blue);
    background: var(--sun-yellow);
    padding: 3px 10px;
    border-radius: 6px;
    border: 2px solid var(--deep-blue);
    box-shadow: 2px 2px 0 var(--deep-blue);
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
        opacity 0.2s ease,
        transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1),
        visibility 0s linear 0.2s;
    z-index: 110;
}

@media (hover: hover) and (pointer: fine) {
    nav.primary-nav a.is-nav-hint-visible .nav-hint {
        opacity: 1;
        visibility: visible;
        transform: translateX(-50%) translateY(0) rotate(-1deg);
        transition:
            opacity 0.2s ease,
            transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1),
            visibility 0s linear 0s;
    }
}

@media (prefers-reduced-motion: reduce) {
    nav.primary-nav a .nav-hint {
        transition: opacity 0.15s ease, visibility 0s linear 0.15s;
        transform: translateX(-50%);
    }
    nav.primary-nav a.is-nav-hint-visible .nav-hint {
        transition: opacity 0.15s ease, visibility 0s linear 0s;
        transform: translateX(-50%);
    }
}

.cart-btn {
    background: var(--deep-blue);
    color: #fff;
    padding: 10px 22px;
    border-radius: 50px;
    border: none;
    cursor: pointer;
    font-family: var(--font-head);
    font-size: 0.95rem;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: transform 0.2s ease, background 0.2s ease;
}

.cart-btn:hover {
    transform: scale(1.05) rotate(-2deg);
    background: var(--pop-orange);
}

/* ---------- Hamburger / Mobile menu ---------- */
.hamburger {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    background: none;
    border: none;
    -webkit-appearance: none;
    appearance: none;
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;
    padding: 8px;
    z-index: 101;
}

.hamburger span {
    display: block;
    flex-shrink: 0;
    width: 26px;
    height: 3px;
    line-height: 0;
    background: var(--deep-blue);
    border-radius: 3px;
    transition: all 0.3s ease;
}

.mobile-menu-overlay {
    position: fixed;
    inset: 0;
    background: rgba(7, 59, 76, 0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 10001;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease;
}

.mobile-menu-overlay.visible {
    opacity: 1;
    pointer-events: all;
}

.mobile-menu-card {
    background: var(--cream);
    border-radius: 24px;
    padding: 50px 40px 40px;
    max-width: 360px;
    width: 88%;
    position: relative;
    box-shadow: 0 30px 80px rgba(7, 59, 76, 0.3), 0 0 0 3px var(--pop-orange);
    transform: translateY(30px) scale(0.96);
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    text-align: center;
}

.mobile-menu-overlay.visible .mobile-menu-card {
    transform: translateY(0) scale(1);
}

.mobile-menu-close {
    position: absolute;
    top: 14px;
    right: 18px;
    background: none;
    border: none;
    font-size: 1.8rem;
    cursor: pointer;
    color: #aaa;
    transition: color 0.2s, transform 0.2s;
}

.mobile-menu-close:hover {
    color: var(--soft-red);
    transform: scale(1.2) rotate(15deg);
}

.mobile-nav {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.mobile-nav a {
    font-family: var(--font-head);
    font-size: 1.3rem;
    color: var(--deep-blue);
    text-decoration: none;
    padding: 12px 8px;
    border-radius: 12px;
    transition: background 0.2s, color 0.2s, transform 0.15s;
}

.mobile-nav a:hover {
    background: rgba(255, 107, 53, 0.1);
    color: var(--pop-orange);
    transform: translateX(4px);
}

.mobile-nav .mobile-cta {
    margin-top: 14px;
    background: var(--pop-orange);
    color: #fff;
    border-radius: 14px;
    padding: 14px 8px;
    font-weight: 700;
    transition: background 0.2s, transform 0.15s;
}

.mobile-nav .mobile-cta:hover {
    background: var(--soft-red);
    color: #fff;
    transform: scale(1.03);
}

/* ---------- Page hero (sub-pages) ---------- */
.page-hero {
    padding: 70px 5% 50px;
    text-align: center;
    background: radial-gradient(circle at 50% 30%, rgba(255, 209, 102, 0.35), transparent 65%);
    position: relative;
}

.page-hero .eyebrow {
    font-family: var(--font-scribble);
    color: var(--pop-orange);
    font-size: 1.25rem;
    margin-bottom: 8px;
    display: inline-block;
}

.page-hero h1 {
    margin-bottom: 16px;
}

.page-hero h1 span { color: var(--pop-orange); }

.page-hero p {
    font-size: 1.1rem;
    color: var(--muted);
    max-width: 600px;
    margin: 0 auto;
}

/* ---------- Footer ---------- */
footer.site-footer {
    background: var(--deep-blue);
    color: var(--cream);
    padding: 64px 5% 32px;
    text-align: center;
    position: relative;
    /* No overflow:hidden. The .fm-card reveals (footer wordmark hover) pop up
       from bottom:106% of .footer-lockup-wrap, which needs ~140px of headroom
       above the wordmark -- more than the footer's own top padding (64px)
       provides -- so with overflow:hidden here they were clipped flat at the
       footer's own top edge, reading as "tucked under" whatever section sits
       above. The ::before wave decoration below is fully self-contained
       (its 1px of overhang sits where the wave mask is transparent anyway).
       Horizontally the cards stay well inside the viewport at every width
       measured (390-1400px): they're 88px wide and sit at 31-91.4% of a wrap
       that is itself capped at min(595px, 78vw). (The home page used to
       scroll sideways because of the rotated .ticker--tilt marquee, which
       body's overflow-x:hidden did not suppress; its wrapper now clips it,
       see .ticker--tilt.) Same category of bug as .flavor's overflow:hidden fighting the
       mega-pan's sticky camera earlier in this file's history -- an ancestor
       clip silently eating content the design means to let escape.
    */
}

footer.site-footer::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 0;
    width: 100%;
    height: 24px;
    background: var(--cream);
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 24' preserveAspectRatio='none'><path d='M0,0 Q60,24 120,12 T240,12 T360,12 T480,12 T600,12 T720,12 T840,12 T960,12 T1080,12 T1200,12 L1200,24 L0,24 Z' fill='black'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 24' preserveAspectRatio='none'><path d='M0,0 Q60,24 120,12 T240,12 T360,12 T480,12 T600,12 T720,12 T840,12 T960,12 T1080,12 T1200,12 L1200,24 L0,24 Z' fill='black'/></svg>");
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

footer.site-footer .footer-inner {
    max-width: var(--container);
    margin: 0 auto;
}

footer.site-footer .footer-brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
    text-decoration: none;
    color: var(--cream);
}

footer.site-footer .footer-brand img {
    height: 40px;
    width: auto;
    max-width: 220px;
    opacity: 1;
}

footer.site-footer .footer-tag {
    color: rgba(255, 249, 240, 0.85);
    margin-bottom: 24px;
    font-size: 0.95rem;
}

footer.site-footer nav {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px 28px;
    margin: 22px 0 26px;
}

footer.site-footer nav a {
    color: var(--cream);
    opacity: 0.85;
    text-decoration: none;
    font-family: var(--font-head);
    font-size: 0.95rem;
    padding: 6px 4px;
    transition: opacity 0.2s ease, color 0.2s ease;
}

footer.site-footer nav a:hover {
    opacity: 1;
    color: var(--sun-yellow);
}

footer.site-footer .legal {
    font-size: 0.78rem;
    opacity: 0.65;
    margin-top: 16px;
}

footer.site-footer .socials {
    display: flex;
    justify-content: center;
    gap: 14px;
    margin-bottom: 6px;
}

footer.site-footer .socials a {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 2px solid rgba(255, 249, 240, 0.4);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--cream);
    text-decoration: none;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

footer.site-footer .socials a:hover {
    background: var(--pop-orange);
    border-color: var(--pop-orange);
    transform: translateY(-3px) rotate(-6deg);
}

footer.site-footer .socials svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

/* ---------- Hot Mess Club full-screen popup ---------- */
.hmc-overlay {
    position: fixed;
    inset: 0;
    background: var(--deep-blue);
    background-image:
        radial-gradient(circle at 20% 20%, rgba(255,107,53,0.15) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(255,209,102,0.12) 0%, transparent 50%);
    z-index: 10000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px 20px 80px;
    overflow-y: auto;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
}

.hmc-overlay.visible {
    opacity: 1;
    pointer-events: all;
}

.hmc-close {
    position: fixed;
    top: 20px;
    right: 24px;
    background: none;
    border: none;
    font-size: 2rem;
    line-height: 1;
    color: rgba(255,255,255,0.45);
    cursor: pointer;
    transition: color 0.2s;
    z-index: 1;
}
.hmc-close:hover { color: #fff; }

.hmc-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
    max-width: 480px;
}

.hmc-eyebrow {
    font-family: var(--font-scribble);
    color: var(--sun-yellow);
    font-size: 1rem;
    margin-bottom: 6px;
}

.hmc-title {
    font-family: var(--font-head);
    font-size: clamp(1.8rem, 5vw, 2.8rem);
    color: #fff;
    line-height: 1.1;
    margin-bottom: 8px;
}
.hmc-title span { color: var(--pop-orange); }

.hmc-desc {
    color: rgba(255,255,255,0.65);
    font-size: 1rem;
    margin-bottom: 24px;
    line-height: 1.5;
}

.hmc-card-wrap {
    position: relative;
    width: min(100%, 300px);
    aspect-ratio: 5 / 7;
    border-radius: 16px;
    overflow: hidden;
    border: 3px solid rgba(255,255,255,0.2);
    box-shadow: 0 20px 60px rgba(0,0,0,0.4), 6px 6px 0 var(--pop-orange);
    margin-bottom: 20px;
    cursor: var(--sooz-cursor-drop, pointer);
    flex-shrink: 0;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

.hmc-card-wrap.hmc-card-wrap--revealed {
    cursor: default;
}

.hmc-card-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.hmc-number-overlay {
    position: absolute;
    bottom: 14px;
    left: 14px;
    font-family: var(--font-head);
    font-size: 1.5rem;
    color: #fff;
    text-shadow: 2px 2px 8px rgba(0,0,0,0.6);
    z-index: 2;
    pointer-events: none;
}
.hmc-number-overlay.revealed {
    animation: hmc-num-pop 0.5s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes hmc-num-pop {
    0%   { transform: scale(0.6); opacity: 0; }
    100% { transform: scale(1);   opacity: 1; }
}

.hmc-scratch-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    touch-action: none;
    cursor: inherit;
}

.hmc-claim-btn {
    display: none;
    background: var(--pop-orange);
    color: #fff;
    border: none;
    border-radius: 14px;
    font-family: var(--font-head);
    font-size: 1.1rem;
    padding: 14px 32px;
    cursor: pointer;
    box-shadow: 4px 4px 0 rgba(255,255,255,0.2);
    transition: transform 0.2s, background 0.2s;
    margin-bottom: 16px;
}
.hmc-claim-btn.visible { display: block; }
.hmc-claim-btn:hover { background: var(--soft-red); transform: translateY(-2px); }

.hmc-claim-form {
    display: none;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    max-width: 340px;
    margin-bottom: 16px;
}
.hmc-claim-form.visible { display: flex; }

.hmc-form-error {
    color: var(--sun-yellow);
    font-size: 0.88rem;
    min-height: 1.2em;
    margin: 0;
}

.hmc-email-label {
    font-family: var(--font-head);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--sun-yellow);
    text-align: center;
    width: 100%;
}

.hmc-claim-form input[type="email"] {
    padding: 14px 18px;
    border-radius: 12px;
    border: 2px solid rgba(255,255,255,0.25);
    background: rgba(255,255,255,0.08);
    color: #fff;
    font-family: var(--font-body);
    font-size: 1rem;
    outline: none;
    transition: border-color 0.2s;
}
.hmc-claim-form input[type="email"]::placeholder { color: rgba(255,255,255,0.4); }
.hmc-claim-form input[type="email"]:focus { border-color: var(--pop-orange); }

.hmc-claim-form button[type="submit"] {
    padding: 14px;
    background: var(--pop-orange);
    color: #fff;
    border: none;
    border-radius: 12px;
    font-family: var(--font-head);
    font-size: 1.1rem;
    cursor: pointer;
    transition: background 0.2s;
}
.hmc-claim-form button[type="submit"]:disabled { opacity: 0.6; cursor: not-allowed; }
.hmc-claim-form button[type="submit"]:not(:disabled):hover { background: var(--soft-red); }

.hmc-action-row {
    display: none;
    gap: 12px;
    margin-bottom: 16px;
}
.hmc-action-row.visible { display: flex; }

.hmc-action-btn {
    padding: 10px 22px;
    background: rgba(255,255,255,0.1);
    color: #fff;
    border: 2px solid rgba(255,255,255,0.25);
    border-radius: 12px;
    font-family: var(--font-head);
    font-size: 1rem;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
}
.hmc-action-btn:hover { background: rgba(255,255,255,0.2); border-color: rgba(255,255,255,0.45); }

.hmc-skip {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    background: none;
    border: none;
    color: rgba(255,255,255,0.28);
    font-family: var(--font-body);
    font-size: 0.76rem;
    cursor: pointer;
    text-decoration: underline dotted;
    transition: color 0.2s;
    white-space: nowrap;
}
.hmc-skip:hover { color: rgba(255,255,255,0.55); }

/* ---------- Popup quiz (A/B test version B) ----------
   Rides on the .hmc-* shell above; only the screens and answers are new. */
.quiz-screen {
    display: none;
    flex-direction: column;
    align-items: center;
    width: 100%;
}
.quiz-screen.is-active {
    display: flex;
    animation: quiz-screen-in 0.35s ease both;
}
@keyframes quiz-screen-in {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .quiz-screen.is-active { animation: none; }
}

.quiz-progress {
    font-family: var(--font-scribble);
    color: var(--sun-yellow);
    font-size: 1rem;
    margin-bottom: 6px;
}
.quiz-question .hmc-title { margin-bottom: 24px; }

.quiz-answers {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    max-width: 380px;
}
.quiz-answer {
    padding: 15px 18px;
    background: rgba(255,255,255,0.08);
    color: #fff;
    border: 2px solid rgba(255,255,255,0.25);
    border-radius: 14px;
    font-family: var(--font-head);
    font-size: 1.08rem;
    line-height: 1.25;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, transform 0.2s;
}
.quiz-answer:hover,
.quiz-answer:focus-visible {
    background: rgba(255,107,53,0.22);
    border-color: var(--pop-orange);
    transform: translateY(-2px);
}

/* results wait hidden until app.js moves the winner into the slot */
.quiz-result { display: none; }
.quiz-result-slot .quiz-result { display: block; }

.quiz-member {
    font-family: var(--font-head);
    color: var(--sun-yellow);
    font-size: 1.1rem;
    margin: 0 0 20px;
}

.quiz-overlay.is-done .hmc-skip { display: none; }

/* ---------- Newsletter strip (used on multiple pages) ---------- */
.newsletter {
    background: var(--soft-red);
    color: #fff;
    padding: 96px 5% 80px;
    text-align: center;
    position: relative;
    clip-path: polygon(0 0, 100% 5%, 100% 100%, 0 100%);
    margin-top: -40px;
}
/* Section setting `top_edge: straight` — for pages where the section follows a
   straight strip (e.g. the hot ticker on the blog): no tuck-under, no slant. */
.newsletter--straight {
    clip-path: none;
    margin-top: 0;
}
/* Section setting `variant: simple` — the sub-pages' strip. home.css (loaded
   by any home section on the page) restyles .newsletter for the club band;
   these win on specificity and restore the origin sub-page look. */
.newsletter.newsletter--simple {
    background: var(--soft-red);
    color: #fff;
    padding: 96px 5% 80px;
    overflow: visible;
}
.newsletter.newsletter--simple h2 { color: #fff; }
.newsletter.newsletter--simple .newsletter-content > p { color: rgba(255, 255, 255, 0.9); }

.newsletter-content {
    max-width: 600px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

.newsletter h2 {
    color: #fff;
    font-size: clamp(1.9rem, 3.2vw, 2.6rem);
    margin-bottom: 10px;
}

.newsletter p { color: #fff; opacity: 0.95; }

.newsletter-form {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 28px;
}

.newsletter input {
    padding: 15px 25px;
    border-radius: var(--radius-blob);
    border: 3px solid var(--deep-blue);
    flex: 1;
    min-width: 240px;
    max-width: 340px;
    font-family: var(--font-body);
    font-size: 1rem;
    outline: none;
    color: var(--deep-blue);
    background: #fff;
}

.newsletter input:focus { border-color: var(--sun-yellow); }

.newsletter button {
    padding: 15px 30px;
    background: var(--sun-yellow);
    color: var(--deep-blue);
    font-weight: 700;
    border: 3px solid var(--deep-blue);
    border-radius: var(--radius-blob-rev);
    cursor: pointer;
    font-family: var(--font-head);
    font-size: 1.1rem;
    box-shadow: var(--shadow-sm);
    transition: all 0.2s ease;
}

.newsletter button:hover {
    transform: translate(-2px, -2px);
    box-shadow: var(--shadow-md);
    background: #fff;
}

/* ---------- Section wrappers ---------- */
.section {
    padding: 80px 5%;
}

.section-tight {
    padding: 56px 5%;
}

.container {
    max-width: var(--container);
    margin: 0 auto;
}

.section-title {
    text-align: center;
    font-size: clamp(2rem, 3.5vw, 2.6rem);
    margin-bottom: 14px;
    color: var(--deep-blue);
}

.section-sub {
    text-align: center;
    color: var(--muted);
    max-width: 620px;
    margin: 0 auto 48px;
    font-size: 1.05rem;
}

/* ---------- Animations ---------- */
@keyframes float {
    0%   { transform: translateY(0px) rotate(0deg); }
    50%  { transform: translateY(-20px) rotate(2deg); }
    100% { transform: translateY(0px) rotate(0deg); }
}

@keyframes blob-wobble {
    0%   { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
    50%  { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; }
    100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
}

@keyframes tilt-wobble {
    0%, 100% { transform: rotate(-5deg); }
    50%      { transform: rotate(5deg); }
}

@keyframes pop-in {
    from { transform: scale(0); }
    to   { transform: scale(1); }
}

@keyframes flame-flicker {
    0%, 100% { transform: scale(1)   rotate(-2deg); opacity: 0.9; }
    50%      { transform: scale(1.08) rotate(3deg);  opacity: 1;   }
}

@keyframes drift {
    0%   { transform: translate(0, 0) rotate(0deg);   opacity: 0; }
    20%  { opacity: 0.85; }
    100% { transform: translate(var(--dx, 30px), var(--dy, -120px)) rotate(var(--rot, 25deg)); opacity: 0; }
}

@keyframes spin-slow {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

@keyframes shimmer {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-6px); }
}

/* ---------- Reveal-on-scroll ---------- */
.reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ---------- Tags / badges ---------- */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--sun-yellow);
    color: var(--deep-blue);
    font-family: var(--font-scribble);
    font-size: 0.95rem;
    padding: 4px 14px;
    border-radius: 20px;
    transform: rotate(-1.5deg);
}

.badge-blue { background: var(--energy-blue); color: #fff; }
.badge-red  { background: var(--soft-red);    color: #fff; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
    nav.primary-nav { display: none; }
    .hamburger { display: flex; }
    .cart-btn { display: none; }
}

@media (max-width: 768px) {
    .section { padding: 60px 5%; }
    .newsletter { clip-path: none; margin-top: 0; padding: 70px 5%; }
}

@media (max-width: 540px) {
    header.site-header { padding: 14px 5%; }
    .page-hero { padding: 50px 5% 40px; }
}

/* Hero entrance — staggered fade-up on page load */
@keyframes hero-rise {
    from { opacity: 0; transform: translateY(28px); }
    to   { opacity: 1; transform: translateY(0); }
}
.hero-text .scribble-text { animation: hero-rise 0.55s cubic-bezier(0.22, 1, 0.36, 1) both; animation-delay: 0.08s; }
.hero-text h1             { animation: hero-rise 0.65s cubic-bezier(0.22, 1, 0.36, 1) both; animation-delay: 0.2s; }
.hero-text .lead          { animation: hero-rise 0.65s cubic-bezier(0.22, 1, 0.36, 1) both; animation-delay: 0.34s; }
.hero-text .hero-cta-row  { animation: hero-rise 0.65s cubic-bezier(0.22, 1, 0.36, 1) both; animation-delay: 0.46s; }
.hero-text .hero-meta     { animation: hero-rise 0.65s cubic-bezier(0.22, 1, 0.36, 1) both; animation-delay: 0.58s; }
.hero-image               { animation: hero-rise 0.9s  cubic-bezier(0.22, 1, 0.36, 1) both; animation-delay: 0.12s; }

/* Section title orange accent underline */
.section-title::after {
    content: '';
    display: block;
    width: 40px;
    height: 3px;
    background: var(--pop-orange);
    border-radius: 3px;
    margin: 10px auto 0;
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ========================================
   Referee banner
   ======================================== */
.ref-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9000;
    background: var(--pop-orange);
    color: var(--cream);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 10px 20px;
    font-family: var(--font-head);
    font-size: 1rem;
    font-weight: 600;
    transform: translateY(-100%);
    transition: transform 0.35s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.ref-banner.visible {
    transform: translateY(0);
}
.ref-banner-close {
    background: none;
    border: none;
    color: inherit;
    font-size: 1.2rem;
    cursor: pointer;
    padding: 0 4px;
    opacity: 0.75;
    line-height: 1;
    margin-left: 8px;
}
.ref-banner-close:hover {
    opacity: 1;
}

/* ========================================
   Referral popup
   ======================================== */
.ref-overlay {
    position: fixed;
    inset: 0;
    background: rgba(7, 59, 76, 0.72);
    z-index: 10500;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}
.ref-overlay.visible {
    opacity: 1;
    pointer-events: all;
}
.ref-content {
    background: var(--cream);
    border-radius: 20px;
    box-shadow: var(--shadow-md);
    border: 2.5px solid var(--deep-blue);
    padding: 36px 32px 28px;
    max-width: 440px;
    width: 100%;
    text-align: center;
    position: relative;
}
.ref-close {
    position: absolute;
    top: 14px;
    right: 16px;
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--ink);
    opacity: 0.55;
    line-height: 1;
    padding: 4px;
}
.ref-close:hover { opacity: 1; }
.ref-eyebrow {
    font-family: var(--font-scribble);
    font-size: 0.95rem;
    color: var(--pop-orange);
    margin: 0 0 6px;
}
.ref-title {
    font-family: var(--font-head);
    font-size: 1.8rem;
    color: var(--deep-blue);
    margin: 0 0 8px;
    line-height: 1.15;
}
.ref-title span {
    color: var(--pop-orange);
}
.ref-desc {
    font-size: 0.95rem;
    color: var(--muted);
    margin: 0 0 20px;
}
.ref-skip {
    margin-top: 16px;
    background: none;
    border: none;
    font-family: var(--font-body);
    font-size: 0.82rem;
    color: rgba(255,249,240,0.55);
    cursor: pointer;
    text-decoration: underline;
}
.ref-skip:hover { color: var(--cream); }

/* State 1: has link */
.ref-state-link {
    display: none;
}
.ref-state-link.visible {
    display: block;
}
.ref-link-label {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0 0 8px;
}
.ref-link-box {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border: 2px solid var(--deep-blue);
    border-radius: 10px;
    padding: 10px 12px;
    margin: 0 0 12px;
}
.ref-link-text {
    flex: 1;
    font-size: 0.8rem;
    color: var(--deep-blue);
    word-break: break-all;
    text-align: left;
    font-family: var(--font-body);
}
.ref-copy-btn {
    background: var(--deep-blue);
    color: var(--cream);
    border: none;
    border-radius: 7px;
    padding: 6px 14px;
    font-family: var(--font-head);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
}
.ref-copy-btn:hover {
    background: var(--pop-orange);
}
.ref-count {
    font-size: 0.9rem;
    color: var(--muted);
    margin: 0 0 8px;
}
.ref-leaderboard-link {
    display: inline-block;
    font-family: var(--font-head);
    font-size: 0.9rem;
    color: var(--pop-orange);
    margin: 0 0 16px;
}
.ref-name-form {
    border-top: 1px dashed var(--hairline);
    padding-top: 16px;
    margin-top: 8px;
}
.ref-name-label {
    font-size: 0.82rem;
    color: var(--muted);
    margin: 0 0 8px;
}
.ref-name-form input[type="text"] {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 14px;
    border: 2px solid var(--hairline);
    border-radius: 10px;
    font-family: var(--font-body);
    font-size: 0.95rem;
    margin-bottom: 8px;
    color: var(--ink);
    background: #fff;
}
.ref-name-form input[type="text"]:focus {
    outline: none;
    border-color: var(--pop-orange);
}
.ref-name-form button[type="submit"] {
    background: var(--pop-orange);
    color: #fff;
    border: 2px solid var(--deep-blue);
    border-radius: 10px;
    padding: 8px 20px;
    font-family: var(--font-head);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
}

/* State 2: email form */
.ref-state-form {
    display: none;
}
.ref-state-form.visible {
    display: block;
}
.ref-form-desc {
    font-size: 0.9rem;
    color: var(--muted);
    margin: 0 0 14px;
}
.ref-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.ref-form-error {
    font-size: 0.85rem;
    color: var(--soft-red);
    min-height: 1.2em;
    margin: 0;
}
.ref-form input {
    padding: 12px 14px;
    border: 2px solid var(--deep-blue);
    border-radius: 10px;
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: var(--ink);
    background: #fff;
    box-sizing: border-box;
}
.ref-form input:focus {
    outline: none;
    border-color: var(--pop-orange);
}
.ref-form button[type="submit"] {
    background: var(--pop-orange);
    color: #fff;
    border: 2.5px solid var(--deep-blue);
    border-radius: 10px;
    padding: 13px;
    font-family: var(--font-head);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: background 0.2s;
}
.ref-form button[type="submit"]:hover:not(:disabled) {
    background: var(--deep-blue);
}
.ref-form button[type="submit"]:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

@media (max-width: 480px) {
    .ref-content {
        padding: 28px 20px 22px;
    }
    .ref-title {
        font-size: 1.5rem;
    }
}

/* ==========================================================================
   Ambient spice meter — "the longer you stay, the hotter it gets"
   DOM is injected by app.js (purely decorative; pages stay static HTML).
   JS writes data-spice on <body> (cool → warm → hot → inferno → max) and
   inline clip-path / opacity / --fab-scale values each tick; everything
   else below reacts to those.
   ========================================================================== */

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

/* --- Site-wide heat wash (opacity driven by JS, 0 → ~0.85) --- */
.heat-overlay {
    position: fixed;
    inset: 0;
    z-index: 900;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.5s linear;
    background:
        radial-gradient(ellipse at 50% 120%, rgba(239, 71, 111, 0.20), transparent 60%),
        radial-gradient(ellipse at 110% 50%, rgba(255, 107, 53, 0.26), transparent 55%),
        radial-gradient(ellipse at 50% 50%, transparent 45%, rgba(255, 107, 53, 0.15) 100%),
        linear-gradient(0deg, rgba(255, 107, 53, 0.07), rgba(255, 209, 102, 0.05));
}

/* Red alarm layer: pulses at max (0.7Hz, well under flash-safety limits) */
.heat-overlay-flash {
    position: fixed;
    inset: 0;
    z-index: 901;
    pointer-events: none;
    opacity: 0;
    background: radial-gradient(ellipse at center, rgba(239, 71, 111, 0.10), rgba(239, 71, 111, 0.28));
}
body[data-spice="max"] .heat-overlay-flash {
    opacity: 0.16; /* static fallback when animations are disabled */
    animation: spice-flash 1.4s ease-in-out infinite;
}

/* Blue relief wash when sipping */
.cool-wash {
    position: fixed;
    inset: 0;
    z-index: 902;
    pointer-events: none;
    opacity: 0;
    background: radial-gradient(circle at 82% 80%, rgba(17, 138, 178, 0.30), transparent 55%);
}
body.is-sipping .cool-wash { animation: spice-cool-wash 1.3s ease-out both; }

/* --- The meter rig (right edge, vertically centered) --- */
.spice-rig {
    position: fixed;
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
    z-index: 950;
    height: min(74vh, 720px);
    width: 34px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    pointer-events: none;
    opacity: 1;
    transition: opacity 0.3s ease, transform 0.5s cubic-bezier(0.6, 0, 0.4, 1);
}

/* Only one heat display (and one Sip Sooz control) on screen at a time: the
   Sooz Test section has its own gauge + its own Sip Sooz button, so hide the
   ambient rig/pill/FAB while that section is in view.
   (html-prefixed to out-specificity the mobile warm/hot/inferno opacity rules below.) */
html body.sooz-test-in-view .spice-rig,
html body.sooz-test-in-view .spice-pill,
html body.sooz-test-in-view .sip-sooz-fab {
    opacity: 0;
    pointer-events: none;
}

/* The FAB's companions must hide with it: at max heat the arrow would point at
   an invisible FAB, and a sip inside the test section would double the section's
   own "ahhh." with the global one. */
html body.sooz-test-in-view .sip-arrow,
html body.sooz-test-in-view .sip-ahh {
    opacity: 0 !important;
    animation: none;
    pointer-events: none;
}

.spice-beacon {
    width: 20px;
    height: 13px;
    flex-shrink: 0;
    background: var(--soft-red);
    border: 2.5px solid var(--deep-blue);
    border-radius: 11px 11px 3px 3px;
    transform: scale(0);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
body[data-spice="max"] .spice-beacon {
    transform: scale(1);
    animation: spice-beacon-pulse 1.4s ease-in-out infinite;
}

.spice-flame { flex-shrink: 0; }
.spice-flame svg { display: block; width: 18px; height: 21px; }
.spice-flame path {
    fill: transparent;
    stroke: var(--deep-blue);
    stroke-width: 1.6;
    transition: fill 0.4s ease;
}
body[data-spice="warm"] .spice-flame path { fill: var(--sun-yellow); }
body[data-spice="hot"]  .spice-flame path { fill: var(--pop-orange); }
body[data-spice="inferno"] .spice-flame path,
body[data-spice="max"]     .spice-flame path { fill: var(--soft-red); }

.spice-meter {
    position: relative;
    flex: 1;
    width: 22px;
    background: #fff;
    border: 2.5px solid var(--deep-blue);
    border-radius: 999px;
    box-shadow: 3px 3px 0 rgba(7, 59, 76, 0.18);
    overflow: hidden;
}
body[data-spice="max"] .spice-meter {
    box-shadow: 3px 3px 0 rgba(7, 59, 76, 0.18), 0 0 16px rgba(239, 71, 111, 0.5);
    animation: spice-shake 0.45s ease-in-out infinite;
}

/* Fill: full-height gradient, revealed bottom-up via clip-path (JS-driven) */
.spice-fill {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, var(--soft-red), var(--pop-orange) 45%, var(--sun-yellow));
    clip-path: inset(100% 0 0 0);
    transition: clip-path 0.35s linear;
}

/* Bubbles rise inside the fill (clipped at the fill surface) */
.spice-bubble {
    position: absolute;
    bottom: 6px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: rgba(255, 249, 240, 0.85);
    opacity: 0;
    animation: spice-bubble-rise var(--t, 3.4s) linear infinite;
    animation-delay: var(--d, 0s);
}
.spice-bubble.b1 { left: 18%; }
.spice-bubble.b2 { left: 44%; --t: 4.1s; --d: 1.3s; }
.spice-bubble.b3 { left: 64%; --t: 2.8s; --d: 0.6s; }
.spice-bubble.b4 { left: 30%; --t: 2.4s; --d: 1.9s; display: none; }
.spice-bubble.b5 { left: 56%; --t: 3.1s; --d: 0.2s; display: none; }
body[data-spice="hot"] .spice-bubble.b4,
body[data-spice="hot"] .spice-bubble.b5,
body[data-spice="inferno"] .spice-bubble.b4,
body[data-spice="inferno"] .spice-bubble.b5,
body[data-spice="max"] .spice-bubble.b4,
body[data-spice="max"] .spice-bubble.b5 { display: block; }

.spice-tick {
    position: absolute;
    left: 3px;
    right: 3px;
    height: 2px;
    border-radius: 2px;
    background: rgba(7, 59, 76, 0.14);
}
.spice-tick.t1 { top: 25%; }
.spice-tick.t2 { top: 50%; }
.spice-tick.t3 { top: 75%; }

.spice-drop { flex-shrink: 0; }
.spice-drop svg { display: block; width: 15px; height: 18px; }
.spice-drop path {
    fill: var(--energy-blue);
    stroke: var(--deep-blue);
    stroke-width: 1.6;
}

/* Sweat droplets sliding down the outside of the tube (hot and above) */
.spice-sweat {
    position: absolute;
    top: 14%;
    bottom: 12%;
    left: -10px;
    width: 14px;
    pointer-events: none;
}
.spice-sweat .sweat {
    position: absolute;
    left: 0;
    width: 9px;
    height: 12px;
    background: var(--energy-blue);
    border: 2px solid var(--deep-blue);
    border-radius: 50% 50% 58% 42% / 65% 64% 36% 35%;
    opacity: 0;
}
.spice-sweat .s1 { top: 6%; }
.spice-sweat .s2 { top: 40%; left: 3px; --d: 1.4s; }
.spice-sweat .s3 { top: 66%; --d: 2.3s; }
body[data-spice="hot"] .sweat,
body[data-spice="inferno"] .sweat,
body[data-spice="max"] .sweat {
    animation: spice-sweat-slide 3s ease-in infinite;
    animation-delay: var(--d, 0s);
}

/* Embers drifting off the tube (inferno and above) */
.spice-embers {
    position: absolute;
    inset: -20px -10px;
    pointer-events: none;
}
.s-ember {
    position: absolute;
    border-radius: 50%;
    opacity: 0;
}
.s-ember.e1 { left: -4px;  bottom: 28%; width: 8px; height: 8px; background: var(--pop-orange); }
.s-ember.e2 { right: -2px; bottom: 46%; width: 7px; height: 7px; background: var(--soft-red);  --d: 0.8s; --dx: 10px; }
.s-ember.e3 { left: 0;     bottom: 62%; width: 6px; height: 6px; background: var(--sun-yellow); --d: 1.6s; --dx: -10px; }
.s-ember.e4 { right: -6px; bottom: 16%; width: 9px; height: 9px; background: var(--soft-red);  --d: 2.2s; --dx: 6px; }
body[data-spice="inferno"] .s-ember,
body[data-spice="max"] .s-ember {
    animation: spice-ember-rise var(--t, 3s) ease-out infinite;
    animation-delay: var(--d, 0s);
}

/* --- Sip Sooz button (appears past the threshold, grows with heat) --- */
.sip-sooz-fab {
    position: fixed;
    right: 64px;
    bottom: 28px;
    z-index: 960;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 22px;
    background: var(--deep-blue);
    color: var(--cream);
    border: 2px solid var(--deep-blue);
    border-radius: 50px;
    font-family: var(--font-head);
    font-size: 1.05rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: 4px 4px 0 var(--sun-yellow);
    transform: scale(0);
    transform-origin: bottom right;
    opacity: 0;
    pointer-events: none;
    transition: transform 0.38s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.25s ease, background 0.2s ease;
    /* Cursor ripple: energy-blue flood on the deep-blue base (a same-color
       sample would be an invisible flood) */
    --sooz-ripple-fill: var(--energy-blue);
    --sooz-ripple-ink: #fff;
}
.sip-sooz-fab svg { width: 14px; height: 17px; flex-shrink: 0; }
.sip-sooz-fab path { fill: var(--cream); }
.sip-sooz-fab.visible {
    transform: scale(var(--fab-scale, 1));
    opacity: 1;
    pointer-events: auto;
}
.sip-sooz-fab:hover { background: var(--energy-blue); }
/* Ripple host (cursor active): lock the hover background to the base so the
   :hover fade can't fight the ripple fill — the ripple supplies the
   energy-blue flood instead. Keep the pop-in bounce, drop `background` from
   the transition list (!important to out-rank the generic host transition). */
.is-sooz-ripple-host.sip-sooz-fab {
    transition: transform 0.38s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.25s ease, color 0.4s cubic-bezier(0.22, 1, 0.36, 1) !important;
}
.is-sooz-ripple-host.sip-sooz-fab:hover { background: var(--deep-blue); }
.sip-sooz-fab:focus-visible {
    outline: 3px solid var(--energy-blue);
    outline-offset: 3px;
}
body[data-spice="max"] .sip-sooz-fab { animation: spice-fab-ring 1.4s ease-out infinite; }

/* Alarm arrow pointing at the button (max only) */
.sip-arrow {
    position: fixed;
    right: 74px;
    bottom: 104px;
    z-index: 958;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.sip-arrow.visible { opacity: 1; animation: spice-arrow-nudge 1s ease-in-out infinite; }
.sip-arrow-text {
    font-family: var(--font-scribble);
    font-size: 1.35rem;
    line-height: 1.1;
    color: var(--soft-red);
    transform: rotate(-6deg);
    text-shadow: 0 1px 0 rgba(255, 249, 240, 0.7);
}
.sip-arrow svg {
    width: 46px;
    height: 40px;
    margin-right: 6px;
    color: var(--soft-red);
}

.sip-ahh {
    position: fixed;
    right: 86px;
    bottom: 92px;
    z-index: 961;
    font-family: var(--font-scribble);
    font-size: 1.5rem;
    color: var(--energy-blue);
    transform: rotate(-8deg);
    opacity: 0;
    pointer-events: none;
}
body.is-sipping .sip-ahh { animation: spice-ahh-rise 1.4s ease-out both; }

/* --- Post-sip waitlist toast --- */
.spice-toast {
    position: fixed;
    right: 24px;
    bottom: 28px;
    z-index: 970;
    width: min(360px, calc(100vw - 40px));
    background: var(--cream);
    border: 2.5px solid var(--deep-blue);
    border-radius: 18px;
    box-shadow: var(--shadow-md);
    padding: 20px 20px 16px;
    opacity: 0;
    transform: translateY(18px) scale(0.96);
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.38s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.spice-toast.visible {
    opacity: 1;
    transform: none;
    pointer-events: auto;
}
.spice-toast-close {
    position: absolute;
    top: 8px;
    right: 12px;
    background: none;
    border: none;
    font-size: 1.4rem;
    line-height: 1;
    color: var(--ink);
    opacity: 0.5;
    cursor: pointer;
    padding: 4px;
}
.spice-toast-close:hover { opacity: 1; }
.spice-toast-eyebrow {
    font-family: var(--font-scribble);
    font-size: 1.2rem;
    color: var(--pop-orange);
    margin: 0 0 4px;
}
.spice-toast-text {
    font-size: 0.95rem;
    color: var(--muted);
    line-height: 1.45;
    margin: 0 0 12px;
}
.spice-toast-form {
    display: flex;
    gap: 8px;
}
.spice-toast-form input {
    flex: 1;
    min-width: 0;
    padding: 10px 14px;
    border: 2px solid var(--deep-blue);
    border-radius: 10px;
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: var(--ink);
    background: #fff;
}
.spice-toast-form input:focus {
    outline: none;
    border-color: var(--pop-orange);
}
.spice-toast-form button {
    padding: 10px 16px;
    background: var(--pop-orange);
    color: #fff;
    border: 2px solid var(--deep-blue);
    border-radius: 10px;
    font-family: var(--font-head);
    font-size: 0.95rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: background 0.2s ease;
    /* Cursor ripple: deeper burnt-orange flood so it reads on the pop-orange
       base (a same-color sample would be an invisible flood) */
    --sooz-ripple-fill: color-mix(in srgb, var(--pop-orange) 55%, #7a2510);
    --sooz-ripple-ink: #fff;
}
.spice-toast-form button:hover:not(:disabled) { background: var(--deep-blue); }
/* Ripple host (cursor active): lock the hover background to the base so the
   :hover swap can't fight the ripple fill (the generic .is-sooz-ripple-host
   transition already excludes `background`). */
.spice-toast-form button.is-sooz-ripple-host:hover:not(:disabled) { background: var(--pop-orange); }
.spice-toast-form button:disabled { opacity: 0.6; cursor: not-allowed; }
.spice-toast-msg {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--deep-blue);
    margin: 8px 0 0;
    min-height: 1em;
}

/* --- Spice meter keyframes --- */
@keyframes spice-flash {
    0%, 100% { opacity: 0.08; }
    50%      { opacity: 0.30; }
}

@keyframes spice-cool-wash {
    0%   { opacity: 0; }
    25%  { opacity: 1; }
    100% { opacity: 0; }
}

@keyframes spice-bubble-rise {
    0%   { transform: translateY(0); opacity: 0; }
    12%  { opacity: 0.9; }
    100% { transform: translateY(-72vh); opacity: 0.9; }
}

@keyframes spice-sweat-slide {
    0%   { transform: translateY(0); opacity: 0; }
    20%  { opacity: 0.85; }
    100% { transform: translateY(46px); opacity: 0; }
}

@keyframes spice-ember-rise {
    0%   { transform: translate(0, 0) scale(1); opacity: 0; }
    15%  { opacity: 0.9; }
    100% { transform: translate(var(--dx, 8px), -70px) scale(0.7); opacity: 0; }
}

@keyframes spice-shake {
    0%, 100% { transform: translateX(0); }
    25%      { transform: translateX(-1.5px); }
    75%      { transform: translateX(1.5px); }
}

@keyframes spice-beacon-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(239, 71, 111, 0.55); }
    50%      { box-shadow: 0 0 0 9px rgba(239, 71, 111, 0); }
}

@keyframes spice-fab-ring {
    0%   { box-shadow: 4px 4px 0 var(--sun-yellow), 0 0 0 0 rgba(239, 71, 111, 0.45); }
    100% { box-shadow: 4px 4px 0 var(--sun-yellow), 0 0 0 14px rgba(239, 71, 111, 0); }
}

@keyframes spice-arrow-nudge {
    0%, 100% { transform: translate(0, 0); }
    50%      { transform: translate(4px, 5px); }
}

@keyframes spice-ahh-rise {
    0%   { opacity: 0; transform: translateY(8px) rotate(-8deg); }
    25%  { opacity: 1; }
    100% { opacity: 0; transform: translateY(-22px) rotate(-4deg); }
}

/* --- High-heat intensity boost (inferno + max) --- */

/* Vivid red-vignette on the overlay + stronger gradient colors */
body[data-spice="inferno"] .heat-overlay,
body[data-spice="max"] .heat-overlay {
    background:
        radial-gradient(ellipse at 50% 110%, rgba(239, 71, 111, 0.40), transparent 60%),
        radial-gradient(ellipse at 108% 50%, rgba(255, 107, 53, 0.46), transparent 55%),
        radial-gradient(ellipse at 50% 50%, transparent 36%, rgba(239, 71, 111, 0.28) 100%),
        linear-gradient(0deg, rgba(239, 71, 111, 0.14), rgba(255, 107, 53, 0.10));
}
body[data-spice="inferno"] .heat-overlay {
    box-shadow: inset 0 0 80px rgba(239, 71, 111, 0.32), inset 0 0 160px rgba(239, 71, 111, 0.14);
}
body[data-spice="max"] .heat-overlay {
    box-shadow: inset 0 0 100px rgba(239, 71, 111, 0.52), inset 0 0 200px rgba(239, 71, 111, 0.24);
}

/* Subtle flash starts at inferno (not just max) */
body[data-spice="inferno"] .heat-overlay-flash {
    opacity: 0.07;
    animation: spice-flash 2.8s ease-in-out infinite;
}

/* Meter glow + shake at inferno */
body[data-spice="inferno"] .spice-meter {
    box-shadow: 3px 3px 0 rgba(7, 59, 76, 0.18), 0 0 12px rgba(239, 71, 111, 0.40);
    animation: spice-shake 0.65s ease-in-out infinite;
}

/* Harder, faster shake + stronger glow at max */
@keyframes spice-shake-hard {
    0%, 100% { transform: translateX(0); }
    25%      { transform: translateX(-2.5px) rotate(0.4deg); }
    75%      { transform: translateX(2.5px) rotate(-0.4deg); }
}
body[data-spice="max"] .spice-meter {
    box-shadow: 3px 3px 0 rgba(7, 59, 76, 0.18), 0 0 22px rgba(239, 71, 111, 0.70);
    animation: spice-shake-hard 0.35s ease-in-out infinite;
}

/* Whole rig shakes at inferno/max */
@keyframes spice-rig-shake {
    0%, 100% { transform: translateY(-50%) translateX(0); }
    25%      { transform: translateY(-50%) translateX(-1.5px); }
    75%      { transform: translateY(-50%) translateX(1.5px); }
}
@keyframes spice-rig-shake-max {
    0%, 100% { transform: translateY(-50%) translateX(0); }
    25%      { transform: translateY(-50%) translateX(-2.5px) rotate(0.5deg); }
    75%      { transform: translateY(-50%) translateX(2.5px) rotate(-0.5deg); }
}
body[data-spice="inferno"] .spice-rig {
    animation: spice-rig-shake 0.65s ease-in-out infinite;
}
body[data-spice="max"] .spice-rig {
    animation: spice-rig-shake-max 0.38s ease-in-out infinite;
}

/* Embers run faster at max */
body[data-spice="max"] .s-ember {
    animation-duration: 1.7s;
}

/* --- Heat gauge pill (small screens; replaces the vertical tube) --- */
.spice-pill {
    position: fixed;
    left: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    z-index: 950;
    display: none;
    align-items: center;
    gap: 8px;
    height: 46px;
    padding: 0 14px 0 11px;
    background: var(--cream);
    border: 2.5px solid var(--deep-blue);
    border-radius: 999px;
    box-shadow: 3px 3px 0 var(--deep-blue);
    pointer-events: none;
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.spice-pill-flame { display: inline-flex; }
.spice-pill-flame svg { width: 16px; height: 19px; }
.spice-pill-flame path {
    fill: transparent;
    stroke: var(--deep-blue);
    stroke-width: 1.6;
    transition: fill 0.4s ease;
}
body[data-spice="warm"] .spice-pill-flame path    { fill: var(--sun-yellow); }
body[data-spice="hot"] .spice-pill-flame path     { fill: var(--pop-orange); }
body[data-spice="inferno"] .spice-pill-flame path,
body[data-spice="max"] .spice-pill-flame path     { fill: var(--soft-red); }
.spice-pill-bar {
    position: relative;
    width: 64px;
    height: 12px;
    background: #fff;
    border: 2px solid var(--deep-blue);
    border-radius: 999px;
    overflow: hidden;
}
.spice-pill-fill {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, var(--sun-yellow), var(--pop-orange) 55%, var(--soft-red));
    clip-path: inset(0 100% 0 0);
    transition: clip-path 0.35s linear;
}
.spice-pill-label {
    font-family: var(--font-head);
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--deep-blue);
    min-width: 34px;
    text-align: center;
}
@keyframes spice-pill-shake {
    0%, 100% { transform: translateX(0); }
    25%      { transform: translateX(-1.5px) rotate(-0.6deg); }
    75%      { transform: translateX(1.5px) rotate(0.6deg); }
}
@media (prefers-reduced-motion: reduce) {
    .spice-pill { transition: opacity 0.3s ease; transform: none; }
    .spice-rig  { transition: opacity 0.3s ease; }
}

/* --- Spice meter: small screens (gauge pill bottom-left, FAB bottom-right) --- */
@media (max-width: 600px) {
    .spice-rig { display: none; }
    .spice-pill { display: inline-flex; }
    /* the gauge stays out of the way until things warm up */
    body[data-spice="warm"] .spice-pill,
    body[data-spice="hot"] .spice-pill,
    body[data-spice="inferno"] .spice-pill,
    body[data-spice="max"] .spice-pill {
        opacity: 1;
        transform: translateY(0);
    }
    body[data-spice="inferno"] .spice-pill { animation: spice-pill-shake 0.65s ease-in-out infinite; }
    body[data-spice="max"] .spice-pill     { animation: spice-pill-shake 0.38s ease-in-out infinite; }
    /* never fight the toast for the same corner */
    body:has(.spice-toast.visible) .spice-pill { opacity: 0; transform: translateY(16px); }
    .sip-sooz-fab {
        right: 12px;
        bottom: calc(14px + env(safe-area-inset-bottom, 0px));
        padding: 12px 18px;
        font-size: 0.98rem;
    }
    .sip-arrow { right: 24px; bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
    .sip-arrow svg { width: 38px; height: 33px; }
    .sip-arrow-text { font-size: 1.15rem; }
    .sip-ahh { right: 40px; bottom: calc(76px + env(safe-area-inset-bottom, 0px)); font-size: 1.25rem; }
    .spice-toast {
        right: 10px;
        left: 10px;
        bottom: calc(14px + env(safe-area-inset-bottom, 0px));
        width: auto;
        padding: 18px 16px 14px;
    }
}

/* --- Ambient meter retirement (site-wide) ---
   The rig (desktop sidebar) and pill (mobile bottom bar) only get to play
   once per session: the instant the visitor sips for the first time —
   anywhere, via the FAB or the homepage Sooz Test section's own Sip Sooz
   button, both funnel through the same JS `doSip` — app.js adds this class
   to <body> and never removes it for the rest of the session (it also
   stamps the class in immediately on future page loads once
   sessionStorage records a sip, so nothing flashes visible first). The rig
   slides off to the right, the pill drops off the bottom; the FAB/arrow/ahh/
   heat-tint layers just disappear, since they're already invisible at the
   heat=0 the sip lands on. After this, only #sooz-test (untouched by this
   class) can drive window.soozHeat. Declared after the max-width:600px
   block on purpose so it wins the cascade at every viewport width without
   needing to out-specificity the data-spice / media-query rules above. */
body.sooz-ambient-retired .spice-rig {
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateY(-50%) translateX(140%) !important;
    animation: none !important;
}
body.sooz-ambient-retired .spice-pill {
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateY(140%) !important;
    animation: none !important;
}
body.sooz-ambient-retired .sip-sooz-fab,
body.sooz-ambient-retired .sip-arrow,
body.sooz-ambient-retired .sip-ahh,
body.sooz-ambient-retired .heat-overlay,
body.sooz-ambient-retired .heat-overlay-flash,
body.sooz-ambient-retired .cool-wash {
    display: none !important;
}

/* ---------- Custom Sooz cursor (fine pointer only) ----------
   Droplet follower + button color ripple. No blob morph.
*/
@media (hover: hover) and (pointer: fine) {
    html {
        cursor: var(--sooz-cursor-drop, auto);
    }

    a, button, [role="button"],
    input, textarea, select, label, summary,
    p, span, li, h1, h2, h3, h4, h5, h6,
    .btn, .button {
        cursor: var(--sooz-cursor-drop, auto);
    }

    html.sooz-cursor-ready,
    html.sooz-cursor-ready * {
        cursor: none !important;
    }
}

#sooz-cursor {
    position: fixed;
    top: 0;
    left: 0;
    width: 30px;
    height: 39px;
    margin: 0;
    padding: 0;
    border: 0;
    pointer-events: none;
    z-index: 100001;
    opacity: 0;
    will-change: transform, opacity;
    transform: translate3d(-9999px, -9999px, 0);
}

#sooz-cursor.is-visible {
    opacity: 1;
}

#sooz-cursor img {
    display: block;
    width: 30px;
    height: 39px;
    transform-origin: 8px 3px;
    will-change: transform;
}

#sooz-cursor.is-pulsing img {
    animation: sooz-cursor-pulse 0.85s ease-in-out infinite;
}

@keyframes sooz-cursor-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.14); }
}

/* Keep custom cursor over Instagram embed iframes */
.sooz-cursor-bridge {
    position: relative;
    display: block;
    max-width: 100%;
}

.sooz-cursor-bridge-hit {
    position: absolute;
    inset: 0;
    z-index: 2;
    border-radius: inherit;
}

.sooz-cursor-bridge iframe {
    pointer-events: none !important;
    position: relative;
    z-index: 1;
}

/* Button color ripple from cursor tip (under the border).
   Host hover must NOT animate background/color — that fights the fill. */
.is-sooz-ripple-host {
    --sooz-ripple-color: var(--pop-orange);
    --sooz-ripple-ink: #fff;
    isolation: isolate;
    transition: transform 0.18s ease, box-shadow 0.18s ease, color 0.4s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

.is-sooz-ripple-host.is-sooz-ripple-positioned {
    position: relative;
}

.is-sooz-ripple-host.is-sooz-rippling {
    color: var(--sooz-ripple-ink) !important;
}

.is-sooz-ripple-host.is-sooz-rippling .sooz-ripple-label path {
    fill: currentColor;
    transition: fill 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Lock base fills so CSS :hover background doesn't fight the ripple */
.is-sooz-ripple-host.btn:hover,
.is-sooz-ripple-host.cta-button:hover {
    background: var(--pop-orange);
    color: #fff;
}

.is-sooz-ripple-host.btn-secondary:hover {
    background: var(--cream);
    color: var(--deep-blue);
}

.is-sooz-ripple-host.btn-ghost:hover {
    background: transparent;
    color: var(--deep-blue);
}

/* Referral-popup buttons kept their own :hover background swaps, so CSS
   repainted them underneath the ripple while resolvePaint() picked their
   resting colour as the fill (invisible). Lock the resting fill on hover and
   hand the intended hover colour to the ripple via --sooz-ripple-fill. */
.ref-copy-btn {
    /* not gated on .is-sooz-ripple-host: resolvePaint() runs before the
       scaffold adds that class on first hover */
    --sooz-ripple-fill: var(--pop-orange);
    --sooz-ripple-ink: #fff;
}
.is-sooz-ripple-host.ref-copy-btn:hover {
    background: var(--deep-blue);
}
.ref-form button[type="submit"],
.ref-name-form button[type="submit"] {
    --sooz-ripple-fill: var(--deep-blue);
    --sooz-ripple-ink: var(--cream);
}
.ref-form button[type="submit"].is-sooz-ripple-host:hover:not(:disabled) {
    background: var(--pop-orange);
}
/* Same pattern on the Hot Mess Club claim button (hover swapped to soft red). */
.hmc-claim-btn {
    --sooz-ripple-fill: var(--soft-red);
    --sooz-ripple-ink: #fff;
}
.is-sooz-ripple-host.hmc-claim-btn:hover {
    background: var(--pop-orange);
}

.is-sooz-ripple-host.is-sooz-rippling.btn:hover,
.is-sooz-ripple-host.is-sooz-rippling.cta-button:hover,
.is-sooz-ripple-host.is-sooz-rippling.btn-secondary:hover,
.is-sooz-ripple-host.is-sooz-rippling.btn-ghost:hover {
    color: var(--sooz-ripple-ink) !important;
}

.sooz-ripple-clip {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: inherit;
    pointer-events: none;
    z-index: 0;
    contain: paint;
    transform: translateZ(0);
}

.sooz-ripple-fill {
    position: absolute;
    top: 0;
    left: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--sooz-ripple-color);
    pointer-events: none;
    transform: translate3d(0, 0, 0) scale(0);
    transform-origin: 50% 50%;
    will-change: transform;
    backface-visibility: hidden;
}

.sooz-ripple-label {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: inherit;
    max-width: 100%;
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    #sooz-cursor.is-pulsing img {
        animation: none;
    }

    .is-sooz-ripple-host {
        transition: none;
    }
}

/* ==========================================================================
   Sooz rescue-station component vocabulary
   Tickers, stickers, stamps, dot menus, seams, mega type, motion gates
   ========================================================================== */

/* --- Motion gates: only hide things when the motion system is running --- */
html.motion [data-reveal] { opacity: 0; }
html.motion [data-reveal-children] > * { opacity: 0; }
[data-headline] .hw {
    display: inline-block;
    overflow: hidden;
    vertical-align: bottom;
    padding-bottom: 0.12em;
    margin-bottom: -0.12em;
}
[data-headline] .hw > span { display: inline-block; }
/* The "Sooz" word carries a decorative encircle (.highlight::before) that
   extends past the word's own box — this word's clip wrapper must stay
   open so that decoration isn't cropped into a rectangle. */
[data-headline] .hw:has(.highlight) {
    overflow: visible;
}

/* --- Alarm ticker (marquee strip stitching sections together) --- */
.ticker {
    background: var(--deep-blue);
    color: var(--cream);
    overflow: hidden;
    position: relative;
    border-block: 2.5px solid var(--deep-blue);
}
.ticker-track {
    display: flex;
    width: max-content;
    padding: 13px 0;
    animation: ticker-scroll 32s linear infinite;
}
.ticker-item {
    display: inline-flex;
    align-items: center;
    gap: 20px;
    padding: 0 20px;
    font-family: var(--font-head);
    font-size: 1.02rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    white-space: nowrap;
}
.ticker-item svg { width: 15px; height: 18px; flex-shrink: 0; }
.ticker-item .tk-flame path { fill: var(--pop-orange); }
.ticker-item .tk-drop path  { fill: var(--energy-blue); }
.ticker--hot { background: var(--pop-orange); z-index: 5; } /* paints over a section that tucks under it, like --tilt */
.ticker--hot .ticker-item .tk-flame path { fill: var(--sun-yellow); }
.ticker--hot .ticker-item .tk-drop path  { fill: var(--cream); }
.ticker--tilt {
    transform: rotate(-1.6deg);
    width: 104vw;
    margin-left: -2vw;
    box-shadow: 0 4px 0 rgba(7, 59, 76, 0.15);
    z-index: 5;
}
/* The band is wider than the screen on purpose, but its overhang made the
   whole page scroll sideways on phones (390px screen, 399px page), which
   also pushed every fixed overlay (popups, menu, cookie banner) part-way off
   the right edge. body's overflow-x:hidden does not stop that on mobile.
   Clip the band's own wrapper sideways only: `clip`, unlike `hidden`, keeps
   overflow-y visible, so the tilted corners still overlap the neighbours. */
[id^="shopline-section-"]:has(> .ticker--tilt) {
    overflow-x: clip;
}
/* The tilted band stitches its neighbours (2026-09-03, Leo: the origin's
   horizontal cuts above and below the band were a mistake). The rotation
   raises the right end and lowers the left end by ~1.45vw (104vw · sin 1.6°
   / 2), so the section above must reach down to the band's lowest top edge
   and the section below must reach up to its highest bottom edge. Extend
   each neighbour's BACKGROUND with a transparent border of that size and a
   matching negative margin, so nothing in the flow moves and the band
   (z-index 5) hides the overlap. background-origin: border-box keeps the
   hero's gradients continuous into the extension instead of tiling. Uses
   :has(); browsers without it fall back to the origin's straight cuts. */
[id^="shopline-section-"]:has(+ [id^="shopline-section-"] > .ticker--tilt) > section {
    border-bottom: 1.6vw solid transparent;
    margin-bottom: -1.6vw;
    background-origin: border-box;
    background-clip: border-box;
}
/* The hero is min-height:100svh with border-box sizing, so the transparent
   border would eat 1.6vw of its content box and pull everything below it up.
   Grow the minimum by the same amount so the layout below stays put. */
[id^="shopline-section-"]:has(+ [id^="shopline-section-"] > .ticker--tilt) > section.hero {
    min-height: calc(100svh + 1.6vw);
}
[id^="shopline-section-"]:has(> .ticker--tilt) + [id^="shopline-section-"] > section {
    border-top: 1.6vw solid transparent;
    margin-top: -1.6vw;
    background-origin: border-box;
    background-clip: border-box;
}
@keyframes ticker-scroll {
    to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
    .ticker-track { animation: none; }
}

/* --- Sticker family (angled badges with the hard offset shadow) --- */
.sticker {
    position: absolute;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-family: var(--font-head);
    font-weight: 600;
    color: var(--deep-blue);
    transform: rotate(var(--tilt, -4deg));
    z-index: 3;
    pointer-events: none;
}
.sticker--burst {
    /* Rounded cog: short, frequent, fully-rounded teeth (no sharp points). A mask (not
       clip-path) is used so the shape stays a percentage of the box regardless of size —
       clip-path's path() only accepts absolute units, which would break at the different
       badge sizes set across breakpoints. */
    --burst-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 130 130'%3E%3Cpath d='M 68.5 8.7 Q 65.0 3.0 61.5 8.7 Q 57.2 15.6 52.1 11.3 Q 45.8 6.0 44.2 12.5 Q 42.3 20.4 36.1 17.9 Q 28.6 14.8 29.0 21.5 Q 29.6 29.6 23.0 29.2 Q 14.8 28.6 17.4 34.7 Q 20.4 42.3 14.0 43.9 Q 6.0 45.8 10.3 50.9 Q 15.6 57.2 9.9 60.7 Q 3.0 65.0 8.7 68.5 Q 15.6 72.8 11.3 77.9 Q 6.0 84.2 12.5 85.8 Q 20.4 87.7 17.9 93.9 Q 14.8 101.4 21.5 101.0 Q 29.6 100.4 29.2 107.0 Q 28.6 115.2 34.7 112.6 Q 42.3 109.6 43.9 116.0 Q 45.8 124.0 50.9 119.7 Q 57.2 114.4 60.7 120.1 Q 65.0 127.0 68.5 121.3 Q 72.8 114.4 77.9 118.7 Q 84.2 124.0 85.8 117.5 Q 87.7 109.6 93.9 112.1 Q 101.4 115.2 101.0 108.5 Q 100.4 100.4 107.0 100.8 Q 115.2 101.4 112.6 95.3 Q 109.6 87.7 116.0 86.1 Q 124.0 84.2 119.7 79.1 Q 114.4 72.8 120.1 69.3 Q 127.0 65.0 121.3 61.5 Q 114.4 57.2 118.7 52.1 Q 124.0 45.8 117.5 44.2 Q 109.6 42.3 112.1 36.1 Q 115.2 28.6 108.5 29.0 Q 100.4 29.6 100.8 23.0 Q 101.4 14.8 95.3 17.4 Q 87.7 20.4 86.1 14.0 Q 84.2 6.0 79.1 10.3 Q 72.8 15.6 69.3 9.9 Z'/%3E%3C/svg%3E");
    -webkit-mask-image: var(--burst-shape);
    mask-image: var(--burst-shape);
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    background: var(--deep-blue);
    padding: 14px;
}
.sticker--burst::before {
    content: "";
    position: absolute;
    inset: 3.5px;
    -webkit-mask-image: var(--burst-shape);
    mask-image: var(--burst-shape);
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    background: var(--burst-bg, var(--sun-yellow));
}
.sticker--burst > * { position: relative; z-index: 1; }
.sticker--drop {
    width: 34px;
    height: 44px;
    background: var(--energy-blue);
    border: 2.5px solid var(--deep-blue);
    border-radius: 50% 50% 58% 42% / 65% 64% 36% 35%;
    box-shadow: 3px 3px 0 rgba(7, 59, 76, 0.18);
}
.sticker--ticket {
    background: var(--cream);
    border: 2.5px solid var(--deep-blue);
    border-radius: 12px;
    box-shadow: 4px 4px 0 var(--deep-blue);
    padding: 10px 18px;
    flex-direction: column;
    gap: 2px;
}
.sticker--ticket::before {
    content: "";
    position: absolute;
    inset: 4px;
    border: 2px dashed rgba(7, 59, 76, 0.3);
    border-radius: 8px;
    pointer-events: none;
}
.sticker--chip {
    position: static;
    display: inline-flex;
    gap: 7px;
    align-items: center;
    padding: 7px 14px;
    background: #fff;
    border: 2px solid var(--deep-blue);
    border-radius: 999px;
    font-size: 0.88rem;
    box-shadow: 2px 2px 0 var(--deep-blue);
    transform: rotate(var(--tilt, 0deg));
    pointer-events: auto;
}
.sticker--chip svg { width: 14px; height: 14px; color: var(--pop-orange); flex-shrink: 0; }

/* --- Rubber stamp --- */
.stamp {
    display: inline-block;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 0.92rem;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    line-height: 1.25;
    color: var(--pop-orange);
    border: 3px solid currentColor;
    border-radius: 9px;
    padding: 2px 10px;
    transform: rotate(var(--tilt, -4deg));
}
.stamp--blue { color: var(--energy-blue); }
.stamp--red  { color: var(--soft-red); }
.stamp--gray { color: rgba(7, 59, 76, 0.35); }

/* --- Diner-menu dot leader list --- */
.dot-menu {
    list-style: none;
    display: grid;
    gap: 12px;
    max-width: 460px;
    margin: 0 auto;
}
.dot-menu li {
    display: flex;
    align-items: baseline;
    gap: 10px;
    font-family: var(--font-head);
    font-weight: 600;
    font-size: 1.05rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--deep-blue);
}
.dot-menu .dots {
    flex: 1;
    border-bottom: 3px dotted rgba(7, 59, 76, 0.4);
    transform: translateY(-5px);
}
.dot-menu .val {
    font-family: var(--font-scribble);
    font-size: 1.3rem;
    text-transform: none;
    letter-spacing: 0;
    color: var(--pop-orange);
}
.dot-menu li:has(.val-duh) .val {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.2;
}
.dot-menu .val-duh {
    display: block;
    font-size: 0.85rem;
    color: var(--energy-blue);
    opacity: 0.8;
}

/* --- Drip seam (cream drips hanging into the section below) --- */
.seam-drip { position: relative; }
.seam-drip::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 0;
    width: 100%;
    height: 36px;
    background: var(--seam-color, var(--cream));
    z-index: 4;
    pointer-events: none;
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 36' preserveAspectRatio='none'><path d='M0,0 L1200,0 L1200,8 Q1188,26 1176,8 L1150,6 Q1138,32 1126,7 L1100,7 Q1090,20 1080,7 L1010,6 Q996,32 982,7 L920,7 Q908,24 896,7 L830,6 Q818,30 806,6 L750,6 Q740,18 730,6 L666,7 Q652,34 638,7 L580,7 Q568,22 556,7 L500,6 Q488,28 476,6 L420,6 Q410,17 400,6 L340,7 Q326,30 312,7 L250,6 Q238,24 226,6 L170,6 Q158,32 146,6 L90,7 Q80,19 70,7 L24,8 Q12,26 0,8 Z' fill='black'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 36' preserveAspectRatio='none'><path d='M0,0 L1200,0 L1200,8 Q1188,26 1176,8 L1150,6 Q1138,32 1126,7 L1100,7 Q1090,20 1080,7 L1010,6 Q996,32 982,7 L920,7 Q908,24 896,7 L830,6 Q818,30 806,6 L750,6 Q740,18 730,6 L666,7 Q652,34 638,7 L580,7 Q568,22 556,7 L500,6 Q488,28 476,6 L420,6 Q410,17 400,6 L340,7 Q326,30 312,7 L250,6 Q238,24 226,6 L170,6 Q158,32 146,6 L90,7 Q80,19 70,7 L24,8 Q12,26 0,8 Z' fill='black'/></svg>");
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

/* --- Mega display type (allowed to bleed off the viewport) --- */
.mega {
    font-family: var(--font-head);
    font-weight: 600;
    font-size: clamp(3.2rem, 16vw, 9.5rem);
    line-height: 0.92;
    letter-spacing: -0.03em;
    color: var(--deep-blue);
}

/* --- Ribbon CTA (angled banner moment) --- */
.ribbon-cta {
    display: inline-block;
    padding: 16px 42px;
    background: var(--sun-yellow);
    color: var(--deep-blue);
    font-family: var(--font-head);
    font-size: 1.12rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: none;
    border: 2.5px solid var(--deep-blue);
    box-shadow: 5px 5px 0 var(--deep-blue);
    transform: rotate(-2deg);
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.2s ease;
}
.ribbon-cta:hover {
    transform: rotate(-2deg) translate(-2px, -2px);
    box-shadow: 7px 7px 0 var(--deep-blue);
    background: var(--pop-orange);
    color: #fff;
}
.ribbon-cta:active { transform: rotate(-2deg) scale(0.97); }

/* --- Button feel upgrades --- */
.btn:active,
.cta-button:active { transform: scale(0.97); box-shadow: 2px 2px 0 var(--deep-blue); }
@media (max-width: 600px) {
    .btn,
    .cta-button {
        min-height: 52px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}

/* --- Mobile menu: full-screen takeover --- */
@media (max-width: 900px) {
    .mobile-menu-overlay {
        background: var(--cream);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        align-items: stretch;
        justify-content: stretch;
    }
    .mobile-menu-card {
        max-width: none;
        width: 100%;
        height: 100%;
        border-radius: 0;
        box-shadow: none;
        background: var(--cream);
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 76px 9% calc(34px + env(safe-area-inset-bottom, 0px));
        text-align: left;
        overflow: hidden;
        transform: translateY(14px);
    }
    .mobile-menu-overlay.visible .mobile-menu-card { transform: translateY(0); }
    /* big rotated droplet doodle in the corner */
    .mobile-menu-card::after {
        content: "";
        position: absolute;
        right: -70px;
        bottom: -60px;
        width: 240px;
        height: 300px;
        background: var(--pop-orange);
        opacity: 0.12;
        border-radius: 50% 50% 58% 42% / 65% 64% 36% 35%;
        transform: rotate(18deg);
        pointer-events: none;
    }
    .mobile-menu-close {
        top: 18px;
        right: 20px;
        width: 44px;
        height: 44px;
        font-size: 2.2rem;
        color: var(--deep-blue);
    }
    .mobile-nav { gap: 2px; counter-reset: menuitem; }
    .mobile-nav a {
        font-size: clamp(1.75rem, 7.5vw, 2.4rem);
        font-weight: 600;
        padding: 9px 0;
        border-radius: 0;
        display: flex;
        align-items: baseline;
        gap: 14px;
        opacity: 0;
        transform: translateY(20px);
        transition: opacity 0.35s ease, transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
    }
    .mobile-nav a:not(.mobile-cta)::before {
        counter-increment: menuitem;
        content: "0" counter(menuitem);
        font-family: var(--font-scribble);
        font-size: 1rem;
        color: var(--pop-orange);
        transform: translateY(-0.5em);
    }
    .mobile-nav a:hover { background: none; transform: translateY(0) translateX(4px); }
    .mobile-nav .mobile-cta {
        margin-top: 26px;
        background: var(--pop-orange);
        color: #fff;
        border: 2.5px solid var(--deep-blue);
        border-radius: 16px;
        box-shadow: var(--shadow-sm);
        padding: 16px 20px;
        font-size: 1.25rem;
        justify-content: center;
    }
    .mobile-menu-overlay.visible .mobile-nav a { opacity: 1; transform: translateY(0); }
    .mobile-menu-overlay.visible .mobile-nav a:nth-child(1) { transition-delay: 0.05s; }
    .mobile-menu-overlay.visible .mobile-nav a:nth-child(2) { transition-delay: 0.1s; }
    .mobile-menu-overlay.visible .mobile-nav a:nth-child(3) { transition-delay: 0.15s; }
    .mobile-menu-overlay.visible .mobile-nav a:nth-child(4) { transition-delay: 0.2s; }
    .mobile-menu-overlay.visible .mobile-nav a:nth-child(5) { transition-delay: 0.25s; }
    .mobile-menu-overlay.visible .mobile-nav a:nth-child(6) { transition-delay: 0.3s; }
    .mobile-menu-overlay.visible .mobile-nav a:nth-child(7) { transition-delay: 0.35s; }
    .mobile-menu-overlay.visible .mobile-nav a:nth-child(8) { transition-delay: 0.42s; }
}
@media (prefers-reduced-motion: reduce) {
    .mobile-nav a { transition: opacity 0.2s ease; transform: none; }
    .mobile-menu-card { transform: none; }
}

/* ==========================================================================
   Newsletter (.nl-*) — server-rendered "Sooz Dispatch" pages
   Styles for the markup emitted by api/_newsletter-render.js (WEB renderers +
   masthead/issue wrapper) and api/newsletter-index.js (archive/hero/cards).
   api/_newsletter-shell.js reuses the site's existing .site-header /
   .site-footer / .mobile-menu-overlay rules above, so nothing new is needed
   for it. The EMAIL renderers in _newsletter-render.js emit a fully separate,
   inline-styled document for Resend (including its own <style> block) and
   are never loaded through this stylesheet — .nl-duo-cell is an email-only
   class and intentionally has no rule here.

   Masthead is flat by design: solid --sun-yellow band, hard 3px --deep-blue
   rule underneath. No serration, no gradient (rejected direction).
   ========================================================================== */

/* --- Masthead (issue page: api/_newsletter-render.js renderMastheadWeb) --- */
.nl-masthead {
    background: var(--sun-yellow);
    border-bottom: 3px solid var(--deep-blue);
    padding: 64px 5% 48px;
    text-align: center;
}
.nl-masthead-inner {
    max-width: 720px;
    margin: 0 auto;
}
.nl-kicker {
    font-family: var(--font-body);
    font-weight: 800;
    font-size: 0.85rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--deep-blue);
    margin: 0 0 10px;
}
.nl-title {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: clamp(2rem, 5vw, 3.2rem);
    line-height: 1.1;
    color: var(--deep-blue);
    margin: 0 0 12px;
}
.nl-dek {
    font-family: var(--font-body);
    font-size: 1.1rem;
    line-height: 1.5;
    color: var(--deep-blue);
    max-width: 560px;
    margin: 0 auto;
}

/* --- Issue badge (masthead + archive card meta rows) --- */
.nl-badge {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--cream);
    border: 2px solid var(--deep-blue);
    box-shadow: 3px 3px 0 var(--deep-blue);
    transform: rotate(var(--tilt, -6deg));
    font-family: var(--font-head);
    color: var(--deep-blue);
    padding: 3px;
    text-align: center;
    overflow: hidden;
}
/* Image / icon inside the circle (components/nl-badge.html). A merchant
   photo fills the disc; the bundled droplet fallback sits inside it. */
.nl-badge--img { padding: 0; }
.nl-badge img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}
.nl-badge--icon img {
    object-fit: contain;
    padding: 16%;
    box-sizing: border-box;
}
.nl-badge span {
    font-size: 0.55rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    line-height: 1;
}
.nl-badge strong {
    font-size: 0.95rem;
    line-height: 1.15;
}
.nl-masthead .nl-badge {
    width: 76px;
    height: 76px;
    border: 2.5px solid var(--deep-blue);
    box-shadow: var(--shadow-sm);
    margin: 0 auto 18px;
}
.nl-masthead .nl-badge span { font-size: 0.65rem; }
.nl-masthead .nl-badge strong { font-size: 1.3rem; }

/* --- Issue body column (masthead's siblings only — masthead itself bleeds
   full width) --- */
.nl-issue { padding-bottom: 88px; }
.nl-issue > :not(.nl-masthead) {
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 5%;
    padding-right: 5%;
    box-sizing: border-box;
}
.nl-issue > .nl-masthead + * { margin-top: 48px; }

/* --- Text block (+ font variants) --- */
.nl-text {
    font-family: var(--font-body);
    font-size: 1.05rem;
    line-height: 1.65;
    color: var(--deep-blue);
    margin-top: 18px;
}
.nl-f-body { font-family: var(--font-body); }
.nl-f-head { font-family: var(--font-head); }
.nl-f-scribble { font-family: var(--font-scribble); font-size: 1.2rem; }

/* --- Big idea callout (--nl-mark set inline from an allowed --*-token) --- */
.nl-idea {
    background: var(--nl-mark, var(--sun-yellow));
    border: 2.5px solid var(--deep-blue);
    border-radius: 16px;
    box-shadow: var(--shadow-sm);
    padding: 28px 24px;
    text-align: center;
    margin-top: 32px;
    transform: rotate(var(--tilt, -1deg));
}
.nl-idea p {
    font-family: var(--font-head);
    font-weight: 600;
    font-size: clamp(1.3rem, 3vw, 1.7rem);
    line-height: 1.3;
    color: var(--deep-blue);
}

/* --- Pull quote --- */
.nl-quote {
    margin-top: 32px;
    padding: 2px 4px 2px 22px;
    border-left: 5px solid var(--pop-orange);
    font-family: var(--font-head);
    font-size: clamp(1.15rem, 2.6vw, 1.5rem);
    line-height: 1.4;
    color: var(--deep-blue);
}
.nl-quote cite {
    display: block;
    margin-top: 8px;
    font-family: var(--font-body);
    font-style: normal;
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--energy-blue);
}

/* --- Side note (dashed scribble aside) --- */
.nl-side {
    margin-top: 28px;
    border: 2px dashed var(--dashed);
    border-radius: 14px;
    padding: 18px 20px;
    font-family: var(--font-scribble);
    font-size: 1.1rem;
    line-height: 1.5;
    color: var(--deep-blue);
}
.nl-pin {
    display: block;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 0.95rem;
    margin-bottom: 4px;
}

/* --- Stat / spec list (dot-menu idiom) --- */
.nl-list {
    list-style: none;
    display: grid;
    gap: 10px;
    margin-top: 24px;
}
.nl-list li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    padding-bottom: 8px;
    border-bottom: 1px dashed var(--dashed);
    font-family: var(--font-body);
}
.nl-list li:last-child { border-bottom: none; }
.nl-list .lead { color: var(--deep-blue); font-weight: 600; }
.nl-list .val { color: var(--pop-orange); font-weight: 700; font-family: var(--font-scribble); font-size: 1.1rem; }

/* --- Dividers --- */
.nl-div {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 32px;
    font-size: 1.4rem;
    line-height: 1;
}
.nl-div span:nth-child(1) { color: var(--sun-yellow); }
.nl-div span:nth-child(2) { color: var(--pop-orange); }
.nl-div span:nth-child(3) { color: var(--soft-red); }
.nl-rule {
    margin-top: 32px;
    border: none;
    border-top: 2px solid var(--deep-blue);
}

/* --- Spacer --- */
.nl-spacer { display: block; width: 100%; height: 32px; }
.nl-spacer[data-size="sm"] { height: 16px; }
.nl-spacer[data-size="md"] { height: 32px; }
.nl-spacer[data-size="lg"] { height: 56px; }

/* --- Image + image-duo --- */
.nl-img { margin-top: 28px; }
.nl-img img {
    display: block;
    width: 100%;
    border: 2.5px solid var(--deep-blue);
    border-radius: 14px;
}
.nl-img--full img { width: 100%; }
.nl-img--inset img { max-width: 420px; margin: 0 auto; }
.nl-img figcaption {
    margin-top: 8px;
    font-family: var(--font-scribble);
    font-size: 0.95rem;
    text-align: center;
    color: var(--deep-blue);
    opacity: 0.75;
}
.nl-duo {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 28px;
}
.nl-duo img {
    display: block;
    width: 100%;
    border: 2.5px solid var(--deep-blue);
    border-radius: 14px;
}
.nl-duo figcaption {
    margin-top: 6px;
    font-family: var(--font-scribble);
    font-size: 0.9rem;
    text-align: center;
    color: var(--deep-blue);
    opacity: 0.75;
}

/* --- Video card (poster + play button link) --- */
.nl-vid {
    position: relative;
    display: block;
    margin-top: 28px;
    border-radius: 14px;
    overflow: hidden;
    border: 2.5px solid var(--deep-blue);
    box-shadow: var(--shadow-sm);
    text-decoration: none;
}
.nl-vid img { display: block; width: 100%; }
.nl-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 62px;
    height: 62px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--pop-orange);
    color: #fff;
    border: 2.5px solid var(--deep-blue);
    border-radius: 50%;
    font-size: 1.2rem;
}
.nl-vid-label {
    position: absolute;
    bottom: 12px;
    left: 12px;
    background: var(--deep-blue);
    color: var(--cream);
    font-family: var(--font-head);
    font-weight: 600;
    font-size: 0.85rem;
    padding: 6px 12px;
    border-radius: 999px;
}

/* --- Callout (icon + title + body) --- */
.nl-call {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    margin-top: 28px;
    border: 2.5px solid var(--deep-blue);
    border-radius: 16px;
    box-shadow: var(--shadow-sm);
    padding: 18px 20px;
}
.nl-call-ic {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--deep-blue);
    border-radius: 12px;
}
.nl-call-ic svg,
.nl-call-ic img { width: 24px; height: 24px; }
.nl-call h4 {
    font-family: var(--font-head);
    font-size: 1.1rem;
    color: var(--deep-blue);
    margin: 0 0 4px;
}
.nl-call p {
    font-family: var(--font-body);
    font-size: 0.98rem;
    line-height: 1.5;
    color: var(--deep-blue);
}

/* --- Product block --- */
.nl-product {
    display: flex;
    gap: 18px;
    align-items: center;
    margin-top: 28px;
    border: 2.5px solid var(--deep-blue);
    border-radius: 16px;
    box-shadow: var(--shadow-sm);
    padding: 18px;
}
.nl-product-img {
    flex-shrink: 0;
    width: 104px;
    height: 104px;
    object-fit: cover;
    border: 2px solid var(--deep-blue);
    border-radius: 12px;
}
.nl-product-body h4 {
    font-family: var(--font-head);
    font-size: 1.15rem;
    color: var(--deep-blue);
    margin: 0 0 4px;
}
.nl-product-body p {
    font-family: var(--font-body);
    font-size: 0.98rem;
    line-height: 1.5;
    color: var(--deep-blue);
    margin: 0 0 12px;
}

/* --- CTA link + button row --- */
.nl-cta-wrap { margin-top: 32px; text-align: center; }
.nl-cta {
    display: inline-block;
    font-family: var(--font-head);
    font-weight: 700;
    text-decoration: none;
    background: var(--pop-orange);
    color: #fff;
    border: 2.5px solid var(--deep-blue);
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
    padding: 14px 30px;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.nl-cta:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--deep-blue); }
.nl-cta:active { transform: scale(0.97); box-shadow: 2px 2px 0 var(--deep-blue); }
.nl-cta--sm {
    padding: 10px 20px;
    font-size: 0.92rem;
    box-shadow: 3px 3px 0 var(--deep-blue);
}

.nl-btn-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 28px;
}
.nl-btn-row--left { justify-content: flex-start; }
.nl-btn-row--center { justify-content: center; }
.nl-btn-row--right { justify-content: flex-end; }
.nl-btn {
    display: inline-block;
    font-family: var(--font-head);
    font-weight: 700;
    text-decoration: none;
    padding: 12px 26px;
    border-radius: 12px;
    border: 2.5px solid transparent;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.nl-btn--solid {
    color: #fff;
    border-color: var(--deep-blue);
    box-shadow: var(--shadow-sm);
}
.nl-btn--solid:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--deep-blue); }
.nl-btn--outline { background: transparent; }
.nl-btn--text {
    padding: 8px 4px;
    border-color: transparent;
    text-decoration: underline;
}

/* --- Reply prompt --- */
.nl-reply {
    margin-top: 28px;
    border: 2px dashed var(--energy-blue);
    border-radius: 16px;
    padding: 20px 22px;
}
.nl-reply h4 {
    font-family: var(--font-head);
    font-size: 1.15rem;
    color: var(--deep-blue);
    margin: 0 0 6px;
}
.nl-reply h4 a { color: var(--energy-blue); text-decoration: underline; }
.nl-reply p {
    font-family: var(--font-body);
    font-size: 0.98rem;
    line-height: 1.5;
    color: var(--deep-blue);
}

/* --- Heading block (h2/h3, level-gated in the markup itself) --- */
.nl-h {
    font-family: var(--font-head);
    font-weight: 700;
    color: var(--deep-blue);
    line-height: 1.2;
}
h2.nl-h { font-size: clamp(1.5rem, 3.2vw, 2rem); margin-top: 40px; }
h3.nl-h { font-size: clamp(1.2rem, 2.4vw, 1.5rem); margin-top: 32px; }

/* --- Index page: hero (api/newsletter-index.js) --- */
.nl-hero {
    background: var(--sun-yellow);
    border-bottom: 3px solid var(--deep-blue);
    padding: 72px 5% 56px;
    text-align: center;
}
.nl-hero-inner { max-width: 640px; margin: 0 auto; }
.nl-hero-title {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: clamp(2.2rem, 6vw, 3.6rem);
    line-height: 1.05;
    color: var(--deep-blue);
    margin: 0 0 14px;
}
.nl-hero-dek {
    font-family: var(--font-body);
    font-size: 1.1rem;
    line-height: 1.5;
    color: var(--deep-blue);
    margin: 0 0 28px;
}
.nl-hero-form {
    display: flex;
    gap: 10px;
    max-width: 440px;
    margin: 0 auto;
}
.nl-hero-form input {
    flex: 1;
    min-width: 0;
    padding: 14px 16px;
    border: 2.5px solid var(--deep-blue);
    border-radius: 12px;
    font-family: var(--font-body);
    font-size: 1rem;
    background: var(--cream);
    color: var(--deep-blue);
}
.nl-hero-form input::placeholder { color: rgba(7, 59, 76, 0.5); }
.nl-hero-form button {
    flex-shrink: 0;
    font-family: var(--font-head);
    font-weight: 700;
    white-space: nowrap;
    background: var(--pop-orange);
    color: #fff;
    border: 2.5px solid var(--deep-blue);
    border-radius: 12px;
    padding: 14px 22px;
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.nl-hero-form button:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--deep-blue); }
.nl-hero-form button:disabled { opacity: 0.7; cursor: default; transform: none; box-shadow: var(--shadow-sm); }
.nl-hero-msg {
    margin-top: 14px;
    min-height: 1.4em;
    font-family: var(--font-scribble);
    font-size: 1.05rem;
    color: var(--deep-blue);
}
.nl-hero-msg.is-success { color: var(--energy-blue); }
.nl-hero-msg.is-error { color: var(--soft-red); }

/* --- Index page: archive (feature card + three-up grid) --- */
.nl-archive {
    max-width: var(--container);
    margin: 0 auto;
    padding: 56px 5% 100px;
}
.nl-archive--empty { text-align: center; padding: 90px 5%; }
.nl-empty {
    font-family: var(--font-scribble);
    font-size: 1.2rem;
    color: var(--deep-blue);
}

.nl-feat {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    align-items: center;
    background: #fff;
    border: 2.5px solid var(--deep-blue);
    border-radius: 20px;
    box-shadow: var(--shadow-md);
    padding: 24px;
    margin-bottom: 48px;
}
.nl-feat-body:only-child { grid-column: 1 / -1; }
.nl-feat-cover img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border: 2px solid var(--deep-blue);
    border-radius: 14px;
}
.nl-feat-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-bottom: 14px; }
.nl-feat-title {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: clamp(1.5rem, 3vw, 2.1rem);
    line-height: 1.15;
    margin: 0 0 10px;
}
.nl-feat-title a { color: var(--deep-blue); text-decoration: none; }
.nl-feat-title a:hover { text-decoration: underline; }
.nl-feat-preview {
    font-family: var(--font-body);
    font-size: 1.02rem;
    line-height: 1.55;
    color: var(--deep-blue);
    margin: 0 0 20px;
}

.nl-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}
.nl-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 2.5px solid var(--deep-blue);
    border-radius: 16px;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.nl-card:hover { transform: translate(-3px, -3px); box-shadow: 7px 7px 0 var(--deep-blue); }
.nl-card-cover img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    border-bottom: 2.5px solid var(--deep-blue);
}
.nl-card-body { padding: 18px 20px 22px; }
.nl-card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 10px; }
.nl-card-title {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 1.15rem;
    line-height: 1.25;
    margin: 0 0 8px;
}
.nl-card-title a { color: var(--deep-blue); text-decoration: none; }
.nl-card-title a:hover { text-decoration: underline; }
.nl-card-preview {
    font-family: var(--font-body);
    font-size: 0.94rem;
    line-height: 1.5;
    color: var(--deep-blue);
    opacity: 0.85;
}
.nl-date {
    font-family: var(--font-scribble);
    font-size: 0.88rem;
    color: var(--deep-blue);
    opacity: 0.75;
}

/* --- Newsletter responsive: collapse multi-column layouts, scale masthead --- */
@media (max-width: 680px) {
    .nl-masthead { padding: 44px 6% 34px; }
    .nl-masthead .nl-badge { width: 60px; height: 60px; margin-bottom: 14px; }
    .nl-masthead .nl-badge span { font-size: 0.55rem; }
    .nl-masthead .nl-badge strong { font-size: 1.05rem; }
    .nl-dek { font-size: 1rem; }

    .nl-hero { padding: 52px 6% 40px; }
    .nl-hero-title { margin-bottom: 10px; }
    .nl-hero-dek { margin-bottom: 22px; }

    .nl-duo { grid-template-columns: 1fr; }
    .nl-grid { grid-template-columns: 1fr; }

    .nl-feat { grid-template-columns: 1fr; gap: 20px; padding: 18px; }

    .nl-product { flex-direction: column; align-items: stretch; text-align: center; }
    .nl-product-img { width: 100%; height: 180px; align-self: center; max-width: 260px; }
    .nl-product-body { text-align: left; }
}

/* ==========================================================================
   Shopline platform adjustments (appended for the theme port)
   ========================================================================== */

/* Shopline wraps every section in <div id="shopline-section-..." class="section">,
   which collides with this stylesheet's own .section utility (80px + 5% padding)
   and inset every section by accident. Neutralize the wrapper only — authored
   .section elements inside page content keep their padding. */
[id^="shopline-section-"].section,
[id^="shopline-section-"].section-tight {
    padding: 0;
}

/* The source site's header is a direct child of <body>, so position:sticky pins
   it for the whole page. Shopline's wrapper div would limit sticking to its own
   height; display:contents removes the wrapper box so the header behaves exactly
   like the original. */
[id^="shopline-section-"]:has(> header.site-header) {
    display: contents;
}

/* Base theme CSS no longer loads on Sooz pages; keep the layout's
   skip-to-content link visually hidden until focused (it was styled there). */
.skip-to-content-link {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}
.skip-to-content-link:focus {
    position: fixed;
    top: 8px;
    left: 8px;
    width: auto;
    height: auto;
    margin: 0;
    padding: 8px 14px;
    clip: auto;
    background: var(--cream);
    color: var(--ink);
    border: 2px solid var(--deep-blue);
    border-radius: 8px;
    z-index: 100000;
}

/* Shopline wraps each block in <div id="shopline-block-...">. On the storefront
   sooz/unwrap.js dissolves them (restoring original siblingship); until it runs
   — and permanently inside the theme editor, where the wrappers drive block
   selection — display:contents keeps flex/grid layouts correct... */
[id^="shopline-block-"] {
    display: contents;
}

/* ...and these wrapper-scoped rules re-create the sibling-selector styling the
   wrappers would otherwise break (they stop matching once unwrap.js has run). */
.route-track [id^="shopline-block-"] .station { margin-bottom: 46px; }
.route-track [id^="shopline-block-"]:last-of-type .station { margin-bottom: 0; }
@media (min-width: 860px) {
    .route-track [id^="shopline-block-"] .station { margin-bottom: 64px; }
    .route-track [id^="shopline-block-"]:nth-of-type(odd) .station { margin-left: 0; margin-right: auto; }
    .route-track [id^="shopline-block-"]:nth-of-type(even) .station { margin-left: auto; margin-right: 0; }
}
.compare-table [id^="shopline-block-"] .compare-row { border-bottom: 1px solid var(--hairline); }
.compare-table [id^="shopline-block-"]:last-of-type .compare-row { border-bottom: none; }


/* 2026-08-31 tweak: retire the cream wave that dripped from the footer's top
   edge over whatever section sat above it (the ticker on home, the waitlist
   elsewhere). */
footer.site-footer::before { content: none; }


/* 2026-08-31: footer credit line ("Powered by …"). Written as a.class so the
   base theme's a:not(.button) paint on commerce templates can't recolor it. */
footer.site-footer .footer-credit-line { margin-top: 10px; font-size: 0.8rem; opacity: 0.7; }
a.footer-credit { color: var(--cream); text-decoration: none; border-bottom: 1px dashed rgba(255, 249, 240, 0.5); padding-bottom: 1px; }
a.footer-credit:hover { color: var(--sun-yellow); border-bottom-color: currentColor; }


/* ---------- Heading accent ----------
   Headings are authored as plain text plus a named word; the template wraps
   that word in <span class="hl">. Several headings already had a bare
   `<selector> span { color: … }` rule and those still match, since this is
   still a span — this rule exists for the ones that never had one
   (.section-title, .relief-title, brand-story), and so any heading given an
   accent word behaves the same way without needing a new selector each time.

   It replaces an inline style="color: var(--pop-orange)" that used to live in
   the how-it-works default, which is exactly the kind of markup a merchant
   cannot retype after editing the field. */
.hl { color: var(--pop-orange); }

/* ---------- Merchant phone controls ----------
   Leo, Sep 14: "in mobile we have to be able to have different shorter text, so
   in settings we have to add option mobile text, and hide on mobile toggle. so
   this kind of could be managed by client easily."

   Shared utilities rather than a copy per section: three of the sections using
   them (newsletter-signup, brand-story, how-it-works) have no stylesheet of
   their own, and the behaviour is identical everywhere.

   Paired copy: a section renders its body twice and tags the desktop one
   .sooz-m-desktop ONLY when a mobile override exists — otherwise the single
   paragraph is untagged and shows at every width, so a section that does not
   opt in is unaffected. 859px matches the sections' own desktop breakpoint.

   .sooz-hide-mobile is !important because it has to beat each section's own
   display rules (flex/grid) on its root element. */
.sooz-m-mobile { display: none; }

@media (max-width: 859px) {
    .sooz-m-desktop { display: none; }
    .sooz-m-mobile { display: block; }
    .sooz-hide-mobile { display: none !important; }
}

/* ---------- Cookie banner (consent.js) ----------
   Bottom-left card on desktop, full-width strip on phones. Above every popup
   (the club card overlay is 10000, the referral one 10500) so an opt-in
   visitor can always answer it, and below the droplet cursor (100001). */
.sooz-consent {
    position: fixed;
    left: 20px;
    bottom: 20px;
    z-index: 100000;
    width: min(420px, calc(100vw - 40px));
    box-sizing: border-box;
    padding: 20px 20px 18px;
    background: var(--cream);
    color: var(--deep-blue);
    border: 2px solid var(--deep-blue);
    border-radius: 18px;
    box-shadow: var(--shadow-md);
    font-family: var(--font-body);
    font-size: 0.92rem;
    line-height: 1.45;
    text-align: left;
}
.sooz-consent__title {
    margin: 0 0 6px;
    font-family: var(--font-head);
    font-size: 1.2rem;
    font-weight: 600;
    line-height: 1.2;
    color: inherit;
}
.sooz-consent__text { margin: 0; }
.sooz-consent__text a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.sooz-consent__prefs {
    display: grid;
    gap: 10px;
    margin: 14px 0 2px;
    padding-top: 12px;
    border-top: 1px dashed rgba(7, 59, 76, 0.3);
}
.sooz-consent__prefs[hidden] { display: none; }
.sooz-consent__row { display: flex; gap: 10px; align-items: flex-start; }
.sooz-consent__row input {
    flex: none;
    width: 18px;
    height: 18px;
    margin: 2px 0 0;
    accent-color: var(--pop-orange);
}
.sooz-consent__row-text { display: grid; gap: 1px; }
.sooz-consent__row-text span { font-size: 0.84rem; opacity: 0.8; }
.sooz-consent__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}
.sooz-consent__actions .btn {
    flex: 1 1 auto;
    padding: 9px 14px;
    font-size: 0.95rem;
}
.sooz-consent__actions .btn-ghost { border-radius: var(--radius-blob); }

@media (max-width: 540px) {
    .sooz-consent {
        left: 10px;
        right: 10px;
        bottom: 10px;
        width: auto;
        padding: 16px 16px 14px;
    }
}

/* Footer legal links: the store's policies, then the button that reopens the
   banner, styled as one line that wraps between links, never inside one. */
footer.site-footer .footer-privacy-line {
    margin-top: 8px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px 16px;
}
a.footer-privacy-link,
.footer-privacy-link {
    white-space: nowrap;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}
.footer-privacy-link:hover { color: var(--sun-yellow); }

/* Store policies (templates/policy.html): the page hero, then the reading
   column of the text pages. Policy text comes from Settings → Policies. */
.sooz-policy {
    max-width: 820px;
    margin: 0 auto;
    padding: 10px 5% 80px;
    color: var(--muted);
}
.sooz-policy h2 {
    font-size: clamp(1.35rem, 3vw, 1.75rem);
    color: var(--deep-blue);
    margin: 44px 0 14px;
}
.sooz-policy h3 { font-size: 1.15rem; color: var(--deep-blue); margin: 28px 0 10px; }
.sooz-policy p,
.sooz-policy li { font-size: 1.05rem; line-height: 1.75; }
.sooz-policy p { margin: 0 0 16px; }
.sooz-policy ul,
.sooz-policy ol { margin: 0 0 16px 26px; padding: 0; }
.sooz-policy ul { list-style: disc; }
.sooz-policy ol { list-style: decimal; }
.sooz-policy li { margin-bottom: 6px; }
.sooz-policy li > p { margin: 0; }
.sooz-policy strong { color: var(--deep-blue); }
.sooz-policy a { color: var(--energy-blue); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.sooz-policy table {
    width: 100%;
    border-collapse: collapse;
    margin: 12px 0 24px;
    font-size: 0.95rem;
    line-height: 1.55;
}
.sooz-policy th,
.sooz-policy td {
    text-align: left;
    vertical-align: top;
    padding: 10px 12px;
    border-bottom: 1px solid rgba(7, 59, 76, 0.15);
}
.sooz-policy thead th { color: var(--deep-blue); border-bottom: 2px solid var(--deep-blue); }
.sooz-policy td:first-child { color: var(--deep-blue); font-weight: 700; }
/* Phones: each row becomes a small card, its cells labelled from the header
   (data-label, set by scripts/publish-policies.mjs). */
@media (max-width: 640px) {
    .sooz-policy thead { display: none; }
    .sooz-policy table,
    .sooz-policy tbody,
    .sooz-policy tr,
    .sooz-policy td { display: block; width: 100%; }
    .sooz-policy tr { padding: 10px 0; border-bottom: 1px solid rgba(7, 59, 76, 0.15); }
    .sooz-policy td { padding: 2px 0; border: 0; }
    .sooz-policy td[data-label]:not(:first-child)::before {
        content: attr(data-label) ": ";
        font-weight: 700;
        color: var(--deep-blue);
    }
}