/* 3D product viewer (PDP) — canvas, mode toggle, dimension row, tolerance note. */

.pdp__viewer { position: relative; }

#product-viewer {
  position: relative;
  aspect-ratio: 4 / 3;
  /* Paper, matching the WebGL backdrop — this is what shows before the canvas
     paints and behind the SVG schematic fallback, so a gray here read as a
     flash of the wrong page. */
  background: var(--paper);
  border: 0.5px solid var(--navy);
  overflow: hidden;
  cursor: grab;
}
#product-viewer:active { cursor: grabbing; }
#product-viewer canvas { display: block; width: 100%; height: 100%; }

/* Projected OD/ID labels (cross-section mode) */
.pv-labels { position: absolute; inset: 0; pointer-events: none; }
.pv-label {
  position: absolute;
  transform: translate(-50%, -145%);
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  color: #1e2a3d;
  background: rgba(250, 250, 250, 0.88);
  padding: 1px 6px;
  border-radius: 3px;
  white-space: nowrap;
}

/* Solid | Cross-section toggle */
.pv-toggle {
  display: inline-flex;
  border: 0.5px solid var(--navy);
  margin-bottom: 0.6rem;
}
.pv-toggle__btn {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0.35rem 0.9rem;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--navy);
  cursor: pointer;
}
.pv-toggle__btn--active {
  background: var(--navy);
  color: var(--paper);
}

/* Dimension row below the viewer — same weight as the price line, understated */
.pdp__dims {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.6rem;
  margin-top: 0.9rem;
  font-family: var(--mono);
  font-size: 0.8rem;
  color: var(--ink);
}
.pdp__dims .pdp__dim-key {
  opacity: 0.55;
  margin-right: 0.25rem;
}

/* Tolerance disclosure */
.pdp__tolerance {
  margin: 0.4rem 0 0;
  font-size: 0.78rem;
  color: rgba(15, 22, 32, 0.55);
}
.pdp__tolerance a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.pdp__tolerance a:hover { color: var(--brass-deep); }