.image-map{width:100%;position:relative}.image-map__wrapper{position:relative;background-color:var(--color-background);color:var(--color-text);border-radius:var(--radius-primary)}.image-map-header{display:flex;flex-direction:column;align-items:center;text-align:center;margin-bottom:0}.image-map-header__title{margin-bottom:.75rem;color:var(--color-text)}.image-map-header__subtitle{color:var(--color-text-subtle);max-width:600px;font-weight:500;margin:0 auto}.image-map__content{width:100%;aspect-ratio:2/1;display:flex;align-items:center;justify-content:center}.image-map__image-container{position:relative;width:100%;max-width:1440px;display:block;margin:auto;container-type:inline-size}.image-map__image-container picture{display:block;width:100%;height:100%}.image-map__image{width:100%;height:auto;display:block;border-radius:8px;object-fit:contain}.image-map__placeholder{display:flex;align-items:center;justify-content:center;min-height:400px;background-color:#0000000d;border-radius:8px;color:var(--color-text);font-size:1rem}@media screen and (max-width:767px){.image-map__content{aspect-ratio:1/1}}.image-map__hotspots{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}.image-map__hotspot{position:absolute;transform:translate(-50%,-50%);pointer-events:all;z-index:1;left:var(--hotspot-x, 50%);top:var(--hotspot-y, 50%)}.image-map__hotspot.is-active{z-index:10}@keyframes hotspot-pulse-ring{0%{transform:scale(1)}50%{transform:scale(1.5)}to{transform:scale(1)}}@keyframes hotspot-pulse-background{0%{fill:#00000080}50%{fill:#000000bf}to{fill:#00000080}}.hotspot-marker{position:relative;width:2.83cqi;height:2.83cqi;min-width:18px;min-height:18px;max-width:36px;max-height:36px;flex-shrink:0;display:block;pointer-events:auto;border-radius:50%;overflow:hidden;cursor:pointer;transition:transform .2s ease-out;border:none;padding:0;background:transparent}.hotspot-marker__svg{width:100%;height:100%;display:block;overflow:visible}.hotspot-marker:focus{outline:2px solid var(--color-focus);outline-offset:2px}.hotspot-marker:focus:not(:focus-visible){outline:none}.hotspot-marker:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px}@media screen and (min-width:768px){.hotspot-marker:focus-visible .hotspot-marker__background{animation:hotspot-pulse-background 1.5s cubic-bezier(.4,0,.2,1) infinite}.hotspot-marker:focus-visible .hotspot-marker__ring{animation:hotspot-pulse-ring 1.5s cubic-bezier(.4,0,.2,1) infinite}.hotspot-marker:focus-visible .hotspot-marker__inner{animation:hotspot-pulse-inner 1.5s cubic-bezier(.4,0,.2,1) infinite}}.hotspot-marker__background,.hotspot-marker__ring,.hotspot-marker__inner{transform-origin:50% 50%}.image-map__hotspot-text{position:absolute;opacity:1;visibility:visible;transform-origin:center;text-align:center;z-index:5;left:var(--text-left, auto);right:var(--text-right, auto);top:var(--text-top, auto);bottom:var(--text-bottom, auto);transform:var(--text-transform, none);width:max-content}.image-map__hotspot-text--mobile{display:none}@media screen and (max-width:767px){.image-map__hotspot-text--desktop{display:none}.image-map__hotspot-text--mobile{display:block}}.image-map__hotspot-text-inner{color:var(--color-text);line-height:1.35;position:relative;font-weight:600;font-size:var(--text-font-size, 1.26cqi);text-align:center;max-width:max-content}.image-map__hotspot-text:after{content:"";position:absolute;background-color:currentColor;z-index:-1;left:var(--line-left, auto);right:var(--line-right, auto);top:var(--line-top, auto);bottom:var(--line-bottom, auto);width:var(--line-width, 2px);height:var(--line-height, 2px);transform:var(--line-transform, none)}.image-map__hotspot-text-inner p{margin:0}.image-map__hotspot-text-inner p:not(:last-child){margin-bottom:.5rem}.image-map__hotspot-text--left{--text-top: 50%;--text-right: calc(100% + calc(var(--text-distance, 5) * 1cqw));--text-transform: translateY(-50%);--line-left: calc(100% + 4px) ;--line-top: 50%;--line-width: calc(calc(var(--text-distance, 5) * 1cqw) - 4px);--line-height: 2px;--line-transform: translateY(-50%)}.image-map__hotspot-text--right{--text-top: 50%;--text-left: calc(100% + calc(var(--text-distance, 5) * 1cqw));--text-transform: translateY(-50%);--line-right: calc(100% + 4px) ;--line-top: 50%;--line-width: calc(calc(var(--text-distance, 5) * 1cqw) - 4px);--line-height: 2px;--line-transform: translateY(-50%)}.image-map__hotspot-text--top{--text-left: 50%;--text-bottom: calc(100% + calc(var(--text-distance, 5) * 1cqw));--text-transform: translateX(-50%);--line-top: calc(100% + 4px) ;--line-left: 50%;--line-width: 2px;--line-height: calc(calc(var(--text-distance, 5) * 1cqw) - 4px);--line-transform: translateX(-50%)}.image-map__hotspot-text--bottom{--text-left: 50%;--text-top: calc(100% + calc(var(--text-distance, 5) * 1cqw));--text-transform: translateX(-50%);--line-bottom: calc(100% + 4px) ;--line-left: 50%;--line-width: 2px;--line-height: calc(calc(var(--text-distance, 5) * 1cqw) - 4px);--line-transform: translateX(-50%)}@media screen and (max-width:767px){.image-map-header__title{margin-bottom:.75rem}.hotspot-marker{width:5.26cqi;height:5.26cqi}.image-map__hotspot{--hotspot-x: var(--mobile-position-x, 50%) !important;--hotspot-y: var(--mobile-position-y, 50%) !important}.image-map__hotspot-text-inner{--text-font-size: 3.51cqi}.image-map__hotspot-text[data-mobile-position=left]{--text-top: 50%;--text-right: calc(100% + calc(var(--mobile-text-distance, 5) * 1cqw));--text-left: auto;--text-bottom: auto;--text-transform: translateY(-50%);--line-left: calc(100% + 9px) ;--line-right: auto;--line-top: 50%;--line-bottom: auto;--line-width: calc(calc(var(--mobile-text-distance, 5) * 1cqw) - 9px);--line-height: 2px;--line-transform: translateY(-50%)}.image-map__hotspot-text[data-mobile-position=right]{--text-top: 50%;--text-left: calc(100% + calc(var(--mobile-text-distance, 5) * 1cqw));--text-right: auto;--text-bottom: auto;--text-transform: translateY(-50%);--line-right: calc(100% + 9px) ;--line-left: auto;--line-top: 50%;--line-bottom: auto;--line-width: calc(calc(var(--mobile-text-distance, 5) * 1cqw) - 9px);--line-height: 2px;--line-transform: translateY(-50%)}.image-map__hotspot-text[data-mobile-position=top]{--text-left: 50%;--text-bottom: calc(100% + calc(var(--mobile-text-distance, 5) * 1cqw));--text-right: auto;--text-top: auto;--text-transform: translateX(-50%);--line-top: calc(100% + 9px) ;--line-bottom: auto;--line-left: 50%;--line-right: auto;--line-width: 2px;--line-height: calc(calc(var(--mobile-text-distance, 5) * 1cqw) - 9px);--line-transform: translateX(-50%)}.image-map__hotspot-text[data-mobile-position=bottom]{--text-left: 50%;--text-top: calc(100% + calc(var(--mobile-text-distance, 5) * 1cqw));--text-right: auto;--text-bottom: auto;--text-transform: translateX(-50%);--line-bottom: calc(100% + 9px) ;--line-top: auto;--line-left: 50%;--line-right: auto;--line-width: 2px;--line-height: calc(calc(var(--mobile-text-distance, 5) * 1cqw) - 9px);--line-transform: translateX(-50%)}}@media(prefers-contrast:high){.hotspot-marker:focus{outline:3px solid;outline-offset:4px}.hotspot-marker__svg{filter:drop-shadow(0 0 2px currentColor)}.hotspot-marker__ring{stroke-width:3}.image-map__hotspot-text-inner{border:2px solid currentColor;padding:.5rem}}@media(prefers-reduced-motion:reduce){.hotspot-marker__background,.hotspot-marker__ring,.hotspot-marker__inner{animation:none!important;transition:none}.hotspot-marker.is-pulsing .hotspot-marker__background,.hotspot-marker.is-pulsing .hotspot-marker__ring,.hotspot-marker.is-pulsing .hotspot-marker__inner{animation:none!important}}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.coordinate-tooltip{position:fixed;z-index:9999;pointer-events:none;opacity:0;visibility:hidden;transition:opacity .2s ease-in-out,visibility .2s ease-in-out;transform:translate(-50%,-120%);left:50%;max-width:90%}.coordinate-tooltip.is-visible{opacity:1;visibility:visible}.coordinate-tooltip__content{background-color:#1a1a1a;color:#fff;padding:12px 16px;border-radius:6px;font-size:13px;line-height:1.5;white-space:nowrap;box-shadow:0 4px 12px #0000004d}.coordinate-tooltip__content strong{display:block;margin-bottom:4px;font-weight:600}.coordinate-tooltip__content small{display:block;margin-top:6px;opacity:.8;font-size:11px;white-space:normal}
/*# sourceMappingURL=/cdn/shop/t/341/assets/section-image-map.css.map */