.custom-product-media-gallery{--custom-thumb-size: 88px;--custom-thumb-gap: 10px;--custom-main-height: clamp(480px, 54vw, 660px);display:grid;grid-template-columns:96px minmax(0,1fr);gap:18px;align-items:start;max-width:100%}.custom-thumbnail-rail{display:grid;grid-template-rows:38px auto 38px;gap:10px;align-content:start;min-height:0}.custom-thumbnails{display:flex;flex-direction:column;gap:var(--custom-thumb-gap);width:var(--custom-thumb-size);height:calc((var(--custom-thumb-size) * 4) + (var(--custom-thumb-gap) * 3) + 4px);overflow:auto;overscroll-behavior:contain;padding:2px;scroll-behavior:smooth;scrollbar-width:none}.custom-thumbnails::-webkit-scrollbar{display:none}.custom-thumb,.custom-thumb-arrow,.custom-main-arrow,.custom-main-media-button,.custom-lightbox-close,.custom-lightbox-arrow{-webkit-appearance:none;appearance:none;border:0;background:transparent;cursor:pointer;padding:0}.custom-thumb{flex:0 0 var(--custom-thumb-size);width:var(--custom-thumb-size);height:var(--custom-thumb-size);min-height:var(--custom-thumb-size);border:1px solid rgba(var(--color-foreground),.12);border-radius:8px;overflow:hidden;opacity:.68;background:rgb(var(--color-background));transition:border-color .18s ease,box-shadow .18s ease,opacity .18s ease,transform .18s ease}.custom-thumb.is-active{border-color:rgb(var(--color-foreground));box-shadow:inset 0 0 0 1px rgb(var(--color-foreground));opacity:1}.custom-thumb:hover{opacity:1;transform:translateY(-1px)}.custom-thumb:focus-visible,.custom-thumb-arrow:focus-visible,.custom-main-arrow:focus-visible,.custom-main-media-button:focus-visible,.custom-lightbox-close:focus-visible,.custom-lightbox-arrow:focus-visible{outline:2px solid rgb(var(--color-foreground));outline-offset:2px}.custom-thumb img{display:block;width:100%;height:100%;object-fit:cover}.custom-thumb-arrow{display:grid;place-items:center;width:var(--custom-thumb-size);min-height:38px;border:1px solid rgba(var(--color-foreground),.18);border-radius:8px;color:rgb(var(--color-foreground));background:rgb(var(--color-background));box-shadow:0 1px 5px rgba(var(--color-foreground),.08);transition:background .18s ease,border-color .18s ease}.custom-thumb-arrow:hover{border-color:rgba(var(--color-foreground),.4);background:rgba(var(--color-foreground),.04)}.custom-thumb-arrow--prev .svg-wrapper{transform:rotate(180deg)}.custom-thumb-arrow--next .svg-wrapper{transform:rotate(0)}.custom-thumb-arrow[disabled],.custom-main-arrow[disabled]{cursor:default;opacity:.35}.custom-main-media{position:relative;overflow:hidden;height:var(--custom-main-height);border-radius:8px;background:rgba(var(--color-foreground),.03);box-shadow:1px 1px 2px #2428351a}.custom-media-item{position:absolute;top:0;right:0;bottom:0;left:0;opacity:0;visibility:hidden;transform:scale(.985);transition:opacity .32s cubic-bezier(.25,.1,.25,1),transform .32s cubic-bezier(.25,.1,.25,1),visibility .32s ease}.custom-media-item.is-active{opacity:1;visibility:visible;transform:scale(1)}.custom-main-media-button{display:grid;place-items:center;width:100%;height:100%;position:relative}.custom-media-item img{display:block;width:100%;height:100%;object-fit:contain}.custom-main-arrow{position:absolute;top:50%;z-index:2;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;color:rgb(var(--color-foreground));background:rgba(var(--color-background),.86);box-shadow:0 2px 12px rgba(var(--color-foreground),.16);transform:translateY(-50%);transition:background .18s ease,box-shadow .18s ease}.custom-main-arrow:hover{background:rgb(var(--color-background));box-shadow:0 4px 18px rgba(var(--color-foreground),.2)}.custom-main-arrow--prev{left:14px}.custom-main-arrow--prev .svg-wrapper{transform:rotate(90deg)}.custom-main-arrow--next{right:14px}.custom-main-arrow--next .svg-wrapper{transform:rotate(-90deg)}.custom-zoom-image-icon{position:absolute;right:16px;bottom:16px;z-index:1;display:grid;place-items:center;width:42px;height:42px;border-radius:50%;color:rgb(var(--color-foreground));background:rgb(var(--color-background));box-shadow:0 1px 7px rgba(var(--color-foreground),.18);opacity:0;transform:translateY(4px);transition:opacity .18s ease,transform .18s ease}.custom-main-media-button:hover .custom-zoom-image-icon,.custom-main-media-button:focus-visible .custom-zoom-image-icon{opacity:1;transform:translateY(0)}.custom-media-lightbox[hidden]{display:none}.custom-media-lightbox{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1000;width:100vw;height:100vh;height:100dvh;overflow:hidden;box-sizing:border-box}.custom-media-lightbox__backdrop{position:absolute;top:0;right:0;bottom:0;left:0;background:#000000c7}.custom-media-lightbox__dialog{position:relative;display:grid;place-items:center;width:100%;height:100vh;height:100dvh;max-height:100dvh;padding:54px 76px 46px;overflow:hidden;box-sizing:border-box}.custom-lightbox-images{position:relative;width:100%;height:100%;min-height:0;overflow:hidden;box-sizing:border-box}.custom-lightbox-item{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;opacity:0;visibility:hidden;transform:scale(.985);transition:opacity .28s ease,transform .28s ease,visibility .28s ease;overflow:hidden;pointer-events:none;min-height:0;background:#ffffffb3}.custom-lightbox-item.is-active{opacity:1;visibility:visible;transform:scale(1);pointer-events:auto}.custom-lightbox-item img{display:block;max-width:min(100%,1100px);max-height:calc(100dvh - 120px);width:auto;height:auto;object-fit:contain;cursor:zoom-in;transform-origin:center center;transition:transform .24s ease;touch-action:none;-webkit-user-select:none;user-select:none}.custom-lightbox-item.is-zoomed img{cursor:zoom-out;max-width:min(100%,1100px);max-height:calc(100dvh - 120px);transform:scale(1.65)}.custom-lightbox-close{position:fixed;top:max(16px,env(safe-area-inset-top));right:max(16px,env(safe-area-inset-right));z-index:10;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;color:#111;background:#fff;box-shadow:0 4px 18px #00000038;transition:background .18s ease,transform .18s ease}.custom-lightbox-close:hover{background:#f2f2f2;transform:scale(1.04)}.custom-lightbox-close svg{display:block;width:18px;height:18px}.custom-lightbox-arrow{position:absolute;top:50%;z-index:5;display:grid;place-items:center;width:50px;height:50px;border-radius:50%;color:rgb(var(--color-background));background:#ffffff24;transform:translateY(-50%);transition:background .18s ease}.custom-lightbox-arrow:hover{background:#ffffff3d}.custom-lightbox-arrow--prev{left:22px}.custom-lightbox-arrow--prev .svg-wrapper{transform:rotate(90deg)}.custom-lightbox-arrow--next{right:22px}.custom-lightbox-arrow--next .svg-wrapper{transform:rotate(-90deg)}body.custom-gallery-modal-open{overflow:hidden}.custom-product-media-gallery--single{grid-template-columns:1fr}.custom-product-media-gallery--single .custom-thumbnail-rail{display:none}@media screen and (max-width:749px){.custom-product-media-gallery{--custom-thumb-size: 76px;--custom-main-height: clamp(340px, 86vw, 520px);grid-template-columns:1fr;gap:12px}.custom-main-media{order:1}.custom-thumbnail-rail{order:2;grid-template-columns:38px minmax(0,1fr) 38px;grid-template-rows:auto;align-items:center}.custom-thumbnails{display:flex;flex-direction:row;width:auto;height:auto;max-height:none;max-width:calc((var(--custom-thumb-size) * 4) + (var(--custom-thumb-gap) * 3) + 4px);overflow-x:auto;overflow-y:hidden}.custom-thumb{flex:0 0 var(--custom-thumb-size);width:var(--custom-thumb-size);height:var(--custom-thumb-size);min-height:var(--custom-thumb-size)}.custom-thumb-arrow{width:38px;height:var(--custom-thumb-size);min-height:var(--custom-thumb-size)}.custom-thumb-arrow--prev .svg-wrapper{transform:rotate(90deg)}.custom-thumb-arrow--next .svg-wrapper{transform:rotate(-90deg)}.custom-main-arrow{width:40px;height:40px}.custom-media-lightbox__dialog{padding:58px 18px 42px;height:100dvh;max-height:100dvh}.custom-lightbox-item img,.custom-lightbox-item.is-zoomed img{max-height:calc(100dvh - 112px)}.custom-lightbox-arrow{width:42px;height:42px}.custom-lightbox-arrow--prev{left:10px}.custom-lightbox-arrow--next{right:10px}.custom-zoom-image-icon{opacity:1;transform:none;width:38px;height:38px;right:12px;bottom:12px}}
/*# sourceMappingURL=/cdn/shop/t/12/assets/custom-product-media.css.map */