.hotspot-image-wrapper--mobile{display:none}.hotspot{--hotspot-x: var(--hotspot-desktop-x);--hotspot-y: var(--hotspot-desktop-y) }@media screen and (max-width: 750px){.hotspot-image-wrapper--mobile{display:block}.hotspot-image-wrapper--desktop{display:none}.hotspot{--hotspot-x: var(--hotspot-mobile-x);--hotspot-y: var(--hotspot-mobile-y) }}.hotspot-image{width:100%;max-width:100%;height:auto}.hotspot-section-image-wrapper{position:relative}.hotspot-section-heading{margin-bottom:1.5rem}.hotspot-wrapper{position:absolute;top:0;left:0;width:100%;height:100%}.hotspot{z-index:1;position:absolute;left:var(--hotspot-x);top:var(--hotspot-y);margin-left:-1.6rem;margin-top:-1.6rem;width:3.2rem;height:3.2rem;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer}.hotspot.active{z-index:2}.hotspot:before,.hotspot:after{content:"";position:absolute;border-radius:50%;pointer-events:none}.hotspot:before{width:1rem;z-index:1;height:1rem;background-color:#fff;transition:transform var(--duration-default) ease}.hotspot:after{width:100%;height:100%;background-color:#00000080;animation:hotspot 1.5s ease infinite}@media screen and (hover: hover){.hotspot:hover,.hotspot.active{z-index:2}.hotspot:hover:before{transform:scale(2.4)}}.hotspot.active:before{transform:scale(2.4)}.hotspot:empty{display:flex}@keyframes hotspot{0%{transform:scale(1)}50%{transform:scale(1.07)}to{transform:scale(1)}}@keyframes hotspot-zoom-in{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}@keyframes hotspot-zoom-out{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.8)}}.hotspot.active .hotspot-popup,.hotspot-popup--mobile.active{animation-name:hotspot-zoom-in}.hotspot-popup--mobile:not(.active){animation-name:hotspot-zoom-out}@media screen and (hover: hover){.hotspot:hover .hotspot-popup{animation-name:hotspot-zoom-in}}.hotspot-popup{pointer-events:none;z-index:1;position:absolute;display:flex;flex-direction:column;align-items:center;min-width:18rem;width:max-content;max-width:36rem;padding:1.2rem 1.6rem;border-radius:1.2rem;background-color:var(--hotspot-color-bg);color:var(--hotspot-color-text);box-shadow:0 0 5px #00000040;opacity:0;animation:hotspot-zoom-out var(--duration-default) ease forwards}@media screen and (max-width: 990px){.hotspot-popup--desktop{display:none}.hotspot-popup--mobile{align-items:start}}@media screen and (max-width: 500px){.hotspot-popup--mobile{max-width:100%}}.hotspot.active .hotspot-popup,.hotspot-popup--mobile.active{pointer-events:all}.hotspot-popup:after{content:"";display:block;border-left:.6rem solid transparent;border-right:.6rem solid transparent;border-bottom:.6rem solid var(--hotspot-color-bg);position:absolute}.hotspot-popup:before{content:"";display:block;position:absolute;width:4.2rem;height:4.2rem}.hotspot-popup--left{right:calc(100% + 1rem);top:50%;translate:0 -50%}.hotspot-popup--left:after{right:-.8rem;rotate:90deg;top:50%;translate:0 -50%}.hotspot-popup--left:before{right:-4.2rem;top:50%;translate:0 -50%}.hotspot-popup--right{left:calc(100% + 1rem);top:50%;translate:0 -50%}.hotspot-popup--right:after{left:-.8rem;rotate:-90deg;top:50%;translate:0 -50%}.hotspot-popup--right:before{left:-4.2rem;top:50%;translate:0 -50%}.hotspot-popup--bottom{top:calc(100% + 1rem)}.hotspot-popup--bottom:after{top:-.5rem}.hotspot-popup--bottom:before{top:-4.2rem;left:50%;translate:-50% 0}.hotspot-popup--top{bottom:calc(100% + 1rem)}.hotspot-popup--top:after{bottom:-.5rem;rotate:180deg}.hotspot-popup--top:before{bottom:-4.2rem;left:50%;translate:-50% 0}.hotspot-popup.content--start>*{align-self:flex-start}.hotspot-popup.content--center>*{align-self:center}.hotspot-popup.content--end>*{align-self:flex-end}.hotspot-popup .hotspot-header{font-size:1.6rem;font-weight:600}@media screen and (max-width: 990px){.hotspot-popup .hotspot-header{font-size:1.4rem}}.hotspot-popup .hotspot-text{margin-top:.5rem}.hotspot-popup .hotspot-button{margin-top:1.6rem}.hotspot-popup .hotspot-text p{margin:0}.hotspot-popup-wrapper--mobile{display:none}@media screen and (max-width: 990px){.hotspot-popup-wrapper--mobile{display:flex;align-items:center;justify-content:center;position:relative;margin-bottom:1rem}}.hotspot-lines_wrapper{display:none}@media screen and (min-width: 991px){.hotspot-lines_wrapper{position:absolute;top:0;bottom:0;right:0;display:grid;grid-template-columns:repeat(10,1fr);overflow:hidden;z-index:0;color:var(--hotspot-color-bg);font-size:20px}.hotspot-section-image-spot-wrapper{position:relative}.hotspot-line{justify-self:start;align-self:center;position:relative}.hotspot-line.short{grid-column:6/11}.hotspot-line.medium{grid-column:7/11}.hotspot-line.long{grid-column:8/11}.hotspot-line:after{content:"";position:absolute;bottom:0;right:0;left:-300px;width:calc(100% + 300px);height:2px;background-color:var(--hotspot-color-bg);transform:translateY(-50%)}}
/*# sourceMappingURL=/cdn/shop/t/25/assets/component-image-with-hotspots.css.map */