/**
 * Fixed bottom app-style toolbar (mobile only).
 */

:root {
	--mf-toolbar-height: 55px;
}

@media (max-width: 767px) {
	body {
		padding-bottom: calc(var(--mf-toolbar-height) + env(safe-area-inset-bottom, 0px));
	}

	.mf-footer {
		padding-bottom: calc(var(--mf-sp-4) + var(--mf-toolbar-height) + env(safe-area-inset-bottom, 0px));
	}

	.mf-mobile-toolbar {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 9990;
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		align-items: stretch;
		min-height: var(--mf-toolbar-height);
		padding-bottom: env(safe-area-inset-bottom, 0px);
		background: #fff;
		border-top: 1px solid #e5e5e5;
		box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.06);
	}

	.mf-mobile-toolbar__item {
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 3px;
		padding: 6px 4px;
		color: #535353;
		font-size: 11px;
		font-weight: 500;
		line-height: 1.2;
		text-decoration: none;
		transition: color 0.15s ease;
	}

	.mf-mobile-toolbar__item svg {
		flex-shrink: 0;
	}

	.mf-mobile-toolbar__item.is-active,
	.mf-mobile-toolbar__item:hover {
		color: var(--mf-accent, #6b2233);
	}

	.mf-mobile-toolbar__badge {
		position: absolute;
		top: 4px;
		right: calc(50% - 22px);
		min-width: 16px;
		height: 16px;
		padding: 0 4px;
		border-radius: 999px;
		background: var(--mf-accent, #6b2233);
		color: #fff;
		font-size: 10px;
		font-weight: 600;
		line-height: 16px;
		text-align: center;
	}

	.mf-mobile-toolbar__badge:empty,
	.mf-mobile-toolbar__badge[data-zero] {
		display: none;
	}

	/* PDP sticky CTA sits above toolbar */
	.mf-pdp__sticky-cta {
		bottom: calc(var(--mf-toolbar-height) + env(safe-area-inset-bottom, 0px));
		z-index: 9985;
	}

	.single-product {
		padding-bottom: calc(96px + var(--mf-toolbar-height)) !important;
	}
}

@media (min-width: 768px) {
	.mf-mobile-toolbar {
		display: none;
	}
}