/* ============================================================
   D_ART HEADWARMER — mascot-style 3D
   ============================================================ */
.hw3d-mount, .pd-3d-slide { position: absolute; inset: 0; }
.pd-3d-slide { opacity: 0; pointer-events: none; transition: opacity .55s cubic-bezier(.16,1,.3,1); }
.pd-3d-slide.is-active { opacity: 1; pointer-events: auto; }

.hw3d {
  position: absolute; inset: 0; user-select: none; -webkit-user-select: none; touch-action: pan-y; cursor: grab;
  background:
    radial-gradient(ellipse 70% 55% at 50% 42%, rgba(255,255,255,.75), rgba(255,255,255,0) 70%),
    linear-gradient(160deg, rgba(233,226,212,.9), rgba(200,145,43,.12));
}

/* scene: perspective box that holds the 3D hat */
.hw3d-scene {
  position: absolute; left: 50%; top: calc((100% - 66px) / 2); transform: translate(-50%, -50%);
  width: min(76%, calc((100% - 96px) * 1.02)); aspect-ratio: 1.02 / 1; perspective: 780px; pointer-events: none;
}
.hw3d-tilt { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .25s ease-out; }
.hw3d-tilt.is-flipping { animation: hw3d-flip .8s cubic-bezier(.45,.05,.2,1); }
.hw3d-body { position: absolute; inset: 0; transform-style: preserve-3d; animation: hw3d-sway 7s ease-in-out infinite; }
.hw3d.is-leaning .hw3d-body { animation-play-state: paused; }
.hw3d-body img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: contain; backface-visibility: visible; }
.hw3d-body img.hw3d-slice { filter: brightness(.4) saturate(.85); }
.hw3d-body img.hw3d-front { filter: drop-shadow(0 0 1px rgba(0,0,0,.25)); }
.hw3d-shadow { position: absolute; left: 14%; right: 14%; bottom: -12px; height: 14px; border-radius: 50%; background: rgba(23,36,34,.38); filter: blur(8px); animation: hw3d-shadow 7s ease-in-out infinite; }

@keyframes hw3d-sway {
  0%   { transform: translateY(0) rotateY(-26deg) rotateZ(2deg); }
  25%  { transform: translateY(-8px) rotateY(0deg) rotateZ(0deg); }
  50%  { transform: translateY(0) rotateY(26deg) rotateZ(2deg); }
  75%  { transform: translateY(-8px) rotateY(0deg) rotateZ(-1deg); }
  100% { transform: translateY(0) rotateY(-26deg) rotateZ(2deg); }
}
@keyframes hw3d-shadow { 0%, 50%, 100% { transform: scaleX(1); opacity: .9; } 25%, 75% { transform: scaleX(.8); opacity: .55; } }
@keyframes hw3d-flip { 0% { transform: rotateY(0); } 100% { transform: rotateY(360deg); } }

/* colour swatches */
.hw3d-ui { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; padding: 8px 14px 14px; display: flex; flex-direction: column; align-items: center; gap: 9px; }
.hw3d-name { font: 10px var(--mono, monospace); letter-spacing: .14em; text-transform: uppercase; color: var(--ink, #172422); }
.hw3d-swatches { display: flex; gap: 10px; }
.hw3d-swatch { width: 28px; height: 28px; padding: 3px; border-radius: 50%; cursor: pointer; background: rgba(255,255,255,.55); border: 1px solid rgba(23,36,34,.22); transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
.hw3d-swatch i { display: block; width: 100%; height: 100%; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,.16); }
.hw3d-swatch:hover { transform: translateY(-2px); }
.hw3d-swatch.is-active { border-color: var(--gold, #c8912b); box-shadow: 0 0 0 2px rgba(200,145,43,.35); transform: scale(1.1); }
.hw3d-swatch:focus-visible { outline: 2px solid var(--gold, #c8912b); outline-offset: 2px; }

.product-image-wrap.hw3d-wrap { cursor: pointer; }
.pd-thumb-3d { display: grid; place-items: center; background: linear-gradient(135deg, #172422, #2a3d39); color: var(--paper, #f4f0e8); }
.pd-thumb-3d span { font: 11px var(--mono, monospace); letter-spacing: .16em; }

@media (max-width: 800px) { .hw3d-swatch { width: 26px; height: 26px; } }
@media (prefers-reduced-motion: reduce) {
  .hw3d-body, .hw3d-shadow, .hw3d-tilt.is-flipping { animation: none; }
  .hw3d-body { transform: rotateY(-14deg) rotateZ(2deg); }
}