/* =========================================================
   PRODUCT DETAILS — IMAGE GALLERY
   ========================================================= */

.pd-gallery {
    min-width: 0;
}

/* ---------- main image ---------- */

.pdg-main {
    position: relative;

    aspect-ratio: 4 / 3;

    overflow: hidden;

    background: var(--paper-dim);

    border-radius: var(--radius);

    margin-bottom: 14px;

    touch-action: pan-y;
}

.pdg-main-btn {
    display: block;

    width: 100%;
    height: 100%;

    padding: 0;

    border: 0;

    background: none;

    cursor: zoom-in;
}

.pdg-main-img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: opacity .25s ease;
}

.pdg-main-img.is-changing {
    opacity: 0;
}

.pdg-badge {
    position: absolute;
    top: 14px;
    left: 14px;

    padding: 6px 12px;

    background: var(--yallow);
    color: var(--deep-green);

    font-family: var(--font-mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .08em;

    border-radius: var(--radius);

    pointer-events: none;
}

.pdg-counter {
    position: absolute;
    right: 14px;
    bottom: 14px;

    padding: 5px 11px;

    background: rgba(0, 0, 0, .55);
    color: #fff;

    font-family: var(--font-mono);
    font-size: 11.5px;

    border-radius: 20px;

    pointer-events: none;
}

/* ---------- arrows ---------- */

.pdg-arrow {
    position: absolute;
    top: 50%;
    z-index: 2;

    width: 42px;
    height: 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0;

    border: 0;
    border-radius: 50%;

    background: rgba(255, 255, 255, .92);
    color: var(--deep-green);

    font-size: 26px;
    line-height: 1;

    cursor: pointer;

    box-shadow: 0 4px 14px rgba(0, 0, 0, .18);

    transform: translateY(-50%);

    transition:
        background .3s ease,
        color .3s ease;
}

.pdg-arrow:hover {
    background: var(--deep-green);
    color: #fff;
}

.pdg-prev {
    left: 14px;
}

.pdg-next {
    right: 14px;
}

/* ---------- thumbnails ---------- */

.pdg-thumbs {
    position: relative;

    display: flex;
    gap: 12px;

    overflow-x: auto;

    padding: 4px;

    scrollbar-width: thin;
}

.pdg-thumb {
    flex: 0 0 calc((100% - 36px) / 4);

    aspect-ratio: 1 / 1;

    padding: 0;

    border: 0;
    border-radius: var(--radius);

    overflow: hidden;

    background: var(--paper-dim);

    cursor: pointer;

    opacity: .6;

    transition:
        opacity .3s ease,
        outline .3s ease;
}

.pdg-thumb:hover {
    opacity: .9;
}

.pdg-thumb.is-active {
    opacity: 1;

    outline: 2px solid var(--yallow);
    outline-offset: 2px;
}

.pdg-thumb img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}

/* ---------- lightbox ---------- */

.pdg-lightbox {
    position: fixed;
    inset: 0;
    z-index: 3000;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 60px 70px;

    background: rgba(10, 18, 14, .92);

    opacity: 0;
    visibility: hidden;

    transition:
        opacity .3s ease,
        visibility .3s ease;
}


/* Lightbox must stay above the complete site header */
body > .pdg-lightbox {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    z-index: 2147483647 !important;
}

/* Keep close button above the lightbox image */
.pdg-lightbox .pdg-close {
    position: absolute;
    top: 16px;
    right: 18px;
    z-index: 2147483647 !important;
}

/* Keep navigation arrows visible */
.pdg-lightbox .pdg-arrow {
    z-index: 2147483646 !important;
}


.pdg-lightbox.is-open {
    opacity: 1;
    visibility: visible;
}

.pdg-lightbox-img {
    max-width: 100%;
    max-height: 100%;

    object-fit: contain;

    border-radius: var(--radius);
}

.pdg-lightbox .pdg-arrow:hover {
    background: var(--yallow);
    color: var(--deep-green);
}

.pdg-lightbox .pdg-prev {
    left: 18px;
}

.pdg-lightbox .pdg-next {
    right: 18px;
}

.pdg-close {
    position: absolute;
    top: 16px;
    right: 18px;

    width: 42px;
    height: 42px;

    padding: 0;

    border: 0;
    border-radius: 50%;

    background: rgba(255, 255, 255, .14);
    color: #fff;

    font-size: 26px;
    line-height: 1;

    cursor: pointer;

    transition:
        background .3s ease,
        color .3s ease;
}

.pdg-close:hover {
    background: var(--yallow);
    color: var(--deep-green);
}

/* ---------- mobile ---------- */

@media (max-width: 860px) {

    .pdg-arrow {
        width: 36px;
        height: 36px;

        font-size: 22px;
    }

    .pdg-prev {
        left: 10px;
    }

    .pdg-next {
        right: 10px;
    }

    .pdg-thumb {
        flex-basis: calc((100% - 24px) / 3);
    }

    .pdg-lightbox {
        padding: 64px 12px 24px;
    }

    .pdg-lightbox .pdg-prev {
        left: 8px;
    }

    .pdg-lightbox .pdg-next {
        right: 8px;
    }

}