.winkel.terra.snelkeuze-tegels:is(.snelkeuze-tegels, #vorm) .duin-snel { display: block; min-width: 0; margin: 20px 0 0; padding: 0; }
@media (max-width: 760px) {
.winkel.terra.snelkeuze-tegels:is(.snelkeuze-tegels, #vorm) .duin-snel { margin: 14px 0 0; }
}
.winkel.terra.snelkeuze-tegels:is(.snelkeuze-tegels, #vorm) .shop-subtegel { min-height: 48px; height: auto; padding: 6px 16px 6px 6px; gap: 10px; border-radius: 10px; }
.winkel.terra.snelkeuze-tegels:is(.snelkeuze-tegels, #vorm) .shop-subtegel .shop-subtegel-beeld { width: 36px; height: 36px; flex: none; border-radius: 8px; overflow: hidden; }
.winkel.terra.snelkeuze-tegels:is(.snelkeuze-tegels, #vorm) .shop-subtegel .shop-subtegel-beeld img { width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; }
.winkel.terra.snelkeuze-tegels:is(.snelkeuze-tegels, #vorm) .shop-subtegel b { font-size: 14px; line-height: 20px; }
.winkel.terra.snelkeuze-tegels:is(.snelkeuze-tegels, #vorm) .shop-subtegels { display: block; min-width: 0; overflow: visible; }
.winkel.terra.snelkeuze-tegels:is(.snelkeuze-tegels, #vorm) .duin-schuifrij { position: relative; min-width: 0; }
.winkel.terra.snelkeuze-tegels:is(.snelkeuze-tegels, #vorm) .duin-schuifrij-in { position: relative; display: flex; flex-wrap: nowrap; gap: 10px; margin: -4px 0; padding: 4px 0; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.winkel.terra.snelkeuze-tegels:is(.snelkeuze-tegels, #vorm) .duin-schuifrij-in::-webkit-scrollbar { display: none; }
.winkel.terra.snelkeuze-tegels:is(.snelkeuze-tegels, #vorm) .duin-schuifrij-in > :is(.shop-subtegel, .duin-snel-tegel) { flex: 0 0 auto; width: auto; max-width: none; margin: 0; white-space: nowrap; }
.winkel.terra.snelkeuze-tegels:is(.snelkeuze-tegels, #vorm) .duin-schuifrij-in > .shop-subtegel b { white-space: nowrap; }
.winkel.terra.snelkeuze-tegels:is(.snelkeuze-tegels, #vorm) .duin-schuifrij::before, .winkel.terra.snelkeuze-tegels:is(.snelkeuze-tegels, #vorm) .duin-schuifrij::after { content: ""; position: absolute; top: 0; bottom: 0; z-index: 1; width: 56px; pointer-events: none; opacity: 0; transition: opacity .15s; }
.winkel.terra.snelkeuze-tegels:is(.snelkeuze-tegels, #vorm) .duin-schuifrij::before { left: 0; background: linear-gradient(90deg, #fff 10%, rgba(255, 255, 255, 0)); }
.winkel.terra.snelkeuze-tegels:is(.snelkeuze-tegels, #vorm) .duin-schuifrij::after { right: 0; background: linear-gradient(270deg, #fff 10%, rgba(255, 255, 255, 0)); }
.winkel.terra.snelkeuze-tegels:is(.snelkeuze-tegels, #vorm) .duin-schuifrij.duin-schuifrij-links::before, .winkel.terra.snelkeuze-tegels:is(.snelkeuze-tegels, #vorm) .duin-schuifrij.duin-schuifrij-rechts::after { opacity: 1; }
.winkel.terra.snelkeuze-tegels:is(.snelkeuze-tegels, #vorm) .duin-schuifrij-pijl { display: none; position: absolute; top: 50%; z-index: 2; box-sizing: border-box; width: 36px; height: 36px; margin-top: -18px; padding: 0; border: 1px solid var(--duin-lijn2, #cfc8bb); border-radius: 50%; background: #fff; color: var(--nova-inkt); box-shadow: 0 2px 8px rgba(26, 35, 29, .14); cursor: pointer; }
.winkel.terra.snelkeuze-tegels:is(.snelkeuze-tegels, #vorm) .duin-schuifrij-pijl:hover { border-color: var(--nova-inkt); }
.winkel.terra.snelkeuze-tegels:is(.snelkeuze-tegels, #vorm) .duin-schuifrij-vorige { left: 4px; }
.winkel.terra.snelkeuze-tegels:is(.snelkeuze-tegels, #vorm) .duin-schuifrij-volgende { right: 4px; }
@media (hover: hover) and (pointer: fine) {
.winkel.terra.snelkeuze-tegels:is(.snelkeuze-tegels, #vorm) .duin-schuifrij-pijl:not([hidden]) { display: flex; align-items: center; justify-content: center; }
}
@media (max-width: 1023px) {
.winkel.terra.snelkeuze-tegels:is(.snelkeuze-tegels, #vorm) .duin-schuifrij { margin: 0 calc(-1 * var(--duin-schuifrand, 16px)); }
.winkel.terra.snelkeuze-tegels:is(.snelkeuze-tegels, #vorm) .duin-schuifrij-in { padding: 4px var(--duin-schuifrand, 16px); scroll-padding-inline: var(--duin-schuifrand, 16px); }
}
@media (min-width: 761px) and (max-width: 1023px) {
.winkel.terra.snelkeuze-tegels:is(.snelkeuze-tegels, #vorm) .duin-schuifrij { --duin-schuifrand: 24px; }
}
@media (max-width: 760px) {
.winkel.terra.snelkeuze-tegels:is(.snelkeuze-tegels, #vorm) .shop-lijstkolom .shop-subtegels { margin-top: 14px; }
}
.winkel.terra.snelkeuze-tegels:is(.snelkeuze-tegels, #vorm) .duin-snel-tegel { display: flex; align-items: center; gap: 10px; box-sizing: border-box; min-height: 48px; padding: 6px 16px 6px 6px; border-radius: 10px; background: var(--duin-zand, var(--nova-vlak)); color: var(--nova-inkt); text-decoration: none; transition: background-color .2s, box-shadow .2s; }
.winkel.terra.snelkeuze-tegels:is(.snelkeuze-tegels, #vorm) .duin-snel-beeld { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 8px; overflow: hidden; background: #fff; color: #5e655f; }
.winkel.terra.snelkeuze-tegels:is(.snelkeuze-tegels, #vorm) .duin-snel-beeld img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.winkel.terra.snelkeuze-tegels:is(.snelkeuze-tegels, #vorm) .duin-snel-tegel b { font-size: 14px; line-height: 20px; font-weight: 650; }
.winkel.terra.snelkeuze-tegels:is(.snelkeuze-tegels, #vorm) .duin-snel-aantal { margin-left: -4px; font-size: 13px; line-height: 20px; font-weight: 500; color: #5e655f; }
.winkel.terra.snelkeuze-tegels:is(.snelkeuze-tegels, #vorm) :is(.duin-snel-tegel, .duin-schuifrij-in > .shop-subtegel):hover { background: #fff; box-shadow: inset 0 0 0 1px #e6e0d6; }
.winkel.terra.snelkeuze-tegels:is(.snelkeuze-tegels, #vorm) .duin-snel-tegel.aan, .winkel.terra.snelkeuze-tegels:is(.snelkeuze-tegels, #vorm) .duin-snel-tegel.aan:hover { background: #fff; box-shadow: inset 0 0 0 2px var(--winkel-accent); }