/* Estilos específicos del menú (mínimos). */

/* Evita que el botón flotante tape contenido al final */
main {
	padding-bottom: 96px;
}

/* Layout 70/30 para el menú y el carrito */
.menu-layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
	align-items: start;
}

/* Sidebar como columna flexible con botón fijo al fondo */
.menu-sidebar {
	display: flex;
	flex-direction: column;
	align-self: start;
}

/* Limitar el alto del carrito para mostrar ~2 items y scroll */
#cartScroll {
	max-height: 320px;
	overflow: auto;
}

/* When opening cart from the mobile bottom bar, we scroll to this panel. */
#cartPanel {
	scroll-margin-top: 88px;
}

@media (min-width: 1024px) {
	.menu-layout {
		grid-template-columns: 7fr 3fr; /* 70% / 30% */
	}
	.menu-sidebar {
		position: sticky;
		top: 24px;
		max-height: calc(100vh - 24px);
	}
	#cartPanel {
		flex: 1;
	}
}

/* Mobile/tablet: leave room for the fixed bottom bar (#payBar) */
@media (max-width: 1023px) {
	#cartPanel {
		margin-bottom: calc(110px + env(safe-area-inset-bottom));
	}
}

/* Ocultar barra inferior en escritorio */
@media (min-width: 1024px) {
	#payBar {
		display: none;
	}
}