/**
 * Labz Mobile Bottom Navigation — app-style bar + slide-up categories panel.
 * Visible on mobile only (<= 768px).
 */

.labz-mnav { display: none; }

@media (max-width: 768px) {

	/* Keep page content/footer clear of the fixed bar. */
	body { padding-bottom: calc(62px + env(safe-area-inset-bottom, 0px)); }

	.labz-mnav {
		--mnav-accent: #013851;
		--mnav-idle: #8893a0;
		position: fixed;
		left: 0; right: 0; bottom: 0;
		z-index: 9990;
		display: flex;
		align-items: stretch;
		justify-content: space-around;
		background: #ffffff;
		border-top: 1px solid #e9eef3;
		box-shadow: 0 -6px 22px rgba(10, 30, 55, 0.08);
		padding-bottom: env(safe-area-inset-bottom, 0px);
		-webkit-backdrop-filter: saturate(1.1);
		backdrop-filter: saturate(1.1);
	}

	.labz-mnav__item {
		flex: 1 1 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 3px;
		min-width: 0;
		height: 62px;
		padding: 8px 2px 6px;
		color: var(--mnav-idle);
		text-decoration: none;
		-webkit-tap-highlight-color: transparent;
		transition: color 0.18s ease;
	}
	.labz-mnav__item:hover,
	.labz-mnav__item:focus { color: var(--mnav-accent); }
	.labz-mnav__item.is-active { color: var(--mnav-accent); }

	.labz-mnav__ico-wrap { position: relative; display: inline-flex; }
	.labz-mnav__icon { width: 24px; height: 24px; display: block; }

	.labz-mnav__label {
		font-size: 10.5px;
		font-weight: 600;
		letter-spacing: 0.2px;
		line-height: 1;
		max-width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	/* Cart count badge */
	.labz-mnav__badge {
		position: absolute;
		top: -6px; right: -9px;
		min-width: 17px; height: 17px;
		padding: 0 4px;
		border-radius: 9px;
		background: var(--mnav-accent);
		color: #fff;
		font-size: 10px;
		font-weight: 700;
		line-height: 17px;
		text-align: center;
		box-shadow: 0 0 0 2px #fff;
	}
	.labz-mnav__badge[data-count="0"] { display: none; }

	/* ===== Slide-up categories panel ===== */
	.labz-mnav-cats { position: fixed; inset: 0; z-index: 9995; }
	.labz-mnav-cats[hidden] { display: none; }

	.labz-mnav-cats__overlay {
		position: absolute; inset: 0;
		background: rgba(8, 20, 36, 0.45);
		opacity: 0;
		transition: opacity 0.25s ease;
	}
	.labz-mnav-cats__sheet {
		position: absolute;
		left: 0; right: 0; bottom: 0;
		background: #fff;
		border-radius: 20px 20px 0 0;
		box-shadow: 0 -10px 40px rgba(10, 30, 55, 0.22);
		padding: 10px 16px calc(20px + env(safe-area-inset-bottom, 0px));
		transform: translateY(100%);
		transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
		max-height: 80vh;
		overflow-y: auto;
	}
	.labz-mnav-cats.is-open .labz-mnav-cats__overlay { opacity: 1; }
	.labz-mnav-cats.is-open .labz-mnav-cats__sheet { transform: translateY(0); }

	.labz-mnav-cats__head {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 12px 0 14px;
	}
	.labz-mnav-cats__handle {
		position: absolute; top: 6px; left: 50%; transform: translateX(-50%);
		width: 38px; height: 4px; border-radius: 4px; background: #d8e0e8;
	}
	.labz-mnav-cats__title { font-size: 16px; font-weight: 800; color: #0c2238; }
	.labz-mnav-cats__close {
		position: absolute; right: 0; top: 8px;
		width: 30px; height: 30px; border: 0; border-radius: 50%;
		background: #f1f5f9; color: #44586c; font-size: 20px; line-height: 1;
		cursor: pointer;
	}

	.labz-mnav-cats__grid {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 12px;
	}
	.labz-mnav-cats__card {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 8px;
		padding: 14px 8px;
		border: 1px solid #e9eef3;
		border-radius: 14px;
		background: #f8fafc;
		text-decoration: none;
		transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
	}
	.labz-mnav-cats__card:active { transform: scale(0.97); }
	.labz-mnav-cats__card:hover { border-color: #cdd9e4; box-shadow: 0 8px 18px rgba(10, 30, 55, 0.08); }
	.labz-mnav-cats__thumb {
		flex: none;
		display: grid; place-items: center;
		width: 100%; height: 58px;
	}
	.labz-mnav-cats__thumb img { max-width: 100%; max-height: 58px; width: auto; object-fit: contain; }
	.labz-mnav-cats__thumb .labz-mnav__icon { width: 30px; height: 30px; color: #013851; }
	.labz-mnav-cats__name {
		font-size: 12px; font-weight: 600; color: #2a3b4d; text-align: center; line-height: 1.25;
	}

	/* Hide the Modern Cart floating cart on mobile — the bottom bar replaces it.
	   (Scoped to the plugin's wrapper id; our bar's cart link lives in .labz-mnav,
	   so it is unaffected and still opens the drawer.) */
	#moderncart-floating-cart { display: none !important; }
}

/* Don't let the bar linger on very small landscape heights where it'd dominate */
@media (max-width: 768px) and (max-height: 420px) {
	.labz-mnav { position: sticky; }
	body { padding-bottom: 0; }
}