.sbz-cb-pagina .sb-product-trust,
.sbz-cb-pagina .sb-specifications,
.sbz-cb-pagina .sb-product-head__promise,
.sbz-cb-pagina .sb-buy-label,
.sbz-cb-pagina .sbz-garantie-regel--product,
.sbz-cb-pagina form.variations_form table.variations,
.sbz-cb-pagina form.variations_form .reset_variations,
.sbz-cb-pagina form.variations_form .quantity,
.sbz-cb-pagina .woocommerce-variation-availability {
display: none !important;
} body.sbz-cb-pagina.single-product .sb-product-buy form.cart.variations_form .quantity {
display: none !important;
} .sbz-cb-voorbeeld {
position: sticky;
top: 198px;
}
.sbz-cb-kaart {
--u: calc(100cqw / 1800);
--dekking: .92;
container-type: inline-size;
position: relative;
width: 100%;
aspect-ratio: 18 / 10;
overflow: hidden;
border-radius: 18px;
background: #f4f5f6 center / cover no-repeat;
box-shadow: 0 18px 44px rgba(16, 16, 16, .16);
font-family: Outfit, Arial, sans-serif;
transition: background-image .2s;
}
.sbz-cb-paneel {
--tekst: #101010;
--zacht: #5b6168;
--vak: #fff4ee;
position: absolute;
box-sizing: border-box;
display: flex;
flex-direction: column;
border-radius: calc(var(--u) * 38);
background: rgba(255, 255, 255, var(--dekking));
color: var(--tekst);
-webkit-backdrop-filter: blur(calc(var(--u) * 24));
backdrop-filter: blur(calc(var(--u) * 24));
box-shadow: 0 calc(var(--u) * 10) calc(var(--u) * 40) rgba(0, 0, 0, .22);
padding: calc(var(--u) * 54) calc(var(--u) * 56) calc(var(--u) * 52);
line-height: 1.3;
}
.sbz-cb-kaart[data-paneel="donker"] .sbz-cb-paneel {
--tekst: #fff;
--zacht: #e6e8eb;
--vak: rgba(255, 255, 255, .12);
background: rgba(12, 14, 18, var(--dekking));
}
.sbz-cb-kaart[data-lay-out="links"] .sbz-cb-paneel { left: 3.3333%; top: 6%; width: 42.2222%; height: 88%; }
.sbz-cb-kaart[data-lay-out="rechts"] .sbz-cb-paneel { left: 54.4444%; top: 6%; width: 42.2222%; height: 88%; }
.sbz-cb-kaart[data-lay-out="midden"] .sbz-cb-paneel { left: 25%; top: 6%; width: 50%; height: 88%; }
.sbz-cb-kaart[data-lay-out="onder"] .sbz-cb-paneel { left: 3.3333%; top: 60%; width: 93.3333%; height: 34%; }
.sbz-cb-kaart[data-lay-out="boven"] .sbz-cb-paneel { left: 3.3333%; top: 6%; width: 93.3333%; height: 34%; }
.sbz-cb-kol { display: flex; flex-direction: column; min-width: 0; }
.sbz-cb-kol--rechts { flex: 1; min-height: 0; }
.sbz-cb-logo { display: block; width: auto; height: calc(var(--u) * 76); margin: 0 0 calc(var(--u) * 34); }
.sbz-cb-label { color: #f45b16; font-weight: 600; font-size: calc(var(--u) * 30); letter-spacing: calc(var(--u) * 8); line-height: 1; margin: 0 0 calc(var(--u) * 14); }
.sbz-cb-waarde { font-weight: 800; font-size: calc(var(--u) * 176); line-height: .95; margin: 0 0 calc(var(--u) * 26) calc(var(--u) * -4); white-space: nowrap; }
.sbz-cb-voor { font-weight: 600; font-size: calc(var(--u) * 52); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sbz-cb-van { color: var(--zacht); font-size: calc(var(--u) * 36); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sbz-cb-boodschap { flex: 1; min-height: 0; overflow: hidden; margin-top: calc(var(--u) * 22); font-size: calc(var(--u) * 32); overflow-wrap: anywhere; }
.sbz-cb-onder { margin-top: calc(var(--u) * 20); }
.sbz-cb-codevak {
display: flex;
align-items: center;
box-sizing: border-box;
height: calc(var(--u) * 84);
padding: 0 calc(var(--u) * 26);
border: calc(var(--u) * 3) solid #f45b16;
border-radius: calc(var(--u) * 18);
background: var(--vak);
font-weight: 600;
font-size: calc(var(--u) * 38);
letter-spacing: calc(var(--u) * 3);
white-space: nowrap;
}
.sbz-cb-codevak span { margin-right: calc(var(--u) * 20); color: var(--zacht); font-size: calc(var(--u) * 20); letter-spacing: calc(var(--u) * 2); }
.sbz-cb-geldig { margin-top: calc(var(--u) * 16); color: var(--zacht); font-size: calc(var(--u) * 24); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sbz-cb-kaart[data-lay-out="onder"] .sbz-cb-paneel,
.sbz-cb-kaart[data-lay-out="boven"] .sbz-cb-paneel {
flex-direction: row;
padding: calc(var(--u) * 40) calc(var(--u) * 46) calc(var(--u) * 38);
}
.sbz-cb-kaart[data-lay-out="onder"] .sbz-cb-kol--links,
.sbz-cb-kaart[data-lay-out="boven"] .sbz-cb-kol--links {
flex: 0 0 calc(var(--u) * 566);
margin-right: calc(var(--u) * 44);
border-right: calc(var(--u) * 2) solid rgba(91, 97, 104, .35);
}
.sbz-cb-kaart[data-lay-out="onder"] .sbz-cb-logo,
.sbz-cb-kaart[data-lay-out="boven"] .sbz-cb-logo { height: calc(var(--u) * 60); margin-bottom: calc(var(--u) * 24); }
.sbz-cb-kaart[data-lay-out="onder"] .sbz-cb-label,
.sbz-cb-kaart[data-lay-out="boven"] .sbz-cb-label { font-size: calc(var(--u) * 26); letter-spacing: calc(var(--u) * 7); margin-bottom: calc(var(--u) * 12); }
.sbz-cb-kaart[data-lay-out="onder"] .sbz-cb-waarde,
.sbz-cb-kaart[data-lay-out="boven"] .sbz-cb-waarde { font-size: calc(var(--u) * 150); margin-bottom: 0; }
.sbz-cb-kaart[data-lay-out="onder"] .sbz-cb-voor,
.sbz-cb-kaart[data-lay-out="boven"] .sbz-cb-voor { font-size: calc(var(--u) * 46); }
.sbz-cb-kaart[data-lay-out="onder"] .sbz-cb-van,
.sbz-cb-kaart[data-lay-out="boven"] .sbz-cb-van { font-size: calc(var(--u) * 32); }
.sbz-cb-kaart[data-lay-out="onder"] .sbz-cb-boodschap,
.sbz-cb-kaart[data-lay-out="boven"] .sbz-cb-boodschap { margin-top: calc(var(--u) * 10); font-size: calc(var(--u) * 28); }
.sbz-cb-kaart[data-lay-out="onder"] .sbz-cb-onder,
.sbz-cb-kaart[data-lay-out="boven"] .sbz-cb-onder { display: flex; align-items: center; margin-top: calc(var(--u) * 12); }
.sbz-cb-kaart[data-lay-out="onder"] .sbz-cb-codevak,
.sbz-cb-kaart[data-lay-out="boven"] .sbz-cb-codevak { flex: 0 0 calc(var(--u) * 470); height: calc(var(--u) * 70); font-size: calc(var(--u) * 32); }
.sbz-cb-kaart[data-lay-out="onder"] .sbz-cb-geldig,
.sbz-cb-kaart[data-lay-out="boven"] .sbz-cb-geldig { margin: 0 0 0 calc(var(--u) * 26); font-size: calc(var(--u) * 22); white-space: normal; }
.sbz-cb-kaart[data-paneel="donker"] .sbz-cb-kol--links { border-color: rgba(230, 232, 235, .35); }
.sbz-cb-voorbeeld-uitleg { margin: 12px 4px 0; color: #6f7278; font-size: 14px; } .sbz-cb-voordelen { margin: 18px 0 0; padding: 0; list-style: none; font-size: 14px; color: #555b62; }
.sbz-cb-voordelen li { position: relative; margin: 0 0 7px; padding-left: 24px; }
.sbz-cb-voordelen li::before { content: '✓'; position: absolute; left: 0; top: 0; color: #15803d; font-weight: 700; }
.sbz-cb-voordelen strong { color: #101010; } .sbz-cb { margin: 0 0 18px; }
.sbz-cb-stap { margin: 0 0 22px; padding: 0; border: 0; min-width: 0; }
.sbz-cb-kop { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; padding: 0; font-size: 16px; font-weight: 700; color: #101010; }
.sbz-cb-kop span { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #f45b16; color: #fff; font-size: 14px; }
.sbz-cb-bedragen { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.sbz-cb-bedrag {
padding: 12px 4px !important;
border: 2px solid #e2e4e6 !important;
border-radius: 12px !important;
background: #fff !important;
color: #101010 !important;
font: 700 17px/1 Outfit, Arial, sans-serif !important;
cursor: pointer;
box-shadow: none !important;
transition: border-color .15s, background .15s;
}
a.sbz-cb-bedrag,
span.sbz-cb-bedrag { display: flex; align-items: center; justify-content: center; text-decoration: none !important; }
.sbz-cb-bedrag:hover { border-color: #f9a47c !important; }
.sbz-cb-bedrag.is-gekozen { border-color: #f45b16 !important; background: #fff4ee !important; color: #d94c10 !important; }
.sbz-cb-themas { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.sbz-cb-thema {
padding: 7px 13px !important;
border: 1px solid #e2e4e6 !important;
border-radius: 999px !important;
background: #fff !important;
color: #3b3f45 !important;
font: 600 13px/1 Outfit, Arial, sans-serif !important;
cursor: pointer;
box-shadow: none !important;
}
.sbz-cb-thema.is-actief { border-color: #101010 !important; background: #101010 !important; color: #fff !important; }
.sbz-cb-thema[hidden] { display: none !important; }
.sbz-cb-ontwerpen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.sbz-cb-ontwerp { position: relative; margin: 0; cursor: pointer; }
.sbz-cb-ontwerp[hidden] { display: none; }
.sbz-cb-ontwerp input { position: absolute; opacity: 0; pointer-events: none; }
.sbz-cb-ontwerp img { display: block; width: 100%; height: auto; aspect-ratio: 18 / 10; object-fit: cover; border: 2px solid transparent; border-radius: 10px; box-shadow: 0 0 0 1px #e2e4e6; transition: box-shadow .15s; }
.sbz-cb-ontwerp span { display: block; margin-top: 4px; font-size: 12px; color: #6f7278; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sbz-cb-ontwerp:hover img { box-shadow: 0 0 0 2px #f9a47c; }
.sbz-cb-ontwerp input:checked + img { box-shadow: 0 0 0 3px #f45b16; }
.sbz-cb-ontwerp input:checked ~ span { color: #101010; font-weight: 600; }
.sbz-cb-ontwerp input:focus-visible + img { outline: 2px solid #101010; outline-offset: 3px; }
.sbz-cb label { display: block; margin: 0 0 12px; font-size: 14px; font-weight: 600; color: #101010; }
.sbz-cb label em { font-style: normal; font-weight: 400; color: #6f7278; }
.sbz-cb input[type="text"],
.sbz-cb input[type="email"],
.sbz-cb input[type="date"],
.sbz-cb textarea {
display: block;
box-sizing: border-box;
width: 100%;
margin-top: 6px;
padding: 11px 13px;
border: 1px solid #d9dce0;
border-radius: 10px;
background: #fff;
color: #101010;
font: 400 15px/1.4 Outfit, Arial, sans-serif;
}
.sbz-cb input:focus,
.sbz-cb textarea:focus { border-color: #f45b16; outline: 0; box-shadow: 0 0 0 3px rgba(244, 91, 22, .15); }
.sbz-cb textarea { resize: vertical; min-height: 84px; }
.sbz-cb-rij { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sbz-cb-boodschap-veld { position: relative; }
.sbz-cb-teller { position: absolute; right: 10px; bottom: 8px; color: #8e949c; font-size: 12px; font-weight: 400; }
.sbz-cb-keuze { display: flex !important; gap: 12px; align-items: flex-start; margin: 0 0 10px !important; padding: 13px 14px; border: 2px solid #e2e4e6; border-radius: 12px; cursor: pointer; font-weight: 400 !important; }
.sbz-cb-keuze:has(input:checked) { border-color: #f45b16; background: #fff9f6; }
.sbz-cb-keuze input { margin: 3px 0 0; accent-color: #f45b16; }
.sbz-cb-keuze strong { display: block; font-size: 15px; }
.sbz-cb-keuze small { display: block; margin-top: 2px; color: #6f7278; font-size: 13px; }
.sbz-cb-mailvelden { display: grid; grid-template-columns: 1.6fr 1fr; gap: 10px; margin: 2px 0 12px; padding: 0 0 0 4px; }
.sbz-cb-mailvelden[hidden] { display: none; }
@media (max-width: 900px) {
.sbz-cb-voorbeeld { position: static; }
}
@media (max-width: 520px) {
.sbz-cb-bedragen { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sbz-cb-rij,
.sbz-cb-mailvelden { grid-template-columns: 1fr; }
.sbz-cb-ontwerpen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
} .sbz-cb-info { max-width: 1080px; color: #3b3f45; font-size: 16px; line-height: 1.65; }
.sbz-cb-info-blok { margin: 0 0 44px; }
.sbz-cb-info-kicker { margin: 0 0 4px !important; color: #f45b16; font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.sbz-cb-info h2 { margin: 0 0 16px !important; color: #101010; font-size: clamp(22px, 2.4vw, 30px); line-height: 1.2; }
.sbz-cb-info p { margin: 0 0 12px; }
.sbz-cb-info-stappen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 0 !important; padding: 0 !important; list-style: none !important; counter-reset: none; }
.sbz-cb-info-stappen li { margin: 0 !important; padding: 20px 18px; border-radius: 16px; background: #fff4ee; list-style: none !important; }
.sbz-cb-info-stappen li::marker { content: none; }
.sbz-cb-info-stappen strong { display: block; margin: 12px 0 6px; color: #101010; font-size: 17px; }
.sbz-cb-info-stappen span:not(.sbz-cb-info-nr) { display: block; font-size: 15px; }
.sbz-cb-info-nr { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #f45b16; color: #fff; font-weight: 800; }
.sbz-cb-info-raster { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 18px; }
.sbz-cb-info-raster figure { margin: 0; }
.sbz-cb-info-raster img { display: block; width: 100%; height: auto; aspect-ratio: 18 / 10; object-fit: cover; border-radius: 12px; box-shadow: 0 6px 18px rgba(16, 16, 16, .10); }
.sbz-cb-info-raster figcaption { margin-top: 6px; color: #6f7278; font-size: 13px; text-align: center; }
.sbz-cb-info-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.sbz-cb-info-duo > div { padding: 24px; border: 1px solid #e6e8ea; border-radius: 16px; background: #fff; }
.sbz-cb-info-lijst { margin: 0 !important; padding: 0 !important; list-style: none !important; }
.sbz-cb-info-lijst li { position: relative; margin: 0 0 8px !important; padding-left: 26px; list-style: none !important; }
.sbz-cb-info-lijst li::before { content: '✓'; position: absolute; left: 0; top: 0; color: #15803d; font-weight: 800; }
.sbz-cb-info-vragen details { border-bottom: 1px solid #e6e8ea; }
.sbz-cb-info-vragen summary { position: relative; padding: 16px 36px 16px 0; color: #101010; font-weight: 600; cursor: pointer; list-style: none; }
.sbz-cb-info-vragen summary::-webkit-details-marker { display: none; }
.sbz-cb-info-vragen summary::after { content: '+'; position: absolute; right: 6px; top: 12px; color: #f45b16; font-size: 22px; font-weight: 400; }
.sbz-cb-info-vragen details[open] summary::after { content: '–'; }
.sbz-cb-info-vragen details p { margin: 0 0 16px; }
.sbz-cb-info-hulp { padding: 16px 20px; border-radius: 12px; background: #f4f5f6; }
.sbz-cb-info a { color: #d94c10; font-weight: 600; }
@media (max-width: 900px) {
.sbz-cb-info-stappen,
.sbz-cb-info-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sbz-cb-info-duo { grid-template-columns: 1fr; }
}