.product-media-modal{box-sizing:border-box;opacity:0;position:fixed;visibility:hidden;z-index:1000;color:rgb(var(--color-foreground));top:0;left:0;width:100%;height:100%;background:rgba(var(--color-overlay),.8);display:flex;align-items:center;justify-content:center;transition:opacity var(--duration-default) ease,visibility var(--duration-default) ease}.product-media-modal[open]{opacity:1;visibility:visible}.product-media-modal__dialog{position:relative;width:90%;max-width:1200px;max-height:90vh;overflow-y:auto;padding:2rem;border-radius:var(--popup-corner-radius);box-shadow:var(--popup-shadow-horizontal-offset) var(--popup-shadow-vertical-offset) var(--popup-shadow-blur-radius) rgba(var(--color-shadow),var(--popup-shadow-opacity))}.product-media-modal__toggle{background-color:rgb(var(--color-background));border:.1rem solid rgba(var(--color-foreground),.1);border-radius:50%;color:rgba(var(--color-foreground),.55);display:flex;align-items:center;justify-content:center;cursor:pointer;position:absolute;right:1.5rem;top:1.5rem;padding:1.2rem;width:4rem;height:4rem;z-index:2}.product-media-modal__toggle .icon{width:1.6rem;height:1.6rem}.product-media-modal__content{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center}.product-media-modal__items{width:100%;height:100%;position:relative}.product-media-modal-item{width:100%;height:100%;display:none;align-items:center;justify-content:center}.product-media-modal-item.active{display:flex}.product-media-modal__image{max-width:100%;max-height:80vh;width:auto;height:auto;object-fit:contain}.product-media-modal__video,.product-media-modal__model{width:100%;height:80vh;border:none}.product-media-modal__nav{position:absolute;top:50%;transform:translateY(-50%);background:rgba(var(--color-background),.7);border:none;border-radius:50%;width:4rem;height:4rem;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:2;padding:0;margin:0}.product-media-modal__nav--prev{left:2rem}.product-media-modal__nav--next{right:2rem}.product-media-modal__nav .icon{width:2rem;height:2rem}.product-media-modal__nav .icon-arrow{transform:rotate(180deg)}.product-media-modal__nav--next .icon-arrow{transform:rotate(0)}
/*# sourceMappingURL=/cdn/shop/t/195/assets/component-product-media-modal.css.map */