/* =====================================================================
   MOBILE / TABLET ШАПКА (<=1100px)
   Все новые элементы используют namespace .mobile-* / .mobile-header__* /
   .mobile-drawer__* / .mobile-search__* / .mobile-catalog__* /
   .mobile-bottom-nav__*, чтобы не конфликтовать с существующими классами
   desktop-шапки (header_top/header_bottom/cd-dropdown и т.д.).

   Z-INDEX СИСТЕМА (единая, без хаотичных значений):
     900  — mobile-header (верхняя мобильная шапка)
     900  — mobile-bottom-nav (нижняя навигация)
     950  — overlay затемнения (общий для drawer)
     960  — mobile-drawer (боковое меню burger/"Ещё")
     970  — mobile-catalog (полноэкранный каталог)
     980  — mobile-search (полноэкранный поиск, самый верхний слой)
   ===================================================================== */

:root{
	--mh-z-bar: 900;
	--mh-z-overlay: 950;
	--mh-z-drawer: 960;
	--mh-z-catalog: 970;
	--mh-z-search: 980;
	--mh-bar-height: 56px;
	--mh-bottom-height: 64px;
	--mh-accent: #3caa3c;
}

/* По умолчанию (desktop, >1100px) новые mobile-элементы полностью скрыты
   и никак не влияют на верстку/скролл десктопной версии. */
.mobile-header,
.mobile-drawer__overlay,
.mobile-drawer,
.mobile-search,
.mobile-catalog,
.mobile-bottom-nav{
	display: none;
}

@media (max-width: 1100px){

	/* Desktop-шапка целиком (не только её внутренние блоки) скрывается на
	   мобильных/планшетных экранах — вместо неё показывается новая
	   структура. Важно скрыть именно #myHeader целиком: в style.css есть
	   старые правила @media (max-width:850px) для класса .header
	   (position, высота, display:flex и т.д.), написанные ещё под старую
	   PHP-ветку Mobile_Detect — раз desktop-шапка теперь рендерится всегда,
	   без этого она "просвечивала" бы поверх новой мобильной шапки, т.к.
	   её z-index (99999) выше, чем у всех новых mobile-слоёв. */
	header#myHeader{
		display: none !important;
	}
	.header_top,
	.header_bottom{
		display: none !important;
	}
	/* Старое правило @media(max-width:850px) сдвигало breadcrumbs на 70px
	   вниз, компенсируя fixed-шапку старой мобильной вёрстки. Новая
	   .mobile-header — sticky, а не fixed, и уже учтена в потоке документа,
	   поэтому эта компенсация больше не нужна. */
	#breadcrumbs{
		margin-top: 0 !important;
	}

	html, body{
		overflow-x: hidden;
	}

	/* Нижний отступ, чтобы контент страницы не уходил под фиксированную
	   нижнюю навигацию. */
	body{
		padding-bottom: calc(var(--mh-bottom-height) + env(safe-area-inset-bottom));
	}

	/* Плавающие виджеты (WhatsApp-баллон, рулетка) поднимаем над нижней
	   навигацией, чтобы они не перекрывались. */
	#fab-wrap,
	.roulette-fab{
		bottom: calc(var(--mh-bottom-height) + env(safe-area-inset-bottom) + 12px) !important;
	}

	/* ================= ВЕРХНЯЯ МОБИЛЬНАЯ ШАПКА ================= */
	.mobile-header{
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 10px;
		position: sticky;
		top: 0;
		left: 0;
		right: 0;
		height: var(--mh-bar-height);
		padding: 0 12px;
		background: #fff;
		z-index: var(--mh-z-bar);
		box-shadow: 0 2px 6px rgba(0,0,0,.08);
	}
	.mobile-header__burger,
	.mobile-header__icon-btn{
		display: flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		flex-shrink: 0;
		background: none;
		border: none;
		padding: 0;
		color: #1a1a1a;
		cursor: pointer;
		border-radius: 10px;
	}
	.mobile-header__burger:active,
	.mobile-header__icon-btn:active{
		background: #f2f2f2;
	}
	.mobile-header__logo{
		display: flex;
		align-items: center;
		justify-content: center;
		flex: 1;
		min-width: 0;
	}
	.mobile-header__logo img{
		height: 28px;
		width: auto;
		max-width: 140px;
		object-fit: contain;
	}
	.mobile-header__actions{
		display: flex;
		align-items: center;
		gap: 2px;
		flex-shrink: 0;
	}

	/* ================= BURGER / "ЕЩЁ" DRAWER ================= */
	.mobile-drawer__overlay{
		position: fixed;
		inset: 0;
		background: rgba(15,17,15,.5);
		z-index: var(--mh-z-overlay);
		opacity: 0;
		transition: opacity .3s ease;
	}
	.mobile-drawer__overlay:not([hidden]){
		display: block;
	}
	.mobile-drawer__overlay.is-visible{
		opacity: 1;
	}
	.mobile-drawer{
		display: flex;
		flex-direction: column;
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		width: min(90vw, 420px);
		height: 100dvh;
		background: #fff;
		z-index: var(--mh-z-drawer);
		transform: translateX(100%);
		transition: transform .3s cubic-bezier(.22,1,.36,1);
		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: 16px 18px;
		border-bottom: 1px solid #eee;
		flex-shrink: 0;
	}
	.mobile-drawer__title{
		font-size: 16px;
		font-weight: 700;
	}
	.mobile-drawer__close{
		display: flex;
		align-items: center;
		justify-content: center;
		width: 40px;
		height: 40px;
		background: none;
		border: none;
		color: #333;
		cursor: pointer;
	}
	.mobile-drawer__body{
		flex: 1;
		overflow-y: auto;
		padding: 16px 18px 24px;
	}
	.mobile-drawer__contacts{
		padding-bottom: 16px;
		margin-bottom: 12px;
		border-bottom: 1px solid #eee;
	}
	.mobile-drawer__phone{
		display: block;
		font-size: 19px;
		font-weight: 700;
		color: #1a1a1a;
		text-decoration: none;
		margin-bottom: 12px;
	}
	.mobile-drawer__messengers{
		display: flex;
		gap: 12px;
	}
	.mobile-drawer__messenger{
		display: flex;
		width: 44px;
		height: 44px;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
		background: #f5f6f5;
	}
	.mobile-drawer__messenger img{
		display: block;
	}
	.mobile-drawer__catalog-btn{
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		padding: 14px 4px;
		background: none;
		border: none;
		border-bottom: 1px solid #eee;
		margin-bottom: 8px;
		font-size: 17px;
		font-weight: 700;
		color: #1a1a1a;
		cursor: pointer;
		min-height: 44px;
	}
	.mobile-drawer__catalog-btn svg{
		color: var(--mh-accent);
		flex-shrink: 0;
	}
	.mobile-drawer__links{
		display: flex;
		flex-direction: column;
	}
	.mobile-drawer__links a{
		display: flex;
		align-items: center;
		min-height: 44px;
		padding: 10px 4px;
		font-size: 15px;
		color: #333;
		text-decoration: none;
		border-bottom: 1px solid #f4f4f4;
	}
	.mobile-drawer__links a:active{
		color: var(--mh-accent);
	}

	/* ================= ПОЛНОЭКРАННЫЙ ПОИСК ================= */
	.mobile-search{
		position: fixed;
		inset: 0;
		width: 100%;
		height: 100dvh;
		background: #fff;
		z-index: var(--mh-z-search);
		display: flex;
		flex-direction: column;
		transform: translateY(8px);
		opacity: 0;
		visibility: hidden;
		transition: opacity .25s ease, transform .25s ease, visibility .25s;
	}
	.mobile-search.is-open{
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
	}
	.mobile-search__header{
		display: flex;
		align-items: center;
		gap: 8px;
		padding: 10px 12px;
		border-bottom: 1px solid #eee;
		flex-shrink: 0;
	}
	.mobile-search__back{
		display: flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		flex-shrink: 0;
		background: none;
		border: none;
		color: #1a1a1a;
		cursor: pointer;
	}
	.mobile-search__field{
		flex: 1;
		display: flex;
		align-items: center;
		background: #f2f3f2;
		border-radius: 10px;
		padding: 0 6px 0 14px;
		height: 44px;
	}
	.mobile-search__input{
		flex: 1;
		min-width: 0;
		border: none;
		background: none;
		outline: none;
		font-size: 15px;
		height: 100%;
	}
	.mobile-search__submit{
		display: flex;
		align-items: center;
		justify-content: center;
		width: 38px;
		height: 38px;
		flex-shrink: 0;
		background: none;
		border: none;
		color: #666;
		cursor: pointer;
	}
	.mobile-search__results{
		flex: 1;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		padding: 8px 12px 24px;
	}

	/* ================= ПОЛНОЭКРАННЫЙ КАТАЛОГ ================= */
	.mobile-catalog{
		display: block;
		position: fixed;
		inset: 0;
		width: 100%;
		height: 100dvh;
		background: #fff;
		z-index: var(--mh-z-catalog);
		overflow: hidden;
		opacity: 0;
		visibility: hidden;
		transition: opacity .25s ease, visibility .25s;
	}
	.mobile-catalog.is-open{
		opacity: 1;
		visibility: visible;
	}
	.mobile-catalog__levels{
		position: relative;
		width: 100%;
		height: 100%;
	}
	.mobile-catalog__level{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		background: #fff;
		transform: translateX(100%);
		transition: transform .3s cubic-bezier(.22,1,.36,1);
	}
	.mobile-catalog__level.is-current{
		transform: translateX(0);
	}
	.mobile-catalog__level.is-previous{
		transform: translateX(-100%);
	}
	.mobile-catalog__level-head{
		display: flex;
		align-items: center;
		gap: 8px;
		padding: 10px 8px;
		border-bottom: 1px solid #eee;
		flex-shrink: 0;
	}
	.mobile-catalog__back{
		display: flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		flex-shrink: 0;
		background: none;
		border: none;
		color: #1a1a1a;
		cursor: pointer;
	}
	.mobile-catalog__level-title{
		font-size: 16px;
		font-weight: 700;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.mobile-catalog__items{
		flex: 1;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}
	.mobile-catalog__item{
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 10px;
		width: 100%;
		min-height: 52px;
		padding: 12px 16px;
		background: none;
		border: none;
		border-bottom: 1px solid #f4f4f4;
		text-align: left;
		text-decoration: none;
		color: #1a1a1a;
		font-size: 15px;
		cursor: pointer;
	}
	.mobile-catalog__item span{
		overflow-wrap: anywhere;
	}
	.mobile-catalog__item svg{
		flex-shrink: 0;
		color: #aaa;
	}
	.mobile-catalog__item--all{
		font-weight: 600;
		color: var(--mh-accent);
	}

	/* ================= НИЖНЯЯ НАВИГАЦИЯ ================= */
	.mobile-bottom-nav{
		display: flex;
		align-items: stretch;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		height: var(--mh-bottom-height);
		padding-bottom: env(safe-area-inset-bottom);
		background: #fff;
		border-top: 1px solid #eee;
		z-index: var(--mh-z-bar);
		box-shadow: 0 -2px 10px rgba(0,0,0,.06);
	}
	.mobile-bottom-nav__item{
		position: relative;
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 3px;
		min-width: 44px;
		background: none;
		border: none;
		color: #7a7a7a;
		text-decoration: none;
		font-size: 11px;
		cursor: pointer;
	}
	.mobile-bottom-nav__item svg{
		display: block;
	}
	.mobile-bottom-nav__item.is-active{
		color: var(--mh-accent);
	}
	.mobile-bottom-nav__item--cart{
		color: #1a1a1a;
	}
	.mobile-bottom-nav__item--cart.is-active{
		color: var(--mh-accent);
	}
	.mobile-bottom-nav__badge{
		position: absolute;
		top: 2px;
		right: calc(50% - 22px);
		min-width: 16px;
		height: 16px;
		padding: 0 4px;
		border-radius: 8px;
		background: #e33;
		color: #fff;
		font-size: 10px;
		line-height: 16px;
		text-align: center;
		font-weight: 700;
	}
	.mobile-bottom-nav__badge:empty,
	.mobile-bottom-nav__badge[data-zero]{
		display: none;
	}

	/* Блокировка скролла страницы при открытом overlay-слое. */
	body.mobile-scroll-locked{
		overflow: hidden;
		height: 100%;
	}
}

/* Пониженная чувствительность к движению — минимизируем анимации. */
@media (prefers-reduced-motion: reduce){
	.mobile-drawer,
	.mobile-drawer__overlay,
	.mobile-search,
	.mobile-catalog,
	.mobile-catalog__level{
		transition-duration: .01ms !important;
	}
}