/*
 * Поиск в шапке: инлайн-поле + выпадающий блок под шапкой (стилистика Coach).
 * Подключается в inc/enqueue.php после skin-mj.css.
 */

/* ------------------------------------------------------- поле в шапке */

body .site-header.vlt-header .vlt-nav__searchbar {
	display: flex;
	align-items: center;
	gap: 12px;
	width: min(300px, 26vw);
	padding: 0 2px 7px;
	margin: 0;
	border-bottom: 1px solid currentColor;
}

body .site-header.vlt-header .vlt-nav__searchbar-input {
	flex: 1 1 auto;
	min-width: 0;
	background: transparent;
	border: 0;
	outline: none;
	padding: 0;
	color: inherit;
	font-family: var(--vlt-font-display);
	font-size: 16px;
	line-height: 1.2;
}

body .site-header.vlt-header .vlt-nav__searchbar-input::placeholder {
	color: currentColor;
	opacity: 0.75;
}

/* Крестик очистки в WebKit ломает выравнивание — убираем. */
body .site-header.vlt-header .vlt-nav__searchbar-input::-webkit-search-cancel-button {
	-webkit-appearance: none;
	appearance: none;
}

body .site-header.vlt-header .vlt-nav__searchbar-go {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: 0;
	padding: 0;
	color: inherit;
	cursor: pointer;
}

body .site-header.vlt-header .vlt-nav__searchbar-go svg {
	width: 19px;
	height: 19px;
	display: block;
}

body .site-header.vlt-header .vlt-nav__searchbar-go:hover {
	opacity: 0.7;
}

/* ------------------------------------------------- выпадающий блок */

/* Затемнение страницы под открытым блоком. Класс на body ставит JS.
   z-index 99 — ниже шапки (--vlt-z-nav: 100), поэтому сама шапка и блок
   остаются светлыми, а всё под ними уходит в тень. Клик по затемнению
   попадает в body и закрывает блок общим обработчиком. */
body.vlt-sdd-open::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 99;
	background: rgba(0, 0, 0, 0.6);
}

.vlt-sdd {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 90;
	background: #FFFFFF;
	color: var(--vlt-ink);
	border-top: 1px solid var(--vlt-line);
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.08);
	max-height: min(72vh, 720px);
	overflow-y: auto;
}

.vlt-sdd[hidden] {
	display: none;
}

/* Раскладка: 2/3 — товары (просмотренные либо результаты поиска),
   1/3 — категории столбиком справа. */
.vlt-sdd__inner {
	max-width: var(--vlt-max, 1440px);
	margin: 0 auto;
	padding: 34px var(--vlt-pad-x, 32px) 44px;
	display: grid;
	/* Колонка категорий вдвое уже прежней трети — место ушло товарам. */
	grid-template-columns: 5fr 1fr;
	column-gap: 40px;
	align-items: start;
}

.vlt-sdd__main { min-width: 0; }
.vlt-sdd__side { min-width: 0; }

.vlt-sdd__default {
	display: block;
}

/* Как только пошёл запрос, JS прячет блок бестселлеров атрибутом [hidden].
   display: block выше перебивал display: none из браузерных стилей — и
   «Best sellers» оставались висеть над результатами поиска. */
.vlt-sdd__default[hidden] {
	display: none;
}

.vlt-sdd__h {
	font-family: var(--vlt-font-body);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--vlt-ink);
	margin-bottom: 18px;
}

.vlt-sdd__h--res {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	letter-spacing: 0.12em;
	text-transform: none;
}

.vlt-sdd__all {
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--vlt-ink);
	text-decoration: none;
	border-bottom: 1px solid currentColor;
	padding-bottom: 2px;
	white-space: nowrap;
}

/* ------------------------------------------------------ сетка товаров */
/* Карточки — каталожные (.gc-card из template-parts/mark-card), поэтому тут
   только сетка и мелкая правка масштаба: в шапке они мельче каталожных. */

.vlt-sdd .vlt-sdd__grid {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 14px;
}

.vlt-sdd .gc-card__name {
	font-size: 12px;
	line-height: 1.35;
}

.vlt-sdd .gc-card__price-now {
	font-size: 13px;
}

.vlt-sdd .gc-card__price-old {
	font-size: 12px;
}

/* ------------------------------ мобильная панель поиска (шапка родителя) */
/* На узких экранах выпадающий блок скрыт, поиск открывается полноэкранной
   панелью родительской темы. Результаты в неё рисует search-dd.js теми же
   каталожными карточками — здесь только сетка под узкий экран. */

.site-search-panel__results .vlt-sdd__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
}

.site-search-panel__results .vlt-sdd__h {
	margin-bottom: 14px;
}

.site-search-panel__results .gc-card__name {
	font-size: 12px;
	line-height: 1.35;
}

.site-search-panel__results .gc-card__price-now {
	font-size: 13px;
}

.site-search-panel__results .gc-card__price-old {
	font-size: 12px;
}

/* ------------------------------------------------------------ категории */

.vlt-sdd__cats {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.vlt-sdd__cats a {
	display: block;
	color: var(--vlt-ink);
	text-decoration: none;
	font-size: 10.5px;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	line-height: 1.3;
}

.vlt-sdd__cats a:hover {
	opacity: 0.62;
}

/* ---------------------------------------------------------- пусто */

.vlt-sdd__empty {
	padding: 8px 0 4px;
}

.vlt-sdd__empty-t {
	font-family: var(--vlt-font-display);
	font-size: 20px;
	margin: 0 0 6px;
}

.vlt-sdd__empty-h {
	font-size: 13px;
	color: var(--vlt-text-mute);
	margin: 0;
}

/* ------------------------------------------------------------ адаптив */

@media (max-width: 1043px) {
	/* Слева стоит бургер: поле поиска убираем совсем (иначе наезжает на него),
	   поиск на мобильном живёт в иконке-лупе справа. Правило дублирует то,
	   что есть в skin-mj.css: этот файл грузится позже и иначе перебил бы его. */
	body .site-header.vlt-header .vlt-nav__searchbar {
		display: none;
	}

	.vlt-sdd {
		display: none;
	}
}

@media (max-width: 1400px) {
	.vlt-sdd__inner {
		column-gap: 32px;
	}

	.vlt-sdd .vlt-sdd__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}