body {
	overflow-y: auto;
}
.wrapper {
	max-width: 1800px;
	width: calc(100% - 120px);
}
html:has(.scrollPage) header {
	position: absolute;
}
header {
	&.scroll-bg {
		background-color: var(--White);
		padding-bottom: 20px;
		transition: .4s;
	}
	&::before {
		top: 0 !important;
		height: 100% !important;
		transition: transform 0.2s ease-out 0.2s !important;
		transform: translateY(-100%);
	}
	&.open {
		&::before {
			transform: translateY(0);
		}
		.bottom-menu {
			transform: translate3d(0, -1px, 0) !important;
		}
	}
	.bottom-menu {
		transform: translate3d(0, -200%, 0) !important;
	}
}
footer {
	display: none;
}
html:has(.scrollPage) {
	.promo {
		aspect-ratio: 192/50;
		.promo-slider {
			height: 100%;
			overflow: hidden;
		}
	}
	.wrapper {
		width: calc(100% - 120px);
	}
}
main {
	.filters {
		display: grid;
		grid-template-columns: minmax(300px, 890px) auto;
		gap: 35px 40px;
		transform: none;
		margin-top: 30px;
		margin-bottom: 35px;
		> a {
			color: var(--menu-bg);
			font-family: Lato;
			font-size: 16px;
			font-weight: 400;
			line-height: normal;
			grid-column: span 2;
			display: flex;
			align-items: center;
			gap: 10px;
			width: fit-content;
			transition: color 0.2s linear;
			&::before {
				font-family: icon;
				content: '\e90e';
				font-size: 16px;
				line-height: 1;
				color: inherit;
				margin-top: 4px;
				transition: color 0.2s linear;
			}
		}
		.title {
			max-width: 100%;
			display: grid;
			grid-template-columns: 70px auto 1fr;
			gap: 20px;
			align-items: center;
			color: var(--text-color);
			font-family: Lato;
			font-size: 30px;
			font-weight: 300;
			line-height: 100%;
			text-transform: uppercase;
			&::before,
			&::after {
				content: '';
				height: 1px;
				width: 100%;
				background-color: var(--dark);
			}
		}
		.tabs {
			display: flex;
			align-items: center;
			gap: 30px;
			a {
				color: var(--menu-bg);
				font-family: Lato;
				font-size: 18px;
				font-style: normal;
				font-weight: 300;
				line-height: normal;
				text-transform: lowercase;
				white-space: nowrap;
				transition: color 0.2s linear;
				&.active {
					font-weight: 700;
				}
			}
		}
	}
	.brands {
		transform: none;
		display: flex;
		flex-direction: column;
		gap: 10px;
		margin-bottom: 35px;
		.item {
			display: grid;
			grid-template-columns: 1fr 1fr;
			gap: 40px;
			align-items: center;
			height: auto;
			min-height: 500px;
			transition: background-color 0.3s linear;
			&:nth-child(odd) .img {
				margin-left: -60px;
				width: calc(100% + 60px);
			}
			.img {
				position: relative;
				width: 100%;
				height: 100%;
				border-radius: 4px;
				overflow: hidden;
				a {
					position: absolute;
					inset: 0;
					z-index: 3;
				}
				img {
					position: absolute;
					left: 0;
					top: 0;
					width: 100%;
					height: 100%;
					object-fit: cover;
					&.small {
						position: absolute;
						left: initial;
						right: 40px;
						top: 120px;
						min-height: auto;
						max-height: none;
						aspect-ratio: 15/9;
						width: 150px;
						height: auto;
					}
				}
			}
			.text {
				display: flex;
				flex-direction: column;
				justify-self: start;
				gap: 27px;
				padding-right: 67px;
				padding-top: 50px;
				padding-bottom: 50px;
				a {
					display: flex;
					align-items: center;
					gap: 10px;
					color: var(--menu-bg);
					font-family: Lato;
					font-size: 16px;
					font-weight: 400;
					line-height: normal;
					text-transform: lowercase;
					opacity: 0;
					transition: opacity 0.3s linear, color 0.2s linear;
					margin-bottom: 8px;
					&::after {
						content: "\e912";
						font-family: icon;
						font-size: inherit;
						color: inherit;
						line-height: 1;
						margin-top: 4px;
						transition: color 0.2s linear;
					}
				}
				h2 {
					color: #2D2F2E;
					font-family: Helvetica;
					font-size: 32px;
					font-weight: 400;
					line-height: normal;
					text-transform: uppercase;
					margin-bottom: 3px;
				}
				> p {
					color: var(--menu-bg);
					font-size: 20px;
					font-weight: 400;
					line-height: normal;
				}
				.info {
					display: grid;
					grid-template-columns: repeat(2, 1fr);
					width: min(600px, 100%);
					div {
						display: flex;
						flex-direction: column;
						gap: 10px;
						&:first-of-type {
							padding-right: 40px;
							border-right: 1px solid rgba(45, 47, 46, 0.16);
						}
						&:last-of-type {
							padding-left: 40px;
						}
						h3 {
							color: var(--menu-bg);
							font-family: Lato;
							font-size: 18px;
							font-weight: 700;
						}
						p {
							color: var(--menu-bg);
							font-family: Lato;
							font-size: 14px;
							font-weight: 300;
						}
					}
				}
			}
		}
	}
}
@media screen and (max-width: 1500px) {
	html:has(.scrollPage) .wrapper {
		width: calc(100% - 80px);
	}
	main {
		.filters {
			grid-template-columns: minmax(300px, 596px) auto;
			gap: 35px 30px;
			> a {
				font-size: 14px;
				gap: 6px;
			}
			.title {
				font-size: 24px;
			}
			.tabs a {
				font-size: 16px;
			}
		}
		.brands {
			gap: 8px;
			margin-bottom: 30px;
			.item {
				min-height: 334px;
				gap: 30px;
				&:nth-child(odd) .img {
					width: calc(100% + 40px);
					margin-left: -40px;
				}
				.img {
					position: relative;
					img.small {
						right: 30px;
						top: 80px;
						width: 100px;
					}
				}
				.text {
					gap: 10px;
					padding-right: 0;
					a {
						gap: 6px;
						font-size: 14px;
						margin-bottom: 10px;
					}
					h2 {
						font-size: 28px;
						margin-bottom: 0;
					}
					> p {
						font-size: 16px;
						margin-bottom: 6px;
					}
					.info {
						width: min(600px, 100%);
						div {
							&:first-of-type {
								padding-right: 30px;
							}
							&:last-of-type {
								padding-left: 30px;
							}
							h3 {
								font-size: 16px;
							}
						}
					}
				}
			}
		}
	}
}
@media screen and (max-width: 1279px) {
	html:has(.scrollPage) {
		.promo {
			aspect-ratio: 768/345;
		}
		.wrapper {
			width: calc(100% - 40px);
		}
	}
	header {
		background: transparent !important;
		&.scroll-bg {
			background: var(--White) !important;
		}
	}
	main {
		.filters {
			grid-template-columns: 246px auto;
			gap: 20px;
			margin-top: 10px;
			margin-bottom: 30px;
			> a {
				font-size: 16px;
				gap: 10px;
			}
			.tabs {
				gap: 24px;
			}
		}
		.brands .item {
			grid-template-columns: 0.43fr 0.57fr;
			.img img:last-of-type {
				top: 30px;
			}
		}
	}
}
@media (hover: none) and (pointer: coarse) {
	main .brands .item .text a {
		opacity: 1;
		order: 1;
	}
}
@media screen and (max-width: 1024px) {
	main .brands {
		gap: 10px;
		.item {
			min-height: initial;
			max-height: initial;
			display: flex;
			flex-direction: column;
			gap: 20px;
			border-bottom: 1px solid rgba(0, 0, 0, 0.2);
			&:nth-child(odd) .img {
				margin-left: 0;
			}
			.img {
				border-radius: 0;
				width: calc(100% + 40px);
				min-height: 334px;
				img.small {
					right: initial;
					top: initial;
					left: 20px;
					bottom: 20px;
				}
			}
			.text {
				gap: 0px;
				padding-right: 0;
				padding-top: 0;
				padding-bottom: 10px;
				a {
					gap: 6px;
					font-size: 14px;
					margin-bottom: 10px;
					margin-top: 10px;
				}
				h2 {
					font-size: 28px;
					margin-bottom: 0;
				}
				> p {
					font-size: 16px;
					margin-bottom: 6px;
				}
				.info {
					width: min(600px, 100%);
					div {
						&:first-of-type {
							padding-right: 30px;
						}
						&:last-of-type {
							padding-left: 30px;
						}
						h3 {
							font-size: 16px;
						}
					}
				}
			}
		}
	}
}
@media screen and (max-width: 767px) {
	html:has(.scrollPage) {
		.promo {
			aspect-ratio: 390/266;
		}
		.wrapper {
			width: calc(100% - 20px);
		}
	}
	main {
		.filters.wrapper {
			width: 100%;
			display: flex;
			flex-direction: column;
			gap: 12px;
			margin-top: 10px;
			margin-bottom: 30px;
			> a {
				margin-bottom: 27px;
				margin-left: 10px;
			}
			.title {
				grid-template-columns: 30px auto 1fr;
				margin-right: 10px;
				font-size: 20px;
			}
			.tabs {
				max-width: 100%;
				overflow-x: auto;
				padding: 0 10px;
				gap: 2px 24px;
				margin-right: auto;
				scrollbar-width: none;
				&::-webkit-scrollbar {
					width: 0;
					height: 0;
					background: transparent;
					display: none;
				}
			}
		}
		.brands {
			gap: 10px;
			.item {
				gap: 10px;
				.img {
					border-radius: 0;
					width: calc(100% + 20px);
					&:nth-child(2n+1) {
						width: calc(100% + 20px);
					}
					img.small {
						left: 10px;
						bottom: 10px;
					}
				}
				.text {
					> p {
						margin-bottom: 10px;
					}
					.info {
						display: flex;
						flex-direction: column;
						gap: 26px;
						div {
							&:first-of-type {
								position: relative;
								padding-right: 0;
								border-right: none;
								&::before {
									content: '';
									position: absolute;
									left: 0;
									bottom: -16px;
									height: 1px;
									width: 100px;
									background: rgba(45, 47, 46, 0.16);
								}
							}
							&:last-of-type {
								padding-left: 0;
							}
						}
					}
				}
			}
		}
	}
}
@media (hover: hover) {
	main {
		.filters {
			> a:hover {
				color: var(--hover);
				&::before {
					color: var(--hover);
				}
			}
			.tabs a:hover {
				color: var(--hover);
			}
		}
		.brands .item:hover {
			background-color: #F7F7F7;
			.text a {
				opacity: 1;
				&:hover,
				&:hover::after {
					color: var(--hover)
				}
			}
		}
	}
}