/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Add your custom styles here */

/* =========================================================
   BANNERS STUDIO PRODUCT GALLERY
   Elementor widget class: bs-product-gallery
========================================================= */

.bs-product-gallery {
    --bs-gallery-height: 550px;
    --bs-sidebar-width: 94px;
    --bs-sidebar-gap: 16px;
    --bs-thumbnail-size: 78px;

    --bs-accent: #ff6d00;
    --bs-background: #f5f6f7;
    --bs-border: #e1e5e9;
    --bs-scrollbar: #aeb6be;

    width: 100%;
}

.bs-product-gallery,
.bs-product-gallery * {
    box-sizing: border-box;
}



.bs-product-gallery .woocommerce-product-gallery {
    position: relative !important;
    display: block !important;
    float: none !important;

    width: calc(
        100% - var(--bs-sidebar-width) - var(--bs-sidebar-gap)
    ) !important;

    height: var(--bs-gallery-height) !important;

    margin: 0 0 0
        calc(var(--bs-sidebar-width) + var(--bs-sidebar-gap))
        !important;

    padding: 0 !important;

    background: var(--bs-background);
    border: 1px solid var(--bs-border);
    border-radius: 12px;

    overflow: visible !important;
}

/* Native WooCommerce FlexSlider viewport */

.bs-product-gallery
.woocommerce-product-gallery
.flex-viewport {
    position: relative;

    width: 100% !important;
    height: var(--bs-gallery-height) !important;

    margin: 0 !important;
    padding: 0 !important;

    background: var(--bs-background);
    border-radius: 12px;

    overflow: hidden !important;
}


.bs-product-gallery
.woocommerce-product-gallery__wrapper {
    height: 100% !important;
    margin: 0 !important;
}

.bs-product-gallery
.woocommerce-product-gallery__image {
    height: 100% !important;
    overflow: hidden;
}

.bs-product-gallery
.woocommerce-product-gallery__image > a {
    display: flex !important;
    align-items: center;
    justify-content: center;

    width: 100% !important;
    height: 100% !important;

    padding: 14px;

    background: var(--bs-background);
}

.bs-product-gallery
.woocommerce-product-gallery__image > a > img {
    display: block;

    width: 100% !important;
    height: 100% !important;

    max-width: 100% !important;
    max-height: 100% !important;

    margin: 0 auto;

    object-fit: contain !important;
    object-position: center;
}



.bs-product-gallery .flex-control-thumbs {
    position: absolute !important;

    top: -1px;
    bottom: auto;

    left: calc(
        (var(--bs-sidebar-width) + var(--bs-sidebar-gap)) * -1
    );

    z-index: 10;

    display: flex !important;
    flex-direction: column;
    gap: 10px;

    width: var(--bs-sidebar-width) !important;
    height: var(--bs-gallery-height) !important;
    max-height: var(--bs-gallery-height) !important;

    margin: 0 !important;


    padding: 3px 9px 3px 4px !important;

    overflow-x: hidden !important;
    overflow-y: auto !important;

    background: transparent;

    list-style: none;
    scroll-behavior: smooth;
    overscroll-behavior: contain;

    scrollbar-width: thin;
    scrollbar-color: var(--bs-scrollbar) transparent;
}

/* Chrome, Edge and Safari scrollbar */
.bs-product-gallery
.flex-control-thumbs::-webkit-scrollbar {
    width: 5px;
}

.bs-product-gallery
.flex-control-thumbs::-webkit-scrollbar-track {
    background: transparent;
}

.bs-product-gallery
.flex-control-thumbs::-webkit-scrollbar-thumb {
    background: var(--bs-scrollbar);
    border-radius: 20px;
}

.bs-product-gallery
.flex-control-thumbs::-webkit-scrollbar-thumb:hover {
    background: #7c8791;
}

/* Override native WooCommerce thumbnail columns */
.bs-product-gallery
.flex-control-thumbs li {
    display: block !important;
    float: none !important;

    flex: 0 0 var(--bs-thumbnail-size);

    width: var(--bs-thumbnail-size) !important;
    height: var(--bs-thumbnail-size) !important;

    margin: 0 !important;
    padding: 0 !important;
}

/* Thumbnail images */
.bs-product-gallery
.flex-control-thumbs li img {
    display: block;

    width: var(--bs-thumbnail-size) !important;
    height: var(--bs-thumbnail-size) !important;

    margin: 0 !important;
    padding: 4px;

    object-fit: cover;
    object-position: center;

    background: #fff;
    border: 1px solid var(--bs-border);
    border-radius: 9px;

    opacity: 0.72;
    cursor: pointer;

    transition:
        opacity 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.bs-product-gallery
.flex-control-thumbs li img:hover {
    opacity: 1;
    border-color: #aab1b8;
}

/* Active thumbnail */
.bs-product-gallery
.flex-control-thumbs li img.flex-active {
    opacity: 1;

    padding: 3px;
    border: 2px solid var(--bs-accent);

    box-shadow: none;
}

.bs-product-gallery
.flex-control-thumbs li img:focus-visible {
    outline: 2px solid var(--bs-accent);
    outline-offset: 2px;
}

/* Zoom button */
.bs-product-gallery
.woocommerce-product-gallery__trigger {
    top: 14px !important;
    right: 14px !important;
    left: auto !important;

    z-index: 20 !important;

    border-radius: 50%;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.13);
}

/* Sale badge */
.bs-product-gallery .onsale {
    z-index: 15;
}


@media (min-width: 768px) and (max-width: 1024px) {

    .bs-product-gallery {
        --bs-gallery-height: 400px;
        --bs-sidebar-width: 82px;
        --bs-sidebar-gap: 12px;
        --bs-thumbnail-size: 68px;
    }

    .bs-product-gallery
    .woocommerce-product-gallery__image > a {
        padding: 10px;
    }

    .bs-product-gallery .flex-control-thumbs {
        padding: 3px 8px 3px 3px !important;
    }
}



@media (max-width: 767px) {

    .bs-product-gallery {
        --bs-thumbnail-size: 66px;
    }

    /* Return main gallery to full width */
    .bs-product-gallery .woocommerce-product-gallery {
        display: flex !important;
        flex-direction: column;
        gap: 12px;

        width: 100% !important;
        height: auto !important;

        margin: 0 !important;
        padding: 0 !important;

        background: transparent;
        border: 0;
        border-radius: 0;
    }

    /* Main preview */
    .bs-product-gallery
    .woocommerce-product-gallery
    .flex-viewport {
        order: 1;

        width: 100% !important;
        height: auto !important;

        min-height: 280px;
        max-height: 480px;

        margin: 0 !important;

        aspect-ratio: 1 / 1;

        background: var(--bs-background);
        border: 1px solid var(--bs-border);
        border-radius: 10px;

        overflow: hidden !important;
    }

    .bs-product-gallery
    .woocommerce-product-gallery__wrapper,
    .bs-product-gallery
    .woocommerce-product-gallery__image {
        height: 100% !important;
    }

    .bs-product-gallery
    .woocommerce-product-gallery__image > a {
        width: 100% !important;
        height: 100% !important;
        padding: 8px;
    }

    /* Horizontal thumbnails below main preview */
    .bs-product-gallery .flex-control-thumbs {
        position: relative !important;

        top: auto;
        right: auto;
        bottom: auto;
        left: auto;

        order: 2;

        display: flex !important;
        flex-direction: row;
        gap: 8px;

        width: 100% !important;
        height: 76px !important;
        max-height: 76px !important;

        margin: 0 !important;

        /* Space for active thumbnail border */
        padding: 3px 4px 7px !important;

        overflow-x: auto !important;
        overflow-y: hidden !important;

        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
    }

    .bs-product-gallery
    .flex-control-thumbs li {
        flex: 0 0 var(--bs-thumbnail-size);
        scroll-snap-align: start;
    }
}



@media (max-width: 380px) {

    .bs-product-gallery {
        --bs-thumbnail-size: 60px;
    }

    .bs-product-gallery
    .woocommerce-product-gallery
    .flex-viewport {
        min-height: 260px;
    }

    .bs-product-gallery .flex-control-thumbs {
        height: 70px !important;
        max-height: 70px !important;
    }
}