/**
 * Fixed bottom tab bar — mobile/tablet only, at the same ≤1024px
 * breakpoint the header already switches to its hamburger layout at.
 * Home / Category / Best Deals / Cart / Account, app-style.
 *
 * @package dello
 */

.mm-mobile-tabbar {
	display: none;
}

@media (max-width: 1024px) {
	.mm-mobile-tabbar {
		display: flex;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 999998;
		background: #fff;
		border-top: 1px solid #ececec;
		box-shadow: 0 -4px 16px rgba(20, 20, 20, 0.06);
		padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
	}
	/* Room for the fixed bar so page/footer content isn't hidden behind it. */
	body {
		padding-bottom: 64px;
	}
}

.mm-mobile-tabbar__item {
	flex: 1 1 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 3px;
	padding: 4px 2px;
	color: #6b6b6b;
	text-decoration: none;
	font-size: 11px;
	line-height: 1.2;
}
.mm-mobile-tabbar__item.is-active {
	color: #e04f16;
}
.mm-mobile-tabbar__icon {
	position: relative;
	display: inline-flex;
	width: 22px;
	height: 22px;
}
/* Force every icon to the same size/stroke and strip any fill a global
   icon-library rule (Elementor, WooCommerce, etc.) might slap onto a bare
   <rect>/<path>/<circle> — the SVGs already carry fill="none" as a
   presentation attribute, but an external CSS rule targeting the tag name
   directly beats that, which is what made the Category (rect-based) icon
   render as solid filled squares — bigger and heavier-looking — instead of
   a thin outline like its siblings. */
.mm-mobile-tabbar__icon svg {
	width: 22px !important;
	height: 22px !important;
	overflow: visible;
}
.mm-mobile-tabbar__icon svg,
.mm-mobile-tabbar__icon svg * {
	fill: none !important;
	stroke: currentColor !important;
	stroke-width: 1.6px !important;
}
.mm-mobile-tabbar__badge {
	position: absolute;
	top: -6px;
	right: -9px;
	min-width: 15px;
	height: 15px;
	padding: 0 3px;
	border-radius: 999px;
	background: #e04f16;
	color: #fff;
	font-size: 9px;
	font-weight: 600;
	line-height: 15px;
	text-align: center;
}
.mm-mobile-tabbar__badge:empty {
	display: none;
}