/**
 * SavvyRest Mattress Configurator — component styles (v1.2.2 polish).
 *
 * Single-font hierarchy on Cabinet Grotesk (300/400/500/600/700), no Fraunces.
 * Inline configurator (`/mattresstool/`, PDP inject) breaks out of the Astra
 * content container so the cream paper surface spans edge-to-edge; modal
 * context remains self-contained in the centered dialog panel.
 *
 * Variable names preserved for JS contract:
 *   --dunlop-soft / --dunlop-med / --dunlop-firm
 *   --talalay-soft / --talalay-med / --talalay-firm
 *   --plum / --plum-deep / --plum-soft / --sage-1 / --sage-2
 *   --warn / --warn-soft / --alert / --alert-soft
 *   --paper / --ink
 */

.smc-tool,
.smc-modal {
  /* Surface — figure/ground tiers (J8: the page was the lightest tone, so
     cards melted into it). Page recedes; cards keep --paper and rise off it;
     one plum tint marks the active focus. --paper* stay as-is (cards/panels);
     only the page bg + active selection are re-pointed below. */
  --page:          #EFE9DC;  /* page bg — a real step below the cards */
  --surface:       #FBF8F2;  /* optional near-white lift (build cards) */
  --surface-2:     #F4EFE4;  /* recessed insets */
  --focus-bg:      #F7F1FA;  /* plum-tint focus surface (active selection) */
  --paper:         #F7F3EA;
  --paper-2:       #F1EBDD;
  --paper-3:       #ECE4D1;

  /* Ink */
  --ink:           #1A111D;
  --ink-2:         #3A2D40;
  --ink-3:         #6A5A6E;
  --muted:         #6A5A6E; /* legacy alias used in a few places */

  /* Rules / hairlines */
  --hairline:      rgba(26, 17, 29, 0.12);
  --hairline-soft: rgba(26, 17, 29, 0.07);
  --rule:          rgba(26, 17, 29, 0.12);
  --border-cool:   rgba(26, 17, 29, 0.18);

  /* Accent */
  --plum:       #A173B2;
  --plum-deep:  #7A4F8C;
  --plum-soft:  #ECE3F0;

  /* Sage (positive / neutral) */
  --sage-1:     #9FC28E;
  --sage-2:     #7AAB67;
  --sage-soft:  #DDE7CF;
  --sage-pale:  #EEF3E6;

  /* Warn / alert */
  --warn:       #B57F4C;
  --warn-soft:  #F1E3CE;
  --alert:      #B8493B;
  --alert-soft: #F6DAD4;

  /* Latex layer tones. Brand convention (per client): Talalay = purple,
     Dunlop = green. Variable names (--<latex>-<firm>) are load-bearing —
     JS queries them by name in LATEX_TONE — so we keep names stable and
     only flip hex values to swap brand colors. */
  --dunlop-soft:  #E6ECE0;
  --dunlop-med:   #B6CBA6;
  --dunlop-firm:  #6E8C62;
  --talalay-soft: #E9D7EC;
  --talalay-med:  #C9A9CB;
  --talalay-firm: #8F6B94;

  /* Shadows */
  --shadow-card:  0 2px 4px rgba(26,17,29,.04), 0 8px 20px -10px rgba(26,17,29,.08);
  --shadow-lift:  0 6px 18px rgba(26,17,29,.10);
  --shadow-focus: 0 10px 30px rgba(122,79,140,.18);
  --shadow-panel: 0 40px 80px -30px rgba(26,17,29,.45), 0 16px 40px -20px rgba(26,17,29,.25);

  /* Radii — sharper modern geometry */
  /* Corner scale — one language, applied by role (2026-06-11 cleanup):
     pill  = one-line tags/chips/eyebrows + true circles ONLY
     panel = modal cards/panels, toast, drawer
     card  = page cards (price, feedback, wrap, rail steps)
     btn   = action buttons (ATC, CTAs)
     sharp = small inline controls (nav links, confirm, edit chips)
     Every interactive element must declare a radius explicitly — the
     theme's global 30px button radius bleeds into anything left bare. */
  --radius-card:  10px;
  --radius-panel: 12px;
  --radius-pill:  999px;
  --radius-btn:   8px;
  --radius-sharp: 6px;

  /* Motion */
  --ease: cubic-bezier(.22, 1, .36, 1);

  /* Fonts — single-face hierarchy on Cabinet Grotesk via weight contrast.
     --serif kept as an alias to Cabinet Grotesk so legacy selectors that
     still reference it don't fall back to Georgia; italic treatments
     resolve to Cabinet Grotesk's native italic. */
  --font:  "Cabinet Grotesk", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --sans:  "Cabinet Grotesk", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --serif: "Cabinet Grotesk", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono:  "JetBrains Mono", "SF Mono", ui-monospace, monospace;

  /* Display scale — bumped for more modern confidence */
  --fs-eyebrow: 11px;
  --fs-display: 56px;   /* price */
  --fs-h2:      28px;   /* section titles */
  --fs-h3:      18px;
  --fs-body:    15px;
  --fs-small:   13px;
}

.smc-tool *,
.smc-modal * { box-sizing: border-box; }

.smc-tool,
.smc-modal {
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.55;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Inline configurator — break out of the Astra/savvy-rest content container
   so the cream paper surface + gradient mesh span the full viewport edge-to-edge.
   Content inside respects an inner max-width via .mt-grid / .pop-gallery / .adv.
   The modal-scoped override below nullifies this break-out for the modal
   instance so it stays inside its dialog panel. */
.smc-tool {
  position: relative;
  width: 100vw;
  left: 50%;
  margin-left: -50vw;
  padding: 56px 0 64px;
  background:
    radial-gradient(ellipse 60% 50% at 0% 0%,    rgba(161, 115, 178, 0.08), transparent 60%),
    radial-gradient(ellipse 60% 50% at 100% 30%, rgba(122, 171, 103, 0.06), transparent 60%),
    radial-gradient(ellipse 80% 60% at 50% 100%, rgba(161, 115, 178, 0.04), transparent 70%),
    var(--page);
  overflow: hidden;
}
.smc-modal .smc-tool {
  /* Modal-context reset: restore containing behavior */
  position: static;
  width: auto;
  left: auto;
  margin-left: 0;
  padding: 0;
  background: transparent;
  overflow: visible;
}

.smc-tool a,
.smc-modal a { color: inherit; text-decoration: none; }
.smc-tool button,
.smc-modal button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
.smc-tool ::selection,
.smc-modal ::selection { background: var(--plum-deep); color: var(--paper); }

.smc-tool .num,
.smc-modal .num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

/* ====================== Tool layout ====================== */
.mt-tool { padding: 36px 0 20px; }
.mt-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  align-items: start;
  max-width: 1240px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 40px;
  padding-right: 40px;
}
@media (max-width: 720px) { .mt-grid { padding-left: 20px; padding-right: 20px; } }
.smc-modal .mt-grid { max-width: none; padding-left: 0; padding-right: 0; }

/* ====================== Quiz drawer ====================== */
.qz-backdrop {
  position: fixed; inset: 0;
  background: rgba(26,17,29,.55);
  opacity: 0; pointer-events: none;
  transition: opacity .25s var(--ease);
  z-index: 90;
}
.qz-backdrop.open { opacity: 1; pointer-events: auto; }
.qz-drawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: min(440px, 100vw);
  background: var(--paper);
  box-shadow: -12px 0 32px rgba(26,17,29,.18);
  transform: translateX(100%);
  transition: transform .3s var(--ease);
  z-index: 100;
  display: flex; flex-direction: column;
}
.qz-drawer.open { transform: translateX(0); }
.qz-header {
  padding: 22px 24px 16px;
  border-bottom: 1px solid var(--hairline);
  display: flex; align-items: center; justify-content: space-between;
}
.qz-header h3 {
  margin: 0;
  font-family: var(--serif);
  font-size: 20px; font-weight: 500;
  letter-spacing: -0.005em;
}
.qz-close {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid var(--hairline);
  display: grid; place-items: center;
  color: var(--ink-2); font-size: 18px;
  transition: background .18s var(--ease), color .18s var(--ease), transform .18s var(--ease), border-color .18s var(--ease);
}
.qz-close:hover {
  background: var(--ink); color: var(--paper);
  border-color: var(--ink); transform: rotate(90deg);
}
.qz-body { padding: 20px 24px; overflow-y: auto; flex: 1; }
.qz-q {
  margin-bottom: 22px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--hairline-soft);
}
.qz-q:last-child { border-bottom: none; }
.qz-q .q-label {
  display: block;
  font-family: var(--serif);
  font-size: 17px; font-weight: 500;
  font-style: italic;
  color: var(--ink);
  margin-bottom: 12px;
  letter-spacing: -0.005em;
}
.qz-options { display: flex; flex-wrap: wrap; gap: 8px; }
.smc-tool .qz-opt, .smc-modal .qz-opt {
  padding: 10px 16px;
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-pill);
  font-size: 13px; font-weight: 500;
  color: var(--ink-2);
  transition: all .18s var(--ease);
}
.smc-tool .qz-opt:hover, .smc-modal .qz-opt:hover { border-color: var(--ink-3); color: var(--ink); }
.smc-tool .qz-opt[aria-pressed="true"], .smc-modal .qz-opt[aria-pressed="true"] {
  background: var(--ink); border-color: var(--ink); color: var(--paper);
}
.qz-footer {
  padding: 18px 24px;
  border-top: 1px solid var(--hairline);
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px;
}
.qz-clear { font-size: 12.5px; color: var(--ink-3); letter-spacing: 0.04em; transition: color .2s var(--ease); }
.qz-clear:hover { color: var(--ink); }
.smc-tool .qz-apply, .smc-modal .qz-apply {
  background: var(--ink); color: var(--paper);
  font-weight: 500; font-size: 13px;
  letter-spacing: 0.04em;
  padding: 11px 22px;
  border-radius: var(--radius-pill);
  transition: background .2s var(--ease), opacity .2s var(--ease), transform .15s var(--ease);
}
.smc-tool .qz-apply:hover, .smc-modal .qz-apply:hover { background: var(--plum-deep); transform: translateY(-1px); }
.smc-tool .qz-apply:disabled, .smc-modal .qz-apply:disabled { opacity: .45; cursor: not-allowed; transform: none; }
@media (max-width: 640px) {
  .qz-drawer {
    top: auto; width: 100%; height: 85vh;
    border-radius: var(--radius-panel) var(--radius-panel) 0 0;
    transform: translateY(100%);
  }
  .qz-drawer.open { transform: translateY(0); }
}

/* ====================== Configurator panel ====================== */
.mt-panel {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}

/* v1.7.3 — Section eyebrows match modal's vocabulary: 11px / 600 weight /
   plum-deep, with a smaller letter-spacing and a leading dot for visual
   anchoring. */
.mt-section-label {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--plum-deep);
  margin: 22px 0 12px;
  display: flex; align-items: center; gap: 12px;
}
.mt-section-label::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--plum-deep);
  flex-shrink: 0;
}
.mt-section-label::after {
  content: "";
  flex: 1; height: 1px;
  background: var(--hairline-soft);
}
.mt-section-label:first-child { margin-top: 0; }

/* ====================== Presets-first build picker (Task 3) ==============
 * The rail leads with ONE build picker: recommended builds as white cards on
 * cream, a "Bestseller" ribbon on the default, a plum-deep selected ring +
 * check on the matching build, and a "See all 9 builds" text affordance. A
 * novice recognizes a build and buys without ever opening the per-layer
 * controls below. */
.smc-tool .mt-buildpicker { margin: 0 0 16px; }
.smc-tool .mt-buildpicker__head {
  margin: 0 0 10px;
  font-family: var(--font);
  font-size: 13px; font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--ink);
}
.smc-tool .mt-buildpicker__cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
/* Expanded "See all builds" view: 11 cards (9 popular + 2 uncommon) read
 * better in a denser 3-up grid so the full set fits without each card
 * stretching to half-width. */
.smc-tool .mt-buildpicker__cards--all {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 480px) {
  .smc-tool .mt-buildpicker__cards,
  .smc-tool .mt-buildpicker__cards--all { grid-template-columns: 1fr; }
}

/* Each build is a single full-card button. */
.smc-tool .mt-buildcard {
  position: relative;
  display: flex; align-items: flex-start; gap: 12px;
  text-align: left;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  cursor: pointer;
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease), transform .12s var(--ease);
}
.smc-tool .mt-buildcard:hover { border-color: var(--plum); transform: translateY(-1px); }
.smc-tool .mt-buildcard:focus-visible { outline: 2px solid var(--plum); outline-offset: 2px; }
.smc-tool .mt-buildcard[aria-pressed="true"] {
  border-color: var(--plum-deep);
  box-shadow: 0 0 0 1px var(--plum-deep), var(--shadow-card);
}

/* Mini 3-color latex stack (LATEX_TONE backgrounds set inline). */
.smc-tool .mt-buildcard__stack {
  flex: 0 0 auto;
  display: flex; flex-direction: column;
  width: 16px; height: 40px;
  border-radius: 4px; overflow: hidden;
  border: 1px solid var(--hairline-soft);
}
.smc-tool .mt-buildcard__bar { flex: 1; }

.smc-tool .mt-buildcard__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.smc-tool .mt-buildcard__name {
  font-family: var(--font);
  font-size: 13px; font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--ink);
  line-height: 1.25;
}
.smc-tool .mt-buildcard__desc {
  font-size: 11.5px; line-height: 1.4;
  color: var(--ink-3);
}

/* "Bestseller" ribbon on the default build. */
.smc-tool .mt-buildcard__badge {
  position: absolute;
  top: -8px; right: 10px;
  padding: 2px 8px;
  background: var(--plum-deep);
  color: #fff;
  font-size: 9.5px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  border-radius: var(--radius-pill);
}

/* Selected check — hidden until the card is the live build. */
.smc-tool .mt-buildcard__check {
  position: absolute;
  top: 10px; right: 10px;
  width: 18px; height: 18px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--plum-deep);
  color: #fff;
  font-size: 11px; line-height: 1;
  opacity: 0; transform: scale(.8);
  transition: opacity .15s var(--ease), transform .15s var(--ease);
}
.smc-tool .mt-buildcard[aria-pressed="true"] .mt-buildcard__check { opacity: 1; transform: scale(1); }
/* When the badge and check would collide (default build, selected), nudge the
   check down so both read clearly. */
.smc-tool .mt-buildcard__badge + .mt-buildcard__stack ~ .mt-buildcard__check { top: 14px; }

.smc-tool .mt-buildpicker__seeall {
  display: inline-block;
  margin-top: 10px;
  padding: 4px 2px;
  background: none; border: none;
  font-family: var(--font);
  font-size: 12.5px; font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--plum-deep);
  cursor: pointer;
  transition: color .15s var(--ease);
}
.smc-tool .mt-buildpicker__seeall:hover { color: var(--ink); }
.smc-tool .mt-buildpicker__seeall:focus-visible { outline: 2px solid var(--plum); outline-offset: 3px; border-radius: 2px; }

/* ---- Customize disclosure toggle: defers the per-layer controls -------- */
.smc-tool .mt-customize {
  display: inline-flex; align-items: center; gap: 8px;
  width: 100%;
  margin: 0 0 12px;
  padding: 12px 14px;
  background: var(--paper);
  border: 1px dashed var(--hairline);
  border-radius: var(--radius-card);
  font-family: var(--font);
  font-size: 13px; font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--ink-2);
  cursor: pointer;
  transition: border-color .15s var(--ease), color .15s var(--ease), background .15s var(--ease);
}
.smc-tool .mt-customize:hover { border-color: var(--plum); color: var(--ink); }
.smc-tool .mt-customize:focus-visible { outline: 2px solid var(--plum); outline-offset: 2px; }
.smc-tool .mt-customize__ic {
  display: inline-grid; place-items: center;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--plum-soft);
  color: var(--plum-deep);
  font-size: 14px; line-height: 1; font-weight: 700;
  transition: transform .18s var(--ease);
}
.smc-tool .mt-customize.is-open .mt-customize__ic { transform: rotate(45deg); }

/* One-line contextual coaching inside the active layer panel. */
.smc-tool .lc-coach {
  margin: 0 0 12px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 12.5px; line-height: 1.5;
  color: var(--ink-3);
}

/* ====================== Size chips ====================== */
.size-row {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 16px; /* v1.7.5 — was 24 */
}
@media (max-width: 640px) { .size-row { grid-template-columns: repeat(3, 1fr); } }
.size-pill {
  padding: 10px 8px 8px; /* v1.7.5 — was 14/8/10 */
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  transition: all .2s var(--ease);
  position: relative;
}
/* v1.7.4 — Proportional bed thumbnail. Shared SVG viewBox across all six
   pills means visual size = real size: Twin renders ~half as wide as Cal
   King. Pillow fold communicates "bed" vs. abstract rectangle. */
.size-pill .sz-thumb {
  display: block;
  width: 100%;
  height: 44px; /* v1.7.5 — was 56 */
  display: flex; align-items: flex-end; justify-content: center;
}
.size-pill .sz-thumb svg {
  width: 100%;
  height: 100%;
  display: block;
}
/* Inactive thumbnail: bumped plum mix for clear visibility (was 8% / 14%
   which read as faint shapes on the cream paper background). */
.size-pill .sz-thumb__bed {
  fill: color-mix(in srgb, var(--plum-deep, #7A4F8C) 24%, var(--paper));
  stroke: color-mix(in srgb, var(--plum-deep, #7A4F8C) 50%, var(--hairline));
  stroke-width: 1.2;
  transition: fill .25s var(--ease), stroke .25s var(--ease);
}
.size-pill .sz-thumb__pillow {
  fill: color-mix(in srgb, var(--plum-deep, #7A4F8C) 38%, var(--paper));
  stroke: color-mix(in srgb, var(--plum-deep, #7A4F8C) 50%, var(--hairline));
  stroke-width: 0.6;
  transition: fill .25s var(--ease), stroke .25s var(--ease);
}
.size-pill .sz-name {
  font-size: 13px; font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--ink);
  line-height: 1.2;
  margin-top: 2px;
}
.size-pill .sz-dim {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-3);
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}
.size-pill:hover {
  border-color: color-mix(in srgb, var(--plum-deep, #7A4F8C) 50%, var(--hairline));
  transform: translateY(-1px);
}
.size-pill:hover .sz-thumb__bed {
  fill: color-mix(in srgb, var(--plum-deep, #7A4F8C) 32%, var(--paper));
}
/* v1.7.4 — Selected pill is plum-deep (on-brand) rather than black ink.
   Bed renders in plum-soft (cream-purple) for a clean, bright contrast
   against the plum-deep background. Pillow goes paper-cream — brightest
   element, draws the eye. */
.size-pill[aria-pressed="true"] {
  background: var(--plum-deep); border-color: var(--plum-deep);
  box-shadow: 0 6px 18px -10px color-mix(in srgb, var(--plum-deep, #7A4F8C) 60%, transparent);
}
.size-pill[aria-pressed="true"] .sz-name { color: var(--paper); }
.size-pill[aria-pressed="true"] .sz-dim { color: rgba(247, 243, 234, 0.72); }
/* Bed uses --plum (brighter mid-purple) for a richer mid-tone between
   the plum-deep background and the bright cream pillow — gives a clear
   3-tone hierarchy: dark / mid / light, instead of the prior 2-tone
   that washed out the bed shape. */
.size-pill[aria-pressed="true"] .sz-thumb__bed {
  fill: var(--plum);
  stroke: color-mix(in srgb, var(--paper) 70%, var(--plum-soft));
  stroke-width: 1.2;
}
.size-pill[aria-pressed="true"] .sz-thumb__pillow {
  fill: var(--paper);
  stroke: rgba(247, 243, 234, 0.7);
  stroke-width: 0.6;
}
.size-pill:focus-visible { outline: 2px solid var(--plum); outline-offset: 2px; }

/* ====================== Mattress stage ====================== */
/* v1.7.5 — Compressed mattress stage. Padding 48/32 → 24/20 (saves 36px),
   margin-bottom 24 → 14 (saves 10px). Total ~46px reclaimed without
   touching the visual itself. */
.mattress-stage {
  background: var(--paper-2);
  border: 1px solid var(--hairline-soft);
  border-radius: var(--radius-card);
  padding: 24px 32px 20px;
  margin-bottom: 14px;
  position: relative;
}
.mattress {
  position: relative;
  margin: 0 auto;
  width: min(620px, 100%);
  outline: none;
  display: flex; flex-direction: column;
}
.mt-case-top, .mt-case-bot {
  height: 10px;
  background:
    repeating-linear-gradient(-45deg, #E8DFCC, #E8DFCC 3px, #E0D5BD 3px, #E0D5BD 4px);
  border: 1px solid var(--hairline);
  position: relative;
}
.mt-case-top { border-radius: 6px 6px 0 0; border-bottom: none; }
.mt-case-bot { border-radius: 0 0 6px 6px; border-top: none; }

.mt-layer {
  position: relative;
  min-height: 64px; /* v1.7.5 — was 76px; saves 36px across 3 layers */
  margin: 0;
  border-left: 1px solid var(--hairline);
  border-right: 1px solid var(--hairline);
  cursor: pointer;
  outline: none;
  overflow: visible;
  transition: filter .2s var(--ease), transform .25s var(--ease);
  display: flex;
  align-items: center;
}

/* Plum focus outline overlay */
.mt-layer::before {
  content: "";
  position: absolute; inset: 0;
  opacity: 0;
  border: 2px solid var(--plum);
  border-radius: 2px;
  pointer-events: none;
  transition: opacity .2s var(--ease);
  z-index: 2;
}
.mt-layer.focused::before { opacity: 1; }
.mt-layer:hover:not(.focused) { filter: brightness(1.04); }
.mt-layer:focus-visible { outline: 2px solid var(--plum); outline-offset: 3px; }

/* =====================================================================
 * v1.6.0 — Step 2 focus-driven dimming
 * ---------------------------------------------------------------------
 * When state.focusedLayer != null, .md-stack-grid carries .is-focus-mode
 * (toggled inside renderMattress() — see configurator.js). This mutes the
 * non-focused mattress layers so the focused layer + its editor own the eye.
 * (Task 4 removed the Popular-Configs / Learn-more selectors that this block
 * also dimmed — those sections no longer exist in the calm Step 2.)
 * Spec: docs/superpowers/specs/2026-04-27-step2-focus-dimming-design.md
 * ================================================================== */
.smc-modal[data-mode="wizard"] .is-focus-mode .mt-layer:not(.focused) {
  opacity: 0.55;
  transition: opacity .2s var(--smc-w-ease);
}

/* Reduced motion — opacity still changes, just without the fade. */
@media (prefers-reduced-motion: reduce) {
  .smc-modal[data-mode="wizard"] .is-focus-mode .mt-layer:not(.focused) {
    transition: none;
  }
}


/* Half / split handling */
.mt-layer .half { flex: 1 1 50%; position: relative; display: flex; align-items: center; }
.mt-layer .half + .half { border-left: 2px dashed rgba(26, 17, 29, 0.18); }
.mt-layer:not(.split) .half { flex-basis: 100%; }
.mt-layer:not(.split) .half + .half { display: none; }

.mt-layer-label {
  position: absolute;
  top: 50%; left: 16px;
  transform: translateY(-50%);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 500;
  color: rgba(26, 17, 29, 0.68);
  pointer-events: none;
  transition: opacity .16s var(--ease);
}
.mt-layer .half + .half .mt-layer-label { left: auto; right: 16px; }

/* Darker layers (Dunlop firm / Talalay firm) flip the label to paper color */
.mt-layer[data-latex="dunlop"][data-firmness="firm"] .mt-layer-label,
.mt-layer[data-latex="talalay"][data-firmness="firm"] .mt-layer-label {
  color: rgba(247, 243, 234, 0.88);
}

/* Inline latex-type badge chip */
.mt-layer .layer-badge-chip {
  position: absolute;
  top: 50%; right: 16px;
  transform: translateY(-50%);
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px 3px 4px;
  background: rgba(247, 243, 234, 0.88);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-pill);
  font-size: 10.5px; font-weight: 500;
  color: var(--ink);
  pointer-events: none;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.mt-layer .layer-badge-chip__dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  border: 1px solid rgba(26, 17, 29, 0.18);
}
.mt-layer .half + .half .layer-badge-chip { left: auto; right: 16px; }

.mt-layer.split .half.left  { animation: smc-slideL .35s var(--ease); }
.mt-layer.split .half.right { animation: smc-slideR .35s var(--ease); }
@keyframes smc-slideL { from { transform: translateX(6px); opacity:.6; } to { transform: translateX(0); opacity:1; } }
@keyframes smc-slideR { from { transform: translateX(-6px); opacity:.6; } to { transform: translateX(0); opacity:1; } }

/* ====================== Split-layer polish (v1.5.0) ======================
   Repairs the stack-step split paint: parent .mt-layer was using
   `align-items: center`, collapsing the empty .half flex children to height 0.
   We stretch them to full layer height and clear the parent bg so the halves
   paint. Cream hairline replaces the existing 2px dashed divider when split.
   Material chips anchor to outside edges so left chip → left half edge, etc.
   ========================================================================== */
.mt-layer.split { background: transparent; align-items: stretch; }
.mt-layer.split .half { align-self: stretch; min-height: 100%; }
.mt-layer.split .half + .half {
  border-left: 1px solid rgba(247, 243, 234, 0.92);
  box-shadow: -1px 0 0 0 rgba(26, 17, 29, 0.06);
}
.mt-layer.split .half.left  .layer-badge-chip { left: 14px;  right: auto; }
.mt-layer.split .half.right .layer-badge-chip { right: 14px; left: auto; }

/* L1: split with MATCHED sides — show both labeled halves (same tone) so a
   split never looks identical to solid. Reveals the right half and lays the
   two out side by side, but the seam stays the single is-split-construction
   ::after line (the dashed .half border is suppressed to avoid a double seam).
   Two-tone paint + slide animation stay reserved for .split (differing sides). */
.mt-layer.is-split-visible { align-items: stretch; }
.mt-layer.is-split-visible .half { flex-basis: 50%; align-self: stretch; min-height: 100%; }
.mt-layer.is-split-visible .half + .half { display: flex; border-left: none; box-shadow: none; }
.mt-layer.is-split-visible .half.right .layer-badge-chip { right: 14px; left: auto; }
/* The left-half chip must clear the numbered tag — shares the .split offsets
   (page 110px / modal 78px / mobile stack) defined further below. */

/* Honest seam: every split-construction layer shows its center line, even
   when both halves match. Pseudo-element only — the .half machinery and the
   .split (two-tone) semantics are untouched (v1.5.0 height-collapse guard). */
.mt-layer.is-split-construction::after {
  content: "";
  position: absolute;
  top: 4px; bottom: 4px; left: 50%;
  width: 2px;
  transform: translateX(-50%);
  background: rgba(247, 243, 234, 0.92);
  box-shadow: -1px 0 0 rgba(26, 17, 29, 0.10), 1px 0 0 rgba(26, 17, 29, 0.06);
  border-radius: 1px;
  pointer-events: none;
  z-index: 1;
}
/* Two-tone layers draw their seam via the .half border — suppress the overlay. */
.mt-layer.split::after { content: none; }

/* v1.5.0 — partner eyebrow on split layers (stack visual) */
.mt-layer-eyebrow {
  position: absolute;
  top: -8px; left: 14px;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 9px 2px 7px;
  background: var(--plum);
  color: var(--paper);
  font-size: 9.5px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  font-weight: 600;
  border-radius: 999px;
  z-index: 3;
  line-height: 1.55;
  box-shadow: 0 1px 0 0 rgba(26, 17, 29, 0.10);
}
.mt-layer-eyebrow::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(247, 243, 234, 0.78);
}

.mattress-caption {
  text-align: center;
  margin-top: 10px; /* v1.7.5 — was 16px */
  font-family: var(--serif);
  font-style: italic;
  font-size: 12px;
  color: var(--ink-3);
}

/* ====================== Side headers (Task 3) ====================== */
.mt-side-headers {
  display: flex; justify-content: space-around;
  margin: 0 auto 6px;
  /* Explicit width: in flex-centered parents (modal stage) the container
     would otherwise shrink-wrap and collapse space-around to nothing. */
  width: 92%; max-width: 92%;
}
.mt-side-headers[hidden] { display: none; }
/* Fade the headers in instead of popping — part of the calm split entry. */
.mt-side-headers:not([hidden]) { animation: smc-fadeIn .3s var(--ease); }
@media (prefers-reduced-motion: reduce) {
  .mt-side-headers:not([hidden]) { animation: none; }
}
.mt-side-headers__side {
  font-size: 10px; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-3);
}
.smc-modal .mt-side-headers__side { font-size: 9px; }

/* ====================== Active layer controls ====================== */
.layer-controls {
  margin-top: 18px;
  border: 1px solid var(--hairline);
  background: var(--paper);
  border-radius: var(--radius-card);
  padding: 18px 20px;
  display: none;
  box-shadow: var(--shadow-card);
  animation: smc-drop .25s var(--ease);
}
.layer-controls.open { display: block; }
@keyframes smc-drop {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.lc-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  margin-bottom: 14px;
  gap: 12px; flex-wrap: wrap;
}
.lc-title {
  font-size: 13.5px; font-weight: 500;
  color: var(--ink);
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
}
.lc-pos {
  display: inline-block;
  padding: 3px 10px;
  background: transparent;
  color: var(--ink-3);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-pill);
  font-size: 10.5px; letter-spacing: 0.14em;
  text-transform: uppercase; font-weight: 500;
}
.lc-sub {
  font-family: var(--serif);
  font-style: italic;
  font-size: 12.5px;
  color: var(--ink-3);
  margin-top: 4px;
  flex-basis: 100%;
}

.lc-groups {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: end;
}
@media (max-width: 720px) { .lc-groups { grid-template-columns: 1fr; } }
/* Per-side firmness lives IN the firmness cell (two compact Left/Right rows)
   — the grid never collapses, so Latex keeps its exact size and position when
   "different feel per side" turns on. Spatial stability is the point. */
/* While the firmness cell is taller (two rows), pin cells to the top so the
   latex cell doesn't slide down with the grid's default align-items:end. */
.layer-controls.split-active .lc-groups { align-items: start; }
.lc-perside__row {
  display: flex; align-items: center; gap: 8px;
}
/* Entrance fade plays only when per-side mode turns ON (.split-entering is a
   one-shot flag) — re-renders while clicking around inside it stay still. */
.layer-controls.split-entering .lc-perside__row {
  animation: smc-perside-in .24s var(--ease) both;
}
.lc-perside__row + .lc-perside__row { margin-top: 6px; }
.layer-controls.split-entering .lc-perside__row[data-side="right"] { animation-delay: .05s; }
.lc-perside__side {
  flex: 0 0 36px;
  font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; font-weight: 600;
  color: var(--plum-deep);
}
.lc-perside__row .segmented { flex: 1 1 auto; }
.lc-perside__row .segmented button { padding: 6px 8px; }
/* Touch: compact rows must still clear the 40px tap-target floor. */
@media (max-width: 720px) {
  .lc-perside__row .segmented button { padding: 8px 10px; min-height: 40px; }
}
@keyframes smc-perside-in {
  from { opacity: 0; transform: translateY(-3px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .layer-controls.split-entering .lc-perside__row { animation: none; }
}
.lc-group .lc-label {
  display: block;
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--ink-3);
  margin-bottom: 6px;
}

.segmented {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  background: var(--paper-2);
  border: 1px solid var(--hairline-soft);
  border-radius: 8px;
  padding: 3px;
  gap: 2px;
}
.segmented button {
  padding: 8px 10px;
  background: transparent;
  border: none;
  border-radius: 6px;
  font-family: var(--font);
  font-size: 12.5px; font-weight: 500;
  color: var(--ink-3);
  letter-spacing: 0.02em;
  transition: all .15s var(--ease);
}
.segmented button:hover { color: var(--ink); }
.segmented button[aria-checked="true"] {
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(26, 17, 29, 0.08);
}
.segmented button:focus-visible { outline: 2px solid var(--plum); outline-offset: 2px; }

/* Split toggle */
.split-toggle {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 12px;
  background: transparent;
  border: none;
  font-size: 12.5px; font-weight: 500;
  color: var(--ink-2);
  position: relative;
  transition: color .15s var(--ease);
  margin-top: 8px;
  padding-top: 12px;
  border-top: 1px dashed var(--hairline-soft);
  border-radius: 0;
  width: 100%;
  justify-content: flex-start;
}
.split-toggle:hover { color: var(--ink); }
.split-toggle[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.split-toggle .sw {
  width: 34px; height: 20px;
  background: var(--paper-3);
  border-radius: 999px;
  position: relative;
  transition: background .2s var(--ease);
  flex-shrink: 0;
}
.split-toggle .sw::after {
  content: "";
  position: absolute;
  top: 2px; left: 2px;
  width: 16px; height: 16px;
  background: var(--paper);
  border-radius: 50%;
  transition: transform .2s var(--ease);
  box-shadow: 0 1px 2px rgba(26, 17, 29, 0.2);
}
.split-toggle[aria-pressed="true"] .sw { background: var(--sage-2); }
.split-toggle[aria-pressed="true"] .sw::after { transform: translateX(14px); }
.split-toggle .tooltip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 12px;
  background: var(--ink);
  color: var(--paper);
  font-size: 11px;
  font-weight: 400;
  padding: 6px 10px;
  border-radius: 6px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s var(--ease);
}
.split-toggle[aria-disabled="true"]:hover .tooltip { opacity: 1; }

/* (The old .lc-split-row / .lc-split-col card block is gone — per-side
   firmness renders in place via .lc-perside__row inside .lc-groups.) */

/* Split hint copy — scoped away from footnote context */
.layer-controls .split-hint:not(.lc-construction__hint) {
  margin-top: 6px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 11.5px;
  color: var(--ink-3);
  line-height: 1.45;
}

/* Construction footnote */
.lc-construction {
  display: flex; align-items: baseline; gap: 6px 8px; flex-wrap: wrap;
  margin-top: 10px; padding-top: 7px; border-top: 1px solid var(--hairline-soft);
}
.lc-construction__label {
  font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3);
}
.lc-construction__hint { font-size: 11.5px; color: var(--ink-3); flex: 1 1 auto; min-width: 0; }
/* The action is a quiet text link, not a switch — footnote weight. The
   resets neutralize the base .split-toggle slider styling it inherits. */
.split-toggle--footnote {
  display: inline; width: auto; flex: 0 0 auto;
  background: none; border: none; margin: 0; padding: 0;
  border-top: none; transform: none;
  color: var(--plum-deep); font-size: 12px; font-weight: 500;
  text-decoration: underline; text-underline-offset: 2px;
  cursor: pointer;
}
.split-toggle--footnote:hover { color: var(--ink); }
.split-toggle--footnote:focus-visible { outline: 2px solid var(--plum); outline-offset: 2px; }
.split-toggle--footnote[disabled] { display: none; }
/* ====================== Layer walk nav footer ====================== */
.lc-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; gap: 10px; }
.lc-nav__back {
  background: none; border: none; color: var(--ink-3); font-size: 13px; cursor: pointer; padding: 8px 10px;
}
.lc-nav__next {
  margin-left: auto; background: var(--plum-soft); color: var(--plum-deep);
  border: 1px solid rgba(161,115,178,.35); border-radius: var(--radius-sharp);
  padding: 9px 16px; font-size: 13px; font-weight: 600; cursor: pointer;
}
.lc-nav__next:hover { background: var(--plum); color: #fff; }
.lc-nav__back:focus-visible,
.lc-nav__next:focus-visible { outline: 2px solid var(--plum); outline-offset: 2px; }
/* ====================== Feedback bar ====================== */
.feedback {
  position: relative;
  margin-top: 16px;
  padding: 12px 40px 12px 18px;
  border-radius: var(--radius-card);
  font-family: var(--serif);
  font-style: italic;
  font-size: 13px;
  line-height: 1.4;
  background: var(--sage-pale);
  border: 1px solid rgba(122, 171, 103, 0.22);
  color: var(--ink-2);
  display: flex;
  align-items: center;
  gap: 12px;
  transition: background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
}
.feedback::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--sage-2);
  flex-shrink: 0;
  box-shadow: 0 0 0 3px rgba(122, 171, 103, 0.2);
}
.feedback.uncommon {
  background: var(--warn-soft);
  border-color: rgba(181, 127, 76, 0.3);
}
.feedback.uncommon::before {
  background: var(--warn);
  box-shadow: 0 0 0 3px rgba(181, 127, 76, 0.2);
}
.feedback.alert {
  background: var(--alert-soft);
  border-color: rgba(184, 73, 59, 0.3);
}
.feedback.alert::before {
  background: var(--alert);
  box-shadow: 0 0 0 3px rgba(184, 73, 59, 0.2);
}
.feedback strong { font-weight: 600; font-style: normal; }
/* Single flex item wrapping the alert sentence — bare text nodes would
   each become their own flex item and fragment into gapped columns. */
.feedback .feedback__text { flex: 1 1 auto; min-width: 0; }
.feedback a {
  color: var(--plum-deep);
  font-weight: 500;
  font-style: normal;
  border-bottom: 1px solid currentColor;
  margin-left: 4px;
}
.feedback.uncommon a { color: #8B5A1E; }
.feedback.alert a    { color: #7D2C23; }
/* .feedback__dismiss removed in v1.3.5 — feedback is guidance, not toast.
   Any stale dismiss button DOM from a cached page is hidden as a safety net. */
.feedback__dismiss { display: none !important; }

/* ====================== Learn-more disclosure row (3 pills) ====================== */
.mt-learn-row {
  margin-top: 12px; /* v1.7.5 — was 20 */
  display: flex; flex-wrap: wrap; gap: 10px;
}
.mt-learn-pill {
  padding: 9px 16px;
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-pill);
  font-family: var(--font);
  font-size: 12.5px; font-weight: 500;
  color: var(--ink-2);
  letter-spacing: 0.01em;
  transition: all .15s var(--ease);
  display: inline-flex; align-items: center; gap: 8px;
}
.mt-learn-pill::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--plum);
  opacity: 0.4;
  transition: opacity .15s var(--ease), background .15s var(--ease);
}
.mt-learn-pill:hover { border-color: var(--plum); color: var(--plum-deep); }
.mt-learn-pill[aria-expanded="true"] {
  background: var(--plum-deep);
  color: #fff;
  border-color: var(--plum-deep);
}
.mt-learn-pill[aria-expanded="true"]::before {
  background: #fff; opacity: 1;
}
.mt-learn-pill:focus-visible { outline: 2px solid var(--plum); outline-offset: 2px; }

.mt-learn-disclosure {
  overflow: hidden;
  max-height: 0;
  transition: max-height .35s var(--ease), margin-top .35s var(--ease);
  margin-top: 0;
}
.mt-learn-disclosure.open {
  max-height: 720px;
  margin-top: 14px;
}
.mt-learn-disclosure[hidden] { display: block !important; } /* keep hidden attr compatible with transition */
.mt-learn-disclosure:not(.open)[hidden] { max-height: 0; margin-top: 0; }
.mt-disclosure-inner {
  background: var(--paper-2);
  border: 1px solid var(--hairline-soft);
  border-radius: var(--radius-card);
  padding: 20px 22px;
}
.mt-disclosure-panel { display: none; }
.mt-disclosure-panel.active { display: block; animation: smc-fadeIn .3s var(--ease); }
@keyframes smc-fadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ====================== Price row / sticky footer ====================== */
.price-row {
  margin-top: 14px; /* v1.7.5 — was 32 */
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: center;
  padding: 18px 0 4px; /* v1.7.5 — was 32 top */
  border-top: 1px solid var(--hairline);
}
@media (max-width: 720px) { .price-row { grid-template-columns: 1fr; } }
.price-block { display: flex; flex-direction: column; min-width: 0; }
.price-block .label,
.price-block .eyebrow {
  font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase; font-weight: 600; color: var(--ink-3);
  margin-bottom: 6px;
}
.price-block .amount,
.price-block .price,
.price-block .amt {
  font-family: var(--font);
  font-size: var(--fs-display); font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.price-block .affirm,
.price-block .finance {
  margin-top: 8px;
  font-family: var(--font);
  font-size: 13px;
  color: var(--ink-3);
  letter-spacing: 0.01em;
}
.price-block .affirm .mo { color: var(--plum-deep); font-weight: 600; }

.actions {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  justify-content: flex-end;
}

/* ====================== Buttons ======================
 * Scoped under .smc-tool / .smc-modal to raise specificity (011) above the
 * `.smc-tool button, .smc-modal button` reset which otherwise wins against
 * bare `.btn-primary`. */
.smc-tool .btn-tertiary, .smc-modal .btn-tertiary,
.smc-tool .btn-secondary, .smc-modal .btn-secondary,
.smc-tool .btn-primary, .smc-modal .btn-primary {
  font-family: var(--font);
  font-size: 13px; font-weight: 500;
  letter-spacing: 0.04em;
  border-radius: var(--radius-btn);
  border: 1px solid transparent;
  white-space: nowrap;
  transition: all .18s var(--ease);
}
.smc-tool .btn-tertiary, .smc-modal .btn-tertiary {
  color: var(--ink-3);
  padding: 11px 16px;
  background: transparent;
  border-color: transparent;
}
.smc-tool .btn-tertiary:hover, .smc-modal .btn-tertiary:hover { color: var(--ink); }
.smc-tool .btn-secondary, .smc-modal .btn-secondary {
  color: var(--ink);
  padding: 11px 20px;
  background: transparent;
  border: 1px solid var(--ink);
}
.smc-tool .btn-secondary:hover, .smc-modal .btn-secondary:hover {
  background: var(--ink); color: var(--paper);
}
.smc-tool .btn-primary, .smc-modal .btn-primary {
  color: #fff;
  background: var(--plum-deep);
  padding: 14px 28px;
  border: 1px solid var(--plum-deep);
  font-size: 14px;
  box-shadow: 0 1px 2px rgba(122,79,140,.2), 0 8px 24px -8px rgba(122,79,140,.3);
}
.smc-tool .btn-primary:hover, .smc-modal .btn-primary:hover {
  background: var(--ink); border-color: var(--ink);
  transform: translateY(-1px);
  box-shadow: 0 1px 2px rgba(26,17,29,.2), 0 12px 28px -8px rgba(26,17,29,.35);
}
.smc-tool .btn-primary:active, .smc-modal .btn-primary:active { transform: translateY(0); }
.smc-tool .btn-primary:focus-visible, .smc-modal .btn-primary:focus-visible,
.smc-tool .btn-secondary:focus-visible, .smc-modal .btn-secondary:focus-visible,
.smc-tool .btn-tertiary:focus-visible, .smc-modal .btn-tertiary:focus-visible {
  outline: 2px solid var(--plum); outline-offset: 2px;
}
.smc-tool .btn-primary[disabled], .smc-modal .btn-primary[disabled],
.smc-tool .btn-primary.smc-busy, .smc-modal .btn-primary.smc-busy {
  opacity: .6; cursor: not-allowed; transform: none;
}

/* v1.7.6 — Persistent "Added" confirmation. Triggered for ~3.5s after a
 * successful add-to-cart, on every [data-role="add-to-cart"] button (inline
 * price-row, sticky dock, and the modal CTA). Hides the existing children
 * via visibility (so price spans stay queryable for renderPrice) and
 * overlays "✓ Added" via ::before. Sage-green tint signals success without
 * shifting layout — the button keeps the same width/padding as default. */
.smc-tool .btn-primary.is-added,
.smc-modal .btn-primary.is-added {
  position: relative;
  background: #6E8C58; /* sage-green success tint */
  border-color: #6E8C58;
  /* color: transparent hides the button's bare text node (e.g. "Add to
     cart") which would otherwise show through the ::before overlay. The
     ::before sets its own white color, so it's unaffected. */
  color: transparent;
  cursor: default;
  pointer-events: none;
  transform: none;
}
.smc-tool .btn-primary.is-added:hover,
.smc-modal .btn-primary.is-added:hover {
  background: #6E8C58;
  border-color: #6E8C58;
  transform: none;
}
/* Also hide any nested spans (the modal button has [data-role="price"]
   inside; we need both color:transparent for bare text + visibility:hidden
   for spans because spans can carry their own color). */
.smc-tool .btn-primary.is-added > *,
.smc-modal .btn-primary.is-added > * {
  visibility: hidden;
}
.smc-tool .btn-primary.is-added::before,
.smc-modal .btn-primary.is-added::before {
  content: "\2713  Added";  /* ✓ + two-space gap */
  position: absolute;
  inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: inherit;
  font-weight: 600;
  font-size: inherit;
  letter-spacing: 0.005em;
  color: #FFF;
  animation: smcAddedFadeIn 240ms ease-out;
}
@keyframes smcAddedFadeIn {
  0%   { opacity: 0; transform: scale(0.96); }
  100% { opacity: 1; transform: scale(1);    }
}
@media (prefers-reduced-motion: reduce) {
  .smc-tool .btn-primary.is-added::before,
  .smc-modal .btn-primary.is-added::before { animation: none; }
}

/* ====================== Sidebar (kept for back-compat, but hidden by default) ====================== */
.mt-sidebar { display: none; }
.mt-side-card {
  background: var(--paper-2);
  border: 1px solid var(--hairline-soft);
  border-radius: var(--radius-card);
  padding: 20px;
}
.mt-side-card h3 {
  margin: 0 0 12px;
  font-family: var(--serif);
  font-size: 16px; font-weight: 500;
  letter-spacing: -0.005em;
}
.mt-side-card .eyebrow {
  font-size: 10.5px; letter-spacing: 0.14em;
  text-transform: uppercase; font-weight: 500;
  color: var(--ink-3);
  margin-bottom: 6px;
}

/* Dunlop vs. Talalay comparison (used inside disclosure panel) */
.vs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { .vs-grid { grid-template-columns: 1fr; } }
.vs-col {
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  padding: 14px;
  background: var(--paper);
}
.vs-col h4 {
  margin: 0 0 4px;
  font-family: var(--serif);
  font-size: 15px; font-weight: 500;
  font-style: italic;
  color: var(--ink);
}
.vs-col .vs-sub {
  font-family: var(--serif);
  font-style: italic;
  font-size: 12px;
  color: var(--ink-3);
  margin: 0 0 10px;
}
.vs-density { height: 6px; border-radius: 3px; margin-bottom: 10px; }
.vs-density.dunlop  { background: linear-gradient(90deg, var(--dunlop-soft),  var(--dunlop-firm));  }
.vs-density.talalay { background: linear-gradient(90deg, var(--talalay-soft), var(--talalay-firm)); }
.vs-attrs {
  list-style: none; padding: 0; margin: 0 0 10px;
  font-size: 12.5px; color: var(--ink-2);
}
.vs-attrs li { display: flex; gap: 8px; padding: 3px 0; }
.vs-attrs li::before {
  content: "·";
  color: var(--plum-deep);
  font-weight: 700;
}
.vs-cost {
  font-size: 10.5px; color: var(--ink-3);
  letter-spacing: 0.12em; text-transform: uppercase; font-weight: 500;
}
.vs-cost strong { color: var(--plum-deep); font-weight: 600; letter-spacing: 0.02em; }
.vs-desc {
  font-size: 12.5px; color: var(--ink-3);
  line-height: 1.5;
  margin: 10px 0 0;
}

/* How-layers rows (used inside disclosure panel) */
.lf-card {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid var(--hairline-soft);
}
.lf-card:last-of-type { border-bottom: none; }
.lf-card:first-of-type { padding-top: 2px; }
.lf-ix {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 14px;
  color: var(--ink);
  background: transparent;
  width: auto; height: auto;
  display: block;
  border-radius: 0;
  padding: 0;
}
.lf-ix::after {
  content: attr(data-sub);
  display: block;
  font-family: var(--font);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 2px;
  font-weight: 500;
  font-style: normal;
}
.lf-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
}
.lf-copy {
  font-size: 12.5px;
  color: var(--ink-3);
  line-height: 1.5;
  margin-top: 4px;
}

/* Sleep-position guidance copy (inside disclosure panel). The interactive
   sp-tiles were retired in the presets-first redesign — sleep guidance now
   reads as plain prose that points users to the rail build-picker. */
.sp-guide { display: flex; flex-direction: column; gap: 10px; }
.sp-guide p {
  margin: 0;
  font-size: 13px; line-height: 1.55;
  color: var(--ink-3);
}
.sp-guide p b { color: var(--ink); font-weight: 600; }
.sp-guide__nudge {
  margin-top: 4px !important;
  font-family: var(--serif); font-style: italic;
  color: var(--ink-2) !important;
}

/* (Removed: .pop-gallery / .pop-card / .pop-stack / .pop-* — the bottom
   "Not sure where to start?" gallery was retired in the presets-first
   redesign; the rail build-picker is now the single preset entry point.) */

/* ====================== Advanced accordion ====================== */
.adv {
  margin: 28px auto 16px; /* v1.7.5 — was 48/24 */
  border-top: 1px solid var(--hairline);
  padding: 28px 40px 20px; /* v1.7.5 — was 40/24 */
  max-width: 1240px;
}
@media (max-width: 720px) { .adv { padding-left: 20px; padding-right: 20px; } }
.smc-modal .adv { max-width: none; padding-left: 0; padding-right: 0; margin: 0; }
/* v1.7.3 — Learn-more heading uses the same display vocabulary as the
   "Not sure where to start?" h2 — 32px, light weight, tight tracking. */
.adv-head {
  font-family: var(--font);
  font-size: 32px; font-weight: 300;
  letter-spacing: -0.025em;
  line-height: 1.1;
  color: var(--ink);
  margin: 0 0 14px;
}
.adv-sub {
  font-size: 14px;
  color: var(--ink-3);
  margin: 0 0 26px;
  max-width: 60ch;
  line-height: 1.5;
  letter-spacing: -0.005em;
}
.adv-item { border-top: 1px solid var(--hairline); }
.adv-item:last-child { border-bottom: 1px solid var(--hairline); }
.adv-trigger {
  width: 100%;
  padding: 18px 0;
  border-radius: 0; /* flat accordion bar — block theme's 30px button bleed */
  display: flex; justify-content: space-between; align-items: center;
  gap: 20px;
  text-align: left;
  font-family: var(--font);
  font-size: 15px; font-weight: 500;
  color: var(--ink);
  transition: color .2s var(--ease);
}
.adv-trigger:hover { color: var(--plum-deep); }
.adv-trigger .ic {
  flex: 0 0 24px;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--hairline);
  color: var(--ink-2);
  display: grid; place-items: center;
  font-size: 14px; font-weight: 500;
  transition: transform .25s var(--ease), background .2s var(--ease), color .2s var(--ease);
}
.adv-item.open .adv-trigger .ic {
  transform: rotate(45deg);
  background: var(--ink); color: var(--paper); border-color: var(--ink);
}
.adv-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s var(--ease);
}
.adv-item.open .adv-body { max-height: 600px; }
.adv-inner {
  padding: 4px 0 22px;
  font-size: 13.5px; line-height: 1.6; color: var(--ink-3);
  max-width: 68ch;
}
.adv-inner strong { color: var(--ink); font-weight: 500; }

/* ====================== Modal overlay ====================== */
.smc-modal[hidden] { display: none; }
.smc-modal:not([hidden]) {
  position: fixed; inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  background: rgba(26, 17, 29, 0.70);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  animation: smc-modalFade .35s var(--ease) forwards;
}
@keyframes smc-modalFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.md-backdrop {
  position: absolute; inset: 0;
  background: transparent;
  pointer-events: auto;
  cursor: pointer;
  z-index: 1;
}
.md-wrap {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1080px;
  max-height: min(90vh, 820px);
  display: flex;
  pointer-events: auto;
}
.md-panel {
  width: 100%;
  background: var(--paper);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-panel);
  display: flex; flex-direction: column;
  overflow: hidden;
  position: relative;
  animation: smc-panelLift .45s var(--ease) forwards;
  transform-origin: center bottom;
  max-height: min(90vh, 820px);
}
@keyframes smc-panelLift {
  from { opacity: 0; transform: translateY(20px) scale(.985); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.md-header {
  padding: 22px 32px 18px;
  border-bottom: 1px solid var(--hairline);
  background: var(--paper);
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px;
  flex: 0 0 auto;
}
.md-header-title .crumb,
.md-header-title .eyebrow,
.md-header .crumb {
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--ink-3);
  margin-bottom: 6px;
}
.md-header h3 {
  margin: 0;
  font-family: var(--serif);
  font-size: 24px; font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.005em;
  color: var(--ink);
}
.md-header h3 em {
  font-style: italic;
  color: var(--plum-deep);
  font-weight: 400;
}
.md-close {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid var(--hairline);
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-2);
  font-size: 0; /* zero-out any text baseline so SVG is perfectly centered */
  line-height: 0;
  padding: 0;
  flex-shrink: 0;
  transition: background .18s var(--ease), color .18s var(--ease), transform .18s var(--ease), border-color .18s var(--ease);
}
.md-close > svg, .md-close > * { display: block; }
.md-close:hover {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
  transform: rotate(90deg);
}
.md-close:focus-visible { outline: 2px solid var(--plum); outline-offset: 2px; }

.md-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 24px 32px 28px;
  scrollbar-width: thin;
  scrollbar-color: var(--hairline) transparent;
}
.md-body::-webkit-scrollbar { width: 8px; }
.md-body::-webkit-scrollbar-thumb { background: var(--hairline); border-radius: 4px; }

.md-footer {
  flex: 0 0 auto;
  padding: 18px 32px;
  border-top: 1px solid var(--hairline);
  background: var(--paper);
  display: flex;
  align-items: center; justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.md-price {
  display: flex; flex-direction: column;
}
.md-price .eyebrow {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--ink-3);
  margin-bottom: 2px;
}
.md-price .amt {
  font-family: var(--serif);
  font-size: 24px; font-weight: 500;
  line-height: 1;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.md-price .finance {
  font-size: 11px;
  color: var(--ink-3);
  margin-top: 4px;
  font-family: var(--serif);
  font-style: italic;
}
.md-footer .actions {
  display: flex; align-items: center; gap: 10px;
}
.md-footer .footer-actions {
  display: flex; align-items: center; gap: 10px;
}

/* Inside-modal sizing tweaks */
.smc-modal .mt-tool { padding: 0; }
.smc-modal .smc-tool { background: transparent; }

/* Inside modal, the .md-footer surfaces price + ATC, so the sticky
   dock is redundant and would overlay the modal's footer buttons. */
.smc-modal .smc-dock { display: none !important; }

/* Mobile: modal becomes near-fullscreen */
@media (max-width: 780px) {
  .smc-modal:not([hidden]) { padding: 0; }
  .md-wrap { max-height: 100vh; }
  .md-panel {
    max-width: 100%;
    max-height: 100vh;
    border-radius: 0;
    height: 100vh;
  }
  .md-header, .md-body, .md-footer { padding-left: 18px; padding-right: 18px; }
  .md-footer { flex-direction: column; align-items: stretch; gap: 14px; padding: 16px 18px; }
  .md-footer .actions,
  .md-footer .footer-actions { justify-content: space-between; width: 100%; }
  .md-footer .actions .btn-primary,
  .md-footer .actions .btn-secondary { flex: 1; text-align: center; }
}

/* ====================== Toast ====================== */
/* Toast — used by both .smc-tool (in-context) and a body-level instance
 * created by ensureToastEl() after the modal closes on add-to-cart. The
 * fallback values in each var() let the body-level instance render
 * correctly even though --ink/--paper/etc are scoped to .smc-tool/.smc-modal
 * (line 17–18) and don't cascade to <body>. z-index needs to clear sticky
 * theme headers / mini-cart drawers — bumped to 9999. */
.toast {
  position: fixed;
  bottom: 32px; left: 50%;
  transform: translate(-50%, 20px);
  background: var(--ink, #1A111D);
  color: var(--paper, #F7F3EA);
  padding: 12px 22px;
  border-radius: var(--radius-pill, 999px);
  font-size: 13.5px; font-weight: 500;
  letter-spacing: 0.02em;
  box-shadow: 0 10px 30px rgba(26, 17, 29, .3);
  opacity: 0;
  pointer-events: none;
  transition:
    opacity .25s var(--ease, cubic-bezier(.22, 1, .36, 1)),
    transform .25s var(--ease, cubic-bezier(.22, 1, .36, 1));
  z-index: 9999;
  display: inline-flex; align-items: center; gap: 10px;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast .check {
  display: inline-grid; place-items: center;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--sage-2, #7AAB67);
  color: var(--paper, #F7F3EA);
  font-size: 11px; font-weight: 700;
}

/* ====================== Mobile sticky ATC (legacy) ====================== */
.mobile-atc {
  display: none;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0));
  background: rgba(247, 243, 234, .95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid var(--hairline);
  z-index: 70;
  justify-content: space-between; align-items: center; gap: 12px;
}
.mobile-atc.visible { display: flex; }
.mobile-atc .m-price {
  font-family: var(--serif);
  font-size: 18px; font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.mobile-atc .m-meta { font-size: 11px; color: var(--ink-3); font-family: var(--serif); font-style: italic; }
.mobile-atc .btn-primary { padding: 11px 20px; }
@media (min-width: 900px) { .mobile-atc { display: none !important; } }

/* ====================== Sticky desktop dock ====================== */
.smc-dock {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 70;
  padding: 12px 24px calc(12px + env(safe-area-inset-bottom, 0));
  background: rgba(247, 243, 234, .94);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid var(--hairline);
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  transform: translateY(100%);
  transition: transform .25s var(--ease);
}
.smc-dock.visible { transform: translateY(0); }
.smc-dock__summary {
  flex: 1 1 auto; min-width: 0;
  font-size: 13px; color: var(--ink-3);
  letter-spacing: -0.005em;
  display: inline-flex; align-items: center;
  flex-wrap: wrap;
  gap: 4px 8px;
}
.smc-dock__size { color: var(--ink); font-weight: 500; }
.smc-dock__build { color: var(--ink); font-weight: 500; }
.smc-dock__sep { color: var(--ink-3); }
/* v1.7.3 — Feel-name chip, sits inline after the build-type. Plum-soft
   pill background with a leading bullet to echo the learn-row dot. */
.smc-dock__feel {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 600;
  letter-spacing: 0.005em;
  color: var(--plum-deep);
  background: var(--plum-soft);
  border-radius: 999px;
  padding: 3px 10px;
  margin-left: 4px;
}
.smc-dock__feel::before {
  content: "";
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--plum-deep);
}
.smc-dock__feel[hidden] { display: none; }
.smc-dock__price { display: flex; align-items: baseline; gap: 10px; }
.smc-dock__amount {
  font-family: var(--serif);
  font-size: 22px; font-weight: 500;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.smc-dock__affirm {
  font-size: 12px; color: var(--ink-3);
  font-family: var(--serif); font-style: italic;
}
.smc-dock__cta { flex: 0 0 auto; }
@media (max-width: 899px) { .smc-dock { display: none !important; } }
@media (prefers-reduced-motion: reduce) { .smc-dock { transition: none; } }

/* ====================== Numbered edit tags (always-visible, replaces hover hint) ====================== */
.mt-layer .mt-layer-label { display: none; }
.mt-layer-tag {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(26, 17, 29, 0.82); color: #fff;
  border-radius: var(--radius-pill); padding: 4px 10px 4px 4px;
  font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  z-index: 3; pointer-events: none;
}
.mt-layer-tag__num {
  display: inline-grid; place-items: center;
  width: 18px; height: 18px; border-radius: 50%;
  background: #fff; color: var(--ink); font-size: 11px;
}
.mt-layer-tag__pen { font-size: 10px; opacity: .75; }
.smc-modal .mt-layer-tag { padding: 3px 8px 3px 3px; font-size: 9px; }
.smc-modal .mt-layer-tag__num { width: 15px; height: 15px; font-size: 9.5px; }
/* Two-tone state: push the left-half badge chip right to clear the tag.
   Page tag is ~80px wide; modal tag compacts to ~64px in a ~187px half,
   so the modal needs its own smaller offset to stay inside the half. */
.smc-tool .mt-layer.split .half.left .layer-badge-chip,
.smc-tool .mt-layer.is-split-visible .half.left .layer-badge-chip { left: 110px; right: auto; }
.smc-modal .mt-layer.split .half.left .layer-badge-chip,
.smc-modal .mt-layer.is-split-visible .half.left .layer-badge-chip { left: 78px; right: auto; }
/* Narrow screens: the half is too short for tag + chip side by side —
   stack them (tag pinned top, chip pinned bottom) inside the left half. */
@media (max-width: 540px) {
  .smc-tool .mt-layer .mt-layer-tag { top: 10px; transform: none; }
  .smc-tool .mt-layer.split .half.left .layer-badge-chip,
  .smc-tool .mt-layer.is-split-visible .half.left .layer-badge-chip {
    left: 12px; right: auto; top: auto; bottom: 8px; transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .mt-layer-label { transition: none; }
}

/* ====================== Accessibility: reduced motion ======================
 * Single consolidated reduced-motion path. After the calm redesign the only
 * remaining motion is: the popup step cross-fade, the single layer "settle",
 * and the modal open lift/fade. This catch-all collapses every animation and
 * transition on the tool + modal to instant, so each of those becomes a cut.
 * (Scattered per-element `transition: none` overrides elsewhere are harmless
 * redundancies under this rule; the layer-settle block additionally pins the
 * settle transform back to identity.) */
@media (prefers-reduced-motion: reduce) {
  .smc-tool *,
  .smc-modal * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
 * Wizard modal (v1.3.0) — scoped to .smc-modal[data-mode="wizard"]
 *
 * 3-step wizard (size / stack / review) ported from
 * docs/design-exploration/mattresstool-v3/modal-B-v2.html.
 * Inline `.smc-tool` (templates/configurator.php) does NOT carry
 * data-mode="wizard" so it stays styled by the v1.2.2 rules above.
 * ============================================================ */

.smc-modal[data-mode="wizard"] {
  /* Layered modal shadow — ambient inner highlight + long soft drop */
  --smc-w-shadow:
    inset 0 1px 0 rgba(255,252,246,0.55),
    inset 0 0 0 1px rgba(26,17,29,0.04),
    0 1px 0 rgba(26,17,29,0.04),
    0 4px 12px -2px rgba(26,17,29,0.12),
    0 24px 48px -12px rgba(26,17,29,0.30),
    0 80px 160px -40px rgba(26,17,29,0.40);
  --smc-w-cta:
    inset 0 1px 0 rgba(255,255,255,0.18),
    0 1px 1px rgba(26,17,29,0.18),
    0 8px 22px -8px rgba(122,79,140,0.42);
  --smc-w-cta-glow:
    inset 0 1px 0 rgba(255,255,255,0.22),
    0 2px 2px rgba(26,17,29,0.18),
    0 12px 32px -10px rgba(122,79,140,0.62);
  --smc-w-ease: cubic-bezier(.22, 1, .36, 1);
}

/* Backdrop blur */
.smc-modal[data-mode="wizard"]:not([hidden]) {
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  padding: 24px;
}

.smc-modal[data-mode="wizard"] .md-wrap {
  max-width: 1080px;
  max-height: min(780px, calc(100vh - 48px));
}

.smc-modal[data-mode="wizard"] .md-panel {
  background: var(--paper);
  border-radius: var(--radius-panel);
  box-shadow: var(--smc-w-shadow);
  display: grid;
  grid-template-rows: auto auto auto 1fr auto;
  overflow: hidden;
  position: relative;
  isolation: isolate;
  /* Grow with viewport but never exceed it. Caps at 880 on tall screens
     so each step's content fits without overflow-clipping the inner body. */
  height: min(880px, calc(100vh - 32px));
  max-height: calc(100vh - 32px);
  min-height: 640px;
  /* Override .md-panel.smc-tool's container break-out from the inline rules */
  width: 100%;
  margin: 0;
  padding: 0;
}

/* Subtle ambient mesh inside panel */
.smc-modal[data-mode="wizard"] .md-panel::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(60% 45% at 0% 0%, rgba(161,115,178,0.08) 0%, transparent 60%),
    radial-gradient(60% 50% at 100% 100%, rgba(122,171,103,0.07) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}
.smc-modal[data-mode="wizard"] .md-panel > * { position: relative; z-index: 1; }

/* ---------- Header ---------- */
.smc-modal[data-mode="wizard"] .md-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 28px 16px;
  border-bottom: 1px solid var(--hairline);
  background: var(--paper-2);
}
.smc-modal[data-mode="wizard"] .md-header__title {
  display: flex; flex-direction: column; gap: 2px;
}
.smc-modal[data-mode="wizard"] .md-header__eyebrow {
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--plum-deep);
}
.smc-modal[data-mode="wizard"] .md-header__heading {
  font-size: 19px; font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--ink);
  font-family: var(--font);
}
.smc-modal[data-mode="wizard"] .md-close {
  width: 36px; height: 36px;
  border-radius: 999px;
  border: 1px solid var(--hairline);
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0;
  line-height: 0;
  padding: 0;
  transition: background .2s, transform .25s var(--smc-w-ease), color .2s;
}
.smc-modal[data-mode="wizard"] .md-close > svg { display: block; }
.smc-modal[data-mode="wizard"] .md-close:hover {
  background: var(--ink); color: var(--paper); transform: rotate(90deg);
}
.smc-modal[data-mode="wizard"] .md-close:focus-visible {
  outline: 2px solid var(--plum-deep); outline-offset: 3px;
}

/* ---------- Mini-summary (revealed steps 2-3) ---------- */
.smc-modal[data-mode="wizard"] .md-mini-summary {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 28px;
  background: var(--paper);
  border-bottom: 1px solid var(--hairline);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-2);
  height: 40px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity .26s var(--smc-w-ease), transform .26s var(--smc-w-ease);
}
.smc-modal[data-mode="wizard"] .md-mini-summary.is-visible {
  opacity: 1; pointer-events: auto; transform: translateY(0);
}
.smc-modal[data-mode="wizard"] .md-mini-summary__left {
  display: inline-flex; align-items: center; gap: 14px;
}
.smc-modal[data-mode="wizard"] .md-mini-summary__chip {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12.5px;
}
.smc-modal[data-mode="wizard"] .md-mini-summary__chip b {
  font-weight: 600; color: var(--ink);
}
.smc-modal[data-mode="wizard"] .md-mini-summary__sep {
  color: rgba(26,17,29,0.35); user-select: none;
}
.smc-modal[data-mode="wizard"] .md-mini-summary__back {
  appearance: none; background: transparent; border: 0;
  font-family: inherit; font-size: 12px; font-weight: 500;
  color: var(--plum-deep); cursor: pointer;
  letter-spacing: 0.01em;
  padding: 4px 6px; border-radius: 6px;
  transition: color .15s, background .15s;
}
.smc-modal[data-mode="wizard"] .md-mini-summary__back:hover {
  color: var(--ink); background: var(--paper-3);
}
.smc-modal[data-mode="wizard"] .md-mini-summary__price {
  font-size: 13.5px; font-weight: 600; color: var(--ink);
  font-variant-numeric: tabular-nums lining-nums;
}

/* ---------- Progress strip ---------- */
.smc-modal[data-mode="wizard"] .md-progress {
  display: grid;
  grid-template-columns: auto 1fr auto 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 16px 36px 4px;
}
.smc-modal[data-mode="wizard"] .md-pstep {
  appearance: none;
  background: transparent; border: 0; cursor: pointer;
  display: flex; align-items: center; gap: 10px;
  font-family: inherit;
  color: var(--ink-3);
  padding: 4px 6px; border-radius: 8px;
  transition: color .2s;
}
.smc-modal[data-mode="wizard"] .md-pstep:disabled { cursor: not-allowed; }
.smc-modal[data-mode="wizard"] .md-pstep:focus-visible {
  outline: 2px solid var(--plum-deep); outline-offset: 3px;
}
.smc-modal[data-mode="wizard"] .md-pstep[data-state="upcoming"] .md-pstep__circle {
  border: 1px solid rgba(26,17,29,0.22);
  color: var(--ink-3);
  background: transparent;
}
.smc-modal[data-mode="wizard"] .md-pstep[data-state="current"] { color: var(--ink); }
.smc-modal[data-mode="wizard"] .md-pstep[data-state="current"] .md-pstep__circle {
  background: var(--plum-deep);
  color: var(--paper);
  border-color: var(--plum-deep);
}
.smc-modal[data-mode="wizard"] .md-pstep[data-state="current"] .md-pstep__label {
  font-weight: 600;
}
.smc-modal[data-mode="wizard"] .md-pstep[data-state="done"] { color: var(--ink-2); }
.smc-modal[data-mode="wizard"] .md-pstep[data-state="done"] .md-pstep__circle {
  background: var(--sage-pale);
  color: var(--sage-2);
  border-color: var(--sage-2);
}
.smc-modal[data-mode="wizard"] .md-pstep__circle {
  width: 28px; height: 28px;
  border-radius: 999px;
  display: grid; place-items: center;
  font-size: 11px; font-weight: 600;
  font-variant-numeric: tabular-nums lining-nums;
  border: 1px solid transparent;
  transition: background .25s var(--smc-w-ease), color .2s, border-color .25s var(--smc-w-ease);
  position: relative;
}
.smc-modal[data-mode="wizard"] .md-pstep__check {
  display: none; width: 14px; height: 14px;
  stroke: currentColor; fill: none; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.smc-modal[data-mode="wizard"] .md-pstep[data-state="done"] .md-pstep__check { display: block; }
.smc-modal[data-mode="wizard"] .md-pstep[data-state="done"] .md-pstep__num { display: none; }
.smc-modal[data-mode="wizard"] .md-pstep__label {
  font-size: 12.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 500;
}
.smc-modal[data-mode="wizard"] .md-pline {
  height: 1px; background: var(--hairline);
  position: relative; overflow: hidden;
}
.smc-modal[data-mode="wizard"] .md-pline::after {
  content: ''; position: absolute; inset: 0;
  transform-origin: left center;
  transform: scaleX(0);
  background: var(--plum);
  transition: transform .5s var(--smc-w-ease);
}
.smc-modal[data-mode="wizard"] .md-pline[data-fill="full"]::after { transform: scaleX(1); }
.smc-modal[data-mode="wizard"] .md-pline[data-fill="half"]::after { transform: scaleX(0.5); }

/* ---------- Body & step container ---------- */
.smc-modal[data-mode="wizard"] .md-body {
  overflow: hidden;
  position: relative;
  padding: 22px 36px 18px;
  display: flex;
  flex-direction: column;
  background: transparent;
  min-height: 0;
}
.smc-modal[data-mode="wizard"] .md-steps {
  position: relative;
  flex: 1;
  min-height: 0;
}
.smc-modal[data-mode="wizard"] .md-step {
  position: absolute; inset: 0;
  opacity: 0; pointer-events: none;
  transform: translateX(24px);
  transition: opacity .36s var(--smc-w-ease), transform .36s var(--smc-w-ease);
  overflow-y: auto;
  overflow-x: hidden;
}
.smc-modal[data-mode="wizard"] .md-step.is-active {
  opacity: 1; pointer-events: auto;
  transform: translateX(0);
}
.smc-modal[data-mode="wizard"] .md-step.is-leaving-back {
  transform: translateX(24px); opacity: 0;
}
.smc-modal[data-mode="wizard"] .md-step.is-leaving-fwd {
  transform: translateX(-24px); opacity: 0;
}
.smc-modal[data-mode="wizard"] .md-step[hidden] { display: none; }

.smc-modal[data-mode="wizard"] .md-step__head {
  display: grid; grid-template-columns: 1fr auto;
  gap: 8px; align-items: end;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--hairline);
  margin-bottom: 18px;
}
.smc-modal[data-mode="wizard"] .md-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 0 0 10px;
}
.smc-modal[data-mode="wizard"] .md-eyebrow__num {
  width: 18px; height: 18px;
  border-radius: 999px;
  border: 1px solid var(--plum-deep);
  color: var(--plum-deep);
  font-size: 9.5px; font-weight: 600;
  display: grid; place-items: center;
  font-variant-numeric: tabular-nums lining-nums;
  background: transparent;
}
.smc-modal[data-mode="wizard"] .md-eyebrow__label {
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--plum-deep);
}
.smc-modal[data-mode="wizard"] .md-step__title {
  font-size: 36px; font-weight: 300;
  line-height: 1.02;
  letter-spacing: -0.028em;
  margin: 0 0 8px;
  color: var(--ink);
  font-family: var(--font);
}
.smc-modal[data-mode="wizard"] .md-step__title em {
  font-style: normal;
  font-weight: 500;
  color: var(--ink);
}
.smc-modal[data-mode="wizard"] .md-step__sub {
  font-size: 14.5px; color: var(--ink-3);
  margin: 0; line-height: 1.5;
  max-width: 60ch;
}
/* Task 4: one calm trust line on Step 1 (replaces the dense 3-icon info
   strip + the keyboard-hint card). */
.smc-modal[data-mode="wizard"] .md-trust-line {
  margin: 16px 0 0;
  font-size: 12.5px; line-height: 1.5;
  color: var(--ink-3);
  text-align: center;
}
/* The Step-1 keyboard-hint card was removed (Task 4); the Step-3 review
   header reuses the same .md-step__hint hook for its build date/ID stamp,
   which was — and stays — hidden (Step 3 unchanged). */
.smc-modal[data-mode="wizard"] .md-step__hint { display: none; }

/* ---------- Step 1 — Sizes ---------- */
.smc-modal[data-mode="wizard"] .md-sizes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 156px;
  gap: 14px;
  margin-bottom: 16px;
}
.smc-modal[data-mode="wizard"] .md-size-tile {
  appearance: none;
  border: 1px solid var(--hairline);
  background: var(--paper-2);
  border-radius: var(--radius-panel);
  padding: 16px 18px;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  color: var(--ink);
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto 1fr auto auto;
  gap: 0;
  transition:
    border-color .18s var(--smc-w-ease),
    background .18s var(--smc-w-ease),
    transform .18s var(--smc-w-ease),
    box-shadow .22s var(--smc-w-ease);
  position: relative;
  overflow: hidden;
}
.smc-modal[data-mode="wizard"] .md-size-tile:hover {
  border-color: var(--plum);
  transform: translateY(-2px);
  box-shadow: 0 10px 28px -12px rgba(26,17,29,0.18);
}
.smc-modal[data-mode="wizard"] .md-size-tile:focus-visible {
  outline: 2px solid var(--plum-deep);
  outline-offset: 3px;
}
.smc-modal[data-mode="wizard"] .md-size-tile__pop {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
  font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--plum-deep);
  margin-bottom: 4px;
  height: 12px;
}
.smc-modal[data-mode="wizard"] .md-size-tile__split-badge {
  grid-column: 2 / 3;
  grid-row: 1 / 2;
  justify-self: end;
  font-size: 9.5px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--plum-deep);
  border-bottom: 1px solid var(--hairline-soft);
  padding-bottom: 1px;
  height: 14px;
}
.smc-modal[data-mode="wizard"] .md-size-tile:not([data-split="1"]) .md-size-tile__split-badge {
  visibility: hidden;
}
.smc-modal[data-mode="wizard"] .md-size-tile__name {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
  font-size: 22px; font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.05;
  transition: font-weight .2s ease;
}
.smc-modal[data-mode="wizard"] .md-size-tile:hover .md-size-tile__name,
.smc-modal[data-mode="wizard"] .md-size-tile.is-active .md-size-tile__name {
  font-weight: 600;
}
.smc-modal[data-mode="wizard"] .md-size-tile__persona {
  grid-column: 1 / 2;
  grid-row: 3 / 4;
  align-self: start;
  font-size: 11px; font-weight: 500;
  color: var(--ink-3);
  letter-spacing: 0.02em;
  margin-top: 4px;
  line-height: 1.3;
}
.smc-modal[data-mode="wizard"] .md-size-tile__viz {
  grid-column: 2 / 3;
  grid-row: 2 / 5;
  align-self: end;
  justify-self: end;
}
.smc-modal[data-mode="wizard"] .md-size-tile__viz rect.bed-fill {
  fill: var(--paper-3);
  stroke: rgba(26,17,29,0.22);
  stroke-width: 1;
  transition: fill .18s, stroke .18s;
}
.smc-modal[data-mode="wizard"] .md-size-tile__viz line {
  stroke: var(--hairline);
  stroke-width: 0.75;
}
.smc-modal[data-mode="wizard"] .md-size-tile__dim {
  grid-column: 1 / -1;
  grid-row: 5 / 6;
  align-self: end;
  font-size: 12.5px;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: 0.01em;
  padding-top: 6px;
  border-top: 1px solid var(--hairline-soft);
  margin-top: 8px;
}
.smc-modal[data-mode="wizard"] .md-size-tile.is-active {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
  box-shadow:
    inset 0 0 0 2px var(--plum-deep),
    0 16px 32px -16px rgba(122,79,140,0.4);
}
.smc-modal[data-mode="wizard"] .md-size-tile.is-active .md-size-tile__name { font-weight: 600; }
.smc-modal[data-mode="wizard"] .md-size-tile.is-active .md-size-tile__dim {
  color: rgba(247,243,234,0.65);
  border-top-color: rgba(247,243,234,0.15);
}
.smc-modal[data-mode="wizard"] .md-size-tile.is-active .md-size-tile__persona {
  color: rgba(247,243,234,0.65);
}
.smc-modal[data-mode="wizard"] .md-size-tile.is-active .md-size-tile__pop { color: var(--paper); }
.smc-modal[data-mode="wizard"] .md-size-tile.is-active .md-size-tile__split-badge {
  color: rgba(247,243,234,0.85);
  border-bottom-color: rgba(247,243,234,0.18);
}
.smc-modal[data-mode="wizard"] .md-size-tile.is-active .md-size-tile__viz rect.bed-fill {
  fill: rgba(247,243,234,0.10); stroke: rgba(247,243,234,0.45);
}
.smc-modal[data-mode="wizard"] .md-size-tile.is-active .md-size-tile__viz line {
  stroke: rgba(247,243,234,0.35);
}
/* Hide the JS-mounted size-pill row (configurator.js still binds to it) */
.smc-modal[data-mode="wizard"] .md-size-row--hidden {
  display: none !important;
}

/* (Task 4: the Step 1 `.md-info-strip` 3-icon block was replaced by a single
   `.md-trust-line` — styled above near `.md-step__sub`.) */

/* ---------- Step 2 — Stack ---------- */
.smc-modal[data-mode="wizard"] .md-stack-grid {
  display: grid;
  grid-template-columns: 1.05fr 1.15fr;
  gap: 28px;
  min-height: 0;
}
.smc-modal[data-mode="wizard"] .md-stage {
  display: grid;
  grid-template-rows: auto auto;
  gap: 14px;
  min-height: 0;
  /* Hug content: when a layer is focused, the right column grows tall
     (editor + feedback + popular configs); without `align-self: start` the
     grid stretches the stage to match, leaving ~280px of empty paper below
     the layers and pushing the legend out of the visible viewport. */
  align-self: start;
}
/* Override inline mattress-stage padding within wizard for tighter fit */
.smc-modal[data-mode="wizard"] .md-stage .mattress {
  background: linear-gradient(180deg, var(--paper-2) 0%, var(--paper-3) 100%);
  border-radius: 10px;
}

/* (Task 4: the `.md-legend` color-tone decode block was removed from Step 2 —
   the build-picker cards + the slab self-labels carry the meaning instead.) */

/* RIGHT: controls column */
.smc-modal[data-mode="wizard"] .md-controls {
  display: flex; flex-direction: column;
  gap: 12px;
  min-height: 0;
}
.smc-modal[data-mode="wizard"] .md-controls .layer-controls {
  background: var(--paper-2);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-panel);
  padding: 14px 16px;
  min-height: 0;
}
.smc-modal[data-mode="wizard"] .md-controls .feedback {
  margin-top: 0;
}

/* (Task 4: the legacy `.md-presets-card` / `.md-preset-chip` quick-start chips
   were superseded by the presets-first `.mt-buildpicker` — styles inherited
   from the `.smc-tool` rules above.) */

/* ---------- Step 3 — Review (v1.7.1-dev3 compact) ---------- */
.smc-modal[data-mode="wizard"] .md-review {
  display: grid;
  grid-template-columns: 0.7fr 1.5fr; /* 2-col now: visual + spec */
  gap: 18px;
  align-items: start;
  min-height: 0;
}
.smc-modal[data-mode="wizard"] .md-review__visual {
  border: 1px solid var(--hairline);
  border-radius: var(--radius-panel);
  background: linear-gradient(180deg, var(--paper-2), var(--paper-3));
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/* Compact mini — 5:3 plate, max-height 160px (was 240px) so the visual
   column matches the spec column's first 2-3 rows in height. */
.smc-modal[data-mode="wizard"] .md-mini-mattress {
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--hairline);
  background: var(--paper);
  display: grid;
  grid-template-rows: 8px 1fr 8px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.5);
  aspect-ratio: 5 / 3;
  max-height: 160px;
  align-self: center;
  width: 100%;
}
/* Tighter caption typography for the smaller plate */
.smc-modal[data-mode="wizard"] .md-review__label h3 { font-size: 10px; margin: 0 0 2px; }
.smc-modal[data-mode="wizard"] .md-review__label h2 { font-size: 18px; line-height: 1.15; }
.smc-modal[data-mode="wizard"] .md-review__label h2 small { font-size: 12px; margin-top: 2px; }
/* Feel signature mirrored as a tiny chip in the caption — replaces the
   full feel band that's hidden on step 3 (saves ~99px). */
.smc-modal[data-mode="wizard"] .md-review__feel-caption {
  margin: 6px 0 0;
  font-size: 11.5px;
  color: var(--ink-2);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  line-height: 1.2;
}
.smc-modal[data-mode="wizard"] .md-review__feel-eyebrow {
  font-size: 9.5px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-3);
}
.smc-modal[data-mode="wizard"] .md-review__feel-name {
  font-weight: 600;
  color: var(--plum-deep);
  letter-spacing: -0.01em;
}
.smc-modal[data-mode="wizard"] .md-mini-mattress__cap {
  background:
    repeating-linear-gradient(90deg,
      #EFE7D6 0 8px,
      #E3D8C2 8px 16px);
}
.smc-modal[data-mode="wizard"] .md-mini-mattress__layers {
  display: grid;
  grid-template-rows: 1fr 1fr 1fr;
}
.smc-modal[data-mode="wizard"] .md-mini-mattress__layers > div {
  border-bottom: 1px solid var(--hairline);
  transition: background .25s ease;
}
.smc-modal[data-mode="wizard"] .md-mini-mattress__layers > div:last-child {
  border-bottom: 0;
}
.smc-modal[data-mode="wizard"] .md-review__label h3 {
  margin: 0 0 4px;
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--plum-deep);
}
.smc-modal[data-mode="wizard"] .md-review__label h2 {
  margin: 0;
  font-size: 24px; font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.1;
  font-family: var(--font);
  color: var(--ink);
}
.smc-modal[data-mode="wizard"] .md-review__label h2 small {
  display: block;
  font-size: 13px; color: var(--ink-3);
  font-weight: 400; margin-top: 4px;
}

/* Spec table */
.smc-modal[data-mode="wizard"] .md-spec {
  border: 1px solid var(--hairline);
  border-radius: var(--radius-panel);
  background: var(--paper-2);
  overflow: hidden;
}
.smc-modal[data-mode="wizard"] .md-spec__row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  padding: 6px 16px; /* v1.7.1-dev5 — tightest fit so 768px laptops don't scroll */
  border-bottom: 1px solid var(--hairline);
  align-items: center;
}
.smc-modal[data-mode="wizard"] .md-spec__row:last-child { border-bottom: 0; }
/* Spec rows lay out as label-left / value-right for solid layers (proper
   definition-list reading). Split layers fall back to a stacked column
   so the L/R sub-rows + tree-style guide render as designed. The
   `:has()` query routes the layout per-row based on the JS-toggled
   `.is-split` class on `.md-spec__value`. */
.smc-modal[data-mode="wizard"] .md-spec__col {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 12px;
  flex: 1;
}
.smc-modal[data-mode="wizard"] .md-spec__label {
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
  flex-shrink: 0;
}
.smc-modal[data-mode="wizard"] .md-spec__value {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  margin-left: auto;
  text-align: right;
}
.smc-modal[data-mode="wizard"] .md-spec__value small {
  display: block;
  font-size: 12px;
  color: var(--ink-3);
  font-weight: 400;
  margin-top: 1px;
  font-variant-numeric: tabular-nums lining-nums;
  text-align: right;
}

/* Split-layer rows: revert to a 2-row grid so the sub-rows + tree-style
   guide stay full-width and left-aligned as designed. Label + partner
   eyebrow pill share row 1; the .is-split value spans the full width on
   row 2. */
.smc-modal[data-mode="wizard"] .md-spec__col:has(.md-spec__value.is-split) {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  gap: 6px 10px;
}
.smc-modal[data-mode="wizard"] .md-spec__col:has(.md-spec__value.is-split) > .md-spec__label {
  grid-column: 1;
  grid-row: 1;
}
.smc-modal[data-mode="wizard"] .md-spec__col:has(.md-spec__value.is-split) > .md-spec__partner-eyebrow {
  grid-column: 2;
  grid-row: 1;
  justify-self: start;
}
.smc-modal[data-mode="wizard"] .md-spec__col:has(.md-spec__value.is-split) > .md-spec__value {
  grid-column: 1 / -1;
  grid-row: 2;
  margin-left: 0;
  text-align: left;
}
.smc-modal[data-mode="wizard"] .md-spec__col:has(.md-spec__value.is-split) > .md-spec__value small {
  text-align: left;
}
.smc-modal[data-mode="wizard"] .md-spec__edit {
  appearance: none;
  background: transparent;
  border: 0;
  font-family: inherit;
  font-size: 11.5px;
  color: var(--plum-deep);
  cursor: pointer;
  font-weight: 600;
  letter-spacing: 0.005em;
  padding: 4px 8px;
  border-radius: var(--radius-sharp);
  transition: background .15s, color .15s;
}
.smc-modal[data-mode="wizard"] .md-spec__edit:hover {
  background: var(--plum-soft); color: var(--ink);
}
.smc-modal[data-mode="wizard"] .md-spec__edit:focus-visible {
  outline: 2px solid var(--plum-deep);
  outline-offset: 2px;
}
/* v1.7.1 — Inline wrap row (replaces right-rail upgrade card)
 * ---------------------------------------------------------------
 * Same .md-spec__row scaffold; the value column carries an eyebrow
 * "Premium" pill, a price-delta line, and a tiny "Why upgrade?"
 * disclosure. The Change-button slot is replaced by a pill toggle
 * (split-toggle pattern reused from step 2).
 * -------------------------------------------------------------- */
.smc-modal[data-mode="wizard"] .md-spec__row--wrap .md-spec__value--wrap {
  display: flex; flex-direction: column; align-items: flex-end;
  gap: 4px;
  text-align: right;
}
/* Stacks the row label + Premium tag vertically so the value column gets
   full width for the price/detail line. The label keeps its all-caps
   tracking from .md-spec__label; the eyebrow sits beneath it as a small
   plum tag. */
.smc-modal[data-mode="wizard"] .md-spec__row--wrap .md-spec__label-stack {
  display: flex; flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  flex-shrink: 0;
}
.smc-modal[data-mode="wizard"] .md-spec__row--wrap .md-spec__wrap-eyebrow {
  font-size: 9.5px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--plum-deep);
  background: var(--plum-soft);
  border-radius: 999px;
  padding: 2px 7px;
  align-self: flex-start;
}
/* Detail line carries the live status: "Off · +$750 available" or
   "+$750 for Queen" when on. Always one line; tabular numerals so price
   digits don't shift width as the size changes. */
.smc-modal[data-mode="wizard"] .md-spec__row--wrap .md-spec__wrap-detail {
  font-size: 13px; color: var(--ink-2); font-weight: 500;
  font-variant-numeric: tabular-nums lining-nums;
  white-space: nowrap;
}
.smc-modal[data-mode="wizard"] .md-spec__row--wrap .md-spec__wrap-why {
  appearance: none;
  background: transparent;
  border: 0;
  font-family: inherit;
  font-size: 11px;
  color: var(--plum-deep);
  cursor: pointer;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  padding: 2px 0;
}
.smc-modal[data-mode="wizard"] .md-spec__row--wrap .md-spec__wrap-why:hover { color: var(--ink); }
/* On-state: subtle plum-tinted row + bold price-delta */
.smc-modal[data-mode="wizard"] .md-spec__row--wrap.is-on {
  background: var(--plum-soft);
}
.smc-modal[data-mode="wizard"] .md-spec__row--wrap.is-on .md-spec__wrap-detail {
  color: var(--plum-deep); font-weight: 600;
}
/* Disclosure panel — full-width strip directly below the wrap row,
   inside .md-spec so it inherits the rounded-table containment.
   `:not([hidden])` so the panel is visually absent when collapsed.
   (A bare `display: grid` rule would override the [hidden] attribute's
   default `display: none` due to higher specificity.) */
.smc-modal[data-mode="wizard"] .md-spec__wrap-details:not([hidden]) {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 12px;
  padding: 12px 18px 14px;
  border-bottom: 1px solid var(--hairline);
  background: var(--paper-3);
  align-items: start;
}
.smc-modal[data-mode="wizard"] .md-spec__wrap-thumb {
  width: 80px; height: 80px;
  object-fit: cover;
  border-radius: 8px;
  display: block;
}
.smc-modal[data-mode="wizard"] .md-spec__wrap-copy {
  margin: 0;
  font-size: 12.5px;
  color: var(--ink-2);
  line-height: 1.45;
}
/* Pill-toggle reuses .split-toggle (defined elsewhere); just align it
   to the row's right edge. */
.smc-modal[data-mode="wizard"] .md-spec__row--wrap .md-spec__wrap-toggle {
  align-self: center;
}
.smc-modal[data-mode="wizard"] .md-spec__static {
  font-size: 11.5px; color: var(--ink-3);
}

/* WHAT HAPPENS NEXT panels */
/* v1.7.1-dev3 — Inline trust footer (replaces the dropped 3rd column).
 * Single-row strip beneath the 2-col review block: dot-separated trust
 * tokens at left, Customer Service contact links at right. ~28px tall. */
.smc-modal[data-mode="wizard"] .md-review-footer {
  display: flex; align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 4px 0;
  margin-top: 12px;
  border-top: 1px solid var(--hairline);
  font-size: 11.5px;
  color: var(--ink-3);
}
.smc-modal[data-mode="wizard"] .md-trust-inline {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap;
  gap: 4px 14px;
  letter-spacing: 0.005em;
}
.smc-modal[data-mode="wizard"] .md-trust-inline > li {
  display: inline-flex; align-items: center;
  position: relative;
}
.smc-modal[data-mode="wizard"] .md-trust-inline > li + li::before {
  content: "·";
  color: var(--ink-3);
  margin-right: 14px; margin-left: -10px;
  opacity: 0.6;
}
.smc-modal[data-mode="wizard"] .md-trust-inline__link {
  color: var(--plum-deep);
  font-weight: 600;
  text-decoration: none;
  letter-spacing: -0.005em;
  white-space: nowrap;
}
.smc-modal[data-mode="wizard"] .md-trust-inline__link:hover { color: var(--ink); }
/* Inline policy link (e.g. "90-day layer swap" → /info/90-day-latex-exchange/).
 * Underlined to signal it's a link inside a list of plain trust facts. */
.smc-modal[data-mode="wizard"] .md-trust-inline > li .md-trust-inline__policy-link {
  display: inline;
  color: var(--plum-deep);
  font-weight: 600;
  /* `!important` is required: a global `a { text-decoration: none !important }`
     from the parent theme would otherwise strip the underline. */
  text-decoration: underline !important;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  letter-spacing: -0.005em;
}
.smc-modal[data-mode="wizard"] .md-trust-inline__policy-link:hover { color: var(--ink); }
/* Customer Service contacts cluster — Call + Email side by side on desktop,
 * stacked on narrow viewports to keep the right-hand footer cell intact. */
.smc-modal[data-mode="wizard"] .md-trust-inline__contacts {
  display: flex; align-items: center;
  gap: 6px 14px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.smc-modal[data-mode="wizard"] .md-trust-inline__contacts .md-trust-inline__link + .md-trust-inline__link::before {
  content: "·";
  color: var(--ink-3);
  margin-right: 14px; margin-left: -10px;
  opacity: 0.6;
  font-weight: 400;
}
@media (max-width: 540px) {
  .smc-modal[data-mode="wizard"] .md-trust-inline__contacts { flex-direction: column; align-items: flex-end; gap: 4px; }
  .smc-modal[data-mode="wizard"] .md-trust-inline__contacts .md-trust-inline__link + .md-trust-inline__link::before { display: none; }
}
/* Constrained-height fallback: at small laptop viewports the trust footer
   adds 34px (item + margin) that pushes step content past the modal body.
   The same trust facts already live on the step-1 tile strip — hiding here
   keeps the review step scroll-free without losing user-discoverable info. */
@media (max-height: 740px) {
  .smc-modal[data-mode="wizard"] .md-review-footer { display: none; }
}
.smc-modal[data-mode="wizard"] .md-next {
  border: 1px solid var(--hairline);
  border-radius: var(--radius-panel);
  background: var(--plum-soft);
  padding: 16px;
  display: flex; flex-direction: column;
  gap: 10px;
  flex: 1;
}
.smc-modal[data-mode="wizard"] .md-next__head {
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--plum-deep);
  margin: 0;
}
.smc-modal[data-mode="wizard"] .md-next__title {
  margin: 0;
  font-size: 16px; font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.2;
  color: var(--ink);
  font-family: var(--font);
}
.smc-modal[data-mode="wizard"] .md-next__list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 10px;
  flex: 1;
}
.smc-modal[data-mode="wizard"] .md-next__item {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 10px;
  font-size: 12.5px;
  color: var(--ink-2);
  line-height: 1.35;
}
.smc-modal[data-mode="wizard"] .md-next__icon {
  width: 22px; height: 22px;
  border-radius: 999px;
  background: var(--paper);
  color: var(--plum-deep);
  display: grid; place-items: center;
  margin-top: 1px;
  flex: 0 0 22px;
}
.smc-modal[data-mode="wizard"] .md-next__icon svg {
  width: 12px; height: 12px;
  stroke: currentColor;
}
.smc-modal[data-mode="wizard"] .md-next__item-title {
  font-weight: 600; color: var(--ink);
  display: block;
}
.smc-modal[data-mode="wizard"] .md-next__time {
  display: block; color: var(--ink-3);
  font-size: 11.5px; margin-top: 1px;
  font-variant-numeric: tabular-nums lining-nums;
}
/* =====================================================================
 * v1.6.0 — Step 3 Premium Upgrade card (individually-wrapped latex)
 * ---------------------------------------------------------------------
 * Desktop: media banner + body. Mobile (≤640px): thumb floats left of
 * headline, card moves up in source order via `order:` (see mobile
 * block further down).
 * ================================================================== */
.smc-modal[data-mode="wizard"] .md-upgrade {
  display: flex;
  flex-direction: column;
  background: var(--paper-2);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-panel);
  overflow: hidden;
  margin-bottom: 14px;
  transition: border-color .2s var(--smc-w-ease), box-shadow .2s var(--smc-w-ease);
}
.smc-modal[data-mode="wizard"] .md-upgrade__media {
  flex: 0 0 auto;
  aspect-ratio: 16 / 9;
  background: var(--paper-3);
  overflow: hidden;
}
.smc-modal[data-mode="wizard"] .md-upgrade__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.smc-modal[data-mode="wizard"] .md-upgrade__body {
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.smc-modal[data-mode="wizard"] .md-upgrade__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--plum-deep);
}
.smc-modal[data-mode="wizard"] .md-upgrade__check {
  display: none; /* shown in on-state — see Task 5 */
  align-items: center;
}
.smc-modal[data-mode="wizard"] .md-upgrade__title {
  font-weight: 500;
  font-size: 18px;
  line-height: 1.2;
  color: var(--ink);
  margin: 0;
}
.smc-modal[data-mode="wizard"] .md-upgrade__copy {
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-2);
  margin: 0;
}
.smc-modal[data-mode="wizard"] .md-upgrade__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 4px;
  flex-wrap: wrap;
}
.smc-modal[data-mode="wizard"] .md-upgrade__price {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums lining-nums;
}
/* Toggle reuses .split-toggle from Step 2 — no extra rules needed for the
   base appearance. We give it min hit-target dimensions for thumb tap. */
.smc-modal[data-mode="wizard"] .md-upgrade__toggle {
  min-width: 76px;
  min-height: 44px;
}
/* On-state — toggle is on, card is "selected" */
.smc-modal[data-mode="wizard"] .md-upgrade.is-on {
  border-color: var(--plum-deep);
  box-shadow: inset 0 0 0 1px var(--plum-deep);
}
.smc-modal[data-mode="wizard"] .md-upgrade.is-on .md-upgrade__check {
  display: inline-flex;
  color: var(--plum-deep);
}

/* v1.7.1 — Wrap visualization (Atelier hairline-band)
 * ------------------------------------------------------------------
 * When wrap is enabled, each latex layer reads as INDIVIDUALLY sleeved:
 *   1. Layers visibly part by 4px (gap on the layers grid).
 *   2. Each layer gains a faint cream inset border on top + bottom —
 *      the visible cotton sleeve edge.
 *   3. A subtle micro-stitch dotted line runs along that edge (a 2px
 *      repeating-linear-gradient kept low-contrast so it reads as
 *      stitching, not pattern).
 *   4. Each layer rounds its corners 4px (the sleeve "envelope").
 *   5. Smooth transition so the toggle feels mechanical, not jumpy.
 * ----------------------------------------------------------------- */
.smc-modal[data-mode="wizard"] .md-mini-mattress__layers > div {
  transition: background .25s ease, margin .3s var(--ease), border-radius .3s var(--ease), box-shadow .3s var(--ease);
}
.smc-modal[data-mode="wizard"] .md-mini-mattress.is-wrapped > .md-mini-mattress__layers {
  gap: 4px;
  background: #EFE7D6; /* cotton band peeks between the gaps */
}
.smc-modal[data-mode="wizard"] .md-mini-mattress.is-wrapped > .md-mini-mattress__layers > div {
  border-bottom-color: transparent;
  border-radius: 4px;
  box-shadow:
    inset 0  1px 0 rgba(255, 252, 242, 0.85),
    inset 0 -1px 0 rgba(255, 252, 242, 0.85),
    0 0 0 1px rgba(231, 219, 196, 0.55);
}
.smc-modal[data-mode="wizard"] .md-mini-mattress.is-wrapped > .md-mini-mattress__layers > div::before,
.smc-modal[data-mode="wizard"] .md-mini-mattress.is-wrapped > .md-mini-mattress__layers > div::after {
  content: "";
  position: absolute; left: 8px; right: 8px;
  height: 1px;
  background-image: repeating-linear-gradient(90deg,
    rgba(120, 96, 70, 0.45) 0 2px,
    transparent 2px 5px);
  pointer-events: none;
}
.smc-modal[data-mode="wizard"] .md-mini-mattress.is-wrapped > .md-mini-mattress__layers > div::before { top: 4px; }
.smc-modal[data-mode="wizard"] .md-mini-mattress.is-wrapped > .md-mini-mattress__layers > div::after  { bottom: 4px; }
@media (prefers-reduced-motion: reduce) {
  .smc-modal[data-mode="wizard"] .md-mini-mattress__layers > div { transition: none; }
}

/* Mobile — ≤640px ----------------------------------------------------- */
@media (max-width: 640px) {
  /* `order: -1` hoists the card above WHN/spec on mobile so the upsell is
   * encountered before scroll-past. Row-direction lets the thumb sit left
   * of the body. scroll-margin-bottom keeps the toggle visible above the
   * sticky footer on programmatic scrollIntoView — mobile footer stacks
   * to ~160-180px (price block + finance line + button row + paddings),
   * so 180px is the right safety value. */
  .smc-modal[data-mode="wizard"] .md-upgrade {
    order: -1;
    margin: 12px 0 14px;
    flex-direction: row;
    align-items: flex-start;
    gap: 0;
    scroll-margin-bottom: 180px;
  }
  /* Image becomes 80×80 thumb floated left of body. The card's
   * `overflow: hidden` + 14px border-radius handles the visible corner
   * clipping — no explicit radii needed on the thumb itself. */
  .smc-modal[data-mode="wizard"] .md-upgrade__media {
    flex: 0 0 80px;
    aspect-ratio: 1 / 1;
    width: 80px;
    height: 80px;
  }
  .smc-modal[data-mode="wizard"] .md-upgrade__body {
    flex: 1 1 auto;
    padding: 10px 14px 12px;
    gap: 6px;
  }
  .smc-modal[data-mode="wizard"] .md-upgrade__title {
    font-size: 16px;
  }
  .smc-modal[data-mode="wizard"] .md-upgrade__copy {
    font-size: 12.5px;
  }
}

/* ≤480px — drop the "for <Size>" suffix from the price label. */
@media (max-width: 480px) {
  .smc-modal[data-mode="wizard"] .md-upgrade__price-size { display: none; }
}

/* Reduced motion — instant card-state swap, no transitions. */
@media (prefers-reduced-motion: reduce) {
  .smc-modal[data-mode="wizard"] .md-upgrade { transition: none; }
}

.smc-modal[data-mode="wizard"] .md-support {
  border: 1px solid var(--hairline);
  border-radius: var(--radius-panel);
  background: var(--paper-2);
  padding: 12px 16px;
  display: flex; align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 12.5px;
  color: var(--ink-2);
}
.smc-modal[data-mode="wizard"] .md-support__link {
  color: var(--plum-deep);
  font-weight: 600;
  text-decoration: none;
  letter-spacing: -0.005em;
}
.smc-modal[data-mode="wizard"] .md-support__link:hover { color: var(--ink); }
.smc-modal[data-mode="wizard"] .md-support__btn {
  appearance: none;
  background: transparent;
  border: 1px solid rgba(26,17,29,0.22);
  color: var(--ink);
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 600;
  padding: 7px 12px;
  border-radius: var(--radius-btn);
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
  white-space: nowrap;
}
.smc-modal[data-mode="wizard"] .md-support__btn:hover {
  background: var(--ink); color: var(--paper); border-color: var(--ink);
}

/* ---------- Footer ---------- */
.smc-modal[data-mode="wizard"] .md-footer {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 18px;
  padding: 16px 28px 18px;
  border-top: 1px solid var(--hairline);
  background: var(--paper-2);
}
.smc-modal[data-mode="wizard"] .md-footer__price {
  display: flex; flex-direction: column;
  gap: 2px;
}
.smc-modal[data-mode="wizard"] .md-footer__eyebrow {
  font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-3);
}
.smc-modal[data-mode="wizard"] .md-footer__amt {
  font-size: 36px;
  font-weight: 300;
  line-height: 1;
  color: var(--ink);
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums lining-nums;
}
.smc-modal[data-mode="wizard"] .md-footer__finance {
  font-size: 12.5px; color: var(--ink-3);
}
.smc-modal[data-mode="wizard"] .md-footer__finance b {
  color: var(--plum-deep);
  font-weight: 600;
  font-variant-numeric: tabular-nums lining-nums;
}
.smc-modal[data-mode="wizard"] .md-footer__actions {
  display: flex; gap: 10px; align-items: center;
}

/* Step-aware footer button visibility.
   Each button declares which steps it belongs to via data-show="1 2 3". */
.smc-modal[data-mode="wizard"] .md-footer .btn-primary,
.smc-modal[data-mode="wizard"] .md-footer .btn-secondary,
.smc-modal[data-mode="wizard"] .md-footer .btn-tertiary {
  display: none;
}
.smc-modal[data-mode="wizard"] .md-footer[data-step="1"] [data-show~="1"],
.smc-modal[data-mode="wizard"] .md-footer[data-step="2"] [data-show~="2"],
.smc-modal[data-mode="wizard"] .md-footer[data-step="3"] [data-show~="3"] {
  display: inline-flex;
}

/* Wizard footer button overrides — layered shadow + breathing glow on primary */
.smc-modal[data-mode="wizard"] .md-footer .btn-primary {
  box-shadow: var(--smc-w-cta);
  position: relative;
  background: var(--plum-deep);
}
.smc-modal[data-mode="wizard"] .md-footer .btn-primary:hover {
  background: var(--ink);
  box-shadow: var(--smc-w-cta-glow);
}
.smc-modal[data-mode="wizard"] .md-footer .md-btn--primary-lg {
  padding: 15px 28px;
  font-size: 15px;
}
.smc-modal[data-mode="wizard"] .md-footer .md-btn--text {
  background: transparent;
  color: var(--ink-2);
  border: 0;
  padding: 13px 12px;
}
.smc-modal[data-mode="wizard"] .md-footer .md-btn--text:hover {
  color: var(--ink);
}

/* SR-only utility */
.smc-modal[data-mode="wizard"] .md-sr-only {
  position: absolute !important;
  width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Hide the inline tabs/disclosure/preset rails inside the wizard
   (they exist as hidden placeholders; double-ensure they don't render) */
.smc-modal[data-mode="wizard"] [data-role="tab-build"],
.smc-modal[data-mode="wizard"] [data-role="tab-popular"],
.smc-modal[data-mode="wizard"] [data-role="tab-quiz"],
.smc-modal[data-mode="wizard"] [data-role="learn-row"],
.smc-modal[data-mode="wizard"] [data-role="learn-disclosure"],
.smc-modal[data-mode="wizard"] [data-role="inline-preset-rail"],
.smc-modal[data-mode="wizard"] [data-role="preset-grid"],
.smc-modal[data-mode="wizard"] [data-role="qz-drawer"],
.smc-modal[data-mode="wizard"] [data-role="qz-backdrop"],
.smc-modal[data-mode="wizard"] [data-role="reset"],
.smc-modal[data-mode="wizard"] [data-role="sticky-dock"] {
  display: none !important;
}

/* Tabular-nums on price/dim/timeline numbers */
.smc-modal[data-mode="wizard"] .num,
.smc-modal[data-mode="wizard"] [data-role="price"],
.smc-modal[data-mode="wizard"] [data-role="mo"] {
  font-variant-numeric: tabular-nums lining-nums;
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .smc-modal[data-mode="wizard"] .md-step,
  .smc-modal[data-mode="wizard"] .md-step.is-leaving-back,
  .smc-modal[data-mode="wizard"] .md-step.is-leaving-fwd {
    transition: opacity .12s ease;
    transform: none !important;
  }
  .smc-modal[data-mode="wizard"] .md-pline::after { transition: none; }
  .smc-modal[data-mode="wizard"] .md-size-tile {
    transition: border-color .12s, background .12s;
  }
  .smc-modal[data-mode="wizard"] .md-size-tile:hover {
    transform: none; box-shadow: none;
  }
}

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .smc-modal[data-mode="wizard"] .md-panel {
    height: auto;
    max-height: calc(100vh - 24px);
  }
  .smc-modal[data-mode="wizard"] .md-stack-grid,
  .smc-modal[data-mode="wizard"] .md-review {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .smc-modal[data-mode="wizard"] .md-sizes {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 780px) {
  /* ============================================================
   * Mobile fullscreen sheet (v1.13.0-dev9)
   * Scoped to .smc-modal[data-mode="wizard"] ON PURPOSE. The earlier
   * generic mobile block (~line 1674) used bare .md-panel / .md-footer /
   * .smc-modal selectors that are out-ranked by the desktop wizard rules
   * (e.g. `.smc-modal[data-mode="wizard"] .md-panel`, specificity 0,3,0),
   * so the intended mobile layout never applied — the modal rendered as a
   * floating ~640px desktop card on phones and the footer's price column
   * collapsed to one word per line. Matching that specificity here, and
   * sitting AFTER the desktop rules in source order, lets mobile win.
   * ============================================================ */

  /* Fill the screen: no backdrop gutter, no radius, real viewport height.
   * 100dvh tracks the dynamic viewport so iOS browser chrome can't clip the
   * action bar; 100vh stays as the fallback for older engines. */
  .smc-modal[data-mode="wizard"]:not([hidden]) { padding: 0; }
  .smc-modal[data-mode="wizard"] .md-wrap {
    max-width: 100%;
    height: 100vh; height: 100dvh;
    max-height: 100vh; max-height: 100dvh;
  }
  .smc-modal[data-mode="wizard"] .md-panel {
    width: 100%;
    height: 100vh; height: 100dvh;
    max-height: 100vh; max-height: 100dvh;
    min-height: 0;
    border-radius: 0;
  }

  /* The wizard steps are position:absolute (crossfade), so .md-body can't
   * grow to scroll them. Make the body a fixed frame and let the ACTIVE STEP
   * be the scroll region: fixed chrome on top, sticky action bar on the
   * bottom, content scrolls between. This is what makes every step's content
   * reachable on short screens (previously it overflowed under the footer). */
  .smc-modal[data-mode="wizard"] .md-body { overflow: hidden; padding: 0; min-height: 0; }
  .smc-modal[data-mode="wizard"] .md-steps { height: 100%; }
  .smc-modal[data-mode="wizard"] .md-step {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 20px 18px 24px;
  }

  /* Reclaim the wide desktop gutters; size & shape stacks one-up. */
  .smc-modal[data-mode="wizard"] .md-sizes { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .smc-modal[data-mode="wizard"] .md-step__title { font-size: 28px; }
  .smc-modal[data-mode="wizard"] .md-header { padding: max(16px, env(safe-area-inset-top)) 18px 14px; }
  .smc-modal[data-mode="wizard"] .md-close { width: 44px; height: 44px; }
  .smc-modal[data-mode="wizard"] .md-progress { padding: 10px 18px 4px; }
  .smc-modal[data-mode="wizard"] .md-pstep__label { display: none; }
  .smc-modal[data-mode="wizard"] .md-mini-summary { padding-left: 18px; padding-right: 18px; }

  /* a11y: lift the small "Change" / "Change size" jump-back links (≈20px tall)
   * to a 44px touch target (WCAG 2.5.5 / 2.5.8). Text stays visually centered. */
  .smc-modal[data-mode="wizard"] .md-spec__edit,
  .smc-modal[data-mode="wizard"] .md-mini-summary__back {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* Footer → compact, thumb-friendly action bar. The desktop `1fr auto` grid
   * crushed the price column to ~100px and wrapped the size/build eyebrow one
   * word per line; here it's a single-line ellipsised eyebrow + full-width CTA. */
  .smc-modal[data-mode="wizard"] .md-footer {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 12px 18px calc(14px + env(safe-area-inset-bottom));
  }
  .smc-modal[data-mode="wizard"] .md-footer__price {
    flex-direction: row;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 2px 10px;
  }
  .smc-modal[data-mode="wizard"] .md-footer__eyebrow {
    flex: 1 1 100%;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    color: var(--ink-2); /* lift small-text contrast on paper (was --ink-3 ≈4.4:1) */
  }
  .smc-modal[data-mode="wizard"] .md-footer__amt { font-size: 26px; }
  .smc-modal[data-mode="wizard"] .md-footer__finance { font-size: 12px; flex: 1 1 100%; }
  .smc-modal[data-mode="wizard"] .md-footer__actions { width: 100%; display: flex; gap: 10px; }
  .smc-modal[data-mode="wizard"] .md-footer__actions .btn-primary {
    flex: 1 1 auto; justify-content: center; min-height: 48px;
  }
  .smc-modal[data-mode="wizard"] .md-footer__actions .btn-tertiary,
  .smc-modal[data-mode="wizard"] .md-footer__actions .md-btn--text { flex: 0 0 auto; order: -1; min-height: 44px; }
}

/* ============================================================
 * v1.3.1 polish — learn-more disclosure + no-scroll fit
 * ============================================================ */

/* (Task 4: the Step-2 `.md-learn` disclosure — Dunlop-vs-Talalay / layer-roles
   tabs — was removed with the standing coach wall. The page keeps an equivalent
   learn disclosure; the modal stays calm and presets-first.) */

/* Style the "Learn more →" anchors inside the feedback bar so they read
   like real links (the inner JS emits href="#" anchors). */
.smc-modal[data-mode="wizard"] [data-role="feedback"] a {
  color: var(--plum-deep);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(122,79,140,0.4);
  text-underline-offset: 2px;
  cursor: pointer;
}
.smc-modal[data-mode="wizard"] [data-role="feedback"] a:hover {
  text-decoration-color: var(--plum-deep);
}

/* No-scroll fit: tighten step 2 stage + step 3 review so content fits
   the panel body across typical viewports without overflow clipping. */
.smc-modal[data-mode="wizard"] .md-stage .mattress-stage {
  padding: 14px 18px 12px;
}
.smc-modal[data-mode="wizard"] .md-stage .mt-layer {
  min-height: 56px;
}
.smc-modal[data-mode="wizard"] .md-controls .layer-controls {
  padding: 12px 14px;
}
.smc-modal[data-mode="wizard"] .md-controls .feedback {
  padding: 8px 12px;
  font-size: 12.5px;
  line-height: 1.4;
}

/* Step 3 spec table — v1.7.1-dev6 tightest fit so 768px laptops don't
   scroll. Padding reduced to 5px vertical / 16px horizontal. */
.smc-modal[data-mode="wizard"] .md-spec__row {
  padding: 5px 16px;
}
.smc-modal[data-mode="wizard"] .md-spec__label {
  font-size: 10.5px;
}
.smc-modal[data-mode="wizard"] .md-spec__value {
  font-size: 13.5px;
}
.smc-modal[data-mode="wizard"] .md-spec__value small {
  font-size: 11px;
}
.smc-modal[data-mode="wizard"] .md-mini-mattress {
  height: 220px;
}

/* Step 3 — make sure the body content is allowed to scroll INTERNALLY
   only as a last-resort safety net on very short viewports. The taller
   panel max-height should make this rare. */
.smc-modal[data-mode="wizard"] .md-step[data-step="review"] {
  overflow-y: auto;
  scrollbar-width: thin;
}

/* v1.3.1 — right-column overflow safety net.
 * When all controls + open learn panel exceed the available body height
 * (typically ~580px on 900vh), allow the right column to scroll internally
 * so the modal panel itself does NOT scroll. Preset chips collapse when the
 * learn panel is open since the user is reading, not composing. */
.smc-modal[data-mode="wizard"] .md-controls {
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--hairline) transparent;
  padding-right: 4px;
}
.smc-modal[data-mode="wizard"] .md-controls::-webkit-scrollbar { width: 6px; }
.smc-modal[data-mode="wizard"] .md-controls::-webkit-scrollbar-thumb {
  background: var(--hairline); border-radius: 4px;
}
/* (Task 4: removed the `:has(.md-learn__toggle)` rule that hid the preset
   chips while the learn panel was open — both elements are gone.) */

/* Same safety net for the LEFT column on step 2 (mattress stage may be
   taller than the body on shorter viewports — e.g. 760-800px laptops). */
.smc-modal[data-mode="wizard"] .md-stage {
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: var(--hairline) transparent;
}
.smc-modal[data-mode="wizard"] .md-stage::-webkit-scrollbar { width: 6px; }
.smc-modal[data-mode="wizard"] .md-stage::-webkit-scrollbar-thumb {
  background: var(--hairline); border-radius: 4px;
}

/* Tighten step head spacing on stack/review so more body height remains. */
.smc-modal[data-mode="wizard"] .md-step[data-step="stack"] .md-step__head {
  margin-bottom: 14px;
}
.smc-modal[data-mode="wizard"] .md-step[data-step="review"] .md-step__head {
  margin-bottom: 6px; /* v1.7.1-dev5 — tighter on review (no caption needed below) */
}
/* v1.7.1-dev5 — Hide the redundant feel-signature band on step 3.
   The band is shown on step 2 where users actively tweak the build; on
   step 3 they're committing — repeating the gauges adds 99px (height +
   margins) without new information. The feel name is preserved in the
   visual-column caption (see .md-review__feel-caption below). */
.smc-modal[data-mode="wizard"] .md-step[data-step="review"] .smc-feel {
  display: none;
}
/* Tighten the trust footer's top margin (was 12px) — same hairline rule
   already separates it from the review block. */
.smc-modal[data-mode="wizard"] .md-review-footer {
  margin-top: 6px;
}
.smc-modal[data-mode="wizard"] .md-step[data-step="stack"] .md-step__sub,
.smc-modal[data-mode="wizard"] .md-step[data-step="review"] .md-step__sub {
  margin-top: 4px;
}

/* v1.3.3 — inline feedback link styling + disclosure flash.
 * Mirrors the wizard scope so inline learn-more anchors visibly read as
 * actionable links and the targeted disclosure pulses on scroll-in. */
.smc-tool [data-role="feedback"] a {
  color: var(--plum-deep);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(122,79,140,0.45);
  text-underline-offset: 2px;
  cursor: pointer;
  margin-left: 4px;
}
.smc-tool [data-role="feedback"] a:hover {
  text-decoration-color: var(--plum-deep);
}
.smc-tool [data-role="feedback"].alert a    { color: #7D2C23; text-decoration-color: rgba(125,44,35,0.45); }
.smc-tool [data-role="feedback"].alert a:hover { text-decoration-color: #7D2C23; }
.smc-tool [data-role="feedback"].uncommon a { color: #8B5A1E; text-decoration-color: rgba(139,90,30,0.45); }
.smc-tool [data-role="feedback"].uncommon a:hover { text-decoration-color: #8B5A1E; }

/* Flash ring on the inline disclosure when triggered from the feedback link. */
.smc-tool .mt-learn-disclosure.smc-flash {
  box-shadow: 0 0 0 2px var(--plum-deep), 0 12px 32px -12px rgba(122,79,140,0.45);
  transition: box-shadow .35s var(--ease);
}

/* v1.3.4 — slim step head for steps 2 & 3 (more room for the widget).
 * The progress strip already labels each step; the eyebrow + 30px
 * headline + 2-line sub-deck were redundant chrome eating ~110px of
 * body height. This one-liner head reclaims ~75px for the mattress
 * stage, layer controls, and review table. Step 1 keeps its hero
 * head intact since it's the orientation moment. */
.smc-modal[data-mode="wizard"] .md-step__head--slim {
  padding-top: 4px;
  padding-bottom: 8px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--hairline-soft);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}
.smc-modal[data-mode="wizard"] .md-step__title--slim {
  font-size: 13px;
  font-weight: 500;
  margin: 0;
  letter-spacing: 0;
  line-height: 1.4;
}
.smc-modal[data-mode="wizard"] .md-step__title--slim em {
  display: none; /* italic-emphasis treatment was tied to the big headline */
}
.smc-modal[data-mode="wizard"] .md-step__caption {
  color: var(--ink-3);
  font-weight: 400;
  font-size: 12.5px;
  letter-spacing: 0.01em;
}
/* v1.3.5 — body scroll lock while any .smc-modal is open.
 * `overflow:hidden` on html+body prevents the page behind from scrolling.
 * `position:fixed` + `width:100%` keeps the page in place on iOS Safari
 * which otherwise still allows momentum scroll despite overflow:hidden.
 * The JS toggles `.smc-modal-open` on both <html> and <body>; scroll
 * position is captured + restored on close. */
html.smc-modal-open,
html.smc-modal-open body.smc-modal-open {
  overflow: hidden !important;
  /* Prevent underlying content from shifting horizontally when the
     scrollbar disappears on Windows / Linux. */
  scrollbar-gutter: stable;
}
/* iOS Safari needs the body fixed to hold position; the JS-saved scrollY
   is restored when the modal closes. */
@supports (-webkit-touch-callout: none) {
  body.smc-modal-open {
    position: fixed;
    width: 100%;
    left: 0;
    right: 0;
  }
}

/* v1.3.6 — hide feedback bar when empty.
 * The inner JS holds back feedback copy until the user has interacted
 * (`state.userHasInteracted`); during that pre-interaction window the
 * .feedback element existed but rendered as a styled-empty green strip.
 * Hide the wrapper while it has no children — it'll re-appear the
 * moment the JS appends content. */
.feedback:empty,
.smc-modal[data-mode="wizard"] .feedback:empty {
  display: none;
}

/* ===================================================================
 * (Task 4) The wizard-scope `.md-popconfigs-card` + `.md-seeall*` "Popular
 * configurations" block was removed. Step 2 now leads with the presets-first
 * `.mt-buildpicker` (styled via the shared `.smc-tool` rules near the top of
 * this file), which renders the same canonical builds with its own
 * "See all 9 builds" disclosure.
 * =================================================================== */

/* v1.4.1 — sticky mattress visual within step-2 column.
 * If the left column (.md-stage) ever needs to scroll (legend + caption
 * extending past column height on shorter viewports), the layer stack
 * itself stays at the top so users always see what they're configuring.
 * Stays within the column container — does NOT escape to the panel. */
.smc-modal[data-mode="wizard"] .md-stage .mattress {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--paper-2);
  /* Tiny shadow at the bottom edge to separate sticky stack from
     scrolled-under legend below it — only visible while scrolled. */
  box-shadow: 0 6px 12px -10px rgba(26, 17, 29, 0.0);
  transition: box-shadow .2s var(--smc-w-ease);
}
.smc-modal[data-mode="wizard"] .md-stage:not(:hover) .mattress { /* no-op — keep transition target */ }
.smc-modal[data-mode="wizard"] .md-stage.is-scrolled .mattress {
  box-shadow: 0 6px 12px -10px rgba(26, 17, 29, 0.18);
}

/* v1.4.2 — feedback bar two-row layout (name on its own line above desc).
 * The em-dash separator forced long preset names to wrap mid-sentence
 * ("All-Dunlop Soft-to-Firm — This all-Dunlop..."). Splitting into a
 * .feedback__name row + .feedback__desc row prevents the wrap and gives
 * the preset name room to breathe. Status dot stays at top-aligned. */
.feedback__body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  flex: 1;
}
.feedback__name {
  font-family: var(--font);
  font-style: normal;
  font-weight: 600;
  font-size: 13.5px;
  letter-spacing: 0.005em;
  color: var(--ink);
  line-height: 1.3;
}
.feedback__desc {
  font-family: var(--serif);
  font-style: italic;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--ink-2);
}
.feedback.uncommon .feedback__name { color: #6F4520; }
.feedback.alert    .feedback__name { color: #7D2C23; }
/* When the bar is showing two rows (name+desc), align the status dot
   to the top of the body instead of vertically-centered between rows. */
.feedback:has(.feedback__body) {
  align-items: flex-start;
}
.feedback:has(.feedback__body)::before {
  margin: 6px 0 0 6px;
}

/* =====================================================================
 * v1.5.0 — Split-layer review row (wizard step 3 spec table)
 * ---------------------------------------------------------------------
 * When a layer carries `split: true`, JS hides the single-row label nodes
 * and appends a `.md-spec__split` block with two indented sub-rows (L/R).
 * Scoped under .smc-modal[data-mode="wizard"] so the inline tool is
 * unaffected. ================================================================ */
.smc-modal[data-mode="wizard"] .md-spec__value.is-split > [data-spec$="-main"],
.smc-modal[data-mode="wizard"] .md-spec__value.is-split > [data-spec$="-detail"] {
  display: none;
}
.smc-modal[data-mode="wizard"] .md-spec__split {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 1px;
}
.smc-modal[data-mode="wizard"] .md-spec__split-head {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0.005em;
}
.smc-modal[data-mode="wizard"] .md-spec__sub {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  padding-left: 14px;
  position: relative;
  font-size: 12.5px;
  color: var(--ink-2);
  line-height: 1.35;
}
/* Soft tree-style guide: a single thin rule from sub-row top to L/R glyph */
.smc-modal[data-mode="wizard"] .md-spec__sub::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 0;
  bottom: 50%;
  width: 1px;
  background: var(--hairline);
}
.smc-modal[data-mode="wizard"] .md-spec__sub::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 50%;
  width: 6px;
  height: 1px;
  background: var(--hairline);
}
.smc-modal[data-mode="wizard"] .md-spec__sub--right::before {
  /* Rightside row's vertical guide should reach all the way down to the
     end of the previous sub so the tree visually connects. */
  top: -4px;
}
.smc-modal[data-mode="wizard"] .md-spec__sub-mark {
  display: inline-grid;
  place-items: center;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--plum-soft);
  color: var(--plum-deep);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
  flex-shrink: 0;
}
.smc-modal[data-mode="wizard"] .md-spec__sub-label {
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
}
.smc-modal[data-mode="wizard"] .md-spec__sub-sep {
  color: var(--ink-3);
  margin: 0 2px;
}
.smc-modal[data-mode="wizard"] .md-spec__sub-val {
  font-size: 13px;
  color: var(--ink);
  font-weight: 500;
}
.smc-modal[data-mode="wizard"] .md-spec__sub-detail {
  font-size: 11px;
  color: var(--ink-3);
  font-weight: 400;
  font-variant-numeric: tabular-nums lining-nums;
  margin-left: auto;
}

/* Mini-mattress split layer — cream hairline seam at 50% on the gradient.
   `background` is set inline (linear-gradient) by renderMiniLayer, so the
   divider is faked via an absolutely-positioned ::after pseudo-element. */
.smc-modal[data-mode="wizard"] .md-mini-mattress__layers > div { position: relative; }
.smc-modal[data-mode="wizard"] .md-mini-mattress__layers > div.is-split::after {
  content: "";
  position: absolute; top: 0; bottom: 0; left: 50%;
  width: 1px;
  background: rgba(247, 243, 234, 0.92);
  pointer-events: none;
}

/* v1.5.0 — partner eyebrow on spec-table rows for split layers */
.smc-modal[data-mode="wizard"] .md-spec__partner-eyebrow {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 1px 7px 2px 5px;
  background: rgba(108, 69, 112, 0.10);
  color: var(--plum);
  font-size: 9px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  font-weight: 600;
  border-radius: 999px;
  align-self: flex-start;
  margin-top: 2px;
}
.smc-modal[data-mode="wizard"] .md-spec__partner-eyebrow::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--plum);
}

/* =====================================================================
 * v1.5.0 — Cart confirmation toast (rich variant)
 * ---------------------------------------------------------------------
 * Used by addToCart success path. Cream-paper card with hairline border,
 * plum-deep title, and italic-feel build summary subtitle. Opt-in via
 * class `.toast--cart-confirm` so legacy single-string toasts retain
 * their existing pill style.
 * ================================================================ */
.toast.toast--cart-confirm {
  background: var(--paper, #F7F3EA);
  color: var(--ink, #1A111D);
  border: 1px solid var(--hairline, rgba(26, 17, 29, 0.12));
  border-radius: var(--radius-panel);
  padding: 12px 16px 12px 14px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.6) inset,
    0 14px 38px rgba(26, 17, 29, 0.18);
  align-items: flex-start;
  gap: 12px;
  max-width: min(420px, calc(100vw - 32px));
  font-family: var(--font, "Cabinet Grotesk", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
}
.toast.toast--cart-confirm .toast__badge {
  display: inline-grid;
  place-items: center;
  width: 22px; height: 22px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--sage-2, #7AAB67);
  color: var(--paper, #F7F3EA);
  font-size: 12.5px; font-weight: 700;
  margin-top: 1px;
}
.toast.toast--cart-confirm.toast--error .toast__badge {
  background: #B85447;
}
.toast.toast--cart-confirm .toast__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.toast.toast--cart-confirm .toast__title {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.005em;
  color: var(--plum-deep, #6C4570);
  line-height: 1.2;
}
.toast.toast--cart-confirm.toast--error .toast__title {
  color: #7D2C23;
}
.toast.toast--cart-confirm .toast__subtitle {
  font-size: 12.5px;
  letter-spacing: 0.005em;
  color: var(--ink-2, #3A2D40);
  line-height: 1.35;
  /* Subtle italic-feel without pulling in a serif — slight letter-tracking +
     light weight gives an editorial cadence while keeping Cabinet Grotesk. */
  font-style: italic;
  font-weight: 400;
  font-variant-numeric: tabular-nums lining-nums;
  /* Allow long build names to wrap rather than overflow. */
  overflow-wrap: anywhere;
}

/* Stack toast a bit higher on mobile so the cart drawer doesn't cover it. */
@media (max-width: 640px) {
  .toast.toast--cart-confirm {
    bottom: 24px;
    max-width: calc(100vw - 24px);
  }
}

/* PDP modal-launch button placement (v1.5.1).
   The Astra summary column uses display:flex; flex-direction:column with
   explicit `order:` values on its WC children: title=1, rating=2, price=3,
   affirm=4, product-notes=5, variations_form=6. Our `.smc-modal-trigger`
   inherits the default order:0, which floats it above the H1 — hijacking
   the page hierarchy. Promoting to order:6 places it as a peer of the
   variations form (right after the "Use our interactive mattress tool"
   product-notes copy), so it reads as the alternative-path CTA at the
   moment the user is about to dive into dropdowns. */
.smc-modal-trigger {
  order: 6;
  margin: 12px 0 16px;
}

/* ====================== Feel signature eyebrow (v1.7.0) ====================== */

.smc-tool .smc-feel {
  display: grid;
  grid-template-columns: minmax(180px, auto) 1fr auto;
  align-items: center;
  gap: 18px;
  padding: 12px 18px; /* v1.7.5 — was 14 */
  margin: 10px 0 0; /* v1.7.5 — was 18 */
  border: 1px solid color-mix(in srgb, var(--plum-deep, #7A4F8C) 18%, transparent);
  border-radius: var(--radius-panel);
  background-color: var(--paper, #F7F3EA);
  background-image: linear-gradient(180deg, var(--paper, #F7F3EA) 0%, color-mix(in srgb, var(--paper, #F7F3EA) 88%, var(--plum-deep, #7A4F8C) 6%) 100%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset;
  position: relative;
  transition: box-shadow 200ms ease;
}

.smc-tool .smc-feel[hidden] { display: none; }

.smc-tool .smc-feel__name-block {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.smc-tool .smc-feel__eyebrow {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--plum-deep, #7A4F8C) 65%, transparent);
}

.smc-tool .smc-feel__name {
  font-family: Georgia, "Cabinet Grotesk", serif;
  font-style: italic;
  font-weight: 500;
  font-size: 22px;
  color: var(--plum-deep, #7A4F8C);
  line-height: 1.15;
  display: flex;
  align-items: baseline;
  gap: 8px;
  transition: opacity 180ms ease;
}

.smc-tool .smc-feel__name::before {
  content: "";
  width: 6px;
  height: 6px;
  background: var(--plum-deep, #7A4F8C);
  border-radius: 50%;
  flex-shrink: 0;
  transform: translateY(-3px);
}

.smc-tool .smc-feel__gauges {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.smc-tool .smc-feel__gauge {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.smc-tool .smc-feel__glabel {
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--plum-deep, #7A4F8C) 60%, transparent);
}

.smc-tool .smc-feel__gbar {
  display: block;
  height: 3px;
  background: color-mix(in srgb, var(--plum-deep, #7A4F8C) 12%, transparent);
  border-radius: 2px;
  overflow: hidden;
}

.smc-tool .smc-feel__gfill {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--plum-deep, #7A4F8C);
  border-radius: 2px;
  transition: width 360ms cubic-bezier(0.22, 0.1, 0.31, 1);
}

.smc-tool .smc-feel__gval {
  font-size: 11px;
  color: var(--ink, #1A111D);
  font-weight: 500;
}

.smc-tool .smc-feel__expand {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--plum-deep, #7A4F8C) 75%, transparent);
  background: transparent;
  border: 0;
  padding: 4px 8px;
  cursor: pointer;
  border-radius: 4px;
  transition: background-color 120ms ease;
}

.smc-tool .smc-feel__expand:hover,
.smc-tool .smc-feel__expand:focus-visible {
  background: color-mix(in srgb, var(--plum-deep, #7A4F8C) 8%, transparent);
  outline: none;
}

.smc-tool .smc-feel__expand[aria-expanded="true"]::after {
  content: " ↑";
}
.smc-tool .smc-feel__expand[aria-expanded="false"]::after {
  content: " ↓";
}

.smc-tool .smc-feel__panel {
  grid-column: 1 / -1;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 0.5px solid color-mix(in srgb, var(--plum-deep, #7A4F8C) 20%, transparent);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.smc-tool .smc-feel__panel[hidden] { display: none; }

.smc-tool .smc-feel__panel-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.smc-tool .smc-feel__fit {
  font-size: 12px;
  color: var(--ink, #1A111D);
  margin: 0;
  line-height: 1.45;
}

.smc-tool .smc-feel__hint {
  font-size: 11px;
  font-style: italic;
  color: color-mix(in srgb, var(--plum-deep, #7A4F8C) 65%, transparent);
  margin: 0;
}

.smc-tool .smc-feel__split-tag {
  position: absolute;
  top: -10px;
  right: 14px;
  background: var(--paper, #F7F3EA);
  border: 1px solid color-mix(in srgb, var(--plum-deep, #7A4F8C) 25%, transparent);
  padding: 2px 8px;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: 10px;
  color: color-mix(in srgb, var(--plum-deep, #7A4F8C) 75%, transparent);
}
.smc-tool .mt-readout__split-tag[data-variant="construction"],
.smc-feel__split-tag[data-variant="construction"] {
  background: var(--sage-pale); border: 1px solid var(--sage-soft); color: var(--ink-2);
}
.smc-tool .mt-readout__split-tag[data-variant="feel"],
.smc-feel__split-tag[data-variant="feel"] {
  background: var(--plum-soft); border: 1px solid rgba(161,115,178,.35); color: var(--plum-deep);
}

/* Mobile compaction */
@media (max-width: 640px) {
  .smc-tool .smc-feel {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 12px 14px;
  }
  .smc-tool .smc-feel__name { font-size: 18px; }
  .smc-tool .smc-feel__gauges { gap: 10px; }
  .smc-tool .smc-feel__expand {
    justify-self: flex-start;
    padding-left: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .smc-tool .smc-feel,
  .smc-tool .smc-feel__name,
  .smc-tool .smc-feel__gfill,
  .smc-tool .smc-feel__expand { transition: none; }
}

/* ====================== Layer settle motion ====================== */
/* Calm redesign: the only layer motion is a single short "settle" on the
 * slab the user just changed. The whole-stack "dropping" cascade keyframe
 * was removed — the JS never sets data-motion="dropping" anymore. */

.smc-tool .mt-layer[data-motion="settling"] {
  animation: smcLayerSettle 80ms ease-in-out forwards;
  transform-origin: 50% 100%;
}

@keyframes smcLayerSettle {
  0%   { transform: scaleY(1); }
  50%  { transform: scaleY(1.04); }
  100% { transform: scaleY(1); }
}

@media (prefers-reduced-motion: reduce) {
  /* The global catch-all above (.smc-tool * / .smc-modal *) already drops
     animation + transition durations to ~0; this just additionally pins the
     settle transform back to identity so the slab never sits mid-scale. */
  .smc-tool .mt-layer[data-motion="settling"] {
    transform: none !important;
  }
}

/* ============================================================
 * v1.7.2 — Standalone /mattresstool/ page parity
 * ------------------------------------------------------------
 *   A. Wrap visualization on the page's full-size mattress
 *   B. Inline wrap-upgrade row (premium pill + toggle)
 *   C. Disclosure panel under the row
 *   D. (email button removed — no styling change required)
 * ============================================================ */

/* A — Page mattress wrap visualization. Mirrors the mini-mattress
 * treatment but scaled up: 5px cotton bands + 6px rounded slabs +
 * micro-stitch line top/bottom. */
.smc-tool .mattress.is-wrapped {
  /* Cream cotton band peeks between the gaps; same color as mini. */
  background: #EFE7D6;
  padding: 0;
  gap: 5px;
}
.smc-tool .mattress.is-wrapped .mt-layer {
  border-radius: 6px;
  box-shadow:
    inset 0  1px 0 rgba(255, 252, 242, 0.85),
    inset 0 -1px 0 rgba(255, 252, 242, 0.85),
    0 0 0 1px rgba(231, 219, 196, 0.55);
  transition: margin .3s var(--ease), border-radius .3s var(--ease), box-shadow .3s var(--ease);
}
.smc-tool .mattress.is-wrapped .mt-layer::before,
.smc-tool .mattress.is-wrapped .mt-layer::after {
  content: "";
  position: absolute; left: 14px; right: 14px;
  height: 1px;
  background-image: repeating-linear-gradient(90deg,
    rgba(120, 96, 70, 0.45) 0 2px,
    transparent 2px 5px);
  pointer-events: none;
}
.smc-tool .mattress.is-wrapped .mt-layer::before { top: 5px; }
.smc-tool .mattress.is-wrapped .mt-layer::after  { bottom: 5px; }
@media (prefers-reduced-motion: reduce) {
  .smc-tool .mattress.is-wrapped .mt-layer { transition: none; }
}

/* B — Inline wrap-upgrade row. Sits between the layers section and the
 * price row. Light plum-soft background when on, hairline-bordered card
 * when off, mirrors the modal's spec-row visual vocabulary. */
.smc-tool .smc-wrap-upgrade {
  margin: 10px 0 6px;
  padding: 9px 14px; /* compact single-line row (Brian 6/11) */
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  background: var(--paper-2);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  align-items: center;
  transition: background .25s var(--ease), border-color .25s var(--ease);
}
.smc-tool .smc-wrap-upgrade.is-on {
  background: var(--plum-soft);
  border-color: color-mix(in srgb, var(--plum-deep, #7A4F8C) 24%, transparent);
}
.smc-tool .smc-wrap-upgrade__head {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 3px 10px;
  min-width: 0;
}
.smc-tool .smc-wrap-upgrade__eyebrow {
  font-size: 9.5px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--plum-deep);
  background: var(--paper);
  border-radius: 999px;
  padding: 2px 7px;
  flex-shrink: 0;
}
.smc-tool .smc-wrap-upgrade.is-on .smc-wrap-upgrade__eyebrow {
  background: var(--paper);
}
.smc-tool .smc-wrap-upgrade__title {
  font-size: 13.5px; font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.005em;
  font-family: var(--font);
}
.smc-tool .smc-wrap-upgrade__detail {
  font-size: 12px;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums lining-nums;
  white-space: nowrap;
}
.smc-tool .smc-wrap-upgrade.is-on .smc-wrap-upgrade__detail {
  color: var(--plum-deep); font-weight: 500; /* color carries the emphasis — 600 tipped the line over the wrap threshold */
}
.smc-tool .smc-wrap-upgrade__actions {
  display: flex; align-items: center; gap: 10px;
  flex-shrink: 0;
}
.smc-tool .smc-wrap-upgrade__why {
  appearance: none;
  background: transparent;
  border: 0;
  border-radius: var(--radius-sharp);
  font-family: inherit;
  font-size: 12px;
  color: var(--plum-deep);
  cursor: pointer;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  padding: 4px 0;
}
.smc-tool .smc-wrap-upgrade__why:hover { color: var(--ink); }
/* Neutralize the base .split-toggle divider chrome inside this row — the
   dashed top border + extra top spacing belong to the layer-panel context,
   not a compact inline card. */
.smc-tool .smc-wrap-upgrade__toggle {
  width: auto; margin-top: 0; padding: 4px 0 4px 4px; border-top: none;
}

/* C — Disclosure under the row */
.smc-tool .smc-wrap-upgrade__details:not([hidden]) {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 16px;
  margin: -8px 0 14px;
  padding: 14px 18px 16px;
  border: 1px solid var(--hairline);
  border-top: 0;
  border-radius: 0 0 var(--radius-card) var(--radius-card);
  background: var(--paper-3);
  align-items: start;
}
.smc-tool .smc-wrap-upgrade__thumb {
  width: 96px; height: 96px;
  object-fit: cover;
  border-radius: 8px;
  display: block;
}
.smc-tool .smc-wrap-upgrade__copy {
  margin: 0;
  font-size: 13px;
  color: var(--ink-2);
  line-height: 1.5;
}

/* Mobile — stack the row vertically so the toggle isn't squeezed */
@media (max-width: 640px) {
  .smc-tool .smc-wrap-upgrade {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .smc-tool .smc-wrap-upgrade__actions {
    justify-content: space-between;
  }
  .smc-tool .smc-wrap-upgrade__details:not([hidden]) {
    grid-template-columns: 80px 1fr;
  }
  .smc-tool .smc-wrap-upgrade__thumb { width: 80px; height: 80px; }
}

/* ============================================================
   v1.8.0 — Build studio (standalone /mattresstool/ redesign)
   Client direction (John, 2026-05-29 #9–#11): the mattress build,
   the layer-editing tools, and Add-to-cart must be visible together
   without scrolling. Two-column "studio": mattress on the left,
   the control rail (size lives above) on the right.
   Everything is scoped to .smc-tool so the modal is untouched.
   ============================================================ */

/* Sit the studio higher on the page (was 56px top). */
.smc-tool { padding-top: 26px; }
.smc-tool .mt-tabs { margin-bottom: 16px; }

/* Numbered step badge inside the section labels (1 Size · 2 Comfort layers) */
.smc-tool .mt-step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 19px; height: 19px; border-radius: 999px;
  background: var(--plum-deep); color: #fff;
  font-size: 11px; font-weight: 700; line-height: 1; flex: 0 0 auto;
}
.smc-tool .mt-section-label:has(.mt-step-num)::before { display: none; }
.smc-tool .mt-section-label:has(.mt-step-num) { gap: 9px; }

/* Size block (full width, above the studio) */
.smc-tool .mt-size { margin-bottom: 16px; }
.smc-tool .mt-size .size-pill { padding: 8px 6px 6px; }
.smc-tool .mt-size .sz-thumb { height: 38px; }

/* ---- The two-column studio ---- */
.smc-tool .mt-studio {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
  gap: 26px;
  align-items: start;
}

/* LEFT — the live mattress + feel band */
.smc-tool .mt-studio__visual {
  display: flex; flex-direction: column; gap: 12px; min-width: 0;
}
.smc-tool .mt-studio__visual .mattress-stage { margin-bottom: 0; }
.smc-tool .mt-studio__visual .mattress { width: min(500px, 100%); }
.smc-tool .mt-studio__visual .mt-layer { min-height: 74px; }
/* One calm readout: feel name + plain sentence; gauges deferred behind a link */
.smc-tool .mt-readout {
  display: flex; flex-direction: column; gap: 4px;
  font-family: var(--font);
  margin-top: 0; padding: 18px 20px;
  background: var(--paper);
  border: 1px solid color-mix(in srgb, var(--plum-deep) 22%, var(--hairline));
  border-radius: var(--radius-card);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset, var(--shadow-card);
}
.smc-tool .mt-readout__eyebrow {
  font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase;
  font-weight: 600; color: var(--plum-deep); opacity: .9;
}
.smc-tool .mt-readout__name {
  font-family: var(--font); font-weight: 600; font-size: 26px; line-height: 1.15;
  color: var(--ink); transition: opacity 200ms ease;
}
.smc-tool .mt-readout__line {
  margin: 2px 0 0; font-size: 14px; line-height: 1.5; color: var(--ink-2); max-width: 46ch;
}
.smc-tool .mt-readout__split-tag {
  align-self: flex-start; margin-top: 6px;
  font-size: 11px; font-weight: 600; letter-spacing: .04em;
  padding: 3px 10px; border-radius: var(--radius-pill);
  background: var(--plum-soft); color: var(--plum-deep);
}
.smc-tool .mt-readout__split-tag[hidden] { display: none; }
.smc-tool .mt-readout__toggle {
  align-self: flex-start; margin-top: 10px;
  background: none; border: none; border-radius: 2px; padding: 4px 0; cursor: pointer;
  font-family: var(--font); font-size: 13px; font-weight: 600;
  color: var(--plum-deep);
  text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, var(--plum-deep) 40%, transparent);
}
.smc-tool .mt-readout__toggle:hover { color: var(--ink); text-decoration-color: currentColor; }
.smc-tool .mt-readout__toggle:focus-visible { outline: 2px solid var(--plum); outline-offset: 2px; border-radius: 2px; }
.smc-tool .mt-readout__toggle[aria-expanded="true"] { text-decoration: none; }
.smc-tool .mt-readout__gauges {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px;
  margin-top: 12px; padding-top: 14px;
  border-top: 1px solid var(--hairline-soft);
}
.smc-tool .mt-readout__gauges[hidden] { display: none; }
.smc-tool .mt-readout__gauges .smc-feel__gbar { height: 5px; }
.smc-tool .mt-readout__gauges .smc-feel__glabel { font-weight: 600; color: var(--ink-2); }

/* Clearer, non-italic caption that points at the slabs (not the key) */
.smc-tool .mt-studio__visual .mattress-caption {
  font-family: var(--font); font-style: normal;
  font-size: 12.5px; line-height: 1.45; color: var(--ink-2);
  margin-top: 12px; max-width: 40ch; margin-left: auto; margin-right: auto;
}

/* RIGHT — the control rail */
.smc-tool .mt-studio__rail {
  display: flex; flex-direction: column; gap: 10px; min-width: 0;
}
.smc-tool .mt-studio__rail > .mt-section-label { margin: 0 0 2px; }
.smc-tool .mt-studio__rail .layer-controls,
.smc-tool .mt-studio__rail .feedback { margin-top: 0; }
.smc-tool .mt-studio__rail .smc-wrap-upgrade { margin: 0; }
/* Keep the on-load recommendation compact so the ATC stays above the fold */
.smc-tool .mt-studio__rail .feedback { padding: 10px 16px; font-size: 12.5px; }
.smc-tool .mt-studio__rail .feedback .feedback__desc {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* (The per-layer couples switch row is gone — "Feel of the bed" below the
   panel is the single split-feel control; duplicate chrome was confusing.) */

/* ---- Whole-side gradient shortcuts (in the bed-mode row) ---- */
.lc-side-quick__btn {
  background: none; border: none; border-radius: 2px; padding: 2px 4px; cursor: pointer;
  color: var(--plum-deep); text-decoration: underline; text-underline-offset: 2px;
  font-size: 11px;
}
.lc-side-quick__btn:focus-visible { outline: 2px solid var(--plum); outline-offset: 2px; }
/* At the soft/firm extreme: a genuinely disabled control (not a fake ✓ that
   still clicked). "Softer"/"Firmer" are actions, so the end state reads as
   disabled, not selected. */
.lc-side-quick__btn:disabled {
  text-decoration: none;
  color: var(--ink-3);
  opacity: .55;
  cursor: default;
}

/* Rail values pulse when a whole-side recipe changes them — the panel shows
   one layer, so confirmation happens where the change actually landed. */
.mt-guiderail__val.is-flash { animation: smc-valflash .7s var(--ease); }
@keyframes smc-valflash {
  0%   { background: var(--plum-soft); color: var(--plum-deep); }
  100% { background: transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .mt-guiderail__val.is-flash { animation: none; background: var(--plum-soft); }
}

/* Live not-recommended call CTA */
.smc-tool .feedback__call { font-weight: 700; color: var(--plum-deep); white-space: nowrap; }

/* ---- Price + Add-to-cart, surfaced up in the rail ---- */
.smc-tool .mt-studio__rail .price-row {
  display: flex; flex-direction: column; align-items: stretch;
  gap: 10px; margin-top: 2px; padding: 14px 16px;
  border: 1px solid var(--hairline); border-radius: var(--radius-card);
  background: var(--paper); box-shadow: var(--shadow-card);
}
.smc-tool .mt-studio__rail .price-row .price-block { gap: 2px; }
.smc-tool .mt-studio__rail .price-row .amount,
.smc-tool .mt-studio__rail .price-row .price { font-size: 40px; }
.smc-tool .mt-studio__rail .price-row .actions {
  display: flex; gap: 10px; width: 100%; flex-wrap: nowrap;
}
.smc-tool .mt-studio__rail .price-row .btn-primary {
  flex: 1 1 auto; justify-content: center; padding: 15px 24px; font-size: 15px;
}
.smc-tool .mt-studio__rail .price-row .btn-tertiary { flex: 0 0 auto; }

/* ---- Responsive ---- */
/* Keep the side-by-side studio down onto tablets (incl. iPad portrait 768);
   in the narrower 2-col range, stack the Latex/Firmness controls so they
   don't cramp. */
@media (max-width: 900px) {
  .smc-tool .mt-studio { gap: 20px; }
  .smc-tool .mt-studio__rail .lc-groups { grid-template-columns: 1fr; }
  .smc-tool .mt-studio__visual .mattress { width: min(440px, 100%); }
}
/* Collapse to a single column only on phones / very narrow tablets. */
@media (max-width: 720px) {
  .smc-tool .mt-studio { grid-template-columns: 1fr; gap: 16px; }
  .smc-tool .mt-studio__visual { max-width: 520px; margin: 0 auto; width: 100%; }
  .smc-tool .mt-studio__visual .mattress { width: min(420px, 100%); }
  .smc-tool .mt-studio__rail .price-row .amount,
  .smc-tool .mt-studio__rail .price-row .price { font-size: 48px; }
}
@media (max-width: 560px) {
  .smc-tool .mt-studio__rail .price-row .actions { flex-wrap: wrap; }
  .smc-tool .mt-studio__rail .price-row .btn-tertiary { order: 2; width: 100%; }
  .smc-tool .mt-readout { padding: 16px; }
  .smc-tool .mt-readout__name { font-size: 22px; }
}

/* ============================================================
   Task 4 — Calm Step 2 (Serenity popup): presets-first. The standing
   guide-rail/coach/recipe/next/secondary/legend overlay was removed.
   Step 2 now leads with the SAME presets-first build-picker the page
   uses; per-layer editing is the escape hatch behind one Customize
   disclosure. The .mt-buildpicker / .mt-customize / .mt-guiderail /
   .layer-controls styles are already defined .smc-tool-scoped above
   and apply inside .md-panel.smc-tool — only modal-column sizing here.
   ============================================================ */
.smc-modal[data-mode="wizard"] .md-controls--calm { display: flex; flex-direction: column; gap: 12px; }

/* The build-picker leads the rail. Its cards/seeall/customize styles are
   inherited from the .smc-tool rules; nudge the heading tighter in-modal. */
.smc-modal[data-mode="wizard"] .md-controls--calm .mt-buildpicker { margin: 0; }

/* Per-layer controls panel host (the active layer renders here, one at a
   time, so the guide-rail isn't wiped on each render). */
.smc-modal[data-mode="wizard"] .md-controls--calm .layer-controls__panel { min-height: 0; }
.smc-modal[data-mode="wizard"] .md-controls--calm .mt-guiderail { margin-bottom: 10px; }

/* --- Spotlight the active layer; quiet the others (kept) --- */
.smc-modal[data-mode="wizard"] .md-stack-grid .mt-layer { transition: filter .25s var(--ease); }
.smc-modal[data-mode="wizard"] .md-stack-grid.is-focus-mode .mt-layer:not(.focused) { filter: saturate(.7) opacity(.5); }

/* ============================================================
   v1.9.0 — Guided standalone page: the same education layer as the
   popup (guide-rail + coaching + plain-language recipe), layered onto
   the all-on-one-screen studio. Scoped to .smc-tool (the page) — the
   modal uses its own .md-* equivalents.
   ============================================================ */
/* Guide rail — Top / Middle / Bottom (carries the "2 Comfort layers" label) */
.smc-tool .mt-guiderail { margin-bottom: 2px; }
.smc-tool .mt-guiderail .mt-section-label { margin: 0 0 8px; }
.smc-tool .mt-guiderail__steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.smc-tool .mt-guiderail__step {
  display: flex; flex-direction: row; align-items: center; flex-wrap: wrap; gap: 2px;
  padding: 9px 12px; border: 1px solid var(--hairline); border-radius: 10px;
  background: var(--paper-2); cursor: pointer; text-align: left;
  transition: border-color .2s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease);
}
.smc-tool .mt-guiderail__step:hover { border-color: var(--border-cool); }
.smc-tool .mt-guiderail__num {
  display: inline-grid; place-items: center;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--paper-3); color: var(--ink-2);
  font-size: 11px; font-weight: 600; margin-right: 6px;
  flex: 0 0 auto;
}
.smc-tool .mt-guiderail__name { font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; font-weight: 600; color: var(--ink-3); flex: 1 1 auto; }
.smc-tool .mt-guiderail__val { font-size: 14px; font-weight: 600; color: var(--ink); width: 100%; margin-top: 4px; padding-left: 24px; }
.smc-tool .mt-guiderail__step.is-active { border-color: var(--plum-deep); box-shadow: var(--shadow-focus); background: var(--focus-bg); }
.smc-tool .mt-guiderail__step.is-active .mt-guiderail__name { color: var(--plum-deep); }
.smc-tool .mt-guiderail__step.is-active .mt-guiderail__num { background: var(--plum-deep); color: #fff; }

/* ============================================================
   Task 9 — Bed-level feel mode row ("Feel of the bed").
   Two-segment toggle at the top of the customize disclosure on
   both surfaces (page + popup). Pressed state is DERIVED from
   layers (split && _showSides); .is-disabled = ineligible size.
   ============================================================ */
.mt-bedmode { margin-bottom: 12px; }
.mt-bedmode__seg {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  border: 1px solid var(--hairline); border-radius: var(--radius-card); overflow: hidden;
}
.mt-bedmode__opt {
  background: var(--paper); border: none; border-radius: 0; padding: 10px 12px; cursor: pointer;
  font-size: 12.5px; font-weight: 600; color: var(--ink-2);
  display: flex; flex-direction: column; gap: 2px; align-items: flex-start; text-align: left;
}
.mt-bedmode__opt + .mt-bedmode__opt { border-left: 1px solid var(--hairline); }
/* End options match the container's inner curve (card radius minus the 1px
   border) so the pressed inset ring and focus outline follow the corner
   instead of being clipped square by the container's overflow:hidden. */
.mt-bedmode__opt:first-child {
  border-radius: calc(var(--radius-card) - 1px) 0 0 calc(var(--radius-card) - 1px);
}
.mt-bedmode__opt:last-child {
  border-radius: 0 calc(var(--radius-card) - 1px) calc(var(--radius-card) - 1px) 0;
}
.mt-bedmode__opt small { font-weight: 400; font-size: 10.5px; color: var(--ink-3); }
.mt-bedmode__opt[aria-pressed="true"] {
  background: var(--plum-soft); color: var(--plum-deep); box-shadow: inset 0 0 0 1px var(--plum);
}
.mt-bedmode__opt:focus-visible { outline: 2px solid var(--plum); outline-offset: -2px; }
/* Dim only the disabled controls — the unlock note stays readable (contrast). */
.mt-bedmode.is-disabled .mt-bedmode__seg { opacity: .55; }
.mt-bedmode__note { display: block; margin-top: 6px; font-size: 11px; color: var(--ink-3); }
.mt-bedmode__quick {
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px;
  margin-top: 8px; font-size: 11px; color: var(--ink-3);
  animation: smc-fadeIn .3s var(--ease);
}
.mt-bedmode__quick[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) {
  .mt-bedmode__quick { animation: none; }
}
.mt-bedmode__quick-side { display: inline-flex; align-items: center; gap: 2px; }
.mt-bedmode__quick-label {
  font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
  font-weight: 600; color: var(--plum-deep); margin-right: 2px;
}
.mt-bedmode__confirm {
  margin-top: 8px; padding: 10px 12px; border: 1px solid var(--warn-soft);
  background: var(--warn-soft); border-radius: var(--radius-card);
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 12.5px;
}
.mt-bedmode__confirm[hidden] { display: none; }
.mt-bedmode__confirm button {
  border-radius: var(--radius-sharp); border: 1px solid var(--hairline);
  background: #fff; padding: 6px 12px; font-size: 12px; cursor: pointer;
}
.mt-bedmode__confirm [data-bed-confirm="yes"] { background: var(--ink); color: #fff; border-color: var(--ink); }

/* ============================================================
 * Dual L/R feel readout — when split sides differ, the readout
 * names BOTH sides; each name carries a small L / R disc mark.
 * (.is-dual is toggled by renderFeelImmediate.)
 * Selectors are scoped to .smc-tool / .smc-modal to avoid
 * bleed into unrelated .is-dual usage on the page.
 * ============================================================ */
.smc-tool .is-dual [data-role="feel-name"]::before,
.smc-modal .is-dual [data-role="feel-name"]::before,
.smc-tool .is-dual [data-role="feel-name-right"]::before,
.smc-modal .is-dual [data-role="feel-name-right"]::before {
  content: "L"; display: inline-grid; place-items: center;
  width: 16px; height: 16px; border-radius: 50%; margin-right: 8px;
  background: var(--ink); color: #fff; font-size: 9.5px; font-weight: 700; vertical-align: 2px;
}
.smc-tool .is-dual [data-role="feel-name-right"]::before,
.smc-modal .is-dual [data-role="feel-name-right"]::before { content: "R"; }
.smc-tool .mt-readout__name--right, .smc-tool .smc-feel__name--right,
.smc-modal .mt-readout__name--right, .smc-modal .smc-feel__name--right { display: block; }
/* Fix 1 — guard: a [hidden] right name must stay hidden even when the display:block
 * rule above fires. Scoped identically (specificity 0,3,0) and placed AFTER so it wins. */
.smc-tool .mt-readout__name--right[hidden], .smc-tool .smc-feel__name--right[hidden],
.smc-modal .mt-readout__name--right[hidden], .smc-modal .smc-feel__name--right[hidden],
.smc-tool [data-role="feel-name-right"][hidden],
.smc-modal [data-role="feel-name-right"][hidden] { display: none; }
.smc-tool .is-dual .mt-readout__name,
.smc-modal .is-dual .mt-readout__name { font-size: 22px; }

/* ============================================================
   v1.12.0 — Browse / Build progressive disclosure
   ============================================================ */
.smc-tool .mt-build-bar { display: none; }
.smc-tool.is-building .mt-build-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 14px; }
.smc-tool.is-building .mt-size,
.smc-tool.is-building [data-role="build-picker"],
.smc-tool.is-building [data-role="customize-toggle"] { display: none; }

.mt-chip {
  display: inline-flex; align-items: center; gap: 6px;
  max-width: 100%; padding: 6px 12px;
  font: 500 13px/1.2 var(--sans);
  color: var(--ink); background: var(--paper-2);
  border: 1px solid var(--hairline); border-radius: var(--radius-pill);
  cursor: pointer; transition: background .18s var(--ease), border-color .18s var(--ease);
}
.mt-chip:hover { background: var(--plum-soft); border-color: var(--plum); }
.mt-chip__val { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mt-chip__act { flex: 0 0 auto; color: var(--plum); text-decoration: underline; }
.smc-tool.is-building[data-expanded-chip="size"] .mt-size { display: block; }
.smc-tool.is-building[data-expanded-chip="build"] [data-role="build-picker"] { display: block; }
.smc-tool.is-building[data-expanded-chip="size"] [data-chip="size"],
.smc-tool.is-building[data-expanded-chip="build"] [data-chip="build"] { background: var(--plum-soft); border-color: var(--plum); }
.smc-tool.is-building[data-build-summary="true"] [data-role="layer-controls"] { display: none; }

/* Signature motion: chips settle in as choices fold (fold-out is display:none,
   which can't transition — the drop-in is the felt motion). + mobile chip sizing. */
.smc-tool.is-building .mt-chip { animation: smc-drop .28s var(--ease) both; }
@media (max-width: 720px) {
  .smc-tool.is-building .mt-build-bar { gap: 6px; margin-bottom: 12px; }
  .smc-tool .mt-chip { font-size: 12px; padding: 8px 12px; min-height: 40px; }
  .smc-tool .mt-chip__val { max-width: 46vw; }
}

/* ── Guided pop-up bubbles (J9-J12) — premium variant ────────────────────
   Bubble + spotlight ring live on <body> (outside .smc-tool's var scope), so
   colors are hardcoded to the SavvyRest palette. They persist across steps and
   GLIDE to each target; nothing renders at rest once the tour is dismissed. */
.smc-tour-ring {
  position: absolute; z-index: 100000; pointer-events: none; border-radius: 16px;
  box-shadow: 0 0 0 2px #7A4F8C, 0 0 0 7px rgba(161,115,178,.22),
              0 0 34px 6px rgba(122,79,140,.30), 0 0 0 9999px rgba(26,17,29,.34);
  transition: left .6s cubic-bezier(.34,1.18,.5,1), top .6s cubic-bezier(.34,1.18,.5,1),
              width .6s cubic-bezier(.34,1.18,.5,1), height .6s cubic-bezier(.34,1.18,.5,1);
}
.smc-tour-bubble {
  position: absolute; z-index: 100002; width: 336px; max-width: calc(100vw - 24px);
  background: #FBF8F2; border: 1px solid rgba(26,17,29,.10); border-radius: 20px; padding: 19px 21px 17px;
  box-shadow: 0 1px 0 rgba(255,255,255,.8) inset, 0 28px 56px -26px rgba(26,17,29,.46), 0 10px 26px -16px rgba(26,17,29,.30);
  font-family: "Cabinet Grotesk", "Hanken Grotesk", system-ui, sans-serif; color: #1A111D;
  animation: smc-tour-in .42s cubic-bezier(.34,1.18,.5,1);
  transition: left .58s cubic-bezier(.34,1.18,.5,1), top .58s cubic-bezier(.34,1.18,.5,1);
}
@keyframes smc-tour-in { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }
.smc-tour-bubble::after {
  content: ""; position: absolute; left: var(--arrow-x, 40px); width: 16px; height: 16px;
  background: #FBF8F2; transform: translateX(-50%) rotate(45deg);
}
.smc-tour-bubble.below::after { top: -8px; border-left: 1px solid rgba(26,17,29,.10); border-top: 1px solid rgba(26,17,29,.10); }
.smc-tour-bubble.above::after { bottom: -8px; border-right: 1px solid rgba(26,17,29,.10); border-bottom: 1px solid rgba(26,17,29,.10); }
.smc-tour-head { display: flex; align-items: center; gap: 12px; margin-bottom: 13px; }
.smc-tour-medallion {
  width: 42px; height: 42px; border-radius: 13px; flex: none; display: grid; place-items: center;
  background: radial-gradient(120% 120% at 30% 20%, #F4ECF7 0%, #ECE3F0 70%);
  box-shadow: inset 0 0 0 1px rgba(122,79,140,.18), 0 6px 16px -10px rgba(122,79,140,.55); color: #7A4F8C;
}
.smc-tour-medallion svg { width: 24px; height: 24px; display: block; }
.smc-tour-step { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: #9A8AA0; font-weight: 500; }
.smc-tour-step b { color: #7A4F8C; font-weight: 700; }
.smc-tour-x { margin-left: auto; width: 30px; height: 30px; padding: 0; line-height: 0; box-sizing: border-box; border-radius: 9px; border: 1px solid transparent; background: transparent; color: #9A8AA0; cursor: pointer; display: grid; place-items: center; transition: background .2s, color .2s, border-color .2s; }
.smc-tour-x:hover { background: #F7F3EA; color: #3A2D40; border-color: rgba(26,17,29,.07); }
.smc-tour-x svg { width: 15px; height: 15px; display: block; }
.smc-tour-title { font-size: 20px; font-weight: 800; letter-spacing: -.012em; color: #3A2D40; line-height: 1.08; }
.smc-tour-body { font-size: 13.5px; line-height: 1.56; color: #6A5A6E; margin-top: 7px; }
.smc-tour-foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 17px; }
.smc-tour-dots { display: flex; gap: 7px; align-items: center; }
.smc-tour-dot { width: 7px; height: 7px; border-radius: 999px; background: rgba(122,79,140,.24); transition: width .42s cubic-bezier(.34,1.18,.5,1), background .3s; }
.smc-tour-dot.on { width: 22px; background: #7A4F8C; }
.smc-tour-dot.done { background: rgba(122,79,140,.5); }
.smc-tour-btns { display: flex; gap: 9px; }
.smc-tour-back, .smc-tour-next { font-family: inherit; font-size: 13.5px; font-weight: 700; letter-spacing: .005em; padding: 9px 17px; border-radius: 11px; cursor: pointer; border: 1px solid transparent; transition: transform .18s, background .2s, color .2s, border-color .2s, box-shadow .2s; }
.smc-tour-back { background: transparent; border-color: rgba(122,79,140,.38); color: #7A4F8C; }
.smc-tour-back:hover { border-color: #7A4F8C; transform: translateY(-1px); box-shadow: 0 8px 18px -13px rgba(122,79,140,.5); }
.smc-tour-next { background: #7A4F8C; color: #FBF8F2; box-shadow: 0 8px 20px -10px rgba(74,46,87,.6); }
.smc-tour-next:hover { background: #4A2E57; transform: translateY(-1px); box-shadow: 0 12px 24px -10px rgba(74,46,87,.7); }
.smc-tour-next:active { transform: translateY(0) scale(.98); }
.smc-tool .smc-guide-relaunch {
  display: flex; align-items: center; gap: 8px; margin: 4px auto 16px; font-family: inherit;
  font-size: 12.5px; font-weight: 600; color: #7A4F8C; padding: 9px 15px; border-radius: 999px; cursor: pointer;
  background: #FBF8F2; border: 1px solid rgba(122,79,140,.28); box-shadow: 0 1px 0 rgba(255,255,255,.7) inset;
  transition: transform .22s cubic-bezier(.34,1.18,.5,1), box-shadow .22s, border-color .2s;
}
.smc-tool .smc-guide-relaunch:hover { transform: translateY(-2px); border-color: rgba(122,79,140,.5); box-shadow: 0 14px 30px -16px rgba(26,17,29,.4); }
.smc-tool .smc-guide-relaunch svg { width: 15px; height: 15px; color: #A173B2; }
@media (prefers-reduced-motion: reduce) {
  .smc-tour-ring, .smc-tour-bubble, .smc-tour-dot { transition: none; }
  .smc-tour-bubble { animation: none; }
}