.hotspot-image-outer{overflow:hidden;position:relative;isolation:isolate;height:0;width:100%;min-height:360px}@media only screen and (max-width: 600px){.hotspot-image-outer{min-height:unset}}.hotspot-image-outer .hotspot-image,.hotspot-image-outer .hotspots-outer{top:0;right:0;bottom:0;left:0;position:absolute;min-height:360px}@media only screen and (max-width: 600px){.hotspot-image-outer .hotspot-image,.hotspot-image-outer .hotspots-outer{min-height:unset}}.hotspot-image-outer .hotspot-image.hotspot-image,.hotspot-image-outer .hotspots-outer.hotspot-image{z-index:-1;width:100%;height:100%;object-fit:cover;pointer-events:none;-webkit-user-select:none;user-select:none}.hotspot-image-outer .hotspot-image.hotspots-outer,.hotspot-image-outer .hotspots-outer.hotspots-outer{z-index:1;display:flex;align-items:stretch;justify-content:stretch;overflow:hidden}.hotspot-image-outer .hotspot-image.hotspots-outer .hotspots-inner,.hotspot-image-outer .hotspots-outer.hotspots-outer .hotspots-inner{width:100%;height:100%;position:relative}.hotspot-image-outer .hotspot-image.hotspots-outer .hotspots-inner .hotspot-wrapper,.hotspot-image-outer .hotspots-outer.hotspots-outer .hotspots-inner .hotspot-wrapper{display:flex;align-items:center;justify-content:center;pointer-events:none;isolation:isolate;position:absolute;translate:-50% -50%;inset:var(--hotspot-y) auto auto var(--hotspot-x)}.hotspot-image-outer .hotspot-image.hotspots-outer .hotspots-inner .hotspot-wrapper .hotspot,.hotspot-image-outer .hotspots-outer.hotspots-outer .hotspots-inner .hotspot-wrapper .hotspot{cursor:pointer;pointer-events:all;position:relative;display:flex;align-items:center;justify-content:center;width:25px;height:25px;background:#fff;border-radius:50%;color:var(--text-primary-color)}.hotspot-image-outer .hotspot-image.hotspots-outer .hotspots-inner .hotspot-wrapper .hotspot>svg,.hotspot-image-outer .hotspots-outer.hotspots-outer .hotspots-inner .hotspot-wrapper .hotspot>svg{width:12px;height:12px;object-fit:contain;pointer-events:none}.hotspot-image-outer .hotspot-image.hotspots-outer .hotspots-inner .hotspot-wrapper .hotspot .hotspot-link,.hotspot-image-outer .hotspots-outer.hotspots-outer .hotspots-inner .hotspot-wrapper .hotspot .hotspot-link{display:flex;align-items:center;justify-content:space-between;gap:10px;z-index:-1;position:absolute;inset:auto 50% 50% auto;translate:50% 50%;color:var(--text-primary-color);background:#fff;border-radius:5px;padding:10px 15px;font-size:14px;font-weight:700;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .3s ease-in-out}.hotspot-image-outer .hotspot-image.hotspots-outer .hotspots-inner .hotspot-wrapper .hotspot .hotspot-link,.hotspot-image-outer .hotspots-outer.hotspots-outer .hotspots-inner .hotspot-wrapper .hotspot .hotspot-link,.hotspot-image-outer .hotspot-image.hotspots-outer .hotspots-inner .hotspot-wrapper .hotspot .hotspot-link.bottom.middle,.hotspot-image-outer .hotspots-outer.hotspots-outer .hotspots-inner .hotspot-wrapper .hotspot .hotspot-link.bottom.middle{inset:auto 50% 0 auto;translate:50% calc(100% + 15px)}.hotspot-image-outer .hotspot-image.hotspots-outer .hotspots-inner .hotspot-wrapper .hotspot .hotspot-link.bottom.left,.hotspot-image-outer .hotspots-outer.hotspots-outer .hotspots-inner .hotspot-wrapper .hotspot .hotspot-link.bottom.left{inset:auto auto 0 0;translate:calc(-100% - 5px) calc(100% + 5px)}.hotspot-image-outer .hotspot-image.hotspots-outer .hotspots-inner .hotspot-wrapper .hotspot .hotspot-link.bottom.right,.hotspot-image-outer .hotspots-outer.hotspots-outer .hotspots-inner .hotspot-wrapper .hotspot .hotspot-link.bottom.right{inset:auto 0 0 auto;translate:calc(100% + 5px) calc(100% + 5px)}.hotspot-image-outer .hotspot-image.hotspots-outer .hotspots-inner .hotspot-wrapper .hotspot .hotspot-link.top.middle,.hotspot-image-outer .hotspots-outer.hotspots-outer .hotspots-inner .hotspot-wrapper .hotspot .hotspot-link.top.middle{inset:0 50% auto auto;translate:50% calc(-100% - 15px)}.hotspot-image-outer .hotspot-image.hotspots-outer .hotspots-inner .hotspot-wrapper .hotspot .hotspot-link.top.left,.hotspot-image-outer .hotspots-outer.hotspots-outer .hotspots-inner .hotspot-wrapper .hotspot .hotspot-link.top.left{inset:0 auto auto 0;translate:calc(-100% - 5px) calc(-100% - 5px)}.hotspot-image-outer .hotspot-image.hotspots-outer .hotspots-inner .hotspot-wrapper .hotspot .hotspot-link.top.right,.hotspot-image-outer .hotspots-outer.hotspots-outer .hotspots-inner .hotspot-wrapper .hotspot .hotspot-link.top.right{inset:0 0 auto auto;translate:calc(100% + 5px) calc(-100% - 5px)}.hotspot-image-outer .hotspot-image.hotspots-outer .hotspots-inner .hotspot-wrapper .hotspot .hotspot-link.center.right,.hotspot-image-outer .hotspots-outer.hotspots-outer .hotspots-inner .hotspot-wrapper .hotspot .hotspot-link.center.right{inset:50% 0 auto auto;translate:calc(100% + 15px) -50%}.hotspot-image-outer .hotspot-image.hotspots-outer .hotspots-inner .hotspot-wrapper .hotspot .hotspot-link.center.left,.hotspot-image-outer .hotspots-outer.hotspots-outer .hotspots-inner .hotspot-wrapper .hotspot .hotspot-link.center.left{inset:50% auto auto 0;translate:calc(-100% - 15px) -50%}@media only screen and (max-width: 600px){.hotspot-image-outer .hotspot-image.hotspots-outer .hotspots-inner .hotspot-wrapper .hotspot .hotspot-link,.hotspot-image-outer .hotspots-outer.hotspots-outer .hotspots-inner .hotspot-wrapper .hotspot .hotspot-link,.hotspot-image-outer .hotspot-image.hotspots-outer .hotspots-inner .hotspot-wrapper .hotspot .hotspot-link.bottom.middle,.hotspot-image-outer .hotspots-outer.hotspots-outer .hotspots-inner .hotspot-wrapper .hotspot .hotspot-link.bottom.middle{inset:auto 50% 0 auto;translate:50% calc(100% + 7.5px)}.hotspot-image-outer .hotspot-image.hotspots-outer .hotspots-inner .hotspot-wrapper .hotspot .hotspot-link.bottom.left,.hotspot-image-outer .hotspots-outer.hotspots-outer .hotspots-inner .hotspot-wrapper .hotspot .hotspot-link.bottom.left{inset:auto auto 0 0;translate:calc(-100% - 2.5px) calc(100% + 2.5px)}.hotspot-image-outer .hotspot-image.hotspots-outer .hotspots-inner .hotspot-wrapper .hotspot .hotspot-link.bottom.right,.hotspot-image-outer .hotspots-outer.hotspots-outer .hotspots-inner .hotspot-wrapper .hotspot .hotspot-link.bottom.right{inset:auto 0 0 auto;translate:calc(100% + 2.5px) calc(100% + 2.5px)}.hotspot-image-outer .hotspot-image.hotspots-outer .hotspots-inner .hotspot-wrapper .hotspot .hotspot-link.top.middle,.hotspot-image-outer .hotspots-outer.hotspots-outer .hotspots-inner .hotspot-wrapper .hotspot .hotspot-link.top.middle{inset:0 50% auto auto;translate:50% calc(-100% - 7.5px)}.hotspot-image-outer .hotspot-image.hotspots-outer .hotspots-inner .hotspot-wrapper .hotspot .hotspot-link.top.left,.hotspot-image-outer .hotspots-outer.hotspots-outer .hotspots-inner .hotspot-wrapper .hotspot .hotspot-link.top.left{inset:0 auto auto 0;translate:calc(-100% - 2.5px) calc(-100% - 2.5px)}.hotspot-image-outer .hotspot-image.hotspots-outer .hotspots-inner .hotspot-wrapper .hotspot .hotspot-link.top.right,.hotspot-image-outer .hotspots-outer.hotspots-outer .hotspots-inner .hotspot-wrapper .hotspot .hotspot-link.top.right{inset:0 0 auto auto;translate:calc(100% + 2.5px) calc(-100% - 2.5px)}.hotspot-image-outer .hotspot-image.hotspots-outer .hotspots-inner .hotspot-wrapper .hotspot .hotspot-link.center.right,.hotspot-image-outer .hotspots-outer.hotspots-outer .hotspots-inner .hotspot-wrapper .hotspot .hotspot-link.center.right{inset:50% 0 auto auto;translate:calc(100% + 7.5px) -50%}.hotspot-image-outer .hotspot-image.hotspots-outer .hotspots-inner .hotspot-wrapper .hotspot .hotspot-link.center.left,.hotspot-image-outer .hotspots-outer.hotspots-outer .hotspots-inner .hotspot-wrapper .hotspot .hotspot-link.center.left{inset:50% auto auto 0;translate:calc(-100% - 7.5px) -50%}}.hotspot-image-outer .hotspot-image.hotspots-outer .hotspots-inner .hotspot-wrapper .hotspot .hotspot-link svg,.hotspot-image-outer .hotspots-outer.hotspots-outer .hotspots-inner .hotspot-wrapper .hotspot .hotspot-link svg{width:6px;height:14px;color:inherit;pointer-events:none}.hotspot-image-outer .hotspot-image.hotspots-outer .hotspots-inner .hotspot-wrapper .hotspot .hotspot-link:before,.hotspot-image-outer .hotspots-outer.hotspots-outer .hotspots-inner .hotspot-wrapper .hotspot .hotspot-link:before{content:"";width:100%;height:100%;border:solid 1px white;border-radius:5px;position:absolute;inset:50% auto auto 50%;translate:calc(-50% + .5px) calc(-50% - .5px);scale:1;opacity:0;-webkit-user-select:none;user-select:none;pointer-events:none}.hotspot-image-outer .hotspot-image.hotspots-outer .hotspots-inner .hotspot-wrapper .hotspot:before,.hotspot-image-outer .hotspots-outer.hotspots-outer .hotspots-inner .hotspot-wrapper .hotspot:before{content:"";width:100%;height:100%;border:solid 1px white;border-radius:50%;position:absolute;inset:50% auto auto 50%;translate:calc(-50% + .5px) calc(-50% - .5px);scale:1;opacity:0;-webkit-user-select:none;user-select:none;pointer-events:none}.hotspot-image-outer .hotspot-image.hotspots-outer .hotspots-inner .hotspot-wrapper.active .hotspot .hotspot-link,.hotspot-image-outer .hotspots-outer.hotspots-outer .hotspots-inner .hotspot-wrapper.active .hotspot .hotspot-link{z-index:-1;opacity:1;pointer-events:all}.hotspot-image-outer .hotspot-image.hotspots-outer .hotspots-inner .hotspot-wrapper.active .hotspot:before,.hotspot-image-outer .hotspots-outer.hotspots-outer .hotspots-inner .hotspot-wrapper.active .hotspot:before{animation:hotspot_pulse 1s ease-in-out .3s infinite}.hotspot-image-outer .hotspot-image.hotspots-outer .hotspots-inner .hotspot-wrapper.active .hotspot .hotspot-link:before,.hotspot-image-outer .hotspots-outer.hotspots-outer .hotspots-inner .hotspot-wrapper.active .hotspot .hotspot-link:before{animation:hotspot-link_pulse 1s ease-in-out .3s infinite}.hotspot-image-outer .hotspot-image.hotspots-outer .hotspots-inner .hotspot-wrapper:hover .hotspot:before,.hotspot-image-outer .hotspots-outer.hotspots-outer .hotspots-inner .hotspot-wrapper:hover .hotspot:before{animation:hotspot_pulse 1s ease-in-out .3s infinite}.hotspot-image-outer .hotspot-image.hotspots-outer .hotspots-inner .hotspot-wrapper:hover .hotspot .hotspot-link:before,.hotspot-image-outer .hotspots-outer.hotspots-outer .hotspots-inner .hotspot-wrapper:hover .hotspot .hotspot-link:before{animation:hotspot-link_pulse 1s ease-in-out .3s infinite}@keyframes hotspot_pulse{0%{opacity:0;scale:.9}70%{opacity:.9}to{scale:1.5;opacity:0}}@keyframes hotspot-link_pulse{0%{opacity:0;scale:.9}70%{opacity:.5}to{scale:1.1 1.3;opacity:0}}.hotspots-section .block-section{display:flex}.hotspots-section .hotspot-image-container{width:100%;aspect-ratio:16/9}.hotspots-section .product-showcase{width:30%}.hotspots-section .product-showcase{background-color:#f0f0f0;position:relative;padding:50px;--swiper-theme-color: #000;--swiper-navigation-size: 20px;--swiper-navigation-top-offset: 100%;--swiper-navigation-bottom-offset: 50px;--swiper-navigation-sides-offset: 33%;--swiper-navigation-color: #000;--swiper-pagination-color: var(--swiper-theme-color);--swiper-pagination-left: auto;--swiper-pagination-right: 8px;--swiper-pagination-bottom: 8px;--swiper-pagination-top: auto;--swiper-pagination-fraction-color: inherit;--swiper-pagination-progressbar-bg-color: rgba(0, 0, 0, );--swiper-pagination-progressbar-size: 4px;--swiper-pagination-bullet-size: 16px;--swiper-pagination-bullet-width: 16px;--swiper-pagination-bullet-height: 16px;--swiper-pagination-bullet-inactive-color: transparent;--swiper-pagination-bullet-inactive-opacity: .2;--swiper-pagination-bullet-opacity: 1;--swiper-pagination-bullet-horizontal-gap: 4px;--swiper-pagination-bullet-vertical-gap: 6px}.product-showcase .swiper-controls{display:flex;justify-content:center;align-items:center;gap:10px;margin-top:20px}.product-showcase .swiper-pagination{position:static!important;display:flex;justify-content:center;width:auto}.product-showcase .swiper-pagination-fraction{width:auto}.product-showcase .swiper-button-prev,.product-showcase .swiper-button-next{position:static!important;margin:0}.product-showcase .swiper-button-prev{order:-1}.product-showcase .swiper-pagination-bullet{border:2px solid #000}.product-showcase .swiper-button-prev:after,.product-showcase .swiper-button-next:after{font-size:20px;color:#000}@media only screen and (max-width: 989px){.hotspots-section .block-section{flex-direction:column}.hotspots-section .product-showcase{width:100%;padding:20px 0}}@media (min-width: 989px) and (max-width: 1150px){.hotspots-section .product-showcase{padding:20px}.hotspots-section .product-showcase .card-heading a{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}}
/*# sourceMappingURL=/cdn/shop/t/34/assets/component-hotspot.css.map */