/* assets/dp-kleurproducten.css — blok "Veel besteld in <kleur>" / "Veel besteld bij <waaier>" (snippets/dp-kleurproducten.rain,
   assets/dp-kleurproducten.js), 3 nov 2026. Kaarten: assets/lijst-b.css. Plan: plannen/kleurproducten-plan.md */
.dpkpr[hidden] { display: none; }
.dpkpr { scroll-margin-top: 90px; }
.dpkpr--waaier { margin-top: 56px; }
.dpkpr .dpkpr__titel { margin: 0 0 6px; color: #29384B; font-weight: 800; }
.dpkpr .dpkpr__sub { margin: 0 0 16px; color: #666666; font-size: 14px; line-height: 1.5; }

/* tabs per soort verf */
.dpkpr__tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.dpkpr__tabs:empty { display: none; }
.dpkpr .dpkpr__tab {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 9px 16px; box-sizing: border-box;
  border: 1px solid #ECECEC; border-radius: 999px; background: #FFFFFF; color: #29384B;
  font-family: inherit; font-size: 14px; font-weight: 600; line-height: 1.2; white-space: nowrap; cursor: pointer;
}
.dpkpr .dpkpr__tab span { color: #898D93; font-weight: 500; }
.dpkpr .dpkpr__tab:hover { border-color: #8D8D8D; }
.dpkpr .dpkpr__tab[aria-selected="true"] { border-color: #29384B; background: #29384B; color: #FFFFFF; }
.dpkpr .dpkpr__tab[aria-selected="true"] span { color: #C9D0D8; }
.dpkpr .dpkpr__tab:focus-visible { outline: 2px solid #70C067; outline-offset: 2px; }

/* kaarten: strook (mobiel scrollen), vanaf 992px 4 naast elkaar (lijst-b.css .dp-lb-rail--raster) met lijnen ertussen */
.dpkpr__strook { position: relative; }
.dpkpr .dp-lb-rail { margin: 0; padding: 0; border-top: 1px solid #E1E5EA; border-bottom: 1px solid #E1E5EA; }
.dpkpr .dp-lb-rail > .dp-lb { padding: 0; box-shadow: -1px 0 0 0 #E1E5EA; }
.dpkpr .dp-lb-rail > .dp-lb:first-child { box-shadow: none; }
.dpkpr .dp-lb__kaart { border: 0; border-radius: 0; padding: 14px 18px; }
.dpkpr .dp-lb__kaart:hover { box-shadow: none; }
.dpkpr .dp-lb__foto { background: #FFFFFF; }
@media (min-width: 992px) {
  .dpkpr .dp-lb-rail.dp-lb-rail--raster { overflow: hidden; row-gap: 0; }
  .dpkpr .dp-lb-rail--raster > .dp-lb.dp-lb { box-shadow: -1px 0 0 0 #E1E5EA, 0 -1px 0 0 #E1E5EA; }
}
@media (max-width: 991.98px) {
  .dpkpr--waaier { margin-top: 40px; }
}
@media (max-width: 575.98px) {
  .dpkpr .dpkpr__tabs { flex-wrap: nowrap; overflow-x: auto; margin-left: -15px; margin-right: -15px; padding: 0 15px 2px; scrollbar-width: none; }
  .dpkpr .dpkpr__tabs::-webkit-scrollbar { display: none; }
  .dpkpr .dpkpr__tab { min-height: 36px; padding: 7px 13px; font-size: 13px; }
  .dpkpr .dp-lb-rail { margin: 0 -15px; }
}