/* ==========================================================
   Squishbao — Halloween Drop · herfsteditie
   Schemerlucht, vallende bladeren en snoepzachte vormen.
   Ritme: donkere nachtsecties wisselen af met warm perkament,
   verbonden door zachte "squishy" golfranden.
   ========================================================== */

:root {
    --night: #160C10;
    --night-2: #1E1017;
    --plum: #241320;
    --plum-2: #321A2C;
    --plum-3: #4A2640;
    --pumpkin: #FF7A1A;
    --pumpkin-hi: #FF9A45;
    --amber: #FFB23F;
    --candy: #FFD34D;
    --maple: #D9432B;
    --rust: #A8471E;
    --moss: #8FAF4E;
    --slime: #9BE564;
    --lilac: #C9B6F0;
    --blood: #E2445C;
    --ok: #1E8A4A;
    --cream: #FFF4E4;
    --cream-2: #F9E6CC;
    --paper: #FFFBF4;
    --ink: #2A1418;
    --ink-soft: #6F5257;
    --on-dark: #FFF1E4;
    --on-dark-soft: #CDB3AE;
    --line-dark: rgba(255, 214, 170, .12);
    --line-light: rgba(42, 20, 24, .12);

    --radius-s: 14px;
    --radius: 24px;
    --radius-l: 34px;
    --maxw: 1240px;
    --gutter: clamp(16px, 4vw, 40px);
    --edge: 26px;
    --shadow: 0 22px 44px -22px rgba(60, 18, 20, .5);
    --shadow-warm: 0 30px 60px -30px rgba(168, 71, 30, .55);
    --ease-squish: cubic-bezier(.34, 1.56, .64, 1);
    --ease-out: cubic-bezier(.2, .9, .3, 1);

    --font-display: 'Lilita One', 'Arial Rounded MT Bold', system-ui, sans-serif;
    --font-body: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;

    /* Illustraties als data-URI (geen extra requests) */
    --leaf-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l1.6 3.6 2.2-1-.6 4 3.2-1.6.2 2.4 2.4.2-2 2.2 1.4 1.2-4.6 1.8.6 1.8-4.2-.6h-.4l-4.2.6.6-1.8-4.6-1.8 1.4-1.2-2-2.2 2.4-.2.2-2.4 3.2 1.6-.6-4 2.2 1zM11.6 16h.8v6h-.8z'/%3E%3C/svg%3E");
    --wave-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 26' preserveAspectRatio='none'%3E%3Cpath d='M0 26V14C20 2 60 2 80 14s60 12 80 0v12z'/%3E%3C/svg%3E");
    --scallop-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 26' preserveAspectRatio='none'%3E%3Cpath d='M0 26C0 12 8 4 20 4s20 8 20 22c0-14 8-22 20-22s20 8 20 22z'/%3E%3C/svg%3E");
    /* Omgekeerde vormen: alleen het stukje bóven de golf, voor het randstrookje */
    --wave-notch: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 26' preserveAspectRatio='none'%3E%3Cpath d='M0 0h160v14c-20-12-60-12-80 0s-60 12-80 0z'/%3E%3C/svg%3E");
    --scallop-notch: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 26' preserveAspectRatio='none'%3E%3Cpath d='M0 0h80v26c0-14-8-22-20-22s-20 8-20 22c0-14-8-22-20-22S0 12 0 26z'/%3E%3C/svg%3E");
    /* Vallende blaadjes (CSS-variant, geen WebGL) */
    --leaf-a: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23E8561C' d='M12 2l1.6 3.6 2.2-1-.6 4 3.2-1.6.2 2.4 2.4.2-2 2.2 1.4 1.2-4.6 1.8.6 1.8-4.2-.6h-.4l-4.2.6.6-1.8-4.6-1.8 1.4-1.2-2-2.2 2.4-.2.2-2.4 3.2 1.6-.6-4 2.2 1zM11.6 16h.8v6h-.8z'/%3E%3C/svg%3E");
    --leaf-b: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23F6B13D' d='M12 2l1.6 3.6 2.2-1-.6 4 3.2-1.6.2 2.4 2.4.2-2 2.2 1.4 1.2-4.6 1.8.6 1.8-4.2-.6h-.4l-4.2.6.6-1.8-4.6-1.8 1.4-1.2-2-2.2 2.4-.2.2-2.4 3.2 1.6-.6-4 2.2 1zM11.6 16h.8v6h-.8z'/%3E%3C/svg%3E");
    --leaf-c: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23C8321E' d='M12 1.5C17.5 5 19 11 12 22.5 5 11 6.5 5 12 1.5z'/%3E%3C/svg%3E");
    --leaf-white: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffffff' fill-opacity='.3' d='M12 2l1.6 3.6 2.2-1-.6 4 3.2-1.6.2 2.4 2.4.2-2 2.2 1.4 1.2-4.6 1.8.6 1.8-4.2-.6h-.4l-4.2.6.6-1.8-4.6-1.8 1.4-1.2-2-2.2 2.4-.2.2-2.4 3.2 1.6-.6-4 2.2 1zM11.6 16h.8v6h-.8z'/%3E%3C/svg%3E");
    --squiggle-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 124 14'%3E%3Cpath d='M2 7c8-8 16 8 24 0s16 8 24 0 16 8 24 0 16 8 24 0 16 8 24 0' fill='none' stroke='black' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E");
    --leaf-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cg fill='%23A8471E' fill-opacity='.075'%3E%3Cpath transform='translate(18 20) rotate(-18 24 24) scale(2)' d='M12 2l1.6 3.6 2.2-1-.6 4 3.2-1.6.2 2.4 2.4.2-2 2.2 1.4 1.2-4.6 1.8.6 1.8-4.2-.6h-.4l-4.2.6.6-1.8-4.6-1.8 1.4-1.2-2-2.2 2.4-.2.2-2.4 3.2 1.6-.6-4 2.2 1zM11.6 16h.8v6h-.8z'/%3E%3Cpath transform='translate(150 112) rotate(32 24 24) scale(2.2)' d='M12 1.5C17.5 5 19 11 12 22.5 5 11 6.5 5 12 1.5z'/%3E%3Cpath transform='translate(44 160) rotate(62 24 24) scale(1.5)' d='M12 2l1.6 3.6 2.2-1-.6 4 3.2-1.6.2 2.4 2.4.2-2 2.2 1.4 1.2-4.6 1.8.6 1.8-4.2-.6h-.4l-4.2.6.6-1.8-4.6-1.8 1.4-1.2-2-2.2 2.4-.2.2-2.4 3.2 1.6-.6-4 2.2 1zM11.6 16h.8v6h-.8z'/%3E%3C/g%3E%3C/svg%3E");
    --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .2 0 0 0 0 .1 0 0 0 .1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    --treeline: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 180'%3E%3Ccircle cx='1180' cy='96' r='54' fill='%23FF7A1A' opacity='.16'/%3E%3Ccircle cx='1262' cy='94' r='34' fill='%23FF7A1A' opacity='.12'/%3E%3Cpath fill='%23160C10' d='M0 118C160 94 300 90 460 108s300 30 460 12 320-30 480-18 160 14 200 12V180H0z'/%3E%3Cellipse cx='1180' cy='98' rx='21' ry='15' fill='%23160C10'/%3E%3Cpath d='M1178 84c0-6 3-9 7-10' stroke='%23160C10' stroke-width='3' fill='none'/%3E%3Cpath fill='%23FFB24A' d='M1168 95l5-7 5 7zM1182 95l5-7 5 7zM1167 102q13 9 26 0l-4 1-3-2-3 3-3-3-3 3-3-3-3 2z'/%3E%3Cellipse cx='1262' cy='95' rx='14' ry='10' fill='%23160C10'/%3E%3Cpath fill='%23FFB24A' d='M1255 93l3-5 3 5zM1264 93l3-5 3 5zM1255 98q7 5 14 0z'/%3E%3Cg fill='none' stroke='%23160C10' stroke-linecap='round'%3E%3Cpath stroke-width='14' d='M88 180C92 140 86 100 96 40'/%3E%3Cpath stroke-width='7' d='M94 100C80 86 64 74 50 52M95 80C110 64 124 54 142 32M96 58C90 42 84 30 80 12'/%3E%3Cpath stroke-width='3.5' d='M50 52L38 34M50 52L32 54M142 32L148 14M142 32L162 28M80 12L72 0M80 12L92 2M66 72L50 70M118 56L132 60'/%3E%3Cpath stroke-width='7' d='M330 180C332 150 326 130 334 96'/%3E%3Cpath stroke-width='3.5' d='M332 124L314 106M333 110L352 92M334 96L328 78M334 96L344 82'/%3E%3Cpath stroke-width='18' d='M1502 180C1498 130 1508 90 1496 20'/%3E%3Cpath stroke-width='8' d='M1500 110C1520 92 1540 80 1566 58M1498 84C1480 66 1462 54 1436 40M1497 50C1506 34 1512 20 1520 4'/%3E%3Cpath stroke-width='4' d='M1566 58L1580 40M1566 58L1592 60M1436 40L1426 22M1436 40L1414 44M1520 4L1532 -4M1540 78L1556 84M1462 56L1450 64'/%3E%3C/g%3E%3C/svg%3E");
    --far-hills: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 220'%3E%3Cpath fill='%233A1830' fill-opacity='.85' d='M0 150C200 110 380 120 560 140s360 10 540-20 380-30 500 0V220H0z'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }
html {
    -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 90px;
    scrollbar-color: var(--pumpkin) var(--night); interpolate-size: allow-keywords;
    overflow-x: hidden;
}
body {
    margin: 0;
    background: var(--night);
    color: var(--on-dark);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;
}
::selection { background: var(--pumpkin); color: var(--ink); }
img, svg { max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }

h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 400; line-height: 1.05; margin: 0 0 .5em; letter-spacing: .005em; }
h1 { font-size: clamp(2.8rem, 7vw, 5.8rem); }
h2 { font-size: clamp(2rem, 4.2vw, 3.4rem); }
h3 { font-size: 1.45rem; }
p { margin: 0 0 1em; }

.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: -999px; top: 8px; background: var(--candy); color: var(--ink); padding: 8px 14px; border-radius: 8px; z-index: 130; }
.skip-link:focus { left: 8px; }
:focus-visible { outline: 3px solid var(--candy); outline-offset: 3px; border-radius: 6px; }

/* Gesplitste koppen (Splitting.js) */
.split-vis { display: inline; }
.split-vis .char { transition: translate .45s var(--ease-squish), scale .45s var(--ease-squish); transform-origin: 50% 100%; }
.split-vis .char:hover { translate: 0 -.1em; scale: 1.14 .88; }
.splitting .whitespace { display: inline; }

/* ---------- Kleine bouwstenen ---------- */
.eyebrow {
    display: inline-flex; align-items: center; gap: .55em;
    font-weight: 800; font-size: .78rem; letter-spacing: .16em; text-transform: uppercase;
    color: var(--amber); margin-bottom: 1rem;
}
.eyebrow:not(:has(.dot))::before {
    content: ""; width: 1.25em; height: 1.25em; flex-shrink: 0; background: currentColor;
    -webkit-mask: var(--leaf-mask) center / contain no-repeat; mask: var(--leaf-mask) center / contain no-repeat;
    rotate: -20deg; animation: leaf-sway 3.2s ease-in-out infinite;
}
.eyebrow--dark { color: var(--rust); }
.eyebrow .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--slime); box-shadow: 0 0 0 4px rgba(155, 229, 100, .2); animation: pulse 1.8s infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 9px rgba(155, 229, 100, 0); } }
@keyframes leaf-sway { 50% { rotate: 14deg; } }

.pill {
    display: inline-flex; align-items: center; padding: .25em .7em; border-radius: 99px;
    font-family: var(--font-body); font-size: .72rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
    background: var(--pumpkin); color: var(--ink); white-space: nowrap;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 2px 0 rgba(0, 0, 0, .18);
}
.pill--hot { background: linear-gradient(180deg, #F05A6F, var(--blood)); color: #fff; }
.pill--gold { background: linear-gradient(180deg, #FFE07A, var(--candy)); color: var(--ink); }
.pill--slime { background: linear-gradient(180deg, #BDF08F, var(--slime)); color: var(--ink); }
.pill--lilac { background: linear-gradient(180deg, #DDD0F7, var(--lilac)); color: var(--ink); }

/* Gummy-knoppen: glans bovenop, dikte eronder, knijp bij indrukken */
.btn {
    --bg: var(--pumpkin); --fg: var(--ink); --mx: 0px; --my: 0px;
    --depth: color-mix(in srgb, var(--bg) 55%, #3B0A00);
    position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .5em;
    padding: .9em 1.55em; border: 0; border-radius: 99px; cursor: pointer; isolation: isolate;
    background: linear-gradient(180deg, color-mix(in srgb, var(--bg) 72%, #fff) 0%, var(--bg) 48%, color-mix(in srgb, var(--bg) 90%, #000) 100%);
    color: var(--fg); text-decoration: none;
    font-weight: 800; font-size: 1rem; line-height: 1.1; white-space: nowrap;
    box-shadow: 0 5px 0 0 var(--depth), 0 14px 22px -10px color-mix(in srgb, var(--bg) 70%, transparent), inset 0 -3px 0 rgba(0, 0, 0, .08);
    translate: var(--mx) var(--my);
    transition: transform .35s var(--ease-squish), box-shadow .2s, filter .2s;
}
.btn::after {
    content: ""; position: absolute; z-index: -1; top: 4px; left: 16%; right: 16%; height: 36%; border-radius: 99px;
    background: linear-gradient(rgba(255, 255, 255, .6), rgba(255, 255, 255, 0)); pointer-events: none;
}
.btn:hover { transform: translateY(-2px) scale(1.03); filter: saturate(1.1) brightness(1.04); }
.btn:active { transform: translateY(4px) scale(1.07, .9); box-shadow: 0 1px 0 0 var(--depth), 0 6px 12px -8px color-mix(in srgb, var(--bg) 70%, transparent); transition-duration: .08s; }
.btn--lg { padding: 1.08em 2em; font-size: 1.08rem; }
.btn--small { padding: .62em 1.05em; font-size: .88rem; box-shadow: 0 4px 0 0 var(--depth), inset 0 -2px 0 rgba(0, 0, 0, .08); }
.btn--small:active { box-shadow: 0 1px 0 0 var(--depth); }
.btn--block { width: 100%; }
.btn--grow { flex: 1; }
.btn--ghost, .btn--ghost-dark { background: transparent; box-shadow: inset 0 0 0 2px var(--ring); filter: none; }
.btn--ghost::after, .btn--ghost-dark::after { display: none; }
.btn--ghost { --fg: var(--on-dark); --ring: rgba(255, 241, 228, .35); }
.btn--ghost:hover { background: rgba(255, 241, 228, .1); --ring: var(--on-dark); }
.btn--ghost:active, .btn--ghost-dark:active { box-shadow: inset 0 0 0 2px var(--ring); }
.btn--ghost-dark { --fg: var(--ink); --ring: var(--ink); }
.btn--ghost-dark:hover { background: var(--ink); color: var(--cream); }
.btn--light { --bg: var(--cream); --fg: var(--ink); --depth: #B98F6A; }
.btn--light:hover { --bg: #fff; }
.btn--dark { --bg: var(--ink); --fg: var(--cream); --depth: #000; }
.btn--dark::after { opacity: .25; }
.btn.is-added { --bg: var(--slime); --depth: #4E8F2C; animation: jelly .7s both; }

.link-arrow { font-weight: 800; text-decoration: none; background: linear-gradient(var(--pumpkin), var(--pumpkin)) 0 100% / 100% 3px no-repeat; padding-bottom: 3px; white-space: nowrap; transition: background-size .3s; }
.link-arrow:hover { background-size: 100% 100%; color: var(--ink); padding-inline: 4px; border-radius: 4px; }
.link-arrow span { display: inline-block; transition: transform .3s var(--ease-squish); }
.link-arrow:hover span { transform: translateX(5px); }

.icon-btn {
    position: relative; display: inline-grid; place-items: center; width: 44px; height: 44px;
    border: 0; border-radius: 50%; background: transparent; cursor: pointer; color: inherit; text-decoration: none;
    transition: background .2s, transform .35s var(--ease-squish);
}
.icon-btn:hover { background: rgba(255, 241, 228, .1); transform: scale(1.08); }

.stars { display: inline-flex; gap: 1px; vertical-align: middle; }
.stars .on { color: var(--amber); filter: drop-shadow(0 1px 0 rgba(168, 71, 30, .4)); }
.stars .off { color: rgba(128, 100, 100, .3); }
.stars svg { display: block; }

/* Gedeelde keyframes */
@keyframes jelly {
    0% { transform: scale(1, 1); }
    25% { transform: scale(1.16, .84); }
    40% { transform: scale(.88, 1.12); }
    55% { transform: scale(1.06, .95); }
    70% { transform: scale(.97, 1.03); }
    85% { transform: scale(1.01, .99); }
    100% { transform: scale(1, 1); }
}
@keyframes blob-morph {
    0%, 100% { border-radius: 42% 58% 62% 38% / 45% 42% 58% 55%; }
    33% { border-radius: 58% 42% 40% 60% / 55% 60% 40% 45%; }
    66% { border-radius: 50% 50% 56% 44% / 38% 52% 48% 62%; }
}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes bob { 50% { transform: translateY(-16px) rotate(-3deg); } }
@keyframes fx-unhide { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* ---------- Aankondigingsbalk ---------- */
.announce {
    position: relative; color: var(--ink); font-size: .88rem; font-weight: 700; text-align: center;
    letter-spacing: .5px;
    background: linear-gradient(90deg, var(--maple), var(--pumpkin) 25%, var(--amber) 50%, var(--pumpkin) 75%, var(--maple)) 0 0 / 200% 100%;
    animation: announce-shine 12s linear infinite;
}
@keyframes announce-shine { to { background-position: -200% 0; } }
.announce__track { position: relative; height: 38px; overflow: hidden; }
.announce p {
    position: absolute; inset: 0; margin: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px .6em;
    opacity: 0; transform: translateY(100%) scaleY(.6); transition: opacity .45s, transform .55s var(--ease-squish); padding-inline: 20px;
}
.announce p.is-active { opacity: 1; transform: none; }
.announce p.is-leaving { opacity: 0; transform: translateY(-100%) scaleY(.6); }
/* Op erg smalle schermen kan de langste aankondiging ("The Boo-Bao Drop 2026 disappears
   on 31 October") niet altijd op één regel: laat 'm dan netjes naar een tweede (of soms
   derde) regel wikkelen in plaats van tegen de rand te plakken of eraf te lopen, en geef
   de balk daar ruim voldoende hoogte zodat niets wordt afgesneden. */
@media (max-width: 480px) {
    .announce__track { height: 60px; }
    .announce p { padding-inline: 20px; font-size: .78rem; line-height: 1.35; }
}
@media (max-width: 360px) {
    .announce__track { height: 68px; }
}

/* ---------- Header ---------- */
.site-header {
    position: sticky; top: env(safe-area-inset-top, 0px); z-index: 40;
    background: rgba(22, 12, 16, .94);
    border-bottom: 1px solid var(--line-dark);
    transition: background .3s, box-shadow .3s;
}
/* De glazen waas is alleen voor muis/trackpad-schermen: op een sticky balk moet die op elk
   scrollframe opnieuw worden getekend, en dat is op telefoons (vooral met touch) de belangrijkste
   reden waarom snel scrollen hapert. Zonder fijne pointer (dus zowat elke telefoon/tablet) krijgt
   de header gewoon een effen, iets dekkendere achtergrond — oogt bijna hetzelfde, kost bijna niets. */
@media (hover: hover) and (pointer: fine) {
    .site-header { background: rgba(22, 12, 16, .82); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
}
.site-header::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(255, 178, 63, .55), transparent);
    opacity: 0; transition: opacity .3s;
}
.site-header.is-scrolled { background: rgba(22, 12, 16, .9); box-shadow: 0 16px 40px -24px rgba(0, 0, 0, .8); }
.site-header.is-scrolled::after { opacity: 1; }
.site-header__inner { display: flex; align-items: center; gap: 24px; height: 74px; }
.logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; flex-shrink: 0; }
.logo-mark { width: 44px; height: 44px; transform-origin: 50% 90%; transition: transform .5s var(--ease-squish); filter: drop-shadow(0 4px 10px rgba(255, 122, 26, .35)); }
.logo:hover .logo-mark { animation: jelly .8s both; }
.logo__text { font-family: var(--font-display); font-size: 1.6rem; line-height: .9; display: flex; flex-direction: column; }
.logo__text small { font-family: var(--font-body); font-size: .62rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: var(--amber); margin-top: 4px; }

.site-nav { position: relative; display: flex; gap: 4px; margin-inline: auto; }
.site-nav a {
    position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px; border-radius: 99px;
    text-decoration: none; font-weight: 700; font-size: .95rem; color: var(--on-dark-soft); transition: color .2s, background .2s;
}
.site-nav a:hover, .site-nav a.is-active { color: var(--on-dark); background: rgba(255, 241, 228, .08); }
.site-nav.has-blob a:hover { background: transparent; }
.nav-blob {
    position: absolute; z-index: 0; top: 0; left: 0; height: 100%; width: 0; border-radius: 99px; opacity: 0; pointer-events: none;
    background: linear-gradient(180deg, rgba(255, 178, 63, .22), rgba(255, 122, 26, .12));
    box-shadow: inset 0 0 0 1px rgba(255, 178, 63, .3), 0 8px 20px -10px rgba(255, 122, 26, .6);
}
.site-nav .pill { font-size: .6rem; padding: .15em .5em; }
.site-header__actions { display: flex; gap: 4px; }
.cart-btn__count {
    position: absolute; top: 3px; right: 1px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 99px;
    background: linear-gradient(180deg, var(--amber), var(--pumpkin)); color: var(--ink); font-size: .7rem; font-weight: 800; display: grid; place-items: center;
    box-shadow: 0 0 0 2px var(--night); transition: transform .35s var(--ease-squish);
}
.cart-btn__count.bump { transform: scale(1.5); }
.nav-toggle { display: none; }

@media (max-width: 1000px) {
    .nav-toggle { display: inline-grid; }
    .site-header__inner { gap: 8px; }
    .logo { margin-inline: auto; }
    .site-nav {
        position: fixed; inset: calc(112px + env(safe-area-inset-top, 0px)) 0 auto 0; margin: 0;
        flex-direction: column; gap: 0; padding: 12px var(--gutter) 24px;
        background: linear-gradient(180deg, var(--plum), var(--night)); border-bottom: 1px solid var(--line-dark);
        transform: translateY(-12px); opacity: 0; pointer-events: none; transition: .3s var(--ease-out);
    }
    .site-nav.is-open { transform: none; opacity: 1; pointer-events: auto; }
    .site-nav a { padding: 14px 8px; border-radius: 0; font-size: 1.1rem; border-bottom: 1px solid rgba(255, 241, 228, .06); }
    .site-header__actions .icon-btn:first-child { display: none; }
    .nav-blob { display: none; }
}

/* ---------- Secties + zachte golfranden ---------- */
.section { --pt: clamp(64px, 9vw, 120px); padding-block: var(--pt); background: var(--night); position: relative; }
.section--tight { --pt: clamp(32px, 5vw, 56px); }
.section--night { background: var(--plum); }
.section--plum { background: radial-gradient(900px 400px at 50% 0%, rgba(217, 67, 43, .16), transparent 70%), linear-gradient(180deg, var(--plum-2), var(--plum)); }
.section--cream, .page-home #shop, .page-home #faq, .page-home .section:has(.reviews),
.page-product .section:not(.section--cream), .page-collection .section:not(.section--cream), .page-checkout .section:not(.section--cream), .page-order-done .section:not(.section--cream) { color: var(--ink); }
.section--cream { background: var(--leaf-pattern), var(--grain), radial-gradient(900px 500px at 85% 0%, rgba(255, 178, 63, .22), transparent 60%), var(--cream); }
.page-home #shop, .page-home #faq, .page-home .section:has(.reviews),
.page-product .section:not(.section--cream), .page-collection .section:not(.section--cream), .page-checkout .section:not(.section--cream), .page-order-done .section:not(.section--cream) {
    background: radial-gradient(800px 480px at 10% 0%, rgba(255, 255, 255, .5), transparent 60%), var(--cream-2);
}

/* Zachte golfrand bovenaan elke sectie: een dun strookje in de kleur van de vórige sectie.
   Bewust géén mask op de sectie zelf — dat maakte van elke sectie een dure render-laag
   die bij snel scrollen telkens opnieuw getekend moest worden. */
main > section:not(:first-child), .site-footer { padding-top: max(var(--pt, 0px), var(--edge)); }
main > section:not(:first-child)::before, .site-footer::before {
    content: ""; position: absolute; z-index: 4; top: 0; left: 0; right: 0; height: var(--edge); pointer-events: none;
    background: var(--prev-color, transparent);
    -webkit-mask: var(--edge-shape, var(--wave-notch)) 0 0 / var(--edge-w, 320px) 100% repeat-x;
    mask: var(--edge-shape, var(--wave-notch)) 0 0 / var(--edge-w, 320px) 100% repeat-x;
}
main > section:nth-child(even)::before, .site-footer::before { --edge-shape: var(--scallop-notch); --edge-w: 64px; }

/* Kleur van de ónderkant van een sectie; fx.js geeft die door aan de volgende sectie. */
.section, .hero, .usps, .page-hero, .site-footer { --edge-color: var(--night); }
.section--night, .section--plum, .squish-test { --edge-color: var(--plum); }
.section--cream { --edge-color: var(--cream); }
.page-home #shop, .page-home #faq, .page-home .section:has(.reviews),
.page-product .section:not(.section--cream), .page-collection .section:not(.section--cream), .page-checkout .section:not(.section--cream), .page-order-done .section:not(.section--cream) { --edge-color: var(--cream-2); }
.promo-band { --edge-color: #F0601E; }
.newsletter { --edge-color: #321528; }

.section-head { max-width: 660px; margin: 0 auto clamp(36px, 5vw, 60px); text-align: center; }
.section-head h2::after, .section-head--row h2::after {
    content: ""; display: block; width: 104px; height: 12px; margin: .3em auto 0; background: var(--pumpkin);
    -webkit-mask: var(--squiggle-mask) center / contain no-repeat; mask: var(--squiggle-mask) center / contain no-repeat;
}
.section-head p:last-child { color: inherit; opacity: .78; font-size: 1.1rem; margin: 0; }
.section-head--row { max-width: none; display: flex; align-items: end; justify-content: space-between; gap: 20px; text-align: left; flex-wrap: wrap; }
.section-head--row h2 { margin: 0; }
.section-head--row h2::after { margin-left: 0; }

/* ---------- 1. Hero: herfstschemering ---------- */
.hero {
    position: relative; overflow: hidden; isolation: isolate;
    background:
        radial-gradient(900px 520px at 76% 92%, rgba(255, 122, 26, .42), transparent 62%),
        radial-gradient(1100px 620px at 68% 8%, rgba(120, 44, 108, .38), transparent 60%),
        linear-gradient(180deg, #0F070C 0%, #241020 40%, #4A1826 72%, #7E2C22 100%);
}
/* Treeline schaalt proportioneel mee (1600×180), zodat bomen en pompoenen altijd in beeld zijn */
.hero::before, .page-hero::before {
    content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: max(124px, 11.25vw); z-index: 0; pointer-events: none;
    background: var(--treeline) left bottom / max(1100px, 100%) 100% no-repeat;
}
.hero__sky { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.hero__sky::before {
    content: ""; position: absolute; left: 0; right: 0; bottom: 70px; height: 220px;
    background: var(--far-hills) 30% bottom / 1600px 220px repeat-x;
}
.hero__sky::after, .page-hero::after {
    content: ""; position: absolute; left: -30%; right: -30%; bottom: 40px; height: 42%; pointer-events: none;
    background:
        radial-gradient(40% 50% at 30% 60%, rgba(255, 214, 190, .12), transparent 70%),
        radial-gradient(35% 45% at 70% 55%, rgba(230, 190, 255, .09), transparent 70%),
        radial-gradient(30% 40% at 50% 80%, rgba(255, 170, 110, .1), transparent 70%);
    filter: blur(6px); animation: fog-drift 26s ease-in-out infinite alternate;
}
@keyframes fog-drift { to { transform: translateX(12%) scaleY(1.15); } }
.moon {
    position: absolute; top: 8%; right: 6%; width: clamp(110px, 16vw, 230px); aspect-ratio: 1; border-radius: 50%;
    background: radial-gradient(circle at 36% 34%, #FFF4DA, #FFD490 40%, #F7A24C 78%, #E27A2C);
    box-shadow: 0 0 90px 30px rgba(255, 160, 80, .3), 0 0 260px 100px rgba(255, 120, 60, .12), inset -18px -14px 40px rgba(170, 70, 20, .35);
}
.moon::after { content: ""; position: absolute; width: 16%; height: 16%; top: 48%; left: 28%; border-radius: 50%; background: rgba(190, 100, 40, .22); box-shadow: 50px -36px 0 -3px rgba(190, 100, 40, .18), 36px 26px 0 -5px rgba(190, 100, 40, .2), 80px 6px 0 -8px rgba(190, 100, 40, .16); }
.starfield {
    position: absolute; inset: 0 0 40% 0;
    background-image:
        radial-gradient(1.5px 1.5px at 12% 18%, #FFF1D6, transparent), radial-gradient(1px 1px at 28% 42%, #fff, transparent),
        radial-gradient(1.5px 1.5px at 44% 12%, #FFE3B0, transparent), radial-gradient(1px 1px at 58% 30%, #fff, transparent),
        radial-gradient(1.2px 1.2px at 66% 8%, #fff, transparent), radial-gradient(1px 1px at 82% 44%, #FFE3B0, transparent),
        radial-gradient(1.5px 1.5px at 92% 24%, #fff, transparent), radial-gradient(1px 1px at 6% 60%, #fff, transparent),
        radial-gradient(1.2px 1.2px at 36% 70%, #FFF1D6, transparent), radial-gradient(1px 1px at 52% 58%, #fff, transparent);
    opacity: .8; animation: twinkle 4s ease-in-out infinite alternate;
}
@keyframes twinkle { to { opacity: .35; } }
.bat { position: absolute; color: #0B0508; animation: fly 14s linear infinite; filter: drop-shadow(0 0 6px rgba(255, 160, 80, .25)); }
.bat--1 { top: 20%; left: -5%; }
.bat--2 { top: 12%; left: -10%; animation-delay: -5s; animation-duration: 18s; }
.bat--3 { top: 32%; left: -8%; animation-delay: -10s; animation-duration: 22s; }
.bat svg { animation: flap .22s ease-in-out infinite alternate; }
@keyframes fly { 0% { transform: translate(0, 0); } 50% { transform: translate(60vw, -30px); } 100% { transform: translate(120vw, 20px); } }
@keyframes flap { to { transform: scaleY(.55); } }

/* Vallende blaadjes: puur CSS op de grafische kaart, zonder muis-interactie.
   Elke blad krijgt eigen waarden mee vanuit fx.js (--x, --size, --dur, --delay, --spin, --op). */
.leaf-fall { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.leaf-fall span {
    position: absolute; top: 0; left: var(--x, 50%); width: var(--size, 24px); aspect-ratio: 1;
    background: var(--leaf-a) center / contain no-repeat; opacity: var(--op, .8);
    animation: leaf-drop var(--dur, 15s) linear var(--delay, 0s) infinite,
               leaf-spin var(--spin, 9s) linear var(--delay, 0s) infinite;
}
.leaf-fall span:nth-child(3n+2) { background-image: var(--leaf-b); }
.leaf-fall span:nth-child(3n+3) { background-image: var(--leaf-c); }
/* --fall is de hoogte van de sectie (fx.js zet die). Zonder die waarde valt het blad over
   schermhoogte; op een lage sectie zoals de collectie-hero zou je er dan bijna geen zien. */
@keyframes leaf-drop {
    0%   { translate: 0 calc(var(--fall, 100vh) * -.14); }
    25%  { translate: 3vw calc(var(--fall, 100vh) * .16); }
    50%  { translate: -2vw calc(var(--fall, 100vh) * .46); }
    75%  { translate: 4vw calc(var(--fall, 100vh) * .76); }
    100% { translate: 0 calc(var(--fall, 100vh) * 1.16); }
}
@keyframes leaf-spin { to { rotate: 1turn; } }
@media (max-width: 700px) { .leaf-fall span:nth-child(n+7) { display: none; } }

.leaf-layer { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0; transition: opacity 1.6s ease; }
.leaf-layer.is-ready { opacity: 1; }
.leaf-layer canvas { display: block; width: 100%; height: 100%; }

.hero__inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: 40px; min-height: min(800px, calc(100vh - 112px)); padding-block: 56px 150px; }
.hero h1 {
    margin-bottom: .35em; color: var(--on-dark);
    text-shadow: 0 1px 0 #EBD3BF, 0 2px 0 #D9B79C, 0 3px 0 #C39A7D, 0 4px 0 #A87C62, 0 6px 0 #6B3E34, 0 16px 26px rgba(0, 0, 0, .5);
}
.hero h1 br + span {
    display: inline-block; font-size: .6em; color: var(--pumpkin); margin-top: .12em;
    text-shadow: 0 2px 0 #B3420E, 0 4px 0 #7A2A0C, 0 12px 22px rgba(0, 0, 0, .45);
}
.hero h1 br + span .char { color: color-mix(in oklab, var(--candy), var(--maple) calc(var(--char-percent) * 120% - 30%)); }
.lede { font-size: clamp(1.05rem, 1.6vw, 1.24rem); color: var(--on-dark-soft); max-width: 34em; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 14px; margin: 30px 0 38px; }

.countdown {
    display: inline-flex; flex-direction: column; gap: 10px; padding: 16px 18px 18px; border-radius: var(--radius);
    background: linear-gradient(160deg, rgba(48, 26, 38, .72), rgba(30, 16, 24, .6));
    border: 1px solid rgba(255, 214, 170, .16);
    box-shadow: 0 24px 44px -26px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(255, 255, 255, .08);
}
.countdown__label { margin: 0; font-size: .76rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--on-dark-soft); }
.countdown__units { display: flex; gap: 10px; }
.countdown__units div {
    position: relative; min-width: 66px; text-align: center; padding: 10px 6px 8px; border-radius: 16px;
    background: linear-gradient(180deg, #2C1622, #140A0F); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .09), 0 4px 0 #090406;
}
.countdown__units div::before { content: ""; position: absolute; left: 6px; right: 6px; top: 42%; height: 1px; background: rgba(0, 0, 0, .45); }
.countdown__units strong { display: block; font-family: var(--font-display); font-size: 2.1rem; line-height: 1; color: var(--amber); text-shadow: 0 0 18px rgba(255, 178, 63, .5); font-variant-numeric: tabular-nums; }
.countdown__units span { font-size: .72rem; color: var(--on-dark-soft); }

.hero__stage { position: relative; aspect-ratio: 1; max-width: 580px; justify-self: center; width: 100%; }
.hero__glow { position: absolute; inset: 10%; border-radius: 50%; background: radial-gradient(circle, rgba(255, 150, 60, .6), rgba(217, 67, 43, .2) 45%, transparent 68%); filter: blur(24px); animation: glow-breathe 5s ease-in-out infinite; }
@keyframes glow-breathe { 50% { transform: scale(1.12); opacity: .75; } }
.hero__ground { position: absolute; left: 8%; right: 8%; bottom: 7%; height: 16%; border-radius: 50%; background: radial-gradient(ellipse, rgba(0, 0, 0, .6), transparent 70%); }
.float { position: absolute; display: block; filter: drop-shadow(0 24px 30px rgba(0, 0, 0, .45)); cursor: pointer; }
.float svg { display: block; width: 100%; height: auto; transform-origin: 50% 90%; }
.float--main { width: 56%; left: 22%; top: 24%; z-index: 3; animation: bob 5s ease-in-out infinite; }
.float--a { width: 30%; left: 2%; top: 10%; z-index: 2; animation: bob 6s ease-in-out -2s infinite; }
.float--b { width: 28%; right: 0; top: 52%; z-index: 4; animation: bob 5.5s ease-in-out -1s infinite; }
.float--c { width: 26%; right: 6%; top: 2%; z-index: 1; animation: bob 7s ease-in-out -3s infinite; }

/* Intro: verborgen tot GSAP de show start (valt na 3,5 s vanzelf terug) */
/* De hero blijft verborgen tot GSAP de intro start, maar hooguit 0,35 s. Komen de scripts
   trager binnen (koude cache, traag netwerk), dan doet deze CSS-animatie de intro zelf —
   zo staar je nooit naar een lege hero. */
.fx-intro .hero .eyebrow, .fx-intro .hero h1, .fx-intro .hero .lede, .fx-intro .hero__cta,
.fx-intro .countdown, .fx-intro .hero__stage, .fx-intro .moon,
.fx-intro .page-hero .crumbs, .fx-intro .page-hero h1, .fx-intro .page-hero__inner p, .fx-intro .page-hero__art
{ opacity: 0; animation: fx-unhide .9s var(--ease-out) .35s forwards; }
.fx-intro .hero__stage { animation-delay: .3s; }
.fx-intro .hero h1 { animation-delay: .36s; }
.fx-intro .hero .lede { animation-delay: .46s; }
.fx-intro .hero__cta { animation-delay: .54s; }
.fx-intro .countdown { animation-delay: .62s; }
/* Collectie-hero: korte, vlotte fade — die moet snel staan */
.fx-intro .page-hero .crumbs { animation-duration: .5s; animation-delay: .06s; }
.fx-intro .page-hero h1 { animation-duration: .5s; animation-delay: .12s; }
.fx-intro .page-hero__inner p { animation-duration: .5s; animation-delay: .2s; }
.fx-intro .page-hero__art { animation-duration: .6s; animation-delay: .26s; }

/* ---------- 2. USP-strip ---------- */
.usps { --pt: 0px; position: relative; background: var(--night); }
.usps__grid { display: grid; grid-template-columns: repeat(4, 1fr); padding-block: 4px 16px; }
.usps__grid > div { display: flex; align-items: center; gap: 14px; padding: 18px 12px; justify-content: center; color: var(--amber); }
.usps__grid > div + div { border-left: 1px dashed rgba(255, 214, 170, .14); }
.usps__grid > div > svg {
    box-sizing: content-box; flex-shrink: 0; padding: 11px;
    background: radial-gradient(circle at 35% 30%, rgba(255, 178, 63, .32), rgba(255, 122, 26, .08));
    box-shadow: inset 0 0 0 1px rgba(255, 178, 63, .25), 0 10px 24px -12px rgba(255, 122, 26, .7);
    animation: blob-morph 9s ease-in-out infinite; transition: transform .5s var(--ease-squish);
}
.usps__grid > div:nth-child(2) > svg { animation-delay: -2.5s; }
.usps__grid > div:nth-child(3) > svg { animation-delay: -5s; }
.usps__grid > div:nth-child(4) > svg { animation-delay: -7s; }
.usps__grid > div:hover > svg { transform: scale(1.14) rotate(-10deg); }
.usps p { margin: 0; display: flex; flex-direction: column; line-height: 1.25; color: var(--on-dark); }
.usps strong { font-size: .98rem; }
.usps span { font-size: .84rem; color: var(--on-dark-soft); }

/* ---------- 3. Line-up: verzamelkaarten ---------- */
.section--night#bende { background: radial-gradient(900px 500px at 50% 0%, rgba(255, 122, 26, .12), transparent 65%), var(--plum); }
.lineup { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.lineup__tile {
    position: relative; border-radius: var(--radius-l); display: flex; flex-direction: column;
    background: linear-gradient(180deg, #3A1F33, #22111D);
    box-shadow: 0 34px 60px -34px rgba(0, 0, 0, .85), inset 0 1px 0 rgba(255, 255, 255, .08), inset 0 0 0 1px rgba(255, 214, 170, .07);
    transition: translate .5s var(--ease-squish), box-shadow .35s;
}
.lineup__tile:hover { translate: 0 -8px; box-shadow: 0 46px 70px -34px color-mix(in srgb, var(--tile) 60%, #000), inset 0 1px 0 rgba(255, 255, 255, .1), inset 0 0 0 1px rgba(255, 214, 170, .14); }
.lineup__tile::after {
    content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; pointer-events: none;
    background: radial-gradient(circle at var(--gx, 50%) var(--gy, 0%), rgba(255, 255, 255, .16), transparent 45%);
    opacity: 0; transition: opacity .35s;
}
.lineup__tile:hover::after { opacity: 1; }
.lineup__art {
    position: relative; display: grid; place-items: center; aspect-ratio: 5 / 4; isolation: isolate; overflow: hidden;
    margin: 10px 10px 0; border-radius: 26px;
    background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--tile) 55%, #fff), var(--tile) 55%, color-mix(in srgb, var(--tile) 62%, #2A0A10) 115%);
    box-shadow: inset 0 -20px 34px -12px rgba(0, 0, 0, .28), inset 0 2px 0 rgba(255, 255, 255, .35);
}
.lineup__art::before {
    content: ""; position: absolute; inset: -45%; z-index: -1;
    background: repeating-conic-gradient(from 0deg, rgba(255, 255, 255, .22) 0deg 8deg, transparent 8deg 20deg);
    -webkit-mask: radial-gradient(circle, #000 10%, transparent 56%); mask: radial-gradient(circle, #000 10%, transparent 56%);
    animation: spin 50s linear infinite;
}
.lineup__art svg { width: 62%; height: auto; transform-origin: 50% 90%; filter: drop-shadow(0 14px 14px rgba(0, 0, 0, .22)); }
.lineup__tile:hover .lineup__art svg { animation: jelly .9s both; }
.lineup__art:active svg { transform: scale(1.18, .78) !important; transition: transform .1s; animation: none !important; }
/* Once a product has its own photo, that photo fully covers the tile (same treatment
   as .card__art--photo on the collection cards) instead of sitting centred like the SVG. */
.lineup__art--photo { overflow: hidden; }
.lineup__art--photo .product-photo { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: inherit; transition: scale .6s var(--ease-squish); }
.lineup__tile:hover .lineup__art--photo .product-photo { scale: 1.05; }
.lineup__num {
    position: absolute; top: 22px; left: 24px; z-index: 2; font-family: var(--font-display); font-size: .8rem; line-height: 1.4;
    color: var(--ink); background: rgba(255, 251, 244, .85); padding: 0 .7em; border-radius: 99px; rotate: -8deg;
    box-shadow: 0 3px 0 rgba(0, 0, 0, .15); white-space: nowrap; text-transform: uppercase; letter-spacing: .02em;
}
.lineup__info { padding: 18px 22px 22px; display: flex; flex-direction: column; flex: 1; }
.lineup__info h3 { margin-bottom: .2em; }
.lineup__info p { color: var(--on-dark-soft); font-size: .95rem; }
.lineup__row { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.lineup__row strong { font-size: 1.2rem; color: var(--amber); }

/* ---------- 4. Mystery box ---------- */
.mystery { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 80px); align-items: center; }
.mystery__visual {
    position: relative; display: grid; place-items: center; padding: 36px 32px 28px; border-radius: var(--radius-l); overflow: hidden; cursor: pointer;
    color: var(--on-dark); rotate: -1.5deg;
    background: radial-gradient(circle at 50% 112%, rgba(255, 122, 26, .38), transparent 55%), radial-gradient(circle at 50% 30%, #3E1F36, #1A0C15 72%);
    box-shadow: var(--shadow-warm), inset 0 0 0 1px rgba(255, 214, 170, .1);
}
.mystery__visual::before {
    content: ""; position: absolute; inset: -10% 0 0; pointer-events: none; transform-origin: 50% 0;
    background: conic-gradient(from 158deg at 50% 0%, transparent 0deg, rgba(255, 222, 170, .2) 22deg, transparent 44deg);
    animation: spotlight 6s ease-in-out infinite alternate;
}
@keyframes spotlight { from { transform: rotate(-7deg); } to { transform: rotate(7deg); } }
.mystery__visual::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background-image: radial-gradient(2px 2px at 18% 28%, #FFD34D, transparent), radial-gradient(1.5px 1.5px at 82% 18%, #fff, transparent),
        radial-gradient(2px 2px at 72% 66%, #9BE564, transparent), radial-gradient(1.5px 1.5px at 28% 76%, #fff, transparent),
        radial-gradient(2px 2px at 90% 50%, #FFB23F, transparent), radial-gradient(1.5px 1.5px at 10% 52%, #C9B6F0, transparent);
    animation: twinkle 2.4s ease-in-out infinite alternate;
}
.mystery__visual > svg { position: relative; width: 100%; max-width: 380px; height: auto; animation: shake 4s ease-in-out infinite; transform-origin: 50% 90%; filter: drop-shadow(0 26px 30px rgba(0, 0, 0, .5)); }
@keyframes shake { 0%, 80%, 100% { transform: none; } 84% { transform: rotate(-4deg) scale(1.03, .97); } 88% { transform: rotate(4deg) scale(.98, 1.02); } 92% { transform: rotate(-2deg); } 96% { transform: rotate(1deg); } }
.mystery__halo { position: absolute; width: 90%; aspect-ratio: 1; border-radius: 50%; background: conic-gradient(from 0deg, rgba(255, 122, 26, .4), rgba(155, 229, 100, .22), rgba(201, 182, 240, .35), rgba(255, 178, 63, .4), rgba(255, 122, 26, .4)); filter: blur(26px); animation: spin 14s linear infinite; }
.odds { position: relative; width: 100%; max-width: 380px; display: grid; gap: 8px; margin-top: 12px; color: var(--on-dark); font-size: .85rem; }
.odds__row { display: grid; grid-template-columns: 110px 1fr 74px; align-items: center; gap: 10px; }
.odds__row b { text-align: right; white-space: nowrap; }
.odds__bar { height: 10px; border-radius: 99px; background: rgba(255, 241, 228, .1); overflow: hidden; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .4); }
.odds__bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--maple), var(--pumpkin), var(--amber)); border-radius: inherit; }
.odds__row--secret .odds__bar i { background: var(--slime); box-shadow: 0 0 14px var(--slime); }

.mystery__copy .lede { color: var(--ink-soft); }
.buy-box { margin: 28px 0; }
.variant-toggle { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; border: 0; padding: 0; margin: 0 0 12px; }
.variant-toggle label { cursor: pointer; }
.variant-toggle input { position: absolute; opacity: 0; }
.variant-toggle span {
    display: flex; flex-direction: column; gap: 2px; padding: 16px 18px; border-radius: var(--radius);
    border: 2px solid var(--line-light); background: var(--paper); transition: border-color .2s, box-shadow .25s, transform .3s var(--ease-squish);
}
.variant-toggle label:hover span { transform: translateY(-2px); }
.variant-toggle em { font-style: normal; color: var(--ink-soft); font-weight: 600; }
.variant-toggle small { display: inline-block; margin-left: 4px; color: var(--ok); font-weight: 800; }
.variant-toggle input:checked + span {
    border-color: var(--pumpkin); background: linear-gradient(180deg, #FFF8EE, #FFE9CE);
    box-shadow: 0 0 0 4px rgba(255, 122, 26, .18), 0 14px 26px -16px rgba(255, 122, 26, .8); animation: jelly .6s both;
}
.variant-toggle input:focus-visible + span { outline: 3px solid var(--candy); outline-offset: 2px; }
.buy-box__note { font-size: .9rem; color: var(--ink-soft); }
.buy-box__row { display: flex; gap: 12px; align-items: stretch; }
.qty { display: inline-flex; align-items: center; border-radius: 99px; background: var(--paper); border: 2px solid var(--line-light); }
.qty button { width: 44px; height: 100%; min-height: 50px; border: 0; background: transparent; font-size: 1.3rem; cursor: pointer; color: var(--ink); border-radius: 99px; transition: color .2s, transform .3s var(--ease-squish); }
.qty button:hover { color: var(--pumpkin); transform: scale(1.25); }
.qty input { width: 36px; border: 0; text-align: center; font: inherit; font-weight: 800; background: transparent; color: var(--ink); -moz-appearance: textfield; }
.qty input::-webkit-inner-spin-button, .qty input::-webkit-outer-spin-button { -webkit-appearance: none; }

.secrets { position: relative; padding: 20px; border-radius: var(--radius); color: var(--on-dark); background: linear-gradient(160deg, #2E1726, #170B12); box-shadow: var(--shadow); isolation: isolate; }
.secrets::before {
    content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; padding: 2px;
    background: conic-gradient(from var(--angle, 0deg), #FFD34D, #9BE564, #C9B6F0, #FF9A45, #FFD34D);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;
    animation: border-spin 5s linear infinite; opacity: .7;
}
@property --angle { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes border-spin { to { --angle: 360deg; } }
.secrets__title { font-weight: 800; margin-bottom: 12px; color: var(--amber); }
.secrets__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.secret { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: var(--radius-s); background: rgba(255, 241, 228, .06); border: 1px solid rgba(255, 214, 170, .1); }
.secret svg { flex-shrink: 0; filter: drop-shadow(0 0 12px rgba(155, 229, 100, .5)); animation: bob 4s ease-in-out infinite; }
.secret + .secret svg { animation-delay: -2s; }
.secret div { display: flex; flex-direction: column; line-height: 1.3; }
.secret span { font-size: .85rem; color: var(--on-dark-soft); }

/* ---------- 5. Promo band ---------- */
.promo-band {
    --pt: clamp(44px, 6vw, 72px); position: relative; overflow: hidden; isolation: isolate; color: var(--ink); padding-block: var(--pt);
    background: radial-gradient(600px 300px at 12% 10%, rgba(255, 211, 77, .6), transparent 60%), radial-gradient(600px 400px at 95% 100%, rgba(217, 67, 43, .45), transparent 60%), linear-gradient(115deg, var(--amber), var(--pumpkin) 45%, #F0601E);
}
/* ::after i.p.v. ::before: ::before is de golfrand van de sectie. Beide op hetzelfde element zorgde
   ervoor dat de golfrand mee naar beneden schoof, dwars door de kop "Trick or treat? Treat.". */
.promo-band::after {
    content: ""; position: absolute; inset: -240px 0 0; z-index: -1; pointer-events: none;
    background: var(--leaf-pattern), var(--leaf-pattern);
    animation: leaves-down 22s linear infinite;
}
@keyframes leaves-down { to { transform: translateY(240px); } }
.promo-band__inner { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.promo-band__text h2 { margin-bottom: .2em; text-shadow: 0 3px 0 rgba(255, 241, 228, .45); }
.promo-band__text p { margin: 0; font-weight: 600; max-width: 30em; }
.coupons { display: flex; gap: 16px; flex-wrap: wrap; }
.coupon {
    /* Schaduw op de kaart zelf (niet op de rij): zo hoeft hover niet de hele rij te hertekenen */
    filter: drop-shadow(0 6px 0 rgba(110, 30, 10, .28)) drop-shadow(0 14px 14px rgba(110, 30, 10, .22));
    --notch: 94px; display: flex; align-items: stretch; border: 0; padding: 0; cursor: pointer; text-align: left;
    background: var(--paper); border-radius: 18px; overflow: hidden;
    -webkit-mask: radial-gradient(circle 9px at var(--notch) 0, #0000 96%, #000) top / 100% 51% no-repeat, radial-gradient(circle 9px at var(--notch) 100%, #0000 96%, #000) bottom / 100% 51% no-repeat;
    mask: radial-gradient(circle 9px at var(--notch) 0, #0000 96%, #000) top / 100% 51% no-repeat, radial-gradient(circle 9px at var(--notch) 100%, #0000 96%, #000) bottom / 100% 51% no-repeat;
    transition: transform .45s var(--ease-squish), background .3s;
}
.coupon:hover { transform: translateY(-4px) rotate(-1.5deg) scale(1.02); }
.coupon:active { transform: scale(1.05, .93); transition-duration: .08s; }
.coupon__value { width: var(--notch); flex-shrink: 0; display: grid; place-items: center; font-family: var(--font-display); font-size: 1.9rem; background: linear-gradient(160deg, #3F1C2E, var(--ink)); color: var(--amber); text-shadow: 0 0 16px rgba(255, 178, 63, .5); position: relative; }
.coupon__value::after { content: ""; position: absolute; right: -2px; top: 12px; bottom: 12px; border-right: 3px dotted rgba(255, 241, 228, .55); }
.coupon__info { display: flex; flex-direction: column; justify-content: center; padding: 12px 16px; line-height: 1.25; }
.coupon__info strong { letter-spacing: .08em; }
.coupon__info small { color: var(--ink-soft); }
.coupon__action { display: grid; place-items: center; padding: 0 16px; font-weight: 800; font-size: .85rem; border-left: 1px solid var(--line-light); }
.coupon.is-applied { background: #EEFBE6; }
.coupon.is-applied .coupon__action { color: var(--ok); }
.promo-band--slim .btn { flex-shrink: 0; }

/* ---------- 6. Squish-test ---------- */
.squish-test { background: radial-gradient(720px 520px at 74% 50%, rgba(255, 122, 26, .22), transparent 62%), radial-gradient(520px 420px at 8% 100%, rgba(155, 229, 100, .08), transparent 60%), var(--plum); overflow: hidden; }
.squish-test__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.squish-test__copy > p { color: var(--on-dark-soft); font-size: 1.1rem; max-width: 30em; }
.specs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 28px 0 0; }
.specs div { padding: 14px 16px; border-radius: var(--radius-s); background: linear-gradient(160deg, rgba(255, 241, 228, .08), rgba(255, 241, 228, .02)); border: 1px solid var(--line-dark); transition: transform .4s var(--ease-squish), border-color .3s; }
.specs div:hover { transform: translateY(-3px) rotate(-1deg); border-color: rgba(255, 178, 63, .4); }
.specs dt { font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--on-dark-soft); }
.specs dd { margin: 2px 0 0; font-weight: 700; font-size: 1.05rem; }
.specs--dark div { background: var(--paper); border-color: var(--line-light); }
.specs--dark dt { color: var(--ink-soft); }

.squish-test__stage { display: flex; flex-direction: column; align-items: center; gap: 20px; }
.squishy-pad {
    position: relative; width: min(380px, 80vw); aspect-ratio: 1; border-radius: 50%; border: 0; cursor: grab; padding: 0; overflow: visible;
    background: radial-gradient(circle, rgba(255, 178, 63, .22), rgba(255, 122, 26, .06) 45%, transparent 68%);
    touch-action: none; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
}
.squishy-pad::before { content: ""; position: absolute; inset: 6%; border-radius: 50%; border: 2px dashed rgba(255, 178, 63, .28); animation: spin 30s linear infinite; }
.squishy-pad::after { content: ""; position: absolute; inset: 16%; border-radius: 50%; pointer-events: none; animation: pad-pulse 2.4s ease-out infinite; }
@keyframes pad-pulse { 0% { box-shadow: 0 0 0 0 rgba(255, 178, 63, .35); } 100% { box-shadow: 0 0 0 44px rgba(255, 178, 63, 0); } }
.squishy-pad svg { position: relative; z-index: 1; width: 78%; height: auto; transform-origin: 50% 88%; transition: transform var(--rebound, 4s) cubic-bezier(.2, .9, .3, 1); will-change: transform; filter: drop-shadow(0 20px 24px rgba(0, 0, 0, .4)); }
.squishy-pad.is-pressed { cursor: grabbing; }
.squishy-pad.is-pressed svg { transform: scale(1.32, .52); transition: transform .35s cubic-bezier(.3, 1.4, .5, 1); }
.squish-ripple {
    position: absolute; left: var(--x, 50%); top: var(--y, 50%); width: 24px; height: 24px; margin: -12px 0 0 -12px; border-radius: 50%;
    border: 3px solid var(--amber); pointer-events: none; animation: ripple .9s var(--ease-out) forwards;
}
@keyframes ripple { to { transform: scale(16); opacity: 0; border-width: .4px; } }
.squish-timer { display: flex; align-items: center; gap: 14px; padding: 10px 12px 10px 20px; border-radius: 99px; background: var(--night); border: 1px solid var(--line-dark); box-shadow: 0 16px 30px -18px rgba(0, 0, 0, .8); }
.squish-timer span { color: var(--on-dark-soft); font-size: .95rem; }
.squish-timer strong { font-family: var(--font-display); font-size: 1.4rem; color: var(--amber); background: var(--plum-2); padding: 4px 14px; border-radius: 99px; min-width: 88px; text-align: center; font-variant-numeric: tabular-nums; text-shadow: 0 0 12px rgba(255, 178, 63, .45); }

/* ---------- Productgrid & kaarten ---------- */
.product-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.card {
    position: relative; display: flex; flex-direction: column; background: var(--paper); color: var(--ink); border-radius: 28px;
    border: 1px solid rgba(42, 20, 24, .06); box-shadow: 0 2px 0 rgba(42, 20, 24, .05), 0 22px 34px -26px rgba(90, 31, 38, .55);
    transition: translate .45s var(--ease-squish), rotate .45s var(--ease-squish), box-shadow .35s;
}
.card:hover { translate: 0 -6px; rotate: -.6deg; box-shadow: 0 2px 0 rgba(42, 20, 24, .05), var(--shadow-warm); }
.card:nth-child(even):hover { rotate: .6deg; }
.card__media {
    --m1: #FFE3BC; --m2: #F6A955;
    position: relative; display: grid; place-items: center; aspect-ratio: 1; margin: 8px 8px 0; border-radius: 22px; overflow: hidden; isolation: isolate;
    background: radial-gradient(circle at 50% 38%, var(--m1), var(--m2) 125%);
    box-shadow: inset 0 -16px 30px -14px rgba(90, 31, 38, .3);
}
.card:nth-child(4n+2) .card__media { --m1: #F3E8FF; --m2: #B99AD9; }
.card:nth-child(4n+3) .card__media { --m1: #F2F8E0; --m2: #A9C46C; }
.card:nth-child(4n+4) .card__media { --m1: #FFE9DC; --m2: #E0795A; }
.card__media::before {
    content: ""; position: absolute; inset: -40%; z-index: -1;
    background: repeating-conic-gradient(from 0deg, rgba(255, 255, 255, .28) 0deg 7deg, transparent 7deg 18deg);
    -webkit-mask: radial-gradient(circle, #000 8%, transparent 55%); mask: radial-gradient(circle, #000 8%, transparent 55%);
    rotate: -8deg;
}
.card__media::after {
    content: ""; position: absolute; right: -10%; bottom: -8%; width: 52%; aspect-ratio: 1; z-index: -1; rotate: -25deg;
    background: var(--leaf-white) center / contain no-repeat; /* kant-en-klaar plaatje i.p.v. mask */
    transition: rotate .7s var(--ease-squish);
}
.card:hover .card__media::after { rotate: 12deg; }
.card__art { display: grid; place-items: center; width: 74%; transform-origin: 50% 90%; }
.card__art > svg { width: 100%; height: auto; filter: drop-shadow(0 12px 12px rgba(90, 31, 38, .2)); }
.card:hover .card__art { animation: jelly .9s both; }
.card__badge { position: absolute; top: 12px; left: 12px; z-index: 2; rotate: -6deg; }
.card__body { padding: 14px 18px 18px; display: flex; flex-direction: column; flex: 1; }
.card__meta { display: flex; align-items: center; gap: 6px; font-size: .8rem; color: var(--ink-soft); margin-bottom: 6px; }
.card__meta--lg { font-size: .95rem; margin-bottom: 14px; }
.card__title { font-size: 1.24rem; margin-bottom: .25em; }
.card__title a { text-decoration: none; transition: color .2s; }
.card__title a:hover { color: var(--rust); }
.card__tag { font-size: .9rem; color: var(--ink-soft); margin-bottom: 14px; }
.card__foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.price { margin: 0; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.price strong { font-size: 1.18rem; }
.price s { color: var(--ink-soft); font-size: .9rem; }
.price .is-sale { color: var(--maple); }
.stock-low { margin: 10px 0 0; font-size: .8rem; font-weight: 700; color: var(--maple); }

.bundle-art { position: relative; display: block; width: 100%; aspect-ratio: 1; }
.bundle-art__item { position: absolute; width: 58%; }
.bundle-art__item svg { width: 100%; height: auto; display: block; }
.bundle-art__item--0 { left: 0; top: 30%; z-index: 2; }
.bundle-art__item--1 { left: 21%; top: 2%; z-index: 1; }
.bundle-art__item--2 { right: 0; top: 34%; z-index: 3; }

/* ---------- 8. Ontwerp ---------- */
.design-note { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 80px); align-items: center; }
.design-note__copy p { color: var(--ink-soft); font-size: 1.05rem; }
.design-note__art { position: relative; }
.sketch-card {
    position: relative; border-radius: var(--radius-l); padding: 34px 28px 28px; box-shadow: var(--shadow-warm); rotate: -2deg;
    background-color: #FFFDF7;
    background-image: linear-gradient(rgba(168, 71, 30, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(168, 71, 30, .07) 1px, transparent 1px);
    background-size: 22px 22px;
}
.sketch-card::before {
    content: ""; position: absolute; top: -14px; left: 50%; width: 130px; height: 30px; translate: -50% 0; rotate: -4deg;
    background: repeating-linear-gradient(45deg, rgba(255, 178, 63, .8) 0 8px, rgba(255, 122, 26, .8) 8px 16px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, .12); border-radius: 3px;
}
.sketch-card__label { font-weight: 800; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.sketch-card__pair { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; margin-top: 12px; }
.sketch-card__pair svg { width: 100%; height: auto; }
.sketch svg { filter: grayscale(1) contrast(1.4) opacity(.5) sepia(.4); }
.sketch-arrow { font-size: 2.2rem; color: var(--pumpkin); animation: arrow-nudge 1.6s ease-in-out infinite; }
@keyframes arrow-nudge { 50% { transform: translateX(6px); } }
.palette-card { position: absolute; right: -10px; bottom: -28px; display: flex; gap: 6px; padding: 12px; border-radius: 99px; background: var(--ink); rotate: 3deg; box-shadow: var(--shadow); }
.palette-card span { width: 32px; height: 32px; border-radius: 50%; background: var(--c); border: 2px solid rgba(255, 255, 255, .25); transition: translate .4s var(--ease-squish), scale .4s var(--ease-squish); }
.palette-card span:hover { translate: 0 -8px; scale: 1.2; }
.callout { margin: 24px 0 0; padding: 18px 20px; border-left: 5px solid var(--pumpkin); background: var(--paper); border-radius: 0 var(--radius-s) var(--radius-s) 0; color: var(--ink-soft); box-shadow: 0 16px 30px -24px rgba(90, 31, 38, .5); }
.callout strong { display: block; color: var(--ink); margin-bottom: 4px; }

/* ---------- 9. Pairings ---------- */
.pairings { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.pairing {
    position: relative; isolation: isolate; padding: 24px; border-radius: var(--radius-l); display: flex; flex-direction: column;
    background: linear-gradient(160deg, rgba(255, 241, 228, .08), rgba(255, 241, 228, .02)); border: 1px solid var(--line-dark);
    transition: translate .45s var(--ease-squish), background .3s;
}
.pairing:hover { translate: 0 -6px; background: linear-gradient(160deg, rgba(255, 241, 228, .12), rgba(255, 241, 228, .03)); }
.pairing::before {
    content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: inherit; padding: 2px; pointer-events: none;
    background: conic-gradient(from var(--angle, 0deg), transparent 0 55%, var(--amber), var(--pumpkin), var(--maple), transparent 95%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;
    opacity: 0; transition: opacity .35s; animation: border-spin 3.5s linear infinite;
}
.pairing:hover::before { opacity: 1; }
.pairing::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    background: radial-gradient(circle at var(--gx, 50%) var(--gy, 0%), rgba(255, 214, 170, .12), transparent 45%); opacity: 0; transition: opacity .35s;
}
.pairing:hover::after { opacity: 1; }
.pairing__art {
    position: relative; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; margin-bottom: 18px; padding: 16px; border-radius: var(--radius); overflow: hidden;
    background: radial-gradient(circle at 50% 125%, rgba(255, 122, 26, .45), transparent 60%), radial-gradient(circle at 84% 12%, rgba(255, 211, 140, .3), transparent 22%), #140A10;
}
.pairing__art > span { display: grid; place-items: center; }
.pairing__art > span > svg, .pairing__art .bundle-art { width: 100%; max-width: 120px; height: auto; transform-origin: 50% 90%; }
.pairing:hover .pairing__art > span > * { animation: jelly .9s both; }
.pairing:hover .pairing__art > span + b + span > * { animation-delay: .12s; }
.pairing__art b { font-family: var(--font-display); font-size: 2.2rem; color: var(--pumpkin); padding: 0 6px; text-shadow: 0 0 18px rgba(255, 122, 26, .6); animation: plus-pulse 2s ease-in-out infinite; }
@keyframes plus-pulse { 50% { transform: scale(1.25) rotate(90deg); } }
.pairing h3 { margin-bottom: .15em; }
.pairing__names { font-size: .85rem; font-weight: 700; color: var(--amber); margin-bottom: 8px; }
.pairing > p:not(.pairing__names) { color: var(--on-dark-soft); }
.pairing__foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.pairing .price s { color: var(--on-dark-soft); }
.pairing .price .is-sale { color: var(--slime); text-shadow: 0 0 12px rgba(155, 229, 100, .35); }

/* ---------- 10. Reviews ---------- */
.reviews { display: grid; grid-template-columns: 1fr 1.6fr; gap: clamp(32px, 6vw, 72px); align-items: start; }
.rating-big { display: flex; align-items: center; gap: 16px; margin: 12px 0 20px; }
.rating-big strong {
    font-family: var(--font-display); font-size: 4.8rem; line-height: 1;
    background: linear-gradient(180deg, var(--amber), var(--pumpkin) 50%, var(--maple)); -webkit-background-clip: text; background-clip: text; color: transparent;
    filter: drop-shadow(0 4px 0 rgba(168, 71, 30, .22));
}
.rating-big div { display: flex; flex-direction: column; gap: 4px; font-size: .85rem; color: var(--ink-soft); }
.rating-big .stars svg { width: 22px; height: 22px; }
.rating-bars { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; font-size: .85rem; }
.rating-bars li { display: grid; grid-template-columns: 30px 1fr 40px; gap: 10px; align-items: center; }
.rating-bars__bar { height: 10px; border-radius: 99px; background: rgba(42, 20, 24, .1); overflow: hidden; }
.rating-bars__bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--amber), var(--pumpkin)); }
.reviews__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.placeholder-note { grid-column: 1 / -1; margin: 0; font-size: .8rem; padding: 8px 12px; border-radius: 10px; background: rgba(255, 211, 77, .4); color: var(--ink); }
.review {
    margin: 0; padding: 24px 22px 22px; border-radius: var(--radius); background: var(--paper); display: flex; flex-direction: column; gap: 12px;
    box-shadow: 0 20px 32px -24px rgba(90, 31, 38, .55); transition: rotate .45s var(--ease-squish), translate .45s var(--ease-squish);
}
figure.review:nth-of-type(odd) { rotate: -1.2deg; }
figure.review:nth-of-type(even) { rotate: 1deg; }
figure.review:hover { rotate: 0deg; translate: 0 -5px; }
.review blockquote { margin: 0; font-size: 1rem; }
.review blockquote::before { content: "\201C"; display: block; height: .55em; font-family: Georgia, 'Times New Roman', serif; font-weight: 700; font-size: 4rem; line-height: 1; color: var(--pumpkin); }
.review figcaption { margin-top: auto; font-size: .85rem; color: var(--ink-soft); }

/* ---------- 11. Veiligheid ---------- */
.trust-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.trust-grid article { padding: 30px 28px; border-radius: var(--radius); background: var(--paper); box-shadow: 0 20px 34px -26px rgba(90, 31, 38, .5); transition: translate .45s var(--ease-squish); }
.trust-grid article:hover { translate: 0 -6px; }
.trust-grid p { color: var(--ink-soft); margin: 0; }
.trust-icon {
    display: inline-grid; place-items: center; width: 66px; height: 66px; margin-bottom: 18px;
    background: linear-gradient(160deg, #4A2438, var(--ink)); color: var(--amber);
    box-shadow: 0 14px 24px -12px rgba(42, 20, 24, .7); animation: blob-morph 8s ease-in-out infinite;
}
.trust-grid article:nth-child(2) .trust-icon { background: linear-gradient(160deg, var(--amber), var(--maple)); color: var(--paper); animation-delay: -3s; }
.trust-grid article:nth-child(3) .trust-icon { background: linear-gradient(160deg, #3F5E24, #1F3316); color: var(--slime); animation-delay: -6s; }
.trust-grid article:hover .trust-icon svg { animation: jelly .8s both; }

/* ---------- 12. FAQ ---------- */
.faq { display: grid; grid-template-columns: 1fr 1.6fr; gap: clamp(32px, 6vw, 72px); align-items: start; }
.faq__intro p { color: var(--ink-soft); }
.faq__intro { position: sticky; top: 110px; }
.faq__list details, .pdp__details details { border-bottom: 1px dashed rgba(42, 20, 24, .2); }
.faq__list summary, .pdp__details summary {
    list-style: none; cursor: pointer; padding: 22px 50px 22px 0; position: relative; font-weight: 700; font-size: 1.1rem;
    transition: color .2s, padding-left .35s var(--ease-squish);
}
.faq__list summary:hover, .pdp__details summary:hover { color: var(--rust); padding-left: 6px; }
.faq__list summary::-webkit-details-marker, .pdp__details summary::-webkit-details-marker { display: none; }
.faq__list summary::after, .pdp__details summary::after {
    content: "+"; position: absolute; right: 0; top: 50%; translate: 0 -50%; width: 34px; height: 34px; border-radius: 50%;
    display: grid; place-items: center; background: var(--ink); color: var(--cream); font-size: 1.25rem;
    transition: rotate .45s var(--ease-squish), background .3s, border-radius .45s;
}
.faq__list details[open] summary::after, .pdp__details details[open] summary::after {
    rotate: 135deg; background: linear-gradient(160deg, var(--amber), var(--pumpkin)); color: var(--ink); border-radius: 42% 58% 55% 45% / 50% 45% 55% 50%;
}
.faq__list details p, .pdp__details details > p { color: var(--ink-soft); padding-right: 44px; margin-top: -6px; padding-bottom: 20px; }
details::details-content { height: 0; overflow: clip; transition: height .45s var(--ease-out), content-visibility .45s allow-discrete; }
details[open]::details-content { height: auto; }

/* ---------- 13. Nieuwsbrief ---------- */
.newsletter {
    --pt: clamp(64px, 9vw, 110px); position: relative; overflow: hidden; isolation: isolate; text-align: center; padding: var(--pt) 0 0;
    background: radial-gradient(560px 260px at 50% 100%, rgba(255, 122, 26, .38), transparent 70%), radial-gradient(600px 300px at 50% 0%, rgba(155, 229, 100, .12), transparent 70%), linear-gradient(180deg, var(--plum), #321528);
}
.newsletter::before {
    content: ""; position: absolute; inset: 0 0 30% 0; z-index: -1; pointer-events: none; opacity: .55;
    background-image: radial-gradient(1.5px 1.5px at 10% 30%, #fff, transparent), radial-gradient(1px 1px at 24% 60%, #FFE3B0, transparent),
        radial-gradient(1.5px 1.5px at 78% 22%, #fff, transparent), radial-gradient(1px 1px at 90% 58%, #fff, transparent),
        radial-gradient(1.2px 1.2px at 62% 40%, #FFE3B0, transparent), radial-gradient(1px 1px at 38% 16%, #fff, transparent);
    animation: twinkle 3.4s ease-in-out infinite alternate;
}
.newsletter__inner { position: relative; max-width: 680px; }
.newsletter p { color: var(--on-dark-soft); font-size: 1.1rem; }
.newsletter__form {
    display: flex; gap: 10px; max-width: 480px; margin: 24px auto 0; padding: 6px; border-radius: 99px;
    background: rgba(255, 241, 228, .08); border: 1px solid rgba(255, 214, 170, .18);
    transition: border-color .3s, box-shadow .3s;
}
.newsletter__form:focus-within { border-color: rgba(255, 178, 63, .6); box-shadow: 0 0 0 5px rgba(255, 178, 63, .14), 0 20px 40px -20px rgba(255, 122, 26, .6); }
.newsletter__form input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--on-dark); font: inherit; padding: 0 16px; }
.newsletter__form input::placeholder { color: var(--on-dark-soft); }
.newsletter__form input:focus { outline: none; }
.newsletter__peek { display: flex; justify-content: center; align-items: flex-end; gap: clamp(4px, 3vw, 40px); margin-top: 40px; }
.newsletter__peek svg { height: auto; margin-bottom: -18px; transition: translate .45s var(--ease-squish); filter: drop-shadow(0 -8px 24px rgba(255, 122, 26, .25)); }
.newsletter__peek svg:hover { translate: 0 -22px; }

/* ---------- Footer ---------- */
.site-footer {
    --pt: 72px; position: relative; color: var(--on-dark-soft); padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px));
    background: radial-gradient(800px 220px at 50% 0%, rgba(255, 122, 26, .12), transparent 70%), var(--night);
}
.site-footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 32px; }
.site-footer h4 { font-family: var(--font-body); font-weight: 800; font-size: .8rem; letter-spacing: .16em; text-transform: uppercase; color: var(--amber); margin-bottom: 14px; }
.site-footer__grid > div > a:not(.logo), .site-footer__grid .link-btn {
    display: block; width: fit-content; text-decoration: none; padding: 5px 0; transition: color .2s, translate .35s var(--ease-squish);
    background: none; border: 0; cursor: pointer; font: inherit; color: inherit; text-align: left;
}
.site-footer__grid > div > a:not(.logo):hover, .site-footer__grid .link-btn:hover { color: var(--on-dark); translate: 5px 0; }
.site-footer__brand p { margin: 16px 0; max-width: 30em; }
.logo--footer { color: var(--on-dark); }
.socials { display: flex; gap: 8px; }
.socials a { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: rgba(255, 241, 228, .07); color: var(--on-dark); transition: background .25s, color .25s, transform .45s var(--ease-squish), border-radius .45s; }
.socials a:hover { background: linear-gradient(160deg, var(--amber), var(--pumpkin)); color: var(--ink); transform: translateY(-4px) rotate(-8deg); border-radius: 42% 58% 55% 45% / 50% 45% 55% 50%; }
.site-footer__bottom { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 48px; padding-top: 24px; border-top: 1px dashed rgba(255, 214, 170, .14); font-size: .85rem; }
.site-footer__bottom p { margin: 0; }
.pay-chips { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.pay-chips li { padding: 4px 10px; border-radius: 8px; background: rgba(255, 241, 228, .07); font-size: .75rem; font-weight: 700; color: var(--on-dark); }

/* ---------- Winkelmandje ---------- */
.drawer-backdrop { position: fixed; inset: 0; z-index: 60; background: rgba(12, 5, 8, .62); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.cart-drawer {
    position: fixed; top: 0; right: 0; bottom: 0; z-index: 70; width: min(420px, 100%);
    display: flex; flex-direction: column; color: var(--ink); overflow: hidden; border-radius: 28px 0 0 28px;
    background: var(--leaf-pattern), var(--cream);
    padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px);
    transform: translateX(105%); visibility: hidden; transition: transform .55s cubic-bezier(.3, 1.2, .4, 1), visibility 0s .55s;
}
.cart-drawer.is-open { transform: none; visibility: visible; transition: transform .55s cubic-bezier(.3, 1.2, .4, 1); box-shadow: -24px 0 70px rgba(0, 0, 0, .4); }
.cart-drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: 1px dashed rgba(42, 20, 24, .16); }
.cart-drawer__head h2 { font-size: 1.7rem; margin: 0; }
.cart-drawer__head h2 span { font-family: var(--font-body); font-size: .95rem; color: var(--ink-soft); }
.cart-drawer .icon-btn:hover { background: rgba(42, 20, 24, .08); transform: rotate(90deg); }
.ship-meter { padding: 14px 20px; background: rgba(249, 230, 204, .85); font-size: .88rem; font-weight: 700; }
.ship-meter p { margin: 0 0 8px; }
.ship-meter__bar { height: 12px; border-radius: 99px; background: rgba(42, 20, 24, .1); overflow: hidden; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .15); }
.ship-meter__bar span {
    display: block; height: 100%; width: 0; border-radius: inherit; transition: width .6s var(--ease-squish);
    background: repeating-linear-gradient(-45deg, var(--pumpkin) 0 8px, var(--amber) 8px 16px); animation: stripes .9s linear infinite;
}
@keyframes stripes { to { background-position: 22.63px 0; } }
.ship-meter.is-free .ship-meter__bar span { background: repeating-linear-gradient(-45deg, var(--slime) 0 8px, #C4F29B 8px 16px); }
.cart-items { list-style: none; margin: 0; padding: 8px 20px; overflow-y: auto; flex: 1; }
.cart-item { display: grid; grid-template-columns: 64px 1fr auto; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px dashed rgba(42, 20, 24, .12); }
.cart-item__art { width: 64px; height: 64px; border-radius: 18px; background: radial-gradient(circle at 50% 40%, #fff, #F6DFC0); display: grid; place-items: center; overflow: hidden; }
.cart-item__art svg { width: 56px; height: 56px; }
.cart-item__name { font-weight: 700; line-height: 1.25; margin: 0 0 6px; }
.cart-item .qty { border-width: 1px; }
.cart-item .qty button { min-height: 32px; width: 30px; font-size: 1rem; }
.cart-item .qty input, .cart-item .qty span { width: 24px; text-align: center; font-weight: 800; font-size: .9rem; }
.cart-item__right { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.cart-item__remove { border: 0; background: none; font-size: .78rem; color: var(--ink-soft); text-decoration: underline; cursor: pointer; padding: 0; }
.cart-item__remove:hover { color: var(--maple); }
.cart-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 32px; text-align: center; }
.cart-empty svg { animation: bob 4s ease-in-out infinite; }
.cart-empty .btn--ghost { --fg: var(--ink); --ring: var(--ink); }
.cart-drawer__foot { padding: 16px 20px 20px; border-top: 1px dashed rgba(42, 20, 24, .16); background: var(--paper); }
.promo-form { display: flex; gap: 8px; }
.promo-form input { flex: 1; min-width: 0; padding: 10px 14px; border-radius: 99px; border: 2px solid var(--line-light); font: inherit; text-transform: uppercase; background: var(--cream); color: var(--ink); }
.promo-form input:focus { outline: none; border-color: var(--pumpkin); box-shadow: 0 0 0 4px rgba(255, 122, 26, .15); }
.promo-msg { font-size: .82rem; min-height: 1.2em; margin: 6px 0 4px; }
.promo-msg.ok { color: var(--ok); } .promo-msg.err { color: var(--maple); }
.totals { margin: 0 0 14px; display: grid; gap: 4px; font-size: .92rem; }
.totals div { display: flex; justify-content: space-between; }
.totals dd { margin: 0; font-weight: 600; }
.totals__discount { color: var(--ok); }
.totals__grand { font-size: 1.18rem; font-weight: 800; padding-top: 8px; margin-top: 4px; border-top: 1px dashed rgba(42, 20, 24, .2); }
.totals__grand dd { font-weight: 800; }
.fine { font-size: .75rem; color: var(--ink-soft); text-align: center; margin: 10px 0 0; }

.toast {
    position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); z-index: 90;
    translate: -50% 30px; scale: .8; opacity: 0; pointer-events: none;
    transition: translate .5s var(--ease-squish), scale .5s var(--ease-squish), opacity .3s;
    background: linear-gradient(180deg, #3F1C2E, var(--ink)); color: var(--cream); padding: 12px 22px; border-radius: 99px; font-weight: 700;
    border: 1px solid rgba(255, 178, 63, .25); box-shadow: 0 20px 40px -16px rgba(0, 0, 0, .6);
    max-width: calc(100% - 32px); text-align: center;
}
.toast::before { content: "\1F383"; margin-right: 8px; }
.toast.is-show { translate: -50% 0; scale: 1; opacity: 1; }

/* ---------- Collectiepagina ---------- */
.page-hero {
    position: relative; overflow: hidden; isolation: isolate; padding-block: 56px 140px;
    background: radial-gradient(700px 360px at 80% 100%, rgba(255, 122, 26, .38), transparent 62%), linear-gradient(180deg, #0F070C 0%, #2E1224 55%, #6A2424 100%);
}
.page-hero--tight { padding-block: 48px 88px; }
.page-hero--tight h1 { font-size: clamp(2rem, 4vw, 2.8rem); }
.page-hero::after { z-index: 0; }
.page-hero__inner { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.page-hero h1 { font-size: clamp(2.3rem, 5vw, 4rem); margin-bottom: .2em; text-shadow: 0 3px 0 #6B3E34, 0 12px 22px rgba(0, 0, 0, .45); }
.page-hero p { color: var(--on-dark-soft); margin: 0; }
.page-hero__art { display: flex; align-items: flex-end; gap: 0; flex-shrink: 0; }
.page-hero__art svg { margin-left: -24px; animation: bob 6s ease-in-out infinite; filter: drop-shadow(0 18px 20px rgba(0, 0, 0, .4)); }
.page-hero__art svg:nth-child(2) { animation-delay: -2s; }
.page-hero__art svg:nth-child(3) { animation-delay: -4s; }
.crumbs { font-size: .85rem; color: var(--on-dark-soft); margin-bottom: 12px; }
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--amber); }
.crumbs--dark { color: var(--ink-soft); margin-bottom: 24px; }
.crumbs--dark a:hover { color: var(--rust); }

.toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 28px; flex-wrap: wrap; }
.chips-wrap { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; overflow-x: auto; padding: 6px 2px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
/* Subtle scroll-position hint under the chip row: only shown once the chips actually
   overflow (data-chips-scroll gets .is-visible from JS), never on wide screens where
   every chip already fits. Mirrors how far you've scrolled, like a slim scrollbar. */
.chips-scroll { position: relative; height: 3px; margin: 0 2px; border-radius: 99px; background: var(--line-light); overflow: hidden; opacity: 0; pointer-events: none; transition: opacity .25s ease; }
.chips-scroll.is-visible { opacity: 1; }
.chips-scroll__thumb { position: absolute; top: 0; left: 0; height: 100%; min-width: 28px; border-radius: inherit; background: var(--pumpkin); transition: left .12s linear; }
.chip {
    flex-shrink: 0; border: 2px solid var(--line-light); background: var(--paper); color: var(--ink); padding: 8px 15px; border-radius: 99px;
    cursor: pointer; font-weight: 700; font-size: .9rem; transition: border-color .2s, background .2s, transform .35s var(--ease-squish);
}
.chip span { color: var(--ink-soft); font-weight: 600; margin-left: 2px; }
.chip:hover { border-color: var(--ink); transform: translateY(-2px); }
.chip:active { transform: scale(1.06, .9); transition-duration: .08s; }
.chip.is-active { background: linear-gradient(180deg, #4A2438, var(--ink)); color: var(--cream); border-color: var(--ink); box-shadow: 0 4px 0 #000, 0 10px 18px -10px rgba(42, 20, 24, .8); }
.chip.is-active span { color: var(--amber); }
.sort { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: .9rem; font-weight: 700; color: var(--ink); }
.sort select { font: inherit; min-width: 0; max-width: 100%; padding: 8px 32px 8px 14px; border-radius: 99px; border: 2px solid var(--line-light); background: var(--paper); color: var(--ink); cursor: pointer; }
.card.is-hidden { display: none; }
.empty-state { text-align: center; color: var(--ink-soft); padding: 40px; }

/* ---------- Productpagina ---------- */
.pdp { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: start; }
.pdp__gallery { position: sticky; top: 100px; }
.pdp__stage {
    position: relative; aspect-ratio: 1; border-radius: var(--radius-l); overflow: hidden; isolation: isolate;
    background: radial-gradient(circle at 50% 40%, #FFEBCB, #F2A85A 115%); box-shadow: var(--shadow-warm);
}
.pdp__stage::before {
    content: ""; position: absolute; inset: -40%; z-index: -1;
    background: repeating-conic-gradient(from 0deg, rgba(255, 255, 255, .26) 0deg 6deg, transparent 6deg 16deg);
    -webkit-mask: radial-gradient(circle, #000 8%, transparent 55%); mask: radial-gradient(circle, #000 8%, transparent 55%);
    animation: spin 60s linear infinite;
}
.pdp__view { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; pointer-events: none; transition: opacity .35s; }
.pdp__view.is-active { opacity: 1; pointer-events: auto; }
.pdp__view > svg, .pdp__view > .bundle-art { width: 72%; height: auto; filter: drop-shadow(0 22px 22px rgba(90, 31, 38, .28)); }
.pdp__view.is-active > svg, .pdp__view.is-active > .bundle-art { animation: pop-in .7s var(--ease-squish); }
@keyframes pop-in { from { transform: scale(.7, 1.2); opacity: 0; } }

/* Illustratie op de productpagina: statisch figuurtje, enkel getoond als terugval zolang er
   nog geen foto's zijn (zie squishbao_pdp_art_view() in includes/bootstrap.php). */
.pdp__art { display: grid; place-items: center; width: 100%; height: 100%; border: 0; padding: 0; margin: 0; background: transparent; font: inherit; }
.pdp__art svg, .pdp__art .bundle-art { width: 72%; height: auto; filter: drop-shadow(0 22px 22px rgba(90, 31, 38, .28)); }
.pdp__view--art.is-active .pdp__art svg, .pdp__view--art.is-active .pdp__art .bundle-art { animation: pop-in .7s var(--ease-squish); }
.pdp__thumbs { display: flex; gap: 10px; margin-top: 14px; }
.pdp__thumbs button { width: 84px; height: 84px; border-radius: 18px; border: 2px solid transparent; background: var(--paper); display: grid; place-items: center; cursor: pointer; padding: 4px; overflow: hidden; transition: transform .35s var(--ease-squish), border-color .2s, box-shadow .2s; }
.pdp__thumbs button:hover { transform: translateY(-3px) rotate(-2deg); }
.pdp__thumbs button svg, .pdp__thumbs .bundle-art { width: 68px; height: auto; }
.pdp__thumbs button.is-active { border-color: var(--pumpkin); box-shadow: 0 0 0 4px rgba(255, 122, 26, .18); }
.pdp__info h1 { font-size: clamp(2.2rem, 4.5vw, 3.6rem); margin-bottom: .25em; }
.pdp__price { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.pdp__price strong { font-family: var(--font-display); font-weight: 400; font-size: 2.4rem; }
.pdp__price s { color: var(--ink-soft); font-size: 1.1rem; }
.pdp__price .is-sale { color: var(--maple); }
.lede-dark { font-size: 1.08rem; color: var(--ink-soft); }
.buy-box--pdp { margin: 24px 0 18px; }
.stock { display: flex; align-items: center; gap: 8px; margin: 14px 0 0; font-size: .9rem; font-weight: 700; color: var(--ok); }
.stock__dot { width: 9px; height: 9px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 22%, transparent); animation: pulse 1.8s infinite; }
.stock--low { color: var(--maple); }
.pdp__perks { list-style: none; padding: 16px 18px; margin: 0 0 16px; display: grid; gap: 8px; border-radius: var(--radius); background: var(--paper); font-size: .92rem; box-shadow: 0 16px 30px -26px rgba(90, 31, 38, .5); }
.pdp__perks li { display: flex; align-items: center; gap: 10px; }
.pdp__perks svg { color: var(--pumpkin); flex-shrink: 0; }
.pdp__details .specs { margin: 0 0 20px; }
.notfound { text-align: center; }
.notfound .wrap { display: flex; flex-direction: column; align-items: center; }

/* ---------- FX-elementen (via assets/fx.js) ---------- */
.scroll-progress {
    position: fixed; top: 0; left: 0; right: 0; height: 4px; z-index: 120; pointer-events: none;
    transform-origin: 0 50%; transform: scaleX(0);
    background: linear-gradient(90deg, var(--maple), var(--pumpkin), var(--candy)); box-shadow: 0 0 12px rgba(255, 122, 26, .6);
}
.fly-art { position: fixed; z-index: 110; pointer-events: none; display: grid; place-items: center; }
.fly-art > svg, .fly-art > .bundle-art { width: 100%; height: 100%; }
.site-nav.has-blob a.is-active { background: transparent; }

/* Sier-animaties staan stil zolang ze buiten beeld zijn (fx.js zet de klasse) */
.fx-paused, .fx-paused::before, .fx-paused::after, .fx-paused > svg, .fx-paused > span { animation-play-state: paused !important; }

/* ---------- Scroll-reveal (fallback zonder GSAP) ---------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s, transform .7s var(--ease-out); }
.reveal.is-in { opacity: 1; transform: none; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
    .product-grid { grid-template-columns: repeat(3, 1fr); }
    .reviews { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
    .hero__inner, .mystery, .squish-test__grid, .design-note, .faq, .pdp { grid-template-columns: 1fr; }
    .hero__inner { min-height: 0; padding-block: 28px 140px; text-align: center; }
    .hero__copy { order: 2; display: flex; flex-direction: column; align-items: center; }
    .hero__stage { order: 1; max-width: 400px; margin-bottom: -20px; }
    .hero__cta { justify-content: center; margin-bottom: 28px; }
    .hero::before, .page-hero::before { background-position: 78% bottom; }
    .hero__sky::before { height: 150px; bottom: 50px; background-size: 1100px 150px; }
    .moon { top: 4%; right: 4%; }
    .usps__grid { grid-template-columns: repeat(2, 1fr); }
    .usps__grid > div:nth-child(3) { border-left: 0; }
    .usps__grid > div:nth-child(n+3) { border-top: 1px dashed rgba(255, 214, 170, .14); }
    .lineup, .pairings, .trust-grid { grid-template-columns: repeat(2, 1fr); }
    .product-grid { grid-template-columns: repeat(2, 1fr); }
    .reviews__list { grid-template-columns: 1fr; }
    .faq__intro, .pdp__gallery { position: static; }
    .site-footer__grid { grid-template-columns: 1fr 1fr; }
    .site-footer__brand { grid-column: 1 / -1; }
    .page-hero { padding-block: 40px 110px; }
    .page-hero__art { display: none; }
    .squish-test__stage { order: -1; }
    .design-note__art { margin-bottom: 24px; }
    .mystery__visual { rotate: 0deg; }
}
@media (max-width: 600px) {
    :root { --edge: 18px; }
    .pairings, .trust-grid { grid-template-columns: 1fr; }
    .lineup { gap: 12px; }
    .lineup__art { margin: 6px 6px 0; border-radius: 20px; }
    .lineup__info { padding: 12px 12px 14px; }
    .lineup__info h3 { font-size: 1.1rem; }
    .lineup__info p { display: none; }
    .lineup__row { flex-direction: column; align-items: stretch; gap: 8px; margin-top: 6px; }
    .lineup__row .btn { width: 100%; }
    .lineup__num { top: 12px; left: 14px; font-size: .8rem; }
    .product-grid { gap: 12px; }
    .card { border-radius: 22px; }
    .card__media { margin: 6px 6px 0; border-radius: 17px; }
    .card__body { padding: 12px 12px 14px; }
    .card__title { font-size: 1.05rem; }
    .card__tag { display: none; }
    .card__foot { flex-direction: column; align-items: stretch; }
    .card__foot .btn { width: 100%; }
    .usps__grid > div { flex-direction: column; text-align: center; gap: 6px; padding: 16px 8px; }
    .usps p { align-items: center; }
    .countdown__units { gap: 8px; }
    .countdown__units div { min-width: 56px; }
    .countdown__units strong { font-size: 1.65rem; }
    .variant-toggle, .secrets__grid { grid-template-columns: 1fr; }
    .coupons, .coupon { width: 100%; }
    .coupon { --notch: 84px; }
    .coupon__info { flex: 1; }
    .specs { grid-template-columns: 1fr 1fr; }
    .buy-box__row { flex-wrap: wrap; }
    .newsletter__form { flex-direction: column; border-radius: var(--radius); }
    .newsletter__form input { padding: 12px 14px; }
    .newsletter__peek svg:nth-child(n+4) { display: none; }
    .toolbar { flex-direction: column; align-items: stretch; }
    .chips { flex-wrap: nowrap; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }
    .sort { justify-content: space-between; }
    .logo__text { font-size: 1.3rem; }
    .logo-mark { width: 36px; height: 36px; }
    .palette-card { right: 8px; }
    .cart-drawer { border-radius: 0; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
    .reveal { opacity: 1; transform: none; }
    .fx-intro .hero .eyebrow, .fx-intro .hero h1, .fx-intro .hero .lede, .fx-intro .hero__cta,
    .fx-intro .countdown, .fx-intro .hero__stage, .fx-intro .moon,
    .fx-intro .page-hero .crumbs, .fx-intro .page-hero h1, .fx-intro .page-hero__inner p,
    .fx-intro .page-hero__art { opacity: 1 !important; }
}


/* ==========================================================
   Productfoto's (naast de illustraties)
   ========================================================== */
.product-photo { display: block; width: 100%; height: 100%; object-fit: cover; }
.card__art--photo { position: absolute; inset: 0; width: 100%; }
.card__art--photo > img { border-radius: inherit; }
.card:hover .card__art--photo { animation: none; }
.card__art--photo > img { transition: scale .6s var(--ease-squish); }
.card:hover .card__art--photo > img { scale: 1.05; }
.no-reviews { font-size: .82rem; font-weight: 700; color: var(--ink-soft); }
.pdp__view--photo { background: var(--paper); }
.pdp__view--photo > img { width: 100%; height: 100%; object-fit: cover; }
.pdp__view--photo.is-active > img { animation: fade-zoom .5s ease both; }
@keyframes fade-zoom { from { opacity: .4; scale: 1.03; } }
.pdp__thumbs button.is-photo { padding: 0; }
.pdp__thumbs button.is-photo img { width: 100%; height: 100%; object-fit: cover; }
.pdp__thumbs--many { overflow-x: auto; padding: 4px 4px 8px; margin-inline: -4px; scrollbar-width: thin; }
.pdp__thumbs--many button { flex-shrink: 0; width: 72px; height: 72px; }
.cart-item__art img { width: 100%; height: 100%; object-fit: cover; }

/* Varianten zonder prijsverschil (bv. designs) */
.variant-chips { border: 0; margin: 0 0 16px; padding: 0; }
.variant-chips legend { font-weight: 700; margin-bottom: 8px; }
.variant-chips legend strong { color: var(--pumpkin); }
.variant-chips > div { display: flex; flex-wrap: wrap; gap: 8px; }
.variant-chips label { position: relative; cursor: pointer; }
.variant-chips input { position: absolute; opacity: 0; }
.variant-chips span {
    display: inline-block; padding: .5em 1em; border-radius: 99px; font-weight: 700; font-size: .92rem;
    background: var(--paper); border: 2px solid var(--line-light); transition: border-color .2s, background .2s, transform .3s var(--ease-squish);
}
.variant-chips label:hover span { transform: translateY(-2px); }
.variant-chips input:checked + span { border-color: var(--pumpkin); background: #FFF0DC; box-shadow: 0 0 0 4px rgba(255, 122, 26, .16); }
.variant-chips input:focus-visible + span { outline: 3px solid var(--amber); outline-offset: 2px; }

.variant-chips span { display: inline-flex; align-items: center; gap: 8px; }
.variant-chips span img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; margin-left: -.45em; box-shadow: 0 0 0 2px #fff; }
.pdp__thumbs button[hidden] { display: none; }

/* ---------- Galerij: pijltjes + lightbox ---------- */
.card__meta:empty { display: none; }
.pdp__open { position: absolute; inset: 0; z-index: 1; border: 0; padding: 0; background: transparent; cursor: pointer; }
.pdp__open:focus-visible { outline: 4px solid var(--amber); outline-offset: -4px; border-radius: inherit; }
.pdp__stage .card__badge { z-index: 3; pointer-events: none; }
.pdp__nav {
    position: absolute; top: 50%; z-index: 2; translate: 0 -50%; width: 46px; height: 46px; border: 0; border-radius: 50%; cursor: pointer;
    display: grid; place-items: center; font-size: 2rem; line-height: 1; padding-bottom: 4px;
    background: rgba(255, 251, 244, .9); color: var(--ink); box-shadow: 0 6px 18px -8px rgba(42, 20, 24, .5);
    opacity: 0; transition: opacity .2s, scale .3s var(--ease-squish);
}
.pdp__nav--prev { left: 14px; }
.pdp__nav--next { right: 14px; }
.pdp__stage:hover .pdp__nav, .pdp__nav:focus-visible { opacity: 1; }
.pdp__nav:hover { scale: 1.1; }
.pdp__nav[hidden] { display: none; }
@media (hover: none) { .pdp__nav { opacity: 1; } }

.lightbox {
    position: fixed; inset: 0; z-index: 200; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px;
    padding: 56px clamp(8px, 3vw, 32px) 48px; background: rgba(15, 7, 12, .92); backdrop-filter: blur(6px);
    animation: lb-in .2s ease both;
}
.lightbox[hidden] { display: none; }
@keyframes lb-in { from { opacity: 0; } }
.lightbox__stage { margin: 0; height: 100%; min-width: 0; display: grid; place-items: center; }
.lightbox__stage img { max-width: 100%; max-height: calc(100vh - 120px); object-fit: contain; border-radius: 16px; box-shadow: 0 30px 60px -30px #000; animation: lb-img .25s ease both; }
.lightbox__stage.is-art > * { width: min(70vmin, 520px); height: auto; }
@keyframes lb-img { from { opacity: 0; scale: .97; } }
.lightbox__nav, .lightbox__close {
    border: 0; cursor: pointer; display: grid; place-items: center; color: #FFF1E4; background: rgba(255, 241, 228, .12);
    border-radius: 50%; transition: background .2s;
}
.lightbox__nav { width: 54px; height: 54px; font-size: 2.4rem; padding-bottom: 5px; }
.lightbox__nav[hidden] { visibility: hidden; display: grid; }
.lightbox__close { position: absolute; top: 12px; right: 12px; width: 44px; height: 44px; font-size: 1.2rem; }
.lightbox__nav:hover, .lightbox__close:hover { background: rgba(255, 241, 228, .25); }
.lightbox__count { position: absolute; left: 0; right: 0; bottom: 14px; margin: 0; text-align: center; color: rgba(255, 241, 228, .75); font-weight: 700; font-variant-numeric: tabular-nums; }
@media (max-width: 600px) {
    .lightbox { grid-template-columns: 1fr; padding-inline: 8px; }
    .lightbox__nav { position: absolute; bottom: 8px; width: 46px; height: 46px; }
    .lightbox__nav--prev { left: 16px; }
    .lightbox__nav--next { right: 16px; }
}

/* ---------- Cookiebanner + voorkeuren ---------- */
.cookie-banner {
    position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 240; max-width: 760px; margin: 0 auto;
    background: var(--night); color: var(--on-dark); border-radius: var(--radius); padding: 20px 24px;
    box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .55); animation: cookie-in .35s var(--ease-squish) both;
}
.cookie-banner[hidden] { display: none; }
@keyframes cookie-in { from { opacity: 0; transform: translateY(24px); } }
.cookie-banner__inner { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 20px; }
.cookie-banner__inner p { flex: 1 1 320px; margin: 0; color: var(--on-dark-soft); font-size: .92rem; }
.cookie-banner__inner p strong { color: var(--on-dark); }
.cookie-banner__inner a { color: var(--amber); text-decoration: underline; }
.cookie-banner__actions { display: flex; flex-wrap: wrap; gap: 10px; }

.cookie-dialog { position: fixed; inset: 0; z-index: 250; display: grid; place-items: center; padding: 20px; }
.cookie-dialog[hidden] { display: none; }
.cookie-dialog__backdrop { position: absolute; inset: 0; background: rgba(15, 7, 12, .68); backdrop-filter: blur(4px); }
.cookie-dialog__panel {
    position: relative; width: min(520px, 100%); max-height: calc(100vh - 40px); overflow-y: auto;
    background: var(--paper); color: var(--ink); border-radius: var(--radius); padding: 32px; box-shadow: 0 40px 70px -30px rgba(0, 0, 0, .5);
    animation: lb-img .25s ease both;
}
.cookie-dialog__panel h2 { margin-top: 0; }
.cookie-dialog__panel > p { color: var(--ink-soft); }
.cookie-dialog__close {
    position: absolute; top: 16px; right: 16px; width: 40px; height: 40px; border: 0; border-radius: 50%; cursor: pointer;
    display: grid; place-items: center; background: var(--paper-2, #FFF3E2); color: var(--ink);
}
.cookie-cat { padding: 14px 0; border-top: 1px solid var(--line-light); }
.cookie-cat__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.cookie-cat__head strong { font-family: var(--font-display); font-size: 1.05rem; }
.cookie-cat p { margin: 0; color: var(--ink-soft); font-size: .88rem; }
.cookie-dialog__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; margin-top: 18px; }

.switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }
.switch input { position: absolute; opacity: 0; }
.switch__track { flex-shrink: 0; position: relative; width: 44px; height: 25px; border-radius: 99px; background: rgba(42, 20, 24, .18); transition: background .2s; }
.switch__track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 19px; height: 19px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: translate .25s cubic-bezier(.34, 1.56, .64, 1); }
.switch input:checked + .switch__track { background: var(--pumpkin); }
.switch input:checked + .switch__track::after { translate: 19px 0; }
.switch input:disabled + .switch__track { opacity: .55; cursor: not-allowed; }
.switch input:focus-visible + .switch__track { outline: 3px solid var(--amber); outline-offset: 2px; }

/* ---------- Inhoudspagina's (voorwaarden, privacy, retourneren, ...) ---------- */
.legal { max-width: 760px; margin: 0 auto; }
.legal h2 { margin-top: 2.2em; color: var(--on-dark); }
.legal h2:first-child { margin-top: 0; }
.legal p, .legal li { color: var(--on-dark-soft); line-height: 1.7; }
.legal ul, .legal ol { padding-left: 1.3em; }
.legal li + li { margin-top: .4em; }
.legal a { color: var(--amber); }
.legal a:hover { color: var(--on-dark); }
.legal .legal-updated { color: var(--on-dark-soft); font-size: .88rem; margin-top: -.6em; }
.legal-todo {
    margin: 1.2em 0; padding: 16px 18px; border-radius: var(--radius-s); background: #FFF3E2; color: var(--ink);
    box-shadow: inset 0 0 0 2px rgba(232, 106, 18, .3); font-size: .92rem; line-height: 1.6;
}
.legal-todo strong { color: var(--pumpkin); }
.legal-todo-inline { color: var(--pumpkin); font-style: italic; border-bottom: 2px dashed rgba(232, 106, 18, .45); }
@media (max-width: 640px) {
    .cookie-banner { left: 10px; right: 10px; bottom: 10px; padding: 18px; }
    .cookie-banner__actions { width: 100%; }
    .cookie-banner__actions .btn { flex: 1; }
}

/* ==========================================================
   Voorraad: uitverkocht / bijna uitverkocht (productkaarten, PDP)
   ========================================================== */
.pill--dark { background: linear-gradient(180deg, #4A2640, var(--night)); color: var(--on-dark); }
.card__art--out { opacity: .55; filter: grayscale(.4); }
.card__art--out img { filter: grayscale(.4); }
.stock--out { color: var(--blood); }
.variant-chips label.is-out { opacity: .5; }
.variant-chips label.is-out input { cursor: not-allowed; }
.btn.is-disabled, .btn:disabled { opacity: .55; cursor: not-allowed; filter: grayscale(.3); }
.qty button:disabled, .qty input:disabled { opacity: .5; cursor: not-allowed; }

/* ==========================================================
   Afrekenen (checkout.php) + bedankpagina (order-bevestiging.php)
   ========================================================== */
.checkout__title { margin-bottom: 20px; }
.checkout { display: grid; grid-template-columns: 1.5fr 1fr; gap: 28px; align-items: start; }
.checkout__panel { background: var(--paper); border-radius: var(--radius-s); padding: 22px 24px; box-shadow: var(--shadow-warm, 0 10px 30px rgba(42,20,24,.08)); margin-bottom: 20px; border: 0; }
.checkout__panel legend { font-family: var(--font-display); font-size: 1.15rem; letter-spacing: .5px; padding: 0 0 22px; color: var(--ink); }
.checkout__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; }
.checkout__field { display: flex; flex-direction: column; gap: 6px; font-size: .85rem; font-weight: 700; color: var(--ink); }
.checkout__field span { display: block; }
.checkout__field small { font-weight: 500; color: var(--ink-soft); }
.checkout__field--wide { grid-column: 1 / -1; }
.checkout__field input, .checkout__field select {
    font: inherit; font-weight: 500; padding: 11px 13px; border-radius: 10px; border: 1px solid var(--line-light);
    background: #fff; color: var(--ink);
}
.checkout__field input:focus, .checkout__field select:focus { outline: 2px solid var(--pumpkin); outline-offset: 1px; }
.field-error { display: block; min-height: 1.1em; font-size: .78rem; font-weight: 600; color: var(--maple); margin-top: 2px; }
.checkout__field.is-invalid input, .checkout__field.is-invalid select { border-color: var(--maple); }
.checkout__field.is-invalid input:focus, .checkout__field.is-invalid select:focus { outline-color: var(--maple); box-shadow: 0 0 0 3px rgba(217, 67, 43, .18); }

/* Land-keuzelijst: los van de kale systeem-select met het browserstandaard pijltje.
   Eigen pijltje + nette hover/focus-toestand, in dezelfde stijl als de rest van het formulier.
   De optielijst zelf blijft (zoals overal) door het besturingssysteem getekend — daar kunnen
   we met CSS niet bij — maar het gesloten veld oogt nu bij de rest van de site. */
.checkout__field select {
    appearance: none; -webkit-appearance: none; -moz-appearance: none;
    padding-right: 42px; cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='none' stroke='%236F5257' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M5 7.5l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 14px center; background-size: 14px;
    transition: border-color .2s, box-shadow .2s;
}
.checkout__field select:hover { border-color: var(--pumpkin); }
.checkout__field select:focus { outline: none; border-color: var(--pumpkin); box-shadow: 0 0 0 3px rgba(255, 122, 26, .18); }
.checkout__field select:disabled {
    cursor: not-allowed; background-color: #F3ECE3; color: var(--ink-soft); border-color: var(--line-light);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='none' stroke='%23A79690' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M5 7.5l5 5 5-5'/%3E%3C/svg%3E");
}
.checkout__field--locked small { font-style: italic; }
.switch--field { margin-bottom: 4px; }
.switch--field small { display: block; font-weight: 500; color: var(--ink-soft); }
.checkout__foot { text-align: center; }
.checkout__summary { position: sticky; top: 20px; }
.checkout__summary h2 { margin: 0 0 14px; font-size: 1.2rem; }
.checkout__items { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 10px; }
.checkout__item { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center; font-size: .9rem; }
.checkout__item-name { font-weight: 700; }
.checkout__item-qty { color: var(--ink-soft); }
.checkout__empty { text-align: center; padding: 40px 0; display: grid; justify-items: center; gap: 12px; }
.checkout__empty svg { opacity: .8; }

.order-done { max-width: 560px; margin: 0 auto; text-align: center; display: grid; justify-items: center; gap: 6px; }
.order-done h1 { margin: 6px 0 10px; }
.order-done .checkout__summary { width: 100%; margin: 22px 0; text-align: left; position: static; }
.order-done .btn { margin-top: 8px; }

@media (max-width: 860px) {
    .checkout { grid-template-columns: 1fr; }
    .checkout__grid { grid-template-columns: 1fr; }
    .checkout__summary { position: static; }
}