/*
 * Адаптивная mobile/tablet шапка сайта.
 * Вся новая структура работает ТОЛЬКО при ширине экрана <= 1100px.
 * При ширине > 1100px десктопный header (#myHeader) остаётся как есть.
 */

:root{
	--mh-z-header: 500;
	--mh-z-bottomnav: 500;
	--mh-z-overlay: 600;
	--mh-z-drawer: 700;
	--mh-z-catalog: 750;
	--mh-z-search: 800;
	--mh-bottomnav-height: 62px;
	--mh-anim: 280ms;
}

/*
 * Голосовой поиск и история поиска — общие для десктопной и мобильной
 * шапки, поэтому стили ниже НЕ ограничены @media (используются в обеих
 * версиях .header-search).
 */
.header-search__voice-btn{
	/* Абсолютное позиционирование, как у соседней .search-catalog__btn--clear —
	   так кнопка не сдвигает существующую кнопку отправки поиска ни на
	   десктопе, ни на мобильном (.header-search уже position:relative). */
	position:absolute;
	right:84px;
	top:50%;
	transform:translateY(-50%);
	display:flex;
	align-items:center;
	justify-content:center;
	width:34px;
	height:34px;
	border:0;
	background:transparent;
	color:#71787d;
	cursor:pointer;
	padding:0;
	z-index:2;
}
.header-search__voice-btn:hover{ color:#003663; }
.header-search__voice-btn.is-listening{
	color:#e63946;
	animation: mhMicPulse 1.2s ease-in-out infinite;
}
@keyframes mhMicPulse{
	0%,100%{ opacity:1; }
	50%{ opacity:.4; }
}

.search-history{
	border-bottom:1px solid #eee;
	padding:10px 14px;
}
.search-history__head{
	display:flex;
	align-items:center;
	justify-content:space-between;
	font-size:12.5px;
	color:#8a8f94;
	margin-bottom:8px;
}
.search-history__clear{
	border:0;
	background:transparent;
	color:#0a63ff;
	font-size:12.5px;
	cursor:pointer;
	padding:0;
}
.search-history__list{
	list-style:none;
	margin:0;
	padding:0;
	display:flex;
	flex-wrap:wrap;
	gap:8px;
}
.search-history__item{
	display:flex;
	align-items:center;
	background:#f4f5f6;
	border-radius:16px;
	padding-right:4px;
}
.search-history__term{
	display:flex;
	align-items:center;
	gap:6px;
	border:0;
	background:transparent;
	padding:7px 4px 7px 12px;
	font-size:13px;
	color:#1a1a1a;
	cursor:pointer;
	max-width:220px;
}
.search-history__term span{
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
}
.search-history__term svg{ color:#8a8f94;flex:0 0 auto; }
.search-history__remove{
	display:flex;
	align-items:center;
	justify-content:center;
	width:22px;
	height:22px;
	border:0;
	background:transparent;
	color:#8a8f94;
	border-radius:50%;
	cursor:pointer;
	flex:0 0 auto;
	padding:0;
}
.search-history__remove:hover{ background:#e2e2e2; color:#1a1a1a; }

.mobile-header-root{ display:none; }

body.mobile-scroll-lock{
	position: fixed;
	left: 0;
	right: 0;
	width: 100%;
	overflow: hidden;
}

@media (max-width: 1100px){

	#myHeader{ display:none !important; }

	.mobile-header-root{ display:block; }

	body{
		padding-bottom: calc(var(--mh-bottomnav-height) + env(safe-area-inset-bottom)) !important;
	}

	/* ============ Верхняя мобильная шапка ============ */
	.mobile-header{
		display:flex;
		align-items:center;
		justify-content:space-between;
		gap:6px;
		position:sticky;
		top:0;
		left:0;
		right:0;
		z-index: var(--mh-z-header);
		background:#fff;
		padding:6px 8px;
		box-shadow: 0 1px 6px rgba(0,0,0,.08);
	}

	.mobile-header__burger,
	.mobile-header__icon-btn{
		display:inline-flex;
		align-items:center;
		justify-content:center;
		width:44px;
		height:44px;
		border:0;
		background:transparent;
		padding:0;
		color:#1a1a1a;
		border-radius:10px;
		flex:0 0 auto;
		-webkit-tap-highlight-color: transparent;
	}
	.mobile-header__burger:active,
	.mobile-header__icon-btn:active{ background:#f2f2f2; }

	.mobile-header__logo{
		display:flex;
		align-items:center;
		justify-content:flex-start;
		flex:0 0 auto;
		min-width:0;
	}
	.mobile-header__logo img{ max-width:130px; width:auto; height:28px; }

	.mobile-header__actions{
		display:flex;
		align-items:center;
		gap:0;
		flex:0 0 auto;
		margin-left:auto;
	}

	/* ============ Затемнение под боковым меню ============ */
	.mobile-drawer-overlay{
		position:fixed;
		inset:0;
		background:rgba(15,15,15,.45);
		z-index: var(--mh-z-overlay);
		opacity:0;
		visibility:hidden;
		transition: opacity var(--mh-anim) ease, visibility var(--mh-anim) ease;
	}
	.mobile-drawer-overlay.is-visible{
		opacity:1;
		visibility:visible;
	}

	/* ============ Боковое меню (Burger) ============ */
	.mobile-drawer{
		position:fixed;
		top:0;
		right:0;
		width:min(90vw,420px);
		height:100vh;
		height:100dvh;
		background:#fff;
		z-index: var(--mh-z-drawer);
		transform:translateX(100%);
		transition: transform var(--mh-anim) ease;
		display:flex;
		flex-direction:column;
		box-shadow: -8px 0 24px rgba(0,0,0,.18);
	}
	.mobile-drawer.is-open{ transform:translateX(0); }

	.mobile-drawer__head{
		display:flex;
		align-items:center;
		justify-content:space-between;
		padding:12px 14px;
		border-bottom:1px solid #eee;
		flex:0 0 auto;
	}
	.mobile-drawer__head b{ font-size:16px; }
	.mobile-drawer__close{
		width:40px;height:40px;border:0;background:transparent;border-radius:10px;
		display:flex;align-items:center;justify-content:center;color:#1a1a1a;
	}

	.mobile-drawer__body{
		flex:1 1 auto;
		overflow-y:auto;
		-webkit-overflow-scrolling:touch;
	}

	.mobile-drawer__contacts{
		padding:16px 16px 18px;
		border-bottom:8px solid #f5f5f5;
	}
	.mobile-drawer__phone{
		display:block;
		font-size:21px;
		font-weight:700;
		color:#1a1a1a;
		text-decoration:none;
		margin-bottom:6px;
	}
	.mobile-drawer__hours{
		display:block;
		font-size:12.5px;
		color:#8a8f94;
		margin-bottom:14px;
	}
	.mobile-drawer__messengers{
		display:flex;
		gap:10px;
	}
	.mobile-drawer__messenger{
		display:flex;
		align-items:center;
		justify-content:center;
		width:44px;height:44px;
		border-radius:50%;
		background:#f4f5f6;
	}
	.mobile-drawer__messenger img{ width:24px;height:24px;object-fit:contain; }

	.mobile-drawer__catalog-trigger{
		width:100%;
		display:flex;
		align-items:center;
		justify-content:space-between;
		gap:10px;
		padding:16px;
		border:0;
		border-bottom:8px solid #f5f5f5;
		background:#fff;
		font-size:16px;
		font-weight:700;
		text-align:left;
		color:#1a1a1a;
	}
	.mobile-drawer__catalog-trigger svg{ flex:0 0 auto; color:#8a8f94; }

	.mobile-drawer__list{ list-style:none; margin:0; padding:6px 0; }
	.mobile-drawer__list a{
		display:block;
		padding:13px 16px;
		color:#1a1a1a;
		text-decoration:none;
		font-size:15px;
		border-bottom:1px solid #f2f2f2;
	}

	/* ============ Полноэкранный поиск ============ */
	.mobile-search{
		position:fixed;
		inset:0;
		width:100%;
		height:100vh;
		height:100dvh;
		background:#fff;
		z-index: var(--mh-z-search);
		display:flex;
		flex-direction:column;
		opacity:0;
		visibility:hidden;
		transform:translateY(10px);
		transition: opacity var(--mh-anim) ease, transform var(--mh-anim) ease, visibility var(--mh-anim) ease;
	}
	.mobile-search.is-open{
		opacity:1;
		visibility:visible;
		transform:translateY(0);
	}

	.mobile-search__topbar{
		display:flex;
		align-items:center;
		gap:6px;
		padding:8px;
		border-bottom:1px solid #eee;
		flex:0 0 auto;
	}
	.mobile-search__back{
		width:40px;height:40px;flex:0 0 auto;border:0;background:transparent;border-radius:10px;
		display:flex;align-items:center;justify-content:center;color:#1a1a1a;
	}

	.mobile-search__field{
		flex:1 1 auto;
		display:flex;
		flex-direction:column;
		min-width:0;
		min-height:0;
	}
	.mobile-search__input-row{
		position:relative;
		display:flex;
		align-items:center;
	}
	.mobile-search__input-row .search_input{
		width:100%;
		height:44px;
		border-radius:22px;
		border:1px solid #e2e2e2;
		padding:0 112px 0 16px;
		font-size:15px;
		box-sizing:border-box;
		background:#f7f7f8;
	}
	.mobile-search__input-row .search-catalog__btn--clear{
		position:absolute;
		right:78px;
		top:50%;
		transform:translateY(-50%);
		border:0;
		background:transparent;
		width:28px;height:28px;
	}
	.mobile-search__input-row .header-search__voice-btn{
		position:absolute;
		right:42px;
		top:50%;
		transform:translateY(-50%);
		width:30px !important;
		height:30px !important;
		padding:0 !important;
	}
	.mobile-search__input-row .header-search__search-submit-btn{
		position:absolute;
		right:6px;
		top:50%;
		transform:translateY(-50%);
		border:0;
		background:transparent;
		/* style.css задаёт height/padding/display с !important для десктопа —
		   перебиваем их тем же приоритетом, иначе кнопка в мобильном поиске
		   получит чужие desktop-размеры */
		width:32px !important;
		height:32px !important;
		padding:0 !important;
		display:flex !important;
		align-items:center;
		justify-content:center;
		color:#1a1a1a;
	}
	.mobile-search .search_five_res{
		flex:1 1 auto;
		overflow-y:auto;
		-webkit-overflow-scrolling:touch;
		padding-top:4px;
	}

	/* ============ Полноэкранный каталог ============ */
	.mobile-catalog{
		position:fixed;
		inset:0;
		width:100%;
		height:100vh;
		height:100dvh;
		background:#fff;
		z-index: var(--mh-z-catalog);
		display:flex;
		flex-direction:column;
		transform:translateX(100%);
		transition: transform var(--mh-anim) ease;
	}
	.mobile-catalog.is-open{ transform:translateX(0); }

	.mobile-catalog__topbar{
		display:flex;
		align-items:center;
		gap:10px;
		padding:10px 8px;
		border-bottom:1px solid #eee;
		flex:0 0 auto;
	}
	.mobile-catalog__back{
		width:40px;height:40px;border:0;background:transparent;border-radius:10px;
		display:flex;align-items:center;justify-content:center;flex:0 0 auto;color:#1a1a1a;
	}
	.mobile-catalog__title{
		font-size:17px;
		font-weight:700;
		overflow:hidden;
		text-overflow:ellipsis;
		white-space:nowrap;
		color:#1a1a1a;
	}

	.mobile-catalog__list{
		flex:1 1 auto;
		overflow-y:auto;
		-webkit-overflow-scrolling:touch;
		list-style:none;
		margin:0;
		padding:6px 0;
	}
	.mobile-catalog__item{ border-bottom:1px solid #f2f2f2; }
	.mobile-catalog__item--all .mobile-catalog__link{ color:#0a63ff; font-weight:600; }

	.mobile-catalog__link{
		width:100%;
		display:flex;
		align-items:center;
		justify-content:space-between;
		gap:10px;
		padding:14px 16px;
		border:0;
		background:transparent;
		text-align:left;
		font-size:15px;
		color:#1a1a1a;
		text-decoration:none;
		box-sizing:border-box;
	}
	.mobile-catalog__link span{ overflow-wrap:anywhere; }
	.mobile-catalog__link svg{ flex:0 0 auto; color:#8a8f94; }

	.mobile-catalog__list--anim-fwd{ animation: mhSlideInFwd var(--mh-anim) ease; }
	.mobile-catalog__list--anim-back{ animation: mhSlideInBack var(--mh-anim) ease; }

	/* ============ Нижнее меню ============ */
	.mobile-bottom-nav{
		display:flex;
		align-items:stretch;
		justify-content:space-between;
		position:fixed;
		left:0;right:0;bottom:0;
		height:var(--mh-bottomnav-height);
		padding-bottom: env(safe-area-inset-bottom);
		background:#fff;
		border-top:1px solid #eee;
		z-index: var(--mh-z-bottomnav);
	}
	.mobile-bottom-nav__item{
		flex:1 1 0;
		display:flex;
		flex-direction:column;
		align-items:center;
		justify-content:center;
		gap:3px;
		color:#8a8f94;
		text-decoration:none;
		border:0;
		background:transparent;
		font-size:11px;
		min-width:44px;
		-webkit-tap-highlight-color: transparent;
	}
	.mobile-bottom-nav__item.is-active{ color:#0a63ff; }
	.mobile-bottom-nav__item.is-active .mobile-bottom-nav__icon-wrap{ color:#0a63ff; }

	.mobile-bottom-nav__icon-wrap{
		position:relative;
		display:flex;
		align-items:center;
		justify-content:center;
		color:#4a4f54;
	}

	.mobile-bottom-nav__item--cart{ position:relative; top:-10px; }
	.mobile-bottom-nav__item--cart .mobile-bottom-nav__icon-wrap{
		width:48px;height:48px;
		border-radius:50%;
		background:#0a63ff;
		color:#fff;
		box-shadow:0 4px 10px rgba(10,99,255,.35);
	}
	.mobile-bottom-nav__item--cart.is-active .mobile-bottom-nav__icon-wrap{ background:#003663; color:#fff; }

	.mobile-bottom-nav__badge{
		position:absolute;
		top:-4px;
		right:-8px;
		min-width:16px;
		height:16px;
		padding:0 4px;
		border-radius:8px;
		background:#e63946;
		color:#fff;
		font-size:10px;
		line-height:16px;
		text-align:center;
		box-sizing:border-box;
	}
}

@keyframes mhSlideInFwd{
	from{ opacity:0; transform:translateX(28px); }
	to{ opacity:1; transform:translateX(0); }
}
@keyframes mhSlideInBack{
	from{ opacity:0; transform:translateX(-28px); }
	to{ opacity:1; transform:translateX(0); }
}

@media (prefers-reduced-motion: reduce){
	.mobile-drawer,
	.mobile-search,
	.mobile-catalog,
	.mobile-drawer-overlay{
		transition-duration: 1ms !important;
	}
	.mobile-catalog__list--anim-fwd,
	.mobile-catalog__list--anim-back{
		animation-duration: 1ms !important;
	}
}