/* ==========================================================================
   Build-A-Car, launch UI (Oct 1, 2026) — flow A, "the quiet stage".
   Plain CSS, every class prefixed bacx-, no framework. Dark is the default;
   light follows the site's html[data-theme="light"] and reads the --fnx-*
   ladder where it exists (theme-light.v1.css), with the same values as
   fallbacks so this sheet also works on its own.

   Sizes are px on purpose: the site sets the root font-size to 10px.
   The vehicle stage is a kept-dark window in both themes (theme-light part 75:
   "the media stays dark and is framed").
   Phone layout below 980px, the product page's own breakpoint.
   ========================================================================== */

.bacx {
  --bacx-page: #000;
  --bacx-panel: #0a0a0b;
  --bacx-panel2: #0d0d0f;
  --bacx-line: #1e1e22;
  --bacx-line2: #2b2b30;
  --bacx-ctl: #2b2b30;
  --bacx-ink: #f0efec;
  --bacx-ink2: #d8d7d0;
  --bacx-sel: #fff;
  --bacx-dim: #9a998f;
  --bacx-label: #84837b;
  --bacx-red: #ea3000;
  --bacx-red-text: #ea3000;
  --bacx-price: #e11d2a;
  --bacx-red-wash: rgba(255, 48, 0, .08);
  --bacx-amber: #f5b400;
  --bacx-amber-ink: #f5b400;
  --bacx-amber-wash: rgba(245, 180, 0, .07);
  --bacx-amber-line: rgba(245, 180, 0, .55);
  --bacx-cta: #ea3000;
  --bacx-off-bg: #141416;
  --bacx-off-ink: #6e6d66;
  --bacx-off-line: #2b2b30;
  --bacx-dock: #0a0a0b;
  --bacx-shadow: 0 24px 60px rgba(0, 0, 0, .65);
  --bacx-win-ink: #f0efec;
  --bacx-win-ink2: rgba(240, 239, 236, .72);
  --bacx-win-chip: rgba(8, 9, 12, .84);
  --bacx-win-line: rgba(255, 255, 255, .16);
  /* the house studio's backdrop, sampled off the renders' edges, so a stage wider than its photo meets it */
  --bacx-studio: linear-gradient(180deg, #35343a 0%, #37363c 20%, #3c3b40 40%, #343436 50%, #202022 56%, #1b1b1d 60%, #222224 66%, #505052 75%, #6d6d6f 88%, #7c7c7e 100%);
  --bacx-disp: 'eurostile-extended', 'Michroma', system-ui, sans-serif;
  --bacx-body: 'aktiv-grotesk', 'Inter', Arial, sans-serif;
  --bacx-oswald: 'Oswald', 'Arial Narrow', sans-serif;
  --bacx-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
  --bacx-header: 60px;           /* the site header above this page */
  --bacx-dock-h: 84px;
  --bacx-drawer-w: 392px;
  background: var(--bacx-page);
  color: var(--bacx-ink);
  font-family: var(--bacx-body);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}
html[data-theme="light"] .bacx {
  --bacx-page: var(--fnx-ground, #f4f4f4);
  --bacx-panel: var(--fnx-surface, #fff);
  --bacx-panel2: var(--fnx-surface-2, #f8f8f8);
  --bacx-line: var(--fnx-line, rgba(0, 0, 0, .14));
  --bacx-line2: var(--fnx-line-2, rgba(0, 0, 0, .26));
  --bacx-ctl: var(--fnx-line-ui, #8c8e92);
  --bacx-ink: var(--fnx-ink, #0f1c2a);
  --bacx-ink2: var(--fnx-ink, #0f1c2a);
  --bacx-sel: var(--fnx-ink, #0f1c2a);
  --bacx-dim: var(--fnx-ink-2, #4a5361);
  --bacx-label: var(--fnx-ink-label, #3e4754);
  --bacx-red-text: var(--fnx-accent-ink, #d0311c);
  --bacx-price: var(--fnx-accent-ink, #d0311c);
  --bacx-red-wash: var(--fnx-accent-soft, rgba(208, 49, 28, .10));
  --bacx-amber: #c98a00;
  --bacx-amber-ink: var(--fnx-warn, #8a5a00);
  --bacx-amber-wash: rgba(138, 90, 0, .07);
  --bacx-amber-line: rgba(138, 90, 0, .5);
  --bacx-cta: var(--fnx-accent-ink, #d0311c);
  --bacx-off-bg: var(--fnx-ground-2, #eaeaea);
  --bacx-off-ink: var(--fnx-disabled-ink, #748090);
  --bacx-off-line: var(--fnx-line, rgba(0, 0, 0, .14));
  --bacx-dock: var(--fnx-surface, #fff);
  --bacx-shadow: 0 10px 30px rgba(15, 28, 42, .18);
}
:where(.bacx) *, :where(.bacx) *::before, :where(.bacx) *::after { box-sizing: border-box; }
:where(.bacx) button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; text-align: left; }
:where(.bacx) a { color: inherit; }
:where(.bacx) :is(h1, h2, h3, p) { margin: 0; }
.bacx [hidden] { display: none !important; }
.bacx :focus-visible { outline: 2px solid var(--bacx-red-text); outline-offset: 2px; }
html[data-theme="light"] .bacx :focus-visible { outline-color: var(--fnx-focus, #0f1c2a); }

/* a value the page fills in: visible on purpose, so nothing ships as example data */
.bacx-ph { font-style: normal; text-decoration: underline dotted 1px; text-underline-offset: 3px; text-decoration-color: currentColor; }

/* ------------------------------------------------------------------ type */
.bacx-eyebrow { font: 500 10px/1 var(--bacx-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--bacx-red-text); }
.bacx-label { font: 500 10px/1.2 var(--bacx-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--bacx-label); }
.bacx-h1 { font: 700 44px/1 var(--bacx-oswald); letter-spacing: .02em; text-transform: uppercase; color: var(--bacx-sel); }
.bacx-h2 { font: 400 17px/1.1 var(--bacx-disp); letter-spacing: .06em; text-transform: uppercase; color: var(--bacx-sel); }
.bacx-dim { font-size: 13px; line-height: 1.5; color: var(--bacx-dim); }
.bacx-link { display: inline-flex; align-items: center; gap: 6px; font: 500 10px/1 var(--bacx-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--bacx-dim); text-decoration: underline; text-underline-offset: 3px; }
.bacx-note { display: flex; align-items: center; gap: 8px; font: 500 12px/1.35 var(--bacx-body); color: var(--bacx-amber-ink); }
.bacx-note::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--bacx-amber); flex: none; }
.bacx-note--done { color: var(--bacx-dim); }
.bacx-note--done::before { background: var(--bacx-red); }

/* ------------------------------------------------------------------ buttons (the product page's CTA and its outline twin) */
.bacx-cta { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 46px; padding: 0 22px; border-radius: 3px;
  background: var(--bacx-cta); color: #fff; font: 400 12px/1 var(--bacx-disp); letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; }
.bacx-cta:hover { background: #e62b00; }
.bacx-cta[disabled], .bacx-cta[aria-disabled="true"] { background: var(--bacx-off-bg); color: var(--bacx-off-ink); box-shadow: inset 0 0 0 1px var(--bacx-off-line); cursor: not-allowed; }
.bacx-cta--full { width: 100%; }
.bacx-btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 42px; padding: 0 14px; border-radius: 3px;
  border: 1px solid var(--bacx-line2); background: var(--bacx-panel); color: var(--bacx-ink); font: 500 10px/1 var(--bacx-mono); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
html[data-theme="light"] .bacx-btn { border-color: var(--bacx-ctl); }
.bacx-icon { width: 15px; height: 15px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.bacx-close { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--bacx-ctl); display: flex; align-items: center; justify-content: center; flex: none; }

/* ------------------------------------------------------------------ segmented choices (the product page's .ppx-lseg language) */
.bacx-seg { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 8px; }
.bacx-seg__opt { min-height: 46px; border: 1px solid var(--bacx-ctl); border-radius: 3px; background: var(--bacx-panel2); display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 4px; text-align: center; font: 600 14px/1.1 var(--bacx-body); color: var(--bacx-ink2); padding: 6px; }
.bacx-seg__opt small { font: 500 10px/1 var(--bacx-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--bacx-label); }
.bacx-seg__opt[aria-pressed="true"] { border-color: var(--bacx-red); background: var(--bacx-red-wash); color: var(--bacx-sel); }
.bacx-seg__opt[aria-pressed="true"] small { color: var(--bacx-sel); }

/* ------------------------------------------------------------------ the STEP panel (Dual / Tri / Full) */
.bacx-step { border: 1px solid var(--bacx-line); border-radius: 5px; background: var(--bacx-panel); padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
html[data-theme="light"] .bacx-step { border-color: var(--bacx-line2); }
.bacx-step__head { display: flex; align-items: baseline; gap: 10px; white-space: nowrap; }
.bacx-step__n { font: 400 9.5px/1 var(--bacx-disp); letter-spacing: .12em; text-transform: uppercase; color: var(--bacx-red-text); }
.bacx-step__t { font: 400 11px/1 var(--bacx-disp); letter-spacing: .1em; text-transform: uppercase; color: var(--bacx-ink); }
.bacx-step__side { margin-left: auto; font: 500 10px/1 var(--bacx-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--bacx-label); overflow: hidden; text-overflow: ellipsis; }
.bacx-levels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.bacx-level { min-height: 58px; border: 1px solid var(--bacx-ctl); border-radius: 3px; background: var(--bacx-panel2); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-align: center; }
.bacx-level__n { font: 600 13px/1 var(--bacx-body); color: var(--bacx-ink2); }
.bacx-level__p { font: 700 15px/1 var(--bacx-mono); color: var(--bacx-ink2); font-variant-numeric: tabular-nums; }
.bacx-level[aria-pressed="true"] { border-color: var(--bacx-red); background: var(--bacx-red-wash); }
.bacx-level[aria-pressed="true"] .bacx-level__n, .bacx-level[aria-pressed="true"] .bacx-level__p { color: var(--bacx-sel); }
.bacx-levels.is-blocked { outline: 1px solid var(--bacx-amber-line); outline-offset: 5px; border-radius: 4px; }

/* ------------------------------------------------------------------ product cards (the /products card) */
.bacx-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.bacx-card { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.bacx-card__media { position: relative; aspect-ratio: 16 / 10; border-radius: 12px; overflow: hidden; background: #000; }
html[data-theme="light"] .bacx-card__media { background: var(--fnx-slot, #fbfbfb); box-shadow: inset 0 0 0 1px var(--bacx-line); }
.bacx-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bacx-card[aria-pressed="true"] .bacx-card__media { box-shadow: 0 0 0 2px var(--bacx-red); }
.bacx-card__check { position: absolute; right: 8px; top: 8px; width: 20px; height: 20px; border-radius: 50%; background: var(--bacx-red); color: #fff; display: none; align-items: center; justify-content: center; }
.bacx-card[aria-pressed="true"] .bacx-card__check { display: flex; }
.bacx-card__row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 0 2px; }
.bacx-card__name { font: 600 14px/1.15 var(--bacx-oswald); letter-spacing: .02em; text-transform: uppercase; color: var(--bacx-ink); }
.bacx-card[aria-pressed="true"] .bacx-card__name { color: var(--bacx-sel); }
.bacx-card__price { font: 500 12.5px/1 var(--bacx-mono); color: var(--bacx-price); white-space: nowrap; }
.bacx-card__price small { font-size: 10px; color: var(--bacx-dim); }
.bacx-card__sub { font-size: 11px; line-height: 1.35; color: var(--bacx-dim); padding: 0 2px; }

/* ------------------------------------------------------------------ the vehicle stage (a kept-dark window in both themes) */
.bacx-stage { position: relative; overflow: hidden; border-radius: 8px; border: 1px solid var(--bacx-line); background: var(--bacx-studio); }
html[data-theme="light"] .bacx-stage { border-color: var(--bacx-line2); }
/* the frame is the 2048 x 1536 render: spots are % of it, so they scale with the photo */
.bacx-stage__frame { position: absolute; top: var(--bacx-ft, 0); bottom: var(--bacx-fb, 0); left: 50%; aspect-ratio: 4 / 3; transform: translateX(-50%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%), linear-gradient(180deg, transparent 0, #000 5%, #000 95%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%), linear-gradient(180deg, transparent 0, #000 5%, #000 95%, transparent 100%);
          mask-composite: intersect; }
/* the base, then one .bacx-stage__layer per placed product, stacked at 0,0 in source order (all 2048 x 1536) */
.bacx-stage__frame > img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.bacx-stage__layer { pointer-events: none; }
.bacx-stage__spots { position: absolute; top: var(--bacx-ft, 0); bottom: var(--bacx-fb, 0); left: 50%; aspect-ratio: 4 / 3; transform: translateX(-50%); }
.bacx-builder.is-drawer-open .bacx-stage__frame, .bacx-builder.is-drawer-open .bacx-stage__spots { left: calc((100% - var(--bacx-drawer-w) - 32px) / 2); }

/* spots: added (quiet white dot), empty (ring with +), needs a choice (amber), open (red ring), blocked (amber double ring) */
.bacx-spot { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); width: 10px; height: 10px; border-radius: 50%;
  background: #f0efec; box-shadow: 0 0 0 2px rgba(8, 9, 12, .55), 0 0 10px rgba(240, 239, 236, .35); }
.bacx-spot::after { content: ''; position: absolute; inset: -17px; border-radius: 50%; }   /* a 44px touch target */
.bacx-spot--empty { width: 20px; height: 20px; background: rgba(8, 9, 12, .5); box-shadow: inset 0 0 0 1.5px rgba(240, 239, 236, .7); }
.bacx-spot--empty::before { content: '+'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #f0efec; font: 400 15px/1 var(--bacx-body); }
.bacx-spot--pending { width: 12px; height: 12px; background: #f5b400; box-shadow: 0 0 0 2px rgba(8, 9, 12, .55), 0 0 12px rgba(245, 180, 0, .6); }
.bacx-spot--open { width: 40px; height: 40px; background: rgba(234, 48, 0, .14); box-shadow: inset 0 0 0 2px #ea3000, 0 0 0 4px rgba(234, 48, 0, .16); }
.bacx-spot--open::before { content: ''; position: absolute; left: 14px; top: 14px; width: 12px; height: 12px; border-radius: 50%; background: var(--dot, #f5b400); }
.bacx-spot--blocked { width: 40px; height: 40px; background: rgba(245, 180, 0, .16); box-shadow: inset 0 0 0 2px #f5b400, 0 0 0 11px rgba(245, 180, 0, .0), 0 0 0 12px rgba(245, 180, 0, .45); }
.bacx-spot--blocked::before { content: ''; position: absolute; left: 14px; top: 14px; width: 12px; height: 12px; border-radius: 50%; background: #f5b400; }
.bacx-spot__label { position: absolute; left: calc(100% + 8px); top: 50%; transform: translateY(-50%); white-space: nowrap; pointer-events: none;
  font: 500 10px/1 var(--bacx-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--bacx-win-ink);
  background: var(--bacx-win-chip); border: 1px solid var(--bacx-win-line); border-radius: 3px; padding: 6px 9px; }
.bacx-spot__label em { font-style: normal; color: #f5b400; }

/* chips and toggles that sit on the stage */
.bacx-chip { display: inline-block; white-space: nowrap; font: 500 10px/1 var(--bacx-mono); letter-spacing: .12em; text-transform: uppercase;
  color: var(--bacx-win-ink); background: var(--bacx-win-chip); border: 1px solid var(--bacx-win-line); border-radius: 3px; padding: 6px 9px; }
.bacx-toggle { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: 4px; background: var(--bacx-win-chip); border: 1px solid var(--bacx-win-line); }
.bacx-toggle__label { padding: 0 6px 0 7px; font: 500 10px/1 var(--bacx-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--bacx-win-ink2); }
.bacx-toggle__opt { height: 26px; padding: 0 10px; border-radius: 2px; font: 500 10px/1 var(--bacx-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--bacx-win-ink2); }
.bacx-toggle__opt[aria-pressed="true"] { color: #fff; background: rgba(234, 48, 0, .2); box-shadow: inset 0 0 0 1px #ea3000; }
.bacx-toggle__opt.is-pending { color: #f5b400; background: rgba(245, 180, 0, .16); box-shadow: inset 0 0 0 1px #f5b400; }
.bacx-stage__controls { position: absolute; left: 24px; bottom: 22px; display: flex; align-items: center; gap: 10px; z-index: 3; }

/* the page title rides the stage on desktop and sits above it on phones */
.bacx-title { position: absolute; left: 40px; top: calc(16px + 20px); z-index: 4; display: flex; flex-direction: column; gap: 7px; pointer-events: none; }
.bacx-title a, .bacx-title button { pointer-events: auto; }
.bacx-title__crumb { font: 500 10px/1 var(--bacx-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--bacx-win-ink2); }
.bacx-title__name { font: 400 20px/1.1 var(--bacx-disp); letter-spacing: .03em; text-transform: uppercase; color: #fff; }
.bacx-title__sub { font: 400 12.5px/1.3 var(--bacx-body); color: var(--bacx-win-ink2); }
.bacx-title__sub a { color: var(--bacx-win-ink); text-underline-offset: 3px; }

/* ------------------------------------------------------------------ the builder shell */
.bacx-builder { position: relative; display: grid; grid-template-rows: minmax(0, 1fr) var(--bacx-dock-h); height: calc(100vh - var(--bacx-header)); min-height: 700px; }
/* The render is inset from the stage's top and bottom, so the roof bar clears the title and the tyres clear the livery and
   push bumper toggles (Ale 2026-10-01). --bacx-ft / --bacx-fb are the insets, --bacx-fh the render's height.
   The backdrop is the render's own edge colours, row by row: --bacx-backdrop is laid over exactly the render's box, so its
   stops are plain percentages of the render, and --bacx-wall / --bacx-floor fill the strips above and below it. */
.bacx-builder > .bacx-stage { margin: 16px 16px 16px;
  --bacx-ft: 44px; --bacx-fb: 28px; --bacx-fh: calc(100% - var(--bacx-ft) - var(--bacx-fb));
  background: var(--bacx-backdrop) 0 var(--bacx-ft) / 100% var(--bacx-fh) no-repeat,
    linear-gradient(180deg, var(--bacx-wall) var(--bacx-ft), var(--bacx-floor) var(--bacx-ft)); }
/* Backdrops sampled 2026-10-01 off the staging bases (/images/build-concept/v7/<vehicle>/<view>/base-bumper-on.webp; bumper
   off matches within 8 levels): the left and right 2.5% strips, averaged per row, fitted within 3.5 levels. The house studio
   is one grey wall over a light floor, but the floor line sits on a different row per vehicle, so each base gets its own,
   picked by its file path. Re-sample when a base is re-rendered (uiux-source/make_backdrops.py). */
/* front, any vehicle: the fallback where :has() isn't supported */
.bacx-builder > .bacx-stage {
  --bacx-wall: #3e3d44; --bacx-floor: #dbdadd;
  --bacx-backdrop: linear-gradient(180deg, #3e3d44 0%, #3f3f46 21.6%, #48474e 43%, #45464c 54.4%, #403f44 64.3%, #56555a 68.1%, #6c6b71 70.3%, #8e8d92 72.6%, #b0afb4 73.9%, #bebdc2 74.6%, #cbcace 75.7%, #d1d1d4 76.9%, #d7d7d9 79.2%, #d8d8da 83.4%, #d1d0d3 92.4%, #dbdadd 100%); }
/* side, any vehicle: the fallback where :has() isn't supported */
.bacx-builder > .bacx-stage[data-view="side"] {
  --bacx-wall: #424049; --bacx-floor: #7d7c81;
  --bacx-backdrop: linear-gradient(180deg, #424049 0%, #4a4852 33%, #525159 45%, #515057 54.9%, #49484f 60.9%, #5c5b62 63%, #77767d 64.7%, #89888e 65.4%, #a5a4a9 66%, #b2b1b6 66.4%, #c2c1c5 67.4%, #d1d1d3 70.4%, #d0d0d2 73%, #d5d4d7 74%, #dad9dc 79%, #d6d6d8 81.1%, #c9c9cb 83.6%, #b5b4b9 85.7%, #9b9a9f 87.4%, #96959a 88.1%, #7d7c81 100%); }
/* rear, any vehicle: the fallback where :has() isn't supported */
.bacx-builder > .bacx-stage[data-view="rear"] {
  --bacx-wall: #48474f; --bacx-floor: #d7d7d8;
  --bacx-backdrop: linear-gradient(180deg, #48474f 0%, #4b4a53 23.6%, #54525a 42%, #535259 53.9%, #4a4950 64%, #57565d 66.5%, #6d6c73 69.3%, #7b7a81 69.5%, #adacb1 70%, #b5b5ba 70.4%, #b0afb4 73.7%, #bfbfc3 76.7%, #cdcdcf 78.4%, #d2d2d4 81%, #d7d7d8 100%); }
.bacx-builder > .bacx-stage:has(.bacx-stage__base[src*="/chevy-silverado-2021-2025/front/"]) {
  --bacx-wall: #3e3d44; --bacx-floor: #dbdadd;
  --bacx-backdrop: linear-gradient(180deg, #3e3d44 0%, #3f3f46 21.6%, #47474e 43.5%, #45454c 54.9%, #403f44 64.3%, #56555a 68.1%, #6c6b71 70.3%, #8f8e93 72.7%, #b0afb4 73.9%, #bfbec3 74.7%, #cbcacd 75.7%, #d1d1d4 76.9%, #d6d6d8 79%, #d8d8da 83.6%, #cecdd0 93%, #dbdadd 100%); }
.bacx-builder > .bacx-stage:has(.bacx-stage__base[src*="/chevy-silverado-2021-2025/side/"]) {
  --bacx-wall: #424049; --bacx-floor: #76757a;
  --bacx-backdrop: linear-gradient(180deg, #424049 0%, #4a4852 34.1%, #525159 45.1%, #515057 54.9%, #49484f 60.9%, #5c5b62 63%, #77767d 64.7%, #89888e 65.4%, #a5a4a9 66%, #b2b1b6 66.4%, #c2c1c5 67.4%, #d1d1d3 70.4%, #d1d1d3 71.1%, #c8c8cb 72%, #d5d4d7 74%, #dad9dc 79%, #d6d6d8 81.1%, #c9c9cb 83.6%, #b5b4b9 85.7%, #99989d 87.5%, #939397 88.3%, #808084 94.6%, #76757a 100%); }
.bacx-builder > .bacx-stage:has(.bacx-stage__base[src*="/chevy-silverado-2021-2025/rear/"]) {
  --bacx-wall: #48474f; --bacx-floor: #d7d7d8;
  --bacx-backdrop: linear-gradient(180deg, #48474f 0%, #4b4a53 23.6%, #54525b 41.4%, #535259 53.9%, #4a4950 64%, #57565d 66.5%, #6d6c73 69.3%, #7b7a80 69.5%, #adacb1 70%, #b6b5ba 70.5%, #b0afb4 73.7%, #bebdc1 76.4%, #cdcdcf 78.4%, #d5d5d7 84.2%, #d7d7d8 100%); }
.bacx-builder > .bacx-stage:has(.bacx-stage__base[src*="/chevy-tahoe-2021-2025/front/"]) {
  --bacx-wall: #3e3d44; --bacx-floor: #dbdadd;
  --bacx-backdrop: linear-gradient(180deg, #3e3d44 0%, #3f3f46 21.6%, #48474e 43%, #45454b 55.4%, #403f44 64.3%, #56555a 68.1%, #6c6b71 70.3%, #8e8d92 72.6%, #b0afb4 73.9%, #bebdc2 74.6%, #cbcace 75.7%, #d1d1d4 76.9%, #d7d7d9 79.2%, #d8d8da 83.6%, #d1d0d3 92.4%, #dbdadd 100%); }
.bacx-builder > .bacx-stage:has(.bacx-stage__base[src*="/chevy-tahoe-2021-2025/side/"]) {
  --bacx-wall: #424049; --bacx-floor: #87868b;
  --bacx-backdrop: linear-gradient(180deg, #424049 0%, #4a4852 33%, #514f58 42.2%, #515057 54.9%, #48474e 61.3%, #58575e 63.3%, #717077 65.1%, #86858c 66.3%, #a7a6ab 67%, #b5b5b9 67.4%, #c4c4c7 68.5%, #d2d2d4 72.1%, #d1d1d3 72.9%, #c6c6c9 74%, #d5d4d7 75.8%, #dbdadd 82.1%, #dad9dc 84.6%, #ceced0 87.8%, #b8b7bc 90.9%, #97969b 93.8%, #87868b 100%); }
.bacx-builder > .bacx-stage:has(.bacx-stage__base[src*="/chevy-tahoe-2021-2025/rear/"]) {
  --bacx-wall: #48474f; --bacx-floor: #d7d7d8;
  --bacx-backdrop: linear-gradient(180deg, #48474f 0%, #4b4a53 23.6%, #53515b 37.8%, #535259 53.9%, #4a4950 64%, #57565e 66.6%, #6d6c73 69.3%, #7b7a81 69.5%, #adacb1 70%, #b5b5ba 70.4%, #b0afb4 73.7%, #bfbfc3 76.7%, #cdcdcf 78.4%, #d2d2d4 81%, #d7d7d8 100%); }
.bacx-builder > .bacx-stage:has(.bacx-stage__base[src*="/dodge-charger-2015-2025/front/"]) {
  --bacx-wall: #403f46; --bacx-floor: #eae9ec;
  --bacx-backdrop: linear-gradient(180deg, #403f46 0%, #48474e 47.1%, #403f44 61.4%, #555459 64.4%, #6b6a70 66.4%, #8c8b90 68.5%, #adacb1 69.6%, #c2c1c5 70.5%, #cdccd0 71.5%, #d3d3d5 72.7%, #dad9dc 78.4%, #d2d2d4 85.5%, #d4d3d6 92.4%, #dbdadd 96.4%, #eae9ec 100%); }
.bacx-builder > .bacx-stage:has(.bacx-stage__base[src*="/dodge-charger-2015-2025/side/"]) {
  --bacx-wall: #43424a; --bacx-floor: #7d7c81;
  --bacx-backdrop: linear-gradient(180deg, #43424a 0%, #4a4852 28.9%, #515059 39.8%, #515158 52.8%, #49474f 58.8%, #58575e 60.5%, #727178 62%, #87868c 62.9%, #b5b5ba 63.8%, #c5c5c8 64.8%, #d2d2d4 67.5%, #ceced0 69.6%, #d7d6d9 70.9%, #dcdbde 76.4%, #dbdadd 79.5%, #cdcdcf 82.3%, #bfbec2 84.4%, #9a9a9e 87.4%, #959499 88.3%, #7d7c81 100%); }
.bacx-builder > .bacx-stage:has(.bacx-stage__base[src*="/dodge-charger-2015-2025/rear/"]) {
  --bacx-wall: #494851; --bacx-floor: #d5d5d7;
  --bacx-backdrop: linear-gradient(180deg, #494851 0%, #4b4a53 19%, #54525a 38.8%, #535159 51.8%, #4a4950 61.2%, #59585f 63.6%, #6d6c73 65.7%, #7e7d83 65.9%, #aeadb2 66.3%, #b5b5b9 66.4%, #b9b8bd 66.7%, #b1b0b5 69.5%, #b9b9bd 71.3%, #c8c7ca 72.2%, #ccccce 73%, #d5d5d7 77.9%, #dad9dc 88.6%, #d5d5d7 100%); }
.bacx-pills { display: none; }

/* the side list: opens on a spot, floats over the stage, hugs its content */
.bacx-drawer { position: absolute; top: 32px; right: 32px; width: var(--bacx-drawer-w); max-height: calc(100% - var(--bacx-dock-h) - 48px); overflow: auto; z-index: 6;
  padding: 20px; border-radius: 8px; background: var(--bacx-panel); border: 1px solid var(--bacx-line2); box-shadow: var(--bacx-shadow);
  display: flex; flex-direction: column; gap: 16px; }
.bacx-drawer__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.bacx-drawer__head > div { display: flex; flex-direction: column; gap: 7px; }
.bacx-drawer__grab { display: none; }

/* the dock: timeline, running total, the one action */
.bacx-dock { position: relative; display: flex; align-items: center; gap: 24px; padding: 0 24px; background: var(--bacx-dock); border-top: 1px solid var(--bacx-line2); }
.bacx-timeline { flex: 1; min-width: 0; display: flex; align-items: flex-start; list-style: none; margin: 0; padding: 0; }
.bacx-tl-group { display: flex; flex-direction: column; gap: 6px; }
.bacx-tl-group__label { font: 500 9px/1 var(--bacx-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--bacx-label); padding-left: 26px; height: 9px; }
.bacx-tl-group ol { display: flex; list-style: none; margin: 0; padding: 0; }
.bacx-tl-group--closed { padding-top: 15px; }
.bacx-tl-item { position: relative; width: 90px; display: flex; justify-content: center; }
.bacx-tl-item::before { content: ''; position: absolute; top: 6px; left: 50%; width: 90px; height: 2px; background: var(--bacx-line2); }
.bacx-tl-item.is-done::before { background: var(--bacx-red); }
.bacx-timeline > li:last-child .bacx-tl-item:last-child::before { display: none; }
.bacx-node { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; font: 600 11px/1.2 var(--bacx-body); color: var(--bacx-ink2); white-space: nowrap; }
.bacx-node__dot { width: 12px; height: 12px; border-radius: 50%; background: var(--bacx-red); box-shadow: 0 0 0 6px transparent; }
.bacx-node--empty .bacx-node__dot { background: var(--bacx-panel); box-shadow: inset 0 0 0 2px var(--bacx-ctl); }
.bacx-node--empty { color: var(--bacx-dim); }
.bacx-node--pending .bacx-node__dot { background: var(--bacx-amber); }
.bacx-node--pending { color: var(--bacx-amber-ink); }
.bacx-node--todo .bacx-node__dot { width: 8px; height: 8px; margin: 2px 0; background: var(--bacx-line2); }
.bacx-node--todo { color: var(--bacx-label); }
.bacx-node[aria-current="step"] { color: var(--bacx-ink); font-weight: 700; }
.bacx-node[aria-current="step"] .bacx-node__dot { box-shadow: 0 0 0 4px var(--bacx-dock), 0 0 0 6px var(--bacx-red); }
.bacx-node.is-locked { color: var(--bacx-amber-ink); }
.bacx-node.is-locked .bacx-node__dot { box-shadow: 0 0 0 4px var(--bacx-dock), 0 0 0 6px var(--bacx-amber); }
.bacx-total { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.bacx-total__amount { font: 400 22px/1 var(--bacx-disp); color: var(--bacx-sel); font-variant-numeric: tabular-nums; white-space: nowrap; }
.bacx-total__sub { display: inline-flex; align-items: center; gap: 4px; font: 500 9.5px/1 var(--bacx-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--bacx-label); white-space: nowrap; }
.bacx-total__sub em { font-style: normal; color: var(--bacx-amber-ink); }
.bacx-total__sub[aria-expanded="true"] { text-decoration: underline; text-underline-offset: 3px; }
.bacx-dock .bacx-cta { min-width: 190px; }

/* popovers (blocked, push bumper) and the toast */
.bacx-pop { position: absolute; left: var(--pop-x, auto); bottom: var(--pop-bottom, auto); z-index: 8; width: 420px; padding: 18px; border-radius: 8px; background: var(--bacx-panel); border: 1px solid var(--bacx-amber-line);
  box-shadow: var(--bacx-shadow); display: flex; flex-direction: column; gap: 12px; }
.bacx-pop__head { display: flex; align-items: center; gap: 10px; color: var(--bacx-amber-ink); }
.bacx-pop__head h2 { font: 400 11.5px/1.15 var(--bacx-disp); letter-spacing: .12em; text-transform: uppercase; color: var(--bacx-ink); }
.bacx-pop__arrow { position: absolute; bottom: -8px; left: var(--ax, 50%); width: 14px; height: 14px; margin-left: -7px; background: var(--bacx-panel);
  border-right: 1px solid var(--bacx-amber-line); border-bottom: 1px solid var(--bacx-amber-line); transform: rotate(45deg); }
.bacx-pop__btns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.bacx-toast { position: absolute; left: var(--toast-x, auto); bottom: var(--toast-bottom, auto); z-index: 9; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 8px; background: var(--bacx-panel);
  border: 1px solid var(--bacx-line2); box-shadow: var(--bacx-shadow); font: 500 13px/1.35 var(--bacx-body); color: var(--bacx-ink); }
.bacx-toast .bacx-link { margin-left: auto; color: var(--bacx-red-text); text-decoration: none; }

/* rows: the summary, the push bumper list, Your build */
.bacx-rows { display: flex; flex-direction: column; }
.bacx-row { display: flex; align-items: baseline; gap: 10px; padding: 8px 0; border-top: 1px solid var(--bacx-line); }
.bacx-row__area { width: 128px; flex: none; font-size: 11px; line-height: 1.3; color: var(--bacx-dim); }
.bacx-row__what { font: 500 12.5px/1.3 var(--bacx-body); color: var(--bacx-ink); }
.bacx-row__what--none { font-weight: 400; color: var(--bacx-dim); }
.bacx-row__price { margin-left: auto; font: 500 12px/1 var(--bacx-mono); color: var(--bacx-sel); white-space: nowrap; }
.bacx-view { display: flex; flex-direction: column; gap: 5px; padding: 11px 0; border-top: 1px solid var(--bacx-line); }
.bacx-view__head { display: flex; align-items: baseline; gap: 10px; }
.bacx-view__name { font: 400 11px/1 var(--bacx-disp); letter-spacing: .1em; text-transform: uppercase; color: var(--bacx-ink); }
.bacx-view__count { font: 500 10px/1 var(--bacx-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--bacx-label); }
.bacx-view__items { font-size: 11.5px; line-height: 1.45; color: var(--bacx-dim); }
.bacx-thumbrow { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-top: 1px solid var(--bacx-line); }
.bacx-thumbrow img { width: 60px; height: 38px; border-radius: 4px; object-fit: cover; background: #000; flex: none; }
.bacx-thumbrow__name { font: 600 14px/1.1 var(--bacx-oswald); letter-spacing: .02em; text-transform: uppercase; color: var(--bacx-ink); }
.bacx-stepper { display: inline-flex; border: 1px solid var(--bacx-ctl); border-radius: 3px; overflow: hidden; }
.bacx-stepper button { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; background: var(--bacx-panel); }
.bacx-stepper output { min-width: 40px; display: flex; align-items: center; justify-content: center; font: 500 13px/1 var(--bacx-mono); color: var(--bacx-sel);
  border-left: 1px solid var(--bacx-ctl); border-right: 1px solid var(--bacx-ctl); background: var(--bacx-page); }
.bacx-code { display: inline-flex; align-items: center; height: 28px; padding: 0 10px; border: 1px solid var(--bacx-line2); border-radius: 3px; background: var(--bacx-page);
  font: 500 11.5px/1 var(--bacx-mono); letter-spacing: .06em; color: var(--bacx-ink); }
.bacx-split { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.bacx-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }

/* ------------------------------------------------------------------ Live Flash */
.bacx-flash { display: flex; align-items: center; gap: 14px; padding: 8px 14px; border-radius: 6px; background: var(--bacx-win-chip); border: 1px solid var(--bacx-win-line); width: max-content; }
.bacx-flash__label { font: 500 10px/1 var(--bacx-mono); letter-spacing: .16em; text-transform: uppercase; color: #ff5a3c; }
.bacx-flash__sep { width: 1px; height: 22px; background: rgba(255, 255, 255, .16); }
.bacx-flash__name { min-width: 120px; text-align: center; font: 400 12px/1 var(--bacx-disp); letter-spacing: .1em; text-transform: uppercase; color: #fff; }
.bacx-flash__nav { width: 28px; height: 28px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .22); display: flex; align-items: center; justify-content: center; color: var(--bacx-win-ink); }
.bacx-flash__all { display: flex; align-items: center; gap: 6px; font: 500 10px/1 var(--bacx-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--bacx-win-ink); }
.bacx-switch { display: flex; align-items: center; gap: 8px; font: 500 10px/1 var(--bacx-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--bacx-win-ink); }
.bacx-switch__track { position: relative; width: 34px; height: 18px; border-radius: 9px; background: rgba(255, 255, 255, .18); }
.bacx-switch__track::after { content: ''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; }
.bacx-switch[aria-checked="true"] .bacx-switch__track { background: #ea3000; }
.bacx-switch[aria-checked="true"] .bacx-switch__track::after { left: auto; right: 2px; }
.bacx-patterns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.bacx-pattern { min-height: 34px; display: flex; align-items: center; gap: 9px; padding: 0 10px; border-radius: 4px; border: 1px solid var(--bacx-ctl); background: var(--bacx-panel2);
  font: 500 11.5px/1.1 var(--bacx-body); color: var(--bacx-ink2); white-space: nowrap; overflow: hidden; }
.bacx-pattern[aria-pressed="true"] { border-color: var(--bacx-red); background: var(--bacx-red-wash); color: var(--bacx-sel); font-weight: 600; }
.bacx-glyph { display: flex; gap: 2px; flex: none; }
.bacx-glyph i { width: 4px; height: 12px; border-radius: 1px; background: #ea3000; }
.bacx-glyph i:nth-child(n+4) { background: #2f63ff; }
.bacx-swatches { display: flex; gap: 8px; }
.bacx-swatch { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--bacx-ctl); display: flex; align-items: center; justify-content: center; }
.bacx-swatch i { width: 16px; height: 16px; border-radius: 50%; background: var(--c); opacity: .35; }
.bacx-swatch[aria-pressed="true"] { border-color: var(--bacx-sel); }
.bacx-swatch[aria-pressed="true"] i { opacity: 1; }

/* ------------------------------------------------------------------ landing (welcome, welcome back) and "Which one is it?" */
.bacx-landing { padding: 24px 32px 48px; width: 100%; box-sizing: border-box; max-width: 1280px; margin: 0 auto; display: flex; flex-direction: column; gap: 24px; }
.bacx-landing__top { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.bacx-landing__top > div { display: flex; flex-direction: column; gap: 8px; }
.bacx-hero { display: flex; gap: 24px; align-items: center; padding: 18px; border-radius: 12px; background: var(--bacx-panel); border: 1px solid var(--bacx-line); }
html[data-theme="light"] .bacx-hero { border-color: var(--bacx-line2); }
.bacx-hero__media { position: relative; width: 276px; height: 156px; border-radius: 8px; overflow: hidden; flex: none; background: var(--bacx-studio); }
.bacx-hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; transform: scale(1.35); }
/* An image already cropped to the card (the How it works build) is shown whole. */
.bacx-hero__media img.is-framed { object-position: 50% 50%; transform: none; }
.bacx-hero__media .bacx-chip { position: absolute; left: 10px; bottom: 10px; }
.bacx-hero__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.bacx-hero__title { font: 700 24px/1.05 var(--bacx-oswald); letter-spacing: .02em; text-transform: uppercase; color: var(--bacx-sel); }
.bacx-hero__steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; list-style: none; margin: 0; padding: 0; }
.bacx-hero__steps li { display: flex; flex-direction: column; gap: 6px; padding-left: 16px; border-left: 1px solid var(--bacx-line); }
.bacx-hero__steps b { font: 400 11px/1.1 var(--bacx-disp); letter-spacing: .1em; text-transform: uppercase; color: var(--bacx-ink); }
.bacx-hero__steps b span { color: var(--bacx-red-text); margin-right: 8px; }
.bacx-hero__steps p { font-size: 12.5px; line-height: 1.45; color: var(--bacx-dim); }
.bacx-hero__meta { font: 500 11px/1.3 var(--bacx-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--bacx-label); }
.bacx-hero__actions { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.bacx-types { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 17px; }
.bacx-type { display: flex; flex-direction: column; gap: 12px; text-decoration: none; }
.bacx-type__media { position: relative; aspect-ratio: 394 / 236; border-radius: 12px; overflow: hidden; background: linear-gradient(180deg, #333338, #3c3b40 60%, #4a494c); }
.bacx-type__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 52%; transform: scale(1.06); }
.bacx-type__count { position: absolute; left: 14px; top: 12px; font: 500 10px/1 var(--bacx-mono); letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .8); }
.bacx-type__row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 0 2px; }
.bacx-type__name { font: 600 26px/1 var(--bacx-oswald); letter-spacing: .04em; text-transform: uppercase; color: var(--bacx-sel); }
.bacx-type__go { display: inline-flex; align-items: center; gap: 6px; font: 500 10px/1 var(--bacx-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--bacx-red-text); }
.bacx-type__models { font-size: 12.5px; line-height: 1.4; color: var(--bacx-dim); padding: 0 2px; }

.bacx-vehicle { display: grid; grid-template-columns: 452px minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) var(--bacx-dock-h); column-gap: 28px;
  height: calc(100vh - var(--bacx-header)); min-height: 700px; }
.bacx-vehicle__head { grid-area: 1 / 1; padding: 28px 0 0 32px; display: flex; flex-direction: column; gap: 10px; }
.bacx-vehicle__options { grid-area: 2 / 1; padding: 20px 0 24px 32px; display: flex; flex-direction: column; gap: 20px; overflow: auto; }
.bacx-vehicle__stage { grid-area: 1 / 2 / 3 / 3; margin: 16px 16px 16px 0; }
.bacx-vehicle__stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 55% 52%; }
.bacx-vehicle__stage .bacx-title { left: 22px; top: 20px; }
.bacx-vehicle .bacx-dock { grid-area: 3 / 1 / 4 / 3; justify-content: space-between; }
.bacx-group { display: flex; flex-direction: column; gap: 8px; }
.bacx-question { font: 600 14px/1.3 var(--bacx-body); color: var(--bacx-ink); }
.bacx-pickchip { display: inline-flex; align-items: center; gap: 12px; }
.bacx-pickchip span { font: 500 10px/1 var(--bacx-mono); letter-spacing: .14em; text-transform: uppercase; padding: 6px 10px; border: 1px solid var(--bacx-ctl); border-radius: 3px; }

/* ==================================================================== phones and small tablets */
@media (max-width: 980px) {
  .bacx { --bacx-header: 64px; --bacx-dock-h: 88px; }
  .bacx-h1 { font-size: 28px; line-height: 1.05; }

  /* landing */
  .bacx-landing { padding: 14px 16px 32px; gap: 16px; }
  .bacx-landing__top .bacx-link { display: none; }
  .bacx-hero { flex-direction: column; align-items: stretch; gap: 12px; padding: 14px; }
  .bacx-hero__media { width: 100%; height: 128px; }
  .bacx-hero__title { font-size: 17px; }
  .bacx-hero__steps { grid-template-columns: 1fr; gap: 7px; }
  .bacx-hero__steps li { flex-direction: row; gap: 10px; padding-left: 0; border-left: 0; }
  .bacx-hero__steps b { white-space: nowrap; }
  .bacx-hero__actions { margin-left: 0; align-items: stretch; }
  .bacx-hero__actions .bacx-cta { width: 100%; }
  .bacx-hero__actions .bacx-link { align-self: center; }
  .bacx-types { grid-template-columns: 1fr; gap: 8px; }
  .bacx-type { flex-direction: row; gap: 0; height: 100px; border: 1px solid var(--bacx-line); border-radius: 12px; overflow: hidden; background: var(--bacx-panel); }
  .bacx-type__media { width: 160px; aspect-ratio: auto; height: 100%; border-radius: 0; flex: none; }
  .bacx-type__media img { transform: scale(1.12); }
  .bacx-type__count { display: none; }
  .bacx-type__body { display: flex; flex-direction: column; justify-content: center; gap: 5px; padding: 0 12px 0 14px; min-width: 0; }
  .bacx-type__row { padding: 0; }
  .bacx-type__name { font-size: 22px; }
  .bacx-type__go { display: none; }
  .bacx-type__models { font-size: 11px; padding: 0; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

  /* "Which one is it?" */
  .bacx-vehicle { display: flex; flex-direction: column; height: auto; min-height: 0; padding-bottom: 128px; }
  .bacx-vehicle__head { order: 0; padding: 14px 16px 12px; }
  .bacx-vehicle__stage { order: 1; position: relative; margin: 0 16px; height: 176px; flex: none; }
  .bacx-vehicle__options { order: 2; }
  .bacx-vehicle__stage .bacx-title { display: none; }
  .bacx-vehicle__options { padding: 14px 16px; overflow: visible; }
  .bacx-vehicle .bacx-dock { position: fixed; left: 0; right: 0; bottom: 0; height: auto; padding: 12px 16px 16px; flex-direction: column; align-items: stretch; gap: 10px; }
  .bacx-vehicle .bacx-dock .bacx-cta { width: 100%; }

  /* the builder: title line, view pills, the stage, the list as a bottom sheet, a slim dock */
  .bacx-builder { display: block; height: auto; min-height: calc(100vh - var(--bacx-header)); padding-bottom: var(--bacx-dock-h); }
  .bacx-title { position: static; padding: 10px 16px 8px; pointer-events: auto; flex-direction: row; align-items: flex-end; justify-content: space-between; }
  .bacx-title > div { display: flex; flex-direction: column; gap: 6px; }
  .bacx-title__crumb { color: var(--bacx-label); font-size: 10px; }
  .bacx-title__name { color: var(--bacx-sel); font-size: 14px; }
  .bacx-title__sub { display: none; }
  .bacx-title__change { display: inline-flex !important; }
  .bacx-pills { display: flex; gap: 6px; padding: 7px 16px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--bacx-line); }
  .bacx-pill { flex: none; height: 36px; padding: 0 12px; border-radius: 4px; border: 1px solid var(--bacx-line2); background: var(--bacx-panel); display: flex; align-items: center; gap: 8px;
    font: 500 10.5px/1 var(--bacx-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--bacx-ink2); }
  html[data-theme="light"] .bacx-pill { border-color: var(--bacx-ctl); }
  .bacx-pill[aria-current="page"] { border-color: var(--bacx-red); background: var(--bacx-red-wash); color: var(--bacx-sel); }
  .bacx-pill small { font: 500 10px/1 var(--bacx-mono); letter-spacing: .08em; }
  .bacx-pill__flag { width: 7px; height: 7px; border-radius: 50%; background: var(--bacx-amber); }
  .bacx-pill.is-locked { border-color: var(--bacx-amber-line); color: var(--bacx-amber-ink); }
  /* 82% wide and 25px down: the roof bar clears the push bumper toggle along the stage's top */
  .bacx-builder > .bacx-stage { margin: 0; height: 240px; border-radius: 0; border: 0; --bacx-ft: 25px; --bacx-fh: calc(min(82vw, 336px) * .75); }
  /* The stage takes the room between the pills and the dock, so no empty band sits under it (10-01). With no sheet open
     the vehicle sits in the middle of that room; a sheet sends it back to the top, above the sheet. max() keeps it 25px
     down where the stage can't grow (Finalize, short screens), so the roof bar still clears the toggle. In
     background-position, 50% is exactly that centre: (stage - render) / 2. */
  .bacx-builder { display: flex; flex-direction: column; min-height: calc(100svh - var(--bacx-header)); }
  .bacx-builder > .bacx-stage { height: auto; flex: 1 0 240px; }
  .bacx-builder:not(.is-drawer-open) > .bacx-stage { --bacx-ft: max(25px, calc(50% - var(--bacx-fh) / 2)); background-position: 0 max(25px, 50%), 0 0; }
  .bacx-stage__frame, .bacx-stage__spots, .bacx-builder.is-drawer-open .bacx-stage__frame, .bacx-builder.is-drawer-open .bacx-stage__spots {
    left: 50%; top: var(--bacx-ft); bottom: auto; width: min(82%, 336px); height: auto; }
  .bacx-spot { transform: translate(-50%, -50%) scale(.72); }
  .bacx-spot__label { transform: translateY(-50%) scale(1.25); transform-origin: left center; }
  .bacx-spot__note { display: none; } /* the state is on the card or dialog below; a long label would run off the screen */
  .bacx-stage__controls { left: auto; right: 10px; top: 8px; bottom: auto; }
  .bacx-stage__controls [data-role="livery"] { display: none; }
  .bacx-drawer { position: fixed; top: auto; right: 0; left: 0; bottom: var(--bacx-dock-h); width: auto; max-height: min(62vh, 420px);
    border-radius: 14px 14px 0 0; border-width: 1px 0 0; padding: 10px 16px 16px; gap: 12px; }
  .bacx-drawer__grab { display: block; align-self: center; width: 36px; height: 4px; border-radius: 2px; background: var(--bacx-line2); }
  .bacx-drawer .bacx-step { border: 0; padding: 0; background: none; }
  .bacx-level { min-height: 56px; }
  .bacx-dock { position: fixed; left: 0; right: 0; bottom: 0; height: var(--bacx-dock-h); padding: 12px 16px 16px; gap: 12px; }
  .bacx-timeline { display: none; }
  .bacx-total { align-items: flex-start; margin-right: auto; }
  .bacx-total__amount { font: 700 20px/1 var(--bacx-mono); }
  .bacx-total__sub { font-size: 10px; }
  .bacx-dock .bacx-cta { min-width: 150px; min-height: 48px; }
  .bacx-pop { position: fixed; left: 12px; right: 12px; bottom: calc(var(--bacx-dock-h) + 8px); top: auto !important; width: auto; }
  .bacx-pop__arrow { display: none; }
  .bacx-pop__btns { grid-template-columns: 1fr; }
  .bacx-toast { position: fixed; left: 16px; right: 16px; bottom: calc(var(--bacx-dock-h) + 12px); top: auto !important; }
  .bacx-flash { width: auto; flex-wrap: wrap; border-radius: 0; border-width: 1px 0; background: var(--bacx-page); padding: 12px 16px; gap: 10px; }
  .bacx-flash__label, .bacx-switch { color: var(--bacx-ink); }
  .bacx-flash__sep, .bacx-flash__nav { display: none; }
  .bacx-flash__name { display: none; }
  .bacx-flash__rail { display: flex !important; gap: 8px; overflow-x: auto; width: 100%; }
  .bacx-final-panel { position: static !important; width: auto !important; max-height: none !important; box-shadow: none !important; border: 0 !important; border-radius: 0 !important; padding: 12px 16px !important; }
  .bacx-final-flash { position: static !important; }
}
@media (min-width: 981px) {
  .bacx-title__change, .bacx-flash__rail { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .bacx * { transition: none !important; animation: none !important; }
}

/* ==========================================================================
   Site bindings (configure-launch.php, build-launch.php): the few states the
   static package leaves to the page — links styled as buttons, the email and
   build code forms, the busy lock, the added state.
   ========================================================================== */
.bacx a.bacx-cta, .bacx a.bacx-btn { text-decoration: none; }
.bacx-cta.is-added { background: #1f9d55; color: #fff; }
.bacx-builder.is-busy .bacx-cards, .bacx-builder.is-busy .bacx-levels, .bacx-builder.is-busy .bacx-stage__controls { opacity: .6; cursor: progress; }
.bacx-email { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.bacx-email .bacx-label { grid-column: 1 / -1; }
.bacx-email input, .bacx-codeform input { min-height: 42px; padding: 0 12px; border-radius: 3px; border: 1px solid var(--bacx-ctl); background: var(--bacx-panel2); color: var(--bacx-ink); font: 500 13px/1 var(--bacx-body); min-width: 0; }
.bacx-email .bacx-cta { min-height: 42px; }
.bacx-email__msg { grid-column: 1 / -1; font-size: 12px; }
.bacx-email__msg:empty { display: none; }
.bacx-codeform__row { display: grid; grid-template-columns: minmax(0, 320px) auto; gap: 8px; }
.bacx-codeform input { text-transform: uppercase; letter-spacing: .08em; font-family: var(--bacx-mono); }
.bacx-only-phone { display: none; }
.bacx-final-panel { gap: 16px; }
@media (max-width: 980px) {
  .bacx-only-phone { display: inline-flex; }
  .bacx-codeform__row { grid-template-columns: 1fr; }
}
/* the site's own h1/h2/p margins outrank :where(.bacx) — hold them at zero here */
.bacx h1, .bacx h2, .bacx h3, .bacx p { margin: 0; padding: 0; }
.bacx-toast { max-width: calc(100% - 32px); }
.bacx-row .bacx-link { white-space: nowrap; flex: none; }
/* The empty spot's + is drawn, not typed: a font's "+" sits on its baseline with
   uneven side bearings, so it never lands in the ring's exact centre (Ale,
   2026-10-01). It is a vector on the ring's own 20-unit grid, crossing at its
   exact centre (10,10), so it stays symmetrical at any size, any device pixel
   ratio and any sub-pixel spot position; CSS bars 1.5px wide fell on half
   pixels and blurred unevenly. */
.bacx-spot--empty::before { content: ''; font: inherit;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 5.5v9M5.5 10h9' fill='none' stroke='%23f0efec' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
/* Opening or closing a spot's list slides the vehicle into place instead of
   cutting to it (Ale, 2026-10-01). Desktop only: on phones the list is a
   bottom sheet and the frame stays put. The frame and spot layers are kept
   between renders (only their contents are redrawn), so `left` animates. */
@media (min-width: 981px) and (prefers-reduced-motion: no-preference) {
  .bacx-stage__frame, .bacx-stage__spots { transition: left .45s cubic-bezier(.22, .61, .36, 1); }
}
/* The stage around the render is filled from the render's own edges (bacx.js,
   fillStage; Ale 2026-10-01). A canvas behind the frame, under the spots and
   controls; the stage's sampled backdrop stays beneath it as the fallback. */
.bacx-stage__fill { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
/* The builder's title block: crumb, vehicle name and the "Shown on your…" line
   sit inside one wrapper, which the package's gap (on .bacx-title's children)
   never reached, and the margin reset above took their spacing too; they read
   jammed together (Ale, 2026-10-01). Phones already space them (gap 6px). */
@media (min-width: 981px) {
  .bacx-title > div { display: flex; flex-direction: column; gap: 10px; }
}
/* The side view frames a whole vehicle lengthways, so it sat small in the
   stage with empty studio above and below (Ale, 2026-10-01). On desktop it is
   zoomed 1.4x about the vehicle's centre line (53% down the render); the
   studio it crops is empty, and the stage clips it. Spots and layers share
   the frame's box, so they scale with it. */
@media (min-width: 981px) {
  .bacx-builder > .bacx-stage[data-view="side"] { --bacx-sz: 1.4; }
  .bacx-builder > .bacx-stage[data-view="side"] .bacx-stage__frame,
  .bacx-builder > .bacx-stage[data-view="side"] .bacx-stage__spots {
    top: calc(var(--bacx-ft) - (var(--bacx-sz) - 1) * var(--bacx-fh) * .53);
    bottom: calc(var(--bacx-fb) - (var(--bacx-sz) - 1) * var(--bacx-fh) * .47);
  }
}