/* Buiten.studio Opties — productpagina (design_handoff_productopties) */
.bo-opties{ --bo-card:#fff; --bo-line:#e3ded3; --bo-border:#d9d3c6; --bo-ink:#1f2a24; --bo-muted:#5c645e; --bo-faint:#7a817b; --bo-groen:#5f8a63; --bo-rood:#b3261e; --bo-goud:#8a6d2a; display:flex; flex-direction:column; gap:20px; margin:0 0 18px; font-size:14px; line-height:1.5; color:var(--bo-ink); }
.bo-opties [hidden]{ display:none !important; }
.bo-opties *, .bo-opties *::before, .bo-opties *::after{ box-sizing:border-box; }
.bo-groep{ display:flex; flex-direction:column; gap:10px; min-width:0; }
.bo-kop{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; }
.bo-kop-naam{ font-size:13px; font-weight:600; }
.bo-kop-rechts{ font-size:12px; color:var(--bo-faint); }
.bo-gratis{ color:var(--bo-groen) !important; font-weight:600; }
.bo-fout{ font-size:12px; color:var(--bo-rood); font-weight:600; }
/* kaarten (radio / vinkje) */
.bo-kaarten{ display:flex; flex-direction:column; gap:8px; }
.bo-kaart-wrap{ border:1px solid var(--bo-border); border-radius:12px; background:transparent; overflow:hidden; transition:border-color .15s, background .15s; }
.bo-kaart-wrap.is-actief{ border-color:var(--bo-ink); background:#fff; }
.bo-kaart{ display:grid; grid-template-columns:20px minmax(0,1fr) auto; gap:12px; align-items:center; width:100%; padding:13px 16px; margin:0; cursor:pointer; color:var(--bo-ink); }
.bo-kaart input, .bo-knop input{ position:absolute; opacity:0; width:0; height:0; }
.bo-radio{ width:18px; height:18px; border-radius:50%; border:2px solid #b8b0a0; box-sizing:border-box; display:grid; place-items:center; }
.bo-radio::after{ content:''; width:8px; height:8px; border-radius:50%; background:transparent; }
.is-actief .bo-radio{ border-color:var(--bo-ink); } .is-actief .bo-radio::after{ background:var(--bo-ink); }
.bo-vink{ width:18px; height:18px; border-radius:5px; border:2px solid #b8b0a0; box-sizing:border-box; display:grid; place-items:center; color:#fff; font-size:11px; font-weight:700; }
.is-actief .bo-vink{ border-color:var(--bo-ink); background:var(--bo-ink); } .is-actief .bo-vink::after{ content:'✓'; }
.bo-kaart-tekst{ display:flex; flex-direction:column; min-width:0; }
.bo-kaart-label{ font-size:14px; font-weight:600; line-height:1.3; }
.bo-kaart-sub{ font-size:12px; color:var(--bo-muted); margin-top:2px; }
.bo-prijs{ font-size:13px; font-weight:600; white-space:nowrap; font-variant-numeric:tabular-nums; }
.bo-prijs--tekst{ color:var(--bo-faint); font-weight:500; }
/* vervolgveld in de kaart */
.bo-vervolg{ padding:0 16px 16px 48px; display:flex; flex-direction:column; gap:8px; }
.bo-tekstveld{ display:flex; flex-direction:column; gap:6px; }
.bo-tekst{ padding:12px 14px; border:1px solid var(--bo-border); border-radius:10px; font:inherit; font-size:15px; background:#fff; outline:none; max-width:220px; }
.bo-tekst--caps{ letter-spacing:2px; text-transform:uppercase; }
.bo-tekst:focus{ border-color:var(--bo-ink); }
.bo-teller, .bo-upload-hint{ font-size:12px; color:var(--bo-faint); }
.bo-uploadveld{ display:flex; flex-direction:column; gap:8px; }
.bo-upload{ display:flex; align-items:center; gap:12px; padding:12px 14px; border:1px dashed #b8b0a0; border-radius:10px; background:#fff; cursor:pointer; font-size:13px; margin:0; flex-wrap:wrap; }
.bo-upload input{ position:absolute; opacity:0; width:0; height:0; }
.bo-upload-knop{ padding:7px 12px; border-radius:999px; background:var(--bo-ink); color:#fff; font-weight:600; font-size:12px; }
.bo-upload-naam{ color:var(--bo-muted); }
.bo-upload.is-gekozen{ border-style:solid; border-color:var(--bo-ink); } .bo-upload.is-gekozen .bo-upload-naam{ color:var(--bo-ink); font-weight:600; }
/* knoppen naast elkaar (maat, RAL, uitsparing) */
.bo-knoppen{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.bo-knop{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; padding:12px 10px; border:1px solid var(--bo-border) !important; border-radius:12px !important; background:transparent !important; cursor:pointer; margin:0; text-align:center; color:var(--bo-ink) !important; font:inherit; line-height:1.3; transition:border-color .15s, background .15s; box-shadow:none !important; }
.bo-knop:hover{ border-color:#b8b0a0 !important; }
.bo-knop.is-actief{ border-color:var(--bo-ink) !important; background:#fff !important; }
.bo-knop-label{ font-size:15px; font-weight:600; }
.bo-knop-sub{ font-size:11px; color:var(--bo-faint); }
.bo-knoppen--uitsparing .bo-knop{ gap:10px; padding:14px 10px; } .bo-knoppen--uitsparing .bo-knop-label{ font-size:12px; }
.bo-tekening{ width:72px; height:30px; border-radius:4px; background:#2a3a2e; position:relative; display:block; }
.bo-tekening span{ position:absolute; top:5px; width:20px; height:20px; border-radius:50%; background:#f7f5f0; }
.bo-tekening--links span{ left:10px; } .bo-tekening--midden span{ left:26px; } .bo-tekening--rechts span{ left:42px; }
.bo-hulp{ font-size:12px; color:var(--bo-faint); }
/* ingeklapte groep (personaliseren) */
.bo-groep--inklap{ border:1px solid var(--bo-line); border-radius:12px; background:#fff; overflow:hidden; gap:0; }
.bo-inklap-kop{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px; align-items:center; width:100%; padding:14px 16px; border:0; background:transparent; font:inherit; text-align:left; cursor:pointer; color:var(--bo-ink); }
.bo-inklap-titel{ font-size:14px; font-weight:600; display:block; }
.bo-inklap-sub{ font-size:12px; color:var(--bo-muted); display:block; margin-top:2px; }
.bo-inklap-knop{ font-size:13px; font-weight:600; color:var(--bo-goud); white-space:nowrap; }
.bo-inklap-body{ display:flex; flex-direction:column; gap:8px; padding:0 12px 12px; }
/* samenvatting + levertijd */
.bo-samenvatting{ border-top:1px solid var(--bo-line); padding-top:14px; }
.bo-sam-regels{ display:flex; flex-direction:column; gap:6px; font-size:13px; color:var(--bo-muted); }
.bo-sam-regels div{ display:flex; justify-content:space-between; gap:12px; } .bo-sam-regels div span:last-child{ white-space:nowrap; font-variant-numeric:tabular-nums; }
.bo-sam-regels .bo-sam-totaal{ color:var(--bo-ink); font-weight:600; border-top:1px solid var(--bo-line); padding-top:6px; }
.bo-levertijd{ font-size:12px; color:var(--bo-faint); line-height:1.6; margin:10px 0 0; width:100%; }
.bo-met-opties{ font-size:13px; color:var(--bo-faint); font-weight:400; margin-left:10px; white-space:nowrap; }
.bo-groep.is-fout .bo-kaart-wrap, .bo-groep.is-fout .bo-knop{ border-color:var(--bo-rood); }
@media (max-width:640px){ .bo-kaart{ padding:12px 14px; } .bo-vervolg{ padding-left:14px; } }

/* Variaties in het ontwerp: maat als knoppen, kleur als stalen (vervangt table.variations) */
.bo-var-actief table.variations{ display:none !important; }
.bo-vars{ --bo-border:#d9d3c6; --bo-ink:#1f2a24; display:flex; flex-direction:column; gap:20px; margin:0 0 20px; font-size:14px; color:#1f2a24; }
.bo-var{ display:flex; flex-direction:column; gap:10px; }
.bo-var .bo-kop-rechts a{ color:#8a6d2a; font-weight:600; text-decoration:none; font-size:12px; }
.bo-var .bo-kop-rechts.bo-kleurnaam{ color:#5c645e; font-size:13px; }
.bo-swatches{ display:flex; gap:10px; flex-wrap:wrap; }
.bo-swatch{ width:40px; height:40px; border-radius:50% !important; border:0 !important; padding:0 !important; cursor:pointer; box-shadow:0 0 0 1px rgba(0,0,0,.08); display:grid; place-items:center; font-size:11px; font-weight:700; color:#1f2a24; background:#ddd6c8; transition:box-shadow .15s; }
.bo-swatch.is-actief{ box-shadow:0 0 0 2px #f7f5f0, 0 0 0 4px #1f2a24; }
.bo-swatch.is-uit{ opacity:.3; cursor:not-allowed; }
.bo-knop.is-uit{ opacity:.4; cursor:not-allowed; text-decoration:line-through; }
.bo-vars .bo-knoppen{ grid-template-columns:repeat(var(--bo-kol,3),1fr); }

/* Aanvullingen: gekoppelde producten (onderstel, hoes, smoke set) */
.bo-av{ display:flex; flex-direction:column; gap:20px; }
.bo-av-intro{ padding:14px 16px; background:#efece4; border-radius:12px; font-size:13px; line-height:1.55; color:var(--bo-muted); }
.bo-kaart--av{ grid-template-columns:20px 48px minmax(0,1fr) auto; }
.bo-av-thumb{ width:48px; height:48px; border-radius:8px; overflow:hidden; background:#efece4; display:block; }
.bo-av-thumb img{ width:48px; height:48px; object-fit:cover; display:block; }
.bo-kaart-wrap.is-uit{ opacity:.55; } .bo-kaart-wrap.is-uit .bo-kaart{ cursor:not-allowed; }
.bo-uitverkocht{ color:#b5473c !important; }
/* winkelmand: gekoppelde regel onder de hoofdregel */
.woocommerce-cart tr.bo-kind, .woocommerce-checkout tr.bo-kind{ background:#fbfaf7; }
.woocommerce-cart tr.bo-kind td.product-thumbnail img{ width:44px; height:44px; }
.woocommerce-cart tr.bo-kind td.product-name{ padding-left:28px; position:relative; }
.woocommerce-cart tr.bo-kind td.product-name::before{ content:''; position:absolute; left:10px; top:14px; width:12px; height:14px; border-left:1px solid #b8b0a0; border-bottom:1px solid #b8b0a0; border-radius:0 0 0 6px; }
.woocommerce-cart tr.bo-kind td.product-name > a, .woocommerce-cart tr.bo-kind td.product-name{ font-weight:500; }
.bo-kind-aantal{ font-size:13px; color:#5c645e; white-space:nowrap; }