/* A product-sized point in the scene gets a comfortable, accessible DOM target. */
.product-hotspots { position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:9; }
.product-hotspot {
  position:absolute; transform:translate(-50%, -50%); pointer-events:auto;
  display:grid; place-items:center;
  width:48px; height:48px; min-width:48px; min-height:48px; padding:0;
  border:1.5px solid #ffffff; border-radius:50%; background:#fffef9ed; color:#233d30;
  box-shadow:0 3px 16px #152c3938; text-align:left; touch-action:manipulation;
}
.product-hotspot[hidden], .product-hotspot-tether[hidden] { display:none; }
.product-hotspot:hover, .product-hotspot[data-active="true"], .product-hotspot:focus-visible { background:#284f3c; color:#fff; border-color:white; }
.product-hotspot:focus-visible { outline:3px solid #e5bd78; outline-offset:3px; }
.product-hotspot-tether { position:absolute; height:1.5px; background:#fff; box-shadow:0 1px 3px #142c3966; transform-origin:left center; }