.lightbox-overlay {
    position: fixed; inset: 0; z-index: 9999;
    background: rgba(0,0,0,.92);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    opacity: 0; pointer-events: none;
    transition: opacity .25s ease;
}
.lightbox-overlay.active { opacity: 1; pointer-events: auto; }

.lightbox-close {
    position: absolute; top: 1rem; right: 1.25rem;
    background: none; border: none; color: #fff; font-size: 2.5rem;
    cursor: pointer; z-index: 2; line-height: 1;
    transition: transform .2s;
}
.lightbox-close:hover { transform: scale(1.2); }

.lightbox-prev, .lightbox-next {
    position: absolute; top: 50%; transform: translateY(-50%);
    background: rgba(255,255,255,.15); border: none; color: #fff;
    font-size: 2rem; width: 3rem; height: 3rem; border-radius: 50%;
    cursor: pointer; z-index: 2; display: flex; align-items: center; justify-content: center;
    transition: background .2s;
}
.lightbox-prev:hover, .lightbox-next:hover { background: rgba(255,255,255,.3); }
.lightbox-prev { left: 1rem; }
.lightbox-next { right: 1rem; }

.lightbox-img-wrap {
    flex: 1; display: flex; align-items: center; justify-content: center;
    width: 100%; padding: 1rem 4rem; box-sizing: border-box;
    min-height: 0;
}
.lightbox-img {
    max-width: 100%; max-height: 80vh;
    object-fit: contain; border-radius: .5rem;
    user-select: none; -webkit-user-drag: none;
    transition: opacity .2s;
}

.lightbox-counter {
    color: rgba(255,255,255,.7); font-size: .85rem;
    padding: .5rem 0; text-align: center;
}

.lightbox-thumbs {
    display: flex; gap: .5rem; justify-content: center;
    padding: .5rem 1rem 1rem; overflow-x: auto; max-width: 100%;
}
.lightbox-thumb {
    width: 56px; height: 40px; object-fit: cover; border-radius: .25rem;
    cursor: pointer; opacity: .5; border: 2px solid transparent;
    transition: opacity .2s, border-color .2s;
}
.lightbox-thumb:hover { opacity: .8; }
.lightbox-thumb.active { opacity: 1; border-color: #fff; }

@media (max-width: 640px) {
    .lightbox-img-wrap { padding: .5rem 2.5rem; }
    .lightbox-prev, .lightbox-next { width: 2.25rem; height: 2.25rem; font-size: 1.4rem; }
    .lightbox-thumb { width: 44px; height: 32px; }
}