/* ============================================================
   Раскладки шапки (inc/header-layouts.php)
   ------------------------------------------------------------
   Пять разных шапок вместо одной. Разметку печатает PHP, здесь —
   только их геометрия и типографика. Классическая шапка масла.сайт
   (.hd без .hdl) этих правил не видит: селекторы начинаются с .hdl.

   Общая логика: шапка держится на ТИПОГРАФИКЕ и воздухе, а не на
   плашках. Поэтому здесь нет ни одной карточки, ни одной заливки
   кнопки — кроме тех мест, где кнопка действительно кнопка.
   ============================================================ */

.hdl {
	position: sticky;
	top: 0;
	z-index: 90;
	background: var(--page, #fff);
	/* Цвет задаём явно, а не наследуем: ссылки внутри стоят на color:inherit,
	   и на теме без правила для body они забирали дефолт браузера — в тёмной
	   системной схеме это белый текст на белой шапке. */
	color: var(--fg-primary, #29333D);
	border-bottom: 1px solid var(--border-default, rgba(19, 22, 29, .08));
}
.hdl.hd--no-sticky { position: static; }

.hdl__bar {
	display: flex;
	align-items: center;
	gap: clamp(16px, 2vw, 32px);
	max-width: var(--ms-maxw, 1240px);
	margin-inline: auto;
	padding: 14px var(--ms-pad-inline, 24px);
	/* Ни один узел шапки не имеет права вытолкнуть корзину за край экрана:
	   длинное имя магазина ужимается, а не сдвигает действия. */
	min-width: 0;
}
.hdl__bar > * { min-width: 0; }

/* --- логотип ------------------------------------------------ */
.hdl__logo {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
	color: inherit;
	flex: 0 0 auto;
}
.hdl__logo img { display: block; max-height: 40px; width: auto; }

.hdl__wordmark {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: calc(19px * var(--ms-type-scale, 1));
	line-height: 1.1;
	letter-spacing: -.01em;
	/* Имя магазина в шапке — одна строка. Длинное имя из установки WordPress
	   («Бьюти-бутик — демо COS WP Woo») иначе ломалось пополам и читалось как
	   незаполненное поле. */
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 34ch;
}

/* --- ссылки и действия -------------------------------------- */
.hdl__nav { display: flex; align-items: center; gap: clamp(14px, 1.6vw, 26px); }
.hdl__nav--right { margin-left: auto; }

.hdl__link,
.hdl__act {
	font-family: var(--font-body);
	font-size: calc(14px * var(--ms-type-scale, 1));
	line-height: 1;
	color: inherit;
	text-decoration: none;
	white-space: nowrap;
	transition: color .15s var(--ease-out, ease);
}
.hdl__link:hover,
.hdl__act:hover { color: var(--ms-accent, #2A9BC4); }
.hdl__link--strong { font-weight: 600; }

.hdl__act { display: inline-flex; align-items: center; gap: 6px; }
.hdl__act .cnt {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: var(--radius-pill, 999px);
	background: var(--ms-accent, #2A9BC4);
	color: var(--fg-on-accent, #fff);
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
}
.hdl__act .cnt[hidden] { display: none; }

.hdl__note {
	font-size: calc(13px * var(--ms-type-scale, 1));
	color: var(--fg-secondary, #4A5663);
	white-space: nowrap;
}
.hdl__phone {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: calc(15px * var(--ms-type-scale, 1));
	color: inherit;
	text-decoration: none;
	white-space: nowrap;
}

.hdl__burger {
	display: none;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin-left: -8px;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	cursor: pointer;
}

/* --- поиск --------------------------------------------------- */
.hdl__search { flex: 1 1 260px; min-width: 0; }
.hdl__search--wide { flex: 1 1 460px; }
.hdl__search .field { display: flex; align-items: center; }
.hdl__search input[type="search"] {
	width: 100%;
	height: 42px;
	padding: 0 14px;
	border: 1px solid var(--border-default, rgba(19, 22, 29, .12));
	border-radius: var(--radius-sm, 8px);
	background: var(--bg-soft, #F6F8FA);
	font: inherit;
	font-size: calc(14px * var(--ms-type-scale, 1));
	color: inherit;
}
.hdl__search input[type="search"]:focus-visible {
	outline: 2px solid var(--ms-accent, #2A9BC4);
	outline-offset: 1px;
}
.hdl__search .go {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 42px;
	padding: 0 14px;
	margin-left: -1px;
	border: 0;
	border-radius: var(--ms-btn-radius, var(--radius-sm, 8px));
	background: var(--ms-accent, #2A9BC4);
	color: var(--fg-on-accent, #fff);
	cursor: pointer;
}

/* ============================================================
   OVERLAY — поверх первого экрана, лого по центру
   ============================================================ */
/* Шапка лежит НА обложке, но остаётся в потоке: absolute отсчитывался бы от
   вьюпорта и уезжал под демо-баннер (и под любой admin-bar). Sticky + втягивание
   следующей секции отрицательным margin даёт тот же эффект без сюрпризов. */
.hdl--overlay {
	position: sticky;
	top: 0;
	background: none;
	border-bottom: 0;
	color: #fff;
	margin-bottom: calc(-1 * var(--hdl-overlay-h, 76px));
}
.hdl--overlay .hdl__bar { padding-block: clamp(18px, 3vw, 30px); }
/* Обложка бывает светлой — под шапкой мягкое затемнение, иначе белые ссылки
   пропадают на бежевом кадре. */
.hdl--overlay::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, rgba(0, 0, 0, .38), transparent);
	pointer-events: none;
}
.hdl--overlay .hdl__bar { position: relative; }
.hdl--overlay .hdl__logo--center {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
}
.hdl--overlay .hdl__wordmark {
	font-size: calc(20px * var(--ms-type-scale, 1));
	letter-spacing: .02em;
}
.hdl--overlay .hdl__link,
.hdl--overlay .hdl__act {
	font-size: calc(12px * var(--ms-type-scale, 1));
	letter-spacing: .12em;
	text-transform: uppercase;
}
.hdl--overlay .hdl__link:hover,
.hdl--overlay .hdl__act:hover { color: inherit; opacity: .6; }
.hdl--overlay .hdl__act .cnt { background: #fff; color: #111; }
/* Тень читаемости: обложка бывает светлой, и белые ссылки на ней пропадают. */
.hdl--overlay .hdl__bar > * { text-shadow: 0 1px 12px rgba(0, 0, 0, .35); }

/* ============================================================
   EDITORIAL — одна тонкая строка, только текст
   ============================================================ */
.hdl--editorial { border-bottom-color: transparent; }
.hdl--editorial .hdl__bar { padding-block: clamp(20px, 2.6vw, 30px); }
.hdl--editorial .hdl__wordmark {
	font-size: calc(21px * var(--ms-type-scale, 1));
	letter-spacing: -.02em;
	text-transform: uppercase;
	/* Имя магазина из коробочной установки бывает длинным («Магазин одежды —
	   демо COS WP Woo»): без потолка оно выдавливало корзину за край экрана. */
	max-width: 26ch;
}
.hdl--editorial .hdl__nav--mid { margin-left: clamp(24px, 5vw, 72px); }
.hdl--editorial .hdl__link,
.hdl--editorial .hdl__act {
	font-size: calc(11px * var(--ms-type-scale, 1));
	letter-spacing: .14em;
	text-transform: uppercase;
}
.hdl--editorial .hdl__act .cnt {
	background: none;
	color: inherit;
	min-width: 0;
	padding: 0;
	font-weight: 400;
}
.hdl--editorial .hdl__act .cnt::before { content: "("; }
.hdl--editorial .hdl__act .cnt::after { content: ")"; }

/* ============================================================
   MARKET — рабочая шапка лавки: поиск в центре, лента разделов
   ============================================================ */
.hdl--market .hdl__bar { padding-block: 12px; }
.hdl--market .hdl__wordmark { font-size: calc(17px * var(--ms-type-scale, 1)); }

.hdl__rail {
	display: flex;
	gap: clamp(14px, 1.8vw, 26px);
	max-width: var(--ms-maxw, 1240px);
	margin-inline: auto;
	padding: 0 var(--ms-pad-inline, 24px) 10px;
	overflow-x: auto;
	scrollbar-width: none;
}
.hdl__rail::-webkit-scrollbar { display: none; }
.hdl__rail a {
	font-size: calc(13px * var(--ms-type-scale, 1));
	color: var(--fg-secondary, #4A5663);
	text-decoration: none;
	white-space: nowrap;
	padding-bottom: 4px;
	border-bottom: 2px solid transparent;
}
.hdl__rail a:hover {
	color: var(--fg-primary, #29333D);
	border-bottom-color: var(--ms-accent, #2A9BC4);
}

/* ============================================================
   UTILITY — техника: поиск, сравнение, условия строкой
   ============================================================ */
.hdl--utility .hdl__bar { padding-block: 10px; }
.hdl--utility .hdl__wordmark { font-size: calc(16px * var(--ms-type-scale, 1)); }
.hdl--utility .hdl__link--cat { font-weight: 600; }

.hdl__terms {
	display: flex;
	gap: clamp(16px, 2vw, 32px);
	max-width: var(--ms-maxw, 1240px);
	margin-inline: auto;
	padding: 0 var(--ms-pad-inline, 24px) 9px;
	font-size: calc(12px * var(--ms-type-scale, 1));
	color: var(--fg-secondary, #4A5663);
	overflow-x: auto;
	scrollbar-width: none;
}
.hdl__terms::-webkit-scrollbar { display: none; }
.hdl__terms span { white-space: nowrap; }

/* ============================================================
   TRADE — оптовая: поиск главный, телефон на виду
   ============================================================ */
.hdl--trade .hdl__bar { padding-block: 10px; }
.hdl--trade .hdl__wordmark { font-size: calc(16px * var(--ms-type-scale, 1)); }
.hdl--trade .hdl__link--cat { font-weight: 700; }
/* Артикулы и номера — моноширинным: в прайсе их сверяют посимвольно. */
.hdl--trade .hdl__search input[type="search"] {
	font-family: var(--font-mono);
	font-size: calc(13px * var(--ms-type-scale, 1));
}

/* ============================================================
   Мобильные
   ============================================================ */
@media (max-width: 900px) {
	.hdl__burger { display: inline-flex; }
	.hdl__nav--left,
	.hdl__nav--mid { display: none; }
	.hdl__note,
	.hdl__phone { display: none; }
	.hdl--overlay .hdl__logo--center { position: static; transform: none; }
	.hdl__bar { gap: 12px; }
	.hdl__search { order: 5; flex-basis: 100%; }
	.hdl--market .hdl__bar,
	.hdl--utility .hdl__bar,
	.hdl--trade .hdl__bar { flex-wrap: wrap; }
}

@media (max-width: 600px) {
	/* Потолок в vw, а не в ch: `ch` считается по своей гарнитуре, и у широкого
	   дисплейного гротеска 26ch = 458px — имя магазина распирало страницу до
	   573px даже с многоточием. Селектор с классом раскладки нужен, чтобы
	   перебить её собственный десктопный потолок. */
	.hdl__wordmark,
	.hdl--editorial .hdl__wordmark { max-width: 58vw; }
	.hdl__wordmark { font-size: calc(16px * var(--ms-type-scale, 1)); }
	.hdl--editorial .hdl__wordmark { font-size: calc(17px * var(--ms-type-scale, 1)); }
	.hdl__act span:not(.cnt):not(.screen-reader-text) { display: none; }

	/* На 375 «Войти» + «В корзину» + имя магазина не помещались в строку и
	   распирали ВСЮ страницу до 476px: горизонтальный скролл был на каждой
	   витрине. Вход живёт в мобильном меню, поэтому в шапке остаётся корзина —
	   единственное действие, которое нужно прямо здесь. */
	.hdl__nav--right { gap: 12px; }
	.hdl__nav--right .hdl__link { display: none; }
	.hdl__bar { gap: 10px; padding-inline: 16px; }
}