/*
 * Product 3D viewer
 * Shared, page-scoped presentation for every product model-viewer experience.
 */

.product-detail-page .pbt-product-3d {
  position: relative;
  overflow: hidden;
}

.product-detail-page .pbt-product-3d .container-1480 {
  width: 100%;
  max-width: 1480px;
  padding-right: clamp(16px, 3.5vw, 52px);
  padding-left: clamp(16px, 3.5vw, 52px);
}

.product-detail-page .pbt-product-3d__experience {
  width: 100%;
  min-width: 0;
  margin-right: auto;
  margin-left: auto;
  content-visibility: auto;
  contain-intrinsic-size: 860px;
}

.product-detail-page .pbt-product-3d__model-row {
  width: 100%;
  margin-right: 0;
  margin-left: 0;
}

.product-detail-page .pbt-product-3d__model-column {
  display: flex;
  flex: 0 0 100%;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 1180px;
  min-width: 0;
  margin-right: auto;
  margin-left: auto;
  padding-right: 0;
  padding-left: 0;
}

.product-detail-page .pbt-product-3d__stage {
  --pbt-product-3d-progress: 0%;
  position: relative;
  isolation: isolate;
  width: 100%;
  max-width: 1180px;
  height: clamp(500px, 42vw, 680px);
  margin-right: auto;
  margin-left: auto;
  overflow: hidden;
  border: 1px solid rgba(66, 51, 42, 0.08);
  border-radius: 12px;
  background: #f6f0e7;
  contain: layout paint style;
}

.product-detail-page .pbt-product-3d .pod-3d-viewer {
  --poster-color: transparent;
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  background: transparent;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

.product-detail-page .pbt-product-3d__stage.is-ready .pod-3d-viewer {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.product-detail-page .pbt-product-3d .pod-3d-viewer::part(default-progress-bar) {
  display: none;
}

.product-detail-page .pbt-product-3d__loading,
.product-detail-page .pbt-product-3d__error {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 14px;
  padding: 28px;
  color: rgba(66, 51, 42, 0.68);
  font-family: var(--pbt-font-family);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.04em;
  text-align: center;
  transition:
    opacity 220ms cubic-bezier(0.22, 1, 0.36, 1),
    visibility 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.product-detail-page .pbt-product-3d__loading {
  opacity: 1;
  visibility: visible;
}

.product-detail-page .pbt-product-3d__loading-mark {
  position: relative;
  width: min(180px, 48vw);
  height: 1px;
  overflow: hidden;
  background: rgba(66, 51, 42, 0.14);
}

.product-detail-page .pbt-product-3d__loading-mark::after {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--pbt-product-3d-progress);
  background: #786456;
  content: "";
  transition: width 180ms ease-out;
}

.product-detail-page .pbt-product-3d__stage.is-ready .pbt-product-3d__loading,
.product-detail-page .pbt-product-3d__stage.is-error .pbt-product-3d__loading {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.product-detail-page .pbt-product-3d__error {
  opacity: 0;
  visibility: hidden;
}

.product-detail-page .pbt-product-3d__stage.is-error .pbt-product-3d__error {
  opacity: 1;
  visibility: visible;
}

.product-detail-page .pbt-product-3d__cue {
  position: absolute;
  right: 18px;
  bottom: 18px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 12px;
  border: 1px solid rgba(66, 51, 42, 0.12);
  border-radius: 999px;
  background: rgba(250, 243, 227, 0.76);
  color: rgba(66, 51, 42, 0.68);
  font-family: var(--pbt-font-family);
  font-size: 10px;
  font-weight: 400;
  line-height: 1;
  opacity: 0;
  pointer-events: none;
  transform: translateY(5px);
  transition:
    opacity 260ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

.product-detail-page .pbt-product-3d__stage.is-ready .pbt-product-3d__cue {
  opacity: 1;
  transform: translateY(0);
}

.product-detail-page .pbt-product-3d__stage.has-interacted .pbt-product-3d__cue {
  opacity: 0;
}

.product-detail-page .pbt-product-3d .viewer-copy-row {
  margin-top: clamp(24px, 3vw, 44px);
}

@media (max-width: 1199.98px) {
  .product-detail-page .pbt-product-3d__stage {
    height: clamp(480px, 60vw, 620px);
  }
}

@media (max-width: 991.98px) {
  .product-detail-page .pbt-product-3d__stage {
    height: clamp(430px, 68vw, 560px);
  }
}

@media (max-width: 767.98px) {
  .product-detail-page .pbt-product-3d .container-1480 {
    padding-right: 16px;
    padding-left: 16px;
  }

  .product-detail-page .pbt-product-3d__stage {
    height: clamp(330px, 88vw, 440px);
    border-radius: 10px;
  }

  .product-detail-page .pbt-product-3d__cue {
    right: 12px;
    bottom: 12px;
    min-height: 28px;
    padding: 0 10px;
    font-size: 9px;
  }

  .product-detail-page .pbt-product-3d .viewer-copy-row {
    margin-top: 20px;
  }
}

@media (max-width: 374.98px) {
  .product-detail-page .pbt-product-3d__stage {
    height: 330px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .product-detail-page .pbt-product-3d .pod-3d-viewer,
  .product-detail-page .pbt-product-3d__loading,
  .product-detail-page .pbt-product-3d__error,
  .product-detail-page .pbt-product-3d__cue,
  .product-detail-page .pbt-product-3d__loading-mark::after {
    animation: none !important;
    transition: none !important;
  }

  .product-detail-page .pbt-product-3d .pod-3d-viewer {
    --model-viewer-auto-rotate-speed: 0;
  }
}