:root {
	--title-color: #201E50;
	--title-accent-color: #AB2C2C;
	--item-background-color: #F4F2EC;
}

header.alternative {
	max-width: 1440px;

	padding: 7px 20px;

	.header__heading {
		a {
			padding: 0;
			margin: 0;
		}
	}

	nav.header__inline-menu {
		.list-menu {
			display: flex;
			justify-content: center;
			align-items: center;
			column-gap: 25px;
			visibility: hidden;

			&:hover> :not(:hover) {
				opacity: 0.8;
			}

			.menu-item {
				font-size: 16px;
				line-height: 1.3;
				color: var(--title-color);
				font-weight: 500;
				visibility: visible;

				&.open {
					opacity: 1;

					svg {
						transform: rotateZ(180deg);
					}

					.megamenu--box {
						opacity: 1 !important;
						height: unset !important;
						/* height: 230px; */
						z-index: 1001;

						pointer-events: unset;
					}
				}

				svg {
					transition: rotate 0.5s ease, rotateZ 0.5s ease;
				}

				.menu-item__content {
					position: relative;

					display: flex;
					align-items: center;
					column-gap: 8px;
					padding: 39px 0;


					a {
						display: unset;

						&::after {
							content: '';

							position: absolute;
							top: 0;
							left: 0;

							width: 100%;
							height: 100%;
						}
					}
				}


				.megamenu--box {
					position: absolute;
					top: 100%;
					left: 0;
					z-index: 1000;

					width: 100%;
					height: 0;
					pointer-events: none;
					border-radius: 0 0 16px 16px;

					overflow: hidden;
					opacity: 0;
					/* visibility: hidden; */

					transition:
						opacity 0.5s ease;

					.submenu--list {
						position: static;

						display: flex;
						justify-content: center;
						align-items: center;
						gap: 8px;

						padding: 24px 64px;
						border-radius: 0 0 16px 16px;

						li {
							position: relative;
							display: flex;
							flex-direction: column;
							align-items: center;
							row-gap: 16px;

							width: calc((100% - 8px*5)/6);
							border-radius: 8px;

							transition: background-color 0.25s ease-in-out;

							&:hover, &:focus {
								background-color: var(--item-background-color);
							}

							.submenu--item__image {
								display: inline-block !important;
								width: 100px;
								height: 100px;

								img {
									width: 100%;
									height: 100px;

									object-position: center;
									object-fit: cover;
								}
							}

							a {
								display: unset;

								&::after {
									content: '';

									position: absolute;
									top: 0;
									left: 0;

									width: 100%;
									height: 100%;
								}
							}

						}
					}
				}

			}
		}

	}

	.menu-drawer__navigation {
		max-width: 100dvw;
	}

	.menu-drawer {
		@media (width < 750px) {
			width: 100dvw;
		}
	}

	.menu-drawer-container {
		* {
			letter-spacing: normal;
		}

		.menu-drawer__menu-item {
			display: flex;
			align-items: center;
			justify-content: space-between;

			height: 57px;
			max-width: 100dvw;

			padding: 0 20px;
			border: unset;


			font-size: 18px;
			line-height: 1.4;
			font-weight: 500;
			color: var(--title-color);


		}

		.menu-drawer__inner-submenu {
			padding: 0 20px 24px 20px;

			.menu-drawer__close-button {
				height: 90px;
				display: flex;
				align-items: center;
				gap: 17px;

				font-size: 18px;
				color: var(--title-color);
				font-weight: 500;
			}

			.menu-drawer__menu {
				display: flex;
				flex-wrap: wrap;
				align-items: center;
				gap: 8px;

				li {
					display: flex;
					flex-direction: column;
					align-items: center;

					width: calc((100% - 8px) / 2);
					padding: 16px;
					border-radius: 8px;

					font-size: 14px;
					line-height: 1;
					font-weight: 500;
					color: var(--title-color);

					background-color: var(--item-background-color);

					.submenu--item__image {
						display: block !important;
						width: 100px;
						height: 100px;

						img {
							width: 100%;
							height: 100px;

							object-position: center;
							object-fit: cover;
						}
					}

					a {
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;

						text-decoration: none;
					}

					.submenu--item-title {
						color: var(--title-color);
					}
				}
			}

			.collection-link {
				display: inline-block;
				width: 100%;

				margin-top: 24px;
				padding: 16px;
				border: 1px solid #201E501F;
				border-radius: 100px;

				font-size: 14px;
				font-weight: 600;
				line-height: 1.6;
				text-align: center;
				color: var(--title-color);
				text-decoration: none;
			}

			@media screen and (max-width: 989.98px) {
				.collection-link {
					display: none;
				}
			}
		}

	}

	.header-drawer__products {
		padding: 32px 0 0 0;

		background-color: #F5F5F5;

		.heading {
			padding: 0;
			padding-left: 20px;
			margin: 0;
			margin-bottom: 16px;

			font-size: 14px;
			line-height: 1.4;
			font-weight: 500;
			color: #201E5099;
		}

		.products-grid {
			display: flex;
			flex-wrap: nowrap;
			gap: 8px;
			overflow-x: auto;

			width: 100%;
			max-width: unset;
			margin: 0;
			padding: 0 20px 8px 20px;

			&::-webkit-scrollbar-thumb {
				background-color: var(--title-color);
			}

			&::-webkit-scrollbar-track {
				background-color: #201E501F;
			}

			.block-product__card {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;

				width: 140px;
				min-width: 140px;
				height: 140px;

				background-color: white;

				.product-card {
					border-radius: 0;
					border: unset;
				}

				.card__inner {
					display: flex;
					align-items: center;
					justify-content: center;

					width: 80px;
					height: 80px;

					margin: 0 auto;
				}

				a {
					padding: 0;

					font-size: 14px;
					line-height: 1.4;
					font-weight: 400;
					text-align: center;
					color: var(--title-color);

					span {
						display: none;
					}
				}

			}
		}
	}

	.list-social {
		svg {
			color: var(--title-color);
			fill: var(--title-color);
			opacity: 0.5;

			transition: opacity 0.25s ease-in-out;

			&:hover, &:focus {
				opacity: 1;
			}
		}
	}

	.marked {
		color: var(--title-accent-color) !important;
	}

	ul {
		list-style-type: none;
		padding: 0;
		margin: 0;
	}

}