/* ============================================================
   Montalvi Design Studio — premium overlay
   ------------------------------------------------------------
   The studio is a prebuilt SPA with no source on the server, so
   this layers over its bundled stylesheet rather than replacing
   it. Loaded AFTER index-*.css so plain specificity wins; only a
   few rules need !important where the bundle sets inline-level
   sizing.

   Scope: presentation and touch ergonomics only. Nothing here
   changes layout boxes the WebGL renderer measures (.stage /
   canvas), because that renderer does NOT re-read its size after
   init — resizing those would letterbox the 3D view.
   ============================================================ */

:root {
  --mv-gold: #C2A14D;
  --mv-gold-soft: #D8C38A;
  --mv-ink: #0E0E10;
  --mv-cream: #F4EFE6;
  --mv-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- Typography: match the house voice ---------- */
.ds-head .brand,
.hud-piece-name,
.range-name,
.piece-name {
  font-family: "Cormorant Garamond", serif !important;
  font-weight: 300 !important;
  letter-spacing: 0.01em;
}

.eyebrow,
.hud-spec-label,
.finish-lbl,
.camv-hint,
.range-sub {
  font-family: "Jost", sans-serif;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

/* Prices and dimensions read better as tabular figures */
.hud-dims,
.hud-offer,
.mob-dims,
.val {
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.005em;
}

/* ---------- Surfaces: depth instead of flat washes ---------- */
.ctrl,
.rail,
.hud {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.042) 0%, rgba(255, 255, 255, 0.010) 44%, rgba(0, 0, 0, 0.16) 100%);
  border: 1px solid rgba(255, 255, 255, 0.07);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.05) inset,
    0 18px 46px rgba(0, 0, 0, 0.34);
  backdrop-filter: blur(8px);
}

.hud {
  border-radius: 14px;
}

/* Group headers get a gold hairline rather than a hard divider */
.grp-h {
  border-bottom: 1px solid rgba(194, 161, 77, 0.18);
}

/* ---------- Controls ---------- */
.rail-btn,
.seg,
.camv-btn,
.preset,
.twoT-btn,
.spin-btn,
.color-picker-toggle {
  transition:
    background-color 0.4s var(--mv-ease),
    border-color 0.4s var(--mv-ease),
    color 0.4s var(--mv-ease),
    transform 0.4s var(--mv-ease);
}

.rail-btn:hover,
.seg:hover,
.camv-btn:hover,
.preset:hover {
  border-color: rgba(194, 161, 77, 0.5);
  color: var(--mv-cream);
}

/* Selected state: a gold edge with a soft aura, not a hard ring */
.seg.on,
.rail-btn.on,
.camv-btn.on,
.preset.on,
.unit-seg .on,
.fseg.on {
  border-color: var(--mv-gold) !important;
  color: var(--mv-cream) !important;
  background: linear-gradient(180deg, rgba(194, 161, 77, 0.16), rgba(194, 161, 77, 0.05)) !important;
  box-shadow: 0 0 0 1px rgba(194, 161, 77, 0.45), 0 0 22px -8px rgba(194, 161, 77, 0.5);
}

/* Primary actions — the brushed-gold bar used across the site */
.gold,
.offerbtn,
.basket-add-btn,
.mob-quote-btn {
  background: linear-gradient(100deg, #B08F3C 0%, #C2A14D 38%, #E4D3A2 52%, #C2A14D 66%, #B08F3C 100%) !important;
  background-size: 220% 100% !important;
  background-position: 0% 0;
  color: #0B0B0D !important;
  border: 0 !important;
  font-family: "Jost", sans-serif;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  box-shadow: 0 10px 24px -10px rgba(194, 161, 77, 0.6);
  transition: background-position 0.9s var(--mv-ease), box-shadow 0.4s ease, transform 0.4s ease;
}

.gold:hover,
.offerbtn:hover,
.basket-add-btn:hover,
.mob-quote-btn:hover {
  background-position: 100% 0;
  transform: translateY(-1px);
  box-shadow: 0 16px 32px -12px rgba(194, 161, 77, 0.75);
}

/* Finish swatches: a jewel edge and a clear selected ring */
.finish-swatch,
.finish-tile,
.mob-fin-dot {
  border-radius: 50%;
  box-shadow:
    inset 0 2px 6px rgba(0, 0, 0, 0.3),
    0 4px 10px rgba(0, 0, 0, 0.32);
  transition: transform 0.4s var(--mv-ease), outline-color 0.35s ease, box-shadow 0.4s ease;
  outline: 1.5px solid transparent;
  outline-offset: 3px;
}

.finish-swatch:hover,
.mob-fin-dot:hover {
  transform: translateY(-2px);
  outline-color: rgba(194, 161, 77, 0.55);
}

.finish-swatch.on,
.mob-fin-dot.on {
  outline-color: var(--mv-gold);
  transform: translateY(-2px);
}

/* Sliders: gold track and a properly grabbable thumb */
input[type="range"].slider,
.slider input[type="range"],
.ctrl input[type="range"] {
  accent-color: var(--mv-gold);
  height: 26px;
}

/* Focus ring consistent with the rest of the site */
.studio :focus-visible {
  outline: 2px solid var(--mv-gold);
  outline-offset: 2px;
}

/* ============================================================
   PHONES — ergonomics
   Apple asks for 44px minimum touch targets, Google 48dp. The
   studio shipped controls at 26–33px, which is why precise taps
   were fiddly. These raise the hit area WITHOUT changing the
   .stage / canvas boxes.
   ============================================================ */
@media (max-width: 767px) {

  /* Every real control, audited from the live DOM, to a 44px hit area */
  .rail-btn,
  .seg,
  .camv-btn,
  .preset,
  .twoT-btn,
  .mob-controls-btn,
  .mob-quote-btn,
  .spin-btn,
  .ghost,
  .gold,
  .mode-switch button,
  .scene-switch button,
  .ss-room,
  .basket-add-btn,
  .ai-fab,
  .offerbtn,
  .reset,
  .color-picker-toggle,
  .toggle,
  .accgrp .check,
  .voice-btn,
  .mob-quick-cams button,
  .mob-quick-fins button:not(.mob-fin-dot),
  .cam-views button {
    min-height: 44px !important;
    min-width: 44px;
    padding-block: 10px;
    font-size: 13px;
  }

  /* Numeric dimension fields sit inside .val — they were 33px tall */
  .val input,
  .ctrl input[type="number"],
  .ctrl input[type="text"] {
    min-height: 44px !important;
    font-size: 16px !important;   /* 16px stops iOS zooming on focus */
  }

  /* Range sliders: a 26px box is hard to grab mid-drag */
  input[type="range"],
  input[type="range"].slider,
  .ctrl input[type="range"] {
    min-height: 44px !important;
  }
  input[type="range"]::-webkit-slider-thumb {
    width: 26px; height: 26px; border-radius: 50%;
  }

  /* Finish dots were 28px — well under a fingertip */
  .mob-fin-dot {
    width: 42px !important;
    height: 42px !important;
    flex: 0 0 42px;
  }

  .mob-quick-fins,
  .mob-quick-cams {
    min-height: 48px;
    gap: 10px;
  }

  /* Horizontal control strips should scroll cleanly, not clip */
  .mob-quick,
  .mob-quick-fins,
  .mob-quick-cams,
  .rail-scroll,
  .presets,
  .twoT-presets {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }
  .mob-quick::-webkit-scrollbar,
  .mob-quick-fins::-webkit-scrollbar,
  .mob-quick-cams::-webkit-scrollbar,
  .rail-scroll::-webkit-scrollbar,
  .presets::-webkit-scrollbar { display: none; }

  .mob-quick-fins > *,
  .mob-quick-cams > *,
  .presets > * { scroll-snap-align: center; }

  /* The bottom bar is the primary control surface — give it presence
     and keep it clear of the iOS home indicator. */
  .mob-bar {
    min-height: 56px;
    padding-bottom: env(safe-area-inset-bottom, 0);
    background: linear-gradient(180deg, rgba(14, 14, 16, 0.92), rgba(14, 14, 16, 0.985));
    border-top: 1px solid rgba(194, 161, 77, 0.28);
    backdrop-filter: blur(10px);
    box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.45);
  }

  /* Stop long dimension/label text wrapping the bar onto two lines */
  .mob-dims,
  .hud-dims {
    white-space: nowrap;
  }

  /* Slightly tighter HUD so it never crowds a small 3D view */
  .hud {
    font-size: 12px;
    border-radius: 12px;
  }

  /* Unit toggles (mm / cm / in) were 24x17 — too fine for a thumb */
  .unit-seg button,
  .unit-seg .on {
    min-height: 36px !important;
    min-width: 40px;
    padding: 6px 10px !important;
    font-size: 12px;
  }

  /* Camera-view icons stay square at the larger size */
  .mob-quick-cams button,
  .cam-views button {
    width: 44px;
    aspect-ratio: 1;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

@media (max-width: 380px) {
  .mob-fin-dot { width: 40px !important; height: 40px !important; flex: 0 0 40px; }
  .mob-quote-btn { font-size: 12px; letter-spacing: 0.05em; }
}

/* ---------- Landscape phones: reclaim vertical space ---------- */
@media (max-height: 460px) and (orientation: landscape) {
  .mob-bar { min-height: 44px; }
  .hud { font-size: 11px; }
}

/* ---------- Large screens: let the studio breathe ---------- */
@media (min-width: 1600px) {
  .ctrl { font-size: 14.5px; }
  .rail-btn, .seg { font-size: 13.5px; }
}

/* ---------- Respect motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  .rail-btn, .seg, .camv-btn, .preset, .finish-swatch,
  .mob-fin-dot, .gold, .offerbtn, .basket-add-btn, .mob-quote-btn {
    transition: none !important;
  }
}


/* ---------- Mode switch as the upgrade path ----------
   The opening gate that explained the two modes is gone, so the top-bar switch
   carries that job now: make the professional mode read as the step up. */
.mode-switch .mv-upgrade {
  border-color: rgba(194,161,77,.55) !important;
  color: #E4D3A2 !important;
}
.mode-switch .mv-upgrade::after {
  content: "PRO";
  margin-left: 7px;
  font-family: Jost, Arial, sans-serif;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: .12em;
  vertical-align: 1px;
  color: #0B0B0D;
  background: linear-gradient(90deg, #C2A14D, #D8C38A);
  padding: 2px 5px;
  border-radius: 3px;
}
.mode-switch.mv-is-pro .mv-upgrade::after { content: "PRO \2713"; }