/* ====================================================================
   header-redesign-ru.css v6 — Figma 1:1 порядок (как geniled-shop.ru)
   Top: Лого | Каталог | Search | Контакты | ♥ | 📊 | 🛒 | 👤 | 🌓
   Main: 📍Город · О нас · Проектировщикам · Кейсы · Сотрудничество · Где купить · Информация▾
   ==================================================================== */

.hr30 {
	--hr-bg: #101213;
	--hr-text: #FFFFFF;
	--hr-text-muted: #898989;
	--hr-divider: rgba(255, 255, 255, 0.12);
	--hr-pill-stroke: #898989;
	--hr-pill-text: #898989;
	--hr-search-bg: #2F3033;
	--hr-cta: #92289A;
	--hr-font: 'Museo Sans Cyrl', sans-serif;
	--hr-page-width: 1200px;
	--hr-page-padding: 0;
	--hr-radius: 8px;
	--hr-text-size: 18px;
}

/* ---------- Базовый блок ---------- */
.hr30 {
	position: sticky;
	top: 0;
	z-index: 500;
	background: var(--hr-bg);
	color: var(--hr-text);
	font-family: var(--hr-font);
	border-bottom-left-radius: 24px;
	border-bottom-right-radius: 24px;
}

/* На главной (когда есть hero) — шапка прозрачная над баннером */
body.is-home .hr30,
.hr30:has(+ * .hpb-banner),
.hr30.hr30--over-hero {
	background: transparent !important;
	backdrop-filter: none !important;
	-webkit-backdrop-filter: none !important;
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
	box-shadow: none;
}

/* Aspro-обёртки .header_wrap и #header — убираем их chrome (border/bg/padding),
   чтобы вверху страницы не оставалось серой полоски между .wrapper1 и .hr30 */
.header_wrap,
.header_wrap #header {
	background: transparent !important;
	border: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	box-shadow: none !important;
}

/* Пустая полоса вверху — от Bitrix admin-panel и Aspro wrapper1 (header_bgcolored).
   На главной (front_page) шапка прозрачная, полоска от верхних блоков просвечивает. */
#panel:empty { display: none !important; }
body.front_page,
.wrapper1.front_page,
.wrapper1.header_bgcolored {
	background: #0a0a0a !important;
	margin-top: 0 !important;
	padding-top: 0 !important;
	border-top: 0 !important;
}


.hr30__container {
	max-width: var(--hr-page-width);
	margin: 0 auto;
	padding-left: var(--hr-page-padding);
	padding-right: var(--hr-page-padding);
	display: flex;
	align-items: center;
	gap: 16px;
}
.hr30__container--main {
	padding-left: 0;
	padding-right: var(--hr-page-padding);
}

/* ---------- TOP ROW (108px — top:34 у лого по Figma) ---------- */
.hr30__top {
	min-height: 108px;
	display: flex;
	align-items: center;
}
.hr30__top > .hr30__container {
	width: 100%;
	min-height: 108px;
}

/* Лого */
.hr30__logo {
	display: inline-flex;
	color: var(--hr-text);
	flex-shrink: 0;
	transition: opacity .2s;
}
.hr30__logo:hover { opacity: 0.85; }
.hr30__logo img,
.hr30__logo svg {
	display: block;
	width: 150px;
	height: 40px;
	color: var(--hr-text);
}

/* Search wrap — обёртка для Aspro bitrix:search.title (corp template) — flex grow до доступного */
.hr30__search-wrap {
	position: relative;
	flex: 1 1 auto;
	min-width: 280px;
	height: 40px;
}

.hr30__search-wrap .search-wrapper,
.hr30__search-wrap [id^="title-search"] {
	width: 100%;
	height: 100%;
	display: block;
	position: relative;
}
.hr30__search-wrap form.search {
	display: flex !important;
	align-items: center;
	width: 100%;
	height: 40px;
	margin: 0 !important;
	padding: 0 6px 0 6px !important;
	background: var(--hr-search-bg) !important;
	border-radius: var(--hr-radius) !important;
	border: 1px solid transparent !important;
	box-shadow: none !important;
	transition: border-color .15s, background .15s;
	gap: 6px;
}
.hr30__search-wrap form.search:focus-within {
	border-color: rgba(255, 255, 255, 0.25) !important;
	background: rgba(53, 53, 53, 0.6) !important;
}
.hr30__search-wrap .search-input-div {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	align-items: center;
}
.hr30__search-wrap .search-input {
	width: 100% !important;
	min-width: 0 !important;
	height: 38px !important;
	background: transparent !important;
	border: 0 !important;
	outline: none !important;
	box-shadow: none !important;
	color: var(--hr-text) !important;
	font-family: inherit !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	padding: 0 !important;
	margin: 0 !important;
}
.hr30__search-wrap .search-input::placeholder { color: rgba(255, 255, 255, 0.5) !important; }
.hr30__search-wrap .search-input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }

.hr30__search-wrap .search-button-div {
	position: static !important;
	flex-shrink: 0 !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 14px !important;
	padding-right: 4px !important;
	width: auto !important;
	height: auto !important;
	right: auto !important;
	top: auto !important;
}
.hr30__search-wrap .btn-search {
	position: static !important;
	flex-shrink: 0 !important;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 24px !important;
	height: 24px !important;
	background: url('/local/assets/images/header-search.svg') no-repeat center !important;
	background-size: 18px 18px !important;
	border: 0 !important;
	border-radius: 6px !important;
	color: transparent !important;
	cursor: pointer;
	padding: 0 !important;
	margin: 0 !important;
	right: auto !important;
	top: auto !important;
	box-shadow: none !important;
	overflow: visible !important;
	animation: none !important;
	transition: filter .15s;
}
.hr30__search-wrap .btn-search:hover {
	background-color: transparent !important;
	animation: none !important;
	/* Иконка #898989 → белая через invert + brightness */
	filter: brightness(0) invert(1);
}
.hr30__search-wrap .btn-search i.svg,
.hr30__search-wrap .btn-search .svg,
.hr30__search-wrap .btn-search svg {
	display: none !important;
}

/* Close-кнопка inline-overlay (для бургер-режима) — в шапке не нужна */
.hr30__search-wrap .close-block,
.hr30__search-wrap .inline-search-hide {
	display: none !important;
}

/* History-кнопка live-search.js — переместить из left:-40px внутрь bar'а слева, ripple убрать */
.hr30__search-wrap .search-history-btn {
	position: static !important;
	left: auto !important;
	top: auto !important;
	transform: none !important;
	flex-shrink: 0;
	order: -1;
	width: 24px !important;
	height: 24px !important;
	margin: 0 16px 0 4px !important;
	padding: 0 !important;
	background: transparent !important;
	border-radius: 6px !important;
	color: #898989 !important;
	overflow: visible !important;
	animation: none !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
}
.hr30__search-wrap .search-history-btn:hover {
	background: transparent !important;
	transform: none !important;
	color: #FFFFFF !important;
	animation: none !important;
}
.hr30__search-wrap .search-history-btn svg {
	width: 20px !important;
	height: 20px !important;
	stroke: currentColor !important;
	fill: none !important;
	display: block;
}
.hr30__search-wrap .search-history-btn:hover svg {
	stroke: #FFFFFF !important;
}
/* Фиолетовая точка has-history::after — скрыть полностью */
.hr30__search-wrap .search-history-btn::after,
.hr30__search-wrap .search-history-btn.has-history::after,
.hr30__search-wrap .btn-search::after,
.hr30__search-wrap .btn-search.has-history::after {
	display: none !important;
	content: none !important;
}
/* Ripple-эффект live-search.js — полностью убрать */
.hr30__search-wrap .search-history-btn .ripple,
.hr30__search-wrap .search-history-btn .ripple-animate,
.hr30__search-wrap .btn-search .ripple,
.hr30__search-wrap .btn-search .ripple-animate {
	display: none !important;
	animation: none !important;
}

/* Микрофон-кнопка — вставляется JS перед лупой */
.hr30__search-wrap .hr30__mic-btn {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	margin: 0;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 6px;
	color: #898989;
	cursor: pointer;
	transition: color .15s;
}
.hr30__search-wrap .hr30__mic-btn:hover {
	color: #FFFFFF;
}
.hr30__search-wrap .hr30__mic-btn svg {
	width: 18px;
	height: 18px;
	stroke: currentColor;
	fill: none;
	display: block;
}

/* Live-search dropdown (live-search.js рендерит .live-search-dropdown / .search-suggest-dropdown).
   Ширина — контентная область сайта 1304px. JS пишет inline width/left относительно form.search —
   перебиваем !important + центрируем относительно viewport. */
.live-search-dropdown,
.search-suggest-dropdown,
#search-suggest-dropdown,
.title-search-result {
	width: 1200px !important;
	max-width: calc(100vw - 32px) !important;
	left: 50% !important;
	transform: translateX(-50%) !important;
	background: rgba(20, 22, 24, 0.97) !important;
	backdrop-filter: blur(20px) !important;
	-webkit-backdrop-filter: blur(20px) !important;
	border: 1px solid var(--hr-divider) !important;
	border-radius: 12px !important;
	box-shadow: 0 10px 32px rgba(0, 0, 0, 0.4) !important;
	color: var(--hr-text) !important;
	margin-top: 6px !important;
	overflow: hidden;
}
.live-search-dropdown a,
.live-search-dropdown .live-search-item,
.search-suggest-dropdown a,
.title-search-result a,
.title-search-result .title-search-item { color: var(--hr-text) !important; }
.live-search-dropdown a:hover,
.live-search-dropdown .live-search-item:hover,
.search-suggest-dropdown a:hover,
.title-search-result a:hover,
.title-search-result .title-search-item:hover { background: rgba(255, 255, 255, 0.06) !important; }

/* Pill кнопки — Каталог + Контакты (Figma: padding 16, gap 8, stroke #898989, color #898989, 18px Museo 400) */
.hr30__pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 40px;
	padding: 0 16px;
	background: transparent;
	border: 1px solid var(--hr-pill-stroke);
	border-radius: var(--hr-radius);
	color: var(--hr-pill-text);
	font-family: var(--hr-font);
	font-size: var(--hr-text-size);
	font-weight: 400;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	flex-shrink: 0;
	transition: background .15s, border-color .15s, color .15s;
}
.hr30__pill:hover {
	background: rgba(255, 255, 255, 0.06);
	border-color: var(--hr-text);
	color: var(--hr-text);
}
.hr30__pill svg {
	stroke: currentColor;
	fill: none;
}

/* ---------- ACTIONS (♥ 📊 🛒 👤) ---------- */
.hr30__actions {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
	margin-left: auto;
}
.hr30__action {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 8px;
	color: var(--hr-text);
	text-decoration: none;
	transition: background .15s, opacity .15s;
}
.hr30__action:hover {
	background: rgba(255, 255, 255, 0.08);
	opacity: 0.85;
}
.hr30__action svg {
	fill: currentColor;
}
.hr30__action svg path,
.hr30__action svg circle,
.hr30__action svg line {
	fill: currentColor;
}
.hr30__action-badge {
	position: absolute;
	top: 2px;
	right: 2px;
	min-width: 16px;
	height: 16px;
	padding: 0 4px;
	background: var(--hr-cta);
	color: #FFFFFF;
	font-size: 10px;
	font-weight: 700;
	line-height: 16px;
	text-align: center;
	border-radius: 8px;
	pointer-events: none;
}
.hr30__action-badge:empty,
.hr30__action-badge[data-cart-count="0"] {
	display: none;
}

/* User dropdown — hover-меню под 👤 */
.hr30__user {
	position: relative;
}
.hr30__user .hr30__dropdown-panel--user {
	right: 0;
	left: auto;
	min-width: 220px;
	padding: 6px;
}
.hr30__user:hover .hr30__dropdown-panel--user,
.hr30__user:focus-within .hr30__dropdown-panel--user {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	transition-delay: 0s;
}
.hr30__dropdown-header {
	padding: 6px 14px 4px;
	color: rgba(255, 255, 255, 0.55);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}
.hr30__dropdown-divider {
	height: 1px;
	background: var(--hr-divider);
	margin: 4px 0;
	list-style: none;
	padding: 0 !important;
}

/* ---------- DIVIDER ---------- */
.hr30__divider {
	height: 1px;
	background: var(--hr-divider);
	max-width: var(--hr-page-width);
	margin: 0 auto;
}

/* ---------- MAIN ROW (50px) ---------- */
.hr30__main {
	min-height: 50px;
	display: flex;
	align-items: center;
}
.hr30__container--main {
	width: 100%;
	min-height: 50px;
	gap: 0;
}

.hr30__nav {
	display: flex;
	align-items: center;
	gap: 0;
	width: 100%;
	flex-wrap: nowrap;
	justify-content: space-between;
}
/* Раскрываем bitrix:menu ul/li как display:contents — чтобы a-теги стали прямыми детьми .hr30__nav
   и space-between равномерно распределил Челябинск + 5 пунктов меню + Информация */
.hr30__nav > ul.left-menu,
.hr30__nav > ul {
	display: contents !important;
}
.hr30__nav > ul.left-menu > li,
.hr30__nav > ul > li {
	display: contents !important;
}

.hr30__nav-link {
	color: var(--hr-text);
	font-family: var(--hr-font);
	font-size: var(--hr-text-size);
	font-weight: 400;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
}

/* bitrix:menu рендерит <ul.left-menu><li><a> — раскрываем через display:contents,
   чтобы a-теги стали прямыми flex-детьми .hr30__nav и participate в justify-content: space-between.
   Aspro Max имеет свои .left-menu стили (красные ссылки + ::before дефисы) — перебиваем !important. */
.hr30 .hr30__nav ul.left-menu,
.hr30 .hr30__nav > ul {
	display: contents !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
	background: transparent !important;
	border: none !important;
}
.hr30 .hr30__nav ul.left-menu > li,
.hr30 .hr30__nav > ul > li {
	display: contents !important;
	margin: 0 !important;
	padding: 0 !important;
	background: none !important;
}
.hr30 .hr30__nav ul.left-menu li::before,
.hr30 .hr30__nav ul.left-menu li::after,
.hr30 .hr30__nav > ul li::before,
.hr30 .hr30__nav > ul li::after {
	content: none !important;
	display: none !important;
}
.hr30 .hr30__nav ul.left-menu a,
.hr30 .hr30__nav > ul a {
	display: inline-flex !important;
	align-items: center !important;
	gap: 8px !important;
	padding: 8px 16px !important;
	background: transparent !important;
	border: none !important;
	border-radius: 6px !important;
	color: var(--hr-text) !important;
	font-family: var(--hr-font) !important;
	font-size: var(--hr-text-size) !important;
	font-weight: 400 !important;
	line-height: 1.2 !important;
	text-decoration: none !important;
	white-space: nowrap !important;
	cursor: pointer !important;
	transition: color .15s, background .15s !important;
}
.hr30 .hr30__nav ul.left-menu a:hover,
.hr30 .hr30__nav > ul a:hover {
	color: var(--hr-text-muted) !important;
	background: transparent !important;
}
.hr30 .hr30__nav ul.left-menu li.selected > a,
.hr30 .hr30__nav ul.left-menu a[aria-current="page"] {
	color: var(--hr-text) !important;
}
.hr30__nav-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 16px;
	background: transparent;
	border: none;
	cursor: pointer;
	border-radius: 6px;
	color: var(--hr-text);
	font-family: var(--hr-font);
	font-size: var(--hr-text-size);
	font-weight: 400;
	transition: color .15s, background .15s, opacity .15s;
}
.hr30__nav-link:hover {
	color: var(--hr-text-muted);
	background: transparent;
}

/* Город (первый элемент main row) — левый край иконки выровнен по логотипу */
.hr30__city {
	color: var(--hr-text);
	padding-left: 0 !important;
}
.hr30__city-pin {
	color: var(--hr-text);
	flex-shrink: 0;
	fill: currentColor;
}
.hr30__city-pin path { fill: currentColor; }
.hr30__chevron {
	transition: transform .2s;
	color: currentColor;
}
.hr30__chevron--small {
	width: 8px;
	height: 5px;
}
[data-open="true"] .hr30__chevron {
	transform: rotate(180deg);
}

/* ---------- DROPDOWN "Информация" ---------- */
.hr30__dropdown {
	position: relative;
	display: inline-flex;
}
.hr30__nav > .hr30__dropdown[data-info-dropdown] > .hr30__dropdown-toggle {
	padding-right: 0 !important;
}
.hr30__dropdown-panel {
	position: absolute;
	top: calc(100% + 4px);
	right: 0;
	min-width: 220px;
	padding: 8px;
	background: rgba(20, 22, 24, 0.96);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	border: 1px solid var(--hr-divider);
	border-radius: 12px;
	box-shadow: 0 10px 32px rgba(0, 0, 0, 0.4);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity .15s, transform .15s, visibility 0s linear .15s;
	z-index: 1000;
	display: flex;
	flex-direction: column;
	gap: 0;
}
.hr30__dropdown-panel > * {
	margin: 0 !important;
}
.hr30__dropdown:hover .hr30__dropdown-panel,
.hr30__dropdown:focus-within .hr30__dropdown-panel,
.hr30__dropdown[data-open="true"] .hr30__dropdown-panel {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	transition-delay: 0s;
}
.hr30__dropdown-panel ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: block;
}
.hr30__dropdown-panel li { margin: 0; }
/* Унифицированный стиль для всех dropdown панелей в шапке —
   Информация, user-menu, любые другие. Перебиваем main row override
   .hr30__nav ul.left-menu a с !important на тех же селекторах, чтобы
   bitrix:menu внутри Информации не наследовал 18px main row стиль. */
.hr30__dropdown-panel a,
.hr30 .hr30__nav .hr30__dropdown-panel ul.left-menu a,
.hr30 .hr30__nav .hr30__dropdown-panel ul a {
	display: block !important;
	padding: 8px 14px !important;
	color: var(--hr-text) !important;
	font-family: var(--hr-font) !important;
	font-size: 14px !important;
	font-weight: 400 !important;
	line-height: 1.3 !important;
	text-decoration: none !important;
	border-radius: 6px !important;
	white-space: nowrap !important;
	background: transparent !important;
	transition: background .12s !important;
}
.hr30__dropdown-panel a:hover,
.hr30 .hr30__nav .hr30__dropdown-panel ul.left-menu a:hover,
.hr30 .hr30__nav .hr30__dropdown-panel ul a:hover {
	background: transparent !important;
	color: var(--hr-text-muted) !important;
}
/* Внутри dropdown panel: ul block, li display:contents — чтобы a-теги были прямыми детьми ul
   и стэкались естественно без paразитной высоты li (была 59px у user из-за неизвестного inherit) */
.hr30__dropdown-panel ul,
.hr30__dropdown-panel ul.left-menu {
	display: block !important;
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
}
.hr30__dropdown-panel li,
.hr30__dropdown-panel ul.left-menu > li,
.hr30__dropdown-panel--user li {
	display: contents !important;
}
/* Divider — отдельный селектор, contents его убирает из визуала */
.hr30__dropdown-panel li.hr30__dropdown-divider {
	display: block !important;
	height: 1px !important;
	background: var(--hr-divider) !important;
	margin: 4px 0 !important;
}
/* User-dropdown — компактный layout как у Информация */
.hr30__dropdown-panel--user li {
	display: block;
	margin: 0;
	padding: 0;
}
.hr30__dropdown-panel--user a {
	padding: 8px 14px;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.3;
}

/* ---------- Mobile (< 991px) — упрощённый layout ---------- */
@media (max-width: 991px) {
	.hr30__top > .hr30__container {
		flex-wrap: wrap;
		gap: 12px;
	}
	.hr30__search {
		order: 5;
		flex: 1 1 100%;
		max-width: 100%;
	}
	.hr30__search-wrap { order: 5; flex: 1 1 100%; max-width: 100%; }
	.hr30__pill--catalog { display: none; }
	.hr30__actions { gap: 4px; }
	.hr30__action { width: 32px; height: 32px; }
	.hr30__divider,
	.hr30__main { display: none; }
}