.canvas-stage {
  perspective: 2200px;
  perspective-origin: 50% 42%;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 720px;
  padding: 60px 0 90px;
  position: relative;
  user-select: none;
  -webkit-user-select: none;
}

.canvas-stage::after {
  content: '';
  position: absolute;
  bottom: 50px;
  left: 50%;
  transform: translateX(-50%);
  width: 76%;
  max-width: 520px;
  height: 36px;
  background: radial-gradient(ellipse at center, rgba(50, 30, 25, 0.28), transparent 70%);
  filter: blur(16px);
  z-index: 0;
  pointer-events: none;
}

.canvas-3d {
  position: relative;
  width: var(--canvas-w, 420px);
  height: var(--canvas-h, 420px);
  transform-style: preserve-3d;
  animation: canvasSway var(--canvas-period, 9s) ease-in-out infinite alternate;
  transform-origin: center center;
  transition: transform 0.6s ease;
  z-index: 1;
}

.canvas-3d.is-paused { animation-play-state: paused; }
.canvas-stage:hover .canvas-3d { animation-play-state: paused; }

@keyframes canvasSway {
  0% { transform: rotateY(-15deg) rotateX(2deg); }
  50% { transform: rotateY(0deg) rotateX(0deg); }
  100% { transform: rotateY(15deg) rotateX(2deg); }
}

.canvas-face {
  position: absolute;
  background-color: #FFFFFF;
  background-repeat: no-repeat;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.canvas-front {
  width: var(--canvas-w);
  height: var(--canvas-h);
  background-color: #FFFFFF;
  background-image: linear-gradient(135deg, #FFFFFF 0%, #F8F5EE 100%);
  transform: translateZ(calc(var(--canvas-d, 28px) / 2));
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.04),
    inset 0 0 22px rgba(0, 0, 0, 0.025);
}

.canvas-art {
  position: absolute;
  top: 5%;
  left: 5%;
  width: 90%;
  height: 90%;
  background-image: var(--canvas-img, none);
  background-size: 100% 100%;
  background-position: center;
  background-color: #FFFFFF;
  transform: translateZ(calc(var(--canvas-d, 28px) / 2 + 14px));
  box-shadow:
    0 1px 2px rgba(20, 14, 12, 0.30),
    0 6px 14px rgba(20, 14, 12, 0.32),
    0 18px 36px -6px rgba(20, 14, 12, 0.36),
    0 32px 60px -14px rgba(20, 14, 12, 0.22),
    0 0 0 0.5px rgba(0, 0, 0, 0.06);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.canvas-back {
  width: var(--canvas-w);
  height: var(--canvas-h);
  background: #F2EEE7;
  transform: translateZ(calc(var(--canvas-d, 28px) / -2)) rotateY(180deg);
}

.canvas-edge-left {
  width: var(--canvas-d, 28px);
  height: var(--canvas-h);
  top: 0;
  left: 0;
  background: linear-gradient(to right, #DDD7CD, #F8F5EE);
  transform-origin: left center;
  transform: translateX(calc(var(--canvas-d, 28px) / -2)) rotateY(-90deg);
}

.canvas-edge-right {
  width: var(--canvas-d, 28px);
  height: var(--canvas-h);
  top: 0;
  right: 0;
  background: linear-gradient(to left, #C8C0B3, #E8E2D7);
  transform-origin: right center;
  transform: translateX(calc(var(--canvas-d, 28px) / 2)) rotateY(90deg);
}

.canvas-edge-top {
  width: var(--canvas-w);
  height: var(--canvas-d, 28px);
  top: 0;
  left: 0;
  background: linear-gradient(to bottom, #E0DACE, #FAF7F0);
  transform-origin: top center;
  transform: translateY(calc(var(--canvas-d, 28px) / -2)) rotateX(90deg);
}

.canvas-edge-bottom {
  width: var(--canvas-w);
  height: var(--canvas-d, 28px);
  bottom: 0;
  left: 0;
  background: linear-gradient(to top, #BBB3A3, #E0D9CB);
  transform-origin: bottom center;
  transform: translateY(calc(var(--canvas-d, 28px) / 2)) rotateX(-90deg);
}

.canvas-3d::before {
  content: '';
  position: absolute;
  top: 5%;
  left: 5%;
  width: 90%;
  height: 90%;
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.04) 35%, transparent 60%);
  transform: translateZ(calc(var(--canvas-d, 28px) / 2 + 14.5px));
  pointer-events: none;
  border-radius: 1px;
  mix-blend-mode: overlay;
}

.canvas-controls {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 2;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.canvas-stage:hover .canvas-controls { opacity: 1; }

.canvas-controls button {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--sand);
  background: rgba(238, 228, 218, 0.9);
  color: var(--burgundy);
  cursor: pointer;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(6px);
  transition: all 0.2s ease;
  font-family: inherit;
}

.canvas-controls button:hover {
  background: var(--burgundy);
  color: var(--creme);
  border-color: var(--burgundy);
}

.canvas-meta {
  position: absolute;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-script, 'Cormorant Garamond', serif);
  font-size: 14px;
  font-style: italic;
  color: var(--text-muted);
  letter-spacing: 0.04em;
  pointer-events: none;
  opacity: 0.7;
  z-index: 2;
}

.canvas-thumbs {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: 24px;
  flex-wrap: wrap;
}

.canvas-thumb {
  width: 64px;
  height: 80px;
  border-radius: 6px;
  border: 2px solid transparent;
  overflow: hidden;
  background: var(--sand-soft);
  padding: 0;
  cursor: pointer;
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.canvas-thumb:hover { transform: translateY(-2px); }
.canvas-thumb.active { border-color: var(--burgundy); }
.canvas-thumb img { width: 100%; height: 100%; object-fit: cover; }

.canvas-stage-mini {
  min-height: 0;
  aspect-ratio: 1 / 1;
  width: 100%;
  padding: 18px 12px;
  perspective: 1400px;
  perspective-origin: 50% 45%;
  border-radius: var(--radius);
  background: var(--surface-soft, #F6EFE6);
  overflow: hidden;
  transition: background 0.4s ease, box-shadow 0.4s ease;
}

.canvas-stage-mini::after {
  bottom: 18px;
  width: 60%;
  max-width: 200px;
  height: 18px;
  filter: blur(10px);
}

.card-product:hover .canvas-stage-mini {
  background: var(--surface-warm, #FAF3EA);
  box-shadow: var(--shadow-lg, 0 24px 64px rgba(77, 14, 19, 0.12));
}

.canvas-stage-mini .canvas-3d {
  --canvas-period: 11s;
}

@media (prefers-reduced-motion: reduce) {
  .canvas-3d {
    animation: none;
    transform: rotateY(-6deg) rotateX(1deg);
  }
}

@media (max-width: 640px) {
  .canvas-stage { min-height: 420px; padding: 30px 0; }
}