.image-hotspots .thb-hotspot-content,.image-hotspots .thb-hotspot-arrow,.image-hotspots .thb-hotspot-bubble{transition:all .25s cubic-bezier(.104,.204,.492,1)}.image-hotspots--area{position:relative}.image-hotspots--area img{width:100%}.image-hotspots--mobile{display:block}@media only screen and (min-width: 768px){.image-hotspots--mobile{display:none}}.image-hotspots--mobile .thb-placeholder{height:500px}.image-hotspots--desktop{display:none}@media only screen and (min-width: 768px){.image-hotspots--desktop{display:block}}.image-hotspots--desktop .thb-placeholder{height:600px}.image-hotspots .thb-placeholder{background:var(--color-accent)}.image-hotspots .thb-placeholder svg{padding:50px;fill:var(--bg-body, #fff);opacity:.5}.image-hotspots .thb-hotspot{position:absolute;top:0;left:0;z-index:20}.image-hotspots .thb-hotspot:hover,.image-hotspots .thb-hotspot.loading{z-index:40}.image-hotspots .thb-hotspot:hover .thb-hotspot-arrow,.image-hotspots .thb-hotspot:hover .thb-hotspot-bubble,.image-hotspots .thb-hotspot.loading .thb-hotspot-arrow,.image-hotspots .thb-hotspot.loading .thb-hotspot-bubble{opacity:1;pointer-events:all}.image-hotspots .thb-hotspot:hover .thb-hotspot-arrow,.image-hotspots .thb-hotspot.loading .thb-hotspot-arrow{transform:translateY(0)}.image-hotspots .thb-hotspot:hover .thb-hotspot-bubble,.image-hotspots .thb-hotspot.loading .thb-hotspot-bubble{transform:translate(-50%) translateY(0)}.image-hotspots .thb-hotspot.loading .thb-hotspot-content{border-width:16px}.image-hotspots .thb-hotspot.loading .thb-hotspot-content .loading-overlay{display:flex}.image-hotspots .thb-hotspot-content{width:32px;height:32px;border-radius:100%;background:#fff;border:9px solid var(--color-accent2);flex-shrink:0;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.image-hotspots .thb-hotspot-content .loading-overlay{position:absolute;top:0;left:0;width:100%;height:100%;display:none;transform:none;align-items:center;justify-content:center}.image-hotspots .thb-hotspot-content .loading-overlay svg{width:14px}.image-hotspots .thb-hotspot-content .loading-overlay svg circle{stroke:#fff}.image-hotspots .thb-hotspot-content.thb-pulsate:after,.image-hotspots .thb-hotspot-content.thb-pulsate:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;border:1px solid #fff;border-radius:100%;z-index:-1;-webkit-animation:pulsing 2s infinite;-moz-animation:pulsing 2s infinite;-ms-animation:pulsing 2s infinite;-o-animation:pulsing 2s infinite;animation:pulsing 2s infinite}.image-hotspots .thb-hotspot-content.thb-pulsate:after{animation-delay:-.4s}@-moz-keyframes pulsing{to{transform:scale(1.75);opacity:0}}@-webkit-keyframes pulsing{to{transform:scale(1.75);opacity:0}}@-o-keyframes pulsing{to{transform:scale(1.75);opacity:0}}@-ms-keyframes pulsing{.image-hotspots .thb-hotspot-content 100% {transform: scale(1.75); opacity: 0;}}@keyframes pulsing{to{transform:scale(1.75);opacity:0}}.image-hotspots .thb-hotspot-arrow{position:absolute;top:calc(100% + 11px);left:5px;width:0;height:0;border-width:0 11px 10px 11px;border-color:transparent transparent rgba(var(--bg-body-rgb),.85) transparent;border-style:solid;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);opacity:0;transform:translateY(20px);pointer-events:none}.image-hotspots .thb-hotspot-arrow:before{content:"";display:block;position:absolute;top:-11px;left:-26px;width:52px;height:22px}.image-hotspots .thb-hotspot-bubble{position:absolute;top:calc(100% + 21px);left:50%;padding:16px;border-radius:3px;background:rgba(var(--bg-body-rgb),.85);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);display:flex;width:max-content;max-width:325px;align-items:center;opacity:0;transform:translate(-50%) translateY(20px);pointer-events:none}.image-hotspots .thb-hotspot-bubble .thb-hotspot-product-image{width:75px;height:75px;margin-right:16px;flex-shrink:0;position:relative}.image-hotspots .thb-hotspot-bubble .thb-hotspot-product-image img{width:100%;height:100%;object-fit:cover}.image-hotspots .thb-hotspot-product-content .thb-hotspot-product-title{font-size:.875rem;line-height:1.375rem}.image-hotspots .thb-hotspot-product-content a{font-size:.75rem;font-weight:500}.image-hotspots-with-text__wrapper{padding:1.5rem 0}@media screen and (min-width: 768px){.image-hotspots-with-text__wrapper{display:flex;align-items:center;padding:3rem;height:100%}}
/*# sourceMappingURL=/cdn/shop/t/6/assets/image-hotspots-with-text.css.map */