/* ============================================
   MOBILE BOTTOM NAV — Global + single-rl_producto variant
   Namespace: .rl-bottom-nav
   ============================================ */
:root {
	--rl-bottomnav-h: 50px;
}

.rl-bottom-nav {
	display: none;
}

@media (max-width: 767.98px) {

	body {
		padding-bottom: calc(var(--rl-bottomnav-h) + env(safe-area-inset-bottom, 0px));
	}

	.rl-bottom-nav--global {
		display: flex;
	}

	.rl-bottom-nav--product {
		display: none;
	}

	.rl-bottom-nav--global.is-hidden {
		display: none;
	}

	.rl-bottom-nav--product.is-active {
		display: flex;
	}

	.rl-bottom-nav {
		align-items: stretch;
		justify-content: space-around;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		height: var(--rl-bottomnav-h);
		padding-bottom: env(safe-area-inset-bottom, 0);
		background: var(--rl-nav-glass, rgba(249, 247, 242, 0.92));
		border-top: 1px solid rgba(0, 0, 0, 0.06);
		box-shadow: 0 -1px 16px rgba(0, 0, 0, 0.08);
		z-index: var(--rl-mia-z-fab, 500);
		transform: translateY(120%);
		visibility: hidden;
		transition: transform 0.28s ease, visibility 0.28s;
		will-change: transform;
	}

	@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {

		.rl-bottom-nav {
			backdrop-filter: blur(16px);
			-webkit-backdrop-filter: blur(16px);
		}
	}

	/* Reveal: aparece donde cambia el topnav (scrollY > 60, ver mia-bottom-nav.js) */
	.rl-bottom-nav.is-revealed {
		transform: translateY(0);
		visibility: visible;
	}

	@media (prefers-reduced-motion: reduce) {

		.rl-bottom-nav {
			transition: none;
		}
	}
}

.rl-bottom-nav__item {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	border: none;
	background: transparent;
	color: var(--wp--preset--color--text-secondary);
	font-size: 0.6875rem;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	padding: 4px 4px;
	line-height: 1.2;
}

.rl-bottom-nav__item svg {
	width: 22px;
	height: 22px;
}

.rl-bottom-nav__item[aria-current="page"] {
	color: var(--cat-current, var(--wp--preset--color--coral));
}

.rl-bottom-nav__item:focus-visible {
	outline: 3px solid var(--wp--preset--color--accent-blue);
	outline-offset: -3px;
}

/* Mia — destacado al centro */
.rl-bottom-nav__item--mia span:last-child {
	color: var(--cat-current, var(--wp--preset--color--coral));
}

.rl-bottom-nav__mia-avatar {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	margin-top: 0;
	background: var(--cat-current, var(--wp--preset--color--coral));
	color: var(--wp--preset--color--white);
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 0.75rem;
	border: 2px solid var(--wp--preset--color--white);
	box-shadow: var(--wp--preset--shadow--md);
}

.rl-bottom-nav__item--mia[aria-expanded="true"] .rl-bottom-nav__mia-avatar {
	box-shadow: var(--wp--preset--shadow--ring);
}

/* Producto: variante especial (Mia | CTA ML | scroll-top), Mia y CTA del mismo tamaño */
.rl-bottom-nav--product .rl-bottom-nav__item--mia,
.rl-bottom-nav--product .rl-bottom-nav__item--scrolltop {
	flex: 0 0 var(--rl-bottomnav-h);
}

.rl-bottom-nav--product .rl-bottom-nav__cta,
.rl-bottom-nav--product .rl-bottom-nav__item--mia {
	flex-basis: 0;
}

.rl-bottom-nav--product .rl-bottom-nav__cta {
	flex-grow: 2;
}

.rl-bottom-nav--product .rl-bottom-nav__item--mia {
	flex-grow: 2;
}

.rl-bottom-nav--product .rl-bottom-nav__item--scrolltop {
	flex-grow: 0;
}

/* Single-producto: Mia como card del color de la página (--cat-current) */
.rl-bottom-nav__mia-card {
	flex-direction: row;
	gap: 8px;
	margin: 8px 0 8px 8px;
	padding: 0 14px;
	border-radius: 14px;
	background: var(--cat-current, var(--wp--preset--color--coral));
	color: var(--wp--preset--color--white);
}

.rl-bottom-nav__mia-card .rl-bottom-nav__mia-avatar {
	width: 30px;
	height: 30px;
	margin-top: 0;
	background: transparent;
	border: 2px solid rgba(255, 255, 255, 0.7);
	box-shadow: none;
	flex-shrink: 0;
}

.rl-bottom-nav__mia-card-text {
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1.15;
	text-align: left;
	color: var(--wp--preset--color--white);
}

/* ML CTA en producto: "Ver en ML" prominente, precio en chico */
.rl-bottom-nav--product .rl-bottom-nav__cta {
	margin: 8px 8px;
	border-radius: 14px;
}

.rl-bottom-nav--product .rl-bottom-nav__cta-label {
	font-size: 0.8125rem;
	font-weight: 800;
	text-transform: none;
	letter-spacing: 0;
}

.rl-bottom-nav--product .rl-bottom-nav__cta-price {
	font-size: 0.625rem;
	font-weight: 600;
	opacity: 0.85;
}

/* Card Mia de producto: texto blanco (gana a la regla global accent-blue) */
.rl-bottom-nav--product .rl-bottom-nav__item--mia span:last-child {
	color: var(--wp--preset--color--white);
}

.rl-bottom-nav__cta {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	background: var(--wp--preset--color--ml-yellow);
	color: var(--wp--preset--color--text-primary);
	text-decoration: none;
	font-weight: 700;
}

.rl-bottom-nav__cta-price {
	font-family: var(--wp--preset--font-family--jetbrains);
	font-variant-numeric: tabular-nums;
	font-size: 0.9375rem;
}

.rl-bottom-nav__cta-unit {
	font-size: 0.6875rem;
	font-weight: 500;
	opacity: 0.7;
}

.rl-bottom-nav__cta-label {
	font-size: 0.6875rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.rl-bottom-nav__cta:focus-visible {
	outline: 3px solid var(--wp--preset--color--text-primary);
	outline-offset: -3px;
}

@media print {

	.rl-bottom-nav {
		display: none !important;
	}

	body {
		padding-bottom: 0 !important;
	}
}