/*
 * Шапка сайта (template-parts/site-header.php) — вариант 1 «Два этажа» с поиском в верхнем этаже.
 * Префикс .dvh- — чтобы не пересекаться с классами вёрстки блоков. Селекторы с .dvb-h01-hero
 * перебивают базовые стили блока (сброс кнопок, ссылок, шрифт).
 * Скос — только на декоративных слоях (::before), текст не режется (CLAUDE.md, «Бренд»).
 */
.dvb-h01-hero .dvh {
	--dvh-cyan: #1da3cb; --dvh-cyan-d: #1689ab; --dvh-coral: #d57959; --dvh-ink: #222221;
	--dvh-muted: #5f6b7a; --dvh-line: #e6ebf1; --dvh-soft: #f1f6f9;
	position: relative; z-index: 30; font-family: Gilroy, Manrope, var(--font-body), system-ui, sans-serif; color: var(--dvh-ink);
}
.dvb-h01-hero .dvh a { color: inherit; text-decoration: none; }
.dvb-h01-hero .dvh button { font: inherit; color: inherit; cursor: pointer; }
.dvb-h01-hero .dvh :focus-visible { outline: 3px solid var(--dvh-coral); outline-offset: 2px; }

/* ---------------------------------------------------------------- верхний этаж */
.dvb-h01-hero .dvh-top { background: #fff; }
.dvb-h01-hero .dvh-top__inner { display: flex; align-items: center; gap: 28px; height: 84px; }
.dvb-h01-hero .dvh-brand { display: flex; align-items: center; gap: 14px; flex: 0 0 auto; }
.dvb-h01-hero .dvh-brand img { display: block; width: auto; height: 46px; }

.dvb-h01-hero .dvh-dirs { display: flex; gap: 6px; margin-left: 8px; }
.dvb-h01-hero .dvh-dir { position: relative; display: flex; align-items: center; gap: 10px; padding: 9px 18px 9px 14px; isolation: isolate; font-size: 14px; font-weight: 700; line-height: 1.2; white-space: nowrap; }
.dvb-h01-hero .dvh-dir::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 8px; background: var(--dvh-soft); transform: skewX(-12deg); transition: background .2s; }
.dvb-h01-hero .dvh-dir:hover::before { background: #e3f2f8; }
.dvb-h01-hero .dvh .dvh-dir.is-active { color: #fff; }
.dvb-h01-hero .dvh-dir.is-active::before { background: var(--dvh-cyan); }
.dvb-h01-hero .dvh-dir img { width: 24px; height: 18px; border-radius: 3px; }
.dvb-h01-hero .dvh-dir small { display: block; font-size: 11px; font-weight: 500; opacity: .75; }

.dvb-h01-hero .dvh-contact { display: flex; align-items: center; gap: 16px; margin-left: auto; }
.dvb-h01-hero .dvh-msgr { display: flex; gap: 8px; }
.dvb-h01-hero .dvh-msgr a,
.dvb-h01-hero .dvh-msgr button { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 10px; background: var(--dvh-soft); transition: background .2s; }
.dvb-h01-hero .dvh-msgr a:hover,
.dvb-h01-hero .dvh-msgr button:hover { background: #e3f2f8; }
.dvb-h01-hero .dvh-msgr img { width: 26px; height: 26px; }
.dvb-h01-hero .dvh-msgr svg { width: 20px; height: 20px; fill: var(--dvh-cyan); }
.dvb-h01-hero .dvh-phone { text-align: right; line-height: 1.2; }
.dvb-h01-hero .dvh-phone strong { display: block; font-size: 18px; font-weight: 800; letter-spacing: -.01em; white-space: nowrap; }
.dvb-h01-hero .dvh-phone small { font-size: 12px; color: var(--dvh-muted); white-space: nowrap; }
.dvb-h01-hero .dvh .dvh-btn { display: inline-flex; align-items: center; justify-content: center; height: 44px; padding: 0 20px; border: 0; border-radius: 10px; background: var(--dvh-cyan); color: #fff; font-size: 14px; font-weight: 700; white-space: nowrap; transition: background .2s; }
.dvb-h01-hero .dvh .dvh-btn:hover { background: var(--dvh-cyan-d); }
.dvb-h01-hero .dvh-burger { display: none; }
.dvb-h01-hero .dvh-mdirs { display: none; }

/* ---------------------------------------------------------------- нижний этаж */
.dvb-h01-hero .dvh-menu { position: relative; background: var(--dvh-ink); color: #fff; }
/* Циановый клин слева — продолжение фирменного параллелограмма, до края экрана */
.dvb-h01-hero .dvh-menu::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: calc((100% - min(var(--container, 1360px), 100% - 2 * var(--gutter, 16px))) / 2 + 150px); background: var(--dvh-cyan); clip-path: polygon(0 0, 100% 0, calc(100% - 22px) 100%, 0 100%); }
.dvb-h01-hero .dvh-menu__inner { position: relative; display: flex; align-items: center; gap: 4px; height: 54px; }
.dvb-h01-hero .dvh-menu__wedge { flex: 0 0 170px; }
.dvb-h01-hero .dvh-menu__nav { display: flex; align-items: center; min-width: 0; }
.dvb-h01-hero .dvh .dvh-item { display: flex; align-items: center; gap: 6px; height: 54px; padding: 0 14px; border: 0; background: none; color: #fff; font-size: 15px; font-weight: 600; white-space: nowrap; opacity: .88; transition: opacity .2s, box-shadow .2s; }
.dvb-h01-hero .dvh .dvh-item:hover,
.dvb-h01-hero .dvh .dvh-item[aria-current],
.dvb-h01-hero .dvh .dvh-item[aria-expanded="true"] { opacity: 1; box-shadow: inset 0 -3px 0 var(--dvh-coral); }
.dvb-h01-hero .dvh-item svg { width: 12px; height: 12px; fill: currentColor; transition: transform .2s; }
.dvb-h01-hero .dvh-item[aria-expanded="true"] svg { transform: rotate(180deg); }

.dvb-h01-hero .dvh-top__inner { gap: 20px; }
/* ---------------------------------------------------------------- поиск модели (верхний этаж) */
.dvb-h01-hero .dvh-brand__tag { padding-left: 12px; border-left: 2px solid var(--dvh-coral); font-size: 12.5px; line-height: 1.25; color: var(--dvh-muted); white-space: nowrap; }
/* Поиск — компактный и прижат к мессенджерам: слева остаётся место слогану у логотипа. */
.dvb-h01-hero .dvh-qs { position: relative; flex: 0 1 300px; min-width: 180px; margin: 0 0 0 auto; }
.dvb-h01-hero .dvh-top .dvh-qs + .dvh-contact { margin-left: 0; }
.dvb-h01-hero .dvh-dirs, .dvb-h01-hero .dvh-brand { flex-shrink: 0; }
/* Слогану нужно ~180px: на экранах уже 1500px его место отдаём поиску. */
@media (max-width: 1500px) { .dvb-h01-hero .dvh-brand__tag { display: none; } }
.dvb-h01-hero .dvh-qs__field { display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 5px 0 14px; border: 2px solid var(--dvh-cyan); border-radius: 12px; background: #fff; box-shadow: 0 6px 18px rgb(29 163 203 / 12%); transition: box-shadow .2s; }
.dvb-h01-hero .dvh-qs__field:focus-within { box-shadow: 0 0 0 4px rgb(29 163 203 / 18%); }
.dvb-h01-hero .dvh-qs__field > svg { flex: 0 0 18px; width: 18px; height: 18px; fill: var(--dvh-cyan-d); }
.dvb-h01-hero .dvh-qs input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; outline: 0; background: none; color: var(--dvh-ink); font: 600 15px Gilroy, Manrope, var(--font-body), sans-serif; }
.dvb-h01-hero .dvh-qs input::placeholder { color: #8a95a3; font-weight: 500; }
.dvb-h01-hero .dvh-qs input::-webkit-search-cancel-button { cursor: pointer; }
.dvb-h01-hero .dvh .dvh-qs__go { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border: 0; border-radius: 8px; background: var(--dvh-cyan); color: #fff; font-size: 14px; font-weight: 700; transition: background .2s; }
.dvb-h01-hero .dvh .dvh-qs__go:hover { background: var(--dvh-cyan-d); }
.dvb-h01-hero .dvh-qs__go svg { display: none; width: 18px; height: 18px; fill: currentColor; }
.dvb-h01-hero .dvh-qs__drop { position: absolute; left: 0; top: calc(100% + 6px); z-index: 45; width: max(100%, 460px); max-width: calc(100vw - 32px); padding: 8px; border-radius: 14px; background: #fff; color: var(--dvh-ink); box-shadow: 0 20px 44px rgb(16 36 63 / 20%); }
.dvb-h01-hero .dvh-qs__drop[hidden] { display: none; }
.dvb-h01-hero .dvh-qs__head { margin: 4px 8px 6px; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--dvh-muted); }
.dvb-h01-hero .dvh-qs__head[hidden] { display: none; }
.dvb-h01-hero .dvh-qs__list { max-height: min(420px, 60vh); margin: 0; padding: 0; overflow: auto; list-style: none; }
.dvb-h01-hero .dvh-qs__list:empty { display: none; }
.dvb-h01-hero .dvh-qs__list a { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 6px 8px; border-radius: 10px; }
.dvb-h01-hero .dvh-qs__list a:hover,
.dvb-h01-hero .dvh-qs__list [aria-selected="true"] a { background: var(--dvh-soft); }
.dvb-h01-hero .dvh-qs__list img, .dvb-h01-hero .dvh-qs__list i { display: block; width: 64px; height: 44px; border-radius: 7px; object-fit: cover; background: #e8eef4; }
.dvb-h01-hero .dvh-qs__list b { display: block; overflow: hidden; font-size: 14.5px; font-weight: 700; white-space: nowrap; text-overflow: ellipsis; }
.dvb-h01-hero .dvh-qs__list mark { padding: 0 1px; border-radius: 3px; background: #d8f0f8; color: inherit; }
.dvb-h01-hero .dvh-qs__list small { font-size: 12.5px; color: var(--dvh-muted); }
.dvb-h01-hero .dvh-qs__list strong { font-size: 14px; font-weight: 800; color: var(--dvh-cyan-d); white-space: nowrap; }
/* группы подсказок: марки (флаг страны вместо фото) и модели, в конце — «Все результаты» */
.dvb-h01-hero .dvh-qs__group { margin: 8px 8px 4px; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--dvh-muted); }
.dvb-h01-hero .dvh-qs__group:first-child { margin-top: 4px; }
.dvb-h01-hero .dvh-qs__list img.dvh-qs__flag { width: 44px; height: 44px; margin: 0 10px; border-radius: 50%; object-fit: contain; background: none; box-shadow: 0 3px 10px rgb(16 36 63 / 12%); }
.dvb-h01-hero .dvh-qs__all { position: sticky; bottom: 0; margin-top: 6px; border-top: 1px solid var(--dvh-line); padding-top: 6px; background: #fff; }
/* пока есть подсказки по запросу, «Часто ищут» не нужны */
.dvb-h01-hero .dvh-qs__list:not(:empty) + .dvh-qs__pop { display: none; }
.dvb-h01-hero .dvh-qs__all a { grid-template-columns: minmax(0, 1fr) auto; }
.dvb-h01-hero .dvh-qs__all b { color: var(--dvh-cyan-d); }
.dvb-h01-hero .dvh-qs__empty { padding: 10px; font-size: 14px; line-height: 1.5; color: var(--dvh-muted); }
.dvb-h01-hero .dvh .dvh-qs__empty button { padding: 0; border: 0; background: none; color: var(--dvh-cyan-d); font-weight: 700; text-decoration: underline; }
.dvb-h01-hero .dvh-qs__pop { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 4px 4px 2px; padding-top: 10px; font-size: 12.5px; }
.dvb-h01-hero .dvh-qs__list:not(:empty) + .dvh-qs__pop { margin-top: 8px; border-top: 1px solid var(--dvh-line); }
.dvb-h01-hero .dvh-qs__pop span { margin-right: 2px; font-weight: 600; color: var(--dvh-muted); }
.dvb-h01-hero .dvh-qs__pop a { padding: 5px 10px; border-radius: 8px; background: var(--dvh-soft); font-weight: 600; }
.dvb-h01-hero .dvh-qs__pop a:hover { background: #e3f2f8; color: var(--dvh-cyan-d); }

/* Поле поиска в мобильном меню (вставляет header.js) */
.dvb-h01-hero .dvh-msearch { margin: 16px 0 6px; }
.dvb-h01-hero .dvh-msearch .dvh-qs { max-width: none; }
.dvb-h01-hero .dvh-msearch .dvh-qs__drop { position: static; width: auto; max-width: none; margin-top: 8px; padding: 4px 0 0; box-shadow: none; }
.dvb-h01-hero .dvh-msearch .dvh-qs__list a { grid-template-columns: 52px minmax(0, 1fr); }
.dvb-h01-hero .dvh-msearch .dvh-qs__list img, .dvb-h01-hero .dvh-msearch .dvh-qs__list i { width: 52px; height: 38px; }
.dvb-h01-hero .dvh-msearch .dvh-qs__list img.dvh-qs__flag { width: 36px; height: 36px; margin: 0 8px; }
.dvb-h01-hero .dvh-msearch .dvh-qs__list strong { grid-column: 2; font-size: 13px; }

/* ---------------------------------------------------------------- мегаменю направлений */
.dvb-h01-hero .dvh-mega { position: absolute; left: 0; right: 0; top: 100%; background: #fff; color: var(--dvh-ink); box-shadow: 0 24px 48px rgb(20 30 45 / 18%); }
.dvb-h01-hero .dvh-mega[hidden] { display: none; }
.dvb-h01-hero .dvh-mega__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) 300px; gap: 32px; padding: 28px 0 32px; }
.dvb-h01-hero .dvh-mega__head { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font-size: 17px; font-weight: 800; }
.dvb-h01-hero .dvh-mega__head img { width: 24px; height: 18px; border-radius: 3px; }
.dvb-h01-hero .dvh-mega__head a:hover { color: var(--dvh-cyan); }
.dvb-h01-hero .dvh-mega__head span { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--dvh-muted); }
.dvb-h01-hero .dvh-mega ul { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 16px; margin: 0 0 14px; padding: 0; list-style: none; font-size: 14px; }
.dvb-h01-hero .dvh-mega li a { display: flex; justify-content: space-between; gap: 8px; padding: 5px 0; color: #34404d; }
.dvb-h01-hero .dvh-mega li a:hover { color: var(--dvh-cyan); }
.dvb-h01-hero .dvh-mega li em { font-style: normal; font-size: 12px; color: #9aa5b1; }
.dvb-h01-hero .dvh .dvh-mega__all { font-size: 14px; font-weight: 700; color: var(--dvh-cyan); }
.dvb-h01-hero .dvh-mega__side { padding: 20px; border-radius: 14px; background: var(--dvh-soft); }
.dvb-h01-hero .dvh-mega__side p { margin: 0 0 14px; font-size: 14px; line-height: 1.5; color: var(--dvh-muted); }
.dvb-h01-hero .dvh-mega__side .dvh-mega__side-title { margin-bottom: 6px; font-size: 16px; font-weight: 800; color: var(--dvh-ink); }

/* ---------------------------------------------------------------- адаптив */
@media (max-width: 1360px) {
	.dvb-h01-hero .dvh .dvh-item { padding: 0 11px; font-size: 14px; }
	.dvb-h01-hero .dvh-top__inner { gap: 16px; }
	.dvb-h01-hero .dvh-brand__tag { display: none; }
	.dvb-h01-hero .dvh .dvh-qs__go { width: 38px; padding: 0; justify-content: center; }
	.dvb-h01-hero .dvh-qs__go span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
	.dvb-h01-hero .dvh-qs__go svg { display: block; }
}
@media (max-width: 1180px) {
	.dvb-h01-hero .dvh-dir small, .dvb-h01-hero .dvh-top .dvh-msgr { display: none; }
	.dvb-h01-hero .dvh-menu__wedge { flex-basis: 40px; }
	.dvb-h01-hero .dvh-menu::before { width: calc((100% - min(var(--container, 1360px), 100% - 2 * var(--gutter, 16px))) / 2 + 30px); }
	.dvb-h01-hero .dvh-mega__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.dvb-h01-hero .dvh-mega__side { display: none; }
}
@media (max-width: 1023px) {
	.dvb-h01-hero .dvh-menu, .dvb-h01-hero .dvh-dirs, .dvb-h01-hero .dvh-msgr, .dvb-h01-hero .dvh-top .dvh-qs, .dvb-h01-hero .dvh-phone small, .dvb-h01-hero .dvh-contact .dvh-btn { display: none; }
	.dvb-h01-hero .dvh-top__inner { height: 64px; gap: 12px; }
	.dvb-h01-hero .dvh-brand img { height: 36px; }
	.dvb-h01-hero .dvh-phone strong { font-size: 15px; }
	.dvb-h01-hero .dvh .dvh-burger { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 10px; background: var(--dvh-ink); }
	.dvb-h01-hero .dvh-burger svg { width: 22px; height: 22px; fill: #fff; }
	.dvb-h01-hero .dvh-mdirs { display: flex; gap: 6px; padding: 8px var(--gutter, 16px) 10px; overflow-x: auto; border-top: 1px solid var(--dvh-line); background: #fff; }
	.dvb-h01-hero .dvh-mdirs .dvh-dir { flex: 0 0 auto; padding: 7px 14px 7px 10px; font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
	.dvb-h01-hero .dvh * { transition: none !important; }
}
@media print {
	.dvb-h01-hero .dvh-menu, .dvb-h01-hero .dvh-mdirs, .dvb-h01-hero .dvh-contact button { display: none !important; }
}

/* Первый экран блока h01 обрезает содержимое (overflow: hidden) — мегаменю и подсказки поиска
   должны выходить за его низ. По горизонтали обрезка остаётся (декор первого экрана на главной). */
.dvb-h01-hero .first-screen:has(.dvh) { overflow-x: clip; overflow-y: visible; z-index: 30; }
/* Фокус поля показывает рамка .dvh-qs__field — общий коралловый outline шапки внутри неё не нужен. */
.dvb-h01-hero .dvh .dvh-qs input:focus-visible { outline: 0; }
.dvb-h01-hero .dvh-msearch .dvh-qs__list { max-height: 44vh; }