/* Мобильная шапка ymno.by, 2026-10-01.
   Большая шапка (#header) и полоса "Меню" (.main_menu) на телефоне скрыты, разметка осталась:
   чтобы вернуть, достаточно убрать первые два правила.
   Компактная шапка (#header_mob) видна сразу и имеет фиксированную высоту 50px,
   поэтому меню закрепляется ровно под ней, без щели, через которую прокручивалась страница. */
@media only screen and (max-width: 768px) {
	#header { display: none !important; }
	#main > .main_menu { display: none !important; }
	body { padding-top: 50px; }

	#header_mob {
		display: block !important; position: fixed; top: 0; left: 0; right: 0; width: 100%;
		height: 50px; box-sizing: border-box; padding: 5px 0; background: #fff; z-index: 999;
		box-shadow: 0 2px 10px rgba(0, 0, 0, .22);
	}
	#header_mob .wrapper { height: 40px; }

	/* раскрытое меню: от низа шапки до низа экрана, листается само, страница под ним стоит */
	#header_mob .moduletable_menu ul.menu {
		position: fixed; top: 50px !important; left: 0; right: 0; bottom: 0;
		overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
		padding: 10px 8px 28px !important; box-sizing: border-box;
	}
	body:has(#header_mob ul.menu.expand) { overflow: hidden; }

	/* калькулятор первым пунктом меню */
	#header_mob .moduletable_menu ul.menu > li.hm-contacts {
		width: 100% !important; display: flex; flex-direction: column; align-items: stretch; gap: 10px;
		margin: 0 0 10px !important; padding: 2px 0 14px; background: none !important;
		overflow: visible;
	}
	#header_mob .hm-contacts a.hm-calc {
		display: flex !important; align-items: center; justify-content: center; gap: 10px;
		background: #fff !important; color: #2f2f6f !important; border: 2px solid #ffd21e !important;
		border-radius: 10px !important; padding: 14px 12px !important; margin: 0 !important;
		font: 800 18px/1.2 'PT Sans', Arial, sans-serif !important; text-shadow: none !important;
		box-shadow: 0 6px 18px rgba(20, 20, 70, .28) !important;
	}
	#header_mob .hm-contacts a.hm-calc svg { width: 24px; height: 24px; flex: none; }
	#header_mob .hm-contacts a.hm-calc small {
		display: block; font: 600 13px/1.2 'PT Sans', Arial, sans-serif; color: #5c6bc0; margin-top: 2px;
	}
	/* мессенджеры последним пунктом меню */
	#header_mob .moduletable_menu ul.menu > li.hm-soc-li {
		width: 100% !important; margin: 10px 0 0 !important; padding: 16px 0 4px; background: none !important;
		border-top: 1px solid rgba(255, 255, 255, .28); overflow: visible;
	}
	#header_mob .hm-soc-li .hm-soc { display: flex; justify-content: center; gap: 18px; }
	#header_mob .hm-soc-li .hm-soc a {
		flex: 0 0 auto; width: auto !important; display: block !important; padding: 0 !important; margin: 0 !important;
		border: 0 !important; background: none !important; box-shadow: none !important; line-height: 0;
	}
	#header_mob .hm-soc-li .hm-soc img { width: 40px; height: 40px; display: block; }
}

/* единый отступ от шапки до хлебных крошек на телефоне: текст крошек на 16px ниже шапки */
@media only screen and (max-width: 768px) {
	.main_content { padding-top: 12px !important; }
	.ymno-service-breadcrumb { margin-top: 3px !important; }
	.aih { margin-top: -15px; }
	.aih .aih-hero { padding-top: 0 !important; }
	.aih .aih-crumbs { padding-top: 0 !important; }
	.kpg .wrap:has(.breadcrumb_last), .jrn .wrap:has(.breadcrumb_last) { padding-top: 18px !important; }
	.jart .wrap:has(.breadcrumb_last) { padding-top: 10px !important; }
	.pb-wrap { padding-top: 17px !important; }
}

/* Дизайн меню: вариант C "Карточки на индиго", 2026-10-01 */
@media only screen and (max-width: 768px) {
	#header_mob .moduletable_menu ul.menu > li:not(.hm-contacts):not(.hm-soc-li) { margin: 0 !important; position: relative; }
	#header_mob .moduletable_menu ul.menu > li > a { border-radius: 0 !important; box-shadow: none !important; text-shadow: none !important; text-align: left !important; font: 700 17px/1.3 'PT Sans', Arial, sans-serif !important; padding: 15px 18px !important; border: 0 !important; }
	#header_mob .moduletable_menu ul.sub-menu li a { text-shadow: none !important; box-shadow: none !important; border-radius: 0 !important; }
	#header_mob .moduletable_menu ul li .toggle-sub { height: 52px; font-size: 26px; }
	#header_mob .mob_icon { box-shadow: none !important; border: 0 !important; }
}

/* Вариант C. Карточки на индиго: фирменный фон сохраняем, пункты белые плоские, услуги сеткой из плиток */
@media only screen and (max-width: 768px) {
	#header_mob .back_form { background: #ffd21e !important; color: #191919 !important; border-radius: 6px !important; box-shadow: none !important; font-weight: 700 !important; }
	#header_mob .mob_icon { background: #eef0fb !important; border-radius: 8px !important; }
	#header_mob .mob_icon div { background-color: #4e5891 !important; }
	#header_mob .moduletable_menu ul.menu { background: #5c6bc0 !important; padding: 12px 12px 28px !important; }
	#header_mob .moduletable_menu ul.menu > li:not(.hm-contacts):not(.hm-soc-li) { margin: 0 0 8px !important; }
	#header_mob .moduletable_menu ul.menu > li.hm-contacts { border-bottom: 0 !important; padding-bottom: 6px !important; }
	#header_mob .hm-contacts a.hm-calc { background: #ffd21e !important; border-color: #ffd21e !important; color: #191919 !important; }
	#header_mob .hm-contacts a.hm-calc small { color: #2f2f6f !important; }
	#header_mob .moduletable_menu ul.menu > li > a { background: #fff !important; color: #2f2f6f !important; border-radius: 10px !important; }
	#header_mob .moduletable_menu ul.menu > li.current-menu-item > a, #header_mob .moduletable_menu ul.menu > li.current-menu-ancestor > a { box-shadow: inset 4px 0 0 #ffd21e !important; }
	#header_mob .moduletable_menu ul li .toggle-sub { color: #5c6bc0; }
	#header_mob .moduletable_menu ul.sub-menu { background: transparent !important; padding: 8px 0 0 !important; }
	/* jQuery при раскрытии ставит display: block, а при повторном раскрытии display: grid: сетка нужна в обоих случаях */
	#header_mob .moduletable_menu ul.sub-menu[style*="block"], #header_mob .moduletable_menu ul.sub-menu[style*="grid"] { display: grid !important; grid-template-columns: 1fr 1fr; gap: 6px; }
	#header_mob .moduletable_menu ul.sub-menu li { margin: 0 !important; width: auto !important; }
	#header_mob .moduletable_menu ul.sub-menu li a { background: #eef0fb !important; color: #2f2f6f !important; font: 700 14px/1.25 'PT Sans', Arial, sans-serif !important; padding: 11px 10px !important; border: 0 !important; border-radius: 8px !important; height: 100%; box-sizing: border-box; }
	#header_mob .moduletable_menu ul.sub-menu li.current-menu-item a { background: #ffd21e !important; }
	#header_mob .moduletable_menu ul.menu > li.hm-soc-li { border-top: 1px solid rgba(255,255,255,.3) !important; }
	#header_mob .moduletable_menu ul.menu > li.hm-contacts > a.hm-calc { background: #ffd21e !important; border: 2px solid #ffd21e !important; color: #191919 !important; border-radius: 10px !important; padding: 14px 12px !important; justify-content: center !important; text-align: left !important; box-shadow: 0 6px 16px rgba(20,20,70,.18) !important; font: 800 18px/1.2 'PT Sans', Arial, sans-serif !important; }
	#header_mob .moduletable_menu ul.menu > li.hm-contacts > a.hm-calc small { color: #2f2f6f !important; }
}

/* Десктоп: меню вариант A "Индиго-полоса и плитки", 2026-10-01 */
/* общее для вариантов десктопного меню: без градиентов и теней в тексте, выпадающий список сеткой 3 колонки */
@media only screen and (min-width: 769px) {
	#main .main_menu .moduletable_menu { display: flow-root !important; box-shadow: none !important; border-bottom: 0 !important; border-radius: 10px !important; overflow: visible !important; }
	#main .main_menu .moduletable_menu ul.menu > li { overflow: visible !important; }
	#main .main_menu .moduletable_menu ul.menu > li > a { background: none !important; text-shadow: none !important; font: 700 16px/1.2 'PT Sans', Arial, sans-serif !important; padding: 18px 0 !important; transition: background .2s, color .2s !important; }
	#main .main_menu .moduletable_menu ul.sub-menu { background: #fff !important; border-radius: 12px; box-shadow: 0 18px 44px rgba(47, 47, 111, .22); padding: 12px !important; width: 720px !important; margin-top: 8px !important; box-sizing: border-box; }
	#main .main_menu .moduletable_menu ul.sub-menu[style*="block"], #main .main_menu .moduletable_menu ul.sub-menu[style*="grid"] { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 8px; }
	#main .main_menu .moduletable_menu ul.sub-menu li { width: auto !important; float: none !important; margin: 0 !important; overflow: visible !important; }
	#main .main_menu .moduletable_menu ul.sub-menu li a { border: 0 !important; border-radius: 8px !important; text-shadow: none !important; text-align: left !important; font: 700 15px/1.25 'PT Sans', Arial, sans-serif !important; padding: 12px 14px !important; height: 100%; box-sizing: border-box; }
}

/* A. Индиго-полоса и белая панель с плитками (как мобильное меню C) */
@media only screen and (min-width: 769px) {
	#main .main_menu .moduletable_menu { background: #5c6bc0 !important; }
	#main .main_menu .moduletable_menu ul.menu > li > a { color: #fff !important; border-right: 1px solid rgba(255, 255, 255, .16) !important; }
	#main .main_menu .moduletable_menu ul.menu > li > a:hover { background: rgba(255, 255, 255, .1) !important; }
	#main .main_menu .moduletable_menu ul.menu > li.current-menu-item > a, #main .main_menu .moduletable_menu ul.menu > li.current-menu-ancestor > a { background: none !important; color: #ffd21e !important; box-shadow: inset 0 -3px 0 #ffd21e !important; }
	#main .main_menu .moduletable_menu ul li .toggle-sub { color: #fff; }
	#main .main_menu .moduletable_menu ul.sub-menu li a { background: #eef0fb !important; color: #2f2f6f !important; }
	#main .main_menu .moduletable_menu ul.sub-menu li a:hover { background: #5c6bc0 !important; color: #fff !important; }
	#main .main_menu .moduletable_menu ul.sub-menu li.current-menu-item a { background: #ffd21e !important; color: #191919 !important; }
}

/* десктоп: стрелка "Услуги" по центру полосы, плитки при наведении желтые, 2026-10-01 */
@media only screen and (min-width: 769px) {
	#main .main_menu .moduletable_menu ul.menu > li > .toggle-sub { transform: translateY(-3px); }
	#main .main_menu .moduletable_menu ul.sub-menu li a:hover { background: #ffd21e !important; color: #191919 !important; }
}