/* Winkelstijl "spooky" (GhostGear): donker, nachtblauw en diep paars, met een gloeiend groen
   accent zoals een EMF-meter of nachtzichtcamera. Sfeer met mist en korrel in de hero, zachte
   glow op knoppen en een korte flikkering bij hover. Het afrekenen (body.w-kaal) blijft rustig:
   wel donker, geen effecten. prefers-reduced-motion zet alle beweging uit.
   Contrast (WCAG AA): tekst #e7e9f0 op #0b0c12 is 16:1, subtekst #a9afc0 is 8,9:1, het groen
   #7ee787 op #0b0c12 is 12,7:1 en de knoptekst #06140b op het groen 12,3:1; de kleinste (placeholders, doorgestreepte prijs) 5,5:1.
   Kopletter: Cinzel (SIL Open Font License, fonts/cinzel/LICENSE), zelf gehost. */
@font-face { font-family: 'Cinzel'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/cinzel/cinzel-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Cinzel'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/cinzel/cinzel-latin-700-normal.woff2') format('woff2'); }

.w-stijl-spooky {
  --w-bg: #0b0c12; --w-vlak: #12141d; --w-tekst: #e7e9f0; --w-sub: #a9afc0; --w-lijn: #272b3a;
  --w-primair: #4b3a8c; --w-accent: #7ee787; --w-kop-bg: #0b0c12; --w-kop-tekst: #e7e9f0;
  --w-goed: #3fb950; --w-kaart-rand: 1px solid #23273a; --w-kaart-schaduw: 0 10px 30px rgba(0, 0, 0, .35);
  --sp-kaart: #151826; --sp-kaart-hover: #1a1e30; --sp-ijs: #8be9fd; --sp-paars: #2a1f52; --sp-glow: rgba(126, 231, 135, .38);
  --sp-kop: 'Cinzel', Georgia, 'Times New Roman', serif;
  color-scheme: dark;
  background: var(--w-bg); color: var(--w-tekst);
}
/* koppen met karakter, broodtekst blijft de leesbare systeemletter */
.w-stijl-spooky h1, .w-stijl-spooky h2, .w-stijl-spooky .w-sectiekop h2, .w-stijl-spooky .w-logo-naam, .w-stijl-spooky .w-voet-kolom h3 { font-family: var(--sp-kop); letter-spacing: .02em; font-weight: 700; }
.w-stijl-spooky h3, .w-stijl-spooky .w-kaart h3 { font-family: inherit; }
.w-stijl-spooky a { color: var(--sp-ijs); }
.w-stijl-spooky .w-sub, .w-stijl-spooky small, .w-stijl-spooky .w-kaart-sku, .w-stijl-spooky .w-prijs-ander { color: var(--w-sub); }

/* oppervlakken die in de basis wit zijn */
.w-stijl-spooky .w-kaart, .w-stijl-spooky .w-cat, .w-stijl-spooky .w-nieuwskaart, .w-stijl-spooky .w-kennis, .w-stijl-spooky .w-merk,
.w-stijl-spooky .w-assortiment-groep, .w-stijl-spooky .w-subcat, .w-stijl-spooky .w-pdp-koopblok, .w-stijl-spooky .w-wagen-zij,
.w-stijl-spooky .w-afreken-zij, .w-stijl-spooky .w-overzicht-blok, .w-stijl-spooky .w-vak, .w-stijl-spooky .w-formulier,
.w-stijl-spooky .w-keuze, .w-stijl-spooky .w-kassakoopjes, .w-stijl-spooky .w-wagenlade-vlak, .w-stijl-spooky .w-koopbalk,
.w-stijl-spooky .w-zoeklade, .w-stijl-spooky .w-mega, .w-stijl-spooky .w-adres-lijst, .w-stijl-spooky .w-filters,
.w-stijl-spooky .w-modelformulier, .w-stijl-spooky .w-aantal-veld, .w-stijl-spooky .w-stappen li span {
  background: var(--sp-kaart); color: var(--w-tekst); border-color: var(--w-lijn);
}
.w-stijl-spooky .w-merk { color: var(--w-tekst) !important; }
.w-stijl-spooky .w-veld input, .w-stijl-spooky .w-veld select, .w-stijl-spooky .w-veld textarea, .w-stijl-spooky .w-vorm textarea,
.w-stijl-spooky .w-lijst-select select, .w-stijl-spooky .w-weergave button, .w-stijl-spooky .w-zoek input, .w-stijl-spooky .w-aantal-veld input,
.w-stijl-spooky .w-nieuwsbrief input {
  background: #0f111a; color: var(--w-tekst); border-color: #353a4f;
}
.w-stijl-spooky ::placeholder { color: #8a90a3; }
.w-stijl-spooky :focus-visible { outline: 2px solid var(--w-accent); outline-offset: 2px; }

/* kop, menu, USP-balk en voet */
.w-stijl-spooky .w-uspbalk { background: linear-gradient(90deg, #0d0f17, var(--sp-paars), #0d0f17); color: #d6d9e4; border-bottom-color: var(--w-lijn); }
.w-stijl-spooky .w-uspbalk li::before { color: var(--w-accent); }
.w-stijl-spooky .w-kop { background: rgba(11, 12, 18, .94); backdrop-filter: blur(6px); border-bottom-color: var(--w-lijn); }
.w-stijl-spooky .w-nav { background: #0b0c12; }
.w-stijl-spooky .w-nav-link { color: var(--w-tekst); }
.w-stijl-spooky .w-nav-item.actief .w-nav-link, .w-stijl-spooky .w-nav-link:hover { color: var(--w-accent); }
.w-stijl-spooky .w-logo-teken { background: var(--sp-paars); color: var(--w-accent); box-shadow: 0 0 14px var(--sp-glow); }
.w-stijl-spooky .w-logo-naam { color: var(--w-tekst); }
.w-stijl-spooky .w-voet { background: #07080c; color: #b9bfcd; }
.w-stijl-spooky .w-voet a { color: #dfe3ec; }
.w-stijl-spooky .w-voet a:hover { color: var(--w-accent); }

/* knoppen: groen gloeiend, met donkere tekst voor contrast */
.w-stijl-spooky .w-knop, .w-stijl-spooky .w-nieuwsbrief button { background: var(--w-accent); border-color: var(--w-accent); color: #06140b !important; box-shadow: 0 0 0 1px rgba(126, 231, 135, .25), 0 0 18px var(--sp-glow); transition: box-shadow .25s, transform .25s; }
.w-stijl-spooky .w-knop-licht { background: transparent; color: var(--w-tekst) !important; border-color: #3a4058; }
.w-stijl-spooky .w-knop-licht:hover { border-color: var(--w-accent); color: var(--w-accent) !important; }
.w-stijl-spooky .w-zoek button, .w-stijl-spooky .w-badge, .w-stijl-spooky .w-stappen li.nu, .w-stijl-spooky .w-paginering a.aan, .w-stijl-spooky .w-filterpillen a.aan, .w-stijl-spooky .w-weergave button.aan { background: var(--w-primair); color: #fff; border-color: var(--w-primair); }
.w-stijl-spooky .w-wagen-tel { background: var(--w-accent); color: #06140b; }
.w-stijl-spooky .w-collectie, .w-stijl-spooky .w-cta-balk { background: linear-gradient(135deg, var(--sp-paars), #141a33); }
.w-stijl-spooky .w-prijs-hoofd { color: #f2f4f8; }
.w-stijl-spooky .w-prijs-was { color: #8a90a3; }
.w-stijl-spooky .w-voorraad.aan, .w-stijl-spooky .w-geverifieerd, .w-stijl-spooky .w-kk-prijs em { color: var(--w-accent); }
.w-stijl-spooky .w-sterren-rij { color: #f5c451; }
.w-stijl-spooky .w-melding-info { background: #14203a; border-color: #2b3d66; color: #dbe6ff; }
.w-stijl-spooky .w-melding-goed { background: #10261a; border-color: #23593a; color: #d6f5e0; }
.w-stijl-spooky .w-melding-let { background: #2a2110; border-color: #5c4a1e; color: #f5e6c4; }
.w-stijl-spooky .w-melding-fout { background: #2c1214; border-color: #6b2a2f; color: #ffd9dc; }
.w-stijl-spooky .w-tabel th, .w-stijl-spooky .w-wagen-tabel th { color: var(--w-sub); border-color: var(--w-lijn); }
.w-stijl-spooky .w-wagen-tabel td, .w-stijl-spooky .w-totalen div { border-color: var(--w-lijn); }
.w-stijl-spooky .w-kaart-foto img, .w-stijl-spooky .w-cat img { background: #0f111a; }

/* sfeer: alleen buiten het afrekenen */
.w-stijl-spooky:not(.w-kaal) .w-hero { position: relative; overflow: hidden; isolation: isolate; background: radial-gradient(120% 90% at 85% 10%, #261b4d 0%, transparent 55%), radial-gradient(90% 80% at 10% 100%, #0f2a2a 0%, transparent 60%), #0b0c12; }
.w-stijl-spooky:not(.w-kaal) .w-hero::before {
  /* mist: twee zachte lagen die heel langzaam schuiven */
  content: ""; position: absolute; inset: -20% -10%; z-index: -1; pointer-events: none; opacity: .5;
  background: radial-gradient(40% 30% at 30% 60%, rgba(180, 190, 255, .10), transparent 70%), radial-gradient(35% 25% at 70% 40%, rgba(139, 233, 253, .08), transparent 70%);
  animation: sp-mist 28s ease-in-out infinite alternate;
}
.w-stijl-spooky:not(.w-kaal) .w-hero::after {
  /* korrel, zoals beeld van een nachtzichtcamera */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .09; mix-blend-mode: screen;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23k)'/%3E%3C/svg%3E");
}
.w-stijl-spooky:not(.w-kaal) .w-hero h1 { text-shadow: 0 0 24px rgba(126, 231, 135, .18); }
.w-stijl-spooky:not(.w-kaal) .w-knop:hover { box-shadow: 0 0 0 1px rgba(126, 231, 135, .5), 0 0 28px rgba(126, 231, 135, .6); animation: sp-flikker .6s steps(1, end) 1; }
.w-stijl-spooky:not(.w-kaal) .w-kaart, .w-stijl-spooky:not(.w-kaal) .w-cat { transition: border-color .3s, box-shadow .3s, transform .3s; }
.w-stijl-spooky:not(.w-kaal) .w-kaart:hover, .w-stijl-spooky:not(.w-kaal) .w-cat:hover { border-color: rgba(126, 231, 135, .45); box-shadow: 0 0 0 1px rgba(126, 231, 135, .15), 0 14px 34px rgba(0, 0, 0, .45), 0 0 22px rgba(126, 231, 135, .12); transform: translateY(-2px); }
@keyframes sp-mist { from { transform: translate3d(-3%, 0, 0) scale(1); } to { transform: translate3d(3%, -2%, 0) scale(1.08); } }
@keyframes sp-flikker { 0% { opacity: 1; } 12% { opacity: .55; } 18% { opacity: 1; } 34% { opacity: .75; } 40%, 100% { opacity: 1; } }

/* het afrekenen: rustig, geen glow of beweging */
.w-stijl-spooky.w-kaal .w-knop { box-shadow: none; }
.w-stijl-spooky.w-kaal .w-kop { backdrop-filter: none; }

@media (prefers-reduced-motion: reduce) {
  .w-stijl-spooky *, .w-stijl-spooky *::before, .w-stijl-spooky *::after { animation: none !important; transition: none !important; }
  .w-stijl-spooky .w-kaart:hover, .w-stijl-spooky .w-cat:hover { transform: none; }
}
@media print { .w-stijl-spooky { --w-bg: #fff; --w-tekst: #111; background: #fff; color: #111; } }

/* tekst in de hero en de inleiding */
.w-stijl-spooky .w-lead { color: #c3c8d6; }
/* herobeeld: groene nachtzichttint met scanlijnen (alleen in de hero; productfoto's blijven echt van kleur) */
.w-stijl-spooky .w-hero-beeld { position: relative; }
.w-stijl-spooky .w-hero-beeld img { box-shadow: 0 0 0 1px rgba(126, 231, 135, .25), 0 0 40px rgba(126, 231, 135, .15); }
/* alleen het gegenereerde plaatsvervangbeeld krijgt de nachtzichttint; een echte herofoto blijft zoals hij is */
.w-stijl-spooky .w-hero-beeld img[src^="/shop/foto/"] { filter: grayscale(1) brightness(.75) sepia(1) hue-rotate(65deg) saturate(2.4) contrast(1.1); box-shadow: 0 0 0 1px rgba(126, 231, 135, .25), 0 0 40px rgba(126, 231, 135, .15); }
.w-stijl-spooky .w-hero-beeld::after { content: ""; position: absolute; inset: 0; border-radius: calc(var(--w-hoek) * 1.5); pointer-events: none; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .18) 0 2px, transparent 2px 4px), radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, .55) 100%); }
.w-stijl-spooky .w-hero-beeld::before { content: "REC"; position: absolute; top: 14px; left: 16px; z-index: 1; font: 600 .72rem/1 ui-monospace, Menlo, monospace; letter-spacing: .12em; color: #ff6b6b; padding-left: 14px; }
.w-stijl-spooky .w-hero-beeld::before { background: radial-gradient(circle at 4px 50%, #ff4d4d 0 4px, transparent 5px); }
.w-stijl-spooky:not(.w-kaal) .w-hero-beeld::before { animation: sp-rec 1.6s steps(2, jump-none) infinite; }
@keyframes sp-rec { 0% { opacity: 1; } 100% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .w-stijl-spooky .w-hero-beeld::before { animation: none !important; } }
.w-stijl-spooky .w-vinkjes-klein { color: #c3c8d6; }
.w-stijl-spooky .w-stappen li { color: var(--w-sub); }

/* ── huisstijl GhostGear (merk/ghostgear/stijl-spooky-aanvulling.css) ── */
/* Aanvulling op de bestaande public/css/winkel/stijl-spooky.css in DPS Pap (GhostGear). Die heeft al de
   kleuren, Cinzel voor de koppen en de effecten; dit voegt de huisstijlletter Inter voor de lopende tekst
   toe, de vaste fout/let-kleuren voor donker en een tweede-knoprand die 3:1 haalt (#3a4058 was 1,9:1).
   Plak onderaan stijl-spooky.css; letters in public/css/winkel/fonts/inter/.
   Inter: SIL Open Font License (fonts/OFL-Inter.txt). */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/inter/inter-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/inter/inter-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/inter/inter-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/inter/inter-latin-700-normal.woff2') format('woff2'); }

.w-stijl-spooky {
  --w-letter: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --w-fout: #ff7b72; --w-let: #e3b341;
}
.w-stijl-spooky .w-knop-licht { border-color: #5b6384; }