/**
 * This file is needed since enabling a filter messes the grid up complete loading the products
 * from within a different HTML element. That CSS are we mimicking here.
 */

.elementor-widget-wcf_elementor_filters_group
{
	width: 100%;
}
body.archive .woocommerce.columns-3.wcf-products-loop ul.products.columns-3 {
    display: grid;
    grid-template-columns: repeat(1, 1fr) !important;
}

body.archive .woocommerce.columns-3.wcf-products-loop ul.products.columns-3:before {
    display: none;
}

body.archive .woocommerce.columns-3.wcf-products-loop ul.products.columns-3 li {
    margin: 0;
}

body.archive #top_bar_filters .rt-r-gtc-5
{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

@media (min-width: 500px) {
     body.archive .woocommerce.columns-3.wcf-products-loop ul.products.columns-3, .wcf-filter-kleuren .rt-r-w{
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (min-width: 1025px) {
    body.archive .woocommerce.columns-3.wcf-products-loop ul.products.columns-3, .wcf-filter-kleuren .rt-r-w, .wcf-filter-merk .rt-r-w{
        grid-template-columns: repeat(3, 1fr) !important;
    }
}