.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}}.hotspots-products,.hotspots-products__detail{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:1px solid #B9E0DD}.hotspot-trigger{width:var(--hotspot-size);height:var(--hotspot-size);background:transparent;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) * .5);height:calc(var(--hotspot-size) * .5);background:#b9e0dd;border-radius:50%;transform:translate(-50%,-50%);transition:.1s ease-out}product-hotspot-component.hotspot--selected .hotspot-trigger{border:1px solid #DE5E3E}product-hotspot-component.hotspot--selected .hotspot-trigger:after{width:calc(var(--hotspot-size) * .66);height:calc(var(--hotspot-size) * .66);transition:.2s ease-out;background-color:#de5e3e}.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 auto}.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;padding:var(--padding-product-image-popover, var(--padding-xs));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);min-width:0;font-family:universe}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{--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)}.hotspots-panel__wrapper{position:absolute;bottom:24px;left:24px;display:flex;gap:8px}.hotspots-panel{position:relative;background-color:#fefdfb}.hotspot-dialog__product-content.hide{width:0;min-width:0;transition:all ease .2s;padding:0;height:80px;opacity:0}.hotspot-dialog__product-content{display:flex;flex-direction:column;justify-content:center;gap:4px;padding-inline-start:0;overflow:hidden;width:fit-content;min-width:224px;max-width:400px;transition:all ease .3s;padding:4px 16px 4px 0;background-color:#fefdfb;min-height:80px;opacity:1}.hotspot-dialog__product-price{font-family:universe}.hotspots-panel__wrapper .hotspot-dialog__product-image{width:80px;height:80px;padding:0;border-radius:0}.hotspot-dialog__product-info,.hotspot-product__info-color{display:flex;justify-content:space-between;align-items:center;gap:12px}@media(min-width:769px){.hotspot-dialog__product-content .hotspot-dialog__product-info,.hotspot-dialog__product-content .hotspot-product__info-color{opacity:0;visibility:hidden;transition:opacity .3s ease-out .15s,visibility 0s linear .15s}.hotspot-dialog__product-content:not(.hide) .hotspot-dialog__product-info,.hotspot-dialog__product-content:not(.hide) .hotspot-product__info-color{opacity:1;visibility:visible}.hotspot-dialog__product-content.hide .hotspot-dialog__product-info,.hotspot-dialog__product-content.hide .hotspot-product__info-color{opacity:0;visibility:hidden;transition:opacity .1s ease-in,visibility 0s linear .1s}}.hotspot-dialog__product-title{font-weight:700;margin:0}.hotspots-panel__wrapper .hotspot-dialog__product-title,.hotspot-dialog__product-description{font-family:universe}.color-swatch{display:flex;align-items:center;gap:10px;flex-wrap:wrap;flex-shrink:0}.color-swatch .swatch{cursor:default;pointer-events:none;--swatch-width: 13px;--swatch-height: 13px}.color-swatch__count{display:flex;align-items:center;justify-content:center;color:var(--color);font-family:universe;font-size:var(--font-paragraph-size);line-height:1;padding:0;margin:0}@media(max-width:768px){.hotspots-panel__wrapper{display:none}.hotspots-panel__mobile--detail{position:relative}.hotspot-dialog__product-content.hide{min-height:80px;height:auto}.hotspots-products__detail .hotspot-dialog__product-content.hide{width:100%;min-width:100%;opacity:1;padding:4px 16px;gap:4px;min-height:78px;margin-top:-12px}.hotspot-dialog__product-content-link{position:absolute;top:0;right:0;bottom:0;left:0;z-index:var(--layer-flat);text-decoration:none;color:inherit}.hotspots-products .swiper-slide-active{border:1px solid #000}.hotspots-panel__mobile--image{width:80px;max-width:80px;flex-shrink:0}.hotspots-panel__mobile--image .hotspot-dialog__product{width:78px;height:78px}.hotspots-panel__mobile--image .hotspot-dialog__product img{padding:0;width:100%;height:100%;object-fit:cover;border-radius:unset}.swiper-button-prev:after,.swiper-button-next:after{display:none}.hotspots-products,.hotspots-products__detail{display:block}.section-product-hotspots__wrapper{gap:16px}.mobile-image .swiper-slide{width:80px;flex-shrink:0}.mobile-image .swiper-wrapper{display:flex;align-items:center}.hotspots__background-image{object-fit:contain}}
/*# sourceMappingURL=/cdn/shop/t/31/assets/product-hotspots.css.map */