/* Cabino barrel-sauna builder + product-page 3D viewer. Uses the site's own colour variables where they exist. */
.bb{--bb-ink:var(--ink,#211F1B);--bb-soft:var(--ink-soft,#5D584F);--bb-line:var(--line,#D9D2C4);--bb-sand:var(--sand,#E7E1D6);--bb-paper:var(--paper,#FBF9F5);--bb-stone:var(--stone,#8C8577);
  display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:40px;align-items:start}
.bb *{box-sizing:border-box}
.bb button{font:inherit;color:inherit;cursor:pointer}

/* ---- preview ---- */
.bb-view{position:sticky;top:calc(var(--navh,76px) + 12px);z-index:2}
.bb-stage{position:relative;background:linear-gradient(180deg,#EFEAE0 0%,#E4DDCF 62%,#D9D0BE 100%);border:1px solid var(--bb-line);aspect-ratio:4/3;overflow:hidden;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.bb-stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:grab}
.bb-stage canvas:active{cursor:grabbing}
.bb-lbl{position:absolute;left:0;top:0;transform:translate(-50%,-50%);font-size:.72rem;letter-spacing:.02em;white-space:nowrap;color:var(--bb-ink);background:rgba(251,249,245,.92);padding:3px 8px;border:1px solid var(--bb-line);pointer-events:none;line-height:1.25}
.bb-lbl b{font-weight:600}
.bb-lbl.tot{background:var(--bb-ink);color:#fff;border-color:var(--bb-ink)}
.bb-hint{position:absolute;right:10px;top:14px;font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;color:var(--bb-stone);pointer-events:none}
.bb-tabs{position:absolute;left:10px;top:10px;display:flex;gap:0;z-index:3}
.bb-tabs button{background:rgba(251,249,245,.94);border:1px solid var(--bb-line);padding:7px 12px;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase}
.bb-tabs button+button{border-left:0}
.bb-tabs button[aria-pressed=true]{background:var(--bb-ink);color:#fff;border-color:var(--bb-ink)}
.bb-planbox{position:absolute;inset:0;display:none;align-items:center;justify-content:center;background:var(--bb-paper);padding:52px 12px 10px;z-index:2}
.bb-planbox svg{display:block;width:100%;height:100%;max-height:100%}
.bb-stage[data-view=plan] .bb-planbox{display:flex}
.bb-stage[data-view=plan] canvas,.bb-stage[data-view=plan] .bb-lbl{display:none!important}
.bb-fallback{position:absolute;left:0;right:0;bottom:8px;display:none;align-items:center;justify-content:center;text-align:center;padding:0 24px;color:var(--bb-soft);font-size:.8rem;z-index:3}

/* ---- controls ---- */
.bb-panel{min-width:0}
.bb-panel h2{font-size:clamp(1.5rem,2.6vw,2rem);margin:6px 0 6px}
.bb-panel .lead{color:var(--bb-soft);margin-bottom:22px;max-width:52ch}
.bb-grp{border-top:1px solid var(--bb-line);padding:18px 0}
.bb-grp h3{font-family:inherit;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--bb-stone);margin:0 0 12px}
.bb-row{display:flex;flex-wrap:wrap;gap:8px}
.bb-rl{font-size:.88rem;font-weight:500;align-self:center;margin-right:6px}
.bb-chip{background:var(--bb-paper);border:1px solid var(--bb-line);padding:10px 14px;font-size:.88rem;line-height:1.25;text-align:left;min-height:44px}
.bb-chip small{display:block;color:var(--bb-stone);font-size:.74rem;margin-top:2px}
.bb-chip[aria-checked=true]{border-color:var(--bb-ink);background:var(--bb-ink);color:#fff}
.bb-chip[aria-checked=true] small{color:rgba(255,255,255,.72)}
.bb-models{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:8px}
.bb-models .bb-chip{padding:8px 10px;text-align:center}
.bb-sl{margin-top:14px}
.bb-sl label{display:flex;justify-content:space-between;gap:10px;font-size:.88rem;margin-bottom:8px}
.bb-sl label span{color:var(--bb-soft)}
.bb-sl input[type=range]{width:100%;height:32px;margin:0;accent-color:var(--bb-ink);background:transparent}
.bb-sl.off{display:none}
.bb-note{font-size:.82rem;color:var(--bb-soft);line-height:1.5;margin-top:10px}
.bb-note b{color:var(--bb-ink);font-weight:600}

.bb-opt{margin-top:18px}
.bb-opt:first-of-type{margin-top:0}
.bb-optl{font-size:.88rem;font-weight:500;margin-bottom:8px}

/* option cards with the same photos the product pages use */
.bb-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:8px}
.bb-card{display:flex;flex-direction:column;background:var(--bb-paper);border:1px solid var(--bb-line);padding:0;text-align:left;overflow:hidden;position:relative;min-width:0}
.bb-card .bb-img{display:block;aspect-ratio:1/1;background:#EDE7DB;overflow:hidden;position:relative}
.bb-card .bb-img img{width:100%;height:100%;object-fit:cover;display:block}
.bb-card .bb-img.none{background:repeating-linear-gradient(135deg,#EFE9DD 0 7px,#E6DECF 7px 8px)}
.bb-card .bb-img.none i{position:absolute;inset:22%;border:2px solid #C9BFAB;background:#F7F2E8}
.bb-card .bb-cn{font-size:.8rem;line-height:1.25;font-weight:500;padding:8px 9px 0;overflow-wrap:anywhere;hyphens:auto}   /* long Swedish compounds ("Panoramafönster", "Bastutillbehörsset") used to be cut off at the card edge on phones: they now wrap */
.bb-card .bb-cp{font-size:.72rem;color:var(--bb-stone);padding:2px 9px 9px;overflow-wrap:anywhere}
.bb-card .bb-cp.bb-std{color:var(--bb-ink);font-weight:600}   /* the wood that is included, so the ones that cost extra are not read as free */
.bb-card[aria-checked=true]{border-color:var(--bb-ink);box-shadow:0 0 0 1px var(--bb-ink)}
.bb-card[aria-checked=true]::after{content:'';position:absolute;right:7px;top:7px;width:20px;height:20px;border-radius:50%;background:var(--bb-ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-6.5' fill='none' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E") center/100% no-repeat}

/* ---- summary ---- */
.bb-sum{border:1px solid var(--bb-ink);background:var(--bb-paper);padding:22px 22px 20px;margin-top:8px}
.bb-price{font-family:'Newsreader',Georgia,serif;font-size:2.3rem;line-height:1;margin:2px 0 4px}
.bb-price small{font-family:'Inter',system-ui,sans-serif;font-size:.8rem;color:var(--bb-soft);margin-left:6px}
.bb-badge{display:inline-block;font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;font-weight:600;padding:4px 8px;background:var(--bb-sand);color:var(--bb-ink);margin-bottom:10px}
.bb-badge.std{background:var(--bb-ink);color:#fff}
.bb-lines{margin:12px 0 4px;border-top:1px solid var(--bb-line)}
.bb-lines div{display:flex;justify-content:space-between;gap:12px;font-size:.84rem;padding:6px 0;border-bottom:1px solid var(--bb-line);color:var(--bb-soft)}
.bb-lines div b{font-weight:500;color:var(--bb-ink);white-space:nowrap}
.bb-cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.bb-cta .btn{cursor:pointer}
.bb-quote{display:none;margin-top:18px;border-top:1px solid var(--bb-line);padding-top:16px;position:relative}
.bb-quote.on{display:block}
.bb-quote label{display:block;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--bb-stone);margin:12px 0 4px}
.bb-quote input,.bb-quote textarea{width:100%;font:inherit;padding:11px 12px;border:1px solid var(--bb-line);background:#fff;color:var(--bb-ink)}
.bb-quote textarea{min-height:76px;resize:vertical}
.bb-quote .fine{font-size:.76rem;color:var(--bb-soft);margin-top:10px;line-height:1.5}
.bb-quote .fine a{border-bottom:1px solid var(--bb-stone)}
.bb-ok{display:none;background:#E6EFE1;color:#2F5B2A;padding:12px 14px;margin-top:14px;font-size:.9rem}
.bb-ok.on{display:block}
.bb-warn{font-size:.82rem;color:#7A3410;background:#F3E1D6;padding:9px 12px;margin-top:10px;display:none}
.bb-warn.on{display:block}

/* ---- product-page viewer ---- */
.bb-viewer{display:block}
.bb-viewer .bb-view{position:static}
.viewer3d .bb-viewer{margin-top:22px}
.viewer3d-cta{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px;margin-top:20px;font-size:.95rem;color:var(--ink-soft,#54503F)}
.viewer3d-cta .btn{white-space:nowrap;line-height:normal}
.bb-viewer .bb-stage{aspect-ratio:16/8.6;max-height:620px}
.bb-vfacts{display:flex;flex-wrap:wrap;gap:6px 22px;margin-top:12px;font-size:.84rem;color:var(--bb-soft)}
.bb-vfacts b{color:var(--bb-ink);font-weight:600}

@media(max-width:480px){
  .bb-tabs button{padding:7px 9px;font-size:.66rem;letter-spacing:.05em}
  .bb-hint{display:none}
}
@media(max-width:900px){
  .bb{display:block}
  .bb-view{top:calc(var(--navh,64px) + 2px);margin:0 -16px 18px;padding:0}
  .bb-stage{aspect-ratio:auto;height:min(42vh,320px);border-left:0;border-right:0}
  .bb-lbl{font-size:.68rem;padding:2px 6px}
  .bb-price{font-size:2rem}
  .bb-viewer .bb-view{margin:0}
  .bb-viewer .bb-stage{aspect-ratio:auto;max-height:none;height:min(52vh,360px);border-left:1px solid var(--bb-line);border-right:1px solid var(--bb-line)}
}
.bb-sl label span small{font-size:.74rem;margin-left:8px;opacity:.85}

/* ---- the strip that moves a visitor between the builders ---- */
.bb-types{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 22px}
.bb-types-l{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--stone,#8C8577);margin-right:6px}
.bb-types a{border:1px solid var(--line,#D9D2C4);padding:9px 14px;font-size:.85rem;background:var(--paper,#FBF9F5);color:var(--ink,#211F1B);text-decoration:none;min-height:40px;display:inline-flex;align-items:center}
.bb-types a[aria-current=page]{background:var(--ink,#211F1B);color:#fff;border-color:var(--ink,#211F1B)}