:root{--thumbnail-width: 60px;--thumbnail-top-gap: 20px;--thumbnail-bottom-gap: 200px;--thumbnail-inbetween-gap: 2px;--thumbnail-border: 0px;--indication-line-height: 1px;--indication-line-color: var(--color-gray-600);--thumbnail-auto-scroll-speed: .3s;--indicator-move-speed: .3s;--image-visibility-threshold: .5}.gallery-popup{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:#000000e6;z-index:1000;opacity:0}.gallery-popup.active{display:flex;align-items:center;justify-content:center}.gallery-container{position:relative;width:100%;height:100vh;background:#fff;overflow:hidden}.gallery-close-btn{position:absolute;top:12px;right:20px;width:24px;height:24px;padding:0;opacity:unset!important;background:var(--surface-blur);border:0 none;justify-content:center;z-index:30}.gallery-close-btn:hover{background:var(--surface-white)}.thumbnails-column{position:absolute;top:var(--thumbnail-top-gap);left:0;width:calc(var(--thumbnail-width) + 20px);height:calc(100% - var(--thumbnail-top-gap) - var(--thumbnail-bottom-gap));padding:0 12px;overflow-y:auto;overflow-x:hidden;z-index:10;pointer-events:auto;scrollbar-width:none;-ms-overflow-style:none}.thumbnails-column::-webkit-scrollbar{display:none}.thumbnail-top-gap{position:absolute;top:0;left:0;width:calc(var(--thumbnail-width) + 20px);height:var(--thumbnail-top-gap);background:transparent;z-index:9;pointer-events:none}.thumbnail-bottom-gap{position:absolute;bottom:0;left:0;width:calc(var(--thumbnail-width) + 20px);height:var(--thumbnail-bottom-gap);z-index:9;pointer-events:none;padding:15px 10px;box-sizing:border-box;width:500px}.model-data-display{width:100%;display:flex;flex-direction:column;justify-content:flex-end;color:#333;opacity:0}.model-data-display.active{opacity:1}.model-data-display .model-name{font-weight:700;font-size:12px;margin-bottom:8px}.model-data-display .model-detail{margin-bottom:3px}.thumbnail{width:var(--thumbnail-width);height:calc(var(--thumbnail-width) * 1.25);margin-bottom:var(--thumbnail-inbetween-gap);cursor:pointer;border-radius:4px;overflow:hidden;position:relative;background:#ffffffe6;border:var(--thumbnail-border) solid rgba(255,255,255,.3)}.thumbnail:first-child{margin-top:0}.thumbnail:last-child{margin-bottom:0}.thumbnail:hover{opacity:.8}.thumbnail img{width:100%;height:100%;object-fit:cover}.line-indicator{position:absolute;left:8px;width:calc(var(--thumbnail-width) + 8px);height:var(--indication-line-height);background:var(--indication-line-color);top:0;pointer-events:none;z-index:15;display:block!important}.gallery-scroll-container{width:100%;height:100%;overflow-y:auto;padding:0;scroll-behavior:smooth}.gallery-image{margin-bottom:0;overflow:hidden;display:block}.gallery-image img{width:100%;height:auto;display:block}.gallery-scroll-container::-webkit-scrollbar{width:8px}.gallery-scroll-container::-webkit-scrollbar-track{background:#f1f1f1}.gallery-scroll-container::-webkit-scrollbar-thumb{background:#888;border-radius:4px}.gallery-scroll-container::-webkit-scrollbar-thumb:hover{background:#555}.image-counter{position:absolute;bottom:20px;left:50%;transform:translate(-50%);background:#000000b3;color:#fff;padding:8px 16px;border-radius:20px;font-size:14px;z-index:10}.swatch-column{position:absolute;top:50%;right:12px;transform:translateY(-50%);z-index:10;padding:0 12px}.gallery-popup-swatches{display:flex;flex-direction:column;gap:6px;list-style:none;margin:0;padding:12px 18px;background:var(--surface-blur);border-radius:2px}.gallery-popup-swatch-item{margin:0;padding:0}.gallery-popup-swatch{display:inline-block;width:20px;height:20px;margin:1px;cursor:pointer;transition:all .2s ease;position:relative;text-decoration:none;overflow:hidden}.gallery-popup-swatch-wrapper{border-style:solid;border-width:1px;border-color:transparent;cursor:pointer;display:flex}.gallery-popup-swatch-wrapper:hover,.gallery-popup-swatch-wrapper.active{border-color:var(--color-gray-600)}.gallery-popup-swatch-wrapper.active .gallery-popup-swatch{cursor:pointer}.gallery-popup-swatch.unavailable:hover{transform:none;border-color:#e0e0e0}.gallery-popup-swatch[title]:hover:before{content:attr(title);position:absolute;bottom:calc(100% + 10px);left:50%;transform:translate(-50%);padding:.5rem .75rem;background:#000;color:#fff;font-size:.75rem;white-space:nowrap;border-radius:4px;pointer-events:none;z-index:100;opacity:0;animation:gallerySwatchTooltipFadeIn .2s ease forwards}.gallery-popup-swatch[title]:hover:after{content:"";position:absolute;bottom:calc(100% + 4px);left:50%;transform:translate(-50%);border:6px solid transparent;border-top-color:#000;pointer-events:none;z-index:100;opacity:0;animation:gallerySwatchTooltipFadeIn .2s ease forwards}@keyframes gallerySwatchTooltipFadeIn{to{opacity:1}}.gallery-popup-swatch[style*=background-image]{background-size:cover;background-position:center;background-repeat:no-repeat}@media(prefers-contrast:high){.gallery-popup-swatch{border-width:3px}.gallery-popup-swatch-wrapper.active .gallery-popup-swatch{border-width:4px}}@media(prefers-reduced-motion:reduce){.gallery-popup-swatch,.gallery-popup-swatch[title]:hover:before,.gallery-popup-swatch[title]:hover:after{transition:none;animation:none}a.gallery-popup-swatch:hover{transform:none}}a.gallery-popup-swatch:focus{outline:2px solid #0066cc;outline-offset:2px}a.gallery-popup-swatch:focus:not(:focus-visible){outline:none}a.gallery-popup-swatch:focus-visible{outline:2px solid #0066cc;outline-offset:2px}
/*# sourceMappingURL=/cdn/shop/t/421/assets/pdp-gallery-popup-desktop.css.map */