.section-product-hotspots{position:relative}.section-product-hotspots__wrapper{display:flex;flex-direction:column;gap:var(--gap);width:100%;height:100%}.section-product-hotspots__content{position:relative;aspect-ratio:var(--ratio, 21 / 9);overflow:hidden}@media(hover:none){product-hotspot-component.hotspot--hidden-touch{display:none}}@media screen and (max-width:749px){product-hotspot-component .hotspot-dialog{display:none}}product-hotspot-component{position:absolute;cursor:pointer;width:var(--button-size);height:var(--button-size);display:flex;align-items:center;justify-content:center;background:transparent;border:none;padding:0;font:inherit;color:inherit;outline:none;transition:border-color .2s ease-out,box-shadow .2s ease-out;z-index:var(--layer-flat)}product-hotspot-component:has(.hotspot-dialog[open]){z-index:var(--layer-raised)}product-hotspot-component .hotspot-trigger{padding:0;border:none}.hotspot-dialog__product-content{display:flex;flex-direction:column;justify-content:space-between;padding:var(--padding-xs);overflow:hidden}.hotspot-trigger{width:var(--hotspot-size);height:var(--hotspot-size);background:var(--hotspot-bg, rgb(0 0 0 / .5));border-radius:50%;cursor:pointer;position:relative;transition:width .1s ease-out,height .1s ease-out}@media screen and (max-width:749px){.hotspot-trigger{cursor:pointer;-webkit-tap-highlight-color:transparent}}.hotspot-trigger:after{content:"";position:absolute;top:50%;left:50%;width:calc(var(--hotspot-size) * .4);height:calc(var(--hotspot-size) * .4);background:var(--hotspot-bullseye, #fff);border-radius:50%;transform:translate(-50%,-50%);transition:width .1s ease-out,height .1s ease-out,background .1s ease-out}@media screen and (min-width:750px){.hotspot:hover .hotspot-trigger:after,product-hotspot-component:has(.hotspot-dialog[open]) .hotspot-trigger:after{width:calc(var(--hotspot-size) * .55);height:calc(var(--hotspot-size) * .55);transition:width .2s ease-out,height .2s ease-out,background .2s ease-out;transition-delay:.2s}}.hotspots-container{position:absolute;top:0;right:0;bottom:0;left:0;z-index:var(--layer-flat);overflow:clip}.hotspots__background-image{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover;object-position:center}product-hotspot-component .hotspot-dialog{position:absolute;padding:0;border-radius:var(--style-border-radius-popover);border:var(--style-border-popover);width:max-content;min-width:var(--minimum-width-dialog);max-width:var(--maximum-width-dialog);box-shadow:var(--shadow-popover)}product-hotspot-component .hotspot-dialog[data-placement*=bottom]{--offset-y: 0px;--origin-y: calc(var(--hotspot-size) / 2);top:calc((var(--button-size) - var(--hotspot-size)) / 2 + var(--dialog-vertical-offset, 0px));bottom:unset}product-hotspot-component .hotspot-dialog[data-placement*=top]{--offset-y: 0px;--origin-y: calc(100% - (var(--hotspot-size) * .5));top:unset;bottom:calc((var(--button-size) - var(--hotspot-size)) * .5 - var(--dialog-vertical-offset, 0px))}product-hotspot-component .hotspot-dialog[data-placement*=left]{--offset-x: calc((var(--button-size) - var(--hotspot-size)) * .5);--origin-x: calc(100% - (var(--hotspot-size) * .5));left:unset;right:100%}product-hotspot-component .hotspot-dialog[data-placement*=right]{--offset-x: calc((var(--button-size) - var(--hotspot-size)) * -.5);--origin-x: calc(var(--hotspot-size) * .5);left:100%;right:unset}product-hotspot-component .hotspot-dialog[data-placement*=center]{left:50%;translate:-50% 0;right:unset}product-hotspot-component .hotspot-dialog[data-placement*=center][data-placement*=bottom]{--origin-y: calc(var(--hotspot-size) * .5);--origin-x: 50%;--offset-y: calc((var(--button-size) - var(--hotspot-size)) * -.5);--offset-x: 0;top:100%;bottom:unset;margin:0}product-hotspot-component .hotspot-dialog[data-placement*=center][data-placement*=top]{--origin-y: calc(100% - (var(--hotspot-size) * .5));--origin-x: 50%;--offset-y: calc((var(--button-size) - var(--hotspot-size)) * .5);--offset-x: 0;bottom:100%}product-hotspot-component .hotspot-dialog:is(:focus,:focus-visible),product-hotspot-component .hotspot-dialog__link:is(:focus,:focus-visible){outline:none}.hotspot-dialog__product{display:grid;grid-template-columns:auto 1fr}.hotspot-dialog__product-image,.hotspot-dialog svg.hotspot-dialog__placeholder-product-image{width:var(--width-product-image-dialog);height:var(--width-product-image-dialog);aspect-ratio:1;object-fit:cover;border-radius:var(--style-border-radius-popover)}.hotspot-dialog__link{position:absolute;top:0;right:0;bottom:0;left:0;z-index:var(--layer-flat)}.hotspot-dialog__product-title{margin-block-end:var(--product-title-gap);padding-inline-end:var(--padding-sm);min-width:0}product-hotspot-component .hotspot-dialog .hotspot-dialog__sold-out-badge{display:flex;width:fit-content;justify-self:flex-end;align-self:flex-end;justify-content:center;align-items:center;font-size:var(--font-body--size);padding:var(--padding-2xs) var(--padding-sm);background:rgb(var(--color-foreground-rgb) / var(--opacity-10));border-radius:var(--border-radius-sm);text-transform:uppercase;letter-spacing:var(--letter-spacing-sm);opacity:var(--opacity-80)}product-hotspot-component .hotspot-dialog{background-color:var(--color-background);color:var(--color-foreground);--hotspot-blur: 4px;--hotspot-scale: .8;--hotspot-entry-duration: .2s;--hotspot-exit-duration: .1s;filter:blur(var(--hotspot-blur));opacity:0;transform:scale(var(--hotspot-scale)) translate(0);transition-property:display,opacity,filter,transform;transition-duration:var(--hotspot-entry-duration);transition-timing-function:ease;transform:scale(var(--hotspot-scale)) translate(var(--offset-x),var(--offset-y));transform-origin:var(--origin-x) var(--origin-y);transition-timing-function:cubic-bezier(.65,-.49,.35,1.12)}product-hotspot-component .hotspot-dialog[data-closing=true]{transition-duration:var(--hotspot-exit-duration);transition-timing-function:ease-out;transform:scale(1) translateY(calc(var(--hotspot-size) * .25))}product-hotspot-component .hotspot-dialog[data-showing=true]{transition-behavior:allow-discrete}product-hotspot-component .hotspot-dialog[open][data-showing=true]{opacity:1;transform:scale(1) translate(0);filter:blur(0px)}@starting-style{product-hotspot-component .hotspot-dialog[open][data-showing=true]{opacity:0;filter:blur(var(--hotspot-blur));transform:scale(var(--hotspot-scale)) translate(var(--offset-x),var(--offset-y));transform-origin:var(--origin-x) var(--origin-y)}}product-hotspot-component .hotspot-dialog:after{content:"";position:absolute;opacity:0;top:0;right:0;bottom:0;left:0;width:100%;height:100%;pointer-events:all;transition:opacity .22s ease-out,translate .22s .1s ease-out;scale:var(--scale-x, 1) var(--scale-y, 1);z-index:var(--layer-flat)}.hotspot-dialog[open]:is([data-placement*=left],[data-placement*=right]):after{clip-path:polygon(0 0,100% 0,100% 100%);width:calc(var(--button-size) / 2 + var(--hotspot-size) * .5)}.hotspot-dialog[open][data-placement*=right]:after{right:100%;left:unset}.hotspot-dialog[open][data-placement*=left]:after{left:100%;right:unset;--scale-x: -1}.hotspot-dialog[open][data-placement*=top]:after{--scale-y: -1}.hotspot-dialog[open][data-placement*=center]:after{height:calc(var(--button-size) / 2 + var(--hotspot-size) * .5);width:100%;clip-path:polygon(0 0,100% 0,50% calc(100% - var(--hotspot-size) * .25));--scale-x: 1;--scale-y: 1}.hotspot-dialog[open][data-placement*=center][data-placement*=bottom]:after{top:unset;bottom:100%;--scale-y: -1}.hotspot-dialog[open][data-placement*=center][data-placement*=top]:after{top:100%;bottom:unset}.hotspot-dialog[open] .quick-add{display:flex;flex-direction:column;justify-content:flex-end;width:auto;height:auto;position:relative;z-index:var(--layer-flat)}.hotspot-dialog[open] .quick-add__button{position:relative;padding-block:0;box-shadow:none;align-items:center;justify-self:flex-end;height:fit-content;translate:var(--padding-2xs) 0;border:none;color:var(--color-foreground);background-color:var(--color-background);overflow:visible;pointer-events:all;opacity:1;animation:elementSlideInTop var(--animation-speed) var(--animation-easing);transition-property:translate;transition-duration:var(--animation-speed);transition-timing-function:var(--ease-out-cubic)}.hotspot-dialog[open] .quick-add__button:before{content:"";position:absolute;top:-2px;right:-2px;bottom:-2px;left:-2px;border-radius:52px;border:2px solid transparent;pointer-events:none;transition-property:border-color;transition-duration:0s;transition-timing-function:var(--ease-out-cubic)}.hotspot-dialog[open] .quick-add__button:is(:hover,:focus,:focus-visible,:active){translate:0 0;transition-delay:var(--animation-speed-slow)}.hotspot-dialog[open] .quick-add__button:is(:hover,:focus,:focus-visible,:active):before{border-color:rgb(var(--color-foreground-rgb) / var(--opacity-15));transition-duration:var(--animation-speed);transition-delay:var(--animation-speed-slow)}
/*# sourceMappingURL=/cdn/shop/t/2/assets/product-hotspot.css.map */