/* =============================================================================
   BUILD YOUR OWN BELT — builder.css  (al-belt-builder, front end)
   =============================================================================
   Builder-only rules. Composes v3/skin.css: every colour, face, radius, shadow
   and duration is a --al-* token — no raw hex, no new palette (homepage.html
   discipline). Escalation `body.theme-rocket-wc-master …` is used only where
   the skin's own element rules (p margin/colour, h1 scale) would otherwise win,
   each noting what it beats. Breakpoints: 479 / 639 / 781 / 899 / 991 / 1199.

   DOM contract (builder-markup.php + builder.js):
     .al-bb                      the band; .al-bb--js is added by the inline
                                 script and by builder.js init; .al-bb--compact
                                 is toggled on phones when step 1 scrolls away;
                                 .al-bb--2d when the 3D viewer is unavailable;
                                 .al-bb--viewer-ready when the canvas is live.
     .al-bb__nojs                readable option list + phone CTA (JS off)
     .al-bb__app                 the interactive builder (JS on)
     .al-bb__stage               viewer column (sticky), .al-bb__steps column
     --al-bb-top                 live header height, set by builder.js
   ========================================================================== */

/* ---- 0 · Band, JS gate, grid ---------------------------------------------- */
.al-bb { --al-bb-top: 0px; background-color: var(--al-ground-1); }
.al-bb--js .al-bb__nojs { display: none; }
.al-bb:not(.al-bb--js) .al-bb__app { display: none; }
.al-bb .al-bb__head { margin-bottom: var(--al-sp-6); }
.al-bb__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--al-sp-6); align-items: start; }
@media (min-width: 992px) {
  .al-bb__grid { grid-template-columns: 3fr 2fr; gap: clamp(40px, 5vw, 64px); }
  .al-bb .al-bb__head { margin-bottom: var(--al-sp-8); }
}
/* Beats `body.theme-rocket-wc-master p{margin:0 0 16px}` for every p in the
   builder; each block below sets the margins it wants explicitly. */
body.theme-rocket-wc-master .al-bb p { margin: 0; }

/* ---- 1 · Step nav (phones only — three in-page links) --------------------- */
.al-bb__stepnav { margin: 0 0 var(--al-sp-4); }
.al-bb__stepnav ol { display: flex; gap: var(--al-sp-2); list-style: none; margin: 0; padding: 0; }
.al-bb__stepnav li { flex: 1 1 0; margin: 0; }
.al-bb__stepnav a {
  display: flex; align-items: center; justify-content: center; gap: var(--al-sp-2);
  min-height: 44px; padding: var(--al-sp-2) var(--al-sp-3);
  border: var(--al-border); border-radius: var(--al-r-pill);
  background: var(--al-surface-1); color: var(--al-text-mid) !important;
  font-family: var(--al-font-util); font-weight: 600; font-size: var(--al-fs-u-xs);
  letter-spacing: var(--al-ls-u-xs); text-transform: uppercase; text-decoration: none !important;
  transition: color var(--al-t-fast) var(--al-ease), border-color var(--al-t-fast) var(--al-ease);
}
.al-bb__stepnav a:hover { color: var(--al-brass-300) !important; border-color: var(--al-brass-500); }
.al-bb__stepnav a.is-done { border-color: var(--al-brass-500); color: var(--al-brass-300) !important; }
@media (min-width: 992px) { .al-bb__stepnav { display: none; } }

/* ---- 2 · Stage: the 3D belt is the hero ----------------------------------- */
.al-bb__stage {
  position: sticky; top: var(--al-bb-top, 0px); z-index: var(--al-z-base);
  display: flex; flex-direction: column; gap: var(--al-sp-3);
  height: 45vh; height: 45svh; min-height: 200px;   /* svh: the SMALL viewport, so iOS's toolbar never makes the stage over-cover */
  padding-bottom: var(--al-sp-3);
  background-color: var(--al-ground-1);
  transition: height var(--al-t-slow) var(--al-ease);
}
.al-bb--compact .al-bb__stage, .al-bb__stage.is-compact { height: 32vh; height: 32svh; min-height: 170px; }
.al-bb__well {
  flex: 1 1 auto; min-height: 0;
  --al-ratio: auto;                        /* phones: the stage height rules */
  background-color: var(--al-ground-2);    /* the dark well IS the scene ground */
  isolation: isolate;
}
.al-bb__well::after { content: none; }     /* no wash over a live canvas */
@media (min-width: 992px) {
  .al-bb__stage {
    top: calc(var(--al-bb-top, 0px) + 24px);
    height: auto; min-height: 0; padding-bottom: 0;
    transition: none;
  }
  .al-bb--compact .al-bb__stage, .al-bb__stage.is-compact { height: auto; min-height: 0; }
  .al-bb__well { --al-ratio: 4 / 3; aspect-ratio: var(--al-ratio); flex: none; }
}
/* landscape phones (after the base .al-bb__well rule — same specificity, so source order decides): header + a sticky stage + the sticky total bar would cover the whole
   viewport and leave no room for the steps — the stage scrolls with the page instead */
@media (max-width: 991px) and (max-height: 560px) {
  .al-bb__stage, .al-bb--compact .al-bb__stage, .al-bb__stage.is-compact { position: static; height: auto; min-height: 0; }
  .al-bb__well { --al-ratio: 16 / 9; aspect-ratio: var(--al-ratio); flex: none; }
  .al-bb__step { scroll-margin-top: calc(var(--al-bb-top, 0px) + var(--al-sp-5)); }
}

/* a generic viewer's canvas sits directly in the well (viewer360.js styles its
   own .albb-viewer__canvas via viewer360.css) */
.al-bb__well > canvas:not(.albb-viewer__canvas) {
  position: absolute; inset: 0; z-index: 2; display: block; width: 100%; height: 100%;
  touch-action: none; outline-offset: -3px;
  opacity: 0; transition: opacity var(--al-t-slow) var(--al-ease);
}
.al-bb--viewer-ready .al-bb__well > canvas:not(.albb-viewer__canvas) { opacity: 1; }
/* viewer360.css gives its root a brass pool + well shadow; keep our ratio rules */
.al-bb__well.albb-viewer { aspect-ratio: var(--al-ratio); }

/* the 2D pairing card — skeleton, fallback and print view (real photography) */
.al-bb__card {
  position: absolute; inset: 0; z-index: 1;
  display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: minmax(0, 1fr) auto;
  gap: var(--al-sp-3); padding: var(--al-sp-4);
}
.al-bb__card-well { --al-ratio: auto; min-height: 0; height: 100%; }
.al-bb__card-well img { height: 100%; }
.al-bb__card-cap {
  grid-column: 1 / -1;
  font-family: var(--al-font-util); font-weight: 600; font-size: var(--al-fs-u-xs);
  letter-spacing: var(--al-ls-u-xs); text-transform: uppercase; color: var(--al-text-dim);
  text-align: center; line-height: var(--al-lh-tight);
}
.al-bb--viewer-ready .al-bb__card { visibility: hidden; }
/* 2D mode (no WebGL / no Three.js / viewer failed): no sticky stage, the well
   grows to the pairing card, the card is in flow (beats viewer360's absolute
   .albb-viewer__fallback slot when it fell back after starting) */
.al-bb--2d .al-bb__stage { position: static; height: auto; min-height: 0; }
.al-bb--2d .al-bb__well, .al-bb--2d .al-bb__well.albb-viewer { --al-ratio: auto; aspect-ratio: auto; height: auto; min-height: 0; }
.al-bb--2d .al-bb__card, .al-bb--2d .al-bb__well > .albb-viewer__fallback {
  position: static; inset: auto; display: block; padding: var(--al-sp-4); opacity: 1; pointer-events: auto; visibility: visible;
}
.al-bb--2d .al-bb__card > .al-bb__card-well { display: inline-block; width: calc(50% - var(--al-sp-2)); --al-ratio: 1 / 1; aspect-ratio: 1 / 1; height: auto; vertical-align: top; }
.al-bb--2d .al-bb__card > .al-bb__card-well + .al-bb__card-well { margin-left: var(--al-sp-3); }
.al-bb--2d .al-bb__card > .al-bb__card-cap { display: block; margin-top: var(--al-sp-3); }
.al-bb--2d .al-bb__card > .albb-p2d { display: block; }
.al-bb--2d .al-bb__well > .albb-viewer__canvas, .al-bb--2d .al-bb__well > .albb-viewer__chrome, .al-bb--2d .al-bb__well > .albb-viewer__hint, .al-bb--2d .al-bb__well > .albb-viewer__loading { display: none; }
@media print { .al-bb__viewer, .al-bb__chrome, .al-bb__loading { display: none !important; } .al-bb__card { visibility: visible !important; } }

/* loading shimmer — brass tint bar, labelled */
.al-bb__loading {
  position: absolute; left: var(--al-sp-4); right: var(--al-sp-4); bottom: var(--al-sp-4); z-index: 3;
  padding: var(--al-sp-2) var(--al-sp-4);
  background: var(--al-ground-0); border: var(--al-border-hair); border-radius: var(--al-r-ctrl);
  color: var(--al-text-dim); font-family: var(--al-font-util); font-weight: 600;
  font-size: var(--al-fs-u-xs); letter-spacing: var(--al-ls-u-xs); text-transform: uppercase;
  overflow: hidden;
}
.al-bb__loading::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent 0%, var(--al-brass-tint) 50%, transparent 100%);
  transform: translateX(-100%); animation: al-bb-shimmer 1.6s var(--al-ease) infinite;
}
@keyframes al-bb-shimmer { to { transform: translateX(100%); } }
.al-bb__loading[hidden] { display: none; }

/* chrome: bottom-left cluster on ground-0 at 70 % — never over the buckle */
.al-bb__chrome {
  position: absolute; left: var(--al-sp-3); bottom: var(--al-sp-3); z-index: 4;
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--al-sp-2);
  padding: var(--al-sp-2); border-radius: var(--al-r-ctrl);
  background: var(--al-ground-0);                                   /* older-browser fallback */
  background: color-mix(in srgb, var(--al-ground-0) 70%, transparent); /* ground-0 at 70 % */
}
.al-bb__chrome[hidden] { display: none; }
.al-bb .al-bb__chrome-btn, .al-bb button.al-bb__chrome-btn {
  min-height: 44px; min-width: 44px; padding: 10px 14px; gap: var(--al-sp-2);
  font-size: var(--al-fs-u-xs); letter-spacing: var(--al-ls-u-xs);
}
.al-bb__chrome-btn svg { width: 16px; height: 16px; flex: none; }
.al-bb__chrome-btn[aria-pressed="false"] .al-bb__on,
.al-bb__chrome-btn[aria-pressed="true"] .al-bb__off { display: none; }
.al-bb__hint {
  flex: 1 0 100%; order: -1;
  font-family: var(--al-font-util); font-weight: 600; font-size: var(--al-fs-u-xs);
  letter-spacing: var(--al-ls-u-xs); text-transform: uppercase; color: var(--al-brass-300);
  padding: 0 var(--al-sp-2);
  transition: opacity var(--al-t-slow) var(--al-ease);
}
.al-bb__hint[hidden] { display: none; }
.al-bb__hint.is-fading { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .al-bb__spin { display: none; } }
.al-bb__fallback-line { display: none; }
.al-bb--2d .al-bb__chrome, .al-bb--2d .al-bb__loading { display: none; }
.al-bb--2d .al-bb__fallback-line { display: block; }

/* honesty label — under the well, always visible, xs body in text-dim */
body.theme-rocket-wc-master p.al-bb__label {
  flex: none; margin: 0;
  font-size: var(--al-fs-xs); line-height: var(--al-lh-tight); color: var(--al-text-dim);
}
body.theme-rocket-wc-master .al-bb__label strong { color: var(--al-text-mid); font-weight: 500; }
body.theme-rocket-wc-master p.al-bb__note {
  flex: none; margin: 0;
  font-size: var(--al-fs-xs); line-height: var(--al-lh-tight); color: var(--al-text-dim);
}
.al-bb__note:empty { display: none; }
@media (max-width: 991px) {
  /* inside the 45vh stage the label is one line; the note stays but is smaller */
  body.theme-rocket-wc-master p.al-bb__label { font-size: .8125rem; line-height: 1.35; }
  body.theme-rocket-wc-master p.al-bb__label strong { display: inline; }
  body.theme-rocket-wc-master p.al-bb__note { font-size: .8125rem; line-height: 1.35; }
}
@media (max-width: 991px) {
  /* compact stage (step 1 scrolled away): the honesty label AND the note stay in flow, smaller
     (UX 3.7 "always visible, never a footnote" — the colour note matters most exactly when the
     colour row is on screen); the well gives up the room (flex: 1 1 auto above) */
  .al-bb--compact body.theme-rocket-wc-master p.al-bb__label, .al-bb--compact .al-bb__label,
  .al-bb--compact body.theme-rocket-wc-master p.al-bb__note, .al-bb--compact .al-bb__note { font-size: .75rem; line-height: 1.3; }
}

/* ---- 3 · Steps ------------------------------------------------------------ */
.al-bb__steps { display: flex; flex-direction: column; gap: var(--al-sp-6); min-width: 0; }
.al-bb__step {
  padding-top: var(--al-sp-5); border-top: var(--al-border-hair);
  /* gentle-scroll target lands under the sticky header + stage on phones */
  scroll-margin-top: calc(var(--al-bb-top, 0px) + 32vh + var(--al-sp-3));
  scroll-margin-top: calc(var(--al-bb-top, 0px) + 32svh + var(--al-sp-3));
}
@media (min-width: 992px) { .al-bb__step { scroll-margin-top: calc(var(--al-bb-top, 0px) + var(--al-sp-5)); } }
.al-bb__step:first-child { border-top: 0; padding-top: 0; }
/* Beats the skin's h2 sizing so all three step titles share the d3 scale. */
body.theme-rocket-wc-master h2.al-bb__step-title {
  display: flex; align-items: center; gap: var(--al-sp-3);
  font-size: var(--al-fs-d3); line-height: var(--al-lh-d3); margin: 0 0 var(--al-sp-2);
}
.al-bb__step-title:focus { outline: none; }
.al-bb__step-title:focus-visible { outline: 2px solid var(--al-turq-300); outline-offset: 4px; border-radius: var(--al-r-sm); }
.al-bb__num {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--al-grad-gold); color: var(--al-text-inverse);
  font-family: var(--al-font-util); font-weight: 600; font-size: var(--al-fs-u); letter-spacing: 0;
}
.al-bb__step.is-done .al-bb__num { background: transparent; color: var(--al-brass-300); box-shadow: inset 0 0 0 2px var(--al-brass-400); }
body.theme-rocket-wc-master p.al-bb__current {
  min-height: 1.5em; margin: 0 0 var(--al-sp-4);
  font-size: var(--al-fs-sm); line-height: var(--al-lh-tight); color: var(--al-text-dim);
}
body.theme-rocket-wc-master p.al-bb__current strong { color: var(--al-text-mid); font-weight: 500; }
.al-bb__row { margin-top: var(--al-sp-5); }
.al-bb__row[hidden] { display: none; }
body.theme-rocket-wc-master h3.al-bb__row-title {
  font-family: var(--al-font-util); font-weight: 600; font-size: var(--al-fs-u-xs);
  letter-spacing: var(--al-ls-u-xs); text-transform: uppercase; color: var(--al-brass-400);
  margin: 0 0 var(--al-sp-3);
}
body.theme-rocket-wc-master p.al-bb__notice {
  margin: 0 0 var(--al-sp-3); padding: var(--al-sp-3) var(--al-sp-4);
  background: var(--al-surface-1); border: var(--al-border-hair); border-left: 3px solid var(--al-brass-400);
  border-radius: var(--al-r-ctrl);
  font-size: var(--al-fs-sm); line-height: var(--al-lh-tight); color: var(--al-text-mid);
}
.al-bb__notice[hidden] { display: none; }
body.theme-rocket-wc-master p.al-bb__notice a, .al-bb__notice .al-textlink { margin-left: var(--al-sp-2); }
body.theme-rocket-wc-master p.al-bb__fine,
body.theme-rocket-wc-master p.al-bb__count {
  font-size: var(--al-fs-xs); line-height: var(--al-lh-tight); color: var(--al-text-dim); margin: 0 0 var(--al-sp-3);
}
body.theme-rocket-wc-master p.al-bb__count { color: var(--al-text-mid); }

/* ---- 4 · Tiles (native radios, :checked = brass border + check badge) ----- */
.al-bb__tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--al-sp-3); }
@media (min-width: 640px) and (max-width: 991px) { .al-bb__tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .al-bb__tiles--belts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.al-bb__tile { position: relative; display: block; margin: 0; cursor: pointer; min-height: 48px; }
.al-bb__tile-body {
  display: flex; flex-direction: column; height: 100%;
  background: var(--al-surface-1); border: 2px solid var(--al-line-2); border-radius: var(--al-r-card);
  overflow: hidden; box-shadow: var(--al-shadow-card);
  transition: transform .28s var(--al-ease), border-color .28s var(--al-ease), box-shadow .28s var(--al-ease);
}
.al-bb__tile:hover .al-bb__tile-body { transform: translateY(-3px); border-color: var(--al-line-1); box-shadow: var(--al-shadow-pop); }
.al-bb__tile input:checked + .al-bb__tile-body { border-color: var(--al-brass-300); }
.al-bb__tile input:focus-visible + .al-bb__tile-body { outline: 2px solid var(--al-turq-300); outline-offset: 3px; }
.al-bb__tile-media { --al-ratio: 1 / 1; border: 0; border-radius: 0; }
.al-bb__tile-media img { transition: none; }
.al-bb__tile-text { display: flex; flex-direction: column; gap: 2px; padding: var(--al-sp-3) var(--al-sp-3) var(--al-sp-4); }
.al-bb__tile-name {
  font-family: var(--al-font-display); font-weight: 500; font-size: var(--al-fs-d4); line-height: var(--al-lh-d4);
  color: var(--al-text-hi);
}
.al-bb__tiles--buckles .al-bb__tile-name { font-family: var(--al-font-body); font-weight: 500; font-size: var(--al-fs-sm); line-height: var(--al-lh-tight); }
.al-bb__tile-price {
  font-family: var(--al-font-util); font-weight: 600; font-size: var(--al-fs-body);
  font-feature-settings: "tnum"; color: var(--al-brass-300);
}
.al-bb__tile-sub { font-size: var(--al-fs-xs); line-height: var(--al-lh-tight); color: var(--al-text-dim); }
.al-bb__tile-badges { display: flex; flex-wrap: wrap; gap: var(--al-sp-1); margin-top: var(--al-sp-1); }
.al-bb__tile-check {
  position: absolute; top: var(--al-sp-2); right: var(--al-sp-2); z-index: 2;
  display: none; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--al-brass-300); color: var(--al-text-inverse);
  box-shadow: var(--al-shadow-gold);
}
.al-bb__tile-check svg { width: 16px; height: 16px; }
.al-bb__tile input:checked ~ .al-bb__tile-check { display: inline-flex; }
.al-bb__tile.is-unavailable .al-bb__tile-body { opacity: .7; }

/* ---- 5 · Colour swatches + width tiles + shape row ------------------------ */
.al-bb__swatches, .al-bb__widths, .al-bb__shapes { display: flex; flex-wrap: wrap; gap: var(--al-sp-2); }
.al-bb__swatch, .al-bb__width, .al-bb__shape { position: relative; display: block; margin: 0; cursor: pointer; }
.al-bb__swatch-body, .al-bb__width-body, .al-bb__shape-body {
  display: inline-flex; align-items: center; gap: var(--al-sp-2);
  min-height: 48px; padding: 6px 16px 6px 6px;
  background: var(--al-surface-1); border: 2px solid var(--al-line-2); border-radius: var(--al-r-pill);
  color: var(--al-text-mid);
  font-family: var(--al-font-util); font-weight: 600; font-size: var(--al-fs-u-sm); letter-spacing: .06em;
  transition: border-color var(--al-t-fast) var(--al-ease), color var(--al-t-fast) var(--al-ease), background var(--al-t-fast) var(--al-ease);
}
.al-bb__swatch:hover .al-bb__swatch-body, .al-bb__width:hover .al-bb__width-body, .al-bb__shape:hover .al-bb__shape-body { border-color: var(--al-brass-500); color: var(--al-text-hi); }
.al-bb__swatch input:checked + .al-bb__swatch-body,
.al-bb__width input:checked + .al-bb__width-body,
.al-bb__shape input:checked + .al-bb__shape-body { border-color: var(--al-brass-300); color: var(--al-text-hi); background: var(--al-brass-tint); }
.al-bb__swatch input:focus-visible + .al-bb__swatch-body,
.al-bb__width input:focus-visible + .al-bb__width-body,
.al-bb__shape input:focus-visible + .al-bb__shape-body { outline: 2px solid var(--al-turq-300); outline-offset: 3px; }
.al-bb__dot {
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--al-line-1); background-color: var(--al-surface-3);
  background-size: 300% auto; background-position: center; overflow: hidden;
}
.al-bb__dot img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; transform: scale(2.4); }
.al-bb__swatch .al-badge--outline { margin-left: var(--al-sp-1); font-size: 10px; padding: 0 8px; }
.al-bb__width-body, .al-bb__shape-body { flex-direction: column; align-items: flex-start; gap: 1px; padding: 8px 18px; border-radius: var(--al-r-ctrl); min-width: 120px; }
.al-bb__widths { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 480px) { .al-bb__widths { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.al-bb__widths .al-bb__width-body { width: 100%; min-width: 0; }
.al-bb__width-sub, .al-bb__shape-sub { font-family: var(--al-font-body); font-weight: 400; font-size: var(--al-fs-xs); letter-spacing: 0; text-transform: none; color: var(--al-text-dim); }
.al-bb__shapes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.al-bb__shapes .al-bb__shape-body { width: 100%; }

/* ---- 6 · Size buttons (5 per row, ≥ 56 px square) ------------------------- */
.al-bb__sizes { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--al-sp-2); }
@media (min-width: 640px) { .al-bb__sizes { grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); } }
.al-bb__size { position: relative; display: block; margin: 0; cursor: pointer; }
.al-bb__size-body {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 56px; padding: 6px 4px;
  background: var(--al-surface-1); border: 2px solid var(--al-line-2); border-radius: var(--al-r-ctrl);
  color: var(--al-text-hi);
  font-family: var(--al-font-util); font-weight: 600; font-size: 1.25rem; font-feature-settings: "tnum"; letter-spacing: 0;
  transition: border-color var(--al-t-fast) var(--al-ease), background var(--al-t-fast) var(--al-ease);
}
.al-bb__size:hover .al-bb__size-body { border-color: var(--al-brass-500); }
.al-bb__size input:checked + .al-bb__size-body { border-color: var(--al-brass-300); background: var(--al-brass-tint); color: var(--al-brass-100); }
.al-bb__size input:focus-visible + .al-bb__size-body { outline: 2px solid var(--al-turq-300); outline-offset: 3px; }
.al-bb__size-sub { font-family: var(--al-font-body); font-weight: 400; font-size: .6875rem; line-height: 1.2; color: var(--al-text-dim); text-align: center; }
.al-bb__size--ask { grid-column: span 2; }
.al-bb__size--ask .al-bb__size-body { font-size: var(--al-fs-body); }
.al-bb__help { margin-top: var(--al-sp-4); }
/* a <button> wearing the skin's text-link recipe */
.al-bb button.al-bb__textbtn { background: none; border: 0; padding: 8px 0; min-height: 44px; cursor: pointer; }

/* ---- 7 · Buckle chips + grid ----------------------------------------------- */
.al-bb .al-bb__chips { margin: 0 0 var(--al-sp-3); padding: 4px 2px 8px; }
.al-bb .al-bb__chips li { flex: none; margin: 0; }
.al-bb button.al-chip { cursor: pointer; min-height: 44px; }
.al-bb__tiles--buckles .al-bb__tile-media { --al-ratio: 1 / 1; padding: var(--al-sp-3); }
.al-bb__tile--pinned .al-bb__tile-body { border-style: dashed; }
.al-bb__empty { grid-column: 1 / -1; padding: var(--al-sp-5); text-align: center; color: var(--al-text-dim); font-size: var(--al-fs-sm); }

/* ---- 8 · Total panel (sticky bottom), reason, error, CTA ------------------ */
.al-bb__total {
  position: sticky; bottom: 0; z-index: calc(var(--al-z-base) + 1);
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "live cta" "fine fine";
  gap: var(--al-sp-2) var(--al-sp-3); align-items: center;
  margin-inline: calc(var(--al-gutter) * -1); padding: var(--al-sp-3) var(--al-gutter);
  padding-bottom: calc(var(--al-sp-3) + env(safe-area-inset-bottom, 0px));
  background: var(--al-ground-1); border-top: var(--al-border-hair);
  box-shadow: 0 -12px 28px -14px var(--al-ground-0); /* the card shadow, cast upward, in the ground token */
}
.al-bb__total[hidden] { display: none; }
.al-bb__total-live { grid-area: live; min-width: 0; }
body.theme-rocket-wc-master p.al-bb__total-label {
  font-family: var(--al-font-util); font-weight: 600; font-size: var(--al-fs-u-xs);
  letter-spacing: var(--al-ls-u-xs); text-transform: uppercase; color: var(--al-brass-400); margin: 0;
}
body.theme-rocket-wc-master p.al-bb__price {
  font-family: var(--al-font-util); font-weight: 600; font-size: var(--al-fs-d3); line-height: var(--al-lh-d3);
  font-feature-settings: "tnum"; color: var(--al-brass-300); margin: 0;
}
body.theme-rocket-wc-master p.al-bb__line {
  display: none; font-size: var(--al-fs-sm); line-height: var(--al-lh-tight); color: var(--al-text-mid); margin: var(--al-sp-1) 0 0;
  overflow-wrap: anywhere;
}
.al-bb__line-price { float: right; margin-left: var(--al-sp-3); font-family: var(--al-font-util); font-feature-settings: "tnum"; color: var(--al-brass-300); }
.al-bb__total .al-bb__fine { display: none; grid-area: fine; margin: 0; }
.al-bb__reason, .al-bb__error { grid-area: fine; }
body.theme-rocket-wc-master p.al-bb__reason { font-size: var(--al-fs-xs); line-height: var(--al-lh-tight); color: var(--al-text-mid); margin: 0; }
body.theme-rocket-wc-master p.al-bb__error { font-size: var(--al-fs-sm); line-height: var(--al-lh-tight); color: var(--al-danger); margin: 0; }
.al-bb__reason[hidden], .al-bb__error[hidden] { display: none; }
.al-bb .al-bb__cta, .al-bb button.al-bb__cta {
  grid-area: cta; justify-self: end; min-height: 56px; padding: 14px 20px; white-space: nowrap;
  font-size: var(--al-fs-u); letter-spacing: var(--al-ls-u);
}
.al-bb .al-bb__cta.is-busy { filter: brightness(.9); pointer-events: none; }
@media (max-width: 991px) {
  /* phones: one row, ≤ 64 px — the price and the one button; the label and
     lines live in the step headers and the confirmation instead. The price
     column is sized to its content and the button takes the rest and may
     wrap to two lines (builder.js drops the price from the label here, the
     price is already beside it), so a 5-digit price or the "Ask us" label
     can never push the price under the button. */
  .al-bb__total { grid-template-columns: auto minmax(0, 1fr); padding-top: var(--al-sp-2); padding-bottom: calc(var(--al-sp-2) + env(safe-area-inset-bottom, 0px)); row-gap: 0; }
  .al-bb__reason:not([hidden]), .al-bb__error:not([hidden]) { margin-top: var(--al-sp-2); }
  body.theme-rocket-wc-master p.al-bb__total-label { display: none; }
  body.theme-rocket-wc-master p.al-bb__price { font-size: var(--al-fs-d4); line-height: 1.2; white-space: nowrap; }
  .al-bb .al-bb__cta, .al-bb button.al-bb__cta { justify-self: stretch; min-height: 48px; padding: 10px 16px; white-space: normal; line-height: 1.2; text-align: center; }
  .al-bb__reason:not([hidden]) ~ .al-bb__cta { min-height: 48px; }
}
@media (max-width: 379px) { .al-bb .al-bb__cta { padding-inline: 12px; font-size: var(--al-fs-u-sm); } }
@media (min-width: 992px) {
  .al-bb__total {
    grid-template-columns: minmax(0, 1fr); grid-template-areas: "live" "fine" "cta";
    margin-inline: 0; padding: var(--al-sp-5) 0 var(--al-sp-4); box-shadow: none;
  }
  body.theme-rocket-wc-master p.al-bb__line { display: block; }
  .al-bb__total .al-bb__fine { display: block; margin-top: var(--al-sp-2); }
  .al-bb .al-bb__cta { justify-self: stretch; width: 100%; padding: 18px 24px; white-space: normal; }
}

/* ---- 9 · Confirmation + enquiry panels ------------------------------------- */
.al-bb__panel { padding: var(--al-sp-6) var(--al-sp-5); }
.al-bb__panel:hover { transform: none; box-shadow: var(--al-shadow-card); border-color: var(--al-line-2); }
.al-bb__panel[hidden] { display: none; }
body.theme-rocket-wc-master h2.al-bb__panel-title {
  display: flex; align-items: center; gap: var(--al-sp-3);
  font-size: var(--al-fs-d4); line-height: var(--al-lh-d4); margin: 0 0 var(--al-sp-4);
}
.al-bb__panel-title:focus { outline: none; }
.al-bb__panel-title:focus-visible { outline: 2px solid var(--al-turq-300); outline-offset: 4px; border-radius: var(--al-r-sm); }
.al-bb__tick { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--al-ok); color: var(--al-text-inverse); }
.al-bb__tick svg { width: 16px; height: 16px; }
body.theme-rocket-wc-master .al-bb__panel p.al-bb__line { display: block; }
body.theme-rocket-wc-master p.al-bb__panel-total { margin: var(--al-sp-3) 0 0; padding-top: var(--al-sp-3); border-top: var(--al-border-hair); font-family: var(--al-font-util); font-weight: 600; font-feature-settings: "tnum"; color: var(--al-text-hi); }
body.theme-rocket-wc-master p.al-bb__panel-total span { color: var(--al-brass-300); }
.al-bb__panel .al-cluster { margin-top: var(--al-sp-5); }
body.theme-rocket-wc-master p.al-bb__panel-fine { margin-top: var(--al-sp-5); font-size: var(--al-fs-xs); line-height: var(--al-lh-tight); color: var(--al-text-dim); }
body.theme-rocket-wc-master p.al-bb__panel-note { margin: 0 0 var(--al-sp-4); font-size: var(--al-fs-sm); line-height: var(--al-lh-tight); color: var(--al-text-mid); }
body.theme-rocket-wc-master p.al-bb__panel-reason { margin: 0 0 var(--al-sp-4); padding: var(--al-sp-3) var(--al-sp-4); border-left: 3px solid var(--al-brass-400); background: var(--al-surface-2); border-radius: var(--al-r-ctrl); font-size: var(--al-fs-sm); line-height: var(--al-lh-tight); color: var(--al-text-mid); }
.al-bb__field { display: block; margin: 0 0 var(--al-sp-4); }
.al-bb__field span { display: block; margin-bottom: var(--al-sp-1); font-family: var(--al-font-util); font-weight: 600; font-size: var(--al-fs-u-xs); letter-spacing: var(--al-ls-u-xs); text-transform: uppercase; color: var(--al-text-mid); }
.al-bb__field input, .al-bb__field textarea { width: 100%; min-height: 48px; padding: 12px 14px; font-size: 16px; font-family: var(--al-font-body); }
.al-bb__field textarea { min-height: 96px; resize: vertical; }
.al-bb__field.is-invalid input { border-color: var(--al-danger) !important; }
.al-bb__field-err { display: block; margin-top: var(--al-sp-1); font-size: var(--al-fs-xs); color: var(--al-danger); }
.al-bb__field-err:empty { display: none; }
.al-bb__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 639px) { .al-bb__panel .al-cluster { flex-direction: column; align-items: stretch; } }

/* ---- 10 · Sizing helper dialog -------------------------------------------- */
.al-bb__dialog {
  width: min(92vw, 420px); max-width: 420px; padding: 0; margin: auto;
  background: var(--al-surface-1); color: var(--al-text-mid);
  border: var(--al-border); border-radius: var(--al-r-card); box-shadow: var(--al-shadow-pop);
  overflow: visible;
}
.al-bb__dialog:hover { transform: none; }
.al-bb__dialog::backdrop { background: var(--al-ground-0); background: color-mix(in srgb, var(--al-ground-0) 72%, transparent); }
.al-bb__dialog[open]:not([data-native]) { position: fixed; inset: 0; z-index: var(--al-z-popover); }
.al-bb__dialog-inner { padding: var(--al-sp-6) var(--al-sp-5) var(--al-sp-5); }
body.theme-rocket-wc-master h2.al-bb__dialog-title { font-size: var(--al-fs-d4); line-height: var(--al-lh-d4); margin: 0 0 var(--al-sp-4); padding-right: var(--al-sp-8); }
.al-bb__dialog ol { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--al-sp-4); }
.al-bb__dialog li { margin: 0; font-size: var(--al-fs-sm); line-height: var(--al-lh-tight); color: var(--al-text-mid); }
.al-bb__dialog li strong { display: block; color: var(--al-text-hi); font-weight: 500; margin-bottom: 2px; }
.al-bb__dialog li:first-child { font-size: var(--al-fs-body); }
.al-bb__dialog li:first-child strong { font-family: var(--al-font-display); font-size: var(--al-fs-d4); }
.al-bb__dialog li .al-bb__num-inline { font-family: var(--al-font-util); font-feature-settings: "tnum"; color: var(--al-brass-300); }
.al-bb__dialog-close {
  position: absolute; top: var(--al-sp-3); right: var(--al-sp-3);
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: var(--al-r-ctrl);
  background: transparent; border: 1px solid var(--al-line-2); color: var(--al-text-mid); cursor: pointer;
}
.al-bb__dialog-close:hover { border-color: var(--al-brass-400); color: var(--al-brass-300); }
.al-bb__dialog-close svg { width: 18px; height: 18px; }
body.theme-rocket-wc-master .al-bb__dialog a { color: var(--al-turq-300); text-decoration: underline; text-underline-offset: 4px; }
body.theme-rocket-wc-master p.al-bb__dialog-fine { margin-top: var(--al-sp-4); font-size: var(--al-fs-xs); color: var(--al-text-dim); }

/* ---- 11 · JS-off: readable option list + phone CTA ------------------------ */
.al-bb__nojs { display: grid; gap: var(--al-sp-6); }
.al-bb__nojs-card { padding: var(--al-sp-5); }
.al-bb__nojs-card:hover { transform: none; box-shadow: var(--al-shadow-card); }
body.theme-rocket-wc-master h2.al-bb__nojs-title { font-size: var(--al-fs-d4); line-height: var(--al-lh-d4); margin: 0 0 var(--al-sp-3); }
.al-bb__nojs ul { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--al-sp-3); }
.al-bb__nojs li { margin: 0; padding-bottom: var(--al-sp-3); border-bottom: var(--al-border-hair); font-size: var(--al-fs-sm); line-height: var(--al-lh-tight); color: var(--al-text-mid); }
.al-bb__nojs li:last-child { border-bottom: 0; padding-bottom: 0; }
.al-bb__nojs li strong { color: var(--al-text-hi); font-weight: 500; }
.al-bb__nojs li .al-bb__tile-price { margin-left: var(--al-sp-2); }
.al-bb__nojs-ctas { display: flex; flex-wrap: wrap; gap: var(--al-sp-3); }
@media (max-width: 639px) { .al-bb__nojs-ctas { flex-direction: column; } .al-bb__nojs-ctas .al-btn { width: 100%; } }
@media (min-width: 900px) { .al-bb__nojs { grid-template-columns: 1fr 1fr; } .al-bb__nojs-card--wide { grid-column: 1 / -1; } }

/* ---- 12 · Utilities, motion, forced colours -------------------------------- */
.al-bb [hidden] { display: none !important; }
.al-bb img { max-width: 100%; }
@media (prefers-reduced-motion: reduce) {
  .al-bb__stage { transition: none; }
  .al-bb__tile:hover .al-bb__tile-body { transform: none; }
  .al-bb__loading::before { animation: none; }
  .al-bb__viewer { transition: none; }
}
@media (forced-colors: active) {
  .al-bb__tile input:checked + .al-bb__tile-body,
  .al-bb__swatch input:checked + .al-bb__swatch-body,
  .al-bb__width input:checked + .al-bb__width-body,
  .al-bb__shape input:checked + .al-bb__shape-body,
  .al-bb__size input:checked + .al-bb__size-body { outline: 3px solid Highlight; outline-offset: 2px; }
  .al-bb__chrome { background: Canvas; }
}
/* =============================== end builder.css =========================== */