/* PDP image gallery - styles for pdpImageGallery.js (also replaces the gallery rules from pdpMobileImages.css) */

/* ---- Main image: grey ground, rounded, no divider lines; square box reserved before the image loads ---- */
#prodInfoLeft #detailMiv {
    padding: 0;
    margin: 0;
    border: 0;
    outline: 0;
    border-radius: 12px;
    background: #f6f6f4;
    overflow: hidden;
    position: relative;
}

#detailMiv > a[data-fancybox] {
    display: block;
    position: relative;
    width: 100%; /* without it, max-height also shrinks the width (aspect-ratio) and the image sits to the left */
    aspect-ratio: 1/1;
    background: #f6f6f4; /* keeps mix-blend-mode working while the zoom transform is applied */
    transition: transform .25s;
}

#detailMiv > a[data-fancybox] > img {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 88%;
    height: 92%;
    padding: 0;
    border: 0;
    border-radius: 0;
    object-fit: contain;
    mix-blend-mode: multiply; /* white photo backgrounds take on the grey */
    -webkit-user-drag: none;
    will-change: transform;
}

#detailMiv .MIVicon {
    display: none;
}

/* ---- Controls - #detailMiv prefix outranks the site's global button / button:hover rules ---- */
#detailMiv .miv-btn,
#detailMiv .miv-btn:hover,
#detailMiv .miv-btn:focus {
    position: absolute;
    z-index: 3;
    width: 44px;
    height: 44px;
    padding: 0;
    margin: 0;
    border: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    color: #1d1d1b;
    box-shadow: 0 1px 4px rgba(0,0,0,.15);
    cursor: pointer;
    line-height: 0;
    transition: opacity .15s;
}

#detailMiv .miv-btn:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
}

#detailMiv .miv-btn svg {
    display: block;
}

#detailMiv .miv-prev { left: 16px; top: calc(50% - 22px); }
#detailMiv .miv-next { right: 16px; top: calc(50% - 22px); }
#detailMiv .miv-full { left: 12px; top: 12px; }

#detailMiv .miv-counter {
    position: absolute;
    right: 16px;
    bottom: 16px;
    z-index: 3;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(255,255,255,.92);
    color: #1d1d1b;
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    pointer-events: none;
}

#prodInfoLeft.miv-single .miv-arrow,
#prodInfoLeft.miv-single .miv-counter {
    display: none !important;
}

#detailMiv.miv-loading::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 32px;
    height: 32px;
    margin: -16px 0 0 -16px;
    border: 3px solid #ddd;
    border-top-color: #222;
    border-radius: 50%;
    animation: mivspin .8s linear infinite;
    z-index: 2;
}

@keyframes mivspin {
    to { transform: rotate(360deg); }
}

/* Arrows only on hover where there's a mouse; always shown on touch */
@media (hover: hover) and (pointer: fine) {
    #detailMiv .miv-arrow { opacity: 0; }
    #detailMiv:hover .miv-arrow,
    #detailMiv .miv-arrow:focus-visible { opacity: 1; }
    #detailMiv > a[data-fancybox]:hover { transform: scale(1.04); }
}

/* ---- Video tile (was the green block) ---- */
#youTubeLink a,
#youTubeLink .imgCtr {
    display: block;
    float: none;
    width: 100%;
    height: 100%;
}

#youTubeLink .imgCtr:after {
    display: none;
}

#youTubeLink .bgStandard {
    background: transparent;
}

#YouTubePane {
    background-color: #f6f6f4;
    background-size: cover;
    background-position: center;
}

#youTubeLink a#YouTubePane > div:before {
    width: 28px;
    height: 28px;
    line-height: 28px;
    padding: 0;
    font-size: 14px;
    text-align: center;
    border-radius: 50%;
    background: #fff;
    color: #1d1d1b;
    box-shadow: 0 1px 4px rgba(0,0,0,.15);
}

/* ---- Desktop: one column of tiles, never taller than the main image ---- */
@media (min-width: 768px) {
    #prodInfoLeft {
        display: flex;
        align-items: flex-start;
        gap: 16px;
        padding: 24px;
        box-sizing: border-box;
    }

    /* Both stay in view while the right-hand column scrolls */
    #prodInfoLeft #detailMiv {
        flex: 1 1 auto;
        min-width: 0;
        margin: 0;
        position: sticky;
        top: 91px;
        touch-action: pan-y;
        user-select: none;
    }

    #detailMiv > a[data-fancybox] {
        max-height: calc(90vh - 107px);
        min-height: 320px;
    }

    /* contain:size stops the tiles giving the column any height; the script sets it to the main image's height */
    #prodInfoLeft #detailMivThumb {
        order: -1;
        flex: 0 0 76px;
        width: 76px;
        max-width: none;
        height: 0;
        margin: 0;
        padding: 0;
        position: sticky;
        top: 91px;
        display: flex;
        flex-flow: column nowrap;
        align-items: stretch;
        align-self: flex-start;
        gap: 8px;
        contain: size;
        overflow: hidden;
    }

    #prodInfoLeft #detailMivThumb > .col-thumbnail {
        flex: 0 0 auto !important;
        width: 76px;
        max-width: none;
        height: 76px;
        margin: 0 !important;
        padding: 4px;
        box-sizing: border-box;
        border: 1.5px solid transparent;
        border-radius: 8px;
        background: #f6f6f4;
        opacity: .7;
        transition: opacity .15s;
        position: relative;
        overflow: hidden;
        cursor: pointer;
        -webkit-filter: none !important;
        filter: none !important;
    }

    #prodInfoLeft #detailMivThumb > #youTubeLink {
        padding: 0;
    }

    #prodInfoLeft #detailMivThumb > .col-thumbnail:hover,
    #prodInfoLeft #detailMivThumb > .miv-active {
        opacity: 1;
    }

    #prodInfoLeft #detailMivThumb > .miv-active {
        border-color: #1d1d1b;
    }

    #prodInfoLeft #detailMivThumb > .col-thumbnail:focus-visible {
        opacity: 1;
        outline: 2px solid #2563eb;
        outline-offset: -2px;
    }

    #prodInfoLeft #detailMivThumb > .col-thumbnail > img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        mix-blend-mode: multiply;
        display: block;
    }

    #prodInfoLeft #detailMivThumb > .miv-hidden,
    #prodInfoLeft #detailMivThumb > .miv-dupe {
        display: none;
    }

    #prodInfoLeft #detailMivThumb > .miv-more {
        opacity: 1;
    }

    #prodInfoLeft #detailMivThumb > .miv-more::after {
        content: attr(data-more);
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(29,29,27,.6);
        color: #fff;
        font-size: 15px;
        font-weight: 600;
    }

    #prodInfoLeft.miv-single:not(.miv-video) #detailMivThumb {
        display: none;
    }

    #mivDots {
        display: none;
    }
}

/* ---- Mobile: no thumbnail column - the images become a swipeable row with dots underneath ---- */
@media (max-width: 767px) {
    #prodInfoLeft {
        display: flex;
        gap: 8px;
        padding: 8px 16px;
        scroll-padding-inline: 16px;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        background: #fff;
        container-type: inline-size; /* slides are 100cqw = the row's width */
    }

    #prodInfoLeft::-webkit-scrollbar {
        display: none;
    }

    #prodInfoLeft #detailMiv {
        flex: 0 0 100cqw;
        scroll-snap-align: start;
    }

    #prodInfoLeft #detailMivThumb {
        display: flex;
        flex: none;
        gap: 8px;
        margin: 0;
        padding: 0;
        overflow: visible;
    }

    #prodInfoLeft #detailMivThumb > .col-thumbnail {
        flex: 0 0 100cqw !important;
        width: 100cqw;
        min-width: 0;
        max-width: none;
        height: auto;
        aspect-ratio: 1/1;
        margin: 0;
        padding: 0;
        border: 0;
        border-radius: 12px;
        background: #f6f6f4;
        position: relative;
        overflow: hidden;
        scroll-snap-align: start;
        transition: none;
    }

    #prodInfoLeft #detailMivThumb > a.col-thumbnail > img {
        position: absolute;
        inset: 0;
        margin: auto;
        width: 88% !important;
        min-width: 0 !important;
        height: 92% !important;
        padding: 0;
        border: 0;
        border-radius: 0;
        object-fit: contain;
        mix-blend-mode: multiply;
    }

    #prodInfoLeft #detailMivThumb > .miv-main-thumb,
    #prodInfoLeft #detailMivThumb > .miv-dupe {
        display: none;
    }

    #detailMiv .miv-btn,
    #detailMiv .miv-counter {
        display: none !important;
    }

    #brand-logo-area > a {
        padding-right: 1rem !important;
        padding-top: 0;
        opacity: .7;
    }

    #brand-logo-area > a img {
        border-radius: 5px !important;
    }

    #mivDots {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        min-height: 24px;
        padding: 4px 0;
    }

    #mivDots button,
    #mivDots button:hover,
    #mivDots button:focus {
        width: 24px;
        height: 24px;
        padding: 0;
        margin: 0;
        border: 0;
        background: none;
        box-shadow: none;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
    }

    #mivDots button::before {
        content: "";
        width: 6px;
        height: 6px;
        border-radius: 3px;
        background: #b9b9b4;
        transition: width .2s, background .2s;
    }

    #mivDots button[aria-current="true"]::before {
        width: 18px;
        background: #1d1d1b;
    }

    #mivDots button:focus-visible {
        outline: 2px solid #2563eb;
        outline-offset: -2px;
        border-radius: 6px;
    }

    #mivDots .miv-dots-count {
        font-size: 12px;
        font-weight: 500;
        color: #1d1d1b;
    }
}