/* =====================================================================
   DP-KLEUREN — overzichtspagina /kleuren/ (snippets/dp-kleuren.rain), versie 2, 21 okt 2026
   Basis (kop, tegels, knoppen, zekerheid, kleur van het jaar, vragen, inlogvenster): assets/dp-tint.css.
   Hier alleen wat op deze pagina staat: navigatie, zoeklijst, Test je kleur, tinten, hulp, collecties, A-Z, winkel.
   ===================================================================== */

.dpk { padding-bottom: 64px; }

/* koppen van de onderdelen: tekst links, knop rechts (op mobiel de knop onder het onderdeel) */
.dpk .dpk-kop { align-items: flex-end; margin: 0 0 22px; }
.dpk .dpk-kop > div { max-width: 680px; }
.dpk .dpk-kop .dpt-sub { margin: 6px 0 0; }
.dpk .dpk-kop__knop--mobiel { display: none; }

/* ---------- navigatie onder de hoofdbalk ---------- */
/* de JS zet de balk vast (is-vast) zodra hij onder de hoofdbalk komt; de houder houdt dan de plek vrij */
.dpk-nav { position: relative; z-index: 30; background: #FAFAFA; border-top: 1px solid #ECECEC; border-bottom: 1px solid #ECECEC; }
.dpk-nav.is-vast { position: fixed; top: var(--dpk-kop, 80px); left: 0; right: 0; box-shadow: 0 6px 16px rgba(41, 56, 75, .08); }
.dpk-nav__binnen { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.dpk-nav__binnen::-webkit-scrollbar { display: none; }
/* gecentreerd als alles past, anders van links af scrollbaar */
.dpk-nav__binnen > :first-child { margin-left: auto; }
.dpk-nav__binnen > :last-child { margin-right: auto; }
.dpk .dpk-nav__link { position: relative; flex: 0 0 auto; display: flex; align-items: center; height: 48px; padding: 0 12px; color: #29384B; font-size: 14px; font-weight: 600; white-space: nowrap; text-decoration: none; }
.dpk .dpk-nav__link::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: transparent; }
.dpk .dpk-nav__link:hover { color: #29384B; }
.dpk .dpk-nav__link:hover::after { background: #ECECEC; }
.dpk .dpk-nav__link.is-actief::after { background: #70C067; }
.dpk .dpk-nav__link:focus-visible { outline: 2px solid #0099E5; outline-offset: -2px; }
.dpk [data-dpk-sectie] { scroll-margin-top: calc(var(--dpk-kop, 80px) + 60px); }
.dpk .dpk-hero { position: relative; z-index: 31; } /* boven de menubalk, zodat de zoekresultaten eroverheen vallen */

/* ---------- zoeken met lijst ---------- */
.dpk-zoek { position: relative; margin: 0 0 16px; }
.dpk-zoek__form { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }
.dpk-zoek__veld { flex: 999 1 320px; min-width: 0; display: flex; align-items: center; gap: 10px; height: 56px; padding: 0 18px; background: #FFFFFF; border: 1px solid #8D8D8D; border-radius: 12px; box-sizing: border-box; color: #29384B; }
.dpk-zoek__veld:focus-within { border-color: #29384B; box-shadow: 0 0 0 3px rgba(0, 153, 229, .25); }
.dpk-zoek__veld svg { flex: 0 0 auto; }
.dpk .dpk-zoek__veld input { flex: 1 1 auto; min-width: 0; height: 100%; margin: 0; padding: 0; border: 0; outline: 0; background: transparent; box-shadow: none; color: #29384B; font: inherit; font-size: 16px; }
.dpk .dpk-zoek__knop { flex: 1 1 auto; min-height: 56px; border-radius: 12px; }
.dpk-res { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 25; display: flex; flex-direction: column; background: #FFFFFF; border: 1px solid #DFE3E8; border-radius: 12px; box-shadow: 0 16px 40px rgba(41, 56, 75, .16); overflow: hidden; }
.dpk-res__status { margin: 0; padding: 10px 16px; color: #6B7178; font-size: 13px; border-bottom: 1px solid #ECECEC; }
.dpk-res__status:empty { display: none; }
.dpk-res__lijst { max-height: 336px; margin: 0; padding: 4px 0; list-style: none; overflow-y: auto; overscroll-behavior: contain; }
.dpk-res__lijst:empty { display: none; }
.dpk-res__rij { display: flex; align-items: center; margin: 0; }
.dpk-res__rij.is-actief, .dpk-res__rij:hover { background: #F3F8F2; }
.dpk .dpk-res__kleur { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 16px; color: #29384B; text-decoration: none; }
.dpk-res__sw { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1); }
.dpk-res__tekst { min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.dpk-res__tekst strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 700; }
.dpk-res__tekst span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #6B7178; font-size: 12px; }
.dpk .dpk-res__test { flex: 0 0 auto; padding: 8px 16px; color: #2F6B29; font-size: 13px; font-weight: 700; text-decoration: none; }
.dpk .dpk-res__test:hover { text-decoration: underline; }
.dpk-res__voet { padding: 10px 12px; border-top: 1px solid #ECECEC; background: #FAFAFA; }
.dpk .dpk-res__alle { display: inline-flex; align-items: center; gap: 8px; height: 44px; margin: 0; padding: 0 16px 0 12px; background: #FFFFFF; color: #29384B; border: 1px solid #8D8D8D; border-radius: 4px; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; box-shadow: none; }
.dpk .dpk-res__alle img { display: block; width: 24px; height: 24px; object-fit: contain; }
.dpk .dpk-res__alle:hover, .dpk .dpk-res__alle:focus-visible { border-color: #70C067; background: #FFFFFF !important; color: #29384B; }
.dpk .dpk-chips { margin: 0 0 18px; }

/* ---------- test je kleur ---------- */
.dpk-test { margin-top: 32px; }
.dpk-test__binnen { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 32px; padding: 16px 20px; border: 1px solid #E3E7EC; border-radius: 14px; background: #FFFFFF; }
.dpk-test__tekst { flex: 1 1 260px; min-width: 0; }
.dpk .dpk-test__tekst h2 { margin: 0 0 2px; font-size: 20px; }
.dpk-test__tekst p { margin: 0; font-size: 14px; }
.dpk-test__links { flex: 1 1 520px; min-width: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.dpk .dpk-test__link { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 8px 12px 8px 8px; border: 1px solid #ECECEC; border-radius: 12px; color: #29384B; text-decoration: none; transition: border-color .15s; }
.dpk .dpk-test__link:hover { border-color: #70C067; color: #29384B; }
.dpk-test__link img { flex: 0 0 auto; width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
.dpk-test__link > span { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.dpk-test__link strong { font-size: 15px; font-weight: 800; }
.dpk-test__link > span > span { color: #6B7178; font-size: 13px; }
.dpk-test__link svg { flex: 0 0 auto; color: #0099E5; }

/* ---------- kleurtinten ---------- */
.dpk-sec { padding-top: 56px; }
.dpk-test + .dpk-sec { padding-top: 48px; }
.dpk-tinten { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 20px 12px; }
.dpk a.dpk-tint { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; color: #29384B; font-size: 13px; font-weight: 600; line-height: 1.25; text-align: center; text-decoration: none; }
.dpk-tint__bol { display: block; width: 64px; height: 64px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1); transition: transform .15s, box-shadow .15s; }
.dpk a.dpk-tint:hover .dpk-tint__bol { transform: scale(1.06); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1), 0 0 0 3px #FFFFFF, 0 0 0 5px #70C067; }

/* ---------- kleuren van het jaar en populaire kleuren ---------- */
.dpk .dpj-kaart--nieuw .dpj-kleuren { grid-template-columns: minmax(0, 1fr); }
.dpk .dpk-pop { margin: 0; }

/* ---------- thuis proberen ---------- */
.dpk-hulp { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.dpk a.dpk-hulp__tegel { display: flex; flex-direction: column; min-width: 0; border: 1px solid #E3E7EC; border-radius: 14px; overflow: hidden; background: #FFFFFF; color: #29384B; text-decoration: none; transition: border-color .15s; }
.dpk a.dpk-hulp__tegel:hover { border-color: #70C067; }
.dpk-hulp__foto { display: block; width: 100%; height: 150px; object-fit: cover; }
.dpk-hulp__foto--ico { display: flex; align-items: center; justify-content: center; background: #E3F2E1; color: #2F6B29; }
.dpk-hulp__tekst { flex: 1 1 auto; display: flex; flex-direction: column; gap: 6px; padding: 16px; }
.dpk-hulp__tekst strong { font-size: 18px; font-weight: 800; }
.dpk-hulp__tekst > span { color: #666666; font-size: 13px; }
.dpk .dpk-hulp__tekst .dpk-hulp__link { display: flex; align-items: center; gap: 4px; margin-top: auto; padding-top: 6px; color: #0099E5; font-size: 14px; font-weight: 700; }

/* ---------- populaire collecties ---------- */
.dpk-coll { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
.dpk a.dpk-coll__kaart { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 12px; border: 1px solid #E3E7EC; border-radius: 14px; background: #FFFFFF; color: #29384B; text-decoration: none; transition: border-color .15s; }
.dpk a.dpk-coll__kaart:hover { border-color: #70C067; }
.dpk-coll__foto { display: block; height: 140px; }
.dpk-coll__foto img { display: block; width: 100%; height: 100%; object-fit: contain; }
.dpk-coll__naam { padding: 0 4px; font-size: 15px; font-weight: 700; line-height: 1.3; }
.dpk .dpk-coll__aantal { display: block; margin: -8px 0 0; padding: 0 4px 4px; color: #6B7178; font-size: 13px; font-weight: 400; }

/* ---------- A-Z ---------- */
.dpk-az { display: flex; flex-direction: column; gap: 18px; padding: 28px; border: 1px solid #E3E7EC; border-radius: 18px; background: #FFFFFF; box-shadow: 0 10px 30px rgba(41, 56, 75, .06); }
.dpk-az__kop { display: flex; flex-wrap: wrap; gap: 16px 32px; align-items: flex-end; justify-content: space-between; }
.dpk-az__kop > div:first-child { max-width: 560px; }
.dpk-az__kop .dpt-sub { margin: 6px 0 0; }
.dpk-az__zoek { flex: 0 1 380px; min-width: 0; }
.dpk-az__zoek label { display: block; margin: 0 0 6px; color: #29384B; font-size: 13px; font-weight: 600; }
.dpk-zoek__veld--klein { height: 52px; padding: 0 16px; }
.dpk .dpk-letters { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; transition: opacity .15s; }
.dpk .dpk-letters span { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 8px; background: #FAFAFA; color: #29384B; font-weight: 700; cursor: pointer; }
.dpk .dpk-letters span:hover, .dpk .dpk-letters span:focus-visible { background: #29384B; color: #FFFFFF; outline: 0; }
.dpk-az__lijst { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px 32px; }
.dpk-az__lijst.is-ingeklapt { max-height: 520px; overflow: hidden; -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); }
.dpk-groep { min-width: 0; break-inside: avoid; }
.dpk .dpk-groep__letter { display: block; margin: 0 0 6px; padding: 0 0 6px; border-bottom: 1px solid #ECECEC; color: #29384B; font-size: 18px; font-weight: 800; }
.dpk-groep__lijst { display: flex; flex-direction: column; gap: 4px; }
.dpk a.kleur-collectie-tag { display: block; margin: 0; padding: 2px 0; border: 0; border-radius: 0; background: none; color: #0099E5; font-size: 14px; line-height: 1.4; text-decoration: none; }
.dpk a.kleur-collectie-tag:hover { text-decoration: underline; }
.dpk a.kleur-collectie-tag .kleur-aantal { margin-left: 6px; color: #6B7178; font-size: 12px; }
.dpk .dpk-az__meer { align-self: flex-start; }

/* ---------- winkel ---------- */
.dpk-winkel { display: flex; flex-wrap: wrap; align-items: stretch; border-radius: 20px; overflow: hidden; background: #29384B; }
.dpk-winkel img { flex: 1 1 420px; min-width: 0; height: 320px; object-fit: cover; }
.dpk-winkel__tekst { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 16px; padding: 40px; box-sizing: border-box; color: #D5DCE4; }
.dpk .dpk-winkel__tekst h2 { margin: 0; color: #FFFFFF; }
.dpk-winkel__tekst p { margin: 0; }
.dpk-winkel__knoppen { display: flex; flex-wrap: wrap; gap: 10px; }
.dpk a.dpk-winkel__knop { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 24px; border: 1px solid #70C067; border-radius: 10px; background: #70C067; color: #29384B; font-weight: 700; text-decoration: none; }
.dpk a.dpk-winkel__knop--rand { background: transparent; border-color: #FFFFFF; color: #FFFFFF; }
.dpk a.dpk-winkel__knop:hover { background: #FFFFFF; border-color: #FFFFFF; color: #29384B; }

/* ---------- tablet ---------- */
@media (max-width: 1199px) {
  .dpk-coll { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dpk-az__lijst { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 991px) {
  .dpk-tinten { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .dpk-hulp { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- mobiel ---------- */
@media (max-width: 767px) {
  .dpk { padding-bottom: 48px; }
  .dpk .dpk-hero { margin-top: 8px; }
  .dpk-nav__binnen { padding: 0 8px; }
  .dpk .dpk-nav__link { height: 44px; padding: 0 10px; font-size: 13px; }
  .dpk .dpk-nav__link::after { left: 10px; right: 10px; }
  .dpk [data-dpk-sectie] { scroll-margin-top: calc(var(--dpk-kop, 60px) + 52px); }
  .dpk .dpk-kop { margin-bottom: 16px; }
  .dpk .dpk-kop__knop { display: none; }
  .dpk .dpk-kop__knop--mobiel { display: flex; margin-top: 16px; }
  .dpk a.dpt-link.dpk-kop__knop--mobiel { display: inline-flex; }
  .dpk-sec { padding-top: 40px; }
  .dpk-test + .dpk-sec { padding-top: 36px; }
  .dpk-zoek__veld { flex-basis: 100%; height: 52px; padding: 0 14px; }
  .dpk .dpk-zoek__knop { min-height: 50px; }
  .dpk-res { position: static; margin-top: 8px; box-shadow: 0 10px 24px rgba(41, 56, 75, .12); }
  .dpk-res__lijst { max-height: 300px; }
  .dpk .dpk-res__kleur { padding-left: 12px; gap: 10px; }
  .dpk .dpk-res__test { padding: 8px 12px; }
  .dpk .dpk-res__alle { width: 100%; justify-content: center; }
  .dpk-chips { margin-left: -16px; margin-right: -16px; padding-left: 16px; padding-right: 16px; }
  .dpk-test { margin-top: 24px; }
  .dpk-test__binnen { padding: 14px; }
  .dpk .dpk-test__tekst h2 { font-size: 18px; }
  .dpk-test__links { flex-basis: 100%; grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .dpk-test__link img { width: 44px; height: 44px; }
  .dpk-tinten { display: flex; gap: 14px; overflow-x: auto; margin: 0 -16px; padding: 0 16px 6px; scrollbar-width: none; }
  .dpk-tinten::-webkit-scrollbar { display: none; }
  .dpk .dpk-pop > :nth-child(n+9) { display: none; }
  .dpk a.dpk-tint { flex: 0 0 76px; }
  .dpk-tint__bol { width: 52px; height: 52px; }
  .dpk-hulp { gap: 10px; }
  .dpk-hulp__foto { height: 110px; }
  .dpk-hulp__tekst { padding: 12px; }
  .dpk-hulp__tekst strong { font-size: 16px; }
  .dpk-coll { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .dpk-coll__foto { height: 110px; }
  .dpk-az { padding: 16px; }
  .dpk-az__zoek { flex-basis: 100%; }
  .dpk .dpk-letters span { width: 36px; height: 36px; }
  .dpk-az__lijst { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 20px; }
  .dpk .dpk-az__meer { align-self: stretch; }
  .dpk-winkel { border-radius: 18px; }
  .dpk-winkel img { flex-basis: 100%; height: 170px; }
  .dpk-winkel__tekst { flex-basis: 100%; gap: 12px; padding: 20px 16px; font-size: 14px; }
  .dpk a.dpk-winkel__knop { flex: 1 1 100%; min-height: 48px; }
}