.wrapper {
	max-width: 1800px;
	width: calc(100% - 120px);
}
h1.title {
	display: flex;
	align-items: center;
	color: var(--text-color);
	font-family: Lato;
	font-size: 30px;
	font-weight: 300;
	line-height: 100%;
	text-transform: uppercase;
	margin-bottom: 30px;
}
header {
	padding-top: 20px;
	&::before {
		content: '';
		position: absolute;
		left: 0;
		top: -20px;
		width: 100%;
		height: 100%;
		background: var(--White);
		z-index: 1;
		transition: opacity 0.1s 0.5s;
	}
	> .wrapper {
		z-index: 1;
		height: 114px;
		> .logo {
			position: absolute;
			left: 50%;
			top: 0;
			transform: translate(-48%);
			width: 240px;
			min-height: 114px;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			gap: 2px;
			color: var(--text-color);
			border: 3px solid var(--dark);
			font-size: 18px;
			opacity: 1;
			z-index: 1;
			transition: opacity 0.2s linear;
			&::before {
				content: '';
				position: absolute;
				inset: 2px;
				border: 2px solid var(--dark);
			}
			span {
				display: flex;
				font-family: inherit;
				font-weight: inherit;
				font-size: 10px;
				line-height: 80%;
				color: var(--text-color);
			}
		}
		.catalog {
			width: min(100%, 908px);
			margin-bottom: 0;
			transform: translateX(46px);
			* {
				color: var(--text-color);
			}
			.ws-menu {
				display: flex;
				flex-direction: row;
				align-items: center;
				gap: 30px;
				.item {
					&.center {
						margin-right: auto;
					}
					:is(a, p) {
						font-size: 16px;
						text-transform: lowercase;
						transition: color 0.2s linear;
					}
					p {
						display: flex;
						align-items: center;
						gap: 6px;
						cursor: pointer;
						font-family: Lato;
						&::after {
							content: '\e90f';
							font-family: icon;
							line-height: inherit;
							color: var(--text-color);
							font-size: 12px;
							transform: translateY(2px) rotate(-90deg);
							transition: transform 0.4s linear, color 0.2s linear;
							vertical-align: baseline;
						}
					}
					a {
						white-space: nowrap;
					}
				}
			}
		}
		.location {
			color: var(--text-color);
			&::before {
				background-color: var(--dark);
			}
		}
		> .buttons svg {
			fill: var(--text-color);
		}
		.menu-container .buttons > *::before {
			color: var(--White);
		}
		:is(.logo, .location, .catalog) {
			animation: visible 0.6s linear forwards;
		}
	}
	&.active {
		.catalog,
		> .wrapper > .logo {
			opacity: 0;
		}
	}
	&.open {
		.bottom-menu {
			transform: translate3d(0, -1px, 0);
		}
		> .wrapper .catalog .ws-menu .item p::after {
			transform: translateY(2px) rotate(90deg);
		}
	}
	.bottom-menu {
		position: absolute;
		left: 0;
		top: calc(100% - 20px);
		width: 100%;
		background: var(--White);
		transform: translate3d(0, -150%, 0);
		transition: transform 0.5s ease-out;
		* {
			color: var(--text-color);
		}
		.body {
			margin-top: 50px;
			border-top: 1px solid #dddede;
			border-bottom: 1px solid #dddede;
			box-shadow: 0px 20px 20px 0px rgba(0, 0, 0, 0.1);
			.wrapper {
				display: grid;
				grid-template-columns: 450px 1fr;
				height: initial;
				.box {
					display: flex;
					flex-direction: column;
					gap: 20px;
					min-height: 400px;
					border-right: 1px solid #dddede;
					padding: 30px 30px 10px 0;
					> a {
						font-family: Lato;
						font-weight: 400;
					}
					nav {
						margin-bottom: 0;
					}
					.ws-menu {
						position: relative;
						display: grid;
						grid-template-columns: repeat(2, 1fr);
						justify-content: space-between;
						gap: 6px 0px;
						.item.active {
							p {
								font-weight: 400 !important;
								+ .sub-menu {
									max-height: 189px;
									overflow-y: auto;
								}
							}
						}
						> .item > a {
							padding: 2px;
							grid-column: 1/2;
							color: #666766;
							font-family: Lato;
							font-size: 14px;
							font-weight: 300;
							cursor: pointer;
						}
						.item.hide {
							display: none;
						}
						.item:has(.sub-menu) {
							&.hide {
								display: none;
							}
							display: contents;
							> p {
								padding: 2px;
								grid-column: 1/2;
								color: #666766;
								font-family: Lato;
								font-size: 14px;
								font-weight: 300;
								cursor: pointer;
								width: max-content;
								display: flex;
								align-items: center;
								gap: 6px;
								transition: color 0.2s linear;
								&::after {
									margin-top: -3px;
									content: '\e90f';
									font-family: icon;
									line-height: inherit;
									color: inherit;
									font-size: 10px;
									transform: translateY(2px) rotate(-180deg);
									vertical-align: baseline;
								}
							}
							> .sub-menu {
								position: relative;
								left: 0;
								top: 0;
								grid-column: 2/3;
								grid-row: 1/11;
								display: flex;
								flex-direction: column;
								height: 100%;
								gap: 10px;
								max-height: 0px;
								overflow-y: hidden;
								align-self: flex-start;
								&::-webkit-scrollbar {
									width: 8px;
								}
								&::-webkit-scrollbar-track {
									background: #dddede;
								}
								&::-webkit-scrollbar-thumb {
									display: block;
									border: 3px solid #dddede;
									background-color: var(--menu-bg);
								}
								.item {
									display: contents;
								}
								a {
									color: #666766;
									font-family: Lato;
									font-size: 14px;
									font-weight: 300;
									line-height: normal;
								}
							}
						}
					}
				}
				.items {
					display: flex;
					align-items: center;
					overflow-x: auto;
					height: 100%;
					width: calc(100% + 30px);
					&::-webkit-scrollbar {
						height: 6px;
					}
					&::-webkit-scrollbar-track {
						background: #dddede;
					}
					&::-webkit-scrollbar-thumb {
						display: block;
						border: 2px solid #dddede;
						background-color: var(--menu-bg);
					}
					.item {
						position: relative;
						border-right: 1px solid #dddede;
						padding: 30px;
						height: 100%;
						flex-shrink: 0;
						display: grid;
						grid-template-rows: 1fr auto;
						gap: 4px;
						aspect-ratio: 392/340;
						&:last-child {
							border-color: transparent;
						}
						.images {
							position: relative;
							border-radius: 4px;
							overflow: hidden;
							.big {
								position: absolute;
								left: -10px;
								top: -10px;
								width: calc(100% + 20px);
								height: calc(100% + 20px);
								object-fit: cover;
								transition: transform 0.3s linear;
							}
							.small {
								position: absolute;
								left: 6px;
								bottom: 6px;
								aspect-ratio: 11/6;
								width: 28%;
							}
						}
						p {
							font-family: Lato;
							text-transform: capitalize;
							max-width: 390px;
							display: -webkit-box;
							overflow: hidden;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 1;
							line-clamp: 1;
						}
						> a {
							position: absolute;
							inset: 0px;
						}
					}
				}
			}
		}
	}
}
.run-line {
	border-top: 1px solid var(--menu-bg);
	border-bottom: 1px solid var(--menu-bg);
	padding: 16px 0;
	height: 64px;
	.slides {
		align-items: center;
		flex-wrap: nowrap;
		gap: 94px;
		will-change: left;
		.slide {
			display: flex;
			align-items: center;
			gap: 94px;
			height: 100%;
			div img {
				width: auto;
				height: 32px;
			}
		}
	}
}
html:has(.scrollPage) {
	header {
		position: fixed;
		left: 0;
		top: 0;
	}
	footer {
		padding: 30px 0;
		min-height: calc(100vh - 134px) !important;
		max-height: initial;
	}
}
@media screen and (max-width: 1500px) {
	h1.title {
		margin-bottom: 40px;
		font-size: 24px;
	}
	header {
		padding-left: 0;
		padding-right: 0;
		.wrapper {
			display: grid;
			grid-template-columns: 1fr auto 1fr;
			> .logo {
				transform: translate(calc(-50% + 4px), 0);
			}
			> .buttons:not(.mob) {
				margin-left: auto;
				a {
					width: 20px;
					height: 20px;
				}
			}
			.catalog {
				width: min(100%, 794px);
				margin: 0 auto;
				transform: none;
				.ws-menu {
					gap: 2px 20px;
					justify-content: center;
					.item.center {
						margin-right: 260px;
					}
				}
			}
		}
		.bottom-menu .body .wrapper {
			grid-template-columns: 340px 1fr;
			width: 100%;
			padding-left: 40px;
			.box {
				min-height: 320px;
				.ws-menu .item:has(.sub-menu) > .sub-menu {
					gap: 5px;
				}
			}
		}
	}
	.wrapper {
		width: calc(100% - 80px);
		padding: 0;
	}
}
@media (hover: none) and (pointer: coarse) {
	header .bottom-menu .body .wrapper {
		.box .ws-menu .item:has(.sub-menu) {
			&.active p {
				font-weight: 400;
				&::after {
					/* opacity: 0; */
				}
				+ .sub-menu {
					padding-right: 20px;
					max-height: 220px;
					overflow: auto;
				}
			}
			/* p {
						display: flex;
						align-items: center;
						gap: 6px;
						&::after {
							content: '\e90f';
							font-family: icon;
							line-height: inherit;
							color: var(--text-color);
							font-size: 10px;
							transform: translateY(2px) rotate(-180deg);
							transition: transform 0.4s linear, color 0.2s linear;
							vertical-align: baseline;
						}
					} */
		}
		.items {
			scroll-behavior: smooth;
			scroll-snap-type: x mandatory;
			scrollbar-width: none;
			&::-webkit-scrollbar {
				width: 0;
				height: 0;
				background: transparent;
				display: none;
			}
			.item {
				scroll-snap-align: center;
			}
		}
	}
}
@media screen and (max-width: 1279px) {
	.wrapper {
		width: calc(100% - 40px);
	}
	header {
		background: var(--White);
		padding-top: 10px;
		> .wrapper {
			height: initial;
			display: grid;
			gap: 10px 20px;
			padding-bottom: 20px;
			> .logo {
				position: relative;
				left: initial;
				top: initial;
				transform: none;
				margin: 0 auto;
			}
			.catalog {
				grid-column: span 3;
				grid-row: 2/3;
				transform: none;
				width: auto;
				.ws-menu .item.center {
					margin-right: 0;
				}
			}
			.burger {
				margin-left: auto;
			}
		}
		.bottom-menu .body .wrapper {
			grid-template-columns: 344px 1fr;
			padding-left: 40px;
			.box {
				padding: 20px 20px 10px 0;
			}
			.items .item {
				padding: 30px 24px;
				p {
					max-width: 300px;
				}
			}
		}
	}
	.run-line {
		height: 50px;
		padding: 8px 0;
	}
	.vertical .run-line {
		height: 64px;
		padding: 16px 0;
	}
}
@media screen and (max-width: 767px) {
	h1.title {
		margin-bottom: 20px;
		font-size: 18px;
	}
	.wrapper {
		width: calc(100% - 20px);
	}
	.run-line .slides {
		gap: 56px;
		.slide {
			gap: 56px;
		}
	}
	header {
		padding-top: 30px;
		&::before {
			height: calc(100% + 20px);
		}
		> .wrapper {
			gap: 20px 10px;
			padding-bottom: 16px;
			> .logo {
				width: 112px;
				min-height: 58px;
				font-size: 12px;
				border: none;
				background: url(../images/logo.svg) 0 0 / 100% 100%;
				&::before {
					display: none;
				}
				span {
					font-size: 5px;
				}
			}
			.catalog {
				width: 100%;
				overflow-x: auto;
				scrollbar-width: none;
				&::-webkit-scrollbar {
					height: 0;
					width: 0;
					background: transparent;
					display: none;
				}
				.ws-menu {
					justify-content: start;
					:is(a, p) {
						white-space: nowrap;
					}
				}
			}
		}
		.bottom-menu {
			max-height: calc(100dvh - 122px);
			padding-bottom: 20px;
			.body {
				height: 100%;
				margin-top: 10px;
				padding-bottom: 10px;
				.wrapper {
					grid-template-columns: 1fr;
					grid-template-rows: auto 1fr;
					gap: 0;
					height: 100%;
					padding-left: 0;
					.box {
						border-color: transparent;
						margin-right: auto;
						gap: 0;
						padding: 20px 30px 0 20px;
						min-height: initial;
						> a {
							padding: 2px;
                            color: #666766;
                            font-family: Lato;
                            font-size: 14px;
                            font-weight: 300;
                            cursor: pointer;
							margin-bottom: 5px;
						}
						.ws-menu {
							gap: 5px 10px;
							.item:has(.sub-menu) {
								&.active p + .sub-menu {
									max-height: 200px;
								}
								p {
									font-size: 14px;
								}
								> .sub-menu a {
									font-size: 12px;
								}
							}
						}
					}
					.items {
						margin-top: 20px;
						height: 100%;
						width: 100%;
						border-top: 1px solid rgba(45, 47, 46, 0.16);
						.item {
							border-color: transparent;
							width: calc(100% - 60px);
							max-width: 390px;
							padding: 20px 0 20px 30px;
							&:last-child {
								margin-right: 30px;
							}
							.images {
								aspect-ratio: 33/26;
							}
						}
					}
				}
			}
		}
	}
	header .wrapper > .logo {
		width: 112px;
		min-height: 58px;
		font-size: 12px;
		border: none;
		background: url(../images/logo.svg) 0 0 / 100% 100%;
		&::before {
			display: none;
		}
	}
	.vertical .run-line,
	.run-line {
		height: initial;
		padding: 10px 0;
		.slides {
			gap: 40px;
			.slide {
				gap: 40px;
				div img {
					height: 20px;
				}
			}
		}
	}
}
@media screen and (max-width: 1024px) and (max-height:431px) {
	header {
		padding-top: 10px;
		&.hide {
			padding-top: 10px;
		}
		> .wrapper {
			gap: 2px 10px;
			.catalog .item :is(a, p) {
				font-size: 14px;
			}
		}
		.bottom-menu {
			top: 100%;
			max-height: initial;
			height: initial;
			.body {
				margin-top: 5px;
				height: 100%;
				.wrapper {
					grid-template-columns: 296px 1fr;
					height: calc(100% - 5px);
					.box {
						min-height: 208px;
						height: 100%;
						gap: 5px;
						padding: 5px 10px 10px 30px;
						> a {
							font-size: 14px;
							margin-bottom: 0;
						}
						.ws-menu .item:has(.sub-menu) {
							&.active p + .sub-menu {
								max-height: calc(100dvh - 160px);
							}
							p {
								font-size: 12px;
							}
							> .sub-menu {
								top: -20px;
								gap: 3px;
								a {
									font-size: 12px;
								}
							}
						}
					}
					.items {
						border-top: none;
						width: 100%;
						.item {
							border-color: transparent;
							width: auto;
							height: 100%;
							padding: 5px 0 5px 5px;
							&:last-child {
								padding-right: 10px;
							}
						}
					}
				}
			}
		}
	}
	.run-line {
		height: initial;
		padding: 0;
		.slides {
			gap: 56px;
			.slide {
				gap: 56px;
				div {
					margin: 5px 0;
					height: 100%;
					img {
						height: 20px;
					}
				}
			}
		}
	}
}
@media screen and (hover:hover) {
	header {
		.bottom-menu .body .wrapper .box {
			a:hover {
				color: var(--hover);
			}
			.ws-menu {
				.item:has(.sub-menu) {
					p:hover,
					a:hover {
						color: var(--hover);
					}
				}
				> .item:hover > a {
					color: var(--hover);
				}
			}
		}
		.catalog .ws-menu .item :is(a, p):hover {
			color: var(--hover);
		}
		&.last.open .bottom-menu .body .wrapper .box .ws-menu .item:has(.sub-menu) {
			> .sub-menu a:hover {
				color: var(--hover);
			}
		}
		> .wrapper .catalog .ws-menu .item p:hover::after {
			color: var(--hover);
		}
	}
	header .bottom-menu .body .wrapper .items .item:hover .images .big {
		transform: scale(1.15);
	}
}