/**
 * Тонкая шапка-остров в одну строку (вариант compact, см. inc/header-variant.php).
 * Грузится после navigation.css / header.css / catalog-search.css и переопределяет только то,
 * что отличается от прежнего острова (css/navigation.css). Удаление этого файла вместе с
 * template-parts/header-compact.php и js/header-compact.js полностью убирает вариант.
 */

/* === Размеры: остров ниже, отступ сверху меньше, окно корзины ближе к шапке === */

body.header-variant-compact {
	--header-top-gap: clamp(6px, 0.9vw, 12px);
	--header-bar-height: 52px;
	--cart-nav-height: 52px;
	--cart-area-top: calc(var(--header-top-gap) + var(--cart-nav-height) + var(--cart-island-gap));

	/* Тёмная поверхность (как в macOS «Музыке»). Плотность острова — --hc-glass: меньше альфа — прозрачнее, но серее на белой странице. */
	--hc-glass: rgba(22, 22, 24, 0.95);
	--hc-blur: blur(24px) saturate(160%);
	--hc-border: rgba(255, 255, 255, 0.1);
	--hc-text: rgba(255, 255, 255, 0.92);
	--hc-text-2: rgba(255, 255, 255, 0.62);
	--hc-hover: rgba(255, 255, 255, 0.09);
	--hc-shadow: 0 18px 48px rgba(0, 0, 0, 0.28);
}

@media (max-width: 767px) {
	body.header-variant-compact {
		--cart-nav-height: 100px;
	}
}

/* === Остров === */

.navigation-site--compact {
	padding: 0 clamp(14px, 1.6vw, 22px);
	border-radius: 28px;
}

.navigation-site--compact .navigation-site-row--main {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	height: var(--header-bar-height);
}

.navigation-site--compact .island-main-start,
.navigation-site--compact .island-main-end {
	display: flex;
	align-items: center;
	min-width: 0;
}

.navigation-site--compact .island-main-start {
	flex: 1 1 auto;
	gap: clamp(8px, 1.2vw, 18px);
}

.navigation-site--compact .island-main-end {
	flex: 0 0 auto;
	gap: 6px;
}

/* === Логотип === */

.navigation-site--compact .logo-head {
	flex-shrink: 0;
	height: auto;
	max-height: 40px;
	padding: 2px 6px;
	border-radius: 10px;
	overflow: visible;
	transition:
		transform var(--transition-spring),
		background var(--transition-fast);
}

.navigation-site--compact .logo-head:hover {
	transform: scale(1.02);
	background: rgba(255, 255, 255, 0.08);
}

.navigation-site--compact .logo-head:active {
	transform: scale(0.98);
}

.navigation-site--compact .logo-head .site-logo-image {
	max-height: 32px;
	max-width: min(160px, 28vw);
	transform: scale(1.15);
	transform-origin: center center;
	transition: none;
}

/* Кружок «Вся продукция» — только на телефоне: открывает мега-меню (mobile-content.js).
   На компьютере каталог открывает пункт меню «Каталог». */
.navigation-site--compact .catalog-btn--mobile {
	display: none;
}

/* === Меню === */

.navigation-site--compact .main-menu--tabs {
	flex: 0 1 auto;
	width: auto;
}

.navigation-site--compact .main-menu .menu--tabs > li > a {
	padding: 6px 12px;
	font-size: 13px;
}

/* Шеврон у пунктов с панелью («Каталог» тоже): при открытой панели поворачивается вверх. */
.navigation-site--compact .main-menu .menu--tabs > li > a[data-header-mega-trigger]::after {
	content: url('data:image/svg+xml,<svg width="11" height="6" viewBox="0 0 11 6" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1.5 0.972656L5.5 4.97266L9.5 0.972656" stroke="%23ffffff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" /></svg>');
	margin-left: 8px;
}

.navigation-site--compact .main-menu .menu--tabs > li > a[data-header-mega-trigger]::after,
.navigation-site--compact .main-menu .menu--tabs > li.menu-item-has-children > a::after {
	display: inline-block;
	transition: transform var(--transition-fast);
}

.navigation-site--compact .main-menu .menu--tabs > li.is-tab-slider-active > a[data-header-mega-trigger]::after,
.navigation-site--compact .main-menu .menu--tabs > li.current-menu-item > a[data-header-mega-trigger]::after {
	content: url('data:image/svg+xml,<svg width="11" height="6" viewBox="0 0 11 6" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1.5 0.972656L5.5 4.97266L9.5 0.972656" stroke="%23373838" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" /></svg>');
}

.navigation-site--compact .main-menu .menu--tabs > li.is-panel-open > a::after {
	transform: rotate(180deg);
}

/* === Правая группа === */

.navigation-site--compact .island-search-toggle {
	appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 1px solid transparent;
	border-radius: 12px;
	background: transparent;
	color: var(--white-content);
	cursor: pointer;
	transition:
		background var(--transition-fast),
		border-color var(--transition-fast),
		color var(--transition-fast);
}

.navigation-site--compact .island-search-toggle:hover,
.navigation-site--compact .island-search-toggle[aria-expanded="true"] {
	background: rgba(255, 255, 255, 0.08);
	border-color: rgba(255, 255, 255, 0.16);
	color: var(--brand-yellow);
}

.navigation-site--compact .island-search-toggle:focus-visible {
	outline: 2px solid var(--orange);
	outline-offset: 2px;
}

/* Лупа, корзина и вход — три кнопки 36px с одинаковым зазором: у обёртки корзины и входа тот же gap, что у острова. */
.navigation-site--compact .nav-item-site--cart {
	gap: 6px;
}

.navigation-site--compact .basket,
.navigation-site--compact .login {
	width: 36px;
	height: 36px;
	padding: 0;
	border-radius: 12px;
}

.navigation-site--compact .basket {
	position: relative;
	gap: 0;
	margin-right: 0;
}

.navigation-site--compact .basket-icon,
.navigation-site--compact .login-icon {
	width: 22px;
	height: 22px;
}

.navigation-site--compact .basket-count {
	position: absolute;
	top: 1px;
	right: 1px;
	width: 16px;
	height: 16px;
	font-size: 9px;
}

.navigation-site--compact .zayavka-head.island-cta-btn {
	height: 34px;
	margin-left: 6px;
	padding: 0 16px;
	font-size: 13px;
}

/* === Поиск: вторая полоса острова, выезжает по кнопке с лупой === */

.navigation-site--compact .navigation-site-row--search,
.navigation-site--compact .navigation-site-row--search[hidden] {
	display: block;
	max-height: 0;
	padding: 0;
	border-top: 0 solid transparent;
	opacity: 0;
	overflow: hidden;
	pointer-events: none;
	visibility: hidden;
	transition:
		max-height 0.32s var(--ease-out),
		opacity 0.22s var(--ease-out),
		padding 0.28s var(--ease-out),
		border-color 0.22s var(--ease-out),
		visibility 0s linear 0.32s;
}

.navigation-site--compact .navigation-site-row--search.is-open {
	max-height: 640px;
	padding: 14px 0 18px;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	opacity: 1;
	overflow: visible;
	pointer-events: auto;
	visibility: visible;
	transition:
		max-height 0.32s var(--ease-out),
		opacity 0.22s var(--ease-out),
		padding 0.28s var(--ease-out),
		border-color 0.22s var(--ease-out),
		visibility 0s linear 0s;
}

.navigation-site--compact .site-search-inline {
	width: 100%;
	max-width: none;
}

/* Подсказки раздвигают полосу, а не висят поверх страницы. */
.navigation-site--compact .catalog-search-suggestions {
	position: static;
	max-height: min(52vh, 420px);
	margin-top: 12px;
	box-shadow: none;
}

.header-search-quick {
	margin-top: 14px;
	padding: 0 4px;
}

.header-search-quick.is-hidden {
	display: none;
}

.header-search-quick-title {
	margin-bottom: 8px;
	font-size: 11px;
	color: rgba(255, 255, 255, 0.5);
}

.header-search-quick-list {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.header-search-quick-list a {
	display: inline-flex;
	padding: 6px 12px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.08);
	color: var(--white-content);
	font-size: 13px;
	font-weight: 500;
	line-height: 1.3;
	transition: background var(--transition-fast), color var(--transition-fast);
}

.header-search-quick-list a:hover,
.header-search-quick-list a:focus-visible {
	background: var(--brand-yellow);
	color: var(--grafit-black);
}

/* === Узкие экраны === */

@media (max-width: 1100px) {
	.navigation-site--compact .main-menu .menu--tabs > li > a {
		padding: 6px 9px;
	}
}

/* Телефон: в шапке только логотип по центру и строка поиска. Каталог, заявка, вход и меню —
   в нижней панели (css/mobile-app.css, inc/mobile-app.php). */
@media (max-width: 767px) {
	.navigation-site--compact {
		padding: 0 12px;
		border-radius: 0 0 26px 26px;
	}

	.navigation-site--compact .navigation-site-row--main {
		justify-content: center;
		gap: 8px;
		height: 50px;
		overflow: hidden;
		transition: height 0.28s var(--ease-out), opacity 0.2s var(--ease-out);
	}

	.navigation-site--compact .island-main-start {
		flex: 0 0 auto;
		justify-content: center;
	}

	.navigation-site--compact .catalog-btn--mobile,
	.navigation-site--compact .island-main-end,
	.navigation-site--compact .header-search-quick {
		display: none;
	}

	/* На телефоне строка поиска всегда на виду под логотипом. */
	.navigation-site--compact .navigation-site-row--search,
	.navigation-site--compact .navigation-site-row--search[hidden] {
		max-height: none;
		padding: 0 0 10px;
		border-top-color: transparent;
		opacity: 1;
		overflow: visible;
		pointer-events: auto;
		visibility: visible;
	}
}


/* ==========================================================================
   Остров как единая поверхность
   ========================================================================== */

.navigation-site--island.navigation-site--graphite.navigation-site--compact {
	background: var(--hc-glass);
	border-color: var(--hc-border);
	box-shadow: var(--hc-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.05);
	-webkit-backdrop-filter: var(--hc-blur);
	backdrop-filter: var(--hc-blur);
}

@supports not (backdrop-filter: blur(1px)) {
	.navigation-site--island.navigation-site--graphite.navigation-site--compact {
		background: #161618;
	}
}

/* Открытая панель (каталог, подменю): фон плотный. Safari после перехода с общим фото теряет размытие,
   и при 95% плотности страница под большим меню просвечивает; на сплошном фоне это незаметно. */
.navigation-site--island.navigation-site--graphite.navigation-site--compact:has(.island-panel.active) {
	background: rgb(22, 22, 24);
}

/* Подложка под открытой панелью: лёгкое размытие страницы вместо тёмной плёнки */
body.header-variant-compact .category-list-backdrop {
	background: rgba(20, 20, 22, 0.14);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}

/* Пункты меню и кнопки: наведение — скруглённая подсветка, жёлтый только у выбранного */
.navigation-site--graphite.navigation-site--compact .main-menu .menu--tabs > li:not(.is-tab-slider-active):not(.current-menu-item):not(.current-menu-ancestor) > a:hover,
.navigation-site--graphite.navigation-site--compact .main-menu .menu--tabs > li.is-panel-open:not(.is-tab-slider-active):not(.current-menu-item):not(.current-menu-ancestor) > a {
	background: var(--hc-hover);
	color: var(--hc-text);
}

.navigation-site--compact .island-search-toggle:hover,
.navigation-site--compact .basket:hover,
.navigation-site--compact .login:hover {
	background: var(--hc-hover);
	border-color: transparent;
	box-shadow: none;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	color: var(--hc-text);
	transform: none;
}

.navigation-site--compact .island-search-toggle[aria-expanded="true"] {
	background: var(--hc-hover);
	border-color: transparent;
	color: var(--brand-yellow);
}

/* === Панели острова: каталог и подменю растут вниз вместе с островом, как поиск === */

@media (min-width: 768px) {
	/* Остров раскрывается поверх страницы и не сдвигает её: резервируем место под закрытую строку. */
	.header-variant-compact .header-island-stack {
		height: calc(var(--header-bar-height) + 2px);
	}

	.navigation-site--island.navigation-site--compact {
		position: absolute;
		top: 0;
		right: 0;
		left: 0;
	}

	.navigation-site--compact .island-panel,
	.navigation-site--compact .category-list.island-panel,
	.navigation-site--compact .category-list.island-panel.active {
		position: static;
		display: grid;
		grid-template-rows: 0fr;
		width: auto;
		max-width: none;
		margin: 0;
		padding: 0;
		border: 0 solid transparent;
		border-radius: 0;
		background: none;
		box-shadow: none;
		opacity: 0;
		overflow: visible;
		pointer-events: none;
		transform: none;
		visibility: hidden;
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
		transition:
			grid-template-rows 0.36s var(--ease-out),
			opacity 0.24s var(--ease-out),
			border-color 0.24s var(--ease-out),
			visibility 0s linear 0.36s;
	}

	.navigation-site--compact .island-panel.active,
	.navigation-site--compact .category-list.island-panel.active {
		grid-template-rows: 1fr;
		border-top: 1px solid var(--hc-border);
		opacity: 1;
		pointer-events: auto;
		visibility: visible;
		transition:
			grid-template-rows 0.36s var(--ease-out),
			opacity 0.24s var(--ease-out),
			border-color 0.24s var(--ease-out),
			visibility 0s linear 0s;
	}

	.navigation-site--compact .island-panel-clip {
		min-height: 0;
		overflow: hidden;
	}

	.navigation-site--compact .island-panel .category-list-wrap {
		padding: 22px 4px 26px;
	}

	.navigation-site--compact .island-panel .category-list-back {
		display: none;
	}

	/* Подменю «О компании» / «Сотрудничество»: настоящие остаются в меню, в острове — их копии. */
	.navigation-site--compact .main-menu .menu--tabs > li > .sub-menu {
		display: none !important;
	}

	.island-panel-list {
		display: flex;
		flex-direction: column;
		width: max-content;
		min-width: 200px;
		margin: 0 0 0 var(--panel-x, 0);
		padding: 12px 0 16px;
		list-style: none;
	}

	.island-panel-list a {
		display: block;
		margin: 0 -14px;
		padding: 9px 14px;
		border-radius: 10px;
		color: var(--hc-text);
		font-size: 14px;
		font-weight: 500;
		line-height: 1.3;
		transition: background var(--transition-fast), color var(--transition-fast);
	}

	.island-panel-list a:hover,
	.island-panel-list a:focus-visible {
		background: var(--hc-hover);
		color: #fff;
	}

	.island-panel-list a.is-current {
		color: var(--brand-yellow);
	}
}

@media (max-width: 767px) {
	.island-panel--nav {
		display: none;
	}

	/* Каталог на телефоне — экран поверх страницы (header.css); остров без размытия, иначе он держит fixed-панель. */
	.navigation-site--island.navigation-site--graphite.navigation-site--compact {
		background: #161618;
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}

	body.header-variant-compact .category-list {
		border-radius: 0;
		background: #161618;
	}
}

/* Содержимое мега-меню */
body.header-variant-compact .category-list-title,
body.header-variant-compact .category-list-wrap .title-nav-link,
body.header-variant-compact .category-list-wrap .title-nav-link h3 {
	color: var(--hc-text);
}

body.header-variant-compact .category-list-title:hover,
body.header-variant-compact .category-list-wrap .title-nav-link:hover,
body.header-variant-compact .category-list-wrap .title-nav-link:hover h3 {
	color: var(--brand-yellow);
}

body.header-variant-compact .category-list-wrap ul li a {
	display: inline-block;
	margin: -3px -10px;
	padding: 3px 10px;
	border-radius: 8px;
	color: var(--hc-text-2);
	transition: color var(--transition-fast), background var(--transition-fast);
}

body.header-variant-compact .category-list-wrap ul li a:hover {
	background: var(--hc-hover);
	color: #fff;
}

body.header-variant-compact .category-list-back {
	color: var(--hc-text);
}

/* Поиск */
.navigation-site--compact .catalog-search-suggestions {
	padding: 0;
	border-radius: 0;
	background: transparent;
	scrollbar-width: thin;
	scrollbar-color: rgba(255, 255, 255, 0.25) transparent;
}

.navigation-site--compact .catalog-search-suggestion {
	padding: 8px 10px;
	border-radius: 12px;
	color: var(--hc-text);
}

.navigation-site--compact .catalog-search-suggestion:hover {
	background: var(--hc-hover);
}

.navigation-site--compact .catalog-search-suggestion-thumb {
	flex-basis: 56px;
	width: 56px;
	height: 56px;
}

.navigation-site--graphite.navigation-site--compact .catalog-search-suggestion,
.navigation-site--graphite.navigation-site--compact .catalog-search-suggestion-title {
	color: var(--hc-text);
}

.navigation-site--compact .catalog-search-suggestion-sku,
.navigation-site--graphite.navigation-site--compact .catalog-search-empty,
.navigation-site--compact .catalog-search-no-results {
	color: var(--hc-text-2);
}

.navigation-site--compact .catalog-search-view-all {
	margin-top: 4px;
	border-top: 1px solid var(--hc-border);
	border-radius: 12px;
	background: transparent;
	color: var(--hc-text);
}

.navigation-site--compact .catalog-search-view-all:hover {
	background: var(--hc-hover);
}

.navigation-site--compact .header-search-quick-title {
	color: var(--hc-text-2);
}

.navigation-site--compact .header-search-quick-list a {
	border: 1px solid var(--hc-border);
	background: rgba(255, 255, 255, 0.06);
	color: var(--hc-text);
}


/* Подсказки поиска — карточки в ряд, как в каталоге (на всю ширину острова, листаются вбок). */
.navigation-site--compact .catalog-search-suggestions {
	overflow: visible;
	max-height: none;
}

.navigation-site--compact .catalog-search-suggestions-row {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	gap: 12px;
	padding-bottom: 8px;
	overflow-x: auto;
	overflow-y: hidden;
	scrollbar-width: thin;
	scrollbar-color: rgba(255, 255, 255, 0.25) transparent;
	-webkit-overflow-scrolling: touch;
}

.navigation-site--compact .catalog-search-suggestion {
	flex: 0 0 clamp(168px, 15vw, 210px);
	flex-direction: column;
	align-items: stretch;
	gap: 10px;
	padding: 8px;
	border: 1px solid var(--hc-border);
	border-radius: 16px;
	background: rgba(255, 255, 255, 0.05);
	transition: background var(--transition-fast), border-color var(--transition-fast);
}

.navigation-site--compact .catalog-search-suggestion:hover {
	border-color: rgba(255, 255, 255, 0.2);
	background: rgba(255, 255, 255, 0.1);
}

.navigation-site--compact .catalog-search-suggestion-thumb {
	flex: none;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	border-radius: 10px;
}

.navigation-site--compact .catalog-search-suggestion-thumb img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.navigation-site--compact .catalog-search-suggestion-body {
	padding: 0 4px 4px;
}

.navigation-site--compact .catalog-search-suggestion-title {
	display: -webkit-box;
	overflow: hidden;
	font-size: 14px;
	line-height: 1.3;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.navigation-site--compact .catalog-search-view-all {
	margin-top: 8px;
	text-align: center;
}

@media (max-width: 767px) {
	.navigation-site--compact .catalog-search-suggestion {
		flex-basis: 150px;
	}
}

/* Строка поиска в острове (компьютер): таблетка-подложка, крупный текст и жёлтая мигающая каретка. */
@media (min-width: 768px) {
	.navigation-site--graphite.navigation-site--compact .catalog-search-input,
	.navigation-site--graphite.navigation-site--compact .catalog-search-input:hover,
	.navigation-site--graphite.navigation-site--compact .catalog-search-input:focus {
		height: 54px;
		padding: 0 52px 0 54px;
		border: 1px solid var(--hc-border);
		border-radius: 999px;
		background: rgba(255, 255, 255, 0.07);
		box-shadow: none;
		color: var(--hc-text);
		caret-color: var(--brand-yellow);
		font-size: 20px;
		font-weight: 500;
		letter-spacing: -0.01em;
	}

	.navigation-site--graphite.navigation-site--compact .catalog-search-input:hover {
		background: rgba(255, 255, 255, 0.1);
	}

	.navigation-site--graphite.navigation-site--compact .catalog-search-input:focus {
		border-color: rgba(255, 255, 255, 0.2);
		background: rgba(255, 255, 255, 0.12);
	}

	.navigation-site--graphite.navigation-site--compact .catalog-search-input::placeholder {
		color: rgba(255, 255, 255, 0.38);
	}

	.navigation-site--graphite.navigation-site--compact .catalog-search-icon {
		top: 50%;
		left: 20px;
		width: 22px;
		height: 22px;
		transform: translateY(-50%);
	}

	.navigation-site--compact .catalog-search-clear {
		right: 14px;
	}
}

/* Недавние запросы в быстрых ссылках */
.header-search-quick-list .is-recent {
	position: relative;
	display: inline-flex;
}

.header-search-quick-list .is-recent a {
	padding-right: 30px;
}

/* Крестик на недавнем запросе: убрать только его. */
.header-search-quick-remove {
	appearance: none;
	position: absolute;
	top: 50%;
	right: 6px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--hc-text-2);
	font: inherit;
	font-size: 15px;
	line-height: 1;
	cursor: pointer;
	opacity: 0.55;
	transform: translateY(-50%);
	transition: background var(--transition-fast), color var(--transition-fast), opacity var(--transition-fast);
}

/* Крестик нарисован, а не набран символом «×»: у шрифта глиф стоит выше центра. */
.header-search-quick-remove::before {
	content: "";
	width: 8px;
	height: 8px;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg width='8' height='8' viewBox='0 0 8 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l6 6M7 1L1 7' stroke='black' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg width='8' height='8' viewBox='0 0 8 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l6 6M7 1L1 7' stroke='black' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.header-search-quick-list .is-recent:hover .header-search-quick-remove,
.header-search-quick-remove:focus-visible {
	opacity: 1;
}

.header-search-quick-remove:hover {
	background: rgba(255, 255, 255, 0.16);
	color: #fff;
}

.header-search-quick-list .is-recent a::before {
	content: "";
	display: inline-block;
	width: 13px;
	height: 13px;
	margin-right: 7px;
	flex: none;
	align-self: center;
	background-color: currentColor;
	opacity: 0.6;
	-webkit-mask: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='12' r='9' stroke='black' stroke-width='2'/%3E%3Cpath d='M12 7v5l3 2' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='12' r='9' stroke='black' stroke-width='2'/%3E%3Cpath d='M12 7v5l3 2' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Подсказки-карточки: та же карточка, что в каталоге (стили — search-product-card.css) */
.navigation-site--compact .catalog-search-card-item {
	display: flex;
	flex: 0 0 clamp(210px, 17vw, 250px);
}

.navigation-site--compact .catalog-search-card-item .catalog-search-card {
	display: flex;
	flex: 1;
	min-width: 0;
}

.navigation-site--compact .catalog-search-suggestions .card-wrapper {
	max-width: none;
	height: 100%;
}

.navigation-site--compact .catalog-search-suggestions .custom-product-card .card-wrapper:hover {
	transform: none;
	box-shadow: none;
}

.navigation-site--compact .catalog-search-suggestions .product-image {
	height: clamp(140px, 11vw, 180px);
}

@media (max-width: 767px) {
	.navigation-site--compact .catalog-search-card-item {
		flex-basis: 190px;
	}
}


/* ==========================================================================
   Корзина («Ваша заявка») — панель острова вместо всплывающего окна.
   header-compact.js переносит #custom-cart-container из подвала в остров;
   логика открытия, список и форма остаются прежними (custom-cart.js).
   ========================================================================== */

@media (min-width: 768px) {
	.navigation-site--compact #custom-cart-container,
	.navigation-site--compact #custom-cart-container.hidden {
		position: static;
		z-index: auto;
		display: grid;
		grid-template-rows: 0fr;
		align-items: stretch;
		justify-content: stretch;
		padding: 0;
		border: 0 solid transparent;
		background: none;
		opacity: 0;
		pointer-events: none;
		visibility: hidden;
		transition:
			grid-template-rows 0.36s var(--ease-out),
			opacity 0.24s var(--ease-out),
			visibility 0s linear 0.36s;
	}

	.navigation-site--compact #custom-cart-container.is-visible {
		grid-template-rows: 1fr;
		border-top: 1px solid var(--hc-border);
		opacity: 1;
		pointer-events: auto;
		visibility: visible;
		transition:
			grid-template-rows 0.36s var(--ease-out),
			opacity 0.24s var(--ease-out),
			visibility 0s linear 0s;
	}

	.navigation-site--compact #custom-cart-content {
		min-height: 0;
		/* Окно не прокручивается целиком: шапка (заголовки и крестик) стоит на месте, прокручивается только
		   содержимое под ней — иначе полоса прокрутки едет по правому краю поверх крестика и рамки формы. */
		max-height: min(calc(100vh - 150px), 880px);
		margin: 0;
		padding: 0;
		border: 0;
		border-radius: 0;
		background: none;
		box-shadow: none;
		overflow: hidden;
	}

	.navigation-site--compact .custom-cart-header {
		margin: 0;
		padding: 24px 4px 16px;
	}

	.navigation-site--compact .custom-cart-wrapper {
		min-height: 0;
		overflow-x: hidden;
		overflow-y: auto;
		overscroll-behavior: contain;
		padding: 0 14px 26px 4px;
		scrollbar-width: thin;
		scrollbar-color: rgba(255, 255, 255, 0.25) transparent;
	}

	.navigation-site--compact .cart-items-empty-tip {
		border-color: rgba(255, 255, 255, 0.14);
		background: rgba(255, 255, 255, 0.06);
		color: var(--hc-text);
	}

	.navigation-site--compact .cart-items-empty-tip--error {
		border-color: var(--form-error-border);
		background: rgba(255, 90, 90, 0.12);
		color: #ffb4b4;
	}

	/* Товары — светлые карточки на тёмном; без подпрыгивания (список прокручивается) */
	.navigation-site--compact .cart-product-list.custom-cart-items {
		max-height: none;
		overflow: visible;
		padding: 0;
	}

	.navigation-site--compact .cart-product-list .custom-product-card .card-wrapper:hover {
		transform: none;
		box-shadow: none;
	}

	.navigation-site--compact .close-custom-cart {
		top: 20px;
		right: 4px;
	}
}

/* ==========================================================================
   Липкий остров (компьютер): шапка идёт за экраном при прокрутке.
   Липнет обёртка шапки (прямой потомок body), а не остров: иначе он уезжает
   вместе со своим коротким контейнером. Прозрачные поля обёртки кликов не ловят.
   ========================================================================== */

@media (min-width: 768px) {
	body.header-variant-compact .site-header-area {
		position: sticky;
		top: 0;
		pointer-events: none;
	}

	/* Панель администратора WordPress закрепляется сверху и перекрыла бы остров. */
	body.header-variant-compact.admin-bar .site-header-area {
		top: 32px;
	}

	body.header-variant-compact .header-shell,
	body.header-variant-compact .header-island-stack {
		pointer-events: none;
	}

	.navigation-site--island.navigation-site--compact {
		pointer-events: auto;
	}
}

@media (min-width: 768px) and (max-width: 782px) {
	body.header-variant-compact.admin-bar .site-header-area {
		top: 46px;
	}
}

/* Липкий фильтр каталога встаёт под липким островом, а не под ним (--fp-sticky-top из catalog-filter.css; класс fp-catalog стоит на body). */
@media (min-width: 901px) {
	body.header-variant-compact.fp-catalog {
		--fp-sticky-top: calc(var(--header-top-gap) + var(--header-bar-height) + 2px + 14px);
	}

	body.header-variant-compact.admin-bar.fp-catalog {
		--fp-sticky-top: calc(32px + var(--header-top-gap) + var(--header-bar-height) + 2px + 14px);
	}
}

/* Окно «Связаться» (Popup Maker): пока оно открыто, плагин добавляет всем элементам страницы
   padding-right: 15px «на место пропавшей полосы прокрутки». При накладных полосах (macOS) полосы нет,
   и страница сужается на 15px — «дёргается» влево при открытии и вправо при закрытии. Снимаем этот отступ,
   а место под классическую полосу, если она есть, резервируем сами (scrollbar-gutter ниже). */
html.pum-open.pum-open-overlay.pum-open-scrollable body.header-variant-compact > :not([aria-modal="true"]) {
	padding-right: 0 !important;
}

/* Окна блокируют прокрутку страницы, и классическая полоса прокрутки исчезает — страница «прыгает» на её ширину.
   Место под полосу резервируем всегда (на телефоне полосы нет). */
@media (min-width: 768px) {
	html:has(body.header-variant-compact) {
		scrollbar-gutter: stable;
	}
}

/* ==========================================================================
   Телефон: липкая шапка, при прокрутке остаётся только верхняя строка.
   header-compact.js ставит .is-condensed (страница прокручена) и .is-search-peek
   (лупа в верхней строке вернула поиск); высоту полной шапки держит контейнер.
   ========================================================================== */

@media (max-width: 767px) {
	body.header-variant-compact .site-header-area {
		position: sticky;
		top: 0;
		pointer-events: none;
	}

	body.header-variant-compact .header-shell,
	body.header-variant-compact .header-island-stack {
		pointer-events: none;
	}

	.navigation-site--island.navigation-site--compact {
		pointer-events: auto;
	}

	/* Прокрутили вниз — прячется строка с логотипом, поиск остаётся (как у ВБ). */
	.navigation-site--compact.is-condensed .navigation-site-row--main {
		height: 0;
		opacity: 0;
		pointer-events: none;
	}

	.navigation-site--compact .navigation-site-row--search,
	.navigation-site--compact .navigation-site-row--search[hidden],
	.navigation-site--compact .navigation-site-row--search.is-open {
		border-top: 0;
		transition: padding 0.28s var(--ease-out);
	}

	.navigation-site--compact.is-condensed .navigation-site-row--search,
	.navigation-site--compact.is-condensed .navigation-site-row--search[hidden] {
		padding-top: 10px;
	}
}


/* ==========================================================================
   Заявка (корзина) в тёмном стекле: плашки-заголовки, карточки как в каталоге,
   форма из стеклянных таблеток (те же, что строка поиска).
   ========================================================================== */

@media (min-width: 768px) {
	/* Колонки: товары шире, форма уже; заголовки над своими колонками, слева */
	.navigation-site--compact .custom-cart-header,
	.navigation-site--compact .custom-cart-wrapper {
		gap: 24px;
	}

	.navigation-site--compact .custom-cart-header__col--items,
	.navigation-site--compact .custom-cart-items-panel {
		flex: 0 0 57%;
		width: 57%;
	}

	.navigation-site--compact .custom-cart-header__col--form,
	.navigation-site--compact .cart-order-form {
		flex: 1 1 0;
		width: auto;
	}

	.navigation-site--compact .custom-cart-header {
		padding: 22px 12px 14px 4px;
	}

	.navigation-site--compact .cart-count-title,
	.navigation-site--compact .cart-island-form__title {
		justify-content: flex-start;
		gap: 10px;
		margin: 0;
		color: var(--hc-text-2);
		font-family: var(--font-family);
		font-size: 13px;
		font-weight: 600;
		letter-spacing: 0.06em;
		line-height: 1.2;
		text-align: left;
		text-transform: uppercase;
	}

	/* «Очистить» — справа от заголовка заявки, стеклянная таблетка */
	.navigation-site--compact .custom-cart-header__col--items {
		display: flex;
		align-items: center;
		gap: 14px;
	}

	.navigation-site--compact .custom-cart-header__col--items .cart-count-title {
		width: auto;
	}

	.navigation-site--compact .cart-clear-btn {
		padding: 5px 12px;
		border-color: var(--hc-border);
		background: rgba(255, 255, 255, 0.06);
		color: var(--hc-text-2);
		font-size: 12px;
		letter-spacing: 0;
	}

	.navigation-site--compact .cart-clear-btn:hover {
		border-color: rgba(255, 255, 255, 0.2);
		background: rgba(255, 255, 255, 0.12);
		color: var(--hc-text);
	}

	.navigation-site--compact .cart-clear-btn.is-confirm {
		border-color: transparent;
		background: #c0392b;
		color: #fff;
	}

	.navigation-site--compact .cart-count {
		width: 24px;
		height: 24px;
		font-size: 12px;
		font-weight: 600;
		letter-spacing: 0;
	}

	/* Закрыть: круглая стеклянная кнопка */
	.navigation-site--compact .close-custom-cart {
		top: 14px;
		right: 4px;
		width: 36px;
		height: 36px;
		border-color: var(--hc-border);
		background-color: rgba(255, 255, 255, 0.08);
		background-image: url("data:image/svg+xml,%3Csvg width='24' height='25' viewBox='0 0 24 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.75 6.72266L18.25 19.2227' stroke='%23ffffff' stroke-width='1.5' stroke-linecap='round'/%3E%3Cpath d='M5.75 19.2227L18.25 6.72266' stroke='%23ffffff' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
		box-shadow: none;
	}

	.navigation-site--compact .close-custom-cart:hover {
		background-color: rgba(255, 255, 255, 0.16);
		box-shadow: none;
	}

	/* Товары: карточки каталога в один ряд, ряд листается вбок (как подсказки поиска); высота острова от числа товаров не растёт.
	   Карточки тянутся на высоту формы, лишнее место забирает фото. */
	.navigation-site--compact .custom-cart-wrapper {
		align-items: stretch;
	}

	.navigation-site--compact .custom-cart-items-panel {
		min-width: 0;
	}

	.navigation-site--compact .cart-product-list.custom-cart-items {
		display: flex;
		flex: 1 1 auto;
		flex-wrap: nowrap;
		align-items: stretch;
		gap: 12px;
		padding: 0 0 10px;
		overflow-x: auto;
		overflow-y: hidden;
			overscroll-behavior-x: contain;
		scrollbar-width: thin;
		scrollbar-color: rgba(255, 255, 255, 0.25) transparent;
	}

	/* Карточка тянется на высоту формы, но не выше 380px: с раскрытым блоком «Организация и файл» форма высокая,
	   и без предела фото раздувалось бы. */
	.navigation-site--compact .cart-product-card {
		display: flex;
		flex: 0 0 clamp(200px, 15vw, 232px);
		width: auto;
		max-height: 380px;
	}

	.navigation-site--compact .cart-product-card .card-wrapper {
		height: auto;
		flex: 1;
	}

	.navigation-site--compact .cart-product-list .product-image {
		flex: 1 1 auto;
		height: auto;
		min-height: 130px;
	}

	.navigation-site--compact .cart-product-list .product-info {
		padding: 4px 2px 0;
	}

	.navigation-site--compact .cart-product-footer {
		gap: 8px;
		padding: 8px 0 0;
		flex-wrap: nowrap;
	}

	.navigation-site--compact .cart-qty-controls {
		min-height: 40px;
		padding: 2px 6px;
		border-radius: 999px;
	}

	.navigation-site--compact .cart-remove-btn {
		width: 40px;
		height: 40px;
	}

	/* Пустая заявка */
	.navigation-site--compact .cart-items-empty-tip {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 12px;
		padding: 36px 20px;
		border: 1px dashed rgba(255, 255, 255, 0.18);
		border-radius: 20px;
		background: rgba(255, 255, 255, 0.04);
		color: var(--hc-text-2);
		font-size: 14px;
	}

	.navigation-site--compact .cart-items-empty-tip.is-hidden {
		display: none;
	}

	.navigation-site--compact .cart-items-empty-tip__link {
		display: inline-flex;
		padding: 9px 18px;
		border-radius: 999px;
		background: var(--brand-yellow);
		color: var(--grafit-black);
		font-size: 13px;
		font-weight: 600;
		text-decoration: none;
		transition: background var(--transition-fast), transform var(--transition-fast);
	}

	.navigation-site--compact .cart-items-empty-tip__link:hover {
		background: var(--cta-btn-bg-hover);
		transform: scale(1.03);
	}

	/* Форма — плоская стеклянная панель, как остальные плашки острова */
	.navigation-site--compact .cart-order-form {
		position: relative;
		isolation: isolate;
		overflow: hidden;
		padding: 18px;
		border: 1px solid var(--hc-border);
		border-radius: 22px;
		background: rgba(255, 255, 255, 0.04);
	}

	.navigation-site--compact .cart-order-form-name-phone,
	.navigation-site--compact .cart-order-form-email-orgname {
		gap: 10px;
	}

	.navigation-site--compact .cart-order-form-email-orgname {
		margin-top: 10px;
	}

	/* Поля: стеклянные капсулы с плавающей подписью (подпись — <label> после поля) */
	.navigation-site--compact .cart-order-form-name-phone input[type=text],
	.navigation-site--compact .cart-order-form-name-phone input[type=tel],
	.navigation-site--compact .cart-order-form-email-orgname input[type=text],
	.navigation-site--compact .cart-order-form-email-orgname input[type=email] {
		height: 54px !important;
		padding: 21px 44px 5px 20px !important;
		border: 1px solid var(--hc-border) !important;
		background: rgba(255, 255, 255, 0.07) !important;
		box-shadow: none !important;
		color: var(--hc-text) !important;
		caret-color: var(--brand-yellow);
		font-size: 15px !important;
		font-weight: 500 !important;
		transition: border-color 0.2s ease, background 0.2s ease;
	}

	.navigation-site--compact .cart-order-form-name-phone input:hover,
	.navigation-site--compact .cart-order-form-email-orgname input:hover {
		background: rgba(255, 255, 255, 0.1) !important;
		box-shadow: none !important;
	}

	/* Фокус — как у строки поиска: чуть светлее фон и кромка, без свечения */
	.navigation-site--compact .cart-order-form-name-phone input:focus,
	.navigation-site--compact .cart-order-form-email-orgname input:focus {
		border-color: rgba(255, 255, 255, 0.22) !important;
		background: rgba(255, 255, 255, 0.12) !important;
		box-shadow: none !important;
	}

	/* Текст подсказки внутри поля не нужен: его заменяет плавающая подпись (телефонная маска видна в фокусе) */
	.navigation-site--compact .cart-order-form-name-phone input::placeholder,
	.navigation-site--compact .cart-order-form-email-orgname input::placeholder {
		color: transparent !important;
		transition: color 0.2s ease;
	}

	/* В фокусе виден только шаблон телефона: у остальных полей подсказка дублировала бы подпись */
	.navigation-site--compact .cart-order-form-name-phone input[type=tel]:focus::placeholder {
		color: rgba(255, 255, 255, 0.3) !important;
	}

	.navigation-site--compact .cart-field-label {
		position: absolute;
		top: 27px;
		left: 20px;
		width: auto;
		height: auto;
		margin: 0;
		padding: 0;
		overflow: visible;
		border: 0;
		clip-path: none;
		color: rgba(255, 255, 255, 0.52);
		font-size: 15px;
		font-weight: 500;
		line-height: 1;
		white-space: nowrap;
		pointer-events: none;
		transform: translateY(-50%);
		transition:
			top 0.22s var(--ease-out),
			font-size 0.22s var(--ease-out),
			color 0.2s ease;
	}

	.navigation-site--compact .cart-field-wrap input:focus + .cart-field-label,
	.navigation-site--compact .cart-field-wrap input:not(:placeholder-shown) + .cart-field-label,
	.navigation-site--compact .cart-field-wrap input.cart-field--filled + .cart-field-label {
		top: 13px;
		font-size: 11px;
	}

	/* Обязательное поле: жёлтая точка у подписи вместо жёлтой рамки */
	.navigation-site--compact .cart-field--required + .cart-field-label::after {
		content: "";
		display: inline-block;
		width: 5px;
		height: 5px;
		margin-left: 6px;
		border-radius: 50%;
		background: var(--brand-yellow);
		vertical-align: middle;
		opacity: 0.9;
	}

	.navigation-site--compact .cart-field--required {
		border-color: var(--hc-border) !important;
	}

	.navigation-site--compact .cart-field--required:focus {
		border-color: rgba(255, 255, 255, 0.22) !important;
	}

	.navigation-site--compact .cart-field--required.cart-field--filled,
	.navigation-site--compact .cart-field--required:valid:not(:placeholder-shown) {
		border-color: var(--hc-border) !important;
	}

	.navigation-site--compact .cart-field--invalid {
		border-color: var(--form-error-border) !important;
		box-shadow: none !important;
	}

	.navigation-site--compact .cart-field--invalid + .cart-field-label {
		color: #ff9c9c;
	}

	.navigation-site--compact .cart-field-tip {
		margin-top: 5px;
		padding: 0 14px;
		color: #ff9c9c;
	}

	/* Галочка «значение верное» */
	.navigation-site--compact .cart-field-check {
		position: absolute;
		top: 27px;
		right: 16px;
		display: block;
		width: 20px;
		height: 20px;
		border-radius: 50%;
		background: var(--brand-yellow) url("data:image/svg+xml,%3Csvg width='10' height='8' viewBox='0 0 10 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 4l2.6 2.6L9 1' stroke='%23373838' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 10px no-repeat;
		opacity: 0;
		pointer-events: none;
		transform: translateY(-50%) scale(0.5);
		transition: opacity 0.2s ease, transform 0.3s var(--ease-out);
	}

	.navigation-site--compact .cart-field-wrap input.cart-field--ok:not(.cart-field--invalid) ~ .cart-field-check {
		opacity: 1;
		transform: translateY(-50%) scale(1);
	}

	/* «Организация и файл» — стеклянная кнопка-раскрывашка */
	.navigation-site--compact .cart-optional {
		margin-top: 12px;
	}

	.navigation-site--compact .cart-optional__toggle {
		padding: 8px 14px 8px 16px;
		border: 1px solid var(--hc-border);
		border-radius: 999px;
		background: rgba(255, 255, 255, 0.06);
		color: var(--hc-text-2);
		font-size: 13px;
		transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
	}

	.navigation-site--compact .cart-optional__toggle:hover,
	.navigation-site--compact .cart-optional.is-open .cart-optional__toggle {
		border-color: rgba(255, 255, 255, 0.2);
		background: rgba(255, 255, 255, 0.11);
		color: var(--hc-text);
	}

	.navigation-site--compact .cart-optional__toggle:focus-visible {
		outline: 2px solid var(--brand-yellow);
		outline-offset: 2px;
	}

	/* Зона загрузки файла: пунктирное стекло; перетащенный файл подсвечивает рамку */
	.navigation-site--compact .cart-order-form-uploadfiles {
		margin-top: 10px;
	}

	.navigation-site--compact .cart-island-form__file-label {
		display: none;
	}

	.navigation-site--compact .cart-file-upload__row {
		min-height: 68px;
		gap: 12px;
		padding: 12px 14px;
		border: 1.5px dashed rgba(255, 255, 255, 0.22);
		border-radius: 22px;
		background: rgba(255, 255, 255, 0.04);
		box-shadow: none;
		transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.25s ease;
	}

	.navigation-site--compact .cart-file-upload__row:hover {
		border-color: rgba(255, 255, 255, 0.36);
		background: rgba(255, 255, 255, 0.07);
		box-shadow: none;
	}

	.navigation-site--compact .cart-file-upload__row.is-dragover {
		border-color: rgba(255, 196, 60, 0.7);
		background: rgba(255, 187, 16, 0.08);
		box-shadow: none;
	}

	.navigation-site--compact .cart-file-upload__row:focus-within {
		border-color: rgba(255, 255, 255, 0.22);
		box-shadow: none;
	}

	.navigation-site--compact .cart-file-upload__btn {
		min-height: 40px;
		padding: 0 16px 0 12px;
		border: 1px solid var(--hc-border);
		background: rgba(255, 255, 255, 0.1);
		box-shadow: none;
		color: var(--hc-text);
		font-size: 14px;
	}

	.navigation-site--compact .cart-file-upload__btn:hover {
		background: rgba(255, 255, 255, 0.17);
		box-shadow: none;
		transform: none;
	}

	/* Скрепка рисуется цветом текста (в светлой теме она тёмная) */
	.navigation-site--compact .cart-file-upload__btn-icon {
		background-color: currentColor;
		background-image: none;
		-webkit-mask: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
		mask: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
	}

	.navigation-site--compact .cart-file-chip {
		border-color: var(--hc-border);
		background: rgba(255, 255, 255, 0.07);
	}

	.navigation-site--compact .cart-file-upload__error {
		color: #ff9c9c;
	}

	/* «Добавить файл»: плюс вместо скрепки */
	.navigation-site--compact .cart-file-upload__row.has-file .cart-file-upload__btn-icon {
		background-image: none;
		-webkit-mask: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 3v10M3 8h10' stroke='black' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
		mask: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 3v10M3 8h10' stroke='black' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
	}

	.navigation-site--compact .cart-file-upload__ico[data-type="img"] {
		border-color: var(--hc-border);
	}

	.navigation-site--compact .cart-file-upload__size {
		color: var(--hc-text-2);
	}

	.navigation-site--compact .cart-file-upload__name {
		color: var(--hc-text-2);
	}

	.navigation-site--compact .cart-file-upload__name.is-selected {
		color: var(--hc-text);
	}

	.navigation-site--compact .cart-file-upload__clear {
		background-color: rgba(255, 255, 255, 0.12);
		background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.5 2.5l7 7M9.5 2.5l-7 7' stroke='%23ffffff' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
		transition: background-color var(--transition-fast);
	}

	.navigation-site--compact .cart-file-upload__clear:hover {
		background-color: rgba(255, 255, 255, 0.22);
	}

	/* Кнопка отправки: плоская жёлтая, как «Связаться» в острове */
	.navigation-site--compact .cart-order-form-total-btn {
		padding-top: 16px;
		padding-bottom: 4px;
	}

	.navigation-site--compact .cart-order-form-total-btn button {
		min-height: 54px;
		background: var(--cta-btn-bg);
		box-shadow: 0 2px 8px rgba(255, 187, 16, 0.2);
		font-size: 15px;
		transition: transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
	}

	.navigation-site--compact .cart-order-form-total-btn button:hover:not(:disabled) {
		background: var(--cta-btn-bg-hover);
		box-shadow: var(--cta-btn-shadow);
		transform: scale(1.02);
	}

	.navigation-site--compact .cart-order-form-total-btn button:active:not(:disabled) {
		transform: scale(0.98);
	}

	.navigation-site--compact .cart-order-form-total-btn button:disabled {
		background: var(--cta-btn-bg);
		box-shadow: none;
		color: var(--grafit-black);
		cursor: progress;
		opacity: 0.7;
	}

	.navigation-site--compact .cart-order-form-total-btn button.is-loading::before {
		content: "";
		width: 16px;
		height: 16px;
		margin-right: 10px;
		border: 2px solid rgba(55, 56, 56, 0.25);
		border-top-color: #373838;
		border-radius: 50%;
		animation: cart-spin 0.7s linear infinite;
	}

	/* Согласие: стеклянный чекбокс */
	.navigation-site--compact .cart-island-form__consent {
		margin-top: 14px;
	}

	.navigation-site--compact .cart-island-form__consent label {
		color: var(--hc-text-2);
		font-size: 12.5px;
	}

	.navigation-site--compact .cart-island-form__consent input[type="checkbox"] {
		width: 22px;
		height: 22px;
		border: 1px solid rgba(255, 255, 255, 0.26);
		border-radius: 8px;
		background: rgba(255, 255, 255, 0.07);
		transition: background 0.2s ease, border-color 0.2s ease;
	}

	.navigation-site--compact .cart-island-form__consent input[type="checkbox"]:checked {
		border-color: var(--brand-yellow);
		background: var(--brand-yellow);
	}

	.navigation-site--compact .cart-island-form__consent input[type="checkbox"]:checked::before {
		top: 4px;
		left: 7px;
	}
}


@keyframes cart-spin {
	to { transform: rotate(360deg); }
}


/* === Мега-меню «Каталог»: разделы слева, типы выбранного раздела в середине, баннер справа ===
   Шрифты, стеклянные плашки и карточка товара — как в панели корзины («Ваша заявка») выше. */

.category-list-wrap--mega .mega-col-title {
	color: var(--hc-text-2);
	font-family: var(--font-family);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.06em;
	line-height: 1.2;
	text-transform: uppercase;
}

/* Телефон: левая колонка и баннер не нужны, каждый раздел идёт заголовком со своими типами. */
@media (max-width: 767px) {
	.category-list-wrap--mega .mega-types,
	.category-list-wrap--mega .mega-promos,
	.category-list-wrap--mega .mega-col-title {
		display: none;
	}

	.category-list-wrap--mega .mega-panes {
		display: contents;
	}
}

@media (min-width: 768px) {
	.navigation-site--compact .island-panel .category-list-wrap--mega {
		display: grid;
		grid-template-columns: clamp(210px, 19vw, 270px) minmax(0, 1fr);
		gap: 0 clamp(20px, 2.4vw, 32px);
		align-items: stretch;
		padding: 20px 4px 24px;
	}

	/* Левая колонка — плоская стеклянная панель, как форма заявки */
	.mega-types {
		display: flex;
		flex-direction: column;
		gap: 4px;
		padding: 18px 12px 14px;
		border: 1px solid var(--hc-border);
		border-radius: 22px;
		background: rgba(255, 255, 255, 0.04);
		box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
	}

	.mega-types .mega-col-title {
		padding: 0 12px 10px;
	}

	.mega-type {
		padding: 10px 14px;
		border: 1px solid transparent;
		border-radius: 999px;
		color: var(--hc-text);
		font-family: var(--font-family);
		font-size: 15px;
		font-weight: 500;
		line-height: 1.3;
		text-decoration: none;
		transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
	}

	.mega-type:hover,
	.mega-type:focus-visible {
		background: var(--hc-hover);
	}

	.mega-type.is-active {
		border-color: rgba(255, 255, 255, 0.14);
		background: rgba(255, 255, 255, 0.1);
		box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
		color: var(--brand-yellow);
	}

	/* «Весь каталог» — стеклянная таблетка, как «Очистить» в заявке */
	.mega-all {
		align-self: flex-start;
		margin-top: auto;
		padding: 8px 16px;
		border: 1px solid var(--hc-border);
		border-radius: 999px;
		background: rgba(255, 255, 255, 0.06);
		color: var(--hc-text);
		font-size: 13px;
		font-weight: 600;
		line-height: 1.2;
		text-decoration: none;
		transition: background var(--transition-fast), border-color var(--transition-fast);
	}

	.mega-all::after {
		content: "\2192";
		display: inline-block;
		margin-left: 8px;
		color: var(--brand-yellow);
		transition: transform var(--transition-fast);
	}

	.mega-all:hover {
		border-color: rgba(255, 255, 255, 0.2);
		background: rgba(255, 255, 255, 0.12);
	}

	.mega-all:hover::after {
		transform: translateX(3px);
	}

	/* Все панели лежат друг на друге: высота меню равна самой высокой и не прыгает при наведении. */
	.mega-panes {
		display: grid;
		min-width: 0;
	}

	.category-list-wrap--mega .mega-pane {
		grid-area: 1 / 1;
		display: grid;
		grid-template-columns: minmax(0, 1fr) clamp(300px, 30vw, 460px);
		gap: 0 clamp(20px, 2.4vw, 32px);
		min-width: 0;
		padding: 0;
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transition: opacity 0.16s var(--ease-out), visibility 0s linear 0.16s;
	}

	.category-list-wrap--mega .mega-pane.is-active {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transition: opacity 0.22s var(--ease-out), visibility 0s linear 0s;
	}

	.mega-pane-title {
		display: none;
	}

	.mega-pane-body .mega-col-title {
		padding: 8px 0 14px;
	}

	body.header-variant-compact .category-list-wrap--mega .mega-list {
		margin: 0;
		padding: 0;
		list-style: none;
	}

	body.header-variant-compact .category-list-wrap--mega .mega-list--cols {
		column-count: 2;
		column-gap: 28px;
	}

	body.header-variant-compact .category-list-wrap--mega .mega-list li {
		margin: 0;
		break-inside: avoid;
	}

	body.header-variant-compact .category-list-wrap--mega .mega-list li::after {
		display: none;
	}

	body.header-variant-compact .category-list-wrap--mega .mega-list li a {
		display: block;
		margin: 0 -14px;
		padding: 8px 14px;
		border-radius: 999px;
		color: var(--hc-text);
		font-family: var(--font-family);
		font-size: 15px;
		font-weight: 500;
		line-height: 1.35;
	}

	body.header-variant-compact .category-list-wrap--mega .mega-list li a:hover {
		background: var(--hc-hover);
		color: var(--brand-yellow);
	}

	/* Баннер — карточка товара как в заявке и подсказках поиска: белая, фото сверху, артикул и название ниже */
	.mega-promos {
		display: flex;
		min-width: 0;
	}

	.mega-promo:not(.is-active) {
		display: none;
	}

	.mega-promo.is-active {
		animation: mega-promo-in 0.28s var(--ease-out);
	}

	.mega-promo {
		position: relative;
		flex: 1 1 auto;
		min-width: 0;
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		overflow: hidden;
		padding: 0;
		border-radius: var(--radius-lg);
		background: var(--white-bg);
		color: var(--grafit-black);
		text-decoration: none;
		transition: transform var(--transition-fast), box-shadow var(--transition-fast);
	}

	.mega-promo:hover {
		transform: translateY(-3px);
		box-shadow: var(--glass-shadow-hover);
	}

	.mega-promo-photo {
		display: block;
		flex: 0 0 auto;
		aspect-ratio: 4 / 3;
		overflow: hidden;
	}

	/* --fk/--fx/--fy — кадрирование по товару (algorithm_catalog_mega_photo_frame): белые поля рендера обрезаются. */
	.mega-promo-photo img {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: contain;
		transform: translate(var(--fx, 0%), var(--fy, 0%)) scale(var(--fk, 1));
		transition: transform 0.4s var(--ease-out);
	}

	.mega-promo:hover .mega-promo-photo img {
		transform: translate(var(--fx, 0%), var(--fy, 0%)) scale(calc(var(--fk, 1) * 1.04));
	}

	.mega-promo-badge {
		position: absolute;
		top: 12px;
		left: 12px;
		z-index: 2;
		padding: 3px 10px 3px 30px;
		border-radius: 999px;
		background: var(--brand-yellow);
		color: var(--grafit-black);
		font-family: var(--font-family);
		font-size: 14px;
		font-weight: 500;
		line-height: 157%;
	}

	.mega-promo-badge::after {
		content: "";
		position: absolute;
		top: 50%;
		left: 5px;
		width: 22px;
		height: 22px;
		transform: translateY(-50%);
		background-image: url("data:image/svg+xml,%3Csvg width='22' height='22' viewBox='0 0 22 22' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M1.83398 15.3651C4.48583 15.3651 6.63557 17.5148 6.63557 20.1667C6.63557 17.5148 8.78532 15.3651 11.4372 15.3651C8.78532 15.3651 6.63557 13.2153 6.63557 10.5635C6.63557 13.2153 4.48583 15.3651 1.83398 15.3651Z' fill='%23373838' /%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10.5641 12.7461C13.216 12.7461 15.3657 14.8958 15.3657 17.5476C15.3657 14.8958 17.5155 12.7461 20.1673 12.7461C17.5155 12.7461 15.3657 10.5963 15.3657 7.94446C15.3657 10.5963 13.216 12.7461 10.5641 12.7461Z' fill='%23373838' /%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M5.32602 6.63493C7.97786 6.63493 10.1276 8.78467 10.1276 11.4365C10.1276 8.78467 12.2774 6.63493 14.9292 6.63493C12.2774 6.63493 10.1276 4.48519 10.1276 1.83334C10.1276 4.48519 7.97786 6.63493 5.32602 6.63493Z' fill='%23373838' /%3E%3C/svg%3E");
	}

	.mega-promo-info {
		display: flex;
		flex-direction: column;
		gap: 2px;
		padding: 2px 18px 18px;
	}

	.mega-promo-sku {
		color: var(--grafit-secon-text);
		font-family: var(--font-family);
		font-size: 12px;
		font-weight: 500;
		line-height: 157%;
	}

	.mega-promo-title {
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
		font-family: var(--font-family);
		font-size: 15px;
		font-weight: 600;
		line-height: 150%;
	}

	.mega-promo-btn {
		align-self: flex-start;
		margin-top: 8px;
		padding: 9px 18px;
		border-radius: 999px;
		background: var(--brand-yellow);
		color: var(--grafit-black);
		font-family: var(--font-family);
		font-size: 13px;
		font-weight: 600;
		line-height: 1;
		transition: background var(--transition-fast);
	}

	.mega-promo:hover .mega-promo-btn {
		background: var(--cta-btn-bg-hover);
	}
}

@media (min-width: 768px) and (max-width: 1023px) {
	.category-list-wrap--mega .mega-pane {
		grid-template-columns: minmax(0, 1fr);
	}

	.category-list-wrap--mega .mega-promos {
		display: none;
	}
}

@keyframes mega-promo-in {
	from {
		opacity: 0;
		transform: translateY(8px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.mega-promo.is-active {
		animation: none;
	}
}

/* Мгновенное закрытие шапки (resetHeaderChrome в header-compact.js): без переходов, чтобы Safari не застревал на полпути. */
#siteHeaderChrome.is-resetting,
#siteHeaderChrome.is-resetting * {
	transition: none !important;
	animation: none !important;
}