/*
Theme Name: Enfold Child
Description: A <a href='http://codex.wordpress.org/Child_Themes'>Child Theme</a> for the Enfold Wordpress Theme. If you plan to do a lot of file modifications we recommend to use this Theme instead of the original Theme. Updating will be much easier then.
Version: 1.0
Author: Kriesi
Author URI: http://www.kriesi.at
Template: enfold
*/

/* Hide Enfold cart for visitors, but keep layout/rendering alive */
body:not(.logged-in) #menu-item-shop {
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}




/* Checkout form fields font size */
#top .main_color .input-text,
#top .main_color input[type='text'],
#top .main_color input[type='input'],
#top .main_color input[type='password'],
#top .main_color input[type='email'],
#top .main_color input[type='number'],
#top .main_color input[type='url'],
#top .main_color input[type='tel'],
#top .main_color input[type='search'],
#top .main_color textarea,
#top .main_color select {
    font-size: 16px !important;
}


.wc-blocks-components-select .wc-blocks-components-select__container {
    background-color: #c89d39 !important;
}

/* WooCommerce buttons background color */
body:not(.woocommerce-block-theme-has-button-styles) .wc-block-components-button:not(.is-link){
    background-color: #c89d39 !important;
    border-color: #c89d39 !important;
    color: #ffffff !important;
}

.wc-blocks-components-select .wc-blocks-components-select__expand {
    right: 1px !important;
    background: #c89d39;
    width: 30px;
    height: 46px;

}

#top.woocommerce-page select  {
    width: 100% !important;
    padding-right: 0 !important;
}

.wc-block-components-totals-coupon__form .wc-block-components-totals-coupon__button {
    max-height: 50px !important;
}

.single-product-main-image {
    width: 45%;
}

/* =========================================================
   WooCommerce product gallery thumbnails
   Desktop: max 5 per row
   Tablet: max 4 per row
   Mobile: max 3 per row
   Small mobile: max 2 per row

   Behaviour:
   - 1 to 4 thumbnails stretch to fill the row on desktop
   - 5 thumbnails fit exactly in one row
   - 6+ thumbnails keep max thumbnail width, so the last item
     does not become 100% wide
   ========================================================= */

.single-product-main-image .thumbnails {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    width: 100% !important;
}

/* Desktop: max 5 per row */
.single-product-main-image .thumbnails a {
    flex: 1 1 calc((100% - 24px) / 5) !important;
    max-width: calc((100% - 24px) / 5) !important;
    margin: 0 !important;
    float: none !important;
}

.single-product-main-image .thumbnails a img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
}

/* Desktop: if there are only 1 to 4 thumbnails, let them stretch */
.single-product-main-image .thumbnails a:first-child:nth-last-child(1),
.single-product-main-image .thumbnails a:first-child:nth-last-child(1) ~ a,
.single-product-main-image .thumbnails a:first-child:nth-last-child(2),
.single-product-main-image .thumbnails a:first-child:nth-last-child(2) ~ a,
.single-product-main-image .thumbnails a:first-child:nth-last-child(3),
.single-product-main-image .thumbnails a:first-child:nth-last-child(3) ~ a,
.single-product-main-image .thumbnails a:first-child:nth-last-child(4),
.single-product-main-image .thumbnails a:first-child:nth-last-child(4) ~ a {
    max-width: none !important;
}

/* Tablet: max 4 per row */
@media only screen and (max-width: 989px) {
    .single-product-main-image .thumbnails a {
        flex-basis: calc((100% - 18px) / 4) !important;
        max-width: calc((100% - 18px) / 4) !important;
    }

    /* Tablet: if there are only 1 to 3 thumbnails, let them stretch */
    .single-product-main-image .thumbnails a:first-child:nth-last-child(1),
    .single-product-main-image .thumbnails a:first-child:nth-last-child(1) ~ a,
    .single-product-main-image .thumbnails a:first-child:nth-last-child(2),
    .single-product-main-image .thumbnails a:first-child:nth-last-child(2) ~ a,
    .single-product-main-image .thumbnails a:first-child:nth-last-child(3),
    .single-product-main-image .thumbnails a:first-child:nth-last-child(3) ~ a {
        max-width: none !important;
    }
}

/* Mobile: max 3 per row */
@media only screen and (max-width: 767px) {
    .single-product-main-image .thumbnails a {
        flex-basis: calc((100% - 12px) / 3) !important;
        max-width: calc((100% - 12px) / 3) !important;
    }

    /* Mobile: if there are only 1 to 2 thumbnails, let them stretch */
    .single-product-main-image .thumbnails a:first-child:nth-last-child(1),
    .single-product-main-image .thumbnails a:first-child:nth-last-child(1) ~ a,
    .single-product-main-image .thumbnails a:first-child:nth-last-child(2),
    .single-product-main-image .thumbnails a:first-child:nth-last-child(2) ~ a {
        max-width: none !important;
    }
}

/* Small mobile: max 2 per row */
@media only screen and (max-width: 420px) {
    .single-product-main-image .thumbnails a {
        flex-basis: calc((100% - 6px) / 2) !important;
        max-width: calc((100% - 6px) / 2) !important;
    }

    /* Small mobile: one thumbnail stretches */
    .single-product-main-image .thumbnails a:first-child:nth-last-child(1),
    .single-product-main-image .thumbnails a:first-child:nth-last-child(1) ~ a {
        max-width: none !important;
    }
}