.catalog-listing {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 30px;
  width: 100%;
  height: 1391px;
  padding: 0 20px;
  color: var(--color-light);
  background: var(--color-dark);
  border: 1px solid rgba(244, 246, 244, 0.1);
}

.catalog-listing__filter {
  position: sticky;
  top: 20px;
  z-index: 2;
  align-self: start;
  width: min(100%, 370px);
  height: 564px;
  margin-top: -1px;
  margin-left: -1px;
  padding: 26px 24px;
  background: #151917;
  border: 1px solid rgba(244, 246, 245, 0.12);
  border-radius: 16px;
}

.catalog-listing__filter-heading,
.catalog-listing__range-heading,
.catalog-listing__toolbar,
.catalog-listing__sort,
.catalog-listing__bottom,
.catalog-listing__pagination,
.catalog-listing__price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.catalog-listing__filter-heading > strong {
  font-size: 12px;
  font-weight: 600;
  line-height: normal;
  letter-spacing: 2.16px;
  text-transform: uppercase;
}

.catalog-listing button {
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

.catalog-listing__reset {
  padding: 0;
  color: rgba(244, 246, 245, 0.5);
  border-bottom: 1px dashed rgba(244, 246, 245, 0.3) !important;
  font-size: 12px;
  font-weight: 400;
  line-height: normal;
}

.catalog-listing__rule {
  width: 100%;
  height: 21px;
  border-bottom: 1px solid rgba(244, 246, 245, 0.12);
}

.catalog-listing__rule--large {
  height: 23px;
}

.catalog-listing__fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.catalog-listing__label {
  display: block;
  width: 100%;
  height: 33px;
  padding-top: 20px;
  color: rgba(244, 246, 245, 0.45);
  font-size: 11px;
  font-weight: 600;
  line-height: normal;
  letter-spacing: 1.76px;
  text-transform: uppercase;
}

.catalog-listing__villages {
  display: flex;
  height: 154px;
  padding-top: 14px;
  gap: 10px;
  flex-direction: column;
}

.catalog-listing__check-row {
  display: grid;
  grid-template-columns: 20px 1fr auto;
  align-items: center;
  gap: 11px;
  width: 100%;
  cursor: pointer;
}

.catalog-listing__checkbox {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
}

.catalog-listing__checkmark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  color: transparent;
  border: 1px solid rgba(244, 246, 245, 0.28);
  border-radius: 5px;
  font-size: 11px;
  font-weight: 700;
}

.catalog-listing__checkbox:checked + .catalog-listing__checkmark {
  color: var(--color-dark);
  background: var(--color-yellow);
  border-color: var(--color-yellow);
}

.catalog-listing__check-label {
  color: rgba(244, 246, 245, 0.7);
  font-size: 14px;
  font-weight: 400;
  line-height: normal;
}

.catalog-listing__count {
  color: rgba(244, 246, 245, 0.4);
  font-size: 12px;
  font-weight: 400;
  line-height: normal;
}

.catalog-listing__range-group {
  display: flex;
  width: 100%;
  gap: 16px;
  flex-direction: column;
}

.catalog-listing__range-heading {
  width: 100%;
  height: 37.5px;
  padding-top: 22px;
}

.catalog-listing__range-heading .catalog-listing__label {
  width: auto;
  height: auto;
  padding: 1.5px 0 0;
}

.catalog-listing__range-heading strong {
  color: var(--color-light);
  font-size: 13px;
  font-weight: 600;
  line-height: normal;
}

.catalog-listing__range {
  position: relative;
  width: 320px;
  height: 20px;
  margin: -7px 0 -7px;
  max-width: 100%;
}

.catalog-listing__range > span {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 20px;
  height: 20px;
  background: var(--color-yellow);
  border-radius: 50%;
  pointer-events: none;
}

.catalog-listing__range input {
  --range-progress: 100%;
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 20px;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  cursor: pointer;
}

.catalog-listing__range input::-webkit-slider-runnable-track {
  width: 100%;
  height: 6px;
  background: linear-gradient(
    to right,
    var(--color-yellow) 0,
    var(--color-yellow) var(--range-progress),
    rgba(244, 246, 245, 0.18) var(--range-progress),
    rgba(244, 246, 245, 0.18) 100%
  );
  border-radius: 3px;
}

.catalog-listing__range input::-webkit-slider-thumb {
  width: 20px;
  height: 20px;
  margin-top: -7px;
  appearance: none;
  -webkit-appearance: none;
  background: var(--color-yellow);
  border: 0;
  border-radius: 50%;
}

.catalog-listing__range input::-moz-range-track {
  width: 100%;
  height: 6px;
  background: rgba(244, 246, 245, 0.18);
  border-radius: 3px;
}

.catalog-listing__range input::-moz-range-progress {
  height: 6px;
  background: var(--color-yellow);
  border-radius: 3px;
}

.catalog-listing__range input::-moz-range-thumb {
  width: 20px;
  height: 20px;
  background: var(--color-yellow);
  border: 0;
  border-radius: 50%;
}

.catalog-listing__features-fieldset .catalog-listing__label {
  height: 35px;
  padding-top: 22px;
}

.catalog-listing__features {
  display: flex;
  align-content: flex-start;
  align-items: flex-start;
  gap: 8px 6px;
  height: 89px;
  padding-top: 14px;
  flex-wrap: wrap;
}

.catalog-listing__features button {
  padding: 8px 13px;
  color: rgba(244, 246, 245, 0.7);
  border: 1px solid rgba(244, 246, 245, 0.2);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 400;
  line-height: normal;
}

.catalog-listing__features button.is-active {
  color: var(--color-dark);
  background: var(--color-yellow);
  border-color: var(--color-yellow);
}

.catalog-listing__results {
  display: flex;
  width: calc(100% + 1px);
  min-width: 0;
  height: 1391px;
  margin-top: -1px;
  flex-direction: column;
}

.catalog-listing__toolbar {
  width: 100%;
  min-height: 40.5px;
}

.catalog-listing__toolbar p {
  margin: 0;
  color: rgba(244, 246, 245, 0.6);
  font-size: 14px;
  font-weight: 400;
  line-height: normal;
}

.catalog-listing__toolbar p strong {
  color: var(--color-light);
  font-weight: 600;
}

.catalog-listing__sort {
  gap: 10px;
}

.catalog-listing__sort span {
  color: rgba(244, 246, 245, 0.45);
  font-size: 12px;
  font-weight: 400;
  line-height: normal;
}

.catalog-listing__sort button {
  width: 154px;
  height: 40.5px;
  background: #151917;
  border: 1px solid rgba(244, 246, 245, 0.18);
  border-radius: 9px;
}

.catalog-listing__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(4, 302.5px);
  gap: 14px;
  width: 100%;
  margin-top: 22px;
}

.catalog-listing__card {
  display: flex;
  min-width: 0;
  height: 302.5px;
  overflow: hidden;
  background: #151917;
  border: 1px solid rgba(244, 246, 245, 0.12);
  border-radius: 14px;
  flex-direction: column;
}

.catalog-listing__card[hidden] {
  display: none;
}

.catalog-listing__empty {
  grid-column: 1 / -1;
  margin: 80px 0 0;
  color: rgba(244, 246, 245, 0.55);
  font-size: 15px;
  text-align: center;
}

.catalog-listing__media {
  position: relative;
  display: block;
  width: 100%;
  height: 180px;
  overflow: hidden;
  background: #1b211e;
  flex: 0 0 180px;
}

.catalog-listing__image {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

.catalog-listing__village {
  position: absolute;
  bottom: 10px;
  left: 10px;
  padding: 6px 11px;
  color: var(--color-light);
  background: rgba(20, 26, 23, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 7px;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  font-size: 11px;
  font-weight: 600;
  line-height: normal;
  white-space: nowrap;
}

.catalog-listing__card-content {
  display: flex;
  width: 100%;
  min-height: 0;
  padding: 18px 20px 20px;
  flex: 1 1 auto;
  flex-direction: column;
}

.catalog-listing__card-title {
  color: var(--color-light);
  font-size: 18px;
  font-weight: 600;
  line-height: normal;
  letter-spacing: -0.18px;
  white-space: nowrap;
}

.catalog-listing__specs {
  display: flex;
  gap: 12px;
  height: 23px;
  padding-top: 9px;
  color: rgba(244, 246, 245, 0.5);
  font-size: 12px;
  font-weight: 400;
  line-height: normal;
  white-space: nowrap;
}

.catalog-listing__price-row {
  width: 100%;
  height: 21.5px;
  margin-top: 16px;
}

.catalog-listing__price {
  color: var(--color-light);
  font-size: 18px;
  font-weight: 600;
  line-height: normal;
  white-space: nowrap;
}

.catalog-listing__mortgage {
  align-self: flex-start;
  margin-top: 5.5px;
  color: rgba(244, 246, 245, 0.5);
  font-size: 12px;
  font-weight: 400;
  line-height: normal;
  white-space: nowrap;
}

.catalog-listing__bottom {
  width: 100%;
  height: 77px;
  padding-top: 28px;
}

.catalog-listing__more {
  padding: 15px 26px !important;
  border: 1px solid rgba(244, 246, 245, 0.2) !important;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  line-height: normal;
  white-space: nowrap;
}

.catalog-listing__pagination {
  gap: 7px;
}

.catalog-listing__pagination a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  color: rgba(244, 246, 245, 0.7);
  border: 1px solid rgba(244, 246, 245, 0.18);
  border-radius: 9px;
  font-size: 14px;
  font-weight: 600;
}

.catalog-listing__pagination a.is-active {
  color: var(--color-dark);
  background: var(--color-light);
  border-color: var(--color-light);
}

@media (max-width: 1040px) {
  .catalog-listing {
    grid-template-columns: 1fr;
    height: auto;
    padding: 0 20px 20px;
  }

  .catalog-listing__filter {
    position: static;
    width: 100%;
    max-width: none;
    margin: 0;
  }

  .catalog-listing__results {
    width: 100%;
    height: auto;
    margin-top: 0;
  }
}

@media (max-width: 640px) {
  .catalog-listing__toolbar,
  .catalog-listing__bottom {
    align-items: flex-start;
    flex-direction: column;
    gap: 16px;
    height: auto;
  }

  .catalog-listing__sort {
    width: 100%;
  }

  .catalog-listing__sort button {
    flex: 1;
  }

  .catalog-listing__grid {
    grid-template-columns: 1fr;
    grid-template-rows: none;
  }

  .catalog-listing__bottom {
    padding-top: 28px;
  }
}