.variant-image-picker{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:12px;margin-top:12px}.variant-image-option{position:relative}.variant-image-input{position:absolute;opacity:0;width:0;height:0}.variant-image-label{display:flex;flex-direction:column;align-items:center;gap:8px;padding:8px;border:2px solid #e5e5e5;border-radius:8px;cursor:pointer;transition:all .2s ease;background:#fff}.variant-image-label img{width:80px;height:80px;object-fit:cover;border-radius:4px}.variant-image-text{font-size:13px;color:#333;text-align:center;line-height:1.3}.variant-image-label:hover{border-color:#999;transform:translateY(-2px);box-shadow:0 4px 8px #0000001a}.variant-image-input:checked+.variant-image-label{border-color:#3eab6e;border-width:3px;background:#f9f9f9}.variant-image-input:checked+.variant-image-label .variant-image-text{font-weight:600}.variant-image-input:focus+.variant-image-label{outline:2px solid #4a90e2;outline-offset:2px}@media screen and (max-width: 749px){.variant-image-picker{grid-template-columns:repeat(3,1fr);gap:8px}.variant-image-label{padding:8px}.variant-image-label img{width:60px;height:50px}.variant-image-text{font-size:12px}}.variant-lightbox-toggle{display:none}.variant-lightbox-trigger{position:absolute;top:0;left:0;width:100%;height:100%;cursor:zoom-in;z-index:1}.variant-lightbox-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#000000e6;display:flex;align-items:center;justify-content:center;z-index:9999;opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease}.variant-lightbox-toggle:checked~.variant-lightbox-overlay{opacity:1;visibility:visible}.variant-lightbox-close{position:absolute;top:20px;right:30px;font-size:40px;color:#fff;cursor:pointer;z-index:10000;line-height:1;transition:transform .2s ease}.variant-lightbox-content{max-width:90%;max-height:90%;text-align:center;animation:zoomIn .3s ease}.variant-lightbox-content img{max-width:100%;max-height:80vh;width:auto;height:auto;border-radius:8px;box-shadow:0 10px 40px #00000080}.variant-lightbox-caption{color:#fff;font-size:16px;margin-top:15px;font-weight:500}@keyframes zoomIn{0%{transform:scale(.8);opacity:0}to{transform:scale(1);opacity:1}}@media screen and (max-width: 749px){.variant-lightbox-close{top:10px;right:15px;font-size:30px}.variant-lightbox-content img{max-height:70vh}.variant-lightbox-caption{font-size:14px}}.variant-image-label{position:relative}.variant-lightbox{position:fixed;top:0;left:0;width:100%;height:100%;z-index:99999;display:none;opacity:0;transition:opacity .3s ease}.variant-lightbox.active{display:flex;align-items:center;justify-content:center;opacity:1}.variant-lightbox-backdrop{position:absolute;top:0;left:0;width:100%;height:100%;background:#000000eb;cursor:zoom-out}.variant-lightbox-content{position:relative;z-index:100000;max-width:90%;max-height:90%;text-align:center;animation:zoomIn .3s ease}.variant-lightbox-close{position:absolute;top:-40px;right:0;background:none;border:none;color:#fff;font-size:40px;line-height:1;cursor:pointer;padding:0;width:40px;height:40px;transition:transform .2s ease;z-index:100001}.variant-lightbox-close:hover{transform:scale(1.2)}.variant-lightbox-image{max-width:100%;max-height:80vh;width:auto;height:auto;border-radius:8px;box-shadow:0 20px 60px #000c;display:block;margin:0 auto}.variant-lightbox-caption{color:#fff;font-size:18px;margin-top:20px;font-weight:500;text-shadow:0 2px 4px rgba(0,0,0,.5)}@keyframes zoomIn{0%{transform:scale(.85);opacity:0}to{transform:scale(1);opacity:1}}@media screen and (max-width: 749px){.variant-lightbox-close{top:10px;right:10px;font-size:32px;background:#00000080;border-radius:50%;width:36px;height:36px}.variant-lightbox-image{max-height:70vh}.variant-lightbox-caption{font-size:16px;margin-top:15px}}.variant-image-label:after{content:"Tap to\azoom";white-space:pre;position:absolute;top:3px;left:3px;background:#ff6600f2;color:#fff;padding:2px;border-radius:6px;font-size:10px;font-weight:400;line-height:1.3;text-align:center;z-index:10;pointer-events:none}@media screen and (min-width: 750px){.variant-image-label:after{content:"Click to\aenlarge";opacity:0;transition:opacity .3s ease}.variant-image-label:hover:after{opacity:1}}@media screen and (max-width: 749px){.variant-image-label:after{content:"Tap to\azoom";opacity:1}}.variant-image-input:checked+.variant-image-label:after{opacity:1}
/*# sourceMappingURL=/cdn/shop/t/13/assets/variant-image-picker.css.map */