.product-media-modal{background-color:rgb(var(--color-background));height:100%;position:fixed;top:0;left:0;width:100%;visibility:hidden;opacity:0;z-index:-1}.product-media-modal[open]{visibility:visible;opacity:1;z-index:101}.product-media-modal__dialog{display:flex;flex-direction:column;align-items:stretch;justify-content:center;height:100vh;height:100dvh;width:100%;position:relative;overflow:hidden}.product-media-modal__toolbar{position:absolute;top:0;left:0;right:0;z-index:4;display:flex;justify-content:flex-end;padding:1.2rem 1.2rem 0;pointer-events:none}.product-media-modal__toolbar-column{display:flex;align-items:center;gap:.4rem;pointer-events:auto}.product-media-modal__tool-btn{position:relative;display:flex;align-items:center;justify-content:center;width:4rem;height:4rem;padding:0;border:0;border-radius:0;background:#f4f4f4;color:rgba(var(--color-foreground),.85);cursor:pointer;overflow:hidden;transition:color .2s ease,opacity .2s ease}.product-media-modal__tool-btn:hover,.product-media-modal__tool-btn.is-active{color:rgb(var(--color-foreground))}.product-media-modal__tool-btn svg{width:2.2rem;height:2.2rem;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}.product-media-modal__tool-btn svg circle{fill:currentColor;stroke:none}.product-media-modal__tool-btn .product-media-modal__icon-zoom circle{fill:none;stroke:currentColor;stroke-width:1.5}.product-media-modal__tool-btn .product-media-modal__icon-zoom path{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round}.product-media-modal__tool-btn[data-modal-action=fullscreen].is-active .product-media-modal__icon-enter-fs,.product-media-modal__tool-btn[data-modal-action=fullscreen]:not(.is-active) .product-media-modal__icon-exit-fs{display:none}.product-media-modal__tool-btn[data-modal-action=slideshow] .product-media-modal__icon-play,.product-media-modal__tool-btn[data-modal-action=slideshow] .product-media-modal__icon-pause{position:relative;z-index:1}.product-media-modal__tool-btn[data-modal-action=slideshow].is-playing .product-media-modal__icon-play{display:none}.product-media-modal__tool-btn[data-modal-action=slideshow]:not(.is-playing) .product-media-modal__icon-pause{display:none}.product-media-modal__tool-btn[data-modal-action=slideshow].is-playing .product-media-modal__icon-pause{display:block}.product-media-modal__icon-play path{fill:currentColor;stroke:none}.product-media-modal__icon-pause path{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}.product-media-modal__progress{position:absolute;left:0;bottom:0;width:100%;height:.2rem;background:rgb(var(--color-foreground));transform:scaleX(0);transform-origin:left center;pointer-events:none}.product-media-modal__nav{position:absolute;top:50%;transform:translateY(-50%);z-index:3;display:flex;align-items:center;justify-content:center;width:4.4rem;height:4.4rem;padding:0;border:.1rem solid rgba(var(--color-foreground),.12);border-radius:50%;background:rgba(var(--color-background),.92);color:rgba(var(--color-foreground),.75);cursor:pointer;transition:color .2s ease,opacity .2s ease}.product-media-modal__nav:hover:not(:disabled){color:rgb(var(--color-foreground))}.product-media-modal__nav:disabled{opacity:.35;cursor:not-allowed}.product-media-modal__nav--prev{left:1.2rem}.product-media-modal__nav--next{right:1.2rem}.product-media-modal__nav--next .svg-wrapper{transform:rotate(-90deg)}.product-media-modal__nav--prev .svg-wrapper{transform:rotate(90deg)}.product-media-modal__viewport{flex:1;min-height:0;width:100%;overflow:hidden;touch-action:pan-y pinch-zoom;padding:5.6rem 5.6rem 1.6rem}.product-media-modal__track{display:flex;height:100%;transition:transform .35s ease;will-change:transform}.product-media-modal__slide{flex:0 0 100%;width:100%;height:100%;display:flex;align-items:center;justify-content:center;overflow:hidden}.product-media-modal__slide--hidden{display:none}.product-media-modal__slide img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;cursor:zoom-in;transform-origin:center center;transition:transform .2s ease;-webkit-user-select:none;user-select:none;-webkit-user-drag:none}.product-media-modal__slide.is-zoomed img{cursor:grab;transition:none}.product-media-modal__slide.is-zoomed.is-dragging img{cursor:grabbing}.product-media-modal__slide .deferred-media,.product-media-modal__slide .product-media-modal__model,.product-media-modal__slide product-model{width:100%;max-height:100%}.product-media-modal__slide .deferred-media{width:min(100%,110rem)}.product-media-modal__thumbs{flex-shrink:0;width:100%;padding:0 1.2rem 1.2rem;background:linear-gradient(to top,rgba(var(--color-background),1),rgba(var(--color-background),0))}.product-media-modal__thumbs[hidden]{display:none}.product-media-modal__thumbs-track{display:flex;justify-content:center;gap:.8rem;overflow-x:auto;padding:.8rem 0;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}.product-media-modal__thumbs-track::-webkit-scrollbar{display:none}.product-media-modal__thumb{flex:0 0 auto;width:6.4rem;height:6.4rem;padding:0;border:.2rem solid transparent;border-radius:0;background:transparent;cursor:pointer;overflow:hidden;scroll-snap-align:start;opacity:1;transition:opacity .2s ease,border-color .2s ease}.product-media-modal__thumb--hidden{display:none}.product-media-modal__thumb.is-active,.product-media-modal__thumb:hover{opacity:1;border-color:rgb(var(--color-foreground))}.product-media-modal__thumb img{width:100%;height:100%;object-fit:cover;display:block}.product-media-modal__dialog:fullscreen,.product-media-modal__dialog:-webkit-full-screen{background-color:rgb(var(--color-background))}@media screen and (max-width:749px){.product-media-modal__viewport{padding:5.2rem .8rem 1.2rem}.product-media-modal__nav{width:3.6rem;height:3.6rem}.product-media-modal__thumbs-track{justify-content:flex-start}.product-media-modal__nav--prev{left:.6rem}.product-media-modal__nav--next{right:.6rem}.product-media-modal__tool-btn{width:3.6rem;height:3.6rem}.product-media-modal__toolbar{padding:.8rem .6rem 0}}
/*# sourceMappingURL=/cdn/shop/t/51/assets/product-media-modal.css.map */