.c-mobile-nav {
	display: none;
}

@media (max-width: 1023px) {
	:root {
		--calora-mobile-nav-height: 70px;
		--calora-mobile-nav-offset-inline: 12px;
		--calora-mobile-nav-offset-bottom: max(12px, env(safe-area-inset-bottom));
		--calora-mobile-nav-neu-bg: color-mix(in srgb, var(--calora-accent-light) 76%, var(--calora-bg) 24%);
		--calora-mobile-nav-neu-light: rgba(255, 255, 255, 0.94);
		--calora-mobile-nav-neu-dark: rgba(98, 76, 61, 0.18);
	}

	body {
		padding-bottom: calc(var(--calora-mobile-nav-height) + var(--calora-mobile-nav-offset-bottom) + 20px);
	}

	.c-mobile-nav {
		position: fixed;
		z-index: 1050;
		inset-inline: var(--calora-mobile-nav-offset-inline);
		inset-block-end: var(--calora-mobile-nav-offset-bottom);
		display: flex;
		min-height: var(--calora-mobile-nav-height);
		align-items: center;
		justify-content: space-between;
		gap: 5px;
		padding: 8px;
		border: 0;
		border-radius: 24px;
		background: var(--calora-mobile-nav-neu-bg);
		box-shadow:
			-8px -8px 18px var(--calora-mobile-nav-neu-light),
			8px 8px 20px var(--calora-mobile-nav-neu-dark),
			inset 0 1px 0 rgba(255, 255, 255, 0.72);
	}

	.c-mobile-nav__item {
		position: relative;
		display: inline-flex;
		min-width: 0;
		min-height: 52px;
		flex: 1 1 0;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 3px;
		padding: 5px 2px;
		border: 0;
		border-radius: 16px;
		background: var(--calora-mobile-nav-neu-bg);
		box-shadow:
			-3px -3px 7px rgba(255, 255, 255, 0.88),
			3px 3px 7px rgba(98, 76, 61, 0.12);
		color: var(--calora-text-muted);
		font-size: 9.5px;
		font-weight: 600;
		line-height: 1.25;
		text-align: center;
		white-space: nowrap;
		cursor: pointer;
		transition:
			color 160ms ease,
			box-shadow 160ms ease,
			transform 160ms ease;
	}

	.c-mobile-nav__item svg {
		width: 21px;
		height: 21px;
		fill: none;
		stroke: currentColor;
		stroke-linecap: round;
		stroke-linejoin: round;
		stroke-width: 1.7;
	}

	.c-mobile-nav__item:hover,
	.c-mobile-nav__item:focus-visible {
		color: var(--calora-accent);
		transform: translateY(-1px);
		box-shadow:
			-4px -4px 9px rgba(255, 255, 255, 0.94),
			4px 4px 9px rgba(98, 76, 61, 0.15);
	}

	.c-mobile-nav__item.is-active,
	.c-mobile-nav__item[aria-current="page"] {
		background: var(--calora-mobile-nav-neu-bg);
		color: var(--calora-accent);
		box-shadow:
			inset 3px 3px 7px rgba(98, 76, 61, 0.16),
			inset -3px -3px 7px rgba(255, 255, 255, 0.9);
		transform: none;
	}

	.c-mobile-nav__item[aria-expanded="true"] {
		background: var(--calora-mobile-nav-neu-bg);
		color: var(--calora-primary);
		box-shadow:
			inset 3px 3px 8px rgba(98, 76, 61, 0.2),
			inset -3px -3px 8px rgba(255, 255, 255, 0.92);
		transform: none;
	}

	.c-mobile-nav__icon-wrap {
		position: relative;
		display: inline-flex;
	}

	.c-mobile-nav__cart-count {
		position: absolute;
		inset-block-start: -8px;
		inset-inline-start: -10px;
		display: inline-flex;
		min-width: 17px;
		height: 17px;
		align-items: center;
		justify-content: center;
		padding-inline: 4px;
		border: 2px solid var(--calora-mobile-nav-neu-bg);
		border-radius: 999px;
		background: var(--calora-primary);
		box-shadow: 2px 2px 5px rgba(98, 76, 61, 0.2);
		color: var(--calora-bg);
		font-size: 9px;
		font-weight: 700;
		line-height: 1;
	}

	.admin-bar .c-mobile-nav {
		inset-block-end: var(--calora-mobile-nav-offset-bottom);
	}
}

@media (max-width: 480px) {
	.c-mobile-nav {
		gap: 4px;
		padding: 7px;
		border-radius: 22px;
	}

	.c-mobile-nav__item {
		min-height: 51px;
		border-radius: 15px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.c-mobile-nav__item {
		transition: none;
	}
}