//==============================================================================
// Product Layout Default / Product Gallery Images & Thumbnails
//==============================================================================

.product-images-wrapper 
{
    position: relative;
    
    .product-images-layout
    {
        &.images 
        {
            float: none !important;
            width: auto !important;
            margin: 0 !important;
            
            img
            {
                display: block;
                max-width: 100%;
                height: auto;
                box-shadow: none;
                transition: none;
            }

        }

        .product-images-carousel
        {
            .swiper-slide
            {
                &.video
                {
                
                    position: relative;
                     
                    &:before
                    {
                        position: absolute;
                        top: 0;
                        left: 0;
                        right: 0;
                        bottom: 0;
                        content: "";
                        display: block; 
                        width: 40%;
                        height: 85%;  
                        z-index: 1;   
                    }

                    &:after
                    {
                        position: absolute;
                        top: 0;
                        left: 60%;
                        right: 0;
                        bottom: 0;
                        content: "";
                        display: block; 
                        width: 40%;
                        height: 85%;  
                        z-index: 1;   
                    }

                    
                }
            }
        }
    }
    
    .easyzoom
    {
        &.is-loading
        {
            &:after
            {
                display: none;
            }
        }
    }
    
    .product_images
    {
        .swiper-slide
        {

            .easyzoom.el_zoom
            {
                img
                {
                    cursor: url(../images/cursor-zoom.png), auto;
                }
            }

            .swiper-lazy-preloader
            {
                animation: none;
                width: 100%;
                height: 100%;
                position: absolute;
                left: 0;
                top: 0;
                margin: 0;
                
                &:after
                {
                    position: absolute;
                    top: 0;
                    left: 0;
                    bottom: 0;
                    right: 0;
                    z-index: 9;
                    content: ""; 
                    height: 100%;
                    width: 100%; 
                    background: url('../images/morph-shape-gif-preloader.gif') center no-repeat;
                    background-size: auto 15px;
                    pointer-events: none; 

                 

                }
            }
 

            img
            {
                width: 100%;
            }

        }
    } 
}


.product_summary_thumbnails_wrapper
{
    .product_thumbnails
    {
        width: 100%;
        transition: opacity 300ms ease;
        overflow: hidden;
        max-height: 488px;
        margin: 0;
        padding: 0;
        list-style: none;

        .carousel-cell
        {
            transition: all 0.5s ease;
            padding: 0 0 20px 0;
            opacity: 1;
            
            &.youtube
            {
                font-size: 55px;
                text-align: center; 
                cursor: pointer;
                position: absolute;
                z-index: 99; 
                top: 100%;
                left: 0;
                right: 0;  
            }
            
            img
            {
                width: 100%;
                height: auto;
                cursor: pointer;
            }

            &:hover,
            &.is-nav-selected
            {
                opacity: .2;
            }            
        }
    }
}


.mobile_gallery,
.mobile_gallery_thumbs
{
    display: none;
    
    @media (max-width: 639px)
    {
        display: block;
    }
}

.mobile_gallery
{
    img
    {
        width: 100%; 
    }

    .swiper-slide
    {
        &.video
        {
            height: 100px;
            font-size: 100px;
            text-align: center;  
        }
    }

    .swiper-lazy-preloader
    {
        animation: none;
        
        &:after
        {
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            z-index: 9;
            content: ""; 
            height: 100%;
            width: 100%; 
            background: url('../images/morph-shape-gif-preloader.gif') center no-repeat;
            background-size: auto 15px;
        }
    }

}

.mobile_gallery_thumbs
{
    height: 100px;
    box-sizing: border-box;
 
    .swiper-wrapper
    {
        list-style-type: none;
        padding: 0;
        margin: 0 0 0 -37.5%;
         
        .swiper-slide
        {
            width: 25%;
            height: 100%;
            opacity: 0.4;
            background-size: cover;
            background-position: center center;
            
            &.youtube
            {
                display: flex;
                justify-content: center;
                flex-direction: column;
                text-align: center;
                
                > i
                {
                    font-size: 50px; 
                    
                }
            }
        }

        .swiper-slide-active
        {
            opacity: 1;
        }
    }
    
}