.hotspot-component-wrapper{display:flex;flex-direction:column;width:100%;overflow:hidden}.hotspot-container{position:relative;width:100%;margin:auto;flex:1 1 50%}.product-image{display:block;width:100%;height:auto}.hotspot{position:absolute;transform:translate(-50%,-50%)}.hotspot button{color:#fff;border:none;border-radius:50%;width:44px;height:44px;font-size:18px;cursor:pointer;display:flex;justify-content:center;align-items:center;position:relative;z-index:2}.hotspot:before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:44px;height:44px;border-radius:50%;background-color:#fff;opacity:.65;z-index:1;animation:pulse 1.5s infinite;pointer-events:none}.hotspot.active:before{animation:none}@keyframes pulse{0%{transform:translate(-50%,-50%) scale(1);opacity:.5}to{transform:translate(-50%,-50%) scale(1.5);opacity:0}}.hotspot span{display:inline-block;transition:transform .3s ease}.hotspot span.rotated{transform:rotate(45deg)}.hot-spot-component-copy{flex:1 1 50%;display:flex;flex-direction:column;align-items:center;padding:32px}.hot-spot-component-copy h2{margin-bottom:0}.tooltip{position:absolute;background:#fffffff2;border:1px solid #f3f4f6;padding:16px;box-shadow:0 4px 8px #0003;border-radius:4px;min-width:250px;max-width:400px;z-index:10;visibility:hidden;opacity:0;transform:scale(.95);transition:opacity .3s ease,transform .3s ease,visibility .3s}.tooltip.show{visibility:visible;opacity:1;transform:scale(1)}.tooltip.noshow{visibility:hidden;opacity:0;transform:scale(.95)}.tooltip-header{display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:space-between;gap:8px;align-items:flex-start}#close-tooltip{width:40px;height:40px;border-radius:30px;display:flex;flex-direction:row;flex-wrap:nowrap;align-content:center;justify-content:center;align-items:center;transition:background .2s ease-out}#close-tooltip:hover{background:#eee}.tooltip h4{margin:8px 0 5px;font-size:16px}.tooltip p{margin:0;font-size:14px}@media (min-width: 768px){.hotspot-component-wrapper{flex-direction:row;flex-wrap:nowrap;align-items:center}.hotspot-reverse{flex-direction:row-reverse}}@media (min-width: 992px){.hot-spot-component-copy{padding:64px 128px}}
/*# sourceMappingURL=/cdn/shop/t/30/assets/hotspot-component.css.map */