:where([data-eh-mobile-nav], header nav:last-of-type) {
	display: none;
}

@media (max-width: 767px) {
	body {
		padding-bottom: calc(68px + env(safe-area-inset-bottom));
	}

	:where([data-eh-mobile-nav], header nav:last-of-type) {
		position: fixed;
		z-index: 9998;
		right: 0;
		bottom: 0;
		left: 0;
		display: grid;
		grid-template-columns: repeat(5, minmax(0, 1fr));
		min-height: calc(60px + env(safe-area-inset-bottom));
		padding-bottom: env(safe-area-inset-bottom);
		background: var(--eh-surface);
		border-top: 1px solid var(--eh-border);
		box-shadow: 0 -10px 28px rgba(16, 25, 35, 0.12);
		transition: transform 180ms ease;
	}

	:where([data-eh-mobile-nav], header nav:last-of-type).is-hidden {
		transform: translateY(110%);
	}

	:where([data-eh-mobile-nav], header nav:last-of-type) :where(a, button) {
		display: grid;
		min-width: 44px;
		min-height: 44px;
		place-items: center;
		color: var(--eh-ink);
		text-decoration: none;
		font-size: 12px;
		line-height: 1.15;
	}

	:where([data-eh-mobile-nav], header nav:last-of-type) :where(svg, i, .elementor-icon) {
		width: 28px;
		height: 28px;
		font-size: 28px;
		line-height: 1;
	}

	[data-eh-mobile-nav] > :nth-child(3),
	[data-eh-mobile-nav] :where(a, button):nth-of-type(3) {
		width: 64px;
		height: 64px;
		min-height: 64px;
		margin: -24px auto 0;
		background: var(--eh-red);
		color: #fff;
		border: 5px solid var(--eh-surface);
		border-radius: 50%;
		box-shadow: 0 8px 20px rgba(16, 25, 35, 0.2);
	}
}

@media (prefers-reduced-motion: reduce) {
	:where([data-eh-mobile-nav], header nav:last-of-type) {
		transition: none;
	}
}