/* Новая шапка EMET.
   Верхней полосы (языки, почта, телефон, соцсети) больше нет — всё это есть в новом футере.
   Вместо неё: одна кликабельная полоса акции над шапкой и компактный UA | RU рядом с иконками.
   Хлебные крошки вынесены в отдельную белую строку под меню.

   Подключение: см. README, шаг 1. Файл рассчитан на подключение ПОСЛЕ style.css. */

/* ---------- Высота шапки и отступ страницы ----------
   Было: шапка 109px (верхняя полоса 38 + меню 71), крошки — текстом поверх первого экрана.
   Стало: меню 71px + белая строка крошек 44px. Полоса акции стоит перед .wrapper
   и сдвигает страницу сама, поэтому в отступах её учитывать не нужно. */
@media (min-width: 768px) {
	.header {
		height: auto;
	}

	#breadcrumbs {
		position: static;
		display: flex;
		align-items: center;
		height: 44px;
		background: #fff;
		border-bottom: 1px solid rgba(8, 30, 45, 0.07);
	}

	/* при прокрутке меню становится fixed и выпадает из потока — крошки не должны прыгать вверх */
	.fix-header #breadcrumbs {
		margin-top: 71px;
	}
}

@media (min-width: 1200px) {
	.wrapper {
		padding-top: 71px;
	}

	.wrapper:has(#breadcrumbs) {
		padding-top: 115px;
	}
}

@media (min-width: 768px) and (max-width: 1199px) {
	.wrapper:has(#breadcrumbs) {
		padding-top: 93px;
	}

	.fix-header #breadcrumbs {
		margin-top: 49px;
	}
}

/* ---------- Хлебные крошки ---------- */
#breadcrumbs,
#breadcrumbs a {
	font-size: 13px;
	line-height: 17px;
	color: rgba(8, 30, 45, 0.5);
}

#breadcrumbs a:hover {
	color: #081e2d;
}

#breadcrumbs .breadcrumb_last {
	color: #081e2d;
}

/* ---------- Полоса акции ---------- */
.e-promo {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	height: 40px;
	padding: 0 16px;
	overflow: hidden;
	background:
		radial-gradient(
			40% 180% at 15% 0%,
			rgba(48, 177, 190, 0.35) 0%,
			rgba(48, 177, 190, 0) 70%
		),
		radial-gradient(
			30% 160% at 90% 100%,
			rgba(67, 217, 217, 0.18) 0%,
			rgba(67, 217, 217, 0) 70%
		),
		#081e2d;
	font:
		400 14px/1.2 "Circe",
		sans-serif;
	color: rgba(255, 255, 255, 0.86) !important;
	text-decoration: none !important;
	transition: color 0.3s;
}

/* мягкий блик при наведении — как у кнопок футера */
.e-promo::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		110deg,
		transparent 35%,
		rgba(255, 255, 255, 0.1) 50%,
		transparent 65%
	);
	transform: translateX(-100%);
	transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1);
	pointer-events: none;
}

.e-promo:hover {
	color: #fff !important;
}

.e-promo:hover::after {
	transform: translateX(100%);
}

/* block, а не flex: иначе на телефоне длинный текст обрезается без многоточия */
.e-promo__text {
	display: block;
	min-width: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.e-promo__text b,
.e-promo__text strong {
	font-weight: 700;
	color: #fff;
}

.e-promo__icon {
	display: grid;
	flex: none;
	place-items: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: #43d9d9;
	color: #081e2d;
	transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.e-promo__icon svg {
	width: 13px;
	height: 13px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.e-promo:hover .e-promo__icon {
	transform: translateX(3px);
}

.e-promo:focus-visible {
	outline: 2px solid #43d9d9;
	outline-offset: -2px;
}

@media (max-width: 1199px) {
	.e-promo {
		height: 36px;
		font-size: 13px;
	}
}

/* ---------- Порядок кнопок: справа налево Кошик · Обране · Вхід · UA|RU · Пошук · Перевірка ----------
   Порядок задан и в разметке (README, шаг 3), эти правила — страховка на случай,
   если разметку когда-нибудь переставят обратно. */
.header-actions {
	align-items: center;
	gap: 18px;
}

.header-actions > * {
	margin-left: 0;
	margin-right: 0;
}

.header-actions > .to-check {
	order: 1;
}
.header-actions > .search-wrap {
	order: 2;
}
.header-actions > .e-lang {
	order: 3;
}
.header-actions > .account-link,
.header-actions > .dropdown-wrap {
	order: 4;
}
.header-actions > .whishlist-link {
	order: 5;
}
.header-actions > .cart-link {
	order: 6;
}

/* «Вхід» — только иконка, как Обране и Кошик. Слово скрыто визуально, для экранных читалок остаётся. */
.header-actions .account-link {
	flex-direction: row;
	margin-left: 0;
	display: flex;
	border: none;
}

.header-actions .account-link > span {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* ---------- Одна форма для «Пошук», «Перевірка автентичності» и UA | RU ----------
   Белая таблетка 38px, одна тонкая обводка и одна мягкая тень; при наведении — бирюзовое свечение. */
.header .search-box,
.header .to-check,
.header .e-lang {
	height: 38px;
	border-radius: 999px;
	background: #fff;
	box-shadow:
		0 0 0 1px rgba(8, 30, 45, 0.08),
		0 2px 8px rgba(8, 30, 45, 0.06);
	transition: box-shadow 0.25s;
}

.header .search-box:hover,
.header .to-check:hover,
.header .e-lang:hover {
	box-shadow:
		0 0 0 1px rgba(48, 177, 190, 0.35),
		0 2px 10px rgba(48, 177, 190, 0.18);
}

.header .to-check {
	padding: 0 18px;
}

/* ---------- Текст и иконки шапки — один цвет и одно начертание ----------
   Бирюзовый остаётся только для наведения; текущий раздел отмечен линией снизу, а не цветом. */
.header-nav .menu > li > a,
.header .to-check,
.header .e-lang a,
.header .e-lang a.is-active {
	font:
		400 15px/1 "Circe",
		sans-serif;
	letter-spacing: 0;
	color: #081e2d;
	text-shadow: none;
}

.header-nav .menu > li:hover > a,
.header-nav .menu > li.current-menu-item > a,
.header-nav .menu > li.current-menu-parent > a {
	text-shadow: none;
}

.header-nav .menu > li:hover > a,
.header .to-check:hover,
.header .e-lang a:not(.is-active):hover {
	color: #30b1be;
}

.header-actions svg path {
	fill: #081e2d;
}

.header-actions > a:hover svg path,
.header .search-wrap:hover svg path {
	fill: #30b1be;
}

/* ---------- Переключатель UA | RU ---------- */
.header .e-lang {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	padding: 3px;
}

.header .e-lang a {
	display: grid;
	place-items: center;
	min-width: 38px;
	height: 32px;
	padding: 0 10px;
	border-radius: 999px;
	text-decoration: none;
	transition:
		background-color 0.25s,
		color 0.25s;
}

.header .e-lang a.is-active {
	background: #d9f4f1;
}

.header .e-lang a:focus-visible {
	outline: 2px solid #30b1be;
	outline-offset: 2px;
}

/* на телефоне и планшете язык остаётся в меню-бургере, как сейчас */
@media (max-width: 1199px) {
	.header-actions > .e-lang {
		display: none;
	}
}