.product-media-modal{background-color:var(--bg-color-white);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;align-items:center;height:100vh}.product-media-modal__content{max-height:100vh;width:100%;display:flex;height:100%;flex-direction:column-reverse;justify-content:center}.product-media-modal__content .media{background:none}.product-media-modal__content .deferred-media{width:100%;display:flex;align-items:center;justify-content:center}.product-media-modal__content .deferred-media media-controls{width:100%}.product-media-modal__content .deferred-media video{max-height:calc(100vh - 7.5rem);width:100%;-o-object-fit:contain;object-fit:contain}.product-media-modal__content .swiper-slide img{background-color:transparent}.product-media-modal__model{width:100%}.product-media-modal__toggle{background-color:var(--bg-color-white);border:var(--inputs-border-width) solid var(--border-color);border-radius:50%;color:var(--body-text-color);display:flex;align-items:center;justify-content:center;cursor:pointer;top:var(--spacing-normal);right:var(--spacing-normal);position:fixed;z-index:2;width:2.5rem;aspect-ratio:1;padding:0}.product-media-modal__toggle:hover{color:var(--body-text-hover-color)}.product-media-modal__toggle .icon{height:auto;margin:0;width:.8rem;stroke-width:1;stroke:currentColor}.product-media-modal__content__thumbnails-container{width:100%;max-width:100%;flex-direction:row;min-height:-moz-fit-content;min-height:fit-content;display:flex;flex-shrink:0;flex-wrap:nowrap;gap:var(--spacing-small);padding:var(--spacing-normal);padding-block:0;max-height:100vh;align-items:center;position:relative}.product-media-modal__content__thumbnails-container .thumbnails-swiper{flex:1;overflow:hidden}.product-media-modal__content__thumbnails-container .swiper-wrapper{display:flex;flex-direction:row}@media screen and (min-width: 769px){.product-media-modal__content__thumbnails-container{width:-moz-fit-content;width:fit-content;overflow:hidden;flex-direction:column;height:100%;scroll-snap-type:y mandatory;box-sizing:border-box;padding:var(--spacing-normal)}.product-media-modal__content__thumbnails-container .swiper-wrapper{display:flex;flex-direction:column;width:-moz-fit-content;width:fit-content}}.product-media-modal__content__thumbnails-container .swiper-button-prev,.product-media-modal__content__thumbnails-container .swiper-button-next{position:static;flex-shrink:0;width:2rem;height:2rem;display:flex;align-items:center;justify-content:center;border:var(--inputs-border-width) solid var(--border-color);background-color:var(--bg-color);color:var(--body-text-color);cursor:pointer;padding:0;border-radius:2px;transition:all .3s var(--transition-function)}.product-media-modal__content__thumbnails-container .swiper-button-prev:hover,.product-media-modal__content__thumbnails-container .swiper-button-next:hover{background-color:var(--bg-color-black);color:var(--bg-color-white)}.product-media-modal__content__thumbnails-container .swiper-button-prev.swiper-button-disabled,.product-media-modal__content__thumbnails-container .swiper-button-next.swiper-button-disabled{opacity:.5;cursor:not-allowed}.product-media-modal__content__thumbnails-container .swiper-button-prev svg,.product-media-modal__content__thumbnails-container .swiper-button-next svg{width:1rem;height:1rem;stroke:currentColor}.product-media-modal__content__thumbnail{position:relative;cursor:pointer;padding:0;border:1px solid transparent;flex-shrink:0;width:5rem;height:5rem;aspect-ratio:1 / 1;background:none;box-sizing:border-box;transition:border-color .3s var(--transition-function)}.product-media-modal__content__thumbnail.swiper-slide{scroll-snap-align:start;scroll-snap-stop:always}@media screen and (min-width: 769px){.product-media-modal__content__slider .swiper{width:auto;aspect-ratio:1 /1}.product-media-modal__content__thumbnail{width:7.5rem;height:7.5rem}.swiper-zoom-container picture img{width:100%;height:100%}}@media screen and (max-width: 768px){.product-media-modal__content__slider .swiper{width:100%}.product-media-modal__content__slider .swiper-wrapper{width:auto}.product-media-modal__content__slider .swiper-zoom-container picture,.product-media-modal__content__slider .swiper-zoom-container picture img{width:100%;height:auto}}.product-media-modal__content__thumbnail.active{border:1px solid var(--bg-color-black)}.product-media-modal__content__thumbnail.swiper-slide>img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;-o-object-position:center;object-position:center;aspect-ratio:1}.product-media-modal__content__thumbnail .placeholder-svg{display:block;width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.product-media-modal__content__thumbnail__icon{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);border-radius:50%;aspect-ratio:1;line-height:1;display:flex;align-items:center;justify-content:center;padding:var(--spacing-x-small);background-color:var(--bg-color-white)}.product-media-modal__content__thumbnail__icon svg{width:.75rem;height:auto}.product-media-modal__content__slider{width:100%;height:100%;display:flex;flex-direction:column;max-height:calc(100vh - 3.75rem - 2 * var(--spacing-normal));padding:var(--spacing-normal);padding-block-end:0;justify-content:center}.product-media-modal__content__slider img.swiper-slide{-o-object-fit:contain;object-fit:contain;background-color:var(--bg-color)}.product-media-modal__content__slider .slider-controls{display:flex;align-items:center;gap:var(--spacing-normal);color:var(--body-text-color)}.product-media-modal__content__slider .slider-controls__button{--nav-btn-size: var(--spacing-x-large);position:static;display:flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--nav-btn-size);height:var(--nav-btn-size);border:none;border-radius:var(--nav-btn-radius, 2px);background-color:var(--bg-color);color:var(--body-text-color);font-size:var(--font-size-small);font-weight:400;text-decoration:none;text-underline-offset:var(--spacing-xx-small);text-transform:uppercase;cursor:pointer;padding:0;margin:0;transition:background-color .3s var(--transition-function),color .3s var(--transition-function)}.product-media-modal__content__slider .slider-controls__button svg{width:20px;height:20px;stroke:currentColor;transition:transform .3s var(--transition-function)}.product-media-modal__content__slider .slider-controls__button.swiper-button-disabled{visibility:hidden}@media screen and (hover: hover) and (pointer: fine){.product-media-modal__content__slider .slider-controls__button:not(.swiper-button-disabled):hover{background-color:var(--bg-color-black);color:var(--bg-color-white)}}.product-media-modal__content__slider__footer{height:auto;display:flex;flex-wrap:wrap;align-items:center;-moz-column-gap:var(--spacing-x-large);column-gap:var(--spacing-x-large);justify-content:center;row-gap:var(--spacing-normal);padding:var(--spacing-normal) 0}.product-media-modal__content__slider__footer .slider-controls__button.next svg{transform:rotate(-90deg)}.product-media-modal__content__slider__footer .slider-controls__button.prev svg{transform:rotate(90deg)}.zoom-controls{display:flex;gap:var(--spacing-small);align-items:center}.zoom-controls[hidden]{visibility:hidden}.zoom-controls__button{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:var(--inputs-border-width) solid var(--border-color);border-radius:50%;background-color:var(--bg-color-white);color:var(--body-text-color);aspect-ratio:1;width:2.5rem;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}.zoom-controls__button:hover{color:var(--body-text-hover-color);border-color:var(--body-text-hover-color)}.zoom-controls__button:disabled{cursor:not-allowed;opacity:.5}.zoom-controls__button svg{width:1rem;height:auto}product-modal *:focus-visible{box-shadow:0 0 4px 1px var(--border-color);outline:none}@media screen and (min-width: 769px){.product-media-modal__content{flex-direction:row}.product-media-modal__toggle{right:var(--spacing-large);top:var(--spacing-large)}.product-media-modal__content__thumbnail{width:auto}.product-media-modal__content__slider{width:calc(100vw - 9.5rem);height:100vh;padding-block-end:0;padding-inline-start:0;max-height:unset}.product-media-modal__content__slider__footer{height:7.5rem;flex-wrap:nowrap}}.product-media-modal__content.product-media-modal__content--block{display:block;overflow:auto;padding:var(--spacing-xxx-large) 8rem}.product-media-modal__content--block .product-media-modal__image{background-color:var(--bg-color);flex-shrink:0;width:100%;height:auto;overflow:hidden;position:relative;display:block;border-radius:var(--selected-radius);border:1px solid var(--border-color);margin-top:var(--spacing-normal)}.product-media-modal__content--block .product-media-modal__image--placeholder{min-height:calc(100vh - 2 * var(--spacing-xxx-large));display:flex;align-items:center;justify-content:center;padding:var(--spacing-large);overflow:visible}.product-media-modal__content--block .product-media-modal__image--placeholder .placeholder-svg{width:auto;height:auto;max-width:min(100%,80rem);max-height:calc(100vh - 2 * var(--spacing-xxx-large) - 2 * var(--spacing-large));display:block}@media (max-width: 768px){.product-media-modal__content.product-media-modal__content--block{padding:var(--spacing-large) var(--spacing-x-large)}.product-media-modal__content--block .product-media-modal__image--placeholder{min-height:calc(100vh - 2 * var(--spacing-large));padding:var(--spacing-normal)}.product-media-modal__content--block .product-media-modal__image--placeholder .placeholder-svg{max-width:100%;max-height:calc(100vh - 2 * var(--spacing-large) - 2 * var(--spacing-normal))}}
