/* assets/css/site-header.css */

.site-header .site-container {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

/* Верхняя строка: лого слева, поиск + язык справа */
.site-header__top {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
}

.site-header__tools {
	display: flex;
	flex-direction: row-reverse;
	align-items: center;
	gap: 8px;
	min-width: 0;
}

.site-header__toggles {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
}

/* Лого */
.site-logo {
	display: flex;
	align-items: center;
	gap: 8px;
	text-decoration: none;
	flex-shrink: 0;
}
.site-logo img { height: 50px; width: auto; }
.site-logo__text { display: flex; flex-direction: column; align-items: center; }
.site-logo__title { color: #458500; font-family: "Times New Roman", Times, serif; font-size: 1.3em; line-height: 1; }
.site-logo__tagline { color: #458500; font-family: "Times New Roman", Times, serif; font-size: 0.85em; line-height: 1; margin-top: 3px; }

/*
 * На узких экранах лого схлопывается в вертикальный "треугольник"
 * (иконка над текстом, а не сбоку), а лого и блок инструментов
 * (поиск+тумблер+язык) расходятся друг под другом на всю ширину —
 * иначе блок инструментов остаётся узкой колонкой справа от лого, даже
 * когда сам переносит поиск на вторую строку внутри себя. Точный порог
 * экрана не указан — 600px взят как разумная оценка.
 */
@media (max-width: 600px) {
	.site-header__top {
		gap: 8px;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: end;
		justify-content: space-between;
	}
	.site-header__tools {
		flex-direction: column;
		align-items: flex-end;
		gap: 8px;
	}
	.site-logo {
		flex-direction: column;
		gap: 2px;
	}
	.site-logo__text {
		max-width: 110px;
	}
}

/* Поиск — та же форма, но больше не растянута на всю ширину: на живом
   сайте она стоит компактным блоком рядом с переключателем языка. */
.container-search { width: auto; margin: 0; min-width: 0; flex-shrink: 1; }
.custom-home-search .searchform {
	display: flex;
	width: 220px;
	max-width: 100%;
	height: 25px;
	border: 1px solid #458500;
	border-radius: 4px;
	overflow: hidden;
	background: #fff;
	box-sizing: border-box;
}
.custom-home-search input[type="text"] {
	flex-grow: 1;
	flex-shrink: 1;
	min-width: 0; /* без этого текстовое поле не даёт форме сжиматься меньше своего содержимого */
	border: none;
	padding: 0 10px;
	font-size: 13px;
	color: #333;
	outline: none;
	background: transparent;
	height: 25px;
	line-height: 25px;
	box-sizing: border-box;
}
.custom-home-search input[type="submit"] {
	background-color: #458500;
	color: #fff;
	border: none;
	padding: 0 10px;
	font-weight: 400;
	text-transform: uppercase;
	font-size: 11px;
	cursor: pointer;
	height: 25px;
	line-height: 25px;
	width: auto;
	white-space: nowrap;
	flex-shrink: 0; /* фиксированные 60px оказались недостаточны для текста "НАЙТИ" на этом шрифте — теперь ширина берётся из содержимого */
}
.custom-home-search input[type="submit"]:hover { background-color: #366900; }

/* Переключатель языков — обёртка и разметка из lang_switch.txt без изменений,
   оформление приведено к единому стилю с ночным режимом: зелёная едва
   скруглённая обводка, зелёный текст. */
.custom-lang-dropdown { position: relative; flex-shrink: 0; }
.lang-curr-btn {
	display: flex;
	align-items: center;
	gap: 4px;
	background: none;
	border: 1px solid #458500;
	color: #458500;
	border-radius: 4px;
	padding: 3px 8px;
	height: 25px;
	box-sizing: border-box;
	cursor: pointer;
	font-size: 12px;
}
.lang-dropdown-menu {
	display: none;
	position: absolute;
	top: 100%;
	right: 0;
	background: #fff;
	border: 1px solid #ddd;
	border-radius: 4px;
	z-index: 10000;
}
.custom-lang-dropdown.is-open .lang-dropdown-menu { display: block; }
.lang-dropdown-item { display: flex; gap: 6px; padding: 6px 10px; white-space: nowrap; text-decoration: none; color: #333; }
.lang-dropdown-item.is-active { font-weight: 600; }

/*
 * Меню: пункты верхнего уровня ("тетки").
 * Размер иллюстраций — 150x150px (явное значение от пользователя, точнее
 * прежней оценки по замеру DevTools).
 *
 * Сетка вместо flex-wrap: в билдере ряд всегда был либо 6, либо 3 колонки —
 * grid с фиксированным числом колонок и медиа-запросом даёт ровно это,
 * без произвольных промежуточных значений, которые допускает flex-wrap.
 */
.site-menu {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 150px));
	justify-content: center;
	gap: 8px;
}
@media (max-width: 700px) {
	.site-menu {
		grid-template-columns: repeat(3, minmax(0, 150px));
	}
}

.tetka {
	display: flex;
	flex-direction: column;
	align-items: center;
	min-width: 0; /* даёт grid-ячейке сжиматься меньше содержимого по умолчанию */
}
/*
 * .drop-trigger лежит НЕ напрямую в .tetka, а внутри .dropdown-wrap —
 * значит именно .dropdown-wrap является flex-элементом относительно
 * .tetka, и align-self нужно применять к нему, а не к самой ссылке.
 */
.dropdown-wrap {
	align-self: stretch;
	max-width: 150px;
}

.tetka__icon {
	align-self: stretch;
	max-width: 150px;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 0; /* на скриншоте иллюстрации квадратные, не круглые */
}

/*
 * Кнопка не должна быть шире изображения над ней: ширина = 100% ячейки
 * (то есть равна ширине .tetka__icon), текст переносится, если не влезает,
 * вместо того чтобы раздвигать кнопку за пределы колонки.
 *
 * align-self: stretch вместо width: 100% — сочетание width:100% с
 * align-items:center на родителе оказалось ненадёжным именно в момент
 * переноса текста на вторую строку (кнопка визуально сужалась).
 * align-self: stretch растягивает по ширине родителя безусловно.
 *
 * Заливка различается по типу пункта, а не одинакова для всех:
 * - .tetka__link (пункт без выпадающего списка, например "ВСЕ СКИДКИ IHERB")
 *   залит сплошным цветом, текст белый;
 * - .drop-trigger (пункт С выпадающим списком) — контур цветом категории
 *   на белом фоне, без заливки.
 */
.tetka__link,
.drop-trigger {
	display: block;
	box-sizing: border-box;
	width: 100%;
	align-self: stretch;
	max-width: 150px;
	margin-top: 2px;
	border-radius: 4px;
	padding: 5px 4px; /* минимально достаточные отступы — большие поля отнимают ширину у текста и вызывают перенос там, где он не нужен */
	font-size: 13.6px;
	line-height: 1.1;
	font-weight: 200;
	text-align: center;
	text-decoration: none;
	white-space: normal;
}

.tetka__link {
	border: 1px solid transparent;
	color: #fff;
	background-color: var(--ax-color, #458500);
}
.tetka__link:hover { background-color: var(--ax-hover-color, #366900); }

.drop-trigger {
	border: 1px solid var(--ax-color, #458500);
	color: var(--ax-color, #458500);
	background-color: #fff;
}
/* Наведение/открытие панели намеренно не меняет заливку кнопки — открытие
   самой панели уже служит обратной связью; смена цвета кнопки в тот же
   момент, когда под ней раскрывается панель того же цвета, визуально
   сливает их в одно пятно. */

/* Выпадающая панель — переносится скриптом в <body>, поэтому фиксированное
   позиционирование. Заливка — цветом категории (var(--ax-color), проставлен
   Walker'ом на этот же элемент), а не белым фоном: на живом сайте цвет
   списка совпадает с цветом кнопки-триггера. */
.ax-menu {
	position: fixed;
	z-index: 99999;
	display: flex;
	flex-direction: column;
	background: var(--ax-color, #458500);
	border-radius: 6px;
	padding: 8px 0;
	min-width: 220px;
	box-shadow: 0 4px 16px rgba(0, 0, 0, .2);
}
.ax-menu a { display: block; padding: 6px 14px; text-decoration: none; color: #fff; white-space: nowrap; }
.ax-menu a:hover { background: var(--ax-hover-color, #366900); }

/*
 * Оговорка, оставшаяся в силе: адаптивные точки перехода (как это выглядит
 * на планшете/телефоне) на живом сайте не измерялись — при появлении
 * узкого экрана стоит свериться визуально дополнительно.
 */