.hotspot-image{position:relative;overflow:visible}.hotspot-image__outer-container{width:100%;max-width:1400px;margin:0 auto;padding:0 20px}.hotspot-image__inner-container{background:#fff;border-radius:24px;padding:60px;position:relative}.hotspot-image__header{margin-bottom:40px}.hotspot-image__heading{margin:0;color:#000!important}.hotspot-image__heading *{color:#000!important;margin:0;font-size:48px;line-height:1.2;font-weight:600}.hotspot-image__heading p{margin:0}.hotspot-image__heading br{display:block;content:"";margin-top:0}.hotspot-image__heading--desktop-left{text-align:left}.hotspot-image__heading--desktop-center{text-align:center}.hotspot-image__heading--desktop-right{text-align:right}.hotspot-image__content{position:relative;display:flex;justify-content:center;align-items:center}.hotspot-image__wrapper{position:relative;display:inline-block;width:100%;max-width:var(--image-max-width)}.hotspot-image__image{position:relative;width:100%;height:auto;border-radius:16px;overflow:hidden;background:#f5f5f5}.hotspot-image__image--shadow{box-shadow:var(--shadow-x) var(--shadow-y) var(--shadow-blur) rgba(var(--color-accent),var(--shadow-opacity))}.hotspot-image__image img{width:100%;height:auto;display:block;object-fit:contain}.hotspot-image__placeholder{width:100%;aspect-ratio:16/9;background:#f5f5f5;border-radius:16px;display:flex;align-items:center;justify-content:center}.hotspot-image__placeholder svg{width:100px;height:100px;opacity:.3}.hotspot-image__hotspots{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}.hotspot-image__point{position:absolute;top:var(--desktop-top);left:var(--desktop-left);transform:translate(-50%,-50%);pointer-events:all;z-index:10}.hotspot-image__button{position:relative;width:32px;height:32px;padding:0;border:none;background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center}.hotspot-image__dot{position:relative;width:32px;height:32px;background:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px #00000026;transition:transform .3s ease,box-shadow .3s ease;z-index:2}.hotspot-image__dot svg{width:12px;height:12px;color:#333}.hotspot-image__pulse{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:32px;height:32px;border-radius:50%;background:#fff6;animation:pulse 2s infinite;z-index:1}@keyframes pulse{0%{transform:translate(-50%,-50%) scale(1);opacity:1}to{transform:translate(-50%,-50%) scale(2);opacity:0}}.hotspot-image__button:hover .hotspot-image__dot,.hotspot-image__point.is-active .hotspot-image__dot{transform:scale(1.1);box-shadow:0 6px 16px #0003}.hotspot-image__popup{position:absolute;bottom:calc(100% + 15px);left:50%;transform:translate(-50%) scale(.9);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .3s ease,transform .3s ease,visibility .3s ease;z-index:100;min-width:280px;max-width:400px}.hotspot-image__popup-inner{background:#fff;border-radius:12px;padding:12px;box-shadow:0 10px 30px #00000026;position:relative}.hotspot-image__popup-inner:after{content:"";position:absolute;top:100%;left:50%;transform:translate(-50%);width:0;height:0;border-style:solid;border-width:8px 8px 0 8px;border-color:white transparent transparent transparent}.hotspot-image__popup-title{margin:0 0 8px;font-size:18px;font-weight:600;line-height:1.3;color:#333}.hotspot-image__popup-text{margin:0;font-size:14px;font-weight:500;line-height:1.2;color:#666}.hotspot-image__popup-text p{margin:0}.hotspot-image__point.is-active .hotspot-image__popup{opacity:1;visibility:visible;transform:translate(-50%) scale(1);pointer-events:all}.hotspot-image__point[style*="--desktop-left: 9"] .hotspot-image__popup,.hotspot-image__point[style*="--desktop-left: 8"] .hotspot-image__popup{left:0;transform:translate(0) scale(.9)}.hotspot-image__point.is-active[style*="--desktop-left: 9"] .hotspot-image__popup,.hotspot-image__point.is-active[style*="--desktop-left: 8"] .hotspot-image__popup{transform:translate(0) scale(1)}.hotspot-image__point[style*="--desktop-left: 1"] .hotspot-image__popup,.hotspot-image__point[style*="--desktop-left: 2"] .hotspot-image__popup{left:auto;right:0;transform:translate(0) scale(.9)}.hotspot-image__point.is-active[style*="--desktop-left: 1"] .hotspot-image__popup,.hotspot-image__point.is-active[style*="--desktop-left: 2"] .hotspot-image__popup{transform:translate(0) scale(1)}.hotspot-image__point[style*="--desktop-top: 1"] .hotspot-image__popup,.hotspot-image__point[style*="--desktop-top: 2"] .hotspot-image__popup{bottom:auto;top:calc(100% + 15px)}.hotspot-image__point[style*="--desktop-top: 1"] .hotspot-image__popup-inner:after,.hotspot-image__point[style*="--desktop-top: 2"] .hotspot-image__popup-inner:after{top:auto;bottom:100%;border-width:0 8px 8px 8px;border-color:transparent transparent white transparent}@media screen and (max-width: 767px){.hotspot-image__outer-container{padding:0 16px}.hotspot-image__inner-container{padding:32px 20px;border-radius:16px}.hotspot-image__heading *{font-size:32px}.hotspot-image__heading--mobile-left{text-align:left}.hotspot-image__heading--mobile-center{text-align:center}.hotspot-image__heading--mobile-right{text-align:right}.hotspot-image__header{margin-bottom:24px}.hotspot-image__point{top:var(--mobile-top);left:var(--mobile-left)}.hotspot-image__popup{min-width:240px;max-width:280px;left:50%;transform:translate(-50%) scale(.9);max-width:calc(100vw - 40px)}.hotspot-image__point.is-active .hotspot-image__popup{transform:translate(-50%) scale(1)}.hotspot-image__point[style*="--mobile-left: 0"] .hotspot-image__popup,.hotspot-image__point[style*="--mobile-left: 1"] .hotspot-image__popup,.hotspot-image__point[style*="--mobile-left: 2"] .hotspot-image__popup{left:16px;transform:translate(0) scale(.9)}.hotspot-image__point.is-active[style*="--mobile-left: 0"] .hotspot-image__popup,.hotspot-image__point.is-active[style*="--mobile-left: 1"] .hotspot-image__popup,.hotspot-image__point.is-active[style*="--mobile-left: 2"] .hotspot-image__popup{transform:translate(0) scale(1)}.hotspot-image__point[style*="--mobile-left: 8"] .hotspot-image__popup,.hotspot-image__point[style*="--mobile-left: 9"] .hotspot-image__popup,.hotspot-image__point[style*="--mobile-left: 100"] .hotspot-image__popup{left:auto;right:16px;transform:translate(0) scale(.9)}.hotspot-image__point.is-active[style*="--mobile-left: 8"] .hotspot-image__popup,.hotspot-image__point.is-active[style*="--mobile-left: 9"] .hotspot-image__popup,.hotspot-image__point.is-active[style*="--mobile-left: 100"] .hotspot-image__popup{transform:translate(0) scale(1)}.hotspot-image__point[style*="--mobile-left: 0"] .hotspot-image__popup-inner:after,.hotspot-image__point[style*="--mobile-left: 1"] .hotspot-image__popup-inner:after,.hotspot-image__point[style*="--mobile-left: 2"] .hotspot-image__popup-inner:after{left:20px}.hotspot-image__point[style*="--mobile-left: 8"] .hotspot-image__popup-inner:after,.hotspot-image__point[style*="--mobile-left: 9"] .hotspot-image__popup-inner:after,.hotspot-image__point[style*="--mobile-left: 100"] .hotspot-image__popup-inner:after{left:auto;right:20px;transform:translate(0)}.hotspot-image__popup-inner{padding:12px}.hotspot-image__popup-title{font-size:16px}.hotspot-image__popup-text{font-size:13px}.hotspot-image__image{border-radius:12px}}@media screen and (min-width: 768px) and (max-width: 1024px){.hotspot-image__inner-container{padding:48px 40px}.hotspot-image__heading *{font-size:40px}}
/*# sourceMappingURL=/cdn/shop/t/3/assets/hotspot-image.css.map */