/* Window 3D viewer. Everything is scoped under .wv so it can sit inside any website
   without touching the host page's styles. Override the custom properties on .wv to theme it.

   Sizing: the panel text and column width scale with the width of the .wv container
   (cqw = 1% of that width), clamped so they stop growing on very wide screens and never
   shrink below laptop size. Everything inside the panel is sized in em, so it all follows
   the one fluid font-size below. Override --wv-panel / --wv-fs to take manual control. */
.wv {
  --wv-stage: #FFFFFF;    /* viewer background */
  --wv-paper: #FFFFFF;    /* panel background */
  --wv-ink: #23262A;      /* graphite text */
  --wv-muted: #5E646A;
  --wv-rule: #C4C8C9;
  --wv-blue: #2F5D8A;     /* blueprint blue: dimension lines + focus only */
  --wv-accent: #E8722A;   /* orange: the pulsing ring on the handle marker */
  --wv-min-height: 600px; /* set to 100vh for a full-page viewer */
  --wv-panel: clamp(340px, 24cqw + 40px, 720px);      /* panel column width */
  --wv-fs: clamp(16px, 0.62cqw + 8px, 28px);        /* panel base text size */
  --wv-pad: clamp(20px, 1.6cqw, 34px);                /* stage button inset */

  container: wv / inline-size;
  font-family: "Archivo", system-ui, sans-serif;
  font-size: var(--wv-fs); line-height: 1.45; font-variant-numeric: tabular-nums;
  color: var(--wv-ink); background: var(--wv-paper);
}
.wv, .wv * { box-sizing: border-box; }
.wv-inner { display: grid; grid-template-columns: minmax(0, 1fr) var(--wv-panel); min-height: var(--wv-min-height); }
/* shield text elements from the host site's global element styles (h2 { color: red } etc.);
   the viewer's own class rules below still win */
.wv :where(h2, p, dl, dt, dd, legend, fieldset, header, aside, section, small, span) {
  color: inherit; line-height: inherit; text-transform: none; letter-spacing: normal;
  font-family: inherit; font-style: normal; text-align: left;
}
:where(.wv) button { font: inherit; color: inherit; }   /* :where keeps this reset low-priority */
.wv :focus-visible { outline: 2px solid var(--wv-blue); outline-offset: 3px; }

.wv-stage { position: relative; background: var(--wv-stage); min-height: 480px; }
.wv model-viewer {
  position: absolute; inset: 0; width: 100%; height: 100%;
  background: transparent; --poster-color: transparent;
  --progress-bar-color: var(--wv-blue); --min-hotspot-opacity: 1;
}
.wv-dims { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.wv-dims line { stroke: var(--wv-blue); stroke-width: 1.25; }
.wv-anchor { width: 1px; height: 1px; pointer-events: none; }
.wv-dim-label {
  pointer-events: none; padding: 0.15em 0.5em; border-radius: 2px;
  background: var(--wv-stage); color: var(--wv-blue);
  font-size: 0.82em; font-weight: 600; font-stretch: 90%; white-space: nowrap;
}
.wv-stage.wv-no-dims .wv-dims, .wv-stage.wv-no-dims .wv-dim-label { visibility: hidden; }

/* the hand marker that sits on the sash handle; clicking it slides the sash */
.wv-handle {
  display: grid; place-items: center; gap: 0; padding: 0; cursor: pointer;
  width: 2.6em; height: 2.6em; border-radius: 50%;
  /* mostly transparent so the latch stays visible underneath; the icon keeps a dark outline
     so it reads against both the glass and a light frame */
  background: transparent; border: 0; color: var(--wv-ink);
}
.wv-handle[hidden] { display: none; }
.wv-handle svg {
  width: 1.5em; height: 1.5em; fill: currentColor;
  filter: drop-shadow(0 0 1px var(--wv-paper)) drop-shadow(0 0 2px var(--wv-paper));
}
.wv-handle:hover svg { transform: scale(1.08); }
/* a soft pulse so it reads as "you can tap this", stopped for reduced-motion users */
.wv-handle::before {   /* orange pulse; the hand icon keeps its own color */
  content: ""; position: absolute; inset: -0.1em; border-radius: 50%;
  border: 2px solid var(--wv-accent); opacity: 0.85; animation: wv-pulse 2s ease-out infinite;
  pointer-events: none;
}
@keyframes wv-pulse {
  0% { transform: scale(0.75); opacity: 0.9; }
  70% { transform: scale(1.2); opacity: 0; }
  100% { transform: scale(1.2); opacity: 0; }
}
.wv-handle-tip {
  position: absolute; left: 50%; top: calc(100% + 0.45em); transform: translateX(-50%);
  padding: 0.15em 0.5em; border-radius: 2px; white-space: nowrap;
  background: var(--wv-ink); color: var(--wv-paper);
  font-size: 0.72em; font-weight: 600; font-stretch: 90%;
}
@media (prefers-reduced-motion: reduce) {
  .wv-handle::before { animation: none; }
}

.wv-toolbar { position: absolute; left: var(--wv-pad); bottom: var(--wv-pad); display: flex; gap: 0.5em; }
.wv-tool {
  background: var(--wv-paper); border: 1px solid var(--wv-rule); border-radius: 3px;
  padding: 0.5em 0.9em; font-size: 0.875em; cursor: pointer;
}
.wv-tool:hover { border-color: var(--wv-ink); }
.wv-tool[aria-pressed="false"] { color: var(--wv-muted); }
.wv-ar {
  position: absolute; right: var(--wv-pad); bottom: var(--wv-pad); border: 0; border-radius: 3px;
  background: var(--wv-ink); color: var(--wv-paper);
  padding: 0.625em 1em; font-size: 0.875em; cursor: pointer;
}

/* ---- panel: all sizes in em so they follow --wv-fs ---- */
.wv-panel {
  display: flex; flex-direction: column; gap: 2em;
  padding: 2.5em 2em; border-left: 1px solid var(--wv-rule);
}
.wv-title { margin: 0; color: var(--wv-ink); font-size: 1.75em; line-height: 1.15; font-weight: 600; font-stretch: 112%; letter-spacing: -0.01em; }
.wv-size { margin: 0.55em 0 0; font-size: 1.125em; }
.wv-size small { margin-left: 0.5em; font-size: 0.78em; color: var(--wv-muted); }

.wv-finish { margin: 0; padding: 0; border: 0; min-width: 0; }
.wv-finish legend { padding: 0; margin-bottom: 0.9em; font-size: 0.95em; font-weight: 600; }
.wv-finish legend span { font-weight: 400; }
/* 3 per row: standard finishes on the first row, accent finishes on the second
   (--wv-cols is set by the script; override on .wv for a different grid) */
.wv-swatches { display: grid; grid-template-columns: repeat(var(--wv-cols, 3), minmax(0, 1fr)); gap: 0.75em 0.5em; }
.wv-swatch {
  display: flex; flex-direction: column; align-items: center; gap: 0.5em;
  padding: 0.6em 0 0.5em; background: none; border: 1px solid transparent; border-radius: 3px;
  font-size: 0.78em; color: var(--wv-muted); cursor: pointer; line-height: 1.25; text-align: center;
}
.wv-swatch:hover { border-color: var(--wv-rule); }
.wv-swatch[aria-pressed="true"] { border-color: var(--wv-ink); color: var(--wv-ink); }
/* chip = a mitered frame corner, two bars meeting at 45° like a frame sample */
.wv-chip {
  width: 4.5em; height: 4.5em;
  border: 1.2em solid transparent;
  border-top-color: var(--c); border-left-color: var(--c);
  filter: drop-shadow(0 0 0.6px rgba(35, 38, 42, 0.55));
}

.wv-specs { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 0.5em 1.25em; font-size: 0.95em; }
.wv-specs dt { color: var(--wv-muted); }
.wv-specs dd { margin: 0; }
.wv-note { margin: auto 0 0; max-width: 34ch; font-size: 0.82em; color: var(--wv-muted); }

/* narrow containers (phones, or a narrow column on a desktop page) */
@container wv (max-width: 760px) {
  .wv-inner { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .wv-stage { height: min(64vh, 125cqw); min-height: 360px; }
  .wv-swatch { font-size: 0.7em; }
  .wv-chip { width: 3.9em; height: 3.9em; border-width: 1.02em; }
  .wv-panel { border-left: 0; border-top: 1px solid var(--wv-rule); padding: 1.75em 1.25em 2.25em; gap: 1.5em; }
  /* keep a strip under the model for the buttons so they never cover the dimensions */
  .wv model-viewer, .wv-dims { height: calc(100% - 58px); }
  .wv-toolbar { left: 12px; bottom: 10px; }
  .wv-ar { right: 12px; bottom: 10px; }
}