/* ==================================================   LeukeKeuze 2.0 – LICHTE LOOK (warenhuis, naar Nova's voorbeeld)
   Laadt na stijl.css en zet de kleuren om: crème achtergrond, donkerblauwe balken, goud als accent.
   ========================================================= */
:root {
  --bg: #F7F3EC;
  --bg-2: #FFFFFF;
  --kaart: #FFFFFF;
  --kaart-2: #F1ECE3;
  --knop-bg: #EFE9DE;
  --knop-bg-hover: #E6DECF;
  --knop-lijn: rgba(10, 16, 32, .14);
  --lijn: rgba(10, 16, 32, .12);
  --lijn-sterk: rgba(184, 134, 46, .6);
  --lijn-zacht: rgba(10, 16, 32, .08);
  --goud: #B8862E;
  --goud-licht: #B8862E;
  --goud-donker: #8F6620;
  --tekst: #141A2A;
  --tekst-2: #4F556A;
  --tekst-3: #5F667A; /* 31-10-2026: donkerder voor leesbaarheid (GO Marius) */
  --schaduw: 0 8px 24px rgba(10, 16, 32, .08);
  --gloed: 0 0 0 1px var(--lijn-sterk), 0 8px 24px rgba(184, 134, 46, .18);
}
body { background: var(--bg); color: var(--tekst); }

/* Donkerblauwe balken boven en onder blijven, zoals in het voorbeeld. */
.topbalk { background: #070C18; color: #BDB6A8; }
.topbalk svg { color: #D9A848; }
.header { background: #0A1020; border-bottom: 0; }
.logo { color: #fff; }
.logo .k { color: #F2CB74; }
.icoonknop { color: #F4ECDD; }
.icoonknop:hover { background: rgba(255,255,255,.08); color: #F2CB74; }
.hoofdnav a, .hoofdnav button { color: #F4ECDD; }
.hoofdnav a:hover, .hoofdnav button:hover, .hoofdnav [aria-expanded="true"], .hoofdnav [aria-current="page"] { color: #F2CB74; }
.zoekrij { background: #0A1020; border-bottom: 0; }
.onderbalk { background: rgba(10,16,32,.97); border-top: 1px solid rgba(217,168,72,.3); }
.onderbalk a, .onderbalk button { color: #BDB6A8; }
.onderbalk [aria-current="page"] { color: #F2CB74; }
.footer { background: #0A1020; color: #BDB6A8; }
.footer h3, .footer h4, .footer strong { color: #F4ECDD; }
.footer a { color: #BDB6A8; }

/* Hero: foto met donkere waas links, tekst wit (zoals het voorbeeld). */
.hero { background: #0A1020; color: #F4ECDD; }
.hero::after { background: linear-gradient(180deg, rgba(10,16,32,.1) 0%, rgba(10,16,32,.75) 55%, rgba(10,16,32,.9) 100%); }
.hero .kicker { color: #D9A848; }
.hero h1 em { color: #F2CB74; }
.hero p { color: #D9D2C4; }
.hero .populair > span { color: #F2CB74; }
.hero .chip { background: rgba(10,16,32,.62); border-color: rgba(255,255,255,.35); color: #fff; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.hero .chip:hover { background: rgba(10,16,32,.8); border-color: var(--goud, #C9A23A); }
@media (min-width: 760px) {
  .hero::after { background: linear-gradient(90deg, rgba(10,16,32,.92) 0%, rgba(10,16,32,.75) 38%, rgba(10,16,32,.15) 70%, rgba(10,16,32,0) 100%); }
}

/* Mobiel menu (lade) en megamenu licht. */
.lade { background: #fff; color: var(--tekst); }
.lade-uitgelicht { background: linear-gradient(135deg, rgba(184,134,46,.14), rgba(184,134,46,.04)); }
.megamenu { background: #fff; box-shadow: 0 24px 50px rgba(10,16,32,.18); }
.megamenu li a:hover { color: var(--tekst); }

/* Chips, knoppen, kaarten. */
.chip { background: #fff; border-color: rgba(10,16,32,.16); color: var(--tekst); }
.chip:hover { border-color: var(--goud); color: var(--goud-donker); }
.chip[aria-pressed="true"], .chip.actief { background: #0A1020; color: #fff; border-color: #0A1020; }
.tabs .chip:not([aria-pressed="true"]) { background: #fff; }
.knop-goud { color: #141A2A; box-shadow: 0 6px 18px rgba(184,134,46,.28); }
.knop-rand { border-color: var(--goud); color: var(--goud-donker); }
.knop-rand:hover { background: rgba(184,134,46,.08); }
.knop[disabled], .knop.uit { background: #E6E0D4; color: var(--tekst-3); }
.prodkaart, .catkaart, .groep, .awkaart, .gidskaart { background: #fff; border-color: rgba(10,16,32,.08); box-shadow: 0 2px 10px rgba(10,16,32,.05); }
.prodkaart:hover, .catkaart:hover { border-color: var(--goud); }
.prodkaart .beeld, .prodkaart .beeld.echt { background: #fff; }
.prodkaart .shop, .shop { color: var(--goud-donker); }
.prodkaart .prijs, .product .prijs { color: #141A2A; }
.subkaart .rond { border-color: #fff; background: #fff; box-shadow: 0 3px 12px rgba(10,16,32,.12); }
.subkaart:hover .rond, .subkaart.actief .rond { border-color: var(--goud); }
.subkaart.actief { color: var(--goud-donker); }
.persoon-subs .subkaart small { color: var(--tekst-3); }
.groep span { background: linear-gradient(transparent, rgba(8,14,30,.8)); }
.sectie-kop h2 { color: #141A2A; }
.sectie-kop .meer, .sectie-kop a { color: var(--goud-donker); }

/* Reclameblokken: foto met donkere waas blijft, tekst wit. */
.actie { color: #F4ECDD; }
.actie h3 { color: #fff; }
.actie p { color: #D9D2C4; }

/* Paginakop: lichte waas over de foto, donkere tekst. */
.paginakop { background: #fff; }
.paginakop .achter.vaag img { filter: blur(22px) brightness(1.05) saturate(.8); opacity: .35; }
.paginakop::after { background: linear-gradient(90deg, rgba(247,243,236,.95) 0%, rgba(247,243,236,.8) 50%, rgba(247,243,236,.5) 100%); }
.paginakop.zonder::after { background: none; }
.paginakop h1 { color: #141A2A; }
.paginakop p { color: var(--tekst-2); }
.kruimel, .kruimel a { color: var(--tekst-3); }

/* VONK-balk en zoekbalk-kaart. */
.vonk-kaart { background: linear-gradient(135deg, #0F1830, #1B2742); color: #F4ECDD; border-color: rgba(217,168,72,.35); }
.vonk-kaart h2 { color: #fff; }
.vonk-kaart p { color: #BDB6A8; }
.vonk-kaart .rond-pijl { color: #0A1020; }

/* Werkbalk, filters, formulieren. */
.werkbalk .aantal { color: var(--tekst-2); }
.sorteer select { color: var(--tekst); background: #fff; }
.filter-paneel, .toast { background: #fff; color: var(--tekst); }
.specs dl > div:nth-child(odd) { background: rgba(10,16,32,.03); }
.stap .nr { color: #141A2A; }
.stappen { background: #fff; border: 1px solid var(--lijn-zacht); border-radius: 16px; }
.alle-winkels .aw-brug { color: var(--goud-donker); border-top-color: rgba(184,134,46,.3); }
.lees-ook span { color: var(--tekst); }
.lijst-deel-velden input, .lijst-deel-velden select { background: #fff; color: var(--tekst); }
.lijst-zelf strong { color: var(--tekst); }
.gids, .gids p { color: var(--tekst-2); }
.gids h2 { color: var(--tekst); }
/* Hero op telefoon korter, zodat de personen sneller in beeld komen. */
@media (max-width: 759px) { .hero-inhoud { padding-top: 110px; } }
.lade-titel { font: 600 20px/1 var(--f-kop); color: var(--tekst); }
.lade-links { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 10px; padding: 0 0 14px; }
.lade-links a { display: block; padding: 7px 2px; font-size: 14.5px; color: var(--tekst-2); }
.lade-label { margin-top: 10px; }

/* Luxe details (punt van Nova): meer lucht rond de producten, mooiere tussenkoppen, gouden afwerking van knoppen. */
.sectie { padding-top: 26px; }
.sectie-kop { margin-bottom: 18px; }
.sectie-kop h2 { font-family: var(--f-kop); font-weight: 500; letter-spacing: -.01em; position: relative; padding-bottom: 10px; }
.sectie-kop h2::after { content: ''; position: absolute; left: 0; bottom: 0; width: 44px; height: 2px; background: linear-gradient(90deg, #D9A848, rgba(217,168,72,.2)); border-radius: 2px; }
.prodgrid { gap: 14px; }
@media (min-width: 760px) { .prodgrid { gap: 22px; } }
.prodkaart { border-radius: 16px; box-shadow: 0 2px 10px rgba(10,16,32,.05); transition: transform .2s, box-shadow .2s, border-color .2s; }
.prodkaart:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(10,16,32,.1); }

.knop-goud { background: linear-gradient(180deg, #F2CB74 0%, #D9A848 100%); border: 1px solid #B8862E; color: #141A2A; box-shadow: 0 4px 14px rgba(184,134,46,.25), inset 0 1px 0 rgba(255,255,255,.5); }
.knop-goud:hover { background: linear-gradient(180deg, #F6D68A 0%, #E0B055 100%); box-shadow: 0 8px 22px rgba(184,134,46,.35), inset 0 1px 0 rgba(255,255,255,.5); }
.werkbalk { margin: 18px 0 16px; padding: 14px 16px; background: #fff; border: 1px solid var(--lijn-zacht); border-radius: 14px; }
.werkbalk-onder { margin-top: 10px; }
.sorteer select { border: 1px solid var(--lijn); border-radius: 10px; padding: 8px 32px 8px 12px; }
.paginakop h1 { letter-spacing: -.01em; }
.paginakop .binnen { padding-top: 26px; padding-bottom: 32px; }
.subkaarten .subkaart .rond { box-shadow: 0 4px 14px rgba(10,16,32,.14); }
/* Collectie-banner (Persoonlijke cadeaus) */
.collectie-banner { position: relative; display: block; margin-top: 22px; min-height: 230px; border-radius: 20px; overflow: hidden; border: 1px solid var(--lijn); box-shadow: var(--schaduw); isolation: isolate; color: #F4ECDD; }
.collectie-banner img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .6s; }
.collectie-banner::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(10,16,32,.9) 0%, rgba(10,16,32,.65) 50%, rgba(10,16,32,.15) 100%); }
.collectie-banner:hover img { transform: scale(1.04); }
.collectie-tekst { padding: 24px; max-width: 380px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-height: 230px; justify-content: flex-end; }
.collectie-tekst .kicker { font: 700 11px/1.2 var(--f-ui); letter-spacing: .16em; text-transform: uppercase; color: #F2CB74; margin: 0; }
.collectie-tekst h2 { font: 600 26px/1.15 var(--f-kop); color: #fff; margin: 0; }
.collectie-tekst p { margin: 0 0 8px; color: #D9D2C4; font-size: 14.5px; }
.vonk-stapjes span { background: rgba(10,16,32,.1); }
.vonk-keuze, .vonk-optie { background: #fff; border: 1px solid var(--lijn); color: var(--tekst); }
.vonk-keuze:hover, .vonk-optie:hover { border-color: var(--goud); }
@media (min-width: 600px) { .persoon-subs.gelegenheden { grid-template-columns: repeat(5, 1fr); } }
.sectie-kop .kicker { font: 700 10.5px/1 var(--f-ui); letter-spacing: .22em; text-transform: uppercase; color: var(--goud-donker); margin: 0 0 6px; display: block; }
/* 'Bedoel je…' op de zoekpagina en pagina-tips tijdens het typen */
.bedoel-je { margin: 16px 0 6px; }
.bedoel-je h2 { font: 500 20px/1.2 var(--f-kop); margin-bottom: 10px; }
.bedoel-knoppen { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
@media (min-width: 760px) { .bedoel-knoppen { grid-template-columns: repeat(4, 1fr); } }
.bedoel { display: flex; align-items: center; gap: 8px; padding: 12px 12px; border-radius: 12px; background: #fff; border: 1px solid var(--lijn); font: 600 14px/1.25 var(--f-ui); color: var(--tekst); box-shadow: 0 2px 8px rgba(10,16,32,.05); }
.bedoel svg { width: 16px; height: 16px; flex: none; color: var(--goud-donker); }
.bedoel small { display: block; font: 500 11.5px/1.2 var(--f-ui); color: var(--tekst-3); }
.bedoel.persoon { border-color: rgba(184,134,46,.45); background: #FFFBF3; }
.bedoel:hover { border-color: var(--goud); }
.zoek-tips .zt-pagina { background: #FFFBF3; font-weight: 600; }
.zoek-tips .zt-pagina + .zt-item:not(.zt-pagina) { border-top: 1px solid var(--lijn-zacht); }
.zoek-tips .zt-ic { width: 44px; height: 44px; display: grid; place-items: center; color: var(--goud-donker); flex: none; }
.zoek-tips .zt-ic svg { width: 18px; height: 18px; }
.zoek-tips .zt-titel small { color: var(--tekst-3); font-weight: 500; }
.zoek-tips .zt-pagina { padding: 4px 14px; }
.zoek-tips .zt-ic { width: 32px; height: 32px; }
/* 'Verder zoeken' onder een product */
.verder-knoppen { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 760px) { .verder-knoppen { grid-template-columns: repeat(2, 1fr); } }
.verder-knop { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 14px; background: #fff; border: 1px solid var(--lijn); box-shadow: 0 2px 10px rgba(10,16,32,.05); color: var(--tekst); min-height: 64px; }
.verder-knop > svg { width: 22px; height: 22px; flex: none; color: var(--goud-donker); }
.verder-knop span { flex: 1; min-width: 0; }
.verder-knop strong { display: block; font: 600 15px/1.25 var(--f-ui); }
.verder-knop small { display: block; font: 500 12.5px/1.2 var(--f-ui); color: var(--tekst-3); margin-top: 2px; }
.verder-knop .pijl { width: 18px; height: 18px; color: var(--tekst-3); }
.verder-knop:hover { border-color: var(--goud); }
.werkbalk .voor-chips { margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px dashed var(--lijn-zacht); }
.werkbalk .voor-chips .chip { font-size: 12.5px; padding: 8px 13px; }
.prodkaart .reden { margin: 6px 0 0; font: 500 12.5px/1.35 var(--f-tekst); color: var(--tekst-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.prodkaart .info { display: flex; flex-direction: column; }
.prodkaart .info .prijs { margin-top: 0; }
.prodkaart .reden::before { content: '★ '; color: var(--goud); }
.chip.verras { display: inline-flex; align-items: center; gap: 6px; border-color: rgba(184,134,46,.5); color: var(--goud-donker); background: #FFFBF3; }
.chip.verras svg { width: 15px; height: 15px; }
.werkbalk-onder { flex-wrap: wrap; }
.werkbalk-onder .aantal { margin-right: auto; }
/* Toegankelijkheid: grotere tikdoelen voor kleine links, minder bewegen als iemand dat instelt. */
.footer-onder a { display: inline-block; padding: 8px 2px; }
.sectie-kop .meer { padding: 8px 0; }
.kruimel a { display: inline-block; padding: 6px 0; }
.prodkaart .shop { font-size: 11.5px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; scroll-behavior: auto !important; } }

/* Donkere paginakop (verlanglijstje): donkerblauw met goud, zoals het menu */
.paginakop.donker { background: radial-gradient(120% 140% at 100% 0%, rgba(217,168,72,.18), transparent 55%), #0A1020; border-bottom: 1px solid rgba(217,168,72,.35); }
.paginakop.donker::after { background: none; }
.paginakop.donker h1 { color: #F4ECDD; }
.paginakop.donker h1::first-letter { color: #F2CB74; }
.paginakop.donker p { color: #BDB6A8; }
.paginakop.donker .kruimel, .paginakop.donker .kruimel a { color: #8D897F; }

/* Delen: compact, leesbaar, onder de cadeaus */
.lijst-deel { display: block; background: #fff; border: 1px solid rgba(184,134,46,.35); border-radius: 16px; padding: 16px; box-shadow: 0 2px 10px rgba(10,16,32,.05); }
.lijst-deel-tekst { color: var(--tekst-2); font-size: 14px; margin-bottom: 12px; }
.lijst-deel-tekst strong { color: var(--tekst); font-size: 19px; }
.lijst-deel-velden { grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.lijst-deel-velden label { color: var(--tekst-2); font-weight: 600; }
.lijst-deel-velden input, .lijst-deel-velden select { padding: 10px 11px; font-size: 15px; border-color: rgba(10,16,32,.16); }
.lijst-deel-knoppen { flex-direction: row; gap: 8px; }
.lijst-deel-knoppen .knop { flex: 1; padding: 12px 10px; font-size: 14.5px; }
@media (max-width: 480px) { .lijst-deel-velden { grid-template-columns: 1fr 1fr; } }
.lijst-deel-velden > label { min-width: 0; }
.lijst-deel-velden input, .lijst-deel-velden select { width: 100%; min-width: 0; box-sizing: border-box; }
.footer a, .footer p { color: #BDB6A8; }
/* Delen op de telefoon: alles onder elkaar over de volle breedte, zodat 'Mijn verjaardag' en de knoppen altijd heel passen. */
@media (max-width: 600px) {
  .lijst-deel-velden { grid-template-columns: 1fr; gap: 12px; }
  .lijst-deel-knoppen { flex-direction: column; gap: 10px; }
  .lijst-deel-knoppen .knop { width: 100%; justify-content: center; padding: 14px 16px; font-size: 16px; }
}
.lijst-deel-velden select { padding-right: 36px; text-overflow: ellipsis; }

/* Gedeeld verlanglijstje: warme cadeaupagina voor wie de link opent */
.lijst-kop { background: radial-gradient(120% 140% at 100% 0%, rgba(217,168,72,.2), transparent 55%), #0A1020; color: #F4ECDD; border-bottom: 1px solid rgba(217,168,72,.35); }
.lijst-kop .binnen { padding-top: 26px; padding-bottom: 28px; }
.lijst-kop .kicker { color: #D9A848; letter-spacing: .14em; font-size: 11.5px; margin-bottom: 10px; }
.lijst-kop h1 { font: 500 clamp(30px, 8vw, 46px)/1.1 var(--f-kop); color: #F2CB74; margin: 0 0 12px; }
.lijst-kop p { margin: 0 0 8px; color: #D9D2C4; font-size: 16px; line-height: 1.5; max-width: 560px; }
.lijst-kop .lijst-gelegenheid { color: #fff; font: 600 18px/1.35 var(--f-ui); }
.lijst-kop .lijst-vraag { color: #fff; font: 700 17px/1.35 var(--f-ui); margin-top: 12px; }
.sectie-kop p { margin: 6px 0 0; color: var(--tekst-2); font-size: 14.5px; }
.cadeaukaarten { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 760px) { .cadeaukaarten { grid-template-columns: repeat(3, 1fr); gap: 18px; } }
@media (min-width: 1100px) { .cadeaukaarten { grid-template-columns: repeat(4, 1fr); } }
.cadeaukaart { background: #fff; border: 1px solid rgba(10,16,32,.08); border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 2px 10px rgba(10,16,32,.05); }
.cadeaukaart .beeld { display: block; aspect-ratio: 1; background: #fff; overflow: hidden; }
.cadeaukaart .beeld img { width: 100%; height: 100%; object-fit: contain; padding: 10px; box-sizing: border-box; }
.cadeaukaart .beeld.sfeer img { object-fit: cover; padding: 0; }
.cadeaukaart .info { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.cadeaukaart .shop { font: 700 11px/1 var(--f-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--goud-donker); }
.cadeaukaart h3 { font: 500 14.5px/1.3 var(--f-ui); margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cadeaukaart .prijs { font: 700 17px/1.2 var(--f-ui); color: var(--tekst); margin-bottom: 6px; }
.cadeaukaart .geef { margin-top: auto; width: 100%; justify-content: center; padding: 11px 8px; font-size: 14px; }
.lijst-zelf { margin-top: 30px; text-align: center; border-top: 1px solid var(--lijn); padding-top: 22px; color: var(--tekst-2); line-height: 1.5; }
.lijst-zelf strong { display: block; color: var(--tekst); font: 600 18px/1.3 var(--f-ui); margin-bottom: 4px; }
.lijst-zelf p { margin: 0 0 12px; color: var(--tekst-2); font-size: 15px; }
.lijst-weg { color: var(--goud-donker); }
.footer li a { color: #BDB6A8; }
.footer li a:hover { color: #F2CB74; }
.footer-onder a { color: #BDB6A8; }

/* 2.1 Nieuwe indeling: knoppen (Dames · Heren · Kinderen, Jongen · Meisje, Leeftijd) met een kopje erboven. */
.knop-groep { margin-bottom: 10px; }
.knop-groep .chips-titel { font-size: .82rem; font-weight: 600; color: var(--grijs, #6b6b6b); margin: 0 0 6px; letter-spacing: .01em; }
.knop-groep .chips { padding-top: 0; }
.persoon-subs.home .subkaart { hyphens: auto; -webkit-hyphens: auto; }

/* Kleurwissel (30-10-2026): één product per model, kleuren kiezen met pijltjes of fotootjes */
.prodkaart .kleuren { display: inline-flex; align-items: center; gap: 3px; font: 500 12px/1.2 var(--f-ui); color: #5A6275; margin-top: 2px; }
.prodkaart .kleuren i { width: 9px; height: 9px; border-radius: 50%; border: 1px solid rgba(20,26,42,.25); margin-right: -6px; }
.prodkaart .kleuren i:nth-child(1) { background: #C9A86A; } .prodkaart .kleuren i:nth-child(2) { background: #C0C4CC; } .prodkaart .kleuren i:nth-child(3) { background: #1F2433; margin-right: 4px; }
.kleurkeuze { margin: 10px 0 4px; min-width: 0; max-width: 100%; }
/* Veel varianten (bijv. 31 hondjes): de rij met fotootjes schuift, de pagina wordt niet breder. */
.product-info { min-width: 0; }
.kleurkeuze p { margin: 0 0 8px; font: 500 14px/1.4 var(--f-ui); color: #141A2A; }
.kleurkeuze p .klein { color: #5A6275; font-weight: 400; }
.kleurstalen { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 6px; scrollbar-width: thin; }
.kleurstalen button { flex: 0 0 52px; width: 52px; height: 52px; padding: 3px; border-radius: 10px; border: 1.5px solid rgba(20,26,42,.14); background: #fff; cursor: pointer; }
.kleurstalen button img { width: 100%; height: 100%; object-fit: contain; display: block; }
.kleurstalen button[aria-pressed="true"] { border-color: var(--goud, #C9A23A); box-shadow: 0 0 0 2px rgba(201,162,58,.35); }
.product-beeld.varianten .galerij-rij img { position: absolute; inset: 0; width: 100%; height: 100%; box-sizing: border-box; object-fit: contain; padding: 7%; background: #fff; }

/* Maatkeuze (31-10-2026) */
.maatkeuze { margin: 12px 0 4px; min-width: 0; }
.maatkeuze p { margin: 0 0 8px; font: 500 14px/1.4 var(--f-ui); color: #141A2A; }
.maatkeuze p.klein { margin: 6px 0 0; font-size: 12.5px; color: #5A6275; }
.maten { display: flex; flex-wrap: wrap; gap: 6px; }
.maten button, .maten span { min-width: 46px; height: 40px; padding: 0 10px; border-radius: 10px; border: 1.5px solid rgba(20,26,42,.16); background: #fff; font: 600 14px/37px var(--f-ui); color: #141A2A; text-align: center; }
.maten button { cursor: pointer; }
.maten button:hover { border-color: var(--goud, #C9A23A); }
.maten button[aria-pressed="true"] { background: #141A2A; border-color: #141A2A; color: #fff; }
.maten span { min-width: 0; height: auto; padding: 2px 8px; border: 0; border-radius: 6px; background: #EFE9DE; color: #4A4F5C; font: 500 13px/1.6 var(--f-ui); }

/* Leesbaarheid (31-10-2026, GO Marius): goud als tekst op de lichte achtergrond iets donkerder; donkere balken blijven zoals ze waren. */
main, .footer-licht { --goud: #8F6620; --goud-licht: #8F6620; }

/* Banner met logo erin (kerst 2026): hele foto tonen, tekst en knoppen eronder. */
.hero.hero-logo { display: block; min-height: 0; }
.hero.hero-logo picture, .hero.hero-logo picture img { position: relative; inset: auto; height: auto; display: block; width: 100%; }
.hero.hero-logo::after { display: none; }
.hero.hero-logo .hero-inhoud { padding: 16px 0 20px; }
.hero.hero-logo .kicker, .hero.hero-logo h1 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hero.hero-logo p { margin: 0 0 4px; }
.hero.hero-logo .populair { margin-top: 10px; }
@media (max-width: 759px) { .hero.hero-logo p { display: none; } .hero.hero-logo .populair { margin-top: 0; } }
@media (min-width: 760px) { .hero.hero-logo .binnen { text-align: center; } .hero.hero-logo p { max-width: none; } .hero.hero-logo .populair { justify-content: center; } .hero.hero-logo .chips { flex-wrap: wrap; justify-content: center; } }

/* Lange tekst op een categoriekaart: 3 regels, met 'Lees verder'. */
.catkaart .lees-kort { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.catkaart .lees-open .lees-kort { display: block; -webkit-line-clamp: unset; overflow: visible; }
.catkaart .lees-verder { display: inline-block; margin-top: 4px; font-weight: 700; font-size: 13px; color: var(--goud-donker, #8A6A1F); text-decoration: underline; cursor: pointer; }

/* Golden Winter Luxury (Nova): ronde plaatjes met gouden rand. Op de brede kaarten het hele rondje tonen op marineblauw, zodat de gouden rand heel blijft. */
.groep img[src*="-gw"], .catkaart .beeld img[src*="-gw"] { object-fit: contain; background: #011950; }
.groep:has(img[src*="-gw"]), .catkaart .beeld:has(img[src*="-gw"]) { background: #011950; }

/* Strakke categoriekaarten (31-10-2026, Marius: "alles netjes en strak, even groot"):
   - elke kaart even hoog, plaatje even groot, titel op 2 regels, tekst op 2 regels
   - de pijlknop altijd op dezelfde plek: rechtsonder
   - plaatjes zonder gouden rand krijgen hetzelfde ronde kader op marineblauw, zodat alle platen gelijk ogen */
.catkaarten { align-items: stretch; }
.catkaart { display: flex; flex-direction: column; position: relative; height: 100%; }
.catkaart .beeld { aspect-ratio: 1 / .86; background: #011950; display: grid; place-items: center; }
.catkaart .beeld img:not([src*="-gw"]) { height: 94%; width: auto; aspect-ratio: 1; object-fit: cover; border-radius: 50%; box-shadow: 0 0 0 3px #D9A848, 0 0 0 5px rgba(217,168,72,.35); }
.catkaart:hover .beeld img:not([src*="-gw"]) { transform: scale(1.03); }
.catkaart .tekst { flex: 1; display: block; padding: 12px 14px 54px; }
.catkaart h3 { font: 700 15.5px/1.25 var(--f-ui); min-height: 2.5em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: 0 0 4px; }
.catkaart .tekst p, .catkaart .lees-kort { margin: 0; font-size: 13px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.catkaart .lees-verder { display: none; }
.catkaart .rond-pijl { position: absolute; right: 12px; bottom: 12px; width: 34px; height: 34px; }
@media (min-width: 760px) { .catkaart h3 { font-size: 16px; } }
@media (min-width: 1100px) { .catkaarten.alle-cats, .binnen > .sectie > .catkaarten { grid-template-columns: repeat(4, 1fr); } } /* 16 categorieën: 4 x 4, geen losse kaart onderaan */

/* VONK groot bovenaan + Zoek op budget (01-11-2026) */
.vonk-kaart.vonk-groot { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 18px; padding: 22px 24px; margin: 22px 0 6px; border: 1px solid rgba(217,168,72,.45); border-radius: 18px; text-decoration: none; }
.vonk-kaart.vonk-groot h2 { font-size: 22px; margin: 0 0 6px; }
.vonk-kaart.vonk-groot p { font-size: 15px; }
.vonk-kaart.vonk-groot p strong { color: #E8C67A; }
.vonk-kaart.vonk-groot .knop { white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.vonk-kaart.vonk-groot .knop svg { width: 16px; height: 16px; }
@media (max-width: 759px) {
  .vonk-kaart.vonk-groot { grid-template-columns: auto 1fr; padding: 18px; gap: 12px 14px; margin-top: 16px; }
  .vonk-kaart.vonk-groot h2 { font-size: 19px; }
  .vonk-kaart.vonk-groot p { font-size: 14px; }
  .vonk-kaart.vonk-groot .knop { grid-column: 1 / -1; justify-content: center; }
}
.budget-rij { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.budget-knop { display: flex; align-items: center; justify-content: center; min-height: 56px; border-radius: 14px; background: #011950; color: #F4ECDD; font-weight: 800; font-size: 16px; text-decoration: none; border: 1px solid rgba(217,168,72,.45); }
.budget-knop:hover { background: #0F1830; color: #E8C67A; }
@media (max-width: 759px) { .budget-rij { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 600px) { .persoon-subs.home.gelegenheden { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1024px) { .persoon-subs.home.gelegenheden { grid-template-columns: repeat(8, 1fr); } .persoon-subs.home.gelegenheden .subkaart .rond { width: 104px; height: 104px; } }
/* VONK 2.0 (01-11-2026) */
.vonk-uitslag { position: relative; }
.vonk-wijzig { display: inline-flex; align-items: center; gap: 4px; }
.vonk-wijzig svg { width: 12px; height: 12px; opacity: .7; }
.vonk-budget { display: flex; align-items: center; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.vonk-budget > span { font-weight: 700; font-size: 14px; color: #8A6A2A; }
.vonk-budget .chips { display: flex; flex-wrap: wrap; gap: 8px; }
.vonk-toover { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 18px 0 14px; }
.vonk-toover .vonk-noot { margin: 0; }
.vonk-toover .knop { display: inline-flex; align-items: center; gap: 8px; }
.vonk-toover .knop svg { width: 18px; height: 18px; }
.keuze.keuze-over { background: transparent; border-style: dashed; }
.vonk-fonkel { position: absolute; inset: -10px 0 auto 0; height: 220px; pointer-events: none; z-index: 2; }
.vonk-fonkel i { position: absolute; width: 14px; height: 14px; background: radial-gradient(circle, #FFF6D8 0%, #F2CB74 40%, rgba(217,168,72,0) 70%); border-radius: 50%; opacity: 0; animation: vonkFonkel .9s ease-out forwards; }
.vonk-fonkel i::before, .vonk-fonkel i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 28px; height: 2px; margin: -1px 0 0 -14px; background: linear-gradient(90deg, transparent, #F2CB74, transparent); }
.vonk-fonkel i::after { transform: rotate(90deg); }
.vonk-fonkel i:nth-child(1) { left: 8%; top: 30%; animation-delay: 0s; }
.vonk-fonkel i:nth-child(2) { left: 24%; top: 8%; animation-delay: .08s; }
.vonk-fonkel i:nth-child(3) { left: 42%; top: 40%; animation-delay: .16s; }
.vonk-fonkel i:nth-child(4) { left: 58%; top: 12%; animation-delay: .04s; }
.vonk-fonkel i:nth-child(5) { left: 74%; top: 36%; animation-delay: .12s; }
.vonk-fonkel i:nth-child(6) { left: 88%; top: 6%; animation-delay: .2s; }
.vonk-fonkel i:nth-child(7) { left: 33%; top: 70%; animation-delay: .24s; }
@keyframes vonkFonkel { 0% { opacity: 0; transform: scale(.2) rotate(0deg); } 40% { opacity: 1; transform: scale(1.2) rotate(45deg); } 100% { opacity: 0; transform: scale(.6) rotate(90deg); } }
.vonk-resultaat { animation: vonkIn .5s ease-out .15s both; }
@keyframes vonkIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .vonk-fonkel { display: none; } .vonk-resultaat { animation: none; } }
/* VONK 2.1: 6 keuzes met 'waarom', icoon, interesses na de uitslag */
.vonk-icoon { width: 88px; height: 88px; margin: 0 auto 18px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 35% 30%, #1B2742, #011950); border: 2px solid #D9A848; box-shadow: 0 6px 20px rgba(184,134,46,.25); color: #F2CB74; }
.vonk-icoon svg { width: 44px; height: 44px; }
.vonk-icoon img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.vonk-zes { position: relative; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 20px; animation: vonkIn .5s ease-out .15s both; }
@media (min-width: 760px) { .vonk-zes { grid-template-columns: repeat(3, 1fr); gap: 16px; } }
.vonk-keus { display: flex; flex-direction: column; }
.vonk-keus .prodkaart { flex: 1; }
.vonk-waarom { display: flex; gap: 6px; align-items: flex-start; margin: 8px 2px 0; font-size: 12.5px; line-height: 1.35; color: #6B5320; }
.vonk-waarom svg { width: 14px; height: 14px; flex: none; color: #B8862E; margin-top: 1px; }
.vonk-hobby { margin-top: 10px; }
.vonk-hobby .chips { gap: 6px; }
.vonk-toover { justify-content: center; margin: 22px 0 6px; }
.vonk-meer { margin-top: 26px; }
.vonk-meer .sectie-kop { align-items: baseline; }
.vonk-hobby { flex-wrap: nowrap; }
.vonk-hobby > span { white-space: nowrap; }
.vonk-hobby .chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-bottom: 2px; min-width: 0; }
.vonk-hobby .chips::-webkit-scrollbar { display: none; }
.vonk-hobby .chip { flex: none; }
@media (max-width: 759px) { .vonk-hobby { flex-direction: column; align-items: flex-start; gap: 6px; } .vonk-hobby .chips { width: calc(100% + 16px); margin-right: -16px; } }
.vonk-zes { margin-top: 16px; }
@media (min-width: 1200px) { .vonk-zes { grid-template-columns: repeat(6, 1fr); gap: 14px; } .vonk-waarom { font-size: 12px; } }
.vonk-toover { gap: 10px; flex-wrap: wrap; }
.vonk-toover .knop-rand { display: inline-flex; align-items: center; gap: 8px; }
.vonk-toover .knop-rand svg { width: 18px; height: 18px; }
/* VONK fase 3: typen in gewone taal */
.vonk-typ { margin: 4px 0 6px; }
.vonk-typ label { display: block; font-weight: 700; font-size: 15px; margin-bottom: 8px; color: #141A2A; }
.vonk-typ-rij { display: flex; gap: 8px; }
.vonk-typ input { flex: 1; min-width: 0; height: 52px; border-radius: 14px; border: 1.5px solid rgba(184,134,46,.55); background: #fff; padding: 0 16px; font: inherit; font-size: 16px; color: #141A2A; }
.vonk-typ input:focus { outline: none; border-color: #B8862E; box-shadow: 0 0 0 3px rgba(217,168,72,.25); }
.vonk-typ .knop { height: 52px; display: inline-flex; align-items: center; gap: 6px; padding: 0 18px; white-space: nowrap; }
.vonk-typ .knop svg { width: 18px; height: 18px; }
.vonk-of { display: flex; align-items: center; gap: 12px; margin: 22px 0 6px; color: #8A7A5A; font-size: 13px; }
.vonk-of::before, .vonk-of::after { content: ""; flex: 1; height: 1px; background: rgba(184,134,46,.3); }
.vonk-begreep { margin: 4px 0 12px; font-size: 14px; color: #5A5040; }
.vonk-begreep em { font-style: normal; font-weight: 600; color: #141A2A; }
@media (max-width: 480px) { .vonk-typ .knop { padding: 0 14px; } }
/* Echt VONK-plaatje (Nova, 01-11-2026) */
.vonk-icoon { background: none; border: 0; box-shadow: 0 6px 20px rgba(184,134,46,.22); width: 96px; height: 96px; }
.vonk-icoon img { width: 96px; height: 96px; display: block; }
/* VONK-blok op de homepage met typveld */
.vonk-kaart.vonk-home { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "icoon tekst" "typ typ" "vragen vragen"; gap: 14px 16px; align-items: center; }
.vonk-home-icoon { grid-area: icoon; width: 64px; height: 64px; border-radius: 50%; box-shadow: 0 4px 14px rgba(0,0,0,.25); }
.vonk-home-tekst { grid-area: tekst; }
.vonk-typ-home { grid-area: typ; margin: 0; }
.vonk-typ-home input { border-color: rgba(217,168,72,.6); }
.vonk-home-vragen { grid-area: vragen; justify-self: start; display: inline-flex; align-items: center; gap: 4px; color: #E8C67A; font-weight: 700; font-size: 14px; text-decoration: none; }
.vonk-home-vragen svg { width: 14px; height: 14px; }
.vonk-home-vragen:hover { text-decoration: underline; }
@media (min-width: 900px) {
  .vonk-kaart.vonk-home { grid-template-columns: auto minmax(0, 1fr) minmax(0, 1.3fr); grid-template-areas: "icoon tekst typ" "icoon tekst vragen"; }
  .vonk-home-vragen { justify-self: end; }
}
@media (max-width: 759px) { .vonk-kaart.vonk-groot.vonk-home .knop { grid-column: auto; } .vonk-home-icoon { width: 52px; height: 52px; } }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
@media (max-width: 480px) { .vonk-typ input { padding: 0 12px; } .vonk-typ input::placeholder { font-size: 14px; } }
/* VONK-uitslag compact (01-11-2026): smalle balk met keuzes, 'Aanpassen'-paneel, cadeaus direct eronder */
.vonk-pagina-uitslag { padding-top: 0; }
.vonk-balk { position: sticky; top: var(--header-h, 64px); z-index: 30; display: flex; align-items: center; gap: 10px; margin: 0 -16px; padding: 10px 16px; background: rgba(247,242,233,.96); backdrop-filter: blur(6px); border-bottom: 1px solid rgba(184,134,46,.2); }
.vonk-balk-labels { flex: 1; min-width: 0; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); padding-right: 18px; }
.vonk-balk-labels::-webkit-scrollbar { display: none; }
.vlabel { flex: none; display: inline-flex; align-items: center; height: 32px; border-radius: 16px; background: #011950; color: #F4ECDD; font-size: 13px; font-weight: 600; white-space: nowrap; }
.vlabel button { all: unset; cursor: pointer; padding: 0 12px; height: 32px; display: inline-flex; align-items: center; }
.vlabel-weg { display: inline-grid; place-items: center; width: 26px; height: 32px; margin-left: -6px; color: #E8C67A; }
.vlabel-weg svg { width: 13px; height: 13px; }
.vonk-aanpassen { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 17px; border: 1.5px solid #B8862E; background: #fff; color: #141A2A; font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; }
.vonk-aanpassen svg { width: 15px; height: 15px; }
.vonk-titel { font-family: var(--f-kop); font-weight: 500; font-size: 22px; margin: 16px 0 4px; }
@media (min-width: 760px) { .vonk-titel { font-size: 28px; } .vonk-balk { margin: 0; padding: 10px 0; } }
.vonk-uitslag .vonk-begreep { margin: 2px 0 6px; font-size: 13.5px; }
.vonk-zes { margin-top: 10px; }
/* Het paneel ook op de computer (de gewone filterknop is daar verborgen) */
.filterpaneel.vonk-paneel:not([hidden]) { display: block !important; }
@media (min-width: 1024px) { .vonk-paneel .filter-blad { left: 50%; right: auto; width: 560px; transform: translate(-50%, 100%); border-radius: 18px 18px 0 0; } .vonk-paneel.open .filter-blad { transform: translate(-50%, 0); } }
.vonk-paneel .vonk-typ { margin: 4px 0 2px; }
.vonk-paneel .vonk-typ label { font-size: 14px; }
.vonk-paneel-voet { position: sticky; bottom: 0; display: flex; gap: 10px; padding: 14px 0 6px; background: #fff; margin-top: 10px; }
.vonk-paneel-voet .knop { flex: 1; justify-content: center; }
.vonk-leeg { margin: 18px 0; padding: 22px 18px; border-radius: 16px; background: #fff; border: 1px solid rgba(184,134,46,.25); text-align: center; }
.vonk-leeg h2 { font-family: var(--f-kop); font-weight: 500; font-size: 24px; margin: 0 0 8px; }
.vonk-leeg p { margin: 0 0 10px; color: #5A5040; }
.vonk-leeg .chips { justify-content: center; flex-wrap: wrap; }
.vonk-leeg .chip small { opacity: .7; }
.vonk-paneel .filter-blad { padding-bottom: 0; } .vonk-paneel-voet { padding-bottom: calc(14px + env(safe-area-inset-bottom)); box-shadow: 0 -8px 16px -10px rgba(0,0,0,.15); }
.vonk-meer-tips { flex-wrap: wrap; gap: 6px; margin: 4px 0 4px; } .vonk-meer-tips .chip small { opacity: .7; }
/* Eén zoekbalk (01-11-2026): VONK-blok is weer één grote knop */
.vonk-kaart.vonk-home { grid-template-columns: auto 1fr; grid-template-areas: "icoon tekst" "knop knop"; text-decoration: none; }
.vonk-home-knop { grid-area: knop; justify-self: stretch; justify-content: center; display: inline-flex; align-items: center; gap: 8px; }
.vonk-home-knop svg { width: 18px; height: 18px; }
@media (min-width: 900px) { .vonk-kaart.vonk-home { grid-template-columns: auto 1fr auto; grid-template-areas: "icoon tekst knop"; } .vonk-home-knop { justify-self: end; padding: 0 26px; } }
.vonk-tip { display: flex; gap: 8px; align-items: flex-start; margin: 18px 0 0; font-size: 14px; color: #5A5040; }
.vonk-tip svg { width: 16px; height: 16px; flex: none; margin-top: 2px; color: #B8862E; }
.vonk-tip em { font-style: normal; font-weight: 600; color: #141A2A; }
.vonk-kaart.vonk-groot.vonk-home .vonk-home-knop { grid-area: knop; grid-column: 1 / -1; min-height: 48px; }
@media (min-width: 900px) { .vonk-kaart.vonk-groot.vonk-home .vonk-home-knop { grid-column: auto; padding: 0 28px; } }
.vonk-kaart.vonk-groot.vonk-home { align-items: center; }

/* Toppers van nu (01-11-2026): eigen kaart in de seizoensrij. Telefoon: plaatje rechts uitlijnen (producten rechts).
   Computer: over de hele breedte, de drie seizoenskaarten eronder. */
.actie.actie-breed img { object-position: right center; }
.actie.actie-breed::before { background: linear-gradient(90deg, rgba(10,16,32,.95) 0%, rgba(10,16,32,.8) 50%, rgba(10,16,32,.2) 90%); }
@media (min-width: 900px) {
  .acties .actie.actie-breed { grid-column: 1 / -1; }
  .actie.actie-breed, .actie.actie-breed .actie-tekst { min-height: 280px; }
  .actie.actie-breed::before { background: linear-gradient(90deg, rgba(10,16,32,.92) 0%, rgba(10,16,32,.6) 35%, rgba(10,16,32,0) 50%); }
}
/* VONK 'nog persoonlijker' (01-11-2026): één rustige regel met een keuzelijstje, onder de knoppen. */
.vonk-pers { display: flex; align-items: center; gap: 10px; margin: 12px 0 4px; padding: 10px 14px; border: 1px solid #E6D9BC; border-radius: 14px; background: #FFFBF2; }
.vonk-pers > svg { width: 18px; height: 18px; color: #B8862E; flex: none; }
.vonk-pers label { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; flex-wrap: wrap; }
.vonk-pers label span { font: 600 14px/1.3 var(--f-ui); color: #141A2A; }
.vonk-pers select { flex: 1; min-width: 150px; border: 1px solid #B8862E; border-radius: 10px; padding: 8px 32px 8px 12px; font: 700 14px/1.2 var(--f-ui); color: #141A2A; background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%23B8862E' stroke-width='2'/></svg>") no-repeat right 12px center; -webkit-appearance: none; appearance: none; }
@media (max-width: 599px) {
  .vonk-pagina > .vonk-icoon { width: 72px; height: 72px; margin-top: 10px; }
  .vonk-pagina > .vonk-icoon img { width: 72px; height: 72px; }
}
/* VONK op de telefoon (2-11-2026): compacte kop zodat de eerste vraag meteen in beeld staat. */
.vonk-pagina { scroll-margin-top: calc(var(--header-h) + 10px); }
@media (max-width: 759px) {
  .vonk-kop .kruimel { display: none; }
  .vonk-kop .binnen { padding-top: 12px; padding-bottom: 12px; }
  .vonk-kop h1 { font-size: 26px; margin-top: 0; }
  .vonk-kop p { font-size: 14px; margin-top: 2px; line-height: 1.4; }
  .vonk-pagina { padding-top: 14px; }
  .vonk-pagina > .vonk-icoon { display: none; }
  .vonk-pagina .vonk-stapjes { margin-bottom: 14px; }
  .vonk-vraag h2 { font-size: 24px; margin-bottom: 12px; }
  .vonk-vraag .keuze { padding: 14px 12px; }
  .vonk-terug { margin-top: 14px; }
}

/* 02-11-2026 (Marius: 'staat niet netjes'): collecties zijn er 9, dus op de telefoon 3 x 3 in plaats van 4 + 4 + 1 (Belevenissen bleef alleen over). Woorden niet meer halverwege afbreken. */
.persoon-subs.home.gelegenheden:has(> :nth-child(9):last-child) { grid-template-columns: repeat(3, 1fr); }
.persoon-subs.home.gelegenheden:has(> :nth-child(9):last-child) .subkaart .rond { width: 84px; height: 84px; }
@media (min-width: 1024px) { .persoon-subs.home.gelegenheden:has(> :nth-child(9):last-child) { grid-template-columns: repeat(9, 1fr); } .persoon-subs.home.gelegenheden:has(> :nth-child(9):last-child) .subkaart .rond { width: 96px; height: 96px; } }
.persoon-subs.home .subkaart { hyphens: manual; -webkit-hyphens: manual; overflow-wrap: break-word; }
/* 'Zoek in alle winkels' stond in donkere letters op het donkerblauwe vlak: onleesbaar. */
.vonk-kaart.zoek-alle h2 { color: #F4ECDD; }
@media (max-width: 380px) { .persoon-subs.home.gelegenheden:has(> :nth-child(9):last-child) .subkaart { font-size: 12px; } }

/* 02-11-2026: tip in de ingebouwde browser van TikTok/Instagram/Facebook (daar is niemand ingelogd bij bol). */
.inapp-tip { display: flex; gap: 10px; align-items: flex-start; margin: 12px 0 4px; padding: 12px 14px; border: 1px solid #e6cf95; border-radius: 12px; background: #fff8e6; color: #3a2f12; font-size: 14px; line-height: 1.4; }
.inapp-tip > svg { flex: 0 0 18px; width: 18px; height: 18px; margin-top: 2px; color: #b8862b; }
.inapp-tip p { margin: 0 0 8px; }
.inapp-tip .knop { padding: 8px 14px; font-size: 14px; }
.inapp-stap { display: block; font-size: 13px; color: #5a4a20; }

/* ===== Filterblok compact en mooier (wens Marius 5-11-2026): per filter één rij met een klein label ervoor ===== */
.werkbalk { padding: 6px 14px 10px; gap: 0; border-radius: 16px; background: #FFFDF8; border: 1px solid rgba(184,134,46,.22); box-shadow: 0 6px 18px -12px rgba(10,16,32,.25); }
.werkbalk .knop-groep, .werkbalk > .chips { margin: 0; }
.werkbalk .chip { min-height: 34px; padding: 0 13px; font: 600 13px/1 var(--f-ui); background: #F5F1E9; border-color: transparent; color: #2A2F3D; display: inline-flex; align-items: center; transition: background .15s, border-color .15s, color .15s; }
.werkbalk .chip:hover { background: #fff; border-color: var(--goud); color: var(--goud-donker); }
.werkbalk .chip[aria-pressed="true"] { background: #0A1020; color: #F3D68A; border-color: #0A1020; }
.werkbalk .chip.verras { background: #FFFBF3; border-color: rgba(184,134,46,.5); color: var(--goud-donker); min-height: 34px; }
.werkbalk .werkbalk-onder { margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(10,16,32,.07); gap: 8px; flex-wrap: nowrap; }
.werkbalk .aantal { font: 600 13px/1.2 var(--f-ui); color: var(--tekst-2); white-space: nowrap; }
.werkbalk .sorteer select { min-height: 34px; padding: 0 30px 0 11px; font: 600 13px/1 var(--f-ui); border-radius: 999px; background: #F5F1E9; border-color: transparent; }
.werkbalk .voor-chips { padding-bottom: 0; border-bottom: 0; }
.werkbalk .voor-chips .chip { font-size: 13px; padding: 0 13px; }
@media all {
  .werkbalk .knop-groep, .werkbalk > .chips { display: flex; align-items: center; gap: 6px; padding: 7px 0; border-bottom: 1px dashed rgba(10,16,32,.09); }
  .werkbalk .knop-groep .chips-titel { flex: 0 0 62px; margin: 0; font: 700 10.5px/1.15 var(--f-ui); text-transform: uppercase; letter-spacing: .06em; color: #8A7A5C; }
  .werkbalk .knop-groep .chips { flex: 1; min-width: 0; margin: 0 -14px 0 0; padding: 1px 14px 1px 0; gap: 6px; border: 0; }
  /* Budget en Voor wie hebben geen kopje: het label komt uit aria-label en blijft links staan tijdens het schuiven. */
  .werkbalk > .chips { margin: 0 -14px 0 0; padding: 7px 14px 7px 0; gap: 6px; }
  .werkbalk > .chips::before { content: attr(aria-label); position: sticky; left: 0; z-index: 1; flex: 0 0 62px; align-self: stretch; display: flex; align-items: center; font: 700 10.5px/1.15 var(--f-ui); text-transform: uppercase; letter-spacing: .06em; color: #8A7A5C; background: #FFFDF8; margin-right: 0; }
  .werkbalk > .chips[aria-label="Budget"]::before { content: 'Prijs'; }
  .werkbalk .werkbalk-onder { border-top: 0; margin-top: 2px; }
  .werkbalk .werkbalk-onder .chip.verras { padding: 0 11px; }
}
@media (hover: none) and (pointer: coarse) { .werkbalk .chip { min-height: 36px; padding: 0 13px; } .werkbalk .sorteer select { min-height: 36px; padding-top: 0; padding-bottom: 0; } }
/* Soorten-rij (Verkleedkleding, Speelkeukens ...) onder de rondjes: iets rustiger en duidelijk anders dan de filters. */
.vakjesrij .chip { min-height: 36px; padding: 0 15px; display: inline-flex; align-items: center; border: 1.5px solid rgba(10,16,32,.12); background: #fff; font-weight: 600; }
.vakjesrij .chip[aria-pressed="true"], .vakjesrij .chip.actief { background: linear-gradient(180deg, #F2CB74, #D9A848); color: #141A2A; border-color: #B8862E; }
@media (min-width: 760px) {
  .werkbalk { flex-direction: column; align-items: stretch; padding: 6px 18px 12px; }
  .werkbalk .knop-groep .chips-titel, .werkbalk > .chips::before { flex-basis: 110px; }
  .werkbalk .knop-groep .chips, .werkbalk > .chips { margin: 0; padding-right: 0; flex-wrap: wrap; overflow: visible; }
  .werkbalk > .chips::before { position: static; }
  .werkbalk .werkbalk-onder { justify-content: flex-end; }
}
/* 5-11-2026: onderste regel van het filterblok mag nooit buiten het scherm vallen (smalle telefoons, grote letters). */
.werkbalk { max-width: 100%; overflow: hidden; }
.werkbalk .werkbalk-onder { flex-wrap: wrap; row-gap: 8px; }
.werkbalk .werkbalk-onder .sorteer { min-width: 0; flex: 1 1 140px; max-width: 220px; margin-left: auto; }
.werkbalk .werkbalk-onder .sorteer select { width: 100%; text-overflow: ellipsis; }
@media (max-width: 420px) { .werkbalk .werkbalk-onder .sorteer { max-width: none; } .werkbalk .werkbalk-onder .chip.verras { flex: none; } }

/* ===== Mobiel: Filteren + Sorteren bovenaan, één snel rijtje, gekozen filters als labels (wens Marius 5-11-2026) ===== */
.mobiel-balk, .mb-snel { display: none; }
.actief-filters { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 0 2px; }
.actief-label { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 8px 0 12px; border-radius: 999px; background: #FFF7E6; border: 1px solid rgba(184,134,46,.45); color: #5A4517; font: 600 13px/1 var(--f-ui); text-decoration: none; }
.actief-label svg { width: 14px; height: 14px; padding: 2px; border-radius: 50%; background: rgba(184,134,46,.18); box-sizing: content-box; }
.actief-label:hover { background: #FDEFD2; }
.actief-wis { align-self: center; font: 600 12.5px/1 var(--f-ui); color: var(--tekst-2); text-decoration: underline; text-underline-offset: 3px; padding: 6px 4px; }
@media (max-width: 759px) {
  .werkbalk { padding: 12px 14px 10px; }
  .mobiel-balk { display: flex; gap: 10px; }
  .mb-filter, .mb-sorteer { flex: 1 1 0; min-width: 0; min-height: 46px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: 700 15px/1 var(--f-ui); cursor: pointer; }
  .mb-filter { background: linear-gradient(180deg, #1A2440, #0A1020); color: #fff; border: 0; box-shadow: 0 6px 16px -8px rgba(10,16,32,.7); }
  .mb-filter svg, .mb-tekst svg { width: 19px; height: 19px; flex: none; }
  .mb-teller { display: inline-flex; align-items: center; justify-content: center; min-width: 21px; height: 21px; padding: 0 6px; border-radius: 999px; background: var(--goud, #E0B54A); color: #141A2A; font-size: 12px; }
  .mb-sorteer { position: relative; background: #FFFBF3; color: #141A2A; border: 1.5px solid rgba(184,134,46,.6); padding: 0 34px 0 14px; }
  .mb-tekst { display: inline-flex; align-items: center; gap: 8px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .mb-sorteer .mb-pijl { position: absolute; right: 13px; top: 50%; width: 17px; height: 17px; transform: translateY(-50%); color: var(--goud-donker); }
  .mb-sorteer select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font-size: 16px; }
  .werkbalk > .mb-snel { display: flex; border-bottom: 0; padding: 10px 0 0; }
  /* de volledige filterrijen en de oude sorteerknop zitten op de telefoon achter 'Filteren' */
  .werkbalk > .knop-groep:not(.mb-snel), .werkbalk > .chips, .werkbalk .werkbalk-onder .sorteer { display: none !important; }
  .werkbalk .werkbalk-onder { border-top: 0; margin-top: 6px; padding-top: 4px; flex-wrap: nowrap; }
  .werkbalk .werkbalk-onder .aantal { font-size: 14px; margin-right: auto; }
  /* de zwevende knop onderin heet nu gewoon 'Filteren' */
  .vakjesrij { -webkit-mask-image: linear-gradient(90deg, #000 86%, transparent); mask-image: linear-gradient(90deg, #000 86%, transparent); padding-right: 40px; }
}
.subkaart.actief .subnaam { background: linear-gradient(180deg, #F2CB74, #D9A848); color: #141A2A; border-radius: 999px; padding: 3px 10px; box-shadow: 0 3px 8px -4px rgba(184,134,46,.7); }
@media (min-width: 760px) {
  .werkbalk > .mb-snel, .werkbalk > .mobiel-balk { display: none !important; }
  .werkbalk > .actief-filters { order: 1; padding-top: 10px; }
  .werkbalk > .werkbalk-onder { order: 2; }
}
/* Filterpaneel: knoppen onderin blijven staan (Wissen / Toon … producten) */
.filter-voet { position: sticky; bottom: calc(-22px - env(safe-area-inset-bottom)); display: flex; gap: 10px; margin: 18px -16px 0; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: #fff; box-shadow: 0 -8px 16px -10px rgba(0,0,0,.18); }
.filter-voet .knop { flex: 1; justify-content: center; text-align: center; min-height: 48px; display: inline-flex; align-items: center; margin: 0; }
.filter-voet .knop-goud { flex: 1.6; }
/* Aantal producten achter elke filterknop: alleen in het paneel, klein en zacht */
.chip small { display: none; }
.filter-blad .chip small { display: inline; margin-left: 6px; font-size: 11.5px; font-weight: 600; opacity: .55; }
.filter-blad .chip[aria-pressed="true"] small { opacity: .8; }

/* Nieuwe subcategorie-icoontjes (eigen marineblauwe cirkel met gouden rand): vullen het hele rondje, geen witte rand eromheen. */
.subkaart .rond:has(img[src*="/iconen/icoon-"]) { padding: 0; background: transparent; border-color: transparent; overflow: visible; box-shadow: 0 8px 18px -10px rgba(10,16,32,.45); }
.subkaart .rond img[src*="/iconen/icoon-"] { width: 100%; height: 100%; object-fit: contain; border-radius: 50%; }
.subkaart.actief .rond:has(img[src*="/iconen/icoon-"]) { box-shadow: 0 0 0 3px #E0B54A, 0 8px 18px -8px rgba(184,134,46,.8); }

/* ===== Home: categorieën als compacte balken met rond icoon (ontwerp Marius 5-11-2026) ===== */
.catbalken { display: grid; grid-template-columns: 1fr; gap: 16px; padding-left: 4px; }
@media (min-width: 760px) { .catbalken { grid-template-columns: 1fr 1fr; gap: 12px 16px; } }
@media (min-width: 1100px) { .catbalken { grid-template-columns: 1fr 1fr 1fr; } }
.catbalk { position: relative; display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 0 44px 0 78px; border-radius: 999px; text-decoration: none;
  background: linear-gradient(180deg, #16213D 0%, #0A1124 100%); border: 2px solid #C9A24A; box-shadow: 0 6px 16px -8px rgba(10,16,32,.55), inset 0 1px 0 rgba(255,255,255,.08); transition: transform .15s, box-shadow .15s, border-color .15s; }
.catbalk:hover { transform: translateY(-1px); border-color: #E8C46A; box-shadow: 0 10px 22px -10px rgba(10,16,32,.7), inset 0 1px 0 rgba(255,255,255,.1); }
.catbalk-rond { position: absolute; left: -4px; top: 50%; transform: translateY(-50%); width: 76px; height: 76px; border-radius: 50%; background: #0A1020; box-shadow: 0 0 0 2px #C9A24A, 0 6px 14px -6px rgba(0,0,0,.6); overflow: hidden; }
.catbalk-rond img { width: 100%; height: 100%; object-fit: cover; display: block; }
.catbalk-naam { font: 600 19px/1.15 'Playfair Display', Georgia, serif; color: #F5EBD3; letter-spacing: .005em; }
.catbalk-pijl { position: absolute; right: 18px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); color: #E0B54A; }
@media (max-width: 380px) { .catbalk-naam { font-size: 17px; } }
.catbalken + .alle-cats { margin-top: 14px; }

/* Ronde plaatjes Gelegenheden / Voor wie (eigen gouden rand): geen witte rand eromheen */
.subkaart .rond:has(img[src*="/sub/rond/"]) { padding: 0; background: transparent; border-color: transparent; overflow: visible; box-shadow: 0 8px 18px -10px rgba(10,16,32,.45); }
.subkaart .rond img[src*="/sub/rond/"] { width: 100%; height: 100%; object-fit: contain; border-radius: 50%; }
.subkaart.actief .rond:has(img[src*="/sub/rond/"]) { box-shadow: 0 0 0 3px #E0B54A, 0 8px 18px -8px rgba(184,134,46,.8); }
/* Nieuwe banner bovenaan (5-11-2026): donker links voor de tekst, cadeaus rechts. Op de telefoon 220-260px hoog (wens Marius). */
.hero.hero-2026 picture img { object-position: right center; }
@media (max-width: 759px) { .hero.hero-2026 picture img { object-position: 70% center; } }
.hero.hero-2026::after { background: linear-gradient(90deg, rgba(8,13,30,.92) 0%, rgba(8,13,30,.7) 38%, rgba(8,13,30,.15) 70%, rgba(8,13,30,0) 100%); }
@media (max-width: 759px) {
  .hero.hero-2026 { min-height: 240px; max-height: 260px; display: flex; align-items: center; }
  .hero.hero-2026 .hero-inhoud { padding: 18px 0 16px; width: 100%; }
  .hero.hero-2026 .kicker { font-size: 11px; margin-bottom: 4px; }
  .hero.hero-2026 h1 { font-size: 29px; max-width: 62%; }
  .hero.hero-2026 p { display: none; }
  .hero.hero-2026 .populair { margin-top: 12px; }
  .hero.hero-2026 .populair > span { display: none; }
  .hero.hero-2026 .chip { min-height: 32px; padding: 0 12px; font-size: 12.5px; }
}
@media (min-width: 760px) { .hero.hero-2026 { min-height: 380px; } .hero.hero-2026 h1, .hero.hero-2026 p { max-width: 520px; } }
/* Tekst op de banner altijd leesbaar (wens Marius 5-11-2026) */
.hero.hero-2026 .kicker, .hero.hero-2026 h1, .hero.hero-2026 p { text-shadow: 0 2px 10px rgba(5,8,20,.95), 0 0 2px rgba(5,8,20,.9); }
.hero.hero-2026 .kicker { color: #F2CB74; font-weight: 800; }
@media (max-width: 759px) { .hero.hero-2026::after { background: linear-gradient(90deg, rgba(8,13,30,.95) 0%, rgba(8,13,30,.82) 45%, rgba(8,13,30,.3) 75%, rgba(8,13,30,.1) 100%); } }

/* ===== 5-11-2026 (wens Marius): categoriebalken op home de helft kleiner en naast elkaar ===== */
.catbalken { grid-template-columns: 1fr 1fr; gap: 10px 10px; padding-left: 2px; }
.catbalk { min-height: 46px; padding: 4px 10px 4px 50px; gap: 0; border-width: 1.5px; }
.catbalk-rond { width: 48px; height: 48px; left: -3px; box-shadow: 0 0 0 1.5px #C9A24A, 0 4px 10px -5px rgba(0,0,0,.6); }
.catbalk-naam { font: 600 13.5px/1.15 var(--f-ui, 'Manrope', sans-serif); letter-spacing: 0; }
.catbalk-pijl { display: none; }
@media (min-width: 760px) { .catbalken { grid-template-columns: repeat(3, 1fr); gap: 12px 14px; } .catbalk { min-height: 52px; padding-left: 60px; } .catbalk-rond { width: 56px; height: 56px; } .catbalk-naam { font-size: 15px; } .catbalk-pijl { display: block; right: 14px; } }
@media (min-width: 1100px) { .catbalken { grid-template-columns: repeat(4, 1fr); } }

/* ===== Alle categorieën: ronde icoontjes met tekst eronder ===== */
.catronden { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (min-width: 760px) { .catronden { grid-template-columns: repeat(3, 1fr); gap: 16px; } }
@media (min-width: 1100px) { .catronden { grid-template-columns: repeat(4, 1fr); } }
.catrond { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 16px 12px 16px; border-radius: 18px; background: #fff; border: 1px solid rgba(184,134,46,.2); box-shadow: 0 6px 18px -12px rgba(10,16,32,.35); text-decoration: none; color: inherit; transition: transform .15s, border-color .15s; }
.catrond:hover { transform: translateY(-2px); border-color: var(--goud, #C9A23A); }
.catrond-beeld { width: 88px; height: 88px; border-radius: 50%; overflow: hidden; box-shadow: 0 6px 14px -8px rgba(10,16,32,.55); margin-bottom: 4px; }
.catrond-beeld img { width: 100%; height: 100%; object-fit: cover; display: block; }
.catrond-naam { font: 700 15px/1.2 var(--f-ui, 'Manrope', sans-serif); color: var(--tekst, #141A2A); }
.catrond-tekst { font: 500 12.5px/1.4 var(--f-tekst, 'Inter', sans-serif); color: var(--tekst-2, #4A5168); }

/* ===== Collecties op home: namen netjes, niet door elkaar ===== */
.persoon-subs.home.collecties { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 14px 8px; }
.persoon-subs.home.collecties .subkaart { min-width: 0; font-size: 12.5px; line-height: 1.25; overflow-wrap: anywhere; hyphens: auto; -webkit-hyphens: auto; }
.persoon-subs.home.collecties .subkaart .rond { width: 84px; height: 84px; }
@media (min-width: 760px) { .persoon-subs.home.collecties { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; } .persoon-subs.home.collecties .subkaart { font-size: 13px; } .persoon-subs.home.collecties .subkaart .rond { width: 104px; height: 104px; } }

/* Categorieën op home: alleen rondjes met naam eronder (6 nov) */
.catbalken { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px 6px; padding-left: 0; }
@media (min-width: 560px) { .catbalken { grid-template-columns: repeat(6, 1fr); } }
@media (min-width: 1100px) { .catbalken { grid-template-columns: repeat(11, 1fr); gap: 16px 8px; } }
.catbalk { position: static; display: flex; flex-direction: column; align-items: center; gap: 7px; min-height: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; text-align: center; }
.catbalk:hover { transform: none; box-shadow: none; }
.catbalk-rond { position: static; transform: none; width: 68px; height: 68px; box-shadow: 0 0 0 2px #C9A24A, 0 6px 14px -7px rgba(0,0,0,.55); transition: transform .15s ease, box-shadow .15s ease; }
.catbalk:hover .catbalk-rond { transform: translateY(-2px); box-shadow: 0 0 0 2px #E8C46A, 0 10px 18px -8px rgba(0,0,0,.6); }
.catbalk-naam { font: 600 12.5px/1.2 var(--f-ui, 'Manrope', sans-serif); color: var(--tekst, #141A2A); letter-spacing: 0; max-width: 92px; overflow-wrap: anywhere; hyphens: auto; }
.catbalk-pijl { display: none !important; }
@media (min-width: 760px) { .catbalk-rond { width: 84px; height: 84px; } .catbalk-naam { font-size: 13.5px; max-width: 110px; } }
.catbalk-rond { box-shadow: 0 6px 14px -7px rgba(0,0,0,.5); }
.catbalk:hover .catbalk-rond { box-shadow: 0 10px 18px -8px rgba(0,0,0,.55); }

/* ===== Stap 1 indeling (6-11-2026, GO Marius): Black Friday-balk, 404 met ingangen, menu-kopjes ===== */
.aftel-bf { background: radial-gradient(120% 140% at 50% 0%, #1A2240 0%, #0E1428 50%, #070B16 100%); }
.aftel-bf .aftel-getal { background: linear-gradient(180deg, #E0B54A, #B8862E); color: #10162E; }
.aftel-bf .aftel-beeld { display: none; }
.ingangen-404 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
.ingangen-404 .knop { min-height: 48px; }
@media (min-width: 760px) { .ingangen-404 { grid-template-columns: repeat(4, 1fr); max-width: 760px; } }
.lade-extra a { min-height: 44px; }
/* ===== Stap 1 homepage (6-11-2026, GO Marius): intro met twee knoppen, Voor wie met 4 rondjes + tekstlinks, favorieten meteen in beeld. ===== */
.hero-knoppen { display: flex; gap: 10px; margin-top: 16px; max-width: 440px; }
.hero-knoppen .knop { flex: 1 1 0; min-height: 48px; padding: 0 12px; font-size: 14.5px; }
.hero-knoppen .knop svg { width: 16px; height: 16px; flex: none; }
.hero-knoppen .knop-rand { background: rgba(10,16,32,.62); border-color: rgba(255,255,255,.5); color: #fff; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.hero-knoppen .knop-rand:hover { background: rgba(10,16,32,.82); border-color: #C9A23A; }
@media (max-width: 759px) {
  .hero.hero-2026 { min-height: 220px; max-height: 270px; }
  .hero.hero-2026 h1 { max-width: 70%; font-size: 27px; }
  .hero.hero-2026 .hero-knoppen { margin-top: 14px; max-width: none; }
  .hero.hero-2026 .hero-knoppen .knop { font-size: 14px; padding: 0 10px; }
}
@media (max-width: 379px) { .hero.hero-2026 .hero-knoppen .knop { font-size: 13px; padding: 0 8px; } .hero.hero-2026 .hero-knoppen .knop svg { display: none; } }
.persoon-subs.home.vier { grid-template-columns: repeat(4, 1fr); }
@media (min-width: 600px) { .persoon-subs.home.vier { grid-template-columns: repeat(4, 1fr); max-width: 660px; } }
@media (min-width: 1024px) { .persoon-subs.home.vier { max-width: 780px; } }
.voorwie-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.voorwie-links .chip { min-height: 36px; }
.sectie.favorieten { scroll-margin-top: 150px; }
.sectie.favorieten .prodgrid { margin-top: 2px; }

/* ===== Stap 2 indeling (6-11-2026, GO Marius): homepage volgens deel 7 van het plan ===== */
.alleen-mobiel { display: none; }
@media (max-width: 759px) {
  .alleen-mobiel { display: flex; }
  /* Voor wie: mobiel 4 rondjes, de rest als tekstlinks */
  .persoon-subs.home.zeven .subkaart:nth-child(n+5) { display: none; }
  /* Categorieën: mobiel 6 rondjes, de rest als tekstlinks */
  .catbalk.extra { display: none; }
}
.persoon-subs.home.zeven { grid-template-columns: repeat(4, 1fr); }
@media (min-width: 760px) { .persoon-subs.home.zeven { grid-template-columns: repeat(7, 1fr); } }
.voorwie-links, .cat-links { flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.voorwie-links .chip, .cat-links .chip { min-height: 36px; }
@media (min-width: 760px) { .catbalken { grid-template-columns: repeat(6, 1fr); } }
@media (min-width: 1100px) { .catbalken { grid-template-columns: repeat(11, 1fr); gap: 10px 4px; } .catbalk-naam { max-width: 100px; } }

/* Seizoensblok: 1 grote kaart + 2 kleine, geen schuifstrook */
.seizoen-raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.seizoen-kaart { min-width: 0; overflow: hidden; }
.seizoen-kaart.klein h3 { overflow-wrap: anywhere; hyphens: auto; }
.seizoen-kaart.klein .knop { max-width: 100%; white-space: normal; text-align: left; }
.seizoen-kaart.groot { grid-column: 1 / -1; min-height: 170px; }
.seizoen-kaart.klein { min-height: 128px; }
.seizoen-kaart .actie-tekst { min-height: 0; height: 100%; padding: 16px; gap: 4px; }
.seizoen-kaart.klein .actie-tekst { padding: 12px; }
.seizoen-kaart.klein h3 { font-size: 18px; }
.seizoen-kaart.klein .kicker { font-size: 10px; letter-spacing: .12em; }
.seizoen-kaart.klein .knop { font-size: 12px; padding: 7px 11px; }
.seizoen-kaart.klein::before { background: linear-gradient(180deg, rgba(10,16,32,.15) 0%, rgba(10,16,32,.85) 70%); }
.seizoen-raster.een .seizoen-kaart, .seizoen-raster.twee .seizoen-kaart { grid-column: auto; }
.seizoen-raster.een .seizoen-kaart.groot { grid-column: 1 / -1; }
.seizoen-raster.twee { grid-template-columns: 2fr 1fr; }
@media (min-width: 760px) {
  .seizoen-raster { grid-template-columns: 2fr 1fr 1fr; gap: 16px; }
  .seizoen-kaart.groot { grid-column: auto; min-height: 260px; }
  .seizoen-kaart.klein { min-height: 260px; }
  .seizoen-kaart .actie-tekst { padding: 22px; }
  .seizoen-kaart.klein h3 { font-size: 22px; }
}

/* Favorieten en Persoonlijk: 2 naast elkaar op mobiel, 6 / 4 op desktop */
.sectie.favorieten { scroll-margin-top: 150px; }
@media (min-width: 1100px) { .sectie.favorieten .prodgrid { grid-template-columns: repeat(6, 1fr); } .prodgrid.vier { grid-template-columns: repeat(4, 1fr); } }
.gelegenheid-knopjes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px; }
.gelegenheid-knopjes > span { font-size: 14px; color: var(--tekst-2); margin-right: 4px; }
.gelegenheid-knopjes .chip { min-height: 36px; }

/* Acties van onze winkels */
.acties-rij { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 760px) { .acties-rij { grid-template-columns: repeat(3, 1fr); } }
.actie-kaart { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "badge winkel" "badge titel" "badge geldig"; column-gap: 14px; align-items: center; padding: 14px 16px; background: #fff; border: 1px solid rgba(10,16,32,.08); border-radius: 14px; box-shadow: 0 2px 10px rgba(10,16,32,.05); color: var(--tekst); text-decoration: none; min-height: 72px; }
.actie-kaart:hover { border-color: var(--goud-licht); }
.actie-badge { grid-area: badge; display: inline-grid; place-items: center; min-width: 56px; height: 56px; padding: 0 8px; border-radius: 14px; background: var(--goud-verloop); color: var(--navy); font: 800 14px/1 var(--f-ui); text-align: center; }
.actie-winkel { grid-area: winkel; font: 700 11.5px/1 var(--f-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--goud-donker); }
.actie-kaart strong { grid-area: titel; font-size: 15.5px; line-height: 1.3; margin: 4px 0 2px; }
.actie-kaart small { grid-area: geldig; font-size: 12.5px; color: var(--tekst-2); }

/* Gidsen compact en de eigen kleurboeken als één kaart */
.gidslijst.compact { grid-template-columns: 1fr; gap: 10px; margin: 0; }
@media (min-width: 760px) { .gidslijst.compact { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.gidslijst.compact .gidskaart { min-width: 0; } .gidslijst.compact .gidskaart > span:last-child { min-width: 0; }
.gidslijst.compact .gidskaart { padding: 10px; }
.gidslijst.compact .gidskaart strong { font-size: 15px; }
.gidslijst.compact .gidskaart small { display: none; }
.eigen-kaart { padding-top: 16px; }
.eigen-link { display: grid; grid-template-columns: 96px 1fr; gap: 14px; align-items: center; padding: 12px 14px; border: 1px solid rgba(217,168,72,.45); border-radius: 16px; background: linear-gradient(135deg, #fff 0%, #FBF4E6 100%); color: var(--tekst); text-decoration: none; }
.eigen-link:hover { border-color: var(--goud); }
.eigen-beeld img { width: 96px; height: 96px; object-fit: contain; border-radius: 10px; background: #fff; }
.eigen-tekst { display: flex; flex-direction: column; gap: 3px; }
.eigen-tekst .kicker { margin: 0; font-size: 10.5px; }
.eigen-tekst strong { font: 500 19px/1.2 var(--f-kop); }
.eigen-tekst small { font-size: 13px; color: var(--tekst-2); }
.eigen-tekst .meer { margin-top: 4px; font-size: 13.5px; }
@media (min-width: 760px) { .eigen-link { grid-template-columns: 120px 1fr auto; } .eigen-beeld img { width: 120px; height: 120px; } }
@media (max-width: 759px) { .seizoen-kaart.klein .kicker { display: none; } .seizoen-kaart.klein .actie-tekst { justify-content: flex-end; } }

/* ===== Stap 3 indeling (6-11-2026, plan deel 8): lijstpagina's. Keuzes als vast raster dat omloopt (4 per rij op een telefoon,
   8 op de computer, meer dan 8 achter 'Meer'), 'Toon meer' maakt de volgende 24 kaarten pas aan, verder kijken als tekstlinks onderaan. ===== */
.keuzes-sectie { padding-top: 16px; }
.keuzes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px 2px; }
.keuzerond { display: flex; flex-direction: column; align-items: center; gap: 7px; min-width: 0; text-align: center; text-decoration: none; color: var(--tekst); font: 600 12px/1.2 var(--f-ui); }
.keuzerond .rond { width: 68px; height: 68px; border-radius: 50%; overflow: hidden; border: 2px solid rgba(10,16,32,.08); background: #fff; display: grid; place-items: center; box-shadow: 0 4px 12px -8px rgba(10,16,32,.5); transition: border-color .15s, box-shadow .15s; }
.keuzerond .rond img { width: 100%; height: 100%; object-fit: cover; display: block; }
.keuzerond .rond svg { width: 30px; height: 30px; color: var(--goud); }
.keuzerond:hover .rond { border-color: var(--goud); box-shadow: 0 6px 16px -8px rgba(184,134,46,.7); }
.keuzerond .naam { width: calc(100% + 6px); margin: 0 -3px; hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; letter-spacing: -.01em; }
@media (max-width: 379px) { .keuzerond { font-size: 11px; } }
.keuzerond.actief .naam { background: linear-gradient(180deg, #F2CB74, #D9A848); color: #141A2A; border-radius: 999px; padding: 3px 10px; }
/* Alleen op een telefoon: eerste 8, de rest achter Meer. Op een groter scherm staan ze allemaal (hoogstens 10). */
@media (max-width: 759px) { .keuzes.ingeklapt .keuzerond:nth-child(n+9) { display: none; } }
.keuzes-meer { display: flex; align-items: center; gap: 6px; margin: 12px auto 0; min-height: 40px; padding: 0 16px; border-radius: 999px; border: 1.5px solid rgba(184,134,46,.5); background: #fff; color: var(--goud-donker); font: 700 13.5px/1 var(--f-ui); cursor: pointer; }
.keuzes-meer small { font-weight: 500; color: var(--tekst-2); }
.keuzes-meer svg { width: 16px; height: 16px; }
@media (min-width: 760px) { .keuzes { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 16px 10px; } .keuzerond { font-size: 13.5px; } .keuzerond .rond { width: 84px; height: 84px; } .keuzes-meer { display: none; } }
@media (min-width: 1100px) { .keuzerond .rond { width: 100px; height: 100px; } }
/* Buurvakjes op een vakjespagina: één rij knopjes die omloopt (geen schuifrij, geen vervaging aan de rechterkant). */
.vakjesrij.omlopend { flex-wrap: wrap; overflow: visible; margin: 0; padding: 2px 0; row-gap: 8px; -webkit-mask-image: none; mask-image: none; }
/* Snelle filterrij op de telefoon (Prijs of Leeftijd) loopt om in plaats van te schuiven. */
@media (max-width: 759px) { .werkbalk > .mb-snel .chips { flex-wrap: wrap; overflow: visible; margin: 0; padding-right: 0; row-gap: 6px; } }
/* Verder kijken: tekstlinks onderaan. */
.sectie.verder { padding-top: 22px; }
.sectie.verder h2 { font: 700 15px/1.3 var(--f-ui); color: var(--tekst-2); margin: 0 0 2px; text-transform: uppercase; letter-spacing: .06em; }
.tekstlinks { display: flex; flex-wrap: wrap; gap: 0 20px; }
.tekstlinks a { display: inline-flex; align-items: center; min-height: 40px; color: var(--tekst); font: 600 14.5px/1.3 var(--f-ui); text-decoration: underline; text-decoration-color: rgba(184,134,46,.55); text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.tekstlinks a:hover { color: var(--goud-donker); text-decoration-color: var(--goud-donker); }
/* Alle categorieën: 3 per rij op de computer (plan deel 8), 2 op een telefoon; daaronder de personen als knopjes. */
@media (min-width: 1100px) { .catronden { grid-template-columns: repeat(3, 1fr); } }
.voor-knopjes { margin-top: 0; }
/* Winkels bij deze afdeling: tekstlinks in plaats van 24 grote kaarten (6.000 px op een telefoon). */
.tekstlinks a[target="_blank"]::after { content: "↗"; font-size: 11px; margin-left: 3px; color: var(--goud-donker); }

/* ===== Stap 4 indeling (6-11-2026, plan deel 8): Voor wie en Gelegenheden ===== */
/* Personen hebben tot 15 onderdelen: ook op de computer eerst 8, de rest achter 'Meer'. */
.keuzes.ingeklapt.altijd .keuzerond:nth-child(n+9) { display: none; }
@media (min-width: 760px) { .keuzes-blok.altijd .keuzes-meer { display: flex; } }
/* Overzichten (Voor wie, Gelegenheden): grotere rondjes, 3 per rij op een telefoon. */
.keuzes.groot { grid-template-columns: repeat(3, 1fr); gap: 18px 8px; }
.keuzes.groot .keuzerond { font-size: 13px; }
.keuzes.groot .keuzerond .rond { width: 88px; height: 88px; }
@media (min-width: 760px) { .keuzes.groot { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 22px 12px; } .keuzes.groot .keuzerond { font-size: 14px; } .keuzes.groot .keuzerond .rond { width: 112px; height: 112px; } }

/* ===== Stap 5 indeling (6-11-2026, plan deel 8): productpagina ===== */
/* Foto op een telefoon 280 px hoog (was 358): zo staat de knop 'Bekijk bij de winkel' binnen het eerste scherm. */
@media (max-width: 859px) { .product-beeld { aspect-ratio: auto; height: 280px; } .product { gap: 14px; padding-top: 12px; } }
.product-info .prijsnoot { margin: 10px 0 18px; }
.product-info .kleurkeuze, .product-info .maatkeuze { margin-top: 14px; }
/* Terug naar het vakje: tekstlink onder het product. */
.terug-link { margin: 22px 0 0; }
.terug-link a { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; color: var(--tekst); font: 600 14.5px/1.3 var(--f-ui); text-decoration: underline; text-decoration-color: rgba(184,134,46,.55); text-underline-offset: 4px; }
.terug-link a svg { width: 16px; height: 16px; color: var(--goud-donker); }
.terug-link a:hover { color: var(--goud-donker); }

/* ===== Stap 6 indeling (6-11-2026, plan deel 8): gidsen, winkels, zoeken ===== */
/* Gids: intro van 3 zinnen, de rest achter 'Lees verder'; springlinks naar de delen. */
.lees-verder { margin: 4px 0 10px; }
.lees-verder summary { cursor: pointer; font: 600 14px/1.3 var(--f-ui); color: var(--goud-donker); min-height: 36px; display: flex; align-items: center; }
.lees-verder p { margin: 4px 0 0; }
.tekstpagina.gids .springlinks { margin-top: 12px; }
/* Onze winkels compact: rijen van 2 (naam, één zin, knop); op een telefoon ook 2 naast elkaar, zonder knop. */
.winkels-compact { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 700px) { .winkels-compact { gap: 12px; } }
.winkel-rij { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; min-width: 0; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: #fff; border: 1px solid rgba(10,16,32,.08); box-shadow: 0 2px 10px rgba(10,16,32,.05); color: var(--tekst); text-decoration: none; min-height: 72px; }
.winkel-rij:hover { border-color: var(--goud-licht); }
.winkel-logo { width: 48px; height: 48px; border-radius: 12px; object-fit: contain; background: #fff; border: 1px solid rgba(10,16,32,.08); }
.winkel-letter { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 12px; background: var(--goud-verloop); color: var(--navy); font: 800 20px/1 var(--f-ui); }
.winkel-tekst { min-width: 0; display: flex; flex-direction: column; gap: 2px; overflow-wrap: anywhere; }
.winkel-tekst strong { font-size: 15.5px; line-height: 1.25; }
.winkel-tekst small { font-size: 13px; line-height: 1.35; color: var(--tekst-2); }
.winkel-knop { min-height: 36px; padding: 0 12px; font-size: 13px; white-space: nowrap; }
@media (max-width: 699px) {
  .winkel-rij { grid-template-columns: 36px minmax(0, 1fr); gap: 8px; padding: 10px; align-items: start; min-height: 0; }
  .winkel-knop { display: none; }
  .winkel-logo, .winkel-letter { width: 36px; height: 36px; border-radius: 10px; font-size: 16px; }
  .winkel-tekst strong { font-size: 14px; }
  .winkel-tekst small { font-size: 12px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
}
.tekstpagina .springlinks a { text-decoration: none; color: var(--tekst); }

/* ===== Stap 7 (6-11-2026): test op 320/360/390/430/768/1024/1280 px: niets loopt over. Aftelbalk mag op een tablet omlopen. ===== */
@media (max-width: 900px) { .aftel-midden { flex-wrap: wrap; row-gap: 4px; } }

/* ===== Gidsen 2.0 (7-11-2026): leestijd, Snel kiezen, cadeaus met uitleg, tipkaders en veelgestelde vragen ===== */
.gids-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin: 2px 0 14px !important; font: 600 13px/1.3 var(--f-ui); color: var(--tekst-2); }
.gids-meta span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.gids-meta svg { width: 16px; height: 16px; color: var(--goud); flex: none; }
.gids .gids-intro { font-size: 17px; line-height: 1.7; color: var(--tekst); }

.gids-top { max-width: 760px; margin: 18px 0 8px; padding: 18px 16px 14px; border-radius: 18px; background: linear-gradient(160deg, #FFF8E8 0%, #FFFFFF 70%); border: 1px solid rgba(184,134,46,.35); box-shadow: 0 6px 22px rgba(10,16,32,.06); }
.gt-kop { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 10px; }
.gt-kop > svg { width: 30px; height: 30px; flex: none; color: #fff; background: linear-gradient(180deg, #F2CB74, #D9A848); border-radius: 50%; padding: 6px; }
.gt-kop h2 { margin: 0; font-family: var(--f-kop); font-weight: 600; font-size: 21px; color: var(--tekst); }
.gt-kop p { margin: 2px 0 0; font-size: 14px; color: var(--tekst-2); }
.gt-lijst { display: grid; gap: 8px; }
.gt-item { display: flex; align-items: center; gap: 12px; padding: 8px 10px 8px 8px; border-radius: 14px; background: #fff; border: 1px solid var(--lijn); color: inherit; text-decoration: none !important; transition: border-color .2s, transform .2s; }
.gt-item:hover { border-color: var(--goud); transform: translateY(-1px); }
.gt-beeld { flex: 0 0 64px; width: 64px; height: 64px; border-radius: 10px; overflow: hidden; background: var(--kaart-2); display: grid; place-items: center; }
.gt-beeld img { width: 100%; height: 100%; object-fit: cover; }
.gt-tekst { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.gt-tekst em { font: 800 10.5px/1 var(--f-ui); font-style: normal; letter-spacing: .08em; text-transform: uppercase; color: var(--goud-donker); }
.gt-tekst strong { font: 700 14.5px/1.3 var(--f-ui); color: var(--tekst); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.gt-tekst .prijs { font-size: 15px; padding: 0; margin: 0; }
.gt-item > svg { width: 18px; height: 18px; flex: none; color: var(--goud); }
@media (min-width: 760px) { .gt-lijst { grid-template-columns: repeat(3, 1fr); } .gt-item { flex-direction: column; align-items: flex-start; padding: 10px; } .gt-beeld { width: 100%; height: auto; aspect-ratio: 1; flex-basis: auto; } .gt-item > svg { display: none; } }

.gids-deel { padding-top: 6px; }
.gids-deel .tekstpagina.gids h2, .gids-tip h2, .gids-faq h2 { font-family: var(--f-kop); font-weight: 600; font-size: 23px; color: var(--tekst); margin: 26px 0 6px; }
.gidsitems { display: grid; gap: 12px; max-width: 760px; margin-top: 14px; }
@media (min-width: 900px) { .gidsitems { max-width: none; grid-template-columns: 1fr 1fr; } }
.gidsitem { position: relative; display: flex; gap: 14px; padding: 12px; border-radius: 16px; background: #fff; border: 1px solid var(--lijn); box-shadow: 0 2px 10px rgba(10,16,32,.05); transition: box-shadow .2s, transform .2s; }
.gidsitem:hover { box-shadow: 0 10px 26px rgba(10,16,32,.1); transform: translateY(-1px); }
.gi-beeld { flex: 0 0 116px; width: 116px; height: 116px; border-radius: 12px; overflow: hidden; background: var(--kaart-2); display: grid; place-items: center; }
.gi-beeld img { width: 100%; height: 100%; object-fit: cover; }
.gidsitem .hartje { left: 18px; top: 18px; right: auto; width: 32px; height: 32px; }
.gidsitem .hartje svg { width: 17px; height: 17px; }
.gi-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.gi-info .shop { font: 700 10.5px/1 var(--f-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--goud-donker); }
.gi-info h3 { margin: 0; font: 700 15.5px/1.3 var(--f-ui); }
.gi-info h3 a { color: var(--tekst); text-decoration: none; }
.gi-waarom { margin: 0; font-size: 14px !important; line-height: 1.5 !important; color: var(--tekst-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.gi-onder { margin-top: auto; padding-top: 4px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.gi-onder .prijs { padding: 0; margin: 0; font-size: 17px; color: #141A2A; }
.gi-knop { display: inline-flex; align-items: center; gap: 4px; padding: 7px 12px 7px 14px; border-radius: 999px; font: 700 13px/1 var(--f-ui); color: #141A2A !important; text-decoration: none !important; background: linear-gradient(180deg, #F2CB74 0%, #D9A848 100%); border: 1px solid #B8862E; white-space: nowrap; }
.gi-knop svg { width: 15px; height: 15px; }
@media (max-width: 380px) { .gi-beeld { flex-basis: 92px; width: 92px; height: 92px; } .gidsitem .hartje { left: 16px; top: 16px; } }

.vinklijst, .stappenlijst { list-style: none; padding: 0; margin: 12px 0 4px; display: grid; gap: 8px; }
.vinklijst li { display: flex; gap: 10px; align-items: flex-start; line-height: 1.55; }
.vinklijst li svg { width: 20px; height: 20px; flex: none; margin-top: 2px; color: #fff; background: #3E8E5E; border-radius: 50%; padding: 3px; }
.stappenlijst { counter-reset: stap; }
.stappenlijst li { counter-increment: stap; position: relative; padding-left: 42px; line-height: 1.55; min-height: 30px; }
.stappenlijst li::before { content: counter(stap); position: absolute; left: 0; top: -2px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font: 800 14px/1 var(--f-ui); color: #141A2A; background: linear-gradient(180deg, #F2CB74, #D9A848); }

.tekstpagina.gids-tip { margin: 22px 0 6px; padding: 16px 18px; border-radius: 16px; background: #FFF8E8; border: 1px solid rgba(184,134,46,.35); border-left: 5px solid #D9A848; }
.gids-tip h2 { display: flex; align-items: center; gap: 8px; margin-top: 0 !important; font-size: 19px !important; }
.gids-tip h2 svg { width: 22px; height: 22px; color: #B8862E; flex: none; }

.gids-faq { margin-top: 18px; }
.gids-faq details { border-bottom: 1px solid var(--lijn); }
.gids-faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 2px; font: 700 15.5px/1.4 var(--f-ui); color: var(--tekst); }
.gids-faq summary::-webkit-details-marker { display: none; }
.gids-faq summary svg { width: 20px; height: 20px; flex: none; color: var(--goud); transition: transform .2s; }
.gids-faq details[open] summary svg { transform: rotate(180deg); }
.gids-faq details p { padding: 0 2px 16px; }
.gi-onder { flex-wrap: wrap; row-gap: 6px; }
.gi-onder .prijs { white-space: nowrap; }
.gi-onder .prijs s.oud { font-size: .72em; margin-left: 4px; }
/* Homepage (7-11-2026): 6 gidsen; op de telefoon alleen de eerste 4, anders wordt de homepage te lang. */
@media (max-width: 759px) { .gidslijst.compact .gidskaart:nth-child(n+5) { display: none; } }
/* Black Friday (7-11-2026): knopjes per categorie */
.afd-chips { margin: 4px 0 6px; }
.afd-chips .chip small { opacity: .6; font-weight: 600; margin-left: 2px; }
.afd-chips .chip.actief { background: #141A2A; color: #fff; border-color: #141A2A; }

/* ==========================================================
   8-11-2026 (wens Marius): mooiere knoppen en balken, overal op de site.
   Zelfde stijl als de Sint-rijmmachine: goud met een zacht glansje, wit-crème knoppen met gouden rand.
   ========================================================== */
.knop { transition: transform .15s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease, filter .15s ease; }
.knop:focus-visible, .chip:focus-visible { outline: 3px solid #137ca8; outline-offset: 3px; }
.knop > svg:last-child { transition: transform .2s ease; }
.knop:hover > svg:last-child:not(:first-child) { transform: translateX(3px); }

.knop-goud { position: relative; overflow: hidden; isolation: isolate; background: linear-gradient(180deg, #FCE7AD 0%, #F0C96C 48%, #DBA646 100%); border: 1px solid #B8862E; color: #141A2A;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.75), inset 0 -2px 0 rgba(140,90,20,.2), 0 3px 0 #A8762A, 0 8px 18px rgba(120,80,20,.2); }
.knop-goud::after { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: -60%; width: 45%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent); transform: skewX(-18deg); transition: left .6s ease; pointer-events: none; }
.knop-goud:hover { background: linear-gradient(180deg, #FDEBB8 0%, #F3CF78 48%, #E0AD4E 100%); transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.75), inset 0 -2px 0 rgba(140,90,20,.2), 0 4px 0 #A8762A, 0 12px 24px rgba(120,80,20,.26); }
.knop-goud:hover::after { left: 120%; }
.knop-goud:active { transform: translateY(2px); box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 1px 0 #A8762A, 0 3px 8px rgba(120,80,20,.18); }
.knop-goud.uit::after, .knop-goud[disabled]::after { display: none; }
.knop-goud.uit, .knop-goud[disabled] { border-color: #DDD4C3; transform: none; }

.knop-rand { background: linear-gradient(180deg, #FFFFFF, #FBF5E8); border: 1.5px solid #DCC48F; color: var(--goud-donker); box-shadow: inset 0 1px 0 #fff, 0 2px 0 #E6D5B0, 0 4px 10px rgba(60,40,10,.06); }
.knop-rand:hover { background: #FFFAF0; border-color: var(--goud); box-shadow: inset 0 1px 0 #fff, 0 3px 0 #D9BF86, 0 8px 16px rgba(60,40,10,.1); transform: translateY(-1px); }
.knop-rand:active { transform: translateY(2px); box-shadow: 0 0 0 transparent; }
.hero-knoppen .knop-rand { box-shadow: 0 4px 14px rgba(0,0,0,.25); }
.hero-knoppen .knop-rand:hover { box-shadow: 0 6px 18px rgba(0,0,0,.3); }

.chip { background: linear-gradient(180deg, #FFFFFF, #FBF7EE); box-shadow: 0 1px 0 rgba(120,90,30,.1); transition: transform .12s ease, border-color .12s, box-shadow .12s, background .12s, color .12s; }
.chip:hover { transform: translateY(-1px); box-shadow: 0 3px 8px rgba(120,90,30,.12); }
.chip[aria-pressed="true"], .chip.actief { background: linear-gradient(180deg, #1D2A4B, #0A1020); color: #FFE39B; border-color: #C9A23A; box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 0 0 2px rgba(217,168,72,.22), 0 3px 8px rgba(10,16,32,.2); transform: none; }

/* Zoekknop in de zoekbalk */
.zoek button { background: linear-gradient(180deg, #FCE7AD 0%, #F0C96C 48%, #DBA646 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.7), inset 0 -2px 0 rgba(140,90,20,.2), 0 2px 6px rgba(0,0,0,.18); transition: transform .15s ease, filter .15s ease; }
.zoek button:hover { filter: brightness(1.04); transform: scale(1.04); }
.zoek button:active { transform: scale(.96); }
.zoek:focus-within { box-shadow: 0 0 0 3px rgba(217,168,72,.45), 0 6px 20px rgba(0,0,0,.25); }

/* Filteren-knop (telefoon) */
.mb-filter { box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 0 0 1.5px rgba(201,162,58,.55), 0 6px 16px -8px rgba(10,16,32,.7); }

/* Onderste balk (telefoon): goud streepje boven de pagina waar je bent */
.onderbalk { box-shadow: 0 -6px 20px rgba(10,16,32,.18); }
.onderbalk [aria-current="page"]::before { content: ""; position: absolute; top: 0; left: 50%; width: 34px; margin-left: -17px; height: 3px; border-radius: 0 0 3px 3px; background: linear-gradient(90deg, #E2AD4C, #FCE7AD, #E2AD4C); box-shadow: 0 0 10px rgba(240,190,90,.6); }
.onderbalk a, .onderbalk button { transition: color .15s; }
.onderbalk a:active svg, .onderbalk button:active svg { transform: scale(.92); }

@media (prefers-reduced-motion: reduce) {
  .knop, .chip, .knop-goud::after, .zoek button, .knop > svg:last-child { transition: none; }
  .knop:hover, .chip:hover, .zoek button:hover { transform: none; }
}

/* 8-11-2026 (Fable P0-4): eerlijke prijs. 'ca.' bij een prijs ouder dan 7 dagen, en een duidelijke prijsnoot. */
.product-info .prijs .circa { font-size: .55em; font-weight: 600; color: var(--zacht, #5d5a68); vertical-align: middle; margin-right: 2px; }
.product-info .prijsnoot.oud { background: #fff6e0; border: 1px solid #f0d58a; border-radius: 10px; padding: 8px 12px; }
@media (prefers-color-scheme: dark) { .product-info .prijsnoot.oud { background: #2d2614; border-color: #6b5420; } }

/* ===== 8-11-2026 (Fable P1-6): het eerste scherm op de telefoon laat meteen product, prijs en knop zien ===== */
@media (max-width: 859px) {
  /* Productpagina: kleinere foto, kortere titel, één regel kruimelpad, compactere zoekbalk en aftelbalk. */
  body.pag-product .product-beeld { height: 210px; }
  body.pag-product .product-info h1 { font-size: clamp(20px, 5.6vw, 26px); line-height: 1.15; margin: 4px 0 6px; }
  body.pag-product .kruimel { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
  body.pag-product .kruimel a { padding: 2px 0; }
  body.pag-product .kruimel > span { margin: 0 5px; } /* 8-11-2026: tussen de stukjes stond geen ruimte (Home›Elektronica›…) */
  body.pag-product .zoekrij .binnen { padding-top: 6px; padding-bottom: 6px; }
  body.pag-product .zoekrij .zoek { padding: 2px 2px 2px 14px; }
  body.pag-product .zoekrij .zoek input { font-size: 15px; min-height: 36px; }
  body.pag-product .zoekrij .zoek button { width: 36px; height: 36px; min-height: 36px; }
  body.pag-product .aftel, body.pag-product .aftelbalk { padding-top: 4px; padding-bottom: 4px; }
  body.pag-product .product { padding-top: 8px; gap: 10px; }
  body.pag-product .product-info .prijs { font-size: 26px; }
  /* Lijstpagina's: lange intro eerst 2 regels, met 'Lees meer'. */
  .paginakop p.intro.lang { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .paginakop p.intro.lang.open { display: block; -webkit-line-clamp: unset; }
  .paginakop .intro-meer { all: unset; cursor: pointer; display: inline-block; margin-top: 4px; font: 600 14px/1.2 var(--f-ui); color: #D9A848; text-decoration: underline; text-underline-offset: 3px; }
  .paginakop .binnen { padding-top: 14px; padding-bottom: 16px; }
  .paginakop h1 { font-size: clamp(26px, 7vw, 36px); margin-top: 6px; }
  .lijst-kop .binnen { padding-top: 16px; padding-bottom: 16px; }
  .lijst-kop h1 { font-size: clamp(26px, 7vw, 36px); margin-bottom: 6px; }
}
@media (min-width: 860px) { .paginakop .intro-meer { display: none; } }
/* 8-11-2026 (Fable P1-7): op een Voor wie-hoofdpagina dragen de eerste 6 kaarten het label 'Onze keuze' (de met de hand gekozen toppers). */
.prodgrid.top6 > .prodkaart:nth-child(-n+6) .beeld::after { content: '★ Onze keuze'; position: absolute; left: 8px; top: 8px; z-index: 1; font: 700 11px/1 var(--f-ui); letter-spacing: .02em; padding: 6px 9px; border-radius: 999px; background: linear-gradient(180deg, #F2CB74, #D9A848); color: #141A2A; box-shadow: 0 2px 8px rgba(0,0,0,.18); }
.prodgrid.top6 > .prodkaart:nth-child(-n+6) .beeld .label { display: none; }
/* 8-11-2026 (Fable P1-10): VONK: per voorstel 'Niet leuk' en 'Goedkoper'. */
.vonk-keus-acties { display: flex; gap: 6px; margin-top: 6px; }
.vonk-mini { all: unset; cursor: pointer; flex: 1; text-align: center; font: 600 12.5px/1.2 var(--f-ui); color: var(--tekst-2); padding: 7px 8px; border-radius: 999px; border: 1.5px solid rgba(10,16,32,.12); background: #fff; }
.vonk-mini:hover, .vonk-mini:focus-visible { border-color: var(--goud); color: var(--navy); }
.vonk-mini-noot { font: 500 12px/1.3 var(--f-ui); color: var(--tekst-3); padding: 4px 2px; }
.vonk-keus.vonk-wissel { animation: vonkWissel .45s ease; }
@keyframes vonkWissel { from { opacity: .2; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .vonk-keus.vonk-wissel { animation: none; } }
/* Merkzoeker op Dames- en Herenhorloges (8-11-2026) */
.merkzoeker { margin: 10px 0 4px; padding: 12px; border: 1px solid rgba(10,16,32,.1); border-radius: 14px; background: #fffdf7; }
.mz-veld { display: flex; align-items: center; gap: 8px; border: 1.5px solid rgba(10,16,32,.16); border-radius: 10px; padding: 7px 12px; background: #fff; margin-bottom: 10px; }
.mz-veld:focus-within { border-color: var(--goud, #C9A23A); }
.mz-veld svg { width: 18px; height: 18px; flex: 0 0 auto; opacity: .55; }
.mz-veld input { border: 0; outline: 0; flex: 1; min-width: 0; font: inherit; font-size: 16px; background: transparent; color: var(--tekst); padding: 2px 0; }
.merkzoeker .chips { margin: 0 -12px; padding: 2px 12px; }
.merkzoeker .chip { white-space: nowrap; }
.mz-tal { opacity: .6; font-weight: 500; margin-left: 2px; }
.mz-melding { margin: 8px 0 0; font-size: 14px; color: var(--tekst-zacht, #555); }
/* Rijmmachine: tip onder het gedicht (9-11-2026) */
.rz-tip { margin: 10px 0 0; font-size: 14px; }
.rz-tip a { color: var(--goud-donker, #8a6a1c); font-weight: 600; text-decoration: underline; }

/* Slimme navigatie (9-11-2026, VOORBEELD): max. 6 onderwerpen in 2 even brede kolommen, rustig crème met marineblauwe tekst; goud alleen als accent. */
.slimnav { margin: 2px 0 4px; }
.sn-titel { font: 600 22px/1.2 var(--f-kop); color: var(--tekst); margin: 0 0 12px; }
.sn-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.sn-knop { display: flex; align-items: center; gap: 8px; min-height: 60px; padding: 8px 10px; border-radius: 14px; background: #FBF7EF; border: 1px solid #E5DAC4; color: #14213D; font-weight: 650; font-size: 14.5px; line-height: 1.25; text-decoration: none; transition: border-color .15s, background .15s; }
.sn-knop:hover { border-color: #C9A45C; background: #FFFBF2; }
.sn-knop:focus-visible { outline: 3px solid #137CA8; outline-offset: 2px; }
.sn-knop.actief { border-color: #C9A45C; background: #FFF6E0; box-shadow: inset 0 0 0 1px #C9A45C; }
.sn-ico { flex: none; width: 24px; font-size: 19px; line-height: 1; text-align: center; }
.sn-naam { min-width: 0; overflow-wrap: break-word; hyphens: auto; }
.sn-alle { margin-top: 10px; }
.sn-alle summary { list-style: none; display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 48px; border-radius: 12px; color: #14213D; font-weight: 650; font-size: 15px; cursor: pointer; }
.sn-alle summary::-webkit-details-marker { display: none; }
.sn-alle summary svg { width: 18px; height: 18px; color: var(--goud); transition: transform .2s; order: -1; }
.sn-alle[open] summary svg { transform: rotate(180deg); }
.sn-alle summary:focus-visible { outline: 3px solid #137CA8; outline-offset: 2px; }
.sn-alles { margin-top: 6px; }
.sn-alles .sn-knop { min-height: 52px; font-size: 14.5px; }
@media (min-width: 760px) { .sn-raster { grid-template-columns: repeat(3, minmax(0, 1fr)); } .sn-alles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Nieuw filter (9-11-2026, VOORBEELD): één scherm tegelijk, rijen met een pijltje, grote tikvlakken. */
.fp2-blad { padding: 0 16px 0; display: flex; flex-direction: column; max-height: 86vh; }
.fp2-kop { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; min-height: 56px; position: sticky; top: 0; background: var(--kaart); z-index: 1; border-bottom: 1px solid var(--lijn-zacht); margin: 0 -16px; padding: 4px 8px; }
.fp2-kop strong { text-align: center; font: 800 18px/1.2 var(--f-ui); color: #14213D; }
.fp2-kop .filter-sluit { margin: 0; }
.fp2-terug { width: 44px; height: 44px; border: 0; background: none; font-size: 34px; line-height: 1; color: #14213D; cursor: pointer; border-radius: 12px; }
.fp2-terug:focus-visible, .fp2-rij:focus-visible, .fp2-optie:focus-visible, .fp2-label:focus-visible, .fp2-alle:focus-visible { outline: 3px solid #137CA8; outline-offset: 2px; }
.fp2-inhoud { flex: 1; overflow: auto; padding: 6px 0 10px; }
.fp2-hulp { margin: 12px 2px 8px; color: var(--tekst-2); font-size: 15px; line-height: 1.45; }
.fp2-gekozen { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 8px; }
.fp2-label { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 6px 12px; border-radius: 10px; border: 1px solid #C9A45C; background: #FFF6E0; color: #14213D; font: 650 14.5px/1.2 var(--f-ui); cursor: pointer; }
.fp2-label span { color: var(--goud-donker); font-size: 13px; }
.fp2-rij, .fp2-optie { width: 100%; display: flex; align-items: center; gap: 12px; min-height: 58px; padding: 10px 4px; border: 0; border-bottom: 1px solid var(--lijn-zacht); background: none; color: #14213D; font: 650 16.5px/1.3 var(--f-ui); text-align: left; cursor: pointer; }
.fp2-t { flex: 1; min-width: 0; }
.fp2-w { color: var(--tekst-2); font-weight: 500; font-size: 15px; max-width: 45%; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fp2-rij.aan .fp2-w { color: var(--goud-donker); font-weight: 700; }
.fp2-n { color: var(--tekst-2); font-weight: 500; font-size: 14px; }
.fp2-pijl { font-size: 26px; line-height: 1; color: var(--goud); }
.fp2-vink { flex: none; width: 24px; height: 24px; border-radius: 50%; border: 2px solid #CDBF9F; background: #fff; }
.fp2-optie.aan .fp2-vink { border-color: #14213D; background: radial-gradient(circle, #14213D 0 6px, #fff 7px); }
.fp2-optie.aan { font-weight: 800; }
.fp2-optie[disabled] { opacity: .45; cursor: default; }
.fp2-sub, .fp2-letter { margin: 14px 2px 2px; font: 700 12px/1 var(--f-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--goud-donker); }
.fp2-alle { width: 100%; min-height: 52px; margin-top: 10px; border-radius: 12px; border: 1px solid #E5DAC4; background: #FBF7EF; color: #14213D; font: 700 15.5px/1.2 var(--f-ui); cursor: pointer; }
.fp2-zoek input { width: 100%; min-height: 50px; margin: 12px 0 4px; padding: 10px 14px; border: 1.5px solid #E2D6BF; border-radius: 12px; font: 16px/1.4 var(--f-ui); background: #fff; }
.fp2-zelf { margin-top: 16px; padding: 14px; border: 1px solid #E5DAC4; border-radius: 14px; background: #FBF7EF; display: grid; gap: 10px; }
.fp2-zelf .fp2-t { font-weight: 750; color: #14213D; }
.fp2-van-tot { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.fp2-van-tot label { display: flex; align-items: center; gap: 6px; font-weight: 650; color: #14213D; white-space: nowrap; min-width: 0; }
.fp2-van-tot input { flex: 1; min-width: 0; width: 100%; min-height: 46px; padding: 8px 10px; border: 1.5px solid #E2D6BF; border-radius: 10px; font: 16px var(--f-ui); background: #fff; }
.fp2-zelf .knop { min-height: 46px; justify-content: center; }
.fp2-voet { display: flex; gap: 10px; margin: 0 -16px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: #fff; box-shadow: 0 -8px 16px -10px rgba(0,0,0,.18); }
.fp2-voet .knop { flex: 1; justify-content: center; min-height: 52px; display: inline-flex; align-items: center; margin: 0; font-size: 16px; }
.fp2-voet .knop-goud { flex: 1.7; }
.fp2-voet .knop[disabled] { opacity: .5; }

/* Belevenissen op de homepage (9-11-2026, GO Marius): banner + tegels om te swipen */
.belevenis-home { display: grid; gap: 14px; }
.bh-banner { display: block; border-radius: 18px; overflow: hidden; background: #fff; border: 1px solid #E8DCC6; text-decoration: none; color: #14213D; box-shadow: 0 6px 20px rgba(20,33,61,.08); }
.bh-banner picture, .bh-banner img { display: block; width: 100%; height: auto; }
.bh-banner img { aspect-ratio: 3 / 2; object-fit: cover; }
.bh-tekst { display: grid; gap: 4px; padding: 14px 16px 16px; background: linear-gradient(180deg, #FFF8EA, #fff); }
.bh-kicker { font-size: 12.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #A8741A; }
.bh-tekst strong { font: 700 clamp(24px, 6vw, 32px)/1.15 var(--f-kop, Georgia, serif); }
.bh-sub { font-size: 15px; color: #4A4F63; }
.bh-rij { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 2px 2px 8px; margin: 0 -2px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.bh-rij::-webkit-scrollbar { display: none; }
.bh-tegel { flex: 0 0 38%; max-width: 170px; scroll-snap-align: start; display: grid; gap: 3px; text-decoration: none; color: #14213D; background: #fff; border: 1px solid #E8DCC6; border-radius: 14px; padding: 6px 6px 10px; }
.bh-foto { display: block; border-radius: 10px; overflow: hidden; aspect-ratio: 1; background: #F4EEE2; }
.bh-foto img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.07); }
.bh-naam { font-weight: 750; font-size: 14.5px; line-height: 1.25; padding: 4px 4px 0; }
.bh-prijs { font-size: 13px; font-weight: 700; color: #A8741A; padding: 0 4px; }
.bh-alle { justify-self: center; }
@media (min-width: 760px) {
  .bh-banner img { aspect-ratio: 16 / 5; }
  .bh-tekst { padding: 18px 22px 20px; }
  .bh-rij { overflow: visible; display: grid; grid-template-columns: repeat(6, 1fr); }
  .bh-tegel { max-width: none; }
}

/* 9-11-2026 (Marius: "sommige foto's zijn microscopisch klein"): de foto's zelf zijn bijgesneden tot het product,
   en op de productpagina op de telefoon minder lege rand om de foto, zodat het product groter in beeld staat (hoogte blijft 210px). */
@media (max-width: 859px) {
  body.pag-product .product-beeld.echt.studio img { padding: 4% 4% 8%; }
  body.pag-product .product-beeld.echt.studio::after { bottom: 3%; }
}

/* ===== NOVA-001 (9-11-2026, ontwerp Nova; ronde 2): keuzeknoppen als luxe mini-kaartjes. Alleen binnen .nova1 .slimnav (proef: ?proef=nova).
   Eén huisstijl voor alle beelden: wit randje + dun gouden ringetje; rond voor iconen en productfoto's, afgerond vierkant voor sfeerfoto's.
   Telefoon: compacte kaartjes van ca. 90-105 px; computer: zoals goedgekeurd (Voor hem). ===== */
.nova1 .slimnav { margin: 6px 0 12px; }
.nova1 .slimnav .sn-titel { margin: 0 0 12px; color: #141A2A; font-family: var(--f-kop); font-size: clamp(22px, 5.4vw, 30px); font-weight: 600; line-height: 1.2; letter-spacing: -.015em; }
.nova1 .slimnav .sn-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-items: stretch; }
.nova1 .slimnav .sn-knop { min-width: 0; min-height: 94px; padding: 8px 8px 9px; flex-direction: column; justify-content: center; gap: 5px; text-align: center;
  border: 1px solid #E6D8C1; border-radius: 16px; background: linear-gradient(180deg, #FFFFFF 0%, #FBF5E9 100%); box-shadow: 0 3px 10px rgba(20,26,42,.07);
  color: #141A2A; font-family: var(--f-ui); font-size: 16px; line-height: 1.12; font-weight: 700; letter-spacing: -.005em; transition: border-color .16s, box-shadow .16s; }
.nova1 .slimnav .sn-knop:hover { border-color: #B8862E; background: linear-gradient(180deg, #FFFFFF 0%, #FBF5E9 100%); box-shadow: 0 5px 15px rgba(20,26,42,.10); }
.nova1 .slimnav .sn-knop:focus-visible { outline: 3px solid #186D92; outline-offset: 2px; }
.nova1 .slimnav .sn-knop.actief, .nova1 .slimnav .sn-knop[aria-current="page"] { border: 2px solid #B8862E; background: linear-gradient(180deg, #FFFDF8 0%, #FFF3DA 100%); box-shadow: 0 0 0 2px rgba(184,134,46,.12); }
/* beeldjes: allemaal hetzelfde lijstje (wit + goud) */
.nova1 .slimnav .sn-ico, .nova1 .slimnav .sn-beeld { flex: none; box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 3px #C9A45C, 0 3px 8px rgba(10,16,32,.16); }
.nova1 .slimnav .sn-ico { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: #0A1020; font-size: 22px; line-height: 1; }
.nova1 .slimnav .sn-beeld { display: block; width: calc(100% - 6px); height: 44px; margin-top: 3px; border-radius: 11px; overflow: hidden; background: #EEE5D7; }
.nova1 .slimnav .sn-beeld img { display: block; width: 100%; height: 100%; object-fit: cover; }
.nova1 .slimnav .sn-beeld.sn-rond { width: 44px; height: 44px; border-radius: 50%; background: #0A1020; }
.nova1 .slimnav .sn-beeld.sn-product { background: #FFFFFF; }
.nova1 .slimnav .sn-beeld.sn-product img { transform: scale(1.18); }
.nova1 .slimnav .sn-naam { min-width: 0; color: #141A2A; hyphens: none; -webkit-hyphens: none; word-break: normal; overflow-wrap: normal; white-space: normal; }
.nova1 .slimnav .sn-alle { margin-top: 10px; }
.nova1 .slimnav .sn-alle summary { min-height: 46px; padding: 11px 15px; background: #FFFCF7; border: 1px solid #E6D8C1; border-radius: 14px; color: #141A2A; font-size: 15.5px; font-weight: 700; box-shadow: 0 2px 8px rgba(20,26,42,.05); }
.nova1 .slimnav .sn-alle summary:hover { border-color: #B8862E; }
.nova1 .slimnav .sn-alles { margin-top: 10px; }
.nova1 .slimnav .sn-alles .sn-knop { min-height: 90px; font-size: 16px; }
@media (max-width: 359px) { .nova1 .slimnav .sn-raster { gap: 8px; } .nova1 .slimnav .sn-knop { padding: 8px 5px 9px; letter-spacing: -.012em; } }
/* tablet */
@media (min-width: 540px) {
  .nova1 .slimnav .sn-raster { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .nova1 .slimnav .sn-knop { min-height: 108px; padding: 10px 10px 12px; gap: 8px; font-size: 16px; line-height: 1.3; border-radius: 18px; }
  .nova1 .slimnav .sn-beeld { height: 84px; border-radius: 12px; }
  .nova1 .slimnav .sn-beeld.sn-rond, .nova1 .slimnav .sn-ico { width: 60px; height: 60px; }
  .nova1 .slimnav .sn-ico { font-size: 26px; }
}
/* computer: zoals goedgekeurd */
@media (min-width: 1024px) {
  .nova1 .slimnav .sn-raster { gap: 15px; }
  .nova1 .slimnav .sn-knop { min-height: 112px; }
  .nova1 .slimnav .sn-beeld { height: 100px; }
  .nova1 .slimnav .sn-beeld.sn-rond, .nova1 .slimnav .sn-ico { width: 64px; height: 64px; }
  .nova1 .slimnav .sn-alles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .nova1 .slimnav .sn-alles .sn-beeld:not(.sn-rond) { height: 72px; }
}
@media (prefers-reduced-motion: reduce) { .nova1 .slimnav .sn-knop { transition: none; } }

/* ===== NOVA-002 (9-11-2026, ontwerp Nova): luxe productkaarten en productpagina. Alleen binnen html.nova2 (proef: ?proef=nova2). ===== */

/* Productkaart: bestaande HTML, links en productfoto's blijven intact. */
html.nova2 .prodkaart {
  background: #FFFFFF;
  border: 1px solid #E6DCCB;
  border-radius: 18px;
  box-shadow: 0 3px 14px rgba(10, 16, 32, .065);
  overflow: hidden;
}
html.nova2 .prodkaart:hover {
  border-color: #B8862E;
  box-shadow: 0 7px 22px rgba(10, 16, 32, .10);
}
html.nova2 .prodkaart .info {
  padding: 12px 12px 14px;
  gap: 6px;
}
html.nova2 .prodkaart .shop {
  color: #69552F;
  font-size: 12px;
  line-height: 1.25;
  letter-spacing: .025em;
}
html.nova2 .prodkaart h3,
html.nova2 .prodkaart.awkaart h3 {
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.32;
  color: #141A2A;
  hyphens: none;
  -webkit-hyphens: none;
  word-break: normal;
  overflow-wrap: break-word;
}
html.nova2 .prodkaart .prijs,
html.nova2 .prodkaart.awkaart .prijs {
  color: #141A2A;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.25;
}
html.nova2 .prodkaart .oud { color: #5F667A; }
html.nova2 .prodkaart .reden { color: #4F556A; }

/* Echte productfoto blijft onveranderd: géén kleurmenging.
   Een bestaande sfeerfoto blijft als sfeerfoto vullend afgebeeld. */
html.nova2 .prodkaart .beeld.echt:not(.sfeer) {
  background: #FFFCF6;
}
html.nova2 .prodkaart .beeld.echt:not(.sfeer) img {
  object-fit: contain;
  padding: 5%;
  mix-blend-mode: normal;
  filter: none;
}
html.nova2 .prodkaart .beeld.echt:not(.sfeer)::after { content: none; }
/* het label '★ Onze keuze' (top 6) blijft staan */
html.nova2 .prodgrid.top6 > .prodkaart:nth-child(-n+6) .beeld.echt::after { content: '★ Onze keuze'; }
html.nova2 .prodkaart .beeld.echt.sfeer img {
  object-fit: cover;
  padding: 0;
  mix-blend-mode: normal;
  filter: none;
}
/* Kaarten in extern-winkels overzicht: behoud bestaande foto/link-conventies. */
html.nova2 .prodkaart.awkaart .beeld img {
  object-fit: contain;
  padding: 5%;
  mix-blend-mode: normal;
}

/* Tikvlak favoriete hart: minimaal 44x44, geen nieuwe actie. */
html.nova2 .prodkaart .hartje {
  top: 8px;
  right: 8px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .96);
  color: #141A2A;
  border: 1px solid #D6C29A;
  backdrop-filter: none;
}
html.nova2 .prodkaart .hartje[aria-pressed="true"] { color: #8F6620; }
html.nova2 .prodkaart .hartje:focus-visible { outline: 3px solid #186D92; outline-offset: 2px; }

/* Bestaande labels zijn inhoudelijk ongewijzigd, maar niet naast het hart. */
html.nova2 .prodkaart .beeld .label,
html.nova2 .prodgrid.top6 > .prodkaart:nth-child(-n+6) .beeld::after {
  top: auto;
  bottom: 8px;
  left: 8px;
  max-width: calc(100% - 16px);
  font-size: 11px;
  letter-spacing: .015em;
}

/* Productdetail: rustige witte kaart om de bestaande winkel-foto. */
html.nova2 body.pag-product .product-beeld {
  background: #FFFCF6;
  border: 1px solid #E6DCCB;
  border-radius: 20px;
  box-shadow: 0 4px 20px rgba(10,16,32,.06);
}
html.nova2 body.pag-product .product-beeld.echt.studio img {
  mix-blend-mode: normal;
  filter: none;
}
html.nova2 body.pag-product .product-beeld.echt.studio::after { content: none; }
html.nova2 body.pag-product .product-info .shop {
  color: #69552F;
  letter-spacing: .055em;
}
html.nova2 body.pag-product .product-acties .knop-goud {
  font-size: 16px;
  min-height: 48px;
  line-height: 1.25;
  border-radius: 14px;
}
html.nova2 body.pag-product .waarom {
  background: #FFFDF8;
  border: 1px solid #E6D8C1;
  border-left: 3px solid #B8862E;
  border-radius: 16px;
  box-shadow: 0 4px 16px rgba(10,16,32,.045);
}
html.nova2 body.pag-product .waarom h2 { color: #8F6620; }
html.nova2 body.pag-product .feiten {
  color: #4F556A;
  font-size: 16px;
  line-height: 1.5;
}

/* Bestaande sticky prijs/winkelbalk: alleen kleurcontrast verbeteren. */
html.nova2 body.pag-product .product-plak .prijs { color: #FFF4DD; }
html.nova2 body.pag-product .product-plak .knop { font-size: 16px; min-height: 44px; }

/* De compacte mobiele producthoogte (210px) en volgorde blijven zoals ze zijn (regels van 8-11-2026 hierboven); hier niets extra's. */

@media (prefers-reduced-motion: reduce) {
  html.nova2 .prodkaart,
  html.nova2 .prodkaart .beeld img { transition: none; }
  html.nova2 .prodkaart:hover { transform: none; }
}

/* ==============================================================
   NOVA-003 — HOMEPAGE | PROEFSTIJL | 9 NOVEMBER 2026
   Voorlopig alleen ?proef=nova3; eerste versie, afstemmen op
   actuele cascade. Geen fonts, beelden, content of JS-functies.
   De :has(> .hero) begrenst ALLES tot de bestaande homepage.
   11-11-2026 (WIJZER): de nieuwe homepage van de proef heeft geen .hero maar .wzh; dezelfde stijl geldt daar ook (fout gevonden door Marius: Adventskalenders stak uit zijn vak).
   ============================================================= */
html.nova3 #app:is(:has(> .hero), :has(> .wzh)) {
  --n3-ivoor: #FFFCF7;
  --n3-rand: #E7DCCB;
  --n3-tekst: #141A2A;
  --n3-goud: #B8862E;
  --n3-goud-donker: #8F6620;
  --n3-schaduw: 0 4px 16px rgba(10, 16, 32, .07);
}

/* Sectieritme: voldoende lucht, niet meer scrollen dan nodig */
html.nova3 #app:is(:has(> .hero), :has(> .wzh)) > .binnen > .sectie { padding-top: 24px; }
html.nova3 #app:is(:has(> .hero), :has(> .wzh)) .sectie-kop { gap: 12px; margin-bottom: 15px; align-items: baseline; }
html.nova3 #app:is(:has(> .hero), :has(> .wzh)) .sectie-kop h2 {
  color: var(--n3-tekst); font-family: var(--f-kop);
  font-size: clamp(24px, 5.7vw, 32px); line-height: 1.18;
  letter-spacing: -.018em; overflow-wrap: normal; hyphens: none;
}
html.nova3 #app:is(:has(> .hero), :has(> .wzh)) .sectie-kop h2::after {
  width: 40px; height: 2px;
  background: linear-gradient(90deg, #B8862E, rgba(184, 134, 46, 0));
}
html.nova3 #app:is(:has(> .hero), :has(> .wzh)) .sectie-kop .meer {
  color: var(--n3-goud-donker); font-family: var(--f-ui); font-weight: 700;
  text-underline-offset: 3px; white-space: nowrap; flex-shrink: 0; /* 'Meer cadeaus' op één regel */
}

/* De bestaande hero-inhoud en afbeelding behouden, alleen luxe afwerken */
html.nova3 #app > .hero { border-bottom: 2px solid rgba(184, 134, 46, .40); }
html.nova3 #app > .hero .hero-knoppen .knop {
  min-height: 46px; border-radius: 999px; font-size: 15px;
  box-shadow: 0 3px 12px rgba(0,0,0,.16);
}
html.nova3 #app > .hero .hero-knoppen .knop-rand {
  border-color: rgba(250, 233, 188, .72);
  background: rgba(10, 16, 32, .75);
}
html.nova3 #app > .hero .hero-knoppen .knop:focus-visible {
  outline: 3px solid #F2CB74; outline-offset: 3px;
}

/* Voor wie: bestaande vier rondjes + drie tekstlinks op mobiel */
html.nova3 #app:is(:has(> .hero), :has(> .wzh)) .persoon-subs.home.zeven .subkaart {
  color: var(--n3-tekst); font: 700 14px/1.3 var(--f-ui);
  overflow-wrap: normal; word-break: normal; hyphens: none;
}
html.nova3 #app:is(:has(> .hero), :has(> .wzh)) .persoon-subs.home.zeven .subkaart .rond {
  border: 2px solid #FFFDF8;
  box-shadow: 0 0 0 1.5px #D2B16B, 0 5px 14px rgba(10, 16, 32, .12);
}
html.nova3 #app:is(:has(> .hero), :has(> .wzh)) .voorwie-links .chip,
html.nova3 #app:is(:has(> .hero), :has(> .wzh)) .cat-links .chip {
  min-height: 44px; border-radius: 999px; border: 1px solid var(--n3-rand);
  background: var(--n3-ivoor); color: var(--n3-tekst);
  font: 700 14px/1.3 var(--f-ui); padding: 9px 13px;
}

/* Belevenissen: behoud foto, links, horizontale swipe en aantallen */
html.nova3 #app:is(:has(> .hero), :has(> .wzh)) .belevenis-home .bh-banner {
  background: var(--n3-ivoor); border: 1px solid #D9C497;
  border-radius: 18px; box-shadow: var(--n3-schaduw);
}
html.nova3 #app:is(:has(> .hero), :has(> .wzh)) .belevenis-home .bh-tekst {
  background: linear-gradient(180deg, #FFF9ED, #FFFFFF);
}
html.nova3 #app:is(:has(> .hero), :has(> .wzh)) .belevenis-home .bh-tegel {
  background: var(--n3-ivoor); border: 1px solid var(--n3-rand);
  border-radius: 15px; box-shadow: 0 2px 10px rgba(10,16,32,.05);
}
html.nova3 #app:is(:has(> .hero), :has(> .wzh)) .belevenis-home .bh-foto { border-radius: 10px; }
html.nova3 #app:is(:has(> .hero), :has(> .wzh)) .belevenis-home .bh-naam { color: var(--n3-tekst); }
html.nova3 #app:is(:has(> .hero), :has(> .wzh)) .belevenis-home .bh-prijs { color: var(--n3-goud-donker); }

/* Favorieten: houd alle productkaarten exact volgens NOVA-002 */
html.nova3 #app:is(:has(> .hero), :has(> .wzh)) .favorieten { scroll-margin-top: 90px; }

/* Feestdagen en acties: hetzelfde beeld, dezelfde seizoenslogica */
html.nova3 #app:is(:has(> .hero), :has(> .wzh)) .seizoen .seizoen-kaart {
  border-radius: 17px; border: 1px solid rgba(184, 134, 46, .38);
  box-shadow: var(--n3-schaduw);
}
html.nova3 #app:is(:has(> .hero), :has(> .wzh)) .seizoen .seizoen-kaart .knop {
  border-radius: 999px; min-height: 44px; display: inline-flex; align-items: center;
}

/* Budget: niet vier donkere blokken, maar luchtige luxe knoppen */
html.nova3 #app:is(:has(> .hero), :has(> .wzh)) .budget-rij { gap: 10px; }
html.nova3 #app:is(:has(> .hero), :has(> .wzh)) .budget-knop {
  min-height: 54px; border-radius: 15px;
  background: linear-gradient(180deg, #FFFFFF, #FBF4E8);
  border: 1px solid #DCC8A4;
  color: var(--n3-tekst); font: 800 16px/1.25 var(--f-ui);
  box-shadow: 0 2px 9px rgba(10,16,32,.05);
}
html.nova3 #app:is(:has(> .hero), :has(> .wzh)) .budget-knop:hover {
  background: #FFF8EA; border-color: var(--n3-goud);
}

/* De bestaande ronde categoriebeelden blijven het onderwerp aangeven */
html.nova3 #app:is(:has(> .hero), :has(> .wzh)) .catbalken {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px; padding-left: 0;
}
html.nova3 #app:is(:has(> .hero), :has(> .wzh)) .catbalk {
  position: static; display: flex; flex-direction: column; gap: 8px;
  align-items: center; justify-content: flex-start; min-width: 0;
  min-height: 122px; padding: 12px 6px 10px;
  background: linear-gradient(180deg, #FFFFFF 0%, #FBF6ED 100%);
  border: 1px solid var(--n3-rand); border-radius: 16px;
  box-shadow: var(--n3-schaduw); text-align: center;
}
html.nova3 #app:is(:has(> .hero), :has(> .wzh)) .catbalk-rond {
  position: static; transform: none; flex: none;
  width: 60px; height: 60px; border-radius: 50%;
  border: 2px solid #FFFFFF;
  box-shadow: 0 0 0 1px #C9A45C, 0 4px 12px rgba(10,16,32,.14);
}
html.nova3 #app:is(:has(> .hero), :has(> .wzh)) .catbalk-naam {
  font: 700 14px/1.26 var(--f-ui); color: var(--n3-tekst);
  max-width: none; word-break: normal; overflow-wrap: normal; hyphens: none;
}
html.nova3 #app:is(:has(> .hero), :has(> .wzh)) .catbalk-pijl { display: none; }

/* Overige bestaande homepageblokken subtiel in dezelfde familie */
html.nova3 #app:is(:has(> .hero), :has(> .wzh)) .acties-blok .actie-kaart,
html.nova3 #app:is(:has(> .hero), :has(> .wzh)) .gidslijst.compact .gidskaart,
html.nova3 #app:is(:has(> .hero), :has(> .wzh)) .eigen-kaart .eigen-link,
html.nova3 #app:is(:has(> .hero), :has(> .wzh)) .stappen.klein .stap {
  background: var(--n3-ivoor); border: 1px solid var(--n3-rand);
  border-radius: 16px; box-shadow: var(--n3-schaduw);
}
html.nova3 #app:is(:has(> .hero), :has(> .wzh)) .gidslijst.compact .gidskaart strong,
html.nova3 #app:is(:has(> .hero), :has(> .wzh)) .acties-blok .actie-kaart strong {
  color: var(--n3-tekst); line-height: 1.3;
}
html.nova3 #app:is(:has(> .hero), :has(> .wzh)) .persoonlijk .gelegenheid-knopjes .chip {
  border-radius: 999px; border-color: var(--n3-rand);
}

/* Op de telefoon blijven de extra afdelingen verborgen (zoals nu: 6 rondjes + 5 tekstlinks) */
@media (max-width: 759px) { html.nova3 #app:is(:has(> .hero), :has(> .wzh)) .catbalk.extra { display: none; } }
/* Klein scherm: niet proppen en geen extra blokhoogte */
@media (max-width: 359px) {
  html.nova3 #app:is(:has(> .hero), :has(> .wzh)) .persoon-subs.home.zeven .subkaart { font-size: 12.5px; letter-spacing: -.01em; }
  html.nova3 #app:is(:has(> .hero), :has(> .wzh)) .persoon-subs.home .subkaart .rond { width: 64px; height: 64px; }
}
@media (max-width: 359px) {
  html.nova3 #app:is(:has(> .hero), :has(> .wzh)) .catbalken { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html.nova3 #app:is(:has(> .hero), :has(> .wzh)) .catbalk { min-height: 116px; }
  html.nova3 #app:is(:has(> .hero), :has(> .wzh)) .hero-knoppen .knop { font-size: 14px; }
}
@media (min-width: 760px) {
  html.nova3 #app:is(:has(> .hero), :has(> .wzh)) .catbalken { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
  html.nova3 #app:is(:has(> .hero), :has(> .wzh)) .catbalk { min-height: 132px; }
  html.nova3 #app:is(:has(> .hero), :has(> .wzh)) .catbalk-rond { width: 72px; height: 72px; }
  html.nova3 #app:is(:has(> .hero), :has(> .wzh)) .catbalk-naam { font-size: 14px; }
}
@media (min-width: 1100px) {
  html.nova3 #app:is(:has(> .hero), :has(> .wzh)) .catbalken { grid-template-columns: repeat(11, minmax(0, 1fr)); gap: 9px; }
  html.nova3 #app:is(:has(> .hero), :has(> .wzh)) .catbalk { min-height: 138px; padding: 13px 4px 10px; }
  html.nova3 #app:is(:has(> .hero), :has(> .wzh)) .catbalk-rond { width: 68px; height: 68px; }
  html.nova3 #app:is(:has(> .hero), :has(> .wzh)) .catbalk-naam { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  html.nova3 #app:is(:has(> .hero), :has(> .wzh)) *,
  html.nova3 #app:is(:has(> .hero), :has(> .wzh)) *::before,
  html.nova3 #app:is(:has(> .hero), :has(> .wzh)) *::after { transition: none !important; }
}

/* ===== NOVA-004 (9-11-2026, ontwerp Nova) — Voor wie & Gelegenheden: UITSLUITEND visueel.
   Alleen actief via body.nova4-target (proef: ?proef=nova4).
   GEEN wijzigingen aan .slimnav, productkaarten, filters, URLs of interacties. */

/* Beide paginatypen: warme, verfijnde maar compacte paginakop. */
body.nova4-target .paginakop {
  background: #FFFDF8;
  border-bottom: 1px solid #E6D8C1;
}
body.nova4-target .paginakop::after {
  background: linear-gradient(90deg, rgba(247,243,236,.96) 0%, rgba(247,243,236,.86) 58%, rgba(247,243,236,.55) 100%);
}
body.nova4-target .paginakop.zonder::after { background: none; }
body.nova4-target .paginakop .binnen {
  padding-top: 16px;
  padding-bottom: 20px;
}
body.nova4-target .paginakop h1 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(29px, 7.2vw, 40px);
  line-height: 1.13;
  letter-spacing: -.02em;
  color: #141A2A;
}
body.nova4-target .paginakop p {
  max-width: 660px;
  color: #4F556A;
  line-height: 1.52;
  font-size: 16px;
}
body.nova4-target .paginakop .kruimel,
body.nova4-target .paginakop .kruimel a { color: #555D70; }

/* De 2 overzichtspagina's: bestaande ronde foto's in echte, rustige kaarten.
   Op detailpagina's blijven de goedgekeurde NOVA-001-keuzekaarten ongewijzigd. */
body.nova4-overzicht .keuzes-sectie { padding-top: 18px; }
body.nova4-overzicht .keuzes.groot {
  display: grid;
  gap: 12px;
  align-items: stretch;
}
body.nova4-overzicht.nova4-voor .keuzes.groot {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
body.nova4-overzicht.nova4-gelegenheid .keuzes.groot {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
body.nova4-overzicht .keuzes.groot .keuzerond {
  min-width: 0;
  min-height: 156px;
  padding: 14px 8px 12px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-direction: column;
  gap: 12px;
  border: 1px solid #E6D8C1;
  border-radius: 17px;
  background: linear-gradient(180deg, #FFFFFF 0%, #FBF5E9 100%);
  box-shadow: 0 3px 12px rgba(20,26,42,.07);
  color: #141A2A;
  text-decoration: none;
  transition: border-color .16s ease, box-shadow .16s ease;
}
body.nova4-overzicht .keuzes.groot .keuzerond:hover {
  border-color: #B8862E;
  box-shadow: 0 7px 19px rgba(20,26,42,.1);
}
body.nova4-overzicht .keuzes.groot .keuzerond:focus-visible {
  outline: 3px solid #186D92;
  outline-offset: 3px;
}
body.nova4-overzicht .keuzes.groot .keuzerond .rond {
  width: 84px;
  height: 84px;
  flex: none;
  border: 2px solid #FFFFFF;
  border-radius: 50%;
  overflow: hidden;
  background: #0A1020;
  box-shadow: 0 0 0 2px #C9A45C, 0 5px 12px rgba(10,16,32,.14);
}
body.nova4-overzicht .keuzes.groot .keuzerond .rond img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
body.nova4-overzicht .keuzes.groot .keuzerond .naam {
  width: 100%;
  margin: 0;
  color: #141A2A;
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  hyphens: none;
  -webkit-hyphens: none;
  overflow-wrap: normal;
  word-break: normal;
}

/* Navigatielinks onderaan detailpagina's: dezelfde ivoor/goud-taal. */
body.nova4-target .sectie.verder .tekstlinks { gap: 8px; }
body.nova4-target .sectie.verder .tekstlinks a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 13px;
  border: 1px solid #E6D8C1;
  border-radius: 12px;
  background: #FFFDF8;
  color: #141A2A;
  font-size: 16px;
  font-weight: 650;
  line-height: 1.25;
  text-decoration: none;
}
body.nova4-target .sectie.verder .tekstlinks a:hover {
  border-color: #B8862E;
  background: #FFF8EA;
}
body.nova4-target .sectie.verder .tekstlinks a:focus-visible {
  outline: 3px solid #186D92;
  outline-offset: 2px;
}

@media (max-width: 359px) {
  body.nova4-overzicht.nova4-voor .keuzes.groot { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.nova4-overzicht .keuzes.groot { gap: 10px; }
  body.nova4-overzicht .keuzes.groot .keuzerond { min-height: 148px; padding-left: 4px; padding-right: 4px; }
  /* heel smalle telefoon: lange woorden als 'Uitdeelcadeautjes' passen anders niet heel */
  body.nova4-overzicht.nova4-gelegenheid .keuzes.groot .keuzerond .naam { font-size: 15px; letter-spacing: -.03em; }
}
@media (min-width: 600px) {
  body.nova4-overzicht .keuzes.groot,
  body.nova4-overzicht.nova4-voor .keuzes.groot,
  body.nova4-overzicht.nova4-gelegenheid .keuzes.groot {
    grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px;
  }
}
@media (min-width: 760px) {
  body.nova4-target .paginakop .binnen { padding-top: 26px; padding-bottom: 30px; }
  body.nova4-overzicht .keuzes.groot,
  body.nova4-overzicht.nova4-voor .keuzes.groot,
  body.nova4-overzicht.nova4-gelegenheid .keuzes.groot {
    grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 17px;
  }
  body.nova4-overzicht .keuzes.groot .keuzerond { min-height: 178px; padding: 17px 12px; }
  body.nova4-overzicht .keuzes.groot .keuzerond .rond { width: 108px; height: 108px; }
}
@media (min-width: 1180px) {
  body.nova4-overzicht.nova4-gelegenheid .keuzes.groot { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  body.nova4-overzicht .keuzes.groot .keuzerond { transition: none; }
}

/* ===== NOVA-005 (9-11-2026, ontwerp Nova): zoeken, filters en navigatie. Alleen binnen html.nova5 (proef: ?proef=nova5). ===== */

/* Zoekveld: bestaande layout, nieuwe verfijnde omlijsting. */
html.nova5 .zoekrij .zoek,
html.nova5 #app .zoek {
  background: #FFFFFF;
  border: 1px solid #E6D8C1;
  box-shadow: 0 3px 14px rgba(10, 16, 32, .13), inset 0 1px 0 #FFFFFF;
}
html.nova5 .zoek:focus-within {
  border-color: #B8862E;
  box-shadow: 0 0 0 3px rgba(184, 134, 46, .24), 0 6px 18px rgba(10,16,32,.13);
}
html.nova5 .zoek input { font-size: 16px; color: #141A2A; }
html.nova5 .zoek input::placeholder { color: #626B7D; opacity: 1; }
html.nova5 .zoek button {
  background: linear-gradient(180deg, #FCE6A6, #E5B454);
  color: #0A1020;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.65), 0 2px 5px rgba(40,25,7,.16);
}
html.nova5 .zoek button:focus-visible { outline: 3px solid #186D92; outline-offset: 2px; }
/* Op productpagina geen extra hoogte: prijs + winkelknop blijven in beeld. */
html.nova5 body.pag-product .zoekrij .zoek { padding-top: 2px; padding-bottom: 2px; }

/* Zoeksuggesties: laat de suggesties zelf en hun links volledig intact. */
html.nova5 .zoek-tips {
  border: 1px solid #E6D8C1;
  border-radius: 16px;
  background: #FFFFFF;
  box-shadow: 0 14px 34px rgba(10,16,32,.2);
}
html.nova5 .zoek-tips a { color: #141A2A; font-size: 15.5px; line-height: 1.35; }
html.nova5 .zoek-tips a:hover,
html.nova5 .zoek-tips a:focus-visible { background: #FFF8EB; color: #141A2A; }
html.nova5 .zoek-tips .zt-prijs,
html.nova5 .zoek-tips .zt-alles { color: #8F6620; }

/* De bestaande werkbalk. Geen wijziging aan resultaatvolgorde of filtering. */
html.nova5 .werkbalk {
  background: linear-gradient(180deg, #FFFFFF 0%, #FFFCF7 100%);
  border: 1px solid #E5D9C6;
  border-radius: 17px;
  box-shadow: 0 4px 14px rgba(10,16,32,.065);
}
html.nova5 .werkbalk .chip[aria-pressed="true"],
html.nova5 .werkbalk .chip.actief { background: #0A1020; color: #FCE6A6; border-color: #B8862E; }
html.nova5 .werkbalk .chip:focus-visible,
html.nova5 .werkbalk .sorteer select:focus-visible { outline: 3px solid #186D92; outline-offset: 2px; }
html.nova5 .actief-label { background: #FFF8EB; border-color: #D6BA82; color: #654713; }
html.nova5 .actief-wis { color: #5F667A; }

/* Mobiele Filteren / Sorteren: bestaande knoppen en bestaande select behouden. */
@media (max-width: 759px) {
  html.nova5 .mb-filter {
    background: linear-gradient(180deg, #1B2949, #0A1020);
    color: #FFFFFF;
    border: 1px solid #C9A45C;
    box-shadow: 0 4px 12px rgba(10,16,32,.17);
  }
  html.nova5 .mb-sorteer {
    background: #FFFCF7;
    border: 1.5px solid #D1B781;
    color: #141A2A;
    box-shadow: 0 2px 8px rgba(10,16,32,.065);
  }
  html.nova5 .mb-filter:focus-visible,
  html.nova5 .mb-sorteer:focus-within { outline: 3px solid #186D92; outline-offset: 2px; }
}

/* Stap-voor-stap filter — alleen visuele details; VONK-filter uitgesloten. */
html.nova5 .filterpaneel:not(.vonk-paneel) .filter-blad {
  background: #FFFCF7;
  border-top-color: #D6BA82;
  box-shadow: 0 -16px 40px rgba(10,16,32,.16);
}
html.nova5 .filterpaneel.fp2 .fp2-kop {
  background: #FFFFFF;
  border-bottom: 1px solid #E7DCCB;
}
html.nova5 .filterpaneel.fp2 .fp2-kop strong { color: #141A2A; }
html.nova5 .filterpaneel.fp2 .fp2-rij,
html.nova5 .filterpaneel.fp2 .fp2-optie {
  color: #141A2A;
  border-bottom-color: #EAE1D5;
}
html.nova5 .filterpaneel.fp2 .fp2-rij:hover,
html.nova5 .filterpaneel.fp2 .fp2-optie:hover { background: #FFF8EC; }
html.nova5 .filterpaneel.fp2 .fp2-optie.aan {
  background: #FFF4D9;
  color: #141A2A;
}
html.nova5 .filterpaneel.fp2 .fp2-label {
  background: #FFF5DF;
  border-color: #C9A45C;
}
html.nova5 .filterpaneel.fp2 .fp2-voet { background: #FFFFFF; }
html.nova5 .filterpaneel:not(.vonk-paneel) .filter-sluit:focus-visible,
html.nova5 .filterpaneel:not(.vonk-paneel) .fp2-terug:focus-visible { outline: 3px solid #186D92; outline-offset: 2px; }

/* Desktop hoofdmenu en megamenu: bestaande plaatsing en aantal kolommen. */
html.nova5 .hoofdnav a:hover,
html.nova5 .hoofdnav button:hover,
html.nova5 .hoofdnav [aria-expanded="true"],
html.nova5 .hoofdnav [aria-current="page"] {
  background: rgba(255,255,255,.07);
  color: #F8D88B;
}
html.nova5 .hoofdnav a:focus-visible,
html.nova5 .hoofdnav button:focus-visible { outline: 2px solid #F2CB74; outline-offset: 2px; }
html.nova5 .megamenu {
  background: #FFFCF7;
  border-bottom: 1px solid #D1B781;
  box-shadow: 0 18px 34px rgba(10,16,32,.18);
}
html.nova5 .megamenu h3 a { color: #8F6620; }
html.nova5 .megamenu li a { color: #30384A; }
html.nova5 .megamenu li a:hover,
html.nova5 .megamenu li a:focus-visible { color: #0A1020; background: #FFF3D8; }

/* Mobiele lade: geen verandering aan openen/sluiten, scroll of submenu-logica. */
html.nova5 .lade { background: #FFFCF7; border-right-color: #D8C5A2; }
html.nova5 .lade-kop { background: #FFFFFF; border-bottom-color: #E7DCCB; }
html.nova5 .lade-uitgelicht { border-color: #E1CEAA; }
html.nova5 .lade-label { color: #8F6620; }
html.nova5 .lade li + li { border-top-color: #E8DECd; }
html.nova5 .lade-rij { color: #141A2A; font-size: 16px; }
html.nova5 .lade-rij[aria-expanded="true"] { color: #8F6620; }
html.nova5 .lade-subs a { color: #40485A; }
html.nova5 .lade-subs a:focus-visible,
html.nova5 .lade-rij:focus-visible,
html.nova5 .lade-links a:focus-visible { outline: 2px solid #186D92; outline-offset: 2px; }

/* Mobiele onderbalk: behoud vier bestaande tabbladen, hoogte en positie. */
html.nova5 .onderbalk {
  background: rgba(10,16,32,.98);
  border-top: 1px solid rgba(201,164,92,.5);
  box-shadow: 0 -5px 18px rgba(10,16,32,.16);
}
html.nova5 .onderbalk [aria-current="page"] { color: #F8D88B; }
html.nova5 .onderbalk a:focus-visible,
html.nova5 .onderbalk button:focus-visible { outline: 2px solid #F8D88B; outline-offset: -3px; }

@media (prefers-reduced-motion: reduce) {
  html.nova5 .zoek button,
  html.nova5 .onderbalk a,
  html.nova5 .onderbalk button { transition: none; }
}

/* ===== NOVA-006 (10-11-2026, ontwerp Nova): VONK, Lijstje en Sint-rijmmachine. Alleen binnen html.nova6 + paginaclass. Live sinds 10-11-2026 (GO Marius). ===== */
html.nova6 body.nova6-vonk .vonk-vraag {
  padding:18px 16px 20px; border:1px solid #E6D8C1; border-radius:20px;
  background:linear-gradient(180deg,#fff,#FFFCF7); box-shadow:0 4px 16px rgba(20,26,42,.065);
}
html.nova6 body.nova6-vonk .vonk-vraag h2 { color:#141A2A; font-weight:600; line-height:1.2; }
html.nova6 body.nova6-vonk .vonk-vraag .keuzes { gap:10px; }
html.nova6 body.nova6-vonk .vonk-vraag .keuze {
  min-height:52px; border:1px solid #E2D3B9; border-radius:14px;
  background:linear-gradient(180deg,#fff,#FBF5E9); color:#141A2A;
  font:700 16px/1.3 var(--f-ui,Manrope,sans-serif); text-decoration:none;
  box-shadow:0 2px 8px rgba(20,26,42,.05);
}
html.nova6 body.nova6-vonk .vonk-vraag .keuze:focus-visible { outline:3px solid #186D92; outline-offset:2px; }
/* Herstel 11-11-2026 (fout gezien door Marius op /vonk/, telefoon): de keuzeknoppen stonden in vier smalle kolommen, met tekst over drie regels,
   en 'Een tiener' stak buiten het kader. Oorzaak: de regel '.keuzes' voor de ronde keuzes op lijstpagina's (4 per rij) gold ook hier.
   VONK krijgt zijn eigen raster terug: twee even brede knoppen naast elkaar (drie op een breed scherm), tekst op één regel, alles binnen het kader. */
.vonk-vraag .keuzes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.vonk-vraag .keuze { display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 56px; padding: 10px 12px; text-align: center; overflow-wrap: break-word; }
@media (max-width: 639px) { .vonk-vraag .keuzes > .keuze:last-child:nth-child(odd) { grid-column: 1 / -1; } }
@media (min-width: 640px) { .vonk-vraag .keuzes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
html.nova6 body.nova6-vonk .vonk-stapjes span { height:6px; border-radius:999px; }
html.nova6 body.nova6-vonk .vonk-terug,
html.nova6 body.nova6-vonk .vonk-aanpassen { min-height:44px; }
html.nova6 body.nova6-vonk .vonk-waarom { font-size:16px; line-height:1.4; }
html.nova6 body.nova6-favorieten .lijst-deel {
  border:1px solid #DCC69E; border-radius:20px; background:linear-gradient(180deg,#fff,#FFFCF7);
  box-shadow:0 5px 18px rgba(20,26,42,.065); padding:18px;
}
html.nova6 body.nova6-favorieten .lijst-deel-tekst { font-size:16px; line-height:1.5; }
html.nova6 body.nova6-favorieten .lijst-deel-tekst strong { font:600 25px/1.2 var(--f-kop,Georgia,serif); color:#141A2A; }
html.nova6 body.nova6-favorieten .lijst-deel-velden label { font-size:16px; color:#141A2A; }
html.nova6 body.nova6-favorieten .lijst-deel-velden input,
html.nova6 body.nova6-favorieten .lijst-deel-velden select { min-height:48px; font-size:16px; border:1px solid #DCCBAD; border-radius:12px; }
html.nova6 body.nova6-favorieten .lijst-deel-knoppen .knop { min-height:48px; font-size:16px; }
html.nova6 body.nova6-gedeeld .cadeaukaart {
  border:1px solid #E6D9C3; background:#fff; border-radius:18px;
  box-shadow:0 3px 13px rgba(20,26,42,.065);
}
html.nova6 body.nova6-gedeeld .cadeaukaart h3 { font-size:16px; line-height:1.35; }
html.nova6 body.nova6-gedeeld .cadeaukaart .prijs { font-size:18px; }
html.nova6 body.nova6-gedeeld .cadeaukaart .geef { min-height:48px; font-size:16px; }
html.nova6 body.nova6-gedeeld .cadeaukaart .beeld img { filter:none; mix-blend-mode:normal; }
html.nova6 body.nova6-rijm .rijm-z .rz-veld>label,
html.nova6 body.nova6-rijm .rijm-z .rz-veld legend { font-size:16px; line-height:1.35; }
html.nova6 body.nova6-rijm .rijm-z .rz-keuzes label { min-height:44px; font-size:16px; }
html.nova6 body.nova6-rijm .rijm-z .rz-gedicht .rz-tekst { font-size:16px; line-height:1.65; }
html.nova6 body.nova6-rijm .rijm-z .rz-knop { min-height:48px; }
@media(max-width:359px){
  html.nova6 body.nova6-vonk .vonk-vraag { padding:14px 11px 16px; }
  html.nova6 body.nova6-favorieten .lijst-deel { padding:14px 12px; }
}

/* ===== NOVA-007 (10-11-2026, ontwerp Nova): gidsen, info, winkels, categorieen en footer. Alleen binnen html.nova7. Live sinds 10-11-2026 (GO Marius). ===== */
html.nova7 { --n7-navy:#0A1020; --n7-ink:#141A2A; --n7-cream:#F7F3EC; --n7-gold:#B8862E; --n7-deepgold:#8F6620; --n7-border:#E5D7BE; --n7-card:#FFFEFB; }

/* 1 · Cadeaugidsen: overzicht (exclude compact homepage list) */
html.nova7 .gidslijst:not(.compact) { gap:14px; }
html.nova7 .gidslijst:not(.compact) .gidskaart {
  min-width:0; border:1px solid var(--n7-border); border-radius:17px;
  background:linear-gradient(180deg,#fff 0%,#FFFCF7 100%);
  box-shadow:0 4px 14px rgba(10,16,32,.06); padding:12px; transition:border-color .16s,box-shadow .16s;
}
html.nova7 .gidslijst:not(.compact) .gidskaart:hover { border-color:var(--n7-gold); box-shadow:0 7px 18px rgba(10,16,32,.10); }
html.nova7 .gidslijst:not(.compact) .gidsbeeld { border:1px solid #EFE1C9; border-radius:12px; background:#fff; }
html.nova7 .gidslijst:not(.compact) .gidskaart strong { color:var(--n7-ink); font-size:16px; line-height:1.4; overflow-wrap:normal; word-break:normal; hyphens:none; }
html.nova7 .gidslijst:not(.compact) .gidskaart small { color:#555D6F; font-size:14px; line-height:1.45; }

/* 2 · Cadeaugids: text, existing cards, FAQ and jump links */
html.nova7 .tekstpagina.gids { line-height:1.7; }
html.nova7 .tekstpagina.gids:not(:has(.rijm-z)) p, html.nova7 .tekstpagina.gids:not(:has(.rijm-z)) li { font-size:16px; line-height:1.65; }
html.nova7 .tekstpagina.gids h2 { font-family:var(--f-kop); color:var(--n7-ink); line-height:1.24; }
html.nova7 .gidsitem, html.nova7 .gids-top { border-color:var(--n7-border); background:var(--n7-card); box-shadow:0 4px 14px rgba(10,16,32,.06); }
html.nova7 .gidsitem { border-radius:17px; }
html.nova7 .gidsitem .gi-info h3 { font-size:16px; line-height:1.35; }
html.nova7 .gidsitem .gi-waarom { font-size:15px !important; }
html.nova7 .gidsitem .hartje::after { content:''; position:absolute; inset:-6px; border-radius:50%; } /* klikvlak 44px, hartje blijft even groot */
html.nova7 .gi-knop { min-height:44px; padding:9px 14px 9px 16px; font-size:14px; }
html.nova7 .gids-faq details { border:1px solid var(--n7-border); background:#FFFEFB; border-radius:12px; padding:0 14px; margin-bottom:8px; }
html.nova7 .gids-faq summary { min-height:48px; font-size:16px; }
html.nova7 .gids .lees-verder summary { min-height:44px; font-size:16px; }
html.nova7 .springlinks .chip { min-height:44px; display:inline-flex; align-items:center; }

/* 3 · Information and legal pages: editorial readability; no content changes */
html.nova7 .tekstpagina:not(.gids) { max-width:760px; padding-top:18px; padding-bottom:28px; }
html.nova7 .tekstpagina:not(.gids) p,
html.nova7 .tekstpagina:not(.gids) li { font-size:16px; line-height:1.75; color:#485166; }
html.nova7 .tekstpagina:not(.gids) h2 { font-family:var(--f-kop); font-weight:600; font-size:clamp(24px,4.4vw,29px); line-height:1.25; color:var(--n7-ink); }
html.nova7 .tekstpagina:not(.gids) a:not([class]) { color:var(--n7-deepgold); text-decoration-thickness:1px; text-underline-offset:3px; }
html.nova7 .tekstpagina:not(.gids) .let-op { border-color:#D6BC8A; background:#FFF9ED; color:#4B4337; }

/* 4 · Onze winkels: preserve compact two-column structure and shop/affiliate links */
html.nova7 .winkels-compact { gap:10px; }
html.nova7 .winkel-rij { border:1px solid var(--n7-border); border-radius:16px; background:linear-gradient(180deg,#fff,#FFFCF7); box-shadow:0 3px 12px rgba(10,16,32,.055); transition:border-color .16s,box-shadow .16s; }
html.nova7 .winkel-rij:hover { border-color:var(--n7-gold); box-shadow:0 6px 16px rgba(10,16,32,.09); }
html.nova7 .winkel-tekst strong { color:var(--n7-ink); font-size:16px; overflow-wrap:normal; word-break:normal; }
html.nova7 .winkel-tekst small { color:#50586B; font-size:14px; line-height:1.45; }
html.nova7 .winkel-logo, html.nova7 .winkel-letter { border-radius:12px; }
html.nova7 .winkel-rij:focus-visible, html.nova7 .gidskaart:focus-visible { outline:3px solid #186D92; outline-offset:3px; }

/* 5 · All categories overview. Do not affect NOVA-001/003 cards elsewhere */
html.nova7 .catronden .catrond { min-width:0; border:1px solid var(--n7-border); border-radius:18px; background:linear-gradient(180deg,#fff,#FFF9F0); box-shadow:0 4px 12px rgba(10,16,32,.055); padding:14px 10px; transition:border-color .16s,box-shadow .16s; }
html.nova7 .catronden .catrond:hover { border-color:var(--n7-gold); box-shadow:0 7px 18px rgba(10,16,32,.09); }
html.nova7 .catronden .catrond-naam { color:var(--n7-ink); font-size:16px; font-weight:700; hyphens:none; word-break:normal; overflow-wrap:normal; }
html.nova7 .catronden .catrond-tekst { font-size:14px; line-height:1.45; color:#525A6E; }
html.nova7 .catronden .catrond:focus-visible { outline:3px solid #186D92; outline-offset:2px; }

/* 6 · Footer: preserve all text (including personal line), navigation, legal details */
html.nova7 .footer { background:var(--n7-navy); border-top:1px solid #8E703D; }
html.nova7 .footer .binnen { gap:28px; }
html.nova7 .footer h4 { font-size:13px; line-height:1.35; letter-spacing:.10em; color:#F2CB74; }
html.nova7 .footer p { color:#D2CCBF; font-size:15px; line-height:1.65; }
html.nova7 .footer li a { color:#E5DFD2; font-size:15px; line-height:1.35; min-height:44px; padding:0; display:flex; align-items:center; }
html.nova7 .footer li a:hover, html.nova7 .footer li a:focus-visible { color:#F2CB74; }
html.nova7 .footer-onder .binnen { color:#DDD5C8; font-size:13px; line-height:1.6; }
html.nova7 .footer-onder a { color:#F3D592; }
html.nova7 .footer-yara { border-top-color:rgba(217,168,72,.20); }

/* Compact mobile, protect 320px and existing grids */
@media (max-width:699px) {
  html.nova7 .winkels-compact { gap:8px; }
  html.nova7 .winkel-rij { padding:10px 8px; align-items:start; }
  html.nova7 .winkel-tekst strong { font-size:15px; }
  html.nova7 .winkel-tekst small { font-size:13px; }
  html.nova7 .footer .binnen { gap:20px; }
}
@media (max-width:359px) {
  html.nova7 .gidslijst:not(.compact) { grid-template-columns:minmax(0,1fr); }
  html.nova7 .catronden .catrond { padding:10px 6px; }
}
@media (prefers-reduced-motion:reduce) {
  html.nova7 .gidslijst:not(.compact) .gidskaart,
  html.nova7 .winkel-rij, html.nova7 .catronden .catrond { transition:none; }
}

/* Kapot winkellogo (10-11-2026): onerror zet 'hidden', maar display:block hield het kapotte plaatje zichtbaar. Nu valt hij netjes terug op de letter. */
.winkel-logo[hidden], .winkel-letter[hidden] { display: none !important; }

/* ===== NOVA-009 (10-11-2026, opdracht Nova, 3 punten): mobiele filterbalk, rustige onderwerpkaarten, consequente knoppen en badges.
   UITSLUITEND visueel. Alleen binnen html.nova9. Live sinds 10-11-2026 (GO Marius). ===== */

/* --- 1. Mobiele filterbalk: boven aantal + Verras me, onder Sorteren | Filteren, dan het snelle rijtje --- */
@media (max-width: 759px) {
  html.nova9 .werkbalk { display: flex; flex-direction: column; align-items: stretch; padding: 12px 14px 12px; }
  html.nova9 .werkbalk > .werkbalk-onder { order: 1; display: flex; align-items: center; gap: 10px; margin: 0; padding: 0 0 12px; border-top: 0; border-bottom: 1px solid rgba(10,16,32,.08); }
  html.nova9 .werkbalk .werkbalk-onder .aantal { margin-right: auto; font: 700 15px/1.2 var(--f-ui); color: #141A2A; }
  html.nova9 .werkbalk .werkbalk-onder .chip.verras { min-height: 44px; padding: 0 16px; border-radius: 999px; font: 700 14px/1 var(--f-ui); background: #FFFCF7; border: 1px solid #D9C39A; color: #8F6620; }
  html.nova9 .werkbalk > .mobiel-balk { order: 2; display: flex; gap: 10px; padding-top: 12px; }
  html.nova9 .werkbalk .mb-sorteer { order: 1; }
  html.nova9 .werkbalk .mb-filter { order: 2; }
  html.nova9 .werkbalk .mb-filter, html.nova9 .werkbalk .mb-sorteer {
    flex: 1 1 0; min-height: 48px; border-radius: 999px; font: 700 15px/1 var(--f-ui);
    background: #FFFCF7; color: #141A2A; border: 1.5px solid #D9C39A; box-shadow: 0 2px 8px rgba(10,16,32,.06);
  }
  html.nova9 .werkbalk .mb-filter svg, html.nova9 .werkbalk .mb-tekst svg { color: #8F6620; }
  /* gekozen filters: Filteren wordt marineblauw (geselecteerde status), met het bestaande tellertje */
  html.nova9 .werkbalk .mb-filter:has(.mb-teller) { background: #0A1020; color: #FFFFFF; border-color: #0A1020; }
  html.nova9 .werkbalk .mb-filter:has(.mb-teller) svg { color: #F2CB74; }
  html.nova9 .werkbalk > .actief-filters { order: 3; padding-top: 10px; }
  html.nova9 .werkbalk > .mb-snel { order: 4; margin-top: 12px; padding: 12px 0 0; border-top: 1px dashed rgba(10,16,32,.10); }
  html.nova9 .werkbalk > .mb-snel .chip { min-height: 40px; }
}

/* --- 2. Onderwerpen en subcategorieën: één rustig kaartraster (categorie, Voor wie, gelegenheden) --- */
html.nova9 .slimnav .sn-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 12px; align-items: stretch; }
html.nova9 .slimnav .sn-knop {
  min-width: 0; min-height: 0; height: 100%; padding: 0; gap: 0; display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch;
  background: #FFFFFF; border: 1px solid #E5D7BE; border-radius: 16px; overflow: hidden; text-align: center;
  box-shadow: 0 2px 10px rgba(10,16,32,.05); transition: border-color .15s, box-shadow .15s;
}
html.nova9 .slimnav .sn-knop:hover { border-color: #B8862E; box-shadow: 0 6px 18px rgba(10,16,32,.09); background: #FFFFFF; }
html.nova9 .slimnav .sn-beeld:not(.sn-rond) { display: block; width: 100%; height: auto; aspect-ratio: 2 / 1; margin: 0; border-radius: 0; box-shadow: none; background: #EEE5D7; }
html.nova9 .slimnav .sn-beeld:not(.sn-rond) img { width: 100%; height: 100%; object-fit: cover; }
html.nova9 .slimnav .sn-beeld.sn-rond, html.nova9 .slimnav .sn-ico { width: 52px; height: 52px; margin: 12px auto 0; box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 3px #D9C39A; }
html.nova9 .slimnav .sn-naam {
  display: flex; align-items: center; justify-content: center; flex: 1 0 auto; min-height: calc(2 * 1.25em + 16px); padding: 8px 8px 10px;
  font: 700 15px/1.25 var(--f-ui); color: #141A2A; hyphens: none; -webkit-hyphens: none; overflow-wrap: normal; word-break: normal;
}
/* gekozen onderwerp: marineblauwe rand en naam (geselecteerde status) */
html.nova9 .slimnav .sn-knop.actief, html.nova9 .slimnav .sn-knop[aria-current="page"] { border: 2px solid #0A1020; box-shadow: 0 0 0 3px rgba(10,16,32,.08); background: #FFFFFF; }
html.nova9 .slimnav .sn-knop.actief .sn-naam, html.nova9 .slimnav .sn-knop[aria-current="page"] .sn-naam { color: #0A1020; }
html.nova9 .slimnav .sn-alle { margin-top: 12px; }
html.nova9 .slimnav .sn-alle summary { min-height: 48px; padding: 0 18px; border-radius: 999px; background: #FFFCF7; border: 1px solid #D9C39A; box-shadow: none; font: 700 15px/1 var(--f-ui); color: #141A2A; }
html.nova9 .slimnav .sn-alle summary:hover { border-color: #B8862E; }
html.nova9 .slimnav .sn-alles { margin-top: 12px; }
html.nova9 .slimnav .sn-alles .sn-knop { min-height: 0; }
@media (min-width: 760px) {
  html.nova9 .slimnav .sn-raster { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  html.nova9 .slimnav .sn-alles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  html.nova9 .slimnav .sn-naam { font-size: 16px; }
  html.nova9 .slimnav .sn-beeld:not(.sn-rond) { aspect-ratio: 16 / 9; }
  html.nova9 .slimnav .sn-beeld.sn-rond, html.nova9 .slimnav .sn-ico { width: 64px; height: 64px; margin-top: 14px; }
  html.nova9 .slimnav .sn-alle summary { max-width: 360px; margin: 0 auto; }
}
@media (min-width: 1100px) {
  html.nova9 .slimnav .sn-raster { gap: 20px; }
  html.nova9 .slimnav .sn-raster:not(.sn-alles) .sn-beeld:not(.sn-rond) { aspect-ratio: 21 / 9; }
}
@media (max-width: 359px) { html.nova9 .slimnav .sn-raster { gap: 8px; } html.nova9 .slimnav .sn-naam { font-size: 14px; padding: 8px 6px 10px; } }

/* --- 3. Huisstijl consequent: secundaire knoppen ivoor met rand, productkaarten en badges gelijk --- */
html.nova9 .meer-knop .knop-rand, html.nova9 .knop.knop-rand {
  min-height: 48px; padding: 0 22px; border-radius: 999px; background: #FFFCF7; border: 1px solid #D9C39A; color: #141A2A;
  font: 700 15px/1 var(--f-ui); box-shadow: 0 2px 8px rgba(10,16,32,.05);
}
html.nova9 .meer-knop .knop-rand:hover, html.nova9 .knop.knop-rand:hover { border-color: #B8862E; background: #FFFFFF; }
/* Herstel 11-11-2026 (fout gezien door Marius op de homepage, telefoon): 'Lekker rondkijken' was donkere tekst op een donkere knop.
   De regel hierboven maakte de tekst van elke tweede knop donker, maar op de foto bovenaan de homepage blijft die knop donker doorzichtig.
   Daar hoort dus witte tekst bij, zoals vóór NOVA-009. */
html.nova9 #app > .hero .hero-knoppen .knop.knop-rand,
html.nova9 .hero-knoppen .knop.knop-rand { color: #FFFFFF; background: rgba(10, 16, 32, .75); border-color: rgba(250, 233, 188, .72); }
html.nova9 #app > .hero .hero-knoppen .knop.knop-rand:hover,
html.nova9 .hero-knoppen .knop.knop-rand:hover { color: #FFFFFF; background: rgba(10, 16, 32, .88); border-color: #F2CB74; }
html.nova9 .prodkaart { border-radius: 16px; border-color: #E5D7BE; }
html.nova9 .prodkaart .beeld.echt:not(.sfeer) { background: #FFFFFF; aspect-ratio: 1 / 1; }
html.nova9 .prodkaart .beeld .label,
html.nova9 .prodgrid.top6 > .prodkaart:nth-child(-n+6) .beeld::after {
  display: inline-flex; align-items: center; min-height: 22px; padding: 0 9px; border-radius: 999px;
  font: 800 11px/1 var(--f-ui); letter-spacing: .03em; text-transform: uppercase; border: 1px solid #D9C39A; background: #FFFCF7; color: #8F6620; box-shadow: none;
  width: auto; right: auto; max-width: calc(100% - 16px);
}
html.nova9 .prodkaart .beeld .label.vol { background: #0A1020; color: #F2CB74; border-color: #0A1020; }
@media (prefers-reduced-motion: reduce) { html.nova9 .slimnav .sn-knop { transition: none; } }
/* NOVA-009 ronde 2 (Nova 10-11-2026 16:43): mobiel compacter — lagere fotovlakken, minder witruimte, filterblok strakker. */
@media (max-width: 759px) {
  html.nova9 .slimnav .sn-raster { gap: 10px; }
  html.nova9 .slimnav .sn-beeld:not(.sn-rond) { aspect-ratio: 5 / 2; }
  html.nova9 .slimnav .sn-beeld.sn-rond, html.nova9 .slimnav .sn-ico { width: 46px; height: 46px; margin-top: 9px; }
  html.nova9 .slimnav .sn-naam { min-height: calc(2 * 1.2em + 12px); padding: 6px 6px 7px; font-size: 14.5px; line-height: 1.2; }
  html.nova9 .slimnav .sn-alle { margin-top: 10px; }
  html.nova9 .slimnav .sn-alle summary { min-height: 44px; }
  html.nova9 .werkbalk { padding: 10px 12px 10px; }
  html.nova9 .werkbalk > .werkbalk-onder { padding-bottom: 8px; }
  html.nova9 .werkbalk > .mobiel-balk { padding-top: 8px; gap: 8px; }
  html.nova9 .werkbalk .mb-filter, html.nova9 .werkbalk .mb-sorteer { min-height: 44px; }
  html.nova9 .werkbalk > .actief-filters { padding-top: 8px; }
  html.nova9 .werkbalk > .mb-snel { margin-top: 8px; padding-top: 8px; }
  html.nova9 .werkbalk > .mb-snel .chip { min-height: 36px; }
}
@media (hover: none) and (pointer: coarse) and (max-width: 759px) { html.nova9 .werkbalk > .mb-snel .chip { min-height: 40px; } }
/* ===== einde NOVA-009 ===== */
/* ===== Herstel 10-11-2026 (fout gezien op /voor/kinderen/, 390px): 'Bellenblaasmachi|ne' brak midden in het woord.
   Lange woorden (14+ letters) in een producttitel krijgen nu een net afbreekstreepje op een lettergreep; korte woorden breken nooit. ===== */
html.nova2 .prodkaart h3,
html.nova2 .prodkaart.awkaart h3 {
  hyphens: auto; -webkit-hyphens: auto;
  hyphenate-limit-chars: 13 5 4;
  -webkit-hyphenate-limit-before: 5; -webkit-hyphenate-limit-after: 4;
}
/* 11-11-2026: de regel hierboven gold eerst alleen voor .awkaart en werkte dus niet op de gewone productkaart. Nu voor alle kaarten,
   en de titels krijgen zelf afbreekplekken mee (zachtAf in gedeeld.js), zodat het ook werkt in browsers zonder Nederlands woordenboek. */
/* Op de allersmalste telefoons (320px) is een titelvak 111px breed; woorden van 12 letters ('geschenkdoos', 'warmtekussen') pasten
   daar net niet in en braken midden af. Iets kleinere letter, alleen daar. */
@media (max-width: 339px) { html.nova2 .prodkaart h3, html.nova2 .prodkaart.awkaart h3 { font-size: 14.5px; } }
/* Zelfde scherm: de doorgestreepte oude prijs brak tussen '€' en het bedrag. Die blijft nu bij elkaar. */
.prodkaart .prijs s.oud { white-space: nowrap; }

/* ===== NOVA-010 (live 11-11-2026, GO Marius): na een tik op een onderwerp opent 'Soort cadeau' over het hele telefoonscherm ===== */
.filterpaneel.fp2.direct .filter-achter { background: #F7F3EC; opacity: 1; }
.filterpaneel.fp2.direct .filter-blad { top: 0; height: 100%; max-height: none; border-radius: 0; border-top: 0; box-shadow: none; transform: none; }
.filterpaneel.fp2.direct .fp2-direct-hulp { margin: 16px 2px 10px; font-size: 16px; }
.filterpaneel.fp2.direct .fp2-direct-hulp strong { display: block; font: 700 22px/1.2 'Playfair Display', Georgia, serif; color: #141A2A; margin-bottom: 4px; }
.filterpaneel.fp2.direct .fp2-rij { min-height: 56px; }
.filterpaneel.fp2.direct .fp2-voet .knop { flex: 1; }
/* ===== einde NOVA-010 ===== */

/* ===== Strakke minitegels (11-11-2026, wens Marius: 'alles moet strak zijn, met leuke icoontjes erbij') =====
   In plaats van losse tekstknopjes van ongelijke breedte: gelijke vakken in een raster, elk met een rond plaatje en een naam.
   Gebruikt op de homepage (overige personen, overige categorieën, gelegenheden) en op Alle categorieën (personen). Kleuren en vorm uit de huisstijl. */
.mini-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.mini-raster.alleen-mobiel { display: none; }
@media (max-width: 759px) { .mini-raster.alleen-mobiel { display: grid; } }
@media (min-width: 760px) { .mini-raster.breed { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } }
.mini-tegel { display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 60px; padding: 7px 12px 7px 8px; border: 1px solid #E5D7BE; border-radius: 16px;
  background: linear-gradient(180deg, #FFFFFF, #FFFCF7); box-shadow: 0 2px 8px rgba(10,16,32,.05); color: #141A2A; font: 700 15px/1.2 'Manrope', system-ui, sans-serif; text-decoration: none; }
.mini-tegel:hover { border-color: #B8862E; }
.mini-tegel:focus-visible { outline: 3px solid #186D92; outline-offset: 2px; }
.mini-tegel .mt-rond { flex: 0 0 44px; width: 44px; height: 44px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: #0A1020; box-shadow: 0 0 0 1.5px #D6B56A; }
.mini-tegel .mt-rond img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mini-tegel .mt-rond.mt-ico { color: #F2CB74; }
.mini-tegel .mt-rond svg { width: 20px; height: 20px; }
.mini-tegel .mt-naam { min-width: 0; overflow-wrap: break-word; }
.gelegenheid-strak { margin-top: 22px; }
.gelegenheid-strak h3 { margin: 0; font: 600 20px/1.25 'Playfair Display', Georgia, serif; color: #141A2A; }
@media (max-width: 359px) { .mini-tegel { gap: 8px; padding: 6px 8px 6px 6px; font-size: 14px; } .mini-tegel .mt-rond { flex-basis: 38px; width: 38px; height: 38px; } }
/* ===== einde minitegels ===== */

/* ===== WIJZER (proef 11-11-2026, GO Marius): nieuwe opzet van de Voor wie-pagina's ===== */
.wijzer .wz-keuze { display: flex; flex-direction: column; gap: 10px; padding-bottom: 4px; }
.wijzer .wz-vraag { margin: 6px 0 0; font: 800 13px/1.3 var(--f-tekst, Manrope, sans-serif); letter-spacing: .06em; text-transform: uppercase; color: #5B6072; }
.wijzer .wz-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.wijzer .wz-chips .chip { min-height: 44px; display: inline-flex; align-items: center; padding: 0 16px; font-size: 15px; font-weight: 700; white-space: nowrap; background: #FFFCF7; border: 1px solid #E5D7BE; color: #141A2A; border-radius: 999px; text-decoration: none; }
.wijzer .wz-chips .chip[aria-pressed="true"] { background: #0A1020; border-color: #0A1020; color: #FFFFFF; }
@media (max-width: 720px) {
  .wijzer .wz-bedrag { flex-wrap: nowrap; gap: 6px; }
  .wijzer .wz-bedrag .chip { flex: 1 1 0; min-width: 0; justify-content: center; padding: 0 4px; font-size: 14px; }
  .wijzer .wz-rol { flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px; padding: 2px 16px 8px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .wijzer .wz-rol::-webkit-scrollbar { display: none; }
  .wijzer .wz-rol .chip { flex: none; }
}
.wijzer .wz-uit { margin: 12px 0 10px; padding-top: 14px; border-top: 1px solid #E5D7BE; }
.wijzer .wz-uit h2 { margin: 0; font: 600 22px/1.2 var(--f-kop, "Playfair Display", serif); color: #141A2A; }
.wijzer .wz-uit p { margin: 4px 0 0; font-size: 14px; color: #5B6072; }
.wijzer .wz-alles { text-align: center; margin: 14px 0 6px; font-size: 15px; }
.wijzer .wz-alles a { color: #8F6620; font-weight: 700; }
.wijzer .prodkaart .reden { -webkit-line-clamp: 3; }
/* Tot de app de pagina overneemt staat de gebouwde (oude) opzet er nog: voor wie de nieuwe opzet krijgt, laten we daar alleen de kop en de eerste 12 producten van zien. */
html.wz-b:not(.lk-gestart) #app .keuzes-sectie, html.wz-b:not(.lk-gestart) #app .werkbalk, html.wz-b:not(.lk-gestart) #app .meer-knop,
html.wz-b:not(.lk-gestart) #app .prodgrid > :nth-child(n+13) { display: none; }
html.wz-b:not(.lk-gestart) #app > .binnen::before { content: ''; display: block; height: 240px; }
@media (min-width: 721px) { html.wz-b:not(.lk-gestart) #app > .binnen::before { height: 200px; } }
html.wz-b:not(.lk-gestart) #app .paginakop p.intro, html.wz-b:not(.lk-gestart) #app .paginakop p.intro + button { display: none; }
/* WIJZER, homepage: één vraag, negen gelijke tegels */
.wzh .wzh-vraag h1 { margin: 6px 0 6px; font: 600 28px/1.15 var(--f-kop, "Playfair Display", serif); color: #141A2A; text-wrap: balance; }
.wzh .wzh-sub { margin: 0 0 14px; font-size: 15px; color: #5B6072; }
.wzh-raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.wzh-tegel { display: flex; flex-direction: column; align-items: center; gap: 8px; min-height: 116px; padding: 12px 6px 10px; background: #FFFFFF; border: 1px solid #E5D7BE; border-radius: 18px; box-shadow: 0 3px 10px rgba(20,26,42,.04); text-decoration: none; color: #141A2A; font: 700 14px/1.2 var(--f-tekst, Manrope, sans-serif); text-align: center; min-width: 0; }
.wzh-rond { width: 64px; height: 64px; flex: none; border-radius: 50%; overflow: hidden; border: 2px solid #F2CB74; display: grid; place-items: center; }
.wzh-rond img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wzh-rond.wzh-icoon { background: #0A1020; color: #F2CB74; }
.wzh-rond.wzh-icoon svg { width: 26px; height: 26px; }
@media (min-width: 760px) {
  .wzh .wzh-vraag { text-align: center; padding-top: 18px; }
  .wzh .wzh-vraag h1 { font-size: 40px; } .wzh .wzh-sub { font-size: 17px; margin-bottom: 22px; }
  .wzh-raster { grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 14px; }
}
.wzh .wzh-soort { display: flex; flex-direction: column; gap: 10px; }
.wzh .wzh-soort .wz-vraag { margin-top: 4px; }
@media (min-width: 760px) { .wzh .wzh-soort { align-items: center; } .wzh .wzh-soort .mini-raster { width: 100%; } }
/* Tot de app de homepage overneemt: van de gebouwde (oude) homepage alleen het blok 'Voor wie zoek je een cadeau?' laten zien. */
html.wz-bh:not(.lk-gestart) #app > .hero, html.wz-bh:not(.lk-gestart) #app > .binnen > :not([data-tel="voor-wie"]) { display: none; }
/* ===== einde WIJZER ===== */

/* ===== WINKELTOP (11-11-2026, idee Marius): vijf favoriete winkels met elk vijf uitgekozen cadeaus ===== */
.wtop-raster { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
@media (min-width: 900px) { .wtop-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.wtop-kaart { background: #FFFCF7; border: 1px solid #E5D7BE; border-radius: 18px; padding: 16px; box-shadow: 0 6px 18px rgba(10, 16, 32, .06); min-width: 0; }
.wtop-kaart h3 { font-family: 'Playfair Display', serif; font-size: 1.3rem; line-height: 1.2; margin: 0 0 2px; color: #141A2A; }
.wtop-kaart p { margin: 0 0 12px; color: #141A2A; font-size: 1rem; line-height: 1.45; }
.wtop-rij { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.wtop-prod { display: block; min-width: 0; text-decoration: none; color: #141A2A; }
.wtop-prod img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 12px; border: 1px solid #E5D7BE; background: #FFFFFF; }
.wtop-prod > span { display: block; margin-top: 4px; font-family: Manrope, sans-serif; font-weight: 700; font-size: .8rem; text-align: center; white-space: nowrap; }
.wtop-meer { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; margin-top: 12px; padding: 6px 10px; border: 1px solid #E5D7BE; border-radius: 14px; background: #FFFFFF; color: #141A2A; font-family: Manrope, sans-serif; font-weight: 700; font-size: 1rem; text-align: center; text-decoration: none; }
.wtop-meer svg { width: 18px; height: 18px; flex: none; }
/* ===== einde WINKELTOP ===== */

/* ===== VONK strakker (11-11-2026, Marius: 'kan dit ook netter en strakker'): elk voorstel is één nette kaart met de reden en de twee knoppen erin; alles in een rij is even hoog ===== */
.vonk-zes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 760px) { .vonk-zes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .vonk-zes { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.vonk-keus, html.nova6 body.nova6-vonk .vonk-keus { min-width: 0; background: #FFFCF7; border: 1px solid #E5D7BE; border-radius: 18px; box-shadow: 0 5px 18px rgba(20, 26, 42, .065); overflow: hidden; }
.vonk-keus .prodkaart, html.nova6 body.nova6-vonk .vonk-keus .prodkaart, html.nova3 .vonk-keus .prodkaart, html.nova9 .vonk-keus .prodkaart { border: 0; box-shadow: none; border-radius: 0; background: transparent; }
.vonk-keus .vonk-waarom, html.nova6 body.nova6-vonk .vonk-keus .vonk-waarom { margin: 0 12px; padding-top: 10px; border-top: 1px solid #E5D7BE; font-size: 14px; line-height: 1.35; min-height: calc(2.7em + 10px); }
.vonk-keus .vonk-waarom span { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; }
.vonk-keus .vonk-keus-acties { margin: 8px 10px 12px; gap: 8px; }
.vonk-keus .vonk-mini { box-sizing: border-box; display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 6px; white-space: nowrap; font-size: 13px; background: #FFFFFF; }
@media (max-width: 359px) { .vonk-keus .vonk-keus-acties { flex-direction: column; } } /* heel smalle telefoon: de twee knoppen onder elkaar, anders valt 'Goedkoper' buiten de kaart */
/* ===== einde VONK strakker ===== */

/* ===== SOORTEN (12-11-2026, Marius: 'een makkelijk kies systeem waar je ieder product naar soort kan kiezen; onderscheid tussen cadeaus en producten zoeken') ===== */
.srt-wisselblok { margin: 0 0 16px; }
.srt-kies { margin: 0 0 8px; font-family: Manrope, sans-serif; font-weight: 800; font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; color: #8F6620; }
.srt-wissel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; }
.srt-wissel a { position: relative; display: flex; align-items: center; justify-content: flex-start; gap: 8px; min-height: 66px; padding: 8px 9px; border-radius: 18px; background: #FFFFFF; border: 2px solid #B8862E; box-shadow: 0 4px 12px rgba(10, 16, 32, .10); font-family: Manrope, sans-serif; color: #141A2A; text-decoration: none; text-align: left; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
.srt-wissel a img { width: 40px; height: 40px; border-radius: 50%; flex: none; }
.srt-wissel .srt-w-t { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.15; }
.srt-wissel .srt-w-t small { font-size: 12px; font-weight: 600; color: #5A6072; white-space: nowrap; }
.srt-wissel .srt-w-t b { font-size: 18px; font-weight: 800; }
.srt-wissel .srt-w-p { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: #F2CB74; color: #0A1020; font-weight: 800; font-size: 15px; line-height: 1; }
.srt-wissel a.aan { background: #0A1020; border-color: #F2CB74; color: #FFFFFF; box-shadow: 0 6px 16px rgba(10, 16, 32, .22); }
.srt-wissel a.aan .srt-w-t small { color: #E5D7BE; }
@media (hover: hover) { .srt-wissel a:not(.aan):hover { background: #FFFCF7; border-color: #8F6620; } }
@media (max-width: 374px) { .srt-wissel a { gap: 6px; padding: 8px 7px; } .srt-wissel a img { width: 34px; height: 34px; } .srt-wissel .srt-w-t small { font-size: 11.5px; } .srt-wissel .srt-w-t b { font-size: 17px; } }
@media (max-width: 339px) { .srt-wissel .srt-w-p { display: none; } .srt-wissel .srt-w-t b { font-size: 16px; } }
.wzh .srt-wisselblok { max-width: 560px; margin-left: auto; margin-right: auto; }
.soorten .srt-boven { max-width: 860px; margin-left: auto; margin-right: auto; }
.srt-zoek { display: flex; align-items: center; gap: 10px; min-height: 54px; padding: 0 14px; background: #FFFFFF; border: 1.5px solid #B8862E; border-radius: 16px; box-shadow: 0 5px 16px rgba(10, 16, 32, .06); }
.srt-zoek svg { width: 22px; height: 22px; flex: none; color: #8F6620; }
.srt-zoek input { flex: 1; min-width: 0; min-height: 50px; border: 0; outline: 0; background: transparent; font-family: Manrope, sans-serif; font-size: 16px; color: #141A2A; -webkit-appearance: none; appearance: none; }
.srt-label { margin: 18px 0 8px; font-family: Manrope, sans-serif; font-weight: 800; font-size: 13px; letter-spacing: .07em; text-transform: uppercase; color: #8F6620; }
.srt-vaakraster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 760px) { .srt-vaakraster { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; } }
.srt-vt { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; min-height: 138px; padding: 12px 4px 10px; background: #FFFFFF; border: 1px solid #E5D7BE; border-radius: 18px; box-shadow: 0 3px 10px rgba(20, 26, 42, .05); text-decoration: none; text-align: center; color: #141A2A; font-family: Manrope, sans-serif; font-weight: 700; font-size: 14.5px; line-height: 1.2; hyphens: manual; -webkit-hyphens: manual; }
.srt-vt:hover { border-color: #B8862E; }
.srt-vt > span:last-child { min-width: 0; max-width: 100%; overflow-wrap: break-word; hyphens: manual; -webkit-hyphens: manual; }
.srt-vt, .srt-st { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
.srt-vt-rond { width: 88px; height: 88px; flex: none; border-radius: 50%; overflow: hidden; background: #0A1020; box-shadow: 0 6px 14px rgba(10, 16, 32, .18); display: grid; place-items: center; }
.srt-vt-rond img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.04); }
.srt-vt-rond.srt-vt-ico { color: #F2CB74; }
.srt-vt-rond svg { width: 26px; height: 26px; }
@media (max-width: 359px) { .srt-vt { font-size: 13px; } .srt-vt-rond { width: 72px; height: 72px; } }
.srt-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
@media (min-width: 560px) { .srt-raster { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; } }
@media (min-width: 900px) { .srt-raster { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.srt-st { display: flex; flex-direction: column; align-items: center; gap: 7px; min-width: 0; min-height: 112px; padding: 12px 8px 10px; background: #FFFFFF; border: 1px solid #E5D7BE; border-radius: 16px; text-decoration: none; text-align: center; color: #141A2A; font-family: Manrope, sans-serif; font-weight: 700; font-size: 14px; line-height: 1.22; }
.srt-st:hover { border-color: #B8862E; }
.srt-st-rond { width: 60px; height: 60px; flex: none; border-radius: 50%; overflow: hidden; border: 1.5px solid #D6B56A; background: #FFFFFF; display: grid; place-items: center; }
.srt-st-rond img { width: 100%; height: 100%; object-fit: cover; display: block; }
.srt-st-rond.srt-vt-ico { background: #0A1020; color: #F2CB74; }
.srt-st-naam { min-width: 0; max-width: 100%; hyphens: manual; -webkit-hyphens: manual; }
@media (max-width: 759px) { .srt-in { padding-left: 10px; padding-right: 10px; } }
.srt-alles { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 48px; padding: 6px 14px; border: 1px solid #E5D7BE; border-radius: 16px; background: #F7F3EC; color: #141A2A; font-family: Manrope, sans-serif; font-weight: 700; font-size: 15px; text-decoration: none; }
.srt-alles small { font-weight: 600; font-size: 13px; color: #5B6272; }
.srt-alles svg { width: 18px; height: 18px; flex: none; color: #8F6620; }
.srt-leeg { margin: 16px 0 0; font-size: 16px; }
.srt-lijst { max-width: 860px; margin: 0 auto; display: grid; gap: 10px; }
.srt-blok { background: #FFFCF7; border: 1px solid #E5D7BE; border-radius: 18px; box-shadow: 0 5px 16px rgba(10, 16, 32, .05); min-width: 0; }
.srt-blok > summary { display: flex; align-items: center; gap: 12px; min-height: 68px; padding: 8px 14px; cursor: pointer; list-style: none; }
.srt-blok > summary::-webkit-details-marker { display: none; }
.srt-blok > summary img { width: 48px; height: 48px; flex: none; border-radius: 50%; object-fit: cover; border: 1px solid #E5D7BE; background: #FFFFFF; }
.srt-kop { flex: 1; min-width: 0; }
.srt-kop h2 { margin: 0; font-family: 'Playfair Display', serif; font-size: 1.2rem; line-height: 1.2; color: #141A2A; }
.srt-kop small { display: block; margin-top: 2px; font-size: 13px; line-height: 1.3; color: #5B6272; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.srt-pijl { flex: none; display: flex; color: #8F6620; transform: rotate(90deg); transition: transform .15s; }
.srt-pijl svg { width: 20px; height: 20px; }
.srt-blok[open] .srt-pijl { transform: rotate(-90deg); }
.srt-blok[open] .srt-kop small { display: none; }
.srt-in { padding: 2px 14px 14px; border-top: 1px solid #E5D7BE; }
.srt-groep { padding-top: 16px; }
.srt-groepnaam { margin: 0; font-family: Manrope, sans-serif; font-weight: 800; font-size: 16px; line-height: 1.3; color: #141A2A; }
.srt-cadeau { max-width: 860px; margin-left: auto; margin-right: auto; }
.soorten [hidden] { display: none !important; }
#srt-horloges .srt-groepnaam { display: none; }
.srt-lijst { margin-top: 4px; }
.srt-boven .srt-vaak[hidden] + .srt-leeg { margin-top: 16px; }
.hero-knoppen.srt-hero .knop, .hero.hero-2026 .hero-knoppen.srt-hero .knop { white-space: normal; text-align: center; line-height: 1.15; padding: 6px 10px; font-size: 14.5px; gap: 6px; }
@media (max-width: 479px) { .hero-knoppen.srt-hero .knop svg { display: none; } }
/* De gebouwde pagina heeft alle afdelingen open (goed voor de computer en voor Google). Op de telefoon blijven ze dicht tot de app de pagina zelf tekent, zodat er niets verspringt. */
@media (max-width: 899px) {
  html:not(.lk-gestart) .srt-blok > .srt-in { display: none; }
  html:not(.lk-gestart) .srt-blok[open] .srt-kop small { display: block; }
  html:not(.lk-gestart) .srt-blok[open] .srt-pijl { transform: rotate(90deg); }
}
/* ===== einde SOORTEN ===== */

/* KOOPKNOP (live 12-11-2026, GO Marius): knop 'Bekijk bij <winkel>' onderaan de productkaart, direct naar de winkel. Code: koopKnop() in gedeeld.js. */
.prodkaart .kaart-voet { margin-top: auto; padding-top: 12px; }
.prodkaart .kaart-koop { display: flex; align-items: center; justify-content: center; gap: 4px; min-height: 44px; padding: 7px 10px;
  border-radius: 999px; background: linear-gradient(180deg, #F2CB74 0%, #D9A848 100%); border: 1px solid #B8862E; color: #141A2A;
  font: 700 13.5px/1.2 Manrope, system-ui, sans-serif; letter-spacing: -.1px; text-decoration: none; text-align: center; text-wrap: balance;
  box-shadow: 0 3px 10px rgba(184,134,46,.22); position: relative; z-index: 2; }
.prodkaart .info:has(.kaart-koop) { flex: 1 1 auto; }
.prodkaart .kaart-koop svg { width: 14px; height: 14px; flex: none; }
@media (min-width: 760px) { .prodkaart .kaart-koop { font-size: 14px; padding: 8px 14px; } }
.prodkaart .kaart-koop:hover { filter: brightness(1.04); }
.prodkaart .kaart-koop:focus-visible { outline: 3px solid #0A1020; outline-offset: 2px; }

/* 12-11-2026: vijf bedragen (Tot €10 erbij). Op heel smalle telefoons (onder 350px) in twee rijen, zodat €50-100 niet uit zijn knop steekt. */
@media (max-width: 350px) { .wijzer .wz-bedrag { flex-wrap: wrap; } .wijzer .wz-bedrag .chip { flex: 1 1 28%; } }