/**
 * Окраска системных зон экрана в Chrome / Яндекс / Safari.
 * Верх ≈ header-top #F3F3F3, низ ≈ фон страницы (не footer #000 —
 * чёрный bottom/theme-color давал мелькание полоски при скролле в Chrome).
 * Требует viewport-fit=cover в meta viewport.
 * Низ страницы (footer-link) сам красится в чёрный через padding + safe-area.
 */
html {
	--browser-ui-top: #F3F3F3;
	--browser-ui-bottom: #ffffff;
	background-color: #ffffff;
}

body {
	background-color: var(--c-bg, #fff);
	/* верхняя safe-area (статус-бар) — цвет хедера */
	border-top: env(safe-area-inset-top, 0px) solid var(--browser-ui-top);
	background-clip: padding-box;
}

body.e404 {
	--browser-ui-top: #000000;
	--browser-ui-bottom: #000000;
	border-top-color: #000000;
	background-color: #000000;
}

html:has(body.e404),
html:has(.giftcards),
html:has(.gf-success),
html:has(body.body-gfr) {
	background-color: #000000;
}

body:has(.giftcards),
body:has(.gf-success),
body.body-gfr {
	background-color: #000000;
}

/* Нижняя навигация учитывает home-indicator / chin Chrome */
@media (max-width: 1024px) {
	.mobile-nav {
		bottom: max(8px, calc(8px + env(safe-area-inset-bottom, 0px)));
	}

	.ios .mobile-nav {
		bottom: max(14px, calc(14px + env(safe-area-inset-bottom, 0px)));
	}

	.footer-link a {
		padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px));
	}
}