/** Shopify CDN: Minification failed

Line 251:0 Unexpected "}"

**/
/* =========================================================
   PRODUCT BUILDER
   One section, two layout modes (set by a wrapper class):
     .product-builder--fullpage  immersive; hides theme chrome via body.builder-template
     .product-builder--inline    normal in-flow section; sticky preview + scrolling options
   Shared component styles are unscoped; LAYOUT is scoped per mode.
   ========================================================= */

/* ---------------------------------------------------------
   SHARED — base
   --------------------------------------------------------- */
.product-builder { width: 100%; }
.product-builder * { box-sizing: border-box; }

/* ---------------------------------------------------------
   SHARED — preview / model
   --------------------------------------------------------- */
.product-builder__preview-card {
  position: static;
  width: 100%;
  background: #fff;
  border-radius: 18px;
  padding: 24px;
  flex: 0 0 auto;
}

.product-builder__preview {
  position: relative;
  container-type: inline-size;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 14px;
  --builder-model-scale: 1;
}

.product-builder__preview-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-align: center;
  opacity: 0.5;
  font-size: 14px;
}

.product-builder__preview-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: none;
  transform:
    translate(calc(var(--layer-x, 0) * 1cqw * var(--builder-model-scale)), calc(var(--layer-y, 0) * 1cqw * var(--builder-model-scale)))
    scale(calc(var(--builder-model-scale) * var(--layer-scale, 1)));
  transform-origin: center;
}

/* ---------------------------------------------------------
   SHARED — controls / groups / options
   --------------------------------------------------------- */
.product-builder__controls { display: grid; gap: 20px; }

.product-builder__group {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 18px;
  padding: 20px;
}

.product-builder__group-heading { display: flex; justify-content: space-between; margin-bottom: 14px; }
.product-builder__group-title { margin: 0; }
.product-builder__group-requirement {
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; opacity: 0.62;
}

.product-builder__options { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }

.product-builder__option {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid rgba(0, 0, 0, 0.16);
  background: #fff;
  cursor: pointer;
  text-align: left;
  transition: transform 160ms ease, opacity 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}
.product-builder__option:hover:not(:disabled) { transform: translateY(-1px); border-color: rgba(0, 0, 0, 0.42); }
.product-builder__option.is-selected { border-color: #000; box-shadow: 0 0 0 1px #000; }
.product-builder__option.is-loading { opacity: 0.72; pointer-events: none; }
.product-builder__option.is-sold-out { opacity: 0.7; }
.product-builder__option.is-sold-out .product-builder__option-detail { color: #8a0000; }
.product-builder__option:disabled { cursor: not-allowed; opacity: 0.55; }
.product-builder__option-label { font-weight: 700; line-height: 1.2; }
.product-builder__option-subtitle { font-size: 13px; line-height: 1.3; opacity: 0.62; }
.product-builder__option-detail { margin-top: auto; font-size: 13px; line-height: 1.3; opacity: 0.72; }

/* ---------------------------------------------------------
   SHARED — accordion option groups (optional)
   --------------------------------------------------------- */
.product-builder__group--accordion { padding: 0; overflow: unset; }
.product-builder__group--accordion .product-builder__group-heading {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 16px 18px;
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
}
.product-builder__group--accordion .product-builder__group-title { flex: 0 0 auto; }
.product-builder__group--accordion .product-builder__group-summary {
  flex: 1 1 auto;
  text-align: right;
  font-size: 13px;
  opacity: 0.6;
  white-space: nowrap;
  overflow: unset;
  text-overflow: ellipsis;
}
.product-builder__group--accordion .product-builder__group-chevron {
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 200ms ease;
  opacity: 0.5;
}
.product-builder__group--accordion.is-open .product-builder__group-chevron {
  transform: rotate(-135deg) translate(-2px, -2px);
}
.product-builder__group--accordion .product-builder__group-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 240ms ease;
}
.product-builder__group--accordion.is-open .product-builder__group-panel {
  grid-template-rows: 1fr;
}
.product-builder__group--accordion .product-builder__group-panel > .product-builder__options {
  overflow: unset;
  min-height: 0;
  padding: 0 18px;
}
.product-builder__group--accordion.is-open .product-builder__group-panel > .product-builder__options {
  padding: 2px 18px 18px;
}

/* ---------------------------------------------------------
   SHARED — summary / totals / messages
   --------------------------------------------------------- */
.product-builder__summary-card {
  margin-top: 24px;
  margin-bottom: 24px;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 18px;
  padding: 24px;
}
.product-builder__summary-heading { margin: 0 0 16px; }
.product-builder__summary { display: grid; gap: 10px; margin-bottom: 18px; }
.product-builder__summary-row,
.product-builder__total-row { display: flex; justify-content: space-between; gap: 16px; line-height: 1.4; }
.product-builder__summary-row strong,
.product-builder__total-row strong { text-align: right; }
.product-builder__total-row {
  padding-top: 16px; margin-top: 16px;
  border-top: 1px solid rgba(0, 0, 0, 0.12); font-size: 18px;
}

.product-builder__error,
.product-builder__success { margin-top: 16px; padding: 12px 14px; border-radius: 12px; font-size: 14px; line-height: 1.4; }
.product-builder__error { background: rgba(180, 0, 0, 0.08); color: #8a0000; }
.product-builder__success { background: rgba(0, 120, 50, 0.08); color: #006b2f; }

/* ---------------------------------------------------------
   SHARED — buttons
   --------------------------------------------------------- */
.product-builder__randomize-row { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 18px; }

.product-builder__randomize-button,
.product-builder__add-button {
  appearance: none;
  position: relative;   /* containing block for the pinned "You save" line */
  width: 100%;
  min-height: 54px;
  padding: 15px 22px;
  border-radius: 999px;
  font-weight: 800;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: transform 160ms ease, opacity 160ms ease, box-shadow 160ms ease, background 160ms ease, color 160ms ease;
}
.product-builder__randomize-button { border: 2px solid #000; background: #fff; color: #000; }
.product-builder__add-button { margin-top: 12px; border: 2px solid #000; background: #000; color: #fff; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18); }
.product-builder__randomize-button:hover:not(:disabled),
.product-builder__add-button:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 14px 28px rgba(0, 0, 0, 0.18); }
.product-builder__randomize-button:disabled,
.product-builder__add-button:disabled { cursor: not-allowed; opacity: 0.55; transform: none; box-shadow: none; }

/* ---------------------------------------------------------
   SHARED — discount pricing / banner
   --------------------------------------------------------- */
.product-builder__discount-banner {
  display: inline-block;
  margin: 0 auto 20px;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(192, 0, 0, 0.08);
  color: #c00000;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  width: 100%;
  text-align: center;
}
.product-builder__option-price--original { text-decoration: line-through; opacity: 0.45; margin-right: 4px; }
.product-builder__option-price--discounted { color: #e53e3e; font-weight: 700; }
.product-builder__buy-save {
  /* ONE rule for both breakpoints. Desktop briefly had an absolutely-pinned
     variant to stop it drifting with the price text; the button already centres
     its own content, so that solved nothing and only made the two differ. */
  display: block;
  width: 100%;
  text-align: center;
  margin-top: 2px;
  font-size: 10px; font-weight: 500;
  /* the button is uppercase; inheriting it made a quiet aside shout. Sentence
     case + lower opacity recedes without going grey, which reads as dirty or
     disabled against a saturated blue. */
  text-transform: none;
  letter-spacing: 0;
  opacity: .72;
}

}
.product-builder__total-original { text-decoration: line-through; opacity: 0.45; font-size: 14px; font-weight: 400; margin-right: 6px; }
/* "You save $X" — its own line under the total so it never competes with the
   figure itself, and so it wraps instead of pushing the total off-screen on a
   narrow phone. Deliberately quiet: green reads as confirmation, not a claim. */
.product-builder__total-save {
  display: block;
  margin-top: 2px;
  font-size: 12px; font-weight: 700;
  letter-spacing: .01em;
  color: var(--pb-accent, #405de6);
}
@media screen and (max-width: 900px) {
  .product-builder__total-save { font-size: 11px; }
}
.product-builder__total-discounted { color: #e53e3e; }

/* ---------------------------------------------------------
   SHARED — headings / subheading
   --------------------------------------------------------- */
h2.product-builder__heading { font-family: 'Libre Baskerville', serif; }
.product-builder__subheading p { margin-top: 0; }
.product-builder__subheading p:last-child { margin-bottom: 0; }

/* =========================================================
   FULL-PAGE MODE  (immersive; hides theme chrome)
   ========================================================= */

/* Page resets — only when body.builder-template is present (full-page only) */
body.builder-template { margin: 0; padding: 0; overflow-x: hidden; }
body.builder-template #main { padding: 0 !important; margin: 0 !important; }
body.builder-template main .shopify-section,
body.builder-template main .container { padding: 0 !important; margin: 0 !important; }

/* Hide theme UI — scoped to the theme's own header/footer section GROUPS.
   (Section-group classes only — never bare header/footer, which would also hit
   the <header>/<footer> inside Focal's <cart-drawer>.) */
body.builder-template .shopify-section-group-header-group,
body.builder-template .shopify-section-group-footer-group,
body.builder-template .shopify-section--header,
body.builder-template .shopify-section-footer,
body.builder-template .shopify-section--announcement-bar,
body.builder-template .page-header,
body.builder-template .breadcrumb { display: none !important; }

/* Keep the cart drawer above the builder's fixed chrome */
body.builder-template .drawer { z-index: 1000; }

/* Full-page layout */
.product-builder--fullpage { min-height: 100vh; padding: 0; }
.product-builder--fullpage .product-builder__inner {
  width: 100%;
  height: 100vh;
  display: block;
}

.product-builder--fullpage .product-builder__preview-column {
  position: fixed;
  left: 0;
  width: 55vw;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px;
  background: #ffffff;
  z-index: 0;
  flex-direction: column;
}
.product-builder--fullpage .product-builder__preview-card { max-width: min(720px, 75vh); }
.product-builder--fullpage .product-builder__preview {
  width: min(100%, 75vh);
  max-width: 720px;
  min-width: 420px;
  --builder-model-scale: 1.1;
}
@media screen and (min-height: 700px)  { .product-builder--fullpage .product-builder__preview { --builder-model-scale: 1.2; } }
@media screen and (min-height: 850px)  { .product-builder--fullpage .product-builder__preview { --builder-model-scale: 1.3; } }
@media screen and (min-height: 1000px) { .product-builder--fullpage .product-builder__preview { --builder-model-scale: 1.35; } }
.product-builder--fullpage .product-builder__preview-layer { top: -43px; }

.product-builder--fullpage .product-builder__controls-column {
  margin-left: 55vw;
  width: 45vw;
  min-height: 100vh;
  padding: 0 96px 48px 0;
  overflow-y: auto;
}
.product-builder--fullpage .product-builder__controls-column .product-builder__subheading {
  max-width: 620px; margin: 0 auto 28px; text-align: center; color: rgba(0, 0, 0, 0.68);
}
.product-builder--fullpage .product-builder__summary-card { margin-bottom: 120px; }

.product-builder--fullpage .product-builder__home-link {
  position: fixed;
  top: 20px;
  left: 24px;
  z-index: 20;
  display: flex;
  align-items: center;
  text-decoration: none;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #000;
  opacity: 0.62;
  transition: opacity 160ms ease;
}
.product-builder--fullpage .product-builder__home-link:hover { opacity: 1; }

.product-builder--fullpage .product-builder__heading { text-align: center; margin: 0 0 80px; flex: 0 0 auto; }

/* Full-page mobile */
@media screen and (max-width: 900px) {
  .product-builder--fullpage .product-builder__inner { display: block; height: auto; }
  .product-builder--fullpage .product-builder__preview-column {
    position: fixed; top: 0; left: 0; width: 38vw; height: 100vh;
    padding: 12px 0; z-index: 0; align-items: center; justify-content: center; overflow: unset;
  }
  .product-builder--fullpage .product-builder__preview-card { width: 100%; max-width: 100%; padding: 0; }
  .product-builder--fullpage .product-builder__heading { display: none; }
  .product-builder--fullpage .product-builder__preview { width: 100%; max-width: 100%; min-width: 0; aspect-ratio: 1 / 1.65; --builder-model-scale: 2.5; }
  .product-builder--fullpage .product-builder__controls-column { margin-left: 38vw; width: 62vw; padding: 16px 12px 48px 8px; overflow: visible; }
  .product-builder--fullpage .product-builder__options { grid-template-columns: 1fr; }
  .product-builder--fullpage .product-builder__group { padding: 14px; }
}
@media screen and (max-width: 560px) {
  .product-builder--fullpage .product-builder__preview { --builder-model-scale: 3.5; }
  .product-builder--fullpage .product-builder__randomize-row { grid-template-columns: 1fr; }
}

/* =========================================================
   INLINE MODE  (normal in-flow section; sticky preview)
   ========================================================= */
.product-builder--inline { padding: 56px 20px; }

/* No immersive "back" link when there's a real site header */
.product-builder--inline .product-builder__home-link { display: none; }

.product-builder--inline .product-builder__inner {
  max-width: none;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 48px;
  align-items: start;
  overflow-x: clip;   /* guard horizontal model spill on mobile inline (clip = doesn't break sticky/transparency) */
}

/* Sticky preview — stays put while options scroll, releases at section end */
.product-builder--inline .product-builder__preview-column {
  position: sticky;
  top: var(--pb-inline-sticky-top, 24px);
  align-self: start;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-height: calc(100vh - var(--pb-inline-sticky-top, 24px) - 24px);
}
.product-builder--inline .product-builder__preview-card { max-width: min(720px, 75vh); }
.product-builder--inline .product-builder__preview { width: min(100%, 75vh); max-width: 720px; min-width: 420px; --builder-model-scale: 1.1; }
.product-builder--inline .product-builder__preview-layer { top: 0; }

.product-builder--inline .product-builder__controls-column {
  margin-left: 0;
  width: auto;
  min-height: 0;
  padding: 0;
  overflow: visible;
}
.product-builder--inline .product-builder__heading { text-align: left; margin: 0 0 10px; }
.product-builder--inline .product-builder__subheading { margin: 0 0 24px; color: rgba(0, 0, 0, 0.68); }

/* Inline responsive — KEEP two columns (model left, options right) like desktop.
   Model stays sticky/visible while the options column scrolls. */
@media screen and (max-width: 900px) {
  .product-builder--inline { padding: 24px 10px 0; }
  .product-builder--inline .product-builder__inner {
    grid-template-columns: 38% minmax(0, 1fr);
    gap: 12px;
  }
  /* Model fills the left like the full-page builder: a viewport-tall sticky
     column with the model vertically centered and scaled up. */
  .product-builder--inline .product-builder__preview-column {
    position: sticky;
    top: 0;
    height: 100vh;
    max-height: none;   /* release the desktop clamp so the column fills the full
                           viewport — no dark strip under the model at scroll end */
    justify-content: center;
    padding: 0;
    overflow: unset;
  }
  .product-builder--inline .product-builder__preview-card {
    padding: 0;
    max-width: 100%;
    background: transparent;
  }
  .product-builder--inline .product-builder__preview {
    width: 100%;
    max-width: none;
    min-width: 0;
    aspect-ratio: 1 / 1.65;
    --builder-model-scale: 2.9;
  }
  /* squished options on the right */
  .product-builder--inline .product-builder__options { grid-template-columns: 1fr; }
  .product-builder--inline .product-builder__randomize-row { grid-template-columns: 1fr; }
  .product-builder--inline .product-builder__group { padding: 12px; }
  /* heading would crowd the narrow model column — hide it on mobile inline */
  .product-builder--inline .product-builder__heading { display: none; }
}

.product-builder__controls-column { opacity: 0.9; }
.product-builder__discount-banner p { margin: 0; }

/* narrow-phone model scale (container is small, so scale up); overrides the 900px value */
@media screen and (max-width: 490px) {
  .product-builder--inline .product-builder__preview { --builder-model-scale: 4.0; }
}

/* Content width: constrain the builder to the theme's content width (matches other page sections) */
.product-builder--width-theme .product-builder__inner { max-width: var(--container-max-width, 1400px); margin-inline: auto; padding-inline: var(--container-gutter, 20px); }

/* Asymmetric: model bleeds full-width on the left; options align to the theme's right margin (desktop) */
@media screen and (min-width: 901px) {
  .product-builder--width-theme-right .product-builder__inner {
    max-width: none;
    margin-left: 0;
    margin-right: calc(max(0px, (100vw - var(--container-max-width, 1400px)) / 2));
    padding-inline-end: var(--container-gutter, 20px);
  }
}

/* ===== Lazy-load preview placeholder ===== */
.product-builder__lazy { display: none; }
.product-builder[data-lazy-state="pending"] .product-builder__inner { display: none; }
.product-builder[data-lazy-state="pending"] .product-builder__lazy {
  display: block; position: relative; width: 100%;
  border: 0; padding: 0; margin: 0 auto; cursor: pointer;
  background: transparent; overflow: hidden; border-radius: 14px;
}
.product-builder__lazy-video, .product-builder__lazy-image { display: block; width: 100%; height: auto; }
.product-builder__lazy-cta {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  background: rgba(0,0,0,0.72); color: #fff; padding: 12px 22px;
  border-radius: 999px; font-weight: 700; font-size: 15px; letter-spacing: .02em; pointer-events: none;
}
.product-builder[data-lazy-state="revealed"] .product-builder__lazy { display: none; }

/* Mobile: stack the build-summary value under its label (indented) so it doesn't crowd.
   Scoped to summary rows only — the Total row keeps label-left / value-right. */
@media screen and (max-width: 900px) {
  .product-builder__summary-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }
  .product-builder__summary-row strong {
    text-align: left;
    padding-left: 14px;
  }
}

/* Subheading + discount banner(s): full-width across both columns on mobile only (desktop unchanged) */
.product-builder__mobile-intro { display: none; }
@media screen and (max-width: 900px) {
  .product-builder--inline .product-builder__mobile-intro {
    display: block; grid-column: 1 / -1; text-align: center; margin: 0 0 12px;
  }
  .product-builder--inline .product-builder__controls-column > .product-builder__subheading {
    display: none;
  }
}

/* Per-group highlighted note (e.g. free-gift callout above a group's options) */
.product-builder__group-note {
  display: inline-block;
  margin: 0 auto 20px;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(192, 0, 0, 0.08);
  color: #c00000;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  width: 100%;
  text-align: center; margin-bottom: 12px; }

/* Model art must never intercept taps (it overflows its column on mobile and can cover UI above/beside it) */
.product-builder__preview-layer { pointer-events: none; }

/* Text stays above the (overflowing) model art: trap the layers' z-indexes inside
   the preview's own stacking context, then lift the text elements over it. */
.product-builder__preview { z-index: 0; }
.product-builder__controls-column { position: relative; z-index: 2; }
.product-builder__heading { position: relative; z-index: 2; }
.product-builder__mobile-intro { position: relative; z-index: 2; }

/* Continuous fade: same white veil over the model for the whole right column,
   including the heading/subheading/banner zones (matches the option cards' look). */
.product-builder--inline .product-builder__controls-column { background: rgba(255, 255, 255, 0.9); }
.product-builder--inline .product-builder__heading { background: rgba(255, 255, 255, 0.9); }
.product-builder__mobile-intro { background: rgba(255, 255, 255, 0.9); }

/* =========================================================
   STAGE MODE  (Benchmade-style app shell — the whole builder
   fits in the viewport: the model flex-fills, the option tray
   scrolls horizontally, and the total + Add sit in a fixed
   bottom bar. The section height is set by JS (fitStage) to the
   viewport minus the builder's top; the model is then sized to
   the largest square that fits the remaining space.)
   ========================================================= */
.product-builder--stage { padding: 0 12px; overflow: hidden; }
.product-builder--stage .product-builder__inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  max-width: 720px;
  margin: 0 auto;
  width: 100%;
  overflow: hidden;
}
/* Reclaim vertical space — the switcher already provides page context */
.product-builder--stage .product-builder__home-link,
.product-builder--stage .product-builder__mobile-intro,
.product-builder--stage .product-builder__heading,
.product-builder--stage .product-builder__subheading { display: none; }

/* Model stage — flex-fills the space above the controls; JS sizes the card square */
.product-builder--stage .product-builder__preview-column {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  margin: 0;
  padding: 6px 0 2px;
}
.product-builder--stage .product-builder__preview-card {
  margin: 0 auto;
  padding: 4px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 12px 34px -22px rgba(0, 0, 0, 0.5);
}
.product-builder--stage .product-builder__preview {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  min-width: 0;
  aspect-ratio: auto;
  --builder-model-scale: 1;
}
.product-builder--stage .product-builder__preview-layer { top: 0; }

/* Lower block — rail + tray + action bar, natural height, pinned below the model */
.product-builder--stage .product-builder__controls-column {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  background: transparent;
  opacity: 1;
  position: static;
  z-index: auto;
  width: 100%;
  margin: 0;
  padding: 0;
}
/* Red promo banners temporarily hidden in stage to give the model more room
   (delete this rule to bring them back). */
.product-builder--stage .product-builder__discount-banner { display: none; }
.product-builder--stage .product-builder__expiration-note { margin: 0 0 8px; }

/* ---- Guided / Freestyle nav toggle ---- */
.product-builder--stage .product-builder__navtoggle-host { flex: 0 0 auto; display: flex; justify-content: center; padding: 6px 0 2px; }
.product-builder--stage .product-builder__navtoggle-host:empty { display: none; }
.product-builder__navtoggle {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border-radius: 999px;
  border: 1px solid var(--pb-line, rgba(0, 0, 0, 0.14));
  background: var(--pb-surface, #fff);
}
.product-builder__navtoggle-btn {
  border: 0;
  background: transparent;
  color: var(--pb-muted, #888);
  font: inherit;
  font-weight: 700;
  font-size: 12px;
  padding: 6px 16px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 150ms ease, color 150ms ease;
}
.product-builder__navtoggle-btn.is-active {
  background: var(--pb-accent, #1565c0);
  color: var(--pb-accent-ink, #fff);
}

/* ---- Section navigation (nav container is [data-builder-rail]) ---- */
.product-builder--stage .product-builder__rail { flex: 0 0 auto; margin: 0; }
.product-builder__rail:empty,
.product-builder__tray-head:empty { display: none; }

/* Pills: slim, scrollable text labels — active accented, ✓ when the section has a pick */
.product-builder--stage .product-builder__nav--pills {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding: 8px 2px 6px;
}
.product-builder--stage .product-builder__nav--pills::-webkit-scrollbar { display: none; }
.product-builder__pill {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--pb-line, rgba(0, 0, 0, 0.14));
  background: var(--pb-surface, #fff);
  color: var(--pb-ink, #111);
  font: inherit;
  font-weight: 700;
  font-size: 13px;
  white-space: nowrap;
  cursor: pointer;
  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
}
.product-builder__pill-check {
  font-size: 11px;
  color: var(--pb-accent, #1565c0);
  opacity: 0;
  width: 0;
  overflow: hidden;
  transition: opacity 150ms ease;
}
.product-builder__pill.has-selection .product-builder__pill-check { opacity: 1; width: auto; }
.product-builder__pill.is-active {
  background: var(--pb-accent, #1565c0);
  border-color: var(--pb-accent, #1565c0);
  color: var(--pb-accent-ink, #fff);
}
.product-builder__pill.is-active .product-builder__pill-check { color: var(--pb-accent-ink, #fff); }

/* Stepper: big current section + prev/next arrows + progress dots */
.product-builder--stage .product-builder__nav--stepper {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px 2px 4px;
}
.product-builder__stepper-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.product-builder__stepper-titlewrap { flex: 1 1 auto; min-width: 0; text-align: center; }
.product-builder__stepper-title {
  font-weight: 800;
  font-size: 17px;
  color: var(--pb-ink, #111);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.product-builder__stepper-count { font-size: 11px; color: var(--pb-muted, #888); margin-top: 1px; }
.product-builder__stepper-arrow {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--pb-line-strong, rgba(0, 0, 0, 0.2));
  background: var(--pb-surface, #fff);
  color: var(--pb-ink, #111);
  cursor: pointer;
}
.product-builder__stepper-arrow:disabled { opacity: 0.4; cursor: default; }
.product-builder__stepper-arrow span { width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; }
.product-builder__stepper-arrow--prev span { transform: rotate(135deg); margin-left: 3px; }
.product-builder__stepper-arrow--next span { transform: rotate(-45deg); margin-right: 3px; }
.product-builder__stepper-dots { display: flex; justify-content: center; gap: 8px; }
.product-builder__stepper-dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border-radius: 50%;
  border: 0;
  background: var(--pb-line-strong, rgba(0, 0, 0, 0.25));
  cursor: pointer;
  transition: background 150ms ease, transform 150ms ease;
}
.product-builder__stepper-dot.has-selection { background: var(--pb-muted, #888); }
.product-builder__stepper-dot.is-active { background: var(--pb-accent, #1565c0); transform: scale(1.35); }

/* Previous / next section pager after the option scroll */
.product-builder__tray-nav {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 2px 2px 0;
}
.product-builder__tray-nav-btn {
  padding: 9px 18px;
  border-radius: 999px;
  border: 1px solid var(--pb-line-strong, rgba(0, 0, 0, 0.2));
  background: transparent;
  color: var(--pb-ink, #111);
  font: inherit;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 150ms ease, border-color 150ms ease;
}
.product-builder__tray-nav-btn:hover { background: var(--pb-surface-2, rgba(0, 0, 0, 0.04)); }
.product-builder__tray-nav-btn--next {
  margin-left: auto;
  border-color: var(--pb-accent, #1565c0);
  color: var(--pb-accent, #1565c0);
}

/* Tray head */
.product-builder--stage .product-builder__tray-head {
  display: flex;
  flex: 0 0 auto;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
  padding: 8px 2px 6px;
}
.product-builder__tray-title { margin: 0; font-size: 16px; }
.product-builder__tray-req { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.55; }
.product-builder--stage .product-builder__tray-head .product-builder__group-note { width: auto; margin: 0; }

/* Current pick + price line (above the options) */
.product-builder--stage .product-builder__tray-head { justify-content: center; }
.product-builder__pick { display: inline-flex; align-items: baseline; gap: 8px; flex-wrap: wrap; justify-content: center; }
.product-builder__pick-name { font-weight: 800; font-size: 16px; color: var(--pb-ink, #111); }
.product-builder__pick-price { font-family: var(--pb-mono, ui-monospace, monospace); font-size: 14px; font-weight: 700; color: var(--pb-accent, #1565c0); }
.product-builder__pick-prompt { font-size: 14px; color: var(--pb-muted, #888); }
.product-builder__pick-soldout { font-size: 12px; font-weight: 700; color: #ff8ba0; text-transform: uppercase; letter-spacing: 0.04em; }

/* Option tray — coverflow: the selected option sits centered and prominent,
   neighbours peek in on either side, faded. Tap a card to select + center it. */
.product-builder--stage .product-builder__controls { flex: 0 0 auto; display: block; }
.product-builder__options--tray {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  /* side padding = half the tray minus half a card, so the first/last card can center */
  padding: 4px calc(50% - 84px) 10px;
  scroll-snap-type: x mandatory;
}
.product-builder__options--tray::-webkit-scrollbar { display: none; }
.product-builder__options--tray .product-builder__option {
  flex: 0 0 auto;
  width: 168px;
  height: 168px;             /* fixed, square-ish: image + name, no price */
  justify-content: flex-start;
  overflow: hidden;
  scroll-snap-align: center;
  text-align: center;
  align-items: center;
  opacity: 0.48;
  transform: scale(0.9);
  transition: opacity 220ms ease, transform 220ms ease, border-color 160ms ease, box-shadow 160ms ease;
}
.product-builder__options--tray .product-builder__option.is-selected {
  opacity: 1;
  transform: scale(1);
}

/* Variant-image thumbnail on each tray card */
.product-builder__option-thumb {
  width: 100%;
  height: 120px;
  margin-bottom: 6px;
  border-radius: 10px;
  overflow: hidden;
  background: #f4f4f3;
  display: flex;
  align-items: center;
  justify-content: center;
}
.product-builder__option-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.product-builder__option-thumb--empty {
  color: rgba(0, 0, 0, 0.4);
  font-size: 12px;
  font-weight: 700;
  background: repeating-linear-gradient(45deg, #f4f4f3, #f4f4f3 7px, #ececeb 7px, #ececeb 14px);
}
.product-builder__options--tray .product-builder__option-label { white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.product-builder__options--tray .product-builder__option-detail { margin-top: 2px; white-space: nowrap; }
/* Price lives in the pick line + total now, not on each card */
.product-builder--stage .product-builder__options--tray .product-builder__option-detail,
.product-builder--rows .product-builder__options--tray .product-builder__option-detail { display: none; }
.product-builder--stage .product-builder__options--tray .product-builder__option-subtitle,
.product-builder--rows .product-builder__options--tray .product-builder__option-subtitle { display: none; }

/* Desktop step arrows (hidden on touch widths, where you just swipe) */
.product-builder__tray-wrap { position: relative; }
.product-builder__tray-arrow {
  position: absolute;
  top: 52px;
  width: 34px;
  height: 34px;
  display: none;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  cursor: pointer;
  z-index: 5;
}
.product-builder__tray-arrow--prev { left: 0; }
.product-builder__tray-arrow--next { right: 0; }
.product-builder__tray-arrow span {
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
}
.product-builder__tray-arrow--prev span { transform: rotate(135deg); margin-left: 3px; }
.product-builder__tray-arrow--next span { transform: rotate(-45deg); margin-right: 3px; }
.product-builder--stage .product-builder__tray-arrow {
  background: var(--pb-surface, #171a21);
  border: 1px solid var(--pb-line-strong, rgba(255, 255, 255, 0.2));
  color: var(--pb-ink, #f2f4f7);
}
.product-builder--stage .product-builder__tray-arrow:hover { background: var(--pb-surface-2, #1f232c); }
@media (min-width: 760px) {
  .product-builder--stage .product-builder__tray-arrow { display: inline-flex; }
}

/* =========================================================
   HORIZONTAL MODEL (experimental) — the model art is rotated
   90° into a short, wide band so the reclaimed vertical space
   goes to a larger option tray. JS (fitModel) sizes the band
   and the (square, rotated) preview; the card clips the rest.
   ========================================================= */
.product-builder--stage.product-builder--model-h .product-builder__preview-column { flex: 0 0 auto; }
.product-builder--stage.product-builder--model-h .product-builder__controls-column { flex: 1 1 auto; min-height: 0; }
.product-builder--stage.product-builder--model-h .product-builder__summary-card { margin-top: auto; }
.product-builder--stage.product-builder--model-h .product-builder__preview-card {
  position: relative;
  overflow: hidden;
}
.product-builder--stage.product-builder--model-h .product-builder__preview {
  position: absolute;
  top: 50%;
  left: 50%;
  max-width: none;
  max-height: none;
  transform: translate(-50%, -50%) rotate(90deg);
  transform-origin: center;
}

/* =========================================================
   ROWS MODE — locked app frame: the model and the Add bar stay
   put; only the component rows scroll in the window between
   them. Section height is set by JS (fitStage) to the viewport.
   Desktop: model left (centred), rows scroll right.
   Mobile:  model top, rows scroll, Add bar bottom.
   ========================================================= */
/* Page-scroll (not a fixed viewport frame): the switcher bar above scrolls away
   as you go, giving the builder that space back. The model and Add bar are
   sticky to the viewport, so a swipe anywhere — model included — scrolls. */
.product-builder--rows { padding: 0 20px; overflow-x: clip; }
.product-builder--rows .product-builder__home-link,
.product-builder--rows .product-builder__mobile-intro,
.product-builder--rows .product-builder__subheading { display: none; }
.product-builder--rows .product-builder__inner {
  max-width: var(--container-max-width, 1200px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.8fr);
  gap: 24px;
  align-items: start;
}
.product-builder--rows .product-builder__preview-column {
  position: sticky;
  top: 0;
  align-self: start;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--pb-ground, #0e1013);
  padding: 14px 0;
  z-index: 2;
}
.product-builder--rows .product-builder__heading { text-align: center; margin: 0 0 10px; font-size: 20px; }
.product-builder--rows .product-builder__preview-card {
  width: 100%;
  max-width: min(620px, 82vh);
  margin: 0 auto;
  padding: 10px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 16px;
  box-shadow: 0 14px 40px -22px rgba(0, 0, 0, 0.5);
}
.product-builder--rows .product-builder__preview {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 12px;
  --builder-model-scale: 1.1;
}
.product-builder--rows .product-builder__preview-layer { top: 0; }

/* Right column: rows scroll in a window; the Add bar is pinned at the bottom */
.product-builder--rows .product-builder__controls-column {
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: transparent;
  opacity: 1;
  position: static;
  z-index: auto;
  width: auto;
  padding: 0;
}
.product-builder--rows .product-builder__controls {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 4px 0 8px 0;
}

/* One component per row */
.product-builder__row { padding: 6px 0 10px; border-bottom: 1px solid rgba(0, 0, 0, 0.08); }
.product-builder__row:last-of-type { border-bottom: 0; }
.product-builder__row-head { display: flex; align-items: baseline; gap: 10px; padding: 0 2px 4px; }
.product-builder__row-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  color: #6b7280;
}
.product-builder__row-pick { margin-left: auto; }
.product-builder__row-pick .product-builder__pick-name { font-size: 14px; }

/* Rows sliders are left-aligned (not centred coverflow); tap a card to pick it */
.product-builder--rows .product-builder__options--tray {
  padding: 4px 2px 8px;
  scroll-snap-type: x proximity;
}
.product-builder--rows .product-builder__options--tray .product-builder__option {
  width: 170px;
  height: 205px;
  opacity: 1;
  transform: none;
  scroll-snap-align: start;
}
.product-builder--rows .product-builder__option-thumb { height: 155px; }
.product-builder--rows .product-builder__option.is-selected { border-color: #1565c0; box-shadow: 0 0 0 1px #1565c0; }
.product-builder--rows .product-builder__tray-arrow { display: none; }

/* Red promo banners temporarily hidden in rows (freeing space under the model) */
.product-builder--rows .product-builder__discount-banner { display: none; }

/* Mobile rows: sliders become centre-snap coverflow so a swipe auto-selects the
   centred card (paired with the JS scroll-to-select). */
@media (max-width: 820px) {
  .product-builder--rows .product-builder__options--tray {
    scroll-snap-type: x mandatory;
    padding-left: calc(50% - 85px);
    padding-right: calc(50% - 85px);
  }
  .product-builder--rows .product-builder__options--tray .product-builder__option {
    scroll-snap-align: center;
    opacity: 0.5;
    transform: scale(0.92);
    transition: opacity 200ms ease, transform 200ms ease, border-color 160ms ease, box-shadow 160ms ease;
  }
  .product-builder--rows .product-builder__options--tray .product-builder__option.is-selected {
    opacity: 1;
    transform: scale(1);
  }
}

/* Pinned Add bar at the bottom of the options column (flex child, not sticky) */
/* Slim bottom bar, pinned to the bottom of the scroll: [ Randomize ] price [ Add ] */
.product-builder--rows .product-builder__summary-card {
  position: sticky;
  bottom: 0;
  z-index: 4;
  flex: 0 0 auto;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 7px 0 max(7px, env(safe-area-inset-bottom));
  background: #fff;
  border: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 0;
}
.product-builder--rows .product-builder__summary,
.product-builder--rows .product-builder__summary-heading { display: none; }
.product-builder--rows .product-builder__total-row {
  flex: 0 0 auto;
  order: 1;
  margin: 0;
  border: 0;
  padding: 0 4px 0 2px;
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 12px;
}
.product-builder--rows .product-builder__total-row strong { font-size: 17px; }
/* Randomize removed from the bar so Add to cart fills the width and fits */
.product-builder--rows .product-builder__randomize-row { display: none; }
.product-builder--rows .product-builder__add-button {
  flex: 1 1 auto;
  min-height: 0;
  margin: 0;
  padding: 10px 20px;
  font-size: 14px;
  order: 2;
  text-align: center;
}

/* Rows mobile: single-column app frame — model on top, rows scroll, Add bar bottom.
   grid-rows auto/1fr gives the options column the remaining height so its inner
   list scrolls while the model (row 1) and Add bar (pinned) stay put. */
@media (max-width: 820px) {
  .product-builder--rows { padding: 0 12px; }
  .product-builder--rows .product-builder__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
  }
  /* Model stays sticky on top (from the base rule); rows scroll under it, Add
     bar sticky at the bottom — swipe anywhere to scroll. */
  .product-builder--rows .product-builder__preview-column {
    justify-content: flex-start;
    padding: 8px 0 6px;
    border-bottom: 1px solid var(--pb-line, rgba(255, 255, 255, 0.12));
  }
  .product-builder--rows .product-builder__preview-card { max-width: 200px; padding: 6px; box-shadow: none; }
}

/* Bottom action bar — total + randomize + add, always visible */
.product-builder--stage .product-builder__summary-card {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin: 0;
  padding: 10px 0 12px;
  border: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 0;
  background: transparent;
}
.product-builder--stage .product-builder__summary,
.product-builder--stage .product-builder__summary-heading { display: none; }
/* Bottom bar order: [Randomize] ......... [Total] [Add] */
.product-builder--stage .product-builder__total-row {
  flex: 0 0 auto;
  order: 2;
  margin: 0 0 0 auto;
  border: 0;
  padding: 0;
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 13px;
}
.product-builder--stage .product-builder__total-row > span {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 11px;
  opacity: 0.55;
}
.product-builder--stage .product-builder__total-row strong { font-size: 20px; }
.product-builder--stage .product-builder__randomize-row {
  display: flex;
  width: auto;
  margin: 0;
  grid-template-columns: none;
  order: 1;
}
.product-builder--stage .product-builder__randomize-button {
  width: auto;
  min-height: 0;
  padding: 11px 16px;
  font-size: 13px;
}
.product-builder--stage .product-builder__add-button {
  width: auto;
  min-height: 0;
  margin: 0;
  padding: 12px 24px;
  order: 3;
}
.product-builder--stage .product-builder__error,
.product-builder--stage .product-builder__success { flex-basis: 100%; margin: 6px 0 0; order: 5; }

/* =========================================================
   DARK THEME — "premium" palette + type. Shared by stage and
   rows (any section with .product-builder--dark). Token-driven,
   so re-skinning is a matter of changing values here.
   ========================================================= */
.product-builder--dark {
  --pb-ground: #0a0a0a;
  --pb-surface: #141414;
  --pb-surface-2: #242424;
  --pb-ink: #ffffff;
  --pb-sale: #de2a2a;          /* brand product_on_sale_accent */
  --pb-ink-dim: #b8b8b8;
  --pb-muted: #8c8c8c;
  --pb-line: rgba(255, 255, 255, 0.10);
  --pb-line-strong: rgba(255, 255, 255, 0.20);
  --pb-accent: #405de6;        /* brand accent_color — buttons + selection */
  --pb-accent-hover: #5470ea;
  --pb-accent-ink: #ffffff;
  --pb-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --pb-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  background: var(--pb-ground);
  color: var(--pb-ink);
  font-family: var(--pb-sans);
}

/* Model sits on a light card so the product pops against the dark ground */
.product-builder--dark .product-builder__preview-card {
  background: #ffffff;
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow: 0 18px 44px -24px rgba(0, 0, 0, 0.8);
}
.product-builder--dark .product-builder__preview-empty { color: var(--pb-muted); }

/* Component rail */
.product-builder--dark .product-builder__rail-chip {
  background: var(--pb-surface);
  border-color: var(--pb-line);
  color: var(--pb-ink);
}
.product-builder--dark .product-builder__rail-chip.is-active {
  background: #1b2233;
  border-color: var(--pb-accent);
  box-shadow: 0 0 0 2px rgba(91, 116, 242, 0.30);
}
.product-builder--dark .product-builder__rail-k { color: var(--pb-muted); }
.product-builder--dark .product-builder__rail-chip.is-missing .product-builder__rail-v { color: #ff8ba0; }

/* Tray head */
.product-builder--dark .product-builder__tray-title { color: var(--pb-ink); }
.product-builder--dark .product-builder__tray-req { color: var(--pb-muted); }

/* Option cards */
.product-builder--dark .product-builder__option {
  background: var(--pb-surface);
  border-color: var(--pb-line);
  color: var(--pb-ink);
}
.product-builder--dark .product-builder__options--tray .product-builder__option:hover:not(:disabled) {
  border-color: var(--pb-line-strong);
}
.product-builder--dark .product-builder__option.is-selected {
  border-color: var(--pb-accent);
  box-shadow: 0 0 0 1px var(--pb-accent);
}
.product-builder--dark .product-builder__option-subtitle { color: var(--pb-muted); opacity: 1; }
.product-builder--dark .product-builder__option-detail {
  color: var(--pb-ink-dim);
  opacity: 1;
  font-family: var(--pb-mono);
}
.product-builder--dark .product-builder__option.is-sold-out .product-builder__option-detail { color: #ff8ba0; }

/* Action bar */
.product-builder--dark .product-builder__summary-card { border-top-color: var(--pb-line); }
.product-builder--dark .product-builder__total-row > span { color: var(--pb-muted); }
.product-builder--dark .product-builder__total-row strong {
  font-family: var(--pb-mono);
  color: var(--pb-ink);
}
.product-builder--dark .product-builder__add-button {
  background: var(--pb-accent);
  border: 0;
  color: var(--pb-accent-ink);
  box-shadow: 0 10px 24px -8px rgba(91, 116, 242, 0.55);
}
.product-builder--dark .product-builder__add-button:hover:not(:disabled) { background: var(--pb-accent-hover); }
.product-builder--dark .product-builder__randomize-button {
  background: transparent;
  border: 1px solid var(--pb-line-strong);
  color: var(--pb-ink);
}
.product-builder--dark .product-builder__randomize-button:hover:not(:disabled) { background: var(--pb-surface-2); }

/* Rows-mode dark tweaks (elements unique to rows) */
.product-builder--dark .product-builder__row { border-bottom-color: var(--pb-line); }
.product-builder--dark .product-builder__row-label { color: var(--pb-muted); }
.product-builder--dark.product-builder--rows .product-builder__option.is-selected {
  border-color: var(--pb-accent);
  box-shadow: 0 0 0 1px var(--pb-accent);
}
.product-builder--dark.product-builder--rows .product-builder__summary-card { background: var(--pb-ground); border-top-color: var(--pb-line); }
.product-builder--dark.product-builder--rows .product-builder__preview-column { border-bottom-color: var(--pb-line) !important; }

/* =========================================================
   ROWS HORIZONTAL MODEL — vertical (normal square) on desktop's
   left column; a rotated horizontal band ONLY when the layout
   stacks on mobile. Keeps the white card ("leave the background").
   ========================================================= */
@media (max-width: 820px) {
  .product-builder--rows.product-builder--model-h .product-builder__preview-card {
    width: 100%;
    max-width: 100%;
    aspect-ratio: 20 / 11;
    height: auto;
    padding: 0;
    position: relative;
    overflow: hidden;
  }
  .product-builder--rows.product-builder--model-h .product-builder__preview {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    max-width: none;
    max-height: none;
    border-radius: 0;
    transform: translate(-50%, -50%) rotate(90deg);
    transform-origin: center;
  }
}

/* =========================================================
   TEST THEME — keep TWO columns on mobile (page-scroll,
   model dominant left, our row sliders on the right).
   Overrides the shared engine's mobile model-on-top collapse.
   ========================================================= */
@media (max-width: 820px) {
  .product-builder--rows .product-builder__inner {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: 10px;
  }
  .product-builder--rows .product-builder__preview-column { justify-content: center; padding: 6px 0; border-bottom: 0; }
  .product-builder--rows .product-builder__preview-card { max-width: 100%; box-shadow: none; }
  .product-builder--rows .product-builder__options--tray .product-builder__option { width: 128px; height: 162px; }
  .product-builder--rows .product-builder__option-thumb { height: 114px; }
  .product-builder--rows .product-builder__options--tray { padding-left: calc(50% - 64px); padding-right: calc(50% - 64px); }
}

/* =========================================================
   TEST THEME — model matches the baseline example: a SQUARE
   canvas (the coordinate space the transparent components were
   authored/positioned for) at a large size, so the layer
   offsets composite correctly. Only the right side (rows) and
   the dark styling are what we changed. Shrinks with the column.
   ========================================================= */
.product-builder--rows .product-builder__preview {
  aspect-ratio: 1 / 1;
  width: min(100%, 78vh);
  max-width: 720px;
  margin: 0 auto;
  overflow: visible;
  --builder-model-scale: 1.1;
}
.product-builder--rows .product-builder__preview-card {
  width: 100%;
  max-width: 760px;
  max-height: none;
  margin: 0 auto;
}
.product-builder--rows .product-builder__preview-layer { top: 0; }

/* Mobile model (test theme): match the baseline — a TALLER canvas + bigger zoom
   so the tall pen fills the narrower left column instead of sitting small in a
   square with transparent margins. overflow:hidden crops the (transparent)
   sides so the zoom doesn't spill. Tune the scale values to taste. */
@media (max-width: 820px) {
  .product-builder--rows .product-builder__preview {
    width: 100%;
    max-width: none;
    aspect-ratio: 1 / 1.6;
    overflow: hidden;
    --builder-model-scale: 2.4;
  }
}
@media (max-width: 500px) {
  .product-builder--rows .product-builder__preview { --builder-model-scale: 3.0; }
}

/* =========================================================
   TEST THEME — option ROWS in the (inline) right column only:
   one horizontal slider per component + thumbnails + slim Add
   bar + dark. The LEFT column / model stays the untouched
   baseline inline layout. Dark surfaces come from --dark.
   ========================================================= */
.product-builder--optrows .product-builder__controls { display: flex; flex-direction: column; gap: 6px; }
.product-builder--optrows .product-builder__controls-column { background: transparent; opacity: 1; }
.product-builder--optrows .product-builder__heading,
.product-builder--optrows .product-builder__subheading,
.product-builder--optrows .product-builder__mobile-intro,
.product-builder--optrows .product-builder__discount-banner { display: none; }

.product-builder--optrows .product-builder__row-pick { margin-left: auto; }
.product-builder--optrows .product-builder__row-pick .product-builder__pick-name { font-size: 14px; }
.product-builder--optrows .product-builder__options--tray .product-builder__option {
  width: 150px; height: 190px; opacity: 1; transform: none; scroll-snap-align: start;
}
.product-builder--optrows .product-builder__option-thumb { height: 140px; }
.product-builder--optrows .product-builder__options--tray .product-builder__option-detail,
.product-builder--optrows .product-builder__options--tray .product-builder__option-subtitle { display: none; }
.product-builder--optrows .product-builder__option.is-selected { border-color: var(--pb-accent, #405de6); box-shadow: 0 0 0 1px var(--pb-accent, #405de6); }
.product-builder--optrows .product-builder__tray-arrow { display: none; }

/* Slim bottom bar: price + Add to cart */
.product-builder--optrows .product-builder__summary-card {
  display: flex; flex-wrap: nowrap; align-items: center; gap: 8px;
  margin: 8px 0 0; padding: 8px 0;
  background: transparent; border: 0; border-top: 1px solid var(--pb-line, rgba(255,255,255,.12)); border-radius: 0;
}
.product-builder--optrows .product-builder__summary,
.product-builder--optrows .product-builder__summary-heading { display: none; }
.product-builder--optrows .product-builder__total-row {
  flex: 0 0 auto; order: 1; margin: 0; border: 0; padding: 0 4px 0 2px;
  display: flex; align-items: baseline; gap: 6px; font-size: 12px;
}
.product-builder--optrows .product-builder__total-row strong { font-size: 17px; }
.product-builder--optrows .product-builder__randomize-row { display: none; }
.product-builder--optrows .product-builder__add-button {
  flex: 1 1 auto; min-height: 0; margin: 0; padding: 10px 20px; font-size: 14px; order: 2; text-align: center;
}

/* Mobile: coverflow swipe-to-select in the narrower right column */
@media (max-width: 820px) {
  .product-builder--optrows .product-builder__options--tray {
    scroll-snap-type: x mandatory;
    padding-left: calc(50% - 75px);
    padding-right: calc(50% - 75px);
  }
  .product-builder--optrows .product-builder__options--tray .product-builder__option {
    scroll-snap-align: center; opacity: .5; transform: scale(.92);
  }
  .product-builder--optrows .product-builder__options--tray .product-builder__option.is-selected {
    opacity: 1; transform: scale(1);
  }
}

/* =========================================================
   TEST THEME (desktop) — thin model column: keep the SQUARE
   canvas (so the component offsets stay correct) but crop the
   white card to a thin window centred on the pen, and give the
   freed width to the right (options) column. Pen stays big.
   Tune the column width / card window if the pen gets clipped.
   ========================================================= */
@media (min-width: 901px) {
  .product-builder--optrows .product-builder__inner {
    grid-template-columns: min(400px, 34vw) minmax(0, 1fr);
    gap: 32px;
  }
  .product-builder--optrows .product-builder__preview-card {
    width: 100%;
    max-width: none;
    padding: 0;
    overflow: hidden;
    position: relative;
    height: min(78vh, 640px);
    background: #fff;
  }
  .product-builder--optrows .product-builder__preview {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    height: 100%;
    width: min(78vh, 640px);   /* full square; the card window crops its sides */
    aspect-ratio: 1 / 1;
    min-width: 0;
    --builder-model-scale: 1.1;
  }
}

/* =========================================================
   TEST THEME (card_thumbs) — back to the baseline example:
   baseline stacked option cards (now with thumbnails) + dark.
   Model = baseline sizing, shown on the dark ground with NO
   white card for now ("add the white back later"). The left
   column / model sizing is NOT touched.
   ========================================================= */
.product-builder--thumbs .product-builder__preview-card {
  background: transparent;
  border: 0;
  box-shadow: none;
}

/* =========================================================
   TEST THEME (desktop) — white background as a FULL-HEIGHT
   vertical panel behind the model (~50% of the left column),
   instead of a box hugging the model. The model composites on
   top; its sizing is untouched.
   ========================================================= */
@media (min-width: 901px) {
  .product-builder--thumbs .product-builder__preview-column {
    height: 100vh;
    max-height: none;
    top: 0;
    justify-content: center;
    align-items: center;
  }
  .product-builder--thumbs .product-builder__preview-column::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 50%;
    background: #fff;
    z-index: 0;
  }
  .product-builder--thumbs .product-builder__preview-card {
    position: relative;
    z-index: 1;
  }
}

/* =========================================================
   TEST THEME (card_thumbs) — dark fixes for the baseline
   STACKED layout: kill the white veils / white group cards /
   ghosted headings / red promo pills that were bleeding
   through from the light baseline. Option cards stay as-is.
   ========================================================= */
/* Opaque dark right column so the (overflowing, scaled) model can never show
   through behind the option cards — keeps the model strictly on the left.
   The negative margin + matching padding extends that dark background LEFT over
   the grid gap too, so the model can't peek through the small gap between the
   white column and the cards (content position is unchanged). */
.product-builder--thumbs .product-builder__controls-column {
  background: var(--pb-ground, #0e1013); opacity: 1;
  margin-left: -48px; padding-left: 48px;
  padding-top: 20px;   /* small breathing room below the tabs, matching the inter-section gap */
}
@media screen and (max-width: 900px) {
  .product-builder--thumbs .product-builder__controls-column { margin-left: -12px; padding-left: 12px; }
}
.product-builder--thumbs .product-builder__group {
  background: transparent;
  border: 0;
  padding: 4px 0 18px;
}
.product-builder--thumbs .product-builder__group-title { color: var(--pb-ink, #f2f4f7); background: none; }
.product-builder--thumbs .product-builder__group-requirement { color: var(--pb-muted, #7d8592); }
/* Hide the ghosted heading + the light/red promo bits for now */
.product-builder--thumbs .product-builder__heading,
.product-builder--thumbs .product-builder__subheading,
.product-builder--thumbs .product-builder__mobile-intro,
.product-builder--thumbs .product-builder__expiration-note { display: none; }

/* =========================================================
   TEST THEME (card_thumbs) — fixed bottom ACTION BAR.
   The build summary (toggle + heading + line-item breakdown) is
   hidden; Total + Randomize + Add sit on one full-bleed line
   docked to the bottom of the viewport, solid + edge to edge.
   ========================================================= */
.product-builder--thumbs .product-builder__summary-toggle,
.product-builder--thumbs .product-builder__summary-heading,
.product-builder--thumbs .product-builder__summary { display: none !important; }
/* No dark gap under the grid, and none between the switcher bar and the
   builder (the switcher's own 14px bottom padding is the breathing room). */
.product-builder--thumbs.product-builder--inline { padding-top: 0; padding-bottom: 0; }

/* ---- DESKTOP action bar (applies at all widths; mobile overrides come LAST) ----
   Covers the whole right column: sticky, pinned to the bottom, one compact line,
   extended to the viewport's right edge on the same black ground. */
.product-builder--thumbs .product-builder__summary-card {
  position: sticky; bottom: 0; z-index: 6;
  display: flex; flex-wrap: nowrap; align-items: center; gap: 12px;
  margin: 0 -20px 0 0;                 /* reach the viewport right edge (section pad = 20px) */
  padding: 12px 20px 12px 0; border: 0; border-radius: 0;
  background: var(--pb-ground, #0e1013);
  box-shadow: 0 -8px 20px rgba(0, 0, 0, 0.4);
}
/* error / success take their own line above the buttons when present */
.product-builder--thumbs .product-builder__error,
.product-builder--thumbs .product-builder__success { flex: 1 0 100%; order: 0; margin: 0; }
/* [Randomize] .......... [Total] [Add] */
.product-builder--thumbs .product-builder__randomize-row { display: flex; width: auto; margin: 0; grid-template-columns: none; order: 1; }
.product-builder--thumbs .product-builder__randomize-button {
  width: auto; min-height: 0; padding: 11px 16px; font-size: 13px;
  background: transparent; color: var(--pb-ink, #f2f4f7); border: 1px solid var(--pb-line, rgba(255, 255, 255, 0.14));
}
.product-builder--thumbs .product-builder__randomize-button:hover:not(:disabled) { background: var(--pb-surface-2, #1f232c); transform: none; box-shadow: none; }
.product-builder--thumbs .product-builder__total-row {
  flex: 0 0 auto; order: 2; margin: 0 0 0 auto; padding: 0; border: 0;
  display: flex; align-items: baseline; gap: 8px; color: var(--pb-ink, #f2f4f7);
}
.product-builder--thumbs .product-builder__total-row > span { text-transform: uppercase; letter-spacing: 0.06em; font-size: 11px; color: var(--pb-muted, #7d8592); }
.product-builder--thumbs .product-builder__total-row strong { font-size: 20px; color: var(--pb-ink, #f2f4f7); }
.product-builder--thumbs .product-builder__add-button {
  width: auto; min-height: 0; margin: 0; padding: 12px 24px; order: 3;
  border-radius: 12px;                                  /* match the mobile bar (not the pill) */
  background: #405de6; border: 0; color: #fff;          /* SITE brand blue = the buy CTA */
  box-shadow: 0 10px 24px -8px rgba(64, 93, 230, 0.55);
}
.product-builder--thumbs .product-builder__add-button:hover:not(:disabled) { background: #3550d4; }

/* ---- MOBILE action bar (LAST, so it wins at <=820px) ----
   Same as desktop: sticky INSIDE the right column (model stays uncovered on the
   left), just compact. ONE line — [Randomize] [price] [Add] — to give the
   vertical space back to the option rows. */
@media (max-width: 820px) {
  .product-builder--thumbs .product-builder__summary-card {
    margin: 0 -10px 0 0;              /* reach the mobile viewport edge (section pad = 10px) */
    padding: 8px 10px 8px 0; gap: 8px; align-items: center;
    /* wrap stays on ONLY so error/success (flex-basis 100%) can take their own
       line — the three controls below can never force a wrap themselves */
    flex-wrap: wrap;
  }
  .product-builder--thumbs .product-builder__randomize-button { padding: 9px 10px; font-size: 12px; white-space: nowrap; }
  .product-builder--thumbs .product-builder__total-row { flex: 0 1 auto; margin: 0 0 0 auto; gap: 4px; }
  .product-builder--thumbs .product-builder__total-row > span { display: none; }
  .product-builder--thumbs .product-builder__total-row strong {
    font-size: 15px; white-space: nowrap;
    display: flex; flex-direction: column; align-items: flex-end; line-height: 1.05;
  }
  .product-builder--thumbs .product-builder__total-original { font-size: 15px; }   /* same size as the discounted price */
  /* ONE line: [Randomize] [price] [Add] — basis 0 means Add grows into the
     leftover space instead of wrapping to a second row */
  .product-builder--thumbs .product-builder__add-button {
    flex: 1 1 0; min-width: 0; order: 4; padding: 11px 12px; font-size: 13px;
    border-radius: 12px; white-space: nowrap; text-align: center;
  }
  .product-builder--thumbs .product-builder__controls-column { padding-bottom: 0; }
}

/* Left column fully white (replaces the 50% panel strip) */
.product-builder--thumbs .product-builder__preview-column { background: #fff; }
.product-builder--thumbs .product-builder__preview-column::before { content: none; display: none; }

/* Mobile: round all four corners of the white model rail, matching the
   mtop/htop banner treatment. The rail is viewport-tall and sticky, so a small
   stuck offset + reduced height keep the rounded top corners visible while
   scrolling (a flush 100vh strip would push every corner off-screen). Top
   corners still start under the overlapping header and appear as it scrolls
   away. Same rule covers the reversed layout. */
@media (max-width: 820px) {
  .product-builder--thumbs .product-builder__preview-column {
    border-radius: 14px;
    top: 10px;
    height: calc(100vh - 10px);
  }
}

/* Model extends UP behind the (overlapping) header bar so it's already full-
   height at the very top from scroll 0 — no slide-up. The header (z-index:5)
   covers this overlap and scrolls away to reveal the white. Sticky top:0 +
   100vh height come from the rules above; only the start point shifts. */
.product-builder--thumbs .product-builder__preview-column {
  margin-top: calc(-1 * var(--pb-switcher-h, 74px));
}


/* =========================================================
   TEST THEME (card_thumbs) — MOBILE: the right column becomes
   row sliders (one per component, swipe-to-select coverflow),
   while desktop keeps the stacked cards.
   ========================================================= */
@media (max-width: 820px) {
  .product-builder--thumbs .product-builder__controls { display: flex; flex-direction: column; gap: 6px; }
  .product-builder--thumbs .product-builder__row { padding: 6px 0 10px; border-bottom: 1px solid var(--pb-line, rgba(255,255,255,.1)); }
  .product-builder--thumbs .product-builder__row:last-of-type { border-bottom: 0; }
  .product-builder--thumbs .product-builder__row-head { display: flex; align-items: flex-start; gap: 10px; padding: 0 2px 4px; }
  .product-builder--thumbs .product-builder__row-label { display: flex; flex-direction: column; line-height: 1.14; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; color: var(--pb-muted, #7d8592); }
  .product-builder--thumbs .product-builder__row-pick { margin-left: auto; }
  /* Keep the row header a constant height AND never let a long option name run
     off-screen: the name wraps but is capped at two lines whose space is always
     reserved (so a 1->2 line change doesn't push the tray/rows below), with the
     price on its own line beneath it. */
  .product-builder--thumbs .product-builder__row-pick {
    display: flex; flex-direction: column; align-items: flex-end;
    text-align: right; line-height: 1.2;
    max-width: 52%; min-width: 0;   /* leave room for the group label on the left */
  }
  .product-builder--thumbs .product-builder__row-pick .product-builder__pick-name {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; white-space: normal;
    min-height: 2.4em;              /* always two lines' worth of space */
  }
  .product-builder--thumbs .product-builder__options--tray {
    scroll-snap-type: x mandatory;
    padding-left: calc(50% - 75px);
    padding-right: calc(50% - 75px);
  }
  .product-builder--thumbs .product-builder__options--tray .product-builder__option {
    width: 150px; height: 190px; scroll-snap-align: center;
    opacity: .16; transform: scale(.86);   /* default = quiet (this is what the LEFT cards get) */
    transition: opacity .18s ease, transform .18s ease;
  }
  /* Cards AFTER the selected one (to the right) stay clearly visible — "more to explore →".
     Left cards keep the quiet default above; swipe-back stays discoverable via the faint sliver. */
  .product-builder--thumbs .product-builder__options--tray .product-builder__option.is-selected ~ .product-builder__option {
    opacity: .55; transform: scale(.92);
  }
  .product-builder--thumbs .product-builder__options--tray .product-builder__option.is-selected { opacity: 1; transform: scale(1); }
  .product-builder--thumbs .product-builder__option-thumb { height: 140px; }
  .product-builder--thumbs .product-builder__options--tray .product-builder__option-detail,
  .product-builder--thumbs .product-builder__options--tray .product-builder__option-subtitle { display: none; }
}

/* =========================================================
   TEST THEME (desktop stacked) — component title as a narrow,
   word-per-line column on the LEFT of its option cards.
   ========================================================= */
@media (min-width: 821px) {
  .product-builder--thumbs .product-builder__group {
    display: flex;
    flex-direction: row;
    gap: 18px;
    align-items: flex-start;
    padding: 10px 0 20px;
  }
  .product-builder--thumbs .product-builder__group-heading {
    flex: 0 0 92px;          /* FIXED title column so every group's cards align */
    width: 92px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    padding-top: 4px;
  }
  .product-builder--thumbs .product-builder__group-title {
    line-height: 1.12;       /* words are block-level and wrap within the fixed column */
    font-size: 16px;
    font-weight: 700;
  }
  .product-builder--thumbs .product-builder__group-requirement { white-space: nowrap; }
  .product-builder--thumbs .product-builder__options { flex: 1 1 auto; }
}

/* Build-summary show/hide toggle (collapsed by default) */
.product-builder__summary-card--collapsed .product-builder__summary,
.product-builder__summary-card--collapsed .product-builder__summary-heading { display: none; }
.product-builder__summary-toggle {
  display: inline-block;
  background: transparent;
  border: 0;
  color: var(--pb-muted, #7d8592);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
  padding: 0 0 10px;
  margin: 0;
}
.product-builder__summary-toggle:hover { color: var(--pb-ink, #f2f4f7); }

/* Vertical title: each word on its own line (JS renders word spans) */
.product-builder__group-title-word { display: block; }


/* =========================================================
   CONTAINED / EMBEDDED  (.product-builder--thumbs.--contained)
   Lets the builder sit as a normal in-page block (homepage,
   product page) instead of a full-page takeover: the model sizes
   to the section rather than the viewport, drops the behind-the-
   switcher overlap, and the action bar sticks WITHIN the section
   (never viewport-fixed), so it scrolls away with the block.
   ========================================================= */
.product-builder--thumbs.product-builder--contained .product-builder__preview-column {
  margin-top: 0;
  height: min(70vh, 640px);
  max-height: min(70vh, 640px);
  top: 20px;
}
.product-builder--thumbs.product-builder--contained .product-builder__summary-card {
  position: sticky; left: auto; right: auto; bottom: 0;
}
@media (max-width: 820px) {
  .product-builder--thumbs.product-builder--contained .product-builder__summary-card {
    position: sticky; left: auto; right: auto; margin: 0;
  }
}

/* =========================================================
   REVERSED  (.product-builder--thumbs.--reversed)  — MOBILE ONLY.
   On phones, mirror the layout: controls on the LEFT, model on the RIGHT.
   Desktop is intentionally left untouched (always model-left), so the whole
   block lives inside the mobile breakpoint. Reverses the grid order and flips
   the two side-specific tricks (dark gap-cover + full-bleed action bar) to the
   opposite edge.
   ========================================================= */
@media (max-width: 820px) {
  .product-builder--thumbs.product-builder--reversed .product-builder__preview-column { order: 2; }
  .product-builder--thumbs.product-builder--reversed .product-builder__controls-column { order: 1; }
  /* mirror the asymmetric track sizes so the model keeps its 38% on the right */
  .product-builder--thumbs.product-builder--reversed .product-builder__inner {
    grid-template-columns: minmax(0, 1fr) 38%;
  }
  /* gap-cover now guards the RIGHT edge of the controls (model overflows leftward) */
  .product-builder--thumbs.product-builder--reversed .product-builder__controls-column {
    margin-left: 0; padding-left: 0;
    margin-right: -12px; padding-right: 12px;
  }
  /* action bar reaches the LEFT viewport edge instead of the right */
  .product-builder--thumbs.product-builder--reversed .product-builder__summary-card {
    margin: 0 0 0 -10px; padding: 8px 10px 8px 10px;
  }
  /* contained + reversed: bar stays within the section, no viewport-edge reach */
  .product-builder--thumbs.product-builder--contained.product-builder--reversed .product-builder__summary-card {
    margin: 0; padding: 12px 0;
  }
}

/* =========================================================
   MOBILE "MODEL ON TOP"  (.product-builder--thumbs.--mtop) — MOBILE ONLY.
   Experimental stacked mobile layout: a full-width model banner PINNED at the
   top (stays visible while the option rows scroll under it), rows free-flow at
   full width, and the action bar pinned to the bottom as a single price + Add
   line. Overrides the side-by-side grid (and any mobile reverse). Desktop
   untouched.
   ========================================================= */
@media (max-width: 820px) {
  /* Block flow (not grid) so the sticky model can stick across the WHOLE scroll
     — a sticky grid item is trapped inside its own cell. DOM order (model then
     controls) puts the model on top. */
  .product-builder--thumbs.product-builder--mtop .product-builder__inner {
    display: block;
  }
  /* The action bar is viewport-fixed, so a short component row would let the
     white page background peek out between the section's end and the bar —
     keep the dark ground running the full screen height instead. */
  .product-builder--thumbs.product-builder--mtop {
    min-height: 100vh;
    min-height: 100svh;
  }

  /* model = full-width banner PINNED to the top; option rows scroll beneath it */
  .product-builder--thumbs.product-builder--mtop .product-builder__preview-column {
    position: sticky; top: 0; z-index: 4;
    height: auto; max-height: none;
    margin-top: 0;                 /* cancel the behind-switcher pull */
    width: auto; min-width: 0; padding: 12px 0 10px;
    background: #fff;
    overflow: hidden;              /* clip the model to the white banner so taller
                                      builds can't spill onto the rows below */
    border-radius: 14px;           /* full rounding — when stuck, the top corners
                                      float over the rows scrolling beneath */
    box-shadow: 0 6px 14px -8px rgba(0,0,0,.35);   /* subtle lift over the scrolling rows */
  }
  .product-builder--thumbs.product-builder--mtop .product-builder__preview-card {
    max-width: 320px; margin: 0 auto; padding: 0; background: transparent;
  }
  .product-builder--thumbs.product-builder--mtop .product-builder__preview {
    width: 100%; max-width: 320px; min-width: 0;
    aspect-ratio: 1 / 1;
    --builder-model-scale: 1.08;
  }
  /* the model sits a touch high in its box — nudge the layers down so it
     centers within the white banner */
  .product-builder--thumbs.product-builder--mtop .product-builder__preview-layer { top: 14px; }

  /* controls span the full width; leave room for the pinned bottom bar */
  .product-builder--thumbs.product-builder--mtop .product-builder__controls-column {
    margin: 0; padding: 10px 10px 92px; min-width: 0;
  }

  /* action bar PINNED to the viewport bottom, full width (inherits the default
     thumbs mobile bar layout: Randomize + price, then full-width Add) */
  .product-builder--thumbs.product-builder--mtop .product-builder__summary-card {
    position: fixed; left: 0; right: 0; bottom: 0; margin: 0;
    padding: 8px 12px; z-index: 20;
  }
}

/* =========================================================
   MOBILE "HORIZONTAL MODEL ON TOP"  (.--mtop.--mhband) — MOBILE ONLY.
   Rides on the --mtop scaffolding (sticky top banner, full-width rows,
   pinned bottom bar); this modifier only reshapes the banner: the square
   preview art is centered and rotated 90° inside a short, wide band and
   the band clips its top/bottom — the model lies sideways. Band math is
   fitModel's stage numbers in CSS: side = min(100vw, 26vh * 2.4), band
   height = side / 2.4. No JS sizing, so runtime ?view= switching is safe.
   ========================================================= */
@media (max-width: 820px) {
  .product-builder--thumbs.product-builder--mtop.product-builder--mhband {
    --pb-hband-side: min(100vw, 62.4vh);
  }
  .product-builder--thumbs.product-builder--mtop.product-builder--mhband .product-builder__preview-column {
    padding: 0;
  }
  .product-builder--thumbs.product-builder--mtop.product-builder--mhband .product-builder__preview-card {
    position: relative; overflow: hidden;
    width: 100%; max-width: none; margin: 0;
    height: calc(var(--pb-hband-side) / 2.4);
    background: transparent;
  }
  .product-builder--thumbs.product-builder--mtop.product-builder--mhband .product-builder__preview {
    position: absolute; top: 50%; left: 50%;
    width: var(--pb-hband-side); max-width: none; min-width: 0;
    aspect-ratio: 1 / 1;
    transform: translate(-50%, -50%) rotate(90deg);
    transform-origin: center;
    --builder-model-scale: 1;
  }
  .product-builder--thumbs.product-builder--mtop.product-builder--mhband .product-builder__preview-layer { top: 0; }
}

/* TEMP (2026-08-03): hide ALL builder discount banners (the three
   discount_banner settings) at every width. The banner copy stays in the
   template settings — delete this one rule to bring them all back. */
.product-builder .product-builder__discount-banner { display: none !important; }

/* =========================================================
   CUSTOM SELECTION  (.product-builder--ctabs) — MOBILE ONLY.
   Benchmade-style component navigation: a horizontal chip bar
   (one chip per component) decides which single option row shows
   below it; options that are variants of one product collapse
   into a family card whose variants sit in a compact strip under
   the tray. Enabled by the mobile_component_tabs setting or
   ?bsel=tabs; JS drives visibility. Desktop unchanged.
   ========================================================= */
@media (min-width: 0px) {  /* ctabs-namespaced: safe at all widths */
  .product-builder--ctabs .product-builder__tray-head {
    display: block;
    background: var(--pb-ground, #0e1013);
    margin: 0 -10px;
    padding: 10px 10px 8px;
  }
  /* under the horizontal band the chip bar sticks just below the model */
  .product-builder--ctabs.product-builder--mtop.product-builder--mhband .product-builder__tray-head {
    position: sticky;
    top: calc(var(--pb-hband-side) / 2.4);
    z-index: 3;
  }
  .product-builder__ctabs {
    display: flex; gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .product-builder__ctabs::-webkit-scrollbar { display: none; }
  .product-builder__ctab {
    flex: 0 0 auto;
    padding: 9px 14px;
    border: 1px solid var(--pb-line, rgba(255,255,255,.14));
    border-radius: 999px;
    background: var(--pb-surface-2, #1f232c);
    color: var(--pb-ink, #f2f4f7);
    font: inherit; font-size: 12px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .05em;
    white-space: nowrap;
    cursor: pointer;
  }
  .product-builder__ctab.is-done:not(.is-active) { border-color: var(--pb-accent, #405de6); }
  .product-builder__ctab.is-active { background: #fff; color: #111; border-color: #fff; }

  /* The controls container is a GRID outside the mobile breakpoint, and its
     single track sizes to max-content — that let the swatch row expand to its
     full width instead of scrolling, blowing the sheet past the viewport.
     Force a flex column with min-width:0 so overflow-x can do its job. */
  .product-builder--ctabs .product-builder__controls {
    display: flex; flex-direction: column;
    min-width: 0; width: 100%;
  }
  .product-builder--ctabs .product-builder__row,
  .product-builder--ctabs .product-builder__swatchwrap {
    min-width: 0; width: 100%; box-sizing: border-box;
  }

  /* one component row at a time; the chip carries the component name */
  .product-builder--ctabs .product-builder__row { display: none; }
  .product-builder--ctabs .product-builder__row.is-active-row { display: block; border-bottom: 0; }
  .product-builder--ctabs .product-builder__row-label { display: none; }
  .product-builder--ctabs .product-builder__row-pick {
    margin-left: 0; max-width: 100%;
    align-items: flex-start; text-align: left;
  }

  /* family card: corner badge with the variant count */
  .product-builder--ctabs .product-builder__option.is-family { position: relative; }
  .product-builder__family-count {
    position: absolute; top: 5px; right: 5px; z-index: 1;
    padding: 2px 6px; border-radius: 4px;
    background: rgba(0, 0, 0, 0.65); color: #fff;
    font-size: 9px; font-weight: 700; letter-spacing: .04em;
  }

  /* variant strip under the tray */
  .product-builder__vstrip { padding: 6px 2px 2px; }
  .product-builder__vstrip-label {
    display: block; margin: 0 0 6px;
    font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .06em;
    color: var(--pb-muted, #7d8592);
  }
  .product-builder__vstrip-options {
    display: flex; gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .product-builder__vstrip-options::-webkit-scrollbar { display: none; }
  .product-builder--ctabs .product-builder__vstrip-options .product-builder__option {
    width: auto; height: auto; min-width: 0;
    display: flex; flex-direction: row; align-items: center; gap: 8px;
    padding: 8px 12px;
    opacity: 1 !important; transform: none !important;
    scroll-snap-align: none;
  }
  .product-builder--ctabs .product-builder__vstrip-options .product-builder__option-thumb {
    width: 28px; height: 28px; margin: 0; flex: 0 0 auto;
  }
  .product-builder--ctabs .product-builder__vstrip-options .product-builder__option-label {
    font-size: 12px; white-space: nowrap; min-height: 0;
  }
  .product-builder--ctabs .product-builder__vstrip-options .product-builder__option-detail {
    font-size: 11px; white-space: nowrap;
  }
}

/* =========================================================
   BENCHMADE MATCH  (.--ctabs.--mtop) — MOBILE ONLY.
   The customizer look: floating segmented component tabs at the
   very top, the model big and free on the dark ground beneath
   them (no white card), and the options as a bottom sheet with a
   rounded top that rises over the model as you scroll. Tabs bar
   height is --pb-ctabs-h; the model band height is --pb-model-h.
   ========================================================= */
@media (min-width: 0px) {  /* ctabs-namespaced: safe at all widths */
  .product-builder--ctabs.product-builder--mtop {
    --pb-ctabs-h: 44px;
    --pb-model-h: 44vh;
  }

  /* chip bar: floating, centered, segmented (active = white pill) */
  .product-builder--ctabs.product-builder--mtop .product-builder__tray-head {
    position: sticky; top: 0; z-index: 6;
    height: var(--pb-ctabs-h);
    margin: 0; padding: 8px 10px 0;
    background: transparent;
    pointer-events: none;              /* only the pill strip itself is tappable */
  }
  .product-builder--ctabs.product-builder--mtop .product-builder__ctabs {
    pointer-events: auto;
    width: max-content; max-width: 100%;
    margin: 0 auto; padding: 4px; gap: 8px;
    background: rgba(255, 255, 255, 0.2);
    border: 0;
    border-radius: 2px;
  }
  .product-builder--ctabs.product-builder--mtop .product-builder__ctab {
    border: 0; border-radius: 2px; background: transparent;
    color: #fff;
    height: 28px; padding: 0 14px;
    font-size: 10px; font-weight: 500; letter-spacing: normal;
  }
  .product-builder--ctabs.product-builder--mtop .product-builder__ctab.is-done:not(.is-active) {
    color: #fff;
  }
  /* scrollable-bar affordance: the clipped side fades out */
  .product-builder__ctabs.is-clipped-right {
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 32px), transparent 100%);
    mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 32px), transparent 100%);
  }
  .product-builder__ctabs.is-clipped-left {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 32px, #000 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 32px, #000 100%);
  }
  .product-builder__ctabs.is-clipped-left.is-clipped-right {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 32px, #000 calc(100% - 32px), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 32px, #000 calc(100% - 32px), transparent 100%);
  }
  .product-builder--ctabs.product-builder--mtop .product-builder__ctab.is-active {
    background: #fff; color: #000;
  }

  /* model: no white banner — big, upright, floating on the dark ground,
     tucked under the sticky sheet as it rises */
  .product-builder--ctabs.product-builder--mtop .product-builder__preview-column {
    position: sticky; top: 0; z-index: 1;
    height: calc(var(--pb-model-h) + var(--pb-ctabs-h));
    padding: var(--pb-ctabs-h) 0 0;
    margin-top: calc(-1 * var(--pb-ctabs-h));   /* model area starts behind the tabs */
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    overflow: hidden;
    display: flex; align-items: center; justify-content: center;
  }
  .product-builder--ctabs.product-builder--mtop .product-builder__preview-card {
    max-width: none; width: auto; margin: 0; padding: 0; background: transparent;
  }
  .product-builder--ctabs.product-builder--mtop .product-builder__preview {
    width: min(88vw, calc(var(--pb-model-h) - 10px));
    max-width: none; min-width: 0;
    aspect-ratio: 1 / 1;
    --builder-model-scale: 1.12;
  }
  .product-builder--ctabs.product-builder--mtop .product-builder__preview-layer { top: 0; }

  /* controls = bottom sheet: opaque, squared, flush (Benchmade) */
  .product-builder--ctabs.product-builder--mtop .product-builder__controls-column {
    position: relative; z-index: 3;
    margin: 0;
    padding: 0 12px calc(88px + env(safe-area-inset-bottom, 0px));
    background: #141414;
    border-radius: 0;
    box-shadow: none;
    min-height: calc(100vh - var(--pb-model-h) - var(--pb-ctabs-h));
  }
  /* ribbon and band sit flush — no flex gap or row padding around them */
  .product-builder--ctabs .product-builder__controls { gap: 0; }
  .product-builder--ctabs .product-builder__row { padding: 0; border-bottom: 0; }

  /* tray: Benchmade-flat — no coverflow fade, no center snap, left aligned */
  .product-builder--ctabs .product-builder__options--tray {
    scroll-snap-type: none;
    padding-left: 4px; padding-right: 4px;
  }
  .product-builder--ctabs .product-builder__options--tray .product-builder__option {
    opacity: 1 !important; transform: none !important;
    scroll-snap-align: none;
    width: 92px; height: 132px;
    padding: 7px 5px;
    border-radius: 6px;
  }
  .product-builder--ctabs .product-builder__options--tray .product-builder__option-thumb { height: 68px; margin-bottom: 4px; border-radius: 4px; }
  /* let long family/product names wrap to two lines instead of ellipsizing */
  .product-builder--ctabs .product-builder__options--tray .product-builder__option .product-builder__option-label {
    white-space: normal;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; line-height: 1.12; font-size: 11px;
  }
  .product-builder--ctabs .product-builder__options--tray .product-builder__option-detail { font-size: 10px; }

  /* pick line: small, quiet, centered over the sheet */
  .product-builder--ctabs.product-builder--mtop .product-builder__row-head { padding: 0 2px 6px; }
  .product-builder--ctabs.product-builder--mtop .product-builder__row-pick {
    align-items: center; text-align: center; margin: 0 auto;
  }
  .product-builder--ctabs.product-builder--mtop .product-builder__row-pick .product-builder__pick-name {
    min-height: 0; font-size: 13px;
  }

  /* finish strip: swatch-first (square thumb, name under, white ring when on) */
  .product-builder--ctabs .product-builder__vstrip { padding: 8px 2px 2px; }
  .product-builder--ctabs .product-builder__vstrip-options { gap: 10px; }
  .product-builder--ctabs .product-builder__vstrip-options .product-builder__option {
    flex-direction: column; align-items: center; gap: 4px;
    width: 66px; padding: 4px 3px;
    border-radius: 6px;
  }
  .product-builder--ctabs .product-builder__vstrip-options .product-builder__option-thumb {
    width: 52px; height: 52px; border-radius: 4px; overflow: hidden;
  }
  .product-builder--ctabs .product-builder__vstrip-options .product-builder__option.is-selected {
    border-color: #fff; box-shadow: 0 0 0 1px #fff;
  }
  .product-builder--ctabs .product-builder__vstrip-options .product-builder__option-label {
    white-space: nowrap; font-size: 11px;
  }
  .product-builder--ctabs .product-builder__vstrip-options .product-builder__option-detail { font-size: 10px; }

  /* action bar: continues the sheet surface */
  .product-builder--ctabs.product-builder--mtop .product-builder__summary-card {
    background: #141414;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
  }

  /* tabs row wrapper: [logo] [chips] [phantom] — width-locked so the chip strip
     scrolls inside itself instead of blowing the row out past the viewport */
  .product-builder__ctabs-row {
    display: flex; align-items: center; gap: 6px;
    width: 100%; min-width: 0;
    pointer-events: none;
  }
  .product-builder__cart-button {
    pointer-events: auto; flex: 0 0 auto;
    width: 36px; height: 36px; padding: 0; margin: 0;
    display: flex; align-items: center; justify-content: center;
    border: 0; border-radius: 2px;
    background: transparent;
    color: var(--pb-ink, #f2f4f7);
    cursor: pointer;
  }
  .product-builder--ctabs.product-builder--mtop .product-builder__randomize-button--top {
    pointer-events: auto; flex: 0 0 auto;
    width: 36px; height: 36px; padding: 0; margin: 0;
    display: flex; align-items: center; justify-content: center;
    border: 0; border-radius: 2px;
    background: rgba(255, 255, 255, 0.12);
    color: var(--pb-ink, #f2f4f7);
    min-height: 0;
  }
  .product-builder--ctabs.product-builder--mtop .product-builder__randomize-button--top svg { width: 16px; height: 16px; }
  .product-builder--ctabs.product-builder--mtop .product-builder__ctabs {
    flex: 0 1 auto; min-width: 0;
  }
  /* the section itself never scrolls sideways in the takeover styles */
  .product-builder--ctabs.product-builder--mtop { overflow-x: clip; }
  .product-builder__frame-toggle {
    pointer-events: auto; flex: 0 0 auto;
    width: 34px; height: 34px; padding: 2px;
    border: 0; border-radius: 2px;
    background: transparent;
    color: var(--pb-ink, #f2f4f7);
    font: inherit; font-size: 14px; line-height: 1; cursor: pointer;
  }
  .product-builder__frame-toggle--logo { width: 30px; height: 30px; padding: 0; }
  .product-builder__frame-toggle--logo img {
    width: 100%; height: 100%; object-fit: contain; display: block;
  }

  /* Benchmade CTA: price inside the button; the bar's own total is redundant */
  .product-builder--ctabs .product-builder__summary-card .product-builder__total-row { display: none; }
  .product-builder--ctabs .product-builder__add-button {
    text-transform: uppercase; letter-spacing: normal; font-weight: 500;
  }
  .product-builder__buy-strike { opacity: 0.55; font-weight: 600; margin-right: 7px; }

  /* category strip: Benchmade's material band — a full-bleed segmented row,
     cells filling the full height, active cell highlighted edge to edge,
     price beside the name */
  .product-builder__catstrip {
    display: flex; gap: 0; align-items: stretch;
    height: 44px;
    margin: 0 -12px;
    padding: 0;
    background: rgba(0, 0, 0, 0.25);
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
    overflow-x: auto; scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .product-builder__catstrip--empty { background: transparent; border-bottom-color: transparent; }
  .product-builder__catstrip::-webkit-scrollbar { display: none; }
  .product-builder__cat {
    flex: 0 0 auto;
    height: 100%;
    display: flex; align-items: center; gap: 6px;
    padding: 0 16px;
    border: 0; border-radius: 0;
    background: transparent;
    color: #fff;
    font: inherit; font-size: 12px; font-weight: 500;
    text-transform: uppercase; letter-spacing: normal;
    white-space: nowrap; cursor: pointer;
  }
  .product-builder__cat.is-active { background: rgba(255, 255, 255, 0.25); color: #fff; }
  .product-builder__cat-price { color: var(--pb-accent, #405de6); font-weight: 600; }
  .product-builder__cat--static { cursor: default; }

  /* one row of unlabeled photo swatches (Benchmade's color row) */
  .product-builder--ctabs .product-builder__swatchrow {
    display: flex; gap: 8px;
    padding: 6px 2px 10px;
    overflow-x: auto; scrollbar-width: none;
    scroll-snap-type: none;
  }
  .product-builder--ctabs .product-builder__swatchrow::-webkit-scrollbar { display: none; }
  /* centre when the content fits, but stay scrollable-from-start when it
     overflows — justify-content:center would push the first items off the
     left edge where they can never be scrolled back into view */
  /* !important because the tile rule sets margin:0 at equal specificity later
     in the file, which silently killed the centering */
  .product-builder--ctabs .product-builder__swatchrow > :first-child { margin-left: auto !important; }
  .product-builder--ctabs .product-builder__swatchrow > :last-child { margin-right: auto !important; }
  .product-builder__catstrip > :first-child { margin-left: auto !important; }
  .product-builder__catstrip > :last-child { margin-right: auto !important; }
  .product-builder--ctabs .product-builder__swatchrow .product-builder__option {
    flex: 0 0 auto;
    display: flex; flex-direction: column; align-items: stretch;
    width: 64px; height: 96px; min-width: 0;
    padding: 0; margin: 0;
    border: 0; border-radius: 0; overflow: visible;
    background: transparent;
    opacity: 1 !important; transform: none !important;
    scroll-snap-align: none;
  }
  .product-builder__swatch-price {
    height: 30px; flex: 0 0 30px;
    display: flex; flex-direction: column; align-items: flex-end; justify-content: flex-end;
    padding-right: 2px;
    font-size: 12px; font-weight: 600; line-height: 1.15;
    /* Plain white by default. Red is reserved for a price that went DOWN
       (--lower below), so colour alone signals a saving. */
    color: var(--pb-ink, #f2f4f7);
    white-space: nowrap;
  }
  /* CHEAPER than the base: also a price going down, so it takes the same red as
     a discount. (Was accent blue back when red meant "upcharge"; that inverted
     when the base colour went white.) */
  .product-builder__swatch-price--lower {
    color: var(--pb-sale, #de2a2a);
    font-weight: 700;
  }
  /* at or below the base option: reads "Included", quieter than a price */
  .product-builder__swatch-price--included {
    color: var(--pb-muted, #8c8c8c);
    font-size: 10px; font-weight: 600;
    text-transform: uppercase; letter-spacing: .04em;
  }
  .product-builder--ctabs .product-builder__swatchrow .product-builder__option-thumb {
    width: 100%; height: 64px !important; margin: 0;
    border-radius: 6px; overflow: hidden;
    border: 2px solid transparent;
    box-sizing: border-box;
  }
  .product-builder--ctabs .product-builder__swatchrow .product-builder__option.is-selected .product-builder__option-thumb {
    border-color: var(--pb-accent, #405de6);
  }
  .product-builder--ctabs .product-builder__swatchrow .product-builder__option.is-selected {
    border: 0 !important; box-shadow: none !important; background: transparent !important; outline: none;
  }
  .product-builder--ctabs .product-builder__swatchrow .product-builder__option .product-builder__option-label,
  .product-builder--ctabs .product-builder__swatchrow .product-builder__option .product-builder__option-detail,
  .product-builder--ctabs .product-builder__swatchrow .product-builder__option .product-builder__option-subtitle,
  .product-builder--ctabs .product-builder__swatchrow .product-builder__option .product-builder__family-count { display: none !important; }
  /* labeled rows (wood species etc.): the name reads under the photo */
  .product-builder--ctabs .product-builder__swatchrow--labeled .product-builder__option { height: auto; }
  .product-builder--ctabs .product-builder__swatchrow--labeled .product-builder__option .product-builder__option-label {
    display: -webkit-box !important;
    -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
    margin-top: 5px;
    /* Always reserve two lines. The row bottom-aligns, so a one-line caption
       next to a two-line one ("Walnut" vs "Micro Walnut") pushed its neighbour's
       thumb up and the row zigzagged. Desktop already reserved it; mobile did
       not, which is where the stagger showed. */
    min-height: 2.4em;
    font-size: 10px; font-weight: 600; line-height: 1.2;
    text-align: center; white-space: normal;
    color: var(--pb-ink, #fff);
  }


  /* Sold out reads as a BANNER, not a fade. A 35% tile looked like a rendering
     fault or a disabled control — the photo is still worth seeing, so it stays
     at full strength and the strip does the telling. Mono, so it never competes
     with the red FREE strip on a gift card in the same row. */
  .product-builder--ctabs .product-builder__swatchrow .product-builder__option.is-sold-out { opacity: 1 !important; }
  .product-builder--ctabs .product-builder__swatchrow .product-builder__option.is-sold-out .product-builder__option-thumb {
    position: relative;
  }
  .product-builder--ctabs .product-builder__swatchrow .product-builder__option.is-sold-out .product-builder__option-thumb::after {
    content: 'SOLD OUT';
    position: absolute; left: 0; right: 0; bottom: 0;
    padding: 1px 0;
    background: rgba(10, 10, 10, 0.92);
    color: #fff; text-align: center;
    font-size: 9px; font-weight: 700; letter-spacing: .06em; line-height: 1.5;
  }
  /* scrollable-row edge arrows (Benchmade's more-content cue) */
  .product-builder__swatchwrap { position: relative; }
  .product-builder__swatcharrow {
    position: absolute; top: 34px; z-index: 3;
    width: 34px; height: 72px;
    display: flex; align-items: center; justify-content: center;
    border: 0; border-radius: 4px;
    background: rgba(10, 10, 10, 0.55);
    -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
    color: #fff; font-size: 16px; line-height: 1;
    cursor: pointer;
  }
  .product-builder__swatcharrow--left { left: 0; }
  .product-builder__swatcharrow--right { right: 0; }
  .product-builder__swatcharrow.is-hidden { display: none; }

  /* offers: the tappable line carries the sale red so the promo reads at a
     glance — muted grey made it look like disabled helper text */
  .product-builder__offers { margin: 0 -12px; }
  .product-builder__offers-toggle {
    display: flex; align-items: center; justify-content: center; gap: 7px;
    width: 100%; height: 30px; padding: 0 12px;
    border: 0; background: transparent;
    color: var(--pb-muted, #7d8592);   /* restored 08-07: red made a quiet toggle shout */
    font: inherit; font-size: 11px; font-weight: 600;
    text-transform: uppercase; letter-spacing: .04em;
    cursor: pointer; text-align: left;
  }
  .product-builder__offers-chevron { transition: transform .18s ease; }
  .product-builder__offers.is-open .product-builder__offers-chevron { transform: rotate(180deg); }
  .product-builder__offers.is-open .product-builder__offers-toggle { color: var(--pb-ink, #f2f4f7); }
  /* Every banner takes the WIDEST banner's width instead of the full sheet, so
     they read as one tidy block rather than full-bleed stripes (860px of bar
     for 394px of text at 1280). fit-content resolves the list to its widest
     child; width:100% then pulls the shorter banners out to match it. The
     max-width keeps a long banner from overflowing — it wraps instead. */
  .product-builder__offers-list {
    width: fit-content; max-width: 100%;
    margin-inline: auto;
  }
  .product-builder__offers-list .product-builder__offers-item { width: 100%; }
  /* Blue on blue rather than white on solid: the BUY NOW button already owns the
     saturated blue, so a filled banner would compete with it. A tint plus lighter
     accent text sits in the same family without shouting. Sentence case too —
     uppercase made a standing offer read like an alert. */
  .product-builder__offers-item {
    padding: 8px 14px; text-align: center;
    background: rgba(64, 93, 230, 0.14);
    color: #b3c0f7;
    font-size: 11px; font-weight: 500;
    text-transform: none; letter-spacing: 0;
  }
  .product-builder__offers-item + .product-builder__offers-item { border-top: 1px solid rgba(64, 93, 230, 0.26); }


  /* gift card beside its trigger swatch: photo + FREE banner, display only */
  .product-builder__swatch-gift {
    flex: 0 0 auto;
    display: flex; flex-direction: column; align-items: stretch;
    width: 64px; height: auto;   /* hug like the tiles so bottoms line up */
  }
  .product-builder__swatch-gift-with {
    color: var(--pb-muted, #7d8592);
    font-size: 9px; font-weight: 600;
    text-transform: uppercase; letter-spacing: .04em;
    justify-content: center; padding-right: 0;
  }
  /* neither thumb may flex-shrink, or the tile's (which shares a box with the
     price line) ends up shorter than the gift's and they stop lining up */
  .product-builder--ctabs .product-builder__swatchrow .product-builder__option-thumb,
  .product-builder__swatch-gift-thumb { flex: 0 0 auto; }
  .product-builder--ctabs .product-builder__swatchrow .product-builder__option,
  .product-builder__swatch-gift { justify-content: flex-end; }
  /* Labeled rows caption every tile. The gift now carries a REAL caption (its
     product name) where it used to need an invisible stand-in just to keep the
     row from sinking it. Same box metrics as a tile caption, so the row still
     lines up by the thumb. */
  .product-builder__swatchrow--labeled .product-builder__swatch-gift { row-gap: 4px; }
  .product-builder__swatchrow--labeled .product-builder__swatch-gift-label {
    display: -webkit-box;
    -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
    margin-top: 5px;
    min-height: 2.4em;   /* captions reserve two lines — reserve the same */
    font-size: 10px; font-weight: 600; line-height: 1.2;
    text-align: center; white-space: normal;
    color: var(--pb-ink, #fff);
  }
  .product-builder__swatch-gift-thumb {
    position: relative; display: block;
    width: 100%; height: 64px;
    border-radius: 6px; overflow: hidden;
    border: 2px dashed rgba(222, 42, 42, 0.6);
    box-sizing: border-box;
  }
  .product-builder__swatch-gift-thumb img {
    width: 100%; height: 100%; object-fit: cover; display: block;
  }
  /* small strip along the bottom instead of a band across the middle, so the
     product photo stays visible */
  .product-builder__swatch-gift-free {
    position: absolute; left: 0; right: 0; top: auto; bottom: 0;
    padding: 1px 0;
    background: rgba(222, 42, 42, 0.92);
    color: #fff; text-align: center;
    font-size: 9px; font-weight: 700; letter-spacing: .06em; line-height: 1.5;
  }

  /* accessory rail: live thumbnails of the add-ons, down the model's left edge */
  .product-builder__acc-rail {
    position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
    z-index: 3;
    /* column flow that WRAPS into a second column instead of scrolling */
    display: flex; flex-direction: column; flex-wrap: wrap; gap: 8px;
    max-height: 84%; align-content: flex-start;
    padding: 6px; border-radius: 8px;
    background: rgba(0, 0, 0, 0.06);
  }
  .product-builder__acc-chip {
    flex: 0 0 auto;
    width: 54px; height: 54px; padding: 0;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 6px; overflow: hidden;
    background: #fff;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
  }
  .product-builder__acc-chip img { width: 100%; height: 100%; object-fit: cover; display: block; }
  /* Remove control on a rail chip. Hidden until hover/focus on pointer devices;
     touch has no hover, so below it is shown permanently via a coarse-pointer
     query — otherwise it would be unreachable on a phone. */
  .product-builder__acc-remove {
    /* INSIDE the chip: the base rule clips with overflow:hidden to keep the
       thumbnail's rounded corners, so an outset badge would be cut off */
    position: absolute; top: 3px; right: 3px;
    width: 18px; height: 18px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: #111; color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.85);
    font-size: 13px; line-height: 1; font-weight: 700;
    cursor: pointer;
    opacity: 0; pointer-events: none;
    transition: opacity .12s ease;
  }
  .product-builder__acc-chip { position: relative; }
  .product-builder__acc-chip:hover .product-builder__acc-remove,
  .product-builder__acc-chip:focus-within .product-builder__acc-remove {
    opacity: 1; pointer-events: auto;
  }
  @media (hover: none) {
    .product-builder__acc-remove { opacity: 1; pointer-events: auto; }
  }
  /* An earned gift on the rail: dashed red edge + FREE strip, matching the gift
     card in the swatch row so the two read as the same thing. Lives HERE, at all
     widths — it was written inside the 821px block, so on mobile an earned
     freebie appeared on the rail as a plain chip with no gift treatment at all
     while its swatch-row twin (min-width:0) showed the badge correctly. */
  .product-builder__acc-chip--gift {
    border: 2px dashed rgba(222, 42, 42, 0.7);
    position: relative;
  }
  .product-builder__acc-chip--gift::after {
    content: 'FREE';
    position: absolute; left: 0; right: 0; bottom: 0;
    background: rgba(222, 42, 42, 0.92);
    color: #fff; text-align: center;
    font-size: 7px; font-weight: 700; letter-spacing: .06em; line-height: 1.6;
  }

  /* category info panel: product description under the band (Steel-style) */
  .product-builder__catinfo { padding: 10px 4px 2px; }
  .product-builder__catinfo-title {
    font-size: 12px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .02em; color: var(--pb-ink, #f2f4f7);
    margin: 0 0 4px;
  }
  .product-builder__catinfo-text {
    font-size: 12px; line-height: 1.45;
    color: rgba(255, 255, 255, 0.72);
  }
  .product-builder__catinfo-highlight {
    display: block; margin-top: 5px;
    font-size: 12px; line-height: 1.4;
    font-style: italic;
    color: var(--pb-sale, #de2a2a);
  }
  /* A lone caveat with no body copy (the Wood buckets) rides on the title's line
     and drops the red: red here means a price that fell or a "best for" pitch,
     and a materials note is neither. */
  .product-builder__catinfo--tight { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
  .product-builder__catinfo--tight .product-builder__catinfo-title { margin: 0; }
  .product-builder__catinfo-highlight--inline {
    display: inline; margin-top: 0;
    color: var(--pb-muted, #8c8c8c);
    font-style: italic;
  }

  /* accessories checklist: corner ring, filled with a check when selected */
  .product-builder__swatch-check {
    position: absolute; top: 34px; right: 4px; z-index: 1;
    width: 16px; height: 16px; border-radius: 50%;
    border: 1.5px solid rgba(255, 255, 255, 0.85);
    background: rgba(0, 0, 0, 0.35);
    display: flex; align-items: center; justify-content: center;
    font-size: 10px; line-height: 1; color: transparent;
    pointer-events: none;
  }
  .product-builder__swatch-check::after { content: '\2713'; }
  .product-builder--ctabs .product-builder__swatchrow .product-builder__option { position: relative; }
  .product-builder--ctabs .product-builder__swatchrow .product-builder__option.is-selected .product-builder__swatch-check {
    background: var(--pb-accent, #405de6);
    border-color: var(--pb-accent, #405de6);
    color: #fff;
  }
  .product-builder--ctabs .product-builder__swatchrow .product-builder__option-thumb--empty {
    display: flex; align-items: center; justify-content: center;
    font-size: 10px; text-transform: uppercase; letter-spacing: .05em;
  }

  /* =====  APP FRAME (Benchmade: no page scroll, everything fits)  =====
     The section covers the viewport; inner becomes a flex column of
     [tabs][model (flexible)][sheet][buy bar]; only option rows scroll,
     horizontally. body.builder-ctabs-lock freezes the page behind. */
  .product-builder--ctabs.product-builder--mtop.product-builder--frame {
    position: fixed; inset: 0; z-index: 500;
    margin: 0; padding: 0;
    overflow: hidden;
    min-height: 0;
    background: var(--pb-ground, #0e1013);
  }
  .product-builder--ctabs.product-builder--mtop.product-builder--frame .product-builder__inner {
    display: flex; flex-direction: column;
    height: 100vh; height: 100dvh;
    width: 100%;
    gap: 0;   /* the legacy mobile grid's 12px gap carries into flex — kill it */
  }
  /* hard-guarantee full-bleed children — legacy column rules set odd widths */
  .product-builder--ctabs.product-builder--mtop.product-builder--frame .product-builder__inner > * {
    width: 100%; min-width: 0; box-sizing: border-box;
  }
  .product-builder--ctabs.product-builder--mtop.product-builder--frame .product-builder__tray-head {
    position: relative; z-index: 6; flex: 0 0 auto;
    height: auto; padding: 0;   /* the row itself defines the bar band, so the
                                   corner cluster (top:0) lines up with it */
  }
  /* Mobile bar band. Without this the row is only as tall as its tallest child
     (the 36px cart button) and reads as a thin strip. The desktop rule further
     down restates this selector at 64px, so it wins there on source order. */
  .product-builder--ctabs.product-builder--mtop.product-builder--frame .product-builder__ctabs-row {
    min-height: 62px;
    padding-left: 10px;
    padding-right: 10px;   /* desktop restates this as the cluster reserve */
  }
  .product-builder--ctabs.product-builder--mtop.product-builder--frame .product-builder__preview-column {
    position: relative; flex: 1 1 auto; min-height: 0;   /* anchors the accessory rail */
    height: auto; margin: 0; padding: 4px 0;
  }
  .product-builder--ctabs.product-builder--mtop.product-builder--frame .product-builder__preview-card {
    height: 100%; display: flex; align-items: center; justify-content: center;
  }
  /* every build uses the white model stage (hydro's dark bleed + frosted
     sheet retired along with the sherlock scene) */
  .product-builder--ctabs.product-builder--mtop.product-builder--frame .product-builder__preview-column {
    background: #fff;
  }
  .product-builder--ctabs.product-builder--mtop.product-builder--frame .product-builder__preview {
    width: min(88vw, 44vh); height: min(88vw, 44vh);   /* JS refines; never zero */
    max-width: none;
  }
  .product-builder--ctabs.product-builder--mtop.product-builder--frame .product-builder__controls-column {
    flex: 0 0 auto; min-height: 0;
    margin: 0; padding: 0 12px 0;   /* band sits flush at the sheet top — no light strip */
    border-radius: 0;
    box-shadow: none;
  }
  /* constant-height sheet: no pick header; the category-strip zone is always
     reserved (kept empty for components with no variant families) */
  .product-builder--ctabs.product-builder--mtop.product-builder--frame .product-builder__row-head { display: none; }
  .product-builder--ctabs.product-builder--mtop.product-builder--frame .product-builder__vstrip {
    height: 96px; overflow: hidden; padding: 6px 2px 0;
  }
  .product-builder--ctabs.product-builder--mtop.product-builder--frame .product-builder__row { padding: 0; border-bottom: 0; }
  .product-builder--ctabs.product-builder--mtop.product-builder--frame .product-builder__group-note { display: none; }
  .product-builder--ctabs.product-builder--mtop.product-builder--frame .product-builder__summary-card {
    position: relative;
    margin: 8px -10px 0;
    padding: 0 0 env(safe-area-inset-bottom, 0px);
    gap: 1px;
    border-top: 0;
    background: var(--pb-ground, #0e1013);
  }
  .product-builder--ctabs.product-builder--mtop.product-builder--frame .product-builder__randomize-row { display: none; }
  /* Messages float ABOVE the bar instead of sitting in it. As flex children
     they inherited `flex: 1 0 100%` from the thumbs rules, ate the row's width
     and shoved the switcher and BUY NOW to the right — where they stayed,
     because nothing in the frame flow calls clearMessages() afterwards. */
  .product-builder--ctabs.product-builder--mtop.product-builder--frame .product-builder__success,
  .product-builder--ctabs.product-builder--mtop.product-builder--frame .product-builder__error {
    /* 10px insets cancel the bar's own -10px side margins, or the toast
       overhangs the viewport and adds a horizontal scrollbar */
    position: absolute; left: 10px; right: 10px; bottom: calc(100% + 8px);
    z-index: 4;
    flex: none;
    margin: 0; padding: 9px 12px;
    border-radius: 8px;
    font-size: 12px; font-weight: 600; line-height: 1.35; text-align: center;
  }
  .product-builder--ctabs.product-builder--mtop.product-builder--frame .product-builder__success {
    background: rgba(0, 122, 51, 0.94); color: #fff;
  }
  .product-builder--ctabs.product-builder--mtop.product-builder--frame .product-builder__error {
    background: rgba(222, 42, 42, 0.94); color: #fff;
  }
  .product-builder__more-build {
    display: inline;
    font-size: 11px; font-weight: 600;
    text-transform: uppercase; letter-spacing: .03em;
  }
  .product-builder__more-chevron { display: inline-flex; align-items: center; margin-left: 6px; opacity: .75; }
  .product-builder__more-menu[hidden] { display: none; }
  .product-builder__more-toggle {
    order: 1; flex: 0 0 auto;
    width: auto; min-width: 56px; height: 56px; padding: 0 12px;
    display: flex; align-items: center; justify-content: center;
    border: 0; border-radius: 0;
    background: #141414; color: var(--pb-ink, #f2f4f7);
    cursor: pointer;
  }
  .product-builder__more-wrap { position: relative; display: flex; order: 1; flex: 0 0 auto; }
  .product-builder__more-menu {
    position: absolute; left: 0; right: auto; bottom: calc(100% + 8px);
    z-index: 30;
    min-width: 200px;
    padding: 6px;
    background: #141414;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55);
  }
  .product-builder__more-item {
    display: flex; align-items: center; gap: 9px;
    width: 100%; padding: 11px 12px;
    border: 0; border-radius: 2px;
    background: transparent;
    color: var(--pb-ink, #f2f4f7);
    font: inherit; font-size: 12px; font-weight: 500;
    text-transform: uppercase; letter-spacing: .02em;
    cursor: pointer; text-align: left;
  }
  .product-builder__more-item:active { background: rgba(255, 255, 255, 0.08); }
  .product-builder__more-item.is-current { color: var(--pb-accent, #405de6); }
  .product-builder__more-item--cart { display: none; }
  .product-builder__more-label {
    padding: 10px 12px 4px;
    font-size: 10px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .06em;
    color: var(--pb-muted, #7d8592);
  }
  .product-builder__more-label--first { padding-top: 6px; }
  .product-builder__more-item--divided {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    margin-top: 6px; padding-top: 12px;
  }
  .product-builder--ctabs.product-builder--mtop.product-builder--frame .product-builder__add-button {
    height: 56px; margin: 0;
    padding: 0 14px;
    border-radius: 0; font-size: 14px; font-weight: 500; letter-spacing: normal;
  }
  .product-builder--ctabs.product-builder--mtop.product-builder--frame .product-builder__summary-card {
    background: #141414;
  }
}
@media (min-width: 0px) {  /* ctabs-namespaced: safe at all widths */
  body.builder-ctabs-lock { overflow: hidden !important; height: 100vh; }
  /* the cart drawer opens OVER the builder frame (never dump the user out of
     the builder to show the cart). Only the panel is lifted — its overlay
     child keeps the native stacking (it sits BEHIND the drawer content;
     raising it eats every tap inside the drawer). */
  body.builder-ctabs-lock #mini-cart { z-index: 620; }
}

/* =========================================================
   DESKTOP THUMBS — options take most of the width, and the
   cards become square tiles that pack several per row.
   (min-width:821px only — mobile keeps the coverflow tray.)
   ========================================================= */
@media (min-width: 821px) {
  /* Desktop option cards match the MOBILE look: a large SQUARE image that fills
     the tile, several per row. Model column keeps its default (~50%) width. */
  .product-builder--thumbs .product-builder__options {
    grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
    gap: 10px;
  }
  .product-builder--thumbs .product-builder__option { padding: 10px; }
  .product-builder--thumbs .product-builder__option-thumb {
    aspect-ratio: 1 / 1; height: auto; margin-bottom: 6px;
  }
  /* keep names readable + tiles a uniform height (up to two lines) */
  .product-builder--thumbs .product-builder__option-label {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; min-height: 2.4em; font-size: 13px; line-height: 1.2;
  }
}


/* =========================================================
   THUMBS — sales + upsell banners (dark, tasteful).
   General discount headline sits quietly at the top of the
   options column; per-group "free gift" notes get the accent
   treatment inline above their group.
   ========================================================= */
.product-builder--thumbs .product-builder__discount-banner,
.product-builder--thumbs .product-builder__group-note {
  display: block; width: auto; margin: 0 2px 10px; padding: 8px 12px;
  border-radius: 10px; text-align: left; position: relative; line-height: 1.3;
  background: rgba(91, 116, 242, 0.12);
  border: 1px solid rgba(91, 116, 242, 0.32);
  color: #cdd5ff; font-size: 12.5px; font-weight: 700; letter-spacing: .01em;
}
.product-builder--thumbs .product-builder__discount-banner p,
.product-builder--thumbs .product-builder__group-note p { margin: 0; }
.product-builder--thumbs .product-builder__discount-banner--gift,
.product-builder--thumbs .product-builder__group-note { padding-left: 34px; }
.product-builder--thumbs .product-builder__discount-banner--gift::before,
.product-builder--thumbs .product-builder__group-note::before {
  content: ""; position: absolute; left: 11px; top: 50%; width: 15px; height: 15px;
  transform: translateY(-50%); background-repeat: no-repeat; background-size: contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b74f2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 12 20 22 4 22 4 12'/%3E%3Crect x='2' y='7' width='20' height='5'/%3E%3Cline x1='12' y1='22' x2='12' y2='7'/%3E%3Cpath d='M12 7H7.5a2.5 2.5 0 0 1 0-5C11 2 12 7 12 7z'/%3E%3Cpath d='M12 7h4.5a2.5 2.5 0 0 0 0-5C13 2 12 7 12 7z'/%3E%3C/svg%3E");
}
/* group-note spans full width above the [title | cards] row (not squished between) */
.product-builder--thumbs .product-builder__group { flex-wrap: wrap; }
.product-builder--thumbs .product-builder__group-note { flex: 0 0 100%; order: -1; }

/* Links inside the offer banners / gift notes (e.g. the free product names) */
.product-builder--thumbs .product-builder__discount-banner a,
.product-builder--thumbs .product-builder__group-note a {
  color: #ffffff; font-weight: 800;
  text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px;
}
.product-builder--thumbs .product-builder__discount-banner a:hover,
.product-builder--thumbs .product-builder__group-note a:hover { color: #e6ebff; }

/* =========================================================
   DESKTOP MATCH (min-width: 821px) — Benchmade's desktop
   chrome: BUY NOW and the ... menu move to the TOP RIGHT, the
   sheet slims and centers, and the model owns the middle —
   kept VERTICAL (Benchmade rotates theirs; we don't).
   ========================================================= */
@media (min-width: 821px) {
  .product-builder--ctabs.product-builder--mtop.product-builder--frame .product-builder__tray-head {
    padding: 0;   /* must stay 0 so the tab bar shares the corner cluster's band */
  }
  /* buy bar stays INLINE at the bottom of the sheet (Joshua 08-06: don't move
     it to the top right) — the mobile bar layout carries over, just wider */
  .product-builder--ctabs.product-builder--mtop.product-builder--frame .product-builder__add-button {
    font-size: 15px;
  }
  /* ... button reads as a build switcher on desktop: it shows the build name */
  .product-builder__more-build {
    display: inline;
    font-size: 12px; font-weight: 600;
    text-transform: uppercase; letter-spacing: .04em;
  }
  /* Desktop: the switcher + BUY NOW sit flush in the top-right corner so the
     sheet keeps its full height for options. Restored 08-06 (second pass) —
     the first attempt hid the cart icon to free this corner, but the cart is
     staying, so the tabs row reserves the cluster's measured width instead
     (--pb-cluster-w, published by JS) and the cart parks just left of it. */
  .product-builder--ctabs.product-builder--mtop.product-builder--frame .product-builder__ctabs-row {
    position: relative;
    min-height: var(--pb-bar-h, 64px);
    padding-left: 16px;
    padding-right: calc(var(--pb-cluster-w, 0px) + 16px);
  }
  /* Chips are centred on the VIEWPORT while they fit, then slide left as the
     cluster closes in, and only scroll once they've run out of room entirely.
     A collapsible phantom on the left does all three:

       phantom basis = cluster width - logo width

     With the bar's auto margins, that lands its centre exactly on vw/2 for ANY
     bar width. When space goes negative the phantom (shrink 1000) collapses
     first, so the bar keeps its full width and just shifts left; only once the
     phantom is gone does the bar itself shrink and scroll, like mobile.

     The earlier version reserved the cluster on BOTH sides to hold the centre,
     which capped the bar at 260px for 474px of chips at 1280. */
  .product-builder--ctabs.product-builder--mtop.product-builder--frame .product-builder__ctabs-row::before {
    content: '';
    /* Basis = cluster - 42, where 42 = logo (30) + both flex gaps (12). Solving
       barCentre = vw/2 cancels the bar's own width, so this one value centres
       the bar exactly whatever the build's chip count. */
    flex: 0 1000 calc(var(--pb-cluster-w, 0px) - 42px);
    min-width: 0;
    pointer-events: none;
  }
  /* ::before is the row's FIRST child, so without this the phantom shoves the
     logo out of the corner along with everything else */
  .product-builder--ctabs.product-builder--mtop.product-builder--frame .product-builder__frame-toggle {
    order: -1;
  }
  .product-builder--ctabs.product-builder--mtop.product-builder--frame .product-builder__ctabs {
    position: static;
    transform: none;
    flex: 0 1 auto; min-width: 0;
    margin: 0 auto;
    max-width: 100%;
  }
  /* Desktop only: the cluster owns this corner, so the cart icon gives way to
     the "View cart" item in the ... menu. Mobile has no cluster and keeps the
     icon, so its menu item stays hidden (base rule) — one cart affordance per
     breakpoint, never two. */
  .product-builder--ctabs .product-builder__cart-button { display: none; }

  .product-builder--ctabs.product-builder--mtop.product-builder--frame .product-builder__summary-card {
    position: fixed; top: 0; right: 0; left: auto; bottom: auto;
    width: auto; margin: 0; padding: 0;
    background: transparent; border: 0; border-top: 0;
    gap: 0; z-index: 7;
    flex-wrap: nowrap; justify-content: flex-end;
  }
  .product-builder--ctabs.product-builder--mtop.product-builder--frame .product-builder__more-toggle {
    height: var(--pb-bar-h, 64px); border-radius: 0;
    background: var(--pb-surface-2, #242424);
  }
  .product-builder--ctabs.product-builder--mtop.product-builder--frame .product-builder__add-button {
    flex: 0 0 auto; width: auto;
    height: var(--pb-bar-h, 64px); margin: 0; padding: 0 26px;
    border-radius: 0; font-size: 14px;
  }
  /* the bar is at the TOP now, so messages drop below it instead of above */
  .product-builder--ctabs.product-builder--mtop.product-builder--frame .product-builder__success,
  .product-builder--ctabs.product-builder--mtop.product-builder--frame .product-builder__error {
    top: calc(100% + 6px); bottom: auto; left: auto; right: 0;
    width: max-content; max-width: 340px;
  }
  /* dropdown hangs off the switcher's own left edge */
  .product-builder--ctabs.product-builder--mtop.product-builder--frame .product-builder__more-menu {
    top: 100%; bottom: auto; left: 0; right: auto;
  }
  .product-builder__more-item--cart { display: flex; }
  .product-builder--ctabs.product-builder--mtop.product-builder--frame .product-builder__more-toggle {
    width: auto; min-width: 56px; padding: 0 16px;
    gap: 2px;
  }
  /* sheet: slim, content centered, full-width surfaces */
  .product-builder--ctabs.product-builder--mtop.product-builder--frame .product-builder__controls-column {
    padding: 0 0 12px;
  }
  .product-builder--ctabs.product-builder--mtop.product-builder--frame .product-builder__offers {
    max-width: 860px; width: 100%; margin: 0 auto;
  }
  .product-builder--ctabs.product-builder--mtop.product-builder--frame .product-builder__catstrip {
    margin: 0; padding: 0;
  }
  .product-builder--ctabs.product-builder--mtop.product-builder--frame .product-builder__catinfo {
    max-width: 900px; margin: 0 auto;   /* wider box wraps to fewer lines, so it eats less vertical space */
  }

  .product-builder--ctabs.product-builder--mtop.product-builder--frame .product-builder__preview-column {
    padding: 10px 0;
  }

  /* desktop has the room: bigger swatches and normal desktop type sizes
     (the 64px/11px values are mobile-parity numbers from the BM match) */
  /* the swatch row also carries .product-builder__options, which the legacy
     desktop-thumbs block turns into an auto-fill GRID — that stretched tiles
     wide and squashed the thumbs. Force it back to a flex row. */
  .product-builder--ctabs .product-builder__swatchrow {
    display: flex !important;
    grid-template-columns: none !important;
    gap: 12px;
  }
  .product-builder--ctabs .product-builder__swatchrow .product-builder__option { padding: 0 !important; }
  .product-builder--ctabs .product-builder__swatchrow .product-builder__option-thumb {
    aspect-ratio: auto !important; margin-bottom: 0 !important;
  }
  .product-builder--ctabs .product-builder__swatchrow .product-builder__option {
    width: 132px; height: auto;   /* hug: price line + square image + label */
  }
  /* price line only reserves room when there IS a price */
  .product-builder--ctabs .product-builder__swatchrow .product-builder__swatch-price {
    height: auto; min-height: 0; flex: 0 0 auto;
    margin-bottom: 2px;
  }
  .product-builder--ctabs .product-builder__swatchrow { align-items: flex-end; }
  .product-builder--ctabs .product-builder__swatchrow .product-builder__option-thumb {
    width: 132px !important; height: 132px !important; border-radius: 8px;
  }
  .product-builder__swatch-price {
    height: 34px; flex: 0 0 34px;
    font-size: 14px;
  }
  .product-builder__swatch-price--included { font-size: 11px; }
  .product-builder__swatch-gift { width: 132px; height: auto; }
  .product-builder__swatch-gift-thumb { height: 132px; border-radius: 8px; }
  .product-builder__swatch-gift-with { font-size: 11px; }
  .product-builder__swatch-gift-free { font-size: 10px; }
  .product-builder--ctabs .product-builder__swatchrow .product-builder__option.is-sold-out .product-builder__option-thumb::after { font-size: 10px; }
  .product-builder__swatcharrow { top: 38px; height: 116px; }

  .product-builder__acc-rail { left: 18px; gap: 10px; }
  .product-builder__acc-chip { width: 70px; height: 70px; border-radius: 8px; }
  /* an earned gift on the rail: dashed red edge and a FREE strip, matching the
     gift card in the swatch row so the two read as the same thing */
  .product-builder__acc-chip--gift {
    border: 2px dashed rgba(222, 42, 42, 0.7);
    position: relative;
  }
  .product-builder__acc-chip--gift::after {
    content: 'FREE';
    position: absolute; left: 0; right: 0; bottom: 0;
    background: rgba(222, 42, 42, 0.92);
    color: #fff; text-align: center;
    font-size: 8px; font-weight: 700; letter-spacing: .06em; line-height: 1.6;
  }

  .product-builder--ctabs .product-builder__swatchrow--labeled .product-builder__option .product-builder__option-label { font-size: 12px; }
  .product-builder__swatchrow--labeled .product-builder__swatch-gift-label {
    font-size: 12px; min-height: 2.4em;
  }

  .product-builder__catstrip { height: 48px; }
  .product-builder__cat { font-size: 14px; height: 32px; padding: 6px 20px; }

  .product-builder__catinfo { padding: 12px 4px 4px; }
  .product-builder__catinfo-title { font-size: 14px; }
  .product-builder__catinfo-text { font-size: 14px; }
  .product-builder__catinfo-highlight { font-size: 14px; }

  .product-builder__offers-toggle { height: 36px; font-size: 12px; }
  .product-builder__offers-item { font-size: 12px; padding: 9px 12px; }

  .product-builder--ctabs.product-builder--mtop .product-builder__ctab {
    font-size: 12px; height: 32px; padding: 0 18px;
  }
  .product-builder--ctabs.product-builder--mtop .product-builder__ctabs { padding: 5px; gap: 8px; }
}

/* Mobile chip strip, sized to the taller 62px bar band. Must live at the end of
   the file: the base 28px rule sits inside a min-width:0 block further up, and
   this matches on the same three classes, so only source order separates them.
   Desktop is unaffected — it sets its own 32px in the 821px block above. */
@media (max-width: 820px) {
  .product-builder--ctabs.product-builder--mtop .product-builder__ctab {
    height: 34px; padding: 0 16px;
  }
}