/* ==========================================================================
   Tunstall Product 3D  —  [tunstall_product3d]
   Interactive glTF/GLB viewer (spin/zoom) via <model-viewer>. Scoped under
   .t3d. Presentation only — colour/layout, no new type scale.
   ========================================================================== */

/* Pass height down through Elementor's widget wrappers so the viewer can fill
   the height you set on the Elementor container. (Each ancestor must be 100%
   or % height collapses to auto — which is why only min-height showed before.)
   Set a height on the parent Elementor container and the viewer follows it. */
.elementor-widget:has(.t3d),
.elementor-widget:has(.t3d) > .elementor-widget-container,
.elementor-widget:has(.t3d) .elementor-shortcode {
  height: 100%;
}

.t3d {
  width: 100%;
  height: 100%;
  margin-inline: auto;
}

.t3d model-viewer {
  width: 100%;
  /* Fill the container's height; falls back to a sensible minimum if the
     container has no explicit height set in Elementor. */
  height: 100%;
  min-height: 320px;
  background-color: transparent;
  --poster-color: transparent;
  --progress-bar-color: #ed1c29;
  /* No overflow clip + transparent bg so the model's shadow isn't cut off at
     the edges while rotating. */
  cursor: grab;
}
.t3d model-viewer:active {
  cursor: grabbing;
}

/* ---- Preloader (shown until the model finishes loading) ---------------- */
.t3d__loader {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: transparent;
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.35s ease;
}
.t3d__loader.is-hidden {
  opacity: 0;
}
.t3d__spinner {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 3px solid rgba(3, 3, 3, 0.15);
  border-top-color: #ed1c29;
  animation: t3d-spin 0.8s linear infinite;
}
@keyframes t3d-spin {
  to {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .t3d__spinner {
    animation-duration: 2s;
  }
}

/* Editor-only notice when a product has no model yet. */
.t3d__notice {
  margin: 0;
  padding: 0.6rem 0.9rem;
  border-radius: 8px;
  background: #fff4f4;
  color: #9b1c1c;
  font: 600 13px/1.4 system-ui, sans-serif;
}