.hotspot-dot-wrapper{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}.hotspot-dot{position:absolute;z-index:10;transform:translate(-50%,-50%);pointer-events:auto}.hotspot-dot__btn{position:relative;width:36px;height:36px;border:none;background:var(--hotspot-color, #ffffff);border-radius:50%;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 10px #00000040;transition:transform .3s ease,box-shadow .3s ease;z-index:2}.hotspot-dot__btn:before{content:"";position:absolute;width:60px;height:60px;border-radius:50%;background:#ffffff4d;z-index:-1;animation:hotspot-breathe 2s ease-in-out infinite}@keyframes hotspot-breathe{0%,to{transform:scale(.6);opacity:0}50%{transform:scale(1);opacity:1}}@media (prefers-reduced-motion: reduce){.hotspot-dot__btn:before{animation:none;opacity:0}}.hotspot-dot__btn:hover:before,.hotspot-dot.is-active .hotspot-dot__btn:before{animation-play-state:paused;opacity:.5;transform:scale(1)}.hotspot-dot__icon{width:14px;height:14px;position:relative;transition:transform .3s ease}.hotspot-dot__icon:before,.hotspot-dot__icon:after{content:"";position:absolute;background-color:#333;border-radius:1px}.hotspot-dot__icon:before{width:14px;height:2px;top:50%;left:0;transform:translateY(-50%)}.hotspot-dot__icon:after{width:2px;height:14px;left:50%;top:0;transform:translate(-50%)}.hotspot-dot.is-active .hotspot-dot__icon,.hotspot-dot__btn:hover .hotspot-dot__icon{transform:rotate(135deg)}.hotspot-dot__detail-image{position:absolute;width:28%;height:27%;object-fit:cover;z-index:8;transform:translate(-50%,-50%);border-radius:8px;opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease;pointer-events:none}.hotspot-dot__line{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:5;opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease}.hotspot-dot__line line{stroke:#fff;stroke-width:2}.hotspot-dot:hover~.hotspot-dot__detail-image,.hotspot-dot:hover~.hotspot-dot__line{opacity:1;visibility:visible}@media screen and (max-width: 749px){.hotspot-dot__detail-image{width:280px;height:126px}}
/*# sourceMappingURL=/cdn/shop/t/2/assets/hotspot-dot.css.map */