.winkel.nova {
--sub: #667085;
--muted: #98A2B3;
}
.winkel.nova { font-size: var(--winkel-grootte, 13.5px); line-height: 1.5; }
.winkel :where(input:not([type=checkbox], [type=radio], [type=hidden], [type=file], [type=range], [type=submit], [type=button], [type=color], [type=image]), select, textarea):not(:where(.teller *)) {
box-sizing: border-box; height: var(--nova-h); padding: 0 calc(var(--nova-raster) * 3);
border: 1px solid var(--nova-lijn); border-radius: var(--nova-r-klein); background: #fff; color: var(--nova-inkt);
font: inherit; font-size: 13.5px; line-height: normal;
}
.winkel :where(textarea):not(:where(.teller *)) { height: auto; min-height: calc(var(--nova-h) * 2.4); padding: calc(var(--nova-raster) * 2.5) calc(var(--nova-raster) * 3); line-height: 1.5; resize: vertical; }
.winkel :where(input, select, textarea):not(:where(.teller *)):focus { outline: 0; border-color: var(--nova-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--nova-accent) 14%, transparent); }
.winkel .teller { display: inline-flex; align-items: stretch; flex: none; height: var(--nova-h); width: calc(var(--nova-h) * var(--nova-teller-b)); box-sizing: border-box;
border: 1px solid var(--nova-lijn); border-radius: var(--nova-r-klein); background: #fff; overflow: hidden; vertical-align: middle; }
.winkel .teller.klein { height: var(--nova-h-klein); width: calc(var(--nova-h-klein) * var(--nova-teller-b)); }
.winkel .teller.groot { height: var(--nova-h-groot); width: calc(var(--nova-h-groot) * var(--nova-teller-b)); }
.winkel .teller button { flex: 0 0 calc(var(--nova-teller-k) / var(--nova-teller-b) * 100%); min-width: 0; height: auto; border: 0; border-radius: 0; background: none; padding: 0; margin: 0;
font: inherit; font-size: 16px; line-height: 1; color: var(--nova-gedempt); cursor: pointer; display: grid; place-items: center; }
.winkel .teller.groot button { font-size: 18px; color: var(--nova-inkt); }
.winkel .teller button:hover { background: var(--nova-vlak); color: var(--nova-inkt); }
.winkel .teller input { flex: 1; min-width: 0; width: 100%; height: 100%; border: 0; border-radius: 0; outline: 0; box-shadow: none; background: none; padding: 0; margin: 0;
text-align: center; font: inherit; font-size: 14.4px; font-weight: 600; color: var(--nova-inkt); -moz-appearance: textfield; appearance: textfield; }
.winkel .teller.klein input { font-size: 13.5px; }
.winkel .teller input::-webkit-outer-spin-button, .winkel .teller input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.winkel .teller:focus-within { border-color: var(--nova-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--nova-accent) 14%, transparent); }
.winkel .teller:has(input:disabled) { opacity: .45; pointer-events: none; }
.winkel {
--nova-lijn: var(--line, #E5E6E5);
--nova-vlak: var(--wash2, #F6F6F6);
--nova-tint: var(--wash, #EEEFED);
--nova-inkt: var(--ink, #333333);
--nova-gedempt: #667085;
--nova-flets: #98A2B3;
--nova-accent: var(--winkel-accent, #45523C);
--nova-accent-op: var(--winkel-accent-ink, #fff);
--nova-groen: #26cb7c;
--nova-ster: #F6B01E;
--nova-ster-leeg: #E4E7EC;
--nova-r-klein: var(--hoek-klein, 6px);
--nova-r-kaart: var(--hoek, 9px);
--nova-r-mini: calc(var(--nova-r-klein) / 2);
--nova-raster: var(--raster, 4px);
--nova-h-klein: var(--h-klein, 36px);
--nova-h: var(--h, 40px);
--nova-h-hoog: var(--h-hoog, 50px);
--nova-h-groot: var(--h-groot, 63px);
--nova-teller-b: var(--teller-b, 2);
--nova-teller-k: var(--teller-k, .55);
--nova-zij: clamp(15px, 9px + 1.2vw, 32px);
--nova-balk-h: clamp(57.6px, 54.58px + 0.8602vw, 64.8px);
--nova-gat: clamp(10.8px, -3.6px + 1.5625vw, 14.4px);
}
.vorm-nova .nova-mid {
width: 100%;
max-width: var(--site-breedte);
margin-inline: auto;
padding-inline: var(--nova-zij);
}
.shop-usp.vorm-nova {
background: #fff;
color: var(--nova-inkt);
border-bottom: 1px solid var(--nova-lijn);
padding: 0;
}
.shop-usp.vorm-nova .nova-mid {
height: 36px;
padding-block: 0;
color: var(--nova-inkt);
flex-wrap: nowrap;
display: flex;
align-items: center;
justify-content: center;
gap: 36px;
overflow: hidden;
font-size: 13px;
line-height: 1;
}
.shop-usp.vorm-nova .usp-punt {
display: flex;
align-items: center;
gap: 7.2px;
white-space: nowrap;
}
.shop-usp.vorm-nova .usp-punt svg { flex: none; color: var(--nova-groen); }
.shop-usp.vorm-nova .usp-sterren svg { color: currentColor; }
.shop-usp.vorm-donker { background: var(--nova-inkt); color: #fff; border-bottom: 0; }
.shop-usp.vorm-donker .nova-mid, .shop-usp.vorm-donker .usp-punt { color: #fff; }
.shop-usp.vorm-donker .usp-punt svg { color: #fff; }
.shop-usp.vorm-donker .usp-punt svg path { stroke: var(--nova-inkt); }
.shop-usp.vorm-nova .nova-mid.wisselt { justify-content: space-between; }
.shop-usp.vorm-nova .nova-mid.wisselt .usp-punt { display: none; }
.shop-usp.vorm-nova .nova-mid.wisselt .usp-punt.aan { display: flex; }
.shop-usp.vorm-nova .usp-punt.buiten { display: none; }
.shop-usp.vorm-nova .usp-stippen { display: flex; gap: 6px; flex: none; }
.shop-usp.vorm-nova .usp-stippen[hidden] { display: none; }
.shop-usp.vorm-nova .usp-stippen i { width: 6px; height: 6px; border-radius: 50%; background: var(--nova-lijn); }
.shop-usp.vorm-nova .usp-stippen i.aan { background: var(--nova-accent); }
.shop-usp.vorm-nova .shop-usp-in span::before { content: none; margin: 0; }
.shop-header.vorm-nova {
background: #fff;
color: var(--nova-inkt);
border-bottom: 1px solid var(--nova-lijn);
position: sticky;
top: 0;
z-index: 33;
padding: 0;
box-shadow: none;
}
.shop-header.vorm-nova .shop-header-in {
width: 100%;
max-width: var(--site-breedte);
margin-inline: auto;
padding-inline: var(--nova-zij);
padding-block: 0;
height: var(--nova-balk-h);
display: flex;
align-items: center;
gap: var(--nova-gat);
flex-wrap: nowrap;
}
.shop-header.vorm-nova .logo-beeld { height: auto; max-height: 38px; width: auto; }
.shop-header.vorm-nova .nova-knop,
.shop-header.vorm-nova .shop-paneel-knop,
.shop-header.vorm-nova .shop-wagen,
.shop-header.vorm-nova .ghost {
height: 39.6px;
border-radius: var(--nova-r-klein);
font-size: 13.5px;
line-height: 1;
font-weight: 600;
display: inline-flex;
align-items: center;
gap: 9px;
white-space: nowrap;
text-decoration: none;
border: 0;
}
.shop-header.vorm-nova .ghost {
background: none;
color: var(--nova-inkt);
font-weight: 500;
font-size: 12.6px;
padding-inline: 10.8px;
box-shadow: none;
}
.shop-header.vorm-nova .ghost:hover { background: var(--nova-vlak); }
.shop-header.vorm-nova .shop-kop-rechts { margin-left: auto; }
.shop-header.vorm-nova .shop-kop-rechts { gap: 2px; }
.shop-header.vorm-nova .shop-kop-rechts > .shop-wagen { margin-left: 10.8px; }
.shop-header.vorm-nova .shop-koptel { padding-inline: 10.8px; }
.shop-header.vorm-nova .shop-paneel-knop,
.shop-header.vorm-nova .shop-wagen {
background: var(--nova-accent);
color: var(--nova-accent-op);
padding-inline: 21.6px;
font-size: 13.5px;
font-weight: 600;
cursor: pointer;
}
.shop-header.vorm-nova .shop-wagen { padding-inline: 14.4px; }
.shop-header.vorm-nova .shop-paneel-knop:hover,
.shop-header.vorm-nova .shop-wagen:hover {
background: color-mix(in srgb, var(--nova-accent) 85%, #000);
}
.shop-header.vorm-nova .shop-zoek {
flex: 0 1 500px;
min-width: 200px;
max-width: 500px;
height: 39.6px;
margin: 0;
background: var(--nova-vlak);
border: 1px solid var(--nova-lijn);
border-radius: var(--nova-r-klein);
display: flex;
align-items: center;
position: relative;
padding: 0;
}
.shop-header.vorm-nova .shop-zoek > svg {
order: 2;
position: absolute;
right: 14.4px;
top: 50%;
transform: translateY(-50%);
color: var(--nova-inkt);
width: 17px;
height: 17px;
}
.shop-header.vorm-nova .shop-zoek input {
width: 100%;
height: 100%;
min-width: 0;
background: none;
border: 0;
outline: 0;
font-size: 12.6px;
color: var(--nova-inkt);
padding: 0 43.2px 0 18px;
}
.shop-header.vorm-nova .shop-zoek input::placeholder { color: var(--nova-gedempt); }
.shop-header.vorm-nova .shop-koptel { gap: 9px; }
.shop-header.vorm-nova .shop-koptel-tekst b { font-size: 12.6px; font-weight: 600; }
.shop-header.vorm-nova .shop-koptel-tekst small { font-size: 10.8px; color: var(--nova-gedempt); }
.shop-header.vorm-nova .shop-btw {
height: 39.6px;
padding-inline: 5.4px;
gap: 7.2px;
font-size: 12.6px;
font-weight: 500;
border-radius: var(--nova-r-klein);
}
.shop-header.vorm-nova .shop-btw-schakel {
width: 30.6px;
height: 18px;
border-radius: 999px;
background: var(--nova-tint);
padding: 2px;
}
.shop-header.vorm-nova .shop-btw-schakel::after { width: 14.4px; height: 14.4px; top: 2px; left: 2px; }
.shop-header.vorm-nova .shop-btw.aan .shop-btw-schakel { background: var(--nova-accent); }
.shop-header.vorm-nova .shop-btw.aan .shop-btw-schakel::after { left: 14.2px; }
.shop-header.vorm-nova .nova-vinkje {
position: absolute;
right: 2px;
bottom: 2px;
width: 14px;
height: 14px;
border-radius: 999px;
background: var(--nova-groen);
display: grid;
place-items: center;
border: 2px solid #fff;
}
.shop-menu.vorm-nova {
background: #fff;
border-bottom: 1px solid var(--nova-lijn);
}
.shop-menu.vorm-nova .nova-mid {
height: 43.2px;
display: flex;
align-items: center;
gap: 21.6px;
overflow: visible;
flex-wrap: nowrap;
scrollbar-width: none;
}
.winkel.nova .shop-menu { overflow-x: clip; overflow-y: visible; }
.shop-menu.vorm-nova .nova-mid::-webkit-scrollbar { display: none; }
.shop-menu.vorm-nova .shop-menu-in { padding-block: 0; }
.shop-menu.vorm-nova .shop-menu-item { display: flex; align-items: center; }
.shop-menu.vorm-nova .shop-menu-kop,
.shop-menu.vorm-nova a {
display: flex;
align-items: center;
gap: 5.4px;
font-size: 12.6px;
font-weight: 500;
line-height: 18.9px;
color: var(--nova-inkt);
text-decoration: none;
white-space: nowrap;
}
.shop-menu.vorm-nova .shop-menu-item:first-child > * { font-weight: 600; }
.shop-menu.vorm-nova .shop-menu-kop { list-style: none; }
.shop-menu.vorm-nova .shop-menu-kop::-webkit-details-marker { display: none; }
.shop-menu.vorm-nova .shop-menu-kop::after,
.shop-menu.vorm-nova .shop-menu-kop::before,
.shop-menu.vorm-nova .shop-menu-kop .pijl { display: none !important; content: none; }
.shop-menu.vorm-nova .shop-menu-kop .shop-menu-pijl { display: inline-block; width: 11px; height: 11px; opacity: .7; flex: none; }
.shop-menu.vorm-nova .shop-menu-kop:hover,
.shop-menu.vorm-nova a:hover { color: var(--nova-accent); background: none; }
.shop-menu.vorm-nova .shop-menu-lade { border-radius: var(--nova-r-kaart); border-color: var(--nova-lijn); }
.shop-tegels.vorm-nova {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 20px;
}
@media (max-width: 820px)  { .shop-tegels.vorm-nova { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.shop-kaart.vorm-nova {
position: relative;
display: flex;
flex-direction: column;
background: #fff;
border: 1px solid var(--nova-lijn);
border-radius: var(--nova-r-kaart);
padding: 12px;
overflow: hidden;
box-shadow: none;
color: var(--nova-inkt);
text-decoration: none;
}
.shop-kaart.vorm-nova:hover { border-color: color-mix(in srgb, var(--nova-lijn) 78%, var(--nova-inkt)); transform: none; box-shadow: none; }
.shop-kaart.vorm-nova > img,
.shop-kaart.vorm-nova .foto-leeg {
aspect-ratio: 1 / 1;
width: 100%;
height: auto;
object-fit: contain;
border-radius: var(--nova-r-klein);
margin-bottom: 7.2px;
background: none;
}
.shop-kaart.vorm-nova .nova-body { padding: 0; display: block; flex: 1; }
.nova-chip {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 12px;
line-height: 18px;
font-weight: 600;
padding: 4px 8px;
border-radius: var(--nova-r-klein);
color: #067647;
background: #E7F8F0;
}
.nova-chip.nova-chip--nee { color: #B42318; background: #FEF3F2; }
.nova-chip.nova-chip--wacht { color: #B54708; background: #FFFAEB; }
.nova-chip.nova-chip--bijna { color: #9a5a05; background: #fdefd9; }
.nova-vestigingen { font-size: 11.5px; font-weight: 600; color: var(--nova-accent); text-decoration: none; white-space: nowrap; }
.nova-vestigingen:hover { text-decoration: underline; }
.winkel.nova .pdp-voorraad { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-bottom: 4px; }
.winkel.nova .pdp-voorraad-zin { flex-basis: 100%; font-size: 12.6px; color: var(--nova-gedempt); }
.winkel.nova .pdp-vestigingen { flex-basis: 100%; border: 1px solid var(--nova-lijn); border-radius: var(--nova-r-kaart); background: #fff; margin-top: 4px; }
.winkel.nova .pdp-vestigingen summary { list-style: none; cursor: pointer; padding: 10px 14px; font-weight: 600; font-size: 13px; }
.winkel.nova .pdp-vestigingen summary::-webkit-details-marker { display: none; }
.winkel.nova .pdp-vestigingen summary::after { content: "⌄"; float: right; color: var(--nova-gedempt); }
.winkel.nova .pdp-vestigingen[open] summary { border-bottom: 1px solid var(--nova-lijn); }
.winkel.nova .pdp-vestiging { display: grid; grid-template-columns: 1fr auto; gap: 0 12px; align-items: center; padding: 9px 14px; border-bottom: 1px solid var(--nova-lijn); font-size: 13px; }
.winkel.nova .pdp-vestiging:last-child { border-bottom: 0; }
.winkel.nova .pdp-vestiging small { grid-column: 1; color: var(--nova-gedempt); font-size: 12px; }
.winkel.nova .pdp-vestiging .nova-chip { grid-column: 2; grid-row: 1 / 3; }
.shop-kaart.vorm-nova .nova-chiprij {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 5.4px 10.8px;
margin-bottom: 7.2px;
}
.nova-sterren { display: flex; align-items: center; gap: 8px; height: 18px; }
.nova-sterren .sterren { position: relative; display: flex; width: 80px; height: 16px; }
.nova-sterren .sterren .vol { position: absolute; inset: 0; overflow: hidden; display: flex; color: var(--nova-ster); }
.nova-sterren .sterren .leeg { display: flex; color: var(--nova-ster-leeg); }
.nova-sterren .sterren svg { width: 16px; height: 16px; flex: none; }
.nova-sterren .oordeel { font-size: 12px; line-height: 18px; color: var(--nova-gedempt); white-space: nowrap; }
.shop-kaart.vorm-nova .nova-titel {
font-size: 14.4px;
font-weight: 700;
line-height: 19.44px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
margin: 4px 0 0;
}
.shop-kaart.vorm-nova .nova-code { font-size: 12px; line-height: 18px; color: var(--nova-flets); }
.shop-kaart.vorm-nova .nova-specs { display: flex; flex-wrap: wrap; gap: 5.4px; margin-top: 7.2px; }
.nova-spec {
display: flex;
align-items: center;
font-size: 12px;
line-height: 18px;
color: rgba(51, 51, 51, .8);
border: 1px solid var(--nova-lijn);
border-radius: var(--nova-r-klein);
padding: 4px 8px;
}
.shop-kaart.vorm-nova .nova-voet {
margin-top: auto;
padding-top: 10.8px;
min-height: 52px;
display: flex;
align-items: flex-end;
gap: 7.2px;
}
.shop-kaart.vorm-nova .nova-prijsvak { flex: 1 1 auto; min-width: 0; }
.shop-kaart.vorm-nova .nova-prijs {
font-size: 17.28px;
font-weight: 700;
line-height: 20.736px;
}
.shop-kaart.vorm-nova .nova-prijs .btw-inline { font-size: 12px; font-weight: 400; color: var(--nova-flets); }
.shop-kaart.vorm-nova .nova-prijs s { font-size: 12.5px; font-weight: 400; color: var(--nova-flets); margin-right: 6px; }
.shop-kaart.vorm-nova .nova-tweedeprijs { font-size: 11px; line-height: 16.5px; color: var(--nova-flets); }
.shop-kaart.vorm-nova .nova-wens,
.shop-kaart.vorm-nova .nova-inwagen {
width: 39.6px;
height: 39.6px;
flex: none;
border-radius: var(--nova-r-klein);
display: grid;
place-items: center;
border: 0;
cursor: pointer;
}
.shop-kaart.vorm-nova .nova-wens { background: none; color: var(--nova-inkt); }
.shop-kaart.vorm-nova .nova-wens:hover { background: var(--nova-vlak); }
.shop-kaart.vorm-nova .nova-wens.aan { color: var(--nova-accent); }
.shop-kaart.vorm-nova .nova-inwagen { background: var(--nova-accent); color: var(--nova-accent-op); }
.shop-kaart.vorm-nova .nova-inwagen:hover { background: color-mix(in srgb, var(--nova-accent) 85%, #000); }
.winkel.nova .shop-body { background: #f5f8f9; }
.winkel.nova .shop-kruimels { font-size: 13px; line-height: 19.5px; gap: 4px; }
.winkel.nova .shop-lijstkop h1 { font-size: 28.8px; line-height: 36px; font-weight: 700; }
.shop-kop-rechts {
margin-left: auto;
display: flex;
align-items: center;
gap: 7.2px;
flex: none;
}
.shop-header.vorm-nova .shop-talen { gap: 4px; font-size: 12.6px; }
.shop-kaart.vorm-nova { isolation: isolate; }
.shop-kaart.vorm-nova .kaart-vlak { position: absolute; inset: 0; z-index: 1; }
.shop-kaart.vorm-nova > *:not(.kaart-vlak) { position: relative; }
.shop-kaart.vorm-nova .nova-knoppen { position: relative; z-index: 2; display: flex; gap: 7.2px; margin: 0; }
.shop-kaart.vorm-nova .nova-hartvorm { position: relative; z-index: 2; margin: 0 0 0 auto; }
.shop-kaart.vorm-nova .nova-hartvorm + .nova-knoppen { margin-left: 7.2px; }
.shop-kaart.vorm-nova .nova-hart {
width: 39.6px; height: 39.6px; flex: none; border-radius: var(--nova-r-klein);
display: grid; place-items: center; cursor: pointer;
background: #fff; color: var(--nova-inkt); border: 1px solid rgba(51, 51, 51, .15);
}
.shop-kaart.vorm-nova .nova-hart:hover { border-color: var(--nova-accent); color: var(--nova-accent); }
.shop-header.vorm-nova .shop-header-in > a:has(.logo-beeld) { flex: none; }
.shop-menu2.vorm-nova { background: #fff; border-bottom: 1px solid var(--nova-lijn); }
.shop-menu2.vorm-nova .shop-menu2-in {
max-width: var(--site-breedte);
margin-inline: auto;
padding: 0 var(--nova-zij);
height: 36px;
display: flex;
align-items: center;
gap: 21.6px;
}
.shop-menu2.vorm-nova .shop-menu2-in a {
font-size: 12.6px;
color: var(--nova-gedempt);
text-decoration: none;
}
.shop-menu2.vorm-nova .shop-menu2-in a:hover { color: var(--nova-inkt); text-decoration: underline; }
.winkel.nova .shop-kruimels {
display: flex;
align-items: center;
gap: 10.8px;
font-size: 14px;
line-height: 21px;
padding-top: 7.2px;
margin-bottom: 19.8px;
flex-wrap: wrap;
}
.winkel.nova .shop-kruimels a { color: var(--nova-gedempt); text-decoration: none; }
.winkel.nova .shop-kruimels a:hover { color: var(--nova-inkt); text-decoration: underline; }
.winkel.nova .shop-kruimels a:last-child { color: var(--nova-inkt); font-weight: 600; }
.winkel.nova .shop-kruimels span { color: var(--nova-flets); }
.winkel.nova .kruimel-terug { display: inline-flex; align-items: center; gap: 5.4px; }
.winkel.nova .shop-pdp {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 21.6px 57.6px;
align-items: start;
}
.winkel.nova .shop-pdp-beeld { max-width: none; }
.winkel.nova .shop-pdp-beeld { min-width: 0; }
.winkel.nova .pdp-hoofdfoto {
width: 100%;
aspect-ratio: 1 / 1;
object-fit: contain;
background: #fff;
border: 1px solid var(--nova-lijn);
border-radius: var(--nova-r-klein);
display: block;
}
.winkel.nova .pdp-geenfoto {
width: 100%;
aspect-ratio: 1 / 1;
background: var(--nova-vlak);
border: 1px solid var(--nova-lijn);
border-radius: var(--nova-r-klein);
display: grid;
place-items: center;
color: var(--nova-gedempt);
}
.winkel.nova .pdp-strook { display: flex; gap: 10.8px; margin-top: 10.8px; flex-wrap: wrap; }
.winkel.nova .pdp-strook img {
width: 79.2px; height: 79.2px; object-fit: cover;
border: 1px solid var(--nova-lijn); border-radius: var(--nova-r-klein);
cursor: pointer;
}
.winkel.nova .pdp-strook img:hover { border-color: var(--nova-accent); }
.winkel.nova .shop-pdp-info { padding-left: 0; min-width: 0; }
.winkel.nova .pdp-kort,
.winkel.nova .pdp-titelregel { max-width: none; }
.winkel.nova .pdp-titelregel h1 { max-width: 570px; }
.winkel.nova .pdp-bovenregel {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 14.4px;
margin-bottom: 10.8px;
flex-wrap: wrap;
}
.winkel.nova .pdp-paden { display: flex; gap: 14.4px; flex-wrap: wrap; }
.winkel.nova .pdp-paden a {
font-size: 12.6px;
color: var(--nova-gedempt);
text-decoration: underline;
text-underline-offset: 3px;
}
.winkel.nova .pdp-paden a:hover { color: var(--nova-inkt); }
.winkel.nova .pdp-artikelnr { font-size: 12.6px; color: var(--nova-gedempt); white-space: nowrap; }
.winkel.nova .pdp-artikelnr b { color: var(--nova-inkt); font-weight: 600; }
.winkel.nova .pdp-titelregel { display: flex; align-items: flex-start; gap: 10.8px; }
.winkel.nova .pdp-titelregel h1 {
font-size: 23.4px;
line-height: 30.42px;
font-weight: 700;
margin: 0;
flex: 1;
text-wrap: balance;
}
.winkel.nova .pdp-wensvorm { margin: 0 0 0 auto; flex: none; }
.winkel.nova .pdp-titelregel > .pdp-wens { margin-left: auto; flex: none; }
.winkel.nova .pdp-wens {
width: 39.6px; height: 39.6px;
display: grid; place-items: center;
background: none;
border: 1px solid var(--nova-lijn);
border-radius: var(--nova-r-klein);
color: var(--nova-inkt);
cursor: pointer;
}
.winkel.nova .pdp-wens:hover { background: var(--nova-vlak); }
.winkel.nova .pdp-wens.aan { color: var(--nova-accent); border-color: var(--nova-accent); }
.winkel.nova .pdp-wens.aan svg { fill: currentColor; }
.winkel.nova .pdp-kort {
margin: 14.4px 0 0;
font-size: 14.4px;
line-height: 1.8;
color: var(--nova-inkt);
}
.winkel.nova .pdp-prijsvak { margin: 21.6px 0 10.8px; }
.winkel.nova .pdp-prijs { font-size: 19.8px; font-weight: 700; line-height: 1.3; }
.winkel.nova .pdp-prijs .klein { font-size: 11.7px; font-weight: 400; color: var(--nova-inkt); }
.winkel.nova .pdp-prijs s { font-size: 14.4px; font-weight: 400; color: var(--nova-flets); margin-right: 8px; }
.winkel.nova .pdp-tweedeprijs { font-size: 12.6px; color: var(--nova-flets); margin-top: 2px; }
.winkel.nova .pdp-inlogprijs {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 7.2px;
margin: 21.6px 0 0;
padding: 25.2px 24px 43.2px;
border-bottom: 1px solid var(--nova-lijn);
}
.winkel.nova .pdp-inlogprijs b { font-size: 18px; font-weight: 700; line-height: 1.3; color: var(--nova-inkt); }
.winkel.nova .pdp-inlogprijs span { font-size: 14.4px; color: var(--nova-gedempt); }
.winkel.nova .pdp-inlogprijs .pdp-inlogknop { flex: none; align-self: stretch; margin-top: 14.4px; }
.winkel.nova .pdp-koopvorm { display: flex; flex-direction: column; gap: 10.8px; }
.winkel.nova .pdp-aantal-kop { font-size: 12.6px; color: var(--nova-gedempt); margin-bottom: -4px; }
.winkel.nova .pdp-koopregel { display: flex; gap: 14.4px; align-items: stretch; }
.winkel.nova .pdp-teller { flex: none; }
.winkel.nova .pdp-koop {
flex: 1;
height: var(--nova-h-groot);
display: inline-flex;
align-items: center;
justify-content: center;
gap: 18px;
background: var(--nova-accent);
color: var(--nova-accent-op);
border: 0;
border-radius: var(--nova-r-klein);
font-size: 16.2px;
font-weight: 700;
cursor: pointer;
}
.winkel.nova .pdp-koop:hover { background: color-mix(in srgb, var(--nova-accent) 85%, #000); }
.winkel.nova a.pdp-koop { text-decoration: none; }
.winkel.nova .pdp-kenmerken {
margin: 21.6px 0 0;
border-top: 1px solid var(--nova-lijn);
}
.winkel.nova .pdp-kenmerk {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14.4px;
height: 43.7px;
padding: 0 14.4px;
border-bottom: 1px solid var(--nova-lijn);
font-size: 13.5px;
}
.winkel.nova .pdp-kenmerk dt { color: var(--nova-inkt); margin: 0; }
.winkel.nova .pdp-kenmerk dd { margin: 0; font-weight: 600; text-align: right; }
.winkel.nova .shop-main {
width: 100%;
max-width: var(--site-breedte);
margin-inline: auto;
padding: 21.6px var(--nova-zij) 43.2px;
}
.winkel.nova .shop-main.site-main { max-width: none; padding-inline: 0; }
.winkel.nova .shop-main.site-main > :not(.site-pagina) {
max-width: var(--site-breedte);
margin-inline: auto;
padding-inline: var(--nova-zij);
box-sizing: border-box;
}
.winkel.nova .shop-lijst {
display: grid;
grid-template-columns: 1fr 3.9562fr;
gap: 14.4px 24px;
align-items: start;
}
.shop-zijbalk.vorm-nova { min-width: 0; width: 100%; flex: none; }
.winkel.nova .shop-lijstkolom { min-width: 0; }
.winkel.nova .shop-lijsttitel {
font-size: 28.8px;
line-height: 36px;
font-weight: 700;
margin: 0 0 21.6px;
text-wrap: balance;
}
.winkel.nova .shop-lijstkolom .shop-kruimels { margin-bottom: 18.5px; }
.winkel.nova .shop-lijstbalk {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px;
margin-bottom: 21.6px;
}
.winkel.nova .shop-telling { font-size: 13.5px; color: #8f8f8f; white-space: nowrap; }
.winkel.nova .shop-inveld {
flex: 1 1 240px;
min-width: 0;
height: 39.6px;
padding: 0 14.4px;
background: #fff;
border: 1px solid var(--nova-lijn);
border-radius: var(--nova-r-klein);
font-size: 13.5px;
color: var(--nova-inkt);
}
.winkel.nova .shop-inveld::placeholder { color: var(--nova-gedempt); }
.winkel.nova .shop-weergave { display: flex; gap: 0; flex: none; }
.winkel.nova .shop-weergave button {
width: 39.6px;
height: 39.6px;
display: grid;
place-items: center;
background: #fff;
border: 1px solid var(--nova-lijn);
color: var(--nova-gedempt);
cursor: pointer;
}
.winkel.nova .shop-weergave button:first-child { border-radius: var(--nova-r-klein) 0 0 var(--nova-r-klein); }
.winkel.nova .shop-weergave button:last-child { border-radius: 0 var(--nova-r-klein) var(--nova-r-klein) 0; border-left: 0; }
.winkel.nova .shop-weergave button.aan { background: var(--nova-tint); color: var(--nova-inkt); }
.winkel.nova .shop-select {
height: 39.6px;
flex: none;
padding: 0 32px 0 14.4px;
background: #fff;
border: 1px solid var(--nova-lijn);
border-radius: var(--nova-r-klein);
font-size: 13.5px;
color: var(--nova-inkt);
cursor: pointer;
}
.winkel.nova .shop-tegels.als-lijst { grid-template-columns: 1fr; gap: 10.8px; }
.winkel.nova .shop-tegels.als-lijst .shop-kaart {
display: grid;
grid-template-columns: 132px minmax(0, 1fr) auto;
gap: 18px;
align-items: center;
}
.winkel.nova .shop-tegels.als-lijst .shop-kaart > img,
.winkel.nova .shop-tegels.als-lijst .shop-kaart .foto-leeg { margin: 0; grid-row: span 6; }
.winkel.nova .shop-tegels.als-lijst .nova-voet {
grid-column: 3;
grid-row: 1 / -1;
margin: 0;
padding: 0;
min-height: 0;
flex-direction: column;
align-items: flex-end;
justify-content: center;
gap: 10.8px;
}
.winkel.nova .shop-tegels.als-lijst .nova-prijsvak { text-align: right; }
.winkel.nova .shop-blader {
display: flex;
align-items: center;
justify-content: center;
gap: 5.4px;
margin-top: 28.8px;
flex-wrap: wrap;
}
.winkel.nova .shop-blader a,
.winkel.nova .shop-blader .nu {
min-width: 39.6px;
height: 39.6px;
padding: 0 12px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid var(--nova-lijn);
border-radius: var(--nova-r-klein);
background: #fff;
color: var(--nova-inkt);
font-size: 13.5px;
text-decoration: none;
}
.winkel.nova .shop-blader a:hover { background: var(--nova-vlak); }
.winkel.nova .shop-blader .nu {
background: var(--nova-accent);
border-color: var(--nova-accent);
color: var(--nova-accent-op);
font-weight: 600;
}
.winkel.nova .klant-kop {
display: flex;
align-items: center;
gap: 18px;
margin-bottom: 25.2px;
}
.winkel.nova .klant-kaart {
width: 72px;
height: 72px;
flex: none;
display: grid;
place-items: center;
background: #fff;
border: 1px solid var(--nova-lijn);
border-radius: var(--nova-r-kaart);
color: var(--nova-gedempt);
}
.winkel.nova .klant-wie { flex: 1; min-width: 0; }
.winkel.nova .klant-wie h1 { font-size: 23.4px; line-height: 1.25; font-weight: 700; margin: 0 0 1.8px; }
.winkel.nova .klant-wie p { margin: 0; font-size: 13.5px; color: var(--nova-gedempt); }
.winkel.nova .klant-uit { margin: 0; flex: none; }
.winkel.nova .klant-tabs {
display: flex;
gap: 25.2px;
align-items: flex-end;
overflow-x: auto;
scrollbar-width: none;
margin-bottom: -1px;
}
.winkel.nova .klant-tabs::-webkit-scrollbar { display: none; }
.winkel.nova .klant-tabs a {
display: inline-flex;
align-items: center;
gap: 7.2px;
padding: 9px 1.8px 12.6px;
border-bottom: 2px solid transparent;
font-size: 13.5px;
color: color-mix(in srgb, var(--nova-inkt) 60%, #fff);
text-decoration: none;
white-space: nowrap;
}
.winkel.nova .klant-tabs a:hover { color: var(--nova-inkt); }
.winkel.nova .klant-tabs a.aan {
color: var(--nova-accent);
border-bottom-color: var(--nova-accent);
font-weight: 600;
}
.winkel.nova .klant-teller {
min-width: 18px;
height: 18px;
padding: 0 5px;
border-radius: 999px;
background: var(--nova-accent);
color: var(--nova-accent-op);
font-size: 11px;
font-weight: 700;
display: inline-grid;
place-items: center;
}
.winkel.nova .klant-band {
border-top: 1px solid var(--nova-lijn);
padding-top: 25.2px;
padding-bottom: 36px;
}
.winkel.nova .klant-melding {
background: var(--nova-vlak);
border: 1px solid var(--nova-lijn);
border-radius: var(--nova-r-kaart);
padding: 12px 16px;
font-size: 13.5px;
margin-bottom: 18px;
}
.winkel.nova .klant-melding.fout { background: #FFE2E2; border-color: #FFE2E2; color: #B42318; }
.winkel.nova .klant-vakken {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
gap: 14.4px;
margin-bottom: 21.6px;
}
.winkel.nova .klant-vak {
display: flex;
flex-direction: column;
gap: 2px;
padding: 16px 18px;
background: #fff;
border: 1px solid var(--nova-lijn);
border-radius: var(--nova-r-kaart);
text-decoration: none;
color: var(--nova-inkt);
}
.winkel.nova .klant-vak:hover { border-color: color-mix(in srgb, var(--nova-lijn) 78%, var(--nova-inkt)); }
.winkel.nova .klant-vak .getal { font-size: 25.2px; font-weight: 700; line-height: 1.1; }
.winkel.nova .klant-vak .naam { font-size: 13.5px; font-weight: 600; }
.winkel.nova .klant-vak .sub { font-size: 12px; color: var(--nova-gedempt); }
.winkel.nova .klant-vak.let .getal { color: var(--nova-accent); }
.winkel.nova .klant-kaart-blok {
background: #fff;
border: 1px solid var(--nova-lijn);
border-radius: var(--nova-r-kaart);
padding: 18px;
margin-bottom: 18px;
}
.winkel.nova .klant-kaart-blok h2 { font-size: 16px; font-weight: 600; margin: 0 0 14.4px; }
.winkel.nova .klant-leeg { font-size: 13.5px; color: var(--nova-gedempt); margin: 0; }
.winkel.nova .klant-flets { color: var(--nova-flets); font-weight: 400; }
.winkel.nova .klant-meer {
display: inline-block;
margin-top: 12px;
font-size: 13.5px;
color: var(--nova-accent);
text-decoration: underline;
text-underline-offset: 3px;
}
.winkel.nova .klant-tweekolom {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 18px;
}
.winkel.nova .klant-tweekolom .klant-kaart-blok { margin-bottom: 0; }
.winkel.nova .klant-adres { font-style: normal; font-size: 13.5px; line-height: 1.7; display: flex; flex-direction: column; }
.winkel.nova .klant-tabelvak { overflow-x: auto; margin: 0 -18px; }
.winkel.nova .klant-tabel { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.winkel.nova .klant-tabel thead tr { background: var(--nova-vlak); }
.winkel.nova .klant-tabel th {
text-align: left;
font-size: 11.5px;
font-weight: 600;
letter-spacing: .04em;
text-transform: uppercase;
color: var(--nova-gedempt);
padding: 9px 18px;
white-space: nowrap;
}
.winkel.nova .klant-tabel td { padding: 12px 18px; border-bottom: 1px solid var(--nova-lijn); }
.winkel.nova .klant-tabel tbody tr:last-child td { border-bottom: 0; }
.winkel.nova .klant-tabel tbody tr:hover { background: var(--nova-vlak); }
.winkel.nova .klant-tabel .rechts { text-align: right; }
.winkel.nova .klant-tabel .getal { font-variant-numeric: tabular-nums; }
.winkel.nova .klant-tabel form { margin: 0; }
.winkel.nova .klant-stand { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.winkel.nova .klant-stand .stip { width: 7px; height: 7px; border-radius: 999px; background: currentColor; flex: none; }
.winkel.nova .stand-af { color: #067647; }
.winkel.nova .stand-wacht { color: #B54708; }
.winkel.nova .stand-weg { color: var(--nova-flets); }
.winkel.nova .stand-bezig { color: var(--nova-gedempt); }
.winkel.nova .klant-terugregel { margin-bottom: 14.4px; }
.winkel.nova .klant-terug { display: inline-flex; align-items: center; gap: 5.4px; font-size: 13.5px; color: var(--nova-gedempt); text-decoration: none; }
.winkel.nova .klant-terug:hover { color: var(--nova-inkt); }
.winkel.nova .klant-offertekop {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 18px;
flex-wrap: wrap;
margin-bottom: 14.4px;
}
.winkel.nova .klant-offertekop h2 { margin: 0 0 2px; font-size: 19.8px; font-weight: 700; }
.winkel.nova .klant-offertekop p { margin: 0; font-size: 13.5px; color: var(--nova-gedempt); }
.winkel.nova .klant-notitie { font-size: 13.5px; line-height: 1.7; margin: 14.4px 0 0; }
.winkel.nova .klant-telling { font-size: 13.5px; }
.winkel.nova .klant-telling th {
font-weight: 400;
color: var(--nova-gedempt);
padding: 5.4px 14.4px;
border: 0;
background: none;
text-transform: none;
letter-spacing: 0;
font-size: 13.5px;
}
.winkel.nova .klant-telling td {
padding: 5.4px 14.4px;
border: 0;
font-variant-numeric: tabular-nums;
}
.winkel.nova .klant-telling tr:first-child th,
.winkel.nova .klant-telling tr:first-child td { padding-top: 12.6px; }
.winkel.nova .klant-telling .totaal th,
.winkel.nova .klant-telling .totaal td {
border-top: 1px solid var(--nova-lijn);
padding-top: 10.8px;
padding-bottom: 14.4px;
font-size: 16px;
font-weight: 700;
color: var(--nova-inkt);
}
.winkel.nova .klant-offerteknoppen { display: flex; gap: 12px; margin-top: 18px; flex-wrap: wrap; }
.winkel.nova .klant-offerteknoppen form { margin: 0; }
.winkel.nova .pdp-koop.klein { height: var(--nova-h); font-size: 14.4px; padding-inline: 21.6px; flex: none; }
.winkel.nova .klant-adressen {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 14.4px;
}
.winkel.nova .klant-adreskaart {
border: 1px solid var(--nova-lijn);
border-radius: var(--nova-r-kaart);
padding: 14.4px;
display: flex;
flex-direction: column;
gap: 9px;
}
.winkel.nova .klant-adreskaart.nu { border-color: var(--nova-accent); }
.winkel.nova .klant-adreskop { display: flex; align-items: center; justify-content: space-between; gap: 9px; }
.winkel.nova .klant-vlaggen { display: flex; gap: 5.4px; }
.winkel.nova .klant-vlag {
font-size: 11px;
padding: 2px 7px;
border-radius: var(--nova-r-klein);
background: var(--nova-vlak);
color: var(--nova-gedempt);
}
.winkel.nova .klant-adresknoppen { display: flex; gap: 7.2px; flex-wrap: wrap; margin-top: auto; }
.winkel.nova .klant-adresknoppen form { margin: 0; }
.winkel.nova .ghost.gevaar { color: #B42318; }
.winkel.nova .klant-vorm {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 14.4px;
align-items: end;
}
.winkel.nova .klant-veld {
position: relative;
display: flex;
flex-direction: column;
min-width: 0;
}
.winkel.nova .klant-veld.breed { grid-column: 1 / -1; }
.winkel.nova .klant-veld.smal { max-width: 160px; }
.winkel.nova .klant-veld > label {
position: absolute;
left: 8px;
top: 0;
z-index: 1;
padding: 0 8px;
font-size: 13.5px;
line-height: 20px;
color: var(--nova-inkt);
opacity: .2;
transform: translateY(15px);
transform-origin: left center;
transition: transform .2s ease, opacity .2s ease, font-weight .2s ease;
pointer-events: none;
white-space: nowrap;
max-width: calc(100% - 8px);
overflow: hidden;
text-overflow: ellipsis;
}
.winkel.nova .klant-veld input,
.winkel.nova .klant-veld select,
.winkel.nova .klant-veld textarea {
height: 50px;
padding: 17px 14.4px 3px;
background: #fff;
border: 1px solid var(--nova-lijn);
border-radius: var(--nova-r-klein);
font-size: 12.6px;
color: var(--nova-inkt);
min-width: 0;
width: 100%;
}
.winkel.nova .klant-veld textarea {
height: 200px;
padding-top: 21px;
line-height: 1.6;
resize: vertical;
}
.winkel.nova .klant-veld input[type="file"] {
height: 94px;
padding: 26px 14.4px;
cursor: pointer;
}
.winkel.nova .klant-veld input:focus,
.winkel.nova .klant-veld select:focus,
.winkel.nova .klant-veld textarea:focus {
outline: 0;
border-color: var(--nova-accent);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--nova-accent) 14%, transparent);
}
.winkel.nova .klant-veld:has(> input:focus) > label,
.winkel.nova .klant-veld:has(> textarea:focus) > label,
.winkel.nova .klant-veld:has(> input:not(:placeholder-shown)) > label,
.winkel.nova .klant-veld:has(> textarea:not(:placeholder-shown)) > label,
.winkel.nova .klant-veld:has(> select) > label,
.winkel.nova .klant-veld:has(> input[type="file"]) > label {
transform: translateY(-8px) scale(.75);
opacity: 1;
font-weight: 600;
background-image: linear-gradient(0deg, #fff 10px, transparent 10px);
}
.winkel.nova .klant-veld.hint > label,
.winkel.nova .klant-veld:has(> textarea) > label {
transform: translateY(-8px) scale(.75);
opacity: 1;
font-weight: 600;
background-image: linear-gradient(0deg, #fff 10px, transparent 10px);
}
.winkel.nova .klant-veld > .klant-flets { margin-top: 5px; font-size: 12px; }
.winkel.nova .klant-vast { margin: 0; font-size: 13.5px; }
.winkel.nova .klant-vormknoppen { grid-column: 1 / -1; display: flex; gap: 12px; align-items: center; }
@media (max-width: 1279px) {
.shop-header.vorm-nova .shop-koptel { display: none; }
.shop-header.vorm-nova .shop-kopknop { display: none; }
.shop-header.vorm-nova .shop-wagen .wagen-woord { display: none; }
.shop-header.vorm-nova .shop-wagen { padding-inline: 12px; }
}
@media (max-width: 1099px) {
.shop-header.vorm-nova .shop-btw .btw-woord { display: none; }
.shop-header.vorm-nova .shop-btw { padding-inline: 3px; }
}
@media (max-width: 1023px) {
.shop-header.vorm-nova .shop-header-in {
flex-wrap: wrap;
height: auto;
padding-block: 10.8px;
row-gap: 10.8px;
}
.shop-header.vorm-nova .shop-paneel-knop { display: none; }
.shop-header.vorm-nova .shop-lade-knop {
display: inline-flex;
align-items: center;
justify-content: center;
width: 39.6px;
height: 39.6px;
border: 1px solid var(--nova-lijn);
border-radius: var(--nova-r-klein);
background: #fff;
color: var(--nova-inkt);
cursor: pointer;
flex: none;
}
.shop-header.vorm-nova .shop-zoek {
order: 10;
flex: 1 0 100%;
max-width: none;
}
.shop-header.vorm-nova .shop-btw { display: none; }
.winkel.nova .shop-menu { display: none; }
.winkel.nova .shop-lijst { grid-template-columns: minmax(0, 1fr); gap: 18px; }
.winkel.nova .shop-pdp { grid-template-columns: minmax(0, 1fr); }
.winkel.nova .shop-pdp-info { padding-left: 0; max-width: none; }
}
@media (max-width: 767px) {
.shop-header.vorm-nova .ghost { padding-inline: 8px; }
.shop-header.vorm-nova .shop-kop-rechts { gap: 4px; }
.shop-usp.vorm-nova .nova-mid { gap: 18px; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; }
.shop-usp.vorm-nova .nova-mid::-webkit-scrollbar { display: none; }
.winkel.nova .shop-lijstbalk { gap: 9px; }
.winkel.nova .shop-inveld { flex: 1 0 100%; }
.winkel.nova .shop-select { flex: 1 1 auto; }
.winkel.nova .klant-kop { gap: 12px; }
.winkel.nova .klant-kaart { width: 54px; height: 54px; }
.winkel.nova .klant-wie h1 { font-size: 19.8px; }
.winkel.nova .klant-tabelvak { margin-inline: -14.4px; }
.winkel.nova .klant-kaart-blok { padding: 14.4px; }
.winkel.nova .klant-telling { max-width: none; }
.winkel.nova .pdp-koopregel { flex-wrap: wrap; }
.winkel.nova .pdp-koop { flex: 1 0 100%; }
.winkel.nova .shop-tegels.als-lijst .shop-kaart { grid-template-columns: 88px minmax(0, 1fr); }
.winkel.nova .shop-tegels.als-lijst .nova-voet { grid-column: 1 / -1; grid-row: auto; align-items: stretch; flex-direction: row; justify-content: space-between; }
}
@media (max-width: 520px) {
.winkel.nova .shop-tegels { grid-template-columns: minmax(0, 1fr); }
.winkel.nova .shop-lijsttitel { font-size: 23.4px; line-height: 30px; }
.winkel.nova .pdp-titelregel h1 { font-size: 19.8px; line-height: 26px; }
.winkel.nova .klant-uit { width: 100%; order: 3; }
.winkel.nova .klant-kop { flex-wrap: wrap; }
}
.winkel.nova .klant-regelnaam { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.shop-header.vorm-nova .kop-account { gap: 7px; }
.shop-header.vorm-nova .kop-account svg { flex: none; }
@media (min-width: 0px) {
.shop-header.vorm-nova .kop-account .kop-woord { display: none; }
.shop-header.vorm-nova .kop-account { width: 39.6px; justify-content: center; padding-inline: 0; }
}
@media (max-width: 767px) {
.shop-header.vorm-nova .kop-huur,
.shop-header.vorm-nova .kop-hulp { display: none; }
}
.shop-footer.vorm-nova {
background: linear-gradient(var(--nova-lijn), #fff);
border-top: 0;
color: var(--nova-inkt);
padding: 43.2px 0 0;
}
.shop-footer.vorm-nova .shop-voet-naam {
padding-inline: var(--nova-zij);
max-width: var(--site-breedte);
margin-inline: auto;
padding-bottom: 43.2px;
text-align: center;
font-size: 18px;
line-height: 27px;
font-weight: 700;
}
.shop-footer.vorm-nova .shop-footer-in {
max-width: var(--site-breedte);
margin-inline: auto;
padding: 0 var(--nova-zij);
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 43.2px clamp(28.8px, calc(-170px + 21.6vw), 86.4px);
align-items: start;
font-size: 13.5px;
line-height: 20.26px;
}
@media (max-width: 1023px) {
.shop-footer.vorm-nova .shop-footer-in { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 639px) {
.shop-footer.vorm-nova .shop-footer-in { grid-template-columns: 1fr; text-align: center; }
}
.shop-footer.vorm-nova .shop-footer-in > div > div:first-child,
.shop-footer.vorm-nova .shop-voet-kop {
font-size: 16.2px;
line-height: 24.3px;
font-weight: 700;
color: var(--nova-inkt);
margin-bottom: 14.4px;
}
.shop-footer.vorm-nova a { color: var(--nova-inkt); text-decoration: none; }
.shop-footer.vorm-nova a:hover { text-decoration: underline; }
.shop-footer.vorm-nova .shop-footer-in > div > div > a {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 3.6px 0;
font-size: 13.5px;
font-weight: 400;
}
.shop-footer.vorm-nova .shop-footer-in > div > div > a::after {
content: "";
width: 8px;
height: 8px;
background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'><path d='M2 1l3 3-3 3' fill='none' stroke='%23333' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat center / contain;
opacity: .5;
flex: none;
}
.shop-footer.vorm-nova .shop-voet-contact { display: flex; flex-direction: column; gap: 5.4px; }
.shop-footer.vorm-nova .shop-voet-contact a::after { content: none; }
.shop-footer.vorm-nova .shop-voet-contact .sterk { font-weight: 700; }
.shop-footer.vorm-nova .shop-voet-adres { display: flex; flex-direction: column; margin-top: 14.4px; }
.shop-footer.vorm-nova .shop-voet-onder {
padding-inline: var(--nova-zij);
max-width: var(--site-breedte);
margin-inline: auto;
border-top: 1px solid var(--nova-lijn);
margin-top: 43.2px;
background: none;
}
.shop-footer.vorm-nova .shop-voet-onder-in {
padding: 28.8px 0;
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
flex-wrap: wrap;
font-size: 12.6px;
line-height: 18.9px;
color: color-mix(in srgb, var(--nova-inkt) 60%, #fff);
max-width: none;
}
@media (max-width: 767px) {
.shop-footer.vorm-nova .shop-footer-in { gap: 28.8px; }
.shop-footer.vorm-nova .shop-voet-onder-in { padding: 21.6px 0; }
}
.winkel.nova .wagen-terug {
display: inline-flex;
align-items: center;
gap: 7.2px;
margin-top: 10.8px;
font-size: 13.5px;
font-weight: 500;
color: var(--nova-accent);
text-decoration: none;
}
.winkel.nova .wagen-terug:hover { text-decoration: underline; }
.winkel.nova .wagen-titel {
font-size: 28.8px;
line-height: 36px;
font-weight: 700;
margin: 10.8px 0 21.6px;
}
.winkel.nova .wagen-aantal {
display: block;
font-size: 12px;
font-weight: 500;
color: var(--nova-gedempt);
margin-top: 3.6px;
}
.winkel.nova .wagen-vlak {
display: grid;
grid-template-columns: minmax(0, 1fr) 340px;
gap: 28.8px;
align-items: start;
}
.wagen-regel.vorm-novas { min-width: 0; }
.wagen-regel.vorm-novas .wagen-regel {
display: flex;
align-items: center;
gap: 14.4px;
padding: 16px 0;
border-bottom: 1px solid var(--nova-lijn);
background: none;
}
.wagen-regel.vorm-novas .wagen-regel img,
.wagen-regel.vorm-novas .wagen-regel > div:first-child {
width: 79.2px !important;
height: 79.2px !important;
object-fit: contain;
border-radius: var(--nova-r-klein);
border: 1px solid var(--nova-lijn);
background: #fff;
flex: none;
}
.wagen-regel.vorm-novas .wagen-kern { flex: 1; min-width: 0; }
.winkel.nova .wagen-telling {
background: #fff;
border: 1px solid var(--nova-lijn);
border-radius: var(--nova-r-kaart);
padding: 18px;
display: flex;
flex-direction: column;
gap: 7.2px;
font-size: 13.5px;
position: sticky;
top: calc(var(--nova-balk-h) + 14.4px);
}
.winkel.nova .wagen-afrekenen { width: 100%; justify-content: center; margin-top: 10.8px; }
.winkel.nova .wagen-vraag {
text-align: center;
font-size: 12.6px;
color: var(--nova-gedempt);
text-decoration: underline;
text-underline-offset: 3px;
}
.winkel.nova .wagen-usps {
display: flex;
flex-direction: column;
gap: 10px;
margin-top: 10.8px;
padding-top: 14.4px;
border-top: 1px solid var(--nova-lijn);
font-size: 12.6px;
}
.winkel.nova .wagen-usps .usp-punt { gap: 8px; }
.winkel.nova .wagen-usps .usp-punt svg { color: var(--nova-groen); flex: none; }
.winkel.nova .wagen-usps .usp-punt span::before { content: none; }
@media (max-width: 900px) {
.winkel.nova .wagen-vlak { grid-template-columns: minmax(0, 1fr); }
.winkel.nova .wagen-telling { position: static; }
}
.winkel.nova .pdp-betalen { display: flex; flex-wrap: wrap; gap: 7.2px; margin-top: 3.6px; }
.winkel.nova .pdp-betaallogo { height: 16px; width: auto; max-width: 48px; padding: 4px 6px; border: 1px solid var(--nova-lijn); border-radius: var(--nova-r-mini); background: #fff; box-sizing: content-box; display: block; }
.winkel.nova .pdp-betaalwijze {
display: inline-flex;
align-items: center;
height: 30px;
padding: 0 10px;
border: 1px solid var(--nova-lijn);
border-radius: var(--nova-r-klein);
background: #fff;
font-size: 11.7px;
font-weight: 600;
color: var(--nova-gedempt);
white-space: nowrap;
}
.winkel.nova .pdp-koopbalk {
position: fixed;
inset-inline: 0;
bottom: 0;
z-index: 60;
background: #fff;
border-top: 1px solid var(--nova-lijn);
box-shadow: 0 -8px 24px rgba(15, 17, 20, .08);
transform: translate3d(0, 100%, 0);
transition: transform .25s ease;
padding-bottom: env(safe-area-inset-bottom, 0);
will-change: transform;
isolation: isolate;
}
.winkel.nova .pdp-koopbalk.aan { transform: translate3d(0, 0, 0); }
@media (prefers-reduced-motion: reduce) { .winkel.nova .pdp-koopbalk { transition: none; } }
@media print { .winkel.nova .pdp-koopbalk { display: none; } }
.winkel.nova .pdp-koopbalk-in {
max-width: var(--site-breedte);
margin-inline: auto;
padding: 10px var(--nova-zij);
display: flex;
align-items: center;
gap: clamp(10.8px, -3.6px + 1.5625vw, 18px);
min-height: 61.2px;
}
.winkel.nova .pdp-koopbalk-in img {
width: 50.4px; height: 50.4px; flex: none;
object-fit: contain;
border: 1px solid var(--nova-lijn);
border-radius: var(--nova-r-klein);
background: #fff;
}
.winkel.nova .pdp-koopbalk-naam { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.winkel.nova .pdp-koopbalk-naam b {
font-size: 14px; font-weight: 600;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.winkel.nova .pdp-koopbalk-naam span { font-size: 13.5px; font-weight: 700; }
.winkel.nova .pdp-koopbalk-naam .klein { font-size: 11.5px; font-weight: 400; color: var(--nova-flets); }
.winkel.nova .pdp-koopbalk .pdp-koop { flex: none; }
@media (max-width: 640px) {
.winkel.nova .pdp-koopbalk-in img { display: none; }
.winkel.nova .pdp-koopbalk-naam b { display: none; }
.winkel.nova .pdp-koopbalk .pdp-koop { flex: 1; }
}
.shop-taalkiezer { position: relative; flex: none; }
.shop-taalkiezer > summary {
height: 39.6px;
padding: 0 8px 0 9px;
display: inline-flex;
align-items: center;
gap: 6px;
border-radius: var(--nova-r-klein);
font-size: 12.6px;
font-weight: 500;
color: var(--nova-inkt);
cursor: pointer;
list-style: none;
white-space: nowrap;
}
.shop-taalkiezer > summary::-webkit-details-marker { display: none; }
.shop-taalkiezer > summary::marker { content: ""; }
.shop-taalkiezer > summary:hover { background: var(--nova-vlak); }
.shop-taalkiezer[open] > summary { background: var(--nova-vlak); }
.shop-taalkiezer .taal-pijl { opacity: .55; transition: transform .15s ease; }
.shop-taalkiezer[open] .taal-pijl { transform: rotate(180deg); }
.taal-vlag {
width: 21px;
height: 15px;
flex: none;
border-radius: var(--nova-r-mini);
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12);
}
.shop-taallade {
position: absolute;
top: calc(100% + 6px);
right: 0;
z-index: 80;
min-width: 186px;
padding: 6px;
background: #fff;
border: 1px solid var(--nova-lijn);
border-radius: var(--nova-r-kaart);
box-shadow: 0 18px 40px rgba(0, 0, 0, .12);
display: flex;
flex-direction: column;
gap: 1px;
}
.taal-regel {
display: flex;
align-items: center;
gap: 9px;
padding: 8px 10px;
border-radius: var(--nova-r-klein);
font-size: 13.5px;
color: var(--nova-inkt);
text-decoration: none;
white-space: nowrap;
}
.taal-regel .taal-naam { flex: 1; }
.taal-regel:hover { background: var(--nova-vlak); }
.taal-regel.aan { font-weight: 600; color: var(--nova-accent); }
@media (max-width: 1099px) {
.shop-header.vorm-nova .shop-taalkiezer { display: inline-block; }
.shop-taalkiezer > summary .taal-code { display: none; }
}
.shop-zoekpaginas.vorm-nova {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 9px 18px;
padding: 12px 18px;
margin-bottom: 21.6px;
background: #fff;
border: 1px solid var(--nova-lijn);
border-radius: var(--nova-r-kaart);
}
.shop-zoekpaginas.vorm-nova .eyebrow {
font-size: 11.5px;
font-weight: 600;
letter-spacing: .04em;
text-transform: uppercase;
color: var(--nova-gedempt);
}
.shop-zoekpaginas.vorm-nova a {
font-size: 13.5px;
color: var(--nova-accent);
text-decoration: underline;
text-underline-offset: 3px;
}
.shop-zoekpaginas.vorm-nova a:hover { color: var(--nova-inkt); }
.winkel.nova .klant-lijstkop {
display: flex;
align-items: center;
gap: 14.4px;
flex-wrap: wrap;
margin-bottom: 18px;
}
.winkel.nova .klant-lijstkop h1 { font-size: 23.4px; line-height: 1.25; font-weight: 700; margin: 0; }
.winkel.nova .klant-hernoem { display: flex; gap: 7.2px; margin: 0; }
.winkel.nova .klant-hernoem input {
height: 36px;
padding: 0 12px;
background: #fff;
border: 1px solid var(--nova-lijn);
border-radius: var(--nova-r-klein);
font-size: 13.5px;
}
.winkel.nova .klant-alles { margin: 0 0 0 auto; }
.winkel.nova .klant-minifoto {
width: 50.4px; height: 50.4px; object-fit: contain;
border: 1px solid var(--nova-lijn); border-radius: var(--nova-r-klein); background: #fff;
display: block;
}
.winkel.nova .klant-veld textarea {
padding: 10px 14.4px;
background: #fff;
border: 1px solid var(--nova-lijn);
border-radius: var(--nova-r-klein);
font-size: 14px;
font-family: inherit;
color: var(--nova-inkt);
resize: vertical;
min-width: 0;
}
.winkel.nova .klant-veld textarea:focus { outline: 2px solid var(--nova-accent); outline-offset: -1px; }
.winkel.nova .klant-tabel a { color: inherit; text-decoration: none; }
.winkel.nova .klant-tabel a:hover { text-decoration: underline; }
.winkel.nova .klant-gesprek { display: flex; flex-direction: column; gap: 12px; margin: 18px 0; }
.winkel.nova .klant-bericht {
max-width: 78%;
background: var(--nova-vlak);
border: 1px solid var(--nova-lijn);
border-radius: 12px 12px 12px 4px;
padding: 10px 14px;
}
.winkel.nova .klant-bericht.van-mij {
align-self: flex-end;
border-radius: 12px 12px 4px 12px;
background: color-mix(in srgb, var(--nova-accent) 8%, #fff);
border-color: color-mix(in srgb, var(--nova-accent) 22%, #fff);
}
.winkel.nova .klant-bericht p { margin: 0; font-size: 13.5px; line-height: 1.6; white-space: pre-line; }
.winkel.nova .klant-bericht span { display: block; margin-top: 4px; font-size: 11.5px; color: var(--nova-gedempt); }
.winkel.nova .klant-antwoord {
display: flex;
gap: 10.8px;
align-items: flex-end;
padding-top: 14.4px;
border-top: 1px solid var(--nova-lijn);
}
.winkel.nova .klant-antwoord textarea {
flex: 1;
min-width: 0;
padding: 10px 14.4px;
background: #fff;
border: 1px solid var(--nova-lijn);
border-radius: var(--nova-r-klein);
font-size: 14px;
font-family: inherit;
color: var(--nova-inkt);
resize: vertical;
}
.winkel.nova .klant-antwoord textarea:focus { outline: 2px solid var(--nova-accent); outline-offset: -1px; }
.shop-lade.vorm-nova { background: #fff; }
.shop-lade.vorm-nova .shop-lade-kop {
min-height: 54px;
padding: 9px 14.4px;
background: #fff;
border-bottom: 1px solid var(--nova-lijn);
display: flex;
align-items: center;
gap: 10.8px;
}
.shop-lade.vorm-nova .shop-lade-titel { flex: 1; text-align: center; font-size: 16px; font-weight: 700; }
.shop-lade.vorm-nova .shop-lade-sluit,
.shop-lade.vorm-nova .shop-lade-terug {
width: 39.6px;
height: 39.6px;
flex: none;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid var(--nova-lijn);
border-radius: var(--nova-r-klein);
background: #fff;
color: var(--nova-inkt);
font-size: 20px;
line-height: 1;
cursor: pointer;
}
.shop-lade.vorm-nova .shop-lade-sluit:hover,
.shop-lade.vorm-nova .shop-lade-terug:hover { background: var(--nova-vlak); }
.shop-lade.vorm-nova .shop-lade-lijst { padding: 6px 0 36px; }
.shop-lade.vorm-nova .shop-lade-regel {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 14px 18px;
border: 0;
border-bottom: 1px solid var(--nova-lijn);
background: none;
font-size: 15px;
color: var(--nova-inkt);
text-align: left;
text-decoration: none;
cursor: pointer;
}
.shop-lade.vorm-nova .shop-lade-regel:hover { background: var(--nova-vlak); }
.shop-lade.vorm-nova .shop-lade-pijl { color: var(--nova-flets); font-size: 20px; line-height: 1; }
.shop-zijbalk.vorm-nova form.card { padding: 0 !important; }
.shop-zijbalk.vorm-nova .eyebrow {
font-size: 11.5px;
font-weight: 600;
letter-spacing: .04em;
text-transform: uppercase;
color: var(--nova-gedempt);
padding: 14.4px 14.4px 9px !important;
}
.shop-zijbalk.vorm-nova label {
display: flex;
align-items: center;
gap: 9px;
padding: 6px 2px;
font-size: 13.5px;
cursor: pointer;
}
.shop-zijbalk.vorm-nova input[type=checkbox] {
width: 16px;
height: 16px;
flex: none;
accent-color: var(--nova-accent);
}
.shop-zijbalk.vorm-nova .btn-primary {
background: var(--nova-accent);
color: var(--nova-accent-op);
border: 0;
border-radius: var(--nova-r-klein);
height: 39.6px;
font-size: 13.5px;
font-weight: 600;
cursor: pointer;
}
.shop-zijbalk.vorm-nova form.card > div:not(.eyebrow) { border-top: 1px solid var(--nova-lijn); }
.shop-zijbalk.vorm-nova form.card > div:first-of-type { border-top: 0; }
.wagen-regel.vorm-nova input[type=number] {
width: 72px;
height: 39.6px;
text-align: center;
background: #fff;
border: 1px solid var(--nova-lijn);
border-radius: var(--nova-r-klein);
font-size: 14px;
color: var(--nova-inkt);
}
.wagen-regel.vorm-nova .wagen-totaal { font-size: 15px; font-weight: 700; min-width: 88px; text-align: right; }
.wagen-regel.vorm-nova .wagen-kern > div:first-child { font-size: 14.4px; font-weight: 600; }
.wagen-regel.vorm-nova .wagen-kern .cell-sub { font-size: 12.6px; color: var(--nova-gedempt); }
.shop-stappen.vorm-nova {
display: flex;
align-items: center;
gap: 9px;
font-size: 12.6px;
color: var(--nova-gedempt);
margin-bottom: 14.4px;
}
.shop-stappen.vorm-nova b { color: var(--nova-inkt); }
.shop-stappen.vorm-nova i { color: var(--nova-flets); font-style: normal; }
.pdp-koopvorm.vorm-nova select,
.winkel.nova .shop-pdp-info select {
height: 44px;
padding: 0 32px 0 14.4px;
background: #fff;
border: 1px solid var(--nova-lijn);
border-radius: var(--nova-r-klein);
font-size: 14px;
color: var(--nova-inkt);
text-align: left;
cursor: pointer;
}
.pdp-koopvorm.vorm-nova .field { display: flex; flex-direction: column; gap: 5px; }
.pdp-koopvorm.vorm-nova .field label { font-size: 12.6px; color: var(--nova-gedempt); }
.winkel.nova .pdp-verhaal { margin-top: 21.6px; position: relative; }
.winkel.nova .pdp-verhaal-tekst {
font-size: 16px;
line-height: 25.6px;
color: #3C4657;
overflow-wrap: anywhere;
}
.winkel.nova .pdp-verhaal-tekst > :first-child { margin-top: 0; }
.winkel.nova .pdp-verhaal-tekst > :last-child { margin-bottom: 0; }
.winkel.nova .pdp-verhaal-tekst p { margin: 0 0 14.4px; }
.winkel.nova .pdp-verhaal-tekst h3 { font-size: 17px; line-height: 1.3; font-weight: 700; color: var(--nova-inkt); margin: 21.6px 0 7.2px; }
.winkel.nova .pdp-verhaal-tekst ul { margin: 0 0 14.4px; padding-left: 21.6px; }
.winkel.nova .pdp-verhaal-tekst li { margin: 0 0 3.6px; }
.winkel.nova .pdp-verhaal.gevouwen .pdp-verhaal-tekst {
max-height: 232px;
overflow: hidden;
-webkit-mask-image: linear-gradient(#000 62%, transparent);
mask-image: linear-gradient(#000 62%, transparent);
}
.winkel.nova .pdp-meer {
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: 9px;
padding: 0;
border: 0;
background: none;
font-size: 14.4px;
line-height: 21.6px;
font-weight: 600;
color: var(--winkel-accent);
cursor: pointer;
}
.winkel.nova .pdp-meer svg { transition: transform .15s ease; }
.winkel.nova .pdp-verhaal:not(.gevouwen) .pdp-meer svg { transform: rotate(180deg); }
.winkel.nova .pdp-verhaal.gevouwen .woord-minder,
.winkel.nova .pdp-verhaal:not(.gevouwen) .woord-meer { display: none; }
.winkel.nova .pdp-specblok { margin-top: 32.4px; }
.winkel.nova .pdp-specblok h2 {
font-size: 16.2px;
font-weight: 700;
margin: 0 0 14.4px;
}
.winkel.nova .pdp-spectabel { margin: 0; }
.winkel.nova .pdp-specregel {
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
padding: 12px 0;
border-bottom: 1px solid var(--nova-lijn);
font-size: 13.5px;
}
.winkel.nova .pdp-specregel dt { margin: 0; color: var(--nova-inkt); }
.winkel.nova .pdp-specregel dd { margin: 0; text-align: right; }
.winkel.nova .pdp-specregel dd a {
color: var(--nova-inkt);
text-decoration: underline;
text-underline-offset: 3px;
}
.winkel.nova .pdp-specregel dd a:hover { color: var(--nova-accent); }
.winkel.nova a.pdp-kenmerk { text-decoration: none; color: inherit; }
.winkel.nova a.pdp-kenmerk:hover { background: var(--nova-vlak); }
.winkel.nova .pdp-kenmerk dd { display: inline-flex; align-items: center; gap: 8px; }
.winkel.nova .pdp-kenmerk dd svg { color: var(--nova-flets); flex: none; }
.winkel.nova .pdp-hulp {
margin-top: 21.6px;
padding: 18px;
background: var(--nova-vlak);
border: 1px solid var(--nova-lijn);
border-radius: var(--nova-r-kaart);
}
.winkel.nova .pdp-hulp h2 { font-size: 16px; font-weight: 700; margin: 0 0 2px; }
.winkel.nova .pdp-hulp p { margin: 0; font-size: 13.5px; color: var(--nova-gedempt); }
.winkel.nova .pdp-hulp-tel {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 12px;
font-size: 16px;
font-weight: 700;
color: var(--nova-inkt);
text-decoration: none;
}
.winkel.nova .pdp-hulp-tel:hover { color: var(--nova-accent); }
.winkel.nova .pdp-hulp-tijd { margin-top: 2px; font-size: 12.6px; }
.winkel.nova .pdp-hulp-mail {
display: inline-block;
margin-top: 9px;
font-size: 13.5px;
color: var(--nova-accent);
text-decoration: underline;
text-underline-offset: 3px;
}
.winkel.nova .shop-rij { margin-top: 43.2px; }
.winkel.nova .shop-rij h2 { font-size: 30.24px; line-height: 45.36px; font-weight: 700; margin: 0 0 18px; }
.winkel.nova .klant-acties { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.winkel.nova .klant-acties li {
display: flex;
align-items: center;
gap: 10.8px;
padding: 10px 0;
border-bottom: 1px solid var(--nova-lijn);
font-size: 13.5px;
}
.winkel.nova .klant-acties li:last-child { border-bottom: 0; }
.winkel.nova .klant-acties .stip {
width: 7px; height: 7px; flex: none;
border-radius: 999px;
background: var(--nova-gedempt);
}
.winkel.nova .klant-acties li.urgent .stip { background: #B42318; }
.winkel.nova .klant-acties li.urgent .klant-actie-tekst { color: #B42318; font-weight: 600; }
.winkel.nova .klant-actie-tekst { flex: 1; }
.winkel.nova .klant-balk {
height: 10px;
border-radius: 999px;
background: var(--nova-tint);
overflow: hidden;
}
.winkel.nova .klant-balk span {
display: block;
height: 100%;
background: var(--nova-accent);
border-radius: 999px;
}
.winkel.nova .klant-balk-uitleg { margin: 10px 0 0; font-size: 13.5px; color: var(--nova-gedempt); }
.winkel.nova .klant-balk-uitleg b { color: var(--nova-inkt); }
.winkel.nova .klant-jaar { display: flex; gap: 36px; flex-wrap: wrap; }
.winkel.nova .klant-jaar .getal { display: block; font-size: 25.2px; font-weight: 700; line-height: 1.1; }
.winkel.nova .klant-jaar .naam { display: block; font-size: 12.6px; color: var(--nova-gedempt); }
.winkel.nova .klant-offertevraag {
display: flex;
align-items: center;
justify-content: space-between;
gap: 21.6px;
flex-wrap: wrap;
margin-top: 18px;
padding: 21.6px;
background: var(--nova-vlak);
border: 1px solid var(--nova-lijn);
border-radius: var(--nova-r-kaart);
}
.winkel.nova .klant-offertevraag h2 { font-size: 16px; font-weight: 700; margin: 0 0 3px; }
.winkel.nova .klant-offertevraag p { margin: 0; font-size: 13.5px; color: var(--nova-gedempt); max-width: 62ch; }
.winkel.nova .klant-kaart-blok .shop-tegels { margin-top: 14.4px; }
.winkel.nova .shop-main:has(> .offerte-vraag) { padding: 0; }
.winkel.nova:has(> .offerte-vraag), .winkel.nova:has(.offerte-vraag) .shop-footer { margin-top: 0; }
.winkel.nova .offerte-vraag { display: grid; grid-template-columns: 1fr 1fr; margin: 0; min-height: 700px; }
.winkel.nova .offerte-gegevens { background: #fff; padding: 36px 28.8px 57.6px var(--nova-zij); }
.winkel.nova .offerte-kruimels { margin: 0 0 43.2px; }
.winkel.nova .offerte-vraag h1 { font-size: 37.44px; line-height: 48.6px; font-weight: 700; margin: 0 0 7.2px; }
.winkel.nova .offerte-intro { font-size: 13.5px; line-height: 1.6; color: var(--nova-gedempt); margin: 0 0 28.8px; max-width: 640px; }
.winkel.nova .offerte-vraag h2 { font-size: 18px; line-height: 27px; font-weight: 700; margin: 0 0 14.4px; }
.winkel.nova .offerte-kop2 { margin-top: 28.8px !important; }
.winkel.nova .offerte-velden { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 21.6px 14.4px; max-width: 640px; }
.winkel.nova .offerte-velden .klant-veld { grid-column: span 8; }
.winkel.nova .offerte-velden .klant-veld.ov-aanhef { grid-column: span 2; max-width: none; }
.winkel.nova .offerte-velden .klant-veld.ov-naam { grid-column: span 3; }
.winkel.nova .offerte-velden .klant-veld.ov-zes { grid-column: span 6; }
.winkel.nova .offerte-velden .klant-veld.ov-twee { grid-column: span 2; }
.winkel.nova .offerte-upload { grid-column: span 8; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14.4px; padding: 14.4px; border: 1px dashed var(--nova-lijn); border-radius: var(--nova-r-klein); cursor: pointer; }
.winkel.nova .offerte-upload input { position: absolute; opacity: 0; width: 0; height: 0; }
.winkel.nova .offerte-upload-icoon { color: var(--nova-inkt); display: grid; }
.winkel.nova .offerte-upload-tekst { display: flex; flex-direction: column; font-size: 13.5px; }
.winkel.nova .offerte-upload-tekst small { font-size: 12px; color: var(--nova-gedempt); }
.winkel.nova .offerte-upload-knop { padding: 10.8px 21.6px; background: var(--nova-vlak, #f6f6f6); border-radius: var(--nova-r-klein); font-size: 13.5px; font-weight: 600; }
.winkel.nova .offerte-upload:hover { border-color: var(--nova-inkt); }
.winkel.nova .offerte-bericht { width: 100%; max-width: 640px; min-height: 200px; border: 1px solid var(--nova-lijn); border-radius: var(--nova-r-klein); padding: 12.6px; font-size: 13.5px; resize: vertical; }
.winkel.nova .offerte-regels { background: #f6f6f6; padding: 43.2px 28.8px 57.6px; position: sticky; top: 0; align-self: stretch; }
.winkel.nova .offerte-regels > * { max-width: 640px; }
.winkel.nova .offerte-leeg { font-size: 13.5px; color: var(--nova-gedempt); background: #fff; border: 1px solid var(--nova-lijn); border-radius: var(--nova-r-klein); padding: 14.4px; }
@media (max-width: 899px) {
.winkel.nova .offerte-vraag { grid-template-columns: 1fr; }
.winkel.nova .offerte-gegevens { padding: 21.6px var(--nova-zij) 36px; }
.winkel.nova .offerte-regels { position: static; padding: 28.8px var(--nova-zij) 43.2px; }
.winkel.nova .offerte-velden .klant-veld.ov-aanhef, .winkel.nova .offerte-velden .klant-veld.ov-naam, .winkel.nova .offerte-velden .klant-veld.ov-zes, .winkel.nova .offerte-velden .klant-veld.ov-twee { grid-column: span 8; }
}
.winkel.nova .offerte-versturen { margin-top: 21.6px; }
.winkel.nova .offerte-versturen .pdp-koop { width: 100%; }
.winkel.nova .offerte-regel {
position: relative;
display: flex;
align-items: center;
gap: 14.4px;
padding: 12px 0;
border-bottom: 1px solid var(--nova-lijn);
}
.winkel.nova .offerte-regel:last-child { border-bottom: 0; padding-bottom: 0; }
.winkel.nova .offerte-regel img,
.winkel.nova .offerte-geenfoto {
width: 54px; height: 54px; flex: none;
object-fit: contain;
background: #fff;
border: 1px solid var(--nova-lijn);
border-radius: var(--nova-r-klein);
}
.winkel.nova .offerte-regel-naam { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 13.5px; }
.winkel.nova .offerte-aantal { display: flex; flex-direction: column; gap: 4px; flex: none; }
.winkel.nova .offerte-aantal span { font-size: 11.5px; color: var(--nova-gedempt); }
.winkel.nova .offerte-aantal input {
width: 78px;
height: 39.6px;
padding: 0 10px;
text-align: center;
background: #fff;
border: 1px solid var(--nova-lijn);
border-radius: var(--nova-r-klein);
font-size: 14px;
}
.winkel.nova .offerte-nr { display: none; }
.winkel.nova .offerte-gegevens .klant-vorm { gap: 14.4px; }
@media (max-width: 560px) {
.winkel.nova .offerte-regel { flex-wrap: wrap; }
.winkel.nova .offerte-aantal { width: 100%; flex-direction: row; align-items: center; gap: 9px; }
}
.winkel.nova .offerte-leeg {
max-width: 760px;
margin: 0 0 18px;
padding: 12px 16px;
background: var(--nova-vlak);
border: 1px solid var(--nova-lijn);
border-radius: var(--nova-r-kaart);
font-size: 13.5px;
}
.winkel.nova .offerte-leeg a { color: var(--nova-accent); text-decoration: underline; text-underline-offset: 3px; margin-left: 6px; }
.winkel.nova .pdp-oordeel {
display: inline-flex;
align-items: center;
gap: 8px;
margin: 0 0 8px;
font-size: 13.5px;
color: var(--nova-inkt);
text-decoration: none;
width: fit-content;
}
.winkel.nova .pdp-oordeel:hover { opacity: .7; }
.winkel.nova .pdp-oordeel b { font-weight: 600; }
.winkel.nova .pdp-oordeel span { color: color-mix(in srgb, var(--nova-inkt) 60%, #fff); }
.winkel.nova .pdp-oordeel .nova-sterren .oordeel { display: none; }
.winkel.nova .pdp-oordelen { margin-top: 28.8px; }
.winkel.nova .pdp-oordelen-titel { display: block; font-size: 20px; font-weight: 700; line-height: 1.3; margin: 0 0 8px; }
.winkel.nova .pdp-oordelen-kop { display: flex; align-items: center; gap: 8px; padding-bottom: 16px; margin: 0; border-bottom: 1px solid var(--nova-lijn); }
.winkel.nova .pdp-oordelen-kop .cijfer { font-size: 24px; font-weight: 800; line-height: 1; }
.winkel.nova .pdp-oordelen-kop .hoeveel { font-size: 12px; color: var(--nova-flets); }
.winkel.nova .pdp-oordelen-kop .nova-sterren .oordeel { display: none; }
.winkel.nova .pdp-oordelen-leeg { font-size: 13.5px; color: var(--nova-gedempt); margin: 0; max-width: 62ch; }
.winkel.nova .pdp-oordelen-leeg a { color: var(--nova-accent); text-decoration: underline; text-underline-offset: 3px; }
.winkel.nova .pdp-oordelen-lijst { display: flex; flex-direction: column; }
.winkel.nova .pdp-oordeel-item { display: flex; flex-direction: column; gap: 4px; padding: 16px 0; border-bottom: 1px solid var(--nova-lijn); }
.winkel.nova .pdp-oordeel-item header { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.winkel.nova .pdp-oordeel-item header strong { font-size: 15px; font-weight: 700; }
.winkel.nova .pdp-oordeel-item .datum { margin-left: auto; font-size: 12.5px; color: var(--nova-flets); }
.winkel.nova .pdp-oordeel-item p { margin: 0; font-size: 14.5px; line-height: 1.6; white-space: pre-line; }
.winkel.nova .pdp-oordeel-item .wie { font-size: 13px; color: var(--nova-flets); }
.winkel.nova .pdp-oordeel-item .nova-sterren .oordeel { display: none; }
.winkel.nova .pdp-oordelen-vink { position: absolute; opacity: 0; pointer-events: none; }
.winkel.nova .pdp-oordeel-item.extra { display: none; }
.winkel.nova .pdp-oordelen-vink:checked ~ .pdp-oordeel-item.extra { display: flex; }
.winkel.nova .pdp-oordelen-meer { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; padding: 0; border: 0; background: none; font-size: 14.5px; font-weight: 600; color: var(--nova-accent); cursor: pointer; }
.winkel.nova .pdp-oordelen-meer:hover { background: none; text-decoration: underline; text-underline-offset: 3px; }
.winkel.nova .pdp-oordelen-meer svg { transition: transform .15s ease; }
.winkel.nova .pdp-oordelen-vink:checked ~ .pdp-oordelen-meer svg { transform: rotate(180deg); }
.winkel.nova .pdp-oordelen-vink:not(:checked) ~ .pdp-oordelen-meer .woord-minder,
.winkel.nova .pdp-oordelen-vink:checked ~ .pdp-oordelen-meer .woord-meer { display: none; }
.winkel.nova .pdp-oordeel-schrijf { margin-top: 16px; }
.winkel.nova .pdp-oordeel-schrijf > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 600; color: var(--nova-accent); }
.winkel.nova .pdp-oordeel-schrijf > summary::-webkit-details-marker { display: none; }
.winkel.nova .pdp-oordeel-schrijf > summary:hover { text-decoration: underline; text-underline-offset: 3px; }
.winkel.nova .pdp-oordeel-schrijf > summary::after { content: ""; width: 7px; height: 7px; border-right: 1.8px solid currentColor; border-bottom: 1.8px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .15s ease; }
.winkel.nova .pdp-oordeel-schrijf[open] > summary::after { transform: translateY(2px) rotate(225deg); }
.winkel.nova .pdp-oordeel-vorm { margin-top: 14.4px; }
.winkel.nova .pdp-oordeel-vorm .klant-vorm { margin-top: 14.4px; }
@media (min-width: 900px) {
.winkel.nova .shop-pdp-info {
position: sticky;
top: calc(var(--nova-balk-h) + 14.4px);
}
}
.winkel.nova .site-contactkaart { margin-block: 21.6px; }
.winkel.nova .site-gegevenskaarten { margin-block: 21.6px; }
.winkel.nova .site-gegevenskaarten-in { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14.4px; }
.winkel.nova .site-gegevenskaart {
background: var(--card, #fff);
border-radius: var(--hoek, 9px);
padding: 28.8px;
display: grid;
gap: 3.6px;
}
.winkel.nova .site-gegevenskop { font-size: 13.5px; font-weight: 700; }
.winkel.nova .site-gegevenswaarde { font-size: 18px; font-weight: 600; line-height: 27px; }
@media (max-width: 700px) {
.winkel.nova .site-gegevenskaarten-in { grid-template-columns: minmax(0, 1fr); }
.winkel.nova .site-gegevenskaart { padding: 21.6px; }
}
.winkel.nova .site-contactkaart.met-band {
background: var(--nova-vlak);
padding-block: 28.8px;
margin-block: 0;
box-shadow: 0 0 0 100vmax var(--nova-vlak);
clip-path: inset(0 -100vmax);
}
.winkel.nova .site-contactadres.vorm-gelabeld { display: grid; gap: 10.8px; }
.winkel.nova .site-contactadres.vorm-gelabeld .site-adreskop { font-weight: 700; margin-top: 3.6px; }
.winkel.nova .site-contactadres.vorm-gelabeld b { font-weight: 400; }
.winkel.nova .site-contactadres.vorm-gelabeld a { color: inherit; text-decoration: none; }
.winkel.nova .site-contactadres.vorm-gelabeld a:hover { text-decoration: underline; }
.winkel.nova .site-contactkaart-in {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 0;
background: #fff;
border: 0;
border-radius: var(--nova-r-klein);
padding: 3.6px;
box-shadow: 0 1px 3px rgba(16, 24, 40, .08), 0 1px 2px rgba(16, 24, 40, .04);
overflow: hidden;
align-items: stretch;
}
.winkel.nova .site-contactrechts {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 57.6px;
padding: 28.8px;
}
.winkel.nova .site-contactfotovak {
position: relative;
display: block;
min-height: 280px;
border-radius: var(--nova-r-mini);
overflow: hidden;
background: var(--nova-vlak);
}
.winkel.nova .site-contactfoto {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.winkel.nova .site-contactwie { padding: 0; }
.winkel.nova .site-contactwie h2 {
font-size: 21.6px;
font-weight: 700;
line-height: 32.4px;
margin: 0 0 21.6px;
}
.winkel.nova .site-contactadres {
font-style: normal;
display: flex;
flex-direction: column;
gap: 14.4px;
font-size: 16.2px;
line-height: 24.3px;
}
.winkel.nova .site-contactadres a { color: var(--nova-inkt); text-decoration: none; }
.winkel.nova .site-contactadres a:hover { text-decoration: underline; }
.winkel.nova .site-contactnoot { margin: 18px 0 0; font-size: 13.5px; color: var(--nova-gedempt); }
.winkel.nova .site-tijden { padding: 0; }
.winkel.nova .site-tijden h3 {
font-size: 18px;
font-weight: 600;
line-height: 27px;
margin: 0;
padding-bottom: 7.2px;
}
.winkel.nova .site-tijden dl { margin: 0; }
.winkel.nova .site-tijden dl > div {
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
padding: 5.775px 0;
border-bottom: 1px solid var(--nova-lijn);
font-size: 13.5px;
}
.winkel.nova .site-tijden dl > div:last-child { border-bottom: 0; }
.winkel.nova .site-tijden dt, .winkel.nova .site-tijden dd { margin: 0; }
.winkel.nova .site-tijden dd { font-variant-numeric: tabular-nums; }
@media (max-width: 900px) {
.winkel.nova .site-contactkaart-in { grid-template-columns: minmax(0, 1fr); }
.winkel.nova .site-contactrechts { grid-template-columns: minmax(0, 1fr); gap: 28.8px; }
.winkel.nova .site-contactfotovak { min-height: 200px; max-height: 280px; }
.winkel.nova .site-tijden { border-top: 1px solid var(--nova-lijn); padding-top: 21.6px; }
}
.winkel.nova .offerte-versturen .pdp-koop { width: 100%; justify-content: center; }
.winkel.nova .offerte-versturen p { margin: 10px 0 0; font-size: 12.6px; text-align: center; }
.winkel.nova .klant-veld input[type=file] {
height: auto;
padding: 10px 14.4px;
font-size: 13.5px;
}
@media (min-width: 900px) {
.winkel.nova .offerte-vorm { grid-template-rows: auto auto; }
.winkel.nova .offerte-vorm .offerte-gegevens { grid-row: 1 / span 2; }
.winkel.nova .offerte-vorm .offerte-versturen { order: 3; }
}
.winkel.nova .klant-veld select {
height: 50px;
padding: 17px 36px 3px 14.4px;
background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1.5l5 5 5-5' fill='none' stroke='%23333' stroke-width='1.5' stroke-linecap='round'/></svg>") no-repeat right 14.4px center;
border: 1px solid var(--nova-lijn);
border-radius: var(--nova-r-klein);
font-size: 12.6px;
font-family: inherit;
color: var(--nova-inkt);
min-width: 0;
cursor: pointer;
appearance: none;
-webkit-appearance: none;
}
.winkel.nova .klant-veld select:focus {
outline: 0;
border-color: var(--nova-accent);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--nova-accent) 14%, transparent);
}
.winkel.nova .site-rijkop {
display: flex;
align-items: center;
gap: 14.4px;
margin-bottom: 18px;
}
.winkel.nova .site-rijkop h2 {
margin: 0;
font-size: 30.24px;
font-weight: 700;
line-height: 45.36px;
letter-spacing: 0;
}
.winkel.nova .site-rijknop {
margin-left: auto;
font-size: 13.5px;
color: var(--nova-accent);
text-decoration: underline;
text-underline-offset: 3px;
}
.winkel.nova .site-rijpijlen { margin-left: auto; display: flex; gap: 7.2px; }
.winkel.nova .site-rijpijlen + .site-rijknop { margin-left: 0; }
.winkel.nova .site-rijpijlen button {
width: 36px;
height: 36px;
display: grid;
place-items: center;
background: #fff;
border: 1px solid var(--nova-lijn);
border-radius: var(--nova-r-klein);
color: var(--nova-inkt);
cursor: pointer;
}
.winkel.nova .site-rijpijlen button:hover:not(:disabled) { background: var(--nova-vlak); }
.winkel.nova .site-rijpijlen button:disabled { opacity: .35; cursor: default; }
.winkel.nova .site-producten.carrousel .site-producten-in {
display: flex;
gap: 21.6px;
overflow-x: auto;
scroll-snap-type: x mandatory;
scrollbar-width: none;
padding-bottom: 4px;
}
.winkel.nova .site-producten.carrousel .site-producten-in::-webkit-scrollbar { display: none; }
.winkel.nova .site-producten.carrousel .site-producten-in > * {
flex: 0 0 calc((100% - 64.8px) / 4);
scroll-snap-align: start;
}
@media (max-width: 700px) {
.winkel.nova .site-producten.carrousel .site-producten-in > * { flex-basis: 78%; }
}
@media (min-width: 1536px) {
.winkel.nova .site-producten.carrousel .site-producten-in > * { flex: 0 0 289.8px; }
}
.winkel.nova .site-hero { border-radius: var(--nova-r-kaart); }
.winkel.nova .site-hero-foto { height: 316.8px; }
.winkel.nova .site-hero.metfoto .site-hero-in { padding: 28.8px; gap: 14.4px; }
.winkel.nova .site-hero h1 { font-size: 28.8px; letter-spacing: -.01em; }
.winkel.nova .site-hero-tekst { font-size: 16.2px; }
@media (min-width: 768px) {
.winkel.nova .site-hero-foto { height: 374.4px; }
.winkel.nova .site-hero.metfoto .site-hero-in { padding: 36px; }
.winkel.nova .site-hero h1 { font-size: 36px; }
}
.winkel.nova .site-hero-knop {
border-radius: var(--nova-r-klein);
padding: 12.6px 21.6px;
font-size: 14.4px;
font-weight: 600;
box-shadow: none;
}
.winkel.nova .site-categorien-in { gap: 21.6px; }
.winkel.nova .site-categorie {
border-color: rgba(51, 51, 51, .1);
border-radius: var(--nova-r-klein);
background: #fff;
}
.winkel.nova .site-categorienaam {
display: flex;
align-items: center;
gap: 14.4px;
padding: 14.4px;
font-size: 14.4px;
}
.winkel.nova .site-categorienaam b { font-weight: 700; }
.winkel.nova .site-categorienaam small { font-size: 10.8px; padding-top: 7.2px; }
.winkel.nova .site-categoriepijl {
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 39.6px;
width: 39.6px;
height: 39.6px;
margin-left: auto;
border: 1px solid var(--nova-lijn);
border-radius: var(--nova-r-klein);
background: #fff;
color: var(--nova-inkt);
box-shadow: 0 1px 2px rgba(16, 24, 40, .06);
}
.winkel.nova .site-categorie:hover .site-categoriepijl {
border-color: var(--winkel-accent);
color: var(--winkel-accent);
}
.winkel.nova .site-categorien.carrousel .site-categorien-in {
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
scrollbar-width: none;
}
.winkel.nova .site-categorien.carrousel .site-categorien-in::-webkit-scrollbar { display: none; }
.winkel.nova .site-categorien.carrousel .site-categorien-in > * {
flex: 0 0 296px;
scroll-snap-align: start;
}
.winkel.nova .site-blok > section { padding-inline: var(--nova-zij); }
.winkel.nova .site-pagina {
gap: 30px;
padding-top: 30px;
}
.winkel.nova .site-blok > section { padding-block: 0; }
.winkel.nova .site-blok > section.site-cta,
.winkel.nova .site-blok > section.site-terugbel { padding-block: 34px; }
.winkel.nova .site-blok.opm-vlak-grijs > section,
.winkel.nova .site-blok.opm-vlak-accent > section { padding-block: 34px; }
.winkel.nova .site-contactkaart { margin-block: 0; }
.winkel.nova .site-categorien-in {
display: grid;
grid-template-columns: 1fr;
gap: 7.2px;
}
@media (min-width: 640px) {
.winkel.nova .site-categorien-in { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 768px) {
.winkel.nova .site-categorien-in { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px) {
.winkel.nova .site-categorien-in { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
}
.winkel.nova .site-blok > section > h2,
.winkel.nova .site-categorien > .site-rijkop h2 {
font-size: 23.4px;
font-weight: 700;
line-height: 30.42px;
letter-spacing: 0;
margin: 0 0 14.4px;
}
.winkel.nova .site-producten > .site-rijkop h2,
.winkel.nova .site-tegelrij > .site-rijkop h2 {
font-size: 30.24px;
line-height: 45.36px;
}
.winkel.nova .site-tekst h2 {
font-size: 30.24px;
font-weight: 700;
line-height: 48.384px;
letter-spacing: 0;
}
.winkel.nova .site-tekst h3 {
font-size: 23.04px;
font-weight: 700;
line-height: 36.864px;
letter-spacing: 0;
}
.winkel.nova .shop-catgroep {
background: none;
border: 0;
border-radius: 0;
padding: 18px 0;
margin-bottom: 0;
}
.winkel.nova .shop-catgroep-kop {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 14.4px;
font-weight: 700;
color: var(--nova-inkt);
cursor: pointer;
list-style: none;
}
.winkel.nova .shop-catgroep-kop::-webkit-details-marker { display: none; }
.winkel.nova .shop-catgroep-kop .chevron { transition: transform .15s ease; }
.winkel.nova .shop-catgroep:not([open]) > .shop-catgroep-kop .chevron {
transform: rotate(-90deg);
}
.winkel.nova .shop-cat {
margin-top: 10.8px;
display: grid;
gap: 3.6px;
}
.winkel.nova .shop-cat a { padding: 0; border-radius: 0; background: none; display: inline-flex; }
.winkel.nova .shop-cat a:hover { background: none; }
.winkel.nova .shop-cat a.actief { background: none; font-weight: 600; }
.winkel.nova .shop-catregel {
display: inline-flex;
align-items: center;
gap: 10.8px;
min-height: 24.3px;
font-size: 13.5px;
color: var(--nova-inkt);
text-decoration: none;
}
.winkel.nova .shop-catvak {
width: 18px;
height: 18px;
flex: 0 0 auto;
background: #fff;
border: 1.5px solid var(--nova-lijn);
border-radius: var(--nova-r-mini);
}
.winkel.nova .shop-catregel:hover .shop-catvak { border-color: var(--winkel-accent); }
.winkel.nova .shop-catregel.actief .shop-catvak {
background-color: var(--winkel-accent);
border-color: var(--winkel-accent);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath d='M1.5 5.2 4.4 8l6-6' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
background-size: 9.9px;
}
.winkel.nova .shop-cattak { width: 100%; }
.winkel.nova .shop-cattak-rij {
display: flex;
align-items: center;
justify-content: space-between;
gap: 7.2px;
min-height: 24.3px;
list-style: none;
cursor: pointer;
}
.winkel.nova .shop-cattak-rij::-webkit-details-marker { display: none; }
.winkel.nova .shop-cattak-knop {
display: inline-flex;
align-items: center;
justify-content: center;
width: 21.6px;
height: 21.6px;
flex: 0 0 auto;
border-radius: var(--nova-r-mini);
color: rgba(51, 51, 51, .55);
}
.winkel.nova .shop-cattak-knop .chevron { transition: transform .15s ease; }
.winkel.nova .shop-cattak[open] > .shop-cattak-rij .shop-cattak-knop .chevron {
transform: rotate(180deg);
}
.winkel.nova .shop-cattak-rij:hover .shop-cattak-knop {
background: color-mix(in srgb, var(--winkel-accent) 8%, transparent);
color: var(--winkel-accent);
}
.winkel.nova .shop-cattak-onder {
margin: 3.6px 0 5.4px 9px;
padding-left: 12.6px;
border-left: 1px solid var(--nova-lijn);
display: grid;
gap: 3.6px;
}
.winkel.nova .shop-filterkaart {
background: #fff;
border: 1px solid var(--nova-lijn);
border-radius: var(--nova-r-kaart);
padding: 0 18px;
}
.winkel.nova .shop-catgroep + .shop-filtervorm .shop-filtergroep:first-child,
.winkel.nova .shop-filtergroep + .shop-filtergroep {
border-top: 1px solid var(--nova-lijn);
}
.winkel.nova .shop-filtergroep { padding: 18px 0; }
.winkel.nova .shop-filtereenheid { color: var(--nova-gedempt); font-weight: 400; }
.winkel.nova .shop-filterlijst { display: grid; gap: 3.6px; margin-top: 10.8px; }
.winkel.nova .shop-filterregel {
display: flex;
align-items: center;
gap: 10.8px;
min-height: 24.3px;
font-size: 13.5px;
cursor: pointer;
}
.winkel.nova .shop-filterregel input[type="checkbox"] {
position: absolute;
width: 1px;
height: 1px;
opacity: 0;
pointer-events: none;
}
.winkel.nova .shop-filterregel input[type="checkbox"]:checked + .shop-catvak {
background-color: var(--winkel-accent);
border-color: var(--winkel-accent);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath d='M1.5 5.2 4.4 8l6-6' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
background-size: 9.9px;
}
.winkel.nova .shop-filterregel input[type="checkbox"]:focus-visible + .shop-catvak {
outline: 2px solid var(--winkel-accent);
outline-offset: 2px;
}
.winkel.nova .shop-filterregel:hover .shop-catvak { border-color: var(--winkel-accent); }
.winkel.nova .shop-filternaam { flex: 1; }
.winkel.nova .shop-filteraantal { color: var(--nova-gedempt); font-size: 11.5px; }
.winkel.nova .shop-filtermeer { display: grid; gap: 3.6px; }
.winkel.nova .shop-filtermeer > summary {
list-style: none;
cursor: pointer;
font-size: 12.5px;
color: var(--winkel-accent);
padding-top: 3.6px;
}
.winkel.nova .shop-filtermeer > summary::-webkit-details-marker { display: none; }
.winkel.nova .shop-filtermeer > summary:hover { text-decoration: underline; }
.winkel.nova .shop-filtermeer[open] > summary .woord-meer,
.winkel.nova .shop-filtermeer:not([open]) > summary .woord-minder { display: none; }
.winkel.nova .shop-filterbereik {
display: flex;
gap: 7.2px;
align-items: center;
margin-top: 10.8px;
}
.winkel.nova .shop-filterbereik input { width: 64px; text-align: right; }
.winkel.nova .shop-filterbereik span { color: var(--nova-gedempt); font-size: 12px; }
.winkel.nova .shop-filterrand { font-size: 11px; color: var(--nova-gedempt); margin-top: 3.6px; }
.winkel.nova .shop-filterknoppen {
display: flex;
gap: 7.2px;
align-items: center;
padding: 0 0 18px;
}
.winkel.nova .shop-filterknoppen .btn-primary { flex: 1; }
.winkel.nova .offerte-blad {
max-width: 860px;
margin: 0 auto;
padding: 21.6px 0 43.2px;
}
.winkel.nova .offerte-blad-kop { margin-bottom: 21.6px; }
.winkel.nova .offerte-blad-kop h1 {
font-size: 37.44px;
line-height: 48.6px;
font-weight: 700;
margin: 3.6px 0 0;
}
.winkel.nova .offerte-blad-sub {
margin: 3.6px 0 0;
font-size: 13.5px;
color: var(--nova-gedempt);
}
.winkel.nova .offerte-blad .card {
border: 1px solid var(--nova-lijn);
border-radius: var(--nova-r-kaart);
background: #fff;
box-shadow: none;
}
.winkel.nova .offerte-blad table { font-size: 13.5px; }
.winkel.nova .offerte-blad thead th {
font-size: 11px;
font-weight: 600;
letter-spacing: .04em;
text-transform: uppercase;
color: var(--nova-gedempt);
}
.winkel.nova .offerte-blad-knoppen {
display: flex;
gap: 10.8px;
margin-top: 18px;
align-items: stretch;
}
.winkel.nova .offerte-blad-knoppen form:first-child { flex: 1; }
.winkel.nova .offerte-blad-knoppen .pdp-koop { width: 100%; }
.winkel.nova .offerte-blad-knoppen .ghost {
height: 100%;
padding-inline: 21.6px;
border-radius: var(--nova-r-klein);
}
.offerte-bijlagen { padding: 12px 18px; border-top: 1px solid var(--nova-lijn); font-size: 13.5px; }
.offerte-bijlagen .eyebrow { margin-bottom: 6px; }
.offerte-bijlagen ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.offerte-bijlagen li { display: flex; gap: 10px; align-items: baseline; }
.offerte-bijlagen a { color: var(--winkel-accent); text-decoration: underline; text-underline-offset: 2px; }
.winkel.nova .shop-catkop {
position: relative;
overflow: hidden;
border-radius: var(--nova-r-kaart);
height: 250px;
margin: 0 0 14.4px;
background: var(--nova-vlak);
}
.winkel.nova .shop-catkop.hoogte-sm { height: 175px; }
.winkel.nova .shop-catkop.hoogte-lg { height: 325px; }
.winkel.nova .shop-catkop-foto {
position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
}
.winkel.nova .shop-catkop-waas {
position: absolute; inset: 0;
display: flex; align-items: flex-end;
padding: 20px 28px;
background: linear-gradient(180deg, rgba(15, 23, 42, 0) 45%, rgba(15, 23, 42, .55));
}
.winkel.nova .shop-catkop.donker .shop-catkop-waas {
background: linear-gradient(180deg, rgba(15, 23, 42, .25) 0%, rgba(15, 23, 42, .6) 100%);
}
.winkel.nova .shop-catkop-titel {
margin: 0;
color: #fff;
font-size: 30px;
line-height: 1.2;
font-weight: 800;
letter-spacing: -.01em;
text-shadow: 0 1px 3px rgba(15, 23, 42, .35);
}
.winkel.nova .shop-cattekst { margin: 0 0 14.4px; }
.winkel.nova .shop-cattekst-in {
color: var(--nova-gedempt);
font-size: 14.4px;
line-height: 1.55;
white-space: pre-line;
max-width: 78ch;
}
.winkel.nova .shop-cattekst.gevouwen .shop-cattekst-in {
max-height: 88px; overflow: hidden;
-webkit-mask-image: linear-gradient(#000 60%, transparent);
mask-image: linear-gradient(#000 60%, transparent);
}
@media (max-width: 700px) {
.winkel.nova .shop-catkop { height: 150px; }
.winkel.nova .shop-catkop.hoogte-lg { height: 200px; }
.winkel.nova .shop-catkop-titel { font-size: 22px; }
.winkel.nova .shop-catkop-waas { padding: 12px 20px; }
}
.winkel.nova .shop-menu-item.heeft-kolommen { position: static; }
.winkel.nova .shop-menu-paneel {
display: none;
position: absolute;
left: 0; right: 0; top: 100%;
z-index: 45;
background: #fff;
box-shadow: 0 24px 48px rgba(51, 51, 51, .14);
}
.winkel.nova .shop-menu-item.heeft-kolommen:hover .shop-menu-paneel,
.winkel.nova .shop-menu-item.heeft-kolommen[open] .shop-menu-paneel { display: block; }
.winkel.nova .shop-menu { position: relative; }
.winkel.nova .shop-menu-paneel-in {
max-width: var(--site-breedte);
margin: 0 auto;
padding: 21.6px var(--nova-zij);
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 21.6px;
}
.winkel.nova .shop-menu-kolom { display: flex; flex-direction: column; gap: 8px; }
.winkel.nova .shop-menu-kolomkop {
display: block;
margin-bottom: 10.8px;
font-size: 12.6px;
font-weight: 700;
color: var(--nova-inkt);
text-decoration: none;
}
.winkel.nova .shop-menu-kolomkop:hover { color: var(--winkel-accent); }
.winkel.nova .shop-menu-paneel-voet { max-width: var(--site-breedte); margin: 0 auto; padding: 0 var(--nova-zij) 18px; }
.winkel.nova .shop-menu-paneel-voet .shop-menu-alles { display: inline-block; font-size: 12.6px; font-weight: 600; color: var(--nova-inkt); text-decoration: none; border-top: 1px solid var(--nova-lijn); padding-top: 12px; width: 100%; }
.winkel.nova .shop-menu-paneel-voet .shop-menu-alles::after { content: " ›"; color: var(--nova-gedempt); }
.winkel.nova .shop-menu-sublink {
display: block;
font-size: 12.6px;
color: var(--nova-inkt);
text-decoration: none;
}
.winkel.nova .shop-menu-sublink:hover,
.winkel.nova .shop-menu-kolomkop:hover { color: var(--winkel-accent); text-decoration: underline; }
.winkel.nova .site-hero.kaart { border-radius: var(--nova-r-kaart); }
.winkel.nova .site-hero.kaart .site-hero-foto { height: 396px; }
.winkel.nova .site-hero.kaart .site-hero-waas { background: rgba(0, 0, 0, .15); }
.winkel.nova .site-hero.kaart .site-hero-in {
position: absolute; inset: 0; max-width: none; padding: 43.2px;
display: flex; align-items: flex-start; justify-content: flex-start; gap: 0;
}
.winkel.nova .site-hero-kaart {
background: #fff; color: #333; border-radius: var(--nova-r-klein); padding: 21.6px;
display: grid; gap: 14.4px; max-width: 471px; width: 100%; text-align: left;
}
.winkel.nova .site-hero.kaart h1 { color: #333; text-shadow: none; font-size: 21.6px; line-height: 32.4px; font-weight: 700; margin: 0; letter-spacing: 0; }
.winkel.nova .site-hero.kaart .site-hero-tekst { color: #333; font-size: 12.6px; line-height: 18.9px; margin: 0; max-width: none; }
.winkel.nova .site-hero-dia.metfoto:not(.kaart) .site-hero-waas { background: linear-gradient(90deg, rgba(17, 18, 22, .7) 0%, rgba(17, 18, 22, .48) 40%, rgba(17, 18, 22, 0) 78%); }
.winkel.nova .site-hero-dia.metfoto:not(.kaart) .site-hero-in { position: absolute; inset: 0; max-width: 560px; padding: 43.2px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 10.8px; color: #fff; }
.winkel.nova .site-hero-dia.metfoto:not(.kaart) .site-hero-kop,
.winkel.nova .site-hero-dia.metfoto:not(.kaart) h1 { color: #fff; font-size: 30.24px; line-height: 1.2; font-weight: 700; margin: 0; text-shadow: 0 1px 10px rgba(0, 0, 0, .4); }
.winkel.nova .site-hero-dia.metfoto:not(.kaart) .site-hero-tekst { color: rgba(255, 255, 255, .94); font-size: 14.4px; line-height: 1.5; margin: 0; max-width: 46ch; text-shadow: 0 1px 8px rgba(0, 0, 0, .45); }
.winkel.nova .site-hero-dia.metfoto:not(.kaart) .site-hero-knop { margin-top: 10.8px; }
.winkel.nova .site-hero-usps { list-style: none; margin: 14.4px 0; padding: 0; display: grid; gap: 3.6px; }
.winkel.nova .site-hero-usps li {
display: flex; align-items: center; gap: 10.8px;
font-size: 13.5px; line-height: 20.25px; font-weight: 600;
}
.winkel.nova .site-hero-usps li::before {
content: ""; flex: 0 0 14.4px; width: 14.4px; height: 14.4px; border-radius: 50%;
background: var(--winkel-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.3 2.3 4.7-4.9' fill='none' stroke='%23fff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat;
}
.winkel.nova .site-hero.kaart .site-hero-knop {
justify-self: start; height: 43.2px; padding: 0 14.4px; gap: 18px;
font-size: 12.6px; line-height: 1; font-weight: 600; border-radius: var(--nova-r-klein);
box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 1px 2px rgba(0, 0, 0, .06);
}
.winkel.nova .site-categorien.foto .site-categorien-in { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7.2px; }
.winkel.nova .site-categorien.foto .site-categorie {
position: relative; border: 0; border-radius: var(--nova-r-klein); background: #f3f3f3; aspect-ratio: 16 / 9;
}
.winkel.nova .site-categorien.foto .site-categoriefoto { position: absolute; inset: 0; aspect-ratio: auto; }
.winkel.nova .site-categorien.foto .site-categoriefoto::after {
content: ""; position: absolute; inset: 0;
background: linear-gradient(to bottom, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0) 50%), rgba(0, 0, 0, .25);
}
.winkel.nova .site-categorien.foto .site-categorienaam {
position: absolute; left: 50%; bottom: 21.6px; transform: translateX(-50%);
display: inline-flex; align-items: center; gap: 21.6px; padding: 10.8px 14.4px;
background: var(--winkel-accent); color: #fff; border-radius: var(--nova-r-mini);
font-size: 13.5px; line-height: 1.5; font-weight: 600; white-space: nowrap; max-width: calc(100% - 43.2px);
}
.winkel.nova .site-categorien.foto .site-categorienaam b { font-weight: 600; color: #fff; overflow: hidden; text-overflow: ellipsis; }
.winkel.nova .site-categorien.foto .site-categorienaam small,
.winkel.nova .site-categorien.foto .site-categoriepijl { display: none; }
.winkel.nova .site-categorien.foto .site-categorieknop-pijl { flex: 0 0 6px; transform: translateY(1px); }
.winkel.nova .site-categorien.foto .site-categorie:hover .site-categorienaam b { color: #fff; }
.winkel.nova .site-categorien.foto .site-categorie:hover .site-categorienaam { filter: brightness(1.08); }
.winkel.nova .site-terugbel.kaart { background: transparent; }
.winkel.nova .site-terugbel.kaart .site-terugbel-in {
display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28.8px;
max-width: 1158.6px; padding: 0 28.8px; margin: 0 auto; text-align: left;
background: #fff; border: 1px solid rgba(51, 51, 51, .1); border-radius: var(--nova-r-klein);
}
.winkel.nova .site-terugbel-foto { display: flex; justify-content: center; align-items: flex-end; }
.winkel.nova .site-terugbel-foto img {
height: 216px; width: auto; max-width: 100%; margin-top: -14.4px; display: block;
filter: grayscale(1) brightness(1.1); mix-blend-mode: multiply;
}
.winkel.nova .site-terugbel.kaart .site-terugbel-tekst { padding: 28.8px 0; display: flex; flex-direction: column; justify-content: center; }
.winkel.nova .site-terugbel.kaart h2 { font-size: 21.6px; line-height: 32.4px; font-weight: 700; margin: 0; }
.winkel.nova .site-terugbel.kaart p { color: rgba(51, 51, 51, .6); margin: 0; font-size: 13.5px; line-height: 20.25px; }
.winkel.nova .site-terugbel.kaart .site-terugbel-form {
position: relative; margin: 0; padding: 28.8px 0; align-items: center; flex-wrap: nowrap; gap: 0;
}
.winkel.nova .site-terugbel.kaart .site-terugbel-form input { width: 100%; min-width: 0; height: 50.4px; padding-right: 50.4px; }
.winkel.nova .site-terugbel-knop {
position: absolute; right: 10.8px; top: 50%; transform: translateY(-50%);
width: 28.8px; height: 28.8px; min-height: 0; padding: 0; border-radius: var(--nova-r-mini);
display: inline-flex; align-items: center; justify-content: center;
}
@media (max-width: 1023px) {
.winkel.nova .site-terugbel.kaart .site-terugbel-in { grid-template-columns: 1fr; }
.winkel.nova .site-terugbel-foto { display: none; }
.winkel.nova .site-categorien.foto .site-categorien-in { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.winkel.nova .site-tekst.midden { text-align: center; }
.winkel.nova .site-tekst.midden p { margin-left: auto; margin-right: auto; }
.winkel.nova .site-tekstfoto.vlak-grijs,
.winkel.nova .site-tekstfoto.vlak-accent { border-radius: var(--nova-r-kaart); overflow: hidden; }
.winkel.nova .site-tekstfoto.vlak-grijs { background: var(--nova-vlak, #f6f6f6); }
.winkel.nova .site-tekstfoto.vlak-accent { background: var(--winkel-accent); color: #fff; }
.winkel.nova .site-tekstfoto.vlak-accent h2,
.winkel.nova .site-tekstfoto.vlak-accent h3,
.winkel.nova .site-tekstfoto.vlak-accent p,
.winkel.nova .site-tekstfoto.vlak-accent li { color: #fff; }
.winkel.nova .site-tekstfoto.vlak-accent .btn-primary,
.winkel.nova .site-tekstfoto.vlak-accent .site-knop { background: #fff; color: var(--winkel-accent); }
.winkel.nova .site-tekstfoto.vlak-grijs .site-tekstfoto-in,
.winkel.nova .site-tekstfoto.vlak-accent .site-tekstfoto-in { padding: 21.6px; }
.winkel.nova .shop-subtegels { display: flex; flex-wrap: wrap; gap: 7.2px; margin: 0 0 21.6px; }
.winkel.nova .shop-subtegel { display: inline-flex; align-items: center; gap: 10.8px; padding: 14.4px;
background: #fff; border: 1px solid var(--nova-lijn, #e5e6e5); border-radius: var(--nova-r-mini); color: var(--nova-inkt); text-decoration: none; transition: border-color .2s; }
.winkel.nova .shop-subtegel:hover { border-color: var(--nova-accent); }
.winkel.nova .shop-subtegel-beeld { width: 57.6px; height: 57.6px; flex: none; display: grid; place-items: center; mix-blend-mode: multiply; }
.winkel.nova .shop-subtegel-beeld img { max-width: 100%; max-height: 100%; object-fit: contain; }
.winkel.nova .shop-subtegel b { font-size: 13.5px; line-height: 18px; font-weight: 700; }
.winkel.nova .inlog { display: grid; grid-template-columns: 1fr 1fr; min-height: 591px; margin: 0 calc(-1 * var(--nova-zij)); }
.winkel.nova .inlog-links { padding: 32px var(--nova-zij) 43.2px; display: flex; flex-direction: column; }
.winkel.nova .inlog-kruimels { margin: 0; }
.winkel.nova .inlog-vorm { width: 450px; max-width: 100%; margin: 100px auto 0; }
.winkel.nova .inlog-vorm h1 { font-size: 37.44px; line-height: 56.16px; font-weight: 700; margin: 0 0 36px; letter-spacing: 0; }
.winkel.nova .inlog-velden { display: grid; gap: 28.8px; }
.winkel.nova .inlog-vorm .form-error { margin: -14.4px 0 21.6px; padding: 12.6px 14.4px; border-radius: var(--nova-r-klein); font-size: 13.5px; line-height: 1.4; }
.winkel.nova .inlog-rij { display: flex; align-items: center; justify-content: space-between; gap: 14.4px; margin-top: 14.4px; }
.winkel.nova .inlog-vergeten { color: var(--nova-inkt); text-decoration: none; font-size: 13.5px; white-space: nowrap; }
.winkel.nova .inlog-vergeten:hover { text-decoration: underline; }
.winkel.nova .inlog-knop { display: inline-flex; align-items: center; justify-content: space-between; gap: 18px; height: 43.2px; padding: 0 21.6px;
border-radius: var(--nova-r-klein); font-size: 16.2px; font-weight: 600; line-height: 1; text-decoration: none; box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 1px 2px rgba(0, 0, 0, .06); }
.winkel.nova .inlog-knop-wit { background: #fff; color: var(--nova-inkt); }
.winkel.nova .inlog-knop-wit:hover { background: #fff; filter: brightness(.97); }
.winkel.nova .inlog-rechts { position: relative; overflow: hidden; background: var(--nova-tint, #eeefed); margin-left: 14.4px;
padding: 86.4px 21.6px 129.6px 86.4px; }
.winkel.nova .inlog-rechts h2 { font-size: 30.24px; line-height: 45.36px; font-weight: 700; margin: 0 0 21.6px; }
.winkel.nova .inlog-rechts p { margin: 0 0 21.6px; max-width: 576px; color: var(--nova-inkt); }
.winkel.nova .inlog-usps { list-style: none; margin: 0 0 28.8px; padding: 0; display: grid; gap: 3.6px; position: relative; z-index: 1; }
.winkel.nova .inlog-usps li { display: flex; align-items: center; gap: 10.8px; font-size: 13.5px; line-height: 20.25px; font-weight: 600; }
.winkel.nova .inlog-usps li::before { content: ""; flex: 0 0 14.4px; width: 14.4px; height: 14.4px; border-radius: 50%;
background: var(--winkel-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.3 2.3 4.7-4.9' fill='none' stroke='%23fff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat; }
.winkel.nova .inlog-knoppen { display: grid; gap: 14.4px; justify-items: start; position: relative; z-index: 1; }
.winkel.nova .inlog-knoppen .inlog-knop { width: 251px; }
.winkel.nova .inlog-foto { position: absolute; right: -29px; bottom: 0; width: 370px; height: 370px; object-fit: contain; object-position: bottom; pointer-events: none; }
@media (max-width: 1023px) {
.winkel.nova .inlog { grid-template-columns: 1fr; }
.winkel.nova .inlog-rechts { margin-left: 0; padding: 43.2px var(--nova-zij) 260px; }
.winkel.nova .inlog-vorm { margin-top: 43.2px; }
}
.winkel.nova .wagen-vlak { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 48px; align-items: start; }
.winkel.nova .wagen-regels { display: flex; flex-direction: column; }
.wagen-regel.vorm-nova, .winkel.nova .wagen-regel { display: grid; grid-template-columns: 72px minmax(0, 1fr) 120px 110px 110px 32px; align-items: center; gap: 18px;
padding: 21.6px 0; border: 0; border-bottom: 1px solid var(--nova-lijn); border-radius: 0; background: transparent; }
.winkel.nova .wagen-foto { width: 72px; height: 72px; object-fit: contain; display: block; border-radius: 0; }
.winkel.nova .wagen-foto.leeg { background: var(--nova-vlak); border-radius: var(--nova-r-klein); }
.winkel.nova .wagen-naam { font-size: 15px; font-weight: 700; line-height: 1.35; }
.winkel.nova .wagen-regel .cell-sub { font-size: 12.6px; color: var(--nova-gedempt); }
.winkel.nova .wagen-stuk { display: flex; flex-direction: column; align-items: flex-end; white-space: nowrap; }
.winkel.nova .wagen-stuk b { font-size: 15px; font-weight: 600; line-height: 1.2; }
.winkel.nova .wagen-stuk small { font-size: 11px; color: var(--nova-gedempt); }
.winkel.nova .wagen-aantalvorm { display: inline-flex; margin: 0; }
.winkel.nova .wagen-aantalvorm [data-wagen-knop] { display: none; }
.winkel.nova .wagen-totaal { font-size: 17.28px; font-weight: 700; text-align: right; white-space: nowrap; min-width: 0; }
.winkel.nova .wagen-wegvorm { margin: 0; }
.winkel.nova .wagen-weg { width: 28px; height: 28px; border: 0; border-radius: 50%; background: var(--nova-vlak); color: var(--nova-gedempt); font-size: 18px; line-height: 1; cursor: pointer; display: grid; place-items: center; }
.winkel.nova .wagen-weg:hover { background: var(--nova-lijn); color: var(--nova-inkt); }
.winkel.nova .wagen-telling { position: sticky; top: calc(var(--nova-balk-h) + 14.4px); padding: 0; border: 1px solid var(--nova-lijn); background: #fff; border-radius: var(--nova-r-kaart); box-shadow: none; overflow: hidden; display: flex; flex-direction: column; gap: 0; }
.winkel.nova .wagen-telling-kop { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 22px 22px 0; }
.winkel.nova .wagen-telling-kop h2 { margin: 0; font-size: 17px; line-height: 24px; font-weight: 700; }
.winkel.nova .wagen-telling-lijf { padding: 16px 22px 20px; display: flex; flex-direction: column; gap: 6px; }
.winkel.nova .wagen-korting { display: flex; gap: 8px; margin: 0 0 12px; }
.winkel.nova .wagen-korting input { flex: 1; min-width: 0; height: var(--nova-h); background: #fff; text-transform: uppercase; font-size: 13px; }
.winkel.nova .wagen-korting .ghost.small { height: var(--nova-h); padding: 0 14px; font-size: 13px; }
.winkel.nova .wagen-korting:has(input:placeholder-shown) #sc-korting-wis { display: none; }
.winkel.nova .wagen-rij { display: flex; justify-content: space-between; gap: 14px; font-size: 13.5px; padding: 5px 0; }
.winkel.nova .wagen-rij.wagen-totaalrij { font-size: 17px; font-weight: 700; padding-top: 12px; margin-top: 6px; border-top: 1px solid var(--nova-lijn); }
.winkel.nova .wagen-gratis { font-size: 12.6px; color: var(--nova-gedempt); padding: 0; }
.winkel.nova .wagen-telling-voet { background: transparent; border-top: 1px solid var(--nova-lijn); padding: 18px 22px 22px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.winkel.nova .wagen-afrekenen { width: 100%; justify-content: center; margin: 0 0 4px; height: var(--nova-h-groot); font-size: 15px; }
.winkel.nova .wagen-veilig { display: inline-flex; align-items: center; gap: 7.2px; font-size: 12.6px; color: var(--nova-gedempt); }
.winkel.nova .wagen-usps { display: flex; justify-content: space-between; gap: 21.6px; flex-wrap: wrap; margin: 43.2px 0 21.6px; font-size: 13.5px; border-top: 0; padding: 0; }
.winkel.nova .wagen-usps .usp-punt { display: inline-flex; align-items: center; gap: 8px; width: auto; margin: 0; }
.winkel.nova .wagen-usps .usp-punt svg { color: #fff; background: var(--nova-groen, #16a34a); border-radius: 50%; padding: 1px; flex: none; }
@media (max-width: 1099px) { .winkel.nova .wagen-vlak { grid-template-columns: 1fr; } .winkel.nova .wagen-telling { position: static; } }
@media (max-width: 767px) { .winkel.nova .wagen-regel { grid-template-columns: 57.6px minmax(0, 1fr) 32px; } .winkel.nova .wagen-stuk, .winkel.nova .wagen-totaal { grid-column: 2; justify-self: start; text-align: left; } .winkel.nova .wagen-stuk { align-items: flex-start; } .winkel.nova .wagen-aantalvorm { grid-column: 2; } }
.wagen-waas { position: fixed; inset: 0; background: rgba(0, 0, 0, .35); z-index: 70; opacity: 0; transition: opacity .25s ease; }
.wagen-waas.open { opacity: 1; }
.wagen-paneel { position: fixed; top: 0; right: 0; bottom: 0; width: 470px; max-width: 100vw; z-index: 71; background: #f4f4f2; color: var(--nova-inkt);
display: flex; flex-direction: column; transform: translateX(100%); transition: transform .25s ease; box-shadow: -10px 0 40px rgba(0, 0, 0, .12); }
.wagen-paneel.open { transform: none; }
.wagen-paneel[hidden] { display: none; }
.wagen-paneel-kop { display: flex; align-items: center; justify-content: space-between; padding: 14.4px 14.4px 10.8px; font-size: 15.3px; }
.wagen-paneel-sluit { width: 32px; height: 32px; border: 0; border-radius: 50%; background: transparent; font-size: 22px; line-height: 1; cursor: pointer; color: var(--nova-gedempt); }
.wagen-paneel-sluit:hover { background: rgba(0, 0, 0, .06); color: var(--nova-inkt); }
.wagen-paneel-in { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.wagen-paneel-regels { flex: 1; min-height: 0; overflow-y: auto; padding: 0 14.4px 14.4px; display: flex; flex-direction: column; gap: 10.8px; }
.wagen-paneel-regel { position: relative; display: grid; grid-template-columns: 65px minmax(0, 1fr); gap: 14.4px; padding: 11.7px 12.6px 10.8px; background: #fff; border-radius: var(--nova-r-klein); }
.wagen-paneel-weg { position: absolute; top: 9px; right: 9px; width: 22px; height: 22px; border: 0; border-radius: 50%; background: transparent; color: var(--nova-gedempt); font-size: 16px; line-height: 1; cursor: pointer; }
.wagen-paneel-weg:hover { background: var(--nova-vlak); color: var(--nova-inkt); }
.wagen-paneel-foto { width: 65px; height: 65px; object-fit: contain; align-self: center; mix-blend-mode: multiply; }
.wagen-paneel-foto.leeg { background: var(--nova-vlak); border-radius: var(--nova-r-klein); }
.wagen-paneel-kern { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding-right: 22px; }
.wagen-paneel-kern > b { font-size: 12.6px; font-weight: 700; line-height: 18px; }
.wagen-paneel-kern > small { font-size: 10.8px; color: var(--nova-gedempt); }
.wagen-paneel-onder { display: flex; align-items: flex-end; justify-content: space-between; gap: 10.8px; margin-top: 7.2px; }
.wagen-paneel-prijs { display: flex; flex-direction: column; align-items: flex-end; }
.wagen-paneel-prijs b { font-size: 13.5px; font-weight: 700; }
.wagen-paneel-prijs small { font-size: 10.8px; color: var(--nova-gedempt); }
.wagen-paneel-voet { padding: 7.2px 14.4px 14.4px; border-top: 1px solid rgba(0, 0, 0, .06); background: linear-gradient(rgba(244, 244, 242, 0), #f4f4f2 40px); }
.wagen-paneel-telling { padding: 18px; display: flex; flex-direction: column; gap: 4.5px; }
.wagen-paneel-rij { display: flex; justify-content: space-between; gap: 14.4px; font-size: 11.7px; font-weight: 500; }
.wagen-paneel-rij span:last-child { font-weight: 600; }
.wagen-paneel-rij.totaal { font-size: 12.6px; padding-top: 8px; }
.wagen-paneel-rij.totaal span:first-child { font-weight: 900; }
.wagen-paneel-rij.totaal span:last-child { font-size: 15.3px; font-weight: 700; }
.wagen-paneel-rij.totaal small { font-size: 11px; font-weight: 400; }
.wagen-paneel-links { display: flex; justify-content: space-between; align-items: center; gap: 10.8px; padding: 0 0 7.2px; font-size: 11.7px; }
.wagen-paneel-links a, .wagen-paneel-leeg-knop { color: var(--nova-inkt); background: transparent; border: 0; padding: 1.8px 7.2px; font: inherit; font-size: 11.7px; cursor: pointer; text-decoration: none; }
.wagen-paneel-links a:hover, .wagen-paneel-leeg-knop:hover { text-decoration: underline; }
.wagen-paneel-afrekenen { display: flex; width: 100%; height: var(--nova-h-groot); align-items: center; justify-content: center; font-size: 16.2px; font-weight: 700; border-radius: var(--nova-r-klein); margin: 0; }
.wagen-paneel-leeg { padding: 43.2px 21.6px; text-align: center; display: flex; flex-direction: column; gap: 14.4px; align-items: center; }
html.wagen-open { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .wagen-paneel, .wagen-waas { transition: none; } }
@media (max-width: 1279px) {
.shop-menu.vorm-nova .shop-menu-in { overflow-x: auto; overflow-y: visible; scrollbar-width: none; flex-wrap: nowrap; }
.shop-menu.vorm-nova .shop-menu-in::-webkit-scrollbar { display: none; }
.shop-menu.vorm-nova .shop-menu-item { flex: none; }
}
.winkel.nova .inlog-vorm { width: 100%; max-width: 450px; }
.winkel.nova .inlog-kruimels { width: 100%; max-width: 450px; margin-left: auto; margin-right: auto; }
.winkel.nova .inlog, .winkel.nova .offerte-vraag { min-width: 0; }
.winkel.nova .inlog-links, .winkel.nova .inlog-rechts, .winkel.nova .offerte-gegevens, .winkel.nova .offerte-regels { min-width: 0; }
@media (min-width: 1024px) and (max-width: 1279px) {
.shop-header.vorm-nova a[href^="tel:"] small,
.shop-header.vorm-nova a[href^="tel:"] .kop-sub,
.shop-header.vorm-nova .kop-huur,
.shop-header.vorm-nova .kop-hulp { display: none !important; }
.shop-header.vorm-nova .shop-zoek { min-width: 160px; flex: 1 1 160px; }
.shop-header.vorm-nova .shop-header-in { gap: 10.8px; }
}
.winkel.nova .klant-tabs { gap: 3.6px; align-items: center; border-bottom: 0; margin-bottom: 14.4px; }
.winkel.nova .klant-tabs a { padding: 10.8px 14.4px; border-bottom: 0; border-radius: var(--nova-r-klein); font-size: 13.5px; font-weight: 600; color: color-mix(in srgb, var(--nova-inkt) 60%, #fff); }
.winkel.nova .klant-tabs a.aan { color: var(--nova-inkt); background: color-mix(in srgb, var(--nova-accent) 10%, #fff); border-bottom-color: transparent; }
.winkel.nova .klant-kaart-blok { border-radius: var(--nova-r-kaart); }
.winkel.nova .klant-vak { border-radius: var(--nova-r-kaart); }
@media (min-width: 1024px) and (max-width: 1439px) {
.shop-header.vorm-nova .kop-huur, .shop-header.vorm-nova .kop-hulp { display: none !important; }
}
.winkel.nova .shop-rij .shop-tegels.vorm-nova { gap: 21.6px; }
@media (min-width: 1536px) {
.winkel.nova .shop-rij .shop-tegels.vorm-nova { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
.winkel.nova .site-blok.opm-vlak-grijs > section,
.winkel.nova .site-blok.opm-vlak-accent > section { padding-block: 34px; }
.winkel.nova .site-blok.opm-ruimte-ruim > section { padding-block: 57.6px; }
.winkel.nova .site-blok.opm-ruimte-krap > section { padding-block: 0; }
.winkel.nova .site-blok.opm-ruimte-krap > section > h2 { margin-top: 0; }
.winkel.nova .site-blok.opm-vlak-accent .site-knop,
.winkel.nova .site-blok.opm-vlak-accent .btn-primary { background: #fff; color: var(--winkel-accent); }
.winkel.nova .shop-pdp.pdp-plak .shop-pdp-info { position: sticky; top: calc(var(--nova-balk-h) + 14.4px); align-self: start; }
.winkel.nova .shop-pdp.pdp-tabs .pdp-tabbalk { display: flex; gap: 4px; border-bottom: 1px solid var(--nova-lijn); margin: 21.6px 0 14.4px; grid-column: 1 / -1; }
.winkel.nova .shop-pdp.pdp-tabs .pdp-tab { border: 0; background: none; font: inherit; font-weight: 600; padding: 9px 14.4px; color: var(--nova-gedempt); border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; }
.winkel.nova .shop-pdp.pdp-tabs .pdp-tab.aan { color: var(--nova-inkt); border-bottom-color: var(--nova-accent); }
.winkel.nova .shop-pdp.pdp-tabs .pdp-tabvak { grid-column: 1 / -1; }
.winkel.nova .shop-pdp.pdp-tabs .pdp-tabvak[hidden] { display: none; }
.winkel.nova .shop-pdp.pdp-tabs .pdp-verhaal-tekst { max-height: none; }
.winkel.nova .shop-lijst.filters-boven { grid-template-columns: 1fr; }
.winkel.nova .shop-lijst.filters-boven .shop-filterkaart { display: flex; flex-wrap: wrap; gap: 8px 21.6px; align-items: start; }
.winkel.nova .shop-lijst.filters-boven .shop-catgroep, .winkel.nova .shop-lijst.filters-boven .shop-filtergroep { flex: 1 1 200px; }
.winkel.nova .shop-lijst.filters-boven .shop-filtervorm { display: contents; }
.winkel.nova .shop-lijst.filters-knop { grid-template-columns: 1fr; }
.winkel.nova .shop-lijst.filters-knop .shop-filterknop { justify-self: start; }
.winkel.nova .shop-lijst.filters-knop .shop-zijbalk { display: none; }
.winkel.nova .shop-lijst.filters-knop.filters-open .shop-zijbalk { display: block; }
.winkel.nova .shop-lijst.catkop-titel .shop-catkop-foto { display: none; }
.winkel.nova .shop-lijst.catkop-titel .shop-catkop { min-height: 0; height: auto; background: transparent; }
.winkel.nova .shop-lijst.catkop-titel .shop-catkop-waas { background: none; padding: 0; }
.winkel.nova .shop-lijst.catkop-titel .shop-catkop-titel { color: var(--nova-inkt); }
.winkel.nova .shop-lijstkolom { display: flex; flex-direction: column; }
.winkel.nova .shop-lijst.cattekst-boven .shop-lijsttekst, .winkel.nova .shop-lijst.cattekst-inklap .shop-lijsttekst { order: -1; margin: 0 0 21.6px; }
.winkel.nova .shop-lijsttekst-inklap > summary { cursor: pointer; font-weight: 600; list-style: none; padding: 10.8px 0; }
.winkel.nova .shop-lijsttekst-inklap > summary::-webkit-details-marker { display: none; }
.winkel.nova .shop-lijsttekst-inklap > summary::after { content: " ▾"; color: var(--nova-gedempt); }
.winkel.nova .shop-lijst.kaart-rustig .shop-kaart.vorm-nova { border-color: transparent; }
.winkel.nova .shop-lijst.kaart-rustig .shop-kaart.vorm-nova:hover { border-color: var(--nova-lijn); }
.winkel.nova .shop-lijst.kaart-rustig .shop-kaart.vorm-nova .nova-inwagen { opacity: 0; transition: opacity .15s; }
.winkel.nova .shop-lijst.kaart-rustig .shop-kaart.vorm-nova:hover .nova-inwagen, .winkel.nova .shop-lijst.kaart-rustig .shop-kaart.vorm-nova:focus-within .nova-inwagen { opacity: 1; }
.winkel.nova .shop-lijst.kaart-lijst .shop-raster { grid-template-columns: 1fr !important; }
.winkel.nova .shop-lijst.kaart-lijst .shop-kaart.vorm-nova { display: grid; grid-template-columns: 140px minmax(0, 1fr) auto; grid-template-areas: "foto tekst voet"; gap: 7.2px 21.6px; align-items: center; }
.winkel.nova .shop-lijst.kaart-lijst .shop-kaart.vorm-nova > img, .winkel.nova .shop-lijst.kaart-lijst .shop-kaart.vorm-nova .foto-leeg { grid-area: foto; aspect-ratio: 4 / 3; }
.winkel.nova .shop-lijst.kaart-lijst .shop-kaart.vorm-nova .nova-chiprij, .winkel.nova .shop-lijst.kaart-lijst .shop-kaart.vorm-nova .nova-sterren, .winkel.nova .shop-lijst.kaart-lijst .shop-kaart.vorm-nova .nova-titel, .winkel.nova .shop-lijst.kaart-lijst .shop-kaart.vorm-nova .nova-code, .winkel.nova .shop-lijst.kaart-lijst .shop-kaart.vorm-nova .nova-specs { grid-column: tekst; }
.winkel.nova .shop-lijst.kaart-lijst .shop-kaart.vorm-nova .nova-voet { grid-area: voet; margin-top: 0; padding-top: 0; min-height: 0; flex-direction: column; align-items: flex-end; }
.shop-footer.vorm-nova.voet-k2 .shop-footer-in { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.shop-footer.vorm-nova.voet-k3 .shop-footer-in { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1023px) { .shop-footer.vorm-nova.voet-k3 .shop-footer-in { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.shop-footer.vorm-nova .shop-voet-strook {
max-width: var(--site-breedte);
margin: 43.2px auto 0;
padding: 28.8px var(--nova-zij) 0;
border-top: 1px solid var(--nova-lijn);
display: flex;
flex-wrap: wrap;
align-items: flex-start;
justify-content: space-between;
gap: 28.8px 43.2px;
font-size: 13.5px;
line-height: 20.26px;
}
.shop-footer.vorm-nova .shop-voet-strook .shop-voet-kop { margin-bottom: 7.2px; }
.shop-footer.vorm-nova .shop-nieuwsbrief { flex: 1 1 360px; max-width: 520px; }
.shop-footer.vorm-nova .shop-nieuwsbrief p { margin: 0 0 10.8px; }
.shop-footer.vorm-nova .shop-nieuwsbrief-rij { display: flex; gap: 8px; }
.shop-footer.vorm-nova .shop-nieuwsbrief-rij input[type="email"] {
flex: 1 1 auto;
min-width: 0;
height: 42px;
padding: 0 14px;
border: 1px solid var(--nova-lijn);
border-radius: var(--nova-r-klein);
background: #fff;
color: var(--nova-inkt);
font: inherit;
}
.shop-footer.vorm-nova .shop-nieuwsbrief-rij input[type="email"]:focus { outline: 2px solid var(--nova-accent); outline-offset: 0; border-color: var(--nova-accent); }
.shop-footer.vorm-nova .shop-nieuwsbrief-rij .btn-primary { height: 42px; padding: 0 18px; flex: none; }
.shop-footer.vorm-nova .shop-honing { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.shop-footer.vorm-nova .shop-nieuwsbrief-dank { font-weight: 700; color: var(--nova-inkt); }
.shop-footer.vorm-nova .shop-nieuwsbrief-fout { color: #b3261e; margin-top: 7.2px; }
.shop-footer.vorm-nova .shop-keurmerk { display: flex; align-items: center; gap: 12px; color: var(--nova-inkt); text-decoration: none; font-weight: 600; }
.shop-footer.vorm-nova a.shop-keurmerk:hover { text-decoration: none; }
.shop-footer.vorm-nova .shop-keurmerk img { height: 48px; width: auto; display: block; }
.shop-footer.vorm-nova .shop-socials { display: flex; flex-direction: column; }
.shop-footer.vorm-nova .shop-socials-rij { display: flex; flex-wrap: wrap; gap: 8px; }
.shop-footer.vorm-nova .shop-social {
display: inline-flex;
align-items: center;
height: 32px;
padding: 0 12px;
border: 1px solid var(--nova-lijn);
border-radius: 999px;
background: #fff;
font-size: 12.6px;
font-weight: 600;
text-decoration: none;
}
.shop-footer.vorm-nova .shop-social:hover { border-color: var(--nova-accent); text-decoration: none; }
.shop-footer.vorm-nova .shop-betaallogos { display: flex; flex-wrap: wrap; gap: 6px; }
.shop-footer.vorm-nova .shop-betaallogo-beeld { height: 16px; width: auto; max-width: 48px; padding: 3px 6px; border: 1px solid var(--nova-lijn); border-radius: var(--nova-r-mini); background: #fff; box-sizing: content-box; display: block; }
.shop-footer.vorm-nova .shop-betaallogo {
display: inline-flex;
align-items: center;
height: 24px;
padding: 0 9px;
border: 1px solid var(--nova-lijn);
border-radius: var(--nova-r-mini);
background: #fff;
font-size: 11px;
font-weight: 700;
letter-spacing: .02em;
color: var(--nova-inkt);
}
@media (max-width: 639px) {
.shop-footer.vorm-nova .shop-voet-strook { flex-direction: column; align-items: stretch; text-align: center; }
.shop-footer.vorm-nova .shop-keurmerk, .shop-footer.vorm-nova .shop-socials-rij { justify-content: center; }
.shop-footer.vorm-nova .shop-betaallogos { justify-content: center; width: 100%; }
}
body:has(.chat-widget) .shop-footer.vorm-nova .shop-voet-onder-in { padding-bottom: 79.2px; }
.winkel.nova .shop-leeg-pagina { max-width: 640px; padding: 57.6px 16px 86.4px; }
.winkel.nova .shop-leeg-pagina h1 { font-size: 30.24px; margin: 0 0 10.8px; }
.winkel.nova .shop-niet-gevonden-zoek { display: flex; gap: 7.2px; margin: 0 0 21.6px; }
.winkel.nova .shop-niet-gevonden-zoek input { flex: 1; border: 1px solid var(--nova-lijn); border-radius: var(--nova-r-klein); padding: 10.8px 14.4px; font: inherit; }
.winkel.nova .shop-niet-gevonden-links { display: flex; flex-wrap: wrap; gap: 7.2px; justify-content: center; }
.winkel.nova .shop-niet-gevonden-links a { border: 1px solid var(--nova-lijn); border-radius: var(--nova-r-klein); padding: 7.2px 12.6px; color: var(--nova-inkt); text-decoration: none; }
.winkel.nova .shop-niet-gevonden-links a:hover { border-color: var(--nova-accent); color: var(--nova-accent); }
.winkel.nova .site-boom { display: flex; flex-wrap: wrap; align-items: center; gap: 7.2px 14.4px; padding-top: 21.6px; }
.winkel.nova .site-boom-terug { color: var(--nova-gedempt); text-decoration: none; font-weight: 600; }
.winkel.nova .site-boom-terug:hover { color: var(--nova-accent); }
.winkel.nova .site-boom-links { display: flex; flex-wrap: wrap; gap: 7.2px; }
.winkel.nova .site-boom-link { border: 1px solid var(--nova-lijn); border-radius: var(--nova-r-klein); padding: 5.4px 12.6px; color: var(--nova-inkt); text-decoration: none; font-size: 13px; }
.winkel.nova .site-boom-link:hover { border-color: var(--nova-accent); color: var(--nova-accent); }
.winkel.nova .site-boom-link.aan { background: var(--nova-accent); border-color: var(--nova-accent); color: var(--nova-accent-op); }
.winkel.nova :where(.site-formulier-in, .site-terugbel-form, .site-reactie-form, .inlog-vorm, .shop-footer form, .site-nieuwsbrief) :where(input:not([type="checkbox"], [type="radio"], [type="hidden"], [type="file"], [type="submit"], [type="button"]), select, textarea) {
height: 50px;
padding: 0 14.4px;
background: #fff;
border: 1px solid var(--nova-lijn);
border-radius: var(--nova-r-klein);
font: inherit;
font-size: 13.5px;
color: var(--nova-inkt);
width: 100%;
min-width: 0;
box-sizing: border-box;
}
.winkel.nova :where(.site-formulier-in, .site-reactie-form) :where(textarea) { height: auto; min-height: 120px; padding: 12.6px 14.4px; line-height: 1.6; resize: vertical; }
.winkel.nova :where(.site-formulier-in, .site-terugbel-form, .site-reactie-form, .inlog-vorm, .shop-footer form, .site-nieuwsbrief) :where(input, select, textarea):focus {
outline: 0;
border-color: var(--nova-accent);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--nova-accent) 14%, transparent);
}
.winkel.nova .site-formulier-in label { font-size: 12.6px; color: var(--nova-gedempt); gap: 6px; }
.winkel.nova .site-formulier-in label.site-formulier-vink { color: var(--nova-inkt); font-size: 13.5px; align-self: end; min-height: 50px; justify-content: center; }
.winkel.nova .site-formulier-in select { appearance: none; -webkit-appearance: none; padding-right: 36px; background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1.5l5 5 5-5' fill='none' stroke='%23333' stroke-width='1.5' stroke-linecap='round'/></svg>") no-repeat right 14.4px center; }
.winkel.nova.afrekenen { background: #F7F7F5 !important; }
.winkel.nova .afr-kop { background: #fff; border-bottom: 1px solid var(--nova-lijn); }
.winkel.nova .afr-kop-in { max-width: 1240px; margin: 0 auto; padding: 0 var(--nova-zij); height: 68px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; }
.winkel.nova .afr-logo { display: inline-flex; align-items: center; text-decoration: none; color: var(--nova-inkt); font-weight: 700; font-size: 18px; }
.winkel.nova .afr-logo .logo-beeld { height: 38px; width: auto; display: block; }
.winkel.nova .afr-stappen { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; }
.winkel.nova .afr-stappen li { display: flex; align-items: center; gap: 8px; color: var(--nova-gedempt); font-size: 13px; white-space: nowrap; }
.winkel.nova .afr-stappen li a { display: flex; align-items: center; gap: 8px; color: inherit; text-decoration: none; }
.winkel.nova .afr-stappen li + li::before { content: ""; width: 44px; height: 1px; background: var(--nova-lijn); margin: 0 10px; }
.winkel.nova .afr-stappen li i { font-style: normal; display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--nova-lijn); background: #fff; font-size: 12px; font-weight: 600; }
.winkel.nova .afr-stappen li.aan { color: var(--nova-inkt); font-weight: 700; }
.winkel.nova .afr-stappen li.aan i { background: var(--nova-accent); border-color: var(--nova-accent); color: var(--nova-accent-op); }
.winkel.nova .afr-stappen li.klaar { color: var(--nova-accent); }
.winkel.nova .afr-stappen li.klaar i { color: var(--nova-accent); border-color: var(--nova-accent); }
.winkel.nova .afr-hulp { text-align: right; display: flex; flex-direction: column; font-size: 12.6px; color: var(--nova-gedempt); line-height: 1.4; }
.winkel.nova .afr-hulp b { color: var(--nova-inkt); }
.winkel.nova .afr-voet { max-width: 1240px; margin: 0 auto; padding: 18px var(--nova-zij) 28px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; color: var(--nova-gedempt); font-size: 12px; border-top: 1px solid var(--nova-lijn); }
.winkel.nova .afr-voet-links { display: flex; gap: 14px; flex-wrap: wrap; }
.winkel.nova .afr-voet-links a { color: var(--nova-gedempt); text-decoration: none; }
.winkel.nova .afr-voet-links a:hover { color: var(--nova-inkt); }
.winkel.nova.afrekenen .shop-main { max-width: 1240px; padding: 32px var(--nova-zij) 64px; }
.winkel.nova .afr { display: flex; flex-direction: column; gap: 14px; }
.winkel.nova .afr-intro { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.winkel.nova .afr-intro h1 { margin: 0; font-size: 30px; letter-spacing: -.01em; }
.winkel.nova .afr-intro span { color: var(--nova-gedempt); }
.winkel.nova .afr a { color: var(--nova-accent); font-weight: 600; text-decoration: none; }
.winkel.nova .afr a:hover { text-decoration: underline; }
.winkel.nova .afr-fout { background: #fdecea; border: 1px solid #f1b8b4; color: #8a1f17; border-radius: var(--nova-r-klein); padding: 10.8px 14.4px; font-weight: 500; }
.winkel.nova .afr-vorm { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 32px; align-items: start; }
.winkel.nova .afr-links { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.winkel.nova .afr-sectie { background: #fff; border: 1px solid var(--nova-lijn); border-radius: var(--nova-r-kaart); padding: 24px; }
.winkel.nova .afr-sectie > header { display: flex; align-items: flex-start; gap: 14px; margin: 0 0 18px; }
.winkel.nova .afr-sectie > header i { font-style: normal; flex: none; display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--nova-accent); color: var(--nova-accent-op); font-weight: 700; font-size: 13px; }
.winkel.nova .afr-sectie h2 { margin: 2px 0 0; font-size: 18px; }
.winkel.nova .afr-sectie > header p { margin: 2px 0 0; color: var(--nova-gedempt); }
.winkel.nova .afr-seg { display: inline-flex; border: 1px solid var(--nova-lijn); border-radius: var(--nova-r-klein); overflow: hidden; margin: 0 0 16px; }
.winkel.nova .afr-seg label { position: relative; }
.winkel.nova .afr-seg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.winkel.nova .afr-seg span { display: block; padding: 9px 18px; font-weight: 600; color: var(--nova-gedempt); }
.winkel.nova .afr-seg input:checked + span { background: var(--nova-accent); color: var(--nova-accent-op); }
.winkel.nova .afr-seg input:focus-visible + span { box-shadow: inset 0 0 0 2px var(--nova-inkt); }
.winkel.nova .afr-raster { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 12px; }
.winkel.nova .afr-raster.adres { grid-template-columns: 1fr 1fr 2fr 2fr; }
.winkel.nova .afr-raster.adres .afr-veld:has(#land) { grid-column: 1 / -1; }
.winkel.nova .afr-raster .breed, .winkel.nova .afr-zakelijk { grid-column: 1 / -1; }
.winkel.nova .afr-zakelijk[hidden], .winkel.nova .afr-factuur[hidden] { display: none; }
.winkel.nova .afr-factuur { margin-top: 4px; }
.winkel.nova .afr-veld { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.winkel.nova .afr-label { font-size: 12.6px; color: var(--nova-gedempt); font-weight: 500; }
.winkel.nova .afr-veld input, .winkel.nova .afr-veld select, .winkel.nova .afr-veld textarea { height: var(--nova-h-hoog); border: 1px solid var(--nova-lijn); border-radius: var(--nova-r-klein); padding: 0 14.4px; background: #fff; color: var(--nova-inkt); font: inherit; font-size: 14px; width: 100%; box-sizing: border-box; min-width: 0; }
.winkel.nova .afr-veld textarea { height: auto; min-height: 110px; padding: 12.6px 14.4px; line-height: 1.6; resize: vertical; }
.winkel.nova .afr-veld select { appearance: none; -webkit-appearance: none; padding-right: 36px; background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1.5l5 5 5-5' fill='none' stroke='%23333' stroke-width='1.5' stroke-linecap='round'/></svg>") no-repeat right 14.4px center; }
.winkel.nova .afr-veld input:focus, .winkel.nova .afr-veld select:focus, .winkel.nova .afr-veld textarea:focus { outline: 0; border-color: var(--nova-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--nova-accent) 14%, transparent); }
.winkel.nova .afr-veld input:user-invalid { border-color: #b3261e; box-shadow: 0 0 0 3px rgba(179, 38, 30, .10); }
.winkel.nova .afr-hint { color: var(--nova-gedempt); font-size: 12px; line-height: 1.4; }
.winkel.nova .afr-tussenkop { margin: 20px 0 10px; font-size: 14px; }
.winkel.nova .afr-tussenkop small { color: var(--nova-gedempt); font-weight: 400; margin-left: 6px; }
.winkel.nova .afr-keuzes { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.winkel.nova .afr-keuze { position: relative; display: grid; grid-template-columns: 18px 1fr auto; gap: 12px; align-items: start; border: 1px solid var(--nova-lijn); border-radius: var(--nova-r-kaart); padding: 14px; background: #fff; cursor: pointer; }
.winkel.nova .afr-keuze input, .winkel.nova .afr-pm input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.winkel.nova .afr-keuze:has(input:checked), .winkel.nova .afr-pm:has(input:checked) { border-color: var(--nova-accent); box-shadow: inset 0 0 0 1px var(--nova-accent); background: #fbfcfa; }
.winkel.nova .afr-keuze:has(input:focus-visible), .winkel.nova .afr-pm:has(input:focus-visible) { box-shadow: inset 0 0 0 1px var(--nova-accent), 0 0 0 3px color-mix(in srgb, var(--nova-accent) 20%, transparent); }
.winkel.nova .afr-radio { display: inline-block; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid #c9cbc6; background: #fff; margin-top: 2px; position: relative; flex: none; }
.winkel.nova :is(.afr-keuze, .afr-pm):has(input:checked) .afr-radio { border-color: var(--nova-accent); }
.winkel.nova :is(.afr-keuze, .afr-pm):has(input:checked) .afr-radio::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--nova-accent); }
.winkel.nova .afr-keuze-in { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.winkel.nova .afr-keuze b { font-size: 14px; }
.winkel.nova .afr-keuze small { color: var(--nova-gedempt); font-size: 12px; line-height: 1.45; }
.winkel.nova .afr-keuze em { font-style: normal; font-weight: 700; white-space: nowrap; }
.winkel.nova .afr-betaal { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; margin: 0 0 14px; }
.winkel.nova .afr-pm { position: relative; display: grid; grid-template-columns: 18px 76px 1fr; gap: 0 12px; align-items: start; min-height: 66px; border: 1px solid var(--nova-lijn); border-radius: var(--nova-r-kaart); padding: 12px 14px; background: #fff; cursor: pointer; min-width: 0; }
.winkel.nova .afr-pm.uit { opacity: .65; border-style: dashed; cursor: default; }
.winkel.nova .afr-pm-logo { display: flex; align-items: center; justify-content: center; gap: 4px; width: 76px; height: 30px; flex: none; overflow: hidden; margin-top: -5px; }
.winkel.nova .afr-pm .afr-radio { margin-top: 1px; }
.winkel.nova .afr-pm-logo img { display: block; width: auto; height: auto; max-height: 26px; max-width: 76px; object-fit: contain; }
.winkel.nova .afr-pm-logo:has(img + img) img { max-width: 36px; max-height: 22px; }
.winkel.nova .afr-pm-rek { color: var(--nova-gedempt); }
.winkel.nova .afr-pm-rek svg { width: 26px; height: 26px; }
.winkel.nova .afr-pm-in { display: flex; flex-direction: column; min-width: 0; }
.winkel.nova .afr-pm b { font-size: 13.5px; }
.winkel.nova .afr-pm small { color: var(--nova-gedempt); font-size: 11.5px; line-height: 1.35; }
.winkel.nova .afr-sp-vak { margin: 0 0 14px; }
.winkel.nova .afr-sp-vak[hidden], .winkel.nova .afr-fout[hidden], .winkel.nova .afr-knop[hidden], .winkel.nova .afr-hint[hidden], .winkel.nova .afr-totalen [hidden] { display: none; }
.winkel.nova .afr-sp-mount { min-height: 120px; border: 1px solid var(--nova-lijn); border-radius: var(--nova-r-kaart); padding: 12px; background: #fff; }
.winkel.nova .afr-pm-hint { margin: 0 0 14px; }
.winkel.nova .afr-vink { display: flex; align-items: center; gap: 10px; margin: 14px 0 6px; font-size: 13.5px; color: var(--nova-inkt); cursor: pointer; }
.winkel.nova .afr-vink input[type="checkbox"] { width: 18px; height: 18px; margin: 0; flex: none; accent-color: var(--nova-accent); cursor: pointer; }
.winkel.nova .afr-knop[aria-busy="true"] { opacity: .7; cursor: progress; }
.winkel.nova .afr-opmerking { margin-top: 6px; }
.winkel.nova .afr-opmerking summary { list-style: none; color: var(--nova-accent); font-weight: 600; cursor: pointer; }
.winkel.nova .afr-opmerking summary::-webkit-details-marker { display: none; }
.winkel.nova .afr-opmerking .afr-veld { margin-top: 12px; }
.winkel.nova .afr-onder { color: var(--nova-gedempt); font-size: 12.6px; margin: 0; }
.winkel.nova .afr-bestelling { background: #fff; border: 1px solid var(--nova-lijn); border-radius: var(--nova-r-kaart); padding: 22px; position: sticky; top: 24px; display: flex; flex-direction: column; gap: 14px; }
.winkel.nova .afr-bestelling h3 { margin: 0; font-size: 18px; display: flex; align-items: baseline; gap: 8px; }
.winkel.nova .afr-bestelling h3 span { color: var(--nova-gedempt); font-weight: 400; font-size: 13px; }
.winkel.nova .afr-bestelling h3 a { margin-left: auto; font-size: 12.6px; }
.winkel.nova .afr-regels { display: flex; flex-direction: column; gap: 12px; max-height: 340px; overflow: auto; }
.winkel.nova .afr-regel { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto auto; gap: 12px; align-items: center; }
.winkel.nova .afr-regel img, .winkel.nova .afr-geenfoto { width: 56px; height: 56px; object-fit: cover; border-radius: var(--nova-r-klein); border: 1px solid var(--nova-lijn); background: var(--nova-vlak); display: block; }
.winkel.nova .afr-regel b { display: block; font-size: 12.6px; line-height: 1.35; }
.winkel.nova .afr-regel small { color: var(--nova-gedempt); font-size: 11.5px; }
.winkel.nova .afr-aantal { color: var(--nova-gedempt); font-size: 12.6px; white-space: nowrap; }
.winkel.nova .afr-prijs { font-weight: 700; font-size: 13.5px; min-width: 60px; text-align: right; }
.winkel.nova .afr-totalen { display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; margin: 0; border-top: 1px solid var(--nova-lijn); padding-top: 14px; font-size: 13px; }
.winkel.nova .afr-totalen dt { color: var(--nova-gedempt); }
.winkel.nova .afr-totalen dd { margin: 0; text-align: right; }
.winkel.nova .afr-totalen .tot { color: var(--nova-inkt); font-weight: 700; font-size: 18px; border-top: 1px solid var(--nova-lijn); padding-top: 10px; margin-top: 2px; }
.winkel.nova .afr-totalen .tot small { font-size: 11.5px; color: var(--nova-gedempt); font-weight: 400; }
.winkel.nova .afr-knop { display: flex; justify-content: center; align-items: center; gap: 10px; width: 100%; padding: 15px 18px; font-weight: 700; font-size: 15px; border-radius: var(--nova-r-klein); }
.winkel.nova .afr-knop span { opacity: .85; font-weight: 600; }
.winkel.nova .afr-knop.klein { width: auto; padding: 12px 18px; }
.winkel.nova .afr-knop-licht { display: inline-flex; align-items: center; border: 1px solid var(--nova-lijn); border-radius: var(--nova-r-klein); padding: 12px 18px; font-weight: 600; color: var(--nova-inkt) !important; text-decoration: none !important; }
.winkel.nova a.btn-primary.afr-knop { color: #fff !important; text-decoration: none !important; }
.winkel.nova .afr-veilig { margin: -4px 0 0; display: flex; justify-content: center; align-items: center; gap: 6px; color: var(--nova-gedempt); font-size: 12px; text-align: center; }
.winkel.nova .afr-trust { list-style: none; margin: 0; padding: 12px 0 0; border-top: 1px solid var(--nova-lijn); display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--nova-inkt); }
.winkel.nova .afr-trust li::before { content: "✓"; color: var(--nova-groen); font-weight: 700; margin-right: 7px; }
.winkel.nova .afr-logos { display: flex; flex-wrap: wrap; gap: 6px; }
.winkel.nova .afr-logos img { height: 22px; width: auto; padding: 3px 7px; border: 1px solid var(--nova-lijn); border-radius: var(--nova-r-mini); box-sizing: content-box; background: #fff; }
.winkel.nova .afr-klaar { max-width: 760px; margin: 0 auto; }
.winkel.nova .afr-bedankt { padding: 40px; display: flex; flex-direction: column; gap: 16px; }
.winkel.nova .afr-vinkgroot { display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: #eef6f0; color: var(--nova-groen); font-size: 26px; font-weight: 700; }
.winkel.nova .afr-vinkgroot.wacht { background: #fdefd9; color: #9a5a05; }
.winkel.nova .afr-vinkgroot.bad { background: #fbe9e7; color: #b3261e; }
.winkel.nova .afr-balk { height: 6px; border-radius: var(--nova-r-mini); background: var(--nova-vlak); overflow: hidden; max-width: 420px; margin-top: 4px; }
.winkel.nova .afr-balk i { display: block; height: 100%; width: 4%; background: var(--nova-accent); transition: width .6s linear; }
.winkel.nova .afr-opnieuw { display: flex; flex-direction: column; gap: 14px; margin-top: 6px; }
.winkel.nova .afr-bedankt .afr-betaal { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; }
.winkel.nova .afr-bedankt .afr-veilig { justify-content: flex-start; text-align: left; }
.winkel.nova .afr-opnieuw .afr-knoppen { margin: 0; }
.winkel.nova .afr-bedankt h1 { margin: 0; font-size: 30px; letter-spacing: -.01em; }
.winkel.nova .afr-bedankt p { margin: 0; max-width: 62ch; font-size: 14px; }
.winkel.nova .afr-volgende { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 8px; }
.winkel.nova .afr-volgende > div { border: 1px solid var(--nova-lijn); border-radius: var(--nova-r-kaart); padding: 14px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.winkel.nova .afr-volgende small { color: var(--nova-gedempt); font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; }
.winkel.nova .afr-volgende b { font-size: 14px; }
.winkel.nova .afr-volgende span { color: var(--nova-gedempt); font-size: 12.6px; }
.winkel.nova .afr-knoppen { display: flex; gap: 10px; margin-top: 8px; flex-wrap: wrap; }
@media (max-width: 1099px) { .winkel.nova .afr-vorm { grid-template-columns: 1fr; } .winkel.nova .afr-bestelling { position: static; } .winkel.nova .afr-kop-in { grid-template-columns: auto 1fr; } .winkel.nova .afr-hulp { display: none; } }
@media (max-width: 767px) {
.winkel.nova .afr-kop-in { height: 56px; grid-template-columns: 1fr; }
.winkel.nova .afr-stappen { display: none; }
.winkel.nova .afr-raster, .winkel.nova .afr-raster.adres, .winkel.nova .afr-keuzes, .winkel.nova .afr-betaal, .winkel.nova .afr-volgende { grid-template-columns: 1fr; }
.winkel.nova .afr-bedankt .afr-betaal { grid-template-columns: 1fr; }
.winkel.nova .afr-raster.adres .afr-veld:has(.afr-kort) { grid-column: auto; }
.winkel.nova .afr-sectie { padding: 16px; }
.winkel.nova .afr-bedankt { padding: 24px 16px; }
.winkel.nova.afrekenen .shop-main { padding-bottom: 96px; }
.winkel.nova .afr-bestelling { order: -1; }
}
.winkel.nova .klant-tabel .klant-sub { margin-top: 5px; font-size: 12.5px; color: var(--nova-gedempt); }
.winkel.nova .klant-tabel .klant-acties { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; align-items: center; }
.winkel.nova .klant-tabel .klant-acties a.ghost { text-decoration: none; }
.winkel.nova .klant-tabel .btn-primary.small { padding: 6px 12px; font-size: 12.5px; border-radius: var(--nova-r-klein); }
.winkel.nova .klant-kaarten { display: flex; flex-direction: column; gap: 10px; }
.winkel.nova .klant-kaartrij { display: grid; grid-template-columns: 60px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--nova-lijn); font-size: 13.5px; }
.winkel.nova .klant-kaartrij small { color: var(--nova-gedempt); margin-left: 6px; }
.winkel.nova .afr-bewaar { display: flex; align-items: flex-start; gap: 8px; margin-top: 10px; font-size: 12.6px; color: var(--nova-gedempt); }
.winkel.nova .afr-bewaar input { margin-top: 2px; }
.winkel.nova .klant-kaart { width: 56px; height: 56px; border-radius: 50%; border: 0; background: var(--nova-accent); color: var(--nova-accent-op, #fff); display: grid; place-items: center; overflow: hidden; flex: none; }
.winkel.nova .klant-kaart img { width: 100%; height: 100%; object-fit: contain; background: #fff; display: block; }
.winkel.nova .klant-initialen { font-size: 20px; font-weight: 700; letter-spacing: .02em; }
.winkel.nova .klant-twee { display: grid; grid-template-columns: minmax(0, 832fr) minmax(0, 550fr); gap: 14.4px; align-items: start; }
.winkel.nova .klant-twee > div { display: flex; flex-direction: column; gap: 14.4px; min-width: 0; }
.winkel.nova .klant-twee .klant-kaart-blok { margin-bottom: 0; }
@media (max-width: 1099px) { .winkel.nova .klant-twee { grid-template-columns: minmax(0, 1fr); } }
.winkel.nova .klant-aandacht { display: flex; align-items: center; gap: 14.4px 21.6px; min-height: 48px; padding: 8px 21.6px; margin-bottom: 14.4px; border: 1px solid var(--nova-lijn); border-left: 4px solid var(--nova-accent); border-radius: var(--nova-r-kaart); font-size: 13.5px; flex-wrap: wrap; background: #fff; }
.winkel.nova .klant-aandacht b { flex: none; }
.winkel.nova .klant-aandacht a { color: var(--nova-accent); font-weight: 600; text-decoration: underline; margin-left: 6px; }
.winkel.nova .klant-tegels { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14.4px; }
.winkel.nova .klant-tegel { border: 1px solid var(--nova-lijn); border-radius: var(--nova-r-kaart); padding: 21.6px; min-height: 213px; display: flex; flex-direction: column; gap: 4px; background: #fff; color: inherit; text-decoration: none; min-width: 0; }
.winkel.nova .klant-tegel small { font-size: 13.5px; font-weight: 600; }
.winkel.nova .klant-tegel b { font-size: 28.8px; line-height: 1.1; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.winkel.nova .klant-tegel span { font-size: 12.6px; color: var(--nova-gedempt); }
.winkel.nova .klant-tegel .klant-knop { margin-top: auto; align-self: flex-start; max-width: 100%; }
.winkel.nova .klant-knop { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: var(--nova-h); padding: 0 14.4px; border-radius: var(--nova-r-klein); background: var(--nova-accent); color: var(--nova-accent-op, #fff); font-size: 12.6px; font-weight: 600; white-space: nowrap; text-decoration: none; border: 0; cursor: pointer; font-family: inherit; line-height: 1; box-sizing: border-box; }
.winkel.nova .klant-knop.licht { background: #fff; color: var(--nova-inkt); border: 1px solid var(--nova-lijn); }
.winkel.nova .klant-knop.rood { background: #fff; color: #b42318; border: 1px solid var(--nova-lijn); }
.winkel.nova .klant-knop.klein { height: 35px; }
.winkel.nova .klant-knop:hover { filter: brightness(.96); }
.winkel.nova .klant-kaartkop { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.winkel.nova .klant-kaartkop h2 { margin: 0; flex: 1; min-width: 120px; }
.winkel.nova .klant-kaartkop form { margin: 0; }
.winkel.nova .klant-uitleg { margin: 0 0 14.4px; color: #555; font-size: 13.5px; line-height: 1.5; }
.winkel.nova .klant-uitleg.klein { font-size: 12.6px; }
.winkel.nova .klant-zoekveld, .winkel.nova .klant-select { height: var(--nova-h-klein); border: 1px solid var(--nova-lijn); border-radius: var(--nova-r-klein); padding: 0 10.8px; font: inherit; font-size: 12.6px; color: var(--nova-inkt); background: #fff; box-sizing: border-box; }
.winkel.nova .klant-zoekveld { width: 202px; max-width: 100%; }
.winkel.nova .klant-faq { border-radius: var(--nova-r-klein); background: #f7f7f7; margin-top: 8px; font-size: 13.5px; }
.winkel.nova .klant-faq summary { list-style: none; display: flex; align-items: center; justify-content: space-between; min-height: 45px; padding: 0 14.4px; cursor: pointer; }
.winkel.nova .klant-faq summary::-webkit-details-marker { display: none; }
.winkel.nova .klant-faq summary::after { content: ""; width: 7px; height: 7px; border-right: 1.5px solid #666; border-bottom: 1.5px solid #666; transform: rotate(45deg) translateY(-2px); margin-left: 10px; flex: none; }
.winkel.nova .klant-faq[open] summary::after { transform: rotate(-135deg) translateY(2px); }
.winkel.nova .klant-faq p { margin: 0; padding: 0 14.4px 12px; color: #555; line-height: 1.6; }
.winkel.nova .klant-chatregel { margin: 14px 0 0; font-size: 12.6px; }
.winkel.nova .klant-chatregel a, .winkel.nova .klant-link { color: var(--nova-accent); font-weight: 600; text-decoration: underline; background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }
.winkel.nova .klant-link.gevaar { color: #b42318; }
.winkel.nova .klant-icoontjes { display: flex; gap: 6px; justify-content: flex-end; align-items: center; }
.winkel.nova .klant-icoontjes form { margin: 0; }
.winkel.nova .klant-icoon { width: 30px; height: 30px; border: 1px solid var(--nova-lijn); border-radius: var(--nova-r-klein); background: #fff; display: inline-grid; place-items: center; color: var(--nova-inkt); cursor: pointer; padding: 0; }
.winkel.nova .klant-icoon:hover { border-color: var(--nova-accent); color: var(--nova-accent); }
.winkel.nova .klant-icoon svg { width: 14px; height: 14px; }
.winkel.nova .klant-ordertabel td { vertical-align: middle; }
.winkel.nova .klant-offertevraag { display: flex; align-items: center; gap: 14.4px; justify-content: space-between; flex-wrap: wrap; }
.winkel.nova .klant-offertevraag .klant-uitleg { margin-bottom: 0; }
.winkel.nova :is(.klant-band, .pdp-oordeel-vorm) .klant-veld > label,
.winkel.nova :is(.klant-band, .pdp-oordeel-vorm) .klant-veld:has(> input:focus) > label,
.winkel.nova :is(.klant-band, .pdp-oordeel-vorm) .klant-veld:has(> textarea:focus) > label,
.winkel.nova :is(.klant-band, .pdp-oordeel-vorm) .klant-veld:has(> input:not(:placeholder-shown)) > label,
.winkel.nova :is(.klant-band, .pdp-oordeel-vorm) .klant-veld:has(> textarea:not(:placeholder-shown)) > label,
.winkel.nova :is(.klant-band, .pdp-oordeel-vorm) .klant-veld:has(> select) > label,
.winkel.nova :is(.klant-band, .pdp-oordeel-vorm) .klant-veld:has(> input[type="file"]) > label {
position: absolute; left: 10.8px; top: -7px; transform: none; opacity: 1; padding: 0 4px;
background: #fff; background-image: none; font-size: 11.7px; line-height: 14px; font-weight: 600;
color: var(--nova-inkt); transition: none; max-width: calc(100% - 30px);
}
.winkel.nova :is(.klant-band, .pdp-oordeel-vorm) .klant-veld input, .winkel.nova :is(.klant-band, .pdp-oordeel-vorm) .klant-veld select { padding: 0 14.4px; font-size: 13.5px; height: var(--nova-h-hoog); }
.winkel.nova :is(.klant-band, .pdp-oordeel-vorm) .klant-veld textarea { padding: 14px 14.4px; height: auto; min-height: 120px; font-size: 13.5px; }
.winkel.nova :is(.klant-band, .pdp-oordeel-vorm) .klant-veld input::placeholder { color: #b3b7b3; }
.winkel.nova :is(.klant-band, .pdp-oordeel-vorm) .klant-veld.vast > label { position: static; padding: 0; font-size: 12.6px; margin-bottom: 6px; opacity: 1; transform: none; background: none; }
.winkel.nova :is(.klant-band, .pdp-oordeel-vorm) .klant-veld.vast .klant-vast { margin: 0; font-size: 13.5px; line-height: 1.5; }
.winkel.nova .klant-band .klant-vorm { align-items: start; row-gap: 21.6px; column-gap: 14.4px; }
.winkel.nova .klant-band .klant-vorm.twee { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.winkel.nova .klant-band .klant-vorm.een { grid-template-columns: minmax(0, 1fr); row-gap: 18px; }
.winkel.nova .klant-band .klant-vormknoppen { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.winkel.nova .klant-band .klant-vormknoppen.breed { grid-column: 1 / -1; }
.winkel.nova .klant-band .klant-vormknoppen form { margin: 0; }
@media (max-width: 600px) { .winkel.nova .klant-band .klant-vorm.twee { grid-template-columns: minmax(0, 1fr); } }
.winkel.nova .klant-srijen { margin-bottom: 14.4px; }
.winkel.nova .klant-srij { display: grid; grid-template-columns: minmax(120px, 170px) 79px minmax(0, 1fr) 100px 20px; gap: 14.4px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--nova-lijn); }
.winkel.nova .klant-zoekvak { position: relative; min-width: 0; }
.winkel.nova .klant-invoer { height: var(--nova-h); border: 1px solid var(--nova-lijn); border-radius: var(--nova-r-klein); padding: 0 10.8px; font: inherit; font-size: 13.5px; width: 100%; min-width: 0; background: #fff; color: var(--nova-inkt); box-sizing: border-box; }
.winkel.nova .klant-invoer.smal { width: 120px; }
.winkel.nova .klant-invoer:focus { outline: 0; border-color: var(--nova-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--nova-accent) 14%, transparent); }
.winkel.nova .klant-sug { position: absolute; left: 0; top: calc(100% + 4px); z-index: 5; width: max(100%, 360px); max-width: 480px; background: #fff; border: 1px solid var(--nova-lijn); border-radius: var(--nova-r-klein); box-shadow: 0 12px 30px rgba(0, 0, 0, .12); overflow: hidden; }
.winkel.nova .klant-sug button { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 8px 10.8px; border: 0; background: none; font: inherit; font-size: 12.6px; cursor: pointer; color: var(--nova-inkt); }
.winkel.nova .klant-sug button:hover, .winkel.nova .klant-sug button.aan { background: var(--nova-vlak); }
.winkel.nova .klant-sug img { width: 32px; height: 32px; object-fit: contain; flex: none; }
.winkel.nova .klant-sug span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.winkel.nova .klant-sug small { color: var(--nova-gedempt); display: block; }
.winkel.nova .klant-sug b { margin-left: auto; white-space: nowrap; }
.winkel.nova .klant-snaam { font-size: 13.5px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.winkel.nova .klant-flets { color: #8a8f8a; }
.winkel.nova .klant-bedrag { text-align: right; white-space: nowrap; font-size: 13.5px; }
.winkel.nova .klant-x { width: 20px; height: 20px; border: 0; background: none; color: #8a8f8a; font-size: 18px; line-height: 1; cursor: pointer; padding: 0; }
.winkel.nova .klant-x:hover { color: #b42318; }
.winkel.nova .klant-lijstvak { width: 100%; min-height: 96px; border: 1px solid var(--nova-lijn); border-radius: var(--nova-r-klein); padding: 12px 10.8px; font: inherit; font-size: 13.5px; line-height: 1.6; margin-bottom: 14.4px; resize: vertical; box-sizing: border-box; }
.winkel.nova .klant-totaalkaart .klant-oregel { display: flex; justify-content: space-between; padding: 8px 0; font-size: 16.2px; font-weight: 700; }
.winkel.nova .klant-afrekenknop { width: 100%; height: 50px; font-size: 14.4px; margin-top: 8px; }
.winkel.nova .klant-tegelrij { grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); }
@media (max-width: 767px) {
.winkel.nova .klant-tegels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.winkel.nova .klant-tegel { min-height: 0; padding: 14.4px; }
.winkel.nova .klant-srij { grid-template-columns: minmax(0, 1fr) 79px 20px; row-gap: 6px; }
.winkel.nova .klant-srij .klant-snaam { grid-column: 1 / 3; white-space: normal; }
.winkel.nova .klant-srij .klant-bedrag { grid-column: 3; text-align: right; }
.winkel.nova .klant-zoekveld { width: 100%; }
}
.winkel.nova .klant-vink { display: flex; align-items: center; gap: 9px; font-size: 13.5px; cursor: pointer; }
.winkel.nova .klant-vink input { width: 16px; height: 16px; accent-color: var(--nova-accent); margin: 0; flex: none; }
.winkel.nova .klant-vink.klein { font-size: 12.6px; font-weight: 400; }
.winkel.nova .klant-vinkjes { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.winkel.nova .klant-olabel { font-size: 12.6px; font-weight: 600; display: block; margin-bottom: -8px; }
.winkel.nova .klant-keuzes { display: grid; gap: 10px; }
.winkel.nova .klant-keuze { border: 1px solid var(--nova-lijn); border-radius: var(--nova-r-kaart); background: #fff; padding: 12px 14px; font-weight: 600; font-size: 13.5px; display: flex; flex-direction: column; gap: 2px; cursor: pointer; position: relative; }
.winkel.nova .klant-keuze input[type="radio"] { position: absolute; opacity: 0; width: 1px; height: 1px; }
.winkel.nova .klant-keuze:has(input[type="radio"]:checked) { border-color: var(--nova-accent); box-shadow: 0 0 0 1px var(--nova-accent) inset; }
.winkel.nova .klant-keuze small { font-weight: 400; color: #666; font-size: 12px; }
.winkel.nova .klant-vinkje { color: var(--nova-accent); font-weight: 700; margin-right: 4px; }
.winkel.nova .klant-uit-rij td { color: #8a8f8a; }
.winkel.nova .klant-rollen { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 14px; margin: 0; font-size: 13.5px; }
.winkel.nova .klant-rollen dt { font-weight: 600; }
.winkel.nova .klant-rollen dd { margin: 0; color: #555; }
.winkel.nova .klant-grij { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto auto; gap: 14.4px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--nova-lijn); font-size: 13.5px; }
.winkel.nova .klant-grij small { display: block; color: #8a8f8a; font-size: 12px; }
.winkel.nova .klant-grij form { margin: 0; }
.winkel.nova .klant-afwijzen { position: relative; }
.winkel.nova .klant-afwijzen summary { list-style: none; }
.winkel.nova .klant-afwijzen summary::-webkit-details-marker { display: none; }
.winkel.nova .klant-afwijzen-vorm { position: absolute; right: 0; top: calc(100% + 6px); z-index: 4; display: flex; gap: 8px; background: #fff; border: 1px solid var(--nova-lijn); border-radius: var(--nova-r-kaart); padding: 10px; box-shadow: 0 12px 30px rgba(0, 0, 0, .12); min-width: 320px; }
.winkel.nova .klant-inregel { display: flex; gap: 8px; align-items: center; }
.winkel.nova .klant-inregel .klant-invoer { width: 260px; }
.winkel.nova .klant-collecties { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14.4px; }
.winkel.nova .klant-collectie { border: 1px solid var(--nova-lijn); border-radius: var(--nova-r-kaart); padding: 12px; display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: inherit; background: #fff; min-width: 0; }
.winkel.nova .klant-collectie:hover { border-color: var(--nova-accent); }
.winkel.nova .klant-collectie-foto { height: 120px; border-radius: var(--nova-r-klein); background: var(--nova-vlak); overflow: hidden; display: grid; place-items: center; margin-bottom: 6px; }
.winkel.nova .klant-collectie-foto img { width: 100%; height: 100%; object-fit: cover; }
.winkel.nova .klant-collectie small { color: #666; font-size: 12.6px; }
.winkel.nova .klant-collectie .wie { color: var(--nova-accent); font-weight: 600; }
.winkel.nova .klant-wiebestelt { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 14.4px; font-size: 13.5px; }
.winkel.nova .klant-wiebestelt .breed { flex-basis: 100%; margin: 0; }
.winkel.nova .klant-tagje { height: 28px; padding: 0 10.8px; border: 1px solid var(--nova-lijn); border-radius: 999px; display: inline-flex; align-items: center; gap: 6px; font-size: 12.6px; background: #fff; cursor: pointer; }
.winkel.nova .klant-tagje:has(input:checked) { border-color: var(--nova-accent); background: color-mix(in srgb, var(--nova-accent) 8%, #fff); }
.winkel.nova .klant-tagje input { accent-color: var(--nova-accent); margin: 0; }
.winkel.nova .klant-uitklap { position: relative; }
.winkel.nova .klant-uitklap summary { list-style: none; }
.winkel.nova .klant-uitklap summary::-webkit-details-marker { display: none; }
.winkel.nova .klant-uitklap-vorm { position: absolute; left: 0; top: calc(100% + 6px); z-index: 4; display: flex; gap: 8px; background: #fff; border: 1px solid var(--nova-lijn); border-radius: var(--nova-r-kaart); padding: 10px; box-shadow: 0 12px 30px rgba(0, 0, 0, .12); min-width: 360px; }
.winkel.nova .klant-artikel-erbij .klant-zoekvak { flex: 1; min-width: 200px; }
.winkel.nova .klant-artikelcel { display: flex; align-items: center; gap: 10px; }
.winkel.nova .klant-artikelcel img { width: 40px; height: 40px; object-fit: contain; border: 1px solid var(--nova-lijn); border-radius: var(--nova-r-klein); flex: none; }
.winkel.nova .klant-weg-vorm { margin-top: 14.4px; text-align: right; }
.winkel.nova .klant-terug { font-size: 12.6px; color: #666; text-decoration: none; flex: none; }
.winkel.nova .klant-logorij { display: flex; align-items: center; gap: 14.4px; flex-wrap: wrap; margin: 0; }
.winkel.nova .klant-logorij .klant-kaart { width: 72px; height: 72px; }
.winkel.nova .klant-logorij .klant-initialen { font-size: 24px; }
.winkel.nova .klant-logorij small { color: #666; font-size: 12px; flex-basis: 100%; }
.winkel.nova .klant-bestandknop { cursor: pointer; }
@media (max-width: 767px) {
.winkel.nova .klant-collecties { grid-template-columns: minmax(0, 1fr); }
.winkel.nova .klant-grij { grid-template-columns: minmax(0, 1fr) auto; }
.winkel.nova .klant-uitklap-vorm, .winkel.nova .klant-afwijzen-vorm { min-width: 0; width: calc(100vw - 60px); flex-wrap: wrap; }
}
.winkel.nova .klant-band .klant-vorm.een { row-gap: 24px; }
.winkel.nova .klant-band .klant-vorm.een > [data-rol-besteller] { display: grid; row-gap: 24px; }
.winkel.nova .klant-band .klant-vorm.een > [data-rol-besteller][hidden] { display: none; }
.winkel.nova .klant-olabel { margin: 0 0 -14px; }
.winkel.nova .klant-band .klant-vink { line-height: 1.4; }
.winkel.nova .klant-band button.klant-icoon, .winkel.kaia .klant-band button.klant-icoon { height: 30px; width: 30px; min-height: 0; padding: 0; font-size: 0; line-height: 0; border-radius: var(--nova-r-klein); background: #fff; color: var(--nova-inkt); display: inline-grid; place-items: center; }
.winkel.nova .klant-band button.klant-icoon svg { width: 14px; height: 14px; display: block; }
.winkel.nova .inlog.registreer { grid-template-columns: 40% minmax(0, 1fr); min-height: 0; }
.winkel.nova .registreer-links { background: #f3f3f3; padding: 50.4px var(--nova-zij) 0; position: relative; overflow: hidden; min-height: 676px; }
.winkel.nova .registreer-links h2 { font-size: 37.44px; line-height: 1.2; font-weight: 700; margin: 0 0 21.6px; letter-spacing: 0; }
.winkel.nova .registreer-links > p { font-size: 13.5px; margin: 0 0 32px; max-width: 400px; color: #555; }
.winkel.nova .registreer-links .inlog-usps { position: relative; z-index: 1; margin: 0; }
.winkel.nova .registreer-kaart { position: absolute; left: var(--nova-zij); bottom: 21.6px; z-index: 2; width: 362px; max-width: calc(100% - 2 * var(--nova-zij)); background: #fff; border-radius: var(--nova-r-kaart); padding: 21.6px; box-shadow: 0 8px 30px rgba(0, 0, 0, .08); }
.winkel.nova .registreer-kaart h3 { margin: 0 0 12px; font-size: 18px; font-weight: 700; }
.winkel.nova .registreer-kaart p { margin: 0 0 18px; font-size: 13.5px; line-height: 1.5; }
.winkel.nova .registreer-foto { position: absolute; right: 0; bottom: 0; width: 70%; height: 62%; object-fit: cover; clip-path: polygon(0 45%, 100% 0, 100% 100%, 0 100%); }
.winkel.nova .registreer-rechts { padding: 21.6px var(--nova-zij) 43.2px 16px; min-width: 0; }
.winkel.nova .registreer-rechts h1 { font-size: 37.44px; line-height: 56.16px; font-weight: 700; margin: 0 0 21.6px; letter-spacing: 0; }
.winkel.nova .registreer-stappen { list-style: none; display: flex; gap: 14.4px; padding: 0; margin: 21.6px 0 36px; flex-wrap: wrap; }
.winkel.nova .registreer-stappen li { display: inline-flex; align-items: center; gap: 14.4px; height: 50px; padding: 0 21.6px 0 8px; border-radius: 999px; border: 1px solid var(--nova-lijn); font-size: 13.5px; font-weight: 600; color: var(--nova-inkt); background: #fff; }
.winkel.nova .registreer-stappen li span { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--nova-lijn); font-size: 13.5px; }
.winkel.nova .registreer-stappen li.aan { background: #eef0ee; border-color: #eef0ee; }
.winkel.nova .registreer-stappen li.aan span { background: var(--nova-accent); color: var(--nova-accent-op, #fff); border-color: var(--nova-accent); }
.winkel.nova .registreer-velden { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 14.4px; }
.winkel.nova .registreer-velden .klant-veld { grid-column: span 12; }
.winkel.nova .registreer-velden .rv-aanhef { grid-column: span 2; }
.winkel.nova .registreer-velden .rv-naam { grid-column: span 5; }
.winkel.nova .registreer-velden .rv-half { grid-column: span 6; }
.winkel.nova .registreer-velden .rv-straat { grid-column: span 8; }
.winkel.nova .registreer-velden .rv-nr { grid-column: span 4; }
.winkel.nova .registreer-velden .rv-postcode { grid-column: span 4; }
.winkel.nova .registreer-velden .rv-plaats { grid-column: span 8; }
.winkel.nova .registreer-velden .klant-veld.ov-tel { display: grid; grid-template-columns: 72px minmax(0, 1fr); }
.winkel.nova .registreer-velden .klant-veld.ov-tel > label { left: 80px; }
.winkel.nova .registreer-vinkjes { display: flex; flex-direction: column; gap: 7px; margin: 14.4px 0 0; }
.winkel.nova .registreer-vink { display: flex; align-items: center; gap: 10.8px; font-size: 13.5px; cursor: pointer; }
.winkel.nova .registreer-vink input { width: 18px; height: 18px; accent-color: var(--nova-accent); margin: 0; flex: none; }
.winkel.nova .registreer-knoppen { display: flex; justify-content: flex-end; gap: 10.8px; margin-top: 36px; }
.winkel.nova .registreer-volgende { min-width: 192px; }
.winkel.nova .registreer-honing { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.winkel.nova .registreer-fout { margin: 0 0 21.6px; }
.winkel.nova .registreer-uitleg { font-size: 13.5px; color: #555; margin: 0 0 21.6px; }
.winkel.nova .registreer-uitleg.klein { font-size: 12.6px; margin: 14.4px 0 0; }
.winkel.nova .registreer-klaar { max-width: 640px; margin: 72px auto; text-align: center; padding: 0 var(--nova-zij); }
.winkel.nova .registreer-klaar h1 { font-size: 37.44px; margin: 0 0 14.4px; }
.winkel.nova .registreer-klaar p { font-size: 15.3px; line-height: 1.6; margin: 0 0 28px; color: #555; }
@media (max-width: 1023px) {
.winkel.nova .inlog.registreer { grid-template-columns: minmax(0, 1fr); }
.winkel.nova .registreer-links { min-height: 0; padding-bottom: 240px; }
.winkel.nova .registreer-rechts { padding-left: var(--nova-zij); }
.winkel.nova .registreer-velden .rv-aanhef { grid-column: span 4; }
.winkel.nova .registreer-velden .rv-naam { grid-column: span 12; }
}
@media (max-width: 600px) {
.winkel.nova .registreer-velden .rv-half, .winkel.nova .registreer-velden .rv-postcode, .winkel.nova .registreer-velden .rv-plaats { grid-column: span 12; }
.winkel.nova .registreer-knoppen { flex-direction: column-reverse; }
}
.winkel.nova .pdp-bezorg { border: 0; border-radius: 0; background: transparent; margin-top: 21.6px; overflow: visible; }
.winkel.nova .pdp-bezorg-rij summary, .winkel.nova .pdp-bezorg-regel { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto 14px; gap: 12px; align-items: center; min-height: 40px; padding: 6px 0; font-size: 13.5px; position: relative; }
.winkel.nova .pdp-bezorg-rij summary { cursor: pointer; list-style: none; }
.winkel.nova .pdp-bezorg-rij summary:hover .pdp-bezorg-kop b { text-decoration: underline; text-underline-offset: 3px; }
.winkel.nova .pdp-bezorg-rij summary::-webkit-details-marker { display: none; }
.winkel.nova .pdp-bezorg-icoon-vlak { width: 20px; height: 20px; border-radius: 0; background: none; display: grid; place-items: center; color: #8a8f8a; flex: none; }
.winkel.nova .pdp-bezorg-icoon { width: 18px; height: 18px; display: block; }
.winkel.nova .pdp-bezorg-kop { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 12px; align-items: baseline; min-width: 0; }
.winkel.nova .pdp-bezorg-kop b { font-weight: 600; white-space: nowrap; color: var(--nova-inkt); }
.winkel.nova .pdp-bezorg-zin { color: #6b6f6b; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.winkel.nova .pdp-bezorg-waarde { font-weight: 600; white-space: nowrap; color: var(--nova-inkt); }
.winkel.nova .pdp-bezorg-waarde.groen { color: #1a7f37; }
.winkel.nova .pdp-bezorg-pijl { width: 14px; height: 14px; display: grid; place-items: center; color: #b3b7b3; transition: transform .2s, color .15s; }
.winkel.nova .pdp-bezorg-rij summary:hover .pdp-bezorg-pijl { color: var(--nova-inkt); }
.winkel.nova .pdp-bezorg-rij[open] .pdp-bezorg-pijl { transform: rotate(180deg); color: var(--nova-inkt); }
.winkel.nova .pdp-bezorg-leeg { width: 14px; }
.winkel.nova .pdp-bezorg-uitleg { padding: 0 0 10px 32px; font-size: 12.6px; color: #6b6f6b; line-height: 1.55; }
.winkel.nova .pdp-bezorg-uitleg p { margin: 0 0 3px; }
.winkel.nova .pdp-bezorg-uitleg a { color: var(--nova-accent); font-weight: 600; text-decoration: none; }
.winkel.nova .pdp-bezorg-uitleg a:hover { text-decoration: underline; }
.winkel.nova .pdp-bezorg-postcode { display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 6px 0 0 32px; margin: 0; border: 0; background: none; font-size: 12.6px; color: #6b6f6b; }
.winkel.nova .pdp-bezorg-postcode-tekst { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.winkel.nova .pdp-bezorg-veld { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.winkel.nova .pdp-bezorg-veld input { height: var(--nova-h-klein); width: 92px; border: 1px solid var(--nova-lijn); border-radius: var(--nova-r-klein); padding: 0 9px; font: inherit; font-size: 13px; background: #fff; color: var(--nova-inkt); text-transform: uppercase; }
.winkel.nova .pdp-bezorg-veld input::placeholder { text-transform: none; color: #b3b7b3; }
.winkel.nova .pdp-bezorg-veld input:focus { outline: 0; border-color: var(--nova-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--nova-accent) 14%, transparent); }
.winkel.nova .pdp-bezorg-veld button { width: var(--nova-h-klein); height: var(--nova-h-klein); border: 0; border-radius: var(--nova-r-klein); background: var(--nova-accent); color: var(--nova-accent-op, #fff); display: grid; place-items: center; cursor: pointer; }
.winkel.nova .pdp-bezorg-uit { font-size: 12.6px; color: #b42318; margin-left: auto; }
.winkel.nova .pdp-bezorg-uit.goed { color: var(--nova-inkt); font-weight: 600; }
.winkel.nova .pdp-bezorg-wijzig { display: none; border: 0; background: none; padding: 0; font: inherit; font-size: 12.6px; color: var(--nova-accent); text-decoration: underline; cursor: pointer; }
.winkel.nova .pdp-bezorg-postcode.klaar .pdp-bezorg-veld { display: none; }
.winkel.nova .pdp-bezorg-postcode.klaar .pdp-bezorg-uit { margin-left: auto; }
.winkel.nova .pdp-bezorg-postcode.klaar .pdp-bezorg-wijzig { display: inline; }
.winkel.nova .pdp-bezorg-postcode.klaar .pdp-bezorg-postcode-tekst { display: none; }
.winkel.nova .pdp-bezorg-postcode.klaar::before { content: attr(data-klaar); }
.winkel.nova .pdp-knoppenrij { display: flex; gap: 10px; margin-top: 14.4px; }
.winkel.nova .pdp-knop-licht { flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; height: var(--nova-h); padding: 0 14.4px; border: 1px solid var(--nova-lijn); border-radius: var(--nova-r-klein); background: #fff; color: var(--nova-inkt); font-size: 13.5px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.winkel.nova .pdp-knop-licht:hover { border-color: var(--nova-accent); color: var(--nova-accent); }
@media (max-width: 600px) {
.winkel.nova .pdp-bezorg-kop { grid-template-columns: minmax(0, 1fr); gap: 1px; }
.winkel.nova .pdp-bezorg-zin { white-space: normal; }
.winkel.nova .pdp-bezorg-postcode { flex-wrap: wrap; padding-left: 0; }
.winkel.nova .pdp-bezorg-veld { margin-left: 0; }
.winkel.nova .pdp-bezorg-uitleg { padding-left: 14.4px; }
}
.winkel.nova .pdp-vtabel { border: 1px solid var(--nova-lijn); border-radius: var(--nova-r-kaart, 9px); overflow: hidden; background: #fff; margin: 0 0 14.4px; font-size: 13.5px; }
.winkel.nova .pdp-vtabel-kop, .winkel.nova .pdp-vtabel-rij { display: grid; grid-template-columns: minmax(0, 1fr) 100px 118px 84px; gap: 14.4px; align-items: center; padding: 0 18px; }
.winkel.nova .pdp-vtabel-kop { height: 40px; background: #fafaf9; font-size: 12.6px; font-weight: 600; color: #8a8f8a; border-bottom: 1px solid var(--nova-lijn); }
.winkel.nova .pdp-vtabel-rij { min-height: 64px; padding-block: 9px; position: relative; transition: background .15s; }
.winkel.nova .pdp-vtabel-rij + .pdp-vtabel-rij::before { content: ""; position: absolute; left: 18px; right: 18px; top: 0; height: 1px; background: #eeefee; }
.winkel.nova .pdp-vtabel-rij:hover { background: #fafbfa; }
.winkel.nova .pdp-vtabel-rij.gekozen { background: #f5f8f4; }
.winkel.nova .pdp-vtabel-rij.uitverkocht { color: #9a9f9a; }
.winkel.nova .pdp-vtabel-rij.uitverkocht .pdp-vtabel-naam b, .winkel.nova .pdp-vtabel-rij.uitverkocht .pdp-vtabel-prijs b { color: #9a9f9a; }
.winkel.nova .pdp-vtabel-rij.uitverkocht .pdp-vtabel-aantal { opacity: .45; pointer-events: none; }
.winkel.nova .pdp-vtabel-rij.gekozen::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--nova-accent); }
.winkel.nova .pdp-vtabel-naam { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.winkel.nova .pdp-vtabel-naam b { font-weight: 600; font-size: 14.4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.winkel.nova .pdp-vtabel-naam small { color: #8a8f8a; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.winkel.nova .pdp-vtabel-prijs { display: flex; flex-direction: column; gap: 2px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.winkel.nova .pdp-vtabel-prijs b { font-weight: 600; font-size: 14.4px; }
.winkel.nova .pdp-vtabel-prijs small { color: #8a8f8a; font-size: 11.7px; }
.winkel.nova .pdp-vtabel-voorraad { font-weight: 600; font-size: 13.5px; }
.winkel.nova .pdp-vtabel-voorraad.stand-ja { color: #2e9e4f; }
.winkel.nova .pdp-vtabel-voorraad.stand-bijna { color: #b45309; }
.winkel.nova .pdp-vtabel-voorraad.stand-nee { color: #d9432b; }
.winkel.nova .pdp-vtabel-aantal { display: inline-flex; justify-self: end; }
.winkel.nova .pdp-vtabel-rij:not(.gekozen) .teller input { color: #9a9f9a; font-weight: 500; }
.winkel.nova .pdp-vtabel-voet { display: flex; align-items: center; justify-content: flex-end; gap: 18px; padding: 12px 18px; border-top: 1px solid var(--nova-lijn); background: #fff; }
.winkel.nova .pdp-vtabel-som { white-space: nowrap; color: #666; }
.winkel.nova .pdp-vtabel-som b { font-size: 18px; margin-left: 8px; color: var(--nova-inkt); font-variant-numeric: tabular-nums; }
.winkel.nova .pdp-vtabel .pdp-koop { height: 50px; padding: 0 21.6px; flex: none; width: auto; }
.winkel.nova .pdp-vtabel .pdp-koop[disabled] { opacity: .45; cursor: not-allowed; }
.winkel.nova .pdp-koopvorm-weg { display: none; }
@media (max-width: 600px) {
.winkel.nova .pdp-vtabel-kop { display: none; }
.winkel.nova .pdp-vtabel-rij { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "naam prijs" "voorraad aantal"; row-gap: 10px; column-gap: 12px; padding: 12px 14.4px 12px 16px; align-items: center; }
.winkel.nova .pdp-vtabel-naam { grid-area: naam; }
.winkel.nova .pdp-vtabel-naam b { white-space: normal; }
.winkel.nova .pdp-vtabel-rij { align-items: center; }
.winkel.nova .pdp-vtabel-prijs { grid-area: prijs; align-items: flex-end; text-align: right; }
.winkel.nova .pdp-vtabel-voorraad { grid-area: voorraad; align-self: center; font-size: 12.6px; }
.winkel.nova .pdp-vtabel-aantal { grid-area: aantal; }
.winkel.nova .pdp-vtabel-rij + .pdp-vtabel-rij::before { left: 0; right: 0; }
.winkel.nova .pdp-vtabel-voet { flex-wrap: wrap; justify-content: space-between; }
.winkel.nova .pdp-vtabel .pdp-koop { width: 100%; }
}
.winkel.nova .site-paginakop { font-size: 30.24px; font-weight: 700; line-height: 1.3; letter-spacing: 0; margin: 30px 0 0; }
.winkel.nova .ko-kop { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 14.4px; }
.winkel.nova .ko-kop > div { min-width: 0; }
.winkel.nova .ko-kop h2 { margin: 0; }
.winkel.nova .ko-sub { margin: 4px 0 0; font-size: 13.5px; color: var(--nova-gedempt); line-height: 1.5; }
.winkel.nova .klant-kaart-blok > h2 + .ko-sub { margin: -8px 0 14.4px; }
.winkel.nova .ko-acties { display: flex; gap: 8px; flex: none; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.winkel.nova .ko-acties .ghost.small, .winkel.nova .ko-cp .ghost.small, .winkel.nova .ko-contact .ghost.small { height: 34px; padding: 0 12px; border: 1px solid var(--nova-lijn); border-radius: 8px; display: inline-flex; align-items: center; font-size: 13px; font-weight: 600; color: var(--nova-inkt); text-decoration: none; background: #fff; }
.winkel.nova .ko-acties .pdp-koop.klein { height: 34px; font-size: 13px; padding-inline: 14px; }
.winkel.nova .ko-lijst { display: flex; flex-direction: column; }
.winkel.nova .ko-draad { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--nova-lijn); color: inherit; text-decoration: none; min-width: 0; }
.winkel.nova .ko-draad:first-child { border-top: 0; padding-top: 0; }
.winkel.nova .ko-draad:hover b { text-decoration: underline; text-underline-offset: 3px; }
.winkel.nova .ko-ico { width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; flex: none; background: var(--nova-vlak); color: var(--nova-gedempt); }
.winkel.nova .ko-ico svg { width: 15px; height: 15px; }
.winkel.nova .ko-ico.mail { background: color-mix(in srgb, var(--nova-accent) 10%, #fff); color: var(--nova-accent); }
.winkel.nova .ko-wat { flex: 1; min-width: 0; }
.winkel.nova .ko-wat b { display: block; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.winkel.nova .ko-wat small { display: block; font-size: 12.5px; color: var(--nova-gedempt); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.winkel.nova .ko-rechts { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; flex: none; font-size: 12.5px; }
.winkel.nova .ko-wanneer { color: var(--nova-gedempt); white-space: nowrap; }
.winkel.nova .ko-rechts .klant-stand { font-size: 12px; }
.winkel.nova .ko-contact { display: flex; align-items: center; gap: 12px; }
.winkel.nova .ko-contact > div { flex: 1; min-width: 0; }
.winkel.nova .ko-contact b { display: block; font-size: 13.5px; }
.winkel.nova .ko-contact small { display: block; font-size: 12.5px; color: var(--nova-gedempt); }
.winkel.nova .ko-avatar { width: 36px; height: 36px; border-radius: 999px; background: var(--nova-inkt); color: #fff; display: grid; place-items: center; font-size: 12.5px; font-weight: 700; flex: none; letter-spacing: .02em; }
.winkel.nova .ko-twee { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; align-items: start; }
.winkel.nova .ko-twee .klant-kaart-blok { margin-bottom: 0; }
.winkel.nova .klant-kaart-blok .klant-vorm select { height: var(--nova-h, 44px); border: 1px solid var(--nova-lijn); border-radius: 8px; padding: 0 10px; font: inherit; font-size: 13.5px; background: #fff; color: var(--nova-inkt); width: 100%; }
.winkel.nova .ko-cps { display: flex; flex-direction: column; }
.winkel.nova .ko-cp { display: grid; grid-template-columns: 36px minmax(0, 1.3fr) minmax(0, 1.4fr) auto auto; gap: 14px; align-items: center; padding: 12px 0; border-top: 1px solid var(--nova-lijn); }
.winkel.nova .ko-cp:first-child { border-top: 0; padding-top: 0; }
.winkel.nova .ko-chips { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.winkel.nova .ko-chip { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 999px; font-size: 11.5px; font-weight: 600; background: var(--nova-vlak); color: var(--nova-inkt); white-space: nowrap; }
.winkel.nova .ko-chip.purple { background: #efe7fb; color: #5b2ca3; }
.winkel.nova .ko-chip.blue { background: #e3effc; color: #1c5db3; }
.winkel.nova .ko-chip.green { background: #e2f5e9; color: #1b7a3f; }
.winkel.nova .ko-chip.orange { background: #fdeedc; color: #a35a0c; }
.winkel.nova .ko-voorkeuren { display: flex; flex-direction: column; gap: 0; }
.winkel.nova .ko-schakelrij { display: flex; align-items: center; gap: 18px; padding: 14px 0; border-top: 1px solid var(--nova-lijn); }
.winkel.nova .ko-schakelrij:first-child { border-top: 0; padding-top: 0; }
.winkel.nova .ko-schakelrij .ko-wat b, .winkel.nova .ko-schakelrij .ko-wat small { white-space: normal; }
.winkel.nova .ko-schakel { flex: none; font-weight: 600; }
.winkel.nova .ko-keuze { flex: none; width: 220px; max-width: 45%; height: 40px; border: 1px solid var(--nova-lijn); border-radius: 8px; padding: 0 10px; font: inherit; font-size: 13.5px; background: #fff; color: var(--nova-inkt); }
.winkel.nova .ko-voorkeuren .klant-vormknoppen { padding-top: 14px; border-top: 1px solid var(--nova-lijn); }
@media (max-width: 720px) {
.winkel.nova .ko-kop { flex-direction: column; }
.winkel.nova .ko-acties { justify-content: flex-start; }
.winkel.nova .ko-cp { grid-template-columns: 36px minmax(0, 1fr); }
.winkel.nova .ko-cp .ko-chips { grid-column: 2; justify-content: flex-start; }
.winkel.nova .ko-cp .ghost.small { grid-column: 2; justify-self: start; }
.winkel.nova .ko-draad .ko-rechts { display: none; }
.winkel.nova .ko-keuze { max-width: 100%; }
}
@media (min-width: 900px) {
.winkel.nova .klant-tabs { flex-wrap: wrap; row-gap: 2px; overflow-x: visible; }
}
@media (max-width: 720px) {
.winkel.nova .ko-wat b, .winkel.nova .ko-wat small { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
}
.pdp-voorraadwens { flex: 1 1 100%; width: 100%; box-sizing: border-box; margin: 14px 0 0; padding: 14px 16px; border: 1px solid var(--nova-lijn, #e2e5ea); border-radius: 12px; background: var(--nova-wash, #f6f7f9); }
.pdp-voorraadwens label { display: block; font-weight: 600; font-size: 14px; margin: 0 0 8px; }
.pdp-voorraadwens-rij { display: flex; gap: 8px; flex-wrap: wrap; }
.pdp-voorraadwens-rij input { flex: 1 1 200px; min-width: 0; font: inherit; font-size: 14px; padding: 10px 12px; border: 1px solid var(--nova-lijn, #e2e5ea); border-radius: 10px; background: #fff; }
.pdp-voorraadwens-ok { margin: 0; font-weight: 600; color: var(--nova-goed, #17984b); }
.pdp-voorraadwens-fout { margin: 8px 0 0; color: #b3261e; font-size: 13px; }
.shop-popup { position: fixed; inset: 0; z-index: 900; background: rgba(21, 24, 33, .45); display: flex; align-items: center; justify-content: center; padding: 16px; }
.shop-popup[hidden] { display: none; }
.shop-popup-kaart { position: relative; width: 100%; max-width: 440px; background: #fff; border-radius: 16px; padding: 28px 28px 22px; box-shadow: 0 20px 60px rgba(0,0,0,.25); }
.shop-popup-kaart h3 { margin: 0 0 8px; font-size: 22px; line-height: 1.2; }
.shop-popup-kaart p { margin: 0 0 14px; color: #3a3f4b; line-height: 1.5; }
.shop-popup-kaart small { display: block; margin-top: 12px; color: #6b7280; font-size: 12px; line-height: 1.4; }
.shop-popup-x { position: absolute; top: 10px; right: 12px; border: 0; background: none; font-size: 24px; line-height: 1; color: #6b7280; cursor: pointer; padding: 4px 8px; }
.shop-popup-vorm { display: flex; gap: 8px; flex-wrap: wrap; }
.shop-popup-vorm input[type="email"] { flex: 1 1 200px; min-width: 0; font: inherit; font-size: 15px; padding: 11px 12px; border: 1px solid #d9dde5; border-radius: 10px; }
.shop-popup-klaar { font-weight: 600; }
.shop-inschrijven { max-width: 560px; margin: 40px auto; padding: 0 16px; }
.shop-inschrijven-kaart { background: #fff; border: 1px solid var(--nova-lijn, #e2e5ea); border-radius: 16px; padding: 28px 32px; }
.shop-inschrijven-kaart h1 { margin: 6px 0 8px; font-size: 26px; }
.shop-inschrijven-kaart p { color: #3a3f4b; line-height: 1.5; }
.shop-inschrijven-vorm { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.shop-inschrijven-vorm label { font-size: 13px; font-weight: 600; margin-top: 6px; }
.shop-inschrijven-vorm input { font: inherit; font-size: 15px; padding: 11px 12px; border: 1px solid #d9dde5; border-radius: 10px; }
.shop-inschrijven-vorm button { margin-top: 10px; align-self: flex-start; }
.shop-inschrijven-vorm small { color: #6b7280; font-size: 12px; }
.shop-inschrijven-ok { padding: 14px 16px; border-radius: 12px; background: #e7f6ec; color: #127a3d; }
.shop-inschrijven-ok code { font-size: 18px; font-weight: 700; letter-spacing: .04em; }
.shop-inschrijven-fout { color: #b3261e; font-size: 13px; margin: 0; }
.winkel.nova .site-tekst.met-streep { border-bottom: 1px solid var(--nova-lijn); padding-bottom: 38px; margin-bottom: 34px; }