.category-root {
  --theme-category__header-background-color: #efeee3;

  --category-main-width: 76%;
  --category-sidebar-width: 17%;
}
.category-root {
  display: flex;
  gap: calc(100% - var(--category-main-width) - var(--category-sidebar-width));
}

/* ------------------------------ Main content ------------------------------ */

.category-main {
  width: 100%;
  float: right;
}

.category-page-title {
  padding: 0 2rem;
  margin: 0 0 1.5rem 0;
  font-size: 2.6rem;
  font-family: Oswald;
  font-weight: 400;
}

.category-page-header {
  padding: 2rem;
  margin: 2rem;
  background-color: var(--theme-category__header-background-color);
}

.category-orderby {
  background-color: var(--theme__background_color);
}

.boutique-show-filters {
  top: 4.25rem;
  z-index: 1;
}

.category-page-products {
  --cpg-columns-target: 1; /* Target number of columns. */
  --cpg-columns-max: 4; /* Copied from the class "custom-product-group" for compatibility. */
  --cpg-columns: calc(min(var(--cpg-columns-target), var(--cpg-columns-max))); /* Current number of columns. */
  display: grid;
  grid-template-columns: repeat(var(--cpg-columns), minmax(0, 1fr));
  padding: 1rem;
}

/* ----- Load More Products -----*/

.category-load-more-products-wrapper {
  text-align: center;
}

.category-load-more-products {
  display: inline-block;
  padding: 1rem 1.6rem;
  font-weight: bold;
  background-color: var(--theme__main-color);
}
.category-load-more-products[hidden] {
  display: none;
}

/* ------------------------------ Sidebar ------------------------------ */

.category-sidebar {
  
}

.category-sidebar__content {
  width: var(--category-sidebar-width);
}

/* ---------- Sub-categories & Widgets ---------- */

.category-sidbar-widget {
  margin-bottom: 2rem;
}

.category-sidbar-widget--current .category-sidbar-widget-item a,
.category-sidbar-widget-item--current a {
  color: var(--theme__main-color);
}

.category-sidbar-widget-item__count {
  float: right;
  opacity: .7;
}

.category-price-range-wrapper {
  min-height: 1.286rem; /* Same height as the price range (to reduce layout shift). */
}
.category-price-range-wrapper .noUi-connect {
  background-color: var(--theme__main-color-variation);
}

/* ---------- Price Slider ---------- */

/* @HACK Priority hacks! */
.filter-price-range-slider.filter-price-range-slider {
  --slider-color: #F88D32;
  height: 5px;
  background-color: #F4F0F0;
  border: none;
}
.filter-price-range-slider.filter-price-range-slider .noUi-connect {
  background-color: var(--slider-color);
}
.filter-price-range-slider.filter-price-range-slider .noUi-handle {
  background: var(--slider-color);
  border: 7px solid white;
  border-radius: 50%; /* Makes the handle circular */
  box-shadow: 0 0 3px 0 rgba(0,0,0,.15);
  cursor: pointer;
  width: 20px; /* Handle size */
  height: 20px;
  outline: none;
  top: -7px; /* Adjust vertical position */
}
.filter-price-range-slider.filter-price-range-slider .noUi-connect {
  background: var(--slider-color);
}
.filter-price-range-slider.filter-price-range-slider .noUi-handle::before,
.filter-price-range-slider.filter-price-range-slider .noUi-handle::after {
  content: none;
}

/* ---------- Dropdown Filter ---------- */

.filter-dropdown {
  position: relative;
}

.filter-dropdown__input-list {
  padding: .3rem;
  border: 1px solid black;
  border-radius: 3px;
}
.filter-dropdown__input-list li {
  display: inline-block;
}
.filter-dropdown__input-list [data-filter-dropdown-input] {
  display: inline-block;
  width: 100%;
}

.filter-dropdown__dropdown-input-list-item {
  padding: 0 0.3rem;
  margin: 0 .2rem .2rem 0;
  border: 1px solid #aaa;
  border-radius: 5px;
  background-color: #e4e4e4;
  color: #555;
}

.filter-dropdown__dropdown-list {
  position: absolute;
  width: 100%;
  max-height: 20rem;
  overflow-y: auto;
  background-color: var(--theme__background_color);
  border: 1px solid black;
  z-index: 1;
}
[data-filter-dropdown="0"] .filter-dropdown__dropdown-list {
  display: none; /* Hide when closed */
}

.filter-dropdown__dropdown-list-item {
  padding: .5rem;
  font-size: 1.2rem;
  cursor: pointer;
}
.filter-dropdown__dropdown-list-item[data-filter-dropdown-selected] {
  background-color: #ddd;
}
.filter-dropdown__dropdown-list-item:hover {
  background-color: #0073aa;
}

.filter-dropdown-apply {
  padding: 6px 13px;
  border-radius: 3px;
  margin-top: 5px;
  font-size: 12px;
  font-weight: 700;
  background-color: #282828;
  color: #fff;
}

/* ---------- ... ---------- */

.overlay {
  background: rgba(52,53,55,.4);
  content: "";
  transition: opacity .6s,visibility .6s;
}

/* ------------------------------ Media ------------------------------ */

@media (min-width: 640px) {
  .category-page-products {
    --cpg-columns-target: 2;
  }
}
@media (min-width: 768px) {
  .category-page-products {
    --cpg-columns-target: 3;
  }
}
@media (max-width: 1023px) {
  .category-page-title {
    padding: 0 1rem;
    margin: 0 0 .5rem 0;
  }
  
  .category-page-header {
    padding: 1rem;
    margin: 0 1rem 1rem 1rem;
  }  
}

/* ------------------------------ ... ------------------------------ */