.product-image-viewer{margin:0 auto;max-width:1200px;width:100%}.product-image-viewer .image-viewer-container img{height:auto;object-fit:contain;width:100%}.product-image-viewer .main-image-container{position:relative}.product-image-viewer .image-wrapper{height:100%;position:relative;width:100%}.product-image-viewer .main-image{animation:productImageViewerFadeIn .3s ease-in-out forwards;opacity:0;transition:opacity .3s ease-in-out}.product-image-viewer .main-image.loading{animation:productImageViewerFadeIn .3s ease-in-out forwards;opacity:.7}@keyframes productImageViewerFadeIn{0%{opacity:0}to{opacity:1}}.product-image-viewer .image-viewer-container{background:#fff;border-radius:12px;box-shadow:0 4px 20px #0000001a;margin:0 auto;max-width:1200px;padding:20px}.no-images-message{align-items:center;background:#f8f9fa;border:2px dashed #ddd;border-radius:8px;color:#666;display:flex;font-size:18px;height:300px;justify-content:center}.thumbnail-container{margin-top:20px;overflow-x:auto;overflow-y:hidden;padding:10px 0;scrollbar-color:#0003 #0000;scrollbar-width:thin}.thumbnail-container::-webkit-scrollbar{height:4px}.thumbnail-container::-webkit-scrollbar-track{background:#0000}.thumbnail-container::-webkit-scrollbar-thumb{background:#00000026;border-radius:10px;transition:background .2s ease}.thumbnail-container::-webkit-scrollbar-thumb:hover{background:#0000004d}.thumbnail-strip{display:flex;gap:12px;justify-content:center;min-width:max-content;padding:0 10px}.thumbnail{border:2px solid #0000;border-radius:6px;cursor:pointer;flex-shrink:0;height:80px;overflow:hidden;position:relative;transition:all .3s ease;width:80px}.thumbnail img{height:100%;object-fit:cover;transition:transform .3s ease;width:100%}.thumbnail:hover{box-shadow:0 4px 12px #00000026;transform:translateY(-2px)}.thumbnail.active{border-color:#007bff;box-shadow:0 0 0 2px #007bff33}.thumbnail.active img{transform:scale(1.05)}.image-counter{color:#666;font-size:14px;font-weight:500;margin-top:15px;text-align:center}.fullscreen-overlay{align-items:center;background:#000000f2;display:none;height:100%;justify-content:center;left:0;position:fixed;top:0;width:100%;z-index:9999}.fullscreen-overlay.active{display:flex}.fullscreen-content{align-items:center;display:flex;flex-direction:column;height:100%;justify-content:center;position:relative;width:100%}.fullscreen-image{max-height:80%;max-width:90%;object-fit:contain}.fullscreen-nav{align-items:center;background:#ffffff1a;border:2px solid #ffffff4d;border-radius:50%;box-shadow:0 2px 10px #0000004d;color:#fff;cursor:pointer;display:flex;height:60px;justify-content:center;position:absolute;top:50%;transform:translateY(-50%);transition:all .3s ease;width:60px;z-index:10001}.fullscreen-nav:hover{background:#fff3;border-color:#ffffff80;box-shadow:0 4px 15px #0006}.fullscreen-nav.nav-arrow-left{left:30px}.fullscreen-nav.nav-arrow-right{right:30px}.close-fullscreen{align-items:center;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff1a;border:2px solid #ffffff4d;border-radius:50%;color:#fff;cursor:pointer;display:flex;height:50px;justify-content:center;position:absolute;right:30px;top:30px;transition:all .2s ease;width:50px;z-index:10002}.close-fullscreen:hover{background:#fff3;border-color:#ffffff80;transform:scale(1.1)}.close-fullscreen:focus{outline:2px solid #007bff;outline-offset:2px}.fullscreen-thumbnails{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#00000080;border-radius:8px;bottom:30px;display:flex;gap:10px;justify-content:center;left:50%;max-width:80%;overflow-x:auto;padding:10px;position:absolute;transform:translate(-50%);z-index:10001}.fullscreen-thumbnails .thumbnail{border:2px solid #0000;border-radius:4px;cursor:pointer;flex-shrink:0;height:60px;overflow:hidden;transition:all .3s ease;width:60px}.fullscreen-thumbnails .thumbnail:hover{border-color:#ffffff80}.fullscreen-thumbnails .thumbnail.active{border-color:#007bff;box-shadow:0 0 0 2px #007bff4d}.fullscreen-thumbnails .thumbnail img{height:100%;object-fit:cover;width:100%}@media (max-width:768px){.product-image-viewer .image-viewer-container{margin:10px;padding:15px}.thumbnail{height:70px;width:70px}.thumbnail-strip{gap:10px}.close-fullscreen{height:45px;right:20px;top:20px;width:45px}.fullscreen-nav{height:50px;width:50px}.fullscreen-nav.nav-arrow-left{left:20px}.fullscreen-nav.nav-arrow-right{right:20px}.fullscreen-thumbnails{bottom:20px;max-width:90%}.fullscreen-thumbnails .thumbnail{height:50px;width:50px}}@media (max-width:480px){.product-image-viewer .image-viewer-container{margin:5px;padding:10px}.thumbnail{height:60px;width:60px}.thumbnail-strip{gap:8px}.close-fullscreen{height:40px;right:15px;top:15px;width:40px}.fullscreen-nav{height:45px;width:45px}.fullscreen-nav.nav-arrow-left{left:15px}.fullscreen-nav.nav-arrow-right{right:15px}.fullscreen-thumbnails{bottom:15px;gap:8px;max-width:95%}.fullscreen-thumbnails .thumbnail{height:45px;width:45px}}.compact-image-viewer{border:1px solid #e0e0e0;border-radius:8px;cursor:pointer;display:block;overflow:hidden;position:relative;width:100%}.compact-image-viewer-small{max-height:200px;max-width:200px}.compact-image-viewer-medium{max-height:300px;max-width:300px}.compact-image-viewer-large{max-height:400px;max-width:400px}.image-container{align-items:center;display:flex;height:100%;justify-content:center;position:relative;width:100%}.image{height:auto;max-height:100%;max-width:100%;object-fit:cover;width:auto}.image.loading{opacity:0}.compact-image-viewer .loading-spinner{align-items:center;display:flex;justify-content:center;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%)}.compact-image-viewer .spinner{animation:compact-spin 1s linear infinite;border:2px solid #f3f3f3;border-radius:50%;border-top-color:#3498db;height:24px;width:24px}@keyframes compact-spin{0%{transform:rotate(0)}to{transform:rotate(1turn)}}.compact-image-viewer .error-state{align-items:center;color:#999;display:flex;justify-content:center;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%)}.compact-image-viewer .error-icon{color:#ccc;height:32px;width:32px}.compact-image-viewer .image-counter{background:#000000b3;border-radius:12px;bottom:8px;color:#fff;font-size:12px;font-weight:500;opacity:0;padding:4px 8px;position:absolute;right:8px}.compact-image-viewer.touch-device .image-counter{opacity:1}.compact-image-viewer .hover-zones{height:100%;left:0;pointer-events:none;position:absolute;top:0;width:100%;z-index:5}.compact-image-viewer .hover-zone{border-bottom:4px solid #0000;height:100%;opacity:0;position:absolute;top:0}.compact-image-viewer .hover-zone.active{border-bottom-color:#3498db99;opacity:1}.compact-image-viewer .fullscreen-overlay{align-items:center;background:#000000f2;display:none;height:100%;justify-content:center;left:0;position:fixed;top:0;width:100%;z-index:1000}.fullscreen-content .nav-arrow{align-items:center;background:#ffffff1a;border:none;border-radius:50%;box-shadow:0 2px 10px #0000004d;color:#fff;cursor:pointer;display:flex;height:48px;justify-content:center;position:absolute;top:50%;transform:translateY(-50%);transition:all .3s ease;width:48px;z-index:10}.fullscreen-portal .fullscreen-content .nav-arrow:hover{background:#fff3;box-shadow:0 4px 15px #0006}.fullscreen-portal .nav-arrow-left{left:20px}.fullscreen-portal .nav-arrow-right{right:20px}.fullscreen-portal .close-button{align-items:center;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff1a;border:2px solid #ffffff4d;border-radius:50%;color:#fff;cursor:pointer;display:flex;height:50px;justify-content:center;position:absolute;right:30px;top:30px;transition:all .2s ease;width:50px;z-index:10}.fullscreen-portal .close-button:hover{background:#fff3;border-color:#ffffff80;transform:scale(1.1)}.fullscreen-portal .close-button:focus{outline:2px solid #007bff;outline-offset:2px}.fullscreen-portal .fullscreen-thumbnails{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#00000080;border-radius:8px;bottom:20px;display:flex;gap:10px;left:50%;padding:10px;position:absolute;transform:translate(-50%)}.compact-image-viewer .thumbnail{border:2px solid #0000;border-radius:4px;cursor:pointer;height:60px;overflow:hidden;transition:border-color .2s ease;width:60px}.compact-image-viewer .thumbnail:hover{border-color:#ffffff80}.compact-image-viewer .thumbnail.active{border-color:#3498db}.compact-image-viewer .thumbnail img{height:100%;object-fit:cover;width:100%}.compact-image-viewer .sr-only{height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;clip:rect(0,0,0,0);border:0;white-space:nowrap}.compact-image-viewer .no-images{align-items:center;background:#f8f9fa;border:2px dashed #ddd;color:#999;display:flex;font-size:14px;height:100%;justify-content:center}@media (max-width:768px){.compact-image-viewer-small{max-height:150px;max-width:150px}.compact-image-viewer-medium{max-height:250px;max-width:250px}.compact-image-viewer-large{max-height:300px;max-width:300px}.compact-image-viewer .image-counter{bottom:4px;font-size:11px;padding:3px 6px;right:4px}.compact-image-viewer .close-button{height:45px;right:20px;top:20px;width:45px}}@media (max-width:480px){.compact-image-viewer-small{max-height:120px;max-width:120px}.compact-image-viewer-medium{max-height:200px;max-width:200px}.compact-image-viewer-large{max-height:250px;max-width:250px}}@media (hover:none) and (pointer:coarse){.compact-image-viewer{cursor:default}.compact-image-viewer .image-counter{opacity:1}}@media (prefers-contrast:high){.compact-image-viewer{border:2px solid #000}.compact-image-viewer .image-counter,.compact-image-viewer .nav-arrow{background:#000;border:1px solid #fff}}@media (prefers-reduced-motion:reduce){.compact-image-viewer .spinner{animation:none}}.image-viewer{border-radius:8px;display:block;overflow:hidden;position:relative;transition:all .3s ease;width:100%}.fullscreen-portal .fullscreen-overlay{align-items:center;background:#000000f2;display:none;height:100%;justify-content:center;left:0;position:fixed;top:0;width:100%;z-index:1000}.fullscreen-portal .fullscreen-overlay.active{display:flex}.fullscreen-portal .fullscreen-content{align-items:center;display:flex;flex-direction:column;height:100%;justify-content:center;position:relative;width:100%}.fullscreen-portal .fullscreen-image{max-height:80%;max-width:90%;object-fit:contain}.image-viewer .image-container{align-items:center;display:flex;height:100%;justify-content:center;position:relative;width:100%}.image-viewer .image{height:auto;max-height:100%;max-width:100%;object-fit:contain;width:auto}.image-viewer.fullscreen .image{cursor:default;max-height:90vh;max-width:90vw}.image-viewer:not(.fullscreen) .image{cursor:inherit}.image-viewer .image-loading{align-items:center;display:flex;justify-content:center;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%)}.image-viewer .loading-spinner{animation:image-viewer-spin 1s linear infinite;border:3px solid #f3f3f3;border-radius:50%;border-top-color:#3498db;height:32px;width:32px}@keyframes image-viewer-spin{0%{transform:rotate(0)}to{transform:rotate(1turn)}}.image-viewer .image-error{align-items:center;color:#666;display:flex;flex-direction:column;justify-content:center;left:50%;padding:20px;position:absolute;text-align:center;top:50%;transform:translate(-50%,-50%)}.image-viewer .image-error-icon{color:#ccc;height:64px;margin-bottom:12px;width:64px}.image-viewer .error-text{color:#999;font-size:14px}.fullscreen-portal .fullscreen-content .close-button{align-items:center;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff1a;border:2px solid #ffffff4d;border-radius:50%;color:#fff;cursor:pointer;display:flex;height:50px;justify-content:center;position:absolute;right:30px;top:30px;transition:all .2s ease;width:50px;z-index:10}.image-viewer .close-button:hover{background:#fff3;border-color:#ffffff80;transform:scale(1.1)}.image-viewer .close-button:focus{outline:2px solid #007bff;outline-offset:2px}.image-viewer .close-icon{height:24px;width:24px}@media (max-width:768px){.image-viewer .close-button{height:45px;right:20px;top:20px;width:45px}.image-viewer .close-icon{height:20px;width:20px}}@media (prefers-contrast:high){.image-viewer{border:2px solid #000}.image-viewer .image-error-icon{color:#000}}@media (prefers-reduced-motion:reduce){.image-viewer,.image-viewer .image,.image-viewer .loading-spinner{transition:none}.image-viewer .loading-spinner{animation:none}}