h1.title {
	width: fit-content;
	margin-bottom: 20px;
	gap: 10px;
	padding-left: 0;
	span {
		color: #FFF;
		font-weight: 600;
		line-height: 1;
		letter-spacing: 0.16px;
		border-radius: 6px;
		background: var(--ff-2-f-00);
		padding: 6px 10px;
		white-space: nowrap;
	}
	&::after {
		display: none;
	}
}
.promo {
	position: relative;
	z-index: 3;
	+ .goods {
		background: var(--grey-1);
	}
}
.tab-box {
	display: flex;
	gap: 10px;
	border-bottom: 1px solid var(--grey-4);
	margin-bottom: 40px;
	overflow-x: auto;
	&::-webkit-scrollbar {
		display: none;
	}
	button {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0 10px;
		white-space: nowrap;
		letter-spacing: 0.16px;
		height: 39px;
		transition: color .2s linear;
		border-bottom: 3px solid rgba(0, 0, 0, 0);
		&.active {
			color: var(--black);
			font-weight: 600;
			border-bottom-color: var(--ff-2-f-00);
		}
	}
}
.filter-empty {
	align-self: start;
	display: none;
	grid-column: 2/3;
	width: 100%;
	border-radius: 30px;
	background: url(../images/filter-empty.webp) top center / auto 100% no-repeat;
	min-height: 450px;
	align-content: center;
	> div {
		margin: 0 9.3% 0 auto;
		max-width: 470px;
	}
	.heading {
		color: var(--white);
		text-align: center;
		font-size: 24px;
		font-weight: 700;
	}
	p {
		color: var(--white);
		text-align: center;
		margin: 8px 0 40px;
	}
	button {
		width: 100%;
		border-radius: 14px;
		background-color: var(--white);
		min-height: 50px;
		display: flex;
		align-items: center;
		justify-content: center;
		color: var(--ff-2-f-00);
		font-weight: 700;
		padding: 10px;
		transition: color .2s linear, background-color .2s linear;
	}
}
.full-list {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	font-size: 10px;
	letter-spacing: 0.1px;
	width: 100%;
	background: none;
	border: none;
	&::after {
		content: '\e903';
		font: 100 1cap / 1 'icon';
		color: inherit;
		transform: rotate(90deg);
		transition: transform .3s linear;
	}
}
.all .full-list::after {
	transform: rotate(270deg);
}
.range {
	.minmax {
		display: flex;
		justify-content: space-between;
		margin-bottom: 4px;
		width: 100%;
		.input {
			display: flex;
			align-items: end;
			gap: 2px;
			width: fit-content;
			background: var(--ff-2-f-00);
			padding: 3px 4px;
			border-radius: 4px;
			user-select: none;
			span {
				text-transform: uppercase;
				color: var(--white);
				pointer-events: none;
				user-select: none;
				font-size: 12px;
				letter-spacing: 0.12px;
			}
			input {
				width: 52px;
				border: none;
				background: inherit;
				color: var(--white);
				letter-spacing: 0.16px;
				text-align: center;
			}
		}
	}
	.line-box {
		padding: 8px 10px;
	}
	.line {
		position: relative;
		z-index: 1;
		width: 100%;
		height: 4px;
		border-radius: 4px;
		background: var(--grey-2);
		.red-line {
			position: absolute;
			inset: 0;
			border-radius: inherit;
			background: var(--ff-2-f-00);
		}
		:is(.min-range, .max-range) {
			position: absolute;
			left: -10px;
			top: -8px;
			width: 20px;
			height: 20px;
			border-radius: 50%;
			border: 1px solid var(--grey-dark);
			background: var(--white);
			cursor: pointer;
		}
		.max-range {
			left: calc(100% - 10px);
		}
	}
	.grid {
		display: flex;
		justify-content: space-between;
		padding: 0 10px;
		margin: -5px 0 11px;
		span {
			border-radius: 1px;
			background: var(--grey-1);
			width: 1px;
			height: 10px;
			&.big {
				position: relative;
				width: 2px;
				height: 20px;
				&::after {
					content: attr(data-val);
					position: absolute;
					left: 1px;
					top: 100%;
					color: var(--grey-dark, #424242);
					font-size: 10px;
					font-weight: 200;
					letter-spacing: 0.1px;
					transform: translateX(-50%);
				}
				&:last-child::after {
					left: 10px;
					transform: translateX(-100%);
				}
			}
		}
	}
}
.filter-preloader {
	--count: 1;
	grid-row: 1/3;
	border-radius: 20px;
	height: 608px;
}
.bottom {
	margin-bottom: 100px;
	> div {
		display: grid;
		pointer-events: none;
		visibility: hidden;
		height: 0;
		z-index: -1;
		overflow: hidden;
		position: absolute;
		&.types,
		&.appointment {
			grid-template-columns: repeat(3, 1fr);
			grid-auto-rows: 1fr;
			gap: 10px;
			.item {
				position: relative;
				overflow: hidden;
				border-radius: 20px;
				aspect-ratio: 473/190;
				transition: box-shadow .2s linear;
			}
			img {
				position: absolute;
				right: 0;
				top: 0;
				height: 100%;
				width: auto;
			}
			a {
				text-align: center;
				&:not(:empty) {
					position: relative;
					z-index: 1;
				}
				&:empty {
					position: absolute;
					inset: 0;
				}
			}
		}
		&.types .item {
			padding: 30px;
			display: flex;
			flex-direction: column;
			justify-content: center;
			background: var(--white);
			.head {
				position: relative;
				z-index: 1;
				font-size: 20px;
				letter-spacing: 0.2px;
				width: fit-content;
				max-width: 206px;
			}
			a {
				display: flex;
				align-items: center;
				gap: 4px;
				&:not(:empty)::after {
					content: '\e903';
					font: 100 1cap / 1 'icon';
					color: inherit;
				}
			}
		}
		&.appointment .item {
			border: 6px solid var(--white);
			position: relative;
			border-radius: 20px;
			background: var(--white);
			display: grid;
			grid-template-columns: 155px 1fr;
			gap: 6px;
			a:not(:empty) {
				width: 100%;
				height: 100%;
				padding-inline: 10px;
				font-size: 20px;
				display: flex;
				justify-content: center;
				align-items: center;
				letter-spacing: 0.2px;
				background: var(--white-grey);
			}
			img {
				grid-column: 2/3;
				width: 100%;
				object-fit: cover;
			}
		}
		&.brands {
			grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
			grid-auto-rows: 1fr;
			gap: 10px;
			.item {
				position: relative;
				border-radius: 20px;
				background: var(--white);
				border: 6px solid var(--white);
				display: flex;
				flex-direction: column;
				align-items: center;
				transition: box-shadow .2s linear;
				gap: 10px;
				img {
					height: 110px;
					width: auto;
					aspect-ratio: 200/110;
					object-fit: contain;
				}
				a {
					&:empty {
						position: absolute;
						inset: 0;
					}
					&:not(:empty) {
						position: relative;
						z-index: 1;
						display: flex;
						align-items: center;
						justify-content: center;
						gap: 4px;
						height: 58px;
						width: 100%;
						font-size: 20px;
						border-radius: 14px;
						background: var(--white-grey);
						&::after {
							content: '\e903';
							font: 100 1cap / 1 'icon';
							color: inherit;
						}
					}

				}
			}
		}
		&.filters {
			grid-template-columns: 353px 1fr;
			grid-auto-rows: auto;
			align-items: start;
			gap: 20px 16px;
			.filter-box {
				grid-row: 1/4;
				display: flex;
				flex-direction: column;
				align-self: start;
				border-radius: 20px;
				background: var(--white);
				padding: 16px 26px;
				.spoiler.open {
					box-shadow: none;
				}
				> form {
					display: contents;
				}
				.top {
					position: relative;
					display: none;
					height: 36px;
					justify-content: center;
					align-items: center;
					border-bottom: 1px solid var(--grey-1);
					span {
						display: flex;
						align-items: center;
						gap: 10px;
						padding: 8px 10px;
						font-size: 12px;
						letter-spacing: 0.12px;
						&::before {
							content: '\e916';
							font: 100 14px/1 'icon';
							color: inherit;
						}
					}
					.close {
						position: absolute;
						top: 3px;
						right: 0;
						border-radius: 10px;
						background-color: var(--white);
						width: 30px;
						aspect-ratio: 1;
						outline: none;
						border: none;
						display: flex;
						align-items: center;
						justify-content: center;
						&::before {
							content: '\e907';
							font-family: icon;
							line-height: 1;
							color: var(--grey-dark);
							font-weight: 100;
							font-size: 12px;
							transition: color .2s linear;
							transform: rotate(45deg);
						}
					}
				}
				fieldset {
					position: relative;
					display: flex;
					flex-direction: column;
					flex-grow: 1;
					gap: 16px;
					border: none;
					&::after {
						content: '';
						display: inline-block;
						margin-top: auto;
						width: 100%;
						height: 1px;
					}
				}
				.btns {
					position: relative;
					margin: 20px -16px 0;
					padding-top: 8px;
					display: grid;
					grid-template-columns: repeat(2, 1fr);
					gap: 4px;
					&::before {
						content: '';
						position: absolute;
						left: -10px;
						top: 0;
						width: calc(100% + 20px);
						height: 1px;
					}
					button {
						border-radius: 10px;
						padding: 11px 10px 12px;
						font-size: 14px;
						font-weight: 700;
						letter-spacing: 0.14px;
						border: 1px solid var(--ff-2-f-00);
						transition: color .2s linear, background-color .2s linear;
						&[type=submit] {
							color: var(--white);
							background-color: var(--ff-2-f-00);
						}
						&[type=reset] {
							color: var(--ff-2-f-00);
							background-color: var(--white);
						}
					}
				}
			}
			.buttons {
				position: relative;
				display: flex;
				height: 40px;
				> button {
					border-radius: 6px;
					background: #FFF;
					border: 1px solid var(--white);
					display: none;
					align-items: center;
					gap: 10px;
					padding: 6px 10px;
					font-size: 12px;
					letter-spacing: 0.12px;
					&::before {
						content: '\e916';
						font: 100 14px/1 'icon';
						color: inherit;
					}
					&::after {
						opacity: 0;
						content: '';
						width: 12px;
						flex-shrink: 0;
						aspect-ratio: 1;
						border-radius: 50%;
						background: var(--ff-2-f-00);
					}
					&.active::after {
						opacity: 1;
					}
				}
				.spoiler {
					position: absolute;
					z-index: 2;
					top: 0;
					right: 0;
					min-width: 230px;
					border-radius: 10px;
				}
			}
			.product-list {
				container: product-list-container / inline-size;
			}
			.pre-card {
				--count: 3;
			}
			.goods-list {
				display: grid;
				grid-template-columns: repeat(3, 1fr);
				grid-auto-rows: 1fr;
				gap: 10px;
				.pre-card {
					--count: 3;
				}
				&:has(.pagination:first-child) {
					display: none;
					+ .filter-empty {
						display: block;
					}
				}
			}
		}
		&.active {
			position: relative;
			height: auto;
			pointer-events: all;
			visibility: visible;
			overflow: visible;
			z-index: 0;
		}
	}
}
@container product-list-container (width < 786px) {
	.bottom > div.filters .goods-list {
		grid-template-columns: repeat(2, 1fr);
		.pre-card {
			--count: 2;
		}
	}
}
@container product-list-container (width < 370px) {
	.bottom > div.filters .goods-list {
		grid-template-columns: 1fr;
		.pre-card {
			--count: 1;
		}
	}
}
footer {
	margin-top: 150px;
}
@media screen and (max-width: 1152px) {
	body:has(.filter-box.active) header {
		z-index: 0;
	}
	.tab-box {
		margin-bottom: 30px;
		button {
			font-size: 14px;
			letter-spacing: 0.14px;
			height: 37px;
		}
	}
	.bottom > div {
		&.types,
		&.appointment {
			grid-template-columns: repeat(2, 1fr);
		}
		&.appointment .item {
			border-width: 4px;
		}
		&.brands .item {
			border-width: 4px;
		}
		&.filters {
			grid-template-columns: 1fr;
			gap: 20px;
			.filter-box {
				width: min(353px, 100vw);
				position: fixed;
				left: 0;
				top: 0;
				height: 100dvh;
				z-index: 100;
				padding: 0 0 4px 26px;
				transform: translateX(-150%);
				transition: transform .5s;
				box-shadow: 54px 7px 22px 0px rgba(0, 0, 0, 0.02), 30px 4px 18px 0px rgba(0, 0, 0, 0.08), 13px 2px 14px 0px rgba(0, 0, 0, 0.13), 3px 0px 7px 0px rgba(0, 0, 0, 0.15);
				&.active {
					transform: translateX(0%);
				}
				.top {
					position: absolute;
					left: 0;
					top: 0;
					width: 100%;
					display: flex;
					background: var(--white);
				}
				fieldset {
					margin-top: 36px;
					height: 100%;
					padding-top: 16px;
					overflow-y: scroll;
					padding-right: 20px;
				}
				.btns {
					padding-top: 4px;
					margin-right: 10px;
				}
			}
			.buttons > button {
				display: flex;
			}
		}
	}
	.filter-empty {
		grid-column: 1/-1;
		background: url(../images/filter-empty.webp) center center / max(1096px, 100%) auto no-repeat;
	}
	footer {
		margin-top: 100px;
	}
}
@media screen and (max-width: 768px) {
	h1.title {
		margin-bottom: 20px;
		padding: 6px 6px 6px 0;
		span {
			font-size: 12px;
			letter-spacing: 0.12px;
			padding: 8px 6px;
		}
	}
	.bottom {
		margin-bottom: 50px;
		> div {
			&.types,
			&.appointment {
				.item {
					border-radius: 10px;
					aspect-ratio: 18/7;
				}
			}
			&.types .item {
				padding: 10px;
				.head {
					font-size: 14px;
					letter-spacing: 0.14px;
					max-width: 60%;
				}
				a {
					font-size: 12px;
				}
			}
			&.appointment .item {
				border-radius: 10px;
				gap: 4px;
				grid-template-columns: 88px 1fr;
				a:not(:empty) {
					font-size: 14px;
					letter-spacing: 0.14px;
				}
			}
			&.brands {
				grid-template-columns: repeat(2, 1fr);
				.item {
					border-radius: 10px;
					gap: 5px;
					img {
						height: 50px;
						margin: -2px 0 -3px;
					}
					a:not(:empty) {
						height: 22px;
						font-size: 12px;
						border-radius: 6px;
					}
				}
			}
			&.filters {
				.goods-list {
					grid-template-columns: repeat(2, 1fr);
				}
				.buttons {
					height: initial;
					.spoiler {
						min-width: 158px;
					}
				}
			}
		}
	}
	footer {
		margin-top: 0;
	}
	.goods.hits {
		padding-bottom: 100px;
	}
	.filter-empty {
		min-height: initial;
		padding: 97px 49px;
		> div {
			max-width: min(470px, 80%);
			margin: 0 0 0 auto;
		}
		.heading {
			font-size: 20px;
		}
		p {
			font-size: 14px;
		}
	}
}
@media screen and (max-width: 540px) {
	.filter-empty {
		background: url(../images/filter-empty.webp) center center / max(1096px, 100%) auto no-repeat;
		> div {
			max-width: 100%;
		}
	}
	.bottom > div {
		&.types,
		&.appointment,
		&.filters .goods-list,
		&.brands {
			grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
		}
	}
}
@media (hover: hover) {
	.tab-box button:hover,
	.full-list:hover {
		color: var(--ff-2-f-00);
	}
	:where(.types, .appointment, .brands) .item:hover {
		box-shadow: 0px 50px 30px 0px rgba(0, 0, 0, 0.03), 0px 22px 22px 0px rgba(0, 0, 0, 0.04);
	}
	:where(.types, .appointment, .brands) .item:hover a {
		color: var(--ff-2-f-00);
	}
	.bottom .filters .filter-box {
		.top .close:hover::before {
			color: var(--ff-2-f-00);
		}
		.btns button:hover {
			&[type=submit] {
				color: var(--ff-2-f-00);
				background-color: var(--white);
			}
			&[type=reset] {
				color: var(--white);
				background-color: var(--ff-2-f-00);
			}
		}
	}
	.filter-empty button:hover {
		background-color: var(--ff-2-f-00);
		color: var(--white);
	}
}