/* Bosstad Tweewielers – E-bike Keuzehulp (2026-10-04).
 * Hoort bij novamira-sandbox/bosstad-keuzehulp.php en uploads/bosstad/bosstad-keuzehulp.js.
 * Gebruikt de tokens uit bosstad-design-system.css (turquoise, teal, ink, Barlow + Newsreader).
 * Opbouw: donkere kop → witte vraagkaart met voortgangslijn die over de kop valt → top 3 → adviesblok. */

.bs-kh { font-family: var(--bs-font-body, Barlow, sans-serif); color: var(--bs-text, #4A5356); font-size: 16px; line-height: 1.6; background: var(--bs-surface-soft, #F6F5F2); }
.bs-kh *, .bs-kh *::before, .bs-kh *::after { box-sizing: border-box; }
.bs-kh [hidden] { display: none !important; }
.bs-kh__wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 var(--bs-gutter, 24px); }

/* Solace zet eigen stijlen op knoppen, koppen en fieldsets: eerst neutraliseren. */
body .bs-kh button { -webkit-appearance: none; appearance: none; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; color: inherit; font: inherit; line-height: inherit; letter-spacing: normal; text-transform: none; text-align: left; cursor: pointer; min-height: 0; }
body .bs-kh fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
body .bs-kh legend { float: none; width: 100%; padding: 0; border: 0; }
body .bs-kh p { margin: 0; }
body .bs-kh ul { margin: 0; padding: 0; list-style: none; }
body .bs-kh li { margin: 0; list-style: none !important; }
body .bs-kh li::marker { content: none; }
/* De kop van een stap krijgt focus voor schermlezers, maar hoort geen kader te tonen. */
body.solacewp .bs-kh .bs-kh__vraag:focus, body.solacewp .bs-kh .bs-kh__vraag:focus-visible, body.solacewp .bs-kh .bs-kh__h2:focus, body.solacewp .bs-kh .bs-kh__h2:focus-visible, body .bs-kh .bs-kh__vraag:focus-visible, body .bs-kh .bs-kh__h2:focus-visible { outline: none !important; box-shadow: none !important; }
body .bs-kh img { display: block; max-width: 100%; height: auto; }
.bs-kh svg { width: 18px; height: 18px; flex: none; }

/* ---------------------------------------------------------------- Kop */
.bs-kh__kop { padding: 64px 0 132px; color: var(--bs-on-dark, #D2D9DA); background: radial-gradient(90% 70% at 100% 0%, rgba(51, 199, 183, .16) 0%, rgba(51, 199, 183, 0) 60%), linear-gradient(170deg, #142725 0%, #0E1214 70%); }
.bs-kh .bs-kh__eyebrow { margin: 0 0 14px; font: 700 12.5px/1 var(--bs-font-body, Barlow, sans-serif); letter-spacing: .16em; text-transform: uppercase; color: var(--bs-turquoise-light, #4FD8C8); }
.bs-kh .bs-kh__eyebrow--teal, .bs-kh__advies .bs-kh__eyebrow { color: var(--bs-teal, #0F8A7C); }
body .bs-kh .bs-kh__h1 { margin: 0 !important; max-width: 16ch; font-family: var(--bs-font-display, Newsreader, Georgia, serif) !important; font-weight: 400 !important; font-size: clamp(38px, 4.6vw, 62px) !important; line-height: 1.03 !important; letter-spacing: -.015em; color: #fff !important; text-wrap: balance; }
.bs-kh .bs-kh__intro { margin: 18px 0 0; max-width: 58ch; font-size: 17.5px; line-height: 1.6; color: var(--bs-on-dark, #D2D9DA); }
.bs-kh .bs-kh__zeker { display: flex; flex-wrap: wrap; gap: 10px 26px; margin: 26px 0 0; }
.bs-kh .bs-kh__zeker li { display: flex; align-items: center; gap: 9px; font-size: 15.5px; color: #fff; }
.bs-kh__zeker svg { color: var(--bs-turquoise, #33C7B7); }

/* ---------------------------------------------------------------- Vraagkaart */
.bs-kh__sec { padding: 0 0 var(--bs-section, 88px); }
.bs-kh__kaart { position: relative; margin-top: -84px; padding: 28px clamp(20px, 3.4vw, 44px) clamp(28px, 3.4vw, 44px); background: var(--bs-surface, #fff); border: 1px solid var(--bs-border, #E3E4E2); border-radius: var(--bs-radius, 4px); box-shadow: 0 1px 2px rgba(28, 32, 34, .04), 0 18px 48px rgba(28, 32, 34, .10); scroll-margin-top: 138px; }

.bs-kh__balk { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; min-height: 28px; }
.bs-kh .bs-kh__stapnr { grid-column: 2; font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--bs-muted, #697478); }
body .bs-kh .bs-kh__terug, body .bs-kh .bs-kh__opnieuw { display: inline-flex; align-items: center; gap: 8px; padding: 4px 0; font-size: 15px; font-weight: 600; color: var(--bs-ink, #1C2022); }
body .bs-kh .bs-kh__terug { grid-column: 1; justify-self: start; }
body .bs-kh .bs-kh__opnieuw { grid-column: 3; justify-self: end; color: var(--bs-muted, #697478); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
body .bs-kh .bs-kh__terug:hover, body .bs-kh .bs-kh__opnieuw:hover, body .bs-kh .bs-kh__terug:focus, body .bs-kh .bs-kh__opnieuw:focus { background: none; color: var(--bs-teal, #0F8A7C); }

/* Voortgangslijn met punt */
.bs-kh__lijn { position: relative; height: 4px; margin: 16px 0 34px; border-radius: 4px; background: var(--bs-border, #E3E4E2); }
.bs-kh__lijn-vul { position: absolute; left: 0; top: 0; bottom: 0; width: 0; min-width: 14px; border-radius: 4px; background: var(--bs-teal, #0F8A7C); transition: width .45s var(--bs-ease, cubic-bezier(.2, .7, .2, 1)); }
.bs-kh__lijn-vul::after { content: ""; position: absolute; right: -1px; top: 50%; width: 16px; height: 16px; border-radius: 50%; background: var(--bs-turquoise, #33C7B7); border: 3px solid #fff; box-shadow: 0 0 0 1px var(--bs-teal, #0F8A7C); transform: translate(50%, -50%); }

body .bs-kh .bs-kh__vraag { margin: 0 0 8px !important; font-family: var(--bs-font-display, Newsreader, Georgia, serif) !important; font-weight: 400 !important; font-size: clamp(27px, 2.8vw, 38px) !important; line-height: 1.12 !important; letter-spacing: -.01em; color: var(--bs-ink, #1C2022) !important; text-wrap: balance; outline: none; }
.bs-kh .bs-kh__uitleg { margin: 0 0 26px; max-width: 62ch; font-size: 16.5px; color: var(--bs-text, #4A5356); }
.bs-kh .bs-kh__groeplabel { margin: 26px 0 12px; font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--bs-ink, #1C2022); }
.bs-kh .bs-kh__uitleg + .bs-kh__groeplabel { margin-top: 0; }

/* Antwoorden */
.bs-kh__opties { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.bs-kh__opties--foto { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.bs-kh__opties--foto > .bs-kh__optie { grid-column: span 2; }
.bs-kh__opties--foto > .bs-kh__optie:nth-child(4) { grid-column: 2 / span 2; }
.bs-kh__opties--compact { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }

body .bs-kh .bs-kh__optie { position: relative; display: flex; flex-direction: column; min-width: 0; overflow: hidden; background: var(--bs-surface, #fff); border: 1px solid var(--bs-border, #E3E4E2); border-radius: var(--bs-radius, 4px); color: var(--bs-text, #4A5356); transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
body .bs-kh .bs-kh__optie:hover, body .bs-kh .bs-kh__optie:focus { background: var(--bs-surface, #fff); color: var(--bs-text, #4A5356); border-color: var(--bs-ink, #1C2022); box-shadow: var(--bs-shadow-soft, 0 8px 24px rgba(28, 32, 34, .06)); transform: translateY(-2px); }
body .bs-kh .bs-kh__optie:focus-visible { outline: 2px solid var(--bs-teal, #0F8A7C); outline-offset: 2px; }
body .bs-kh .bs-kh__optie[aria-pressed="true"] { border-color: var(--bs-teal, #0F8A7C); box-shadow: 0 0 0 1px var(--bs-teal, #0F8A7C), var(--bs-shadow-soft, 0 8px 24px rgba(28, 32, 34, .06)); }
.bs-kh__optie-foto { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--bs-surface-soft, #F6F5F2); }
.bs-kh .bs-kh__optie-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--bs-ease, cubic-bezier(.2, .7, .2, 1)); }
.bs-kh__optie--product .bs-kh__optie-foto img { object-fit: contain; padding: 14px 18px; mix-blend-mode: multiply; }
.bs-kh__optie:hover .bs-kh__optie-foto img { transform: scale(1.04); }
.bs-kh__optie-tekst { display: flex; flex-direction: column; gap: 4px; padding: 18px 48px 20px 20px; }
.bs-kh__optie-titel { font-size: 18px; font-weight: 600; line-height: 1.25; color: var(--bs-ink, #1C2022); }
.bs-kh__optie-sub { font-size: 15px; line-height: 1.45; color: var(--bs-muted, #697478); }
.bs-kh__optie-vink { position: absolute; right: 16px; bottom: 18px; display: grid; place-items: center; width: 24px; height: 24px; border: 1.5px solid var(--bs-border, #E3E4E2); border-radius: 50%; color: transparent; transition: background-color .18s ease, border-color .18s ease, color .18s ease; }
.bs-kh__optie-vink svg { width: 14px; height: 14px; }
.bs-kh__optie[aria-pressed="true"] .bs-kh__optie-vink { background: var(--bs-teal, #0F8A7C); border-color: var(--bs-teal, #0F8A7C); color: #fff; }
.bs-kh__opties:not(.bs-kh__opties--foto):not(.bs-kh__opties--compact) .bs-kh__optie-tekst { padding: 24px 54px 26px 22px; }
.bs-kh__opties:not(.bs-kh__opties--foto):not(.bs-kh__opties--compact) .bs-kh__optie-titel { font-size: 19.5px; }
.bs-kh__opties--compact .bs-kh__optie-tekst { padding: 15px 46px 15px 16px; }
.bs-kh__opties--compact .bs-kh__optie-titel { font-size: 16.5px; }
.bs-kh__opties--compact .bs-kh__optie-vink { top: 50%; bottom: auto; right: 14px; transform: translateY(-50%); }

.bs-kh__stapvoet { display: flex; justify-content: flex-end; margin-top: 30px; }

/* Knoppen */
body .bs-kh .bs-kh__knop { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 16px 24px; border: 1px solid transparent; border-radius: var(--bs-radius-sm, 2px); background: var(--bs-turquoise, #33C7B7); color: var(--bs-btn-ink, #06110F) !important; font-size: 15px; font-weight: 700; line-height: 1.2; letter-spacing: .06em; text-transform: uppercase; text-align: center; text-decoration: none !important; transition: background-color .18s ease, color .18s ease, border-color .18s ease; }
body .bs-kh .bs-kh__knop:hover, body .bs-kh .bs-kh__knop:focus { background: var(--bs-turquoise-light, #4FD8C8); color: var(--bs-btn-ink, #06110F) !important; }
body .bs-kh .bs-kh__knop--lijn { background: transparent; border-color: var(--bs-ink, #1C2022); color: var(--bs-ink, #1C2022) !important; }
body .bs-kh .bs-kh__knop--lijn:hover, body .bs-kh .bs-kh__knop--lijn:focus { background: var(--bs-ink, #1C2022); color: #fff !important; }
body .bs-kh .bs-kh__knop[disabled] { background: var(--bs-border, #E3E4E2); color: var(--bs-muted, #697478) !important; cursor: not-allowed; }
body .bs-kh .bs-kh__tekstknop { font-size: 15.5px; font-weight: 500; color: var(--bs-muted, #697478); text-decoration: underline; text-underline-offset: 3px; }
body .bs-kh .bs-kh__tekstknop:hover, body .bs-kh .bs-kh__tekstknop:focus { background: none; color: var(--bs-teal, #0F8A7C); }

/* Laden en fout */
.bs-kh__laden { display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 56px 0 40px; text-align: center; font-size: 17px; color: var(--bs-ink, #1C2022); }
.bs-kh__spinner { width: 34px; height: 34px; border: 3px solid var(--bs-border, #E3E4E2); border-top-color: var(--bs-teal, #0F8A7C); border-radius: 50%; animation: bs-kh-draai .8s linear infinite; }
@keyframes bs-kh-draai { to { transform: rotate(360deg); } }
.bs-kh__fout { display: grid; gap: 18px; justify-items: start; padding: 28px 0 8px; }
.bs-kh .bs-kh__noscript { padding: 20px 0 0; }

/* ---------------------------------------------------------------- Resultaat */
.bs-kh__resultaat { padding-top: 56px; scroll-margin-top: 138px; }
.bs-kh__reskop { max-width: 780px; margin: 0 auto 36px; text-align: center; }
body .bs-kh .bs-kh__h2 { margin: 0 !important; font-family: var(--bs-font-display, Newsreader, Georgia, serif) !important; font-weight: 400 !important; font-size: clamp(32px, 3.4vw, 46px) !important; line-height: 1.08 !important; letter-spacing: -.01em; color: var(--bs-ink, #1C2022) !important; outline: none; text-wrap: balance; }
.bs-kh .bs-kh__resintro { margin: 14px 0 0; font-size: 17px; }
.bs-kh .bs-kh__keuzes { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 18px 0 0; }
.bs-kh__keuze { padding: 6px 12px; border: 1px solid var(--bs-border, #E3E4E2); border-radius: 100px; background: var(--bs-surface, #fff); font-size: 14px; line-height: 1.3; color: var(--bs-ink-2, #2C3235); }

.bs-kh__top3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; align-items: stretch; }
.bs-kh__top3[data-n="2"] { grid-template-columns: repeat(2, minmax(0, 420px)); justify-content: center; }
.bs-kh__top3[data-n="1"] { grid-template-columns: minmax(0, 460px); justify-content: center; }
.bs-kh__fiets { position: relative; display: flex; flex-direction: column; min-width: 0; background: var(--bs-surface, #fff); border: 1px solid var(--bs-border, #E3E4E2); border-radius: var(--bs-radius, 4px); overflow: hidden; box-shadow: var(--bs-shadow-soft, 0 8px 24px rgba(28, 32, 34, .06)); }
.bs-kh__fiets--1 { border-color: var(--bs-teal, #0F8A7C); box-shadow: 0 0 0 1px var(--bs-teal, #0F8A7C), 0 18px 48px rgba(15, 138, 124, .14); }
.bs-kh .bs-kh__badge { position: absolute; z-index: 1; left: 14px; top: 14px; padding: 7px 12px; border-radius: var(--bs-radius-sm, 2px); background: var(--bs-ink, #1C2022); color: #fff; font-size: 12px; font-weight: 700; line-height: 1; letter-spacing: .12em; text-transform: uppercase; }
.bs-kh__fiets--1 .bs-kh__badge { background: var(--bs-turquoise, #33C7B7); color: var(--bs-btn-ink, #06110F); }
.bs-kh__fiets--alt { border-color: var(--bs-border, #E3E4E2); box-shadow: var(--bs-shadow-soft, 0 8px 24px rgba(28, 32, 34, .06)); }
.bs-kh__fiets--alt .bs-kh__badge { background: #fff; color: var(--bs-gold, #8A6A1F); box-shadow: inset 0 0 0 1px var(--bs-gold, #8A6A1F); }
.bs-kh__fiets-foto { display: block; aspect-ratio: 4 / 3; background: var(--bs-surface-soft, #F6F5F2); overflow: hidden; }
.bs-kh .bs-kh__fiets-foto img { width: 100%; height: 100%; object-fit: contain; padding: 30px 18px 14px; mix-blend-mode: multiply; transition: transform .5s var(--bs-ease, cubic-bezier(.2, .7, .2, 1)); }
.bs-kh__fiets-foto:hover img { transform: scale(1.03); }
.bs-kh__fiets-body { display: flex; flex-direction: column; flex: 1; gap: 12px; padding: 22px 22px 24px; }
.bs-kh .bs-kh__merk { font-size: 12.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--bs-teal, #0F8A7C); }
body .bs-kh .bs-kh__naam { margin: -6px 0 0 !important; font-family: var(--bs-font-display, Newsreader, Georgia, serif) !important; font-weight: 400 !important; font-size: 26px !important; line-height: 1.15 !important; color: var(--bs-ink, #1C2022) !important; }
.bs-kh .bs-kh__naam a { color: inherit; text-decoration: none; }
.bs-kh .bs-kh__naam a:hover { color: var(--bs-teal, #0F8A7C); }
.bs-kh .bs-kh__prijs { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-variant-numeric: tabular-nums; }
.bs-kh__prijs-nu { font-size: 22px; font-weight: 700; color: var(--bs-ink, #1C2022); }
.bs-kh__prijs s { font-size: 15.5px; color: var(--bs-muted, #697478); }
.bs-kh__prijs-noot { font-size: 13.5px; font-weight: 600; color: var(--bs-gold, #8A6A1F); }
.bs-kh .bs-kh__waarom { font-size: 16px; line-height: 1.5; color: var(--bs-ink-2, #2C3235); }
.bs-kh .bs-kh__feiten { display: flex; flex-wrap: wrap; gap: 6px; }
.bs-kh .bs-kh__feiten li { padding: 5px 10px; border-radius: var(--bs-radius-sm, 2px); background: var(--bs-surface-soft, #F6F5F2); font-size: 13.5px; line-height: 1.3; color: var(--bs-ink-2, #2C3235); }
.bs-kh .bs-kh__voorraad { display: flex; align-items: flex-start; gap: 9px; font-size: 15px; line-height: 1.4; color: var(--bs-ink-2, #2C3235); }
.bs-kh__voorraad::before { content: ""; flex: none; width: 9px; height: 9px; margin-top: 6px; border-radius: 50%; background: var(--bs-teal, #0F8A7C); }
.bs-kh__voorraad--elders::before { background: var(--bs-gold, #8A6A1F); }
.bs-kh .bs-kh__maat { margin-top: -6px; padding-left: 18px; font-size: 14.5px; color: var(--bs-muted, #697478); }
.bs-kh__acties { display: grid; gap: 12px; margin-top: auto; padding-top: 8px; }
.bs-kh .bs-kh__link { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-size: 15.5px; font-weight: 600; color: var(--bs-ink, #1C2022); text-decoration: none; }
.bs-kh .bs-kh__link:hover { color: var(--bs-teal, #0F8A7C); }
.bs-kh__leeg { max-width: 640px; margin: 0 auto; padding: 32px; border: 1px solid var(--bs-border, #E3E4E2); border-radius: var(--bs-radius, 4px); background: var(--bs-surface, #fff); text-align: center; font-size: 17px; }

/* Adviesblok */
.bs-kh__advies { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); margin-top: 44px; background: var(--bs-surface, #fff); border: 1px solid var(--bs-border, #E3E4E2); border-radius: var(--bs-radius, 4px); overflow: hidden; }
.bs-kh__advies-foto { min-height: 260px; background: var(--bs-surface-soft, #F6F5F2); }
.bs-kh .bs-kh__advies-foto img { width: 100%; height: 100%; object-fit: cover; }
.bs-kh__advies-tekst { display: flex; flex-direction: column; gap: 14px; padding: clamp(26px, 3.4vw, 46px); }
.bs-kh__advies .bs-kh__eyebrow { margin: 0; }
body .bs-kh .bs-kh__h3 { margin: 0 !important; font-family: var(--bs-font-display, Newsreader, Georgia, serif) !important; font-weight: 400 !important; font-size: clamp(26px, 2.6vw, 34px) !important; line-height: 1.12 !important; color: var(--bs-ink, #1C2022) !important; text-wrap: balance; }
.bs-kh .bs-kh__bel { font-size: 16px; color: var(--bs-ink, #1C2022); }
.bs-kh__bel strong { font-weight: 700; white-space: nowrap; }
.bs-kh__knoppen { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.bs-kh .bs-kh__herstart { margin: 28px 0 0; text-align: center; }

/* ---------------------------------------------------------------- Kleinere schermen */
@media (max-width: 1024px) {
	.bs-kh__top3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.bs-kh__top3 > .bs-kh__fiets--1 { grid-column: 1 / -1; }
	.bs-kh__fiets--1 .bs-kh__fiets-foto { aspect-ratio: 16 / 9; }
}
@media (max-width: 767px) {
	.bs-kh__kop { padding: 44px 0 112px; }
	.bs-kh__sec { padding-bottom: var(--bs-section-mobile, 48px); }
	.bs-kh__kaart { margin-top: -76px; padding: 20px 18px 24px; scroll-margin-top: 86px; }
	.bs-kh__resultaat { scroll-margin-top: 86px; }
	.bs-kh__lijn { margin-bottom: 26px; }
	.bs-kh__opties, .bs-kh__opties--foto { grid-template-columns: 1fr; gap: 10px; }
	.bs-kh__opties--foto > .bs-kh__optie, .bs-kh__opties--foto > .bs-kh__optie:nth-child(4) { grid-column: auto; }
	.bs-kh__opties--compact { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
	body .bs-kh .bs-kh__opties--foto .bs-kh__optie { flex-direction: row; align-items: stretch; }
	.bs-kh__opties--foto .bs-kh__optie-foto { flex: 0 0 34%; aspect-ratio: auto; min-height: 92px; }
	.bs-kh__optie--product .bs-kh__optie-foto img { padding: 8px; }
	.bs-kh__opties--foto .bs-kh__optie-tekst { flex: 1; justify-content: center; padding: 14px 44px 14px 14px; }
	.bs-kh__optie-titel { font-size: 17px; }
	.bs-kh__optie-sub { font-size: 14.5px; }
	.bs-kh__opties--foto .bs-kh__optie-vink { top: 50%; bottom: auto; right: 12px; transform: translateY(-50%); }
	.bs-kh__stapvoet { margin-top: 24px; }
	.bs-kh__stapvoet .bs-kh__knop { width: 100%; }
	.bs-kh__resultaat { padding-top: 40px; }
	.bs-kh__top3, .bs-kh__top3[data-n="2"], .bs-kh__top3[data-n="1"] { grid-template-columns: 1fr; }
	.bs-kh__fiets--1 .bs-kh__fiets-foto { aspect-ratio: 4 / 3; }
	.bs-kh__advies { grid-template-columns: 1fr; }
	.bs-kh__advies-foto { min-height: 0; aspect-ratio: 16 / 9; }
	.bs-kh__knoppen .bs-kh__knop { width: 100%; }
}
@media (max-width: 420px) {
	.bs-kh__opties--compact { grid-template-columns: 1fr; }
	body .bs-kh .bs-kh__opnieuw { font-size: 14px; }
	.bs-kh .bs-kh__stapnr { font-size: 12px; letter-spacing: .08em; }
}
@media (prefers-reduced-motion: reduce) {
	.bs-kh *, .bs-kh *::before, .bs-kh *::after { transition: none !important; animation-duration: .01s !important; }
}

/* ---------------------------------------------------------------- Formulieren in het adviesblok (versie 2) */
.bs-kh__form { display: grid; gap: 14px; margin-top: 6px; padding: 20px; border: 1px solid var(--bs-border, #E3E4E2); border-radius: var(--bs-radius, 4px); background: var(--bs-surface-soft, #F6F5F2); }
.bs-kh .bs-kh__formkop { font-size: 18px; font-weight: 600; line-height: 1.3; color: var(--bs-ink, #1C2022); }
.bs-kh .bs-kh__formtekst { margin-top: -8px; font-size: 15px; line-height: 1.5; }
.bs-kh__velden { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.bs-kh .bs-kh__veld { display: grid; gap: 6px; align-content: start; }
.bs-kh__veld label { font-size: 14px; font-weight: 600; color: var(--bs-ink, #1C2022); }
.bs-kh__veld label span { font-weight: 400; color: var(--bs-muted, #697478); }
body .bs-kh .bs-kh__veld input, body .bs-kh .bs-kh__veld select { width: 100%; min-height: 48px; margin: 0; padding: 10px 12px; border: 1px solid var(--bs-border, #E3E4E2); border-radius: var(--bs-radius-sm, 2px); background: #fff; box-shadow: none; font: inherit; font-size: 16px; color: var(--bs-ink, #1C2022); }
body .bs-kh .bs-kh__veld input:focus, body .bs-kh .bs-kh__veld select:focus { border-color: var(--bs-teal, #0F8A7C); }
body .bs-kh .bs-kh__veld [aria-invalid="true"], body.solacewp .bs-kh .bs-kh__veld input[aria-invalid="true"] { border-color: #B3261E !important; }
.bs-kh__veldfout { font-size: 13.5px; line-height: 1.35; color: #B3261E; }
.bs-kh__veldfout:empty { display: none; }
.bs-kh .bs-kh__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.bs-kh .bs-kh__formfout { padding: 10px 12px; border-left: 3px solid #B3261E; background: #FCEEEE; font-size: 15px; color: #7A1C16; }
.bs-kh .bs-kh__klaar { margin-top: 6px; padding: 14px 16px; border-left: 3px solid var(--bs-teal, #0F8A7C); background: rgba(51, 199, 183, .12); font-size: 16px; line-height: 1.5; color: var(--bs-ink, #1C2022); outline: none; }
.bs-kh__form.is-bezig { opacity: .65; pointer-events: none; }
.bs-kh__form .bs-kh__knop { justify-self: start; }
body .bs-kh button.bs-kh__knop { cursor: pointer; }
body .bs-kh button.bs-kh__knop--lijn[aria-expanded="true"] { background: var(--bs-ink, #1C2022); color: #fff !important; }
body .bs-kh button.bs-kh__knop--lijn[disabled] { background: transparent; border-color: var(--bs-border, #E3E4E2); color: var(--bs-muted, #697478) !important; }
@media (max-width: 767px) {
	.bs-kh__form { padding: 16px; }
	.bs-kh__form .bs-kh__knop { justify-self: stretch; }
}

/* ---------------------------------------------------------------- Uitlegblok op de homepage: [bosstad_keuzehulp_blok] */
.bs-khp { padding: var(--bs-section, 88px) 0; font-family: var(--bs-font-body, Barlow, sans-serif); font-size: 16px; line-height: 1.6; color: var(--bs-text, #4A5356); background: var(--bs-surface-soft, #F6F5F2); border-top: 1px solid var(--bs-border, #E3E4E2); border-bottom: 1px solid var(--bs-border, #E3E4E2); }
.bs-khp *, .bs-khp *::before, .bs-khp *::after { box-sizing: border-box; }
.bs-khp svg { width: 18px; height: 18px; flex: none; }
.bs-khp__wrap { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 84px); align-items: center; width: 100%; max-width: var(--bs-wrap, 1440px); margin: 0 auto; padding: 0 var(--bs-gutter, 24px); }
body .bs-khp p { margin: 0; }
.bs-khp .bs-khp__eyebrow { margin: 0 0 14px; font: 700 12.5px/1 var(--bs-font-body, Barlow, sans-serif); letter-spacing: .16em; text-transform: uppercase; color: var(--bs-teal, #0F8A7C); }
body .bs-khp .bs-khp__h2 { margin: 0 !important; font-family: var(--bs-font-display, Newsreader, Georgia, serif) !important; font-weight: 400 !important; font-size: clamp(32px, 3.4vw, 48px) !important; line-height: 1.06 !important; letter-spacing: -.01em; color: var(--bs-ink, #1C2022) !important; text-wrap: balance; }
.bs-khp .bs-khp__intro { margin: 18px 0 0; max-width: 58ch; font-size: 17.5px; line-height: 1.6; }
body .bs-khp .bs-khp__stappen { display: grid; gap: 16px; margin: 30px 0 0; padding: 0; list-style: none; counter-reset: none; }
body .bs-khp .bs-khp__stappen li { display: flex; align-items: flex-start; gap: 16px; margin: 0; list-style: none; }
.bs-khp__nr { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border: 1.5px solid var(--bs-teal, #0F8A7C); border-radius: 50%; font-size: 15px; font-weight: 700; line-height: 1; color: var(--bs-teal, #0F8A7C); font-variant-numeric: tabular-nums; }
.bs-khp__stappen strong { display: block; font-size: 17.5px; font-weight: 600; line-height: 1.3; color: var(--bs-ink, #1C2022); }
.bs-khp .bs-khp__stappen p { margin-top: 2px; font-size: 15.5px; line-height: 1.5; color: var(--bs-text, #4A5356); }
.bs-khp__voet { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 34px; }
body .bs-khp .bs-khp__knop, body .bs-khb .bs-khb__knop { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 17px 26px; border-radius: var(--bs-radius-sm, 2px); background: var(--bs-turquoise, #33C7B7); color: var(--bs-btn-ink, #06110F) !important; font-size: 15px; font-weight: 700; line-height: 1.2; letter-spacing: .06em; text-transform: uppercase; text-decoration: none !important; transition: background-color .18s ease; }
body .bs-khp .bs-khp__knop:hover, body .bs-khb .bs-khb__knop:hover { background: var(--bs-turquoise-light, #4FD8C8); }
.bs-khp__noot { font-size: 14.5px; color: var(--bs-muted, #697478); }
.bs-khp__start { padding: clamp(20px, 2.4vw, 30px); background: var(--bs-surface, #fff); border: 1px solid var(--bs-border, #E3E4E2); border-radius: var(--bs-radius, 4px); box-shadow: 0 1px 2px rgba(28, 32, 34, .04), 0 18px 48px rgba(28, 32, 34, .08); }
.bs-khp .bs-khp__startkop { margin: 0 0 14px; font-size: 18px; font-weight: 600; line-height: 1.35; color: var(--bs-ink, #1C2022); }
body .bs-khp .bs-khp__tegels { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
body .bs-khp .bs-khp__tegels li { margin: 0; list-style: none; border-top: 1px solid var(--bs-border-soft, #EEF0EF); }
body .bs-khp .bs-khp__tegel { display: flex; align-items: center; gap: 16px; padding: 12px 6px; color: var(--bs-text, #4A5356); text-decoration: none; transition: background-color .18s ease; }
body .bs-khp .bs-khp__tegel:hover { background: var(--bs-surface-soft, #F6F5F2); color: var(--bs-text, #4A5356); }
.bs-khp__tegel > svg { margin-left: auto; color: var(--bs-muted, #697478); transition: transform .18s ease, color .18s ease; }
.bs-khp__tegel:hover > svg { color: var(--bs-teal, #0F8A7C); transform: translateX(3px); }
.bs-khp__tegelfoto { flex: none; width: 92px; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--bs-radius-sm, 2px); background: var(--bs-surface-soft, #F6F5F2); }
.bs-khp .bs-khp__tegelfoto img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.bs-khp__tegel--product .bs-khp__tegelfoto img { object-fit: contain; padding: 6px; mix-blend-mode: multiply; }
.bs-khp__tegeltekst { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bs-khp__tegeltekst strong { font-size: 17px; font-weight: 600; line-height: 1.25; color: var(--bs-ink, #1C2022); }
.bs-khp__tegeltekst span { font-size: 14.5px; line-height: 1.4; color: var(--bs-muted, #697478); }
@media (max-width: 1024px) {
	.bs-khp { padding: var(--bs-section-tablet, 64px) 0; }
	.bs-khp__wrap { grid-template-columns: 1fr; gap: 36px; }
}
@media (max-width: 767px) {
	.bs-khp { padding: var(--bs-section-mobile, 48px) 0; }
	.bs-khp__voet .bs-khp__knop { width: 100%; }
	.bs-khp__tegelfoto { width: 76px; }
	.bs-khp__tegeltekst span { display: none; }
}

/* ---------------------------------------------------------------- Band op collectiepagina's: [bosstad_keuzehulp_banner] */
.bs-khb { width: 100%; max-width: var(--bs-wrap, 1440px); margin: 0 auto clamp(32px, 4vw, 56px); padding: 0 var(--bs-gutter, 24px); font-family: var(--bs-font-body, Barlow, sans-serif); }
.bs-khb *, .bs-khb *::before, .bs-khb *::after { box-sizing: border-box; }
.bs-khb svg { width: 18px; height: 18px; flex: none; }
.bs-khb__in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 36px; padding: clamp(22px, 2.6vw, 32px) clamp(20px, 3vw, 40px); border-radius: var(--bs-radius, 4px); color: var(--bs-on-dark, #D2D9DA); background: radial-gradient(90% 120% at 100% 0%, rgba(51, 199, 183, .2) 0%, rgba(51, 199, 183, 0) 60%), linear-gradient(170deg, #142725 0%, #0E1214 70%); }
.bs-khb__tekst { flex: 1 1 420px; min-width: 0; }
body .bs-khb p { margin: 0; }
body .bs-khb .bs-khb__kop { font-family: var(--bs-font-display, Newsreader, Georgia, serif); font-weight: 400; font-size: clamp(23px, 2.2vw, 30px); line-height: 1.15; color: #fff; text-wrap: balance; }
body .bs-khb .bs-khb__sub { margin-top: 8px; max-width: 64ch; font-size: 16px; line-height: 1.55; color: var(--bs-on-dark, #D2D9DA); }
@media (max-width: 767px) {
	.bs-khb__in { padding: 22px 18px; }
	.bs-khb .bs-khb__knop { width: 100%; }
}