#category #wrapper{
    background-color: var(--color-light-grey) !important;
}

#category #wrapper > .container > .row{
    display: grid;
    grid-template-columns: 330px 1fr;
    gap: 30px;
}

#category #content-wrapper{
    width: 100%;
    float: none;
}

@media (max-width: 1200px) {
    #category #wrapper > .container > .row{
        grid-template-columns: 280px 1fr;
    }
}

@media (max-width: 768px) {
    #category #wrapper > .container > .row{
        grid-template-columns: 1fr;
    }
}

/* ----------------------- HEADER ----------------------- */

#category #product-list-header{
    border-radius: 15px;
    background-color: #5FB56E;
    margin-bottom: 30px;
}

#category #product-list-header .header-container{
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 42px 36px 36px 54px;
}

#category #product-list-header h1{
    color: #fff;
    font-size: 50px;
    line-height: 1em;
    font-weight: bold;
    margin: 0 !important;
    position: relative;
}

#category #product-list-header h1::before{
    content: '';
    position: absolute;
    top: -22px;
    left: -32px;
    display: block;
    width: 34px;
    height: auto;
    aspect-ratio: 1/1;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='33.45' height='36.798' viewBox='0 0 33.45 36.798'%3E%3Cpath id='Tracé_52720' data-name='Tracé 52720' d='M216.494,10.868l-10.865,1.559V.8a.812.812,0,0,0-.9-.8L195.9,1.153a.71.71,0,0,0-.622.713V13.912l-10.512,1.509a.8.8,0,0,0-.692.8V25a.915.915,0,0,0,1.027.9l10.177-1.46v11.55a.812.812,0,0,0,.9.8l8.833-1.147a.71.71,0,0,0,.622-.713V22.958l11.2-1.607a.8.8,0,0,0,.692-.8v-8.78a.915.915,0,0,0-1.027-.9' transform='translate(-184.071 0)' fill='%23fff'/%3E%3C/svg%3E%0A");
}

#category #product-list-header .category-description,
#category #product-list-header .category-description *{
    color: #fff;
    font-size: 16px;
    line-height: normal;
}

#category #product-list-header .category-description p:last-child{
    margin-bottom: 0;
}

#category #product-list-header .category-cover{
    width: 100%;
    min-height: 100%;
    border-radius: 15px;
    display: block;
    object-fit: cover;
}

@media (max-width: 1400px) {
    #category #product-list-header h1{
        font-size: 37px;
    }
    #category #product-list-header h1::before{
        top: -16px;
        left: -28px;
        width: 28px;
    }
}

@media (max-width: 1024px) {
    #category #product-list-header .header-container{
        padding: 36px 36px 36px 44px;
    }
    #category #product-list-header h1{
        font-size: 30px;
    }
    #category #product-list-header h1::before{
        top: -15px;
        left: -25px;
        width: 24px;
    }
}

@media (max-width: 767px) {
    #category #product-list-header.has-cover{
        grid-template-columns: 1fr;
    }
    #category #product-list-header .header-container{
        padding: 28px 28px 28px 34px;
    }
    #category #product-list-header h1{
        font-size: 25px;
    }
    #category #product-list-header h1::before{
        top: -15px;
        left: -20px;
        width: 20px;
    }
    #category #product-list-header .category-cover{
        height: auto;
        aspect-ratio: 340 / 370;
    }
}

/* --------------------------- GRILLE --------------------------- */

#main > #products .products{
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 50px 20px;
    margin: 0px;
}

@media (max-width: 1024px) {
    #main > #products .products{
        grid-template-columns: repeat(2, 1fr);
        gap: 40px 20px;
    }
}

@media (max-width: 767px) {
    #main > #products .products{
        gap: 30px 10px;
    }
}

/* --------------------------- PAGINATION --------------------------- */

.pagination {
    margin-block: 35px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 20px;
    color: var(--color-black);
    font-size: 1rem;
    line-height: 1.25rem;
}

.pagination .page-list{
    background: none;
    padding: 0px;
    display: flex;
    gap: 10px;
}

.pagination .page-list li,
.pagination .page-list li a{
    font-size: 1rem;
    line-height: 1.25rem;
    color: var(--color-black);
    letter-spacing: normal !important;
    font-weight: normal;
}

.pagination .page-list li.current,
.pagination .page-list li.current a{
    color: var(--color-primary);
}

@media (max-width: 768px) {
    .pagination {
        justify-content: center;
        font-size: 0.875rem;
        line-height: 1.125rem;
    }
}

/* --------------------------- TRIER PAR --------------------------- */

#category #js-product-list-top .total-products{
    display: none;
}

.sort-by-row{
    gap: 16px;
    justify-content: end;
}

.sort-by-row .sort-by,
.sort-by-row .products-sort-order{
    width: auto !important;
    padding: 0px !important;
    margin: 0px !important;
}

.sort-by-row .sort-by{
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: var(--color-black);
    display: block !important;
    white-space: nowrap;
}

.sort-by-row .products-sort-order button{
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: var(--color-black);
    padding: 8px 35px 8px 10px;
    border: 1px solid var(--color-black);
    background-color: var(--color-white);
    position: relative;
}

.sort-by-row .products-sort-order button::after{
    content: '';
    display: block;
    height: 20px;
    width: 20px;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='22' viewBox='0 0 12 22' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.30046 0.127845L0.12731 5.31352C0.086893 5.35401 0.0548481 5.40207 0.0330043 5.45494C0.0111605 5.50782 -5.43073e-05 5.56449 1.97723e-07 5.6217C0.000110276 5.73724 0.046116 5.84801 0.127897 5.92964C0.209677 6.01126 0.320534 6.05706 0.436079 6.05695C0.551624 6.05684 0.662393 6.01083 0.744018 5.92905L5.60803 1.05056L10.4732 5.92944C10.5549 6.01107 10.6656 6.0569 10.7811 6.05686C10.8966 6.05683 11.0073 6.01092 11.0889 5.92924C11.1706 5.84757 11.2164 5.73681 11.2164 5.62134C11.2163 5.50587 11.1704 5.39514 11.0887 5.31352L5.91599 0.127845C5.87563 0.0873222 5.82767 0.0551682 5.77486 0.0332279C5.72204 0.0112877 5.66541 -6.67572e-06 5.60822 -6.67572e-06C5.55103 -6.67572e-06 5.49441 0.0112877 5.44159 0.0332279C5.38878 0.0551682 5.34081 0.0873222 5.30046 0.127845Z' fill='%234b4848'/%3E%3Cpath d='M5.91585 20.986L11.089 15.8004C11.1294 15.7599 11.1615 15.7118 11.1833 15.6589C11.2051 15.6061 11.2164 15.5494 11.2163 15.4922C11.2162 15.3766 11.1702 15.2659 11.0884 15.1843C11.0066 15.1026 10.8958 15.0568 10.7802 15.0569C10.6647 15.0571 10.5539 15.1031 10.4723 15.1848L5.60828 20.0633L0.743094 15.1845C0.661417 15.1028 0.55066 15.057 0.435188 15.057C0.319717 15.0571 0.208989 15.103 0.127364 15.1846C0.0457392 15.2663 -9.63211e-05 15.3771 -5.91278e-05 15.4926C-2.28882e-05 15.608 0.0458832 15.7188 0.12756 15.8004L5.30032 20.986C5.34067 21.0266 5.38864 21.0587 5.44145 21.0807C5.49427 21.1026 5.55089 21.1139 5.60808 21.1139C5.66528 21.1139 5.7219 21.1026 5.77472 21.0807C5.82753 21.0587 5.87549 21.0266 5.91585 20.986Z' fill='%234b4848'/%3E%3C/svg%3E%0A");
}

.sort-by-row .products-sort-order button i{
    display: none;
}

.brands-sort .select-list:hover, 
.products-sort-order .select-list:hover, 
.suppliers-sort .select-list:hover{
    background: var(--color-primary);
}

.products-selection{
    display: flex;
    align-items: end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px 40px;
}

#category .products-selection{
    justify-content: end;
}

.products-selection .showing{
    font-size: 1rem;
    line-height: 1.25rem;
    color: var(--color-black);
}

.products-selection .total-products,
.products-selection .total-products p{
    margin: 0px;
    padding: 0px;
    color: var(--color-black);
}

@media (max-width: 768px) {
    .sort-by-row{
        justify-content: start;
    }
    .products-selection .showing{
        font-size: .875rem;
        line-height: 1.125rem;
    }
    #js-product-list-top .filter-button{
        position: fixed;
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);
        width: 100%;
        max-width: calc(100% - 40px);
        z-index: 12;
    }
    #js-product-list-top .filter-button.hide{
        display: none !important;
    }
    #js-product-list-top .filter-button #search_filter_toggler{
        display: flex !important;
        align-items: center;
        justify-content: center;
        gap: 12px;
    }
    #js-product-list-top .filter-button #search_filter_toggler::after{
        content: "";
        display: block;
        width: 18px;
        height: 18px;
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19' height='18' viewBox='0 0 19 18' fill='none'%3E%3Cpath d='M4.39844 12.2616C5.81572 11.8625 7.29484 12.6836 7.69434 14.1064H17.7686C18.1735 14.1064 18.4999 14.4329 18.5 14.8378C18.5 15.2428 18.1736 15.5693 17.7686 15.5693H7.69434C7.44123 16.4635 6.74384 17.1608 5.84961 17.414C4.43211 17.8134 2.95211 16.9924 2.55273 15.5693H1.23145C0.826445 15.5693 0.5 15.2428 0.5 14.8378C0.500102 14.4329 0.826508 14.1064 1.23145 14.1064H2.55273C2.80592 13.2121 3.50415 12.5147 4.39844 12.2616ZM5.12402 13.623C4.45471 13.623 3.90928 14.1685 3.90918 14.8378C3.90918 15.5072 4.45465 16.0527 5.12402 16.0527C5.79327 16.0525 6.33887 15.5071 6.33887 14.8378C6.33876 14.1686 5.79321 13.6231 5.12402 13.623ZM12.667 6.18157C14.0845 5.78219 15.5635 6.60317 15.9629 8.02629H17.7686C18.1736 8.02629 18.5 8.35274 18.5 8.75774C18.4998 9.16258 18.1734 9.48821 17.7686 9.48821H15.9629C15.7098 10.3826 15.0125 11.0808 14.1182 11.3339C12.7007 11.7333 11.2216 10.9113 10.8223 9.48821H1.23145C0.826559 9.48821 0.500184 9.16258 0.5 8.75774C0.5 8.35274 0.826445 8.02629 1.23145 8.02629H10.8223C11.0754 7.13192 11.7726 6.43469 12.667 6.18157ZM13.3926 7.54192C12.7232 7.54192 12.1777 8.08836 12.1777 8.75774C12.1779 9.42696 12.7233 9.97258 13.3926 9.97258C14.0618 9.97254 14.6072 9.42693 14.6074 8.75774C14.6074 8.08839 14.0619 7.54196 13.3926 7.54192ZM4.39258 0.100511C5.81554 -0.298752 7.29481 0.528019 7.69434 1.94524H17.7686C18.1735 1.94524 18.4999 2.27179 18.5 2.67668C18.5 3.08168 18.1736 3.40813 17.7686 3.40813H7.69434C7.44124 4.3024 6.74384 4.99966 5.84961 5.25285C4.43211 5.65223 2.95211 4.83125 2.55273 3.40813H1.23145C0.826445 3.40813 0.5 3.08168 0.5 2.67668C0.500121 2.27179 0.82652 1.94524 1.23145 1.94524H2.54785C2.80109 1.05109 3.49836 0.353591 4.39258 0.100511ZM5.12402 1.46184C4.45472 1.46184 3.9093 2.00741 3.90918 2.67668C3.90918 3.34606 4.45465 3.89153 5.12402 3.89153C5.79327 3.89138 6.33887 3.34597 6.33887 2.67668C6.33874 2.0075 5.7932 1.46199 5.12402 1.46184Z' fill='black'/%3E%3C/svg%3E");
    }
}

/* --------------------------- FOOTER --------------------------- */

#category #js-product-list-footer{
    margin-bottom: 40px;
}

#category #js-product-list .up{
    display: none;
}

@media (max-width: 768px) {
    #category #js-product-list-footer .category-additional-description > p{
        font-size: .875rem;
        line-height: 1.25rem;
    }
}

/* --------------------------- PROMOTIONS --------------------------- */

#prices-drop #main #products{
    padding-top: 100px;
}

/* --------------------------- LEFT COLUMN --------------------------- */

#category #left-column{
    padding: 0px;
    height: fit-content;
    width: 100%;
    float: none;
}

.block-categories{
    margin-bottom: 25px;
    padding: 22px !important;
    border-radius: 15px !important;
}

.block-categories .category-top-menu{
    margin: 0px !important;
}

.block-categories li{
    display: block !important;
    margin: 0px !important;
}

.block-categories li a{
    font-size: 16px !important;
    line-height: normal !important;
    font-weight: normal !important;
    padding: 0px !important;
    margin: 0px !important;
    display: block !important;
    color: var(--color-black) !important;
}

.block-categories li[data-depth="0"] > a{
    padding: 20px 0px !important;
    border-bottom: solid 1px var(--color-light-grey) !important;
}

.block-categories li[data-depth="0"]:last-child > a{
    border: none !important;
}

.block-categories > ul > li:first-child a{
    font-size: 18px !important;
    line-height: normal !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
    padding: 0px !important;
    border: none !important;
}

.block-categories li[data-depth="0"] .category-sub-menu{
    border-bottom: solid 1px var(--color-light-grey) !important;
    margin: 0px !important;
    padding: 12px 20px !important;
}

.block-categories li[data-depth="0"] .category-sub-menu > li:not(:last-child){
    margin-bottom: 10px !important;
}

.block-categories .collapse-icons{
    top: 29px;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: right;
    align-items: center;
}

.block-categories .collapse-icons::after{
    content: '';
    display: block;
    width: 7px;
    height: 13px;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    transform: rotate(0deg);
    background-image: url("data:image/svg+xml,%3Csvg id='Groupe_7' data-name='Groupe 7' xmlns='http://www.w3.org/2000/svg' width='6.665' height='12.341' viewBox='0 0 6.665 12.341'%3E%3Cpath id='Tracé_19' data-name='Tracé 19' d='M6.525,5.832.816.14A.478.478,0,0,0,.141.817L5.509,6.171.141,11.524a.478.478,0,0,0,.676.677L6.525,6.509a.478.478,0,0,0,0-.677Z' transform='translate(0 0)'/%3E%3C/svg%3E%0A");
}

.block-categories .collapse-icons i{
    display: none !important;
}

.block-categories .collapse-icons[aria-expanded=true]::after {
    transform: rotate(0deg);
}

.block-categories .collapse-icons[aria-expanded=true]::after {
    transform: rotate(90deg);
}

@media (max-width: 768px) {
    #category #left-column{
        display: block !important;
        position: fixed;
        width: 100vw;
        top: 0px;
        left: 0px;
        overflow-y: scroll;
        height: 100vh;
        padding-bottom: 100px !important;
        background-color: var(--color-light-grey);
        padding-inline: 20px !important;
    }
    #category #left-column:has(#search_filters_wrapper.hidden-sm-down){
        display: none !important;
    }
    #category #left-column #search_filters_wrapper{
        margin-inline: 0px !important;
    }
}

/* --------------------------- FILTRES --------------------------- */

#category #js-active-search-filters.active_filters{
    padding: 15px 20px !important;
    background: #ececec !important;
    display: flex;
    align-items: center;
    gap: 16px;
}

#category #js-active-search-filters.active_filters p{
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: var(--color-black);
    font-weight: normal;
    margin: 0px;
    white-space: nowrap;
}

#category #js-active-search-filters.active_filters ul{
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0px;
}

#category #js-active-search-filters.active_filters ul li{
    margin: 0px;
}

@media (min-width: 993px) {
    #category #js-active-search-filters.active_filters .filter-block .close:hover{
        color: var(--color-primary);
    }
}







body:has(#left-column #search_filters_wrapper:not(.hidden-sm-down)) #header,
#wrapper:has(#left-column #search_filters_wrapper:not(.hidden-sm-down)) .breadcrumb,
#wrapper:has(#left-column #search_filters_wrapper:not(.hidden-sm-down)) .block-categories{
    display: none !important;
}

#wrapper:has(#left-column #search_filters_wrapper:not(.hidden-sm-down)){
    padding: 0px !important;
}