/**
 * 3D model viewer — shared on home + product pages
 */

.skt-3d-viewer {
  padding: clamp(3rem, 6.25vw, 5rem) var(--skt-pad-x);
  background: #fff;
}

.skt-3d-viewer__inner {
  max-width: var(--skt-content-max, 75rem);
  margin: 0 auto;
}

.skt-3d-viewer__title {
  margin: 0 0 1rem;
  font-size: clamp(2rem, 4.17vw, 3rem);
  line-height: 1.1;
  font-weight: 700;
  text-align: left;
}

.skt-3d-viewer__subtitle {
  margin: 0 0 clamp(1.5rem, 3vw, 2.5rem);
  max-width: 42rem;
  font-size: clamp(1rem, 1.25vw, 1.125rem);
  line-height: 1.5;
  color: var(--skt-text, #1c1c1c);
  text-align: left;
}

.skt-3d-viewer__embed {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(18rem, 42vw, 26.25rem);
  background: transparent;
  overflow: hidden;
}

.skt-3d-viewer__embed model-viewer {
  display: block !important;
  width: 100%;
  height: clamp(18rem, 42vw, 26.25rem);
  min-height: clamp(18rem, 42vw, 26.25rem);
  margin: 0 auto;
  background: transparent;
  background-color: transparent;
  --poster-color: transparent;
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
  outline: none;
}

.skt-3d-viewer__embed.is-ready model-viewer,
.skt-3d-viewer__embed model-viewer {
  opacity: 1 !important;
}

.skt-3d-viewer__embed.is-loading model-viewer {
  opacity: 1 !important;
}

.skt-3d-viewer__embed.is-error {
  display: flex;
  align-items: center;
  justify-content: center;
}

.skt-3d-viewer__placeholder,
.skt-3d-viewer__error {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(18rem, 42vw, 26.25rem);
  padding: 2rem;
  margin: 0;
  text-align: center;
  color: var(--skt-red, #cd2627);
  font-size: 0.9375rem;
  line-height: 1.5;
}

.skt-3d-viewer__hint {
  margin: 1rem 0 0;
  font-size: 0.875rem;
  color: #666;
  text-align: left;
}

@media (max-width: 767px) {
  .skt-3d-viewer {
    padding: 2.5rem var(--skt-pad-x);
  }

  .skt-3d-viewer__hint {
    display: none;
  }
}