/* Webshop (bestaande site, gecompileerde Tailwind) in de Shop-stijl. Werkt via de CSS-variabelen van die site
   plus een paar eigen componentklassen. Laadt na de originele CSS. */
:root, .dark {
  --background: 200 11% 95%;
  --foreground: 0 0% 0%;
  --card: 0 0% 100%;
  --card-foreground: 0 0% 0%;
  --popover: 0 0% 100%;
  --popover-foreground: 0 0% 0%;
  --primary: 251 82% 56%;
  --primary-foreground: 0 0% 100%;
  --secondary: 0 0% 100%;
  --secondary-foreground: 0 0% 0%;
  --muted: 200 11% 95%;
  --muted-foreground: 15 2% 46%;
  --accent: 200 11% 95%;
  --accent-foreground: 0 0% 0%;
  --border: 0 0% 92%;
  --input: 0 0% 92%;
  --ring: 251 82% 56%;
  --radius: 1.25rem;
  /* Eén accent: de oude snoepkleuren worden violet of inkt */
  --candy-pink: 251 82% 56%;
  --candy-purple: 251 82% 56%;
  --candy-turquoise: 0 0% 0%;
  --candy-lime: 0 0% 0%;
  --candy-yellow: 0 0% 0%;
  --candy-orange: 0 0% 0%;
  --candy-red: 0 0% 0%;
  --candy-navy: 0 0% 0%;
  --candy-light-blue: 0 0% 92%;
  --text-dark: 0 0% 0%;
  --text-light: 0 0% 100%;
  --gradient-candy: linear-gradient(#5433eb, #5433eb);
  --gradient-hero: linear-gradient(#ffffff, #ffffff);
  --gradient-rainbow: linear-gradient(#000000, #000000);
  --shadow-candy: rgba(0, 0, 0, .06) 0 2px 8px 0;
  --shadow-card: rgba(0, 0, 0, .1) 0 4px 6px -1px, rgba(0, 0, 0, .1) 0 2px 4px -2px;
  --shadow-button: rgba(69, 36, 219, .34) 0 4px 24px 0;
  --font-heading: Inter, ui-sans-serif, system-ui, sans-serif;
  --font-body: Inter, ui-sans-serif, system-ui, sans-serif;
  --sidebar-background: 0 0% 100%;
  --sidebar-foreground: 0 0% 0%;
  --sidebar-primary: 251 82% 56%;
  --sidebar-accent: 200 11% 95%;
  --sidebar-accent-foreground: 0 0% 0%;
  --sidebar-border: 0 0% 92%;
}
body { font-family: var(--ss-font); letter-spacing: -.02em; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, h5, h6, .font-heading { font-family: var(--ss-font); font-weight: 600; letter-spacing: -.035em; }
.font-bold, .font-extrabold, .font-black { font-weight: 600 !important; }

/* Donkere secties en neon-decoratie */
.section-dark, .section-dark-alt, .section-light { background-color: var(--ss-canvas) !important; }
.section-dark-alt { background-color: var(--ss-surface) !important; }
.neon-blob-pink, .neon-blob-purple, .neon-blob-turquoise { display: none !important; }
.text-gradient-rainbow { background: none !important; -webkit-text-fill-color: currentColor !important; color: var(--ss-ink) !important; }
.animate-float, .animate-bounce-in { animation: none !important; }

/* Kaarten: wit, 28px, zachte dubbele schaduw, geen rand */
.card-candy, .card-neon { background: var(--ss-surface) !important; border: 0 !important; border-radius: var(--ss-radius-card) !important; box-shadow: var(--ss-shadow-card) !important; }
.card-candy img, .card-neon img { border-radius: var(--ss-radius-img); }

/* Knoppen: pillen; violet alleen voor de hoofdactie */
.btn-candy { background: var(--ss-violet) !important; color: #fff !important; font-weight: 500 !important; box-shadow: var(--ss-shadow-violet) !important; transform: none !important; }
.btn-candy:hover { background: var(--ss-violet-dark) !important; }
.btn-candy-outline, .btn-candy-secondary { background: var(--ss-surface) !important; color: var(--ss-ink) !important; border: 1px solid var(--ss-line) !important; font-weight: 500 !important; box-shadow: var(--ss-shadow-sm) !important; transform: none !important; }
.shadow-candy { box-shadow: var(--ss-shadow-sm) !important; }

/* Kopbalk en menubalk: wit met haarlijn */
header.sticky { background: rgba(255, 255, 255, .92) !important; backdrop-filter: blur(10px); border-bottom: 1px solid var(--ss-line) !important; box-shadow: none !important; }
[class*="bg-[hsl(240"] { background: var(--ss-surface) !important; border-color: var(--ss-line) !important; }
header.sticky input { background: var(--ss-surface) !important; border: 1px solid rgba(5, 41, 77, .1) !important; border-radius: 9999px !important; color: var(--ss-ink) !important; }

/* Geen verlopen, gloed of neon: effen vlakken */
* { text-shadow: none !important; }
[class*="bg-gradient-to"] { background-image: none !important; }
.bg-clip-text.text-transparent { -webkit-text-fill-color: currentColor !important; color: var(--ss-ink) !important; }
[class*="shadow-[0_0"] { box-shadow: var(--ss-shadow-sm) !important; }
/* Aankondigingsbalk bovenaan: zwarte band */
[class*="from-candy-pink"][class*="via-candy-purple"][class*="to-candy-turquoise"].py-2 { background-color: var(--ss-ink) !important; color: #fff !important; }
/* Hero: licht waas over de foto zodat zwarte tekst leesbaar is en de foto rechts zichtbaar blijft */
[class*="from-[hsl(240,20%,6%)]"] { background-image: linear-gradient(90deg, rgba(242, 244, 245, .97) 0%, rgba(242, 244, 245, .88) 45%, rgba(242, 244, 245, .1) 100%) !important; }
/* Primaire knoppen met verloop -> violet pil */
[class*="from-[hsl(var(--candy-pink))]"][class*="to-[hsl(var(--candy-purple))]"], [class*="from-candy-lime"][class*="to-candy-turquoise"] {
  background-color: var(--ss-violet) !important; color: #fff !important; border-radius: 9999px !important; box-shadow: var(--ss-shadow-violet) !important; }
/* Logo zonder gloed */
header.sticky img { filter: none !important; }
header.sticky [class*="blur"] { display: none !important; }
@media (max-width: 640px) {
  section h1 { font-size: 2.25rem !important; line-height: 1.12 !important; letter-spacing: -.045em !important; overflow-wrap: anywhere; }
}

/* Server-HTML (src/seo.js): zichtbaar tot de app geladen is, en voor zoekmachines zonder JavaScript */
.ssr { font-family: var(--ss-font); color: var(--ss-ink); background: var(--ss-canvas); line-height: 1.5; }
.ssr a { color: inherit; }
.ssr-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 12px 16px; background: #fff; border-bottom: 1px solid var(--ss-line); }
.ssr-head nav { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 14px; }
.ssr-head nav a { text-decoration: none; }
.ssr-main { max-width: 1200px; margin: 0 auto; padding: 24px 16px 48px; }
.ssr-main h1 { font-size: clamp(26px, 5vw, 40px); font-weight: 600; letter-spacing: -.045em; margin: 8px 0 12px; }
.ssr-main h2 { font-size: 20px; font-weight: 600; letter-spacing: -.05em; margin: 32px 0 12px; }
.ssr-crumbs { font-size: 13px; color: var(--ss-muted); }
.ssr-grid { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.ssr-grid li { background: #fff; border-radius: 20px; padding: 10px; box-shadow: var(--ss-shadow-card); font-size: 14px; }
.ssr-grid a { display: flex; flex-direction: column; gap: 6px; text-decoration: none; }
.ssr-grid img { width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; border-radius: 14px; }
.ssr-grid .p { color: var(--ss-muted); }
.ssr-cats, .ssr-links { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ssr-cats li, .ssr-links li a { display: inline-block; background: #fff; border-radius: 999px; padding: 6px 14px; box-shadow: var(--ss-shadow-sm); font-size: 14px; text-decoration: none; }
.ssr-cats span { display: none; }
.ssr-product { display: grid; grid-template-columns: minmax(0, 300px) 1fr; gap: 24px; align-items: start; }
.ssr-product img { width: 100%; height: auto; border-radius: 20px; background: #fff; }
.ssr-product .price { font-size: 24px; font-weight: 600; }
.ssr-foot { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; padding: 32px 16px; background: #fff; border-top: 1px solid var(--ss-line); font-size: 14px; }
.ssr-foot b { display: block; margin-bottom: 6px; }
.ssr-foot a, .ssr-foot span { display: block; color: var(--ss-muted); text-decoration: none; padding: 1px 0; }
@media (max-width: 640px) { .ssr-product { grid-template-columns: 1fr; } }

/* ---- Hard ingestelde donkere kleuren uit de bestaande build (scan van alle pagina's, 26-10) ---- */
/* Donkere vlakken -> canvas (secties) of wit (kaarten) */
[class*="bg-[hsl(230,25%,9%)]"], [class*="bg-[hsl(230,25%,12%)]"], [class*="bg-[hsl(240,20%,6%)]"] { background-color: var(--ss-canvas) !important; }
[class*="bg-[hsl(230,25%,13%)]"], [class*="bg-[hsl(240,15%,16%)]"], [class*="bg-[hsl(240,15%,18%)]"] { background-color: var(--ss-surface) !important; box-shadow: var(--ss-shadow-card); }
/* Donkere randen -> haarlijn */
[class*="border-[hsl(230,20%"], [class*="border-[hsl(240,15%"] { border-color: var(--ss-line) !important; }
/* Grijze tekst -> gedempt; witte tekst die op een (voorheen) donker vlak stond -> inkt */
[class*="text-[hsl(230,15%"] { color: var(--ss-muted) !important; }
[class*="bg-[hsl(230,25%"] .text-white:not([class*="bg-"]), [class*="bg-[hsl(230,25%"] .text-primary-foreground:not([class*="bg-"]),
[class*="bg-[hsl(230,25%"] h1, [class*="bg-[hsl(230,25%"] h2, [class*="bg-[hsl(230,25%"] h3, [class*="bg-[hsl(230,25%"] .text-foreground { color: var(--ss-ink) !important; }
/* Labels en bolletjes met een eigen (gekleurde) achtergrond houden witte tekst */
[class*="bg-[hsl(230,25%"] [class*="bg-"].text-white, [class*="bg-[hsl(230,25%"] [class*="bg-"].text-primary-foreground { color: #fff !important; }
/* Social-knoppen (Snapchat geel, TikTok zwart) -> witte pillen zoals alle andere knoppen */
.bg-black.rounded-full, [class*="bg-[#FFFC00]"] { background: var(--ss-surface) !important; color: var(--ss-ink) !important; border: 1px solid var(--ss-line) !important; box-shadow: var(--ss-shadow-sm) !important; }
.bg-black.rounded-full *, [class*="bg-[#FFFC00]"] * { color: var(--ss-ink) !important; }