.image-hotspots__header{padding-block:var(--page-margin, 24px);padding-inline:var(--page-margin, 24px)}.image-hotspots__heading{margin:0}.section--page-width .image-hotspots__header{padding-inline:0}.image-hotspots--media-narrow{--hotspot-cols: 2fr 3fr;--hotspot-cols-right: 3fr 2fr}.image-hotspots--media-medium{--hotspot-cols: 1fr 1fr;--hotspot-cols-right: 1fr 1fr}.image-hotspots--media-wide{--hotspot-cols: 3fr 2fr;--hotspot-cols-right: 2fr 3fr}.image-hotspots__layout{display:grid;gap:var(--page-margin, 24px)}.image-hotspots--single .image-hotspots__layout{display:block}@media screen and (min-width:750px){.image-hotspots__layout{grid-template-columns:var(--hotspot-cols, 3fr 2fr);align-items:center}.image-hotspots--media-right .image-hotspots__layout{grid-template-columns:var(--hotspot-cols-right, 2fr 3fr)}.image-hotspots--media-right .image-hotspots__wrapper{order:2}}image-hotspots-component{display:block;position:relative}.image-hotspots__media{position:relative;line-height:0}image-hotspots-component[data-image-height=small] .image-hotspots__media{height:40svh}image-hotspots-component[data-image-height=medium] .image-hotspots__media{height:55svh}image-hotspots-component[data-image-height=large] .image-hotspots__media{height:70svh}image-hotspots-component[data-image-height=fill] .image-hotspots__media{height:100svh}image-hotspots-component:is([data-image-height=small],[data-image-height=medium],[data-image-height=large],[data-image-height=fill]) .image-hotspots__image,image-hotspots-component:is([data-image-height=small],[data-image-height=medium],[data-image-height=large],[data-image-height=fill]) .image-hotspots__placeholder{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover}.image-hotspots__image,.image-hotspots__placeholder{display:block;width:100%;height:auto}@media screen and (min-width:750px){.image-hotspots__image--mobile{display:none}}@media screen and (max-width:749px){.image-hotspots__image--desktop{display:none}}.image-hotspots__hotspot{position:absolute;left:var(--hotspot-x-mobile, var(--hotspot-x, 50%));top:var(--hotspot-y-mobile, var(--hotspot-y, 50%));width:44px;height:44px;margin-left:-22px;margin-top:-22px;z-index:1}@media screen and (min-width:750px){.image-hotspots__hotspot{left:var(--hotspot-x, 50%);top:var(--hotspot-y, 50%)}}.image-hotspots__hotspot:has(.image-hotspots__trigger[aria-expanded=true]){z-index:5}.image-hotspots__trigger{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:100%;background:transparent;border:none;padding:0;cursor:pointer}.image-hotspots__dot{position:relative;display:block;width:var(--hotspot-size, 16px);height:var(--hotspot-size, 16px);border-radius:50%;background:var(--hotspot-color, #fff);box-shadow:0 0 0 2px #fff,0 0 0 3px #0000001f,0 2px 8px #00000040;transition:transform .2s ease;flex-shrink:0}.image-hotspots__trigger:hover .image-hotspots__dot,.image-hotspots__trigger[aria-expanded=true] .image-hotspots__dot{transform:scale(1.2)}.image-hotspots__dot:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:50%;border:2px solid var(--hotspot-color, #fff);opacity:.7;animation:hotspot-pulse 2s ease-out infinite}.image-hotspots__trigger[aria-expanded=true] .image-hotspots__dot:before{animation:none;opacity:0}[data-no-pulse] .image-hotspots__dot:before{display:none}@keyframes hotspot-pulse{0%{transform:scale(1);opacity:.7}70%{transform:scale(2);opacity:0}to{transform:scale(1);opacity:0}}.image-hotspots__popup{position:absolute;bottom:calc(100% + 12px);left:50%;transform:translate(calc(-50% + var(--popup-offset, 0px)));z-index:10;width:260px;max-width:calc(100vw - 32px);background:#fff;color:#1a1a1a;border-radius:8px;padding:16px;box-shadow:0 4px 24px #00000024,0 1px 4px #00000014;line-height:1.5;overflow-wrap:break-word}.image-hotspots__popup:after{content:"";position:absolute;bottom:-8px;left:calc(50% - var(--popup-offset, 0px));transform:translate(-50%);border-left:8px solid transparent;border-right:8px solid transparent;border-top:8px solid #fff;pointer-events:none}.image-hotspots__popup[data-position=below]{bottom:auto;top:calc(100% + 12px)}.image-hotspots__popup[data-position=below]:after{bottom:auto;top:-8px;border-top:none;border-bottom:8px solid #fff}.image-hotspots__close{position:absolute;top:4px;right:4px;display:flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;background:transparent;border:none;cursor:pointer;border-radius:4px;color:#1a1a1a;opacity:.5;transition:opacity .15s ease}.image-hotspots__close:hover,.image-hotspots__close:focus-visible{opacity:1}.image-hotspots__popup[data-hover-open] .image-hotspots__close{display:none}.image-hotspots__popup-body{font-size:.875em;color:#444;line-height:1.6;overflow-wrap:break-word;padding-right:36px}.image-hotspots__popup[data-hover-open] .image-hotspots__popup-body{padding-right:0}.image-hotspots__popup-body p{margin:0}.image-hotspots__popup-body p+p{margin-top:.5em}@media screen and (min-width:750px){image-hotspots-component[data-placement=label] .image-hotspots__media{max-width:44%;margin-inline:auto}}.image-hotspots__lines{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;pointer-events:none;overflow:visible}.image-hotspots__lines :is(line,polyline){stroke:var(--hotspot-color, currentColor);stroke-width:var(--hotspot-line-width, 1.5px);stroke-linecap:butt;stroke-linejoin:miter}[data-show-lines=false] .image-hotspots__lines{display:none}.image-hotspots__labels{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.image-hotspots__label{position:absolute;width:clamp(150px,22%,280px);font-size:var(--hotspot-label-size, .95em);line-height:1.45;pointer-events:auto}.image-hotspots__label[data-label-side=left]{text-align:right}.image-hotspots__label[data-label-side=right]{text-align:left}.image-hotspots__label[data-label-side=top],.image-hotspots__label[data-label-side=bottom]{text-align:center}.image-hotspots__trigger:focus-visible{outline:2px solid var(--hotspot-color, currentColor);outline-offset:2px;border-radius:50%}.image-hotspots__label-body p{margin:0}.image-hotspots__label-body p+p{margin-top:.4em}image-hotspots-component[data-reveal=interaction] .image-hotspots__label,image-hotspots-component[data-reveal=interaction] .image-hotspots__lines :is(line,polyline){opacity:0;transition:opacity .18s ease}image-hotspots-component[data-reveal=interaction] .image-hotspots__label.is-active,image-hotspots-component[data-reveal=interaction] .image-hotspots__lines :is(line,polyline).is-active{opacity:1}image-hotspots-component[data-design-mode][data-reveal=interaction] .image-hotspots__label,image-hotspots-component[data-design-mode][data-reveal=interaction] .image-hotspots__lines :is(line,polyline){opacity:1}@media(prefers-reduced-motion:reduce){.image-hotspots__label,.image-hotspots__lines :is(line,polyline),.image-hotspots__dot{transition:none}.image-hotspots__dot:before{animation:none}}image-hotspots-component[data-placement=label]:not([data-compact]) .image-hotspots__popup{display:none}image-hotspots-component[data-placement=label][data-compact] .image-hotspots__media{max-width:none;margin-inline:0}image-hotspots-component[data-placement=label][data-compact] .image-hotspots__labels,image-hotspots-component[data-placement=label][data-compact] .image-hotspots__lines{display:none}
/*# sourceMappingURL=/cdn/shop/t/50/assets/image-hotspots.css.map */