:is(.sm-pdp, .sm-conf, .sm-uitnodiging):is(.sm-pdp, .sm-conf, .sm-uitnodiging, #sm) {
--sm-bos: var(--duin-bos, var(--winkel-accent-ink, #0f3d24));
--sm-groen: var(--winkel-accent, #0e7a3a);
--sm-op-groen: var(--winkel-accent-op, #fff);
--sm-inkt: var(--nova-inkt, #1a231d);
--sm-inkt2: var(--duin-inkt2, var(--nova-gedempt, #4e5852));
--sm-inkt3: var(--duin-inkt3, #6b746e);
--sm-lijn: var(--duin-lijn, var(--nova-lijn, #e1e6e0));
--sm-lijn2: var(--duin-lijn2, #cdd5cc);
--sm-zand: var(--duin-zand, #f5efe6);
--sm-zand2: var(--duin-zand2, #ebe1d3);
--sm-vlak: var(--duin-vlak, var(--nova-vlak, #f3f6f2));
--sm-kop-tekst: var(--duin-bos-tekst, #bfd5c5);
--sm-hout: var(--duin-hout, #8c5220);
--sm-kaart: var(--card, #fff);
--sm-r: var(--duin-r, 8px);
--sm-rk: var(--duin-rk, 12px);
color: var(--sm-inkt);
}
:is(.sm-pdp, .sm-conf, #sm) .sm-ico { flex: none; display: block; }
:is(.sm-pdp, .sm-conf, #sm) [hidden] { display: none !important; }
:is(.sm-pdp, .sm-conf, #sm) .sm-opties { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
:is(.sm-pdp, .sm-conf, #sm) .sm-opties-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
:is(.sm-pdp, .sm-conf, #sm) .sm-optie {
position: relative; display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--sm-lijn); border-radius: var(--sm-r);
overflow: hidden; background: var(--sm-kaart); cursor: pointer; text-align: left; transition: border-color .12s, box-shadow .12s;
}
:is(.sm-pdp, .sm-conf, #sm) .sm-optie:hover { border-color: var(--sm-lijn2); }
:is(.sm-pdp, .sm-conf, #sm) .sm-optie:focus-visible { outline: 2px solid var(--sm-groen); outline-offset: 2px; }
:is(.sm-pdp, .sm-conf, #sm) .sm-optie.sm-aan { border-color: var(--sm-bos); box-shadow: inset 0 0 0 1px var(--sm-bos); }
:is(.sm-pdp, .sm-conf, #sm) .sm-optie-foto { width: 100%; height: 112px; object-fit: cover; display: block; background: var(--sm-zand); margin: 0; }
:is(.sm-pdp, .sm-conf, #sm) .sm-optie-leeg { height: 112px; background: var(--sm-vlak); display: flex; align-items: center; justify-content: center; color: var(--sm-inkt3); }
:is(.sm-pdp, .sm-conf, #sm) .sm-optie-naam { display: block; padding: 10px 12px 0; font-weight: 700; font-size: 14px; line-height: 19px; color: var(--sm-inkt); }
:is(.sm-pdp, .sm-conf, #sm) .sm-optie-zin { display: block; padding: 2px 12px 0; font-size: 13px; line-height: 18px; color: var(--sm-inkt2); }
:is(.sm-pdp, .sm-conf, #sm) .sm-optie-prijs { display: block; margin-top: auto; padding: 10px 12px 12px; font-style: normal; font-weight: 700; font-size: 14px; line-height: 19px; color: var(--sm-inkt); }
:is(.sm-pdp, .sm-conf, #sm) .sm-vink {
position: absolute; right: 8px; top: 8px; z-index: 1; width: 24px; height: 24px; border-radius: 999px; background: var(--sm-bos); color: #fff;
display: none; align-items: center; justify-content: center; box-shadow: 0 0 0 2px #fff;
}
:is(.sm-pdp, .sm-conf, #sm) .sm-vink .sm-ico { width: 14px; height: 14px; }
:is(.sm-pdp, .sm-conf, #sm) .sm-optie.sm-aan .sm-vink { display: flex; }
:is(.sm-pdp, .sm-conf, #sm) .sm-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 12px 0; }
:is(.sm-pdp, .sm-conf, #sm) .sm-chip {
height: 28px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--sm-lijn2); background: var(--sm-kaart); color: var(--sm-inkt);
font: inherit; font-size: 13px; line-height: 26px; font-weight: 500; cursor: pointer; white-space: nowrap; min-width: 0;
}
:is(.sm-pdp, .sm-conf, #sm) .sm-chip:hover { border-color: var(--sm-inkt3); }
:is(.sm-pdp, .sm-conf, #sm) .sm-chip.sm-aan { border-color: var(--sm-bos); background: var(--sm-bos); color: #fff; }
:is(.sm-pdp, .sm-conf, #sm) .sm-tip {
display: flex; gap: 10px; align-items: flex-start; margin-top: 14px; padding: 12px 14px; border-radius: var(--sm-r); background: var(--sm-zand);
font-size: 14px; line-height: 21px; color: var(--sm-inkt);
}
:is(.sm-pdp, .sm-conf, #sm) .sm-tip .sm-ico { color: var(--sm-hout); margin-top: 1px; }
:is(.sm-pdp, .sm-conf, #sm) .sm-knoppen { display: flex; flex-direction: column; gap: 10px; margin: 18px 0 0; }
:is(.sm-pdp, .sm-conf, #sm) .sm-knop {
display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 48px; padding: 0 18px; border-radius: var(--sm-r);
font: inherit; font-weight: 700; font-size: 16px; line-height: 20px; text-decoration: none; cursor: pointer; box-sizing: border-box;
}
:is(.sm-pdp, .sm-conf, #sm) .sm-knop-hoofd { height: 52px; border: 0; background: var(--sm-groen); color: var(--sm-op-groen); }
:is(.sm-pdp, .sm-conf, #sm) .sm-knop-hoofd:hover { filter: brightness(.94); }
:is(.sm-pdp, .sm-conf, #sm) .sm-knop-hoofd:disabled { opacity: .5; cursor: not-allowed; }
:is(.sm-pdp, .sm-conf, #sm) .sm-knop-rand { border: 1.5px solid var(--sm-inkt); background: var(--sm-kaart); color: var(--sm-inkt); }
:is(.sm-pdp, .sm-conf, #sm) .sm-knop-rand:hover { background: var(--sm-vlak); }
:is(.sm-pdp, .sm-conf, #sm) .sm-rij {
display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 14px; line-height: 20px; color: var(--sm-inkt2);
}
:is(.sm-pdp, .sm-conf, #sm) button.sm-rij { border: 0; background: none; padding: 0; font: inherit; font-size: 14px; cursor: pointer; text-align: left; }
:is(.sm-pdp, .sm-conf, #sm) button.sm-rij:hover span { color: var(--sm-inkt); text-decoration: underline; text-underline-offset: 3px; }
:is(.sm-pdp, .sm-conf, #sm) .sm-deelveld { width: 100%; margin-top: 8px; height: 40px; padding: 0 10px; border: 1px solid var(--sm-lijn2); border-radius: var(--sm-r); font: inherit; font-size: 13px; }
:is(.sm-pdp, .sm-conf, #sm) .sm-tot { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-top: 18px; }
:is(.sm-pdp, .sm-conf, #sm) .sm-tot-l { display: flex; flex-direction: column; }
:is(.sm-pdp, .sm-conf, #sm) .sm-tot-l small { font-size: 13px; line-height: 18px; color: var(--sm-inkt2); }
:is(.sm-pdp, .sm-conf, #sm) .sm-tot-l b { font-weight: 800; font-size: 28px; line-height: 34px; letter-spacing: -.3px; color: var(--sm-inkt); }
:is(.sm-pdp, .sm-conf, #sm) .sm-mini { font-size: 13px; line-height: 18px; color: var(--sm-inkt2); text-align: right; padding-bottom: 4px; }
:is(.sm-pdp, .sm-conf, #sm) .sm-balk { display: none; }
.sm-uitnodiging:is(.sm-uitnodiging, #sm) {
display: grid; grid-template-columns: 44px minmax(0, 1fr) 18px; column-gap: 14px; align-items: center; margin: 16px 0 0; padding: 14px 16px;
border: 1px solid var(--sm-lijn); border-radius: var(--sm-rk); background: var(--sm-zand); color: var(--sm-inkt); text-decoration: none;
}
.sm-uitnodiging:is(.sm-uitnodiging, #sm):hover { border-color: var(--sm-lijn2); }
.sm-uitnodiging:is(.sm-uitnodiging, #sm) .sm-uitnodiging-ico { width: 44px; height: 44px; border-radius: 999px; background: var(--sm-bos); color: #fff; display: flex; align-items: center; justify-content: center; }
.sm-uitnodiging:is(.sm-uitnodiging, #sm) .sm-uitnodiging-tekst { display: flex; flex-direction: column; min-width: 0; }
.sm-uitnodiging:is(.sm-uitnodiging, #sm) b { font-weight: 700; font-size: 16px; line-height: 22px; }
.sm-uitnodiging:is(.sm-uitnodiging, #sm) small { font-size: 14px; line-height: 20px; color: var(--sm-inkt2); }
.sm-pdp:is(.sm-pdp, #sm) { max-width: var(--site-breedte, 1320px); margin: 64px auto 0; scroll-margin-top: calc(var(--sm-kop, 0px) + 24px); }
.sm-pdp:is(.sm-pdp, #sm) .sm-pdp-kop h2 { margin: 0; font-weight: 800; font-size: 28px; line-height: 34px; letter-spacing: -.3px; color: var(--sm-inkt); }
.sm-pdp:is(.sm-pdp, #sm) .sm-pdp-kop p { margin: 8px 0 0; max-width: 760px; font-size: 16px; line-height: 24px; color: var(--sm-inkt2); }
.sm-pdp:is(.sm-pdp, #sm) .sm-raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 536px); column-gap: 24px; align-items: start; margin-top: 24px; }
.sm-pdp:is(.sm-pdp, #sm) .sm-stappen { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.sm-pdp:is(.sm-pdp, #sm) .sm-stap { border: 1px solid var(--sm-lijn); border-radius: var(--sm-rk); background: var(--sm-kaart); margin: 0; padding: 0; }
.sm-pdp:is(.sm-pdp, #sm) .sm-stap[open] { border-color: var(--sm-inkt); }
.sm-pdp:is(.sm-pdp, #sm) .sm-stap-kop {
display: grid; grid-template-columns: 32px minmax(0, 1fr) auto 20px; column-gap: 14px; align-items: center; min-height: 68px; padding: 8px 20px;
box-sizing: border-box; list-style: none; cursor: pointer; margin: 0; background: none; border: 0; font-size: inherit;
}
.sm-pdp:is(.sm-pdp, #sm) .sm-stap-kop::-webkit-details-marker { display: none; }
.sm-pdp:is(.sm-pdp, #sm) .sm-stap-kop::marker { content: ""; }
.sm-pdp:is(.sm-pdp, #sm) .sm-stap-kop::after { content: none; }
.sm-pdp:is(.sm-pdp, #sm) .sm-stap-kop:focus-visible { outline: 2px solid var(--sm-groen); outline-offset: -2px; border-radius: var(--sm-rk); }
.sm-pdp:is(.sm-pdp, #sm) .sm-bol {
width: 32px; height: 32px; box-sizing: border-box; border-radius: 999px; border: 1.5px solid var(--sm-lijn2); display: flex; align-items: center; justify-content: center;
font-weight: 700; font-size: 14px; color: var(--sm-inkt2);
}
.sm-pdp:is(.sm-pdp, #sm) .sm-bol .sm-ico { display: none; color: #fff; }
.sm-pdp:is(.sm-pdp, #sm) .sm-klaar .sm-bol { background: var(--sm-bos); border-color: var(--sm-bos); }
.sm-pdp:is(.sm-pdp, #sm) .sm-klaar .sm-bol .sm-ico { display: block; }
.sm-pdp:is(.sm-pdp, #sm) .sm-klaar .sm-bol-nr { display: none; }
.sm-pdp:is(.sm-pdp, #sm) .sm-stap-naam { display: flex; flex-direction: column; min-width: 0; }
.sm-pdp:is(.sm-pdp, #sm) .sm-stap-naam b { font-weight: 700; font-size: 16px; line-height: 22px; color: var(--sm-inkt); }
.sm-pdp:is(.sm-pdp, #sm) .sm-stap-naam span { font-size: 14px; line-height: 20px; color: var(--sm-inkt2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sm-pdp:is(.sm-pdp, #sm) .sm-stapprijs { font-weight: 700; font-size: 15px; line-height: 20px; color: var(--sm-inkt); white-space: nowrap; }
.sm-pdp:is(.sm-pdp, #sm) .sm-pijl { color: var(--sm-inkt2); transition: transform .15s; }
.sm-pdp:is(.sm-pdp, #sm) .sm-stap[open] .sm-pijl { transform: rotate(180deg); }
.sm-pdp:is(.sm-pdp, #sm) .sm-stap-lijf { padding: 4px 20px 22px 66px; }
.sm-pdp:is(.sm-pdp, #sm) .sm-samvat { position: sticky; top: calc(var(--sm-kop, 0px) + 24px); border: 1px solid var(--sm-lijn); border-radius: var(--sm-rk); overflow: hidden; background: var(--sm-kaart); }
.sm-pdp:is(.sm-pdp, #sm) .sm-samvat-kop { background: var(--sm-bos); color: #fff; padding: 20px 24px; }
.sm-pdp:is(.sm-pdp, #sm) .sm-samvat-kop b { display: block; font-weight: 800; font-size: 19px; line-height: 25px; color: #fff; }
.sm-pdp:is(.sm-pdp, #sm) .sm-samvat-kop span { display: block; margin-top: 2px; font-size: 14px; line-height: 20px; color: var(--sm-kop-tekst); }
.sm-pdp:is(.sm-pdp, #sm) .sm-samvat-lijf { padding: 8px 24px 24px; }
.sm-pdp:is(.sm-pdp, #sm) .sm-regel {
display: flex; justify-content: space-between; gap: 12px; align-items: baseline; padding: 11px 0; border-bottom: 1px solid var(--sm-lijn); font-size: 15px; line-height: 21px;
}
.sm-pdp:is(.sm-pdp, #sm) .sm-regel > span { color: var(--sm-inkt2); min-width: 0; }
.sm-pdp:is(.sm-pdp, #sm) .sm-regel small { display: block; font-size: 13px; line-height: 18px; color: var(--sm-inkt3); }
.sm-pdp:is(.sm-pdp, #sm) .sm-regel b { font-weight: 700; white-space: nowrap; color: var(--sm-inkt); }
.sm-conf:is(.sm-conf, #sm) { max-width: var(--site-breedte, 1320px); margin: 0 auto; }
.sm-conf:is(.sm-conf, #sm) .sm-conf-kop { padding: 8px 0 32px; }
.sm-conf:is(.sm-conf, #sm) .sm-conf-kop :is(h1, h2) { margin: 0; font-weight: 800; font-size: 40px; line-height: 46px; letter-spacing: -.6px; color: var(--sm-inkt); }
.sm-conf:is(.sm-conf, #sm) .sm-conf-kop p { margin: 10px 0 0; max-width: 760px; font-size: 18px; line-height: 28px; color: var(--sm-inkt2); }
.sm-conf:is(.sm-conf, #sm) .sm-conf-raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 424px); column-gap: 24px; align-items: start; }
.sm-conf:is(.sm-conf, #sm) .sm-conf-links { min-width: 0; }
.sm-conf:is(.sm-conf, #sm) .sm-beeld { position: relative; margin: 0; border-radius: var(--sm-rk); overflow: hidden; background: var(--sm-zand); aspect-ratio: 872 / 500; }
.sm-conf:is(.sm-conf, #sm) .sm-beeld img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sm-conf:is(.sm-conf, #sm) .sm-beeld-label { position: absolute; left: 16px; bottom: 16px; right: 16px; display: flex; flex-wrap: wrap; gap: 8px; }
.sm-conf:is(.sm-conf, #sm) .sm-beeld-label span {
height: 34px; padding: 0 14px; border-radius: 999px; background: #fff; display: inline-flex; align-items: center; font-weight: 700; font-size: 14px; color: var(--sm-inkt);
box-shadow: 0 2px 8px rgba(26, 35, 29, .14);
}
.sm-conf:is(.sm-conf, #sm) .sm-punten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 24px; margin-top: 28px; }
.sm-conf:is(.sm-conf, #sm) .sm-punt { border-top: 2px solid var(--sm-inkt); padding-top: 14px; }
.sm-conf:is(.sm-conf, #sm) .sm-punt b { display: block; font-weight: 700; font-size: 16px; line-height: 22px; }
.sm-conf:is(.sm-conf, #sm) .sm-punt p { margin: 6px 0 0; font-size: 15px; line-height: 23px; color: var(--sm-inkt2); }
.sm-conf:is(.sm-conf, #sm) .sm-paneel { scroll-margin-top: calc(var(--sm-kop, 0px) + 16px); position: sticky; top: calc(var(--sm-kop, 0px) + 24px); border: 1px solid var(--sm-lijn); border-radius: var(--sm-rk); padding: 24px; background: var(--sm-kaart); }
.sm-conf:is(.sm-conf, #sm) .sm-voortgang { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); column-gap: 6px; margin-bottom: 18px; }
.sm-conf:is(.sm-conf, #sm) .sm-voortgang button {
display: flex; flex-direction: column; gap: 8px; padding: 0; border: 0; background: none; font: inherit; font-size: 13px; line-height: 17px; color: var(--sm-inkt3);
text-align: left; cursor: pointer; white-space: nowrap;
}
.sm-conf:is(.sm-conf, #sm) .sm-vg-w { margin-left: .3em; }
.sm-conf:is(.sm-conf, #sm) .sm-voortgang button::before { content: ""; height: 4px; border-radius: 999px; background: var(--sm-lijn2); }
.sm-conf:is(.sm-conf, #sm) .sm-voortgang button.sm-klaar { color: var(--sm-inkt); }
.sm-conf:is(.sm-conf, #sm) .sm-voortgang button.sm-klaar::before { background: var(--sm-groen); }
.sm-conf:is(.sm-conf, #sm) .sm-voortgang button.sm-nu { color: var(--sm-inkt); font-weight: 700; }
.sm-conf:is(.sm-conf, #sm) .sm-voortgang button.sm-nu::before { background: var(--sm-bos); }
.sm-conf:is(.sm-conf, #sm) .sm-paneel-kop { margin: 0; font-weight: 800; font-size: 22px; line-height: 28px; color: var(--sm-inkt); }
.sm-conf:is(.sm-conf, #sm) .sm-paneel-zin { margin: 4px 0 16px; font-size: 14px; line-height: 21px; color: var(--sm-inkt2); }
.sm-conf:is(.sm-conf, #sm) .sm-noscript, .sm-conf:is(.sm-conf, #sm) .sm-leeg { display: flex; gap: 10px; align-items: flex-start; margin: 0; font-size: 15px; line-height: 22px; color: var(--sm-inkt2); }
.sm-conf:is(.sm-conf, #sm) .sm-schuif { margin-top: 22px; }
.sm-conf:is(.sm-conf, #sm) .sm-schuif-kop { display: flex; justify-content: space-between; align-items: center; }
.sm-conf:is(.sm-conf, #sm) .sm-schuif-kop label { font-weight: 700; font-size: 17px; line-height: 22px; }
.sm-conf:is(.sm-conf, #sm) .sm-maatveld { display: inline-flex; align-items: center; width: 120px; height: 44px; box-sizing: border-box; border: 1px solid var(--sm-lijn2); border-radius: var(--sm-r); padding: 0 14px; background: var(--sm-kaart); }
.sm-conf:is(.sm-conf, #sm) .sm-maatveld:focus-within { border-color: var(--sm-inkt); }
.sm-conf:is(.sm-conf, #sm) .sm-maatveld input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; padding: 0; height: 40px; font: inherit; font-weight: 700; font-size: 17px; color: var(--sm-inkt); }
.sm-conf:is(.sm-conf, #sm) .sm-maatveld em { font-style: normal; font-size: 14px; color: var(--sm-inkt2); }
.sm-conf:is(.sm-conf, #sm) .sm-baan {
-webkit-appearance: none; appearance: none; display: block; width: 100%; height: 22px; margin: 12px 0 4px; background: none; cursor: pointer; padding: 0; border: 0;
}
.sm-conf:is(.sm-conf, #sm) .sm-baan::-webkit-slider-runnable-track { height: 6px; border-radius: 999px; background: linear-gradient(to right, var(--sm-groen) var(--sm-pct, 0%), var(--sm-zand2) var(--sm-pct, 0%)); }
.sm-conf:is(.sm-conf, #sm) .sm-baan::-moz-range-track { height: 6px; border-radius: 999px; background: linear-gradient(to right, var(--sm-groen) var(--sm-pct, 0%), var(--sm-zand2) var(--sm-pct, 0%)); }
.sm-conf:is(.sm-conf, #sm) .sm-baan::-webkit-slider-thumb {
-webkit-appearance: none; width: 22px; height: 22px; margin-top: -8px; border-radius: 999px; background: #fff; border: 2px solid var(--sm-groen); box-shadow: 0 1px 4px rgba(26, 35, 29, .2);
}
.sm-conf:is(.sm-conf, #sm) .sm-baan::-moz-range-thumb { width: 18px; height: 18px; border-radius: 999px; background: #fff; border: 2px solid var(--sm-groen); box-shadow: 0 1px 4px rgba(26, 35, 29, .2); }
.sm-conf:is(.sm-conf, #sm) .sm-baan:focus-visible { outline: 2px solid var(--sm-groen); outline-offset: 4px; border-radius: 4px; }
.sm-conf:is(.sm-conf, #sm) .sm-schuif-grens { display: flex; justify-content: space-between; font-size: 13px; line-height: 18px; color: var(--sm-inkt3); }
.sm-conf:is(.sm-conf, #sm) .sm-tuin { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--sm-lijn); }
.sm-conf:is(.sm-conf, #sm) .sm-tuin-kop { font-weight: 600; font-size: 15px; line-height: 20px; }
.sm-conf:is(.sm-conf, #sm) .sm-tuin-kop small { display: block; font-weight: 400; font-size: 13px; color: var(--sm-inkt3); }
.sm-conf:is(.sm-conf, #sm) .sm-tuin-velden { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--sm-inkt2); }
.sm-conf:is(.sm-conf, #sm) .sm-tuin-velden i, .sm-conf:is(.sm-conf, #sm) .sm-tuin-velden em { font-style: normal; }
.sm-conf:is(.sm-conf, #sm) .sm-tuin-velden input { width: 64px; height: 40px; box-sizing: border-box; border: 1px solid var(--sm-lijn2); border-radius: var(--sm-r); padding: 0 8px; font: inherit; font-size: 15px; text-align: center; background: var(--sm-kaart); color: var(--sm-inkt); }
.sm-conf:is(.sm-conf, #sm) .sm-past { display: flex; align-items: flex-start; gap: 10px; margin-top: 14px; font-size: 15px; line-height: 22px; color: var(--sm-inkt); }
.sm-conf:is(.sm-conf, #sm) .sm-past .sm-ico { color: var(--sm-groen); margin-top: 2px; width: 18px; height: 18px; }
.sm-conf:is(.sm-conf, #sm) .sm-past.sm-niet .sm-ico { color: #b42318; }
.sm-conf:is(.sm-conf, #sm) .sm-pakketregel { color: var(--sm-inkt2); }
.sm-conf:is(.sm-conf, #sm) .sm-past.sm-niet.sm-pakketregel { color: var(--sm-inkt); }
.sm-conf:is(.sm-conf, #sm) .sm-maatknop, .sm-conf:is(.sm-conf, #sm) .sm-maatlink { display: inline-block; margin: 6px 16px 0 0; padding: 0; border: 0; background: none; font: inherit; font-weight: 600; color: var(--sm-groen); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; cursor: pointer; }
.sm-conf:is(.sm-conf, #sm) .sm-wandsoorten { display: flex; flex-direction: column; gap: 8px; }
.sm-conf:is(.sm-conf, #sm) .sm-wandsoort { display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 12px; align-items: center; }
.sm-conf:is(.sm-conf, #sm) .sm-wandsoort img, .sm-conf:is(.sm-conf, #sm) .sm-wandsoort .sm-optie-leeg { width: 56px; height: 42px; object-fit: cover; border-radius: 6px; display: flex; }
.sm-conf:is(.sm-conf, #sm) .sm-wandsoort .sm-optie-leeg .sm-ico { width: 20px; height: 20px; }
.sm-conf:is(.sm-conf, #sm) .sm-wandsoort b { display: block; font-weight: 700; font-size: 14px; line-height: 19px; }
.sm-conf:is(.sm-conf, #sm) .sm-wandsoort small { display: block; font-size: 13px; line-height: 18px; color: var(--sm-inkt2); }
.sm-conf:is(.sm-conf, #sm) .sm-zijden { display: flex; flex-direction: column; margin-top: 14px; border-top: 1px solid var(--sm-lijn); }
.sm-conf:is(.sm-conf, #sm) .sm-zijde { padding: 12px 0; border-bottom: 1px solid var(--sm-lijn); }
.sm-conf:is(.sm-conf, #sm) .sm-zijde-kop { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; font-size: 15px; line-height: 20px; }
.sm-conf:is(.sm-conf, #sm) .sm-zijde-kop span { color: var(--sm-inkt2); font-size: 14px; }
.sm-conf:is(.sm-conf, #sm) .sm-zijde-kop em { margin-left: auto; font-style: normal; font-weight: 700; font-size: 14px; }
.sm-conf:is(.sm-conf, #sm) .sm-zijde-zin { display: block; margin-top: 6px; font-size: 13px; line-height: 18px; color: var(--sm-inkt2); }
.sm-conf:is(.sm-conf, #sm) .sm-keuzes { display: flex; flex-wrap: wrap; gap: 8px; }
.sm-conf:is(.sm-conf, #sm) .sm-keuze {
height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--sm-lijn2); background: var(--sm-kaart); color: var(--sm-inkt);
font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
}
.sm-conf:is(.sm-conf, #sm) .sm-keuze.sm-aan { border-color: var(--sm-bos); background: var(--sm-bos); color: #fff; }
.sm-conf:is(.sm-conf, #sm) .sm-keuze:disabled { opacity: .45; cursor: not-allowed; }
.sm-conf:is(.sm-conf, #sm) .sm-pakket {
display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; column-gap: 12px; align-items: center; padding: 10px; border: 1px solid var(--sm-lijn);
border-radius: var(--sm-r); color: var(--sm-inkt); text-decoration: none;
}
.sm-conf:is(.sm-conf, #sm) .sm-pakket img { width: 96px; height: 72px; object-fit: cover; border-radius: 6px; display: block; }
.sm-conf:is(.sm-conf, #sm) .sm-pakket b { display: block; font-weight: 700; font-size: 15px; line-height: 20px; }
.sm-conf:is(.sm-conf, #sm) .sm-pakket small { display: block; font-size: 13px; line-height: 18px; color: var(--sm-inkt2); }
.sm-conf:is(.sm-conf, #sm) .sm-pakket small.sm-link { color: var(--sm-groen); font-weight: 600; margin-top: 2px; }
.sm-conf:is(.sm-conf, #sm) .sm-pakket em { font-style: normal; font-weight: 800; font-size: 15px; white-space: nowrap; }
.sm-conf:is(.sm-conf, #sm) .sm-alt-kop { margin: 18px 0 8px; font-weight: 700; font-size: 15px; line-height: 20px; }
.sm-conf:is(.sm-conf, #sm) .sm-alts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.sm-conf:is(.sm-conf, #sm) .sm-alt {
display: flex; flex-direction: column; min-width: 0; padding: 0 0 10px; border: 1px solid var(--sm-lijn); border-radius: var(--sm-r); overflow: hidden;
background: var(--sm-kaart); font: inherit; text-align: left; cursor: pointer; color: var(--sm-inkt);
}
.sm-conf:is(.sm-conf, #sm) .sm-alt:hover { border-color: var(--sm-inkt3); }
.sm-conf:is(.sm-conf, #sm) .sm-alt img, .sm-conf:is(.sm-conf, #sm) .sm-alt .sm-optie-leeg { width: 100%; height: 64px; object-fit: cover; display: flex; }
.sm-conf:is(.sm-conf, #sm) .sm-alt b { display: block; padding: 8px 8px 0; font-weight: 700; font-size: 13px; line-height: 17px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.sm-conf:is(.sm-conf, #sm) .sm-alt small { display: block; padding: 2px 8px 0; font-size: 13px; line-height: 17px; color: var(--sm-inkt2); }
.sm-conf:is(.sm-conf, #sm) .sm-alt em { display: block; padding: 4px 8px 0; font-style: normal; font-weight: 700; font-size: 13px; }
.sm-conf:is(.sm-conf, #sm) .sm-extras { display: flex; flex-direction: column; gap: 8px; }
.sm-conf:is(.sm-conf, #sm) .sm-extra {
display: grid; grid-template-columns: 22px 48px minmax(0, 1fr) auto; column-gap: 10px; align-items: center; padding: 8px 10px; border: 1px solid var(--sm-lijn);
border-radius: var(--sm-r); cursor: pointer;
}
.sm-conf:is(.sm-conf, #sm) .sm-extra.sm-aan { border-color: var(--sm-bos); }
.sm-conf:is(.sm-conf, #sm) .sm-extra img { width: 48px; height: 36px; object-fit: cover; border-radius: 4px; }
.sm-conf:is(.sm-conf, #sm) .sm-extra b { display: block; font-weight: 700; font-size: 14px; line-height: 19px; }
.sm-conf:is(.sm-conf, #sm) .sm-extra small { display: block; font-size: 13px; line-height: 18px; color: var(--sm-inkt2); }
.sm-conf:is(.sm-conf, #sm) .sm-extra em { font-style: normal; font-weight: 700; font-size: 14px; white-space: nowrap; }
.sm-conf:is(.sm-conf, #sm) .sm-vakje { width: 22px; height: 22px; box-sizing: border-box; border-radius: 5px; border: 1.5px solid var(--sm-lijn2); display: flex; align-items: center; justify-content: center; color: transparent; }
.sm-conf:is(.sm-conf, #sm) .sm-extra.sm-aan .sm-vakje { background: var(--sm-bos); border-color: var(--sm-bos); color: #fff; }
.sm-conf:is(.sm-conf, #sm) .sm-vakje .sm-ico { width: 14px; height: 14px; }
.sm-conf:is(.sm-conf, #sm) .sm-gekozen { display: flex; flex-direction: column; margin-top: 22px; border-top: 1px solid var(--sm-lijn); }
.sm-conf:is(.sm-conf, #sm) .sm-gekozen:empty { display: none; }
.sm-conf:is(.sm-conf, #sm) .sm-gekozenrij {
display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; column-gap: 10px; align-items: center; min-height: 48px; border-bottom: 1px solid var(--sm-lijn); font-size: 15px; line-height: 20px;
}
.sm-conf:is(.sm-conf, #sm) .sm-gekozenrij span { color: var(--sm-inkt2); }
.sm-conf:is(.sm-conf, #sm) .sm-gekozenrij b { font-weight: 600; min-width: 0; }
.sm-conf:is(.sm-conf, #sm) .sm-gekozenrij button { border: 0; background: none; padding: 0; font: inherit; font-weight: 600; font-size: 14px; color: var(--sm-groen); cursor: pointer; }
.sm-conf:is(.sm-conf, #sm) .sm-lijnregel { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; padding: 11px 0; border-bottom: 1px solid var(--sm-lijn); font-size: 15px; line-height: 21px; }
.sm-conf:is(.sm-conf, #sm) .sm-lijnregel span { min-width: 0; }
.sm-conf:is(.sm-conf, #sm) .sm-lijnregel small { display: block; font-size: 13px; line-height: 18px; color: var(--sm-inkt2); }
.sm-conf:is(.sm-conf, #sm) .sm-lijnregel b { font-weight: 700; white-space: nowrap; }
@media (max-width: 1100px) {
.sm-conf:is(.sm-conf, #sm) .sm-conf-raster { grid-template-columns: minmax(0, 1fr) 380px; }
.sm-pdp:is(.sm-pdp, #sm) .sm-raster { grid-template-columns: minmax(0, 1fr) 360px; }
:is(.sm-pdp, .sm-conf, #sm) .sm-opties { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
.sm-pdp:is(.sm-pdp, #sm) { margin-top: 40px; }
.sm-pdp:is(.sm-pdp, #sm) .sm-pdp-kop h2 { font-size: 24px; line-height: 30px; }
.sm-pdp:is(.sm-pdp, #sm) .sm-pdp-kop p { font-size: 15px; line-height: 23px; }
.sm-pdp:is(.sm-pdp, #sm) .sm-raster, .sm-conf:is(.sm-conf, #sm) .sm-conf-raster { grid-template-columns: minmax(0, 1fr); row-gap: 16px; }
.sm-pdp:is(.sm-pdp, #sm) .sm-stappen { gap: 10px; }
.sm-pdp:is(.sm-pdp, #sm) .sm-stap-kop { column-gap: 12px; padding: 8px 14px; min-height: 64px; }
.sm-pdp:is(.sm-pdp, #sm) .sm-stap-lijf { padding: 2px 14px 16px; }
:is(.sm-pdp, .sm-conf, #sm) .sm-opties, :is(.sm-pdp, .sm-conf, #sm) .sm-opties-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.sm-pdp:is(.sm-pdp, #sm) .sm-samvat { position: static; }
.sm-conf:is(.sm-conf, #sm) .sm-conf-kop { padding: 4px 0 20px; }
.sm-conf:is(.sm-conf, #sm) .sm-conf-kop :is(h1, h2) { font-size: 28px; line-height: 34px; letter-spacing: -.3px; }
.sm-conf:is(.sm-conf, #sm) .sm-conf-kop p { font-size: 15px; line-height: 23px; }
.sm-conf:is(.sm-conf, #sm) .sm-beeld { aspect-ratio: 368 / 230; }
.sm-conf:is(.sm-conf, #sm) .sm-beeld-label { left: 10px; bottom: 10px; gap: 6px; }
.sm-conf:is(.sm-conf, #sm) .sm-beeld-label span { height: 30px; padding: 0 10px; font-size: 13px; }
.sm-conf:is(.sm-conf, #sm) .sm-punten { display: none; }
.sm-conf:is(.sm-conf, #sm) .sm-paneel { position: static; padding: 18px 16px; }
.sm-conf:is(.sm-conf, #sm) .sm-voortgang { grid-auto-columns: auto; }
.sm-conf:is(.sm-conf, #sm) .sm-voortgang button:not(.sm-nu) .sm-vg-w { display: none; }
.sm-conf:is(.sm-conf, #sm) .sm-alts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
:is(.sm-pdp, .sm-conf, #sm) .sm-balk {
position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: flex; align-items: center; gap: 12px; height: 84px; padding: 0 16px;
padding-bottom: env(safe-area-inset-bottom, 0); box-sizing: border-box; background: #fff; border-top: 1px solid var(--sm-lijn);
box-shadow: 0 -6px 20px rgba(26, 35, 29, .08); transform: translateY(110%); transition: transform .2s; visibility: hidden;
}
:is(.sm-pdp, .sm-conf, #sm) .sm-balk.sm-zicht { transform: none; visibility: visible; }
:is(.sm-pdp, .sm-conf, #sm) .sm-balk-l { flex: 1; display: flex; flex-direction: column; min-width: 0; }
:is(.sm-pdp, .sm-conf, #sm) .sm-balk-l small { font-size: 13px; line-height: 18px; color: var(--sm-inkt2); }
:is(.sm-pdp, .sm-conf, #sm) .sm-balk-l b { font-weight: 800; font-size: 20px; line-height: 26px; }
:is(.sm-pdp, .sm-conf, #sm) .sm-balk .sm-knop { width: auto; height: 48px; padding: 0 20px; }
body.sm-balk-open .shop-koopbalk { visibility: hidden; }
body.sm-balk-open { padding-bottom: 84px; }
}
@media (prefers-reduced-motion: reduce) {
:is(.sm-pdp, .sm-conf, #sm) * { transition: none !important; }
}