/* Верхняя полоса шапки: 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;
		font-size: 13px;
		white-space: nowrap;
	}

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

/* Узкие телефоны: полосу показываем, но компактно —
   телефон и почта в одну строку, кнопку «Калькулятор» здесь убираем,
   она есть в меню и в шапке ниже. */
@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;
	}
}