.article-hotspots{width:100%}.article-hotspots__image-wrapper{position:relative;width:100%;overflow:hidden}.article-hotspots__image-wrapper.ratio-landscape{padding-bottom:56.25%}.article-hotspots__image-wrapper.ratio-portrait{padding-bottom:125%}.article-hotspots__image-wrapper.ratio-square{padding-bottom:100%}.article-hotspots__image{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover;display:block}.article-hotspots__placeholder{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;overflow:hidden}.article-hotspots__placeholder-svg{position:absolute;width:100%;height:100%;object-fit:cover}.article-hotspots__hotspot{position:absolute;width:2.8rem;height:2.8rem;transform:translate(-50%,-50%);background:transparent;border:none;padding:0;cursor:pointer;z-index:2;display:flex;align-items:center;justify-content:center}@media screen and (min-width:750px){.article-hotspots__hotspot{width:3.6rem;height:3.6rem}}.article-hotspots__hotspot-ring{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:50%;border:2px solid rgba(255,255,255,.8);animation:hotspot-pulse 2.4s ease-in-out infinite;box-shadow:0 0 #ffffff80}.article-hotspots__hotspot-dot{width:1.2rem;height:1.2rem;border-radius:50%;background:#fff;border:2px solid rgba(0,0,0,.2);flex-shrink:0;transition:transform .25s ease}@media screen and (min-width:750px){.article-hotspots__hotspot-dot{width:1.4rem;height:1.4rem}}.article-hotspots__hotspot:hover .article-hotspots__hotspot-dot,.article-hotspots__hotspot.is-active .article-hotspots__hotspot-dot{transform:scale(1.2)}.article-hotspots__hotspot.is-active .article-hotspots__hotspot-ring{animation:none;border-color:#fff;box-shadow:0 0 0 3px #fff6}@keyframes hotspot-pulse{0%{box-shadow:0 0 #ffffff80}60%{box-shadow:0 0 0 10px #fff0}to{box-shadow:0 0 #fff0}}.article-hotspots--no-pulse .article-hotspots__hotspot-ring{animation:none;box-shadow:none}.article-hotspots__popup{position:absolute;z-index:10;width:min(21rem,calc(100vw - 2rem));background:rgb(var(--color-background, 255 255 255));border-radius:var(--border-radius-media, .4rem);box-shadow:0 8px 32px #0000002e;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .25s ease,visibility .25s ease,transform .25s ease;transform:scale(.95);transform-origin:top left}@media screen and (min-width:750px){.article-hotspots__popup{width:32rem}}.article-hotspots__popup.is-active{opacity:1;visibility:visible;pointer-events:auto;transform:scale(1)}.article-hotspots__popup--right.article-hotspots__popup--below{top:calc(var(--hotspot-y) + 2rem);left:calc(var(--hotspot-x) + 2rem);transform-origin:top left}.article-hotspots__popup--left.article-hotspots__popup--below{top:calc(var(--hotspot-y) + 2rem);right:calc(100% - var(--hotspot-x) + 2rem);transform-origin:top right}.article-hotspots__popup--right.article-hotspots__popup--above{bottom:calc(100% - var(--hotspot-y) + 2rem);left:calc(var(--hotspot-x) + 2rem);transform-origin:bottom left}.article-hotspots__popup--left.article-hotspots__popup--above{bottom:calc(100% - var(--hotspot-y) + 2rem);right:calc(100% - var(--hotspot-x) + 2rem);transform-origin:bottom right}.article-hotspots__product-link{display:flex;align-items:center;gap:1rem;padding:1rem;text-decoration:none;color:inherit;border-radius:inherit}@media screen and (min-width:750px){.article-hotspots__product-link{gap:1.4rem;padding:1.4rem}}.article-hotspots__product-link:hover .article-hotspots__product-title{text-decoration:underline}.article-hotspots__product-image-wrapper{flex-shrink:0;width:5.6rem;height:5.6rem;border-radius:calc(var(--border-radius-media, .4rem) * .6);overflow:hidden;background:#0000000a}@media screen and (min-width:750px){.article-hotspots__product-image-wrapper{width:9.6rem;height:9.6rem}}.article-hotspots__product-image{width:100%;height:100%;object-fit:cover;display:block}.article-hotspots__product-image-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center}.article-hotspots__product-image-placeholder svg{width:100%;height:100%}.article-hotspots__product-info{display:flex;flex-direction:column;gap:.4rem;min-width:0}.article-hotspots__product-title{font-size:1.3rem;font-weight:600;line-height:1.3;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}@media screen and (min-width:750px){.article-hotspots__product-title{font-size:1.5rem}}.article-hotspots__product-price{font-size:1.2rem;opacity:.7}@media screen and (min-width:750px){.article-hotspots__product-price{font-size:1.4rem}}.article-hotspots__empty{padding:1.2rem;font-size:1.3rem;margin:0;opacity:.6}
/*# sourceMappingURL=/cdn/shop/t/37/assets/article-image-hotspots.css.map */