.lp--header {
	padding-inline: var(--pd);
	padding-block: var(--pd) 0;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 100;

	@media (max-width: 991px) {
		background-color: #fff;
		position: fixed;
		padding-bottom: 1rem;
	}

	.logo {
		width: 10rem;
		display: flex;
		gap: 1rem;
		align-items: center;
		line-height: 100%;
		height: 2.5rem;
		position: relative;

		@media (max-width: 767px) {
			width: 9rem;
		}

		a {
			display: block;
			text-decoration: none;
			color: var(--c1);
			top: 0.4rem;
			position: absolute;
			left: 0;

			svg,
			img {
				height: 2.5rem;
			}
		}
	}

	.hbar {
		display: flex;
		width: calc(100% - 10rem);
		align-items: center;
		gap: 1rem;
		justify-content: space-between;
		.spacer {
			flex-grow: 1;
		}
		.wbtn {
			> a {
				position: relative;
				display: flex;
				gap: 0.5rem;
				text-decoration: none;
				color: var(--c2);
				padding: 0.5rem 1rem;
				transition: background 0.25s linear;
				font-weight: 700;
				font-size: 0.8rem;
				text-transform: capitalize;
				border: none;
				border-radius: 1.6rem;
				background: linear-gradient(180deg, #f9d5c9, #c9ada3);
				letter-spacing: 0.04rem;
				justify-content: center;
				align-items: center;
				transition: all 0.2s linear;
				overflow: hidden;
				white-space: nowrap;

				svg {
					height: 1rem;
				}

				&::before {
					content: "";
					position: absolute;
					top: 0;
					left: -150%;
					left: 0;
					height: 100%;
					width: 100%;
					transform: skewX(-45deg);
					background: linear-gradient(90deg, rgba(255, 255, 255, 0.2), white);
					box-shadow: 0.625rem 0 1.25rem -0.625rem #fff;
					animation: a 5s infinite linear;
				}

				&:hover {
					background: linear-gradient(180deg, #c9ada3, #f9d5c9);

					&::before {
						display: none;
					}
				}

				&.disabled {
					opacity: 0.5;
					pointer-events: none;

					&::before {
						display: none;
					}
				}

				&.hidden {
					display: none;
				}

				@media (max-width: 767px) {
					display: none;
				}
			}
		}
		.menu-btn a {
			color: var(--c1);

			svg {
				height: 2.5rem;
			}
		}
		.lang {
			position: relative;

			> a {
				display: flex;
				gap: 0.5rem;
				color: var(--c6);
				text-decoration: none;
				align-items: center;
				font-weight: 700;

				> svg {
					height: 1.5rem;
				}

				> span {
					color: var(--g6);
				}
			}

			> div {
				display: none;
				flex-direction: column;
				position: absolute;
				top: 100%;
				right: 0;
				padding: 1rem;
				border-radius: 1rem;
				background-color: var(--bg);
				box-shadow: var(--shad);
				gap: 0.5rem;

				a {
					font-size: 0.8rem;
					color: var(--g6);

					&.active {
						color: var(--c4);
					}
				}
			}

			> a.opened + div {
				display: flex;
			}
		}
	}

	.menu {
		position: relative;
		display: flex;
		width: 100%;
		margin-top: 1rem;

		.logo {
			display: none;
		}

		.close {
			display: none;
			position: absolute;
			top: 1rem;
			right: 1rem;

			> a {
				text-decoration: none;
				color: var(--g6);

				svg {
					height: 2rem;
				}
			}
		}

		.items {
			display: flex;
			justify-content: space-between;
			align-items: center;
			flex-grow: 1;

			> div {
				display: flex;

				> a {
					text-transform: uppercase;
					font-weight: 700;
					font-size: 0.8rem;
					color: var(--g6);
					text-decoration: none;

					&:hover {
						color: var(--c1);
					}
				}
			}

			> .lang {
				position: relative;

				> a {
					display: flex;
					gap: 0.5rem;
					color: var(--c6);
					text-decoration: none;
					align-items: center;

					> svg {
						height: 1.5rem;
					}

					> span {
						color: var(--g6);
					}
				}

				> div {
					display: none;
					flex-direction: column;
					position: absolute;
					top: 100%;
					right: 0;
					padding: 1rem;
					border-radius: 1rem;
					background-color: var(--bg);
					box-shadow: var(--shad);
					gap: 0.5rem;

					a {
						font-size: 0.8rem;
						color: var(--g6);

						&.active {
							color: var(--c4);
						}
					}
				}

				> a.opened + div {
					display: flex;
				}
			}
		}

		> .contacts {
			display: none;
		}

		background-color: #fff;
		margin-top: 0;
		width: 20rem;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 100;
		flex-direction: column;
		padding: 2rem;
		gap: 3rem;
		transform: translate(-100%, 0);
		transition: transform 0.3s ease-in-out;

		&.opened {
			box-shadow: 0 0 10rem 1rem rgba(0, 0, 0, 0.1);
			transform: translate(0, 0);
		}

		.logo {
			display: flex;
		}

		.close {
			display: flex;
		}

		.items {
			flex-direction: column;
			justify-content: flex-start;
			align-items: flex-start;
			gap: 1rem;
			flex-grow: 1;
			padding-left: 2rem;

			> div > a {
				font-size: 1.5rem;
				font-weight: 400;
				text-transform: none;
			}

			> .lang {
				display: none;
			}
		}

		> .contacts {
			display: flex;
			flex-direction: column;
			row-gap: 1rem;

			> a {
				width: 100%;
				text-decoration: none;
				font-size: 1rem;
				color: var(--c3);
				display: flex;
				gap: 1rem;
				align-items: center;
				font-weight: 600;

				svg {
					height: 1.5rem;
				}

				span {
					color: var(--g6);
				}

				&.active {
					color: var(--c1);
				}
			}
		}
	}
}