/* WESTA 3D viewer – all classes are prefixed "w3d-" so they never collide with the site CSS.
   Colours fall back to the WESTA palette and follow the site variables when they exist. */
.w3d-host { position: relative; }
.w3d-hidden { visibility: hidden !important; }

.w3d-stage {
  position: absolute; inset: 0; z-index: 1;      /* below the site's corner flag (z-index 2) */
  display: flex; align-items: center; justify-content: center;
  border-radius: inherit; overflow: hidden;
  touch-action: pan-y; -webkit-tap-highlight-color: transparent;
}
.w3d-stage[hidden] { display: none; }

.w3d-poster, .w3d-model { position: absolute; inset: 0; width: 100%; height: 100%; }
.w3d-poster { object-fit: contain; pointer-events: none; user-select: none; }
.w3d-model { background: transparent; --poster-color: transparent; --progress-bar-height: 0px; outline: none; }
.w3d-is-ready .w3d-poster { visibility: hidden; }
.w3d-is-loading .w3d-poster { animation: w3d-pulse 1.6s ease-in-out infinite; }
@keyframes w3d-pulse { 50% { opacity: .82; } }

/* subtle 360° badge – bottom right of the viewer */
.w3d-badge {
  position: absolute; right: 12px; bottom: 12px; z-index: 3;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 9px; border-radius: 999px;
  font: 600 12px/1 system-ui, -apple-system, "Segoe UI", sans-serif; letter-spacing: .02em;
  color: var(--green-700, #1a3c34); background: rgba(255, 255, 255, .78);
  box-shadow: 0 1px 3px rgba(15, 38, 20, .18); backdrop-filter: blur(4px);
  pointer-events: auto; cursor: help;
}
.w3d-is-fallback .w3d-badge { display: none; }

/* colour variants – bottom left of the viewer */
.w3d-variants { position: absolute; left: 12px; bottom: 12px; z-index: 3; display: flex; gap: 8px; }
.w3d-variants[hidden] { display: none !important; }      /* single variant: no colour dots */
.w3d-is-fallback .w3d-variants { display: flex; }      /* still switches the static image */
.w3d-chip {
  width: 26px; height: 26px; padding: 0; border-radius: 50%; cursor: pointer;
  background: var(--w3d-chip); border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(26, 60, 52, .35), 0 1px 3px rgba(15, 38, 20, .2);
}
.w3d-chip[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--green-700, #1a3c34), 0 1px 3px rgba(15, 38, 20, .2); }
.w3d-chip:focus-visible, .w3d-badge:focus-visible { outline: 2px solid var(--green-700, #1a3c34); outline-offset: 2px; }

/* the 3D thumbnail in the existing thumb strip gets a small 360° mark */
[data-westa-3d] { position: relative; }
[data-westa-3d]::after {
  content: "360°"; position: absolute; right: 4px; bottom: 4px;
  padding: 2px 5px; border-radius: 999px;
  font: 700 10px/1 system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--green-700, #1a3c34); background: var(--lime-400, #DFFB6A);
  pointer-events: none;
}

.w3d-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (max-width: 640px) {
  .w3d-badge { right: 8px; bottom: 8px; padding: 4px 8px; }
  .w3d-variants { left: 8px; bottom: 8px; }
  .w3d-chip { width: 30px; height: 30px; }       /* bigger touch targets */
}
@media (prefers-reduced-motion: reduce) { .w3d-is-loading .w3d-poster { animation: none; } }