.lightbox-overlay { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.92); z-index: 9999; align-items: center; justify-content: center; cursor: zoom-out; animation: lightboxFadeIn 0.2s ease; }
.lightbox-overlay.active { display: flex; }
@keyframes lightboxFadeIn { from { opacity: 0; } to { opacity: 1; } }
.lightbox-img { max-width: 92vw; max-height: 90vh; object-fit: contain; border-radius: 8px; box-shadow: 0 8px 40px rgba(0,0,0,0.5); animation: lightboxZoomIn 0.25s ease; }
@keyframes lightboxZoomIn { from { transform: scale(0.85); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.lightbox-close { position: absolute; top: 16px; right: 20px; color: white; font-size: 2rem; cursor: pointer; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(255,255,255,0.15); transition: background 0.2s; z-index: 10000; }
.lightbox-close:hover { background: rgba(255,255,255,0.3); }
.lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); color: white; font-size: 2rem; cursor: pointer; width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(255,255,255,0.15); transition: background 0.2s; z-index: 10000; }
.lightbox-nav:hover { background: rgba(255,255,255,0.3); }
.lightbox-prev { left: 16px; }
.lightbox-next { right: 16px; }
.lightbox-counter { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); color: rgba(255,255,255,0.7); font-size: 0.85rem; font-weight: 600; }

.product-image-open { display: block; width: 100%; padding: 0; border: 0; background: transparent; color: inherit; cursor: zoom-in; }
.product-image-open .product-main-image { display: block; }
.product-image-open:focus-visible { outline: 3px solid #111827; outline-offset: -5px; box-shadow: inset 0 0 0 7px #fff; }
.product-image-open:focus-visible .product-main-image { transform: none; }
.product-swiper-main .swiper-button-next, .product-swiper-main .swiper-button-prev { border: 0; }
.product-swiper-main .swiper-button-next:focus-visible, .product-swiper-main .swiper-button-prev:focus-visible,
.product-swiper-main .swiper-pagination-bullet:focus-visible { outline: 3px solid #111827; outline-offset: 3px; box-shadow: 0 0 0 3px #fff; }
.lightbox-close, .lightbox-nav { border: 0; padding: 0; cursor: pointer; }
.lightbox-close:focus-visible, .lightbox-nav:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.lightbox-img { max-width: calc(100vw - 150px); max-height: calc(100vh - 140px); max-height: calc(100dvh - 140px); }
.lightbox-overlay { overscroll-behavior: contain; }
.lightbox-counter { pointer-events: none; }
/* CDN failure: all photos remain available through local previous/next buttons. */
.product-swiper-main.gallery-fallback { position: relative; }
.gallery-fallback .swiper-wrapper { display: block; transform: none !important; }
.gallery-fallback .swiper-slide { width: 100% !important; }
.gallery-fallback .swiper-slide[hidden] { display: none !important; }
.gallery-fallback .swiper-pagination { display: none; }
.gallery-fallback .swiper-button-prev, .gallery-fallback .swiper-button-next { position: absolute; top: 50%; margin-top: -22px; display: flex; align-items: center; justify-content: center; z-index: 2; cursor: pointer; }
.gallery-fallback .swiper-button-prev { left: 10px; }
.gallery-fallback .swiper-button-next { right: 10px; }
.gallery-fallback .swiper-button-prev::after { content: '‹'; font-family: inherit; font-size: 32px; }
.gallery-fallback .swiper-button-next::after { content: '›'; font-family: inherit; font-size: 32px; }
.gallery-fallback [aria-disabled="true"] { opacity: 0.4; cursor: default; }
@media (max-width: 600px) {
    .lightbox-img { max-width: 92vw; }
    .lightbox-nav { top: auto; bottom: 8px; transform: none; }
    .lightbox-prev { left: calc(50% - 110px); }
    .lightbox-next { right: calc(50% - 110px); }
}
@media (prefers-reduced-motion: reduce) {
    .lightbox-overlay, .lightbox-img { animation: none; }
    .product-main-image, .lightbox-close, .lightbox-nav { transition: none; }
    .product-main-image:hover { transform: none; }
}