.category__banner--img {
  margin: var(--spacing-6) 0;
}

.category-sort {
  gap: var(--spacing-10);
}

.category__sort--item {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
}

.category__sort--item input {
  width: 15px;
  height: 15px;
  border: none;
  outline: none;
  display: none;
}

.category__sort--item label {
	cursor: pointer;
}

.category__sort--item input:checked {
  accent-color: #c1864b;
}

.category__sort--item input:checked + label {
  color: #c1864b;
}

.category-title {
  font-size: var(--font-size-base);
  color: var(--color-neutral-550);
}

.category__sort--title-text {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
}

.main-container {
  gap: var(--spacing-6);
}

.products-container {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-10);
  flex: 1;
}

.product__filter--title {
  border-bottom: 1px solid var(--color-neutral-200);
  padding: var(--spacing-3);
  font-weight: var(--font-weight-medium);
}

.product__filter--title-items {
  gap: var(--spacing-1);
}

.open__filters--modal,
.filters__back--btn {
  display: none;
}

.filter-wrapper {
  width: 325px;
  border: 1px solid var(--color-neutral-200);
  border-radius: var(--radius-lg);
  -webkit-border-radius: var(--radius-lg);
  -moz-border-radius: var(--radius-lg);
  -ms-border-radius: var(--radius-lg);
  -o-border-radius: var(--radius-lg);
}

.filter-items {
  padding: var(--spacing-4);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-6);
}

.filter__item--title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-normal);
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  user-select: none;
}

.filter__item--arrow {
  will-change: transform;
  transition: transform var(--transition-slow);
  -webkit-transition: transform var(--transition-slow);
  -moz-transition: transform var(--transition-slow);
  -ms-transition: transform var(--transition-slow);
  -o-transition: transform var(--transition-slow);
}

.filter__item--arrow.active {
  transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
}

.filter-items .filter__item--title {
  margin-bottom: var(--spacing-4);
}

.toggle-switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 24px;
  margin-bottom: var(--spacing-4);
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-switch input:checked + label {
  border-color: var(--color-secondary-500);
}

.toggle-switch label {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--color-neutral-0);
  border: 2px solid var(--color-neutral-450);
  transition: all var(--transition-normal);
  border-radius: var(--radius-lg);
  -webkit-transition: all var(--transition-normal);
  -moz-transition: all var(--transition-normal);
  -ms-transition: all var(--transition-normal);
  -o-transition: all var(--transition-normal);
  -webkit-border-radius: var(--radius-lg);
  -moz-border-radius: var(--radius-lg);
  -ms-border-radius: var(--radius-lg);
  -o-border-radius: var(--radius-lg);
}

.toggle-switch label::after {
  position: absolute;
  content: "";
  height: 15px;
  width: 15px;
  left: 2px;
  bottom: 2px;
  background-color: var(--color-neutral-450);
  transition: all var(--transition-normal);
  border-radius: 50%;
  -webkit-transition: all var(--transition-normal);
  -moz-transition: all var(--transition-normal);
  -ms-transition: all var(--transition-normal);
  -o-transition: all var(--transition-normal);
}

.filter-toggle {
  gap: var(--spacing-12);
}

.filter-toggle input:checked + label::after {
  background-color: var(--color-secondary-500);
  transform: translateX(26px);
  -webkit-transform: translateX(26px);
  -moz-transform: translateX(26px);
  -ms-transform: translateX(26px);
  -o-transform: translateX(26px);
}

.price__filter--container {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
}

.filter__item--price {
  gap: var(--spacing-8);
}

.to__price--input,
.from__price--input {
  width: 100%;
  height: 40px;
  padding: var(--spacing-1) var(--spacing-2);
  text-align: end;
  outline: none;
  border: 1px solid var(--color-neutral-250);
  border-radius: var(--radius-md);
  -webkit-border-radius: var(--radius-md);
  -moz-border-radius: var(--radius-md);
  -ms-border-radius: var(--radius-md);
  -o-border-radius: var(--radius-md);
}

.to__price--input::placeholder,
.from__price--input::placeholder {
	color: var(--color-neutral-550);
	font-size: var(--font-size-sm);
}

.product-filter {
  margin-top: var(--spacing-8);
}

.products-list {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.products-list::after,
.products-list::before {
  content: "";
  position: absolute;
  background: var(--color-neutral-0);
  z-index: 1;
}

.products-list::after {
  right: 0;
  bottom: 0;
  height: 1px;
  width: 100%;
}

.products-list::before {
  right: 0;
  top: 0;
  height: 100%;
  width: 1px;
}

.product__card--item {
  border: none;
  border-radius: 0;
  border-right: 1px solid var(--color-neutral-200);
  border-bottom: 1px solid var(--color-neutral-200);
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  -ms-border-radius: 0;
  -o-border-radius: 0;
}

.brand-filter {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
}

.brand-search {
  position: relative;
  border: 1px solid var(--color-neutral-450);
  border-radius: var(--radius-lg);
  -webkit-border-radius: var(--radius-lg);
  -moz-border-radius: var(--radius-lg);
  -ms-border-radius: var(--radius-lg);
  -o-border-radius: var(--radius-lg);
}

.brand-search input {
  border: none;
  outline: none;
  background: unset;
  width: 100%;
  height: 46px;
  padding: var(--spacing-2);
  border-radius: var(--radius-lg);
  -webkit-border-radius: var(--radius-lg);
  -moz-border-radius: var(--radius-lg);
  -ms-border-radius: var(--radius-lg);
  -o-border-radius: var(--radius-lg);
}

.brand-search img {
    position: absolute;
    left: var(--spacing-2);
    top: 0;
    bottom: 0;
    height: 100%;
    width: 24px;
}

.filter__item--wrapper {
  display: flex;
  position: relative;
  gap: var(--spacing-3);
}

.filter__item--label {
  position: relative;
  display: block;
  min-width: 24px;
  min-height: 24px;
  border: 1px solid var(--color-neutral-550);
  border-radius: var(--radius-md);
  -webkit-border-radius: var(--radius-md);
  -moz-border-radius: var(--radius-md);
  -ms-border-radius: var(--radius-md);
  -o-border-radius: var(--radius-md);
}

.filter__item--checkbox {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
}

.filter__item--wrapper input {
  display: none;
}

.filter__item--checkbox input:checked + .filter__item--label::before,
.color__filter--item input:checked + .color__filter--item-bg::before {
  content: "";
  display: flex;
  flex: 0 0 16px;
  width: 16px;
  height: 13px;
  background-image: url("data:image/svg+xml,%3Csvg width='16' height='13' viewBox='0 0 16 13' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.08826 13C4.53503 13 3.9818 12.7977 3.54504 12.3641L0.633303 9.4736C-0.211101 8.63535 -0.211101 7.24792 0.633303 6.40967C1.47771 5.57143 2.87534 5.57143 3.71974 6.40967L5.08826 7.76821L12.2803 0.628683C13.1247 -0.209561 14.5223 -0.209561 15.3667 0.628683C16.2111 1.46693 16.2111 2.85436 15.3667 3.69261L6.63148 12.3641C6.19472 12.7977 5.64149 13 5.08826 13Z' fill='%23333333'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  transform: translate(-15%, 30%);
}

.color__filter--item input:checked + .color__filter--item-bg::before {
	transform: translate(-55%, 80%);
}

.filter__color--items {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--spacing-2);
}

.color__filter--item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-xs);
}

.color__filter--item input {
  display: none;
}

.color__filter--item-bg {
  position: relative;
  width: 35px;
  height: 35px;
  cursor: pointer;
  background: blue;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
}

.products-infinite-sentinel {
	width: 100%;
	height: 1px;
}

.products-loading {
	width: 100%;
	padding: 18px 12px;
	text-align: center;
	font-size: 13px;
	font-weight: 500;
	color: #8a5b5b;
}

.products-loading {
	position: relative;
}

.products-loading::before {
	content: "";
	display: inline-block;
	width: 15px;
	height: 15px;
	margin-left: 8px;
	vertical-align: middle;
	border: 2px solid rgba(238, 131, 131, 0.25);
	border-top-color: #ee8383;
	border-radius: 50%;
	animation: shimmer-products-spin 0.8s linear infinite;
}

@keyframes shimmer-products-spin {
	to {
		transform: rotate(360deg);
	}
}

@media screen and (max-width: 1024px) {
  .products-list {grid-template-columns: repeat(2, 1fr);}
  .category-sort {gap: var(--spacing-2);}
}

@media screen and (max-width: 768px) {
  .main-container {
    flex-direction: column;
  }

  .products-container {
    width: 100%;
    gap: var(--spacing-3);
  }

  .product-filter {
    max-height: 100dvh;
    overflow-y: auto;
    margin-top: 0;
    padding: var(--spacing-4);
    display: block;
    position: fixed;
    top: 100%;
    right: 100%;
    width: 100vw;
    height: 100svh;
    background: var(--color-neutral-0);
    z-index: 111;
    transition:opacity,transform 0.3s ease;
    pointer-events: none;
    will-change: opacity, transform;
    transform: translate(-100%, -100%);
  }

  .product-filter.active {
    pointer-events: all;
    transform: translate(100%, -100%);
    -webkit-transform: translate(100%, -100%);
    -moz-transform: translate(100%, -100%);
    -ms-transform: translate(100%, -100%);
    -o-transform: translate(100%, -100%);
  }

  .filter-wrapper {
	border: none;
	width: 100%;
  }

  .filters__back--btn,
  .open__filters--modal {
    display: flex;
  }

  .product__filter--title {
	border-bottom: none;
  }

  .open__filters--modal {
    gap: var(--spacing-2);
    border: 1px solid var(--color-neutral-200);
    padding: var(--spacing-1) var(--spacing-3);
	font-size: var(--font-size-sm);
    border-radius: var(--radius-md);
    -webkit-border-radius: var(--radius-md);
    -moz-border-radius: var(--radius-md);
    -ms-border-radius: var(--radius-md);
    -o-border-radius: var(--radius-md);
  }

  .category-sort {
    justify-content: space-between;
  }
}

@media screen and (max-width: 576px) {
  .section {margin: 0;}
  .pagination {margin-bottom: var(--spacing-3);}
  .category-sort {flex-wrap: wrap;}
  .main-container {padding: 0 var(--spacing-4);}
  .category__banner--img {margin: 0;}

  .category__sort--item,
  .category__sort--title-text {
	font-size: var(--font-size-xs);
  }

  .filter__item--checkbox { font-size: var(--font-size-sm); }
  .filter-items .filter__item--title { font-size: var(--font-size-base); }

  .breadcrumb {
	margin-top: var(--spacing-4);
  }
}