/* ══════════════════════════════════════════════════════════════════ RönYen Basic Builder + chooser shell (CD handoff, Aug 2026) Shell pieces (.backbtn, .modeseg, .choose) use the builder page's existing tokens (--page/--panel/--raise/--sunk/--bd/--tx/--acc…). The Basic Builder component carries its own token set, scoped to .cfg-root so nothing leaks into the advanced builder. Breakpoints inside the component are container queries on .cfg-root. ══════════════════════════════════════════════════════════════════ */ /* ── mode visibility: choose | basic | advanced ─────────────────── */ .builder-root:not([data-rymode="advanced"]) .studio, .builder-root:not([data-rymode="advanced"]) .builder-cta, .builder-root:not([data-rymode="advanced"]) .mbar, .builder-root:not([data-rymode="advanced"]) .fnav, .builder-root:not([data-rymode="advanced"]) .navtabs { display: none !important; } .builder-root:not([data-rymode="basic"]) .bb-outer { display: none !important; } .builder-root:not([data-rymode="choose"]) .choose { display: none !important; } /* ── merged nav row (.builder-chrome direct page) ─────────────────── basic-builder.js moves the mode pills + sauna-type strip + theme toggle into the site header's dark row and tags bld-nav-merged. Layout: back · pills · strip … centred logo … Dark|Warm · cart · account · ☰. Below 1180px the pills/strip wrap onto their own second row; below 760px the cart/account/☰ icons drop, matching the mock. */ body.bld-nav-merged .appbar { display: none !important; } body[data-rymode]:not([data-rymode="advanced"]) .bld-controls .navtabs { display: none !important; } .bld-controls { display: flex; align-items: center; gap: 12px; min-width: 0; margin-right: auto; } /* logo relocated into the actions row, left of the back link — kill the absolute centring from custom-builder.css and size it to the bar */ body.bld-nav-merged.builder-chrome .hm-logo { position: static !important; transform: none !important; margin: 0 10px 0 0; flex: none; display: inline-flex; align-items: center; } body.bld-nav-merged.builder-chrome .hm-logo svg, body.bld-nav-merged.builder-chrome .hm-logo img { max-height: 34px; width: auto; } .bld-controls .modeseg { flex: none; } /* the appbar gave .navtabs flex:1 + centred content — in the merged row it hugs the pills on the left and SCROLLS inside the capped width instead of running into the centred logo */ .bld-controls .navtabs { flex: 0 1 auto; justify-content: flex-start; min-width: 0; overflow-x: auto; scrollbar-width: none; } .bld-controls .navtabs::-webkit-scrollbar { display: none; } /* ONE scroll block: the pieces inside the scroller must never nest-scroll — catseg and mstrip take their natural width and the outer container does all the sliding, so every tab can be reached by swiping the row. */ .bld-controls .navtabs .catseg { flex: none; } .bld-controls .navtabs .mstrip { flex: none; min-width: max-content; overflow: visible; } /* the header row is ALWAYS dark, but the strip's tabs read their colour — and, on narrow widths, a light --sunk chip background — from the page theme; in warm mode that's light-on-light. Pin the whole chip whenever it lives in the header row. */ body.bld-nav-merged .bld-controls .mstrip button { color: rgba(255, 255, 255, .62); background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); } body.bld-nav-merged .bld-controls .mstrip button:hover { color: #fff; } body.bld-nav-merged .bld-controls .mstrip button.on { background: var(--ice); border-color: var(--ice); color: #fff; } body.bld-nav-merged .bld-controls .subdiv { background: rgba(255, 255, 255, .22); } body.bld-nav-merged.builder-chrome .hm-back { margin-right: 0; white-space: nowrap; } body.bld-nav-merged .header-main .themeseg { margin-left: 4px; } /* language translator relocated from the (hidden) utility strip, in front of the theme toggle. The Elfsight widget styles its own text for the light utility strip, so it sits in a light pill on the always-dark bar. */ body.bld-nav-merged .header-main .hus-lang { flex: none; background: rgba(255, 255, 255, .92); border-radius: 999px; padding: 5px 14px; position: relative; z-index: 120; } body.bld-nav-merged .header-main .hus-lang-label { color: rgba(0, 0, 0, .6); } body.bld-nav-merged .header-main .hus-lang-label--m { display: none !important; } /* theme switcher: icons only, no words (Carl, Aug 2026) */ .themeseg .tlbl { display: none; } .themeseg button { padding: 7px 9px; } @media (max-width: 1180px) { body.bld-nav-merged .header-main .hm-actions { flex-wrap: wrap; padding: 0 0 10px; } body.bld-nav-merged.builder-chrome .hm-back { margin-right: auto; } body.bld-nav-merged .bld-controls { order: 20; flex-basis: 100%; max-width: none; margin-right: 0; overflow-x: auto; scrollbar-width: none; padding-top: 8px; } body.bld-nav-merged .bld-controls::-webkit-scrollbar { display: none; } /* on the wrapped row the scroller is .bld-controls itself — navtabs must stop scrolling internally so pills + tabs slide as one block */ body.bld-nav-merged .bld-controls .navtabs { flex: none; min-width: max-content; overflow: visible; } } @media (max-width: 760px) { body.bld-nav-merged .hm-btn--cart, body.bld-nav-merged .hm-account, body.bld-nav-merged .hm-btn--menu { display: none !important; } /* drop the "Language:" label so the pill fits beside the theme icons */ body.bld-nav-merged .header-main .hus-lang-label { display: none; } body.bld-nav-merged .header-main .hus-lang { padding: 5px 10px; } } /* ── app bar additions ──────────────────────────────────────────── */ .backbtn { display: inline-flex; align-items: center; gap: 6px; font-size: .83rem; font-weight: 500; color: var(--tx2); text-decoration: none; white-space: nowrap; } .backbtn:hover { color: var(--tx); } .backbtn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .modeseg { display: flex; gap: 2px; background: var(--raise); border: 1px solid var(--bd2); border-radius: 999px; padding: 3px; } .modeseg button { padding: 8px 18px; border: 0; border-radius: 999px; font: inherit; font-size: .81rem; font-weight: 600; color: var(--tx2); background: none; cursor: pointer; white-space: nowrap; transition: background .15s, color .15s; } .modeseg button:hover { color: var(--tx); } .modeseg button.on { background: var(--acc); color: #fff; } /* ── chooser landing ────────────────────────────────────────────── */ .choose { min-height: calc(100vh - 60px); display: flex; align-items: center; justify-content: center; padding: 40px 24px 64px; background: var(--page); } .choose-in { width: 100%; max-width: 900px; } .choose-ey { font-weight: 600; font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--tx3); } .choose h1 { font-weight: 600; font-size: 1.9rem; letter-spacing: -.02em; color: var(--tx); margin: 8px 0 0; } .choose-sub { font-size: .92rem; color: var(--tx2); margin: 8px 0 0; } .ccards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 30px; } @media (max-width: 720px) { .ccards { grid-template-columns: 1fr; } } .ccard { display: flex; flex-direction: column; gap: 12px; padding: 24px; background: var(--panel); border: 1px solid var(--bd); border-radius: 16px; text-align: left; font: inherit; color: var(--tx2); cursor: pointer; transition: border-color .18s, transform .18s; } .ccard:hover { border-color: var(--acc); transform: translateY(-2px); } .ccard .ic-tile { width: 38px; height: 38px; border-radius: 10px; background: var(--sunk); display: flex; align-items: center; justify-content: center; } .ccard .ic-tile svg { width: 19px; height: 19px; fill: none; stroke: var(--acc); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .ccard h3 { font-size: 1.12rem; font-weight: 600; color: var(--tx); margin: 0; } .ccard p { font-size: .86rem; color: var(--tx2); margin: 0; } .ccard ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; } .ccard li { display: flex; align-items: flex-start; gap: 8px; font-size: .82rem; color: var(--tx2); } .ccard li svg { width: 14px; height: 14px; margin-top: 2px; flex: none; fill: none; stroke: var(--acc); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } .ccard-shot { display: block; margin-top: 6px; border: 1px solid var(--bd); border-radius: 12px; overflow: hidden; background: var(--sunk); } .ccard-shot img { display: block; width: 100%; height: auto; } .ccard .go { margin-top: auto; padding-top: 6px; display: inline-flex; align-items: center; gap: 7px; font-size: .85rem; font-weight: 600; color: var(--acc); } .ccard .go svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } /* ══ BASIC BUILDER COMPONENT ════════════════════════════════════ */ .bb-outer { background: var(--page); padding: 26px 22px 60px; min-height: calc(100vh - 60px); } .cfg-root { container-type: inline-size; max-width: 1240px; margin: 0 auto; /* light (warm) token set */ --bb-bg: #F8F7F4; --bb-cream: #FBFAF7; --bb-surface: #F0EEE9; --bb-tint: #FFF4EC; --bb-alt: #E8E5DF; --bb-border: #D8D4CE; --bb-hair: #E8E5DF; --bb-hair2: #F1EFEB; --bb-heading: #1A1F24; --bb-body: #3D4550; --bb-muted: #6B7480; --bb-faint: #9AA0A8; --bb-nav: #252D35; --bb-acc: #F06020; --bb-acc-hover: #D04810; --bb-acc-deep: #8A3820; --bb-acc-soft: #FBE3D4; --bb-ok: #3A9478; --bb-warn: #C2872E; --bb-warn-soft: #FAF1E0; --bb-card: #fff; --bb-note-tx: #7A5414; --bb-r-s: 6px; --bb-r-m: 8px; --bb-r-l: 12px; --bb-r-xl: 16px; --bb-sh-1: 0 1px 3px rgba(26,31,36,.05); --bb-sh-3: 0 -6px 24px rgba(26,31,36,.10); font-weight: 300; color: var(--bb-body); line-height: 1.6; } body[data-theme="dark"] .cfg-root { --bb-bg: #171B20; --bb-cream: #1E242B; --bb-surface: #252D35; --bb-tint: rgba(240,96,32,.15); --bb-alt: #11151A; --bb-border: rgba(255,255,255,.18); --bb-hair: rgba(255,255,255,.10); --bb-hair2: rgba(255,255,255,.07); --bb-heading: #EDEFF1; --bb-body: #C9D0D8; --bb-muted: #AEB6BF; --bb-faint: #79828C; --bb-nav: #11151A; --bb-acc-deep: #FDBD92; --bb-acc-soft: rgba(240,96,32,.20); --bb-ok: #4FBF9B; --bb-warn: #E0A94A; --bb-warn-soft: rgba(224,169,74,.13); --bb-card: #252D35; --bb-note-tx: #F0D9A8; --bb-sh-1: 0 1px 3px rgba(0,0,0,.35); --bb-sh-3: 0 -6px 24px rgba(0,0,0,.5); } /* product cutouts keep a light tile in dark mode so they don't float on black */ body[data-theme="dark"] .cfg-root .bopt-fig:not(.bplan):not(.bnum) { background: #EFEDE8; } .cfg-root img { display: block; max-width: 100%; } .cfg-root svg { display: block; } .cfg-root button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; } .cfg-root h2, .cfg-root h3 { color: var(--bb-heading); letter-spacing: -.02em; } .cfg-root .i { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .cfg { background: var(--bb-cream); border: 1px solid var(--bb-hair); border-radius: var(--bb-r-xl); box-shadow: var(--bb-sh-1); overflow: clip; position: relative; } /* head */ .cfg-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; padding: 28px 32px 20px; } .cfg-head .bey { font-weight: 600; font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--bb-acc-deep); } .cfg-head h2 { font-weight: 600; font-size: 1.5rem; line-height: 1.2; margin: 6px 0 0; } .cfg-head-p { flex: none; width: 200px; text-align: right; } .cfg-head-p .bcnt { font-size: .78rem; color: var(--bb-muted); } .cfg-head-p .bcnt b { font-weight: 600; color: var(--bb-heading); } .cfg-head-p .bbar { height: 3px; border-radius: 2px; background: var(--bb-alt); margin-top: 9px; overflow: hidden; } .cfg-head-p .bbar i { display: block; height: 100%; background: var(--bb-acc); border-radius: 2px; width: 0; transition: width .45s cubic-bezier(.16,1,.3,1); } /* step rail */ .bb-rail { display: flex; gap: 8px; padding: 0 32px 22px; overflow-x: auto; scrollbar-width: none; } .bb-rail::-webkit-scrollbar { display: none; } .bb-rail.scrollable { -webkit-mask-image: linear-gradient(90deg,#000 0,#000 calc(100% - 34px),transparent); mask-image: linear-gradient(90deg,#000 0,#000 calc(100% - 34px),transparent); } .bb-rail button { flex: 0 0 auto; display: flex; align-items: center; gap: 9px; padding: 8px 14px 8px 10px; border-radius: 999px; border: 1px solid var(--bb-hair); background: var(--bb-card); transition: border-color .15s, background .15s, box-shadow .15s; } .bb-rail button:hover { border-color: var(--bb-border); } .bb-rail button.off { opacity: .45; cursor: not-allowed; } .bb-rail button.off:hover { border-color: var(--bb-hair); } .bb-rail .bnn { width: 20px; height: 20px; flex: none; border-radius: 50%; background: var(--bb-surface); color: var(--bb-muted); font-size: .66rem; font-weight: 600; display: flex; align-items: center; justify-content: center; line-height: 1; } .bb-rail .blb { font-size: .8rem; font-weight: 500; color: var(--bb-muted); white-space: nowrap; } .bb-rail button.done .bnn { background: var(--bb-acc-soft); color: var(--bb-acc-deep); } .bb-rail button.done .blb { color: var(--bb-heading); } .bb-rail button.on { border-color: var(--bb-acc); background: var(--bb-tint); box-shadow: 0 1px 3px rgba(240,96,32,.18); } .bb-rail button.on .bnn { background: var(--bb-acc); color: #fff; } .bb-rail button.on .blb { color: var(--bb-acc-deep); font-weight: 600; } .bb-rail .btick { width: 11px; height: 11px; stroke-width: 2.6; color: var(--bb-ok); margin-left: -2px; } /* body split */ .cfg-body { display: grid; grid-template-columns: 1fr 348px; align-items: start; border-top: 1px solid var(--bb-hair); } /* stage */ .bb-stage { padding: 30px 32px 34px; min-height: 520px; display: flex; flex-direction: column; } .bst-k { font-weight: 600; font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--bb-muted); } .bst-q { font-weight: 600; font-size: 1.375rem; line-height: 1.25; margin: 7px 0 0; } .bst-h { font-size: .875rem; color: var(--bb-muted); margin: 8px 0 0; max-width: 56ch; text-wrap: pretty; } .bst-tag { display: inline-flex; align-items: center; gap: 7px; margin-top: 14px; padding: 6px 12px; border-radius: 999px; background: var(--bb-surface); font-size: .75rem; color: var(--bb-body); align-self: flex-start; } .bst-tag .i { width: 13px; height: 13px; color: var(--bb-muted); } .bopts { display: grid; gap: 12px; margin-top: 24px; } .bopts.c2 { grid-template-columns: repeat(2,1fr); } .bopts.c3 { grid-template-columns: repeat(3,1fr); } .bopts.c4 { grid-template-columns: repeat(4,1fr); } /* option card */ .bopt { position: relative; display: flex; flex-direction: column; gap: 14px; text-align: left; background: var(--bb-card); border: 1px solid var(--bb-hair); border-radius: var(--bb-r-l); padding: 16px; transition: border-color .15s, box-shadow .18s, transform .18s, background .15s; } .bopt:hover { border-color: var(--bb-border); box-shadow: var(--bb-sh-1); transform: translateY(-1px); } .bopt.bsel { border-color: var(--bb-acc); border-width: 2px; padding: 15px; background: var(--bb-tint); box-shadow: 0 2px 10px rgba(240,96,32,.13); } .bopt-fig { border-radius: var(--bb-r-m); background: var(--bb-surface); overflow: hidden; aspect-ratio: 16/9; display: flex; align-items: center; justify-content: center; } .bopt-fig img { width: 100%; height: 100%; object-fit: cover; } .bopt-fig.bplan { background: #fff; border: 1px solid var(--bb-hair2); } .bopt-fig.btall { aspect-ratio: 5/4; } .bopt-fig.bnum { background: var(--bb-card); border: 1px solid var(--bb-hair2); aspect-ratio: 3/2; } .bopt-fig.bnum span { font-weight: 600; font-size: 2.5rem; line-height: 1; letter-spacing: -.04em; color: var(--bb-heading); } .bopt.bsel .bopt-fig.bnum { background: var(--bb-card); } .bopt.borow { grid-column: 1/-1; flex-direction: row; align-items: center; gap: 14px; } .bopt-fig svg { width: 100%; height: 100%; } .bopt-b { display: flex; flex-direction: column; gap: 3px; } .bopt-n { font-weight: 600; font-size: .9375rem; color: var(--bb-heading); line-height: 1.3; } .bopt-s { font-size: .78rem; color: var(--bb-muted); line-height: 1.45; } .bopt-n.bdim { font-variant-numeric: tabular-nums; } .bopt-dim { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; font-size: .8125rem; font-variant-numeric: tabular-nums; color: var(--bb-body); line-height: 1.35; } .bopt-dim em { font-style: normal; font-size: .625rem; letter-spacing: .09em; text-transform: uppercase; color: var(--bb-muted); } .bopt-p { margin-top: 2px; font-size: .78rem; font-weight: 600; color: var(--bb-acc-deep); } .bopt-p.binc { color: var(--bb-muted); font-weight: 400; } .bopt-mark { position: absolute; top: 12px; right: 12px; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--bb-border); background: var(--bb-card); display: flex; align-items: center; justify-content: center; transition: background .15s, border-color .15s; } .bopt-mark.bsq { border-radius: var(--bb-r-s); } .bopt-mark .i { width: 12px; height: 12px; stroke-width: 3; color: #fff; opacity: 0; } .bopt:hover .bopt-mark { border-color: var(--bb-muted); } .bopt.bsel .bopt-mark { background: var(--bb-acc); border-color: var(--bb-acc); } .bopt.bsel .bopt-mark .i { opacity: 1; } .bopt-rec { position: absolute; top: 12px; left: 12px; padding: 3px 8px; border-radius: 999px; background: var(--bb-acc-soft); color: var(--bb-acc-deep); font-size: .62rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; } .bopt.bsel .bopt-rec { background: var(--bb-card); } /* stage footer */ .bst-note { display: flex; align-items: flex-start; gap: 9px; margin-top: 20px; padding: 12px 14px; border-radius: var(--bb-r-m); background: var(--bb-warn-soft); color: var(--bb-note-tx); font-size: .8rem; line-height: 1.5; } .bst-note .i { width: 14px; height: 14px; margin-top: 2px; color: var(--bb-warn); } .bst-nav { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: auto; padding-top: 26px; } .bst-nav .bleft { display: flex; align-items: center; gap: 6px; } .cfg-root .btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; font-weight: 600; font-size: .875rem; padding: 13px 22px; border-radius: var(--bb-r-m); min-height: 46px; border: 0; transition: background .15s, border-color .15s, color .15s, opacity .15s; } .cfg-root .btn .i { width: 14px; height: 14px; stroke-width: 2.3; } .cfg-root .btn-p { background: var(--bb-acc); color: #fff; } .cfg-root .btn-p:hover { background: var(--bb-acc-hover); } .cfg-root .btn-p:disabled { background: var(--bb-border); color: #fff; cursor: not-allowed; } .cfg-root .btn-g { border: 1px solid var(--bb-border); color: var(--bb-heading); background: var(--bb-card); } .cfg-root .btn-g:hover { background: var(--bb-surface); } .cfg-root .btn-g:disabled { color: var(--bb-faint); border-color: var(--bb-hair); cursor: not-allowed; background: var(--bb-card); } .cfg-root .btn-t { color: var(--bb-muted); padding: 13px 4px; background: none; } .cfg-root .btn-t:hover { color: var(--bb-heading); } /* build summary */ .bb-build { border-left: 1px solid var(--bb-hair); background: var(--bb-card); align-self: stretch; } /* solid background + z-index: when the sticky block slides over the inclusions list on scroll it covers it cleanly instead of overprinting */ .build-in { position: sticky; top: 16px; max-height: calc(100vh - 32px); display: flex; flex-direction: column; padding: 26px 26px 28px; background: var(--bb-card); z-index: 1; } .build-head, .build-total, .build-note, .build-cta, .build-vat { flex: none; } .build-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--bb-hair); } .build-head h3 { font-weight: 600; font-size: 1.0625rem; margin: 0; } .build-state { font-size: .7rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--bb-muted); } .build-state.part { color: var(--bb-acc-deep); } .build-state.done { color: var(--bb-ok); } .build-rows { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; padding: 0 12px; margin: 0 -12px; overflow-y: auto; overflow-x: clip; scrollbar-gutter: stable; overscroll-behavior: contain; scrollbar-width: thin; } .bbr { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: baseline; padding: 11px 0; border-bottom: 1px solid var(--bb-hair2); } .bbr .brk { display: block; font-weight: 600; font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: var(--bb-muted); } .bbr .brv { display: block; font-size: .875rem; color: var(--bb-heading); font-weight: 500; margin-top: 3px; line-height: 1.35; } .bbr > span:last-child { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; } .bbr .bra { font-size: .8rem; color: var(--bb-body); white-space: nowrap; font-weight: 500; } .bbr .bra.binc { color: var(--bb-faint); font-weight: 400; } .bbr .brv.brph { color: var(--bb-muted); font-weight: 400; } .bbr .bra.brdash { color: var(--bb-faint); font-weight: 400; } .bbr.brempty button.bredit { color: var(--bb-acc); } .bbr.brflash { animation: bbBrIn .9s ease-out; } @keyframes bbBrIn { 0% { background: var(--bb-tint); } 60% { background: var(--bb-tint); } 100% { background: transparent; } } #bbTotal.bump { display: inline-block; animation: bbTBump .45s ease-out; } @keyframes bbTBump { 0% { transform: translateY(-2px); color: var(--bb-acc); } 100% { transform: none; } } .bbr button.bredit { font-size: .72rem; color: var(--bb-muted); text-decoration: underline; text-underline-offset: 3px; } .bbr button.bredit:hover { color: var(--bb-acc); } .bbr button.bredit:disabled { color: var(--bb-faint); text-decoration: none; cursor: not-allowed; } .bbr.brnow { background: var(--bb-tint); padding: 11px 12px; margin: 0 -12px; border-radius: var(--bb-r-s); box-shadow: inset 2px 0 0 var(--bb-acc); } .build-total { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 16px 0 0; margin-top: 6px; border-top: 1px solid var(--bb-border); } .build-total span { font-size: .8rem; color: var(--bb-muted); } .build-total b { font-weight: 600; font-size: 1.375rem; color: var(--bb-heading); letter-spacing: -.02em; } .build-vat { font-size: .72rem; color: var(--bb-muted); text-align: right; margin-top: 4px; } .build-note { font-size: .72rem; color: var(--bb-muted); margin-top: 7px; line-height: 1.5; } .build-cta { display: flex; flex-direction: column; gap: 9px; margin-top: 18px; } .build-cta .btn { width: 100%; } /* compact inline inclusions strip at the bottom of the stage */ .bincl-strip { display: flex; flex-wrap: wrap; align-items: baseline; gap: 5px 16px; margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--bb-hair); } .bs-h { font-weight: 600; font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: var(--bb-muted); flex-basis: 100%; } .bs-i { display: inline-flex; align-items: center; gap: 5px; font-size: .74rem; color: var(--bb-body); line-height: 1.4; white-space: nowrap; } .bs-i .i { width: 11px; height: 11px; stroke-width: 2.6; color: var(--bb-ok); } .bincl { margin: 0 26px 26px; padding-top: 20px; border-top: 1px solid var(--bb-hair); } .bincl-h { font-weight: 600; font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--bb-muted); margin-bottom: 11px; } .bincl ul { list-style: none; display: grid; gap: 6px; margin: 0; padding: 0; } .bincl li { display: flex; align-items: flex-start; gap: 8px; font-size: .78rem; color: var(--bb-body); line-height: 1.45; } .bincl li .i { width: 12px; height: 12px; margin-top: 4px; stroke-width: 2.4; color: var(--bb-ok); } /* mobile bar + sheet (hidden until the container is narrow) */ .bb-mbar, .bb-sheet { display: none; } .bb-mbar { position: sticky; bottom: 0; z-index: 6; width: 100%; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 20px; background: var(--bb-nav); color: #fff; text-align: left; box-shadow: var(--bb-sh-3); border: 0; } .bb-mbar .mbar-l b, .bb-mbar .mbar-r b { display: block; font-weight: 600; font-size: .875rem; line-height: 1.3; } .bb-mbar .mbar-l span { font-size: .72rem; color: #9AA0A8; } .bb-mbar .mbar-r { display: flex; align-items: center; gap: 10px; } .bb-mbar .mbar-r .i { width: 16px; height: 16px; transition: transform .25s; } .bb-mbar[aria-expanded="true"] .mbar-r .i { transform: rotate(180deg); } .bb-sheet { position: absolute; inset: auto 0 62px; z-index: 5; max-height: 70%; overflow-y: auto; background: var(--bb-card); border-top-left-radius: var(--bb-r-xl); border-top-right-radius: var(--bb-r-xl); box-shadow: var(--bb-sh-3); animation: bbUp .3s cubic-bezier(.16,1,.3,1); } .bb-sheet .bb-build { border-left: 0; } .bb-sheet .build-in { position: static; max-height: none; overflow: visible; padding: 22px 20px 18px; } .bb-sheet .build-rows { overflow: visible; flex: none; } .bb-sheet .bincl { margin: 0 20px 24px; } .bb-sheet .bgrab { width: 38px; height: 4px; border-radius: 2px; background: var(--bb-border); margin: 10px auto 0; } @keyframes bbUp { from { transform: translateY(14px); opacity: 0; } to { transform: none; opacity: 1; } } /* container breakpoints */ @container (max-width: 1080px) { .cfg-body { grid-template-columns: 1fr 310px; } .build-in { padding: 22px 20px 24px; } .bincl { margin: 0 20px 22px; } .bopts.c3, .bopts.c4 { grid-template-columns: repeat(2,1fr); } } @container (max-width: 820px) { .cfg { height: min(780px, 86vh); display: flex; flex-direction: column; } .cfg-head, .bb-rail, .bb-mbar { flex: none; } .cfg-body { grid-template-columns: 1fr; flex: 1; min-height: 0; overflow-y: auto; } .cfg-body > .bb-build { display: none; } .bb-sheet .bb-build { display: block; border-left: 0; } .bb-mbar { display: flex; position: static; } .bb-sheet[data-open] { display: block; } .bb-stage { min-height: 0; padding: 26px 24px 30px; } .cfg-head { padding: 24px 24px 18px; } .bb-rail { padding: 0 24px 20px; } } @container (max-width: 560px) { .cfg-head { flex-direction: column; align-items: stretch; gap: 14px; } .cfg-head-p { width: auto; text-align: left; display: flex; align-items: center; gap: 14px; } .cfg-head-p .bcnt { flex: none; } .cfg-head-p .bbar { flex: 1; margin-top: 0; } .cfg-head h2 { font-size: 1.3rem; } .bst-q { font-size: 1.1875rem; } .bopts.c2, .bopts.c3, .bopts.c4 { grid-template-columns: 1fr; } .bopt-fig.btall { width: 104px; aspect-ratio: 1; } .bopt-fig.bnum { width: 70px; aspect-ratio: 1; } .bopt-fig.bnum span { font-size: 1.75rem; } .bopt { flex-direction: row; align-items: center; gap: 14px; padding: 14px; } .bopt.bsel { padding: 13px; } .bopt-fig { width: 92px; flex: none; aspect-ratio: 4/3; } .bopt-b { flex: 1; padding-right: 26px; } .bopt:has(.bopt-rec) { padding-top: 32px; } .bopt.bsel:has(.bopt-rec) { padding-top: 31px; } .bopt-rec { top: 9px; left: 14px; } .bst-nav .btn-p { flex: 1; } .bb-stage { padding: 22px 18px 26px; } .cfg-head, .bb-rail { padding-left: 18px; padding-right: 18px; } .bb-outer { padding: 14px 10px 40px; } } @media (prefers-reduced-motion: reduce) { .cfg-root *, .choose *, .modeseg * { animation: none !important; transition: none !important; } }