.public-site [data-product-tilt] {
  --product-tilt-x: 0deg;
  --product-tilt-y: 0deg;
  --product-shift-x: 0px;
  --product-shift-y: 0px;
  --product-light-x: 50%;
  --product-light-y: 35%;
  position: relative;
  perspective: 760px;
  touch-action: pan-y;
  isolation: isolate;
}

.public-site [data-product-tilt] > img {
  transform:
    translate3d(var(--product-shift-x), var(--product-shift-y), 0)
    rotateX(var(--product-tilt-x))
    rotateY(var(--product-tilt-y))
    scale(1.075);
  transform-origin: center;
  transition: transform .48s cubic-bezier(.16, .8, .24, 1), filter .3s ease;
  will-change: transform;
}

.public-site [data-product-tilt]::after {
  position: absolute;
  z-index: 2;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(
      circle at var(--product-light-x) var(--product-light-y),
      rgba(255, 244, 213, .28),
      rgba(255, 255, 255, .05) 24%,
      transparent 48%
    );
  content: "";
  opacity: 0;
  pointer-events: none;
  mix-blend-mode: screen;
  transition: opacity .3s ease;
}

.public-site [data-product-tilt].is-tilting > img {
  filter: saturate(1.08) contrast(1.04) drop-shadow(0 22px 22px rgba(32, 20, 13, .22));
  transition-duration: .09s;
}

.public-site [data-product-tilt].is-tilting::after {
  opacity: 1;
}

.public-site [data-product-tilt].is-dragging {
  cursor: grabbing;
}

.public-site .detail-media[data-product-tilt] {
  overflow: hidden;
  border-radius: 18px;
}

.public-site [data-product-tilt].is-3d-product {
  overflow: hidden;
  border: 1px solid rgba(214, 161, 74, .42);
  padding: clamp(8px, 1.4vw, 16px);
  background:
    radial-gradient(circle at 50% 42%, #403127 0, #251c17 58%, #17120f 100%);
  box-shadow:
    inset 0 0 0 5px rgba(255, 255, 255, .035),
    0 18px 42px rgba(32, 20, 13, .2);
}

.public-site [data-product-tilt].is-3d-product > img {
  width: 100%;
  height: 100%;
  min-height: 0;
  border-radius: 10px;
  object-fit: contain;
  transform:
    translate3d(var(--product-shift-x), var(--product-shift-y), 0)
    rotateX(var(--product-tilt-x))
    rotateY(var(--product-tilt-y))
    scale(1.015);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .22);
}

.public-site .detail-media.is-3d-product {
  aspect-ratio: 16 / 10;
  min-height: 0;
}

.public-site .detail-media.is-3d-product > img {
  min-height: 0;
}

.public-site .product-tilt-hint {
  position: absolute;
  z-index: 4;
  right: 14px;
  bottom: 14px;
  border: 1px solid rgba(255, 255, 255, .32);
  border-radius: 999px;
  padding: 8px 11px;
  background: rgba(18, 14, 12, .68);
  color: #fff;
  font-size: .76rem;
  font-weight: 900;
  letter-spacing: .02em;
  pointer-events: none;
  backdrop-filter: blur(8px);
  transition: opacity .2s ease, transform .2s ease;
}

.public-site [data-product-tilt].is-tilting .product-tilt-hint {
  opacity: .25;
  transform: translateY(4px);
}

@media (prefers-reduced-motion: reduce) {
  .public-site [data-product-tilt] > img {
    transform: none;
    transition: none;
  }

  .public-site [data-product-tilt]::after,
  .public-site .product-tilt-hint {
    display: none;
  }
}