/* ===== Shop Filter Slider (range) ===== */
.sf__slider--custom {
  margin-top: 10px;
  position: relative;
}

.sf__track {
  position: relative;
  height: 25px;
  display: flex;
  align-items: center;
}

/* базовая линия */
.sf__track::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: #3e525e;
  opacity: 0.35;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 2px;
}

/* синяя заливка */
.sf__track-fill {
  position: absolute;
  left: 0;
  height: 1px;
  background: #4187c8;
  opacity: 1;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 2px;
  width: 0%;
}

/* крайние палочки */
.sf__track-before,
.sf__track-after {
  display: block;
  width: 1px;
  height: 11px;
  background: #4187c8;
  position: absolute;
}

.sf__track-before { top: 7.5px; left: 0; }
.sf__track-after  { top: 7.5px; right: 0; }

/* сам range, делаем прозрачным трек */
.sf__range--custom {
  width: 100%;
  margin: 0;
  background: transparent;
  position: relative;
  z-index: 2;
  -webkit-appearance: none;
  appearance: none;
  height: 34px;
}

/* убираем дефолтный трек */
.sf__range--custom::-webkit-slider-runnable-track {
  height: 2px;
  background: transparent;
}
.sf__range--custom::-moz-range-track {
  height: 2px;
  background: transparent;
}

/* кружок */
.sf__range--custom::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #2a6df5;
  border: 3px solid #fff;
  box-shadow: 0 8px 18px rgba(0,0,0,.15);
  cursor: pointer;
  margin-top: -7px;
}
.sf__range--custom::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #2a6df5;
  border: 3px solid #fff;
  box-shadow: 0 8px 18px rgba(0,0,0,.15);
  cursor: pointer;
}

.sf__values{
  display:flex;
  justify-content:space-between;
  margin-top:10px;
  font-size:16px;
  color:#0c2636;
}

.filter-wrapper {
	display:none;
}

.filter-block.filter-active .filter-wrapper {
	display:block;
}

.filter-block.filter-active .filter-title span {
	transform:rotate(0.5turn);
	background-image: url("data:image/svg+xml,%3Csvg width='11' height='10' viewBox='0 0 11 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_1_7629)'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M4.89966 8.46281L0.112965 3.74865L1.30943 2.57031L5.49789 6.69531L9.68635 2.57031L10.8828 3.74865L6.09612 8.46281C5.93744 8.61904 5.72226 8.7068 5.49789 8.7068C5.27352 8.7068 5.05833 8.61904 4.89966 8.46281Z' fill='%234187c8' /%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_1_7629'%3E%3Crect width='10' height='11' fill='white' transform='translate(11) rotate(90)' /%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
}

.filter-block.filter-active .filter-title {
	color:#4187c8;
}

.my-filters {
	width:270px;
	min-height:300px;
	display:flex;
	flex-direction:column;
	gap:32px;
}

.filter-title {
	width:100%;
	min-height:16px;
	font-weight: 400;
	font-size: 16px;
	line-height: 100%;
	color: #0c2636;
	cursor:pointer;
	transition:all 0.5s ease;
	display:flex;
	justify-content:space-between;
	align-items:center;
}

.filter-title span {
	display:block;
	width:10px;
	height:11px;
	transition:all 0.5s ease;
	background-image: url("data:image/svg+xml,%3Csvg width='11' height='10' viewBox='0 0 11 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_1_7629)'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M4.89966 8.46281L0.112965 3.74865L1.30943 2.57031L5.49789 6.69531L9.68635 2.57031L10.8828 3.74865L6.09612 8.46281C5.93744 8.61904 5.72226 8.7068 5.49789 8.7068C5.27352 8.7068 5.05833 8.61904 4.89966 8.46281Z' fill='%230C2636' /%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_1_7629'%3E%3Crect width='10' height='11' fill='white' transform='translate(11) rotate(90)' /%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
}

.reset-filters {
	width:100%;
	height:38px;
	display:flex;
	justify-content:center;
	align-items:center;
	font-family: var(--font-family);
	font-weight: 600;
	font-size: 14px;
	line-height: 100%;
	color: #0c2636;
	text-decoration:none;
	border-radius: 6px;
	padding: 12px 24px;
	background: #f3f4f6;
}

.filter-check {
	display:block;
}

.filter-check span {
	color: rgba(12, 38, 54, 0.5);
}