/* =====================================================================
   Адаптивная мобильная шапка (header.php).
   Логика: на широких экранах видна обычная десктопная <header class="header sticky">,
   на узких — она скрывается, а вместо неё показываются:
   .mobile_topbar (верх: лого / звонок / поиск / бургер),
   .mobile_search_overlay (полноэкранный поиск),
   .mobile_more_drawer (меню "Ещё", выезжает справа налево),
   .mobile_catalog_overlay (полноэкранный каталог, несколько уровней),
   .mobile_bottom_nav (нижняя панель: Главная / Каталог / Корзина / Избранное / Меню).

   Брейкпоинт — 980px, как и у остальных мобильных стилей на сайте.
   Вставьте этот файл в свой общий CSS (или подключите отдельным <link>).
   ===================================================================== */

:root{
	--mh-topbar-h: 56px;
	--mh-bottom-h: 60px;
}

/* ---------- по умолчанию (десктоп) — мобильные блоки скрыты ---------- */
.mobile_topbar,
.mobile_search_overlay,
.mobile_more_overlay,
.mobile_more_drawer,
.mobile_phones_overlay,
.mobile_phones_drawer,
.mobile_shops_map_overlay,
.mobile_catalog_overlay,
.mobile_bottom_nav{
	display:none;
}

/* =====================================================================
   МОБИЛЬНЫЙ РЕЖИМ
   ===================================================================== */
@media (max-width: 980px){

	/* прячем десктопную шапку и освобождаем место под фиксированные мобильные панели */
	header.header.sticky{display:none !important}

	body{
		padding-top:var(--mh-topbar-h);
		padding-bottom:calc(var(--mh-bottom-h) + env(safe-area-inset-bottom));
	}

	/* ---------- верхняя строка: лого / звонок / поиск / бургер ---------- */
	.mobile_topbar{
		display:flex;
		align-items:center;
		gap:6px;
		position:fixed;
		top:0;
		left:0;
		right:0;
		height:var(--mh-topbar-h);
		padding:0 10px;
		background:#fff;
		box-shadow:0 1px 6px rgba(0,0,0,.08);
		z-index:1000;
	}
	.mobile_topbar_logo{
		display:flex;
		align-items:center;
		gap:8px;
		margin-right:auto;
		text-decoration:none;
		min-width:0;
	}
	.mobile_topbar_logo img{display:block;height:32px;width:auto;flex:0 0 auto}
	.mobile_topbar_logo_text{min-width:0;overflow:hidden}
	.mobile_topbar_logo_main{
		font-weight:700;
		font-size:14px;
		line-height:1.15;
		color:#001a34;
		white-space:nowrap;
		overflow:hidden;
		text-overflow:ellipsis;
	}
	.mobile_topbar_logo_sub{
		font-size:10px;
		line-height:1.2;
		color:#8b949b;
		white-space:nowrap;
		overflow:hidden;
		text-overflow:ellipsis;
	}
	.mobile_topbar_btn{
		display:flex;
		align-items:center;
		justify-content:center;
		width:40px;
		height:40px;
		border:none;
		background:#f4f5f7;
		color:#001a34;
		border-radius:50%;
		cursor:pointer;
		flex:0 0 auto;
	}
	.mobile_topbar_btn:active{background:#e6e9ec}

	body.mobile_nav_locked{overflow:hidden}

	/* =====================================================================
	   Полноэкранный поиск
	   ===================================================================== */
	.mobile_search_overlay{
		display:block;
		position:fixed;
		inset:0;
		background:#fff;
		z-index:1200;
		padding:10px 12px;
		opacity:0;
		visibility:hidden;
		transform:translateY(-12px);
		transition:opacity .2s ease,transform .2s ease;
	}
	.mobile_search_overlay.is-open{
		opacity:1;
		visibility:visible;
		transform:translateY(0);
	}
	.mobile_search_top{
		display:flex;
		align-items:center;
		margin-bottom:10px;
	}
	.mobile_search_back{
		display:flex;
		align-items:center;
		justify-content:center;
		width:38px;
		height:38px;
		border:none;
		background:#f4f5f7;
		color:#001a34;
		border-radius:50%;
		cursor:pointer;
	}

	/* обёртка десктопного поискового блока — только позиционирование,
	   сама внутренняя разметка/классы input и кнопок не меняются */
	.mobile_search_block{
		position:relative;
		width:100%;
	}
	.mobile_search_block .search_input{
		width:100%;
		box-sizing:border-box;
		border:1px solid #e6e9ec;
		border-radius:10px;
		padding:12px 90px 12px 14px;
		font-size:15px;
		outline:none;
	}
	.mobile_search_block .header-search__voice-btn,
	.mobile_search_block .header-search__search-submit-btn{
		position:absolute;
		top:50%;
		transform:translateY(-50%);
		border:none;
		background:none;
		display:flex;
		align-items:center;
		justify-content:center;
		width:34px;
		height:34px;
		cursor:pointer;
	}
	.mobile_search_block .header-search__voice-btn{right:44px}
	.mobile_search_block .header-search__search-submit-btn{right:6px}
	.mobile_search_block .search-catalog__btn--clear{
		position:absolute;
		right:82px;
		top:50%;
		transform:translateY(-50%);
		border:none;
		background:none;
		cursor:pointer;
	}
	.mobile_search_block .search_five_res{margin-top:8px}

	/* =====================================================================
	   Меню "Ещё" — выезжает справа налево
	   ===================================================================== */
	.mobile_more_overlay{
		display:block;
		position:fixed;
		inset:0;
		background:rgba(0,26,52,.45);
		opacity:0;
		visibility:hidden;
		transition:opacity .25s ease;
		z-index:1100;
	}
	.mobile_more_overlay.is-open{opacity:1;visibility:visible}

	.mobile_more_drawer{
		display:flex;
		flex-direction:column;
		position:fixed;
		top:0;
		bottom:0;
		right:0;
		width:82%;
		max-width:340px;
		background:#fff;
		box-shadow:-8px 0 30px rgba(0,0,0,.15);
		transform:translateX(100%);
		transition:transform .3s ease;
		z-index:1101;
	}
	.mobile_more_drawer.is-open{transform:translateX(0)}

	.mobile_more_head{
		display:flex;
		align-items:center;
		justify-content:space-between;
		padding:16px;
		border-bottom:1px solid #e6e9ec;
		flex:0 0 auto;
		font-weight:700;
		color:#001a34;
	}
	.mobile_more_close{
		display:flex;
		align-items:center;
		justify-content:center;
		width:34px;
		height:34px;
		border:none;
		background:#f4f5f7;
		color:#001a34;
		border-radius:50%;
		cursor:pointer;
	}
	.mobile_more_body{
		flex:1 1 auto;
		overflow-y:auto;
		padding:14px 16px 24px;
	}

	.mobile_more_phone{
		display:flex;
		align-items:center;
		gap:10px;
		width:100%;
		border:none;
		background:none;
		color:#001a34;
		font-weight:700;
		font-size:16px;
		text-decoration:none;
		padding:10px 0;
		cursor:pointer;
		text-align:left;
	}
	.mobile_more_phone span{flex:1 1 auto}
	.mobile_more_phone_chevron{flex:0 0 auto;color:#b7bec4}
	.mobile_more_socials{
		display:flex;
		align-items:center;
		gap:10px;
		padding:4px 0 12px;
	}
	.mobile_more_social_btn{
		display:flex;
		align-items:center;
		justify-content:center;
		width:42px;
		height:42px;
		border-radius:50%;
		box-shadow:0 2px 8px rgba(0,0,0,.12);
		transition:transform .15s ease;
	}
	.mobile_more_social_btn:active{transform:scale(.92)}

	.mobile_more_hours{
		display:flex;
		align-items:flex-start;
		gap:10px;
		color:#5b6670;
		font-size:13px;
		padding:8px 0 14px;
		border-bottom:1px solid #f1f2f4;
		margin-bottom:10px;
	}
	.mobile_more_hours svg{flex:0 0 auto;margin-top:1px}

	.mobile_more_shops{
		display:flex;
		align-items:center;
		gap:10px;
		width:100%;
		border:none;
		background:none;
		color:#001a34;
		text-decoration:none;
		font-size:14px;
		padding:10px 0;
		cursor:pointer;
		text-align:left;
	}

	.mobile_more_item.mobile_more_catalog_link{
		width:100%;
		display:flex;
		align-items:center;
		justify-content:space-between;
		border:1px solid #e6e9ec;
		border-radius:10px;
		background:#f4f5f7;
		color:#001a34;
		font-weight:600;
		font-size:15px;
		padding:12px 14px;
		margin:10px 0 4px;
		cursor:pointer;
	}

	.mobile_more_divider{height:1px;background:#f1f2f4;margin:10px 0}

	.mobile_more_links{list-style:none;margin:0;padding:0}
	.mobile_more_links li{border-bottom:1px solid #f1f2f4}
	.mobile_more_links li a{
		display:block;
		padding:12px 2px;
		color:#001a34;
		text-decoration:none;
		font-size:15px;
	}

	/* =====================================================================
	   Панель "Наши номера" — открывается поверх меню "Ещё" (справа налево)
	   ===================================================================== */
	.mobile_phones_overlay{
		display:block;
		position:fixed;
		inset:0;
		background:rgba(0,26,52,.45);
		opacity:0;
		visibility:hidden;
		transition:opacity .25s ease;
		z-index:1200;
	}
	.mobile_phones_overlay.is-open{opacity:1;visibility:visible}

	.mobile_phones_drawer{
		display:flex;
		flex-direction:column;
		position:fixed;
		top:0;
		bottom:0;
		right:0;
		width:88%;
		max-width:360px;
		background:#fff;
		box-shadow:-8px 0 30px rgba(0,0,0,.15);
		transform:translateX(100%);
		transition:transform .3s ease;
		z-index:1201;
	}
	.mobile_phones_drawer.is-open{transform:translateX(0)}

	.mobile_phones_head{
		display:flex;
		align-items:center;
		padding:14px 16px;
		border-bottom:1px solid #e6e9ec;
		flex:0 0 auto;
	}
	.mobile_phones_back{
		display:flex;
		align-items:center;
		gap:8px;
		border:none;
		background:none;
		color:#001a34;
		font-weight:700;
		font-size:16px;
		cursor:pointer;
		padding:0;
	}

	.mobile_phones_body{flex:1 1 auto;overflow-y:auto;padding:14px 16px 24px}

	.mobile_phones_main{
		display:block;
		border-radius:12px;
		background:linear-gradient(135deg,#001a34,#00335e);
		color:#fff;
		text-decoration:none;
		padding:16px;
		margin-bottom:16px;
	}
	.mobile_phones_main_label{
		font-size:12px;
		text-transform:uppercase;
		letter-spacing:.04em;
		opacity:.75;
		margin-bottom:4px;
	}
	.mobile_phones_main_number{font-size:19px;font-weight:700}

	.mobile_phones_section_title{
		font-size:12px;
		text-transform:uppercase;
		letter-spacing:.04em;
		color:#8b949b;
		margin:0 0 4px;
	}
	.mobile_phones_list{list-style:none;margin:0;padding:0}
	.mobile_phones_list li{border-bottom:1px solid #f1f2f4}
	.mobile_phones_list li a{
		display:flex;
		align-items:center;
		justify-content:space-between;
		gap:10px;
		padding:12px 2px;
		color:#001a34;
		text-decoration:none;
	}
	.mobile_phones_shop{font-size:14px;color:#5b6670}
	.mobile_phones_number{font-size:14px;font-weight:600;white-space:nowrap}

	/* =====================================================================
	   Полноэкранная карта пунктов самовывоза — тоже поверх меню "Ещё"
	   ===================================================================== */
	.mobile_shops_map_overlay{
		display:flex;
		flex-direction:column;
		position:fixed;
		inset:0;
		background:#fff;
		z-index:1200;
		opacity:0;
		visibility:hidden;
		transform:translateY(12px);
		transition:opacity .2s ease,transform .2s ease;
	}
	.mobile_shops_map_overlay.is-open{
		opacity:1;
		visibility:visible;
		transform:translateY(0);
	}
	.mobile_shops_map_head{
		display:flex;
		align-items:center;
		padding:14px 16px;
		border-bottom:1px solid #e6e9ec;
		flex:0 0 auto;
	}
	.mobile_shops_map_back{
		display:flex;
		align-items:center;
		gap:8px;
		border:none;
		background:none;
		color:#001a34;
		font-weight:700;
		font-size:16px;
		cursor:pointer;
		padding:0;
	}
	.mobile_shops_map_body{flex:1 1 auto;position:relative}
	#mobile_shops_map_c{position:absolute;inset:0;width:100%;height:100%}

	.pickup_balloon_phone{margin-top:8px;font-size:13px}
	.pickup_balloon_phone a{color:#0B66E4;text-decoration:none;font-weight:600}

	/* =====================================================================
	   Полноэкранный каталог (несколько уровней)
	   ===================================================================== */
	.mobile_catalog_overlay{
		display:block;
		position:fixed;
		inset:0;
		background:#fff;
		z-index:1150;
		opacity:0;
		visibility:hidden;
		transform:translateY(12px);
		transition:opacity .2s ease,transform .2s ease;
		overflow:hidden;
	}
	.mobile_catalog_overlay.is-open{
		opacity:1;
		visibility:visible;
		transform:translateY(0);
	}

	.catalog_screen{
		display:none;
		position:absolute;
		inset:0;
		overflow-y:auto;
		background:#fff;
	}
	.catalog_screen.is-active{display:block}

	.catalog_screen_head{
		display:flex;
		align-items:center;
		justify-content:space-between;
		padding:16px;
		background:#e9f5e0;
		position:sticky;
		top:0;
		z-index:2;
	}
	.catalog_close_text{
		border:none;
		background:none;
		color:#3a8b1f;
		font-weight:700;
		font-size:15px;
		cursor:pointer;
		padding:0;
	}
	.catalog_close_x{
		border:none;
		background:none;
		color:#3a8b1f;
		display:flex;
		align-items:center;
		justify-content:center;
		width:28px;
		height:28px;
		cursor:pointer;
	}
	.catalog_back_btn{
		display:flex;
		align-items:center;
		gap:6px;
		border:none;
		background:none;
		color:#3a8b1f;
		font-weight:700;
		font-size:15px;
		cursor:pointer;
		padding:0;
	}

	.catalog_screen_body{padding:4px 16px 24px}

	.catalog_row{
		display:flex;
		align-items:center;
		gap:14px;
		width:100%;
		border:none;
		background:none;
		text-align:left;
		padding:16px 0;
		border-bottom:1px solid #f1f2f4;
		color:#001a34;
		font-size:15px;
		text-decoration:none;
		cursor:pointer;
	}
	.catalog_row img{flex:0 0 auto;width:26px;height:26px;object-fit:contain}
	.catalog_row span{flex:1 1 auto}
	.catalog_row_chevron{flex:0 0 auto;color:#b7bec4}

	.catalog_row_seeall{
		color:#3a8b1f;
		font-weight:600;
	}
	.catalog_row_simple{padding-left:2px}

	/* =====================================================================
	   Нижняя панель навигации: Главная / Каталог / Корзина (центр) / Избранное / Меню
	   ===================================================================== */
	.mobile_bottom_nav{
		display:flex;
		align-items:stretch;
		position:fixed;
		left:0;
		right:0;
		bottom:0;
		height:var(--mh-bottom-h);
		padding-bottom:env(safe-area-inset-bottom);
		background:#fff;
		border-top:1px solid #e6e9ec;
		box-shadow:0 -2px 10px rgba(0,0,0,.06);
		z-index:1000;
		overflow:visible;
	}
	.mobile_bottom_nav_item{
		flex:1 1 0;
		display:flex;
		flex-direction:column;
		align-items:center;
		justify-content:center;
		gap:3px;
		border:none;
		background:none;
		color:#8b949b;
		font-size:11px;
		text-decoration:none;
		position:relative;
		cursor:pointer;
		transition:color .15s ease;
	}
	.mobile_bottom_nav_item svg{transition:color .15s,transform .15s}
	.mobile_bottom_nav_item.is-active{color:#e53935}
	.mobile_bottom_nav_item:active svg{transform:scale(.9)}

	/* бейдж количества (Избранное) */
	.mobile_bottom_nav_item .mobile_bottom_nav_badge{
		position:absolute;
		top:-2px;
		right:calc(50% - 20px);
		min-width:16px;
		height:16px;
		padding:0 4px;
		border-radius:8px;
		background:#e53935;
		color:#fff;
		font-size:10px;
		font-weight:600;
		line-height:16px;
		text-align:center;
		box-shadow:0 0 0 2px #fff;
	}

	/* центральный пункт (Корзина) — приподнятый кружок */
	.mobile_bottom_nav_item_cart{
		color:#8b949b;
	}
	.mobile_bottom_nav_cart_circle{
		position:relative;
		display:flex;
		align-items:center;
		justify-content:center;
		width:48px;
		height:48px;
		border-radius:50%;
		background:linear-gradient(135deg,#001a34,#00335e);
		color:#fff;
		box-shadow:0 6px 16px rgba(0,26,52,.35);
		transform:translateY(-14px);
		transition:transform .15s ease,background .2s ease,box-shadow .15s ease;
	}
	.mobile_bottom_nav_item_cart:active .mobile_bottom_nav_cart_circle{
		transform:translateY(-14px) scale(.94);
	}
	.mobile_bottom_nav_item_cart.is-active .mobile_bottom_nav_cart_circle,
	.mobile_bottom_nav_item_cart:hover .mobile_bottom_nav_cart_circle{
		background:linear-gradient(135deg,#e53935,#c62828);
		box-shadow:0 6px 18px rgba(229,57,53,.4);
	}
	.mobile_bottom_nav_cart_label{margin-top:-10px}
	.mobile_bottom_nav_cart_circle .mobile_bottom_nav_badge{
		position:absolute;
		top:-4px;
		right:-4px;
		min-width:18px;
		height:18px;
		padding:0 4px;
		border-radius:9px;
		background:#f4b73f;
		color:#3a2c00;
		font-size:11px;
		font-weight:700;
		line-height:18px;
		text-align:center;
		box-shadow:0 0 0 2px #fff;
	}
}

/* совсем маленькие экраны — чуть компактнее отступы */
@media (max-width: 380px){
	.mobile_topbar{padding:0 6px;gap:4px}
	.mobile_bottom_nav_item{font-size:10px}
	.mobile_topbar_logo_sub{display:none}
}

/* =====================================================================
   Главная страница: раздельные слайдеры для десктопа и мобильной версии
   (используют разные изображения — slide_img / slide_img_mobile).
   Тот же брейкпоинт 980px, что и у остальной адаптивной шапки.
   ===================================================================== */
.mobile-only-slider{display:none}
@media (max-width: 980px){
	.desktop-only-slider{display:none}
	.mobile-only-slider{display:block}
}