/*
 * ------------
 * archive main
 * ------------
 */

.archive #main {
    background-color: var(--color-pearlwhite);
}

    /*
     * ---------------
     * archive sidebar
     * ---------------
     */

    .archive #main .sidebar .sidebar-content ul {
        letter-spacing: 0;
    }

    .archive #main .sidebar .sidebar-content ul li a {
        line-height: 1.4em;
    }

    /*
     * ------------------------------------
     * archive main archive-products-before
     * ------------------------------------
     */

    .archive #main .archive-products-before {
        display: flex;
        row-gap: 20px;
        column-gap: 20px;
        margin-bottom: 10px;
        flex-wrap: wrap;
    }

    .archive #main .archive-products-before .archive-parent,
    .archive #main .archive-products-before .archive-title,
    .archive #main .archive-products-before .archive-description {
        flex: none;
        width: 100%;
    }

    .archive #main .archive-products-before .pagination {
        flex: auto;
        order: 1;
    }

    .archive #main .archive-products-before .porto-product-filters-toggle {
        flex: none;
        order: 2;
        max-height: 35px;
        border: 1px solid var( --color-pearlgray-light );
        border-radius: 2px;
        font-size: 14px;
        text-decoration: none;
    }

    .archive #main .archive-products-before .porto-product-filters-toggle:hover {
        border-color: var( --color-panthagray );
    }

    @media (min-width: 768px) { 
        .archive #main .archive-products-before .porto-product-filters-toggle {
            display: none !important;
        }
    }

    .archive #main .archive-products-before .woocommerce-product-ordering {
        flex: none;
        order: 3;
    }

    @media( max-width: 481px ) {
        .archive #main .archive-products-before .woocommerce-product-ordering {
            flex: auto;
        }
    }

    .archive #main .archive-products-before .woocommerce-product-ordering select {
        width: 100%;
    }

    .archive #main .archive-products-before > * {
        margin: 0;
    }

    .archive #main .archive-products-before:after {
        content: none;
    }

    /*
     * -----------------------------
     * archive main archive-products
     * -----------------------------
     */

    .archive #main .archive-products {
        position: relative;
        margin-bottom: 20px;
    }

    /*
     * -----------------------------------
     * archive main archive-products-after
     * -----------------------------------
     */

    .archive #main .archive-products-after {
        display: flex;
        display: -webkit-flex;
        display: -ms-flexbox;
        flex-wrap: wrap;
        row-gap: 20px;
        column-gap: 20px;
        padding: 0;
        border: none;
        margin-bottom: 20px;
    }

    .archive #main .archive-products-after::after {
        content: none;
    }

    .archive #main .archive-products-after .woocommerce-ordering { 
        order: 2;
        flex: none;
    }

    .archive #main .archive-products-after .pagination { 
        order: 1;
        flex: auto;
    }

    /*
     * ---------------------
     * archive main products
     * ---------------------
     */

    .archive #main .woocommerce-product-loop .result-count {
        position: relative;
        margin-bottom: 10px;
        font-size: 14px;
    }

    ul.products {
        display: grid !important;
        grid-auto-rows: 1fr;
        grid-column-gap: 10px;
        grid-row-gap: 10px;
        margin: 0;
    }

    ul.products li.product {
        position: relative;
        flex: auto;
        margin: 0;
    }

    ul.products.columns-1 {
        grid-template-columns: repeat( 1, 1fr );
    }

    ul.products.columns-2 {
        grid-template-columns: repeat( 2, 1fr );
    }

    ul.products.columns-3 {
        grid-template-columns: repeat( 3, 1fr );
    }

    ul.products.columns-4 {
        grid-template-columns: repeat( 4, 1fr );
    }

    ul.products.columns-5 {
        grid-template-columns: repeat( 5, 1fr );
    }

    ul.products.columns-6 {
        grid-template-columns: repeat( 6, 1fr );
    }

    @media( max-width: 481px ) {
        ul.products {
            grid-template-columns: repeat( 1, 1fr ) !important;
        }
    }

    ul.products li.product .content-product {
        height: 100%;
    }