.product-hotspots { position: absolute; inset: 0; z-index: 7; pointer-events: none; overflow: hidden; }
.product-hotspot-outlines { display: block; position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.product-hotspot-outlines * { pointer-events: none; }
.product-region { fill: rgba(176, 66, 46, 0); stroke: rgba(247, 225, 196, 0); stroke-width: 1.4; vector-effect: non-scaling-stroke; transition: fill .18s, stroke .18s; }
.product-leader { fill: none; stroke: rgba(255, 242, 218, .9); stroke-width: 1.15; vector-effect: non-scaling-stroke; }
.product-leader-dot { fill: #f8efde; stroke: rgba(113, 57, 41, .7); stroke-width: .8; }
.product-spot.is-hover .product-region { fill: rgba(177, 68, 46, .13); stroke: rgba(255, 236, 204, .94); }
.product-spot.is-hover .product-leader { stroke: #fff5dd; stroke-width: 1.7; }
.product-hotspot-label { position: absolute; display: flex; align-items: center; justify-content: center; gap: 8px; height: 44px; min-height: 44px; padding: 0 10px; border: 1px solid rgba(255, 246, 227, .85); border-radius: 3px; background: rgba(247, 240, 225, .94); color: #41372d; pointer-events: auto; touch-action: manipulation; cursor: pointer; white-space: nowrap; backdrop-filter: blur(8px); font-family: var(--font-reading, "PingFang SC", sans-serif); }
.product-hotspot-name { font-size: 11px; letter-spacing: .015em; }
.product-hotspot-label:hover, .product-hotspot-label.is-hover { background: #fff8e9; border-color: #fff7e5; color: #732f27; }
.product-hotspot-label:focus-visible { outline: 2px solid #a64032; outline-offset: 3px; }
canvas.product-surface-hover { cursor: pointer !important; }
.product-hotspot-label.is-discovering { animation: product-discover-label 1.2s ease-in-out 3; }
.product-spot.is-discovering .product-region { animation: product-discover-surface 1.2s ease-in-out 3; }
@keyframes product-discover-label { 0%, 100% { background: rgba(247, 240, 225, .94); } 50% { background: #fffdf4; border-color: #c16b51; } }
@keyframes product-discover-surface { 0%, 100% { fill: rgba(177, 68, 46, 0); stroke: rgba(255, 236, 204, 0); } 50% { fill: rgba(177, 68, 46, .09); stroke: rgba(255, 236, 204, .85); } }
.product-hotspots [hidden], .product-hotspots[hidden] { display: none !important; }
.product-hotspots[data-reduced-motion=true] *, .product-hotspots[data-reduced-motion=true] *::before { animation: none !important; transition: none !important; }
@media (pointer: coarse) { .product-hotspot-label { gap: 6px; padding-inline: 8px; } }
@media (prefers-reduced-motion: reduce) { .product-hotspots * { animation: none !important; transition: none !important; } }