/* ============================================================
   LLocal Design Studio
   Wizard styles — extends the site's obsidian/gold/wood design
   system (see assets/css/global.css) rather than redefining it.
   All new classes are prefixed `ds-` to avoid any collision with
   the global stylesheet's cascade.
============================================================ */

/* ---- Page-level overrides (this page only) ---- */
body.ds-page .sticky-mobile-cta,
body.ds-page #lead-popup-overlay {
  display: none !important;
}

body.ds-page main,
body.ds-page {
  background-color: var(--deep-black);
}

.ds-root {
  min-height: 70vh;
  position: relative;
  overflow-anchor: none; /* prevent the browser from "compensating" scroll position
    when hero/wizard/success blocks are hidden/shown — we drive scroll explicitly */
}

.ds-icon {
  display: inline-flex;
  width: 1em;
  height: 1em;
}
.ds-icon svg {
  width: 100%;
  height: 100%;
}

/* ============================================================
   SKELETON (graceful loading state before JS mounts)
============================================================ */
.ds-skeleton {
  min-height: 86vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 0 24px;
}
.ds-skeleton-bar {
  border-radius: 4px;
  background: linear-gradient(90deg, var(--charcoal) 25%, rgba(184,149,106,0.14) 50%, var(--charcoal) 75%);
  background-size: 200% 100%;
  animation: ds-shimmer 1.6s ease-in-out infinite;
}
.ds-skeleton-bar--eyebrow { width: 160px; height: 12px; }
.ds-skeleton-bar--title { width: min(520px, 80vw); height: 44px; }
.ds-skeleton-bar--subtitle { width: min(380px, 60vw); height: 16px; }
@keyframes ds-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ============================================================
   HERO / INTRO
============================================================ */
.ds-hero-wrap[hidden] { display: none; }

.ds-hero {
  position: relative;
  min-height: 86vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding-top: 110px; /* clears the site's fixed header (global.css `header { position: fixed }`) */
}

.ds-hero-media {
  position: absolute;
  inset: 0;
  background-color: var(--charcoal);
  background-size: cover;
  background-position: center 30%;
  transform: scale(1.05);
}

.ds-hero-scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(7,7,8,0.55) 0%, rgba(7,7,8,0.75) 55%, var(--deep-black) 100%),
    radial-gradient(80% 60% at 50% 20%, rgba(184,149,106,0.14), transparent 70%);
}

.ds-hero-content {
  position: relative;
  z-index: 1;
  max-width: 720px;
  margin: 0 auto;
  padding: 0 24px;
  text-align: center;
}

.ds-hero-content > * {
  animation: ds-hero-rise 0.8s var(--ease-luxury) backwards;
}
.ds-hero-content > *:nth-child(1) { animation-delay: 0.05s; }
.ds-hero-content > *:nth-child(2) { animation-delay: 0.15s; }
.ds-hero-content > *:nth-child(3) { animation-delay: 0.28s; }
.ds-hero-content > *:nth-child(4) { animation-delay: 0.4s; }
.ds-hero-content > *:nth-child(5) { animation-delay: 0.5s; }
@keyframes ds-hero-rise {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: translateY(0); }
}

.ds-hero-title {
  font-size: var(--fs-hero);
  color: var(--white);
  margin: 18px 0 20px;
}

.ds-hero-subtitle {
  font-size: 16px;
  color: var(--stone);
  font-weight: 300;
  line-height: 1.8;
  max-width: 560px;
  margin: 0 auto 40px;
}

.ds-hero-cta {
  font-size: 12px;
}

.ds-hero-meta {
  margin-top: 20px;
  font-size: 12px;
  color: var(--platinum);
  letter-spacing: 0.08em;
}

/* ============================================================
   WIZARD SHELL
============================================================ */
.ds-wizard[hidden] { display: none; }

.ds-wizard {
  max-width: 1160px;
  margin: 0 auto;
  padding: 130px 24px 120px; /* top clears the site's fixed header, see .ds-hero */
}

.ds-wizard-body {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 36px;
  align-items: start;
  margin-top: 44px;
}

.ds-step-panel {
  padding: 52px;
  min-height: 420px;
  transition: opacity 0.35s var(--ease-luxury), transform 0.35s var(--ease-luxury);
}

.ds-step-panel.ds-step-fade {
  opacity: 0;
  transform: translateY(10px);
}

.ds-step-head { margin-bottom: 42px; }

.ds-step-title {
  font-size: 30px;
  color: var(--white);
  margin-bottom: 10px;
}

.ds-step-copy {
  font-size: 14px;
  color: var(--stone);
  font-weight: 300;
  line-height: 1.7;
  max-width: 520px;
}

/* ============================================================
   STEPPER
============================================================ */
.ds-stepper {
  display: flex;
  align-items: center;
}

.ds-stepper-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}

.ds-stepper-bubble {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  border: 1px solid var(--glass-border);
  background: var(--charcoal);
  color: var(--platinum);
  transition: all var(--transition-fast);
}
.ds-stepper-bubble .ds-icon { width: 16px; height: 16px; }

.ds-stepper-item--active .ds-stepper-bubble {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--obsidian);
  box-shadow: 0 0 0 4px rgba(184, 149, 106, 0.18);
}

.ds-stepper-item--done .ds-stepper-bubble {
  background: transparent;
  border-color: var(--gold);
  color: var(--gold);
}

.ds-stepper-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--platinum);
  white-space: nowrap;
}
.ds-stepper-item--active .ds-stepper-label { color: var(--gold); }
.ds-stepper-item--done .ds-stepper-label { color: var(--stone-light); }

.ds-stepper-line {
  flex: 1 1 auto;
  height: 1px;
  background: var(--glass-border);
  margin: 0 8px 24px;
  min-width: 24px;
}

.ds-stepper-compact { display: none; }

/* ============================================================
   OPTION GRIDS / CARDS  (project type, material, style)
============================================================ */
.ds-option-grid {
  display: grid;
  gap: 22px;
}
.ds-option-grid--3 { grid-template-columns: repeat(3, 1fr); }
.ds-option-grid--2 { grid-template-columns: repeat(2, 1fr); }

.ds-option-card {
  position: relative;
  display: flex;
  flex-direction: column;
  text-align: left;
  background: var(--glass-tint);
  border: 1px solid var(--glass-border);
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
  transition: transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
  animation: ds-card-in 0.5s var(--ease-luxury) backwards;
  animation-delay: calc(var(--i, 0) * 70ms);
}
@keyframes ds-card-in {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}
.ds-option-card:hover {
  transform: translateY(-4px);
  border-color: var(--gold-dark);
  box-shadow: 0 20px 40px rgba(0,0,0,0.35);
}
.ds-option-card:active {
  transform: translateY(-1px) scale(0.98);
}
.ds-option-card.is-selected {
  border-color: var(--gold);
  box-shadow: 0 0 0 1px var(--gold), 0 20px 40px rgba(0,0,0,0.35);
}
.ds-option-card:focus-visible {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(184, 149, 106, 0.35);
}

.ds-option-check {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 1;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--obsidian);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: ds-pop 0.4s var(--ease-luxury);
}
.ds-option-check .ds-icon { width: 14px; height: 14px; }
@keyframes ds-pop {
  0% { transform: scale(0); }
  60% { transform: scale(1.15); }
  100% { transform: scale(1); }
}

.ds-option-media {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.ds-option-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
  transition: transform 0.6s var(--ease-luxury);
}
.ds-option-card:hover .ds-option-media img { transform: scale(1.06); }

.ds-option-glyph {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
  color: var(--gold);
  background: rgba(184, 149, 106, 0.06);
}
.ds-option-glyph .ds-icon { width: 40px; height: 40px; }

.ds-option-swatch {
  display: block;
  aspect-ratio: 4 / 3;
  border-bottom: 1px solid var(--glass-border);
}

.ds-option-body {
  padding: 22px 24px 26px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ds-option-label {
  font-size: 16px;
  font-weight: 500;
  color: var(--white);
  letter-spacing: 0.01em;
}

.ds-option-desc {
  font-size: 13px;
  font-weight: 300;
  color: var(--stone);
  line-height: 1.6;
}

/* ============================================================
   BUTTON POLISH (scoped to this page only — does not touch
   the shared .btn rules in global.css)
============================================================ */
body.ds-page .btn {
  position: relative;
  overflow: hidden;
}
body.ds-page .btn:active {
  transform: scale(0.97);
}
body.ds-page .btn.btn-gold::after {
  content: '';
  position: absolute;
  top: 0;
  left: -60%;
  width: 40%;
  height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,0.35), transparent);
  transform: skewX(-20deg);
  transition: left 0.6s var(--ease-luxury);
}
body.ds-page .btn.btn-gold:hover::after {
  left: 130%;
}
body.ds-page .btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(184, 149, 106, 0.4);
}

/* ============================================================
   LIVE VISUAL PREVIEW
============================================================ */
.ds-summary-wrap {
  display: flex;
  flex-direction: column;
  gap: 32px; /* generous, deliberate separation between the preview and the summary card */
  position: sticky;
  top: 24px;
}

.ds-preview {
  padding: 0;
  overflow: hidden;
}

/* Deliberately a light, clean "studio stage" — a product-configurator
   convention — rather than continuing the page's dark theme into the
   preview itself. The staircase model is the hero; it needs a neutral,
   gallery-white surface to read cleanly, per the "minimal, clean, elegant"
   visual-style directive (see RENDERING_ENGINE.md §6). */
.ds-preview-frame {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: radial-gradient(120% 100% at 50% 0%, #faf9f6 0%, #ece8e1 100%);
}

.ds-preview-mount {
  position: absolute;
  inset: 0;
  cursor: grab;
}
.ds-preview-mount:active {
  cursor: grabbing;
}
.ds-preview-mount canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}

.ds-preview-loading {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  background: inherit;
  transition: opacity 0.3s ease, visibility 0.3s;
}
.ds-preview-loading.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.ds-preview-loading .ds-spinner {
  border-color: rgba(184, 149, 106, 0.25);
  border-top-color: var(--gold);
}

/* Shown when the 3D renderer can't load (no WebGL, CDN blocked, offline,
   or a browser without import-map support). The wizard still works. */
.ds-preview-fallback {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 28px;
  text-align: center;
  background: linear-gradient(135deg, #f6f4f0 0%, #e8e4dd 100%);
}
.ds-preview-fallback-icon { width: 34px; height: 34px; color: var(--wood); opacity: 0.55; }
.ds-preview-fallback p {
  font-size: 12px;
  line-height: 1.7;
  color: var(--text-muted-dark);
  max-width: 240px;
}

.ds-camera-controls {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 6px;
}
.ds-camera-preset-select {
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(250, 249, 246, 0.9);
  border: 1px solid rgba(0, 0, 0, 0.08);
  color: var(--text-dark);
  font-size: 11px;
  cursor: pointer;
}
.ds-camera-reset {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(250, 249, 246, 0.9);
  border: 1px solid rgba(0, 0, 0, 0.08);
  color: var(--text-dark);
  cursor: pointer;
  transition: transform var(--transition-fast);
}
.ds-camera-reset:hover { transform: rotate(-45deg); }
.ds-camera-reset .ds-icon { width: 13px; height: 13px; }

.ds-camera-present {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(250, 249, 246, 0.9);
  border: 1px solid rgba(0, 0, 0, 0.08);
  color: var(--text-dark);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.ds-camera-present .ds-icon { width: 13px; height: 13px; }
.ds-camera-present.is-active {
  background: var(--gold);
  color: var(--obsidian);
}

.ds-preview-gesture-hint {
  padding: 10px 20px 0;
  font-size: 10px;
  color: var(--platinum);
  text-align: center;
  letter-spacing: 0.02em;
}

.ds-preview-caption {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 18px;
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px 4px;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(250,249,246,0) 0%, rgba(250,249,246,0.94) 55%);
}
.ds-preview-caption-eyebrow {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--wood);
}
.ds-preview-caption-main {
  font-size: 15px;
  color: var(--text-dark);
  font-weight: 500;
  min-height: 1.3em;
  transition: opacity 0.3s ease;
}

.ds-preview-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 20px;
}
.ds-preview-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(184, 149, 106, 0.1);
  border: 1px solid var(--glass-border);
  color: var(--stone-light);
  font-size: 11px;
  letter-spacing: 0.02em;
  animation: ds-card-in 0.4s var(--ease-luxury) backwards;
  animation-delay: calc(var(--i, 0) * 80ms);
}
.ds-preview-chip .ds-icon { color: var(--gold); width: 12px; height: 12px; }

.ds-visualize-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: calc(100% - 32px);
  margin: 0 16px 16px;
  padding: 14px 16px;
  background: transparent;
  border: 1px solid var(--glass-border);
  border-radius: 4px;
  color: var(--white);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  cursor: pointer;
  transition: border-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}
.ds-visualize-cta .ds-icon { color: var(--gold); width: 15px; height: 15px; }
.ds-visualize-cta:hover:not(:disabled) {
  border-color: var(--gold);
  color: var(--gold);
  transform: translateY(-2px);
}
.ds-visualize-cta:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.ds-visualize-cta:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(184, 149, 106, 0.35);
}

/* ============================================================
   "SEE THIS DESIGN IN MY HOME" MODAL
============================================================ */
body.ds-modal-open {
  overflow: hidden;
}

.ds-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000; /* must beat the site header's z-index: 1010 (global.css) so the
    modal — including its close button — isn't rendered underneath it */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(7, 7, 8, 0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: ds-fade-in 0.25s var(--ease-standard);
}
@keyframes ds-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.ds-modal {
  position: relative;
  width: 100%;
  max-width: 580px;
  max-height: 88vh;
  overflow-y: auto;
  padding: 48px 40px 40px;
  animation: ds-modal-in 0.4s var(--ease-luxury);
}
@keyframes ds-modal-in {
  from { opacity: 0; transform: translateY(20px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.ds-modal-close {
  position: absolute;
  top: 16px;
  left: 16px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: transparent;
  border: none;
  color: var(--platinum);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: color var(--transition-fast);
}
.ds-modal-close:hover { color: var(--gold); }
.ds-modal-close .ds-icon { width: 14px; height: 14px; }

.ds-modal-title {
  font-size: 24px;
  color: var(--white);
  margin: 4px 0 14px;
}
.ds-modal-copy {
  font-size: 14px;
  color: var(--stone);
  font-weight: 300;
  line-height: 1.7;
}
.ds-modal-copy strong { color: var(--gold); font-weight: 500; }

.ds-visualize-error-msg {
  margin-top: 14px;
  padding: 10px 14px;
  border-radius: 4px;
  background: rgba(200, 90, 70, 0.12);
  border: 1px solid rgba(200, 90, 70, 0.3);
  color: #e2a897;
  font-size: 13px;
}

.ds-dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-align: center;
  margin-top: 28px;
  padding: 48px 24px;
  border: 1.5px dashed var(--glass-border);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}
.ds-dropzone:hover,
.ds-dropzone.is-dragover {
  border-color: var(--gold);
  background: rgba(184, 149, 106, 0.06);
}
.ds-dropzone-icon {
  width: 36px;
  height: 36px;
  color: var(--gold);
  opacity: 0.7;
}
.ds-dropzone-text {
  font-size: 14px;
  color: var(--stone-light);
}
.ds-dropzone-hint {
  font-size: 11px;
  color: var(--platinum);
}

/* ============================================================
   PHOTO UPLOAD STEP
============================================================ */
.ds-upload-dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-align: center;
  padding: 52px 24px;
  border: 1.5px dashed var(--glass-border);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}
.ds-upload-dropzone:hover,
.ds-upload-dropzone.is-dragover {
  border-color: var(--gold);
  background: rgba(184, 149, 106, 0.06);
}
.ds-upload-icon {
  width: 38px;
  height: 38px;
  color: var(--gold);
  opacity: 0.75;
}
.ds-upload-text {
  font-size: 15px;
  color: var(--stone-light);
}
.ds-upload-hint {
  font-size: 11px;
  color: var(--platinum);
}

.ds-upload-error, .ds-submit-error {
  margin-top: 14px;
  padding: 10px 14px;
  border-radius: 4px;
  background: rgba(200, 90, 70, 0.12);
  border: 1px solid rgba(200, 90, 70, 0.3);
  color: #e2a897;
  font-size: 13px;
}

.ds-upload-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 16px;
  margin-top: 28px;
}

.ds-upload-thumb {
  position: relative;
  aspect-ratio: 1;
  border-radius: 6px;
  overflow: hidden;
  background: var(--charcoal);
  border: 1px solid var(--glass-border);
  animation: ds-card-in 0.4s var(--ease-luxury) backwards;
  animation-delay: calc(var(--i, 0) * 60ms);
}
.ds-upload-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ds-upload-thumb-meta {
  position: absolute;
  left: 8px;
  bottom: 8px;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(7, 7, 8, 0.7);
  color: var(--stone-light);
  font-size: 10px;
}
.ds-upload-remove {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(7, 7, 8, 0.75);
  color: var(--white);
  cursor: pointer;
  transition: background var(--transition-fast), transform var(--transition-fast);
}
.ds-upload-remove:hover {
  background: rgba(200, 90, 70, 0.85);
  transform: scale(1.08);
}
.ds-upload-remove .ds-icon { width: 12px; height: 12px; }

.ds-upload-thumb--pending {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.ds-upload-progress-label {
  font-size: 11px;
  color: var(--platinum);
}

/* ============================================================
   VISUALIZATION STEP
============================================================ */
.ds-viz-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
  padding: 70px 24px;
  text-align: center;
}

/* Three pulsing bars — a considered progress cue rather than a generic
   spinner, matching the premium feel of the rest of the studio. */
.ds-viz-loader {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  height: 42px;
}
.ds-viz-loader span {
  display: block;
  width: 8px;
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(180deg, var(--gold) 0%, var(--wood) 100%);
  transform-origin: bottom;
  animation: ds-viz-pulse 1.1s var(--ease-standard) infinite;
}
.ds-viz-loader span:nth-child(2) { animation-delay: 0.15s; }
.ds-viz-loader span:nth-child(3) { animation-delay: 0.3s; }
@keyframes ds-viz-pulse {
  0%, 100% { transform: scaleY(0.35); opacity: 0.45; }
  50%      { transform: scaleY(1);    opacity: 1; }
}

.ds-viz-loading-label {
  font-size: 14px;
  color: var(--stone);
  letter-spacing: 0.02em;
  min-height: 1.4em;
}

.ds-viz-progress {
  width: min(300px, 70%);
  height: 2px;
  border-radius: 2px;
  background: var(--glass-border);
  overflow: hidden;
}
.ds-viz-progress-bar {
  height: 100%;
  width: 40%;
  border-radius: 2px;
  background: var(--gold);
  animation: ds-viz-sweep 1.6s var(--ease-standard) infinite;
}
@keyframes ds-viz-sweep {
  0%   { transform: translateX(-110%); }
  100% { transform: translateX(360%); }
}

.ds-viz-result {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.ds-viz-image {
  width: 100%;
  border-radius: 8px;
  border: 1px solid var(--glass-border);
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.45);
  animation: ds-card-in 0.6s var(--ease-luxury);
}
.ds-viz-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.ds-viz-actions .btn {
  flex: 1 1 160px;
  padding: 13px 18px;
  font-size: 10px;
}
.ds-viz-note {
  font-size: 11.5px;
  color: var(--platinum);
  line-height: 1.6;
}

.ds-viz-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding: 64px 24px;
  text-align: center;
  border: 1.5px dashed var(--glass-border);
  border-radius: 8px;
}
.ds-viz-empty-icon { width: 38px; height: 38px; color: var(--gold); opacity: 0.7; }
.ds-viz-empty-text { font-size: 14px; color: var(--stone); max-width: 380px; line-height: 1.7; }

.ds-viz-fullscreen {
  padding: 40px;
}
.ds-viz-fullscreen img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 6px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
}
.ds-viz-fullscreen-close {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(250, 249, 246, 0.9);
  border: none;
  color: var(--obsidian);
  cursor: pointer;
  transition: transform var(--transition-fast);
}
.ds-viz-fullscreen-close:hover { transform: scale(1.08); }
.ds-viz-fullscreen-close .ds-icon { width: 16px; height: 16px; }

/* ============================================================
   INTERACTIVE ROOM PLACEMENT
============================================================ */
.ds-place-stage {
  position: relative;
  width: 100%;
  /* aspect-ratio is set inline once the photo loads (room-placement.js),
     matching room-mode.js's requirement that the mount's aspect match the
     photo's so the camera-matched background never stretches. Before that,
     a sensible default keeps the loading spinner centred. */
  aspect-ratio: 4 / 3;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--glass-border);
  background: var(--charcoal);
  cursor: crosshair;
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.35);
  animation: ds-card-in 0.5s var(--ease-luxury) backwards;
}
.ds-place-mount, .ds-place-mount canvas {
  width: 100%;
  height: 100%;
  display: block;
}
.ds-place-loading, .ds-place-generating {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  background: var(--charcoal);
  transition: opacity var(--transition-fast);
}
.ds-place-loading.is-hidden, .ds-place-generating.is-hidden { opacity: 0; pointer-events: none; }
.ds-place-generating-label {
  font-size: 12px;
  color: var(--platinum);
  letter-spacing: 0.06em;
}
.ds-place-hint {
  position: absolute;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  padding: 8px 16px;
  border-radius: 20px;
  background: rgba(11, 11, 12, 0.72);
  backdrop-filter: blur(6px);
  color: var(--white);
  font-size: 12px;
  letter-spacing: 0.02em;
  white-space: nowrap;
  pointer-events: none;
  z-index: 2;
}

/* Controls sit in their own card, matching the site's glass-panel language,
   rather than floating loose beneath the stage — the difference between a
   configurator and a debug overlay. */
.ds-place-controls {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-top: 20px;
  padding: 20px 22px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--glass-border);
  animation: ds-card-in 0.5s var(--ease-luxury) 0.08s backwards;
}
.ds-place-controls-row {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.ds-place-controls-row + .ds-place-controls-row {
  padding-top: 18px;
  border-top: 1px solid var(--glass-border);
}
.ds-place-adjust-group {
  display: flex;
  align-items: center;
  gap: 12px;
}
.ds-place-adjust-label {
  font-size: 11px;
  color: var(--stone);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.ds-place-dpad {
  display: grid;
  grid-template-columns: repeat(3, 40px);
  grid-template-rows: repeat(2, 40px);
  gap: 4px;
}
.ds-place-dpad button:nth-child(1) { grid-column: 2; grid-row: 1; } /* away */
.ds-place-dpad button:nth-child(2) { grid-column: 1; grid-row: 2; } /* left */
.ds-place-dpad button:nth-child(3) { grid-column: 3; grid-row: 2; } /* right */
.ds-place-dpad button:nth-child(4) { grid-column: 2; grid-row: 2; } /* toward */
.ds-place-nudge {
  display: flex;
  align-items: center;
  justify-content: center;
  /* 40px is a compromise between a proper ~44px mobile touch target and
     fitting a 3x2 pad in the same row as the labels on a 320-375px screen —
     verified against a real 375px viewport, no overflow. */
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(250, 249, 246, 0.08);
  border: 1px solid var(--glass-border);
  color: var(--white);
  cursor: pointer;
  transition: background var(--transition-fast), transform var(--transition-fast), border-color var(--transition-fast);
}
.ds-place-nudge:hover { background: rgba(250, 249, 246, 0.16); transform: scale(1.06); border-color: var(--gold-dark); }
.ds-place-nudge:active { transform: scale(0.94); }
.ds-place-nudge .ds-icon { width: 15px; height: 15px; }
.ds-rot-90 { display: inline-flex; transform: rotate(90deg); }
.ds-rot-n90 { display: inline-flex; transform: rotate(-90deg); }
.ds-place-scale {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  color: var(--stone);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  flex: 1 1 140px;
}
.ds-place-scale span { flex-shrink: 0; }
.ds-place-controls input[type="range"] { flex: 1; accent-color: var(--gold); }
.ds-place-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.ds-place-controls .btn { padding: 12px 20px; font-size: 10px; transition: transform var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast); }
.ds-place-controls .btn:active { transform: scale(0.97); }
.ds-place-controls .ds-place-confirm { flex: 1 1 200px; }

.ds-recap-viz {
  margin-bottom: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--glass-border);
}
.ds-recap-viz-image {
  width: 100%;
  border-radius: 6px;
  border: 1px solid var(--glass-border);
}

/* ============================================================
   REVIEW RECAP
============================================================ */
.ds-recap {
  padding: 28px 26px;
  margin-bottom: 36px;
}

.ds-recap-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ds-recap-row {
  display: grid;
  grid-template-columns: 120px 1fr auto;
  align-items: center;
  gap: 16px;
}
.ds-recap-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--platinum);
}
.ds-recap-value {
  font-size: 14px;
  color: var(--stone-light);
}
.ds-recap-edit {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--platinum);
  cursor: pointer;
  transition: color var(--transition-fast), background var(--transition-fast);
}
.ds-recap-edit:hover { color: var(--gold); background: rgba(184,149,106,0.1); }
.ds-recap-edit .ds-icon { width: 13px; height: 13px; }

.ds-recap-photos {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--glass-border);
}
.ds-recap-photos-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.ds-recap-photos-strip {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 4px;
}
.ds-recap-photos-strip img {
  width: 64px;
  height: 64px;
  border-radius: 6px;
  object-fit: cover;
  flex: 0 0 auto;
  border: 1px solid var(--glass-border);
}

.ds-visualize-processing {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  padding: 48px 12px;
  text-align: center;
}
.ds-spinner--lg {
  width: 34px;
  height: 34px;
  border-width: 3px;
  border-color: rgba(184, 149, 106, 0.2);
  border-top-color: var(--gold);
}

.ds-visualize-result {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.ds-visualize-image {
  width: 100%;
  border-radius: 8px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.5);
}
.ds-visualize-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
.ds-visualize-actions .btn {
  flex: 1 1 auto;
}

/* ============================================================
   FORM FIELDS  (dimensions, contact)
============================================================ */
.ds-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px;
}
.ds-form-field--wide { grid-column: 1 / -1; }

.ds-form-field {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ds-form-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--platinum);
}
.ds-form-label .ds-icon { color: var(--gold); width: 15px; height: 15px; }

.ds-input {
  width: 100%;
  padding: 14px 16px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--glass-border);
  border-radius: 4px;
  color: var(--white);
  font-size: 14px;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.ds-input:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(184, 149, 106, 0.18);
}
.ds-input::placeholder { color: var(--platinum); }
select.ds-input {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B4AFAB' stroke-width='1.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 16px;
}
select.ds-input option { background: var(--charcoal); color: var(--white); }

/* ============================================================
   SUMMARY PANEL
============================================================ */
.ds-summary {
  padding: 32px 28px;
}

.ds-summary-title {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--gold);
  margin-bottom: 22px;
}

.ds-summary-empty {
  font-size: 13px;
  color: var(--platinum);
  font-weight: 300;
  line-height: 1.7;
}

.ds-summary-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.ds-summary-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.ds-summary-icon {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(184, 149, 106, 0.1);
  color: var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
}
.ds-summary-icon .ds-icon { width: 15px; height: 15px; }

.ds-summary-text {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.ds-summary-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--platinum);
}

.ds-summary-value {
  font-size: 13px;
  color: var(--stone-light);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ds-summary-edit {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--platinum);
  border-radius: 50%;
  cursor: pointer;
  transition: color var(--transition-fast), background var(--transition-fast);
}
.ds-summary-edit:hover { color: var(--gold); background: rgba(184,149,106,0.1); }
.ds-summary-edit .ds-icon { width: 13px; height: 13px; }

/* ============================================================
   FOOTER NAV
============================================================ */
.ds-footer-nav {
  margin-top: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.ds-nav-next {
  min-width: 220px;
}
.ds-nav-next:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

.ds-spinner {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid rgba(7,7,8,0.25);
  border-top-color: var(--obsidian);
  animation: ds-spin 0.7s linear infinite;
}
@keyframes ds-spin { to { transform: rotate(360deg); } }

/* ============================================================
   SUCCESS SCREEN
============================================================ */
.ds-success-wrap[hidden] { display: none; }

.ds-success-wrap {
  max-width: 560px;
  margin: 0 auto;
  padding: 150px 24px 140px; /* top clears the site's fixed header, see .ds-hero */
}

.ds-success {
  padding: 56px 40px;
  text-align: center;
}

.ds-success-badge {
  width: 84px;
  height: 84px;
  margin: 0 auto 28px;
  color: var(--gold);
}

.ds-success-check {
  width: 100%;
  height: 100%;
}
.ds-success-check circle {
  stroke: var(--gold);
  stroke-width: 1.5;
  stroke-dasharray: 151;
  stroke-dashoffset: 151;
  animation: ds-draw 0.6s var(--ease-luxury) forwards;
}
.ds-success-check path {
  stroke: var(--gold);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 40;
  stroke-dashoffset: 40;
  animation: ds-draw 0.4s var(--ease-luxury) 0.5s forwards;
}
@keyframes ds-draw { to { stroke-dashoffset: 0; } }

.ds-success-title {
  font-size: 28px;
  color: var(--white);
  margin-bottom: 16px;
}

.ds-success-body {
  font-size: 14px;
  color: var(--stone);
  font-weight: 300;
  line-height: 1.8;
  margin-bottom: 32px;
}

/* ============================================================
   NO-SCRIPT FALLBACK
============================================================ */
.ds-noscript-msg {
  max-width: 560px;
  margin: 120px auto;
  padding: 32px;
  text-align: center;
  color: var(--stone);
}

/* ============================================================
   RESPONSIVE
============================================================ */
@media (max-width: 900px) {
  .ds-wizard-body {
    grid-template-columns: 1fr;
  }
  .ds-summary-wrap { order: -1; position: static; }
  .ds-preview-frame { aspect-ratio: 16 / 9; }
}

@media (max-width: 768px) {
  .ds-hero { min-height: 92vh; }
  .ds-wizard { padding: 40px 16px 140px; }
  .ds-step-panel { padding: 30px 22px; }
  .ds-option-grid--3 { grid-template-columns: 1fr 1fr; }
  .ds-form-grid { grid-template-columns: 1fr; }
  .ds-recap-row {
    grid-template-columns: 1fr auto;
    grid-template-areas: "label edit" "value value";
    row-gap: 4px;
  }
  .ds-recap-label { grid-area: label; }
  .ds-recap-edit { grid-area: edit; }
  .ds-recap-value { grid-area: value; }
  .ds-upload-dropzone { padding: 36px 18px; }

  .ds-modal {
    max-width: 100%;
    max-height: 100%;
    height: 100%;
    border-radius: 0;
    padding: 60px 20px 24px;
  }
  .ds-visualize-actions { flex-direction: column; }
  .ds-visualize-actions .btn { width: 100%; }

  .ds-stepper { display: none; }
  .ds-stepper-compact {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .ds-stepper-compact-track {
    height: 4px;
    border-radius: 2px;
    background: var(--glass-border);
    overflow: hidden;
  }
  .ds-stepper-compact-fill {
    height: 100%;
    background: var(--gold);
    transition: width 0.4s var(--ease-luxury);
  }
  .ds-stepper-compact-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--platinum);
  }

  .ds-footer-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 40;
    margin: 0;
    padding: 14px 16px;
    background: var(--glass-tint-dark);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border-top: 1px solid var(--glass-border);
  }
  .ds-wizard { padding-bottom: 110px; }
  .ds-nav-next { min-width: 0; flex: 1 1 auto; }

  body.ds-page .floating-action-button {
    bottom: 96px !important;
  }
}

@media (max-width: 480px) {
  .ds-option-grid--3 { grid-template-columns: 1fr; }
  .ds-option-grid--2 { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .ds-step-panel,
  .ds-option-card,
  .ds-option-media img,
  .ds-stepper-compact-fill,
  .ds-option-check,
  .ds-viz-loader span,
  .ds-viz-progress-bar,
  .ds-viz-image,
  .ds-preview-parallax,
  .ds-preview-chip,
  .ds-skeleton-bar,
  .ds-hero-content > *,
  .ds-modal-overlay,
  .ds-modal,
  body.ds-page .btn.btn-gold::after {
    transition: none !important;
    animation: none !important;
  }
  .ds-success-check circle,
  .ds-success-check path {
    stroke-dashoffset: 0;
    animation: none !important;
  }
}