@charset "UTF-8";

.filters {
	margin-bottom: 32px;
}

@media only screen and (min-width: 1280px) {
	.filters {
		margin-bottom: 50px;
	}
}

.filters-panel {
	margin-top: 8px;
}

.filters-panel-main {
	flex: 0 0 auto;
	max-width: 100%;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
}

@media only screen and (max-width: 767px) {
	.filters-panel-main {
		width: 100%;
		justify-content: space-between;
	}
}

@media only screen and (min-width: 768px) and (max-width: 1279px) {
	.filters-panel-main {
		width: 100%;
		justify-content: space-between;
		border-bottom: 1px solid var(--catalog-border);
		padding-bottom: 16px;
	}
}

.filters-toggle {
	flex: 0 0 auto;
	cursor: pointer;
	user-select: none;
	font: 600 14px/24px var(--fonti);
	letter-spacing: -3%;
	padding: 0 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	white-space: nowrap;
	color: var(--grey800);
	height: 40px;
	position: relative;
	gap: 8px;
	transition-property: color, background;
	transition-duration: 0.2s;
	transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
}

.categories-toggle {
	padding: 0 24px;
	border-radius: 20px;
	background-color: var(--deep-blue);
	color: var(--white);
}

@media only screen and (min-width: 768px) {
	.filters-toggle {
		font-size: 16px;
		font-weight: 500;
	}
}

.filters-toggle svg {
	flex: 0 0 auto;
	fill: currentColor;
	width: 24px;
	height: 24px;
	margin-left: -8px;
}

@media only screen and (max-width: 1279px) {
	.filters-toggle .text-desktop {
		display: none;
	}
}

@media only screen and (min-width: 1280px) {
	.filters-toggle .text-mobile {
		display: none;
	}

	.filters-toggle {
		padding: 0 24px;
		border-radius: 20px;
		background-color: var(--deep-blue);
		color: var(--white);
	}
}

.filters-checkbox-trigger {
	cursor: pointer;
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	position: relative;
	height: 40px;
	font: 600 14px/24px var(--fonti);
	color: var(--grey800);
	letter-spacing: -3%;
	gap: 10px;
	user-select: none;
}

.filters-checkbox-trigger>* {
	flex: 0 0 auto;
}

.filters-checkbox-trigger input {
	position: absolute;
	transform: scale(0);
	opacity: 0;
}

.filters-checkbox-trigger .trigger {
	flex: 0 0 auto;
	position: relative;
	width: 45px;
	height: 25px;
	transition-property: background;
	transition-duration: 0.2s;
	transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
	border-radius: 13px;
	background-color: #BFC8D7;
}

.filters-checkbox-trigger .trigger:before {
	content: '';
	position: absolute;
	width: 20px;
	height: 20px;
	top: 50%;
	left: 2.5px;
	transition-property: transform;
	transition-duration: 0.2s;
	transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
	transform: translateY(-50%) translateX(0);
	border-radius: 50%;
	background-color: var(--white);
	box-shadow: 0px 0.5px 2px rgba(0, 0, 0, 0.15);
}

.filters-checkbox-trigger:has(input:checked) .trigger {
	background-color: var(--yellow);
}

.filters-checkbox-trigger:has(input:checked) .trigger:before {
	transform: translateY(-50%) translateX(20px);
}

@media only screen and (min-width: 768px) {
	.filters-checkbox-trigger {
		font-size: 16px;
	}
}

@media only screen and (min-width: 1280px) {
	.filters-checkbox-trigger {
		flex-direction: row-reverse;
		font-weight: normal;
		padding: 0 16px;
		border-radius: 20px;
		gap: 8px;
		border: 0.5px solid var(--grey600);
	}

	.filters-checkbox-trigger .trigger {
		margin-left: -8px;
		width: 44px;
		height: 24px;
		border-radius: 12px;
	}

	.filters-checkbox-trigger .trigger:before {
		width: 16px;
		height: 16px;
		left: 4px;
	}
}

.top-filters {
	display: none;
}
.filters-el.hide-once{display: none;}
.filters-el.hide-once.open{display: block;}
@media only screen and (min-width: 1280px) {
	.top-filters-total {
		flex: 0 0 auto;
		font: normal 17px/40px var(--fonti);
		letter-spacing: -3%;
		color: var(--grey600);
		margin-left: 14px;
		padding-left: 24px;
		
	}
	.top-filters-total.active{border-left: 0.5px solid #B8C3C9;}

	.top-filters {
		display: flex;
		flex-wrap: wrap;
		flex: 0 0 auto;
		max-width: 100%;
		gap: 10px;
	}

	.top-filter {
		flex: 0 0 auto;
		max-width: 100%;
		position: relative;
	}

	.top-filter-head {
		cursor: pointer;
		position: relative;
		font: normal 16px/24px var(--fonti);
		letter-spacing: -3%;
		color: var(--grey800);
		transition-property: border, color, background;
		transition-duration: 0.2s;
		transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
		display: flex;
		align-items: center;
		gap: 4px;
		padding: 0 20px;
		height: 40px;
		background-color: var(--grey100);

		border: 0.5px solid var(--grey600);
		border-radius: 20px;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.top-filter-head.selected {
		background-color: var(--white);
	}

	@media (pointer:fine) {
		.top-filter-head:hover {
			border-color: var(--hover-input);
		}
	}

	.top-filter.open .top-filter-head {
		border-color: var(--hover-input);
		background-color: transparent;
	}

	.top-filter-head .num {
		flex: 0 0 auto;
		font-weight: 500;
		line-height: 22px;
		font-size: 13px;
		height: 22px;
		min-width: 22px;
		text-align: center;
		border-radius: 11px;
		background-color: #ECEEF0;
		padding: 0 4px;
	}

	.top-filter-popup {
		position: absolute;
		z-index: 90;
		top: 100%;
		left: 0;
		width: 330px;
		margin: 7px 0 0 0;
		transform: translate3d(0, 10px, 0);
		opacity: 0;
		pointer-events: none;
		backface-visibility: hidden;
		overflow: hidden;
		overflow-y: auto;
		max-height: 50vh;
		transition-property: transform, opacity;
		transition-duration: 0.2s;
		transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
		background: var(--white);
		box-shadow: 0px 0px 1px rgba(12, 26, 75, 0.1), 0px 4px 20px -2px rgba(50, 50, 71, 0.08);
		border-radius: 4px;
	}

	.top-filter.open .top-filter-popup {
		opacity: 1;
		pointer-events: all;
		transform: translate3d(0, 0, 0);
	}

	.top-filter-popup .filter-search {
		position: sticky;
		top: 0;
		border-style: solid;
		border-width: 25px 0 0 0;
		border-color: transparent;
		background: var(--white);
		z-index: 5;
		padding: 0 15px;
	}

	.top-filter-popup .filter-search svg {
		right: 35px;
	}

	.top-filter-popup .filter-slider {
		padding-bottom: 28px;
		padding-left: 15px;
		padding-right: 15px;
	}

	.top-filter-popup .filter-slider+.filter-slider {
		margin-top: 0;
		padding-top: 2px;
	}

	.top-filter-popup .filter-slider:first-child {
		padding-top: 25px;
	}

	.top-filter-popup .filter-slider input {
		background-color: transparent;
	}

	.top-filter-popup .filter-slider input:not(:hover):not(:focus) {
		border-color: #D2DCEE;
	}

	.top-filter-popup .filter-checks label {
		padding-left: 59px;
		padding-right: 15px;
	}

	.top-filter-popup .filter-checks .checkbox,
	.top-filter-popup .filter-checks .color,
	.top-filter-popup .filter-checks img {
		left: 15px;
	}

	.top-filter-submit {
		position: sticky;
		bottom: 0;
		z-index: 5;
		background: var(--white);
		display: flex;
		align-items: center;
		padding: 15px 15px 25px 15px;
		gap: 9px;
		border: 0;
		box-shadow: 0px -5px 16px 0px rgba(0, 0, 0, 0.08), 0px 0px 1px 0px rgba(0, 0, 0, 0.15);
	}

	.top-filter-submit .btn {
		flex: 1 1 auto;
		padding: 0 16px;
		height: 50px;
		font-size: 15px;
	}

	.top-filter-submit .btn-yellow {
		min-width: 170px;
		flex: 0 0 auto;
	}

	.top-filter-submit .btn-reset {
		font-weight: 300;
		font-size: 14px;
		font-family: var(--fonti);
		color: var(--grey600);
	}

	.top-filter-submit .btn-reset svg {
		flex: 0 0 auto;
		fill: var(--grey600);
		transition: fill 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
	}

	@media (pointer:fine) {
		.top-filter-submit .btn-reset:hover {
			color: var(--orange);
		}

		.top-filter-submit .btn-reset:hover svg {
			fill: var(--orange);
		}
	}
}

.categories {
	padding: 24px 0;
}

@media only screen and (max-width: 767px) {
	.categories:not(:only-child) {
		display: none;
	}
}

@media only screen and (min-width: 768px) {
	.categories {
		padding: 0;
		margin-top: -18px;
	}
}

.categories .container {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 24px 0;
	justify-content: space-between;
}

@media only screen and (min-width: 768px) {
	.categories .container {
		position: relative;
		gap: 0 25px;
	}

	.categories .sort {
		margin-left: auto;
		margin-right: 0;
	}

	.categories .sort-popup {
		left: auto !important;
		right: 0 !important;
	}
}

@media only screen and (max-width: 767px) {
	.categories .list-categories {
		display: none !important;
	}
}

.categories-all-toggle {
	display: none;
	align-items: center;
}

.categories-all-toggle .link {
	flex: 0 0 auto;
	position: relative;
	cursor: pointer;
	user-select: none;
	font-weight: normal;
	font-size: 14px;
	line-height: 25px;
	letter-spacing: -0.02em;
	color: var(--blue);
	transition: color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
	padding: 0 0 0 18px;
}

.categories-all-toggle .link:before,
.categories-all-toggle .link:after {
	content: '';
	position: absolute;
	top: 50%;
	left: 0;
	width: 9.5px;
	height: 1.5px;
	background: var(--blue);
	transition-property: transform, background;
	transition-duration: 0.2s;
	transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
	transform: translate3d(0, -50%, 0);
}

.categories-all-toggle .link:after {
	transform: translate3d(0, -50%, 0) rotate(-90deg);
}

.categories.open .categories-all-toggle .link {
	color: var(--sec-dark);
}

.categories.open .categories-all-toggle .link:before,
.categories.open .categories-all-toggle .link:after {
	background: var(--sec-dark);
}

.categories.open .categories-all-toggle .link:after {
	transform: translate3d(0, -50%, 0) rotate(0deg);
}

@media (pointer:fine) {
	.categories-all-toggle .link:hover {
		color: var(--hover);
	}

	.categories-all-toggle .link:hover:before,
	.categories-all-toggle .link:hover:after {
		background: var(--hover);
	}

	.categories.open .categories-all-toggle .link:hover {
		color: var(--hover-dark);
	}

	.categories.open .categories-all-toggle .link:hover:before,
	.categories.open .categories-all-toggle .link:hover:after {
		background: var(--hover-dark);
	}
}

.categories:not(.open) .categories-all-toggle .link .for-open,
.categories.open .categories-all-toggle .link .for-close {
	display: none;
}

.filters-popup {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 300;
	width: 100%;
	height: 100%;
	touch-action: none;
	user-select: none;
	transition: opacity 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
	pointer-events: none;
	opacity: 0;
}

.filters-wrap {
	height: 100%;
	position: relative;
	width: calc(100% - 54px);
	max-width: 360px;
	background: var(--white);
	box-shadow: 18px 0px 41px rgba(0, 0, 0, 0.25);
	transition: transform 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
	transform: translate3d(-100%, 0, 0);
}

.filters-fader {
	position: fixed;
	top: 0;
	left: 0;
	width: 200%;
	height: 100%;
	background: #000;
	transition: opacity 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
	opacity: 0;
	pointer-events: none;
}

@media (pointer:coarse) {
	html.open-filters {
		overflow: hidden;
	}
}

@media (pointer:fine) {
	html.open-filters {
		overflow: hidden;
		margin-right: var(--scrollbar);
	}
}

.open-filters .filters-popup {
	pointer-events: all;
	opacity: 1;
}

.open-filters .filters-wrap {
	transform: translate3d(0, 0, 0);
}

.open-filters .filters-fader {
	opacity: 0.6;
	pointer-events: all;
}

.filters-popup .filters-close {
	position: absolute;
	top: 0;
	left: 100%;
	width: 54px;
	height: 54px;
	cursor: pointer;
	user-select: none;
}

.filters-popup .filters-close:before,
.filters-popup .filters-close:after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 16px;
	height: 2px;
	border-radius: 1px;
	background: var(--sec-default);
	transition: background 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.filters-popup .filters-close:before {
	transform: translate3d(-50%, -50%, 0) rotate(45deg);
}

.filters-popup .filters-close:after {
	transform: translate3d(-50%, -50%, 0) rotate(-45deg);
}

@media (pointer:fine) {

	.filters-popup .filters-close:hover:before,
	.filters-popup .filters-close:hover:after {
		background: var(--hover-dark);
	}
}

.filters-popup .scroll {
	height: calc(100% - 150px);
	overflow: hidden;
	overflow-y: auto;
}

.filters-head,
.filters-el-title,
.categories-head {
	position: sticky;
	top: 0;
	z-index: 10;
	border-bottom: 1px solid #D9E3F4;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 25px 30px 25px 30px;
	background: var(--white);
}

.filters-head,
.filters-el-title {
	cursor: pointer;
	user-select: none;
	padding-left: 54px;
	padding-right: 20px;
	background: var(--white) url(../img/icons/filters/arrow-left.svg) no-repeat 30px 50%;
}

.filters-el-head .selected {
	color: var(--blue);
	font-weight: 600;
}

.filters-head .clear,
.categories-head .clear {
	display: flex;
	align-items: center;
	font-size: 14px;
	line-height: 20px;
	letter-spacing: -0.02em;
	color: #93A6C6;
	gap: 17px;
	transition: color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
	cursor: pointer;
	user-select: none;
}

.filters-head .clear svg,
.categories-head .clear svg {
	flex: 0 0 auto;
	fill: #93A6C6;
	transition: fill 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
}

@media (pointer:fine) {

	.filters-head .clear:hover,
	.categories-head .clear:hover {
		color: var(--orange);
	}

	.filters-head .clear:hover svg,
	.categories-head .clear:hover svg {
		fill: var(--orange);
	}
}

.filters-head .clear {
	display: none;
}

.filters-head .big,
.filters-el-title,
.categories-head .big {
	font: bold 20px/20px var(--fontg);
	color: var(--modal-title);
	letter-spacing: normal;
}

.filters-check {
	border-top: 1px solid #D9E3F4;
	background: var(--white);
	cursor: pointer;
	user-select: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	font: bold 17px/20px var(--fontg);
	color: var(--grey800);
	padding: 14.5px 25px;
	position: relative;
}

@media only screen and (min-width: 768px) {
	.filters-check {
		background-color: #FDFDFD;
		padding: 22.5px 30px 22.5px 25px;
	}
}

.filters-head+.filters-check {
	border-top-width: 0;
}

.filters-check input {
	position: absolute;
	transform: scale(0);
	opacity: 0;
}

.filters-check .trigger {
	flex: 0 0 auto;
	position: relative;
	width: 45px;
	height: 25px;
	transition-property: background;
	transition-duration: 0.2s;
	transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
	border-radius: 13px;
	background-color: #BFC8D7;
}

.filters-check .trigger:before {
	content: '';
	position: absolute;
	width: 20px;
	height: 20px;
	top: 50%;
	left: 2.5px;
	transition-property: transform;
	transition-duration: 0.2s;
	transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
	transform: translateY(-50%) translateX(0);
	border-radius: 50%;
	background-color: var(--white);
	box-shadow: 0px 0.5px 2px rgba(0, 0, 0, 0.15);
}

.filters-check:has(input:checked) .trigger {
	background-color: var(--yellow);
}

.filters-check:has(input:checked) .trigger:before {
	transform: translateY(-50%) translateX(20px);
}

.filters-el {
	border-top: 1px solid #D9E3F4;
	background: var(--white);
}

.filters-head+.filters-el {
	border-top-width: 0;
}

.filters-el-head {
	position: relative;
	cursor: pointer;
	user-select: none;
	font: 600 17px/20px var(--fontg);
	color: var(--grey700);
	padding: 17px 50px 17px 25px;
}

.filters-el-head svg {
	position: absolute;
	top: 50%;
	right: 42px;
	fill: var(--grey500);
	transform: translate3d(50%, -50%, 0) rotate(-90deg);
	transition-property: transform, fill;
	transition-duration: 0.2s;
	transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
}

@media only screen and (max-width: 767px) {
	.filters-el-inner {
		height: calc(100% - 150px) !important;
		overflow: hidden !important;
		overflow-y: auto !important;
		display: block !important;
		position: fixed;
		top: 0;
		left: 0;
		width: 100% !important;
		z-index: 20;
		background: var(--white);
		transform: translate3d(-100%, 0, 0);
		backface-visibility: hidden;
		transition: transform 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
	}

	.filters-el.open .filters-el-inner {
		transform: translate3d(0, 0, 0);
	}
}

.filter-search {
	position: sticky;
	padding: 10px 25px;
	background: var(--white);
	border-style: solid;
	border-width: 15px 0 0 0;
	border-color: transparent;
	z-index: 9;
	top: 71px;
	margin-bottom: -10px;
}

.filter-search input {
	padding-right: 60px;
	color: var(--grey800);
	font-weight: 500;
	font-size: 15px;
}

.filter-search svg {
	width: 20px;
	height: 20px;
	position: absolute;
	top: 50%;
	right: 55px;
	transform: translate3d(0, -50%, 0);
	fill: var(--sec-dark);
	transition: fill 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
	pointer-events: none;
}

.filter-search input:not(:placeholder-shown)~svg {
	fill: var(--grey800);
}

.filter-checks {
	display: flex;
	flex-direction: column;
	padding: 18px 0 17px 0;
	position: relative;
}

.filter-checks label {
	cursor: pointer;
	user-select: none;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-weight: 300;
	font-size: 15px;
	line-height: 20px;
	letter-spacing: 0.01em;
	color: var(--grey700);
	padding: 7px 25px 8px 57px;
	text-align: left;
}

.filter-checks label.all {
	font-weight: normal;
	letter-spacing: normal;
}

.filter-checks .small {
	flex: 0 0 auto;
	font-size: 12px;
	line-height: 24px;
	font-weight: 500;
	letter-spacing: normal;
	color: var(--sec-dark);
	margin-left: 8px;
}

.filter-checks input {
	position: absolute;
	top: 0;
	left: 0;
	transform: scale(0);
	opacity: 0;
	visibility: hidden;
}

.filter-checks .checkbox,
.filter-checks .color,
.filter-checks img {
	position: absolute;
	top: 50%;
	left: 25px;
	transform: translate3d(0, -50%, 0);
	width: 20px;
	height: 20px;
}

.filter-checks img,
.filter-checks .color {
	border-radius: 50%;
	transition: box-shadow 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.filter-checks .color {
	border-radius: 50%;
	border-style: solid;
	border-color: transparent;
	border-width: 0.5px;
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size: calc(100% + 2px) auto;
}

.filter-checks .color:before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	border-radius: 50%;
	background: url(../img/input/check-sm.svg) no-repeat 50% 50%;
	background-size: 10px auto;
	opacity: 0;
	transition: opacity 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.filter-checks .color.white:before {
	background-image: url(../img/input/check-sm-300.svg);
}

.filter-checks input:checked~img {
	box-shadow: 0 0 0 1.5px var(--white), 0 0 0 3px var(--sec-dark);
}

.filter-checks input:checked~.color {
	box-shadow: 0 0 0 1.5px var(--white), 0 0 0 3px var(--grey300);
}

.filter-checks input:checked~.color:before {
	opacity: 1;
}

.filter-slider {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	padding: 25px 25px 40px 25px;
	font-weight: 300;
	font-size: 15px;
	line-height: 16px;
	letter-spacing: -0.01em;
	color: var(--grey900);
}

.filter-slider+.filter-slider {
	padding-top: 0;
	margin-top: -15px;
}

.filter-slider .label {
	order: 1;
	flex: 0 0 auto;
	width: 100%;
	margin: 0 0 15px 0;
}

.filter-slider input {
	font-size: 15px;
	color: var(--grey900);
	height: 50px;
	border-radius: 25px;
	padding: 0;
	text-align: center;
	order: 4;
	flex: 0 auto;
}

.filter-slider .dash {
	order: 3;
	flex: 0 0 auto;
	margin: 0 auto;
	width: 20px;
	height: 1px;
	border-radius: 0.5px;
	background: rgba(166, 183, 212, 0.6);
}

.filter-slider .cross {
	order: 3;
	flex: 0 0 auto;
	width: 26px;
	align-self: stretch;
	margin: 0 auto;
	background: url(../img/icons/filters/х.svg) no-repeat 50% 50%;
}

.filter-slider .dash~input {
	width: calc(50% - 25px);
}

.filter-slider .cross~input {
	width: calc(50% - 13px);
}

.filter-slider .dash+input,
.filter-slider .cross+input {
	order: 2;
}

.filter-slider .ui-slider {
	flex: 0 0 auto;
	order: 5;
	width: 100%;
	position: relative;
	height: 3px;
	margin: 29px 0 0 0;
	background: #E5EAF2;
	border-radius: 1.5px;
}

.filter-slider .ui-slider-range {
	position: absolute;
	top: 0;
	bottom: 0;
	border-radius: 1.5px;
	background: #0067E1;
}

.filter-slider .ui-slider-handle {
	position: absolute;
	top: 50%;
	cursor: pointer;
	user-select: none;
	width: 15px;
	height: 15px;
	margin: -7.5px;
	border-radius: 50%;
	background: #0067E1;
	box-shadow: 0 0 0 3px rgba(64, 191, 255, 0.1);
	outline: none;
}

.filter-slider .ui-slider-handle:before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	margin: -12px;
}

.filters-submit {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 20;
	background: #FDFDFD;
	margin-left: -5px;
	padding: 25px 35px 0 30px;
	height: 150px;
	display: flex;
	flex-direction: column;
	gap: 6px 0;
	box-shadow: 0px -5px 16px 0px rgba(0, 0, 0, 0.08), 0px 0px 1px 0px rgba(0, 0, 0, 0.15);
}

.filters-submit .btn {
	letter-spacing: -0.015em;
}

.filters-submit .btn-yellow {
	font-weight: bold;
	letter-spacing: normal;
}

.filters-submit .btn-reset {
	color: #7C93BB;
}

@media (pointer:fine) {
	.filters-submit .btn-reset:hover {
		color: var(--orange);
	}
}

.filters-panel-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 24px;
}

.filters-additional {
	overflow: hidden;
}


.filters-additional .clear {
	flex: 0 0 auto;
	cursor: pointer;
	user-select: none;
	font-weight: 300;
	font-size: 12px;
	line-height: 40px;
	letter-spacing: -0.02em;
	color: #697EA2;
	height: 40px;
	border-radius: 20px;
	transition: color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
	position: relative;
}

.filters-additional .clear svg {
	position: absolute;
	top: 50%;
	left: 17px;
	transform: translate3d(-50%, -50%, 0);
	fill: #93A6C6;
	transition: fill 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
}

@media (pointer:fine) {
	.filters-additional .clear:hover {
		color: var(--orange);
	}

	.filters-additional .clear:hover svg {
		fill: var(--orange);
	}
}

.filters-additional {
	overflow: hidden;
	flex: 0 0 auto;
}

.filters-additional .filters-v2 {
	overflow: visible !important;
	width: 100% !important;
}

.filters-additional .filters-v2 .swiper-slide {
	width: auto;
}

.filters-additional .filters-v2 .el {
	position: relative;
	display: block;
}

.filters-additional .filters-v2 .el input {
	position: absolute;
	opacity: 0;
	transform: scale(0);
}

.filters-additional .filters-v2 .el .inner,
.filters-additional .filters-v2 .all {
	display: block;
	position: relative;
	transition-property: border, background, box-shadow, padding, color;
	transition-duration: 0.2s;
	transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
	letter-spacing: -3%;
	text-align: center;
	white-space: nowrap;
	cursor: pointer;
	user-select: none;
}

@media only screen and (max-width: 767px) {
	.filters-additional {
		width: calc(100% + 34px) !important;
		margin-left: -17px;
		padding: 0 17px;
	}

	.filters-additional .filters-v2 .swiper-slide:not(:last-child) {
		padding-right: 5px;
	}

	.filters-additional .filters-v2 .el .inner,
	.filters-additional .filters-v2 .all,
	.filters-additional .filters-v2 .desk-all .el {

		font: normal 13px/18px var(--fonti);
		border-radius: 3px;
		color: var(--grey700);
		padding: 6px 15px;
	}

	.filters-additional .filters-v2 .el .inner {
		border: 1px solid #C0D3F1;
		background: rgba(247, 250, 252, 0.5);
	}

	.filters-additional .filters-v2 .all,
	.filters-additional .filters-v2 .desk-all .el {
		border: 1px solid #E8EEF8;
		background: #E8EEF8;
	}

	@media (pointer:fine) {

		.filters-additional .filters-v2 .el .inner:hover,
		.filters-additional .filters-v2 .all:hover,
		.filters-additional .filters-v2 .desk-all .el:hover {
			border-color: var(--deep-blue);
			background-color: transparent;
			box-shadow: 0px 0.5px 3px 0px rgba(20, 37, 63, 0.15);
		}
	}

	.filters-additional .filters-v2 .el input:checked~.inner,
	.filters-additional .filters-v2 .el.selected .inner,
	.filters-additional .filters-v2 .el.to-delete .inner {
		border-color: var(--yellow);
		box-shadow: inset 0 0 0 0.5px var(--yellow);
		background-color: transparent;
		padding-right: 39px;
	}

	.filters-additional .filters-v2 .el input:checked~.inner .cross,
	.filters-additional .filters-v2 .el.selected .inner .cross,
	.filters-additional .filters-v2 .el.to-delete .inner .cross {
		opacity: 1;
		pointer-events: all;
	}

	.filters-additional .filters-v2 .el .cross {
		position: absolute;
		top: 50%;
		right: 10px;
		width: 20px;
		height: 20px;
		border-radius: 50%;
		background: #EEF2F9;
		margin: -10px 0;
		pointer-events: none;
		opacity: 0;
		transition-property: opacity;
		transition-duration: 0.2s;
		transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
	}

	.filters-additional .filters-v2 .el .cross:before,
	.filters-additional .filters-v2 .el .cross:after {
		content: '';
		position: absolute;
		top: 50%;
		left: 50%;
		width: 9px;
		height: 0.75px;
		border-radius: 0.5px;
		background: var(--grey600);
		transition: background 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
	}

	.filters-additional .filters-v2 .el .cross:before {
		transform: translate3d(-50%, -50%, 0) rotate(-45deg);
	}

	.filters-additional .filters-v2 .el .cross:after {
		transform: translate3d(-50%, -50%, 0) rotate(45deg);
	}

	.filters-additional .clear-v2 {
		display: block;
		width: 32px;
		height: 32px;
		border-radius: 50%;
		background: #EEF2F9;
		cursor: pointer;
		user-select: none;
		margin-right: 5px;
		position: relative;
	}

	.filters-additional .clear-v2:before,
	.filters-additional .clear-v2:after {
		content: '';
		position: absolute;
		top: 50%;
		left: 50%;
		width: 15px;
		height: 1.5px;
		border-radius: 1px;
		background: var(--grey500);
		transition: background 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
	}

	.filters-additional .clear-v2:before {
		transform: translate3d(-50%, -50%, 0) rotate(-45deg);
	}

	.filters-additional .clear-v2:after {
		transform: translate3d(-50%, -50%, 0) rotate(45deg);
	}

	@media (pointer:fine) {

		.filters-additional .clear-v2:hover:before,
		.filters-additional .clear-v2:hover:after {
			background-color: var(--hover-dark);
		}
	}
}

@media only screen and (min-width: 768px) and (max-width: 1279px) {
	.filters-additional {
		width: calc(100% + 64px) !important;
		margin-left: -34px;
		padding: 0 34px;
	}
}
@media only screen and (max-width: 768px){
	.swiper-slide.desk-all.clearAllFilterProd {
		display: none;
	}
}

@media only screen and (min-width: 768px) {
	.filters-additional .filters-v2 .swiper-wrapper {
		flex-wrap: wrap;
	}

	.filters-additional .filters-v2 .swiper-slide {
		padding-right: 10px;
		height: auto !important;
		display: flex;
		align-items: center;
	}

	.filters-additional .filters-v2 .swiper-slide:has(.clear-v2),
	.filters-additional .filters-v2 .swiper-slide:has(.all){
		display: none;
	}

	.filters-additional .filters-v2 .el .light {
		font-weight: 300;
	}

	.filters-additional .filters-v2 .el.to-delete .inner {
		font: 500 14px/24px var(--fonti);
		color: var(--grey600);
		padding: 4px;

	}

	.filters-additional .filters-v2 .el.to-delete .inner:has(.cross) {
		padding-right: 18px;
	}
	.filters-additional .filters-v2 .el.to-delete .to-delete-thin{
		font-weight: 300;
	}
	.filters-additional .filters-v2 .el.to-delete .inner:before {
		content: '';
		position: absolute;
		top: 55%;
		left: 4px;
		right: 18px;
		height: 0.75px;
		background-color: currentColor;
		transform: translateY(-50%) scale(0, 1);
		transform-origin: 0 50%;
		transition-property: transform, opacity;
		transition-duration: 0.2s;
		transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
		opacity: 0;
		pointer-events: none;
	}

	@media (pointer:fine) {
		.filters-additional .filters-v2 .el.to-delete:hover .inner:before {
			transform: translateY(-50%) scale(1);
			opacity: 1;
		}
	}

	@media (pointer:fine) {

		.filters-additional .filters-v2 .el.to-delete .inner:hover {
			color: var(--grey800);
		}
	}


	.filters-additional .filters-v2 .el .cross {
		position: absolute;
		top: 52%;
		right: 4px;
		width: 10px;
		height: 16px;
        margin: -8px 0;
		transition-property: transform, color, opacity;
		transition-duration: 0.2s;
		transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
	}

	.filters-additional .filters-v2 .el .cross:before,
	.filters-additional .filters-v2 .el .cross:after {
		content: '';
		position: absolute;
		top: 50%;
		left: 50%;
		background-color: currentColor;
	}

	.filters-additional .filters-v2 .el .cross:before {
		transform: translate3d(-50%, -50%, 0) rotate(-45deg);
	}

	.filters-additional .filters-v2 .el .cross:after {
		transform: translate3d(-50%, -50%, 0) rotate(45deg);
	}

	.filters-additional .filters-v2 .el.to-delete .cross {
		width: 100%;
	}
	.filters-additional .filters-v2 .el.to-delete .cross:before,
	.filters-additional .filters-v2 .el.to-delete .cross:after {
		right: -6px;
		left: auto;
	}

	.filters-additional .filters-v2 .el.to-delete .cross {
		color: var(--grey500);
	}

	.filters-additional .filters-v2 .el.to-delete .cross:before,
	.filters-additional .filters-v2 .el.to-delete .cross:after {
		width: 10px;
		height: 1px;
		border-radius: 0.5px;

	}

	@media (pointer:fine) {

		.filters-additional .filters-v2 .el.to-delete:hover .cross {
			color: var(--grey800);
		}
	}



	.filters-additional .filters-v2 .el.to-select .inner,
	.filters-additional .filters-v2 .desk-all .el {

		font: normal 14px/16px var(--fonti);
		letter-spacing: -1%;
		border-radius: 6px;
		color: var(--grey600);
		padding: 10px 18px;
		border: 0.5px solid #A2B5D3;
		background-color: rgba(247, 250, 252, 0.5);
	}

	.filters-additional .filters-v2 .desk-all .el {
		background-color: rgb(237 242 247);
		cursor: pointer;
	}

	@media (pointer:fine) {

		.filters-additional .filters-v2 .el.to-select .inner:hover,
		.filters-additional .filters-v2 .desk-all .el:hover {
			border-color: var(--deep-blue);
			background-color: transparent;
			box-shadow: 0px 0.5px 3px 0px rgba(20, 37, 63, 0.15);
		}
	}

	.filters-additional .filters-v2 .el.to-select .cross {
		right: 16px;
		opacity: 0;
		pointer-events: none;
		color: var(--grey600);
	}

	.filters-additional .filters-v2 .el.to-select .cross:before,
	.filters-additional .filters-v2 .el.to-select .cross:after {
		width: 12px;
		height: 1.2px;
		border-radius: 0.6px;

	}

	.filters-additional .filters-v2 .el.to-select input:checked~.inner,
	.filters-additional .filters-v2 .el.to-select.selected .inner {

		padding-right: 39px;
	}

	.filters-additional .filters-v2 .el.to-select input:checked~.inner .cross,
	.filters-additional .filters-v2 .el.to-select.selected .inner .cross {
		opacity: 1;
		pointer-events: all;
	}


}


.toggle-view {
	flex: 0 0 auto;
	margin-left: auto;
	display: flex;
	align-items: center;
}

.toggle-view>* {
	position: relative;
	flex: 0 0 auto;
	cursor: pointer;
	user-select: none;
	transition-property: color, background;
	transition-duration: 0.2s;
	transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
}

.toggle-view svg {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate3d(-50%, -50%, 0);
	fill: currentColor;
}

@media only screen and (max-width: 767px) {
	.toggle-view {
		gap: 8px;
	}

	.toggle-view>* {
		width: 32px;
		height: 32px;
		border-radius: 50%;
		color: var(--darker);
	}

	.toggle-view svg {

		width: 14px;
		height: 14px;
	}

	@media (pointer:fine) {
		.toggle-view>*:hover {
			color: var(--hover-dark);
		}
	}

	.toggle-view .pic-desktop {
		display: none;
	}

	html:not(.catalog-small) .toggle-view .view-big,
	html.catalog-small .toggle-view .view-small {
		background: var(--deep-blue);
		cursor: default;
		pointer-events: none;
		color: var(--soft);
	}
}

@media only screen and (max-width: 1279px) {
	.toggle-view .view-wide {
		display: none;
	}
}

@media only screen and (min-width: 768px) and (max-width: 1279px) {
	.toggle-view .view-big {
		border-top-right-radius: 5px;
		border-bottom-right-radius: 5px;
	}

}

@media only screen and (min-width: 768px) {
	.toggle-view {
		box-shadow: 0px 4px 4px -4px rgba(16, 24, 40, 0.15), 0px 0px 0px 5px #f5f6f6;

		background: var(--white);
		border-radius: 5px;
		backface-visibility: hidden;
		transform: translateZ(0);
		margin: 0 5px;
	}

	.filters .toggle-view {
		margin-top: 0;
		margin-bottom: 0;
	}

	.toggle-view>* {
		width: 42px;
		height: 40px;
		transition: color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
		border: 0.5px solid rgba(206, 212, 220, 0.75);
		color: var(--grey800);
	}

	.toggle-view>*:first-child {
		border-top-left-radius: 5px;
		border-bottom-left-radius: 5px;
	}

	.toggle-view>*:last-child {
		border-top-right-radius: 5px;
		border-bottom-right-radius: 5px;
	}

	.toggle-view>*:not(:first-child) {
		margin-left: -0.5px;
	}

	.toggle-view svg {
		width: 20px;
		height: 20px;
	}

	@media (pointer:fine) {
		.toggle-view>*:hover {
			color: var(--hover-dark);
		}
	}

	.toggle-view .pic-mob {
		display: none;
	}

	@media only screen and (max-width: 1279px) {

		html:not(.catalog-small) .toggle-view .view-big,
		html.catalog-small .toggle-view .view-small {
			background-color: var(--grey200);
			cursor: default;
			pointer-events: none;
			color: var(--grey600);
		}
	}
}

@media only screen and (min-width: 1280px) {

	html:not(.catalog-small):not(.catalog-wide) .toggle-view .view-big,
	html.catalog-small .toggle-view .view-small,
	html.catalog-wide .toggle-view .view-wide {
		background-color: var(--grey200);
		cursor: default;
		pointer-events: none;
		color: var(--grey600);
	}
}

/*mobile end*/
/*tablet start*/
@media only screen and (min-width: 768px) {
	.filters-panel {
		top: 90px;
	}

	.filters-panel.sticky {
		position: sticky;
		z-index: 50;
		background: var(--white);
		transition: top 0.5s cubic-bezier(0.645, 0.045, 0.355, 1);
	}

	.hide-header .filters-panel.sticky {
		top: 0 !important;
	}

	.main-title+.filters-panel {
		margin-top: 50px;
	}

	@media only screen and (max-width: 1279px) {
		.main-title+.wrap-catalog .filters-panel:first-child {
			margin-top: -38px;
		}
	}


	.filters-wrap {
		float: right;
		max-width: 365px;
		transform: translate3d(100%, 0, 0);
		border-style: solid;
		border-width: 0 0 0 5px;
		border-color: transparent;
	}

	.filters-fader {
		left: auto;
		right: 0;
	}

	.open-filters .filters-wrap {
		transform: translate3d(0, 0, 0);
	}

	.filters-popup .filters-close {
		left: auto;
		right: 100%;
		width: 52px;
		height: 52px;
		border-radius: 3px 0 0 3px;
		top: 50%;
		transform: translate3d(0, -50%, 0);
		background: var(--white);
	}

	.filters-popup .filters-close:before,
	.filters-popup .filters-close:after {
		height: 3px;
		width: 17px;
		border-radius: 1.5px;
		background: var(--sec-dark);
	}

	.filters-popup .scroll {
		position: relative;
	}

	.filters-el-title {
		display: none;
	}

	.filters-head {
		padding: 25px 42px 25px 25px;
		background: var(--white);
		cursor: default;
	}

	.filters-head .big {
		font-size: 24px;
		letter-spacing: -0.02em;
	}

	.filters-el-head {
		padding: 25px 70px 25px 25px;
		position: sticky;
		top: 71px;
		background: var(--white);
		z-index: 9;
	}

	.filters-el-head svg {
		right: 50px;
		transform: translate3d(50%, -50%, 0) rotate(0);
	}

	.filters-el.open .filters-el-head {
		font-weight: bold;
		color: var(--grey800);
	}

	.filters-el.open .filters-el-head svg {
		transform: translate3d(50%, -50%, 0) rotate(-180deg);
		fill: var(--grey700);
	}

	.filters-el:not(.open) .filters-el-inner {
		display: none !important;
	}

	.filters-el-inner {
		margin: 0;
	}

	.filters-el-scroll {
		/*
	max-height: 50vh;
	overflow: hidden;
	overflow-y: auto;
	*/
	}

	.filter-search {
		position: sticky;
		z-index: 8;
		top: 141px;
		padding: 0 25px;
		border: 0;
		margin: 0;
		background: var(--white);
	}

	.filter-search input {
		height: 50px;
		padding-right: 50px;
		padding-left: 20px;
		border-radius: 4px;
	}

	.filter-search svg {
		right: 45px;
	}

	.filters-popup .filter-checks:first-child:before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		margin: 0 35px 0 25px;
		height: 1px;
		background: var(--sec-light);
	}

	.filter-checks label {
		padding-left: 69px;
	}

	.filter-checks .checkbox,
	.filter-checks .color,
	.filter-checks img {
		width: 24px;
		height: 24px;
	}

	.filter-slider {
		padding-top: 0;
	}

	.filter-slider input {
		height: 50px;
		border-radius: 4px;
	}

	.filters-submit {
		gap: 0;
	}

	.filters-submit .btn {
		height: 54px;
		border-radius: 4px;
	}

	.filters-submit .btn-yellow {
		height: 60px;
		font-weight: 600;
		letter-spacing: -0.005em;
	}


	.filters-additional .clear {
		display: none;
	}

	.filter-el-category {
		display: none;
	}

	.filter-el-category+.filters-el {
		border-top-width: 0;
	}

	.categories {
		padding: 0;
		margin-top: -18px;
	}

	.categories .container {
		position: relative;
		gap: 0 25px;
		flex-wrap: wrap;
		padding-top: 0;
		padding-bottom: 0;
	}

	.categories .container:before,
	.categories .container:after {
		content: '';
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		margin: 0 32px;
		height: 1px;
		background: var(--catalog-border);
		transition: opacity 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
	}

	.categories .container:after {
		top: 86px;
		transform: translate3d(0, -100%, 0);
	}

	.categories .container>* {
		padding: 25px 0;
	}

	.categories.simple {
		margin-top: -25px;
	}

	.main-title+* * .categories.simple {
		margin-top: -35px;
	}

	.categories.simple .container {
		gap: 25px;
		padding-top: 25px;
		padding-bottom: 25px;
	}

	.categories.simple .container:before,
	.categories.simple .container:after {
		display: none;
	}

	.categories.simple .container>* {
		padding: 0 !important;
	}

	.sticked-filters .categories.simple .container {
		gap: 17px 25px;
		padding-top: 17px;
		padding-bottom: 17px;
	}

	.categories-popup,
	.categories-toggle {
		display: none !important;
	}

	.list-categories {
		flex: 0 0 auto;
		max-width: 100%;
		display: flex;
		align-items: center;
	}

	.list-categories.has-folded~.categories-all-toggle {
		display: flex;
	}

	.list-categories .filter-checks {
		flex-direction: row;
		align-items: center;
		flex-wrap: wrap;
		height: 36px;
		overflow: hidden;
		gap: 10px;
		padding: 0;
	}

	.categories.open .container {
		gap: 25px 24px;
		padding-bottom: 25px;
		padding-top: 25px;
	}

	.categories.open .container:after {
		display: none;
	}

	.categories.open .container>* {
		padding: 0;
	}

	.categories.open .list-categories .filter-checks {
		height: auto;
		overflow: visible;
	}

	.sticked-filters .categories {
		padding: 0;
	}

	.sticked-filters .categories .container {
		padding-top: 17px;
		padding-bottom: 17px;
		gap: 17px 25px;
	}

	.sticked-filters .categories .container>* {
		padding-top: 0;
		padding-bottom: 0;
	}

	.sticked-filters .categories .container:before,
	.sticked-filters .categories .container:after {
		opacity: 0;
	}

	.sticked-filters .categories .container:after {
		top: 70px;
	}

	.sticked-filters .categories.open .container {
		gap: 17px 24px;
		padding-bottom: 17px;
		padding-top: 17px;
	}

	.sticked-filters .categories.open .container>* {
		padding: 0;
	}

	.list-categories .filter-checks label {
		font: 300 14px/18px var(--fonti);
		letter-spacing: -0.01em;
		text-transform: none;
		text-align: left;
		justify-content: flex-start;
		gap: 5px;
		position: relative;
		padding: 0 18px;
		height: 36px;
		flex: 0 0 auto;
		max-width: none;
		width: auto;
	}

	.list-categories .filter-checks label>*:not(input) {
		position: relative;
		flex: 0 0 auto;
		font: inherit;
		color: var(--grey700);
		transition: color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
	}

	.list-categories .filter-checks .small {
		font: inherit;
		letter-spacing: inherit;
		margin: 0;
	}

	.list-categories .filter-checks .small:before {
		content: '('
	}

	.list-categories .filter-checks .small:after {
		content: ')'
	}

	.list-categories .filter-checks .checkbox {
		box-shadow: none !important;
		position: absolute;
		margin: 0;
		width: auto;
		height: auto;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		background: rgba(247, 250, 252, 0.5);
		border: 0.75px solid rgba(162, 181, 211, 0.5);
		border-radius: 3px;
		transform: none;
		transition-property: border, background;
		transition-duration: 0.2s;
		transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
	}

	.list-categories .filter-checks .checkbox:before {
		display: none;
	}

	@media (pointer:fine) {
		.list-categories .filter-checks label:hover input:not(:checked)~.checkbox {
			border-color: var(--hover-input);
			background-color: transparent;
		}
	}

	.list-categories .filter-checks input:checked~.checkbox {
		background-color: var(--deep-blue);
		border-color: transparent;
	}

	.list-categories .filter-checks input:checked~.checkbox~* {
		color: var(--white);
	}
}

/*tablet end*/

@media only screen and (min-width: 1280px) {
	.filters-panel .filters-panel-main {
		order: 1;
	}

	.filters-panel .sort {
		order: 2;
		/*width: 100%;*/
	}

	.filters-panel .filters-additional {
		order: 3;
		width: calc(100% - 160px);
	}

	.filters-panel .toggle-view {
		order: 4;
	}
}