/* ==========================================================
   OOTACAMUND'S V6
   PRODUCT GALLERY
========================================================== */


/* ==========================================================
   GALLERY ENGINE
========================================================== */

.oota-gallery-engine {

    display: grid;

    grid-template-columns: 100px minmax(0, 1fr);

    gap: 28px;

    align-items: start;

    width: 100%;

}


/* ==========================================================
   THUMBNAILS
========================================================== */

.oota-gallery-thumbs {

    display: flex;

    flex-direction: column;

    gap: 16px;

    position: sticky;

    top: 30px;

}


.oota-thumb {

    width: 90px;

    height: 90px;

    padding: 0;

    margin: 0;

    border-radius: 16px;

    overflow: hidden;

    background: #ffffff;

    border: 2px solid transparent;

    cursor: pointer;

    display: block;

    box-shadow:
        0 6px 18px rgba(0, 0, 0, .05);

    transition:
        transform .25s ease,
        border-color .25s ease,
        box-shadow .25s ease;

}


.oota-thumb img {

    display: block;

    width: 100%;

    height: 100%;

    max-width: none;

    object-fit: cover;

}


.oota-thumb:hover {

    transform: translateX(4px);

    border-color: #8c008c;

}


.oota-thumb.active {

    border-color: #8c008c;

    box-shadow:
        0 0 0 4px rgba(140, 0, 140, .12),
        0 6px 18px rgba(0, 0, 0, .08);

}


/* ==========================================================
   MAIN IMAGE CONTAINER
========================================================== */

#oota-gallery-main {

    position: relative;

    width: 100%;

    min-height: 720px;

    overflow: hidden;

    isolation: isolate;

    background: #ffffff;

    border: 1px solid #ededed;

    border-radius: 22px;

    padding: 40px;

    display: flex;

    align-items: center;

    justify-content: center;

    box-shadow:
        0 18px 50px rgba(0, 0, 0, .08);

    cursor: zoom-in;

}


/* ==========================================================
   MAIN IMAGE
========================================================== */

#oota-main-image {

    display: block;

    width: auto;

    max-width: 100%;

    height: auto;

    max-height: 650px;

    object-fit: contain;

    transform: scale(1);

    transform-origin: center center;

    will-change: transform;

    user-select: none;

    pointer-events: none;

    image-rendering: auto;

    backface-visibility: hidden;

    -webkit-backface-visibility: hidden;

    transform-style: preserve-3d;

    transition:
        opacity .18s ease,
        transform .12s linear;

}


/* ==========================================================
   IMAGE CHANGE
========================================================== */

#oota-main-image.is-changing {

    opacity: 0;

}


/* ==========================================================
   IMPORTANT
   REMOVE CSS MICRO-ZOOM
========================================================== */

.oota-gallery-main:hover img {

    transform: none;

}


/* ==========================================================
   DESKTOP ZOOM ACTIVE STATE
========================================================== */

#oota-gallery-main.is-zooming {

    cursor: zoom-out;

}


/* ==========================================================
   TABLET
========================================================== */

@media (max-width: 991px) {

    .oota-gallery-engine {

        grid-template-columns: 1fr;

        gap: 20px;

    }


    .oota-gallery-thumbs {

        flex-direction: row;

        position: relative;

        top: auto;

        overflow-x: auto;

        overflow-y: hidden;

        padding-bottom: 10px;

    }


    .oota-thumb {

        flex: 0 0 auto;

    }


    #oota-gallery-main {

        min-height: 520px;

        padding: 25px;

    }


    #oota-main-image {

        max-height: 470px;

    }

}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 600px) {

    .oota-thumb {

        width: 72px;

        height: 72px;

        border-radius: 12px;

    }


    #oota-gallery-main {

        min-height: 400px;

        padding: 16px;

        border-radius: 16px;

    }


    #oota-main-image {

        max-height: 370px;

    }

}