/* 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: 12 2% 41%;
  --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; } }
.ssr-foot .socials { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.ssr-foot .socials a { display: inline-flex; justify-content: center; width: 44px; height: 44px; border-radius: 9999px; border: 1px solid var(--ss-line); color: var(--ss-ink); }

/* ---- 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; }
/* Socials in de voet (patch in de bundel, content/socials.json): ronde witte knoppen met het icoon */
.ss-social { display: inline-flex !important; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 9999px; border: 1px solid var(--ss-line); background: var(--ss-surface); color: var(--ss-ink); box-shadow: var(--ss-shadow-sm); transition: color .15s, border-color .15s; }
.ss-social:hover { color: var(--ss-violet); border-color: var(--ss-violet); }
/* Aantal op de winkelwagenknop: was zwart op zwart (snoepgeel = inkt), alleen zichtbaar bij hover */
button[aria-label^="Winkelwagen"] > .bg-candy-yellow { background: var(--ss-surface) !important; color: var(--ss-violet) !important; border: 2px solid var(--ss-violet) !important; font-weight: 600 !important; }

/* Thuisbezorgd-beoordeling verbergen: webshopbezoekers blijven in de webshop. */
a[aria-label*="Thuisbezorgd"] { display: none !important; }

/* Wie in de webshop zit, woont buiten het bezorggebied: geen knoppen naar de bezorgkant (die stuurt toch terug). */
section:has(a[href="/bezorgen"]), a[href="/bezorgen"] { display: none !important; }

/* ---- Ontwerpreview 27-10 ---- */
/* 404 (patch in de bundel): kaart met twee knoppen */
.ss-404 { display: flex; justify-content: center; padding: 48px 16px 72px; }
.ss-404-card { width: 100%; max-width: 520px; background: var(--ss-surface); border-radius: var(--ss-radius-card); box-shadow: var(--ss-shadow-card); padding: 40px 28px; text-align: center; }
.ss-404-card .ss-404-code { margin: 0 0 6px; font-size: 14px; font-weight: 600; color: var(--ss-violet); }
.ss-404-card h1 { margin: 0 0 10px; font-size: 30px; line-height: 1.15; letter-spacing: -.045em; }
.ss-404-card p { color: var(--ss-muted); text-wrap: pretty; }
.ss-404-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 24px; }
.ss-btn { display: inline-flex; align-items: center; justify-content: center; padding: 12px 22px; border-radius: 9999px; background: var(--ss-violet); color: #fff; font-weight: 500; text-decoration: none; box-shadow: var(--ss-shadow-violet); white-space: nowrap; }
.ss-btn:hover { background: var(--ss-violet-dark); }
.ss-btn.ghost { background: var(--ss-surface); color: var(--ss-ink); border: 1px solid var(--ss-line); box-shadow: var(--ss-shadow-sm); }

/* Hero: geen zwevende emoji (lagen over de tekst op mobiel) */
.pointer-events-none > span.absolute.animate-float { display: none !important; }

/* Categorietegels: donker verloop onderaan, label linksonder, 28px */
a[href^="/categorie/"].aspect-square { border-radius: var(--ss-radius-card) !important; border: 0 !important; box-shadow: var(--ss-shadow-card) !important; }
a[href^="/categorie/"].aspect-square > div[style*="gradient"] { background: linear-gradient(to top, rgba(0, 0, 0, .72) 0%, rgba(0, 0, 0, .38) 36%, rgba(0, 0, 0, 0) 64%) !important; opacity: 1 !important; }
a[href^="/categorie/"].aspect-square > div.flex { align-items: flex-end !important; justify-content: flex-start !important; padding: 16px 18px; }
a[href^="/categorie/"].aspect-square h3 { padding: 0 !important; text-align: left !important; color: #fff !important; font-size: clamp(17px, 4.4vw, 24px) !important; line-height: 1.15 !important; filter: none !important; transform: none !important; }

/* Productkaarten: 28px, beschrijving precies 2 regels, prijsregel onderaan */
a[href^="/product/"].rounded-2xl { border-radius: var(--ss-radius-card) !important; border: 0 !important; box-shadow: var(--ss-shadow-card) !important; transform: none !important; }
p.line-clamp-2.flex-1 { flex: none !important; }
p.line-clamp-2.flex-1 + div { margin-top: auto !important; padding-top: 12px; }

/* Infokaarten (verzending, betalen, retour), Mystery Box-stappen en promokaarten: wit, 28px */
.grid.grid-cols-2 > .group.rounded-xl { border-radius: var(--ss-radius-card) !important; background: var(--ss-surface) !important; box-shadow: var(--ss-shadow-card) !important; padding: 20px 16px !important; }
[class*="bg-card/60"].rounded-2xl { border-radius: var(--ss-radius-card) !important; background: var(--ss-surface) !important; border: 0 !important; box-shadow: var(--ss-shadow-card) !important; backdrop-filter: none !important; }
[class*="min-h-[300px]"].rounded-3xl { border-radius: var(--ss-radius-card) !important; border: 0 !important; box-shadow: var(--ss-shadow-card) !important; }
[class*="min-h-[300px]"].rounded-3xl > img.absolute { opacity: 1 !important; border-radius: var(--ss-radius-img) !important; }
@media (max-width: 767px) {
  /* Foto onder de tekst in plaats van eroverheen */
  [class*="min-h-[300px]"].rounded-3xl { min-height: 0 !important; padding: 28px 24px 24px !important; }
  [class*="min-h-[300px]"].rounded-3xl > img.absolute { position: static !important; display: block; width: 100% !important; height: 170px !important; margin-top: 24px; transform: none !important; }
}

/* Grijze vlakjes (oude neonkleuren op 10 tot 20%) -> zacht violet. Spatie ervoor: hover:-varianten niet meenemen. */
[class^="bg-candy-turquoise/"], [class*=" bg-candy-turquoise/"], [class^="bg-candy-lime/"], [class*=" bg-candy-lime/"], [class^="bg-candy-yellow/"], [class*=" bg-candy-yellow/"], [class^="bg-candy-orange/"], [class*=" bg-candy-orange/"], [class^="bg-candy-red/"], [class*=" bg-candy-red/"], [class^="bg-candy-navy/"], [class*=" bg-candy-navy/"] { background-color: var(--ss-violet-soft) !important; }
[class^="border-candy-turquoise/"], [class*=" border-candy-turquoise/"], [class^="border-candy-lime/"], [class*=" border-candy-lime/"], [class^="border-candy-yellow/"], [class*=" border-candy-yellow/"], [class^="border-candy-orange/"], [class*=" border-candy-orange/"], [class^="border-candy-red/"], [class*=" border-candy-red/"], [class^="border-candy-navy/"], [class*=" border-candy-navy/"] { border-color: var(--ss-violet-wash) !important; }
[class*=" bg-candy-turquoise/"] svg, [class*=" bg-candy-lime/"] svg, [class*=" bg-candy-yellow/"] svg, [class*=" bg-candy-orange/"] svg,
[class*=" bg-candy-turquoise/"].text-candy-turquoise, [class*=" bg-candy-lime/"].text-candy-lime { color: var(--ss-violet) !important; }
/* Tweede knop in de hero (zwarte rand) -> witte pil */
.border-2.border-candy-turquoise { background: var(--ss-surface) !important; border: 1px solid var(--ss-line) !important; border-radius: 9999px !important; box-shadow: var(--ss-shadow-sm) !important; }

/* Voet: koppen in inkt, betaalmethoden als tekstpillen */
footer h3 { color: var(--ss-ink) !important; font-size: 16px !important; }
.ss-paypill { display: inline-flex; align-items: center; padding: 5px 12px; border-radius: 9999px; border: 1px solid var(--ss-line); background: var(--ss-surface); font: 500 13px/1.2 var(--ss-font); color: var(--ss-ink); }

/* Winkelwagen-paneel wit */
[role="dialog"][class*="sm:max-w-lg"], [role="dialog"][class*="sm:max-w-lg"] .bg-background { background: var(--ss-surface) !important; }

/* Tikdoelen minimaal 44px hoog: links in de voet en contactlinks (mail, telefoon). */
footer a, .ssr-foot a, main a[href^="mailto:"], main a[href^="tel:"] { display: inline-flex; align-items: center; min-height: 44px; }
.ssr-foot a { display: flex; padding: 0; }
/* Desktopmenu (zie scripts/patch-webshop.py, klasse ss-desknav): alles op één regel, ook op 1280px. */
.ss-desknav { flex-wrap: nowrap; }
.ss-desknav a, .ss-desknav button { white-space: nowrap; }
.ss-desknav > a { padding-left: 10px !important; padding-right: 10px !important; }
/* Megamenu met de categorieboom uit de backend: groepen in 4 kolommen onder elkaar (niet te hoog), tekst mag afbreken. */
.ss-desknav [class*="min-w-[600px]"] { min-width: 720px !important; }
.ss-desknav .grid.grid-cols-4 { display: block; columns: 4; column-gap: 24px; }
.ss-desknav .grid.grid-cols-4 > div { break-inside: avoid; margin-bottom: 18px; }
.ss-desknav .grid.grid-cols-4 a { white-space: normal; line-height: 1.25; }
/* 1024 tot 1199 px: de vier snelkoppelingen (staan ook onder Categorieën) weg, anders valt het menu links en rechts van het scherm. */
@media (max-width: 1199px) { .ss-desknav > a.text-sm[href^="/categorie/"] { display: none; } }
@media (max-width: 1320px) { .ss-desknav > a { padding-left: 7px !important; padding-right: 7px !important; } .ss-desknav > .mx-2 { margin-left: 4px !important; margin-right: 4px !important; } }
/* Postcode wijzigen (patch in de bundel: ssLocPill, opent public/gate.js): desktop een pil naast het logo, mobiel in de zwarte balk. */
.ss-loc { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font: 500 14px/1.2 var(--ss-font); letter-spacing: -.02em; cursor: pointer; }
.ss-loc-main { margin-left: 20px; padding: 10px 16px; border-radius: 9999px; border: 1px solid var(--ss-line); background: var(--ss-surface); color: var(--ss-ink); box-shadow: var(--ss-shadow-sm); }
.ss-loc-main:hover { border-color: var(--ss-ink); }
.ss-loc-c { color: var(--ss-violet); font-weight: 600; }
.ss-loc-bar { display: none; }
@media (max-width: 1023px) {
  .ss-loc-main, .ss-annc { display: none; }
  .ss-loc-bar { display: inline-flex; justify-content: center; width: 100%; min-height: 44px; margin: -8px 0; background: none; border: 0; color: #fff; }
  .ss-loc-bar .ss-loc-c { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
}