#category .breadcrumb{
    display: none;
}

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

#category .rowCategory{
    margin-inline: 0px;
}

@media (max-width: 768px) {
    #category .rowCategory{
        display: flex;
        flex-direction: column;
    }
}

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

#category #category-header{
    margin-bottom: 40px;
}

#js-product-list-header h1{
    font-size: 2.25rem;
    line-height: 2.625rem;
    font-weight: bold;
    position: absolute;
    bottom: 20px;
    right: 36px;
    color: var(--color-white);
    margin: 0px;
    text-transform: uppercase;
    text-align: end;
}

#js-product-list-header h1.h1-without-cover{
    position: static;
    color: var(--color-primary);
    text-align: start;
    margin-bottom: 30px;
}

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

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

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

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

/* #js-product-list-header .block-category .category-cover::before{
    content: '';
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
} */

#js-product-list-header .block-category .category-description{
    margin-bottom: 30px !important;
}

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

#category.category-id-11 #subcategories,
#category.category-id-12 #subcategories{
    display: none;
}

#subcategories{
    margin-bottom: 40px;
    border: none !important;
}

#subcategories .subcategories-list{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 30px;
    margin: 0px !important;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

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

#subcategories .subcategories-list li{
    width: auto;
    margin: 0px;
    text-align: start;
    border: solid 1px var(--color-light-grey);
    border-radius: 12px;
    min-width: 180px;
}

#subcategories .subcategories-list li a{
    display: block;
    height: 100%;
}

#subcategories .subcategories-list li figure{
    display: grid;
    grid-template-columns: 70px auto;
    margin: 0px;
    height: 100%;
}

#subcategories .subcategories-list li figure figcaption{
    padding: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
}

#subcategories .subcategories-list li .subcategory-image{
    padding: 0px;
    background-color: #F9F9F9;
    border-radius: 12px;
    padding: 12px;
}

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

#subcategories .subcategories-list li .subcategory-name{
    font-size: .875rem !important;
    line-height: 1.125rem !important;
    font-weight: 500;
    margin: 0px;
    text-transform: none;
    color: var(--color-black) !important;
    text-align: center;
}

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

#subcategories .subcategories-list li .cat_desc,
#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) {
    #subcategories .subcategories-list li:hover .subcategory-name{
        color: var(--color-primary) !important;
    }
    #subcategories .subcategories-list li:hover{
        border-color: var(--color-primary);
    }
}

@media (max-width: 1600px) {
    #js-product-list-header 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: 992px) {
    #category #category-header{
        display: flex;
        flex-direction: column;
        gap: 20px 0px;
    }
}

@media (max-width: 768px) {
    #js-product-list-header h1{
        font-size: 1.5rem;
        line-height: 1.75rem;
        right: 20px;
        bottom: 10px;
        max-width: calc(100vw - 80px);
    }
    #subcategories{
        width: 100vw;
        transform: translateX(-20px);
        margin-bottom: 20px;
    }
    #subcategories .subcategories-list{
        justify-content: start;
        flex-wrap: nowrap;
        overflow-x: scroll;
        padding-inline: 20px;
        gap: 8px;
    }
    #subcategories .subcategories-list li figure{
        grid-template-columns: 70px auto;
    }
    #js-product-list-header .block-category .category-cover{
        margin-bottom: 20px;
    }
    #js-product-list-header .block-category .category-cover img{
        aspect-ratio: 34/22;
    }
    #subcategories .subcategories-list li figure figcaption{
        padding: 12px;
    }
    #js-product-list-header .block-category .category-description{
        margin-bottom: 20px !important;
    }
}

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

#left-column{
    background-color: var(--color-white);
    padding: 30px 20px;
    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:has(#search_filters_wrapper.hidden-sm-down){
        display: none !important;
    }
    #category #left-column #search_filters_wrapper{
        margin-inline: 0px !important;
    }
}

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

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

#main > #products{
    container-type: inline-size;
}

#main > #products .products{
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 80px 70px;
}

#main > #products .products .product{
    padding: 0px;
    float: none;
    width: 100%;
    min-width: 100%;
    max-width: 100%;
}

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

@media (max-width: 1600px) {
    #main > #products .products{
        gap: 70px 50px;
    }
}

@media (max-width: 1400px) {
    #main > #products .products{
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

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

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

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

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

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

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

.sort-by-row{
    gap: 16px;
    justify-content: end;
    display: none !important;
}

.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{
    border: solid 1px var(--color-black);
    border-radius: 5px;
    position: relative;
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 11px 28px;
    font-size: 1rem !important;
    line-height: 1.25rem !important;
    background: transparent !important;
}

.sort-by-row .products-sort-order button::after{
    content: '';
    display: block;
    height: 7px;
    width: 13px;
    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='12.459' height='6.729' viewBox='0 0 12.459 6.729'%3E%3Cpath id='Tracé_19' data-name='Tracé 19' d='M6.587,5.887.824.141A.483.483,0,0,0,.142.825l5.419,5.4-5.42,5.4a.483.483,0,0,0,.682.684L6.587,6.571a.483.483,0,0,0,0-.684Z' transform='translate(12.459) rotate(90)' fill='%23010833'/%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-sort-order .dropdown-menu{
    box-shadow: none !important;
    padding: 0px !important;
    border-radius: 5px;
}

.products-sort-order .select-title{
    border: solid 1px var(--color-black);
    border-radius: 5px;
    position: relative;
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 11px 28px;
}

.products-sort-order .select-list{
    border-radius: 5px;
}

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

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

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

.products-selection .total-products,
.products-selection .total-products p{
    margin: 0px;
    padding: 0px;
}

#category #products .displayHeaderCategory{
    background: #F9F9F9 !important;
    padding: 16px 40px;
    display: flex;
    justify-content: space-between;
    gap: 20px 50px;
    flex-wrap: wrap;
}

@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;
        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='w'%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");
    }
    #category #products .displayHeaderCategory{
        padding: 16px 20px;
        gap: 15px;
    }
}

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

#category #js-active-search-filters.active_filters{
    padding: 15px 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;
    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);
}

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

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

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

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

/* --------------------------- ADVICE --------------------------- */

#category #js-product-list-footer .adviceSection{
    padding-block: 70px;
    background-color: #F9F9F9;
}

#category #js-product-list-footer .adviceSection .advice-content{
    background-color: var(--color-white);
}

@media (max-width: 992px) {
    #category #js-product-list-footer .adviceSection{
        padding-block: 30px;
    }
}

/* --------------------------- ADDITIONNAL INFORMATION --------------------------- */

#category #js-product-list-footer .additional-information{
    display: grid;
    gap: 20px 170px;
    margin-top: 100px;
}

#category #js-product-list-footer .additional-information.has-image{
    grid-template-columns: repeat(2, 1fr);
    align-items: center;
}

#category #js-product-list-footer .additional-information.full-width{
    grid-template-columns: 1fr;
}

#category #js-product-list-footer .additional-information .category-name{
    font-size: 2.75rem;
    line-height: 3.125rem;
    font-weight: bold;
    color: var(--color-primary);
    text-transform: uppercase;
    margin-bottom: 30px;
}

#category #js-product-list-footer .additional-information .category-description,
#category #js-product-list-footer .additional-information .category-description *{
    font-size: 1rem;
    line-height: 1.25rem;
}

#category #js-product-list-footer .additional-information .category-description h1,
#category #js-product-list-footer .additional-information .category-description h2,
#category #js-product-list-footer .additional-information .category-description h3,
#category #js-product-list-footer .additional-information .category-description h4,
#category #js-product-list-footer .additional-information .category-description h5,
#category #js-product-list-footer .additional-information .category-description h6{
    font-size: 1.25rem;
    line-height: 1.5rem;
    margin-bottom: 20px;
}



#category #js-product-list-footer .additional-information .right-column{
    position: relative;
}

#category #js-product-list-footer .additional-information .right-column::before{
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border: solid 2px var(--color-primary);
    bottom: 30px;
    right: 60px;
}

#category #js-product-list-footer .additional-information .category-footer-image{
    width: 100%;
    height: auto;
    object-fit: cover;
    aspect-ratio: 62/50;
}

@media (max-width: 1700px) {
    #category #js-product-list-footer .additional-information .category-name{
        font-size: 2.1875rem;
        line-height: 2.5rem;
        margin-bottom: 20px;
    }
}

@media (max-width: 1200px) {
    #category #js-product-list-footer .additional-information .category-name{
        font-size: 1.875rem;
        line-height: 2.1875rem;
    }
    #category #js-product-list-footer .additional-information{
        gap: 20px 120px;
        margin-top: 60px;
    }
}

@media (max-width: 992px) {
    #category #js-product-list-footer{
        margin-block: 40px;
    }
    #category #js-product-list-footer .additional-information.has-image{
        grid-template-columns: 1fr;
    }
    #category #js-product-list-footer .additional-information .category-name{
        font-size: 1.625rem;
        line-height: 1.875rem;
    }
    #category #js-product-list-footer .additional-information .right-column::before{
        display: none;
    }
    #category #js-product-list-footer .additional-information .category-description h1,
    #category #js-product-list-footer .additional-information .category-description h2,
    #category #js-product-list-footer .additional-information .category-description h3,
    #category #js-product-list-footer .additional-information .category-description h4,
    #category #js-product-list-footer .additional-information .category-description h5,
    #category #js-product-list-footer .additional-information .category-description h6{
        font-size: 1.125rem;
        line-height: 1.375rem;
        margin-bottom: 15px;
    }
}

@media (max-width: 768px) {
    #category #js-product-list-footer .additional-information .category-description-wrapper{
        position: relative;
    } 
    #category #js-product-list-footer .additional-information .category-description{
        max-height: 110px;
        overflow: hidden;
        position: relative;
        transition: max-height 0.3s ease;
    }
    #category #js-product-list-footer .additional-information .category-description-wrapper.expanded .category-description{
        max-height: none;
    }
    
    #category #js-product-list-footer .additional-information .category-description-wrapper.expanded .category-description::after{
        opacity: 0;
    }
    
    #category #js-product-list-footer .additional-information .btn-toggle-description{
        color: var(--color-dark-grey);
        text-decoration: underline;
        font-size: 16px;
        line-height: 20px;
        margin-top: 12px;
    }
    
    #category #js-product-list-footer .additional-information .btn-toggle-description .text-less{
        display: none;
    }
    
    #category #js-product-list-footer .additional-information .category-description-wrapper.expanded .btn-toggle-description .text-more{
        display: none;
    }
    
    #category #js-product-list-footer .additional-information .category-description-wrapper.expanded .btn-toggle-description .text-less{
        display: inline;
    }
}

@media (min-width: 769px) {
    #category #js-product-list-footer .additional-information .btn-toggle-description{
        display: none;
    }
}

/* --------------------------- AUTRE --------------------------- */

#new-products h1#title,
#best-sales h1#title, 
#prices-drop h1#title,
#search h1#title{
    color: var(--color-black);
    margin-bottom: 25px;
}

#new-products #content-wrapper,
#best-sales #content-wrapper, 
#prices-drop #content-wrapper{
    padding-left: 40px !important;
}

@media (max-width: 768px) {
    #new-products #content-wrapper,
    #best-sales #content-wrapper, 
    #prices-drop #content-wrapper{
        padding-left: 0px !important;
        margin-top: 40px !important;
    }
}