.product-media-modal{display:none;inset-block-end:0;inset-block-start:0;inset-inline-end:0;inset-inline-start:0;opacity:0;position:fixed;visibility:hidden;z-index:101}.product-media-modal .modal-close-button{inset-block-start:.5rem;inset-inline-end:.5rem;position:absolute;z-index:1;--color-button:var(--color-background);--alpha-button-background:0.5}.product-media-modal .modal-content{height:100dvh}.product-media-modal .modal-content .slider,.product-media-modal .modal-content .slider .slider-container,.product-media-modal .modal-content .slider .slider-container .slider-wrapper,.product-media-modal .modal-content .slider .slider-container .slider-wrapper .modal-media,.product-media-modal .modal-content .slider .slider-container .slider-wrapper .modal-media>*{height:100%}.product-media-modal .modal-content .slider .slider-container .slider-wrapper .modal-media img,.product-media-modal .modal-content .slider .slider-container .slider-wrapper .modal-media svg{object-fit:contain}.product-media-modal .modal-content .slider .slider-controller{height:100%;inset-block-start:0;inset-inline-start:0;padding:2rem;pointer-events:none;position:absolute;width:100%;z-index:1}.product-media-modal .modal-content .slider .slider-controller .slider-nav-buttons{justify-content:space-between;width:100%}.product-media-modal .modal-content .slider .slider-controller .slider-nav-buttons .nav-button{--color-button:var(--color-background);--alpha-button-background:0.5}.product-media-modal .modal-content .slider .slider-controller .slider-counter{background:rgba(var(--color-background),.8);border-radius:9999px;font-size:.875rem;inset-block-end:2rem;padding-block:.5rem;padding-inline:2rem;position:absolute}@media screen and (max-width:749px){.product-media-modal .modal-content .slider .slider-controller{display:flex!important}}.product-media-modal .modal-tip{align-items:center;background:rgba(var(--color-background),.8);border-radius:var(--small-radius);display:flex;gap:.25rem;inset-block-end:5rem;inset-inline-start:50%;opacity:0;padding-block:.5rem;padding-inline:1rem;position:fixed;transform:translateX(calc(-50%*var(--translate-x-direction)))}.product-media-modal .modal-tip .icon{width:1.25rem}.product-media-modal .modal-tip.active{animation:fadeIn .3s cubic-bezier(.4,0,1,1) .5s forwards}.product-media-modal[open]{display:block;opacity:1;visibility:visible}