/* STAGE3D styles: the rotatable model canvas */
.stage-view[data-view='3d'] {
  cursor: grab;
  touch-action: pan-y; /* vertical page scroll still works over the canvas on touch */
  outline: none;
}
.stage-view[data-view='3d'].is-grabbing { cursor: grabbing; }
.stage-view[data-view='3d']:focus-visible { outline: 2px solid var(--rust); outline-offset: -2px; }
.st3d-canvas { display: block; width: 100%; height: 100%; }

/* walkthrough viewpoint pills */
.st3d-spots {
  position: absolute;
  left: 50%; bottom: var(--space-md);
  transform: translateX(-50%);
  display: flex; gap: var(--space-xs);
  z-index: 2;
}
.st3d-spots button {
  appearance: none;
  background: var(--paper); color: var(--ink);
  border: 1px solid var(--line); border-radius: 999px;
  padding: 9px 16px; min-height: 44px;
  font-family: var(--sans); font-size: 16px;
  letter-spacing: 0.08em; text-transform: uppercase;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.st3d-spots button[aria-pressed='true'] { background: var(--charcoal); color: var(--paper); border-color: var(--charcoal); }
.st3d-spots button:focus-visible { outline: 2px solid var(--rust); outline-offset: 2px; }
@media (max-width: 640px) {
  .st3d-spots { bottom: var(--space-xs); }
  .st3d-spots button { min-height: 40px; padding: 7px 12px; font-size: 13px; }
}