.filters-wrap {
	overflow-x: scroll;
}
.filters-row {
	display: flex;
	/* justify-content: space-between; */
	gap: 16px;
	align-items: center;
	margin-top: 24px;
	margin-bottom: 15px;

	@media(max-width: 1150px) {
		width: 100%;
		overflow-x: scroll;
		overflow-y: hidden;
		padding-bottom: 5px;
	}

	& .filters-buttons {
		display: flex;
		align-items: center;
		gap: 16px;
		padding-right: 16px;
		border-right: 1px solid #DDDDDD;

		& .filters-btn {
			height: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			min-height: 50px;
		}

		& .care-btn {
			display: flex;
			align-items: center;
			gap: 8px;
			border-radius: 100px;
			background-color: #3E534D;
			padding: 6px 20px 6px 6px;

			& .care-img {
				min-width: 48px;
				width: 48px;
				height: 48px;
				border-radius: 50%;
				overflow: hidden;

				& img {
					object-fit: cover;
					width: 100%;
					height: 100%;
				}
			}

			& span {
				color: #FFF;
				font-family: 'Evolventa';
				font-size: 18px;
				font-style: normal;
				font-weight: 400;
				line-height: 132%;
				letter-spacing: -0.36px;

				@media(max-width: 1400px) {
					font-size: 16px;
				}

				@media(max-width: 1150px) {
					white-space: nowrap;
				}
			}
		}
	}

	& .filters-bubbles {
		display: flex;
		align-items: center;
		gap: 6px;
		flex-wrap: wrap;

		& .filters-bubble {
			display: flex;
			align-items: center;
			gap: 8px;
			grid-row-gap: 10px;
			min-width: max-content;

			& .filters-bubble__image {
				min-width: 48px;
				width: 48px;
				height: 48px;
				border-radius: 50%;
				overflow: hidden;

				& img {
					object-fit: cover;
					width: 100%;
					height: 100%;
				}
			}

			& .filters-bubbles__name {
				color: var(--Text-Primary);
				font-family: 'Evolventa';
				font-size: 18px;
				font-style: normal;
				font-weight: 400;
				line-height: 132%;
				letter-spacing: -0.36px;
				transition: color .3s ease-in;

				@media(max-width: 1400px) {
					font-size: 16px;
				}

				@media(max-width: 1150px) {
					white-space: nowrap;
				}
			}
		}
	}
	
	& .filters-bubbles .filters-bubble {
	  flex: 0 0 auto;
	  background-color: transparent !important;
	  border-radius: 2px;
      padding: 2px 10px;
	}	

	& .filters-bubbles.wrap {
		margin-bottom: 10px;
	}


	& .filters-bubble.active, & .filters-bubble:hover {
		background-color: #f2f2f2 !important;
		/*
		& .filters-bubbles__name {
			color: #3E534D !important;
		}*/
	}
}

.filters-wrap {
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.filters-wrap::-webkit-scrollbar {
  display: none;
}
/* Для раздела Серии — две строки */
.filters-bubbles.serii {
  flex-wrap: wrap;
  max-height: none;
}

.filters-wrap.dragging {
  cursor: grabbing;
  user-select: none;
}
.filters-wrap {
  cursor: grab;
}

.filters-modal {
	position: fixed;
	max-width: 500px;
	width: 100%;
	top: 0;
	left: -100%;
	height: 100%;
	background-color: #fff;
	z-index: 12;
	backdrop-filter: blur(16px);
	border-radius: 0px 12px 12px 0px;
	transition: all .3s;

	@media(max-width: 600px) {
		max-width: 350px;
	}

	& .filters-modal__content {
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;

		& .filters-modal__inner {
			padding: 16px;
			height: 100%;
			overflow-y: auto;
			/* padding-bottom: 180px; */

			& .filters-modal__head {
				display: flex;
				align-items: center;

				& .filers-modal-title {
					text-align: center;
					width: 100%;
					color: var(--Text-Primary);
					text-align: center;
					font-family: 'Evolventa';
					font-size: 24px;
					font-style: normal;
					font-weight: 400;
					line-height: 124%;
					letter-spacing: -0.48px;
				}
			}

			& .filters-acc__items {
				display: flex;
				flex-direction: column;
				gap: 32px;
				margin-top: 32px;

				& .filters-acc__item {
					display: flex;
					flex-direction: column;

					& .filters-acc__title {
						display: flex;
						justify-content: space-between;
						align-items: center;
						cursor: pointer;

						& svg {
							transform: rotate(180deg);
							transition: all .3s;
						}

						& span {
							color: var(--Text-Primary);
							font-family: 'Evolventa';
							font-size: 18px;
							font-style: normal;
							font-weight: 400;
							line-height: 124%;
							letter-spacing: -0.28px;
						}
					}

					& .filters-acc__content {
						max-height: 0;
						transition: all .3s;
						overflow: hidden;
						display: flex;
						flex-direction: column;
						gap: 12px;

						& .link-acc__items {
							display: flex;
							flex-direction: column;
							gap: 5px;

							& .link-acc__item {
								color: #333;
								font-family: 'Evolventa';
								font-size: 14px;
								font-style: normal;
								font-weight: 400;
								line-height: 124%;
								letter-spacing: -0.28px;
								display: flex;
								align-items: center;
								justify-content: space-between;
								height: 28px;

								& span {
									color: currentColor;
									font-family: inherit;
									font-size: inherit;
									font-style: inherit;
									font-weight: inherit;
									line-height: inherit;
									letter-spacing: inherit;
								}
							}
						}

						& .checkbox-wrap {
							display: flex;
							align-items: center;
							gap: 6px;
						}

						input[type=checkbox] {
							position: relative;
							border: 1px solid #3E534D;
							border-radius: 2px;
							background: none;
							cursor: pointer;
							line-height: 0;
							margin: 0 .6px 0 0;
							outline: 0;
							padding: 0 !important;
							vertical-align: text-top;
							height: 20px;
							width: 20px;
							-webkit-appearance: none;
							border-radius: 6px;
							cursor: pointer;
						}


						input[type=checkbox]:checked {
							background-color: #3E534D;
							opacity: 1;
						}

						input[type=checkbox]:disabled {
							background-color: #DDD;
							border-color: #DDD;
							pointer-events: none;
						}


						input[type=checkbox]:before {
							content: '';
							position: absolute;
							right: 50%;
							top: 50%;
							width: 5px;
							height: 10px;
							border: solid #FFF;
							border-width: 0 1px 1px 0;
							margin: -1px -1px 0 -1px;
							transform: rotate(45deg) translate(-50%, -50%);
							z-index: 2;
						}

						& label {
							color: var(--Text-Primary);
							font-family: 'Evolventa';
							font-size: 16px;
							font-style: normal;
							font-weight: 400;
							line-height: 100%;
							letter-spacing: -0.32px;
							cursor: pointer;
							display: block;
							width: 100%;
							margin-bottom: 0;
							cursor: pointer;
							text-align: left;

							@media(max-width: 600px) {
								font-size: 14px;
							}
						}

						input[type=checkbox]:disabled+label {
							color: #DDD;
							pointer-events: none;
						}

					}


					& .filters-acc__title.active+.filters-acc__content {
						margin-top: 12px;
						max-height: 800px;
						transition: all .3s;
						overflow: visible;
					}

					& .filters-acc__title.active {
						& svg {
							transform: rotate(0deg);
							transition: all .3s;
						}
					}
				}
			}

			& .filters-price {
				margin-top: 32px;

				& .filters-price__title {
					color: var(--Text-Primary);
					font-family: Evolventa;
					font-size: 18px;
					font-style: normal;
					font-weight: 400;
					line-height: 132%;
					letter-spacing: -0.36px;
				}


				.price-input {
					width: 100%;
					display: flex;
					justify-content: space-between;
					margin: 11px 0 17px;

					& .field {
						display: flex;
						align-items: center;
						gap: 2px;
						padding: 8px;
						border: 1px solid #DDD;
						background: #F9F9F9;
						border-radius: 2px;
						position: relative;
						width: auto;

						& input {
							width: auto;
							min-width: 20px;
							/* Чтобы не схлопывался */
							text-align: center;
							border: none;
							background-color: transparent;
							outline: none;
							font-family: 'Evolventa';
							font-size: 14px;
							font-weight: 400;
							letter-spacing: -0.28px;
							box-sizing: content-box;
							/* Ключевой момент */
							padding: 0;
							margin: 0;
							height: auto;
						}

						& .input-measure {
							position: absolute;
							visibility: hidden;
							white-space: pre;
							font-family: 'Evolventa';
							font-size: 14px;
							font-weight: 400;
							letter-spacing: -0.28px;
							padding: 0;
							margin: 0;
						}

						& span {
							color: var(--Text-Primary);
							text-align: center;
							font-family: 'Evolventa';
							font-size: 14px;
							font-style: normal;
							font-weight: 400;
							line-height: 100%;
							letter-spacing: -0.28px;
						}
					}



				}


				& input[type="number"]::-webkit-outer-spin-button,
				& input[type="number"]::-webkit-inner-spin-button {
					-webkit-appearance: none;
				}

				/*
		  & .slider {
			height: 1px;
			position: relative;
			background: #ddd;
			border-radius: 5px;
		  }
		  */
				& .slider .progress {
					height: 100%;
					left: 2%;
					right: 2%;
					position: absolute;
					border-radius: 0px;
					background: #5C7A57;
				}

				& .range-input {
					position: relative;
				}

				& .range-input input {
					position: absolute;
					width: 100%;
					height: 1px;
					top: -1px;
					background: none;
					pointer-events: none;
					-webkit-appearance: none;
					-moz-appearance: none;
				}

				& input[type="range"]::-webkit-slider-thumb {
					height: 24px;
					width: 24px;
					border-radius: 50%;
					background: #fff;
					pointer-events: auto;
					-webkit-appearance: none;
					/* box-shadow: 0 0 6px rgba(0, 0, 0, 0.05); */
					border: 1px solid #5C7A57;
					cursor: pointer;
				}

				& input[type="range"]::-moz-range-thumb {
					height: 24px;
					width: 24px;
					border: none;
					border-radius: 50%;
					background: #fff;
					pointer-events: auto;
					-moz-appearance: none;
					/* box-shadow: 0 0 6px rgba(0, 0, 0, 0.05); */
					border-radius: 100px;
					border: 1px solid #5C7A57;
					cursor: pointer;
				}
			}

		}

		& .filter-price__btns {
			border-top: 1px solid #EBEBEB;
			background: var(--Background-Invert, #FFF);
			box-shadow: 0px 0px 24px 0px rgba(0, 0, 0, 0.12);
			display: flex;
			flex-direction: column;
			gap: 8px;
			padding: 16px 16px 32px 16px;
			/* position: fixed; */
			z-index: 2;
			left: 0;
			bottom: 0;
			width: 100%;
			border-bottom-right-radius: 12px;

			& .show-products {
				border-radius: 8px;
				background-color: #5c7a57;
				color: #FFF;
				font-family: 'Evolventa';
				font-size: 18px;
				font-style: normal;
				font-weight: 400;
				line-height: 132%;
				letter-spacing: -0.36px;
				padding: 16px 24px;
				display: flex;
				justify-content: center;
				align-items: center;
				width: 100%;

				@media(max-width: 600px) {
					font-size: 16px;
				}
			}

			& .clear-filters {
				border-radius: 8px;
				background-color: #fff;
				color: #5C7A57;
				font-family: 'Evolventa';
				font-size: 18px;
				font-style: normal;
				font-weight: 400;
				line-height: 132%;
				letter-spacing: -0.36px;
				padding: 16px 24px;
				display: flex;
				justify-content: center;
				align-items: center;
				width: 100%;

				@media(max-width: 600px) {
					font-size: 16px;
				}
			}
		}
	}

}

.filters-modal.mainscreen.active {
	left: 0;
	transition: all .3s;
}

.filters-modal.subscreen.active {
	left: 0;
	transition: all .3s;
}

.filters-wrap::-webkit-scrollbar
{
	height: 12px;
	width: 12px;
}

.filters-wrap::-webkit-scrollbar-track {
	background: rgba(255, 255, 255, 0.85);
}

.filters-wrap::-webkit-scrollbar-thumb {
	background-color: #3E534D;
	border-radius: 5px;
	border: 3px solid rgba(255, 255, 255, 0.85);
}