/* Snowboots-eigen afwijkingen op het Atelier-designsysteem. Geladen na dk-extra.css.
   dk-components/theme/extra + dk-ui.js blijven byte-identiek aan douchekraan; alles wat
   alleen deze site rendert hoort hier (zelfde opzet als sk-assets/dk-site.css). */

/* Keuzehulp-ingang in de hero (snowboots, 7 sept 2026). Alleen actief waar de
   hero een .dk-hero__hulp-regel heeft. */
.dk-hero__hulp{margin:14px 0 0;font-size:var(--fs-body);color:var(--c-text-2)}
.dk-hero__hulp .dk-link{white-space:nowrap}

/* Kleurfilter: een bolletje in plaats van een vinkvakje (snowboots, 7 sept 2026).
   De kleur zelf komt als inline background mee uit dk_kleur_hex(); hier staat
   alleen de vorm. De rand is nodig omdat Wit en Beige anders wegvallen tegen
   het paneel. Werkt alleen waar een site .dk-check__box--kleur rendert. */
.dk .dk-check__box--kleur{border-radius:50%;border:1px solid rgba(17,24,28,.22);box-shadow:inset 0 1px 2px rgba(17,24,28,.12)}
/* Actief: het gewone vakje vult zich met ink en zet er een vinkje in, en dat
   zou juist de kleur overschilderen. Daarom hier een ring eromheen. */
.dk .dk-check.is-active .dk-check__box--kleur{border-color:var(--c-ink);box-shadow:0 0 0 2px #fff,0 0 0 3.5px var(--c-ink)}
.dk .dk-check.is-active .dk-check__box--kleur::before{content:none}

/* "Snel kiezen" onder de intro van de doelgroeparchieven (dk_snel_kiezen, 10 sept 2026).
   De chips zelf zijn het gewone .dk-chip; op mobiel geeft dk-extra ze al 44 px hoogte. */
.dk-snelkiezen{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:16px}
.dk-snelkiezen__label{font-size:13px;font-weight:600;color:var(--c-text-2);margin-right:2px}
/* Op mobiel één regel die zelf horizontaal scrolt: vier rijen chips van 44 px duwden de producten
   150 px omlaag. Het element scrolt zelf, de pagina niet. */
@media (max-width: 767px){
  .dk-snelkiezen{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding-bottom:2px}
  .dk-snelkiezen::-webkit-scrollbar{display:none}
  .dk-snelkiezen > *{flex:0 0 auto}
}

/* 2026-09-11 hero-gradient (Theo: "wat meer diepte"). Linksboven lichter dan het oude vlakke paneel, rechtsonder
   donkerder met een zweem van het accentblauw, achter de foto. De tekst staat links, dus daar blijft de achtergrond
   gelijk aan of lichter dan --c-panel (stop op 65%): --c-meta op de trustregel 4,64:1, was 4,62 op het vlakke paneel.
   Onder 1024 px staat alles onder elkaar; dan een verticale gradient die pas onder de tekst donkerder wordt. */
.dk-panel.dk-panel--hero {
  background:
    radial-gradient(55% 75% at 100% 100%, rgba(14, 84, 136, .16) 0%, rgba(14, 84, 136, 0) 70%),
    radial-gradient(45% 60% at 0% 0%, rgba(255, 255, 255, .6) 0%, rgba(255, 255, 255, 0) 70%),
    linear-gradient(135deg, var(--c-panel-light) 0%, var(--c-panel) 65%, var(--c-panel-dark) 100%);
}
@media (max-width: 1023px) {
  .dk-panel.dk-panel--hero {
    background:
      radial-gradient(90% 40% at 100% 100%, rgba(14, 84, 136, .14) 0%, rgba(14, 84, 136, 0) 70%),
      linear-gradient(180deg, var(--c-panel-light) 0%, var(--c-panel) 55%, var(--c-panel-dark) 100%);
  }
}