/*
    Theme Name:        XTRA child theme
    Template:          xtra
    Theme URI:         https://xtratheme.com/
    Author:            Codevz
    Author URI:        https://codevz.com/
    Description:       Fast, lightweight and powerful Multipurpose theme for any kind of websites such as business, commerce, services, niche, portfolio, blog, etc.
    Version:           1.0.0
    Requires at least: 5.6
    Tested up to:      6.4
    Requires           PHP: 7.0.8
    License:           GPLv2
    License URI:       http://gnu.org/licenses/gpl-2.0.html
    Text Domain:       xtra
    Tags:              custom-menu, custom-logo, entertainment, full-width-template, one-column, two-columns, left-sidebar, e-commerce, right-sidebar, custom-colors, editor-style, featured-images, microformats, post-formats, rtl-language-support, theme-options, threaded-comments, translation-ready, blog
*/


.custom-woo-loop {
    --xtra-woo-loop-col-481:  2;
    --xtra-woo-loop-col-601:  2;
    --xtra-woo-loop-col-769:  2;
    --xtra-woo-loop-col-1024: 3;
    --xtra-woo-loop-col-1200: 3;

    --xtra-woo-loop-gap: 16px;
}

.custom-woo-loop ul.products {
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    list-style-type: none;

    gap: var(--xtra-woo-loop-gap);
}

.custom-woo-loop .products ul::after,
.custom-woo-loop .products ul::before,
.custom-woo-loop ul.products::after,
.custom-woo-loop ul.products::before {
    display: none;
}

.custom-woo-loop ul.products li.product {
    display: flex;
    flex-wrap: wrap;
    min-width: 100%;
    margin: 0 !important;
    padding: 0 !important;
    flex-direction: column;
    float: none !important;
    clear: none !important;

    width: calc(calc(100% - calc(calc(var(--xtra-woo-loop-col) - 1) * var(--xtra-woo-loop-gap))) / var(--xtra-woo-loop-col)) !important;
}
@media (min-width: 481px) {
    .custom-woo-loop ul.products li.product {
        min-width: auto;

        --xtra-woo-loop-col: var(--xtra-woo-loop-col-481);
    }
}
@media (min-width: 601px) {
    .custom-woo-loop ul.products li.product {
        min-width: auto;

        --xtra-woo-loop-col: var(--xtra-woo-loop-col-601);
    }
}
@media (min-width: 769px) {
    .custom-woo-loop ul.products li.product {
        min-width: auto;

        --xtra-woo-loop-col: var(--xtra-woo-loop-col-769);
    }
}
@media (min-width: 1024px) {
    .custom-woo-loop ul.products li.product {
        min-width: auto;

        --xtra-woo-loop-col: var(--xtra-woo-loop-col-1024);
    }
}
@media (min-width: 1200px) {
    .custom-woo-loop ul.products li.product {
        min-width: auto;

        --xtra-woo-loop-col: var(--xtra-woo-loop-col-1200);
    }
}


.custom-woo-loop ul.products li.product a.woocommerce-loop-product__link {
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
}

.custom-woo-loop ul.products li.product a.woocommerce-loop-product__link .xtra-product-thumbnail {
    padding: 0;
    margin: 0 0 12px;
    overflow: hidden;
    position: relative;
    border-radius: 25px;
}
.custom-woo-loop ul.products li.product a.woocommerce-loop-product__link .xtra-product-thumbnail:last-child {
    margin-bottom: 0;
}

.custom-woo-loop ul.products li.product a.woocommerce-loop-product__link img {
    border: 0;
    margin: 0;
    padding: 0;
    border-radius: 0;
}

.custom-woo-loop ul.products li.product a.woocommerce-loop-product__link .woocommerce-loop-product__title {
    padding: 0;
    width: 100%;
    color: #6d6d6d;
    margin: 0 0 12px;
    text-align: center;
}
.custom-woo-loop ul.products li.product a.woocommerce-loop-product__link .woocommerce-loop-product__title:last-child {
    margin-bottom: 0;
}

.custom-woo-loop ul.products li.product a.woocommerce-loop-product__link .woocommerce-loop-product__info {
    padding: 0;
    color: #6d6d6d;
    font-size: 0.92em;
    margin: 0 0 12px;
}
.custom-woo-loop ul.products li.product a.woocommerce-loop-product__link .woocommerce-loop-product__info:last-child {
    margin-bottom: 0;
}

.custom-woo-loop ul.products li.product a.woocommerce-loop-product__link .price {
    right:  auto;
    left:   auto;
    top:    auto;
    bottom: auto;

    padding: 0;
    display: block;
    font-size: 20px;
    color: #27aeff;
    font-weight: 700;
    border-radius: 0;
    text-align: center;
    position: relative;
    margin: auto auto 0;
    align-self: flex-end;
    background-color: transparent;
}