/* ============================================
   NIERYY — PDP Image Zoom & Lightbox
   Desktop: magnifier on hover → click opens full-size lightbox
   Mobile:  tap to enlarge, pinch / double-tap to zoom + pan
   ============================================ */

/* --- Main image affordance --- */
.pdp-gallery-main-item {
    cursor: default;
}

/* Desktop (hover-capable) gets the magnifier + zoom-in cursor */
@media (hover: hover) and (pointer: fine) {
    .pdp-gallery-main-item {
        cursor: zoom-in;
    }
    .pdp-zoom-trigger {
        position: absolute;
        right: 16px;
        bottom: 16px;
        z-index: 3;
        width: 46px;
        height: 46px;
        border-radius: 50%;
        border: none;
        background: rgba(253, 252, 250, 0.92);
        color: var(--text-primary);
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: zoom-in;
        opacity: 0;
        transform: translateY(6px);
        transition: opacity 0.25s var(--ease-out), transform 0.25s var(--ease-out), background 0.2s ease;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.14);
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
    }
    .pdp-gallery-main-item:hover .pdp-zoom-trigger {
        opacity: 1;
        transform: translateY(0);
    }
    .pdp-zoom-trigger:hover {
        background: #fff;
    }
}

/* Hide the magnifier entirely on touch devices — they tap the image */
@media (hover: none), (pointer: coarse) {
    .pdp-zoom-trigger {
        display: none !important;
    }
    .pdp-gallery-main-item {
        cursor: pointer;
    }
}

/* --- Lightbox overlay --- */
.pdp-lightbox {
    position: fixed;
    inset: 0;
    z-index: 12000;
    display: flex;
    align-items: center;
    justify-content: center;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s var(--ease-out), visibility 0.3s;
    touch-action: none;
    overscroll-behavior: contain;
}

.pdp-lightbox.active {
    visibility: visible;
    opacity: 1;
}

.pdp-lightbox-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(16, 14, 12, 0.94);
}

.pdp-lightbox-stage {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: zoom-in;
    touch-action: none;
}

.pdp-lightbox-stage.is-zoomed {
    cursor: grab;
}
.pdp-lightbox-stage.is-grabbing {
    cursor: grabbing;
}

.pdp-lightbox-img {
    max-width: 92vw;
    max-height: 90vh;
    object-fit: contain;
    user-select: none;
    -webkit-user-drag: none;
    will-change: transform;
    transform-origin: center center;
    transition: transform 0.18s ease-out;
    display: block;
}

/* While a gesture is active, drop the transition for 1:1 finger tracking */
.pdp-lightbox-img.no-anim {
    transition: none;
}

/* --- Controls --- */
.pdp-lightbox-close,
.pdp-lightbox-arrow {
    position: absolute;
    z-index: 2;
    border: none;
    background: rgba(253, 252, 250, 0.12);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease, transform 0.2s ease;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.pdp-lightbox-close:hover,
.pdp-lightbox-arrow:hover {
    background: rgba(253, 252, 250, 0.24);
}

.pdp-lightbox-close {
    top: 20px;
    right: 20px;
    width: 46px;
    height: 46px;
    border-radius: 50%;
}

.pdp-lightbox-arrow {
    top: 50%;
    transform: translateY(-50%);
    width: 52px;
    height: 52px;
    border-radius: 50%;
}
.pdp-lightbox-arrow:hover {
    transform: translateY(-50%) scale(1.05);
}
.pdp-lightbox-arrow.prev { left: 20px; }
.pdp-lightbox-arrow.next { right: 20px; }

.pdp-lightbox-arrow[hidden],
.pdp-lightbox-close[hidden] {
    display: none;
}

.pdp-lightbox-counter {
    position: absolute;
    top: 26px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    color: rgba(255, 255, 255, 0.85);
    font-family: var(--font-body);
    font-size: 12px;
    letter-spacing: 0.14em;
}

.pdp-lightbox-hint {
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    color: rgba(255, 255, 255, 0.6);
    font-family: var(--font-body);
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    pointer-events: none;
    transition: opacity 0.3s ease;
}
.pdp-lightbox-hint[hidden] {
    display: none;
}

body.pdp-zoom-open {
    overflow: hidden;
}

/* Mobile sizing tweaks */
@media (max-width: 768px) {
    .pdp-lightbox-img {
        max-width: 100vw;
        max-height: 88vh;
    }
    .pdp-lightbox-close {
        top: 14px;
        right: 14px;
        width: 42px;
        height: 42px;
    }
    /* On mobile, arrows can crowd the gesture area — keep them small + low */
    .pdp-lightbox-arrow {
        width: 42px;
        height: 42px;
    }
    .pdp-lightbox-arrow.prev { left: 10px; }
    .pdp-lightbox-arrow.next { right: 10px; }
}