/* Верхняя полоса шапки: e-mail рядом с телефоном на планшетах и телефонах.
   neftopt.ru, 2026-08-15.

   Как было в теме:
   • ≥551px — e-mail слева, телефон справа (нормально);
   • 401–550px — `.header_main__mail { display:none }`, в полосе только телефон;
   • ≤400px  — `.header_main__top { display:none }`, полосы нет совсем
               (а это ширина iPhone 12/13/14 — 390px).

   Ниже: возвращаем e-mail в один ряд с телефоном и показываем полосу на узких экранах
   в компактном виде. Ссылка кликабельная — это штатный <a href="mailto:…"> темы. */

@media screen and (max-width: 550px) {

	.header_main__top .container {
		justify-content: center;
		flex-wrap: wrap;
		gap: 4px 16px;
	}

	/* телефон — первым, e-mail — сразу за ним */
	.header_main__top__info {
		order: 1;
		width: auto !important;
		margin: 0 !important;
	}

	.header_main__mail {
		display: inline-flex !important;
		order: 2;
		align-items: center;
		white-space: nowrap;
	}

	.header_main__mail i {
		margin-right: 6px;
	}

	/* Почта по высоте вровень с телефоном (владелец, 16.08.2026: на айфоне
	   почта стояла ниже). Причина была здесь же: телефону тема даёт
	   font-size:.85em (13,6px), а почте тут стояло жёстких 13px. Разные
	   кегли — разные высоты строки (19,04 против 18,2px) и разная базовая
	   линия; в Chrome разница пряталась в округлении, в Safari на айфоне
	   вылезала. Теперь у обоих один кегль, одна высота строки и явное
	   выравнивание по центру полосы. */
	.header_main__top__phone,
	.header_main__mail {
		font-size: .85em;
		line-height: 1.4;
		align-self: center;
	}

	/* Иконки телефона и конверта — разной высоты (14 и 13px) и стоят
	   блоками. Приводим к одному строчному боксу, чтобы каждая
	   центрировалась в своей строке, а не тянула текст за собой. */
	.header_main__top__phone i,
	.header_main__mail i {
		display: inline-flex;
		align-items: center;
		font-size: inherit;
		line-height: 1;
	}
}

/* Узкие телефоны: полосу показываем, но компактно —
   телефон и почта в одну строку, кнопку «Калькулятор» здесь убираем,
   она есть в меню и в шапке ниже. */
@media screen and (max-width: 400px) {

	.header_main__top {
		display: block !important;
		padding: 7px 0 !important;
	}

	.header_main__top .container {
		gap: 2px 14px;
	}

	.header_main__top__info .header_main__calulate__btn {
		display: none !important;
	}

	.header_main__top__phone,
	.header_main__mail {
		font-size: 12px;
	}

	.header_main__top__phone i,
	.header_main__mail i {
		margin-right: 5px;
	}
}