/* ============================================================
   CrispSign — Halo-Lit Channel Letter Preview
   Brand palette only. No improvising.
   ============================================================ */

:root {
  /* Brand */
  --cream:        #FAF7F2;
  --cream-2:      #F4F0E8;   /* alternate brick */
  --navy:         #0A1226;
  --navy-deep:    #050912;
  --orange:       #E8521B;
  --ink-muted:    #5C6273;
  --border:       #E5DFD3;

  /* Night-mode derivations (same family as navy, never a new hue) */
  --night-wall:   #1A1F2E;
  --night-surf:   #0F141F;

  /* Type */
  --font-body:    'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-display: 'Space Grotesk', var(--font-body);
  --font-sign:    'Bebas Neue', sans-serif;

  /* Motion */
  --ease:         cubic-bezier(0.4, 0, 0.2, 1);
  --dur:          600ms;
  --dur-fast:     220ms;

  /* Rhythm */
  --gap-1: 8px;
  --gap-2: 16px;
  --gap-3: 24px;
  --gap-4: 32px;
  --gap-5: 48px;
  --gap-6: 64px;
}

* { box-sizing: border-box; }

/* The `hidden` attribute must always win — guard against display: flex etc. */
[hidden] { display: none !important; }

html, body { margin: 0; padding: 0; }

body {
  background: var(--cream);
  color: var(--navy);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ── Page shell ───────────────────────────────────────────── */

.page {
  max-width: 1100px;
  margin: 0 auto;
  padding: var(--gap-6) var(--gap-4) var(--gap-6);
  display: flex;
  flex-direction: column;
  gap: var(--gap-5);
}

/* ── Brand bar ────────────────────────────────────────────── */

.brand-bar {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--gap-3);
  padding-bottom: var(--gap-3);
  border-bottom: 1px solid var(--border);
}

.brand-mark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
}

.brand-logo { width: 30px; height: auto; display: block; }

.brand-wordmark {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: -0.02em;
  color: var(--navy);
}

.brand-eyebrow {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--ink-muted);
}
.brand-eyebrow strong {
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--navy);
  margin-right: 6px;
}
.brand-eyebrow .muted {
  color: var(--ink-muted);
  font-weight: 500;
}

/* ── Checkout CTA ────────────────────────────── */
.checkout-bar {
  margin-top: 32px;
  padding: 24px;
  background: #fff;
  border: 1px solid rgba(10, 18, 38, 0.12);
  border-radius: 14px;
  display: grid;
  gap: 14px;
  align-items: center;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "summary cta"
    "fine    fine";
}
.checkout-summary {
  grid-area: summary;
  display: flex;
  flex-direction: column;
}
.checkout-label {
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.checkout-price {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 28px;
  letter-spacing: -0.02em;
  color: var(--navy);
}
.cta-primary {
  grid-area: cta;
  appearance: none;
  border: 0;
  background: var(--orange);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.01em;
  padding: 14px 26px;
  border-radius: 10px;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.cta-primary:hover {
  background: #C8401B;
  box-shadow: 0 8px 22px rgba(232, 82, 27, 0.30);
  transform: translateY(-1px);
}
.cta-primary:active { transform: translateY(0); }
.cta-primary[disabled] {
  background: var(--ink-muted);
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}
.checkout-fineprint {
  grid-area: fine;
  margin: 0;
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--ink-muted);
}
@media (max-width: 600px) {
  .checkout-bar {
    grid-template-columns: 1fr;
    grid-template-areas: "summary" "cta" "fine";
  }
}

/* ── Footer brand chrome ───────────────────────────── */
.brand-footer {
  padding-top: 28px;
  border-top: 1px solid rgba(10, 18, 38, 0.08);
  margin-top: 36px;
}
.brand-slogan {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 30px;
  letter-spacing: -0.02em;
  color: var(--navy);
  margin: 18px 0 6px;
  line-height: 1.15;
}
.brand-slogan em {
  font-style: italic;
  color: var(--orange);
  font-weight: 700;
}
.brand-fineprint {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--ink-muted);
  margin: 4px 0 0;
}

/* ── Canvas ───────────────────────────────────────────────── */

.canvas-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 1100 / 600;
  max-height: 600px;
  border-radius: 14px;
  overflow: hidden;
  background: var(--cream);
  border: 1px solid var(--border);
  box-shadow:
    0 1px 0 rgba(10, 18, 38, 0.04),
    0 30px 60px -30px rgba(10, 18, 38, 0.18);
  transition:
    border-color var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease);
}

.canvas-wrap[data-mode="night"] {
  border-color: var(--night-surf);
  box-shadow:
    0 1px 0 rgba(10, 18, 38, 0.08),
    0 30px 60px -30px rgba(10, 18, 38, 0.45);
}

.wall-canvas { display: block; width: 100%; height: 100%; }

.wall-bg { transition: fill var(--dur) var(--ease); }
.canvas-wrap[data-mode="night"] .wall-bg { fill: var(--night-wall); }

.wall-bricks { transition: opacity var(--dur) var(--ease); }

.vignette-rect {
  opacity: 0.25;
  transition: opacity var(--dur) var(--ease);
  pointer-events: none;
}
.canvas-wrap[data-mode="night"] .vignette-rect { opacity: 0.85; }

/* ── Live measurement ruler ──────────────────────────────────────────
   Vertical scale showing actual letter height. Updates from JS
   based on the rendered face text bbox (so it matches what the
   customer actually sees). */
.measure-ruler { pointer-events: none; transition: opacity var(--dur) var(--ease); }
.measure-line,
.measure-cap-top,
.measure-cap-bot {
  stroke: var(--orange, #E8521B);
  stroke-width: 2.5;
  stroke-linecap: round;
}
.measure-ticks line {
  stroke: var(--orange, #E8521B);
  stroke-width: 1.6;
  stroke-linecap: round;
  opacity: 0.7;
}
.measure-label-bg {
  fill: var(--cream, #FAF7F2);
  stroke: var(--orange, #E8521B);
  stroke-width: 1.5;
}
.measure-label {
  fill: var(--navy, #0A1226);
  font: 700 16px/1 'Inter', system-ui, sans-serif;
  letter-spacing: 0.02em;
}
/* Night mode: keep ruler readable on dark wall */
.canvas-wrap[data-mode="night"] .measure-line,
.canvas-wrap[data-mode="night"] .measure-cap-top,
.canvas-wrap[data-mode="night"] .measure-cap-bot { stroke: #FF8A4D; }
.canvas-wrap[data-mode="night"] .measure-ticks line { stroke: #FF8A4D; }
.canvas-wrap[data-mode="night"] .measure-label-bg {
  fill: #0F141F;
  stroke: #FF8A4D;
}
.canvas-wrap[data-mode="night"] .measure-label { fill: #FAF7F2; }

/* ── Sign letter layers ──────────────────────────────────── */
/*
   Layer visibility is driven by [data-style] on .canvas-wrap.
   Each letter type opts in only the layers it needs.

   Default rule: hide every optional layer; per-style blocks below
   re-enable them. .face, .side-return, .cast-shadow are common to all.
*/

.sign-text { user-select: none; transition: fill var(--dur) var(--ease), opacity var(--dur) var(--ease), stroke var(--dur) var(--ease); }

/* Optional layers default OFF — turned on per style */
.halo-outer,
.face-glow,
.trim-cap,
.depth-slice {
  display: none;
}

/* Cast shadow visible in both modes; pulled back at night where halo dominates */
.cast-shadow { opacity: 1; }
.canvas-wrap[data-mode="night"] .cast-shadow { opacity: 0.4; }

/* ── Style: REVERSE HALO-LIT ─────────────────────
   Solid face + return + halo behind. At night the face goes dark and
   only the warm-white halo remains visible. */
/* Day: halo not visible (reflected light needs a dark wall to see). Night: halo lights up. */
.canvas-wrap[data-style="halolit"] .halo-outer  { display: block; opacity: 0; }
.canvas-wrap[data-style="halolit"] .depth-slice { display: block; }

.canvas-wrap[data-mode="night"][data-style="halolit"] .halo-outer  { opacity: 1; }
.canvas-wrap[data-mode="night"][data-style="halolit"] .face        { fill: var(--night-wall) !important; }
.canvas-wrap[data-mode="night"][data-style="halolit"] .side-return { fill: var(--night-surf) !important; }
.canvas-wrap[data-mode="night"][data-style="halolit"] .depth-slice { fill: var(--night-surf) !important; }

/* ── Style: STANDARD FRONT-LIT ────────────────────
   Translucent acrylic face glows from inside. No halo behind. Trim cap
   draws a thin edge stroke. Side return is the painted aluminum side. */
.canvas-wrap[data-style="frontlit"] .face-glow   { display: block; }
.canvas-wrap[data-style="frontlit"] .trim-cap    { display: block; }
.canvas-wrap[data-style="frontlit"] .depth-slice { display: block; }

/* Day: glow subtle. Night: face stays bright (acrylic lit by LEDs inside). */
.canvas-wrap[data-mode="day"][data-style="frontlit"]   .face-glow { opacity: 0.45; }
.canvas-wrap[data-mode="night"][data-style="frontlit"] .face-glow { opacity: 1; }
/* At night the side return goes dark — only the front face is illuminated. */
.canvas-wrap[data-mode="night"][data-style="frontlit"] .side-return { fill: var(--night-surf) !important; }
.canvas-wrap[data-mode="night"][data-style="frontlit"] .depth-slice { fill: var(--night-surf) !important; }

/* ── Style: DUAL-LIT (Front + Halo) ───────────────
   Both the front face glows AND a halo blooms behind. Most expensive look. */
.canvas-wrap[data-style="duallit"] .halo-outer  { display: block; opacity: 0; }
.canvas-wrap[data-style="duallit"] .face-glow   { display: block; }
.canvas-wrap[data-style="duallit"] .trim-cap    { display: block; }
.canvas-wrap[data-style="duallit"] .depth-slice { display: block; }

.canvas-wrap[data-mode="day"][data-style="duallit"]   .face-glow  { opacity: 0.40; }
.canvas-wrap[data-mode="night"][data-style="duallit"] .face-glow  { opacity: 1; }
.canvas-wrap[data-mode="night"][data-style="duallit"] .halo-outer { opacity: 1; }
.canvas-wrap[data-mode="night"][data-style="duallit"] .side-return { fill: var(--night-surf) !important; }
.canvas-wrap[data-mode="night"][data-style="duallit"] .depth-slice { fill: var(--night-surf) !important; }

/* ── Style: SANDBLASTED ───────────────────────────
   Carved & sandblasted wood panel. A wood-grain panel sits behind the
   letters; the letter face appears recessed (carved into the wood) via
   an inner-shadow filter. There is no glow — at night a small spot light
   illuminates the panel from above. */
#sandPanelGroup        { display: none; }
#cabinetGroup          { display: none; }
.canvas-wrap[data-style="sandblasted"] #sandPanelGroup { display: block; }
.canvas-wrap[data-style="sandblasted"] .wall-bricks   { opacity: 0; }
.canvas-wrap[data-style="sandblasted"] .wall-bg       { fill: #2A1810; transition: fill var(--dur) var(--ease); }
.canvas-wrap[data-style="sandblasted"] .halo-outer    { display: none; }
.canvas-wrap[data-style="sandblasted"] .face-glow     { display: none; }
.canvas-wrap[data-style="sandblasted"] .depth-slice   { display: none; }
.canvas-wrap[data-style="sandblasted"] .side-return   { display: none; }
.canvas-wrap[data-style="sandblasted"] .cast-shadow   { display: none; }
.canvas-wrap[data-style="sandblasted"] .trim-cap      { display: none; }
.canvas-wrap[data-mode="day"][data-style="sandblasted"]   #sandPanelSpot { opacity: 0; }
.canvas-wrap[data-mode="night"][data-style="sandblasted"] #sandPanelSpot { opacity: 0.55; }
.canvas-wrap[data-mode="night"][data-style="sandblasted"] #sandPanel    { filter: brightness(0.55); }
.canvas-wrap[data-mode="night"][data-style="sandblasted"] .face         { opacity: 0.85; }

/* ── Style: TRIMLESS ──────────────────────────────
   Trimless front-lit channel letters. No visible trim cap; the face
   appears as a clean lit panel that bleeds light around its edge. */
.canvas-wrap[data-style="trimless"] .halo-outer  { display: none; }
.canvas-wrap[data-style="trimless"] .face-glow   { display: block; opacity: 0.55; }
.canvas-wrap[data-style="trimless"] .trim-cap    { display: none; }
.canvas-wrap[data-style="trimless"] .depth-slice { display: block; opacity: 0.6; }
.canvas-wrap[data-style="trimless"] .side-return { display: block; opacity: 0.7; }
.canvas-wrap[data-style="trimless"] .cast-shadow { opacity: 0.4; }
.canvas-wrap[data-mode="day"][data-style="trimless"]   .face-glow { opacity: 0.30; }
.canvas-wrap[data-mode="night"][data-style="trimless"] .face-glow { opacity: 1; }
.canvas-wrap[data-mode="night"][data-style="trimless"] .face      { filter: url(#trimlessGlow); }

/* ── Style: CABINET ───────────────────────────────
   Lightbox cabinet sign. A rectangular box (sized to the text bbox plus
   padding) sits behind the letters; at night it glows from within and the
   letters read as translucent cutouts. */
.canvas-wrap[data-style="cabinet"] #cabinetGroup { display: block; }
.canvas-wrap[data-style="cabinet"] .halo-outer  { display: none; }
.canvas-wrap[data-style="cabinet"] .face-glow   { display: none; }
.canvas-wrap[data-style="cabinet"] .depth-slice { display: none; }
.canvas-wrap[data-style="cabinet"] .side-return { display: none; }
.canvas-wrap[data-style="cabinet"] .trim-cap    { display: none; }
.canvas-wrap[data-style="cabinet"] .cast-shadow { opacity: 0.6; }
.canvas-wrap[data-mode="day"][data-style="cabinet"]   #cabinetGlow { opacity: 0; }
.canvas-wrap[data-mode="night"][data-style="cabinet"] #cabinetGlow { opacity: 1; filter: url(#cabinetGlowFilter); }
.canvas-wrap[data-mode="night"][data-style="cabinet"] #cabinetBox  { filter: brightness(1.4); }

/* ── Style picker (top-level) ───────────────────── */
.style-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
@media (min-width: 900px) {
  .style-cards { grid-template-columns: repeat(6, 1fr); }
}
.style-card {
  appearance: none;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  padding: 12px 12px 14px;
  background: #FFFFFF;
  border: 1.5px solid var(--border);
  border-radius: 12px;
  cursor: pointer;
  text-align: left;
  font-family: 'Inter', system-ui, sans-serif;
  color: var(--navy);
  transition:
    border-color 140ms ease,
    background   140ms ease,
    transform    140ms ease,
    box-shadow   140ms ease;
}
.style-card:hover {
  border-color: #C4BBA6;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(10, 18, 38, 0.06);
}
.style-card.is-active {
  border-color: var(--orange);
  background: #FFF7F2;
  box-shadow: 0 0 0 3px rgba(232, 82, 27, 0.10);
}
.style-card:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(10, 18, 38, 0.15);
}
.style-card-thumb {
  display: block;
  width: 100%;
  border-radius: 6px;
  overflow: hidden;
  line-height: 0;
}
.style-card-thumb svg { width: 100%; height: 40px; display: block; }
.style-card-title {
  font-weight: 700;
  font-size: 13px;
  letter-spacing: -0.005em;
  color: var(--navy);
}
.style-card-desc {
  font-weight: 500;
  font-size: 11.5px;
  line-height: 1.35;
  color: var(--ink-muted);
}
@media (max-width: 900px) {
  .style-cards { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 560px) {
  .style-cards { grid-template-columns: repeat(2, 1fr); }
}

/* ── Sub-pickers (Return color + Trim cap inside colorBlock) ──── */
.sub-picker {
  margin-top: var(--gap-3);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.swatch-grid-sm {
  grid-template-columns: repeat(auto-fill, 22px);
  gap: 6px;
}
.swatch-grid-sm .swatch { width: 22px; height: 22px; }

/* ── Controls ─────────────────────────────────────────────── */

.controls {
  display: flex;
  flex-direction: column;
  gap: var(--gap-4);
}

.control-block {
  display: flex;
  flex-direction: column;
  gap: 10px;
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
}

.control-header {
  display: flex;
  align-items: baseline;
  gap: var(--gap-2);
  flex-wrap: wrap;
}

.control-label {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  padding: 0;
  margin: 0;
}

.control-hint {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 400;
  color: var(--ink-muted);
  letter-spacing: 0;
  text-transform: none;
}

/* Text input */

.text-input {
  appearance: none;
  width: 100%;
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 16px;
  color: var(--navy);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  transition: border-color 180ms var(--ease), box-shadow 180ms var(--ease);
}

.text-input::placeholder {
  color: var(--ink-muted);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
}

.text-input:focus {
  outline: none;
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(10, 18, 38, 0.08);
}

/* ── Body-color swatch grid (40 colors) ──────────────────── */

.swatch-grid {
  display: grid;
  grid-template-columns: repeat(20, 24px);
  gap: 8px;
  padding: 4px 0;
}

.swatch {
  --sw: #000;
  appearance: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--sw);
  border: 1px solid var(--border);
  padding: 0;
  cursor: pointer;
  position: relative;
  transition:
    transform 160ms var(--ease),
    border-color 160ms var(--ease),
    box-shadow 160ms var(--ease);
}

.swatch:hover { transform: translateY(-1px); }

.swatch:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(10, 18, 38, 0.12);
}

/* Selected ring: 1px navy ring with 2px cream gap */
.swatch.is-active {
  border-color: var(--navy);
  box-shadow:
    0 0 0 2px var(--cream),
    0 0 0 3px var(--navy);
  z-index: 1;
}

/* "Custom Color" swatch — checkerboard so users see it's a wildcard */
.swatch.is-custom {
  background:
    linear-gradient(135deg,
      var(--orange) 0 25%,
      var(--cream) 25% 50%,
      var(--orange) 50% 75%,
      var(--cream) 75% 100%);
  background-size: 12px 12px;
}

/* Selection meta line under the grid */

.selection-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-3);
  flex-wrap: wrap;
  min-height: 22px;
}

.selection-name {
  margin: 0;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--navy);
}

/* ── Font picker grid ───────────────────────────────────── */
.font-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(108px, 1fr));
  gap: 10px;
}

.font-chip {
  appearance: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 14px 10px 10px;
  height: 76px;
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  transition:
    border-color 180ms var(--ease),
    background    180ms var(--ease),
    transform     180ms var(--ease),
    box-shadow    180ms var(--ease);
}

.font-chip:hover {
  transform: translateY(-1px);
  border-color: rgba(10, 18, 38, 0.35);
}

.font-chip:focus-visible {
  outline: none;
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(10, 18, 38, 0.08);
}

.font-chip.is-active {
  background: #fff;
  border-color: var(--navy);
  box-shadow: 0 1px 0 rgba(10, 18, 38, 0.06), 0 0 0 1px var(--navy);
}

.font-chip-sample {
  font-size: 28px;
  line-height: 1;
  color: var(--navy);
  letter-spacing: 0.01em;
}

.font-chip-name {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-muted);
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  text-align: center;
}

.font-chip.is-active .font-chip-name { color: var(--navy); }

/* "Upload My Font" — dashed border to read as an action, not a font */
.font-chip.is-custom {
  border-style: dashed;
  border-color: rgba(10, 18, 38, 0.35);
  background: transparent;
}

.font-chip.is-custom .font-chip-icon {
  font-family: var(--font-body);
  font-size: 24px;
  font-weight: 400;
  line-height: 1;
  color: var(--ink-muted);
  margin-top: 2px;
}

.font-chip.is-custom.is-active {
  border-style: solid;
  border-color: var(--orange);
  box-shadow: 0 0 0 1px var(--orange);
  background: #fff;
}

.font-chip.is-custom.is-active .font-chip-icon { color: var(--orange); }

.custom-font-note-body {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--ink-muted);
  line-height: 1.4;
  max-width: 380px;
}

/* Custom hex input */

.custom-hex {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.custom-hex-label {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.custom-hex-input {
  appearance: none;
  width: 100px;
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 10px;
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--navy);
  text-transform: uppercase;
  transition: border-color 180ms var(--ease), box-shadow 180ms var(--ease);
}

.custom-hex-input:focus {
  outline: none;
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(10, 18, 38, 0.08);
}

/* ── Row of two control blocks (return depth + lighting) ── */

.controls-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: var(--gap-4);
  align-items: end;
}

/* ── Segmented control (return depth) ────────────────────── */

.segment {
  display: inline-flex;
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px;
  position: relative;
  height: 36px;
}

.segment-btn {
  appearance: none;
  background: transparent;
  border: 0;
  margin: 0;
  padding: 0 18px;
  height: 100%;
  border-radius: 999px;
  cursor: pointer;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--ink-muted);
  transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
  white-space: nowrap;
}

.segment-btn:hover { color: var(--navy); }

.segment-btn.is-active {
  background: var(--navy);
  color: var(--cream);
}

.segment-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(10, 18, 38, 0.12);
}

/* ── Letter height slider ─────────────────────────── */
.slider-row {
  display: flex;
  align-items: center;
  gap: 14px;
}
.slider-val {
  min-width: 56px;
  text-align: right;
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 800;
  font-size: 18px;
  font-variant-numeric: tabular-nums;
  color: var(--navy, #0A1226);
  letter-spacing: -0.01em;
}
.form-slider {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(to right,
    var(--orange, #E8521B) 0%,
    var(--orange, #E8521B) var(--slider-fill, 40%),
    #E5DFD3 var(--slider-fill, 40%),
    #E5DFD3 100%);
  outline: none;
  cursor: pointer;
}
.form-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 2px solid var(--navy, #0A1226);
  box-shadow: 0 2px 6px rgba(10, 18, 38, 0.18);
  cursor: grab;
  transition: transform 120ms ease;
}
.form-slider::-webkit-slider-thumb:active { cursor: grabbing; transform: scale(1.08); }
.form-slider::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 2px solid var(--navy, #0A1226);
  box-shadow: 0 2px 6px rgba(10, 18, 38, 0.18);
  cursor: grab;
}
.form-slider:focus-visible { box-shadow: 0 0 0 4px rgba(10, 18, 38, 0.10); }

.height-max-note {
  margin: 8px 0 0;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11.5px;
  color: var(--ink-muted, #5C6273);
  line-height: 1.4;
}
.height-max-note a {
  color: var(--orange, #E8521B);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px dashed currentColor;
}
.height-max-note a:hover { color: #B73E12; }

/* ── Installation cards (DIY vs. Pro) ───────────────── */
.install-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.install-card {
  appearance: none;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 16px 14px;
  border-radius: 14px;
  background: #FFFFFF;
  border: 1.5px solid var(--border, #E5DFD3);
  cursor: pointer;
  font-family: 'Inter', system-ui, sans-serif;
  color: var(--navy, #0A1226);
  transition:
    border-color 140ms ease,
    background   140ms ease,
    transform    140ms ease,
    box-shadow   140ms ease;
}
.install-card:hover {
  border-color: #C4BBA6;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(10, 18, 38, 0.06);
}
.install-card.is-active {
  border-color: var(--orange, #E8521B);
  background: #FFF7F2;
  box-shadow: 0 0 0 3px rgba(232, 82, 27, 0.10);
}
.install-card:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(10, 18, 38, 0.15);
}
.install-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(10, 18, 38, 0.06);
  color: var(--navy, #0A1226);
  margin-bottom: 4px;
}
.install-card.is-active .install-card-icon {
  background: rgba(232, 82, 27, 0.12);
  color: var(--orange, #E8521B);
}
.install-card-title {
  font-weight: 700;
  font-size: 14px;
  letter-spacing: -0.005em;
}
.install-card-desc {
  font-weight: 500;
  font-size: 12px;
  color: var(--ink-muted, #5C6273);
  line-height: 1.4;
}
.install-card-meta {
  margin-top: 4px;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--orange, #E8521B);
}
.install-card:not(.is-active) .install-card-meta {
  color: var(--ink-muted, #5C6273);
}

@media (max-width: 640px) {
  .install-cards { grid-template-columns: 1fr; }
}

/* ── Day/Night pill toggle ───────────────────────────────── */

.toggle-block   { align-self: end; }
.estimate-block { align-self: end; }

/* ── Estimate pill (sits next to the Day/Night toggle) ───── */
.estimate {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  min-height: 44px;
  padding: 8px 14px;
  border: 1px solid var(--border, #E5DFD3);
  border-radius: 10px;
  background: #FFFFFF;
  line-height: 1.1;
  white-space: nowrap;
}
.estimate-amount {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 800;
  font-size: 20px;
  color: var(--navy, #0A1226);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.estimate-meta {
  margin-top: 2px;
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 500;
  font-size: 11px;
  color: var(--ink-muted, #5C6273);
  letter-spacing: 0.02em;
}
.estimate-disclaimer {
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px dashed rgba(229, 223, 211, 0.9);
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 500;
  font-style: italic;
  font-size: 10px;
  color: var(--ink-muted, #5C6273);
  opacity: 0.85;
  letter-spacing: 0.01em;
  white-space: normal;
  max-width: 260px;
  text-align: right;
  line-height: 1.35;
}
.estimate.is-quote .estimate-amount {
  color: var(--orange, #E8521B);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.mode-toggle {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
}

.mode-toggle:focus-visible .toggle-pill {
  box-shadow: 0 0 0 3px rgba(10, 18, 38, 0.12);
}

.toggle-pill {
  position: relative;
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  width: 132px;
  height: 36px;
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition:
    background var(--dur) var(--ease),
    border-color var(--dur) var(--ease),
    box-shadow 160ms var(--ease);
  overflow: hidden;
}

.toggle-option {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--ink-muted);
  transition: color var(--dur) var(--ease);
  user-select: none;
}

.toggle-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: calc(50% - 3px);
  height: calc(100% - 6px);
  background: var(--navy);
  border-radius: 999px;
  z-index: 1;
  transition:
    transform var(--dur) var(--ease),
    background var(--dur) var(--ease);
}

.mode-toggle[aria-checked="false"] .toggle-option-day  { color: var(--cream); }
.mode-toggle[aria-checked="true"]  .toggle-option-night { color: var(--cream); }

.mode-toggle[aria-checked="true"] .toggle-thumb {
  transform: translateX(100%);
}

/* ── Quote callout (custom color selected) ───────────────── */

.quote-callout {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: var(--cream);
  border: 1px solid var(--border);
  border-left: 3px solid var(--orange);
  border-radius: 8px;
  padding: 12px 14px;
}

.quote-callout p {
  margin: 0;
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.5;
  color: var(--navy);
}

.quote-dot {
  flex: none;
  width: 8px;
  height: 8px;
  margin-top: 6px;
  border-radius: 50%;
  background: var(--orange);
}

/* ── Notes ────────────────────────────────────────────────── */

.notes {
  border-top: 1px solid var(--border);
  padding-top: var(--gap-3);
}

.notes p {
  margin: 0;
  max-width: 72ch;
  color: var(--ink-muted);
  font-size: 14px;
  line-height: 1.6;
}

/* ── Responsive ───────────────────────────────────────────── */

/* Below 1100px the swatch grid relaxes its rigid 20-col layout */
@media (max-width: 1100px) {
  .swatch-grid {
    grid-template-columns: repeat(auto-fill, 24px);
  }
}

@media (max-width: 720px) {
  .page {
    padding: var(--gap-4) var(--gap-3) var(--gap-5);
    gap: var(--gap-4);
  }

  .brand-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .controls-row {
    grid-template-columns: 1fr 1fr;
    gap: var(--gap-3);
  }
  .control-block:first-child { grid-column: 1 / -1; }
  .estimate { align-items: flex-start; }
  .estimate-disclaimer { text-align: left; max-width: 100%; }

  .toggle-block   { align-self: stretch; }
  .estimate-block { align-self: stretch; }

  .canvas-wrap { border-radius: 10px; }

  .swatch-grid {
    grid-template-columns: repeat(auto-fill, 22px);
    gap: 7px;
  }

  .swatch {
    width: 22px;
    height: 22px;
  }
}

@media (max-width: 400px) {
  .text-input { font-size: 15px; }
  .toggle-pill { width: 124px; }
}

/* ==========================================================
   Additive: Mounting style picker (sibling of install picker)
   ========================================================== */
.mount-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
@media (max-width: 720px) {
  .mount-cards { grid-template-columns: 1fr; }
}
.mount-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 14px 14px 12px;
  border: 1px solid var(--border, #E5DFD3);
  border-radius: 10px;
  background: #fff;
  text-align: left;
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
  font-family: inherit;
  color: inherit;
}
.mount-card:hover { border-color: var(--orange, #E8521B); }
.mount-card.is-active {
  border-color: var(--orange, #E8521B);
  box-shadow: 0 0 0 2px rgba(232,82,27,0.18);
}
.mount-card-icon {
  display: block;
  width: 100%;
  aspect-ratio: 240 / 130;
  border-radius: 8px;
  overflow: hidden;
  background: #FBF6EC;
  border: 1px solid var(--border, #E5DFD3);
  color: var(--navy, #0A1226);
  margin-bottom: 4px;
}
.mount-card-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}
.mount-card.is-active .mount-card-icon {
  border-color: var(--orange, #E8521B);
}
.mount-card-title {
  font-weight: 700;
  font-size: 14px;
  color: var(--navy, #0A1226);
  line-height: 1.2;
}
.mount-card-desc {
  font-size: 12.5px;
  color: var(--ink-muted, #5C6273);
  line-height: 1.4;
}
.mount-card-meta {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--orange, #E8521B);
  margin-top: 4px;
}

/* Raceway visual (in-canvas) */
.raceway-group { transition: opacity .25s ease; }
.raceway-bar {
  fill: #1F2937;          /* default dark powder-coat */
  stroke: #0A1226;
  stroke-width: 1.5;
}
.raceway-shadow {
  fill: #050912;
}
.raceway-screws circle {
  fill: #6B7280;
  stroke: #1F2937;
  stroke-width: 0.8;
}
.canvas-wrap[data-mode="night"] .raceway-bar  { fill: #0F141F; stroke: #050912; }
.canvas-wrap[data-mode="night"] .raceway-shadow { fill: #000; opacity: .55; }

/* ==========================================================
   Additive: Add-logo button + panel
   ========================================================== */
.add-logo-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding: 8px 12px;
  border: 1px dashed var(--border, #E5DFD3);
  border-radius: 8px;
  background: transparent;
  color: var(--navy, #0A1226);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.add-logo-btn:hover {
  border-color: var(--orange, #E8521B);
  color: var(--orange, #E8521B);
  background: #FFF7F2;
}
.add-logo-btn[aria-expanded="true"] {
  border-style: solid;
  border-color: var(--orange, #E8521B);
  color: var(--orange, #E8521B);
  background: #FFEEE3;
}
.logo-panel {
  margin-top: 10px;
  padding: 14px;
  border: 1px solid var(--border, #E5DFD3);
  border-radius: 10px;
  background: #FBF8F3;
}
.logo-panel-hint {
  font-size: 12.5px;
  color: var(--ink-muted, #5C6273);
  line-height: 1.4;
  margin: 0 0 12px;
}
.logo-actions { display: flex; flex-direction: column; gap: 10px; }
.logo-upload-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 14px;
  border: 1px solid var(--orange, #E8521B);
  border-radius: 8px;
  background: var(--orange, #E8521B);
  color: #fff;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  transition: background .15s ease;
}
.logo-upload-btn:hover { background: #C2440F; }
.logo-or {
  font-size: 12px;
  color: var(--ink-muted, #5C6273);
  text-align: center;
  margin: 4px 0;
}
.logo-shape-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.logo-shape-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 12px 8px;
  border: 1px solid var(--border, #E5DFD3);
  border-radius: 8px;
  background: #fff;
  color: var(--navy, #0A1226);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.logo-shape-card:hover { border-color: var(--orange, #E8521B); }
.logo-shape-card.is-active {
  border-color: var(--orange, #E8521B);
  box-shadow: 0 0 0 2px rgba(232,82,27,0.18);
  color: var(--orange, #E8521B);
}
.logo-clear-btn {
  align-self: flex-start;
  padding: 6px 10px;
  border: 1px solid var(--border, #E5DFD3);
  border-radius: 6px;
  background: transparent;
  color: var(--ink-muted, #5C6273);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.logo-clear-btn:hover { border-color: var(--orange, #E8521B); color: var(--orange, #E8521B); }

/* Logo overlay in canvas */
.logo-overlay-group .logo-shape {
  fill: #FAF7F2;
  stroke: #0A1226;
  stroke-width: 4;
}
.canvas-wrap[data-mode="night"] .logo-overlay-group .logo-shape {
  fill: #1A1F2E;
  stroke: #FAF7F2;
}

/* ── Raceway color sub-picker (Sherwin-Williams powder-coat) ───────── */
.raceway-color-block {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed var(--border, #E5DFD3);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.control-header.sub .control-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-muted, #5C6273);
}
.control-header.sub .control-hint {
  font-size: 12px;
  color: var(--ink-muted, #5C6273);
  display: block;
  margin-top: 2px;
}
.raceway-color-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(74px, 1fr));
  gap: 8px;
}
.raceway-swatch {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  padding: 4px;
  border: 1.5px solid var(--border, #E5DFD3);
  border-radius: 8px;
  background: #FFF;
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.raceway-swatch:hover { border-color: var(--orange, #E8521B); }
.raceway-swatch.is-active {
  border-color: var(--orange, #E8521B);
  box-shadow: 0 0 0 2px rgba(232,82,27,0.18);
}
.raceway-swatch .chip {
  height: 28px;
  border-radius: 4px;
  border: 1px solid rgba(10,18,38,0.10);
}
.raceway-swatch .sw {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--navy, #0A1226);
  text-align: center;
}
.raceway-swatch .nm {
  font-size: 10px;
  color: var(--ink-muted, #5C6273);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.raceway-swatch.custom .chip {
  background: repeating-linear-gradient(45deg, #C9C5BC, #C9C5BC 5px, #E5DFD3 5px, #E5DFD3 10px);
}
.raceway-color-meta {
  font-size: 11px;
  color: var(--ink-muted, #5C6273);
  margin: 0;
  font-style: italic;
}

/* ── Floating quick-controls bar (additive) ──────────────── */
/* Pinned inside the canvas-wrap so height + color + day/night
   stay reachable while designing. Doesn't touch original markup. */
.quick-controls {
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(10, 18, 38, 0.86);
  color: #FAF7F2;
  backdrop-filter: blur(10px) saturate(1.05);
  -webkit-backdrop-filter: blur(10px) saturate(1.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow:
    0 6px 18px -8px rgba(0, 0, 0, 0.55),
    0 2px 6px -2px rgba(0, 0, 0, 0.35);
  z-index: 5;
  font: 500 13px/1 'Inter', system-ui, sans-serif;
  user-select: none;
  pointer-events: auto;
}
.canvas-wrap[data-mode="night"] .quick-controls {
  background: rgba(15, 20, 31, 0.92);
  border-color: rgba(255, 138, 77, 0.18);
}

.quick-controls .qc-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: inherit;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.quick-controls .qc-item:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.18);
}

.quick-controls .qc-icon {
  font-size: 13px;
  opacity: 0.75;
}
.quick-controls .qc-height {
  padding-right: 12px;
}
.quick-controls .qc-height input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 130px;
  height: 4px;
  background: rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  outline: none;
  cursor: pointer;
}
.quick-controls .qc-height input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #E8521B;
  border: 2px solid #FAF7F2;
  cursor: grab;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}
.quick-controls .qc-height input[type="range"]::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #E8521B;
  border: 2px solid #FAF7F2;
  cursor: grab;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}
.quick-controls .qc-val {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  min-width: 30px;
  text-align: right;
}

.quick-controls .qc-color-chip {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  flex: 0 0 18px;
}
.quick-controls .qc-color-name {
  max-width: 110px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quick-controls .qc-mode-pill {
  position: relative;
  display: inline-block;
  width: 28px;
  height: 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  transition: background 0.2s ease;
}
.quick-controls .qc-mode-pill .qc-mode-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #FAF7F2;
  transition: left 0.2s ease, background 0.2s ease;
}
.quick-controls .qc-mode[data-mode="night"] .qc-mode-pill {
  background: rgba(255, 138, 77, 0.55);
}
.quick-controls .qc-mode[data-mode="night"] .qc-mode-pill .qc-mode-thumb {
  left: 14px;
  background: #FFF5E0;
}

@media (max-width: 640px) {
  .quick-controls {
    gap: 6px;
    padding: 6px 8px;
    bottom: 8px;
  }
  .quick-controls .qc-item {
    padding: 5px 8px;
    font-size: 12px;
  }
  .quick-controls .qc-height input[type="range"] {
    width: 80px;
  }
  .quick-controls .qc-color-name {
    display: none;
  }
}

/* ── Logo overlay drag affordance ─────────────────────────── */
#logoOverlayGroup {
  cursor: grab;
  touch-action: none;
}
#logoOverlayGroup.is-dragging {
  cursor: grabbing;
}
/* Subtle hover halo so the user discovers it's draggable */
#logoOverlayGroup:hover .logo-shape,
#logoOverlayGroup:hover .logo-upload-img {
  filter: drop-shadow(0 0 4px rgba(232, 82, 27, 0.45));
}

/* ── Shape lighting + drag affordance ────────────────────── */
.sign-shape {
  user-select: none;
  transition: fill var(--dur) var(--ease), opacity var(--dur) var(--ease), stroke var(--dur) var(--ease);
}
/* Sandblasted: hide the conventional sign-shape, the wood panel replaces it */
.canvas-wrap[data-style="sandblasted"] .sign-shape { display: none; }
/* Cabinet: hide the sign-shape, the cabinet box replaces it */
.canvas-wrap[data-style="cabinet"] .sign-shape { display: none; }
/* Reverse-halo at night: shape face goes dark like the letters */
.canvas-wrap[data-mode="night"][data-style="halolit"] .sign-shape.face        { fill: var(--night-wall) !important; }
.canvas-wrap[data-mode="night"][data-style="halolit"] .sign-shape.side-return { fill: var(--night-surf) !important; }
.canvas-wrap[data-mode="night"][data-style="frontlit"] .sign-shape.side-return { fill: var(--night-surf) !important; }
.canvas-wrap[data-mode="night"][data-style="duallit"]       .sign-shape.side-return { fill: var(--night-surf) !important; }
/* Trimless: keep side-return visible (front-lit channel letters have depth) */

/* ── Quick controls — color popover ───────────────────────── */
.qc-popover {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  width: 280px;
  max-width: calc(100vw - 32px);
  padding: 12px;
  border-radius: 14px;
  background: rgba(10, 18, 38, 0.96);
  color: #FAF7F2;
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow:
    0 12px 36px -12px rgba(0, 0, 0, 0.55),
    0 4px 12px -4px rgba(0, 0, 0, 0.40);
  backdrop-filter: blur(14px) saturate(1.05);
  -webkit-backdrop-filter: blur(14px) saturate(1.05);
  opacity: 0;
  transition: opacity 0.18s ease, transform 0.18s ease;
  z-index: 6;
}
.qc-popover.is-open {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.qc-popover::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: rgba(10, 18, 38, 0.96);
}
.canvas-wrap[data-mode="night"] .qc-popover {
  background: rgba(15, 20, 31, 0.96);
  border-color: rgba(255, 138, 77, 0.20);
}
.canvas-wrap[data-mode="night"] .qc-popover::after {
  border-top-color: rgba(15, 20, 31, 0.96);
}

.qc-pop-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.qc-pop-title {
  font: 600 12px/1.2 'Inter', system-ui, sans-serif;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(250, 247, 242, 0.78);
}
.qc-pop-close {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.10);
  color: #FAF7F2;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease;
}
.qc-pop-close:hover { background: rgba(255, 255, 255, 0.20); }

.qc-pop-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  margin-bottom: 10px;
}
.qc-swatch {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.18);
  background: var(--sw, #888);
  cursor: pointer;
  padding: 0;
  transition: transform 0.12s ease, border-color 0.15s ease, box-shadow 0.15s ease;
  position: relative;
}
.qc-swatch:hover { transform: scale(1.08); border-color: rgba(255, 255, 255, 0.55); }
.qc-swatch.is-active {
  border-color: #E8521B;
  box-shadow: 0 0 0 2px rgba(232, 82, 27, 0.35);
}
.qc-swatch.is-custom {
  background: conic-gradient(from 90deg,
    #E8521B, #F4D03F, #2ECC71, #3498DB, #9B59B6, #E8521B);
}
.qc-swatch.is-custom::after {
  content: "+";
  position: absolute;
  inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: #FAF7F2;
  font: 700 14px/1 'Inter', system-ui, sans-serif;
  text-shadow: 0 1px 2px rgba(0,0,0,0.45);
}

.qc-pop-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.qc-pop-name {
  font: 500 13px/1.2 'Inter', system-ui, sans-serif;
  color: #FAF7F2;
  flex: 1 1 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.qc-pop-hex {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: rgba(250, 247, 242, 0.70);
}
.qc-pop-hex-input {
  width: 76px;
  padding: 4px 6px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.06);
  color: #FAF7F2;
  font: 500 12px/1 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: 0.04em;
  outline: none;
}
.qc-pop-hex-input:focus {
  border-color: rgba(232, 82, 27, 0.55);
  background: rgba(255, 255, 255, 0.10);
}

@media (max-width: 640px) {
  .qc-popover {
    width: 240px;
    padding: 10px;
  }
  .qc-pop-grid { grid-template-columns: repeat(6, 1fr); }
}

/* ============================================================
   Per-block drag — each .word-block is a draggable group
   Hovering shows a grab cursor; dragging shows a subtle outline.
   ============================================================ */
.word-block {
  cursor: grab;
  /* Pointer events on the group itself — even the transparent gaps
     between letters won't capture, but text fills will. */
}
.word-block.is-dragging {
  cursor: grabbing;
}
.word-block.is-dragging .face,
.word-block.is-dragging .halo-outer {
  /* faint emphasis on the block being dragged */
  filter: drop-shadow(0 0 6px rgba(232, 82, 27, 0.35));
}
[data-mode="night"] .word-block.is-dragging .face,
[data-mode="night"] .word-block.is-dragging .halo-outer {
  filter: drop-shadow(0 0 8px rgba(255, 138, 77, 0.55));
}

/* ============================================================
   "+ Add Word" button — sits next to the SIGN TEXT label
   ============================================================ */
.add-word-btn {
  appearance: none;
  border: 1px solid #E5DFD3;
  background: #FAF7F2;
  color: #0A1226;
  font: 600 12px/1 'Inter', system-ui, sans-serif;
  letter-spacing: 0.02em;
  padding: 6px 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease, transform 120ms ease;
  margin-left: auto;
}
.add-word-btn:hover {
  background: #FFFFFF;
  border-color: #E8521B;
  color: #E8521B;
}
.add-word-btn:active {
  transform: translateY(1px);
}
.add-word-btn:focus-visible {
  outline: 2px solid #E8521B;
  outline-offset: 2px;
}

/* ── Hide vertical (height) ruler ───────────────────────────
   Per customer feedback: only the horizontal width ruler should
   be visible, since they only care about total sign length.
   The vertical ruler markup is kept in builder.html in case we
   re-introduce it later, but it is hidden here and the JS that
   updates it short-circuits. */
#measureRuler { display: none !important; }

/* ── Quick-controls: 3-color chip group + responsive stacking ─────────
   Per customer request: Front-Lit and Dual Front+Halo expose three
   color chips (acrylic / return / trim cap) right inside the floating
   "design wizard" so the customer can edit each layer without leaving
   the canvas. On narrow screens the bar wraps to two rows. */
.quick-controls {
  flex-wrap: wrap;
  justify-content: center;
  max-width: calc(100% - 24px);
  row-gap: 6px;
}
.quick-controls .qc-color-group {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.quick-controls .qc-color {
  /* Slightly tighter padding when there are three side-by-side chips. */
  padding-left: 8px;
  padding-right: 10px;
}
.quick-controls .qc-color .qc-color-name {
  max-width: 9ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Mobile / narrow canvas: stack the bar into 2 rows.
   Row 1: height + day/night.  Row 2: color chips. */
@media (max-width: 720px) {
  .quick-controls {
    flex-direction: row;
    flex-wrap: wrap;
    border-radius: 22px;
    padding: 8px 12px;
    gap: 8px 10px;
    width: max-content;
    max-width: calc(100% - 16px);
  }
  /* Row order: height first, then day/night, then color group on its own row */
  .quick-controls .qc-height { order: 1; }
  .quick-controls .qc-mode   { order: 2; }
  .quick-controls .qc-color-group {
    order: 3;
    flex-basis: 100%;
    justify-content: center;
  }
  .quick-controls .qc-color .qc-color-name { max-width: 7ch; }
}

/* Active-popover ring on the chip that opened the popover */
.quick-controls .qc-color.is-open {
  outline: 2px solid #E8521B;
  outline-offset: 2px;
}

/* ============================================================
   SANDBLASTED TEMPLATE SYSTEM — v2
   3-path picker, template gallery, custom controls, modals,
   color popover, shape/border pickers.
   Brand palette: navy #0A1226, orange #E8521B, cream #FAF7F2
   Cedar accent: #A87649 / #6B3410
   ============================================================ */

/* ── 3-Path Picker ─────────────────────────────────────────── */

.sb-path-picker {
  padding: 0;
}

.sb-path-header {
  margin-bottom: 20px;
}

.sb-path-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.02em;
  color: var(--navy);
  margin: 0 0 6px;
}

.sb-path-sub {
  margin: 0;
  font-size: 14px;
  color: var(--ink-muted);
}

.sb-path-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

@media (max-width: 767px) {
  .sb-path-cards {
    grid-template-columns: 1fr;
  }
}

.sb-path-card {
  appearance: none;
  border: 2px solid var(--border);
  background: #fff;
  border-radius: 14px;
  padding: 20px 18px 18px;
  text-align: left;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: border-color 0.18s, box-shadow 0.18s, transform 0.12s;
  position: relative;
}

.sb-path-card:hover {
  border-color: #A87649;
  box-shadow: 0 4px 18px rgba(168, 118, 73, 0.14);
  transform: translateY(-2px);
}

.sb-path-card.is-active {
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(10, 18, 38, 0.08), 0 4px 18px rgba(10, 18, 38, 0.10);
}

.sb-path-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 10px;
  background: var(--cream);
  margin-bottom: 2px;
}

.sb-path-label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.01em;
  color: var(--navy);
}

.sb-path-badge {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  width: fit-content;
}

.sb-path-badge--free    { background: #E8F5E9; color: #2E7D32; }
.sb-path-badge--paid    { background: #FFF3E0; color: #E65100; }
.sb-path-badge--premium { background: #EDE7F6; color: #4527A0; }

.sb-path-desc {
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-muted);
  margin-top: 2px;
}

/* ── Template Gallery ──────────────────────────────────────── */

.sb-gallery-section {
  padding: 0;
}

.sb-gallery-header {
  margin-bottom: 16px;
}

.sb-gallery-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.02em;
  color: var(--navy);
  margin: 0 0 4px;
}

.sb-gallery-hint {
  margin: 0;
  font-size: 13px;
  color: var(--ink-muted);
}

.sb-gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

@media (max-width: 900px) {
  .sb-gallery-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .sb-gallery-grid { grid-template-columns: 1fr; }
}

.sb-tpl-card {
  appearance: none;
  background: #fff;
  border: 2px solid var(--border);
  border-radius: 12px;
  padding: 0;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.18s, box-shadow 0.18s, transform 0.12s;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.sb-tpl-card:hover {
  border-color: #A87649;
  box-shadow: 0 4px 16px rgba(168, 118, 73, 0.16);
  transform: translateY(-2px);
}

.sb-tpl-card.is-active {
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(10, 18, 38, 0.10);
}

.sb-tpl-thumb {
  width: 100%;
  aspect-ratio: 4/3;
  overflow: hidden;
  background: var(--cream);
}

.sb-tpl-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.sb-tpl-info {
  padding: 10px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
}

.sb-tpl-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  color: var(--navy);
  letter-spacing: -0.01em;
}

.sb-tpl-sub {
  font-size: 11px;
  color: var(--ink-muted);
  line-height: 1.4;
}

.sb-tpl-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}

.sb-tpl-tag {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--cream);
  border: 1px solid var(--border);
  font-size: 10px;
  color: var(--ink-muted);
  text-transform: lowercase;
}

/* ── Sandblasted Controls ──────────────────────────────────── */

.sb-controls {
  display: flex;
  flex-direction: column;
  gap: 24px;
  border-top: 1px solid var(--border);
  padding-top: 24px;
  margin-top: 8px;
}

.sb-controls-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  align-items: start;
}

/* Shape picker */
.sb-shape-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.sb-shape-card,
.sb-border-card {
  appearance: none;
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  padding: 8px 4px 5px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-muted);
  transition: border-color 0.15s, background 0.15s;
}

.sb-shape-card:hover,
.sb-border-card:hover {
  border-color: #A87649;
  color: #6B3410;
}

.sb-shape-card.is-active,
.sb-border-card.is-active {
  border-color: var(--navy);
  background: rgba(10, 18, 38, 0.04);
  color: var(--navy);
  font-weight: 700;
}

.sb-shape-card svg,
.sb-border-card svg {
  color: currentColor;
}

/* Border picker */
.sb-border-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

/* Segmented controls (Material, Sides) */
.sb-seg {
  display: flex;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  width: fit-content;
}

.sb-seg-btn {
  appearance: none;
  background: #fff;
  border: none;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-muted);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  border-right: 1px solid var(--border);
}

.sb-seg-btn:last-child { border-right: none; }

.sb-seg-btn.is-active {
  background: var(--navy);
  color: #fff;
  font-weight: 700;
}

/* Depth hint */
.sb-depth-hint {
  margin: 4px 0 0;
  font-size: 11px;
  color: var(--ink-muted);
}

/* Text lines */
.sb-lines-block {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sb-line-row {
  display: grid;
  grid-template-columns: 72px 1fr 130px 36px;
  gap: 8px;
  align-items: center;
}

@media (max-width: 640px) {
  .sb-line-row {
    grid-template-columns: 72px 1fr;
    grid-template-rows: auto auto;
  }
  .sb-font-select { grid-column: 1; }
  .sb-color-btn   { grid-column: 2; justify-self: start; }
}

.sb-line-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.sb-line-text {
  /* inherits .text-input */
}

.sb-font-select {
  appearance: none;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'%3E%3Cpath fill='%235C6273' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E") no-repeat right 8px center;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  padding: 8px 28px 8px 10px;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--navy);
  cursor: pointer;
}

.sb-color-btn {
  appearance: none;
  border: 1.5px solid var(--border);
  background: #fff;
  border-radius: 8px;
  width: 36px;
  height: 36px;
  padding: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.15s;
}

.sb-color-btn:hover { border-color: var(--navy); }

.sb-color-chip {
  display: block;
  width: 22px;
  height: 22px;
  border-radius: 4px;
  border: 1px solid rgba(0,0,0,0.12);
}

.sb-color-count {
  font-size: 12px;
  color: var(--orange);
  font-weight: 600;
  margin: 4px 0 0;
}

/* ── 1 Shot Color Popover ──────────────────────────────────── */

.sb-color-popover {
  position: absolute;
  z-index: 1000;
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(10, 18, 38, 0.18);
  padding: 12px;
  max-width: 300px;
  max-height: 360px;
  overflow-y: auto;
}

.sb-color-popover-inner {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sb-color-family {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.sb-color-family-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.sb-color-swatch-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.sb-color-swatch {
  appearance: none;
  border: 1.5px solid transparent;
  border-radius: 4px;
  width: 22px;
  height: 22px;
  cursor: pointer;
  padding: 0;
  transition: border-color 0.12s, transform 0.10s;
}

.sb-color-swatch:hover { transform: scale(1.2); border-color: var(--navy); }
.sb-color-swatch.is-active { border-color: var(--navy); box-shadow: 0 0 0 2px rgba(10,18,38,0.25); }

/* ── Modals ─────────────────────────────────────────────────── */

.sb-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 900;
  background: rgba(10, 18, 38, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  backdrop-filter: blur(3px);
}

.sb-modal {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 24px 80px rgba(10, 18, 38, 0.25);
  padding: 32px;
  max-width: 640px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
}

.sb-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  appearance: none;
  background: var(--cream);
  border: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  color: var(--ink-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}

.sb-modal-close:hover { background: var(--border); }

.sb-modal-header {
  margin-bottom: 24px;
  padding-right: 32px;
}

.sb-modal-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -0.02em;
  color: var(--navy);
  margin: 0 0 6px;
}

.sb-modal-sub {
  font-size: 14px;
  color: var(--ink-muted);
  margin: 0;
  line-height: 1.55;
}

/* AI Modal form */
.ai-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 20px;
}

@media (max-width: 540px) {
  .ai-form-grid { grid-template-columns: 1fr; }
}

.ai-form-field--full {
  grid-column: 1 / -1;
}

.ai-form-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 5px;
}

.ai-required {
  color: var(--orange);
}

.ai-textarea {
  width: 100%;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--navy);
  line-height: 1.55;
  resize: vertical;
  transition: border-color 0.15s;
}

.ai-textarea:focus {
  outline: none;
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(10, 18, 38, 0.06);
}

.ai-select {
  width: 100%;
  padding: 9px 28px 9px 10px;
}

.ai-generate-btn {
  width: 100%;
  font-size: 15px;
}

/* AI Step 2 */
.ai-preview-wrap {
  margin-bottom: 16px;
}

.ai-preview-img-wrap {
  width: 100%;
  aspect-ratio: 16/9;
  border-radius: 10px;
  overflow: hidden;
  background: var(--cream);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.ai-preview-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.ai-preview-spinner {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: var(--cream);
  font-size: 13px;
  color: var(--ink-muted);
}

.ai-spinner-ring {
  width: 36px;
  height: 36px;
  border: 3px solid var(--border);
  border-top-color: var(--orange);
  border-radius: 50%;
  animation: spinRing 0.8s linear infinite;
}

@keyframes spinRing {
  to { transform: rotate(360deg); }
}

.ai-step2-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.ai-regen-btn {
  appearance: none;
  border: 1.5px solid var(--border);
  background: #fff;
  border-radius: 9px;
  padding: 10px 16px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  color: var(--navy);
  cursor: pointer;
  transition: border-color 0.15s;
}
.ai-regen-btn:hover:not(:disabled) { border-color: var(--navy); }
.ai-regen-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.ai-use-btn { flex: 1; }

.ai-back-btn {
  appearance: none;
  background: none;
  border: none;
  font-size: 13px;
  color: var(--ink-muted);
  cursor: pointer;
  text-decoration: underline;
  padding: 10px 0;
}

.ai-regen-upsell {
  margin-top: 10px;
  font-size: 13px;
  color: var(--ink-muted);
}

.ai-upsell-btn {
  appearance: none;
  background: none;
  border: none;
  color: var(--orange);
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  text-decoration: underline;
}

/* Custom $99 modal form */
.custom-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 20px;
}

@media (max-width: 540px) {
  .custom-form-grid { grid-template-columns: 1fr; }
}

.custom-form-field--full {
  grid-column: 1 / -1;
}

.custom-submit-btn {
  width: 100%;
  font-size: 15px;
}

.custom-submit-note {
  font-size: 12px;
  color: var(--ink-muted);
  text-align: center;
  margin: 10px 0 0;
}

/* sb-field-error */
.sb-field-error {
  border-color: #D32F2F !important;
  box-shadow: 0 0 0 2px rgba(211, 47, 47, 0.15) !important;
}

/* ── Canvas: studio-white override for sandblasted mode ─────── */
/* (JS toggles .wall-bricks opacity and .wall-bg fill directly) */

/* Hide channel-letter-only controls when sandblasted is active.
   The actual toggling is done by JS setting display:none, but we add
   class-based hiding as a fallback.  */
.is-sandblasted .channel-only { display: none !important; }

/* Sandblasted estimate box */
#sbEstimate {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px 20px;
  background: #fff;
}

/* ── Responsive tweaks for sb-controls-row ──────────────────── */
@media (max-width: 640px) {
  .sb-controls-row {
    grid-template-columns: 1fr;
  }
  .sb-shape-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .sb-border-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}


/* ═══════════════════════════════════════════════════════════════
   SANDBLASTED v3 — Questionnaire-First Lead-Gen Flow
   All classes prefixed with sbv3- to avoid any collision with
   existing channel-letter or v2 sandblasted styles.
   ═══════════════════════════════════════════════════════════════ */

/* ── Shell ──────────────────────────────────────────────────── */
.sbv3-shell {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* ── Steps (each step is individually shown/hidden) ─────────── */
.sbv3-step {
  animation: sbv3FadeIn 280ms var(--ease) both;
}
@keyframes sbv3FadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Buttons ─────────────────────────────────────────────────── */
.sbv3-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: 10px;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  cursor: pointer;
  border: 2px solid transparent;
  transition: background var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease);
  text-decoration: none;
  white-space: nowrap;
}
.sbv3-btn:disabled {
  opacity: 0.48;
  cursor: not-allowed;
  pointer-events: none;
}
.sbv3-btn--primary {
  background: var(--orange);
  color: #fff;
  border-color: var(--orange);
}
.sbv3-btn--primary:hover {
  background: #c93f0f;
  border-color: #c93f0f;
  box-shadow: 0 4px 16px rgba(232,82,27,0.30);
  transform: translateY(-1px);
}
.sbv3-btn--primary:active { transform: translateY(0); }
.sbv3-btn--secondary {
  background: var(--navy);
  color: #fff;
  border-color: var(--navy);
}
.sbv3-btn--secondary:hover {
  background: #1e2e55;
  border-color: #1e2e55;
  transform: translateY(-1px);
}
.sbv3-btn--ghost {
  background: transparent;
  color: var(--navy);
  border-color: var(--border);
}
.sbv3-btn--ghost:hover {
  background: rgba(10,18,38,0.06);
  border-color: #c5c0b8;
}
.sbv3-btn--sm {
  padding: 8px 16px;
  font-size: 13px;
}

/* ── Progress bar ────────────────────────────────────────────── */
.sbv3-progress-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0 4px;
}
.sbv3-progress-track {
  flex: 1;
  height: 6px;
  background: var(--border);
  border-radius: 9999px;
  overflow: hidden;
}
.sbv3-progress-fill {
  height: 100%;
  background: var(--orange);
  border-radius: 9999px;
  transition: width 400ms var(--ease);
}
.sbv3-progress-label {
  font-size: 12px;
  color: var(--ink-muted);
  white-space: nowrap;
  min-width: 80px;
  text-align: right;
}

/* ── Landing ─────────────────────────────────────────────────── */
.sbv3-landing {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
  padding: 40px 0;
}
@media (max-width: 720px) {
  .sbv3-landing { grid-template-columns: 1fr; gap: 32px; }
}
.sbv3-landing-badge {
  display: inline-block;
  background: rgba(168,118,73,0.12);
  color: #7a4c20;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 9999px;
  margin-bottom: 16px;
}
.sbv3-landing-headline {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 1rem + 3vw, 3rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--navy);
  line-height: 1.1;
  margin-bottom: 16px;
}
.sbv3-landing-body {
  font-size: 16px;
  color: var(--ink-muted);
  line-height: 1.65;
  margin-bottom: 24px;
  max-width: 46ch;
}
.sbv3-landing-features {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 32px;
}
.sbv3-feature {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--navy);
}
.sbv3-feature svg { color: #437a22; flex-shrink: 0; }
.sbv3-landing-cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}
.sbv3-landing-slogan {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-muted);
  letter-spacing: -0.01em;
}
.sbv3-landing-slogan em {
  font-style: italic;
  color: var(--orange);
  font-weight: 700;
}
.sbv3-landing-imgs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto auto;
  gap: 10px;
  align-items: stretch;
}
.sbv3-landing-img {
  width: 100%;
  border-radius: 10px;
  object-fit: cover;
  aspect-ratio: 4/3;
  box-shadow: 0 8px 24px rgba(10,18,38,0.13);
}
.sbv3-landing-img--1 { grid-column: 1 / 3; grid-row: 1; aspect-ratio: 16/9; }
.sbv3-landing-img--2 { grid-column: 3;     grid-row: 1; aspect-ratio: 4/5; }
.sbv3-landing-img--3 { grid-column: 1 / 4; grid-row: 2; aspect-ratio: 21/7; }

/* ── Questionnaire ───────────────────────────────────────────── */
.sbv3-questionnaire {
  padding: 8px 0 100px;
}
.sbv3-q-header {
  margin-bottom: 28px;
}
.sbv3-q-title {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 1rem + 1.5vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--navy);
  margin-bottom: 6px;
}
.sbv3-q-sub {
  color: var(--ink-muted);
  font-size: 14px;
}

/* Section accordion */
.sbv3-q-section {
  border: 1px solid var(--border);
  border-radius: 12px;
  margin-bottom: 12px;
  overflow: hidden;
  background: #fff;
}
.sbv3-q-sec-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 20px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  transition: background var(--dur-fast) var(--ease);
  user-select: none;
}
.sbv3-q-sec-toggle:hover { background: rgba(10,18,38,0.03); }
.sbv3-q-sec-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
}
.sbv3-q-sec-title {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  color: var(--navy);
  flex: 1;
}
.sbv3-q-sec-req,
.sbv3-q-sec-opt {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 9999px;
}
.sbv3-q-sec-req {
  background: rgba(232,82,27,0.10);
  color: #c93f0f;
}
.sbv3-q-sec-opt {
  background: rgba(10,18,38,0.07);
  color: var(--ink-muted);
}
.sbv3-q-sec-check {
  font-size: 14px;
  color: #437a22;
  font-weight: 700;
  min-width: 16px;
}
.sbv3-q-sec-toggle[aria-expanded="true"] .sbv3-q-sec-chevron {
  transform: rotate(180deg);
}
.sbv3-q-sec-chevron {
  color: var(--ink-muted);
  transition: transform 200ms var(--ease);
  flex-shrink: 0;
}

.sbv3-q-sec-body {
  padding: 8px 20px 24px;
  border-top: 1px solid var(--border);
}
.sbv3-q-sec-body[hidden] { display: none !important; }

/* ── Form grid & fields ───────────────────────────────────────── */
.sbv3-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 580px) {
  .sbv3-form-grid { grid-template-columns: 1fr; }
}
.sbv3-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sbv3-field--full { grid-column: 1 / -1; }
.sbv3-field label {
  font-size: 13px;
  font-weight: 600;
  color: var(--navy);
  letter-spacing: 0.01em;
}
.sbv3-field-hint {
  font-weight: 400;
  color: var(--ink-muted);
}
.sbv3-req { color: var(--orange); }
.sbv3-field input[type="text"],
.sbv3-field input[type="email"],
.sbv3-field input[type="tel"],
.sbv3-field input[type="number"],
.sbv3-field input[type="date"],
.sbv3-field select,
.sbv3-field textarea {
  width: 100%;
  padding: 11px 14px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--navy);
  background: #fff;
  transition: border-color var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease);
  appearance: auto;
}
.sbv3-field input:focus,
.sbv3-field select:focus,
.sbv3-field textarea:focus {
  outline: none;
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(10,18,38,0.10);
}
.sbv3-field input.sbv3-input-error,
.sbv3-field select.sbv3-input-error {
  border-color: #c93f0f;
  box-shadow: 0 0 0 3px rgba(232,82,27,0.15);
}
.sbv3-field textarea { resize: vertical; min-height: 90px; }
.sbv3-field input[type="file"] {
  padding: 8px;
  font-size: 13px;
}

/* Radio rows */
.sbv3-radio-row {
  display: flex;
  gap: 20px;
  padding: 8px 0;
}
.sbv3-radio-label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 14px;
  cursor: pointer;
  user-select: none;
}
.sbv3-radio-label input[type="radio"] {
  width: 16px;
  height: 16px;
  accent-color: var(--orange);
}

/* Checkbox group */
.sbv3-check-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.sbv3-check-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  cursor: pointer;
  padding: 7px 14px;
  border: 1.5px solid var(--border);
  border-radius: 9999px;
  transition: background var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
  user-select: none;
}
.sbv3-check-label:has(input:checked) {
  background: rgba(232,82,27,0.08);
  border-color: var(--orange);
  color: var(--orange);
  font-weight: 600;
}
.sbv3-check-label input[type="checkbox"] {
  width: 14px;
  height: 14px;
  accent-color: var(--orange);
}

/* 1 Shot color families */
.sbv3-color-families {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.sbv3-color-family-group {}
.sbv3-color-family-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ink-muted);
  margin-bottom: 6px;
  display: block;
}
.sbv3-color-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.sbv3-color-swatch-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2.5px solid transparent;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease);
  position: relative;
  background: none;
  padding: 0;
}
.sbv3-color-swatch-btn:hover {
  transform: scale(1.15);
  box-shadow: 0 2px 8px rgba(10,18,38,0.18);
}
.sbv3-color-swatch-btn.is-selected {
  border-color: var(--navy);
  box-shadow: 0 0 0 2px var(--navy);
  transform: scale(1.15);
}
.sbv3-color-swatch-btn[title] { cursor: pointer; }

/* Questionnaire footer */
.sbv3-q-footer {
  position: sticky;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  background: rgba(250,247,242,0.96);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--border);
  margin-top: 24px;
  border-radius: 0 0 12px 12px;
  gap: 12px;
  z-index: 10;
}
.sbv3-q-footer-right {
  display: flex;
  align-items: center;
  gap: 12px;
}
.sbv3-q-validation-msg {
  font-size: 13px;
  color: #c93f0f;
  font-weight: 500;
}

/* ── Path Picker ─────────────────────────────────────────────── */
.sbv3-path-picker {
  padding: 8px 0 32px;
}
.sbv3-pp-header {
  text-align: center;
  margin-bottom: 36px;
}
.sbv3-pp-title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1rem + 2vw, 2.4rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--navy);
  margin-bottom: 8px;
}
.sbv3-pp-sub { color: var(--ink-muted); font-size: 15px; }

.sbv3-pp-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@media (max-width: 800px) {
  .sbv3-pp-cards { grid-template-columns: 1fr; }
}

/* 3-path cards — large, photographic feel, hover lift */
.sbv3-pp-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 32px 28px 28px;
  background: #fff;
  border: 2px solid var(--border);
  border-radius: 16px;
  cursor: pointer;
  text-align: left;
  transition: border-color var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease);
  gap: 16px;
}
.sbv3-pp-card:hover {
  border-color: var(--navy);
  box-shadow: 0 16px 48px rgba(10,18,38,0.13);
  transform: translateY(-4px);
}
.sbv3-pp-card--featured {
  border-color: var(--orange);
  background: linear-gradient(145deg, #fff 70%, rgba(232,82,27,0.04));
}
.sbv3-pp-card--featured:hover {
  border-color: #c93f0f;
  box-shadow: 0 16px 48px rgba(232,82,27,0.20);
}

/* Price chip — top right corner */
.sbv3-pp-price-chip {
  position: absolute;
  top: 16px;
  right: 16px;
  background: var(--navy);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 4px 10px;
  border-radius: 9999px;
  text-transform: uppercase;
}
.sbv3-pp-price-chip--paid { background: var(--orange); }
.sbv3-pp-price-chip--premium { background: #5a3490; }

.sbv3-pp-icon {
  color: var(--navy);
  margin-bottom: 4px;
}
.sbv3-pp-card--featured .sbv3-pp-icon { color: var(--orange); }

.sbv3-pp-card-body { flex: 1; }
.sbv3-pp-card-title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--navy);
  margin-bottom: 10px;
}
.sbv3-pp-card-desc {
  font-size: 14px;
  color: var(--ink-muted);
  line-height: 1.6;
  margin-bottom: 20px;
  max-width: 30ch;
}
.sbv3-pp-card-cta {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: 0.01em;
  border-bottom: 2px solid currentColor;
  padding-bottom: 1px;
  transition: color var(--dur-fast) var(--ease);
}
.sbv3-pp-card--featured .sbv3-pp-card-cta { color: var(--orange); }
.sbv3-pp-card:hover .sbv3-pp-card-cta { color: var(--orange); }

.sbv3-pp-footer {
  display: flex;
  justify-content: flex-start;
  padding-top: 24px;
}

/* ── Path screen shared ──────────────────────────────────────── */
.sbv3-path-header {
  padding: 8px 0 28px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 32px;
}
.sbv3-back-inline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-muted);
  background: none;
  border: none;
  cursor: pointer;
  margin-bottom: 16px;
  padding: 0;
  transition: color var(--dur-fast) var(--ease);
}
.sbv3-back-inline:hover { color: var(--navy); }
.sbv3-path-title {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 1rem + 1.5vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--navy);
  margin-bottom: 8px;
}
.sbv3-path-sub {
  font-size: 15px;
  color: var(--ink-muted);
  max-width: 62ch;
}
.sbv3-path-footer {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding-top: 32px;
  border-top: 1px solid var(--border);
  margin-top: 32px;
}
.sbv3-path-footer-note {
  font-size: 12px;
  color: var(--ink-muted);
}

/* ── Upload path ─────────────────────────────────────────────── */
.sbv3-upload-zone {
  border: 2.5px dashed var(--border);
  border-radius: 14px;
  padding: 40px 24px;
  text-align: center;
  background: rgba(250,247,242,0.6);
  transition: border-color var(--dur-fast) var(--ease),
              background var(--dur-fast) var(--ease);
  position: relative;
}
.sbv3-upload-zone.is-dragover {
  border-color: var(--orange);
  background: rgba(232,82,27,0.05);
}
.sbv3-upload-input {
  position: absolute;
  inset: 0;
  opacity: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  z-index: 1;
}
.sbv3-upload-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  color: var(--ink-muted);
  pointer-events: none;
}
.sbv3-upload-text { font-size: 16px; color: var(--navy); font-weight: 500; }
.sbv3-upload-link { color: var(--orange); text-decoration: underline; font-weight: 700; }
.sbv3-upload-hint { font-size: 12px; color: var(--ink-muted); }
.sbv3-upload-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 600;
  color: #437a22;
  margin-top: 12px;
  padding: 10px 16px;
  background: rgba(67,122,34,0.08);
  border-radius: 8px;
}
.sbv3-upload-clear {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--ink-muted);
  font-size: 14px;
  line-height: 1;
  padding: 2px 4px;
  margin-left: 4px;
}
.sbv3-upload-clear:hover { color: #c93f0f; }

/* ── AI Designer path ────────────────────────────────────────── */
.sbv3-gallery { margin-bottom: 32px; }
.sbv3-gallery-title {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 16px;
}
.sbv3-gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
@media (max-width: 700px) {
  .sbv3-gallery-grid { grid-template-columns: repeat(2, 1fr); }
}
.sbv3-gallery-card {
  border: 2.5px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease);
  background: #fff;
}
.sbv3-gallery-card:hover {
  border-color: var(--navy);
  box-shadow: 0 8px 24px rgba(10,18,38,0.12);
  transform: translateY(-2px);
}
.sbv3-gallery-card.is-selected {
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(232,82,27,0.20);
}
.sbv3-gallery-card img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  display: block;
}
.sbv3-gallery-card-label {
  padding: 8px 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--navy);
  text-align: center;
  background: #fff;
}

/* Advanced details */
.sbv3-advanced {
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 24px;
  overflow: hidden;
}
.sbv3-advanced-toggle {
  padding: 14px 18px;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  color: var(--navy);
  cursor: pointer;
  user-select: none;
  list-style: none;
}
.sbv3-advanced-toggle::-webkit-details-marker { display: none; }
.sbv3-advanced-body {
  padding: 16px 18px 20px;
  border-top: 1px solid var(--border);
}
.sbv3-advanced-note {
  font-size: 13px;
  color: var(--ink-muted);
  margin-bottom: 16px;
}

/* AI preview area */
.sbv3-ai-preview {
  border: 1.5px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  background: rgba(250,247,242,0.5);
  min-height: 280px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
  position: relative;
}
.sbv3-ai-preview-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 48px 24px;
  color: var(--ink-muted);
  text-align: center;
}
.sbv3-ai-preview-placeholder p { font-size: 14px; max-width: 28ch; }
.sbv3-ai-spinner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 48px 24px;
  color: var(--ink-muted);
  font-size: 14px;
}
.sbv3-spinner-ring {
  width: 40px;
  height: 40px;
  border: 3px solid var(--border);
  border-top-color: var(--orange);
  border-radius: 50%;
  animation: sbv3Spin 0.7s linear infinite;
}
@keyframes sbv3Spin { to { transform: rotate(360deg); } }
.sbv3-ai-image {
  width: 100%;
  max-height: 420px;
  object-fit: contain;
  display: block;
  padding: 16px;
}
.sbv3-ai-regen-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  border-top: 1px solid var(--border);
  width: 100%;
  background: #fff;
}
.sbv3-regen-count { font-size: 13px; color: var(--ink-muted); }
.sbv3-regen-count strong { color: var(--navy); }

/* ── Custom $99 path ─────────────────────────────────────────── */
.sbv3-custom-summary {
  background: rgba(10,18,38,0.04);
  border-radius: 12px;
  padding: 20px 24px;
  margin-bottom: 24px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 24px;
}
@media (max-width: 580px) { .sbv3-custom-summary { grid-template-columns: 1fr; } }
.sbv3-summary-row { display: flex; flex-direction: column; gap: 2px; }
.sbv3-summary-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-muted); }
.sbv3-summary-val { font-size: 15px; font-weight: 600; color: var(--navy); }

.sbv3-custom-includes {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px 24px;
  background: #fff;
  margin-bottom: 8px;
}
.sbv3-custom-includes-title {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 12px;
}
.sbv3-includes-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sbv3-includes-list li {
  font-size: 14px;
  color: var(--ink-muted);
  padding-left: 20px;
  position: relative;
}
.sbv3-includes-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 7px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--orange);
}

/* ── Thank-you screens ───────────────────────────────────────── */
.sbv3-thankyou {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 48px 24px 64px;
  gap: 20px;
}
.sbv3-ty-icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
}
.sbv3-ty-icon--upload  { background: #437a22; }
.sbv3-ty-icon--ai      { background: var(--orange); }
.sbv3-ty-icon--custom  { background: #5a3490; }
.sbv3-ty-title {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 1rem + 2vw, 2.4rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--navy);
  margin: 0;
}
.sbv3-ty-body {
  font-size: 16px;
  color: var(--ink-muted);
  max-width: 50ch;
  line-height: 1.65;
}
.sbv3-ty-summary {
  width: 100%;
  max-width: 480px;
  background: rgba(10,18,38,0.04);
  border-radius: 12px;
  padding: 20px 24px;
  text-align: left;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 20px;
}
@media (max-width: 480px) { .sbv3-ty-summary { grid-template-columns: 1fr; } }
.sbv3-ty-booking {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.sbv3-ty-booking p { font-size: 15px; color: var(--navy); font-weight: 600; margin: 0; }

/* ═══════════════════════════════════════════════════════════════════════════
   SANDBLASTED v4 — Material Education + Pricing Engine Styles
   All selectors prefixed sbv3-mat-edu-, sbv3-color-count-, sbv3-price-
══════════════════════════════════════════════════════════════════════════════ */

/* ── Material Education Section ───────────────────────────────────────── */
.sbv3-material-edu {
  padding: 16px 0 40px;
}
.sbv3-mat-edu-header {
  text-align: center;
  margin-bottom: 36px;
}
.sbv3-mat-edu-title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1rem + 2vw, 2.4rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--navy);
  margin-bottom: 10px;
}
.sbv3-mat-edu-sub {
  font-size: 16px;
  color: var(--ink-muted);
  max-width: 52ch;
  margin: 0 auto;
  line-height: 1.6;
}

.sbv3-mat-edu-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 36px;
}
@media (max-width: 720px) {
  .sbv3-mat-edu-cards { grid-template-columns: 1fr; }
}

.sbv3-mat-edu-card {
  background: #fff;
  border: 1.5px solid rgba(10,18,38,0.09);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 18px rgba(10,18,38,0.08);
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.sbv3-mat-edu-card:hover {
  box-shadow: 0 8px 32px rgba(10,18,38,0.14);
  transform: translateY(-2px);
}

.sbv3-mat-edu-img-wrap {
  width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
  flex-shrink: 0;
}
.sbv3-mat-edu-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s ease;
}
.sbv3-mat-edu-card:hover .sbv3-mat-edu-img {
  transform: scale(1.03);
}

.sbv3-mat-edu-card-body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.sbv3-mat-edu-card-title {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--navy);
  margin-bottom: 14px;
}
.sbv3-mat-edu-bullets {
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sbv3-mat-edu-bullets li {
  font-size: 14px;
  color: var(--navy);
  padding-left: 18px;
  position: relative;
  line-height: 1.5;
}
.sbv3-mat-edu-bullets li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: #437a22;
  font-weight: 700;
  font-size: 12px;
  top: 1px;
}
.sbv3-mat-edu-footer {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-top: 1px solid rgba(10,18,38,0.08);
  padding-top: 12px;
  margin-top: auto;
  margin-bottom: 0;
}
.sbv3-mat-edu-spec-link {
  display: inline-block;
  margin-top: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--orange);
  text-decoration: none;
  letter-spacing: -0.01em;
  transition: opacity 0.15s;
}
.sbv3-mat-edu-spec-link:hover { opacity: 0.75; text-decoration: underline; }

.sbv3-mat-edu-cta {
  display: flex;
  justify-content: center;
}

/* ── Thickness note helper ────────────────────────────────────────────── */
.sbv3-thickness-note {
  margin-top: 6px;
  font-size: 12px;
  color: var(--ink-muted);
  line-height: 1.5;
}

/* ── Color Count Picker ───────────────────────────────────────────────── */
.sbv3-color-count-picker {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.sbv3-color-count-btn {
  min-width: 44px;
  height: 40px;
  padding: 0 14px;
  border: 1.5px solid rgba(10,18,38,0.18);
  border-radius: 8px;
  background: #fff;
  color: var(--navy);
  font-size: 15px;
  font-weight: 600;
  font-family: var(--font-body);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  line-height: 1;
}
.sbv3-color-count-btn:hover {
  border-color: var(--orange);
  background: rgba(232,82,27,0.06);
}
.sbv3-color-count-btn--active,
.sbv3-color-count-btn[aria-pressed="true"] {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}

/* ── Questionnaire 2-col grid (form + sticky aside) ─────────────────────── */
.sbv3-q-grid {
  display: block;
}
@media (min-width: 900px) {
  .sbv3-q-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 28px;
    align-items: start;
  }
}
.sbv3-q-aside {
  margin-top: 20px;
}
@media (min-width: 900px) {
  .sbv3-q-aside {
    margin-top: 0;
    position: sticky;
    top: 24px;
  }
}

/* ── Live Price Card ──────────────────────────────────────────────────── */
.sbv3-price-card {
  background: #fff;
  border: 1.5px solid rgba(10,18,38,0.12);
  border-radius: 14px;
  padding: 20px 22px;
  margin: 20px 0 0;
  box-shadow: 0 4px 20px rgba(10,18,38,0.09);
  position: relative;
}
@media (min-width: 900px) {
  .sbv3-price-card {
    position: sticky;
    top: 24px;
    width: 100%;
    z-index: 10;
    margin: 0;
  }
}
@media (max-width: 899px) {
  .sbv3-price-card {
    position: sticky;
    bottom: 72px;
    z-index: 10;
    margin: 12px -2px 0;
    border-radius: 14px 14px 0 0;
    box-shadow: 0 -4px 20px rgba(10,18,38,0.12);
  }
}
.sbv3-price-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.sbv3-price-card-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
}
.sbv3-price-card-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: 9999px;
  background: rgba(168,118,73,0.13);
  color: #7a4c20;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  empty-cells: show;
}
.sbv3-price-card-total {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.2rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  color: var(--navy);
  margin-bottom: 12px;
  line-height: 1;
}
.sbv3-price-card-breakdown {
  font-size: 12.5px;
  color: var(--ink-muted);
  line-height: 1.7;
  margin-bottom: 12px;
  min-height: 0;
}
.sbv3-price-card-breakdown-row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}
.sbv3-price-card-breakdown-row .label { flex: 1; }
.sbv3-price-card-breakdown-row .amt { font-weight: 600; color: var(--navy); white-space: nowrap; }
.sbv3-price-card-note {
  font-size: 11px;
  color: var(--ink-muted);
  line-height: 1.5;
  margin: 0;
  border-top: 1px solid rgba(10,18,38,0.08);
  padding-top: 10px;
}

/* ── Path estimate display (AI designer + Custom paths) ───────────────── */
.sbv3-path-estimate {
  display: inline-block;
  margin-top: 8px;
  padding: 5px 14px;
  background: rgba(168,118,73,0.10);
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  color: #7a4c20;
  letter-spacing: -0.01em;
  min-height: 0;
}
.sbv3-path-estimate:empty { display: none; }

/* ==========================================================
   Product type picker (Channel / Cabinet / Sandblasted)
   ========================================================== */
.product-block .product-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
@media (max-width: 720px) {
  .product-block .product-cards { grid-template-columns: 1fr; }
}
.product-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 14px 14px 12px;
  border: 1px solid var(--border, #E5DFD3);
  border-radius: 10px;
  background: #fff;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  color: inherit;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.product-card:hover { border-color: var(--orange, #E8521B); }
.product-card.is-active {
  border-color: var(--orange, #E8521B);
  box-shadow: 0 0 0 2px rgba(232,82,27,0.18);
}
.product-card[disabled],
.product-card[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
}
.product-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  border-radius: 8px;
  background: #FAF7F2;
  color: var(--navy, #0A1226);
}
.product-card.is-active .product-card-icon {
  background: #FFEEE3;
  color: var(--orange, #E8521B);
}
.product-card-title {
  font-weight: 700;
  font-size: 14px;
  color: var(--navy, #0A1226);
  line-height: 1.2;
}
.product-card-desc {
  font-size: 12.5px;
  color: var(--ink-muted, #5C6273);
  line-height: 1.4;
}
.product-card-desc em {
  font-style: italic;
  color: var(--orange, #E8521B);
}

/* ==========================================================
   Cabinet field set
   ========================================================== */
.cab-size-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.cab-size-field {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 6px;
  padding: 10px 12px;
  border: 1px solid var(--border, #E5DFD3);
  border-radius: 8px;
  background: #fff;
}
.cab-size-label {
  grid-column: 1 / -1;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--ink-muted, #5C6273);
}
.cab-size-input {
  font: 700 18px/1.2 inherit;
  color: var(--navy, #0A1226);
  border: none;
  outline: none;
  background: transparent;
  width: 100%;
  padding: 0;
  -moz-appearance: textfield;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}
.cab-size-input::-webkit-outer-spin-button,
.cab-size-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
/* Selects: keep the same compact look as the old number inputs, but show
   a small chevron on the right so it reads as a dropdown. */
select.cab-size-input {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%235C6273' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><polyline points='1 1.5 6 6.5 11 1.5'/></svg>");
  background-repeat: no-repeat;
  background-position: right 0 center;
  background-size: 12px 8px;
  padding-right: 18px;
}
select.cab-size-input::-ms-expand { display: none; }
.cab-size-unit {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-muted, #5C6273);
}
.cab-size-note {
  margin: 8px 0 0;
  font-size: 12.5px;
  color: var(--ink-muted, #5C6273);
}

.cab-config-cards,
.cab-color-grid,
.cab-face-cards {
  display: grid;
  gap: 8px;
}
.cab-config-cards { grid-template-columns: 1fr 1fr; }
.cab-color-grid   { grid-template-columns: repeat(3, 1fr); }
.cab-face-cards   { grid-template-columns: 1fr; }
.cab-face-cards-2up { grid-template-columns: 1fr 1fr; }
@media (max-width: 720px) {
  .cab-face-cards-2up { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .cab-config-cards { grid-template-columns: 1fr; }
}

.cab-config-card,
.cab-color-card,
.cab-face-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 10px 12px;
  border: 1px solid var(--border, #E5DFD3);
  border-radius: 8px;
  background: #fff;
  font-family: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.cab-config-card:hover,
.cab-color-card:hover,
.cab-face-card:hover { border-color: var(--orange, #E8521B); }
.cab-config-card.is-active,
.cab-color-card.is-active,
.cab-face-card.is-active {
  border-color: var(--orange, #E8521B);
  box-shadow: 0 0 0 2px rgba(232,82,27,0.18);
}
.cab-config-title,
.cab-face-title { font-weight: 700; font-size: 14px; color: var(--navy, #0A1226); }
.cab-config-desc,
.cab-face-desc { font-size: 12.5px; color: var(--ink-muted, #5C6273); line-height: 1.4; }
.cab-face-meta {
  font-size: 11.5px; font-weight: 600; color: var(--orange, #E8521B); margin-top: 2px;
}

.cab-color-card {
  align-items: center;
  flex-direction: column;
  text-align: center;
  padding: 12px 8px;
}
.cab-color-swatch {
  width: 100%;
  aspect-ratio: 3 / 1;
  border-radius: 6px;
  display: block;
}
.cab-color-swatch-custom {
  background: conic-gradient(
    from 0deg,
    #c8323a, #e8b04e, #4f9c5a, #4470b6, #6c4ea0, #c8323a
  );
}
.cab-color-name { font-weight: 600; font-size: 13px; color: var(--navy, #0A1226); margin-top: 6px; }
.cab-color-meta { font-size: 11px; font-weight: 600; color: var(--ink-muted, #5C6273); margin-top: 2px; }
.cab-color-card.is-active .cab-color-meta { color: var(--orange, #E8521B); }

/* ----- Face card body (collapsed unless card is active) ----- */
.cab-face-card-head { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.cab-face-card-body {
  width: 100%;
  margin-top: 0;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height .25s ease, opacity .2s ease, margin-top .2s ease;
  pointer-events: none;
}
.cab-face-card.is-active .cab-face-card-body {
  max-height: 720px;
  opacity: 1;
  margin-top: 12px;
  pointer-events: auto;
  overflow: visible;
}
.cab-face-card-body { border-top: 1px solid transparent; padding-top: 0; }
.cab-face-card.is-active .cab-face-card-body { border-top-color: rgba(232,82,27,0.2); padding-top: 10px; }

.cab-face-clear {
  margin-top: 10px;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-muted, #5C6273);
  background: none;
  border: 1px dashed var(--border, #E5DFD3);
  cursor: pointer;
  padding: 6px 12px;
  border-radius: 6px;
  align-self: flex-start;
}
.cab-face-clear:hover { color: var(--orange, #E8521B); border-color: var(--orange, #E8521B); }

/* ----- Cut vinyl color-count picker ----- */
.cab-vinyl-count {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}
.cab-vinyl-count-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 10px 8px;
  border: 1px solid var(--border, #E5DFD3);
  border-radius: 8px;
  background: #fff;
  font: inherit;
  font-weight: 600;
  font-size: 13px;
  color: var(--navy, #0A1226);
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.cab-vinyl-count-btn:hover { border-color: var(--orange, #E8521B); }
.cab-vinyl-count-btn.is-active {
  border-color: var(--orange, #E8521B);
  box-shadow: 0 0 0 2px rgba(232,82,27,0.18);
}
.cab-vinyl-count-meta {
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-muted, #5C6273);
}
.cab-vinyl-count-btn.is-active .cab-vinyl-count-meta {
  color: var(--orange, #E8521B);
}

/* ----- Per-slot Briteline color picker ----- */
.cab-vinyl-pickers {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cab-vinyl-slot {
  border: 1px solid var(--border, #E5DFD3);
  border-radius: 8px;
  padding: 10px 12px;
  background: #fff;
}
.cab-vinyl-slot-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 700;
  font-size: 12.5px;
  color: var(--navy, #0A1226);
  margin-bottom: 8px;
}
.cab-vinyl-slot-pick {
  font-size: 11.5px;
  font-weight: 500;
  color: var(--ink-muted, #5C6273);
}
.cab-vinyl-swatches {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 5px;
}
@media (max-width: 720px) {
  .cab-vinyl-swatches { grid-template-columns: repeat(5, 1fr); }
}
.cab-vinyl-swatch-btn {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  border: 1px solid var(--border, #E5DFD3);
  border-radius: 6px;
  cursor: pointer;
  padding: 0;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.cab-vinyl-swatch-btn:hover { transform: scale(1.06); border-color: var(--orange, #E8521B); }
.cab-vinyl-swatch-btn.is-active {
  border-color: var(--orange, #E8521B);
  box-shadow: 0 0 0 2px rgba(232,82,27,0.18);
}
.cab-vinyl-swatch-btn[title]::after { display: none; }

/* ----- Per-slot chip that opens a click-to-open swatch popover ----- */
.cab-vinyl-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px 6px 6px;
  border: 1px solid var(--border, #E5DFD3);
  border-radius: 999px;
  background: #fff;
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--navy, #0A1226);
  cursor: pointer;
  transition: border-color .15s ease;
}
.cab-vinyl-chip:hover { border-color: var(--orange, #E8521B); }
.cab-vinyl-chip[aria-expanded="true"] {
  border-color: var(--orange, #E8521B);
  box-shadow: 0 0 0 2px rgba(232,82,27,0.18);
}
.cab-vinyl-chip-swatch {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.12);
  flex: none;
}
.cab-vinyl-chip-name { line-height: 1.1; }
.cab-vinyl-chip-meta {
  display: block;
  font-size: 10.5px;
  font-weight: 500;
  color: var(--ink-muted, #5C6273);
  margin-top: 2px;
}
.cab-vinyl-slot-row {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
}
.cab-vinyl-slot-row + .cab-vinyl-slot-row { border-top: 1px dashed var(--border, #E5DFD3); }
.cab-vinyl-slot-num {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-muted, #5C6273);
}

/* Click-to-open vinyl popover */
.cab-vinyl-popover {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 50;
  background: #fff;
  border: 1px solid var(--border, #E5DFD3);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(10,18,38,0.18);
  padding: 14px;
  width: min(360px, calc(100vw - 24px));
  display: none;
}
.cab-vinyl-popover.is-open { display: block; }
.cab-vinyl-popover-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--navy, #0A1226);
  margin-bottom: 10px;
}
.cab-vinyl-popover-close {
  background: none;
  border: none;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  color: var(--ink-muted, #5C6273);
  padding: 0 4px;
}
.cab-vinyl-popover-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
}
.cab-vinyl-popover-grid .cab-vinyl-swatch-btn {
  aspect-ratio: 1 / 1;
}

/* ----- Digital print uploader ----- */
.cab-print-uploader {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.cab-print-upload-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1px solid var(--border, #E5DFD3);
  border-radius: 8px;
  background: #fff;
  font: inherit;
  font-weight: 600;
  font-size: 13px;
  color: var(--navy, #0A1226);
  cursor: pointer;
  transition: border-color .15s ease;
}
.cab-print-upload-btn:hover { border-color: var(--orange, #E8521B); }
.cab-print-filename {
  font-size: 12.5px;
  color: var(--ink-muted, #5C6273);
  font-style: italic;
}
.cab-print-clear {
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--orange, #E8521B);
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
}
.cab-print-clear:hover { background: rgba(232,82,27,0.08); }
.cab-print-note {
  margin: 10px 0 0;
  font-size: 11.5px;
  color: var(--ink-muted, #5C6273);
  line-height: 1.4;
}

/* Hidden when product != cabinet (handled in JS via hidden attr too) */
[data-only][hidden] { display: none !important; }

/* Cabinet mount picker — 2-card layout (Direct / Blade) */
.mount-cards.mount-cards-2up { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 720px) {
  .mount-cards.mount-cards-2up { grid-template-columns: 1fr; }
}
.cab-mount-hint {
  margin: 10px 0 0;
  font-size: 12px;
  font-weight: 500;
  color: var(--orange, #E8521B);
  background: rgba(232,82,27,0.08);
  border: 1px solid rgba(232,82,27,0.22);
  border-radius: 8px;
  padding: 8px 12px;
}

/* ====================================================================
   v6: Hide channel-letter slider quick-control when product=cabinet.
   Cabinet has its own L × H number inputs in the form panel.
   ==================================================================== */
#canvasWrap[data-product="cabinet"] .quick-controls .qc-height {
  display: none !important;
}

/* ====================================================================
   v8: Cabinet Text Styling fieldset
   --------------------------------------------------------------------
   Lives only when product=cabinet (data-only="cabinet"). Lets the user
   pick font, layout (straight / arch up / arch down), size scale, and
   text color. Preview-only — pricing isn't impacted.
   ==================================================================== */

.cab-text-block {
  border-top: 1px dashed #E5DFD3;
  padding-top: 14px;
  margin-top: 6px;
}

.cab-text-row {
  display: grid;
  grid-template-columns: 56px 1fr;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
}
.cab-text-row:first-of-type { margin-top: 0; }

.cab-text-row-label {
  font-family: var(--font-body, 'Inter', system-ui, sans-serif);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted, #5C6273);
}

/* ── Font chips (compact) ─────────────────────────── */
.cab-font-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.cab-font-chip {
  appearance: none;
  border: 1px solid #E5DFD3;
  background: #FAF7F2;
  color: #0A1226;
  padding: 7px 11px;
  border-radius: 8px;
  font-size: 12px;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease, box-shadow 120ms ease;
  white-space: nowrap;
  line-height: 1;
}
.cab-font-chip:hover {
  background: #FFFFFF;
  border-color: #C8C0AE;
}
.cab-font-chip.is-active {
  background: #0A1226;
  color: #FFFFFF;
  border-color: #0A1226;
  box-shadow: 0 1px 3px rgba(10,18,38,0.18);
}
.cab-font-chip:focus-visible {
  outline: 2px solid #E8521B;
  outline-offset: 2px;
}

/* ── Layout (straight / arch up / arch down) ─────────────────────── */
.cab-text-curve {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.cab-curve-btn {
  appearance: none;
  border: 1px solid #E5DFD3;
  background: #FAF7F2;
  color: #0A1226;
  padding: 6px 10px;
  border-radius: 8px;
  font: 600 11.5px/1 'Inter', system-ui, sans-serif;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease, box-shadow 120ms ease;
}
.cab-curve-btn svg { display: block; }
.cab-curve-btn:hover {
  background: #FFFFFF;
  border-color: #C8C0AE;
}
.cab-curve-btn.is-active {
  background: #0A1226;
  color: #FFFFFF;
  border-color: #0A1226;
}
.cab-curve-btn:focus-visible {
  outline: 2px solid #E8521B;
  outline-offset: 2px;
}

/* ── Size slider row ─────────────────────── */
.cab-text-size {
  display: flex;
  align-items: center;
  gap: 12px;
}
.cab-text-size .form-slider { flex: 1; }
.cab-text-size .slider-val {
  min-width: 48px;
  font-size: 13px;
  font-weight: 700;
}

/* ── Color row (preset swatches + custom color picker) ─────────── */
.cab-text-colors {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.cab-text-color {
  appearance: none;
  position: relative;
  border: 1px solid #E5DFD3;
  background: #FAF7F2;
  color: #0A1226;
  padding: 5px 9px 5px 5px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 600 11.5px/1 'Inter', system-ui, sans-serif;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease, box-shadow 120ms ease;
}
.cab-text-color:hover {
  background: #FFFFFF;
  border-color: #C8C0AE;
}
.cab-text-color.is-active {
  background: #0A1226;
  color: #FFFFFF;
  border-color: #0A1226;
  box-shadow: 0 1px 3px rgba(10,18,38,0.18);
}
.cab-text-color:focus-visible {
  outline: 2px solid #E8521B;
  outline-offset: 2px;
}
.cab-text-color-sw {
  width: 18px;
  height: 18px;
  border-radius: 5px;
  display: inline-block;
  border: 1px solid rgba(10,18,38,0.18);
  flex-shrink: 0;
}
.cab-text-color-sw-white {
  border-color: #C8C0AE;
}
/* Auto = gradient implying it follows whatever the face/vinyl color is */
.cab-text-color-sw-auto {
  background: conic-gradient(from 0deg, #C8202B, #0E5BA8, #0A1226, #157C42, #F4D200, #C8202B);
}
/* Custom = hidden native color input + rainbow swatch */
.cab-text-color-custom {
  cursor: pointer;
  padding: 5px 9px 5px 5px;
}
.cab-text-color-custom input[type="color"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  border: 0;
  padding: 0;
  margin: 0;
}
.cab-text-color-sw-custom {
  background: conic-gradient(from 0deg, #FF3B30, #FF9500, #FFCC00, #34C759, #00C7BE, #007AFF, #5856D6, #AF52DE, #FF3B30);
  border-color: rgba(10,18,38,0.18);
}

/* ── Mobile tweaks ───────────────────────── */
@media (max-width: 720px) {
  .cab-text-row {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .cab-text-row-label { letter-spacing: 0.12em; }
  .cab-font-chip { font-size: 11.5px; padding: 6px 9px; }
}

/* Hide "+ Add Word" when on cabinet (cabinet uses a single sign-text line) */
#canvasWrap[data-product="cabinet"] ~ * #addWordBtn,
body:has(#canvasWrap[data-product="cabinet"]) #addWordBtn {
  display: none !important;
}

/* v8: brief flash on the SIGN TEXT input when "+ Add Word" is clicked
   without any text in the input (helps the user notice). */
@keyframes inputFlashPulse {
  0%   { box-shadow: 0 0 0 0 rgba(232,82,27,0.0); border-color: #E5DFD3; }
  40%  { box-shadow: 0 0 0 4px rgba(232,82,27,0.18); border-color: #E8521B; }
  100% { box-shadow: 0 0 0 0 rgba(232,82,27,0.0); border-color: #E5DFD3; }
}
.text-input.input-flash,
input.input-flash {
  animation: inputFlashPulse 380ms ease-out;
}

/* ====================================================================
   v9 — Floating cabinet TEXT-STYLING overlay panel (#cabTextPanel)
   Sits inside #canvasWrap so customers see live changes while editing.
   Vertical, compact, glass-style card. Collapsible header.
   ==================================================================== */

.cab-text-panel {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 5;
  width: 252px;
  max-width: calc(100% - 28px);
  font-family: var(--font-body, 'Inter', system-ui, sans-serif);
  color: #0A1226;
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(10, 18, 38, 0.10);
  border-radius: 12px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.65) inset,
    0 12px 32px -12px rgba(10, 18, 38, 0.30),
    0 4px 10px -4px rgba(10, 18, 38, 0.18);
  overflow: hidden;
  transition: box-shadow 200ms ease, transform 200ms ease, opacity 200ms ease;
}
.canvas-wrap[data-mode="night"] .cab-text-panel {
  background: rgba(20, 26, 42, 0.86);
  color: #F4F0E8;
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 12px 32px -12px rgba(0, 0, 0, 0.55),
    0 4px 10px -4px rgba(0, 0, 0, 0.40);
}

/* Header / collapse toggle */
.cab-text-panel-header {
  appearance: none;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px 12px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(10, 18, 38, 0.08);
  cursor: pointer;
  color: inherit;
  font: 700 12px/1 var(--font-body, 'Inter', system-ui, sans-serif);
  letter-spacing: 0.04em;
  text-align: left;
  transition: background 120ms ease;
}
.canvas-wrap[data-mode="night"] .cab-text-panel-header {
  border-bottom-color: rgba(255, 255, 255, 0.10);
}
.cab-text-panel-header:hover {
  background: rgba(10, 18, 38, 0.04);
}
.canvas-wrap[data-mode="night"] .cab-text-panel-header:hover {
  background: rgba(255, 255, 255, 0.05);
}
.cab-text-panel-icon { display: inline-flex; opacity: 0.85; }
.cab-text-panel-title { flex: 1; }
.cab-text-panel-chev {
  display: inline-flex;
  opacity: 0.6;
  transition: transform 200ms ease;
}
.cab-text-panel[data-collapsed="true"] .cab-text-panel-chev {
  transform: rotate(-90deg);
}
.cab-text-panel[data-collapsed="true"] .cab-text-panel-header {
  border-bottom-color: transparent;
}

/* Body — vertical stack of rows */
.cab-text-panel-body {
  padding: 10px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 60vh;
  overflow-y: auto;
  transition: max-height 220ms ease, padding 220ms ease, opacity 180ms ease;
}
.cab-text-panel[data-collapsed="true"] .cab-text-panel-body {
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
}

.cab-text-panel-body::-webkit-scrollbar { width: 6px; }
.cab-text-panel-body::-webkit-scrollbar-thumb {
  background: rgba(10, 18, 38, 0.18);
  border-radius: 6px;
}
.canvas-wrap[data-mode="night"] .cab-text-panel-body::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.18);
}

/* Row layout — label on top, controls below (vertical) */
.cab-text-prow {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cab-text-prow-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted, #5C6273);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.canvas-wrap[data-mode="night"] .cab-text-prow-label {
  color: rgba(244, 240, 232, 0.65);
}
.cab-text-prow-val {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0;
  color: #0A1226;
}
.canvas-wrap[data-mode="night"] .cab-text-prow-val { color: #F4F0E8; }

/* Scoped overrides — make controls compact & vertical inside the panel */
.cab-text-panel .cab-font-chips {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  max-height: 168px;
  overflow-y: auto;
  padding-right: 2px;
}
.cab-text-panel .cab-font-chip {
  padding: 6px 4px;
  font-size: 10.5px;
  border-radius: 6px;
  text-align: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.7);
  border-color: rgba(10, 18, 38, 0.12);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  line-height: 1.1;
}
.cab-text-panel .cab-font-chip-script {
  font-size: 13px;
  letter-spacing: 0;
  text-transform: none;
  padding-top: 4px;
  padding-bottom: 4px;
}
.canvas-wrap[data-mode="night"] .cab-text-panel .cab-font-chip {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.14);
  color: #F4F0E8;
}
.cab-text-panel .cab-font-chip.is-active {
  background: #0A1226;
  color: #FFFFFF;
  border-color: #0A1226;
}
.canvas-wrap[data-mode="night"] .cab-text-panel .cab-font-chip.is-active {
  background: #E8521B;
  border-color: #E8521B;
}

.cab-text-panel .cab-text-curve {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
}
.cab-text-panel .cab-curve-btn {
  flex-direction: column;
  gap: 2px;
  padding: 6px 4px;
  font-size: 10px;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.7);
  border-color: rgba(10, 18, 38, 0.12);
  text-align: center;
  justify-content: center;
}
.cab-text-panel .cab-curve-btn.is-active {
  background: #0A1226;
  color: #FFFFFF;
  border-color: #0A1226;
}
.canvas-wrap[data-mode="night"] .cab-text-panel .cab-curve-btn {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.14);
  color: #F4F0E8;
}
.canvas-wrap[data-mode="night"] .cab-text-panel .cab-curve-btn.is-active {
  background: #E8521B;
  border-color: #E8521B;
}

.cab-text-panel .cab-text-size-slider {
  width: 100%;
}

.cab-text-panel .cab-text-colors {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 5px;
}
.cab-text-panel .cab-text-color {
  font-size: 10.5px;
  padding: 4px 7px 4px 4px;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.7);
  border-color: rgba(10, 18, 38, 0.12);
}
.cab-text-panel .cab-text-color.is-active {
  background: #0A1226;
  color: #FFFFFF;
  border-color: #0A1226;
}
.canvas-wrap[data-mode="night"] .cab-text-panel .cab-text-color {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.14);
  color: #F4F0E8;
}
.cab-text-panel .cab-text-color-sw {
  width: 14px;
  height: 14px;
  border-radius: 4px;
}
.canvas-wrap[data-mode="night"] .cab-text-panel .cab-text-color.is-active {
  background: #E8521B;
  border-color: #E8521B;
}

/* Mobile / narrow artboard — keep panel on top so it doesn't overlap the
   bottom-anchored .quick-controls bar. Default-collapsed on mobile to give
   the user the artboard real-estate; they tap the header to expand. */
@media (max-width: 720px) {
  .cab-text-panel {
    top: 10px;
    right: 10px;
    left: auto;
    bottom: auto;
    width: 200px;
    max-width: calc(100% - 20px);
  }
  .cab-text-panel-body {
    max-height: 50vh;
  }
  .cab-text-panel .cab-font-chips,
  .cab-text-panel .cab-text-colors {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ============================================================
   v9 — Photographic storefront backdrop (replaces brick wall)
   Always on. Day/night cross-fade keys off [data-mode]
   ============================================================ */
.channel-photo-bg { display: none; }

#canvasWrap[data-bg="photo"] .channel-photo-bg {
  display: block;
}
/* When photo is on, hide the flat brick + cream wall */
#canvasWrap[data-bg="photo"] .wall-bg,
#canvasWrap[data-bg="photo"] .wall-bricks {
  display: none;
}
/* Day/night cross-fade for the channel-letter backdrop */
#canvasWrap[data-bg="photo"][data-mode="night"] #chBackdropDay   { opacity: 0; }
#canvasWrap[data-bg="photo"][data-mode="night"] #chBackdropNight { opacity: 1; }
#canvasWrap[data-bg="photo"]:not([data-mode="night"]) #chBackdropDay   { opacity: 1; }
#canvasWrap[data-bg="photo"]:not([data-mode="night"]) #chBackdropNight { opacity: 0; }
.channel-photo-bg { transition: opacity 240ms ease; }

/* ==========================================================
   Builder top bar (Product + Letter type, above the canvas)
   Compact horizontal pill strip. Keeps the live preview in
   view while the customer edits specs underneath the canvas.
   ========================================================== */
.builder-topbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr);
  gap: 12px;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid var(--border, #E5DFD3);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(10,18,38,0.04);
}
.builder-topbar .topbar-block {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}
.builder-topbar .topbar-block .control-header {
  margin: 0 0 6px 2px;
}
.builder-topbar .topbar-block .control-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted, #5C6273);
}
.builder-topbar .topbar-block[data-only]:not([data-only="channel"]) { display: none; }
/* Hide letter-type strip when current product isn't channel.
   The body's data-only attr handling already toggles this on
   non-channel products via existing JS. We add an extra rule below
   targeting the topbar specifically so it collapses cleanly. */
body[data-product="cabinet"]      .builder-topbar .topbar-block[data-only="channel"],
body[data-product="sandblasted"]  .builder-topbar .topbar-block[data-only="channel"] {
  display: none;
}
body[data-product="cabinet"]      .builder-topbar,
body[data-product="sandblasted"]  .builder-topbar {
  grid-template-columns: 1fr;
}

/* Compact horizontal strips */
.builder-topbar .topbar-cards {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.builder-topbar .topbar-cards::-webkit-scrollbar { display: none; }

.builder-topbar .topbar-cards .product-card,
.builder-topbar .topbar-cards .style-card {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  padding: 7px 8px;
  border-radius: 10px;
  text-align: left;
}
/* Drop icons in topbar product cards — titles alone are clearest. */
.builder-topbar .topbar-cards .product-card-icon { display: none; }
.builder-topbar .topbar-cards .product-card { justify-content: center; }
.builder-topbar .topbar-cards .product-card-title,
.builder-topbar .topbar-cards .style-card-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
/* Drop the long descriptions and big style thumbnails in the topbar */
.builder-topbar .topbar-cards .product-card-desc,
.builder-topbar .topbar-cards .style-card-desc { display: none; }
.builder-topbar .topbar-cards .style-card-thumb {
  flex: 0 0 36px;
  width: 36px;
  height: 24px;
}
.builder-topbar .topbar-cards .style-card-thumb svg { height: 24px; }

/* Day/night surface treatment so the bar reads at any time */
.builder-topbar .topbar-cards .product-card,
.builder-topbar .topbar-cards .style-card {
  background: #FAF7F2;
  border: 1px solid var(--border, #E5DFD3);
}
.builder-topbar .topbar-cards .product-card.is-active,
.builder-topbar .topbar-cards .style-card.is-active {
  background: #FFF7F2;
  border-color: var(--orange, #E8521B);
  box-shadow: 0 0 0 2px rgba(232, 82, 27, 0.18);
}

/* Mobile: stack two strips vertically, allow horizontal scroll within each */
@media (max-width: 720px) {
  .builder-topbar {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 8px 10px;
  }
  .builder-topbar .topbar-cards .product-card,
  .builder-topbar .topbar-cards .style-card {
    flex: 0 0 auto;
    min-width: 132px;
  }
}