/* ==========================================================
   OOTACAMUND'S Core V6
   Premium WooCommerce Gallery
   ========================================================== */

.oota-left-column{

    position:sticky;
    top:20px;
    align-self:flex-start;

}

/* Main gallery */

.woocommerce-product-gallery{

    display:grid;

    grid-template-columns:90px 1fr;

    gap:24px;

    align-items:start;

    width:100%;

    margin:0;

}

/* Main image */

.woocommerce-product-gallery__wrapper{

    flex:1;
}

.woocommerce-product-gallery__image{

    background:#fff;

    border-radius:18px;

    overflow:hidden;

    border:1px solid #efefef;

    box-shadow:0 14px 40px rgba(0,0,0,.08);

    padding:25px;

}

.woocommerce-product-gallery__image img{

    width:100%;

    height:auto;

    display:block;

    object-fit:contain;

    transition:.35s ease;

}

.woocommerce-product-gallery__image:hover img{

    transform:scale(1.03);

}

/* Vertical thumbnails */

.flex-control-thumbs{

    display:flex !important;
    flex-direction:column;
    width:90px;
    gap:12px;
    margin:0 !important;
    padding:0 !important;
    list-style:none;

}

.flex-control-thumbs li{

    width:90px !important;
    margin:0 !important;

}

.flex-control-thumbs img{

    width:100%;

    border-radius:14px;

    border:2px solid transparent;

    background:#fff;

    transition:.25s ease;

    cursor:pointer;

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

}

.flex-control-thumbs img:hover{

    border-color:#8c008c;

    transform:translateX(3px);

}

.flex-control-thumbs img:hover{

    border-color:#ff9800;
    transform:translateY(-2px);

}

.flex-active{

    border-color:#8c008c !important;

    box-shadow:0 0 0 3px rgba(140,0,140,.15);

}

/* Zoom cursor */

.woocommerce-product-gallery__trigger{

    right:15px;
    top:15px;

}

/* Mobile */

@media(max-width:768px){

.oota-left-column{

    position:relative;
    top:auto;

}

.woocommerce-product-gallery{

    flex-direction:column;

}

.flex-control-thumbs{

    flex-direction:row !important;
    width:100%;
    justify-content:center;
    margin-top:15px !important;

}

.flex-control-thumbs li{

    width:70px !important;

}

}