/* Elsity: мобильная шапка в стиле Маркета. Боевая с 31.08.2026, показывается
   всем при ширине <768 (класс emh-on ставит elsity_dev_header.js). */

/* Страховка: скрипт решает один раз при загрузке, а стили ниже живут только
   до 767px. Если окно откроют узким и растянут, элемент останется в DOM без
   оформления и вылезет сырыми ссылками. Прячем его выше порога явно. */
@media (min-width: 768px) {
	.emh,
	.emh-tab {
		display: none !important;
	}
}

@media (max-width: 767px) {

/* штатную мобильную шапку прячем */
.emh-on .mobileheader-v1,
.emh-on .mobileheader {
	display: none !important;
}

/* Обёртка #mobileheader резервирует 63px под штатную фиксированную шапку.
   Саму шапку мы скрыли, а резерв оставался — под новой шапкой висела пустая
   полоса. Обнуляем высоту. Внутри лежат мобильное меню (#mobilemenu) и его
   подложка, но обе position:fixed, то есть вне потока — их это не задевает. */
.emh-on #mobileheader {
	height: 0 !important;
	min-height: 0 !important;
	overflow: visible !important;
}

/* ===== Шапка ===== */
.emh {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 2000;
	background: #fff;
	box-shadow: 0 2px 14px rgba(35, 32, 42, .08);
	padding: 8px 12px 10px;
	font-family: inherit;
}

.emh__collapsible {
	overflow: hidden;
	max-height: 140px;
	opacity: 1;
	transition: max-height .25s ease, opacity .2s ease;
}

.emh--compact .emh__collapsible {
	max-height: 0;
	opacity: 0;
}

/* Одна строка: логотип прижат влево, ярлыки компактной группой справа */
.emh__top {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 10px;
	padding: 2px 2px 8px;
}

.emh__logo {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
	margin-right: auto; /* прижимает логотип влево, ярлыки уходят вправо */
	text-decoration: none;
}

.emh__logo img {
	display: block;
	height: 28px;
	width: auto;
	max-width: 150px;
	object-fit: contain;
}

/* Бонусы скрыты до готовности программы лояльности (31.08.2026).
   Вернуть — удалить это правило, разметка на месте. */
.emh__coins {
	display: none !important;
}

.emh__city {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	border: 0;
	background: none;
	font-size: 14px;
	font-weight: 600;
	color: #23202a;
	padding: 6px 4px;
}

.emh__city svg {
	color: #97929e;
}

.emh__coins {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: #fff3cd;
	color: #8a6d00;
	font-size: 13px;
	font-weight: 700;
	padding: 6px 12px;
	border-radius: 16px;
	text-decoration: none;
}

/* ярлыки сервисов — компактная группа справа от логотипа */
.emh__services {
	display: flex;
	justify-content: flex-end;
	align-items: flex-start;
	gap: 10px;
	flex: 0 0 auto;
	padding: 0;
}

.emh__services a {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	color: #23202a;
	text-decoration: none;
}

.emh__ic {
	width: 36px;
	height: 36px;
	border-radius: 12px;
	background: #f6f6f8;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #dd1438;
}

/* иконки заданы в SVG на 22px — ужимаем под уменьшенную плитку */
.emh__ic svg {
	width: 19px;
	height: 19px;
}

/* строка поиска */
.emh__row {
	display: flex;
	align-items: center;
	gap: 8px;
}

.emh__grid,
.emh__ava {
	flex: 0 0 44px;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 0;
	background: #f6f6f8;
	color: #23202a;
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
}

.emh__grid {
	background: #dd1438;
	color: #fff;
}

.emh__pill {
	flex: 1 1 auto;
	height: 44px;
	border: 0;
	border-radius: 22px;
	background: #f2f3f5;
	color: #97929e;
	font-size: 16px; /* >=16 — iOS не зумит поле при фокусе */
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 0 16px;
	text-align: left;
	min-width: 0;
}

.emh__pill input {
	flex: 1 1 auto;
	min-width: 0;
	border: 0;
	background: transparent;
	font-size: 16px;
	color: #23202a;
	outline: none;
	height: 100%;
}

.emh__pill input::placeholder {
	color: #97929e;
}

.emh__pill:focus-within {
	background: #fff;
	box-shadow: 0 0 0 2px #dd1438 inset;
}

/* панель подсказок живого поиска — поверх шапки */
.elsity-suggest {
	z-index: 2100;
}

/* ===== Нижний таб-бар ===== */
.emh-tab {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	/* выше .leftside (3000) — иначе оверлеи шаблона могут накрыть панель */
	z-index: 3100;
	background: #fff;
	box-shadow: 0 -1px 8px rgba(35, 32, 42, .10);
	display: flex;
	/* Нижний отступ через max(): в мета-теге сайта нет viewport-fit=cover,
	   поэтому env(safe-area-inset-bottom) отдаёт 0, и панель прижималась
	   вплотную к краю — на телефоне её съедала системная полоса.
	   Верхний паддинг больше — воздух для бейджа корзины. */
	padding: 10px 4px max(12px, env(safe-area-inset-bottom, 0px));
}

.emh-tab a {
	flex: 1 1 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #97929e;
	text-decoration: none;
	position: relative;
	padding: 3px 0;
}

.emh-tab a.is-active {
	color: #dd1438;
}

.emh-tab__badge {
	position: absolute;
	top: -3px;
	right: calc(50% - 18px);
	min-width: 14px;
	height: 14px;
	border-radius: 7px;
	background: #dd1438;
	color: #fff;
	font-size: 9px;
	font-style: normal;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 3px;
}

/* стрелку «наверх» приподнимаем над таб-баром */
.emh-on a.scroll-to-top,
.emh-on .scroll-top {
	bottom: 44px !important;
}

}