.announcement {
	font-size: 0.7em;
	text-align: center;
	padding-block: 0.25rem;
	margin-bottom: 0.25rem;
	background: var(--secondary-alpha-100);
	color: color-mix(var(--dark), var(--secondary-dark) 50%);
}
	.announcement .link {
		color: inherit;
	}
	.announcement .link.active {
		color: var(--dark) !important;
		text-decoration: none;
		pointer-events: none;
		font-weight: 600;
	}

	.announcement .width-section {
		display: flex;
		justify-content: space-between;
		gap: 2em;
	}

	/* .announcement__message {
		color: var(--primary) !important;
	} */
	.announcement__contacts {
		display: flex;
		gap: 1rem;
	}

.header {
	padding-block: 0.5rem 1rem;
	margin-bottom: 2em;
	width: 100%;
}
	.header-top {
		display: grid;
		grid-template-columns: 14em 1fr auto;
		gap: 1em;
		align-items: center;
	}

	.header-logo {
		display: flex;
		align-items: center;
		gap: 0.5em;
		position: relative;
	}
		.header-logo img {
			max-height: 2em;
		}

	.header-name {
		font-size: 2em;
		letter-spacing: -0.05em;
		line-height: 1;
		left: -3.2em;
		top: 2em;
	}

	.header-search {
		height: 2em;
	}
		.header-search-icon {
			display: none;
		}

	.header-cart {
		position: relative;
		font-size: 2rem;
		height: 1em;
	}
		.header-cart:hover * {
			color: var(--primary) !important;
		}
		
	.header-cart-value {
		position: absolute;
		line-height: 1;
		left: calc(100%);
		top: 0;
		padding-left: 0.2em;
		color: var(--dark);
	}


.header-navigation {
	display: flex;
  	margin-top: 1em;
	/* padding-top: 0.75em;
	border-top: 1px solid var(--gray-lightest); */
	position: relative;
}


	.header .link.active {
		color: var(--dark);
	}
	.header .link.exact {
		font-weight: 600;
		text-decoration-color: transparent;
		pointer-events: none;
		cursor: default;
	}
	.header .link:hover {
		text-decoration-color: currentColor;
	}

	.navigation-section {
		position: relative;
	}
		.navigation-section-name {
			padding: 0 0.5em;
		}
			.navigation-section.first .navigation-section-name {
				margin-left: -0.5em;
			}
			.navigation-section-name.exact {
				position: relative;
				z-index: 6;
			}

		.navigation-section-dropdown {
			position: absolute;
			left: -0.5em;
			top: 1.3em;
			z-index: 5;
			display: none;
			padding: 0 0.5rem 0.5rem;
			grid-template-columns: 1fr 3fr;
			filter: drop-shadow(0 7px 5px #0000001a);
		}
			.navigation-section:not(:has(.nodropdown)):hover .navigation-section-dropdown {
				display: grid;
			}
			.navigation-section:first-child .navigation-section-dropdown {
				left: -1em;
			}

			.dropdown-categories {
				padding-block: 0.5rem;
				border-bottom-left-radius: 0.5em;
				background-color: var(--lighter);
				width: max-content;
				pointer-events: all;
				max-height: calc(100vh - 9rem);
				overflow: hidden auto;
  				scrollbar-width: thin;
			}
				.dropdown-categories .link {
					padding-inline: 0.5em 1em;
					padding-block: 5px;
					display: block;
					transition: text-decoration-color 0.1s ease-out, background-color 0.1s ease-out;
				}
					.dropdown-categories .link.viewed {
						transition: none;
						background-color: var(--secondary-alpha-100) !important;
						color: var(--secondary-dark);
					}
					.dropdown-categories .link.active.exact {
						pointer-events: all;
						background-color: unset;
					}

			.dropdown-products {
				padding: calc(0.5rem + 5px) 1rem;
				background-image: linear-gradient(var(--lighter), var(--lightest) 7%);
				border-top-right-radius: 0.5em;
				border-bottom-right-radius: 0.5em;
				pointer-events: all;
				width: max-content;
				min-width: 10em;
				display: grid;
				max-height: calc(100vh - 9rem);
				overflow: hidden auto;
  				scrollbar-width: thin;
				scrollbar-gutter: stable;
			}
				.dropdown-products-group {
					display: none;
					grid-template-columns: repeat(4, 1fr);
					gap: 1em 0.75em;
					height: fit-content;
				}
					.dropdown-products-group-name {
						grid-column: span 4;
						margin-bottom: -0.5em;
						text-decoration: none;
						color: var(--dark);
						font-weight: 600;
					}
					.dropdown-products-item {
						margin: 0;
						position: relative;
					}
						.dropdown-products-item img {
							border-radius: 0.25em;
							background-color: var(--gray-lightest);
							height: 130px;
							aspect-ratio: 1/1;
						}
						.dropdown-products-item figcaption {
							font-size: 14px;
							line-height: 16px;
						}
						.dropdown-products-item :where(.sale, .new) {
							position: absolute;
							left: 5px;
							top: calc(130px - 1.6em);
							padding: 3px 5px;
							border-radius: 0.25rem;
							line-height: 1;
							color: white;
							background-color: var(--secondary);
							font-weight: 1000;
							text-shadow: 1px 1px 0 var(--secondary-dark);
							font-size: 15px;
						}
							.dropdown-products-item .sale {
								background-color: var(--dark);
								text-shadow: none;
							}

		.navigation-section-corrector {
			display: none;
			position: absolute;
			left: calc(100% - 0.5em);
			top: 0;
			width: 100px;
			height: 100%;
			clip-path: polygon(25% 70%, 100% 100%, 0% 100%, 0% 40%);
			z-index: 5;
		}
			.navigation-section:hover .navigation-section-corrector {
				display: block;
			}

	#nav-design {
		margin-left: 1em;
		padding-left: 1.5em;
		position: relative;
		white-space: nowrap;

		position: absolute;
		right: 0;
			& .icon {
				font-size: 2em;
				line-height: 1;
				font-family: Comic Sans MS;
				display: inline-block;
				height: 0;
				position: absolute;
				left: 0;
				pointer-events: none;
			}
			&:hover .icon {
				transform: rotateY(180deg);
			}
	}

	.navigation-burger, .navigation-sidebar {
		display: none;
	}

	#search {
		padding: 0;
		margin-top: var(--page-padding);
		width: min(var(--page-width), 100%);
		background: var(--light);
		scrollbar-width: thin;
	}

	.header-subnavigation {
		display: flex;
		flex-wrap: wrap;
		font-size: 0.7em;
		margin-top: 0.75em;
		margin-left: -0.5em;
		padding-right: min(15rem, 10vw);
	}
		.header-subnavigation .link {
			padding: 2px 0.5em 2px 0.5em;
		}

@media screen and (width < 1100px) {
	#search {
		border-radius: 0;
		margin: 0;
		animation: lite-slide-down 0.05s ease-out;
		max-width: unset;
		max-height: 100vh;
	}
	.navigation-cart-value {
		top: -0.2em;
		right: 0;
		color: var(--secondary);
		-webkit-text-stroke: 1px var(--lighter);
		font-weight: 1000;
	}
}

@keyframes cart {
	50% {
		transform: scale(1.5, 1.5);
		color: var(--secondary);
	}
	100% {
		transform: none;
		color: inherit;
	}
}