/* Custom Lifting Sling Builder — styled to be IDENTICAL to the MMS ratchet
   configurator (strap-configurator/src/customer/CustomerConfigurator.css).
   The full-page shell uses the same cc-* class names + values as the configurator;
   the sling-specific controls keep sb__* classes. Everything is scoped under
   #sling-builder so it's self-contained whether standalone or embedded in Dawn. */
@import url('https://fonts.googleapis.com/css2?family=Anton&family=Barlow+Condensed:wght@600;700;800;900&family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@500;600&family=Oswald:wght@500;600;700&display=swap');

#sling-builder {
  /* Brand + surfaces — mirrors the configurator tokens exactly. */
  --mms-orange: #EE6B26;
  --mms-orange-bright: #FF8344;
  --mms-orange-tint: rgba(238,107,38,0.10);
  --mms-orange-tint-hi: rgba(238,107,38,0.18);
  --mms-orange-border: rgba(238,107,38,0.55);
  --mms-orange-halo: rgba(238,107,38,0.20);
  --mms-orange-glow: rgba(238,107,38,0.50);
  --bg-header: #000;
  --bg-panel: #0E0F11;
  --bg-card: #16181C;
  --bg-card-hover: #1F2226;
  --bg-chip: #24272C;
  --bg-input: #16181C;
  --bg-viewport: #E8E5DD;
  --text-headline: #FFF;
  --text-body: #D4D4D8;
  --text-secondary: #C8C8CC;
  --text-muted: #A1A1AA;
  --text-disabled: #71717A;
  --status-success: #5CBA60;
  --status-success-tint: rgba(76,175,80,0.12);
  --border-faint: rgba(255,255,255,0.09);
  --border-default: rgba(255,255,255,0.14);
  --font-display: 'Barlow Condensed','Oswald','Impact',sans-serif;
  --font-body: 'Inter',system-ui,-apple-system,sans-serif;
  --font-mono: 'JetBrains Mono',ui-monospace,'SF Mono',monospace;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --header-height: 96px;

  color: var(--text-body);
  font-family: var(--font-body);
}
#sling-builder *, #sling-builder *::before, #sling-builder *::after { box-sizing: border-box; }
#sling-builder :focus-visible { outline: 2px solid var(--mms-orange); outline-offset: 2px; }
/* Make the HTML `hidden` attribute always win — our scoped display rules (e.g.
   .sb__empty inline-flex) would otherwise override the UA [hidden] display:none,
   leaving toggled-off elements (the viewport placeholder) stuck on screen. */
#sling-builder [hidden] { display: none !important; }

/* ─── SHELL (full page) ─────────────────────────────────────────────────────── */
#sling-builder.cc-shell {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background: var(--bg-panel);
  overflow: hidden;
}
#sling-builder .cc-shell-body {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* ─── APP HEADER ────────────────────────────────────────────────────────────── */
#sling-builder .cc-app-header {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: var(--header-height);
  padding: 0 24px;
  background: var(--bg-header);
  border-bottom: 2px solid var(--mms-orange);
  flex-shrink: 0;
  z-index: 20;
}

/* Brand lockup — logo only, bottom-aligned (matches the configurator header). */
#sling-builder .cc-brand {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  flex-shrink: 0;
  line-height: 1;
}
#sling-builder .cc-brand-logo { display: block; height: 64px; width: auto; }
#sling-builder .cc-brand-link { display: flex; align-items: center; text-decoration: none; }

/* Tool name — sits in the left band between the logo and the centered status
   rail, exactly like the ratchet configurator (left of the progress steps). */
#sling-builder .cc-header-title {
  position: absolute;
  top: 0; bottom: 0;
  left: 160px;               /* clears the 64px-tall logo + 24px pad */
  right: calc(50% + 290px);  /* stops ~30px before the centered status rail */
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(22px, 2.4vw, 40px);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--text-headline);
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}
@media (max-width: 1024px) { #sling-builder .cc-header-title { display: none; } }

/* ─── STATUS RAIL (your selections) — mirrors the ratchet configurator's progress ─ */
#sling-builder .cc-progress {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 520px;
  max-width: calc(100% - 280px);
}
#sling-builder .cc-progress-track {
  position: absolute; top: 19px; left: 40px; right: 40px; height: 3px;
  background: rgba(255,255,255,0.10); border-radius: 2px; overflow: hidden;
}
#sling-builder .cc-progress-fill {
  height: 100%; background: var(--mms-orange); border-radius: 2px;
  box-shadow: 0 0 6px var(--mms-orange-glow); transition: width 0.4s ease;
}
#sling-builder .cc-progress-steps { position: relative; display: flex; justify-content: space-between; }
#sling-builder .cc-progress-step {
  width: 80px; display: flex; flex-direction: column; align-items: center; gap: 8px;
  background: transparent; border: none; padding: 0; font-family: inherit; cursor: default; color: inherit;
}
#sling-builder .cc-progress-circle {
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-body); font-size: 13px; font-weight: 800;
  background: #1A1C20; border: 1.5px solid #2D2F35; color: var(--text-disabled);
  transition: box-shadow 0.4s ease, background 0.3s, border-color 0.3s, color 0.3s;
}
#sling-builder .cc-progress-step--active .cc-progress-circle {
  background: var(--mms-orange); border-color: var(--mms-orange); color: #fff;
  box-shadow: 0 0 0 5px var(--mms-orange-halo);
}
#sling-builder .cc-progress-step--done .cc-progress-circle {
  background: rgba(238,107,38,0.18); border-color: var(--mms-orange); color: var(--mms-orange);
}
#sling-builder .cc-progress-label {
  font-family: var(--font-body); font-size: 10.5px; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--text-disabled); transition: color 0.3s;
}
#sling-builder .cc-progress-step--active .cc-progress-label { color: var(--text-headline); }
#sling-builder .cc-progress-step--done .cc-progress-label { color: var(--text-secondary); }
@media (max-width: 1024px) { #sling-builder .cc-progress { max-width: calc(100% - 220px); } }

#sling-builder .cc-header-actions { display: flex; align-items: center; gap: 12px; }

#sling-builder .cc-reset-btn {
  pointer-events: auto;
  font-family: var(--font-body);
  font-size: 11px; font-weight: 700; letter-spacing: 0.18em;
  color: var(--text-body);
  background: rgba(0,0,0,0.5);
  border: 1px solid var(--border-default);
  padding: 8px 14px; border-radius: var(--radius-sm);
  cursor: pointer; transition: all 0.15s; text-transform: uppercase;
}
#sling-builder .cc-reset-btn:hover { color: var(--mms-orange); border-color: var(--mms-orange); }

/* ─── SPECIAL REQUEST (header CTA + modal) ──────────────────────────────────── */
#sling-builder .cc-special-btn {
  display: inline-flex; align-items: center; gap: 10px;
  pointer-events: auto; cursor: pointer;
  font-family: var(--font-body); color: #fff;
  background: var(--mms-orange);
  border: 1px solid var(--mms-orange-bright);
  border-radius: var(--radius-sm);
  padding: 7px 16px;
  transition: background 0.15s, box-shadow 0.15s, transform 0.05s;
}
#sling-builder .cc-special-btn:hover { background: var(--mms-orange-bright); box-shadow: 0 0 16px 0 var(--mms-orange-halo); }
#sling-builder .cc-special-btn:active { transform: translateY(1px); }
#sling-builder .cc-special-btn-icon { font-size: 18px; line-height: 1; }
#sling-builder .cc-special-btn-text { display: flex; flex-direction: column; align-items: flex-start; text-align: left; line-height: 1.12; }
#sling-builder .cc-special-btn-title { font-size: 13px; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; }
#sling-builder .cc-special-btn-sub { font-size: 10px; font-weight: 600; opacity: 0.9; }
/* Attention pulse — flashes a glowing ring around the Special Request button when the
   customer types a length over the max, steering oversize orders here (toggled by main.js). */
#sling-builder .cc-special-btn--flash { animation: cc-special-flash 1.1s ease-in-out infinite; }
@keyframes cc-special-flash {
  0%   { box-shadow: 0 0 0 0 rgba(238,107,38,0.85), 0 0 10px 1px var(--mms-orange-glow); }
  70%  { box-shadow: 0 0 0 9px rgba(238,107,38,0), 0 0 24px 6px var(--mms-orange-bright); }
  100% { box-shadow: 0 0 0 0 rgba(238,107,38,0), 0 0 10px 1px var(--mms-orange-glow); }
}

/* Modal lives at the end of #sling-builder (position:fixed → overlays viewport). */
#sling-builder .cc-special-overlay {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center; padding: 24px;
  background: rgba(0,0,0,0.62); backdrop-filter: blur(3px);
  animation: cc-special-fade 0.15s ease;
}
@keyframes cc-special-fade { from { opacity: 0; } to { opacity: 1; } }
#sling-builder .cc-special-modal {
  position: relative; width: 100%; max-width: 460px;
  max-height: calc(100vh - 48px); overflow-y: auto;
  background: var(--bg-panel); border: 1px solid var(--mms-orange-border);
  border-radius: 14px; padding: 30px 28px 26px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.55);
  animation: cc-special-pop 0.18s cubic-bezier(0.2,0.9,0.3,1.15);
}
@keyframes cc-special-pop { from { transform: translateY(-14px) scale(0.98); opacity: 0; } to { transform: none; opacity: 1; } }
#sling-builder .cc-special-close {
  position: absolute; top: 12px; right: 12px;
  width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
  background: transparent; border: none; cursor: pointer;
  color: var(--text-muted); font-size: 24px; line-height: 1; border-radius: 8px;
  transition: color 0.15s, background 0.15s;
}
#sling-builder .cc-special-close:hover { color: #fff; background: var(--bg-card); }
#sling-builder .cc-special-heading {
  font-family: var(--font-display); font-size: 20px; font-weight: 800;
  color: var(--text-headline); margin: 0 28px 6px 0; line-height: 1.2;
}
#sling-builder .cc-special-tagline { font-size: 13px; color: var(--text-muted); margin-bottom: 18px; line-height: 1.45; }
#sling-builder .cc-special-field { display: flex; flex-direction: column; margin-bottom: 14px; }
#sling-builder .cc-special-label {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--text-secondary); margin-bottom: 6px;
}
#sling-builder .cc-special-req { color: var(--mms-orange); margin-left: 3px; }
#sling-builder .cc-special-input,
#sling-builder .cc-special-textarea {
  font-family: var(--font-body); font-size: 14px; color: var(--text-headline);
  background: var(--bg-input); border: 1px solid var(--border-default);
  border-radius: var(--radius-sm); padding: 10px 12px; width: 100%;
  transition: border-color 0.15s;
}
#sling-builder .cc-special-input:focus,
#sling-builder .cc-special-textarea:focus { outline: none; border-color: var(--mms-orange); }
#sling-builder .cc-special-textarea { resize: vertical; min-height: 96px; }
#sling-builder .cc-special-invalid { border-color: #E5484D; }
#sling-builder .cc-special-error { color: #F0918C; font-size: 11px; margin-top: 5px; min-height: 0; }
#sling-builder .cc-special-error:empty { margin-top: 0; }
#sling-builder .cc-special-submit {
  width: 100%; margin-top: 6px;
  font-family: var(--font-body); font-size: 14px; font-weight: 800; letter-spacing: 0.06em;
  text-transform: uppercase; color: #fff; background: var(--mms-orange);
  border: none; border-radius: var(--radius-sm); padding: 13px; cursor: pointer;
  transition: background 0.15s;
}
#sling-builder .cc-special-submit:hover { background: var(--mms-orange-bright); }
#sling-builder .cc-special-submit:disabled { opacity: 0.6; cursor: default; }
#sling-builder .cc-special-success { text-align: center; padding: 14px 4px 4px; }
#sling-builder .cc-special-success-icon {
  width: 56px; height: 56px; margin: 0 auto 14px;
  display: flex; align-items: center; justify-content: center;
  background: var(--status-success-tint); color: var(--status-success);
  border-radius: 50%; font-size: 30px;
}
#sling-builder .cc-special-success h2 { font-family: var(--font-display); font-size: 20px; color: var(--text-headline); margin-bottom: 8px; }
#sling-builder .cc-special-success p { font-size: 13px; color: var(--text-muted); line-height: 1.5; margin-bottom: 18px; }
@media (max-width: 900px) {
  #sling-builder .cc-special-btn-sub { display: none; }
  #sling-builder .cc-special-btn { padding: 7px 12px; }
}

/* ─── VIEWPORT (left) ───────────────────────────────────────────────────────── */
#sling-builder .cc-viewport {
  position: relative; flex: 1; min-width: 0; min-height: 0;
  background: var(--bg-viewport);
  /* The picture area hosts a fixed-size "stage" (.cc-stage) that holds the banner, drawing,
     weight card, badge and disclaimer laid out EXACTLY as designed. On a window too short to
     show the stage at full size, main.js (fitStage) scales the WHOLE stage down by one uniform
     factor — like zooming the page out — so every piece keeps its exact proportions and nothing
     overlaps or rearranges. On a tall window the stage simply matches the available height
     (scale 1), so it's byte-identical to before. overflow:hidden clips the stage's full-size
     layout box; the scaled visual always fits. */
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  overflow: hidden;
}

/* The scalable design canvas. Its height is the height at which the picture looks perfect in a
   tall window; its padding + the absolute children (badge/empty/WLL/disclaimer) reproduce the
   original viewport layout 1:1. JS sets --cc-stage-h and --cc-stage-scale every resize:
     - tall window  -> --cc-stage-h = available height, scale 1   (identical to the old layout)
     - short window -> --cc-stage-h = the design height, scale = available / design  (zoom to fit)
   transform-origin top-center keeps it pinned to the top and centered as it shrinks. */
#sling-builder .cc-stage {
  position: relative; flex: 0 0 auto;
  width: 100%; height: var(--cc-stage-h, 960px);
  padding: 32px 32px 150px;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  transform: scale(var(--cc-stage-scale, 1));
  transform-origin: top center;
}
/* "For illustration" disclaimer pill — matches the configurator viewport. */
#sling-builder .cc-disclaimer {
  position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%);
  max-width: calc(100% - 32px); padding: 6px 14px; border-radius: 999px;
  background: rgba(20,30,40,0.72); color: #fff;
  font-family: system-ui, sans-serif; font-size: 12px; line-height: 1.3;
  text-align: center; pointer-events: none; z-index: 6;
}

/* ─── "AMERICAN MADE" BANNER (top of the picture area) ────────────────────────────
   Approved mockup with a staged slam-in sequence on every load (.amb-seq.amb-play drives
   each beat). Verbatim colors/fonts as authored: navy 1B2D4B, teal 17B1C5, ice blue C2D6D8,
   orange DC510C / edge F05A10. Fonts (Anton / Oswald) load via the @import at the top of this
   file, with Impact / Arial Narrow fallbacks in the stacks below.
   The spec's nested .amb-badge-dock + .amb-ring are intentionally OMITTED: the round 100%
   American Made Webbing badge stays its own big, viewport-centered element (#sb-badge, in the
   rules further down) that spins in below this banner on load and rolls to the screen's
   bottom-left on the first style pick — it is NOT docked into the banner corner. */
.amb-seq{width:100%}
.amb-shake{width:100%;display:flex;justify-content:center;perspective:1000px}
/* Impact shake removed — a clean slam only, no shaking. (.amb-shake stays as the centering
   wrapper that holds the perspective for the banner's rotateX slam.) */
.amb-banner{position:relative;width:100%;max-width:980px;aspect-ratio:4.1/1;background:#1B2D4B;border-radius:8px;overflow:hidden;box-shadow:0 6px 18px rgba(27,45,75,.35)}
/* Slam in flat, no bounce: zoom from big/tilted straight to rest, easing has no overshoot (4th
   bezier value = 1) and the keyframes go directly 0% -> 100% with no settle-back frames. */
.amb-seq.amb-play .amb-banner{animation:amb-zslam .42s cubic-bezier(.45,0,.25,1) .1s both}
@keyframes amb-zslam{0%{opacity:0;transform:rotateX(-12deg) scale(1.6)}100%{opacity:1;transform:rotateX(0deg) scale(1)}}
.amb-brushed{position:absolute;inset:0;background:repeating-linear-gradient(90deg,rgba(255,255,255,.018) 0 2px,rgba(0,0,0,.03) 2px 4px)}
.amb-sheen{position:absolute;inset:0;background:radial-gradient(120% 80% at 50% -10%,rgba(23,177,197,.16),rgba(23,177,197,0) 55%)}
.amb-topline{position:absolute;top:0;left:0;right:0;height:4px;background:#17B1C5}
.amb-flag{position:absolute;top:0;left:0;width:34%;height:100%;opacity:.13}
.amb-stripes{position:absolute;inset:0;background:repeating-linear-gradient(180deg,#fff 0 9%,transparent 9% 18%)}
.amb-canton{position:absolute;top:0;left:0;width:46%;height:54%;background:#fff;background-image:radial-gradient(#1B2D4B 1.1px,transparent 1.2px);background-size:11px 11px;background-position:4px 4px}
.amb-diag{position:absolute;left:-6%;bottom:-26px;width:112%;height:46px;background:#DC510C;border-top:3px solid #F05A10;transform:rotate(-6deg)}
.amb-rivet{position:absolute;width:12px;height:12px;background:radial-gradient(circle at 35% 30%,#7d90b0,#16243c);clip-path:polygon(25% 4%,75% 4%,100% 50%,75% 96%,25% 96%,0% 50%);box-shadow:0 1px 2px rgba(0,0,0,.5)}
.amb-rv1{top:8px;left:8px}.amb-rv2{top:8px;right:8px}.amb-rv3{bottom:8px;left:8px}.amb-rv4{bottom:8px;right:8px}
.amb-content{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 18px}
.amb-kicker{display:flex;align-items:center;gap:15px;margin-bottom:10px}
.amb-seq.amb-play .amb-kicker{animation:amb-fadeDown .35s ease .78s both}
@keyframes amb-fadeDown{0%{opacity:0;transform:translateY(-8px)}100%{opacity:1;transform:translateY(0)}}
.amb-rule{width:42px;height:3px;background:#F05A10}
.amb-kt{font-family:'Oswald','Arial Narrow',sans-serif;font-weight:600;letter-spacing:6px;font-size:16px;color:#C2D6D8;text-transform:uppercase}
.amb-main{font-family:'Anton','Impact',sans-serif;color:#fff;font-size:clamp(20px,3.2vw,36px);letter-spacing:.6px;line-height:1;text-shadow:0 2px 4px rgba(0,0,0,.35);text-transform:uppercase}
.amb-seg{display:inline-block}
.amb-seq.amb-play .amb-s1{animation:amb-segUp .38s cubic-bezier(.2,.8,.3,1.2) .98s both}
.amb-seq.amb-play .amb-s2{animation:amb-segUp .38s cubic-bezier(.2,.8,.3,1.2) 1.14s both}
.amb-seq.amb-play .amb-s3{animation:amb-segUp .38s cubic-bezier(.2,.8,.3,1.2) 1.30s both}
@keyframes amb-segUp{0%{opacity:0;transform:translateY(16px)}70%{opacity:1;transform:translateY(-3px)}100%{opacity:1;transform:translateY(0)}}
.amb-dot{color:#F05A10;padding:0 9px}
.amb-under{width:120px;height:4px;background:#DC510C;margin-top:12px}
.amb-seq.amb-play .amb-under{animation:amb-grow .35s ease 1.48s both}
@keyframes amb-grow{0%{transform:scaleX(0)}100%{transform:scaleX(1)}}
@media (prefers-reduced-motion:reduce){.amb-seq.amb-play .amb-banner,.amb-seq.amb-play .amb-kicker,.amb-seq.amb-play .amb-seg,.amb-seq.amb-play .amb-under{animation:none}}
@media (max-width:520px){.amb-main{font-size:18px}.amb-kt{font-size:11px;letter-spacing:3px}.amb-rule{width:22px}}

/* Integration with the builder viewport (additive — does NOT change the design above):
   the banner is the top child of the stage and keeps its own natural size; the drawing sits
   below it. The WHOLE stage scales to fit short windows (fitStage in main.js), so the banner
   never shrinks on its own. Hidden on phones, where the picture collapses into a pinned
   drawing bar — the banner gets its own mobile placement in a later pass. */
#sling-builder .cc-stage > .amb-seq { flex: 0 0 auto; margin: 0 0 18px; }
@media (max-width: 860px) { #sling-builder .amb-seq { display: none; } }

/* The sling diagram — locked to the comics' native 16:9 so it never shifts. */
.sb__graphic {
  position: relative; width: 100%; max-width: 820px; max-height: 100%;
  aspect-ratio: 1376 / 768;
}
.sb__graphic img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; display: block;
}

/* Highlight overlay — a single contained orange box per focused field. */
.sb__overlay { position: absolute; inset: 0; pointer-events: none; }
.sb__overlay .zone {
  position: absolute;
  border: 2.5px solid var(--mms-orange);
  background: rgba(238,107,38,0.14);
  border-radius: 8px;
  box-shadow: 0 0 0 2px rgba(238,107,38,0.22), 0 0 16px 2px var(--mms-orange-glow);
  opacity: 0; transform: scale(0.98);
  transition: opacity 0.14s ease, transform 0.14s ease;
}
.sb__overlay .zone.on { opacity: 1; transform: scale(1); }

/* Crossfade under-layer — holds the outgoing diagram while #sb-img fades the new one in on
   top, so a style switch never flashes a blank frame (src/viewport-anim.js drives the opacity).
   Stacking is made explicit (not left to source order): under-layer < top diagram < overlay
   zones, all inside .sb__graphic; the whole diagram sits below the decorative badge (z:4),
   the WLL float (5) and the disclaimer (6). */
.sb__graphic { z-index: 1; }
.sb__graphic .sb__diagram-under { opacity: 0; z-index: 1; }
.sb__graphic #sb-img { z-index: 2; }
.sb__graphic .sb__overlay { z-index: 3; }

/* ── 100% American Made Webbing badge ─────────────────────────────────────────
   On load it spins in big and parks in the GAP between the American-Made banner (top of the
   viewport) and the "choose a style" hint (bottom) — clear of the banner; then on the first
   style pick it shrinks + spins down to the bottom-left corner of the screen and bounces there.
   Decorative. Two nested layers so the state MOVE (outer: position + scale + spin, transitioned)
   and the idle BOB (inner: infinite keyframe) don't fight over `transform`.
   Resting Y = midpoint of [banner bottom ≈ 265px] and [hint top ≈ 0.86H − 80px], which works
   out to calc(43% + 92px) — a single expression that stays centered as the viewport resizes. */
#sling-builder .sb__badge {
  position: absolute;
  left: 50%; top: calc(43% + 92px);
  width: clamp(200px, 40%, 380px);
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%) scale(1) rotate(0deg);
  transform-origin: center center;
  opacity: 0;                  /* hidden until spinIn() adds .is-shown */
  z-index: 4;                  /* over the banner; under the WLL float (5) and disclaimer (6) */
  pointer-events: none;        /* decorative — never intercepts a click */
  transition: left 0.9s cubic-bezier(0.5, 0, 0.2, 1),
              top 0.9s cubic-bezier(0.5, 0, 0.2, 1),
              transform 0.9s cubic-bezier(0.5, 0, 0.2, 1);
  will-change: left, top, transform;
}
#sling-builder .sb__badge.is-shown { opacity: 1; }

/* Corner home — tucked into the screen's bottom-left, clear of the weight card (Levi 2026-06-05:
   was left:8% top:86%, sat too close to everything). The 0deg → 360deg rotation makes the trip a
   single spin. (If it ever clips the left edge on a very tall+narrow window, raise left a touch.) */
#sling-builder .sb__badge[data-pos="corner"] {
  left: 6%; top: 90%;
  transform: translate(-50%, -50%) scale(0.4) rotate(360deg);
}

/* Entrance — the badge rushes IN BIG, filling the frame, then drops + shrinks and SLAMS into its
   centered resting spot (NOT a slide-in from the top edge). It starts oversized (scale 2.8 — the
   badge overflows the picture area, clipped by the viewport's overflow:hidden, so it "fills the
   frame") and a touch high, fades in, then falls to center while shrinking to resting size and
   stopping DEAD. Fires only AFTER the banner's staged sequence has finished (the underline, its
   last beat, lands ~1.83s; the 1.9s delay holds it invisible until then). Monotonic scale 2.8 -> 1
   and translateY -10vh -> 0, with an accelerating ease that ends at full speed — no overshoot, no
   bounce. It also stays DIMMED (filter: brightness) while it's big and falling, then ramps to FULL
   brightness right as it lands, so the frame-filling phase isn't too bright/distracting. The 100%
   frame equals the resting transform (brightness 1 = base, no filter), so there's no jump when
   viewport-anim removes .is-entering on animationend.
   (Phones have no banner — the mobile @media block re-points this to sb-badge-spin-in for an
   immediate spin-in with no delay.) */
#sling-builder .sb__badge.is-entering { animation: sb-badge-slam 0.55s cubic-bezier(0.5, 0, 0.85, 0) 1.9s both; }
@keyframes sb-badge-slam {
  0%   { opacity: 0; filter: brightness(0.5); transform: translate(-50%, -50%) translateY(-10vh) scale(2.8); }
  12%  { opacity: 1; }
  70%  { filter: brightness(0.55); }
  100% { opacity: 1; filter: brightness(1); transform: translate(-50%, -50%) translateY(0) scale(1); }
}
/* sb-badge-spin-in (defined below) — used by the phone layout (mobile re-points .is-entering to it). */
@keyframes sb-badge-spin-in {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.08) rotate(-340deg); }
  55%  { opacity: 1; }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0deg); }
}

#sling-builder .sb__badge-img {
  display: block; width: 100%; height: 100%; object-fit: contain;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.18));
}

/* Inner layer = idle motion only. Center: a slow float. Corner: a livelier little bounce. */
#sling-builder .sb__badge-bob { width: 100%; height: 100%; animation: sb-badge-float 3.4s ease-in-out infinite; }
#sling-builder .sb__badge[data-pos="corner"] .sb__badge-bob { animation: sb-badge-bounce 5s ease-in-out infinite; }
@keyframes sb-badge-float  { 0%, 100% { transform: translateY(-2.5%); } 50% { transform: translateY(2.5%); } }
@keyframes sb-badge-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3%); } }

/* Respect reduced-motion: keep the badge (and its final positions) but drop the spin/bob/travel. */
@media (prefers-reduced-motion: reduce) {
  #sling-builder .sb__badge,
  #sling-builder .sb__badge.is-entering,
  #sling-builder .sb__badge-bob { animation: none !important; transition: none !important; }
  #sling-builder .sb__badge.is-shown { opacity: 1; }
}

/* ─── PANEL (right) ─────────────────────────────────────────────────────────── */
#sling-builder .cc-panel {
  width: 600px; flex-shrink: 0;
  display: flex; flex-direction: column;
  background: var(--bg-panel);
  border-left: 1px solid var(--border-faint);
  overflow: hidden;
}
#sling-builder .cc-panel-content {
  flex: 1; overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: var(--border-faint) transparent;
}
#sling-builder .cc-panel-content::-webkit-scrollbar { width: 3px; }
#sling-builder .cc-panel-content::-webkit-scrollbar-track { background: transparent; }
#sling-builder .cc-panel-content::-webkit-scrollbar-thumb { background: var(--border-faint); }
#sling-builder .cc-step-body { padding: 14px 18px; animation: cc-slidein 0.18s ease; }
@keyframes cc-slidein { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

#sling-builder .cc-step-title {
  font-family: var(--font-display); font-size: 22px; font-weight: 900;
  letter-spacing: 0.03em; color: var(--text-headline);
  margin: 0 0 4px; line-height: 1.05; text-transform: uppercase;
}
#sling-builder .cc-step-sub {
  font-family: var(--font-body); font-size: 13px; font-weight: 500;
  color: var(--text-body); margin: 0 0 14px; line-height: 1.5;
}
/* Section headers — bold condensed display type in MMS orange so each one POPS
   off the dark panel and clearly signals "make a selection here" (Levi 2026-06-04,
   the plain white/secondary label got lost between the options). */
#sling-builder .cc-field-label {
  font-family: var(--font-display); font-size: 20px; font-weight: 800; letter-spacing: 0.04em;
  color: var(--mms-orange); text-transform: uppercase; line-height: 1.05; margin: 26px 0 11px;
}
#sling-builder .cc-step-sub + .cc-field-label { margin-top: 6px; }
.sb__field-note { font-family: var(--font-body); font-size: 12px; font-weight: 500; letter-spacing: 0; color: var(--text-muted); text-transform: none; margin-left: 8px; }

/* ─── Guided flow ───────────────────────────────────────────────────────────── */
/* Top-of-panel banner naming the next step; turns green when the build is complete. */
#sling-builder .sb__guide {
  display: flex; align-items: center; gap: 11px;
  margin: 6px 0 4px; padding: 12px 14px;
  background: var(--mms-orange-tint); border: 1px solid var(--mms-orange-border);
  border-radius: var(--radius-md);
  font-family: var(--font-body); font-size: 14px; font-weight: 600; line-height: 1.35;
  color: var(--text-headline);
}
#sling-builder .sb__guide-arrow {
  flex: 0 0 auto; color: var(--mms-orange-bright); font-size: 18px; font-weight: 800; line-height: 1;
  animation: sb-guide-bob 1.3s ease-in-out infinite;
}
#sling-builder .sb__guide-icon { flex: 0 0 auto; color: var(--status-success); font-size: 17px; font-weight: 800; line-height: 1; }
#sling-builder .sb__guide--done { background: var(--status-success-tint); border-color: rgba(92,186,96,0.55); }
@keyframes sb-guide-bob { 0%, 100% { transform: translateY(-1px); } 50% { transform: translateY(2px); } }

/* Each guided section fades in as it's revealed (display:none → shown restarts this). */
#sling-builder .sb__step { animation: sb-step-in 0.22s ease; }
@keyframes sb-step-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

/* Viewport placeholder shown before a sling style is chosen (mirrors the configurator's empty
   hint). Sits LOW / bottom-center so the badge owns the middle of the viewport (Levi 2026-06-04).
   Absolute — out of the flex flow — and fades out on the first style pick (viewport-anim adds
   .sb__empty--out, then hides it). */
#sling-builder .sb__empty {
  position: absolute; left: 50%; bottom: 14%; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 14px;
  font-family: var(--font-display); font-size: clamp(20px, 2.2vw, 30px); font-weight: 800;
  letter-spacing: 0.04em; text-transform: uppercase; color: #6B675F;
  background: rgba(0,0,0,0.03); border: 2px dashed rgba(0,0,0,0.16); border-radius: var(--radius-lg);
  padding: 22px 34px; text-align: center; user-select: none; max-width: calc(100% - 48px);
  opacity: 1; transition: opacity 0.24s ease;
}
#sling-builder .sb__empty--out { opacity: 0; }
#sling-builder .sb__empty-arrow { color: var(--mms-orange); font-size: 1.2em; animation: sb-empty-nudge 1.3s ease-in-out infinite; }
@keyframes sb-empty-nudge { 0%, 100% { transform: translateX(-3px); } 50% { transform: translateX(5px); } }

/* ─── PANEL FOOTER (price + add to cart) ────────────────────────────────────── */
#sling-builder .cc-panel-footer {
  margin-top: auto; flex-shrink: 0;
  border-top: 1px solid var(--border-faint);
  background: rgba(0,0,0,0.3);
  padding: 14px 16px;
  display: flex; flex-direction: column; gap: 10px;
}
#sling-builder .cc-price-display { display: flex; justify-content: space-between; align-items: baseline; }
#sling-builder .cc-price-lbl {
  font-family: var(--font-body); font-size: 11px; font-weight: 700; letter-spacing: 0.22em;
  color: var(--text-muted); text-transform: uppercase;
}
#sling-builder .cc-price-num {
  font-family: var(--font-display); font-size: 32px; font-weight: 900;
  color: var(--text-headline); letter-spacing: 0.01em; line-height: 1;
}
#sling-builder .cc-footer-row { display: grid; grid-template-columns: 1fr 2fr; gap: 7px; }
#sling-builder .cc-footer-row--single { grid-template-columns: 1fr; }
#sling-builder .cc-cart-btn {
  flex: 1; font-family: var(--font-body); font-size: 15px; font-weight: 800; letter-spacing: 0.20em;
  color: #fff; background: var(--mms-orange); border: none; border-radius: var(--radius-md);
  padding: 15px; cursor: pointer; transition: all 0.14s; text-transform: uppercase;
}
#sling-builder .cc-cart-btn:hover { background: var(--mms-orange-bright); }
#sling-builder .cc-cart-btn:disabled { background: #1A1C20; color: var(--text-disabled); cursor: not-allowed; }
.sb__msg { margin: 0; min-height: 1.1em; font-size: 12px; font-weight: 500; text-align: center; color: #F0918C; }

/* ─── Sling controls (sb__*) — matched to the configurator's option styling ─── */

/* Type picker — 2×2 grid, all buttons equal size. */
.sb__types { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sb__type-card {
  position: relative; overflow: hidden;
  display: flex; flex-direction: row; align-items: center; gap: 8px;
  height: 78px; padding: 10px 12px;
  background: var(--bg-card); border: 1px solid var(--border-faint); border-radius: var(--radius-md);
  cursor: pointer; text-align: left; color: inherit; font-family: inherit;
  transition: border-color 0.14s, background 0.14s;
}
.sb__type-card:hover { border-color: var(--mms-orange); background: var(--bg-card-hover); }
.sb__type-card.active { border-color: var(--mms-orange); background: var(--mms-orange-tint); }
.sb__type-card.active::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--mms-orange); }
.sb__type-card-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 3px; }
/* Icon fills as much of the tile as it can (width-driven for the wide sling
   shapes) without clipping or crowding the label. Bump max-width for a bigger
   icon; max-height keeps it inside the 78px tile. (Levi 2026-06-04: as big as
   possible, easy to read.) */
.sb__type-card-icon {
  flex: 0 0 auto; margin-left: auto;
  width: auto; height: auto;
  max-width: 70%; max-height: 74px;
  object-fit: contain; object-position: center right; background: transparent;
}
.sb__type-card-name {
  font-family: var(--font-display); font-size: 17px; font-weight: 800; letter-spacing: 0.03em;
  color: var(--text-headline); text-transform: uppercase; line-height: 1;
}
.sb__type-card-sub { font-size: 12px; font-weight: 400; color: var(--text-muted); }

/* Option button grids (Width, Ply) — mirror cc-size-btn. */
.sb__btn-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(44px, 1fr)); gap: 6px; }
.sb__opt-btn {
  background: var(--bg-card); border: 1px solid var(--border-faint); color: var(--text-body);
  font-family: var(--font-display); font-size: 15px; font-weight: 700; letter-spacing: 0.04em;
  padding: 12px 6px; border-radius: var(--radius-sm); cursor: pointer;
  transition: all 0.14s; text-align: center;
}
.sb__opt-btn:hover { border-color: var(--mms-orange); color: var(--text-headline); }
.sb__opt-btn.active { border-color: var(--mms-orange); background: var(--mms-orange-tint); color: var(--text-headline); box-shadow: inset 0 0 0 1px var(--mms-orange); }

/* Single-ply styles (Type 9): the lone button sits inline with a parenthetical note explaining
   it's a limit of the chosen style, not a broken picker. */
.sb__btn-grid--single { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; }
.sb__btn-grid--single .sb__opt-btn { flex: 0 0 auto; min-width: 76px; }
.sb__ply-note { font-family: var(--font-body); font-size: 12px; font-weight: 500; color: var(--text-muted); line-height: 1.35; }

/* Width dropdown — there are now up to 12 sizes (24 for Type 9), too many for a button
   grid, so width is a <select> styled to match the dark length inputs. */
.sb__select {
  width: 100%;
  background-color: var(--bg-input); color: var(--text-headline);
  border: 1px solid var(--border-default); border-radius: var(--radius-md);
  font-family: var(--font-body); font-size: 16px; font-weight: 600;
  padding: 13px 38px 13px 14px; cursor: pointer; outline: none;
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23A1A1AA' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
  transition: border-color 0.14s;
}
.sb__select:hover, .sb__select:focus { border-color: var(--mms-orange); }
.sb__select option { background: var(--bg-card); color: var(--text-headline); }
.sb__select option[disabled] { color: var(--text-disabled); }

/* Type-in length cards — mirror cc-length-card / cc-length-card-input. */
.sb__length-card {
  display: flex; flex-direction: column; gap: 10px;
  padding: 14px 18px; background: var(--bg-card);
  border: 1px solid var(--border-default); border-radius: var(--radius-md);
}
.sb__length-card.invalid { border-color: #E5484D; }
.sb__mini-label { font-family: var(--font-body); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; color: var(--text-secondary); text-transform: uppercase; }
/* Number + trailing foot mark, centered as a group, so the unit reads as e.g. 12' */
.sb__length-row { display: flex; align-items: center; justify-content: center; gap: 3px; }
.sb__length-unit {
  font-family: var(--font-body); font-size: 20px; font-weight: 700;
  color: var(--text-muted); line-height: 1; user-select: none;
}
.sb__length-input {
  width: 80px; background: var(--bg-input); color: var(--text-headline);
  border: 1px solid var(--border-default); border-radius: var(--radius-md); outline: none;
  font-family: var(--font-body); font-size: 22px; font-weight: 700; text-align: right;
  padding: 12px 8px; -moz-appearance: textfield; transition: border-color 0.14s;
}
.sb__length-input:focus { border-color: var(--mms-orange); }
.sb__length-input::-webkit-outer-spin-button,
.sb__length-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.sb__length-helper { font-family: var(--font-body); font-size: 12px; font-weight: 400; color: var(--text-muted); text-align: center; }

/* Over-the-max warning — red callout directly under the Total Length card that steers
   oversize orders to Special Request (paired with the flashing header button). */
#sling-builder .sb__overlimit {
  display: flex; align-items: flex-start; gap: 9px;
  margin: 10px 0 2px; padding: 11px 13px;
  background: rgba(229,72,77,0.12);
  border: 1px solid #E5484D; border-left-width: 3px;
  border-radius: var(--radius-md);
  font-family: var(--font-body); font-size: 13px; font-weight: 600; line-height: 1.4;
  color: #FF8782;
  animation: sb-step-in 0.2s ease;
}
#sling-builder .sb__overlimit b { color: #FFB3AF; font-weight: 800; }
#sling-builder .sb__overlimit-icon { flex: 0 0 auto; font-size: 15px; line-height: 1.35; }

.sb__link-toggle {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--bg-input); border: 1px solid var(--border-default); border-radius: var(--radius-sm);
  color: var(--text-body); font-family: var(--font-body); font-size: 12px; font-weight: 600;
  padding: 8px 12px; cursor: pointer; transition: all 0.14s;
}
.sb__link-toggle:hover { border-color: var(--mms-orange); color: var(--text-headline); }
.sb__eye-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

/* Working Load Limit tiles. */
.sb__wll { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.sb__wll-tile { background: var(--bg-card); border: 1px solid var(--border-faint); border-radius: var(--radius-md); padding: 10px 8px;
  display: flex; align-items: center; justify-content: space-between; gap: 8px; text-align: left; }
.sb__wll-tile-text { min-width: 0; }
/* Font sizes here are sized up a notch: the whole picture (and this card with it) scales down to
   fit short windows, so these need extra headroom to stay readable after scaling (Levi 2026-06-05). */
.sb__wll-tile-label { font-family: var(--font-body); font-size: 13px; font-weight: 700; letter-spacing: 0.12em; color: var(--text-secondary); text-transform: uppercase; }
.sb__wll-tile-val { font-family: var(--font-mono); font-size: 22px; font-weight: 600; color: var(--text-headline); margin-top: 4px;
  white-space: nowrap; } /* keep the 6-digit values (e.g. 122,300 lbs) on one line; phones override below */
.sb__wll-tile-unit { font-size: 12px; color: var(--text-muted); font-weight: 500; }
/* Hitch line-art (black on transparent) → forced to PURE WHITE (brightness(0) makes any
   source color black, invert(1) flips it to white) so it reads crisply on the dark tile.
   margin-right insets it from the edge (scooched left); fixed box keeps the very-portrait
   vertical icon and the wider basket icon at the same height. */
.sb__wll-tile-icon { flex: 0 0 auto; width: 40px; height: 54px; object-fit: contain;
  filter: brightness(0) invert(1); margin-right: 14px; }
/* Attached Eye Wide publishes a single rating (Basket Capacity Only) → one full-width tile. */
.sb__wll.sb__wll--single { grid-template-columns: 1fr; }
/* Width chosen but the sheet has no rating for it yet: a clear "being confirmed" note that
   spans the row — never a guessed number (the missing sizes go to the manager). */
.sb__wll-pending { grid-column: 1 / -1; display: flex; align-items: flex-start; gap: 9px;
  background: var(--bg-card); border: 1px solid var(--mms-orange-border); border-radius: var(--radius-md);
  padding: 11px 12px; font-family: var(--font-body); font-size: 13px; line-height: 1.4; color: var(--text-secondary); }
.sb__wll-pending-icon { flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%;
  background: var(--mms-orange); color: #0E0F11; font-weight: 800; font-size: 13px; line-height: 20px; text-align: center; }
.sb__wll-pending b { color: var(--text-headline); }

/* WLL floats at the bottom of the stage (under the diagram, above the disclaimer) so the rating
   updates live as the customer builds (Levi 2026-06-04). It's positioned against .cc-stage, so it
   scales with the whole picture. Dark card on the beige viewport for contrast. */
#sling-builder .sb__wll-float {
  position: absolute; left: 50%; bottom: 52px; transform: translateX(-50%);
  width: calc(100% - 56px); max-width: 720px; z-index: 5; /* widened so 6-digit basket + " lbs" fits on one line */
  background: rgba(14,15,17,0.94);
  border: 1px solid var(--mms-orange-border); border-radius: var(--radius-lg);
  padding: 12px 16px 14px; box-shadow: 0 14px 32px rgba(0,0,0,0.24);
}
/* Title centers over the middle tile (Choker = box center); the note is pinned to the
   right edge so it sits out over Basket (Levi 2026-06-04). The head and the .sb__wll
   grid share the same width, so "centered" lines up exactly with the middle column. */
#sling-builder .sb__wll-float-head {
  position: relative;
  font-family: var(--font-display); font-size: 20px; font-weight: 800; letter-spacing: 0.04em;
  color: var(--mms-orange); text-transform: uppercase; line-height: 1; text-align: center; margin-bottom: 10px;
}
#sling-builder .sb__wll-float-note {
  /* Flows inline right after the title. (It used to be pinned over the Basket tile, but the
     larger title now needs the whole line — pinning it made the two overlap.) Smaller + muted
     so it still reads as a sub-note. */
  display: inline; margin-left: 7px; white-space: nowrap;
  font-family: var(--font-body); font-size: 12.5px; font-weight: 500; letter-spacing: 0;
  color: var(--text-muted); text-transform: none;
}

/* ── Calibration mode (?calibrate=1) — drag/resize the highlight boxes ───────── */
.sb__overlay.sb-cal { pointer-events: auto; }
.sb__overlay.sb-cal .zone { cursor: move; opacity: 1; transform: none; background: rgba(238,107,38,0.10); }
.sb__overlay.sb-cal .zone .zlabel {
  position: absolute; top: -17px; left: -1px;
  font: 700 10px/1 var(--font-mono); color: #fff; background: var(--mms-orange);
  padding: 2px 5px; border-radius: 3px; white-space: nowrap; text-transform: uppercase;
}
.sb__overlay.sb-cal .zone .zhandle {
  position: absolute; right: -7px; bottom: -7px; width: 15px; height: 15px;
  background: #fff; border: 2px solid var(--mms-orange); border-radius: 3px; cursor: nwse-resize;
}
.sb-cal-hud {
  position: fixed; left: 16px; bottom: 16px; z-index: 99999;
  background: #0E0F11; color: #D4D4D8; border: 1px solid #EE6B26; border-radius: 8px;
  padding: 12px 14px; font: 12px/1.45 'Inter', system-ui, sans-serif; max-width: 290px;
  box-shadow: 0 12px 34px rgba(0,0,0,0.45);
}
.sb-cal-hud h4 { margin: 0 0 6px; font: 800 12px 'Inter', sans-serif; letter-spacing: 0.12em; text-transform: uppercase; color: #fff; }
.sb-cal-hud p { margin: 0 0 6px; color: #A1A1AA; }
.sb-cal-hud button {
  display: block; width: 100%; margin-top: 6px; padding: 8px; border-radius: 5px;
  border: 1px solid #EE6B26; background: #16181C; color: #fff; cursor: pointer; font-weight: 700;
}
.sb-cal-hud button:hover { background: #EE6B26; }
.sb-cal-hud .sb-cal-ok { color: #5CBA60; min-height: 1.1em; margin: 6px 0 0; }

/* Compact mobile progress strip — replaces the desktop header rail on phones (the rail is
   a 520px absolute bar that crushes to mush in a phone header). Hidden on desktop; renderProgress()
   fills it on every change regardless, so there's no extra wiring. */
#sling-builder .sb__mprogress { display: none; }

/* Phone-only "scroll down to start" cue (shown on phones before a style is picked — see the
   media query below). Bounces under the badge; tapping it jumps to the style tiles. */
#sling-builder .sb__scroll-cue { display: none; }
@keyframes sb-cue-bounce { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(7px); } }
@media (prefers-reduced-motion: reduce) { #sling-builder .sb__scroll-cue { animation: none !important; } }

/* ─── Responsive — phone / narrow touch layout ───────────────────────────────────
   EVERYTHING below is phone-only. A wide, mouse-driven screen matches none of these
   queries, so the desktop rules above are read unchanged. (Mobile optimization 2026-06-04.) */
@media (max-width: 860px) {

  /* — Scroll model: let the WHOLE page scroll instead of locking to 100vh with a nested-
       scrolling panel (which hid Add-to-Cart below the phone's address bar). — */
  #sling-builder.cc-shell { height: auto; min-height: 100vh; min-height: 100dvh; overflow: visible; }
  /* Phones don't use the scale-to-fit stage (they have their own pinned-preview layout). Make the
     stage wrapper transparent to layout so its children behave as direct viewport children, exactly
     like before the stage existed; fitStage() also no-ops on phones. */
  #sling-builder .cc-stage { display: contents; }
  #sling-builder .cc-shell-body { flex-direction: column; overflow: visible; min-height: 0; }
  #sling-builder .cc-panel { width: 100%; flex: 1 1 auto; min-height: 0; overflow: visible;
    border-left: 0; border-top: 1px solid var(--border-faint); }
  #sling-builder .cc-panel-content { flex: none; overflow: visible; }

  /* — Header: slim it, drop the crushed status rail, thumb-size the buttons. — */
  #sling-builder { --header-height: 64px; --mpreview-h: 220px; }
  #sling-builder .cc-app-header {
    padding-left: max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
  }
  #sling-builder .cc-brand-logo { height: 40px; }
  #sling-builder .cc-progress { display: none; }
  #sling-builder .cc-header-actions { gap: 8px; }
  #sling-builder .cc-reset-btn { min-height: 44px; padding: 10px 14px; font-size: 12px; }
  #sling-builder .cc-special-btn { min-height: 44px; padding: 8px 14px; }

  /* — Compact progress strip: sticky under the header, edge-to-edge. — */
  #sling-builder .sb__mprogress {
    display: block; position: sticky; top: 0; z-index: 12;
    margin: -14px -18px 14px; padding: 10px 18px 11px;
    background: rgba(14,15,17,0.97); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    border-bottom: 1px solid var(--border-faint);
  }
  #sling-builder .sb__mprogress-bar { height: 4px; border-radius: 2px; background: rgba(255,255,255,0.10); overflow: hidden; }
  #sling-builder .sb__mprogress-fill { height: 100%; background: var(--mms-orange); border-radius: 2px; box-shadow: 0 0 6px var(--mms-orange-glow); transition: width 0.4s ease; }
  #sling-builder .sb__mprogress-text { margin-top: 7px; font-family: var(--font-body); font-size: 11.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-secondary); }
  #sling-builder .sb__mprogress-now { color: var(--mms-orange); }

  /* — Picture area: a clean vertical stack — drawing, then weight, then disclaimer —
       so nothing overlaps the way the absolute weight float did on a short screen. — */
  #sling-builder .cc-viewport {
    flex: none; height: auto; min-height: 44vh;
    flex-direction: column; justify-content: flex-start; gap: 12px;
    padding: 16px 16px 18px; overflow: hidden;
  }
  #sling-builder .sb__graphic { flex: 0 0 auto; max-height: 30vh; }
  #sling-builder .sb__empty { display: none; } /* the guide banner already says "choose a style" */
  /* Weight (WLL) is re-homed (main.js) to its own card at the bottom of the form on phones —
     so it's no longer an absolute float fighting the drawing. */
  #sling-builder .sb__wll-float {
    position: static; left: auto; bottom: auto; transform: none;
    width: auto; max-width: none; margin: 18px 0 4px; padding: 12px 14px 14px;
    background: var(--bg-card); box-shadow: none;
  }
  #sling-builder .sb__wll-float-head { font-size: 14px; margin-bottom: 9px; }
  #sling-builder .sb__wll-float-note { position: static; transform: none; display: block; margin-top: 3px; white-space: normal; }
  /* On the narrow phone tiles let the value wrap (the desktop nowrap would overflow here). */
  #sling-builder .sb__wll-tile-val { white-space: normal; }
  /* Disclaimer flows under everything instead of floating over the drawing. */
  #sling-builder .cc-disclaimer {
    position: static; left: auto; bottom: auto; transform: none;
    margin-top: auto; max-width: 100%; background: transparent; color: #6B675F; font-size: 11px;
  }
  /* Badge: spins in big + centered on load (clean now that the empty box is hidden), then on the
     first pick it flies to the corner AND fades away — leaving the drawing + weight uncluttered.
     No banner on phones, so skip the desktop "slam in after the banner" delay — keep the original
     immediate spin-in entrance here. */
  #sling-builder .sb__badge {
    width: clamp(120px, 42%, 210px); top: 40%;
    transition: left 0.9s cubic-bezier(0.5,0,0.2,1), top 0.9s cubic-bezier(0.5,0,0.2,1),
                transform 0.9s cubic-bezier(0.5,0,0.2,1), opacity 0.7s ease 0.15s;
  }
  #sling-builder .sb__badge.is-entering { animation: sb-badge-spin-in 0.9s cubic-bezier(0.2, 0.8, 0.3, 1.12) both; }
  #sling-builder .sb__badge[data-pos="corner"] { left: 16%; top: 80%; opacity: 0; }

  /* "Scroll down to start" cue — bounces at the bottom of the hero until a style is picked,
     so it's obvious there's a form below the fold. Tapping it jumps to the style tiles. */
  #sling-builder.sb--no-style .sb__scroll-cue {
    display: inline-flex; align-items: center; gap: 8px;
    position: absolute; left: 50%; bottom: 16px; z-index: 7;
    transform: translateX(-50%);
    padding: 11px 20px; border: none; border-radius: 999px; cursor: pointer;
    background: var(--mms-orange); color: #fff;
    font-family: var(--font-display); font-weight: 800; font-size: 15px;
    letter-spacing: 0.06em; text-transform: uppercase; line-height: 1;
    box-shadow: 0 10px 24px var(--mms-orange-halo), 0 2px 6px rgba(0,0,0,0.18);
    animation: sb-cue-bounce 1.5s ease-in-out infinite;
  }
  #sling-builder.sb--no-style .sb__scroll-cue:active { filter: brightness(1.1); }
  #sling-builder.sb--no-style .sb__scroll-cue-arrow { font-size: 17px; line-height: 1; }
  /* No diagram yet on the empty state → let the cue own the bottom; hide the illustration note. */
  #sling-builder.sb--no-style .cc-disclaimer { display: none; }

  /* — LIVE PREVIEW: once a style is picked, the picture collapses into a slim bar PINNED to the
       top — the DRAWING ONLY, blown up to fill the whole bar — so it stays visible (and tap-to-
       highlight keeps working) while they scroll the options. The Working Load Limit moves out to
       its own box down in the form (re-homed in main.js). Badge already flew away on first pick. — */
  #sling-builder:not(.sb--no-style) .cc-viewport {
    position: sticky; top: 0; z-index: 11;
    flex: none; height: var(--mpreview-h); min-height: 0;
    justify-content: center; padding: 8px 12px;
    border-bottom: 1px solid rgba(0,0,0,0.14); box-shadow: 0 7px 16px rgba(0,0,0,0.18);
  }
  #sling-builder:not(.sb--no-style) .sb__graphic {
    flex: 0 1 auto; width: 100%; max-width: 100%; height: auto; max-height: 100%; margin: 0 auto;
  }
  #sling-builder:not(.sb--no-style) .cc-disclaimer { display: none; }
  /* Progress strip stacks right under the pinned preview; revealed steps clear both bars. */
  #sling-builder:not(.sb--no-style) .sb__mprogress { top: var(--mpreview-h); }
  #sling-builder:not(.sb--no-style) .sb__step { scroll-margin-top: calc(var(--mpreview-h) + 62px); }

  /* — Sticky bottom action bar: Total + Add to Cart always reachable, clears the home bar. — */
  #sling-builder .cc-panel-footer {
    position: sticky; bottom: 0; z-index: 10;
    background: var(--bg-panel); box-shadow: 0 -8px 24px rgba(0,0,0,0.42);
    padding: 13px 16px;
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
    padding-bottom: calc(13px + env(safe-area-inset-bottom));
  }
  #sling-builder .cc-cart-btn { min-height: 52px; padding: 16px; font-size: 16px; }

  /* — Thumb-size the in-form controls (≥44px targets; inputs stay ≥16px so iOS never zooms). — */
  #sling-builder .cc-step-body { padding: 14px 18px 28px; }
  #sling-builder .sb__type-card { height: 84px; }
  #sling-builder .sb__opt-btn { min-height: 48px; padding: 13px 8px; font-size: 16px; }
  #sling-builder .sb__select { min-height: 50px; padding: 14px 40px 14px 14px; }
  #sling-builder .sb__link-toggle { min-height: 44px; padding: 11px 14px; font-size: 13px; }
  #sling-builder .sb__length-input { min-height: 48px; }
  #sling-builder .cc-special-close { width: 44px; height: 44px; font-size: 26px; }
  #sling-builder .cc-special-input, #sling-builder .cc-special-textarea { font-size: 16px; }
}

/* Touch devices: a clear pressed-state so every tap visibly responds (the desktop hover
   highlight does nothing under a finger). Scoped to no-hover pointers → desktop is untouched. */
@media (hover: none) {
  #sling-builder .sb__type-card:active,
  #sling-builder .sb__opt-btn:active,
  #sling-builder .sb__select:active,
  #sling-builder .sb__link-toggle:active,
  #sling-builder .cc-reset-btn:active,
  #sling-builder .cc-special-btn:active,
  #sling-builder .cc-cart-btn:active {
    transform: scale(0.97);
    filter: brightness(1.12);
    transition: transform 0.06s ease, filter 0.06s ease;
  }
}