/* assets/dp-staffel.css — producttype-knoppen en label "Tot X% staffelkorting" op /acties/staffelkorting/ (28 okt 2026).
   Hoort bij snippets/dp-staffel.rain en assets/dp-staffel.js. */
#dpst { margin: 0 0 16px; }
#dpst[hidden] { display: none; }
#dpst .dpst__kop { display: block; margin: 0 0 8px; font-size: 13px; font-weight: 700; color: #29384B; }
#dpst .dpst__knoppen { display: flex; flex-wrap: wrap; gap: 8px; }
#dpst a.dpst__knop { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 16px; border: 1px solid #D3D9E0; border-radius: 999px; background: #FFFFFF; color: #29384B; font-size: 14px; font-weight: 700; text-decoration: none; }
#dpst a.dpst__knop span { font-size: 12px; font-weight: 600; color: #898D93; }
#dpst a.dpst__knop:hover { border-color: #29384B; }
#dpst a.dpst__knop.is-aan { background: #29384B; border-color: #29384B; color: #FFFFFF; }
#dpst a.dpst__knop.is-aan span { color: #D9DEE5; }
#dpst a.dpst__knop:focus-visible { outline: 2px solid #29384B; outline-offset: 2px; }
.dp-lb[hidden] { display: none !important; }
.dp-lb__labelrij { flex-wrap: wrap; gap: 4px; }
.dpst-label { display: inline-block; padding: 3px 6px; border-radius: 3px; background: #EEF6EC; color: #2F7A28; font-size: 11px; font-weight: 800; line-height: 1.25; }
@media (max-width: 767.98px) {
  #dpst .dpst__knoppen { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -15px; padding: 0 15px 2px; }
  #dpst .dpst__knoppen::-webkit-scrollbar { display: none; }
  #dpst a.dpst__knop { flex: none; }
}
/* op deze pagina geen snelfilters (Binnen, Buiten, …) en geen andere labels, alleen "Tot X% staffelkorting" (wens Mark 28 okt 2026) */
.dp-lb-balk__snel { display: none !important; }
.products-wrap .dp-lb__label, .products-wrap .dp-lb__label-img { display: none !important; }