.image-with-hotspots,.image-with-hotspots-wrapper{position:relative}.image-with-hotspots .site-box-background{position:relative;height:auto}.image-with-hotspots .site-box-background .onboarding-svg{position:relative;height:40vh}.image-hotspots{position:absolute;top:0;left:0;width:100%;height:100%;z-index:10}.image-hotspots__spot{display:inline-block;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.image-hotspots__spot--content{display:inline-block;position:absolute;width:auto;min-width:16.25rem;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s ease,visibility 0s .2s}@media screen and (min-width:768px){.image-hotspots__spot--content-top{left:50%;top:calc(50% - 2.375rem);transform:translate(-50%,-100%)}}@media screen and (max-width:767px){.image-hotspots__spot--content-top-mobile{left:50%;top:calc(50% - 2.375rem);transform:translate(-50%,-100%)}}@media screen and (max-width:767px){.image-hotspots__spot--content-top-mobile .hotspot-tooltip:after{bottom:0;left:50%;border-color:transparent transparent white white;transform-origin:0 bottom;transform:rotate(-45deg) translate(-50%,48%)}}@media screen and (min-width:768px){.image-hotspots__spot--content-top .hotspot-tooltip:after{bottom:0;left:50%;border-color:transparent transparent white white;transform-origin:0 bottom;transform:rotate(-45deg) translate(-50%,48%)}}@media screen and (min-width:768px){.image-hotspots__spot--content-bottom{left:50%;top:calc(50% + 2.375rem);transform:translate(-50%)}}@media screen and (max-width:767px){.image-hotspots__spot--content-bottom-mobile{left:50%;top:calc(50% + 2.375rem);transform:translate(-50%)}}@media screen and (max-width:767px){.image-hotspots__spot--content-bottom-mobile .hotspot-tooltip:after{top:0;transform-origin:0 0;left:50%;border-color:white white transparent transparent;transform:rotate(-45deg) translate(-50%,-50%)}}@media screen and (min-width:768px){.image-hotspots__spot--content-bottom .hotspot-tooltip:after{top:0;left:50%;border-color:white white transparent transparent;transform:rotate(-45deg) translate(-50%,-50%)}}@media screen and (min-width:768px){.image-hotspots__spot--content-left{left:-1.125rem;top:50%;transform:translate(-100%,-50%)}}@media screen and (max-width:767px){.image-hotspots__spot--content-left-mobile{left:-1.125rem;top:50%;transform:translate(-100%,-50%)}}@media screen and (max-width:767px){.image-hotspots__spot--content-left-mobile .hotspot-tooltip:after{top:50%;left:100%;transform-origin:0 0;border-color:transparent white white transparent;transform:rotate(-45deg) translate(-50%,-50%)}}@media screen and (min-width:768px){.image-hotspots__spot--content-left .hotspot-tooltip:after{top:50%;left:100%;border-color:transparent white white transparent;transform:rotate(-45deg) translate(-50%,-50%)}}@media screen and (min-width:768px){.image-hotspots__spot--content-right{left:calc(50% + 2.375rem);top:50%;transform:translateY(-50%)}}@media screen and (max-width:767px){.image-hotspots__spot--content-right-mobile{left:calc(50% + 2.375rem);top:50%;transform:translateY(-50%)}}@media screen and (max-width:767px){.image-hotspots__spot--content-right-mobile .hotspot-tooltip:after{top:50%;left:0;transform-origin:0 0;border-color:white transparent transparent white;transform:rotate(-45deg) translate(-50%,-50%)}}@media screen and (min-width:768px){.image-hotspots__spot--content-right .hotspot-tooltip:after{top:50%;left:0;border-color:white transparent transparent white;transform:rotate(-45deg) translate(-50%,-50%)}}.image-hotspots__spot--bullet{display:block;background-color:#0003;width:1.75rem;height:1.75rem;border-radius:50%;overflow:hidden;text-indent:-999px;cursor:pointer;box-shadow:0 0 #0003;padding:0;border:solid transparent .625rem;transition:ease all .25s}.image-hotspots__spot--bullet:after{content:"";width:.75rem;height:.75rem;border-radius:50%;display:block;background-color:#fff;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);transition:ease .25s all}.image-hotspots__spot:hover .image-hotspots__spot--bullet,.image-hotspots__spot--bullet.active{width:2.5rem;height:2.5rem}.image-hotspots__spot:hover .image-hotspots__spot--bullet:after,.image-hotspots__spot--bullet.active:after{width:1.75rem;height:1.75rem}.hotspot-tooltip{display:inline-block;width:100%;background-color:#fff;border-radius:var(--border-radius-widgets);padding:.875rem;align-items:center;box-shadow:0 0 .9375rem .3125rem #00000014}.hotspot-tooltip:after{content:"";position:absolute;width:0;height:0;border:.625rem solid black;transform-origin:0 0}.hotspot-tooltip--product{display:flex;gap:.875rem;align-items:center}.hotspot-tooltip--product .title{display:block;width:100%}.hotspot-tooltip--product .price{display:block;width:100%;margin-bottom:.3125rem}.hotspot-tooltip--product .price del{opacity:.6;padding:0 .3125rem}.hotspot-tooltip--product .thumbnail{width:4.375rem;flex-shrink:0}@media screen and (max-width:474px){.hotspot-tooltip--product .thumbnail{width:3.125rem}}.hotspot-tooltip--rte .title{display:block;width:100%}.hotspot-tooltip--rte .title+.description{margin-bottom:.4375rem}.hotspot-tooltip--rte .description{display:inline-block;width:100%}.hotspot-tooltip .thumbnail svg{background:#00000014}.image-hotspots__spot--bullet.active+.image-hotspots__spot--content{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .2s ease,visibility 0s 0s}@keyframes hotspot-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.35)}}.image-hotspots__spot--bullet{animation:hotspot-pulse 1.6s ease-in-out 3;animation-play-state:paused}.image-hotspots.is-in-view .image-hotspots__spot--bullet{animation-play-state:running}.image-hotspots.is-in-view .image-hotspots__spot:nth-child(2) .image-hotspots__spot--bullet{animation-delay:.5s}.image-hotspots.is-in-view .image-hotspots__spot:nth-child(3) .image-hotspots__spot--bullet{animation-delay:1s}.image-hotspots.is-in-view .image-hotspots__spot:nth-child(4) .image-hotspots__spot--bullet{animation-delay:1.5s}.image-hotspots__spot:hover .image-hotspots__spot--bullet,.image-hotspots__spot--bullet.active{animation:none}@media(hover:hover){.image-hotspots__spot:hover{z-index:100}.image-hotspots__spot:hover .image-hotspots__spot--content{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .2s ease,visibility 0s 0s}}
/*# sourceMappingURL=/cdn/shop/t/213/assets/section-image-with-hotspots.css.map */