/* ============================================================================
   PAGE CATÉGORIE - CATEGORY
   ============================================================================ */

/* --------------------------------------------------------------------------
   GESTION GRILLE - GRID LAYOUT
   -------------------------------------------------------------------------- */

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

#category > main > #wrapper {
  overflow-x: hidden;
}

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

#category #left-column {
  padding: unset;
}

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

@media (max-width: 1200px) {
  #category #left-column,
  #category #category-header #title {
    grid-column: 1/6;
  }

  #category #category-header #js-product-list-header,
  #category #category-header #subcategories,
  #category #content-wrapper {
    grid-column: 6/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: flex;
  gap: 130px;
  align-items: center;
  height: 30vw;
  margin-top: -12px;
}

#category #category-header #title h1 {
  font-family: var(--ffSLi);
  font-size: 2.8125rem;
  line-height: 3.25rem;
  margin-bottom: 22px;
}

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

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

#category #category-header #js-product-list-header .block-category .category-cover {
  margin-bottom: 1.5625rem;
  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;
  display: none;
}

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

#category #category-header #js-product-list-header .block-category .category-description > p:not(:last-child) {
  margin-bottom: 25px;
}

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

#category #category-header #subcategories .subcategories-list {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 2.5rem 1.875rem;
  margin: 0 !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: 0;
  text-align: start;
}

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

#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: 0;
  text-transform: none;
  color: var(--color-black) !important;
}

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

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

#category #category-header .introduction {
  width: 34%;
}

#category #wrapper .container {
  position: static;
}

#category #category-header .illustration {
  width: 52.5vw;
  position: absolute;
  right: -17px;
  aspect-ratio: 1107/617;
  height: auto;
  object-fit: cover;
  padding: 19px 16px;
  border: 1px solid var(--color-black);
  background-image: url(../../img/background/background.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

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

  #category #category-header {
    height: 28vw;
    max-width: 1660px;
    margin-inline: auto;
    padding-inline: unset;
    margin-bottom: 78px;
  }

  #category #category-header .illustration {
      aspect-ratio: 1090/580;
      right: -.75vw;
  }
}

/* @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: 0.875rem;
    line-height: 1.125rem;
  }
} */

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

  #category #category-header {
    height: 42.5vw;
  }
}

@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: 1.25rem 0;
  }
}

@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(-1.25rem);
  }

  #category #category-header #subcategories .subcategories-list {
    display: flex;
    justify-content: start;
    flex-wrap: nowrap;
    overflow-x: scroll;
    padding-inline: 1.25rem;
  }

  #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: 3px;
  }

  #category #category-header #js-product-list-header .block-category .category-cover img {
    aspect-ratio: 16/6;
  }
}

@media (width < 1651px) {
    #category #category-header .introduction {
        width: 42.5%;
    }
}

@media (width < 1440px) {
    #category #category-header .introduction {
        width: 42.5vw;
    }

    #category #category-header .illustration {
        aspect-ratio: 1090 / 880;
        right: -1.75vw;
    }
    
    #category #category-header {
      margin-top: 22px;
    }
}

@media (width < 1201px) {
    #category #category-header {
      margin-top: 52px;
    }

    #category #category-header .introduction {
        width: 45vw;
    }

    #category #category-header .illustration {
        right: -3vw;
        aspect-ratio: 897 / 777;
    }
}

@media (width < 1025px) {
    #category #category-header .illustration {
        right: -2.25vw;
        width: 60vw !important;
        aspect-ratio: 1107 / 777;
    }

    #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.375rem;
    }

    #category #category-header {
      margin-top: unset;
    }

    #category #category-header #title h1 {
        font-size: 2rem;
        line-height: 2.375rem;
        margin-bottom: 15px;
    }

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

    #category #category-header {
        height: calc(40vw + 21px);
        width: 35vw!important;
        margin-inline: unset;
        margin-bottom: 78px;
        justify-content: center;
    }

    #category #category-header .introduction {
        width: 35vw !important;
        margin-top: unset;
    }

    #category #category-header #js-product-list-header .block-category .category-description {
      height: 100%;
      overflow-y: hidden;
    }

    .seeMore {
      font-family: var(--ffMRe);
      text-decoration: underline;
      font-size: 1.0625rem;
      line-height: 1.5625rem;
      margin-top: 10px;
      display: block;
    }
}

@media (width < 769px) {
    #headerTop .elementor-row:has(> .elementor-column.elementor-col-50) {
        display: flex;
        flex-direction: column-reverse;
        gap: 24px!important;
    }

    #category #category-header #js-product-list-header .block-category .category-description,
    #category #category-header #js-product-list-header .block-category .category-description * {
        font-size: .9375rem;
        line-height: 1.5625rem;
    }

    #category #category-header {
      margin-top: unset;
    }

    #category #category-header #title h1 {
        margin-bottom: 4px;
    }

    #category #category-header {
        height: auto;
        display: flex;
        flex-direction: column-reverse;
        width: 100%!important;
        gap: 20px;
        margin-bottom: 32px;
    }

    #category #category-header .illustration {
        position: static;
        right: unset;
    }

    #category #category-header .introduction,
    #category #category-header .illustration {
        width: 100% !important;
    }

    #category #category-header .illustration {
       padding: 10px 8px;
       aspect-ratio: 322/330;
    }

    #category #category-header #title h1 {
        margin-bottom: unset;
    }

    #category #category-header .ce-widgets-space--gap>.elementor-column-wrap>.elementor-widget-wrap {
        gap: 20px;
    }
}

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

#left-column {
  background-color: var(--color-white);
  padding: 1.875rem 1.25rem;
  height: fit-content;
}

#left-column:not(:has(> *)) {
  display: none;
}

#left-column .block-categories {
  margin-bottom: 3.125rem;
}

#category #js-product-list {
  padding-left: 138px;
} 

@media (width < 1921px) {
  #category #js-product-list {
    padding-left: 8.75%;
  }
}

@media (width < 1441px) {
  #category #js-product-list {
    padding-left: 5%;
  }
}

@media (width < 1201px) {
  #category #js-product-list {
    padding-left: 2.5%;
  }
}

@media (width < 1025px) {
  #category #js-product-list {
    padding-left: unset;
  }
}

@media (max-width: 768px) {
  #category #left-column {
    display: block !important;
    /* position: fixed; */
    /* width: 100vw; */
    top: 0;
    left: 0;
    overflow-y: scroll;
    scrollbar-width: none;
    -ms-overflow-style: none;
    /* height: 100vh; */
    /* padding-bottom: 6.25rem !important; */
  }

  #category #left-column::-webkit-scrollbar {
    display: none;
  }

  #category #left-column:has(#search_filters_wrapper.hidden-sm-down) {
    display: none !important;
  }

  #category #left-column #search_filters_wrapper {
    margin-inline: 0 !important;
  }
}

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

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

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

#main > #products .products {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.75rem 1.5625rem;
}

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

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

@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: 1.875rem 0.9375rem;
  }
}

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

/* --------------------------------------------------------------------------
   TRIER PAR - SORT OPTIONS
   -------------------------------------------------------------------------- */

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

.sort-by-row {
  gap: 1rem;
  justify-content: end;
}

.sort-by-row .sort-by,
.sort-by-row .products-sort-order {
  width: auto !important;
  padding: 0 !important;
  margin: 0 !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-dark-grey);
  padding: 0.5rem 2.1875rem 0.5rem 0.625rem;
  border: 1px solid var(--color-dark-grey);
  background-color: var(--color-white);
  position: relative;
}

.sort-by-row .products-sort-order button::after {
  content: '';
  display: block;
  height: 1.25rem;
  width: 1.25rem;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  position: absolute;
  right: 0.375rem;
  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: 0.625rem 2.5rem;
  margin-bottom: unset;
}

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

.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: 0;
  padding: 0;
}

@media (max-width: 768px) {
  .sort-by-row {
    justify-content: start;
  }

  .products-selection .showing {
    font-size: 0.875rem;
    line-height: 1.125rem;
  }

  #js-product-list-top .filter-button {
    position: fixed;
    bottom: 1.25rem;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: calc(100% - 2.5rem);
    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: 0.75rem;
  }

  #js-product-list-top .filter-button #search_filter_toggler::after {
    content: "";
    display: block;
    width: 1.125rem;
    height: 1.125rem;
    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 - ACTIVE FILTERS
   -------------------------------------------------------------------------- */

#category #js-active-search-filters.active_filters {
  padding: 0.9375rem 1.25rem !important;
  background: var(--color-light-grey) !important;
  display: flex;
  align-items: center;
  gap: 1rem;
}

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

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

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

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

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

.pagination {
  margin-block: 2.1875rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.625rem 1.25rem;
  color: var(--color-dark-grey);
  font-size: 1rem;
  line-height: 1.25rem;
}

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

.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-bottom: 70px;
}

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

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

/* --------------------------------------------------------------------------
   AUTRES PAGES - NEW PRODUCTS, BEST SALES, PRICES DROP, SEARCH
   -------------------------------------------------------------------------- */

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

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

#new-products #left-column:not(:has(> *)) + #content-wrapper,
#best-sales #left-column:not(:has(> *)) + #content-wrapper,
#prices-drop #left-column:not(:has(> *)) + #content-wrapper {
  padding-left: unset!important;
  width: 100%!important;
  margin-bottom: 56px!important;
}

#new-products #left-column:not(:has(> *)) + #content-wrapper #main > #products .products,
#best-sales #left-column:not(:has(> *)) + #content-wrapper #main > #products .products,
#prices-drop #left-column:not(:has(> *)) + #content-wrapper #main > #products .products {
  grid-template-columns: repeat(4, 1fr);
}

@media (width < 1201px) {
  #new-products #left-column:not(:has(> *)) + #content-wrapper #main > #products .products,
  #best-sales #left-column:not(:has(> *)) + #content-wrapper #main > #products .products,
  #prices-drop #left-column:not(:has(> *)) + #content-wrapper #main > #products .products {
    grid-template-columns: repeat(3, 1fr);
  }
}

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