.product-visual { --product-visual-style-version: 3; }
.product-appearance-note {
  display: grid;
  gap: 6px;
  margin: 14px 0 0;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.025);
  color: #c3cdd2;
  font-size: 0.82rem;
  line-height: 1.5;
}
.product-appearance-note strong {
  display: block;
  margin: 0;
  color: var(--ice);
  font-size: 0.9rem;
}
.product-appearance-note > span { display: block; }
/* Product inspect scene: float, orbit and a pointer-controlled light field. */
.product-motion-toggle {
  position: absolute;
  right: 14px;
  bottom: 12px;
  z-index: 3;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid #70edff30;
  border-radius: 999px;
  background: #081017d9;
  color: #c9e4ea;
  font: inherit;
  font-size: 0.72rem;
  cursor: pointer;
}
.product-motion-toggle[hidden] { display: none; }
.product-motion-toggle:hover { border-color: #70edff99; background: #10252e; }
.product-motion-toggle:focus-visible { outline: 2px solid var(--ice); outline-offset: 3px; }
@media (prefers-reduced-motion: no-preference) {
  .product-visual.is-image-ready {
    isolation: isolate;
    --product-motion-state: paused;
  }
  .product-visual[data-motion-running="true"] { --product-motion-state: running; }
  .product-visual.is-image-ready:not(.is-missing) img {
    transform: perspective(850px) translate3d(var(--inspect-x, 0px), var(--inspect-y, 0px), 0) rotateX(var(--inspect-tilt-x, 0deg)) rotateY(var(--inspect-tilt-y, 0deg)) scale(var(--inspect-scale, 1));
    transition: transform 350ms cubic-bezier(0.2, 0.7, 0.2, 1);
    animation: product-inspect-float 7s ease-in-out infinite;
    animation-play-state: var(--product-motion-state);
  }
  .product-visual.is-inspecting { --inspect-scale: 1.08; }
  .product-visual.is-inspecting .product-gridlines { opacity: 0.7; }
  .product-visual.is-image-ready .product-gridlines { transition: opacity 400ms ease; }
  .product-visual.is-image-ready:not(.is-missing)::before,
  .product-visual.is-image-ready:not(.is-missing)::after,
  .product-visual.is-image-ready:not(.is-missing) .product-gridlines::after {
    content: "";
    position: absolute;
    pointer-events: none;
  }
  .product-visual.is-image-ready:not(.is-missing)::before {
    inset: 3%;
    background: radial-gradient(ellipse, color-mix(in srgb, var(--rarity, #70edff) 38%, transparent), transparent 65%);
    translate: var(--inspect-x, 0px) var(--inspect-y, 0px);
    transition: translate 500ms ease;
    animation: product-inspect-glow 7s ease-in-out infinite;
    animation-play-state: var(--product-motion-state);
  }
  .product-visual.is-image-ready:not(.is-missing)::after {
    width: 72%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: conic-gradient(from 0deg, transparent 10%, color-mix(in srgb, var(--rarity, #70edff) 65%, transparent) 25%, transparent 38%, transparent 60%, #b9f5ff75 76%, transparent 90%);
    mask-image: radial-gradient(circle, transparent 67%, #000 68%, #000 69%, transparent 70%);
    opacity: 0.7;
    animation: product-inspect-orbit 14s linear infinite;
    animation-play-state: var(--product-motion-state);
  }
  .product-visual.is-image-ready:not(.is-missing) .product-gridlines::after {
    inset: -30%;
    background: linear-gradient(110deg, transparent 43%, color-mix(in srgb, var(--rarity, #70edff) 42%, transparent) 50%, transparent 57%);
    animation: product-inspect-scan 7s ease-in-out infinite;
    animation-play-state: var(--product-motion-state);
  }
}
@keyframes product-inspect-float {
  0%, 100% { translate: 0 7px; rotate: -1.2deg; }
  50% { translate: 0 -11px; rotate: 1.2deg; }
}
@keyframes product-inspect-glow {
  0%, 100% { opacity: 0.45; transform: scale(0.9) translateY(3%); }
  50% { opacity: 0.95; transform: scale(1.12) translateY(-3%); }
}
@keyframes product-inspect-orbit {
  from { transform: translateY(8%) rotateX(62deg) rotateZ(0deg); }
  to { transform: translateY(8%) rotateX(62deg) rotateZ(360deg); }
}
@keyframes product-inspect-scan {
  0%, 15% { opacity: 0; transform: translate3d(-55%, 0, 0); }
  35% { opacity: 0.85; }
  60%, 100% { opacity: 0; transform: translate3d(55%, 0, 0); }
}