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

#category .rowCategory{
    margin-inline: 0px;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 30px;
}

#category #category-header #title,
#category #left-column{
    grid-column: 1/4;
}

#category #category-header #js-product-list-header,
#category #category-header #subcategories,
#category #content-wrapper{
    grid-column: 4/13;
}

@media (width < 1400px) {
    #category #wrapper > .container {
        padding-inline: 30px;
    }
}

@media (max-width: 1200px) {
    #category #left-column,
    #category #category-header #title{
        grid-column: 1/4;
    }
    #category #category-header #js-product-list-header,
    #category #category-header #subcategories,
    #category #content-wrapper{
        grid-column: 4/13;
    }
}

@media (max-width: 992px) {
    #category #category-header #title,
    #category #category-header #js-product-list-header,
    #category #category-header #subcategories{
        grid-column: initial;
    }
}

@media (max-width: 768px) {
    #category .rowCategory{
        display: flex;
        flex-direction: column;
    }
    #category #left-column,
    #category #category-header #title,
    #category #category-header #js-product-list-header,
    #category #category-header #subcategories,
    #category #content-wrapper{
        grid-column: initial;
    }
}

/* --------------------------- CATÉGORIE HEADER --------------------------- */

#category #category-header{
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 30px;
    grid-column: 1/13;
}


#category #category-header #title h1{
    font-size: 2.25rem;
    line-height: 2.625rem;
    font-weight: 500;
}

#category #category-header #title .category-product-count{
    font-size: 1rem;
    line-height: 1.5rem;
    margin-block: 5px 0px;
}

#category #category-header #js-product-list-header .block-category{
    padding: 0px;
    margin: 0px;
    min-height: 0px;
}

#category #category-header #js-product-list-header .block-category .category-cover{
    margin-bottom: 25px;
    display: block;
}

#category #category-header #js-product-list-header .block-category .category-cover img{
    width: 100%;
    height: auto;
    aspect-ratio: 16/3;
    object-fit: cover;
}

#category #category-header #js-product-list-header .block-category .category-description,
#category #category-header #js-product-list-header .block-category .category-description *{
    font-size: .875rem;
    line-height: 1.25rem;
    margin: 0px;
}

#category #category-header #subcategories{
    margin: 0px;
    border: none !important;
}

#category #category-header #subcategories .subcategories-list{
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 40px 30px;
    margin: 0px !important;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

#category #category-header #subcategories .subcategories-list::-webkit-scrollbar{
    display: none;
}

#category #category-header #subcategories .subcategories-list li{
    width: auto;
    min-width: initial;
    margin: 0px;
    text-align: start;
}

#category #category-header #subcategories .subcategories-list li .subcategory-image{
    padding: 0px;
    margin-bottom: 10px;
}

#category #category-header #subcategories .subcategories-list li .subcategory-image img{
    aspect-ratio: 1;
    object-fit: cover;
    width: 100%;
}

#category #category-header #subcategories .subcategories-list li .subcategory-name{
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 600;
    margin: 0px;
    text-transform: none;
    color: var(--color-black) !important;
}

#category #category-header #subcategories .subcategories-list li .cat_desc{
    display: block;
    margin: 8px 0px 0px 0px !important;
}

#category #category-header #subcategories .subcategories-list li .cat_desc,
#category #category-header #subcategories .subcategories-list li .cat_desc *{
    font-size: .875rem;
    line-height: 1.25rem;
    font-weight: 500;
    color: var(--color-black) !important;
    margin: 0px;
}

@media (min-width: 993px) {
    #category #category-header #subcategories .subcategories-list li:hover .subcategory-name{
        color: var(--color-primary) !important;
    }
}

@media (max-width: 1600px) {
    #category #category-header #title h1{
        font-size: 1.75rem;
        line-height: 2.125rem;
    }
    #category #category-header #title .category-product-count{
        font-size: .875rem;
        line-height: 1.125rem;
    }
}

@media (max-width: 1400px) {
    #category #category-header #subcategories .subcategories-list{
        grid-template-columns: repeat(5, 1fr);
    }
}

@media (max-width: 1200px) {
    #category #category-header #subcategories .subcategories-list{
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 992px) {
    #category #category-header{
        display: flex;
        flex-direction: column;
        gap: 20px 0px;
    }
}

@media (max-width: 768px) {
    #category #category-header #title h1{
        font-size: 1.5rem;
        line-height: 1.75rem;
    }
    #category #category-header #subcategories{
        width: 100vw;
        transform: translateX(-20px);
    }
    #category #category-header #subcategories .subcategories-list{
        display: flex;
        justify-content: start;
        flex-wrap: nowrap;
        overflow-x: scroll;
        padding-inline: 20px;
    }
    #category #category-header #subcategories .subcategories-list li{
        width: 60vw;
        min-width: 60vw;
        max-width: 60vw;
    }
    #category #category-header #js-product-list-header .block-category .category-cover{
        margin-bottom: 20px;
    }
    #category #category-header #js-product-list-header .block-category .category-cover img{
        aspect-ratio: 16/6;
    }
}

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

#category #left-column{
    background-color: transparent;
    padding: 0px 0px 30px 0px;
    height: fit-content;
}

#left-column .block-categories{
    margin-bottom: 50px;
}

@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;
    }
    #category #left-column.active {
        background-color: var(--color-light-grey);
        z-index: 1000;
        padding: 67px 30px 30px 30px;
    }
    #category #left-column:has(#search_filters_wrapper.hidden-sm-down){
        display: none !important;
    }
    #category #left-column #search_filters_wrapper{
        margin-inline: 0px !important;
        display: flex;
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap;
        gap: 27px 34px;
    }
}

/* --------------------------- CATÉGORIE GRID --------------------------- */

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

#category #products{
    container-type: inline-size;
}

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

#category #products .products .product{
    padding: 0px;
    float: none;
    width: 100%;
}

#category #js-product-list > .products{
    margin-inline: 0px !important;
}

@container (max-width: 900px) {
    #category #products .products{
        grid-template-columns: repeat(3, 1fr);
    }
}

@container (max-width: 500px) {
    #category #products .products{
        grid-template-columns: repeat(1, 1fr);
    }
}

@media (max-width: 768px) {
    #category #products .products{
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 30px 15px;
    }
}

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

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

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

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

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

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

#category .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");
}

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

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

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

#_mobile_search_filters_clear_all a.btn.btn-primary.ok.js-search-filters-clear-all {
    background-color: var(--color-primary) !important;
    color: var(--color-white) !important;
    border-color: var(--color-primary) !important;
    margin: unset !important;
    text-transform: none !important;
}

@media (max-width: 768px) {
    #category .sort-by-row{
        justify-content: start;
    }
    #category .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;
        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='white'/%3E%3C/svg%3E");
    }
}

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

#category #js-active-search-filters.active_filters{
    padding: 0px 20px !important;
    background: var(--color-light-grey) !important;
    display: flex;
    align-items: center;
    gap: 16px;
}

#category #js-active-search-filters.active_filters p{
    font-size: 0.875rem;
    font-family: var(--ffMRe);
    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);
    }
}

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

.pagination {
    margin-block: 35px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 20px;
    color: var(--color-dark-grey);
    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-dark-grey);
    letter-spacing: normal !important;
    font-weight: normal;
}

.pagination .page-list li.current,
.pagination .page-list li.current a{
    color: var(--color-primary);
    font-family: var(--ffMBo);
}
@media (width < 1024px) {
    .pagination {
        gap: 20px;
    }

    .pagination .page-list{
        gap: 24px;
    }
}

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

    #category .pagination {
        margin-bottom: unset;
    }
}

/* --------------------------- CATEGORIE 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;
    }

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