/* Мобильное меню — одно на весь сайт.
   Работает и в шапке лендингов (.site-header .main-nav — главная, /business/,
   /landing/, /hot-sandwiches/), и в шапке каталога и кабинета (.cabhdr .cabhdr__nav).
   Подключается ПОСЛЕ остальных стилей обоих шаблонов: site.css и cabinet-v2.css
   прячут меню через display:none, здесь оно переопределяется, чтобы открытие
   было с анимацией. Открывает и закрывает — /mainpage/new/js/menu.js.

   Как выглядит: панель в цвет шапки на весь экран под ней, крупные пункты
   появляются друг за другом, внизу телефон, мессенджеры и две кнопки.
   Бургер превращается в крестик. Страница под меню не прокручивается. */

@media (max-width: 1100px) {
	html.se-menu-open,
	html.se-menu-open body { overflow: hidden; }

	/* пока меню открыто, шапка выше нижней панели «Каталог / Получить прайс / Войти» */
	.site-header.se-menu-open,
	.cabhdr.se-menu-open { z-index: 1200; }

	/* ---------- панель ---------- */
	.site-header .main-nav,
	.cabhdr .cabhdr__nav {
		display: flex !important;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		position: absolute;
		left: 0;
		right: 0;
		top: 100%;
		width: auto;
		height: calc(100vh - 100%);
		height: calc(100dvh - 100%);
		margin: 0;
		padding: 14px 24px 28px;
		background:
			radial-gradient(760px 380px at 92% -8%, #2b2622 0%, rgba(43, 38, 34, 0) 68%),
			var(--se-ink-deep, #090909);
		border-top: 1px solid rgba(255, 255, 255, .08);
		box-shadow: none;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		opacity: 0;
		visibility: hidden;
		transform: translateY(-10px);
		transition: opacity .26s ease, transform .32s cubic-bezier(.2, .7, .2, 1), visibility 0s linear .32s;
	}
	.site-header .main-nav.is-open,
	.cabhdr.is-open .cabhdr__nav {
		opacity: 1;
		visibility: visible;
		transform: none;
		transition-delay: 0s;
	}

	/* ---------- пункты ---------- */
	.site-header .main-nav > a,
	.cabhdr .cabhdr__nav > a {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 16px;
		min-height: 0;
		margin: 0;
		padding: 15px 0;
		border: 0;
		border-bottom: 1px solid rgba(255, 255, 255, .08);
		font-size: 28px;
		font-weight: 800;
		letter-spacing: -.02em;
		line-height: 1.1;
		color: #fff;
		text-decoration: none;
	}
	.site-header .main-nav > a::after,
	.cabhdr .cabhdr__nav > a::after {
		content: "→";
		display: block;
		position: static;
		width: auto;
		height: auto;
		background: none;
		font-size: 22px;
		font-weight: 400;
		color: rgba(255, 255, 255, .35);
		transition: transform .2s ease, color .2s ease;
	}
	.site-header .main-nav > a:active::after,
	.cabhdr .cabhdr__nav > a:active::after { transform: translateX(4px); color: var(--se-red, #e1251b); }
	.cabhdr .cabhdr__nav > a.is-active,
	.site-header .main-nav > a.is-active { color: var(--se-red, #e1251b); }
	.cabhdr .cabhdr__nav > a.is-active::after { display: block; }

	/* подпись над пунктами — как «ГОТОВАЯ ЕДА ДЛЯ БИЗНЕСА» на первом экране главной */
	.se-menu__eyebrow {
		order: -1;  /* в разметке стоит после ссылок, см. header.php */
		display: flex;
		align-items: center;
		gap: 10px;
		padding: 10px 0 6px;
		font-size: 12px;
		font-weight: 800;
		letter-spacing: .12em;
		text-transform: uppercase;
		color: rgba(255, 255, 255, .55);
	}
	.se-menu__eyebrow::before { content: ""; width: 26px; height: 3px; border-radius: 3px; background: var(--se-red, #e1251b); }

	/* ---------- низ панели: телефон, чаты, кнопки ---------- */
	/* ссылки внутри не должны наследовать правила пунктов меню из cabinet-v2.css / site.css */
	.se-menu__extra a { padding: 0; border: 0; min-height: 0; }
	.se-menu__extra a::after { display: none; }
	.se-menu__extra {
		display: flex;
		flex-direction: column;
		gap: 14px;
		margin-top: auto;
		padding-top: 26px;
	}
	.se-menu__phone {
		display: block;
		font-size: 24px;
		font-weight: 800;
		letter-spacing: -.02em;
		color: #fff;
		text-decoration: none;
	}
	.se-menu__chats { display: flex; gap: 10px; }
	.se-menu__extra .se-menu__chats a {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		padding: 10px 16px 10px 12px;
		border: 1px solid rgba(255, 255, 255, .18);
		border-radius: 999px;
		font-size: 14px;
		font-weight: 700;
		color: #fff;
		text-decoration: none;
		transition: background .2s ease, border-color .2s ease;
	}
	.se-menu__chats a:active { background: rgba(255, 255, 255, .1); border-color: #fff; }
	.se-menu__chats img { display: block; width: 20px; height: 20px; }
	.se-menu__buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 6px; }
	.se-menu__extra .se-menu__btn {
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: 52px;
		padding: 0 16px;
		border: 1px solid rgba(255, 255, 255, .55);
		border-radius: 999px;
		font-size: 15px;
		font-weight: 700;
		color: #fff;
		text-decoration: none;
		transition: background .2s ease, border-color .2s ease, transform .12s ease;
	}
	.se-menu__btn:active { transform: scale(.98); }
	.se-menu__extra .se-menu__btn--red { background: var(--se-red, #e1251b); border-color: var(--se-red, #e1251b); }
	.se-menu__note { margin: 4px 0 0; font-size: 13px; line-height: 1.5; color: rgba(255, 255, 255, .5); }

	/* ---------- появление по очереди ---------- */
	.site-header .main-nav > *,
	.cabhdr .cabhdr__nav > * {
		opacity: 0;
		transform: translateY(14px);
		transition: opacity .38s ease, transform .44s cubic-bezier(.2, .7, .2, 1);
	}
	.site-header .main-nav.is-open > *,
	.cabhdr.is-open .cabhdr__nav > * { opacity: 1; transform: none; }
	.site-header .main-nav.is-open > :nth-child(1), .cabhdr.is-open .cabhdr__nav > :nth-child(1) { transition-delay: .06s; }
	.site-header .main-nav.is-open > :nth-child(2), .cabhdr.is-open .cabhdr__nav > :nth-child(2) { transition-delay: .12s; }
	.site-header .main-nav.is-open > :nth-child(3), .cabhdr.is-open .cabhdr__nav > :nth-child(3) { transition-delay: .18s; }
	.site-header .main-nav.is-open > :nth-child(4), .cabhdr.is-open .cabhdr__nav > :nth-child(4) { transition-delay: .24s; }
	.site-header .main-nav.is-open > :nth-child(5), .cabhdr.is-open .cabhdr__nav > :nth-child(5) { transition-delay: .30s; }
	.site-header .main-nav.is-open > :nth-child(6), .cabhdr.is-open .cabhdr__nav > :nth-child(6) { transition-delay: .36s; }
	.site-header .main-nav.is-open > :nth-child(7), .cabhdr.is-open .cabhdr__nav > :nth-child(7) { transition-delay: .42s; }
	.site-header .main-nav.is-open > .se-menu__eyebrow, .cabhdr.is-open .cabhdr__nav > .se-menu__eyebrow { transition-delay: 0s; }

	/* ---------- бургер → крестик ---------- */
	.site-header .menu-button,
	.cabhdr .cabhdr__burger {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		gap: 5px;
		width: 44px;
		height: 44px;
		padding: 0;
	}
	.site-header .menu-button span,
	.cabhdr .cabhdr__burger span {
		display: block;
		width: 24px;
		height: 2px;
		margin: 0;
		border-radius: 2px;
		background: #fff;
		transition: transform .28s cubic-bezier(.2, .7, .2, 1), opacity .18s ease;
	}
	.site-header .menu-button.is-open span:nth-child(1),
	.cabhdr .cabhdr__burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
	.site-header .menu-button.is-open span:nth-child(2),
	.cabhdr .cabhdr__burger.is-open span:nth-child(2) { opacity: 0; transform: scaleX(.2); }
	.site-header .menu-button.is-open span:nth-child(3),
	.cabhdr .cabhdr__burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

/* на широком экране низ панели не нужен: телефон, чаты и кнопки и так в шапке */
@media (min-width: 1101px) {
	.se-menu__extra,
	.se-menu__eyebrow { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.site-header .main-nav,
	.cabhdr .cabhdr__nav,
	.site-header .main-nav > *,
	.cabhdr .cabhdr__nav > *,
	.site-header .menu-button span,
	.cabhdr .cabhdr__burger span { transition: none !important; }
}