.winkel.terra.shop-page.hv-pil:is(.hv-pil, #vorm) {
--hv-rond: 999px;
--hv-knop: 50px;
--hv-knop-klein: 40px;
--hv-veld: 48px;
--hv-veld-rand: var(--h-lijn2, color-mix(in srgb, var(--ink) 22%, var(--bg, #fff)));
}
.winkel.terra.shop-page.hv-pil:is(.hv-pil, #vorm) .hv-chip {
display: inline-flex;
align-items: center;
gap: 6px;
min-height: 36px;
padding: 0 14px;
box-sizing: border-box;
border: 1.5px solid var(--hv-veld-rand);
border-radius: 999px;
background: #fff;
color: var(--ink);
font: inherit;
font-size: 14px;
line-height: 18px;
font-weight: 500;
cursor: pointer;
}
.winkel.terra.shop-page.hv-pil:is(.hv-pil, #vorm) .hv-chip:hover { border-color: var(--winkel-accent); }
.winkel.terra.shop-page.hv-pil:is(.hv-pil, #vorm) .hv-chip.is-aan { border-color: var(--winkel-accent); background: var(--winkel-accent); color: var(--winkel-accent-ink, #fff); }
.winkel.terra.shop-page.hv-pil:is(.hv-pil, #vorm) .hv-chip small { font-size: 13px; color: var(--h-inkt3, color-mix(in srgb, var(--ink) 64%, var(--bg, #fff))); }
.winkel.terra.shop-page.hv-pil:is(.hv-pil, #vorm) .hv-chip.is-aan small { color: inherit; }
.winkel.terra.shop-page.hv-pil:is(.hv-pil, #vorm) {
--hv-pijl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m13 6 6 6-6 6'/%3E%3C/svg%3E");
--hv-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
}
.winkel.terra.shop-page.hv-pil:is(.hv-pil, #vorm) :is(.btn-primary, .btn-secondary, .site-knop, .site-knop-licht, .site-banner-knop, .site-banner-knop2, .site-prijskaartje-knop, .site-reken-regel-knop, .pdp-koop, .pdp-vtabel-voet button[type="submit"], .hc-knop, .hc-tipknop, .afr-knop, .hlp-knop, .hlp-knop-rand, .hlw-codevorm button, .site-formulier-in button[type="submit"], .h-catknoppen > a, .shop-menu-paneelknop, .shop-paneel-knop, .h-kaart-label, .hc-rh-label, .site-keuzeknop span, .h-lade-knoppen .site-knop, .wagen-paneel-knop, .site-kaartregels-knop, .site-kaartregels-inktknop, #hv-knop) {
border-radius: 999px;
}
.winkel.terra.shop-page.hv-pil:is(.hv-pil, #vorm) :is(.site-koopkop-knoppen .site-knop, .site-tekstfoto .site-knop, .h-tf-knoppen .site-knop, .site-banner-knop, .site-banner-knop2, .site-formulier-in button[type="submit"], .site-fotoverhaal .site-knop, .site-tekst .site-knop, .rkb .site-knop, .offerte-versturen .pdp-koop, .hlw-leeg > .btn-primary, #hv-knop) {
height: 50px;
min-height: 50px;
padding: 0 26px;
font-size: 16px;
line-height: 20px;
font-weight: 600;
}
.winkel.terra.shop-page.hv-pil:is(.hv-pil, #vorm) :is(.site-prijskaartje-knop, .site-vraag-kop .site-knop, .site-vraag-kop .site-knop-licht, .site-cta-in .site-knop, #hv-knop-klein) {
height: 40px;
min-height: 40px;
padding: 0 18px;
font-size: 15px;
line-height: 20px;
font-weight: 600;
}
.winkel.terra.shop-page.hv-pil:is(.hv-pil, #vorm) :is(.site-knop-licht, .btn-secondary, .hlp-knop-rand, .site-kaartregels-knop) {
border: 1.5px solid var(--winkel-accent);
background: var(--card, #fff);
color: var(--winkel-accent);
box-shadow: none;
}
.winkel.terra.shop-page.hv-pil:is(.hv-pil, #vorm) :is(.site-knop-licht, .btn-secondary, .hlp-knop-rand, .site-kaartregels-knop):hover { background: color-mix(in srgb, var(--winkel-accent) 10%, #fff); color: var(--winkel-accent); }
.winkel.terra.shop-page.hv-pil:is(.hv-pil, #vorm) :is(.opm-vlak-donker, .site-banner-vak, .site-koopkop.met-foto) :is(.site-knop-licht, .btn-secondary, .site-banner-knop2) {
border: 1.5px solid rgba(255, 255, 255, .55);
background: transparent;
color: #fff;
}
.winkel.terra.shop-page.hv-pil:is(.hv-pil, #vorm) :is(.opm-vlak-donker, .site-banner-vak, .site-koopkop.met-foto) :is(.site-knop-licht, .btn-secondary, .site-banner-knop2):hover { background: rgba(255, 255, 255, .1); color: #fff; }
.winkel.terra.shop-page.hv-pil:is(.hv-pil, #vorm) .site-blok.opm-vlak-grijs > section.site-cta .site-knop { border: 1.5px solid var(--winkel-accent); background: var(--card, #fff); color: var(--winkel-accent); }
.winkel.terra.shop-page.hv-pil:is(.hv-pil, #vorm) .site-blok.opm-vlak-grijs > section.site-cta .site-knop:hover { background: color-mix(in srgb, var(--winkel-accent) 10%, #fff); }
.winkel.terra.shop-page.hv-pil:is(.hv-pil, #vorm) :is(.site-inhoud-kopknop, .site-rijknop) {
display: inline-flex;
align-items: center;
gap: 8px;
height: auto;
padding: 0;
border: 0;
border-radius: 0;
background: none;
color: var(--winkel-accent);
font-size: 15px;
line-height: 20px;
font-weight: 600;
text-decoration: none;
}
.winkel.terra.shop-page.hv-pil:is(.hv-pil, #vorm) :is(.site-inhoud-kopknop, .site-rijknop):hover { background: none; color: color-mix(in srgb, var(--winkel-accent) 78%, #000); }
.winkel.terra.shop-page.hv-pil:is(.hv-pil, #vorm) :is(.site-inhoud-kopknop, .site-rijknop)::after {
content: "";
flex: 0 0 16px;
width: 16px;
height: 16px;
margin: 0;
border: 0;
transform: none;
background: currentColor;
-webkit-mask: var(--hv-pijl) center / 16px no-repeat;
mask: var(--hv-pijl) center / 16px no-repeat;
}
.winkel.terra.shop-page.hv-pil:is(.hv-pil, #vorm) .site-inhoud-pijllink { flex-direction: row-reverse; justify-content: flex-end; gap: 8px; font-size: 15px; line-height: 20px; }
.winkel.terra.shop-page.hv-pil:is(.hv-pil, #vorm) .site-inhoud-pijllink svg { width: 16px; height: 16px; }
.winkel.terra.shop-page.hv-pil:is(.hv-pil, #vorm) .site-vraag-regel summary { min-height: 64px; padding: 12px 0; gap: 16px; font-size: 17px; line-height: 24px; font-weight: 600; box-sizing: border-box; }
.winkel.terra.shop-page.hv-pil:is(.hv-pil, #vorm) .site-vraag .site-vraag-regel summary::after {
content: "";
flex: 0 0 20px;
width: 20px;
height: 20px;
margin: 0;
border: 0;
background: var(--winkel-accent);
-webkit-mask: var(--hv-plus) center / 20px no-repeat;
mask: var(--hv-plus) center / 20px no-repeat;
transform: none;
transition: transform .15s;
}
.winkel.terra.shop-page.hv-pil:is(.hv-pil, #vorm) .site-vraag .site-vraag-regel[open] summary::after { transform: rotate(45deg); }
.winkel.terra.shop-page.hv-pil:is(.hv-pil, #vorm) .site-vraag-antwoord { padding: 0 40px 20px 0; max-width: none; }
.winkel.terra.shop-page.hv-pil:is(.hv-pil, #vorm) :is(.site-formulier-in :is(input:not([type="checkbox"], [type="radio"], [type="hidden"], [type="file"]), select, textarea), .hl-afr .afr-veld :is(input, select), .hlw-codevorm input, .site-reken-veld input, .shop-lijstbalk .shop-select, #hv-veld) {
border-radius: var(--hoek-klein, 12px);
}
.winkel.terra.shop-page.hv-pil:is(.hv-pil, #vorm) :is(.h-stapper, .hc-teller, .pdp-teller, .pdp-koopregel .pdp-teller, #hv-stapper) { border-radius: 999px; }
@media (min-width: 1024px) {
.winkel.terra.shop-page.hv-pil:is(.hv-pil, #vorm) .shop-header .shop-zoek {
height: 50px;
padding: 0 4.5px 0 18px;
border: 1.5px solid var(--hv-veld-rand);
border-radius: 999px;
background: var(--card, #fff);
box-shadow: none;
}
.winkel.terra.shop-page.hv-pil:is(.hv-pil, #vorm) .shop-header .shop-zoek:focus-within { border-color: var(--winkel-accent); background: var(--card, #fff); box-shadow: none; }
.winkel.terra.shop-page.hv-pil:is(.hv-pil, #vorm) .shop-header .shop-zoek .shop-zoek-knopje {
display: inline-grid;
place-items: center;
flex: 0 0 38px;
width: 38px;
height: 38px;
margin: 0;
padding: 0;
border: 0;
border-radius: 50%;
background: var(--winkel-accent);
color: var(--winkel-accent-ink, #fff);
position: relative;
inset: auto;
transform: none;
overflow: hidden;
text-indent: -9999px;
cursor: pointer;
}
.winkel.terra.shop-page.hv-pil:is(.hv-pil, #vorm) .shop-header .shop-zoek .shop-zoek-knopje svg { display: none; }
.winkel.terra.shop-page.hv-pil:is(.hv-pil, #vorm) .shop-header .shop-zoek .shop-zoek-knopje::before {
content: "";
position: absolute;
inset: 0;
margin: auto;
width: 18px;
height: 18px;
background: currentColor;
-webkit-mask: var(--hv-pijl) center / 18px no-repeat;
mask: var(--hv-pijl) center / 18px no-repeat;
}
.winkel.terra.shop-page.hv-pil:is(.hv-pil, #vorm) .shop-menu-in { gap: 6px; }
.winkel.terra.shop-page.hv-pil:is(.hv-pil, #vorm) .shop-menu-paneelknop { gap: 10px; height: 40px; margin: 0 10px 0 0; padding: 0 18px; border-radius: 999px; font-size: 15px; line-height: 20px; font-weight: 600; }
.winkel.terra.shop-page.hv-pil:is(.hv-pil, #vorm) .shop-menu-item > .shop-menu-kop { display: inline-flex; align-items: center; height: 40px; padding: 0 10px; border-bottom: 0; border-radius: 999px; font-size: 15px; line-height: 20px; font-weight: 500; box-shadow: none; }
.winkel.terra.shop-page.hv-pil:is(.hv-pil, #vorm) .shop-menu-item > .shop-menu-kop:is(:hover, .is-hier, [aria-current="page"]),
.winkel.terra.shop-page.hv-pil:is(.hv-pil, #vorm) .shop-menu-item:is(.hier, .h-hier) > .shop-menu-kop { background: var(--h-vlak2, color-mix(in srgb, var(--ink) 7%, var(--wash2, #eef2f3))); color: var(--ink); box-shadow: none; }
.winkel.terra.shop-page.hv-pil:is(.hv-pil, #vorm) .shop-menu-item:not(.h-menu-rechts) > a.shop-menu-kop.is-hier { color: var(--ink) !important; }
.winkel.terra.shop-page.hv-pil:is(.hv-pil, #vorm) .shop-menu-item > .shop-menu-kop.h-boven:not(:hover) { background: none; }
.winkel.terra.shop-page.hv-pil:is(.hv-pil, #vorm) .h-menu-rechts > .shop-menu-kop:is(.is-hier, [aria-current="page"]) { color: var(--winkel-accent); }
.winkel.terra.shop-page.hv-pil:is(.hv-pil, #vorm) .shop-menu-rechts { gap: 4px; }
}
.winkel.terra.shop-page.hv-pil:is(.hv-pil, #vorm) .site-rijvoet .site-rijvoet-knop { height: var(--hv-knop-klein); min-height: var(--hv-knop-klein); padding: 0 18px; font-size: 15px; line-height: 20px; font-weight: 600; }