/* =====================================================================
   Bosstad Tweewielers – varianten (2026-09-22, opmaak v2)
   Productpagina: blok "Kies kleur en framemaat" (framesoort / kleur / framemaat).
   Kaarten: 'vanaf'-prijs en regel "Verkrijgbaar in … kleuren · maat …".
   Alleen styling; de markup en links komen uit bosstad-varianten.php.
   ===================================================================== */

/* ---------------------------------------------------------------- kaart */
.bt-card__note{margin:6px 0 0;font-size:.82rem;font-weight:500;color:var(--bs-teal,#0F8A7C)}
.bt-card__price small{font-size:.72em;font-weight:500;color:var(--bs-muted,#697478);margin-right:4px}

/* ------------------------------------------- productpagina: ritme rond het blok */
.bt-single .bt-summary .bt-stock{margin-top:8px}
.bs-var{margin-top:14px;padding:14px 16px 12px;border:1px solid rgba(28,32,34,.09);border-radius:var(--bs-radius,4px);background:var(--bs-surface,#fff)}
.bt-single .bs-var + .bt-avail{margin-top:12px}

.bs-var__title{margin:0 0 4px;font-family:var(--bs-font-body,Barlow,sans-serif);font-size:11px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;color:var(--bs-muted,#697478)}
.bs-var__row{padding:8px 0 10px}
.bs-var__row + .bs-var__row{border-top:1px solid rgba(28,32,34,.06)}
.bs-var__label{margin:0 0 7px;font-size:13px;line-height:1.3;color:var(--bs-muted,#697478)}
.bs-var__label strong{color:var(--bs-ink,#1C2022);font-weight:600;margin-left:4px}

.bs-var__chips{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0;padding:0}
.bs-var__chips li{list-style:none;margin:0;padding:0;min-width:0}
.bs-var__chips li::marker{content:""}

/* basis-chip (framesoort + framemaat): compact, ruime klikzone */
.bs-vchip{position:relative;display:inline-flex;align-items:center;gap:7px;min-height:36px;padding:5px 11px;border:1px solid var(--bs-border,#E3E4E2);border-radius:var(--bs-radius-sm,2px);background:#fff;font-size:13.5px;font-weight:600;line-height:1.2;color:var(--bs-ink-2,#2C3235);text-decoration:none;transition:border-color .15s,box-shadow .15s,background .15s,color .15s;-webkit-tap-highlight-color:transparent}
.bs-vchip:hover,.bs-vchip:focus-visible{border-color:var(--bs-turquoise,#33C7B7);color:var(--bs-ink,#1C2022);text-decoration:none}
.bs-vchip:focus-visible{outline:3px solid rgba(51,199,183,.35);outline-offset:2px}
.bs-vchip.is-on{border-color:var(--bs-turquoise,#33C7B7);box-shadow:inset 0 0 0 1px var(--bs-turquoise,#33C7B7);background:rgba(51,199,183,.07);color:var(--bs-ink,#1C2022);cursor:default}
.bs-vchip.is-alt{color:var(--bs-muted,#697478);font-weight:500;border-style:dashed}
.bs-vchip.is-alt:hover{color:var(--bs-ink,#1C2022)}
.bs-vchip__t{white-space:nowrap}
.bs-vchip__dot{width:7px;height:7px;border-radius:50%;flex:none;background:#16A34A;box-shadow:0 0 0 2px rgba(22,163,74,.14)}
.bs-vchip.is-out .bs-vchip__dot{background:#D9A21B;box-shadow:0 0 0 2px rgba(217,162,27,.14)}

/* kleur: swatches met foto, allemaal even hoog en netjes uitgelijnd */
.bs-var__chips--colour{display:grid;grid-template-columns:repeat(auto-fill,minmax(156px,1fr));gap:6px}
.bs-var__chips--colour .bs-vchip{display:grid;grid-template-columns:38px minmax(0,1fr) 7px;align-items:center;gap:8px;width:100%;height:50px;min-height:0;padding:5px 10px 5px 5px}
.bs-vchip__img{width:38px;height:38px;object-fit:cover;border-radius:var(--bs-radius-sm,2px);background:var(--bs-surface-soft,#F6F5F2);flex:none}
.bs-var__chips--colour .bs-vchip__t{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere;hyphens:auto;font-size:13px;line-height:1.2}
.bs-var__chips--colour .bs-vchip:not(:has(.bs-vchip__img)){grid-template-columns:minmax(0,1fr) 7px;padding-left:10px}

/* framemaat: compacte knoppen */
.bs-var__chips:not(.bs-var__chips--colour) .bs-vchip{min-height:34px;padding:4px 10px}
.bs-vchip--year{font-weight:500}

.bs-var__legend{margin:6px 0 0;font-size:12px;color:var(--bs-muted,#697478)}
.bs-var__pick{margin:6px 0 0;padding-top:8px;border-top:1px solid rgba(28,32,34,.06);font-size:13px;color:var(--bs-muted,#697478);display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px}
.bs-var__pick strong{color:var(--bs-ink,#1C2022);font-weight:600}
.bs-var__ref{font-size:10.5px;letter-spacing:.2px;color:var(--bs-muted,#697478);opacity:.6;margin-left:auto}
.bs-var__also{margin:6px 0 0;font-size:12.5px;color:var(--bs-ink-2,#2C3235)}
.bs-var__also a{color:var(--bs-teal,#0F8A7C);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.bs-var__also .bs-var__ref{margin-left:0;font-size:11px}

@media (max-width:640px){
	.bs-var{padding:12px 12px 10px}
	.bs-var__chips--colour{grid-template-columns:1fr 1fr}
	.bs-var__chips--colour .bs-vchip{height:52px;grid-template-columns:34px minmax(0,1fr) 7px;gap:7px}
	.bs-var__chips--colour .bs-vchip__img{width:34px;height:34px}
	.bs-var__chips--colour .bs-vchip__t{font-size:12.5px;line-height:1.15;-webkit-line-clamp:3}
	.bs-var__chips:not(.bs-var__chips--colour) .bs-vchip{min-height:40px;padding:5px 12px;font-size:14px}
	.bs-var__ref{margin-left:0;flex-basis:100%}
}