/* Click-to-load 3D product viewer: button, canvas slot, spinner.
   Loaded only on product-nexus-8/-16/-32. The static .prod-img is untouched;
   these styles cover the "View in 3D" affordance and the canvas that replaces
   the image in the same slot. Button treatment mirrors the site .cta-btn pill,
   compact for a secondary in-hero control. Spinner reuses the main.css spinR keyframe. */
.prod-3d{position:relative}
.prod-3d-btn{
  display:inline-flex;align-items:center;gap:8px;
  margin-top:20px;
  padding:12px 26px;border-radius:50px;
  background:var(--red);color:#fff;
  font-family:'Outfit',sans-serif;font-weight:600;font-size:14px;
  border:none;cursor:pointer;
  transition:all .3s cubic-bezier(.16,1,.3,1);
}
.prod-3d-btn:hover{background:var(--red-h);transform:translateY(-2px);box-shadow:0 10px 28px rgba(204,34,34,.3)}
.prod-3d-btn:disabled{opacity:.6;cursor:default;transform:none;box-shadow:none}
.prod-3d-btn svg{width:15px;height:15px;flex-shrink:0}
/* Canvas takes the exact box the .prod-img card had (same size + paper card look) so the
   swap causes no reflow AND the 3D model reads on the same light card as the static render.
   The paper background also lets the module's paper contact-shadow show. */
.prod-3d-canvas{
  display:block;margin:30px auto 0;
  background:var(--paper-2);border-radius:20px;box-shadow:var(--shadow-lg);
  touch-action:pan-y;cursor:grab;
}
.prod-3d-canvas:active{cursor:grabbing}
/* inline loading spinner inside the button; keeps the button box constant (zero shift) */
.prod-3d-spin{
  display:inline-block;width:14px;height:14px;flex-shrink:0;
  border:2px solid rgba(255,255,255,.45);border-top-color:#fff;border-radius:50%;
  animation:spinR .8s linear infinite;
}
/* reduced motion: no 3D affordance at all, static image only */
@media(prefers-reduced-motion:reduce){.prod-3d-btn{display:none}}