/* Phone browser tab bar. Hidden until the mobile rule below.
   The native app draws its own bar, so html.ry-native-app, html.ry-lean,
   and html.ry-mnav-off never reveal this one. */

#ry-mnav {
	--ry-mnav-bg: #FCF9F2;
	--ry-mnav-cream: #FCF9F2;
	--ry-mnav-idle: #7A6D63;
	--ry-mnav-active: #C8410E;
	--ry-mnav-pill: transparent;
	--ry-mnav-h: 58px;
}

@media (max-width: 900px) {
	html:not(.ry-native-app):not(.ry-lean):not(.ry-mnav-off) {
		--ry-mnav-space: calc(58px + env(safe-area-inset-bottom, 0px));
	}

	html:not(.ry-native-app):not(.ry-lean):not(.ry-mnav-off) #ry-mnav[hidden] {
		display: flex !important;
	}

	html:not(.ry-native-app):not(.ry-lean):not(.ry-mnav-off) body {
		padding-bottom: var(--ry-mnav-space);
	}

	html:not(.ry-native-app):not(.ry-lean):not(.ry-mnav-off) body.ms-cart-bar-on {
		padding-bottom: var(--ry-cart-stack, var(--ry-mnav-space));
	}

	/* Page docks sit just above the bar, the way they sit above the app tab bar. */
	html:not(.ry-native-app):not(.ry-lean):not(.ry-mnav-off) .ryn-dock,
	html:not(.ry-native-app):not(.ry-lean):not(.ry-mnav-off) .ryd-dock,
	html:not(.ry-native-app):not(.ry-lean):not(.ry-mnav-off) .rya-dock,
	html:not(.ry-native-app):not(.ry-lean):not(.ry-mnav-off) .ryp-dock,
	html:not(.ry-native-app):not(.ry-lean):not(.ry-mnav-off) .ryv-dock,
	html:not(.ry-native-app):not(.ry-lean):not(.ry-mnav-off) .rym-dock,
	html:not(.ry-native-app):not(.ry-lean):not(.ry-mnav-off) .ryvp-dock,
	html:not(.ry-native-app):not(.ry-lean):not(.ry-mnav-off) .cfi-dock,
	html:not(.ry-native-app):not(.ry-lean):not(.ry-mnav-off) .cf-donate__dock,
	html:not(.ry-native-app):not(.ry-lean):not(.ry-mnav-off) .ms-cart-sticky-cta,
	html:not(.ry-native-app):not(.ry-lean):not(.ry-mnav-off) .ry-share__dock {
		bottom: var(--ry-mnav-space);
		padding-bottom: 0.75rem;
	}

	html:not(.ry-native-app):not(.ry-lean):not(.ry-mnav-off) .scroll-to-top {
		bottom: calc(var(--ry-mnav-space) + 1rem);
	}

	/* Sit just above the tab bar. */
	html:not(.ry-native-app):not(.ry-lean):not(.ry-mnav-off) .ms-added-toast.ms-added-toast--dock,
	html:not(.ry-native-app):not(.ry-lean):not(.ry-mnav-off) .rya-cart__fab {
		bottom: calc(var(--ry-mnav-space) + 8px);
	}

	html:not(.ry-native-app):not(.ry-lean):not(.ry-mnav-off) body.ryn-page--dock .ms-added-toast.ms-added-toast--dock,
	html:not(.ry-native-app):not(.ry-lean):not(.ry-mnav-off) body.ryd-page--dock .ms-added-toast.ms-added-toast--dock,
	html:not(.ry-native-app):not(.ry-lean):not(.ry-mnav-off) body.ryp-page--dock .ms-added-toast.ms-added-toast--dock,
	html:not(.ry-native-app):not(.ry-lean):not(.ry-mnav-off) body.ryv-page--dock .ms-added-toast.ms-added-toast--dock,
	html:not(.ry-native-app):not(.ry-lean):not(.ry-mnav-off) body.rym-page--dock .ms-added-toast.ms-added-toast--dock,
	html:not(.ry-native-app):not(.ry-lean):not(.ry-mnav-off) body.ryvp-page--dock .ms-added-toast.ms-added-toast--dock,
	html:not(.ry-native-app):not(.ry-lean):not(.ry-mnav-off) body.cf-donate-page--dock .ms-added-toast.ms-added-toast--dock,
	html:not(.ry-native-app):not(.ry-lean):not(.ry-mnav-off) body.cfi-dock-on .ms-added-toast.ms-added-toast--dock {
		bottom: calc(var(--ry-mnav-space) + 6.35rem);
	}

	html:not(.ry-native-app):not(.ry-lean):not(.ry-mnav-off) body.rya-page--profile:not(.ms-adopt-pill-on):has(.rya-dock:not([hidden])) .rya-cart__fab,
	html:not(.ry-native-app):not(.ry-lean):not(.ry-mnav-off) body.rya-page--profile.rya-cart-on .rya-cart__fab {
		bottom: calc(var(--ry-mnav-space) + 5.35rem);
	}

	/* Cart and checkout keep their own bottom bar. The tab bar would cover it. */
	html:not(.ry-native-app):not(.ry-lean):not(.ry-mnav-off) body.woocommerce-cart #ry-mnav,
	html:not(.ry-native-app):not(.ry-lean):not(.ry-mnav-off) body.woocommerce-checkout #ry-mnav {
		display: none !important;
	}

	html:not(.ry-native-app):not(.ry-lean):not(.ry-mnav-off) body.woocommerce-cart,
	html:not(.ry-native-app):not(.ry-lean):not(.ry-mnav-off) body.woocommerce-checkout {
		padding-bottom: 0;
	}

	html:not(.ry-native-app):not(.ry-lean):not(.ry-mnav-off) body.woocommerce-cart .ms-cart-sticky-cta,
	html:not(.ry-native-app):not(.ry-lean):not(.ry-mnav-off) body.woocommerce-checkout .ms-cart-sticky-cta {
		bottom: 0;
	}

	html:not(.ry-native-app):not(.ry-lean):not(.ry-mnav-off) body.woocommerce-cart .scroll-to-top,
	html:not(.ry-native-app):not(.ry-lean):not(.ry-mnav-off) body.woocommerce-checkout .scroll-to-top {
		bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
	}

	/* Gau Grasa impact landing — no shop chrome; keep its own CTA dock flush. */
	html:not(.ry-native-app):not(.ry-lean):not(.ry-mnav-off) body.cfi-page #ry-mnav {
		display: none !important;
	}

	html:not(.ry-native-app):not(.ry-lean):not(.ry-mnav-off) body.cfi-page {
		padding-bottom: 0;
	}

	html:not(.ry-native-app):not(.ry-lean):not(.ry-mnav-off) body.cfi-page .cfi-dock {
		bottom: 0;
	}
}

html.ry-native-app #ry-mnav,
html.ry-lean #ry-mnav,
html.ry-mnav-off #ry-mnav {
	display: none !important;
}

#ry-mnav.ry-mnav {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1000;
	box-sizing: border-box;
	height: calc(var(--ry-mnav-h) + env(safe-area-inset-bottom, 0px));
	padding: 0 env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
	background: var(--ry-mnav-bg) !important;
	box-shadow: 0 -4px 18px rgba(90, 24, 7, 0.08);
	font-family: "Lato", system-ui, -apple-system, "Segoe UI", sans-serif;
	-webkit-font-smoothing: antialiased;
}

#ry-mnav.ry-mnav::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 1px;
	background: rgba(90, 24, 7, 0.08);
}

#ry-mnav a.ry-mnav__tab,
#ry-mnav a.ry-mnav__tab:link,
#ry-mnav a.ry-mnav__tab:visited,
#ry-mnav a.ry-mnav__tab:hover,
#ry-mnav a.ry-mnav__tab:active,
#ry-mnav a.ry-mnav__tab:focus {
	position: relative;
	flex: 1 1 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	gap: 2px;
	min-width: 0;
	height: var(--ry-mnav-h);
	padding: 8px 2px 0;
	color: var(--ry-mnav-idle) !important;
	font-size: 10px;
	font-weight: 700;
	line-height: 12px;
	letter-spacing: 0.02em;
	text-transform: none;
	text-decoration: none;
	-webkit-tap-highlight-color: transparent;
}

.ry-mnav__tab:active .ry-mnav__glyph {
	transform: scale(0.9);
}

#ry-mnav a.ry-mnav__tab.is-active,
#ry-mnav a.ry-mnav__tab.is-active:link,
#ry-mnav a.ry-mnav__tab.is-active:visited,
#ry-mnav a.ry-mnav__tab.is-active:hover,
#ry-mnav a.ry-mnav__tab.is-active:active,
#ry-mnav a.ry-mnav__tab.is-active:focus {
	color: var(--ry-mnav-active) !important;
	font-weight: 700;
}

.ry-mnav__glyph {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 28px;
	border-radius: 14px;
	transition: transform 0.12s ease;
	background: transparent;
}

#ry-mnav .ry-mnav__tab.is-active .ry-mnav__glyph {
	background: rgba(200, 65, 14, 0.12);
	color: var(--ry-mnav-active) !important;
}

#ry-mnav .ry-mnav__svg {
	width: 24px;
	height: 24px;
	color: inherit;
}

#ry-mnav .ry-mnav__svg--on,
#ry-mnav .ry-mnav__tab.is-active .ry-mnav__svg--idle {
	display: none;
}

#ry-mnav .ry-mnav__tab.is-active .ry-mnav__svg--on {
	display: block;
}

#ry-mnav .ry-mnav__svg path {
	fill: var(--ry-mnav-idle) !important;
	opacity: 1;
}

#ry-mnav .ry-mnav__tab.is-active .ry-mnav__svg--on path {
	fill: var(--ry-mnav-active) !important;
}

.ry-mnav__label {
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ry-mnav__badge {
	position: absolute;
	top: 2px;
	left: calc(50% + 8px);
	min-width: 18px;
	height: 18px;
	padding: 0 4px;
	box-sizing: border-box;
	border: 1.5px solid var(--ry-mnav-cream);
	border-radius: 9px;
	background: #d32f2f;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	line-height: 15px;
	text-align: center;
	font-variant-numeric: tabular-nums;
}

.ry-mnav__badge[hidden] {
	display: none !important;
}