/* AFCommerce mobile bottom tab bar - 5 equal pillar tabs, minimal */
/* Loaded after main.css via cssFiles, so these rules win. Mobile only. */

.site-tabbar { display: none; }

@media screen and (max-width: 980px) {

	/* replace the theme's off-canvas mobile nav with the bottom bar */
	#titleBar { display: none !important; }
	#page-wrapper { padding-bottom: calc(58px + env(safe-area-inset-bottom)) !important; }

	.site-tabbar {
		display: flex;
		align-items: stretch;
		position: fixed;
		left: 0; right: 0; bottom: 0;
		z-index: 10002;
		min-height: 58px;
		background: rgba(59,62,69,0.97);
		border-top: 1px solid rgba(255,255,255,0.12);
		box-shadow: 0 -2px 14px rgba(0,0,0,0.4);
		padding-bottom: env(safe-area-inset-bottom);
	}
	.site-tabbar a {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 3px;
		padding: 7px 2px 6px;
		text-decoration: none;
		color: #ffffff;
		font-family: inherit;
		font-size: 10px;
		font-weight: 700;
		letter-spacing: 0.04em;
		text-transform: uppercase;
		opacity: 0.6;
		transition: opacity 0.2s, color 0.2s;
	}
	.site-tabbar a svg { width: 22px; height: 22px; display: block; }
	.site-tabbar a span { display: block; line-height: 1.1; }
	.site-tabbar a:hover { opacity: 0.9; }
	.site-tabbar a.active { opacity: 1; color: #50a1cf; }
}