/*
Theme Name: Canabiz Child
Template: canabiz
Version: 1.0.0
Text Domain: canabiz-child
*/

/* =========================================================
   ARTURO FUENTE - PRODUCT GALLERY
   Compatible con WooCommerce FlexSlider
   ========================================================= */

   @media (min-width: 768px) {

    /* =========================================
       ESTRUCTURA GENERAL
       ========================================= */

    .single-product
    .elementor-widget-woocommerce-product-images
    .woocommerce-product-gallery {

        display: grid !important;


        column-gap: 22px;

        align-items: start;

        width: 100% !important;

        overflow: visible;
    }


    /* =========================================
       VIEWPORT DE LA IMAGEN PRINCIPAL
       NO alterar el comportamiento de FlexSlider
       ========================================= */

    .single-product
    .elementor-widget-woocommerce-product-images
    .woocommerce-product-gallery
    .flex-viewport {

        grid-column: 2;
        grid-row: 1;

        width: 100% !important;

        overflow: hidden !important;

        background: #f8f4ec;

        border: 1px solid rgba(182, 126, 83, 0.22);

        box-sizing: border-box;

        margin: 0 !important;
    }


    /* =========================================
       MUY IMPORTANTE:
       NO modificar width/display de cada slide
       ========================================= */

    .single-product
    .elementor-widget-woocommerce-product-images
    .woocommerce-product-gallery
    .woocommerce-product-gallery__wrapper {

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


    /*
       NO usamos:
       width: 100% !important;
       display: flex !important;

       porque FlexSlider necesita controlar esas propiedades.
    */

    .single-product
    .elementor-widget-woocommerce-product-images
    .woocommerce-product-gallery
    .woocommerce-product-gallery__image {

        box-sizing: border-box;
    }


    /* =========================================
       CONTENEDOR INTERNO DE CADA FOTO
       Aquí sí podemos usar FLEX
       ========================================= */

    .single-product
    .elementor-widget-woocommerce-product-images
    .woocommerce-product-gallery
    .woocommerce-product-gallery__image > a {

        min-height: 520px;

        display: flex;

        align-items: center;

        justify-content: center;

        padding: 35px;

        box-sizing: border-box;

        background: #f8f4ec;
    }


    /* =========================================
       IMAGEN
       ========================================= */

    .single-product
    .elementor-widget-woocommerce-product-images
    .woocommerce-product-gallery
    .woocommerce-product-gallery__image img {

        display: block !important;

        width: auto !important;

        height: auto !important;

        max-width: 92% !important;

        max-height: 450px;

        object-fit: contain;

        margin: auto;
    }


    /* =========================================
       MINIATURAS
       ========================================= */

    .single-product
    .elementor-widget-woocommerce-product-images
    .woocommerce-product-gallery
    ol.flex-control-thumbs {

        grid-column: 1;
        grid-row: 1;

        display: flex !important;

        flex-direction: column;

        flex-wrap: nowrap;

        gap: 12px;

        margin: 0 !important;

        padding: 0 !important;

        list-style: none !important;
    }


    .single-product
    .elementor-widget-woocommerce-product-images
    .woocommerce-product-gallery
    ol.flex-control-thumbs > li {

        width: 76px !important;

        height: 76px !important;

        max-width: 76px !important;

        flex: 0 0 76px;

        float: none !important;

        margin: 0 !important;

        padding: 7px !important;

        box-sizing: border-box;

        background: #fbf8f2;

        border: 1px solid rgba(182, 126, 83, 0.20);

        cursor: pointer;

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


    /* Imagen de la miniatura */

    .single-product
    .elementor-widget-woocommerce-product-images
    .woocommerce-product-gallery
    ol.flex-control-thumbs > li img {

        display: block;

        width: 100% !important;

        height: 100% !important;

        object-fit: contain;

        opacity: .72;

        transition:
            opacity .25s ease,
            transform .25s ease;
    }


    /* Hover */

    .single-product
    .elementor-widget-woocommerce-product-images
    .woocommerce-product-gallery
    ol.flex-control-thumbs > li:hover {

        background: #ffffff;

        border-color: #b67e53;

        box-shadow: 0 6px 16px rgba(45, 30, 20, .08);

        transform: translateY(-2px);
    }


    .single-product
    .elementor-widget-woocommerce-product-images
    .woocommerce-product-gallery
    ol.flex-control-thumbs > li:hover img {

        opacity: 1;
    }


    /* Miniatura actualmente seleccionada */

    .single-product
    .elementor-widget-woocommerce-product-images
    .woocommerce-product-gallery
    ol.flex-control-thumbs img.flex-active {

        opacity: 1;

        outline: 1px solid #b67e53;

        outline-offset: 7px;
    }


    /* =========================================
       BOTÓN ZOOM
       ========================================= */

    .single-product
    .elementor-widget-woocommerce-product-images
    .woocommerce-product-gallery
    .woocommerce-product-gallery__trigger {

        top: 18px !important;

        right: 18px !important;

        z-index: 10;

        background: #ffffff;

        border: 1px solid rgba(182, 126, 83, .35);

        box-shadow: 0 4px 12px rgba(0,0,0,.06);
    }

}