/** Shopify CDN: Minification failed

Line 1189:0 Unexpected "}"

**/
/* ab-3dex.css — styles for sections/ab-3dex-builds.liquid (3D build explorer). Self-contained: every
   selector starts with .ab3dex / .ab3dex-gal; colours fall back to the brand palette when the theme's
   variables are absent (portable to future themes). Brand canon: sentence case, 999px pills, no arrows
   in labels, stroke-only chevrons, rounded-rectangle swatches, flat fills, no pulsing. */
.ab3dex {
  --ab3dex-ink: #2A3550; --ab3dex-muted: #5E6A85; --ab3dex-electric: #1E47CE; --ab3dex-card: #F5F8FF;
  --ab3dex-bg: #EAF0FF; --ab3dex-ratio: 1 / 1; --ab3dex-ratio-m: 1 / 1; --ab3dex-radius: 20px;
  padding: max(var(--ab3dex-pt, 48px), 24px) 0 max(var(--ab3dex-pb, 48px), 24px);
  color: var(--ab3dex-ink);
}
.ab3dex__inner { max-width: var(--page-width, 1280px); margin: 0 auto; padding: 0 max(16px, 3vw); }
.ab3dex__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px 24px; margin-bottom: 18px; }
.ab3dex__heading { margin: 0; font-family: var(--font-heading-family, inherit); font-weight: var(--font-heading-weight, 700); font-size: clamp(26px, 3.2vw, 40px); line-height: 1.1; letter-spacing: -0.01em; }
.ab3dex__sub { margin: 6px 0 0; color: var(--ab3dex-muted); font-size: 16px; line-height: 1.45; max-width: 46ch; }

.ab3dex__tabs { display: grid; grid-template-columns: repeat(var(--ab3dex-tabs-n, 3), minmax(0, 1fr)); gap: 10px; width: 100%; margin-top: 4px; }
.ab3dex__tabs[hidden] { display: none; }
.ab3dex__head > .ab3dex__tabs { flex-basis: 100%; }
.ab3dex__tab {
  appearance: none; text-align: left; display: flex; flex-direction: column; gap: 8px; min-width: 0;
  border: 1px solid rgba(30, 71, 206, .16); background: #F5F8FF; color: var(--ab3dex-ink); border-radius: 18px; padding: 14px 16px;
  cursor: pointer; transition: transform .15s ease, opacity .15s ease, border-color .15s ease, background-color .15s ease;
}
.ab3dex__tab:hover { transform: translateY(-1px); opacity: .95; }
.ab3dex__tab[aria-selected="true"] { border-color: var(--ab3dex-electric); background: #fff; box-shadow: 0 0 0 1px var(--ab3dex-electric) inset; }
.ab3dex__tab-name { font-family: 'Funnel Display', var(--font-heading-family, sans-serif); font-weight: 800; font-size: 22px; line-height: 1.05; letter-spacing: -.01em; color: var(--ab3dex-electric); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ab3dex__tab-stats { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.ab3dex__stat { display: inline-flex; align-items: center; gap: 6px; font: 600 12.5px/1 Inter, var(--font-body-family, system-ui), sans-serif; color: var(--ab3dex-muted); white-space: nowrap; }
.ab3dex__stat b { font-family: 'Funnel Display', sans-serif; font-size: 22px; font-weight: 800; color: var(--ab3dex-ink); letter-spacing: -.01em; }
.ab3dex__stat-ico { width: 17px; height: 17px; color: var(--ab3dex-ink); flex: none; }
.ab3dex__tab:focus-visible, .ab3dex__btn:focus-visible, .ab3dex__key:focus-visible, .ab3dex__chip:focus-visible { outline: 2px solid var(--ab3dex-electric); outline-offset: 2px; }

.ab3dex__stage {
  position: relative; overflow: hidden; border-radius: var(--ab3dex-radius, 20px); background: var(--ab3dex-stage-bg, #1E2436);
  aspect-ratio: var(--ab3dex-ratio, 16 / 9); max-height: 82vh; margin: 0 auto; touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: grab;
  isolation: isolate;
}
.ab3dex__stage:active { cursor: grabbing; }
.ab3dex__gl, .ab3dex__snap, .ab3dex__poster { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ab3dex__snap[hidden] { display: none; }
.ab3dex__poster { object-fit: cover; transition: opacity .35s ease; }
.ab3dex--live .ab3dex__poster { opacity: 0; pointer-events: none; }

.ab3dex__hud { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: end; justify-content: space-between; gap: 12px; padding: 14px; pointer-events: none; z-index: 2; }
.ab3dex__label { min-width: 0; background: rgba(255, 255, 255, .86); border: 1px solid rgba(42, 53, 80, .08); border-radius: 14px; padding: 8px 12px; }
.ab3dex__title { display: block; font: 700 15px/1.25 Inter, var(--font-body-family, system-ui), sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ab3dex__count { display: block; margin-top: 2px; font: 500 12px/1.2 Inter, var(--font-body-family, system-ui), sans-serif; color: var(--ab3dex-muted); font-variant-numeric: tabular-nums; }
.ab3dex__nav { display: flex; gap: 8px; pointer-events: auto; flex: none; }
.ab3dex__btn {
  appearance: none; width: 44px; height: 44px; border-radius: 999px; border: 1px solid rgba(42, 53, 80, .14); background: #fff; color: var(--ab3dex-ink);
  display: grid; place-items: center; cursor: pointer; transition: transform .15s ease, opacity .15s ease;
}
.ab3dex__btn:hover { transform: translateY(-1px); opacity: .92; }
.ab3dex__btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ab3dex__btn[hidden], .ab3dex__key[hidden] { display: none; }

.ab3dex__key {
  position: absolute; right: 14px; top: 14px; z-index: 3;
  appearance: none; display: inline-flex; align-items: center; gap: 10px; padding: 7px 8px 7px 14px; border-radius: 999px;
  background: rgba(255, 255, 255, .86); border: 1px solid rgba(42, 53, 80, .1); color: var(--ab3dex-muted);
  font: 600 13px/1 Inter, var(--font-body-family, system-ui), sans-serif; letter-spacing: .02em; cursor: pointer; white-space: nowrap;
}
.ab3dex__cap {
  display: inline-block; min-width: 88px; padding: 7px 12px 6px; border-radius: 8px; background: #fff; color: var(--ab3dex-ink); text-align: center;
  border: 1px solid rgba(42, 53, 80, .22); box-shadow: 0 3px 0 rgba(42, 53, 80, .22); transition: transform 60ms ease-out, box-shadow 60ms ease-out;
}
.ab3dex__key.is-down .ab3dex__cap, .ab3dex__key:active .ab3dex__cap { transform: translateY(3px); box-shadow: 0 0 0 rgba(42, 53, 80, .22); background: var(--ab3dex-electric); border-color: var(--ab3dex-electric); color: #fff; }
@media (hover: none), (pointer: coarse) { .ab3dex__key { display: none; } }
.ab3dex__drag { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 2; display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; border-radius: 999px; background: rgba(42, 53, 80, .78); color: #fff; font: 600 12.5px/1 Inter, system-ui, sans-serif; letter-spacing: .02em; pointer-events: none; opacity: 1; transition: opacity .4s ease; white-space: nowrap; }
.ab3dex__drag svg { width: 18px; height: 18px; }
.ab3dex__drag.is-gone { opacity: 0; }
@media (max-width: 749px) { .ab3dex__drag { bottom: 64px; } }
.ab3dex__scenes { position: absolute; left: 14px; top: 14px; z-index: 3; display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 999px; background: rgba(255, 255, 255, .86); border: 1px solid rgba(42, 53, 80, .1); max-width: calc(100% - 28px); }
.ab3dex__scenes[hidden] { display: none; }
.ab3dex__scenes button { appearance: none; border: 0; background: transparent; color: var(--ab3dex-muted, #5E6A85); font: 600 12.5px/1 Inter, system-ui, sans-serif; letter-spacing: .02em; padding: 7px 11px; border-radius: 999px; cursor: pointer; transition: opacity .15s ease; }
.ab3dex__scenes button:hover { opacity: .8; }
.ab3dex__scenes button[aria-pressed="true"] { background: #2A3550; color: #fff; }
.ab3dex__tools { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 14px; }
.ab3dex__tools .ab3dex__chips { margin-top: 0; }
.ab3dex__namefield { display: inline-flex; align-items: center; gap: 8px; font: 600 13px/1 Inter, system-ui, sans-serif; color: var(--ab3dex-muted); }
.ab3dex__namefield input { font: 600 14px/1 Inter, system-ui, sans-serif; color: var(--ab3dex-ink); border: 1px solid rgba(42, 53, 80, .2); border-radius: 999px; padding: 10px 14px; width: min(240px, 60vw); background: #fff; }
.ab3dex__namefield input:focus-visible { outline: 2px solid var(--ab3dex-electric); outline-offset: 2px; }

.ab3dex__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.ab3dex__chips[hidden] { display: none; }
.ab3dex__chip { appearance: none; width: 34px; height: 26px; border-radius: 9px; border: 1px solid rgba(42, 53, 80, .18); background: var(--c); cursor: pointer; transition: transform .15s ease; }
.ab3dex__chip:hover { transform: translateY(-1px); }
.ab3dex__chip[aria-pressed="true"] { outline: 2px solid var(--ab3dex-electric); outline-offset: 2px; }
.ab3dex__hint { margin: 10px 0 0; color: var(--ab3dex-muted); font-size: 13px; }
.ab3dex__sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.ab3dex--nowebgl .ab3dex__nav, .ab3dex--nowebgl .ab3dex__key { display: none; }
.ab3dex--empty { display: none; }

@media (max-width: 749px) {
  .ab3dex__stage { aspect-ratio: var(--ab3dex-ratio-m); --ab3dex-radius: 16px; }
  .ab3dex__hud { padding: 10px; }
  .ab3dex__btn { width: 40px; height: 40px; }
  .ab3dex__title { font-size: 14px; }
}

/* ── gallery mount: the stage as a layer inside the AB selector's main image (.cv-gal-hero) ── */
.ab3dex--gallery { padding: 0; }
.ab3dex--gallery .ab3dex__inner { display: none; }
.ab3dex-gal { position: absolute; inset: 0; z-index: 4; background: var(--ab3dex-stage-bg, #1E2436); opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility 0s linear .25s; }
.ab3dex-gal.is-on.is-live { opacity: 1; visibility: visible; transition: opacity .25s ease, visibility 0s; }
.ab3dex-gal .ab3dex__stage { position: absolute; inset: 0; aspect-ratio: auto; max-height: none; border-radius: 0; }
.ab3dex-gal .ab3dex__key { top: 12px; }
.ab3dex-gal .ab3dex__nav { display: none; }   /* the hero's own zoom (bottom-right) and arrows own those spots; tap or Space shapeshifts */
.ab3dex-gal .ab3dex__hud { right: 64px; }
.ab3dex-viewtog { display: flex; gap: 4px; padding: 4px; margin: 10px 0 2px; border-radius: 999px; background: #fff; border: 1px solid rgba(42, 53, 80, .12); width: max-content; max-width: 100%; }
.ab3dex-viewtog button { appearance: none; border: 0; background: transparent; color: #5E6A85; display: inline-flex; align-items: center; gap: 7px; font: 700 13px/1 Inter, system-ui, sans-serif; letter-spacing: .02em; padding: 9px 14px; border-radius: 999px; cursor: pointer; transition: opacity .15s ease; }
.ab3dex-viewtog button svg, .ab3dex-thumb svg { width: 16px; height: 16px; flex: none; }
.ab3dex-viewtog button[aria-pressed="true"] { background: #1E47CE; color: #fff; }
.ab3dex-viewtog button:focus-visible, .ab3dex-thumb:focus-visible { outline: 2px solid #1E47CE; outline-offset: 2px; }
.ab3dex-thumb { appearance: none; flex: none; width: 52px; height: 52px; border-radius: 10px; border: 2px solid transparent; background: #EAF0FF; color: #1E47CE; display: grid; place-items: center; align-content: center; gap: 2px; cursor: pointer; font: 800 11px/1 Inter, system-ui, sans-serif; padding: 0; }
.ab3dex-thumb.is-active { border-color: #1E47CE; }
.ab3dex-3d-on .cv-thumb.active { border-color: transparent; opacity: .5; }
@media (max-width: 749px) { .ab3dex-thumb { width: 44px; height: 44px; } .ab3dex-viewtog { margin-top: 8px; } .ab3dex__scenes button { padding: 6px 9px; font-size: 12px; } .ab3dex__tabs { gap: 6px; } .ab3dex__tab { padding: 10px; border-radius: 14px; } .ab3dex__tab-name { font-size: 16px; } .ab3dex__stat b { font-size: 17px; } .ab3dex__stat { font-size: 11px; } .ab3dex__stat-ico { display: none; } }
@media (prefers-reduced-motion: reduce) { .ab3dex__poster, .ab3dex-gal, .ab3dex__tab, .ab3dex__btn, .ab3dex__cap { transition: none; } }
/* fullscreen popup: tabs under the header, 3D layer over the photo */
.ab3dex-viewtog--lb { margin: 0 auto 10px; background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .18); position: relative; z-index: 3; }
.ab3dex-viewtog--lb button { color: rgba(255, 255, 255, .8); }
.ab3dex-viewtog--lb button[aria-pressed="true"] { background: #fff; color: #2A3550; }
.ab3dex-lb3d { position: absolute; inset: 0; z-index: 2; display: none; border-radius: 16px; overflow: hidden; background: var(--ab3dex-stage-bg, #1E2436); }
.ab3dex-lb3d.is-on { display: block; }
.ab3dex-lb3d .ab3dex__stage { position: absolute; inset: 0; aspect-ratio: auto; max-height: none; border-radius: 0; }
.ab3dex-lb-3d .cv-lb-nav { z-index: 4; }
.ab3dex-lb-3d .cv-lb-counter { visibility: hidden; }
.ab3dex-lb-3d .cv-lb-thumb.active { outline: 0; opacity: .5; }
.ab3dex-thumb--lb { width: 56px; height: 42px; background: rgba(255, 255, 255, .12); color: #fff; }
.ab3dex-thumb--lb.is-active { border-color: #fff; }
.ab3dex-lb3d .ab3dex__nav { display: none; }   /* the popup's own arrows walk [3D, photos…] */
.ab3dex-lb3d .ab3dex__hud { right: 72px; left: 72px; }
.ab3dex-off .ab3dex { display: none; }
.ab3dex-gal .ab3dex__scenes { display: none; }   /* the product thumbnail stays clean; scenes live in the section and the popup */
.ab3dex__scenes { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.ab3dex__scenes::-webkit-scrollbar { display: none; }
.ab3dex__scenes button { flex: none; }
@media (max-width: 749px) { .ab3dex__tab-name { white-space: normal; font-size: 15px; line-height: 1.1; } .ab3dex__tab-stats { gap: 4px 10px; } }
/* drag orb: dotted 360° rings that pulse while the booth demonstrates a turn (user-requested exception to the no-pulse rule, 24 Sep) */
.ab3dex__orb { position: absolute; left: 50%; top: 50%; width: 112px; height: 112px; margin: -56px 0 0 -56px; z-index: 2; color: #2A3550; opacity: 0; pointer-events: none; transition: opacity .35s ease; }
.ab3dex__orb svg { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 1px 0 rgba(255, 255, 255, .8)); }
.ab3dex__orb.is-on { opacity: .85; }
.ab3dex__orb.is-gone { display: none; }
.ab3dex__orb svg { transform-origin: 50% 50%; }
.ab3dex__orb .o-x { stroke: #1E47CE; } .ab3dex__orb .o-y { stroke: #2A3550; } .ab3dex__orb .o-z { stroke: #6B78BB; }
.ab3dex__poster { pointer-events: none; -webkit-user-drag: none; user-select: none; }
.ab3dex__poster[hidden] { display: none; }
@media (max-width: 749px) { .ab3dex__orb { width: 88px; height: 88px; margin: -44px 0 0 -44px; } }
@media (prefers-reduced-motion: reduce) { .ab3dex__orb { display: none; } }
.ab3dex__poster { object-fit: contain; background: var(--ab3dex-stage-bg, #1E2436); z-index: 1; }
.ab3dex__tab[hidden] { display: none; }
/* desktop only (≥1100 px): gallery arrows live on the thumbnail row; on the 3D view the image arrows are hidden.
   Below 1100 px (compact + mobile) nothing here applies: the selector's own arrows stay exactly as they are. */
.ab3dex-rownav { display: none; }
@media (min-width: 1100px) {
  .ab3dex-hero-3d .cv-gal-nav { display: none !important; }
  .ab3dex-has-rownav { position: relative; padding: 0 46px; }
  .ab3dex-rownav { display: block; position: absolute; inset: 0; pointer-events: none; }
  .ab3dex-rownav__btn { pointer-events: auto; position: absolute; top: 50%; margin-top: -18px; width: 36px; height: 36px; border-radius: 999px; border: 1px solid rgba(42, 53, 80, .14); background: #fff; color: #2A3550; display: grid; place-items: center; cursor: pointer; transition: transform .15s ease, opacity .15s ease; }
  .ab3dex-rownav__btn:hover { transform: translateY(-1px); opacity: .92; }
  .ab3dex-rownav__btn:focus-visible { outline: 2px solid #1E47CE; outline-offset: 2px; }
  .ab3dex-rownav__btn[data-dir="-1"] { left: 0; } .ab3dex-rownav__btn[data-dir="1"] { right: 0; }
  .ab3dex-rownav__btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
}

/* round 7: charcoal-navy scenes get the site's riso grain (static, no animation) over the whole stage; zoom buttons */
.ab3dex__stage::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: .13; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>"); background-size: 260px 260px; }
@media (max-width: 749px) { .ab3dex__stage::after { opacity: .1; } }
.ab3dex__zoom { position: absolute; right: 14px; bottom: 70px; z-index: 3; display: flex; flex-direction: column; gap: 6px; }
.ab3dex__zbtn { appearance: none; width: 38px; height: 38px; border-radius: 999px; border: 1px solid rgba(42, 53, 80, .14); background: rgba(255, 255, 255, .92); color: var(--ab3dex-ink, #2A3550);
  display: grid; place-items: center; cursor: pointer; padding: 0; transition: transform .15s ease, opacity .15s ease; }
.ab3dex__zbtn:hover { transform: translateY(-1px); opacity: .92; }
.ab3dex__zbtn:focus-visible { outline: 2px solid var(--ab3dex-electric, #1E47CE); outline-offset: 2px; }
.ab3dex__zbtn:disabled { opacity: .4; cursor: default; transform: none; }
.ab3dex__zbtn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.ab3dex-gal .ab3dex__zoom, .ab3dex-lb3d .ab3dex__zoom { right: auto; bottom: auto; left: 16px; top: 16px; flex-direction: row; }   /* thumbnail + popup: upper left, clear of the build label and drag chip */
/* on the dark scenes: the orb draws in light ink, the drag chip gets a rim */
.ab3dex__orb { color: #EAF0FF; } .ab3dex__orb svg { filter: drop-shadow(0 1px 0 rgba(20, 26, 40, .6)); }
.ab3dex__orb .o-x { stroke: #7FA0FF; } .ab3dex__orb .o-y { stroke: #EAF0FF; } .ab3dex__orb .o-z { stroke: #C9B7FF; }
.ab3dex__drag { border: 1px solid rgba(234, 240, 255, .22); }
/* phones: three kit cards across leave ~115px each; stats wrap inside the card instead of overflowing the page */
@media (max-width: 749px) { .ab3dex__tab { min-width: 0; overflow: hidden; } .ab3dex__stat { flex-wrap: wrap; white-space: normal; gap: 2px 5px; font-size: 11px; min-width: 0; } .ab3dex__stat b { font-size: 17px; } }
/* round 7b: [‹] build name [›] bottom left, zoom bottom right, "Scene" names the switcher */
.ab3dex__hud { justify-content: flex-start; }
.ab3dex__buildnav { display: flex; align-items: center; gap: 8px; min-width: 0; max-width: calc(100% - 100px); pointer-events: auto; }
.ab3dex__buildnav .ab3dex__label { min-width: 0; }
.ab3dex__buildnav .ab3dex__btn { flex: none; }
.ab3dex__zoom { top: auto; left: auto; right: 14px; bottom: 17px; flex-direction: row; }
.ab3dex-gal .ab3dex__buildnav .ab3dex__btn, .ab3dex-lb3d .ab3dex__buildnav .ab3dex__btn, .ab3dex--nowebgl .ab3dex__buildnav .ab3dex__btn { display: none; }
.ab3dex-gal .ab3dex__zoom, .ab3dex-lb3d .ab3dex__zoom { right: auto; bottom: auto; left: 16px; top: 16px; }
.ab3dex__scenes { align-items: center; }
.ab3dex__scenes-lbl { flex: none; padding: 0 4px 0 10px; font: 700 12px/1 Inter, system-ui, sans-serif; letter-spacing: .02em; color: var(--ab3dex-ink, #2A3550); }
@media (max-width: 1023px) { .ab3dex__drag { bottom: 76px; } }
@media (max-width: 749px) { .ab3dex__hud { padding: 10px; } .ab3dex__zoom { right: 10px; bottom: 13px; } .ab3dex__buildnav { gap: 6px; max-width: calc(100% - 92px); } .ab3dex__scenes-lbl { padding-left: 8px; } }
/* round 8b: the build label = name + "100% of Shapeshift kit" over a thin progress bar (no count, no battery) */
.ab3dex__count { display: none; }
.ab3dex__use { display: flex; flex-direction: column; gap: 5px; margin-top: 3px; font: 500 12px/1.2 Inter, var(--font-body-family, system-ui), sans-serif; color: var(--ab3dex-muted, #5E6A85); white-space: nowrap; min-width: 0; }
.ab3dex__use-t { overflow: hidden; text-overflow: ellipsis; }
.ab3dex__use b { font-weight: 700; color: var(--ab3dex-ink, #2A3550); font-variant-numeric: tabular-nums; }
.ab3dex__bar { display: block; height: 4px; border-radius: 999px; background: rgba(42, 53, 80, .12); overflow: hidden; min-width: 96px; }
.ab3dex__bar i { display: block; height: 100%; border-radius: 999px; background: var(--ab3dex-electric, #1E47CE); transition: width .4s ease; }
@media (prefers-reduced-motion: reduce) { .ab3dex__bar i { transition: none; } }
/* thumbnail + popup: build arrows around the name like the section; the drag hint sits above the label row everywhere */
.ab3dex-gal .ab3dex__buildnav .ab3dex__btn, .ab3dex-lb3d .ab3dex__buildnav .ab3dex__btn { display: grid; }
.ab3dex--nowebgl .ab3dex__buildnav .ab3dex__btn { display: none; }
.ab3dex__drag { bottom: 84px; }
@media (max-width: 749px) { .ab3dex__drag { bottom: 72px; } .ab3dex__buildnav .ab3dex__btn { width: 38px; height: 38px; } }
/* round 8: popup arrows. Desktop: either side of the thumbnail strip, never over the 3D or the photo. Phones/compact:
   the popup's own corner arrows stay for photos and hide while the 3D is showing (swipe the strip / tabs instead). */
.ab3dex-lbrow { display: flex; align-items: flex-start; justify-content: center; gap: 10px; max-width: 100%; flex-shrink: 0; }
.ab3dex-lbrow > .cv-lb-strip { min-width: 0; }
.ab3dex-lbrow__btn { appearance: none; flex: none; width: 44px; height: 44px; margin-top: 18px; border-radius: 999px; border: 0; background: rgba(255, 255, 255, .12); color: #fff; display: grid; place-items: center; cursor: pointer; padding: 0; transition: transform .15s ease, opacity .15s ease, background .15s ease; }
.ab3dex-lbrow__btn:hover { background: rgba(255, 255, 255, .24); transform: translateY(-1px); }
.ab3dex-lbrow__btn:focus-visible { outline: 2px solid #1E47CE; outline-offset: 2px; }
.ab3dex-lbrow__btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
@media (min-width: 1100px) { .ab3dex-lb-hasrow .cv-lb-hero .cv-lb-nav { display: none !important; } }
@media (max-width: 1099px) { .ab3dex-lbrow__btn { display: none; } .ab3dex-lb-3d .cv-lb-hero .cv-lb-nav { display: none !important; } }
/* the thumbnail's 3D keeps the photo's rounded corners at every width (on phones the hero itself doesn't clip) */
.ab3dex-gal { border-radius: inherit; overflow: hidden; }
/* thumbnail entrance: the selector's Liquid renders .ab3dex-herocover over the photo when the product has builds (dark stage
   + the still of the first build), so the variant photo never flashes; the engine fades it once the panels are flying in */
.ab3dex-herocover { position: absolute; inset: 0; z-index: 3; border-radius: inherit; overflow: hidden; background: #1F2639; pointer-events: none; transition: opacity .6s ease; }   /* 26 Sep: no timed failsafe (on the homepage it revealed the variant photo before the lazily loaded 3D arrived); the engine or a load error drops it */
.ab3dex-herocover img { width: 100%; height: 100%; object-fit: contain; }   /* the booth still in full colour: the loading state is a real render, never an empty dark grid */
.ab3dex-herocover.is-gone { opacity: 0; }
.ab-pm-scope .cv-gal-hero .ab3dex-herocover img { height: 100%; object-fit: contain; }
.ab3dex-off .ab3dex-herocover { display: none; }
@keyframes ab3dexCoverFailsafe { to { opacity: 0; visibility: hidden; } }
/* "Example build" above the build's name: these are ideas made from the kit, not products */
.ab3dex__tag { display: block; margin-bottom: 2px; font: 600 11px/1.2 Inter, var(--font-body-family, system-ui), sans-serif; letter-spacing: .02em; color: var(--ab3dex-muted, #5E6A85); }
/* round 8c: label is taller (tag + name + meter): drag hint sits clear above it; the thumbnail's label may use the full row
   (zoom lives top-left there), names truncate instead of wrapping */
.ab3dex__drag { bottom: 104px; }
@media (max-width: 749px) { .ab3dex__drag { bottom: 100px; } }
.ab3dex-gal .ab3dex__buildnav, .ab3dex-lb3d .ab3dex__buildnav { max-width: 100%; }
.ab3dex__tag, .ab3dex__title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ab3dex__buildnav .ab3dex__label { min-width: 120px; }
/* round 8d (user): in 3D the thumbnail's big side arrows are gone at every width (the build arrows move between builds;
   the 3D / Photos switch and the 3D tile move between views) */
.cv-gal-hero.ab3dex-hero-3d .cv-gal-nav { display: none !important; }
/* phones, Photos: the side arrows stay invisible and untappable until the pin shrink runs, then fade in with it (same
   scroll timeline as the selector's pin). The 3D / Photos pill leaves with the other gallery extras. */
@supports (animation-timeline: --a) and (timeline-scope: --a) {
  html .cv-pin-sda.cv-pin-rdy .cv-gal-hero .cv-gal-nav.prev { animation: cvpin-navp linear both, ab3dexNavIn linear both !important; animation-timeline: --cvpin, --cvpin !important; animation-range: cover 0% cover 100%, cover 0% cover 100% !important; }
  html .cv-pin-sda.cv-pin-rdy .cv-gal-hero .cv-gal-nav.next { animation: cvpin-navn linear both, ab3dexNavIn linear both !important; animation-timeline: --cvpin, --cvpin !important; animation-range: cover 0% cover 100%, cover 0% cover 100% !important; }
  html .cv-pin-sda.cv-pin-rdy .ab3dex-viewtog { animation: ab3dexOut linear both; animation-timeline: --cvpin; animation-range: cover 0% cover 100%; }
  @keyframes ab3dexNavIn { from { opacity: 0; visibility: hidden; } 55% { opacity: 0; visibility: hidden; } to { opacity: 1; visibility: visible; } }
  @keyframes ab3dexOut { from { opacity: 1; visibility: visible; } 33% { opacity: 0; visibility: hidden; } to { opacity: 0; visibility: hidden; } }
}
/* round 8e phones: the label keeps its full name ("Example build / Stand with Roof / 74%" + bar), the kit wording drops,
   the thumbnail's drag hint gives way to the jiggle + orb, and the label row stops short of the fullscreen button */
@media (max-width: 749px) {
  .ab3dex__use-l { display: none; }
  .ab3dex__title { font-size: 13px; }
  .ab3dex__tag { font-size: 10px; }
  .ab3dex__label { padding: 6px 10px; }
  .ab3dex__buildnav .ab3dex__label { min-width: 0; flex: 1 1 auto; }
  .ab3dex__bar { min-width: 64px; }
  .ab3dex-gal .ab3dex__drag { display: none; }
  .ab3dex-gal .ab3dex__hud { right: 58px; }
  .ab3dex-gal .ab3dex__buildnav .ab3dex__btn { width: 32px; height: 32px; }
}
/* mini (pinned) thumbnail on phones: the Shapeshift key steps out and the build label shrinks, both on the pin's scroll timeline */
@supports (animation-timeline: --a) and (timeline-scope: --a) {
  html .cv-pin-sda.cv-pin-rdy .ab3dex-gal .ab3dex__key { animation: ab3dexOut linear both; animation-timeline: --cvpin; animation-range: cover 0% cover 100%; }
  /* 26 Sep (user: with the wider mini view keep + and -): counter-scaled like the expand button (the pin's --cv-k) so all three
     stay 38px, and slid so they stay beside it (expand spans 16px + 38px, gap 8px, at any scale) */
  html .cv-pin-sda.cv-pin-rdy .ab3dex-gal .ab3dex__zoom:not(.ab3dex__zoom--hud) { transform-origin: 0 0; animation: ab3dexZoomPin linear both; animation-timeline: --cvpin; animation-range: cover 0% cover 100%; }
  @keyframes ab3dexZoomPin { from { transform: translate(0px, 0px) scale(1); } to { transform: translate(calc(46px * (var(--cv-k, 1) - 1)), 0px) scale(var(--cv-k, 1)); } }
  html .cv-pin-sda.cv-pin-rdy .ab3dex-gal .ab3dex__buildnav { transform-origin: 0 100%; animation: ab3dexMini linear both; animation-timeline: --cvpin; animation-range: cover 0% cover 100%; }
  @keyframes ab3dexMini { from { transform: scale(1); } 60% { transform: scale(1); } to { transform: scale(.8); } }
}
/* round 10 (user, 25 Sep): on desktop the 3D selector gives its gallery (photos + 3D) three quarters of the width so there
   is room to turn the booth; the options column takes the last quarter. Only the 3D copy of the selector (it hosts the 3D). */
/* the options column never drops below 360px (the summary card and DealEasy's offers bar were squashed and cut off at 25%),
   and the section may grow to 1600px so wide screens still give the gallery about three quarters */
@media (min-width: 769px) {
  .ab-pm-scope .cv-inner:has([data-ab3dex-embed]) { max-width: 1600px !important; }
  .ab-pm-scope .cv-grid:has([data-ab3dex-embed]) { grid-template-columns: minmax(0, 3fr) minmax(320px, 1fr); }
  /* kit size cards: Save sits UNDER Free Shipping, so neither pill can reach the card's top-left setup callout */
  .ab-pm-scope .cv-grid:has([data-ab3dex-embed]) .cv-sc--compact .cv-kit-tags .cv-kit-pillrow { flex-direction: column-reverse !important; align-items: flex-end !important; gap: 3px !important; }
}
/* round 10 (user): the studio's backdrop carries the site's isometric dot lattice (flat dots, no animation) behind the 3D */
.ab3dex__stage[data-scene="studio"], .ab3dex-gal[data-scene="studio"] { background-image: radial-gradient(ellipse 62% 58% at 50% -6%, rgba(131, 146, 210, .34), rgba(131, 146, 210, 0) 72%), url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='20.78'><g fill='%23EAF0FF' fill-opacity='.13'><circle cx='0' cy='0' r='1'/><circle cx='18' cy='0' r='1'/><circle cx='9' cy='10.39' r='1'/><circle cx='0' cy='20.78' r='1'/><circle cx='18' cy='20.78' r='1'/></g></svg>"); background-size: 100% 100%, 18px 20.78px; }
/* the soft light is the user's explicit ask (25 Sep) and is scene lighting, not a UI gradient: the one sanctioned exception */
/* scene dropdown: pills when they fit, a single pill-shaped select when they don't (always on phones) */
.ab3dex__scenesel { display: none; appearance: none; -webkit-appearance: none; border: 0; background: transparent url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232A3550' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>") no-repeat right 10px center / 14px; color: var(--ab3dex-ink, #2A3550); font: 700 12.5px/1 Inter, system-ui, sans-serif; letter-spacing: .02em; padding: 7px 30px 7px 10px; border-radius: 999px; cursor: pointer; max-width: 170px; }
.ab3dex__scenesel:focus-visible { outline: 2px solid var(--ab3dex-electric, #1E47CE); outline-offset: 2px; }
.ab3dex__scenes.is-compact > button { display: none; }
.ab3dex__scenes.is-compact .ab3dex__scenesel { display: block; }
.ab3dex__scenes.is-compact { overflow: visible; }
@media (max-width: 749px) { .ab3dex__scenesel { font-size: 16px; padding: 6px 34px 6px 12px; transform: scale(.8); transform-origin: left center; margin-right: -24px; background-size: 16px; } }   /* 16px: iOS zooms the page on smaller selects */

/* the orb is a canvas now (no per-frame DOM writes); its axis colours come from these */
.ab3dex__orb { --orb-x: #7FA0FF; --orb-y: #EAF0FF; --orb-z: #C9B7FF; }
.ab3dex__orb canvas { width: 100%; height: 100%; display: block; }

/* 26 Sep (user): studio light = one source from ABOVE (a ceiling light), the floor under the booth in shadow */
/* ── 26 Sep (user): full 3D section redesign ───────────────────────────────────────────────────────────────────
   Kit choice = a liquid-glass slider INSIDE the stage (part of the 3D control, always in view with it); under the
   booth three titled settings: Booth colour, Name your booth, Setting; swatches shaped like our panels (squares with
   the corners cut off). Glass recipe: one tint + blur(12px) saturate(2.2) brightness(1.06) + 1px rim, blur capped. */
.ab3dex__kitseg { position: absolute; z-index: 4; top: 14px; left: 50%; transform: translateX(-50%); width: auto; margin: 0; gap: 0; padding: 4px;
  display: grid; grid-template-columns: repeat(var(--ab3dex-tabs-n, 3), minmax(0, 1fr)); border-radius: 999px;
  background: rgba(255, 255, 255, .62); -webkit-backdrop-filter: blur(12px) saturate(2.2) brightness(1.06); backdrop-filter: blur(12px) saturate(2.2) brightness(1.06);
  border: 1px solid rgba(255, 255, 255, .72); box-shadow: 0 6px 22px rgba(10, 16, 34, .28); }
.ab3dex__kitseg[hidden] { display: none; }
.ab3dex__kitseg-thumb { position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 4px; width: calc((100% - 8px) / var(--ab3dex-tabs-n, 3)); border-radius: 999px;
  background: #fff; box-shadow: 0 1px 6px rgba(42, 53, 80, .18); transform: translateX(calc(var(--ab3dex-tab-i, 0) * 100%)); transition: transform .32s cubic-bezier(.3, .7, .2, 1); pointer-events: none; }
.ab3dex__kitseg .ab3dex__tab { position: relative; z-index: 1; display: block; min-width: 0; padding: 10px 18px; border: 0; border-radius: 999px; background: transparent; box-shadow: none; text-align: center; cursor: pointer; transition: opacity .15s ease; }
.ab3dex__kitseg .ab3dex__tab:hover { transform: none; opacity: .85; }
.ab3dex__kitseg .ab3dex__tab[aria-selected="true"] { background: transparent; box-shadow: none; }
.ab3dex__kitseg .ab3dex__tab-stats { display: none; }
.ab3dex__kitseg .ab3dex__tab-name { font: 700 14px/1.1 Inter, system-ui, sans-serif; letter-spacing: .02em; color: var(--ab3dex-ink, #2A3550); white-space: nowrap; }
.ab3dex__kitseg .ab3dex__tab[aria-selected="true"] .ab3dex__tab-name, .ab3dex__kitseg .ab3dex__tab[aria-selected="true"] .ab3dex__tab-short { color: var(--ab3dex-electric, #1E47CE); }
.ab3dex__tab-short { display: none; }
.ab3dex__kitseg .ab3dex__tab:focus-visible { outline: 2px solid var(--ab3dex-electric, #1E47CE); outline-offset: -2px; }
@media (prefers-reduced-motion: reduce) { .ab3dex__kitseg-thumb { transition: none; } }
@media (max-width: 749px) {
  .ab3dex__kitseg { left: 10px; right: 10px; top: 10px; transform: none; }
  .ab3dex__kitseg .ab3dex__tab { padding: 9px 6px; }
  .ab3dex__kitseg .ab3dex__tab-name { display: none; }
  .ab3dex__kitseg .ab3dex__tab-short { display: block; font: 700 13px/1.1 Inter, system-ui, sans-serif; letter-spacing: .02em; color: var(--ab3dex-ink, #2A3550); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ab3dex:not(.ab3dex--gallery) .ab3dex__key { display: none; }
}
/* the stage keeps its rounded corners and, on desktop, fits between the floating header and the floating cart bar */
.ab3dex:not(.ab3dex--gallery) .ab3dex__stage { border-radius: var(--ab3dex-radius, 20px); isolation: isolate; }
@media (min-width: 1024px) { .ab3dex:not(.ab3dex--gallery) .ab3dex__stage { max-height: max(440px, calc(100svh - 210px)); } }

/* the three settings */
.ab3dex__settings { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; margin-top: 18px; }
@media (min-width: 1024px) { .ab3dex__settings { grid-template-columns: auto minmax(0, 1fr); column-gap: 40px; } .ab3dex__set--colour { grid-column: 1 / -1; } }
.ab3dex__set { min-width: 0; }
.ab3dex__set-t { display: block; margin: 0 0 9px; font: 700 13px/1.2 Inter, system-ui, sans-serif; letter-spacing: .02em; color: var(--ab3dex-ink, #2A3550); }
.ab3dex__settings .ab3dex__chips { margin: 0; gap: 6px; }
/* panel-shaped swatches: a square with its corners cut off; the ring is a second cut shape behind (outlines can't follow clip-path) */
.ab3dex__settings .ab3dex__chip { --cut: 8px; position: relative; isolation: isolate; width: 38px; height: 38px; padding: 0; border: 0; border-radius: 0; background: transparent; outline-offset: 1px; }
.ab3dex__settings .ab3dex__chip::before, .ab3dex__settings .ab3dex__chip::after, .ab3dex__scene-sw, .ab3dex__scene::before, .ab3dex__scene::after {
  clip-path: polygon(var(--cut) 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, var(--cut) 100%, 0 calc(100% - var(--cut)), 0 var(--cut)); }
.ab3dex__settings .ab3dex__chip::after { content: ""; position: absolute; inset: 0; z-index: 0; background: rgba(42, 53, 80, .2); }
.ab3dex__settings .ab3dex__chip::before { content: ""; position: absolute; inset: 1px; z-index: 1; background: var(--c); --cut: 7.6px; }
.ab3dex__settings .ab3dex__chip[aria-pressed="true"] { outline: 0; }
.ab3dex__settings .ab3dex__chip[aria-pressed="true"]::after { background: var(--ab3dex-electric, #1E47CE); }
.ab3dex__settings .ab3dex__chip[aria-pressed="true"]::before { inset: 3px; --cut: 6.8px; box-shadow: none; }
.ab3dex__settings .ab3dex__chip[aria-pressed="true"] { background: transparent; }
.ab3dex__settings .ab3dex__chip:focus-visible { outline: 2px solid var(--ab3dex-electric, #1E47CE); outline-offset: 2px; }
/* name */
.ab3dex__namewrap { position: relative; display: inline-block; max-width: 100%; }
.ab3dex__set--name input { font: 600 15px/1 Inter, system-ui, sans-serif; color: var(--ab3dex-ink, #2A3550); border: 1px solid rgba(42, 53, 80, .2); border-radius: 999px; padding: 11px 16px; width: min(300px, 100%); background: #fff; }
.ab3dex__set--name input:focus-visible { outline: 2px solid var(--ab3dex-electric, #1E47CE); outline-offset: 2px; }
.ab3dex__caret { position: absolute; left: 0; top: 50%; width: 2px; height: 18px; margin-top: -9px; border-radius: 1px; background: var(--ab3dex-electric, #1E47CE); pointer-events: none; animation: ab3dexCaret 1.05s steps(1, end) infinite; }
.ab3dex__caret[hidden] { display: none; }
@keyframes ab3dexCaret { 0% { opacity: 1; } 50% { opacity: 0; } }   /* a text cursor blink (on/off), not a pulse */
/* setting swatches */
.ab3dex__scenes--tiles { position: static; display: flex; flex-wrap: wrap; gap: 10px; padding: 0; margin: 0; border: 0; border-radius: 0; background: transparent; max-width: none; overflow: visible; }
.ab3dex__scenes--tiles[hidden] { display: none; }
.ab3dex__scene { --cut: 9px; position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 3px 0 0; margin: 0; border: 0; background: transparent; cursor: pointer;
  font: 600 12px/1.2 Inter, system-ui, sans-serif; letter-spacing: .02em; color: var(--ab3dex-muted, #5E6A85); transition: transform .15s ease, opacity .15s ease; }
.ab3dex__scene:hover { transform: translateY(-1px); opacity: .92; }
.ab3dex__scene::before { content: ""; position: absolute; top: 0; left: 50%; width: 70px; height: 50px; margin-left: -35px; background: transparent; }
.ab3dex__scene::after { content: ""; position: absolute; top: 2px; left: 50%; width: 66px; height: 46px; margin-left: -33px; background: transparent; }
.ab3dex__scene[aria-pressed="true"] { color: var(--ab3dex-ink, #2A3550); }
.ab3dex__scene[aria-pressed="true"]::before { background: var(--ab3dex-electric, #1E47CE); }
.ab3dex__scene[aria-pressed="true"]::after { background: #fff; }
.ab3dex__scene-sw { position: relative; z-index: 1; display: block; width: 64px; height: 44px; margin-top: 0; background: var(--b, #4E576E); }
.ab3dex__scene-sw b { position: absolute; left: 0; right: 0; top: 0; height: 62%; background: var(--a, #1D1F25); }
.ab3dex__scene > span { position: relative; z-index: 1; white-space: nowrap; }
.ab3dex__scene:focus-visible { outline: 2px solid var(--ab3dex-electric, #1E47CE); outline-offset: 3px; border-radius: 6px; }
.ab3dex__scene-sw[data-sw="alley"] { --a: #1D1F25; --b: #4E576E; }
.ab3dex__scene-sw[data-sw="convention"] { --a: #3A4466; --b: #4E576E; }
.ab3dex__scene-sw[data-sw="studio"] { --a: #1F2639; --b: #1F2639; }
.ab3dex__scene-sw[data-sw="studio"] b { height: 100%; background: #1F2639 url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='9' height='10.4'><g fill='%23EAF0FF' fill-opacity='.35'><circle cx='0' cy='0' r='.9'/><circle cx='9' cy='0' r='.9'/><circle cx='4.5' cy='5.2' r='.9'/><circle cx='0' cy='10.4' r='.9'/><circle cx='9' cy='10.4' r='.9'/></g></svg>") 0 0 / 9px 10.4px; }
.ab3dex__scene-sw[data-sw="market"] { --a: #141A2C; --b: #3E5A44; }
.ab3dex__scene-sw[data-sw="market"] b { background: #141A2C url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='64' height='28'><g fill='%23FFD27A'><circle cx='8' cy='20' r='1.6'/><circle cx='20' cy='23' r='1.6'/><circle cx='32' cy='24' r='1.6'/><circle cx='44' cy='23' r='1.6'/><circle cx='56' cy='20' r='1.6'/></g></svg>") 0 0 / 100% 100% no-repeat; }
.ab3dex__scene-sw[data-sw="expo"] { --a: #7E879B; --b: #4A5163; }
@media (max-width: 749px) {
  .ab3dex__settings { gap: 16px; margin-top: 14px; }
  .ab3dex__scenes--tiles { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 0 2px 2px; margin: 0 -2px; }
  .ab3dex__scenes--tiles::-webkit-scrollbar { display: none; }
  .ab3dex__scene { flex: none; }
  .ab3dex__settings .ab3dex__chip { width: 34px; height: 34px; --cut: 7px; }
}
/* the old in-stage scene pills' button styles must not reach the setting tiles */
.ab3dex__scenes.ab3dex__scenes--tiles .ab3dex__scene { padding: 3px 0 0; border-radius: 0; background: transparent; color: var(--ab3dex-muted, #5E6A85); font: 600 12px/1.2 Inter, system-ui, sans-serif; letter-spacing: .02em; flex: none; }
.ab3dex__scenes.ab3dex__scenes--tiles .ab3dex__scene[aria-pressed="true"] { background: transparent; color: var(--ab3dex-ink, #2A3550); }
.ab3dex__scenes.ab3dex__scenes--tiles .ab3dex__scene:hover { opacity: .92; }
/* 26 Sep (user, desktop): one set of photo arrows (the carousel's), hugging the thumbnails; and the whole gallery
   (photo / 3D, the 3D view · Photos switch, the thumbnail row) fits between the floating header and the floating cart bar */
@media (min-width: 1100px) {
  .cv-gal-hero.ab3dex-rownav-on .cv-gal-nav { display: none !important; }
  .ab3dex-has-rownav { width: fit-content; max-width: 100%; }
}
@media (min-width: 769px) {   /* same as the inlined critical rules in snippets/ab-pm-styles.liquid: photos rounded in the capped frame */
  .ab-pm-scope .cv-grid:has([data-ab3dex-embed]) .cv-gal-hero { max-height: max(360px, calc(100svh - 330px)); background: transparent; border-color: transparent; }
  .ab-pm-scope .cv-grid:has([data-ab3dex-embed]) .cv-gal-hero > img { width: auto !important; height: 100% !important; max-width: 100%; margin: 0 auto; display: block; object-fit: cover; border-radius: inherit; }
}
/* the full-screen popup's photos keep the same radius */
.ab-pm-lb .cv-lb-hero img { border-radius: 16px; }
/* 26 Sep (user): scene swatches are little pictures, evenly spaced; long names wrap under their own tile */
.ab3dex__scenes.ab3dex__scenes--tiles { display: grid; grid-template-columns: repeat(5, 82px); gap: 12px; }
.ab3dex__scenes.ab3dex__scenes--tiles .ab3dex__scene { width: 82px; }
.ab3dex__scenes.ab3dex__scenes--tiles .ab3dex__scene > span { white-space: normal; text-align: center; line-height: 1.2; max-width: 82px; }
.ab3dex__scene-sw { background: transparent; }
.ab3dex__scene-sw svg { display: block; width: 100%; height: 100%; }
@media (max-width: 749px) { .ab3dex__scenes.ab3dex__scenes--tiles { display: flex; gap: 10px; } .ab3dex__scenes.ab3dex__scenes--tiles .ab3dex__scene { width: 76px; } }
/* 26 Sep (user): a more liquid glass slider (the thumb stretches as it travels and settles with a soft overshoot) and the
   Shapeshift / Space button at the bottom middle of the stage, away from the kit slider */
.ab3dex__kitseg-thumb { --sx: 1; --sy: 1; background: rgba(255, 255, 255, .94); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 -1px 0 rgba(42, 53, 80, .06), 0 2px 12px rgba(42, 53, 80, .2);
  transform: translateX(calc(var(--ab3dex-tab-i, 0) * 100%)) scale(var(--sx), var(--sy)); transition: transform .62s cubic-bezier(.3, 1.35, .45, 1); }
.ab3dex__kitseg.is-moving .ab3dex__kitseg-thumb { --sx: 1.14; --sy: .86; transition: transform .17s cubic-bezier(.4, 0, .6, 1); }
.ab3dex__kitseg .ab3dex__tab .ab3dex__tab-name, .ab3dex__kitseg .ab3dex__tab .ab3dex__tab-short { transition: color .3s ease; }
@media (prefers-reduced-motion: reduce) { .ab3dex__kitseg-thumb, .ab3dex__kitseg.is-moving .ab3dex__kitseg-thumb { transition: none; --sx: 1; --sy: 1; } }
.ab3dex:not(.ab3dex--gallery) .ab3dex__key { top: auto; bottom: 16px; left: 0; right: 0; margin: 0 auto; width: max-content; }
@media (min-width: 750px) and (max-width: 899px) { .ab3dex:not(.ab3dex--gallery) .ab3dex__key { left: auto; right: 124px; margin: 0; } }   /* narrower stages: beside the zoom, clear of the build name */
/* 26 Sep (user): every control on the 3D is liquid-glass frosted like the floating header (one tint + blur 12px
   saturate 2.2 brightness 1.06 + 1px rim), and the selector's expand button joins the set. Phones: a denser tint and
   no live blur (a blur over the animating canvas re-samples every frame and stutters on iOS). */
.ab3dex__btn, .ab3dex__zbtn, .ab3dex__key, .ab3dex__label, .ab3dex__scenes:not(.ab3dex__scenes--tiles),
.ab-pm-scope .cv-gal-hero[data-ab3dex-host] .cv-gal-zoom {
  background: rgba(255, 255, 255, .6); -webkit-backdrop-filter: blur(12px) saturate(2.2) brightness(1.06); backdrop-filter: blur(12px) saturate(2.2) brightness(1.06);
  border: 1px solid rgba(255, 255, 255, .72); box-shadow: 0 6px 18px rgba(10, 16, 34, .22); }
.ab-pm-scope .cv-gal-hero[data-ab3dex-host] .cv-gal-zoom { width: 44px; height: 44px; border-radius: 999px; color: var(--ab3dex-ink, #2A3550); opacity: 1; transition: transform .15s ease, opacity .15s ease; }
.ab-pm-scope .cv-gal-hero[data-ab3dex-host] .cv-gal-zoom:hover { transform: translateY(-1px); opacity: .92; }
.ab-pm-scope .cv-gal-hero[data-ab3dex-host] .cv-gal-zoom svg { width: 18px; height: 18px; }
.ab-pm-scope .cv-gal-hero[data-ab3dex-host] .cv-gal-zoom:focus-visible { outline: 2px solid var(--ab3dex-electric, #1E47CE); outline-offset: 2px; }
@media (max-width: 749px) {
  .ab3dex__btn, .ab3dex__zbtn, .ab3dex__key, .ab3dex__label, .ab3dex__scenes:not(.ab3dex__scenes--tiles), .ab-pm-scope .cv-gal-hero[data-ab3dex-host] .cv-gal-zoom { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(255, 255, 255, .88); }
  .ab-pm-scope .cv-gal-hero[data-ab3dex-host] .cv-gal-zoom { width: 38px; height: 38px; }
}
/* 26 Sep (user): the full-size popup: the scene is a dropdown just right of − / + (upper left), the build label pinned
   bottom-left, the Shapeshift button bottom-middle */
.ab3dex-lb3d .ab3dex__scenes { left: 112px; top: 16px; right: auto; max-width: calc(100% - 128px); }
.ab3dex-lb3d .ab3dex__scenes > button { display: none; }
.ab3dex-lb3d .ab3dex__scenes .ab3dex__scenesel { display: block; }
.ab3dex-lb3d .ab3dex__hud { left: 16px; right: auto; bottom: 16px; }
.ab3dex-lb3d .ab3dex__key { top: auto; bottom: 16px; left: 0; right: 0; margin: 0 auto; width: max-content; }
/* 26 Sep (user): the full-screen popup's 3D uses the width on desktop (the frame is sized for square photos otherwise) */
@media (min-width: 1024px) { .ab-pm-lb.ab3dex-lb-3d .cv-lb-hero { max-width: min(1680px, 94vw); padding: 0 24px; } }
/* 26 Sep (user): the kit slider's second line: panel + accessory counts, minimal */
.ab3dex__kitseg .ab3dex__tab { padding: 8px 18px 7px; }
.ab3dex__kitseg .ab3dex__tab-stats { display: flex; justify-content: center; gap: 10px; margin-top: 3px; flex-wrap: nowrap; }
.ab3dex__kitseg .ab3dex__stat { display: inline-flex; align-items: center; gap: 3px; font: 600 11px/1.1 Inter, system-ui, sans-serif; letter-spacing: .01em; color: var(--ab3dex-muted, #5E6A85); white-space: nowrap; }
.ab3dex__kitseg .ab3dex__stat b { font: 700 11px/1.1 Inter, system-ui, sans-serif; color: inherit; }
.ab3dex__kitseg .ab3dex__stat-ico { width: 12px; height: 12px; }
.ab3dex__kitseg .ab3dex__tab[aria-selected="true"] .ab3dex__stat { color: var(--ab3dex-ink, #2A3550); }
@media (max-width: 749px) {
  .ab3dex__kitseg .ab3dex__tab { padding: 7px 4px 6px; }
  .ab3dex__kitseg .ab3dex__tab-stats { gap: 6px; }
  .ab3dex__kitseg .ab3dex__stat { font-size: 0; gap: 2px; } .ab3dex__kitseg .ab3dex__stat b { font-size: 10px; } .ab3dex__kitseg .ab3dex__stat-ico { width: 11px; height: 11px; }   /* phones: icon + number only */
}
/* 26 Sep (user): scene cards all sit at the top of their cell (a two-line name no longer lifts its card), and the cobalt
   ring is even: an inset ring around a cut corner needs a smaller cut on the inner shape (cut_in = cut_out - 0.586 x ring),
   otherwise the diagonal edges come out ~40% thicker than the straight ones. Same for the colour swatches. */
.ab3dex__scenes.ab3dex__scenes--tiles { align-items: start; }
.ab3dex__scenes.ab3dex__scenes--tiles .ab3dex__scene { align-self: start; justify-content: flex-start; }
.ab3dex__scene::after { --cut: 7.83px; }
.ab3dex__scene-sw { --cut: 7.24px; }
.ab3dex__settings .ab3dex__chip::before { --cut: 7.41px; }
.ab3dex__settings .ab3dex__chip[aria-pressed="true"]::before { --cut: 6.24px; }
.ab3dex__kitseg .ab3dex__tab { overflow: hidden; }
.ab3dex__kitseg .ab3dex__tab-stats { max-width: 100%; }
@media (max-width: 1279px) { .ab3dex__kitseg .ab3dex__stat { font-size: 0; gap: 2px; } .ab3dex__kitseg .ab3dex__stat b { font-size: 11px; } }   /* narrower stages: icon + number, never touching the next kit */
@media (min-width: 750px) { .ab3dex__kitseg { min-width: min(620px, calc(100% - 28px)); } }   /* every kit name fits its own segment */

/* 26 Sep (user): the build label is a compact two-line pill the height of the round buttons (44 px): "Example build" +
   the name on line one, the kit meter on line two, covering far less of the booth */
.ab3dex__label { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 6px; row-gap: 4px; align-content: center; align-items: baseline;
  box-sizing: border-box; height: 44px; padding: 0 16px; border-radius: 999px; }
.ab3dex__label .ab3dex__tag { grid-column: 1; grid-row: 1; margin: 0; font: 600 10.5px/1.1 Inter, system-ui, sans-serif; }
.ab3dex__label .ab3dex__title { grid-column: 2; grid-row: 1; font: 700 13px/1.1 Inter, system-ui, sans-serif; }
.ab3dex__label .ab3dex__count { display: none; }
.ab3dex__label .ab3dex__use { grid-column: 1 / -1; grid-row: 2; flex-direction: row; align-items: center; gap: 7px; margin: 0; font-size: 11px; line-height: 1.1; }
.ab3dex__label .ab3dex__use .ab3dex__bar { order: 2; flex: none; width: 56px; min-width: 0; height: 3px; }
@media (max-width: 749px) { .ab3dex__label { height: 40px; padding: 0 12px; } .ab3dex__label .ab3dex__tag { display: none; } .ab3dex__label .ab3dex__title { grid-column: 1 / -1; font-size: 12.5px; } .ab3dex__label .ab3dex__use .ab3dex__bar { width: 40px; } }
/* 25 Sep (user): the build arrows live INSIDE one glass pill with the label; the name is never truncated */
.ab3dex__buildnav { gap: 2px; padding: 4px; border-radius: 999px; background: rgba(255, 255, 255, .6); -webkit-backdrop-filter: blur(12px) saturate(2.2) brightness(1.06); backdrop-filter: blur(12px) saturate(2.2) brightness(1.06); border: 1px solid rgba(255, 255, 255, .72); box-shadow: 0 6px 18px rgba(10, 16, 34, .22); max-width: calc(100% - 72px); }
.ab3dex__buildnav .ab3dex__btn { width: 36px; height: 36px; background: rgba(255, 255, 255, .85); -webkit-backdrop-filter: none; backdrop-filter: none; border: 0; box-shadow: none; }
.ab3dex__buildnav .ab3dex__label { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; border: 0; box-shadow: none; height: auto; min-height: 36px; padding: 2px 8px; border-radius: 0; }
.ab3dex__label .ab3dex__title { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.15; }
@media (max-width: 749px) { .ab3dex__buildnav { background: rgba(255, 255, 255, .88); -webkit-backdrop-filter: none; backdrop-filter: none; max-width: calc(100% - 60px); } .ab3dex__buildnav .ab3dex__btn { width: 32px; height: 32px; } }
/* the build pill + its arrows share the expand button's centre line on the thumbnail */
.ab3dex-gal .ab3dex__hud { padding-bottom: 9px; }
@media (max-width: 749px) { .ab3dex-gal .ab3dex__hud { padding-bottom: 5px; } .ab3dex-gal .ab3dex__label .ab3dex__title { font-size: 12px; } }
/* 25 Sep (user): over the 3D sections the product sub-nav steps aside too (the cart stays) */
@media (min-width: 769px) { html.ab3dex-away #ab-subnav, html.ab3dex-away .ab-subnav { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; transition: opacity .2s ease, visibility 0s linear .2s; } }
/* 25 Sep (user): roomier kit pills; the counts always say "panels" + "accessories" ("multi-shape panels" when there is
   room), stacking onto two lines where narrow; Scene sits beside Name your booth when there is room */
.ab3dex__kitseg { padding: 5px; }
.ab3dex__kitseg .ab3dex__tab { padding: 10px 22px 9px; }
.ab3dex__kitseg .ab3dex__tab-stats { gap: 2px 12px; }
.ab3dex__kitseg .ab3dex__stat { font-size: 11px !important; gap: 3px !important; }
.ab3dex__kitseg .ab3dex__stat b { font-size: 11px !important; }
.ab3dex__ms { display: none; }
@media (min-width: 1280px) { .ab3dex__kitseg .ab3dex__ms { display: inline; } }
@media (max-width: 899px) { .ab3dex__kitseg .ab3dex__tab-stats { flex-direction: column; align-items: center; } .ab3dex__kitseg .ab3dex__tab { padding: 9px 14px 8px; } }
@media (max-width: 749px) { .ab3dex__kitseg .ab3dex__tab { padding: 8px 6px 7px; } .ab3dex__kitseg .ab3dex__stat { font-size: 10px !important; } .ab3dex__kitseg .ab3dex__stat b { font-size: 10px !important; } .ab3dex__kitseg .ab3dex__stat-ico { display: none; } }
@media (min-width: 1024px) { .ab3dex__settings .ab3dex__set--name { grid-column: 1; grid-row: 2; } .ab3dex__settings .ab3dex__set--scene { grid-column: 2; grid-row: 2; } }
@media (min-width: 1280px) { .ab3dex__kitseg .ab3dex__ms { display: none; } }
@media (min-width: 1700px) { .ab3dex__kitseg .ab3dex__ms { display: inline; } .ab3dex__kitseg { min-width: 820px; } }
@media (min-width: 900px) { .ab3dex__kitseg { min-width: min(680px, calc(100% - 28px)); } .ab3dex__kitseg .ab3dex__tab { padding: 10px 16px 9px; } }
@media (min-width: 1700px) { .ab3dex__kitseg { min-width: 860px; } }

/* ── 25 Sep (user, post-launch round) ── */
/* the Example pill: navy everywhere inside (was hard to read on the glass), a steady width instead of one that follows
   the build's name: the full width up to the expand button on phones and compact widths, half on full desktop and in the popup */
.ab3dex__buildnav .ab3dex__tag, .ab3dex__buildnav .ab3dex__title, .ab3dex__buildnav .ab3dex__use, .ab3dex__buildnav .ab3dex__use b { color: #2A3550; }
.ab3dex-gal .ab3dex__buildnav, .ab3dex-lb3d .ab3dex__buildnav { width: 100%; max-width: 100%; }   /* 26 Sep (user): below desktop the pill runs up to the expand button (the hud already stops short of it), so names don't truncate */
.ab3dex-gal .ab3dex__buildnav .ab3dex__label, .ab3dex-lb3d .ab3dex__buildnav .ab3dex__label { flex: 1 1 auto; }
@media (min-width: 1100px) { .ab3dex-gal .ab3dex__buildnav { width: 50%; } }
@media (min-width: 750px) { .ab3dex-lb3d .ab3dex__buildnav { width: 50%; } }
/* popup: Example pill and the Shapeshift button on one line along the bottom, the button at the right */
.ab3dex-lb3d .ab3dex__hud { left: 16px; right: 16px; bottom: 16px; padding: 0; }
.ab3dex-lb3d .ab3dex__key { top: auto; bottom: 16px; left: auto; right: 16px; margin: 0; }
/* scene dropdown: opens under its button, glass like the header menus */
.ab3dex__scenesel { position: relative; padding: 0; background: none; max-width: none; transform: none; margin: 0; }
.ab3dex__scenes .ab3dex__dd-btn { appearance: none; display: inline-flex; align-items: center; gap: 6px; border: 0; background: transparent; color: #2A3550; font: 700 12.5px/1 Inter, system-ui, sans-serif; letter-spacing: .02em; padding: 7px 10px; border-radius: 999px; cursor: pointer; white-space: nowrap; }
.ab3dex__dd-btn svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s ease; }
.ab3dex__scenesel.is-open .ab3dex__dd-btn svg { transform: rotate(180deg); }
.ab3dex__dd-btn:focus-visible, .ab3dex__dd-menu button:focus-visible { outline: 2px solid #1E47CE; outline-offset: 2px; }
.ab3dex__dd-menu { position: absolute; top: calc(100% + 10px); left: -4px; z-index: 6; min-width: 190px; display: flex; flex-direction: column; gap: 2px; padding: 6px; border-radius: 18px; background: rgba(255, 255, 255, .8); -webkit-backdrop-filter: blur(12px) saturate(2.2) brightness(1.06); backdrop-filter: blur(12px) saturate(2.2) brightness(1.06); border: 1px solid rgba(255, 255, 255, .72); box-shadow: 0 14px 34px rgba(10, 16, 34, .28); }
.ab3dex__dd-menu[hidden] { display: none; }
.ab3dex__scenes .ab3dex__dd-menu button { appearance: none; border: 0; background: transparent; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 9px 12px; border-radius: 12px; color: #2A3550; font: 600 13px/1.2 Inter, system-ui, sans-serif; letter-spacing: .02em; text-align: left; cursor: pointer; white-space: nowrap; transition: background .15s ease; }
.ab3dex__scenes .ab3dex__dd-menu button:hover { background: rgba(30, 71, 206, .08); }
.ab3dex__dd-menu button svg { width: 16px; height: 16px; fill: none; stroke: #1E47CE; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; visibility: hidden; }
.ab3dex__scenes .ab3dex__dd-menu button[aria-selected="true"] { font-weight: 700; color: #2A3550; }
.ab3dex__dd-menu button[aria-selected="true"] svg { visibility: visible; }
.ab3dex__scenes.is-compact, .ab3dex-lb3d .ab3dex__scenes { overflow: visible; }
@media (max-width: 749px) { .ab3dex__scenesel { font-size: inherit; transform: none; margin-right: 0; } .ab3dex__dd-menu { background: rgba(255, 255, 255, .96); -webkit-backdrop-filter: none; backdrop-filter: none; } }
/* popup thumbnail row: the 3D tile is the thumbnails' size and wears the same gold frame when it is showing; the photo
   you were on is NOT marked (26 Sep, user: one indicator only) */
.ab-pm-lb .ab3dex-thumb--lb { align-self: stretch; width: auto; height: auto; min-height: 42px; aspect-ratio: 1; border-radius: var(--cv-r-sm, 10px); opacity: .55; }
.ab-pm-lb .ab3dex-thumb--lb.is-active { border-color: var(--cv-gn, #EEC95C); background: rgba(255, 255, 255, .16); opacity: 1; }
.ab-pm-lb.ab3dex-lb-3d .cv-lb-thumb.active { border-color: transparent; outline: 0; opacity: .4; }   /* 26 Sep (user): ONE indicator only: the 3D tile while 3D shows (no last-photo marker) */
.ab3dex-3d-on .cv-thumb.active { border-color: transparent !important; box-shadow: none !important; outline: 0; opacity: .5; }
/* popup arrows at the ends of the thumbnail row from tablet up (they sat in the photo's bottom corners at compact widths) */
.ab3dex-lbrow { align-items: center; }
.ab3dex-lbrow__btn { margin-top: 0; }
@media (min-width: 750px) { .ab3dex-lbrow__btn { display: grid; } .ab3dex-lb-hasrow .cv-lb-hero .cv-lb-nav { display: none !important; } }
/* the popup's thumbnail row never runs past the screen edge (phones: it started 32 px off-screen and clipped the 3D tile) */
.ab3dex-lbrow { width: 100%; box-sizing: border-box; }
.ab3dex-lbrow > .cv-lb-strip { flex: 0 1 auto; min-width: 0; max-width: 100%; }
/* 26 Sep (user): "Imagine your space fit" — the build's dimensions on the 3D (measuring lines) + a switch and cm/ft */
.ab3dex__set--dims { grid-column: 1 / -1; }
.ab3dex__dims { display: flex; align-items: center; gap: 10px 12px; flex-wrap: wrap; }
.ab3dex__switch { appearance: none; flex: none; border: 0; width: 40px; height: 24px; border-radius: 999px; background: #C9D2E6; position: relative; cursor: pointer; padding: 0; transition: background .2s ease; }
.ab3dex__switch i { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(42, 53, 80, .3); transition: transform .2s ease; }
.ab3dex__switch[aria-checked="true"] { background: #1E47CE; }
.ab3dex__switch[aria-checked="true"] i { transform: translateX(16px); }
.ab3dex__unit { display: inline-flex; flex: none; padding: 3px; gap: 2px; border-radius: 999px; background: #EAF0FF; }
.ab3dex__unit button { appearance: none; border: 0; background: transparent; border-radius: 999px; padding: 6px 12px; font: 700 12px/1 Inter, system-ui, sans-serif; letter-spacing: .02em; color: #5E6A85; cursor: pointer; transition: background .15s ease, color .15s ease; }
.ab3dex__unit button[aria-pressed="true"] { background: #fff; color: #2A3550; box-shadow: 0 1px 3px rgba(42, 53, 80, .18); }
.ab3dex__switch:focus-visible, .ab3dex__unit button:focus-visible { outline: 2px solid #1E47CE; outline-offset: 2px; }
.ab3dex__dimtxt { min-width: 0; font: 600 12.5px/1.3 Inter, system-ui, sans-serif; color: #2A3550; font-variant-numeric: tabular-nums; }
.ab3dex__dims.is-off .ab3dex__dimtxt { opacity: .45; }
.ab3dex__meas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; overflow: visible; }
.ab3dex__meas-l, .ab3dex__meas-t { stroke: #EAF0FF; stroke-width: 1.5; stroke-linecap: round; }
.ab3dex__meas-x { font: 700 12px/1 Inter, system-ui, sans-serif; letter-spacing: .02em; fill: #fff; paint-order: stroke; stroke: #1F2639; stroke-width: 3.5px; stroke-linejoin: round; }
.ab3dex-gal .ab3dex__meas, .ab3dex-lb3d .ab3dex__meas { display: none; }
/* 26 Sep (user): the kit-usage line is never cut: phones read "74% of kit used", wider views "74% of Shapeshift kit"; the bar gives way first */
.ab3dex__use-s { display: none; }
@media (max-width: 749px) { .ab3dex__use-s { display: inline; } }
.ab3dex__use-t { overflow: visible; text-overflow: clip; flex: none; }
.ab3dex__label .ab3dex__use .ab3dex__bar { flex: 0 1 56px; min-width: 14px; }
/* 26 Sep (user: the 3D / Photos toggle did nothing on phones): the pinned gallery column switches pointer events off for its row
   (ab-pm-pin) and the toggle lives in that row; give it back */
.cv-pin-rdy .ab3dex-viewtog, .cv-pin-rdy .ab3dex-viewtog button { pointer-events: auto; }
.ab3dex-lb3d .ab3dex__stage { touch-action: none; }   /* 26 Sep (user): in the popup a vertical drag tilts the booth instead of scrolling */
/* 26 Sep (user: the expand button was obstructive and oversized): it leads the round controls in the top-left corner at the same
   38px as zoom +/-; in the pinned mini thumbnail the +/- step out and expand keeps the corner. The build name gets the whole
   bottom row, and its layer is composited above the WebGL canvas so the booth can never paint over it (Safari). */
.ab-pm-scope .cv-gal-hero[data-ab3dex-host] .cv-gal-zoom { top: 16px !important; left: 16px !important; right: auto !important; bottom: auto !important; width: 38px !important; height: 38px !important; opacity: 1 !important; transform-origin: 0 0 !important; }   /* the pin's counter-scale keeps it in its corner */
.ab-pm-scope .cv-gal-hero[data-ab3dex-host] .cv-gal-zoom svg { width: 16px; height: 16px; }
.ab3dex-gal .ab3dex__zoom { left: 62px; }
.ab3dex-gal .ab3dex__hud { right: 0; z-index: 4; transform: translateZ(0); }
/* 26 Sep (user): the kit slider takes less height (one stats row at every width; phones keep icon + number) and its glass
   thumb eases out without overshoot, squash kept small, clipped to the track so it never leaves the glass */
.ab3dex__kitseg { overflow: hidden; }
.ab3dex__kitseg .ab3dex__tab { padding: 6px 16px 5px; }
.ab3dex__kitseg .ab3dex__tab-stats { margin-top: 2px; }
@media (max-width: 899px) { .ab3dex__kitseg .ab3dex__tab-stats { flex-direction: row; align-items: center; } .ab3dex__kitseg .ab3dex__tab { padding: 6px 12px 5px; } }
@media (max-width: 749px) { .ab3dex__kitseg .ab3dex__tab { padding: 6px 4px 5px; } }
.ab3dex__kitseg-thumb { transition: transform .45s cubic-bezier(.25, .9, .3, 1); }
.ab3dex__kitseg.is-moving .ab3dex__kitseg-thumb { --sx: 1.04; --sy: .96; transition: transform .16s ease-out; }
/* 26 Sep (user): the build pill reads "Example build" / name / "Uses 87% of Shapeshift kit"; the bar's unused track is a visible light blue */
.ab3dex__label { grid-template-columns: minmax(0, 1fr); }
.ab3dex__label .ab3dex__tag { grid-column: 1; grid-row: 1; display: block !important; font: 600 10px/1.1 Inter, system-ui, sans-serif; letter-spacing: .02em; }
.ab3dex__label .ab3dex__title { grid-column: 1 !important; grid-row: 2; }
.ab3dex__label .ab3dex__use { grid-column: 1; grid-row: 3; }
.ab3dex__use-l, .ab3dex__use-s { display: none !important; }
@media (max-width: 749px) { .ab3dex__label { height: auto !important; min-height: 40px; padding: 3px 12px !important; row-gap: 2px; } }
.ab3dex__bar { background: rgba(30, 71, 206, .2); }
/* cm/ft: a clear two-button control */
.ab3dex__unit { padding: 3px; background: #fff; border: 1px solid rgba(42, 53, 80, .18); box-shadow: 0 1px 2px rgba(42, 53, 80, .08); }
.ab3dex__unit button { color: #2A3550; padding: 6px 14px; }
.ab3dex__unit button[aria-pressed="true"] { background: #2A3550; color: #fff; box-shadow: none; }
.ab3dex__unit button:not([aria-pressed="true"]):hover { background: #EAF0FF; }
/* full 3D section: Shapeshift key beside + and -, one bottom row with the build pill (centres aligned) */
@media (min-width: 750px) {
  .ab3dex:not(.ab3dex--gallery) .ab3dex__key { top: auto !important; left: auto !important; right: 104px !important; bottom: 22px !important; margin: 0 !important; }
  .ab3dex:not(.ab3dex--gallery) .ab3dex__zoom { bottom: 25px; right: 14px; }
}
/* 26 Sep (user, items 210 / 215 / 221): build pill.
   - "Example build" sits on the LEFT of the name (one row), the kit usage under it: two short rows, less height.
   - The arrow circles keep one size at every width (40px, never shrunk in compact or on phones); the text shrinks instead.
   - Each circle is inset evenly: the pill's padding is the same above, below and on the outer side of each arrow, and the
     label never makes the pill taller than circle + padding (it is centred in that height).
   - Touch: an invisible ring extends each arrow's hit area to the pill's edge (50px). */
.ab3dex__buildnav { padding: 5px !important; gap: 4px !important; align-items: center !important; }
.ab3dex__buildnav .ab3dex__btn { width: 40px !important; height: 40px !important; flex: none; position: relative; }
.ab3dex__buildnav .ab3dex__btn::after { content: ""; position: absolute; inset: -5px; border-radius: 999px; }
.ab3dex__buildnav .ab3dex__label { grid-template-columns: auto minmax(0, 1fr) !important; column-gap: 6px; row-gap: 3px; min-height: 0 !important; height: auto !important; padding: 0 6px !important; align-self: center; }
.ab3dex__buildnav .ab3dex__label .ab3dex__tag { grid-column: 1 !important; grid-row: 1 !important; align-self: baseline; white-space: nowrap; }
.ab3dex__buildnav .ab3dex__label .ab3dex__title { grid-column: 2 !important; grid-row: 1 !important; align-self: baseline; white-space: normal; line-height: 1.15; }
.ab3dex__buildnav .ab3dex__label .ab3dex__use { grid-column: 1 / -1 !important; grid-row: 2 !important; }
@media (max-width: 1099px) {
  .ab3dex__buildnav .ab3dex__label .ab3dex__title { font-size: 12.5px; }
  .ab3dex__buildnav .ab3dex__label .ab3dex__tag { font-size: 10px; }
  .ab3dex__buildnav .ab3dex__label .ab3dex__use { font-size: 10.5px; }
}
@media (max-width: 749px) {
  .ab3dex__buildnav .ab3dex__label .ab3dex__title { font-size: 12px; }
  .ab3dex__buildnav .ab3dex__label { padding: 0 4px !important; column-gap: 5px; row-gap: 2px; }
}
/* 26 Sep (user, items 216 / 218): the thumbnail's Shapeshift button only on tablet and full desktop. At phone widths and in a
   compact (narrow) desktop window it wasted space and clipped to "Sha" mid-pin; the booth still shapeshifts on tap and on
   its own every 5 s. 768 = the pin's own breakpoint, so the pinned mini never carries it. */
@media (max-width: 768px) { .ab3dex-gal .ab3dex__key { display: none !important; } }
/* 26 Sep (user, item 219): the "3D view / Photos" switch leaves at the START of the pin (gone by 12% of the shrink), before
   the kit-size heading slides under it */
@supports (animation-timeline: --a) {
  @media (max-width: 768px) {
    html .cv-pin-sda.cv-pin-rdy .ab3dex-viewtog { animation: ab3dexOutSoon linear both !important; animation-timeline: --cvpin !important; animation-range: cover 0% cover 100% !important; }
  }
}
@keyframes ab3dexOutSoon { from { opacity: 1; visibility: visible; } 12% { opacity: 0; visibility: hidden; } to { opacity: 0; visibility: hidden; } }
/* phones: the tag reads "Example" so the build name keeps one line beside it (the pill stays arrow + padding tall) */
@media (max-width: 749px) { .ab3dex__tag-b { display: none; } }
/* 26 Sep (user): prev + next side by side on the left, then the words. The pill's padding is the same above, below and left of
   the circles; the label keeps a matching breath on the right */
.ab3dex__buildnav .ab3dex__label { padding: 0 12px 0 6px !important; }
@media (max-width: 749px) { .ab3dex__buildnav .ab3dex__label { padding: 0 10px 0 4px !important; } }
/* 26 Sep (user: "the close button is not in the right location ... the name of the kit is in the wrong area"): the popup's header
   spans the same width as the 3D frame, in 3D AND Photos (no jump when switching): the name sits at the frame's left edge, the
   close button at its top-right corner */
@media (min-width: 1024px) { .ab-pm-lb .cv-lb-header { max-width: min(1680px, 94vw) !important; padding-left: 0 !important; padding-right: 0 !important; } }
/* ── 26 Sep (user, item 227): full 3D section editor ──────────────────────────────────────────────────────────────
   Desktop (>=900px since 28 Sep, user: sidebar from ~900): the settings float as ONE liquid-glass pane over the right of the canvas (a vertical stack like the
   Booth Builder's panel): Booth colour, Name your booth, Scene, Example build dimensions, and the Shapeshift tip. It never
   scrolls: swatches shrink and wrap, scenes wrap as small tiles. The engine frames the booth in the canvas LEFT of the pane
   (_sideR), so the canvas keeps its full size. Kit sizes sit upper left. Phones/compact keep the settings under the canvas. */
.ab3dex__work { position: relative; }
.ab3dex__set--tip { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ab3dex__set--tip .ab3dex__key { position: static !important; inset: auto !important; transform: none !important; margin: 0 !important; flex: none; animation: none !important; opacity: 1 !important; visibility: visible !important; }
.ab3dex__tip { flex: 1 1 160px; min-width: 0; font: 500 12px/1.35 Inter, system-ui, sans-serif; color: var(--ab3dex-muted, #5E6A85); }
@media (min-width: 900px) {
  .ab3dex:not(.ab3dex--gallery) { --pane-w: 288px; }
  .ab3dex:not(.ab3dex--gallery) .ab3dex__settings { position: absolute; z-index: 5; top: 14px; right: 14px; bottom: 14px; width: var(--pane-w); margin: 0;
    display: flex; flex-direction: column; justify-content: flex-start; gap: 14px; padding: 16px; overflow: hidden; border-radius: 22px;
    background: rgba(245, 248, 255, .66); -webkit-backdrop-filter: blur(12px) saturate(2.2) brightness(1.06); backdrop-filter: blur(12px) saturate(2.2) brightness(1.06);
    border: 1px solid rgba(255, 255, 255, .72); box-shadow: 0 10px 30px rgba(10, 16, 34, .22); }
  .ab3dex:not(.ab3dex--gallery) .ab3dex__settings .ab3dex__set-t { margin-bottom: 7px; font-size: 12.5px; }
  .ab3dex:not(.ab3dex--gallery) .ab3dex__settings .ab3dex__chips { gap: 5px; }
  .ab3dex:not(.ab3dex--gallery) .ab3dex__settings .ab3dex__chip { width: 27px; height: 27px; --cut: 6px; }
  .ab3dex:not(.ab3dex--gallery) .ab3dex__settings .ab3dex__chip::before { --cut: 5.6px; }
  .ab3dex:not(.ab3dex--gallery) .ab3dex__settings .ab3dex__chip[aria-pressed="true"]::before { inset: 2.5px; --cut: 5px; }
  .ab3dex:not(.ab3dex--gallery) .ab3dex__set--name input { width: 100%; padding: 9px 14px; font-size: 14px; }
  .ab3dex:not(.ab3dex--gallery) .ab3dex__namewrap { display: block; }
  .ab3dex:not(.ab3dex--gallery) .ab3dex__settings .ab3dex__scenes--tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 6px; }
  .ab3dex:not(.ab3dex--gallery) .ab3dex__settings .ab3dex__scenes--tiles[hidden] { display: none; }
  .ab3dex:not(.ab3dex--gallery) .ab3dex__settings .ab3dex__scene { gap: 4px; font-size: 11px; }
  .ab3dex:not(.ab3dex--gallery) .ab3dex__settings .ab3dex__scene > span { white-space: normal; text-align: center; line-height: 1.15; }
  .ab3dex:not(.ab3dex--gallery) .ab3dex__settings .ab3dex__scene-sw { width: 100%; height: 38px; }
  .ab3dex:not(.ab3dex--gallery) .ab3dex__settings .ab3dex__scene::before { left: -2px; right: -2px; width: auto; height: 42px; margin-left: 0; }
  .ab3dex:not(.ab3dex--gallery) .ab3dex__settings .ab3dex__scene::after { left: 0; right: 0; width: auto; height: 38px; margin-left: 0; }
  .ab3dex:not(.ab3dex--gallery) .ab3dex__set--dims .ab3dex__dims { flex-wrap: wrap; row-gap: 6px; }
  .ab3dex:not(.ab3dex--gallery) .ab3dex__set--tip { margin-top: auto; padding-top: 12px; border-top: 1px solid rgba(42, 53, 80, .1); }
  /* canvas controls step clear of the pane; kit sizes upper left */
  .ab3dex:not(.ab3dex--gallery) .ab3dex__kitseg { left: 14px !important; right: auto !important; transform: none !important; }
  .ab3dex:not(.ab3dex--gallery) .ab3dex__zoom { right: calc(var(--pane-w) + 28px) !important; }
  .ab3dex:not(.ab3dex--gallery) .ab3dex__hud { right: calc(var(--pane-w) + 28px + 96px) !important; }
}
/* phones / compact: settings stay under the canvas, compact so the editor needs little vertical scroll */
@media (max-width: 899px) {
  .ab3dex:not(.ab3dex--gallery) .ab3dex__settings .ab3dex__chip { width: 30px; height: 30px; --cut: 7px; }
  .ab3dex:not(.ab3dex--gallery) .ab3dex__settings .ab3dex__chip::before { --cut: 6.6px; }
  .ab3dex:not(.ab3dex--gallery) .ab3dex__settings .ab3dex__chips { gap: 5px; }
}
.ab3dex__set--tip .ab3dex__key { display: inline-flex !important; align-items: center; gap: 8px; }
/* narrower desktops: the pane tightens so it still never scrolls (1100px: 554px tall) */
@media (min-width: 900px) and (max-width: 1299px) {
  .ab3dex:not(.ab3dex--gallery) { --pane-w: 268px; }
  .ab3dex:not(.ab3dex--gallery) .ab3dex__settings { gap: 10px; padding: 14px; }
  .ab3dex:not(.ab3dex--gallery) .ab3dex__settings .ab3dex__set-t { margin-bottom: 5px; }
  .ab3dex:not(.ab3dex--gallery) .ab3dex__settings .ab3dex__chip { width: 25px; height: 25px; }
  .ab3dex:not(.ab3dex--gallery) .ab3dex__settings .ab3dex__scene-sw { height: 30px; }
  .ab3dex:not(.ab3dex--gallery) .ab3dex__settings .ab3dex__scene::before { height: 34px; }
  .ab3dex:not(.ab3dex--gallery) .ab3dex__settings .ab3dex__scene::after { height: 30px; }
  .ab3dex:not(.ab3dex--gallery) .ab3dex__tip { display: none; }
  .ab3dex:not(.ab3dex--gallery) .ab3dex__set--tip { padding-top: 10px; }
}
/* 26 Sep (user, item 231): the usage bar lives UNDER "Uses 98% of Shapeshift kit", exactly that line's width, and the 98% is
   the same cobalt as the bar, so the number and its bar read as one thing; nothing trails the text at the end of the row */
.ab3dex__label .ab3dex__use { flex-direction: column !important; align-items: stretch !important; gap: 3px !important; width: max-content; max-width: 100%; justify-self: start; }
.ab3dex__label .ab3dex__use .ab3dex__bar { order: 2; flex: none !important; width: 100% !important; min-width: 0 !important; height: 3px; }
.ab3dex__label .ab3dex__use b { color: #1E47CE !important; }
/* 26 Sep (user, LIVE urgent): with the settings in the pane, the kit slider owns the whole top of the canvas LEFT of the pane:
   it spans from the left edge to just short of the pane (never under it), each kit an equal share; when a share is too narrow
   for the words, the counts drop to icon + number (container query on the slider's own width) */
@media (min-width: 900px) {
  .ab3dex:not(.ab3dex--gallery) .ab3dex__kitseg { left: 14px !important; right: calc(var(--pane-w) + 28px) !important; width: auto !important; max-width: none !important; transform: none !important; container-type: inline-size; }
  .ab3dex:not(.ab3dex--gallery) .ab3dex__kitseg .ab3dex__tab { padding: 10px 10px 9px; min-width: 0; }
  .ab3dex:not(.ab3dex--gallery) .ab3dex__kitseg .ab3dex__tab-name { overflow: hidden; text-overflow: ellipsis; }
  @container (max-width: 700px) {
    .ab3dex__kitseg .ab3dex__tab-stats { gap: 8px; }
    .ab3dex__kitseg .ab3dex__stat { font-size: 0; gap: 3px; }
    .ab3dex__kitseg .ab3dex__stat b { font-size: 11px; }
  }
}
@media (min-width: 900px) {
  .ab3dex:not(.ab3dex--gallery) .ab3dex__kitseg { min-width: 0 !important; }
  /* the pane tightens by its OWN height (short canvases on wide screens too), so it never scrolls */
  .ab3dex:not(.ab3dex--gallery) .ab3dex__settings { container: abpane / size; }
}
@container (max-width: 700px) {
  .ab3dex__kitseg .ab3dex__stat { font-size: 0 !important; gap: 3px !important; }
  .ab3dex__kitseg .ab3dex__stat b { font-size: 11px !important; }
}
@container abpane (max-height: 620px) {
  .ab3dex__settings { gap: 10px !important; }
  .ab3dex__settings .ab3dex__set-t { margin-bottom: 5px !important; }
  .ab3dex__settings .ab3dex__chip { width: 25px !important; height: 25px !important; }
  .ab3dex__settings .ab3dex__scene-sw { height: 30px !important; }
  .ab3dex__settings .ab3dex__scene::before { height: 34px !important; }
  .ab3dex__settings .ab3dex__scene::after { height: 30px !important; }
  .ab3dex__tip { display: none !important; }
}
/* 26 Sep (user): when the words don't fit their kit, "multi-shape panels" reads just "panels" (by the slider's own width) */
@container (max-width: 1060px) { .ab3dex__kitseg .ab3dex__ms { display: none !important; } }
@container (min-width: 1061px) { .ab3dex__kitseg .ab3dex__ms { display: inline !important; } }
/* 26 Sep (user): tablet + phone settings as a compact BENTO grid (one card per setting), close to the desktop pane's feel:
   tablet  "colour name" / "colour tip" / "scene dims"      phone  "colour colour" / "name dims" / "scene scene" / "tip tip" */
@media (max-width: 899px) {
  .ab3dex:not(.ab3dex--gallery) .ab3dex__settings { display: grid !important; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); grid-template-areas: "c n" "c t" "s d"; gap: 8px; margin-top: 12px; }
  .ab3dex:not(.ab3dex--gallery) .ab3dex__settings > .ab3dex__set { min-width: 0; margin: 0; padding: 11px 12px; border-radius: 16px; background: rgba(255, 255, 255, .72); border: 1px solid rgba(42, 53, 80, .08); }
  .ab3dex:not(.ab3dex--gallery) .ab3dex__set--colour { grid-area: c; }
  .ab3dex:not(.ab3dex--gallery) .ab3dex__set--name { grid-area: n; }
  .ab3dex:not(.ab3dex--gallery) .ab3dex__set--tip { grid-area: t; }
  .ab3dex:not(.ab3dex--gallery) .ab3dex__set--scene { grid-area: s; }
  .ab3dex:not(.ab3dex--gallery) .ab3dex__set--dims { grid-area: d; }
  .ab3dex:not(.ab3dex--gallery) .ab3dex__settings .ab3dex__set-t { margin-bottom: 7px; font-size: 12.5px; }
  .ab3dex:not(.ab3dex--gallery) .ab3dex__settings .ab3dex__chips { gap: 5px; }
  .ab3dex:not(.ab3dex--gallery) .ab3dex__settings .ab3dex__chip { width: 26px !important; height: 26px !important; }
  .ab3dex:not(.ab3dex--gallery) .ab3dex__set--name input { width: 100%; padding: 9px 13px; font-size: 14px; }
  .ab3dex:not(.ab3dex--gallery) .ab3dex__namewrap { display: block; }
  .ab3dex:not(.ab3dex--gallery) .ab3dex__settings .ab3dex__scenes--tiles { display: flex; flex-wrap: nowrap; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0; padding: 2px; }
  .ab3dex:not(.ab3dex--gallery) .ab3dex__settings .ab3dex__scenes--tiles[hidden] { display: none; }
  .ab3dex:not(.ab3dex--gallery) .ab3dex__settings .ab3dex__scene { flex: 0 0 60px; gap: 3px; font-size: 10.5px; }
  .ab3dex:not(.ab3dex--gallery) .ab3dex__settings .ab3dex__scene > span { white-space: normal; text-align: center; line-height: 1.15; }
  .ab3dex:not(.ab3dex--gallery) .ab3dex__settings .ab3dex__scene-sw { width: 56px; height: 36px; }
  .ab3dex:not(.ab3dex--gallery) .ab3dex__settings .ab3dex__scene::before { width: 60px; height: 40px; margin-left: -30px; }
  .ab3dex:not(.ab3dex--gallery) .ab3dex__settings .ab3dex__scene::after { width: 56px; height: 36px; margin-left: -28px; }
  .ab3dex:not(.ab3dex--gallery) .ab3dex__set--dims .ab3dex__dims { flex-wrap: wrap; row-gap: 6px; column-gap: 8px; }
  .ab3dex:not(.ab3dex--gallery) .ab3dex__dimtxt { font-size: 12px; }
  .ab3dex:not(.ab3dex--gallery) .ab3dex__set--tip { gap: 8px; }
  .ab3dex:not(.ab3dex--gallery) .ab3dex__set--tip .ab3dex__key { transform: scale(.9) !important; transform-origin: 0 50%; }
  .ab3dex:not(.ab3dex--gallery) .ab3dex__tip { font-size: 11.5px; flex-basis: 120px; }
}
@media (max-width: 749px) {
  .ab3dex:not(.ab3dex--gallery) .ab3dex__settings { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "c c" "n d" "s s" "t t"; }
  .ab3dex:not(.ab3dex--gallery) .ab3dex__settings > .ab3dex__set { padding: 10px; }
  .ab3dex:not(.ab3dex--gallery) .ab3dex__tip { flex-basis: 150px; }
}
@media (max-width: 749px) {
  .ab3dex:not(.ab3dex--gallery) .ab3dex__set--tip { flex-wrap: nowrap; }
  .ab3dex:not(.ab3dex--gallery) .ab3dex__set--tip .ab3dex__key { transform: scale(.82) !important; margin-right: -26px !important; }
  .ab3dex:not(.ab3dex--gallery) .ab3dex__tip { flex: 1 1 0; min-width: 0; font-size: 11px; }
}
/* 27 Sep (user, item 206): the expand button lives in the UPPER RIGHT of the main image, the same spot in Photos and in 3D; the
   3D's + / - take the upper left; on desktop the Shapeshift key moves to the bottom right (the build pill stops short of it).
   In the pinned mini the expand counter-scales from its top-right corner (the pin's keyframes follow the right edge). */
.ab-pm-scope .cv-gal-hero[data-ab3dex-host] .cv-gal-zoom { left: auto !important; right: 16px !important; transform-origin: 100% 0 !important; }
.ab3dex-gal .ab3dex__zoom { left: 16px !important; }
@supports (animation-timeline: --a) {
  html .cv-pin-sda.cv-pin-rdy .ab3dex-gal .ab3dex__zoom:not(.ab3dex__zoom--hud) { animation-name: ab3dexZoomPinL !important; }
  @keyframes ab3dexZoomPinL { from { transform: scale(1); } to { transform: scale(var(--cv-k, 1)); } }
}
@media (min-width: 769px) {
  .ab3dex-gal .ab3dex__key { top: auto !important; bottom: 14px !important; right: 14px !important; left: auto !important; }
  .ab3dex-gal .ab3dex__hud { right: 190px !important; }
}
/* 27 Sep (user, items 203 / 204): in the pinned rail the 3D tile stays PINNED at the top; the photo thumbnails scroll underneath
   it into a solid white block (nothing shows through under the tile or the cart) */
.cv-pin-full .cv-gal-thumbs > .ab3dex-thumb { position: sticky; top: 0; z-index: 3; box-shadow: 0 -12px 0 6px #fff, 0 0 0 6px #fff; }
.cv-pin-full .cv-gal-thumbs .cv-thumb { flex: 0 0 auto; }
/* narrow desktop/tablet heroes (769-1099): no room for the key beside the build pill; tapping the booth shapeshifts */
@media (min-width: 769px) and (max-width: 1099px) { .ab3dex-gal .ab3dex__key { display: none !important; } .ab3dex-gal .ab3dex__hud { right: 0 !important; } }
/* 27 Sep (user, item 207): popup dimensions control, beside the Scene dropdown */
.ab3dex__lbdims { display: none; }
.ab3dex-lb3d .ab3dex__lbdims { display: inline-flex; align-items: center; gap: 8px; margin-left: 8px; padding: 4px 6px 4px 8px; border-radius: 999px; background: rgba(245, 248, 255, .88); border: 1px solid rgba(42, 53, 80, .1); font: 700 13px/1 Inter, system-ui, sans-serif; letter-spacing: .02em; color: #2A3550; pointer-events: auto; }
.ab3dex-lb3d .ab3dex__lbdims .ab3dex__unit button { padding: 5px 10px; font-size: 12px; }
.ab3dex-lb3d .ab3dex__meas { display: block; }
.ab3dex-gal .ab3dex__meas { display: none !important; }
@media (max-width: 749px) { .ab3dex-lb3d .ab3dex__lbdims-t { display: none; } .ab3dex-lb3d .ab3dex__lbdims { margin-left: 6px; } }
/* 27 Sep (user, item 210): the photo / thumbnail / popup arrows are bigger and read as buttons (44px, 48px in the popup, a light
   rim + shadow), and an invisible ring widens each tap target on phones */
.ab-pm-scope .cv-gal-hero[data-ab3dex-host] .cv-gal-nav { width: 44px !important; height: 44px !important; border: 1px solid rgba(42, 53, 80, .12) !important; box-shadow: 0 2px 10px rgba(42, 53, 80, .14) !important; }
.ab-pm-scope .cv-gal-hero[data-ab3dex-host] .cv-gal-nav svg { width: 20px; height: 20px; }
.ab3dex-rownav__btn { width: 44px !important; height: 44px !important; border: 1px solid rgba(42, 53, 80, .14) !important; box-shadow: 0 2px 10px rgba(42, 53, 80, .12) !important; }
.ab3dex-rownav__btn svg { width: 20px !important; height: 20px !important; }
.ab3dex-lbrow__btn { width: 48px !important; height: 48px !important; }
.ab-pm-scope .cv-gal-hero[data-ab3dex-host] .cv-gal-nav::after, .ab3dex-rownav__btn::after, .ab3dex-lbrow__btn::after { content: ""; position: absolute; inset: -6px; border-radius: 999px; }
.ab3dex-lbrow__btn { position: relative; }   /* the row arrows stay absolutely placed at each end (a relative rule stacked them) */
@media (min-width: 1100px) { .ab3dex-rownav__btn { margin-top: -22px !important; } .ab3dex-has-rownav { padding: 0 54px !important; } }
/* 27 Sep (user): popup "Example size" is its own pill at the bottom right; the build pill stretches to it; both the same height;
   the Shapeshift key moves to the popup's free top-right corner */
.ab3dex-lb3d .ab3dex__hud { align-items: stretch !important; gap: 10px !important; }
.ab3dex-lb3d .ab3dex__buildnav { width: auto !important; flex: 1 1 auto; min-width: 0; }
.ab3dex-lb3d .ab3dex__lbdims { margin: 0 0 0 auto !important; flex: none; align-self: stretch; box-sizing: border-box; padding: 0 8px 0 10px !important; gap: 10px; }
.ab3dex-lb3d .ab3dex__key { top: 16px !important; bottom: auto !important; right: 16px !important; left: auto !important; }
/* 27 Sep (user): popup header = one row: name left, 3D / Photos centred, close right, all on the same axis */
.ab-pm-lb .cv-lb-header.ab3dex-lbhead { display: grid !important; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; column-gap: 12px; }
.ab-pm-lb .cv-lb-header.ab3dex-lbhead .cv-lb-close { justify-self: end; }
.ab-pm-lb .cv-lb-header.ab3dex-lbhead .ab3dex-viewtog--lb { margin: 0 !important; }
@media (max-width: 749px) { .ab-pm-lb .cv-lb-header.ab3dex-lbhead { grid-template-columns: minmax(0, 1fr) auto auto; } .ab-pm-lb .cv-lb-header.ab3dex-lbhead .cv-lb-title { font-size: 12px; } }
/* 27 Sep (user): once the gallery is PINNED on a phone, a finger on the 3D never scrolls the page: every drag belongs to the
   booth. Unpinned, the 3D keeps pan-y so a vertical swipe still scrolls past it. (.cv-pin-fix = the pin is engaged) */
.cv-pin-fix .ab3dex-gal, .cv-pin-fix .ab3dex-gal .ab3dex__stage { touch-action: none !important; overscroll-behavior: contain; }
/* 27 Sep (user, item 236): the build pill's kit usage = icons + counts (panels, accessories), never words that get pushed off */
.ab3dex__use-t { white-space: nowrap; }
.ab3dex__use-t:has(.ab3dex__use-i) { display: inline-flex; align-items: center; gap: 12px; }
.ab3dex__use-i { display: inline-flex; align-items: center; gap: 4px; font-variant-numeric: tabular-nums; }
.ab3dex__use-i .ab3dex__stat-ico { display: block !important; width: 14px !important; height: 14px !important; flex: none; color: #1E47CE; stroke: #1E47CE; }
/* 27 Sep (user, item 239): the 3D tile is exactly a thumbnail: same size at every width (the thumbs drop to 44px at <=768, the
   tile only did at <=749, so it overflowed the pinned rail by 8px and was clipped) and the same corner radius */
.cv-gal-thumbs > .ab3dex-thumb { border-radius: 6px; }
@media (max-width: 768px) { .cv-gal-thumbs > .ab3dex-thumb { width: 44px; height: 44px; } }
/* 27 Sep (user, item 240): the 3D's corners looked chopped: the photo frame behind it (white fill + 1px white rim, 12px radius)
   showed a white wedge outside the 3D's rounder 16px corner. While the 3D is showing, the frame is transparent. */
.ab-pm-scope .cv-gal-hero.ab3dex-hero-3d { background-color: transparent !important; border-color: transparent !important; }
/* 27 Sep (user, items 242-247): the popup moves toward the full section's layout */
/* 243: header = one liquid-glass kit slider up to the close button (the name and the 3D / Photos switch leave; photos stay in the strip) */
.ab-pm-lb .cv-lb-header.ab3dex-lbhead--kits { grid-template-columns: minmax(0, 1fr) auto !important; }
.ab-pm-lb .ab3dex-lbhead--kits .ab3dex-viewtog--lb { display: none !important; }
.ab-pm-lb .ab3dex-lbhead--kits > .ab3dex-lbhead__t { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; margin: 0; padding: 0; }
.ab3dex-lbkits { position: relative; display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); min-width: 0; padding: 4px; border-radius: 999px; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .2); -webkit-backdrop-filter: blur(12px) saturate(2.2) brightness(1.06); backdrop-filter: blur(12px) saturate(2.2) brightness(1.06); container: lbkits / inline-size; }
.ab3dex-lbkits[hidden] { display: none; }
.ab3dex-lbkits__thumb { position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 4px; width: calc((100% - 8px) / var(--n, 3)); border-radius: 999px; background: #fff; box-shadow: 0 2px 12px rgba(0, 0, 0, .25); transform: translateX(calc(var(--i, 0) * 100%)) scale(var(--sx, 1), var(--sy, 1)); transition: transform .38s cubic-bezier(.3, 1.35, .5, 1); }
.ab3dex-lbkits.is-moving .ab3dex-lbkits__thumb { --sx: 1.1; --sy: .88; }
.ab3dex-lbkits__k { position: relative; z-index: 1; appearance: none; border: 0; background: transparent; min-width: 0; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 7px 6px 6px; border-radius: 999px; cursor: pointer; color: #fff; transition: opacity .15s ease; }
.ab3dex-lbkits__k:hover { opacity: .85; }
.ab3dex-lbkits__k:focus-visible { outline: 2px solid #1E47CE; outline-offset: -2px; }
.ab3dex-lbkits__n { font: 700 14px/1.1 Inter, system-ui, sans-serif; letter-spacing: .02em; white-space: nowrap; transition: color .3s ease; }
.ab3dex-lbkits__full { display: none; }
.ab3dex-lbkits__s { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 9px; max-width: 100%; }
.ab3dex-lbkits__st { display: inline-flex; align-items: center; gap: 3px; font: 600 11px/1.1 Inter, system-ui, sans-serif; letter-spacing: .01em; white-space: nowrap; color: rgba(255, 255, 255, .72); font-variant-numeric: tabular-nums; transition: color .3s ease; }
.ab3dex-lbkits__st b { font-weight: 700; }
.ab3dex-lbkits__st .ab3dex__stat-ico { width: 12px; height: 12px; flex: none; }
.ab3dex-lbkits__w, .ab3dex-lbkits__w2 { display: none; }
.ab3dex-lbkits__k[aria-selected="true"] .ab3dex-lbkits__n { color: #1E47CE; }
.ab3dex-lbkits__k[aria-selected="true"] .ab3dex-lbkits__st { color: #2A3550; }
@container lbkits (min-width: 480px) { .ab3dex-lbkits__full { display: inline; } .ab3dex-lbkits__short { display: none; } }
@container lbkits (min-width: 640px) { .ab3dex-lbkits__w { display: inline; } }
@container lbkits (min-width: 840px) { .ab3dex-lbkits__w2 { display: inline; } }
@container lbkits (max-width: 270px) { .ab3dex-lbkits__n { font-size: 12px; } .ab3dex-lbkits__k { padding: 6px 3px 5px; } .ab3dex-lbkits__s { gap: 1px 6px; } }
@media (prefers-reduced-motion: reduce) { .ab3dex-lbkits__thumb { transition: none; } }
/* 244: the colour dropdown sits left of + / - (a glass pill the zoom buttons' height); the small thumbnail never shows it */
.ab3dex-gal .ab3dex__pick { display: none !important; }
.ab3dex-lb3d .ab3dex__zoom { align-items: center; }
.ab3dex-lb3d .ab3dex__zoom .ab3dex__pick { display: block; align-self: stretch; margin-right: 2px; border-radius: 999px; background: rgba(255, 255, 255, .88); border: 1px solid rgba(42, 53, 80, .1); }
.ab3dex-lb3d .ab3dex__zoom .ab3dex__pick[hidden] { display: none; }
.ab3dex__pick .ab3dex__dd-btn { appearance: none; height: 100%; display: inline-flex; align-items: center; gap: 6px; border: 0; background: transparent; color: #2A3550; font: 700 12.5px/1 Inter, system-ui, sans-serif; letter-spacing: .02em; padding: 0 12px 0 10px; border-radius: 999px; cursor: pointer; white-space: nowrap; }
.ab3dex__pick .ab3dex__dd-menu { left: -1px; top: calc(100% + 10px); }
.ab3dex__pick .ab3dex__dd-menu button { appearance: none; border: 0; background: transparent; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 9px 12px; border-radius: 12px; color: #2A3550; font: 600 13px/1.2 Inter, system-ui, sans-serif; letter-spacing: .02em; text-align: left; cursor: pointer; }
.ab3dex__pick .ab3dex__dd-menu button:hover { background: rgba(30, 71, 206, .08); }
.ab3dex__pick .ab3dex__dd-menu button[aria-selected="true"] { font-weight: 700; }
.ab3dex__dd-v { display: inline-flex; align-items: center; gap: 7px; }
.ab3dex__dd-sw { display: inline-block; flex: none; width: 20px; height: 15px; border-radius: 5px; box-shadow: inset 0 0 0 1px rgba(42, 53, 80, .22); }
.ab3dex__dd-cn { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ab3dex__dd-col { display: inline-flex; align-items: center; gap: 10px; }
.ab3dex__pick--col .ab3dex__dd-menu { min-width: 220px; max-height: min(340px, 52vh); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
@media (max-width: 749px) { .ab3dex-lb3d .ab3dex__dd-cn { display: none; } .ab3dex__pick .ab3dex__dd-btn { padding: 0 9px 0 10px; } }
/* 245: Scene pinned to the popup's top right; the Shapeshift key leaves the popup (Space still steps the builds) */
.ab3dex-lb3d .ab3dex__scenes { left: auto !important; right: 16px !important; top: 16px !important; max-width: calc(100% - 200px) !important; }
.ab3dex-lb3d .ab3dex__key { display: none !important; }
@media (max-width: 749px) { .ab3dex-lb3d .ab3dex__scenes-lbl { display: none; } .ab3dex-lb3d .ab3dex__scenes { max-width: calc(100% - 180px) !important; } }
/* 242: phones show the popup 3D edge to edge, so no rounded corners there (white showed through them); tablet + desktop keep them */
@media (max-width: 749px) { .ab3dex-lb3d { border-radius: 0 !important; } .ab-pm-lb.ab3dex-lb-3d .cv-lb-hero { background: transparent !important; } }
/* 247: dimensions are always on; cm / ft is the whole control, a touch larger, the build pill's height */
.ab3dex-lb3d .ab3dex__lbdims .ab3dex__unit button { padding: 8px 15px !important; font-size: 14px !important; }
.ab3dex__set--dims .ab3dex__unit button { padding: 7px 16px; font-size: 13px; }
@media (max-width: 379px) { .ab3dex-lb3d .ab3dex__scenes { top: 62px !important; max-width: calc(100% - 32px) !important; } }   /* small phones: a long scene name would reach the - button, so Scene takes the row below (right-aligned) */
/* 27 Sep (user, item 253): the floating add-to-cart bars step aside over the full 3D section (same treatment as the 3D booth stage) */
html.ab3dex-fab-away [id^="cv-sticky-bar-"], html.ab3dex-fab-away .abx-fab { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; transition: opacity .25s ease, visibility 0s linear .25s !important; }
/* 27 Sep (user, item 250): the product 3D (not only the popup) shows the example sizes, with cm / ft at the bottom right beside
   the build pill, the pill's height */
.ab3dex-gal .ab3dex__meas { display: block !important; }
.ab3dex-gal .ab3dex__hud { align-items: stretch !important; gap: 8px !important; }
.ab3dex-gal .ab3dex__buildnav { width: auto !important; flex: 1 1 auto; min-width: 0; }
.ab3dex-gal .ab3dex__lbdims { display: inline-flex; align-items: center; flex: none; align-self: stretch; box-sizing: border-box; margin: 0 0 0 auto; padding: 0 6px; border-radius: 999px; background: rgba(245, 248, 255, .88); border: 1px solid rgba(42, 53, 80, .1); pointer-events: auto; }
.ab3dex-gal .ab3dex__lbdims-t { display: none; }
.ab3dex-gal .ab3dex__lbdims .ab3dex__unit button { padding: 6px 11px; font-size: 12.5px; }
.ab3dex-gal .ab3dex__meas-x { font-size: 11px; }
/* 27 Sep (user, item 254): the full section's kit slider below desktop: icon + number only (the words spilled past the pill);
   desktop keeps the words (its own container rule drops them when the slider is narrow) */
@media (max-width: 899px) {
  .ab3dex__kitseg .ab3dex__tab-stats { flex-direction: row !important; flex-wrap: nowrap !important; justify-content: center; gap: 8px !important; }
  .ab3dex__kitseg .ab3dex__stat { font-size: 0 !important; gap: 3px !important; }
  .ab3dex__kitseg .ab3dex__stat b { font-size: 11px !important; }
  .ab3dex__kitseg .ab3dex__stat-ico { display: block !important; width: 11px !important; height: 11px !important; }
}
/* 27 Sep (item 250 follow-up): cm / ft now owns the product 3D's bottom-right corner, so the Shapeshift key leaves it (as it left
   the popup and the full section); tapping the booth and Space still step the builds. The hud runs to the corner. */
.ab3dex-gal .ab3dex__key { display: none !important; }
@media (min-width: 769px) { .ab3dex-gal .ab3dex__hud { right: 0 !important; } }
/* 27 Sep (user, item 259: "strange white gradient on the frosted glass"): at 60% white the pill's frost showed the scene behind it
   (the floor pad's edge, boosted by saturate 2.2) as a soft vertical band; a denser single tint keeps the glass, hides the seam */
.ab3dex__buildnav { background-color: rgba(255, 255, 255, .84) !important; }
/* 27 Sep (user, item 260): 3D thumbnail pill = three short lines, never a wrapped name: a very small "Example build" ("Example"
   below desktop) on its own line, the build name on a full line under it, then the kit share */
.ab3dex-gal .ab3dex__buildnav .ab3dex__label { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; grid-auto-rows: auto; row-gap: 1px !important; align-content: center; }
.ab3dex-gal .ab3dex__buildnav .ab3dex__label .ab3dex__tag { display: block !important; grid-column: 1 !important; grid-row: 1 !important; font-size: 10px !important; line-height: 1.1 !important; margin: 0 !important; }
.ab3dex-gal .ab3dex__buildnav .ab3dex__label .ab3dex__title { grid-column: 1 !important; grid-row: 2 !important; white-space: nowrap !important; overflow: hidden; text-overflow: ellipsis; line-height: 1.15 !important; }
.ab3dex-gal .ab3dex__buildnav .ab3dex__label .ab3dex__use { grid-column: 1 !important; grid-row: 3 !important; }
@media (max-width: 1099px) { .ab3dex-gal .ab3dex__label .ab3dex__tag-b { display: none !important; } }
/* 27 Sep (user, item 261): cm / ft is a solo toggle on the 3D thumbnail: no wrapper pill around it */
.ab3dex-gal .ab3dex__lbdims { background: none !important; border: 0 !important; padding: 0 !important; align-self: center !important; box-shadow: none !important; }
/* phones: the thumbnail is too narrow for the name, the kit share AND cm / ft on one line (names truncated), so the build pill
   takes the full width and cm / ft sits just above its right end, still in the bottom-right corner */
@media (max-width: 429px) {   /* 27 Sep (item 322): only real phone widths stack cm / ft above the pill; wider, it sits in the bottom-right corner */
  .ab3dex-gal .ab3dex__lbdims { position: absolute !important; right: 10px; bottom: calc(100% - 2px); margin: 0 !important; }
  .ab3dex-gal .ab3dex__buildnav { max-width: none !important; }
  .ab3dex-gal .ab3dex__hud { overflow: visible !important; }
  .ab3dex-gal .ab3dex__lbdims .ab3dex__unit button { padding: 5px 10px; font-size: 12px; }
}
/* 27 Sep (user, item 278): below desktop the "3D view / Photos" switch goes; the thumbnail rail's 3D tile and the photos do the
   same job. (The popup keeps its own header.) Item 277: the compact grid floor matches ab-pm-styles (280px). */
@media (max-width: 1099px) {
  .ab3dex-viewtog:not(.ab3dex-viewtog--lb) { display: none !important; }
}
@media (min-width: 769px) and (max-width: 1099px) {
  .ab-pm-scope .cv-grid:has([data-ab3dex-embed]) { grid-template-columns: minmax(0, 3fr) minmax(280px, 1fr) !important; }
}
/* 27 Sep (user, item 280): cm / ft is only the toggle: no "Example size" descriptor, no wrapper, and the toggle itself is the
   floating header's liquid glass (one tint + blur 12 + saturate + 1px rim) with a white thumb that glides between cm and ft.
   Same on the 3D thumbnail. The full section's settings card keeps its own control. */
.ab3dex-lb3d .ab3dex__lbdims { background: none !important; border: 0 !important; padding: 0 !important; box-shadow: none !important; align-self: center !important; gap: 0 !important; }
.ab3dex-lb3d .ab3dex__lbdims-t { display: none !important; }
.ab3dex-lb3d .ab3dex__unit, .ab3dex-gal .ab3dex__unit { position: relative; display: inline-grid !important; grid-template-columns: 1fr 1fr; gap: 0 !important; padding: 4px !important; border-radius: 999px !important;
  background: rgba(255, 255, 255, .58) !important; border: 1px solid rgba(255, 255, 255, .72) !important; box-shadow: 0 6px 18px rgba(10, 16, 34, .22) !important;
  -webkit-backdrop-filter: blur(12px) saturate(2.2) brightness(1.06); backdrop-filter: blur(12px) saturate(2.2) brightness(1.06); }
.ab3dex-lb3d .ab3dex__unit::before, .ab3dex-gal .ab3dex__unit::before { content: ""; position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 999px; background: #fff; box-shadow: 0 2px 10px rgba(42, 53, 80, .22); transition: transform .38s cubic-bezier(.3, 1.35, .5, 1); }
.ab3dex-lb3d .ab3dex__unit:has([data-unit="ft"][aria-pressed="true"])::before, .ab3dex-gal .ab3dex__unit:has([data-unit="ft"][aria-pressed="true"])::before { transform: translateX(100%); }
.ab3dex-lb3d .ab3dex__unit button, .ab3dex-gal .ab3dex__unit button { position: relative; z-index: 1; background: transparent !important; box-shadow: none !important; color: #2A3550 !important; text-align: center; }
.ab3dex-lb3d .ab3dex__unit button[aria-pressed="true"], .ab3dex-gal .ab3dex__unit button[aria-pressed="true"] { color: #1E47CE !important; }
@media (prefers-reduced-motion: reduce) { .ab3dex-lb3d .ab3dex__unit::before, .ab3dex-gal .ab3dex__unit::before { transition: none; } }
/* 27 Sep (user, items 286/289/290/294): full 3D section settings. Chips a kit doesn't sell stay hidden; the five scene tiles sit on
   ONE row (smaller art, 2-line labels); the W x D x H readout goes (the diagram shows the sizes). The build pill uses the cm / ft
   toggle's glass so every frosted control matches. */
.ab3dex__chip[hidden] { display: none !important; }
.ab3dex:not(.ab3dex--gallery) .ab3dex__settings .ab3dex__scenes--tiles { display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr)) !important; gap: 6px !important; overflow: visible !important; }
.ab3dex:not(.ab3dex--gallery) .ab3dex__settings .ab3dex__scenes--tiles[hidden] { display: none !important; }
.ab3dex:not(.ab3dex--gallery) .ab3dex__settings .ab3dex__scenes--tiles .ab3dex__scene { width: auto !important; min-width: 0; }
.ab3dex:not(.ab3dex--gallery) .ab3dex__settings .ab3dex__scene-sw { width: 100% !important; height: auto !important; aspect-ratio: 64 / 44; }
.ab3dex:not(.ab3dex--gallery) .ab3dex__settings .ab3dex__scenes--tiles .ab3dex__scene > span { font-size: 10px !important; line-height: 1.15 !important; white-space: normal !important; text-align: center; max-width: 100% !important; }
.ab3dex__set--dims [data-dims-txt] { display: none !important; }
.ab3dex__buildnav { background-color: rgba(255, 255, 255, .58) !important; border: 1px solid rgba(255, 255, 255, .72) !important; box-shadow: 0 6px 18px rgba(10, 16, 34, .22) !important;
  -webkit-backdrop-filter: blur(12px) saturate(2.2) brightness(1.06) !important; backdrop-filter: blur(12px) saturate(2.2) brightness(1.06) !important; }
/* 27 Sep (user, item 295): booth colour chips are cut like our panels (~10% of the chip, they read as octagons before), and the
   selected ring is the same thickness on every edge: the inner cut is the outer cut minus 0.586 x the ring (the offset of a 45°
   edge), the same fix as the scene cards. --S = the chip's size at each width. */
.ab3dex__settings .ab3dex__chip { --S: 38px; }
@media (max-width: 749px) { .ab3dex__settings .ab3dex__chip { --S: 34px; } }
@media (min-width: 900px) { .ab3dex:not(.ab3dex--gallery) .ab3dex__settings .ab3dex__chip { --S: 27px; } }
.ab3dex__settings .ab3dex__chip::after { --cut: calc(var(--S) * .15) !important; }
.ab3dex__settings .ab3dex__chip::before { inset: 1px !important; --cut: calc(var(--S) * .15 - .586px) !important; }
.ab3dex__settings .ab3dex__chip[aria-pressed="true"]::before { inset: 3px !important; --cut: calc(var(--S) * .15 - 1.758px) !important; }

/* 27 Sep (user, items 296-298, 301, 302, 319, 320): full 3D section, closer to the 3D thumbnail.
   - settings (below the pane width) = ONE card with dividing lines, like the glass pane
   - cm / ft is a solo glass toggle at the 3D's bottom right, beside the build pill (like the thumbnail)
   - the kit slider sits at the upper left at its own width; + / - move to the upper right
   - build pill everywhere: three short lines and smaller arrows, so it covers less of the 3D
   - small round buttons drop their backdrop blur (over the live 3D it left a repaint band on hover); the big glass pieces get
     their own compositing layer */
.ab3dex__set[hidden] { display: none !important; }
@media (max-width: 899px) {
  .ab3dex:not(.ab3dex--gallery) .ab3dex__settings { display: flex !important; flex-direction: column !important; gap: 0 !important; padding: 4px 18px !important; border-radius: 22px; background: rgba(245, 248, 255, .9); border: 1px solid rgba(42, 53, 80, .08); }
  .ab3dex:not(.ab3dex--gallery) .ab3dex__settings > .ab3dex__set { background: none !important; border: 0 !important; border-radius: 0 !important; padding: 14px 0 !important; }
  .ab3dex:not(.ab3dex--gallery) .ab3dex__settings > .ab3dex__set:not([hidden]) ~ .ab3dex__set:not([hidden]) { border-top: 1px solid rgba(42, 53, 80, .12) !important; }
}
@media (min-width: 750px) {
  .ab3dex:not(.ab3dex--gallery) .ab3dex__kitseg { left: 14px !important; right: auto !important; transform: none !important; width: min(560px, calc(100% - 140px)) !important; min-width: 0 !important; max-width: none !important; }
  .ab3dex:not(.ab3dex--gallery) .ab3dex__zoom { top: 16px !important; bottom: auto !important; right: 14px !important; }
}
@media (min-width: 900px) { .ab3dex:not(.ab3dex--gallery) .ab3dex__kitseg { width: min(640px, calc(100% - var(--pane-w, 288px) - 150px)) !important; } .ab3dex:not(.ab3dex--gallery) .ab3dex__zoom { right: calc(var(--pane-w, 288px) + 28px) !important; } }
@media (max-width: 749px) { .ab3dex:not(.ab3dex--gallery) .ab3dex__zoom { top: 74px !important; bottom: auto !important; right: 10px !important; } }
.ab3dex:not(.ab3dex--gallery) .ab3dex__hud { align-items: stretch !important; gap: 8px !important; }
.ab3dex:not(.ab3dex--gallery) .ab3dex__buildnav { width: auto !important; flex: 0 1 auto; min-width: 0; }
.ab3dex__dims--hud { display: inline-flex !important; align-items: center; align-self: center !important; margin-left: auto !important; pointer-events: auto; gap: 0 !important; background: none !important; border: 0 !important; padding: 0 !important; }
.ab3dex__dims--hud .ab3dex__switch, .ab3dex__dims--hud [data-dims-txt] { display: none !important; }
.ab3dex__dims--hud .ab3dex__unit { position: relative; display: inline-grid !important; grid-template-columns: 1fr 1fr; gap: 0 !important; padding: 4px !important; border-radius: 999px !important; background: rgba(255, 255, 255, .58) !important; border: 1px solid rgba(255, 255, 255, .72) !important; box-shadow: 0 6px 18px rgba(10, 16, 34, .22) !important;
  -webkit-backdrop-filter: blur(12px) saturate(2.2) brightness(1.06); backdrop-filter: blur(12px) saturate(2.2) brightness(1.06); transform: translateZ(0); }
.ab3dex__dims--hud .ab3dex__unit::before { content: ""; position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 999px; background: #fff; box-shadow: 0 2px 10px rgba(42, 53, 80, .22); transition: transform .38s cubic-bezier(.3, 1.35, .5, 1); }
.ab3dex__dims--hud .ab3dex__unit:has([data-unit="ft"][aria-pressed="true"])::before { transform: translateX(100%); }
.ab3dex__dims--hud .ab3dex__unit button { position: relative; z-index: 1; background: transparent !important; box-shadow: none !important; color: #2A3550 !important; padding: 6px 12px !important; font-size: 12.5px !important; }
.ab3dex__dims--hud .ab3dex__unit button[aria-pressed="true"] { color: #1E47CE !important; }
.ab3dex__buildnav .ab3dex__label { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; row-gap: 1px !important; align-content: center; }
.ab3dex__buildnav .ab3dex__label .ab3dex__tag { display: block !important; grid-column: 1 !important; grid-row: 1 !important; font-size: 10px !important; line-height: 1.1 !important; margin: 0 !important; }
.ab3dex__buildnav .ab3dex__label .ab3dex__title { grid-column: 1 !important; grid-row: 2 !important; white-space: nowrap !important; overflow: hidden; text-overflow: ellipsis; line-height: 1.15 !important; }
.ab3dex__buildnav .ab3dex__label .ab3dex__use { grid-column: 1 !important; grid-row: 3 !important; }
.ab3dex__buildnav .ab3dex__btn { width: 32px !important; height: 32px !important; }
.ab3dex__buildnav .ab3dex__btn svg { width: 16px !important; height: 16px !important; }
.ab3dex__buildnav { padding: 5px 14px 5px 5px !important; gap: 5px !important; transform: translateZ(0); }
.ab3dex__zbtn, .ab3dex__btn, .ab-pm-scope .cv-gal-hero[data-ab3dex-host] .cv-gal-zoom { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
.ab3dex__zbtn { background: rgba(245, 248, 255, .9) !important; }
.ab3dex-gal .ab3dex__unit, .ab3dex-lb3d .ab3dex__unit { transform: translateZ(0); }
/* item 319: "Shop this kit", the settings' first control: the brand's navy pill */
.ab3dex__shop { appearance: none; display: flex; align-items: center; justify-content: center; width: 100%; min-height: 46px; margin: 12px 0 4px; padding: 12px 22px; border: 0; border-radius: 999px; background: #2A3550; color: #fff; font: 700 15px/1 Inter, system-ui, sans-serif; letter-spacing: .02em; cursor: pointer; transition: transform .15s ease, opacity .15s ease; }
.ab3dex__shop:hover { transform: translateY(-1px); opacity: .92; }
.ab3dex__shop:focus-visible { outline: 2px solid #1E47CE; outline-offset: 2px; }
/* 27 Sep (user, item 323): marks at the 3D thumbnail's corners were the product photo underneath: same 12px rounding, so its light
   edge bled through the 3D's anti-aliased corner. While the 3D shows, the photo is hidden (it returns the moment Photos is chosen). */
.ab-pm-scope .cv-gal-hero.ab3dex-hero-3d > img, .ab-pm-scope .cv-gal-hero.ab3dex-hero-3d > picture { opacity: 0 !important; }
/* 27 Sep (user, item 326): a finger on the full section's 3D turns and tilts the booth in every direction; it never scrolls the page */
.ab3dex:not(.ab3dex--gallery) .ab3dex__stage { touch-action: pan-y !important; }   /* 28 Sep (user): the page scrolls through the section; turning = sideways drag, tilting = press and hold */

/* 27 Sep (user, item 325): merch on / off, one small glass icon button to the left of cm / ft (least space; no label) */
.ab3dex__merch { position: relative; flex: none; align-self: center; width: 32px; height: 32px; margin: 0 6px 0 0; padding: 0; display: inline-grid; place-items: center; border-radius: 999px; cursor: pointer; pointer-events: auto;
  background: rgba(255, 255, 255, .58); border: 1px solid rgba(255, 255, 255, .72); box-shadow: 0 6px 18px rgba(10, 16, 34, .22); -webkit-backdrop-filter: blur(12px) saturate(2.2) brightness(1.06); backdrop-filter: blur(12px) saturate(2.2) brightness(1.06); transition: background .2s ease, opacity .2s ease, transform .2s ease; }
.ab3dex__merch svg { width: 58%; height: 58%; fill: none !important; stroke: #5E6A85; stroke-width: 1.7; stroke-linejoin: round; transition: stroke .2s ease; }
.ab3dex__merch[aria-pressed="true"] { background: #fff; }
.ab3dex__merch[aria-pressed="true"] svg { stroke: #1E47CE; }
.ab3dex__merch[aria-pressed="false"]::after { content: ""; position: absolute; left: 26%; right: 26%; top: 50%; height: 1.7px; background: #5E6A85; border-radius: 2px; transform: rotate(-45deg); }
.ab3dex__merch:hover { transform: translateY(-1px); }
.ab3dex__merch:focus-visible { outline: 2px solid #1E47CE; outline-offset: 2px; }
@media (max-width: 749px) { .ab3dex__merch { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(255, 255, 255, .82); } }
.ab3dex__dims--hud:has(.ab3dex__merch) { flex-wrap: nowrap !important; }
.ab3dex__dims--hud .ab3dex__merch { width: 35px; height: 35px; }
.ab3dex-lb3d .ab3dex__merch { width: 40px; height: 40px; }
/* 28 Sep (user): swatches read as the panel: a 15% corner cut (the kit panel's own chamfer is ~13%), in the 3D section chips
   (above) and the popup / thumbnail colour menu (here) */
.ab3dex__dd-sw { width: 18px; height: 18px; border-radius: 0; box-sizing: border-box; border: 1px solid rgba(42, 53, 80, .25); background-clip: border-box; box-shadow: none; --cut: 2.8px;
  clip-path: polygon(var(--cut) 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, var(--cut) 100%, 0 calc(100% - var(--cut)), 0 var(--cut)); }
/* 28 Sep (user): Merch is a stacked setting ABOVE cm / ft, the same width, with a tick (the T-shirt icon wasn't obvious) */
.ab3dex__lbdims:has(.ab3dex__merch), .ab3dex__dims--hud:has(.ab3dex__merch) { flex-direction: column !important; align-items: stretch !important; justify-content: flex-end; gap: 6px !important; }
.ab3dex__merch, .ab3dex__dims--hud .ab3dex__merch, .ab3dex-lb3d .ab3dex__merch { width: auto !important; height: 30px !important; margin: 0 !important; padding: 0 12px 0 8px !important; display: inline-flex !important; align-items: center; justify-content: center; gap: 7px;
  font: 700 12.5px/1 Inter, system-ui, sans-serif; letter-spacing: .02em; color: #2A3550; background: rgba(255, 255, 255, .58) !important; }
.ab3dex-lb3d .ab3dex__merch { height: 34px !important; font-size: 13.5px; }
.ab3dex__merch::after { content: none !important; }
.ab3dex__merch-box { flex: none; width: 16px; height: 16px; border-radius: 5px; display: grid; place-items: center; background: #fff; box-shadow: inset 0 0 0 1.5px rgba(42, 53, 80, .35); transition: background .18s ease, box-shadow .18s ease; }
.ab3dex__merch-box svg { width: 12px; height: 12px; fill: none !important; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transition: opacity .15s ease; }
.ab3dex__merch[aria-pressed="true"] .ab3dex__merch-box { background: #1E47CE; box-shadow: none; }
.ab3dex__merch[aria-pressed="true"] .ab3dex__merch-box svg { opacity: 1; }
.ab3dex__merch[aria-pressed="true"] { background: rgba(255, 255, 255, .58) !important; }
@media (max-width: 749px) { .ab3dex__merch { background: rgba(255, 255, 255, .82) !important; } }
.ab3dex__lbdims .ab3dex__merch, .ab3dex__dims--hud .ab3dex__merch { align-self: stretch !important; box-sizing: border-box; }
/* 28 Sep (user): "Shop this kit" is a cobalt button UNDER the settings: pinned to the foot of the desktop pane, last in the
   compact / phone card */
.ab3dex__shop { background: #1E47CE !important; color: #fff !important; margin: 14px 0 16px !important; }
@media (min-width: 900px) { .ab3dex:not(.ab3dex--gallery) .ab3dex__settings > .ab3dex__shop { margin: auto 0 0 !important; flex: none; } }
/* 28 Sep (user): the booth name never zooms the page on a phone (iOS zooms any field under 16px) */
@media (max-width: 899px) { .ab3dex:not(.ab3dex--gallery) .ab3dex__set--name input, .ab3dex__set--name input { font-size: 16px !important; touch-action: manipulation; } }
/* 28 Sep (user): tablet (750-1099) packs the card: Booth colour in two rows of 8 with Scene beside it on the same row, the name
   below, Shop this kit last */
@media (min-width: 750px) and (max-width: 899px) {
  .ab3dex:not(.ab3dex--gallery) .ab3dex__settings { display: grid !important; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "c s" "n n" "b b"; column-gap: 26px !important; }
  .ab3dex:not(.ab3dex--gallery) .ab3dex__settings > .ab3dex__set--colour { grid-area: c; }
  .ab3dex:not(.ab3dex--gallery) .ab3dex__settings > .ab3dex__set--scene { grid-area: s; border-top: 0 !important; }
  .ab3dex:not(.ab3dex--gallery) .ab3dex__settings > .ab3dex__set--name { grid-area: n; border-top: 1px solid rgba(42, 53, 80, .12) !important; }
  .ab3dex:not(.ab3dex--gallery) .ab3dex__settings > .ab3dex__shop { grid-area: b; }
  .ab3dex:not(.ab3dex--gallery) .ab3dex__settings .ab3dex__chips { display: grid !important; grid-template-columns: repeat(8, var(--S, 34px)); gap: 6px !important; }
  .ab3dex:not(.ab3dex--gallery) .ab3dex__settings .ab3dex__chip { --S: 32px; width: 32px !important; height: 32px !important; }
  .ab3dex:not(.ab3dex--gallery) .ab3dex__settings .ab3dex__scenes--tiles { display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px !important; overflow: visible !important; }
  .ab3dex:not(.ab3dex--gallery) .ab3dex__settings .ab3dex__scene { flex: none !important; width: auto !important; min-width: 0; }
  .ab3dex:not(.ab3dex--gallery) .ab3dex__settings .ab3dex__scene-sw { width: 100% !important; height: auto !important; aspect-ratio: 64 / 44; }
}
/* 28 Sep (user): Merch reads as a clean radio: the label first, a circle on the RIGHT (empty ring off, cobalt with a white dot
   on); Merch and cm / ft slimmer so the left side has more room */
.ab3dex__merch, .ab3dex__dims--hud .ab3dex__merch, .ab3dex-lb3d .ab3dex__merch { flex-direction: row-reverse; justify-content: space-between !important; gap: 8px; padding: 0 7px 0 12px !important; font-size: 12px; }
.ab3dex-lb3d .ab3dex__merch { font-size: 13px; }
.ab3dex__merch-box { width: 17px; height: 17px; border-radius: 999px !important; background: rgba(255, 255, 255, .9) !important; box-shadow: inset 0 0 0 1.7px #5E6A85 !important; }
.ab3dex__merch-box svg { display: none !important; }
.ab3dex__merch-box::after { content: ""; width: 7px; height: 7px; border-radius: 999px; background: #fff; transform: scale(0); transition: transform .18s ease; }
.ab3dex__merch[aria-pressed="true"] .ab3dex__merch-box { background: #1E47CE !important; box-shadow: 0 0 0 2px rgba(30, 71, 206, .18) !important; }
.ab3dex__merch[aria-pressed="true"] .ab3dex__merch-box::after { transform: scale(1); }
.ab3dex__dims--hud .ab3dex__unit button, .ab3dex-gal .ab3dex__unit button, .ab3dex-lb3d .ab3dex__lbdims .ab3dex__unit button { padding-left: 10px !important; padding-right: 10px !important; }
/* desktop section: the controls sit right beside the settings pane (the old gap was held for the Space key, gone from here) */
@media (min-width: 900px) { .ab3dex:not(.ab3dex--gallery) .ab3dex__hud { right: calc(var(--pane-w) + 24px) !important; } }
/* compact + phones: smaller +/- that keep a 44px tap target */
@media (max-width: 1099px) {
  .ab3dex__zbtn { width: 32px !important; height: 32px !important; position: relative; }
  .ab3dex__zbtn::after { content: ""; position: absolute; inset: -6px; }
  .ab3dex__zbtn svg { width: 14px !important; height: 14px !important; }
}
/* 28 Sep (user): phones get a taller 3D (3:4) that stays pinned under the header while the settings scroll beneath it, so a
   colour / scene / name change is seen as it happens */
@media (max-width: 749px) {
  .ab3dex:not(.ab3dex--gallery) .ab3dex__stage { aspect-ratio: 3 / 4 !important; max-height: calc(100svh - 150px); position: sticky !important; top: 64px; z-index: 6; }
  .ab3dex:not(.ab3dex--gallery) .ab3dex__settings { position: relative; z-index: 1; }
}
/* 28 Sep (user): on = a solid cobalt circle with a small white tick (a white centre read as "off"); off = an empty ring */
.ab3dex__merch-box::after { content: none !important; }
.ab3dex__merch-box svg { display: block !important; width: 11px !important; height: 11px !important; opacity: 0; stroke: #fff !important; stroke-width: 3.2 !important; }
.ab3dex__merch[aria-pressed="true"] .ab3dex__merch-box svg { opacity: 1; }
.ab3dex__merch[aria-pressed="true"] .ab3dex__merch-box { box-shadow: none !important; }
/* 28 Sep (user): "Shop this kit" says what it picks (kit + colour) and sits under the settings: the desktop pane's foot, the
   bottom right of the tablet card (beside the name, a faint divider between), last on phones */
.ab3dex__shopwrap { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ab3dex__shopsum { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; font: 600 13px/1.25 Inter, system-ui, sans-serif; letter-spacing: .02em; color: #5E6A85; }
.ab3dex__shopsum b { color: #2A3550; font-weight: 700; }
.ab3dex__shopsum span::before { content: ""; display: inline-block; width: 4px; height: 4px; margin: 0 8px 2px 0; border-radius: 999px; background: currentColor; opacity: .5; vertical-align: middle; }
.ab3dex__shopwrap .ab3dex__shop { margin: 0 !important; }
@media (min-width: 900px) { .ab3dex:not(.ab3dex--gallery) .ab3dex__settings > .ab3dex__shopwrap { margin-top: auto; flex: none; } }
@media (max-width: 899px) { .ab3dex:not(.ab3dex--gallery) .ab3dex__settings > .ab3dex__shopwrap { padding: 14px 0 16px; } }
@media (min-width: 750px) and (max-width: 899px) {
  .ab3dex:not(.ab3dex--gallery) .ab3dex__settings { grid-template-areas: "c s" "n b" !important; }
  .ab3dex:not(.ab3dex--gallery) .ab3dex__settings > .ab3dex__shopwrap { grid-area: b; align-self: stretch; justify-content: center; padding: 14px 0 14px 24px !important; border-top: 1px solid rgba(42, 53, 80, .12); border-left: 1px solid rgba(42, 53, 80, .1); }
  .ab3dex:not(.ab3dex--gallery) .ab3dex__settings > .ab3dex__shopwrap .ab3dex__shop { min-height: 40px; padding: 10px 20px; font-size: 14px; }
  .ab3dex:not(.ab3dex--gallery) .ab3dex__settings > .ab3dex__set.ab3dex__set--scene.ab3dex__set--scene:not([hidden]) { border-top: 0 !important; border-left: 1px solid rgba(42, 53, 80, .1) !important; padding-left: 24px !important; }
  .ab3dex:not(.ab3dex--gallery) .ab3dex__settings { column-gap: 0 !important; }
  .ab3dex:not(.ab3dex--gallery) .ab3dex__settings > .ab3dex__set--colour { padding-right: 24px !important; }
  .ab3dex:not(.ab3dex--gallery) .ab3dex__settings > .ab3dex__set--name { padding-right: 24px !important; }
  /* the tablet 3D pins too (4:3 so the settings stay in view below it) */
  .ab3dex:not(.ab3dex--gallery) .ab3dex__stage { aspect-ratio: 4 / 3 !important; max-height: calc(100svh - 240px); position: sticky !important; top: 10px; z-index: 6; }
  .ab3dex:not(.ab3dex--gallery) .ab3dex__settings { position: relative; z-index: 1; }
}
/* the floating header steps away over the full 3D section on every width (the cart stays); the pinned 3D then sits near the top */
/* 28 Sep (user): entering the 3D section the floating header slides up and fades out gradually (and drops back the same way),
   never a sudden vanish: the header family's children move (never the fixed root: iOS), the sub-nav slides on desktop and only fades on phones */
.ab-hpn > :not(.ab-hpn__cart) { transition: opacity .3s ease .06s, transform .42s cubic-bezier(.2,.8,.2,1), visibility 0s linear 0s, background-color .26s ease, color .26s ease, border-color .26s ease; }
html.ab3dex-sec-away .ab-hpn > :not(.ab-hpn__cart) { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; transform: translate3d(0, -150%, 0) !important; transition: opacity .3s ease-in .1s, transform .45s cubic-bezier(.3,0,.5,1), visibility 0s linear .5s !important; }
html.ab3dex-sec-away #ab-subnav, html.ab3dex-sec-away .ab-subnav { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; transition: opacity .35s ease, visibility 0s linear .35s !important; }
@media (min-width: 769px) { #ab-subnav .ab-subnav__in, .ab-subnav > * { transition: transform .42s cubic-bezier(.2,.8,.2,1); } html.ab3dex-away #ab-subnav, html.ab3dex-away .ab-subnav { transition: opacity .35s ease, visibility 0s linear .35s !important; } html.ab3dex-sec-away .ab-subnav > *, html.ab3dex-away .ab-subnav > * { transform: translate3d(0, -140%, 0); } }
@media (max-width: 749px) { .ab3dex:not(.ab3dex--gallery) .ab3dex__stage { top: 10px !important; } }
/* 28 Sep (user): on the phone's wide mini (the 3D widened beside the rail) Merch + cm / ft sit in the empty bottom-right corner,
   beside the build pill and level with its foot, instead of stacked above it */
@media (max-width: 429px) {
  .cv-gal-col.cv-pin-wide .ab3dex-gal .ab3dex__lbdims { bottom: 5px !important; }
}
/* 28 Sep (user): phones: Merch + cm / ft sit on the build pill's line in the bottom-right corner (unpinned and pinned), the
   pill moves left into the freed room; the name may wrap to two lines instead of truncating, the "Example" tag makes room */
@media (max-width: 429px) {
  .ab3dex-gal .ab3dex__hud { padding-left: 4px !important; padding-right: 4px !important; }
  .ab3dex-gal .ab3dex__lbdims { bottom: 5px !important; right: 6px !important; }
  .ab3dex-gal .ab3dex__lbdims .ab3dex__merch { padding: 0 6px 0 10px !important; font-size: 11.5px; gap: 6px; }
  .ab3dex-gal .ab3dex__lbdims .ab3dex__unit button { padding: 5px 8px !important; }
  .cv-gal-hero .ab3dex-gal .ab3dex__hud .ab3dex__buildnav { width: calc(100% - 90px) !important; max-width: calc(100% - 90px) !important; flex: 0 0 auto !important; gap: 4px !important; padding-left: 5px !important; }
  .cv-gal-hero .ab3dex-gal .ab3dex__buildnav .ab3dex__btn { width: 30px !important; height: 30px !important; }
  .cv-gal-hero .ab3dex-gal .ab3dex__buildnav .ab3dex__label .ab3dex__tag { display: none !important; }
  .cv-gal-hero .ab3dex-gal .ab3dex__buildnav .ab3dex__label .ab3dex__title { grid-row: 1 / span 1 !important; white-space: normal !important; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 12px !important; line-height: 1.15 !important; text-overflow: clip; }
  .ab3dex-gal .ab3dex__label { min-width: 0; flex: 1 1 auto; }
}
/* 28 Sep (user): a held press shows it has grabbed the booth */
.ab3dex__stage.is-hold { cursor: grabbing; }
.ab3dex__stage.is-hold::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit; box-shadow: inset 0 0 0 2px rgba(30, 71, 206, .55); }
/* 28 Sep (user): phones: the 3D section 15% shorter (more of the settings shows beneath), and the kit slider clear of the floating cart */
@media (max-width: 749px) {
  .ab3dex:not(.ab3dex--gallery) .ab3dex__stage { aspect-ratio: 3 / 3.4 !important; max-height: calc((100svh - 150px) * .85) !important; }
  .ab3dex:not(.ab3dex--gallery) .ab3dex__kitseg { left: 10px !important; right: auto !important; transform: none !important; width: calc(100% - 78px) !important; min-width: 0 !important; max-width: none !important; }
}
/* 28 Sep (user): the 3D thumbnail's build pill uses the room: it starts closer to the left edge, its arrows are ~10% larger
   (easier to tap), the words sit a little further right. On phones (the tight case) the arrows stack, so the words get the
   width; the pill is then no taller than the Merch + cm / ft stack beside it. Wider views keep the arrows side by side. */
@media (max-width: 1099px) {
  .cv-gal-hero .ab3dex-gal .ab3dex__hud { padding-left: 4px !important; }
  .cv-gal-hero .ab3dex-gal .ab3dex__buildnav .ab3dex__btn { width: 29px !important; height: 29px !important; }
  .cv-gal-hero .ab3dex-gal .ab3dex__buildnav .ab3dex__label { padding-left: 6px !important; }
}
@media (max-width: 429px) {   /* 28 Sep (user): arrows side by side (the stacked pair looked wrong), 10% larger, never clipped */
  .cv-gal-hero .ab3dex-gal .ab3dex__buildnav .ab3dex__btn { width: 33px !important; height: 33px !important; flex: none !important; }
  .cv-gal-hero .ab3dex-gal .ab3dex__hud .ab3dex__buildnav { padding-left: 5px !important; gap: 4px !important; overflow: visible !important; }
  .cv-gal-hero .ab3dex-gal .ab3dex__lbdims { right: 2px !important; }
}
/* 28 Sep (user): phones: the section's zoom is one horizontal pill (+ | −) stacked ABOVE Merch + cm / ft, the same width and
   Merch's height; the build pill gets the full width to the left again */
@media (max-width: 749px) {
  .ab3dex:not(.ab3dex--gallery) .ab3dex__zoom { top: auto !important; left: auto !important; right: 14px !important; bottom: calc(14px + 71px + 6px) !important; width: 89px; height: 30px; box-sizing: border-box; flex-direction: row !important; gap: 0 !important; padding: 0 !important; border-radius: 999px; background: rgba(255, 255, 255, .58); border: 1px solid rgba(255, 255, 255, .72); box-shadow: 0 6px 18px rgba(10, 16, 34, .22); z-index: 4; overflow: hidden; }
  .ab3dex:not(.ab3dex--gallery) .ab3dex__zoom .ab3dex__zbtn { flex: 1 1 50%; width: auto !important; height: 100% !important; border-radius: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; }
  .ab3dex:not(.ab3dex--gallery) .ab3dex__zoom .ab3dex__zbtn + .ab3dex__zbtn { border-left: 1px solid rgba(42, 53, 80, .14) !important; }
  .ab3dex:not(.ab3dex--gallery) .ab3dex__zoom .ab3dex__zbtn::after { inset: -8px 0; }
  .ab3dex:not(.ab3dex--gallery) .ab3dex__buildnav { max-width: calc(100% - 89px - 20px) !important; }
}
}
/* 28 Sep: phones, full section: the two counts wrap onto their own lines instead of being clipped beside the vertical zoom bar */
@media (max-width: 749px) {
  .ab3dex:not(.ab3dex--gallery) .ab3dex__buildnav .ab3dex__label { min-width: 0; }
  .ab3dex:not(.ab3dex--gallery) .ab3dex__use-t { display: flex !important; flex-wrap: wrap; column-gap: 8px; row-gap: 0; white-space: normal !important; font-size: 11.5px !important; line-height: 1.25 !important; }
  .ab3dex:not(.ab3dex--gallery) .ab3dex__use-i { white-space: nowrap; }
}
/* 28 Sep (user): the "Which kit quiz" tab tucks away (fades, no transform on the fixed tab) while the full 3D section is on screen */
.abqp__tab { transition: opacity .3s ease, visibility 0s linear 0s; }
html.ab3dex-sec-away .abqp__tab { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; transition: opacity .3s ease, visibility 0s linear .3s !important; }
/* 28 Sep (user): the full-screen kit slider keeps its panel / accessory icons on phones (a phone rule hid every stat icon) */
@media (max-width: 749px) { .ab3dex-lbkits__st .ab3dex__stat-ico { display: block !important; width: 12px !important; height: 12px !important; } }
/* 28 Sep (user): fully pinned, the build pill widens into the room the wide mini frees, so the name stays on one line */
.cv-gal-col.cv-pin-wide.cv-pin-full .ab3dex-gal .ab3dex__buildnav { transition: width .25s ease, max-width .25s ease, margin .25s ease; }
@media (max-width: 429px) {
  .cv-gal-col.cv-pin-wide.cv-pin-full .cv-gal-hero .ab3dex-gal .ab3dex__hud .ab3dex__buildnav { width: calc(100% - 90px + var(--cv-dx20, 0px)) !important; max-width: calc(100% - 90px + var(--cv-dx20, 0px)) !important; }
}
@media (min-width: 430px) and (max-width: 1099px) {
  .cv-gal-col.cv-pin-wide.cv-pin-full .cv-gal-hero .ab3dex-gal .ab3dex__buildnav { margin-right: calc(-1 * var(--cv-dx20, 0px)) !important; }
}
.cv-gal-col.cv-pin-wide.cv-pin-full .cv-gal-hero .ab3dex-gal .ab3dex__buildnav .ab3dex__label .ab3dex__title { white-space: nowrap !important; -webkit-line-clamp: unset !important; display: block !important; overflow: hidden; text-overflow: ellipsis; }
/* 28 Sep (user): phones: zoom, Merch and cm / ft share one exact width and right edge; Scene comes before Name your booth */
@media (max-width: 749px) {
  .ab3dex:not(.ab3dex--gallery) .ab3dex__dims--hud { width: 96px !important; flex: none !important; }
  .ab3dex:not(.ab3dex--gallery) .ab3dex__dims--hud .ab3dex__merch, .ab3dex:not(.ab3dex--gallery) .ab3dex__dims--hud .ab3dex__unit { width: 100% !important; box-sizing: border-box; }
  .ab3dex:not(.ab3dex--gallery) .ab3dex__zoom { width: 96px !important; right: 10px !important; }
  .ab3dex:not(.ab3dex--gallery) .ab3dex__buildnav { max-width: calc(100% - 96px - 16px) !important; }
  .ab3dex:not(.ab3dex--gallery) .ab3dex__settings > .ab3dex__set--scene { order: 1; }
  .ab3dex:not(.ab3dex--gallery) .ab3dex__settings > .ab3dex__set--name { order: 3; }
  .ab3dex:not(.ab3dex--gallery) .ab3dex__settings > .ab3dex__set--colour { order: 2; }
  .ab3dex:not(.ab3dex--gallery) .ab3dex__settings > .ab3dex__shopwrap { order: 4; }
}
/* 28 Sep (user): tablet / narrow desktop (750-1099): the 3D is never pinned over the settings; it uses the full width at a
   generous fixed height (no 4:3 squeeze leaving empty sides), and the settings card sits fully underneath at the same width */
@media (min-width: 750px) and (max-width: 899px) {
  .ab3dex:not(.ab3dex--gallery) .ab3dex__stage { position: relative !important; top: auto !important; z-index: auto !important; width: 100% !important; aspect-ratio: auto !important; height: clamp(460px, calc(100svh - 190px), 760px) !important; max-height: none !important; }
  .ab3dex:not(.ab3dex--gallery) .ab3dex__settings { width: 100% !important; box-sizing: border-box; }
}
/* 28 Sep (user): below 750 the 3D also always fills the full width (height adapts, the sides are never left empty); only
   real phone widths (<= 559) pin it while the settings scroll beneath; wider, the settings sit fully underneath */
@media (max-width: 749px) {
  .ab3dex:not(.ab3dex--gallery) .ab3dex__stage { width: 100% !important; aspect-ratio: auto !important; height: min(calc((100vw - 32px) * 1.12), calc((100svh - 150px) * .85)) !important; max-height: none !important; }
}
@media (min-width: 560px) and (max-width: 749px) {
  .ab3dex:not(.ab3dex--gallery) .ab3dex__stage { position: relative !important; top: auto !important; z-index: auto !important; height: clamp(440px, calc(100svh - 190px), 720px) !important; }
}
/* 28 Sep (user): one liquid-glass recipe for every floating control (pill, Merch, cm / ft, zoom): 58% white, 12px blur, the
   same rim + shadow, at every width */
.ab3dex__merch, .ab3dex__dims--hud .ab3dex__merch, .ab3dex-lb3d .ab3dex__merch, .ab3dex:not(.ab3dex--gallery) .ab3dex__zoom {
  background: rgba(255, 255, 255, .58) !important; border: 1px solid rgba(255, 255, 255, .72) !important; box-shadow: 0 6px 18px rgba(10, 16, 34, .22) !important;
  -webkit-backdrop-filter: blur(12px) saturate(2.2) brightness(1.06) !important; backdrop-filter: blur(12px) saturate(2.2) brightness(1.06) !important; }
/* 28 Sep (user): the section's + / − is one glass pill stacked directly above Merch and cm / ft at EVERY width (no square box,
   same width as the two below) */
.ab3dex:not(.ab3dex--gallery) .ab3dex__dims--hud { flex-direction: column !important; align-items: stretch !important; gap: 6px !important; width: 104px !important; flex: none !important; }
.ab3dex:not(.ab3dex--gallery) .ab3dex__dims--hud .ab3dex__merch, .ab3dex:not(.ab3dex--gallery) .ab3dex__dims--hud .ab3dex__unit { width: 100% !important; box-sizing: border-box; }
.ab3dex:not(.ab3dex--gallery) .ab3dex__zoom.ab3dex__zoom--hud { position: static !important; inset: auto !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; transform: none !important;
  width: 100% !important; height: 32px !important; box-sizing: border-box; display: flex !important; flex-direction: row !important; gap: 0 !important; padding: 0 !important; border-radius: 999px !important; overflow: hidden; pointer-events: auto; }
.ab3dex:not(.ab3dex--gallery) .ab3dex__zoom--hud .ab3dex__zbtn { flex: 1 1 50% !important; width: auto !important; height: 100% !important; border-radius: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; }
.ab3dex:not(.ab3dex--gallery) .ab3dex__zoom--hud .ab3dex__zbtn + .ab3dex__zbtn { border-left: 1px solid rgba(42, 53, 80, .14) !important; }
@media (max-width: 749px) { .ab3dex:not(.ab3dex--gallery) .ab3dex__dims--hud { width: 96px !important; } .ab3dex:not(.ab3dex--gallery) .ab3dex__buildnav { max-width: calc(100% - 96px - 16px) !important; } }
/* the "Drag to turn" chip sits in the middle of the 3D view (desktop: of the area beside the settings pane) */
@media (min-width: 900px) { .ab3dex:not(.ab3dex--gallery) .ab3dex__drag { left: calc((100% - var(--pane-w, 288px) - 28px) / 2) !important; } }
.ab3dex:not(.ab3dex--gallery) .ab3dex__drag { bottom: auto !important; top: 58% !important; }
/* build names never wrap: one line, the pill grows to fit (ellipsis only as a last resort) */
.ab3dex__buildnav .ab3dex__label .ab3dex__title, .cv-gal-hero .ab3dex-gal .ab3dex__buildnav .ab3dex__label .ab3dex__title { white-space: nowrap !important; -webkit-line-clamp: unset !important; display: block !important; overflow: hidden !important; text-overflow: ellipsis !important; }
@media (max-width: 429px) { .cv-gal-hero .ab3dex-gal .ab3dex__buildnav .ab3dex__label .ab3dex__title { font-size: 11.5px !important; letter-spacing: -.01em; } }
/* 28 Sep (user): the selected scene ring follows the fluid tile (it was a fixed 70x50 box stuck behind a wider swatch).
   Percentage padding resolves against the tile's width, so the ring keeps the swatch's 64:44 shape at any size */
.ab3dex:not(.ab3dex--gallery) .ab3dex__settings .ab3dex__scenes--tiles .ab3dex__scene::before { top: 0 !important; left: -3px !important; right: -3px !important; width: auto !important; margin-left: 0 !important; height: 0 !important; padding-bottom: calc(68.75% + 6px) !important; }
.ab3dex:not(.ab3dex--gallery) .ab3dex__settings .ab3dex__scenes--tiles .ab3dex__scene::after { top: 2px !important; left: -1px !important; right: -1px !important; width: auto !important; margin-left: 0 !important; height: 0 !important; padding-bottom: calc(68.75% + 2px) !important; }
/* 28 Sep (user, 2nd report): the shared liquid-glass rule painted a SQUARE frosted box behind the round + / - buttons wherever the
   zoom is not in the hud stack (the popup / lightbox). Only the hud pill carries the glass; loose round buttons stand alone */
.ab3dex:not(.ab3dex--gallery) .ab3dex__zoom:not(.ab3dex__zoom--hud) { background: transparent !important; border: 0 !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
/* 28 Sep (user): the panel and accessory counts sat far apart (the hidden words still took flex gaps) and ran to the pill's edges.
   Icon-and-number mode: no gaps around the hidden words, a tight 6px between the two counts */
@container (max-width: 700px) {
  .ab3dex__kitseg .ab3dex__stat { gap: 0 !important; } .ab3dex__kitseg .ab3dex__stat b { margin-left: 3px; } .ab3dex__kitseg .ab3dex__ms { display: none !important; }
  .ab3dex__kitseg .ab3dex__tab-stats { gap: 7px !important; }
}
@media (max-width: 899px) {
  .ab3dex__kitseg .ab3dex__stat { gap: 0 !important; } .ab3dex__kitseg .ab3dex__stat b { margin-left: 3px; } .ab3dex__kitseg .ab3dex__ms { display: none !important; }
  .ab3dex__kitseg .ab3dex__tab-stats { gap: 7px !important; }
}
/* 28 Sep (user): the Example pill uses the room it has (it grows up to the hud stack, so long names fit) and its two counts sit closer */
.ab3dex:not(.ab3dex--gallery) .ab3dex__hud .ab3dex__buildnav { flex: 0 1 auto !important; align-self: flex-end !important; height: auto !important; }
.ab3dex__use-t:has(.ab3dex__use-i) { gap: 8px !important; }
@media (max-width: 749px) {   /* phones: the pill runs closer to the stage edge and to the hud stack (was 10px + 16px of dead space) */
  .ab3dex:not(.ab3dex--gallery) .ab3dex__hud { padding: 6px !important; gap: 6px !important; }
  .ab3dex:not(.ab3dex--gallery) .ab3dex__buildnav { max-width: calc(100% - 96px - 6px) !important; }
}
/* 28 Sep (user: "the thumbnail's orbit looks nicer"): the loading cover's pieces are sized in container units, so in the WIDE
   section they blew up into big scattered panels. Here the orbit lives in a square the height of the stage, centred on the
   booth (left of the settings pane on desktop), exactly like the thumbnail's square frame */
.ab3dex:not(.ab3dex--gallery) .ab3dex__stage > .ab3dex-herocover { container-type: size; }
.ab3dex:not(.ab3dex--gallery) .ab3dex__stage > .ab3dex-herocover .ob { inset: auto !important; top: 50% !important; left: 50% !important; width: min(100cqw, 100cqh); height: min(100cqw, 100cqh); margin-left: calc(min(100cqw, 100cqh) / -2); margin-top: calc(min(100cqw, 100cqh) / -2); }   /* explicit square: size containment collapses an auto width to 0 */
@media (min-width: 900px) { .ab3dex:not(.ab3dex--gallery) .ab3dex__stage > .ab3dex-herocover .ob, .ab3dex:not(.ab3dex--gallery) .ab3dex__stage > .ab3dex-herocover .ab3dex-load { left: calc((100% - var(--pane-w, 288px) - 28px) / 2) !important; } }
/* 28 Sep (user): settings order everywhere = 1 Scene, 2 Booth colour, 3 Name your booth. Tablet / narrow desktop (750-1099)
   stacks them in that order in the card, the name beside Shop this kit */
@media (min-width: 750px) and (max-width: 899px) {
  .ab3dex:not(.ab3dex--gallery) .ab3dex__settings { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; grid-template-areas: "s s" "c c" "n b" !important; }
  .ab3dex:not(.ab3dex--gallery) .ab3dex__settings > .ab3dex__set.ab3dex__set--scene.ab3dex__set--scene:not([hidden]) { border-left: 0 !important; padding-left: 0 !important; border-top: 0 !important; }
  .ab3dex:not(.ab3dex--gallery) .ab3dex__settings > .ab3dex__set--colour { padding-right: 0 !important; border-top: 1px solid rgba(42, 53, 80, .12) !important; }
  .ab3dex:not(.ab3dex--gallery) .ab3dex__settings .ab3dex__chips { grid-template-columns: repeat(auto-fill, var(--S, 32px)) !important; }
}
/* 28 Sep (user, compact view): the 3D keeps its rounded corners and takes about 60% of the window height, pinned under the
   header while the settings card scrolls up beneath it (supersedes the earlier 28 Sep "never pinned" rule for 750-1099) */
@media (min-width: 750px) and (max-width: 899px) {
  .ab3dex:not(.ab3dex--gallery) .ab3dex__stage { position: sticky !important; top: 64px !important; z-index: 6 !important; height: max(380px, 60svh) !important; border-radius: var(--ab3dex-radius, 20px) !important; overflow: clip !important; }
  .ab3dex:not(.ab3dex--gallery) .ab3dex__settings { position: relative; z-index: 1; }
}
/* 28 Sep (user): the shop line lists the kit's contents in words with the icons, on its own row under the kit + colour */
.ab3dex__shopsum .ab3dex__shopstats { flex: 1 0 100%; display: flex; flex-wrap: wrap; gap: 2px 14px; font-style: normal; font-weight: 600; font-size: 12.5px; color: #5E6A85; }
.ab3dex__shopsum .ab3dex__shopstats .ab3dex__stat { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; font-size: inherit; }
.ab3dex__shopsum .ab3dex__shopstats .ab3dex__stat::before { content: none; display: none; }
.ab3dex__shopsum .ab3dex__shopstats b { color: #2A3550; font-weight: 700; }
.ab3dex__shopsum .ab3dex__shopstats .ab3dex__stat-ico { display: inline-block !important; width: 15px; height: 15px; flex: none; }
/* 28 Sep (user): full desktop product page: the Example build pill is only as wide as its words (at most about a quarter of
   the stage); Merch and cm / ft keep the right edge */
@media (min-width: 1100px) {
  .cv-gal-col .cv-gal-hero .ab3dex-gal .ab3dex__hud .ab3dex__buildnav, .ab3dex-gal .ab3dex__hud .ab3dex__buildnav { flex: 0 1 auto !important; width: auto !important; max-width: max(25%, 300px) !important; margin-right: auto !important; }
}
/* 28 Sep (user): the kit + colour + Shop this kit block reads as "Your selection": a divider line above it and a title */
.ab3dex:not(.ab3dex--gallery) .ab3dex__settings > .ab3dex__shopwrap { border-top: 1px solid rgba(42, 53, 80, .14) !important; padding-top: 14px !important; }
.ab3dex__shopwrap .ab3dex__shoplbl { display: block; margin: 0 0 6px; }
/* 28 Sep (user): desktop: the 3D section fills the page: full width (24px gutters) and the window's height under the header;
   the title + subtitle stay above it. The stage's top-right pane clears the fixed cart icon (the stage sits below the header) */
@media (min-width: 900px) {
  .ab3dex:not(.ab3dex--gallery) .ab3dex__inner { max-width: none !important; padding-left: 24px !important; padding-right: 24px !important; }
  .ab3dex:not(.ab3dex--gallery) .ab3dex__stage { width: 100% !important; height: max(560px, calc(100svh - 100px)) !important; max-height: none !important; aspect-ratio: auto !important; scroll-margin-top: 84px; }
}
/* 28 Sep (user): mobile and compact keep the 3D at most 60% of the screen height, so the page scrolls on past it */
@media (max-width: 749px) {
  .ab3dex:not(.ab3dex--gallery) .ab3dex__stage { height: min(calc((100vw - 32px) * 1.12), 60svh) !important; max-height: 60svh !important; }
}
/* 28 Sep (user): Your selection hierarchy: kit name loud, colour + swatch under it, the counts small beneath as the kit's contents */
.ab3dex__shopsum { display: grid !important; grid-template-columns: minmax(0, 1fr); gap: 3px 0 !important; }
.ab3dex__shopsum .ab3dex__shopkit { font: 700 18px/1.2 Inter, system-ui, sans-serif; letter-spacing: .01em; color: #2A3550; }
.ab3dex__shopsum .ab3dex__shopcol { display: inline-flex; align-items: center; gap: 7px; font: 600 14px/1.3 Inter, system-ui, sans-serif; color: #2A3550; }
.ab3dex__shopsum .ab3dex__shopcol::before { content: none !important; display: none !important; }
.ab3dex__shopsum .ab3dex__shopcol i { width: 14px; height: 14px; border-radius: 4px; flex: none; box-shadow: inset 0 0 0 1px rgba(42, 53, 80, .2); }
.ab3dex__shopsum .ab3dex__shopstats { margin-top: 4px; gap: 2px 12px !important; font-size: 12.5px !important; color: #5E6A85 !important; }
.ab3dex__shopsum .ab3dex__shopstats .ab3dex__stat b { font-size: 12.5px !important; font-weight: 700; color: #2A3550; }
.ab3dex__shopsum .ab3dex__shopstats .ab3dex__stat-ico { width: 13px !important; height: 13px !important; }
/* 28 Sep (user): the settings sidebar starts at 900px (was 1100); only below it does the 3D pin (60% height) over the stacked settings */
/* 28 Sep (user: the section's scene lost its rounded corners): Safari lets a GPU-composited WebGL canvas ignore its parent's
   border-radius + overflow clip; clip-path clips composited layers reliably. The canvas itself is rounded too, belt and braces. */
.ab3dex:not(.ab3dex--gallery) .ab3dex__stage { clip-path: inset(0 round var(--ab3dex-radius, 20px)); -webkit-clip-path: inset(0 round var(--ab3dex-radius, 20px)); }
@media (max-width: 749px) { .ab3dex:not(.ab3dex--gallery) .ab3dex__stage { clip-path: inset(0 round 16px); -webkit-clip-path: inset(0 round 16px); } }
.ab3dex:not(.ab3dex--gallery) .ab3dex__stage > canvas { border-radius: inherit; }
/* 28 Sep (user): the thumbnail's Example build pill uses less height (tighter rows, slimmer padding) */
.ab3dex-gal .ab3dex__buildnav { padding-top: 3px !important; padding-bottom: 3px !important; }
.ab3dex-gal .ab3dex__buildnav .ab3dex__label { row-gap: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; }
.ab3dex-gal .ab3dex__buildnav .ab3dex__label .ab3dex__tag, .ab3dex-gal .ab3dex__buildnav .ab3dex__label .ab3dex__title { line-height: 1.12 !important; }
.ab3dex-gal .ab3dex__buildnav .ab3dex__use { margin-top: 1px !important; }
/* 28 Sep (user, item 578): thumbnail + popup: + / − is one glass pill directly above Merch and cm / ft (the section's layout);
   the pin's corner counter-scale no longer applies to it. The popup's colour dropdown keeps the upper-left spot */
.ab3dex__lbdims .ab3dex__zoom.ab3dex__zoom--hud { position: static !important; inset: auto !important; transform: none !important; animation: none !important; align-self: stretch !important;
  width: auto !important; height: 30px !important; box-sizing: border-box; display: flex !important; flex-direction: row !important; gap: 0 !important; padding: 0 !important; margin: 0 !important; border-radius: 999px !important; overflow: hidden; pointer-events: auto; z-index: auto;
  background: rgba(255, 255, 255, .58) !important; border: 1px solid rgba(255, 255, 255, .72) !important; box-shadow: 0 6px 18px rgba(10, 16, 34, .22) !important;
  -webkit-backdrop-filter: blur(12px) saturate(2.2) brightness(1.06) !important; backdrop-filter: blur(12px) saturate(2.2) brightness(1.06) !important; }
.ab3dex__lbdims .ab3dex__zoom--hud .ab3dex__zbtn { flex: 1 1 50% !important; width: auto !important; height: 100% !important; min-width: 0 !important; border-radius: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
.ab3dex__lbdims .ab3dex__zoom--hud .ab3dex__zbtn + .ab3dex__zbtn { border-left: 1px solid rgba(42, 53, 80, .14) !important; }
.ab3dex__lbdims .ab3dex__zoom--hud .ab3dex__zbtn svg { width: 15px; height: 15px; }
.ab3dex__pickbar { display: none; }
.ab3dex-lb3d .ab3dex__pickbar { display: flex; position: absolute; left: 16px; top: 16px; z-index: 3; height: 38px; }
.ab3dex-lb3d .ab3dex__pickbar .ab3dex__pick { display: block; align-self: stretch; border-radius: 999px; background: rgba(255, 255, 255, .88); border: 1px solid rgba(42, 53, 80, .1); }
.ab3dex-lb3d .ab3dex__pickbar .ab3dex__pick[hidden] { display: none; }
.ab3dex-lb3d .ab3dex__hud .ab3dex__buildnav { align-self: flex-end !important; min-height: 76px; }   /* popup: same, beside its taller + / − stack */
/* 28 Sep (user, item 599): the thumbnail's build pill hugs its content: only as tall as its three lines and as wide as the text
   needs (never truncated), sitting at the bottom beside the + / Merch / cm stack instead of stretching to its height or width */
.ab3dex-gal .ab3dex__hud .ab3dex__buildnav, .cv-gal-col .cv-gal-hero .ab3dex-gal .ab3dex__hud .ab3dex__buildnav, .cv-gal-col.cv-pin-wide.cv-pin-full .cv-gal-hero .ab3dex-gal .ab3dex__hud .ab3dex__buildnav {
  flex: 0 0 auto !important; width: auto !important; max-width: calc(100% - 112px) !important; min-height: 0 !important; height: auto !important; align-self: flex-end !important; margin-right: auto !important; }
.ab3dex-gal .ab3dex__hud .ab3dex__buildnav .ab3dex__label { flex: 0 1 auto !important; width: auto !important; min-width: 0 !important; padding-right: 14px !important; }
.ab3dex-gal .ab3dex__hud .ab3dex__buildnav .ab3dex__label { grid-template-columns: max-content !important; }   /* the track takes the name's full width */
.ab3dex-gal .ab3dex__buildnav .ab3dex__label .ab3dex__title, .cv-gal-hero .ab3dex-gal .ab3dex__buildnav .ab3dex__label .ab3dex__title { overflow: visible !important; text-overflow: clip !important; }
@media (max-width: 749px) { .ab3dex-gal .ab3dex__buildnav .ab3dex__label .ab3dex__title, .cv-gal-hero .ab3dex-gal .ab3dex__buildnav .ab3dex__label .ab3dex__title { white-space: normal !important; max-width: min(128px, calc(100vw - 290px + 128px)); } }   /* phones: a long name wraps to a second line instead of being cut */
/* 28 Sep (user, item 606): the Example pill wraps the arrows + text with no spare room above, right or below */
.ab3dex-gal .ab3dex__hud .ab3dex__buildnav, .cv-gal-col .cv-gal-hero .ab3dex-gal .ab3dex__hud .ab3dex__buildnav, .cv-gal-col.cv-pin-wide.cv-pin-full .cv-gal-hero .ab3dex-gal .ab3dex__hud .ab3dex__buildnav { padding: 2px 4px 2px 3px !important; gap: 3px !important; }
.ab3dex-gal .ab3dex__hud .ab3dex__buildnav .ab3dex__label { padding: 0 9px 0 4px !important; }
.ab3dex-gal .ab3dex__buildnav .ab3dex__label .ab3dex__tag { line-height: 1 !important; }
.ab3dex-gal .ab3dex__buildnav .ab3dex__label .ab3dex__title { line-height: 1.08 !important; }
.ab3dex-gal .ab3dex__buildnav .ab3dex__use { gap: 2px !important; margin-top: 0 !important; }
/* 28 Sep (user, item 609): phones: 'Shapeshift Kit' / 'Duo Kit' / 'Duo Max Kit' fit their equal tabs whole (never '...') */
@media (max-width: 749px) { .ab3dex__kitseg .ab3dex__tab { padding-left: 3px !important; padding-right: 3px !important; } .ab3dex__kitseg .ab3dex__tab-short { font-size: 12px !important; letter-spacing: -.01em !important; text-overflow: clip !important; } }
@media (max-width: 374px) { .ab3dex__kitseg .ab3dex__tab-short { font-size: 11px !important; letter-spacing: -.02em !important; } }
.cv-gal-col.cv-pin-wide.cv-pin-wide .cv-gal-hero.cv-gal-hero .ab3dex-gal.ab3dex-gal .ab3dex__hud .ab3dex__buildnav.ab3dex__buildnav { max-width: calc(100% - 74px) !important; }   /* pinned mini: the stack is narrower, the pill may use the room (never clip "used") */

/* 28 Sep (user, item 676): Boofy cursor tag + the one-shot shape burst on click (desktop only; built by JS) */
.ab3dex-curtag { position: absolute; left: 0; top: 0; z-index: 7; pointer-events: none; padding: 7px 12px; color: #1E47CE; font: 700 12.5px/1 Inter, system-ui, sans-serif; letter-spacing: .02em; white-space: nowrap; opacity: 0; transition: opacity .18s ease; }
.ab3dex-curtag span { position: relative; }
.ab3dex-curtag .ab3dex-curtag__bg { position: absolute; left: -1px; top: -1px; overflow: visible; display: block; }
.ab3dex-curtag.is-on { opacity: 1; }   /* 28 Sep (user, item 717): an 8-bit speech bubble (pixel-stepped SVG outline drawn by JS, no shadow), tail down to Boofy */
.ab3dex-fling { display: none !important; }
.ab3dex-boofy { position: fixed; left: 0; top: 0; z-index: 2147483600; width: 36px; height: 44px; pointer-events: none; transform-origin: 3px 3px; opacity: 0; transition: opacity .12s ease; }   /* 28 Sep (user, item 722): Boofy hangs off the pixel-hand pointer (a sprite on a pendulum, drawn by JS) */
.ab3dex-boofy.is-on { opacity: 1; }
.ab3dex-boofy canvas { display: block; width: 100%; height: 100%; image-rendering: pixelated; }
.ab3dex--boofy * { cursor: inherit !important; }   /* 28 Sep (item 719): Boofy everywhere in the 3D area; the pointer part switches to a pixel I-beam over text fields */   /* 28 Sep (user): Boofy stays the cursor over the 3D area's own buttons too */
.ab3dex-burst { position: absolute; z-index: 6; pointer-events: none; image-rendering: pixelated; }   /* 28 Sep (user): the click burst is 8-bit pixel art, like Boofy (drawn frame by frame by JS) */


.ab3dex__kitseg.is-tight .ab3dex__tab-name { display: none; }
.ab3dex__kitseg.is-tight .ab3dex__tab-short { display: block; font: 700 14px/1.1 Inter, system-ui, sans-serif; letter-spacing: .02em; color: var(--ab3dex-ink, #2A3550); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }   /* item 702 */

/* 28 Sep (user, items 723 / 724): press state for + / − and the example arrows: a cobalt flash, pressed in (class set by JS for >= 180 ms) */
.ab3dex__btn, .ab3dex__zbtn { transition: transform .15s ease, opacity .15s ease, background-color .22s ease, color .22s ease, border-color .22s ease; }
.ab3dex__btn.is-press, .ab3dex__zbtn.is-press, .ab3dex__buildnav .ab3dex__btn.is-press { background: #1E47CE !important; border-color: #1E47CE !important; color: #fff !important; opacity: 1 !important; transform: translateY(1px) scale(.9) !important; transition: transform .05s ease, background-color .05s ease, color .05s ease !important; }
@media (prefers-reduced-motion: reduce) { .ab3dex__btn.is-press, .ab3dex__zbtn.is-press { transform: none !important; } }
.ab3dex:not(.ab3dex--gallery) .ab3dex__zoom--hud .ab3dex__zbtn.is-press, .ab3dex__lbdims .ab3dex__zoom--hud .ab3dex__zbtn.is-press, .ab3dex .ab3dex__zoom--hud .ab3dex__zbtn.is-press, .ab3dex-gal .ab3dex__zoom--hud .ab3dex__zbtn.is-press { background: #1E47CE !important; color: #fff !important; border-radius: 0 !important; transform: none !important; }   /* 28 Sep (user: the fill left gaps at the edge and top): on the segmented pill the pressed half fills its whole segment edge to edge (the pill's own rounded clip shapes it), no shrink */
/* 28 Sep (user, item 733: "Shapeshift Duo Ma" was cut off): on the full desktop the kit slider takes the room it needs (up to 780px,
   clear of the settings pane); where it still cannot fit, JS swaps in "Duo Kit" / "Duo Max Kit" (is-tight). Names never truncate. */
@media (min-width: 900px) { .ab3dex:not(.ab3dex--gallery) .ab3dex__kitseg { width: min(780px, calc(100% - var(--pane-w, 288px) - 72px)) !important; } }
.ab3dex__kitseg .ab3dex__tab-name { overflow: visible; text-overflow: clip; }
/* 28 Sep (user, item 739): the 3D section's controls wait for the vortex, then arrive: the kit selector first, GROWING like a
   liquid-glass bubble (it is the main interaction), then the settings pane, then the buttons along the stage. Opacity + the
   individual scale / translate properties only (they compose with each element's own transform; nothing re-lays out). */
@media (min-width: 900px) { .ab3dex--ui-wait .ab3dex__kitseg, .ab3dex--ui-wait .ab3dex__settings, .ab3dex--ui-wait .ab3dex__hud, .ab3dex--ui-wait .ab3dex__drag, .ab3dex--ui-wait .ab3dex-curtag { opacity: 0 !important; pointer-events: none !important; } }   /* 29 Sep (user, item 768): mobile + compact (< 900px, the pane scrolls under the stage) never wait: everything is simply loaded */
@keyframes abUiBubble { 0% { opacity: 0; scale: .5; } 45% { opacity: 1; } 62% { scale: 1.07; } 82% { scale: .985; } 100% { opacity: 1; scale: 1; } }
@keyframes abUiRise { 0% { opacity: 0; translate: 0 16px; } 100% { opacity: 1; translate: 0 0; } }
@media (min-width: 900px) { .ab3dex--ui-in .ab3dex__kitseg { animation: abUiBubble 1s cubic-bezier(.2, .9, .25, 1) both; transform-origin: 50% 50%; } }
@media (min-width: 900px) { .ab3dex--ui-in .ab3dex__settings { animation: abUiBubble 1s cubic-bezier(.2, .9, .25, 1) .22s both; transform-origin: 100% 0; } }
@media (min-width: 900px) { .ab3dex--ui-in .ab3dex__hud { animation: abUiRise .7s cubic-bezier(.2, .8, .2, 1) .5s both; } }
@media (min-width: 900px) { .ab3dex--ui-in .ab3dex__drag { animation: abUiRise .7s cubic-bezier(.2, .8, .2, 1) .7s both; } }
/* 28 Sep (user, item 759): the product 3D thumbnail's example pill: more room after the "% of kit used" bar before the pill's rounded edge */
.ab3dex-gal .ab3dex__hud .ab3dex__buildnav .ab3dex__label { padding-right: 24px !important; }
/* 28 Sep (user, item 761, reference photos of exhibition halls): Artist Alley, Artist Alley XL and Expo hall stand inside a bright
   convention hall: a high space-frame truss ceiling with rows of lights over pale panelled walls (flat colours, drawn once as SVG) */
.ab3dex__stage[data-scene="alley"], .ab3dex__stage[data-scene="convention"], .ab3dex__stage[data-scene="expo"], .ab3dex-gal[data-scene="alley"], .ab3dex-gal[data-scene="convention"], .ab3dex-gal[data-scene="expo"] { background-color: #DCE1E8; background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 640' preserveAspectRatio='xMidYMin slice'%3E%3Crect width='1600' height='640' fill='%23DCE1E8'/%3E%3Cpolygon points='0,0 1600,0 1600,300 0,300' fill='%23CBD1D9'/%3E%3Cpath d='M-1600 0L114 300M-1460 0L154 300M-1320 0L194 300M-1180 0L234 300M-1040 0L274 300M-900 0L314 300M-760 0L354 300M-620 0L394 300M-480 0L434 300M-340 0L474 300M-200 0L514 300M-60 0L554 300M80 0L594 300M220 0L634 300M360 0L674 300M500 0L714 300M640 0L754 300M780 0L794 300M920 0L834 300M1060 0L874 300M1200 0L914 300M1340 0L954 300M1480 0L994 300M1620 0L1034 300M1760 0L1074 300M1900 0L1114 300M2040 0L1154 300M2180 0L1194 300M2320 0L1234 300M2460 0L1274 300M2600 0L1314 300M2740 0L1354 300M2880 0L1394 300M3020 0L1434 300M3160 0L1474 300M0 18H1600M0 52H1600M0 92H1600M0 140H1600M0 196H1600M0 258H1600M-1497 18L-1180 52M-1229 18L-935 52M-961 18L-690 52M-693 18L-444 52M-425 18L-199 52M-157 18L46 52M111 18L292 52M379 18L537 52M647 18L782 52M915 18L1028 52M1183 18L1273 52M1451 18L1518 52M1719 18L1764 52M1987 18L2009 52M2255 18L2254 52M2523 18L2500 52M2791 18L2745 52M3059 18L2990 52M-1303 52L-965 92M-1058 52L-746 92M-812 52L-528 92M-567 52L-309 92M-322 52L-90 92M-76 52L128 92M169 52L347 92M414 52L566 92M660 52L784 92M905 52L1003 92M1150 52L1222 92M1396 52L1440 92M1641 52L1659 92M1886 52L1878 92M2132 52L2096 92M2377 52L2315 92M2622 52L2534 92M2868 52L2752 92M-1074 92L-707 140M-856 92L-520 140M-637 92L-333 140M-418 92L-147 140M-200 92L40 140M19 92L227 140M238 92L413 140M456 92L600 140M675 92L787 140M894 92L973 140M1112 92L1160 140M1331 92L1347 140M1550 92L1533 140M1768 92L1720 140M1987 92L1907 140M2206 92L2093 140M2424 92L2280 140M2643 92L2467 140M-800 140L-405 196M-613 140L-256 196M-427 140L-107 196M-240 140L43 196M-53 140L192 196M133 140L341 196M320 140L491 196M507 140L640 196M693 140L789 196M880 140L939 196M1067 140L1088 196M1253 140L1237 196M1440 140L1387 196M1627 140L1536 196M1813 140L1685 196M2000 140L1835 196M2187 140L1984 196M2373 140L2133 196M-480 196L-72 258M-331 196L36 258M-181 196L144 258M-32 196L252 258M117 196L360 258M267 196L468 258M416 196L576 258M565 196L684 258M715 196L792 258M864 196L900 258M1013 196L1008 258M1163 196L1116 258M1312 196L1224 258M1461 196L1332 258M1611 196L1440 258M1760 196L1548 258M1909 196L1656 258M2059 196L1764 258' stroke='%23AEB5C0' stroke-width='2.2' fill='none'/%3E%3Ccircle cx='-200' cy='72' r='7' fill='%23FFFFFF'/%3E%3Ccircle cx='-50' cy='72' r='7' fill='%23FFFFFF'/%3E%3Ccircle cx='100' cy='72' r='7' fill='%23FFFFFF'/%3E%3Ccircle cx='250' cy='72' r='7' fill='%23FFFFFF'/%3E%3Ccircle cx='400' cy='72' r='7' fill='%23FFFFFF'/%3E%3Ccircle cx='550' cy='72' r='7' fill='%23FFFFFF'/%3E%3Ccircle cx='700' cy='72' r='7' fill='%23FFFFFF'/%3E%3Ccircle cx='850' cy='72' r='7' fill='%23FFFFFF'/%3E%3Ccircle cx='1000' cy='72' r='7' fill='%23FFFFFF'/%3E%3Ccircle cx='1150' cy='72' r='7' fill='%23FFFFFF'/%3E%3Ccircle cx='1300' cy='72' r='7' fill='%23FFFFFF'/%3E%3Ccircle cx='1450' cy='72' r='7' fill='%23FFFFFF'/%3E%3Ccircle cx='1600' cy='72' r='7' fill='%23FFFFFF'/%3E%3Ccircle cx='1750' cy='72' r='7' fill='%23FFFFFF'/%3E%3Ccircle cx='-140' cy='166' r='5' fill='%23FFFFFF'/%3E%3Ccircle cx='-20' cy='166' r='5' fill='%23FFFFFF'/%3E%3Ccircle cx='100' cy='166' r='5' fill='%23FFFFFF'/%3E%3Ccircle cx='220' cy='166' r='5' fill='%23FFFFFF'/%3E%3Ccircle cx='340' cy='166' r='5' fill='%23FFFFFF'/%3E%3Ccircle cx='460' cy='166' r='5' fill='%23FFFFFF'/%3E%3Ccircle cx='580' cy='166' r='5' fill='%23FFFFFF'/%3E%3Ccircle cx='700' cy='166' r='5' fill='%23FFFFFF'/%3E%3Ccircle cx='820' cy='166' r='5' fill='%23FFFFFF'/%3E%3Ccircle cx='940' cy='166' r='5' fill='%23FFFFFF'/%3E%3Ccircle cx='1060' cy='166' r='5' fill='%23FFFFFF'/%3E%3Ccircle cx='1180' cy='166' r='5' fill='%23FFFFFF'/%3E%3Ccircle cx='1300' cy='166' r='5' fill='%23FFFFFF'/%3E%3Ccircle cx='1420' cy='166' r='5' fill='%23FFFFFF'/%3E%3Ccircle cx='1540' cy='166' r='5' fill='%23FFFFFF'/%3E%3Ccircle cx='1660' cy='166' r='5' fill='%23FFFFFF'/%3E%3Ccircle cx='1780' cy='166' r='5' fill='%23FFFFFF'/%3E%3Ccircle cx='-200' cy='228' r='4' fill='%23FFFFFF'/%3E%3Ccircle cx='-100' cy='228' r='4' fill='%23FFFFFF'/%3E%3Ccircle cx='0' cy='228' r='4' fill='%23FFFFFF'/%3E%3Ccircle cx='100' cy='228' r='4' fill='%23FFFFFF'/%3E%3Ccircle cx='200' cy='228' r='4' fill='%23FFFFFF'/%3E%3Ccircle cx='300' cy='228' r='4' fill='%23FFFFFF'/%3E%3Ccircle cx='400' cy='228' r='4' fill='%23FFFFFF'/%3E%3Ccircle cx='500' cy='228' r='4' fill='%23FFFFFF'/%3E%3Ccircle cx='600' cy='228' r='4' fill='%23FFFFFF'/%3E%3Ccircle cx='700' cy='228' r='4' fill='%23FFFFFF'/%3E%3Ccircle cx='800' cy='228' r='4' fill='%23FFFFFF'/%3E%3Ccircle cx='900' cy='228' r='4' fill='%23FFFFFF'/%3E%3Ccircle cx='1000' cy='228' r='4' fill='%23FFFFFF'/%3E%3Ccircle cx='1100' cy='228' r='4' fill='%23FFFFFF'/%3E%3Ccircle cx='1200' cy='228' r='4' fill='%23FFFFFF'/%3E%3Ccircle cx='1300' cy='228' r='4' fill='%23FFFFFF'/%3E%3Ccircle cx='1400' cy='228' r='4' fill='%23FFFFFF'/%3E%3Ccircle cx='1500' cy='228' r='4' fill='%23FFFFFF'/%3E%3Ccircle cx='1600' cy='228' r='4' fill='%23FFFFFF'/%3E%3Ccircle cx='1700' cy='228' r='4' fill='%23FFFFFF'/%3E%3Crect y='300' width='1600' height='16' fill='%23B9C0CA'/%3E%3Crect y='316' width='1600' height='150' fill='%23E7EAEF'/%3E%3Cpath d='M0 316V466M110 316V466M220 316V466M330 316V466M440 316V466M550 316V466M660 316V466M770 316V466M880 316V466M990 316V466M1100 316V466M1210 316V466M1320 316V466M1430 316V466M1540 316V466' stroke='%23D3D8DF' stroke-width='3'/%3E%3C/svg%3E"); background-size: cover; background-position: 50% 0; background-repeat: no-repeat; }
/* 28 Sep (user, item 716): on desktop the 3D section is ONE screen: the title, the subtitle and the whole stage fit the window
   under the floating header (68px), a single framed moment. The inner column is exactly the free height; the stage takes what the
   heading leaves (the settings pane floats over the stage from 900px, so it takes no room). */
@media (min-width: 900px) {
  .ab3dex:not(.ab3dex--gallery) .ab3dex__inner { display: flex; flex-direction: column; height: calc(100svh - 80px); min-height: 600px; max-height: 1100px; }
  .ab3dex:not(.ab3dex--gallery) .ab3dex__head { flex: none; margin-bottom: 14px; }
  .ab3dex:not(.ab3dex--gallery) .ab3dex__work { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
  .ab3dex:not(.ab3dex--gallery) .ab3dex__work > .ab3dex__stage { flex: 1 1 auto; height: auto !important; min-height: 0; max-height: none !important; }
  .ab3dex:not(.ab3dex--gallery) { padding-top: max(24px, calc(var(--ab3dex-pt, 48px) * .5)); scroll-margin-top: 60px; }
}