/**
 * Menu MASTER — estilos del FRONT (Fase 3)
 *
 * Reproduce el estilo de Horizon: tarjetas con foto, separador de puntitos,
 * bilingüe, barra inferior fija. Responsive móvil → tablet → escritorio.
 * Los colores y la fuente de títulos vienen de variables que el configurador
 * (Fase 4) podrá cambiar; aquí tienen valores por defecto.
 */

/* Iconos Tabler: se cargan como hoja aparte desde class-mm-public.php */

.mm-front {
	--mmf-accent: #F5A623;
	--mmf-ink: #2A2E37;
	--mmf-soft: #7A8089;
	--mmf-line: #E6E7EB;
	--mmf-title-font: 'Playfair Display', Georgia, serif;
	--mmf-sep: dotted;
	max-width: 760px;
	margin: 0 auto;
	padding: 0 16px;
	color: var(--mmf-ink);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	box-sizing: border-box;
}
.mm-front *, .mm-front *::before, .mm-front *::after { box-sizing: border-box; }

/* Cabecera de la carta */
.mm-front-header { text-align: center; padding: 18px 0 8px; }
.mm-front-title {
	font-family: var(--mmf-title-font);
	font-size: 30px; font-weight: 700; margin: 0;
	letter-spacing: .5px;
}

/* Cabecera de categoría */
.mm-front-cat { padding: 26px 0 8px; scroll-margin-top: 20px; }
.mm-front-cat-head { text-align: center; margin-bottom: 18px; }
.mm-front-topline {
	display: block; font-size: 11px; letter-spacing: 2.5px;
	color: var(--mmf-soft); text-transform: uppercase; margin-bottom: 4px;
}
.mm-front-cat-title {
	font-family: var(--mmf-title-font);
	font-size: 24px; font-weight: 700; margin: 0; line-height: 1.2;
}
.mm-front-cat-sub { display: block; font-size: 15px; color: var(--mmf-soft); font-weight: 500; margin-top: 1px; }
.mm-front-mini { display: block; font-size: 13px; color: var(--mmf-soft); font-style: italic; margin-top: 5px; }

/* Subgrupo */
.mm-front-subgroup {
	font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase;
	color: var(--mmf-accent); font-weight: 700;
	margin: 18px 0 8px; padding-bottom: 5px;
	border-bottom: 1px solid var(--mmf-line);
}

/* Texto libre */
.mm-front-text { font-size: 13px; color: var(--mmf-soft); font-style: italic; text-align: center; margin: 10px 0; }

/* Imagen informativa */
.mm-front-infoimg { text-align: center; margin: 12px 0; }
.mm-front-infoimg img { max-width: 160px; border-radius: 12px; }

/* ==========================================================================
   LAYOUT TARJETA (card): foto + cuerpo
   ========================================================================== */
.mm-layout-card .mm-front-dish {
	display: flex; gap: 16px; align-items: flex-start;
	padding: 14px 0;
	/* Separador de puntos entre platos (responsive, se adapta al ancho) */
	border-bottom: none;
	background-image: radial-gradient(circle, #C2C5CC 1px, transparent 1.4px);
	background-position: bottom;
	background-size: 7px 3px;
	background-repeat: repeat-x;
}
.mm-layout-card .mm-front-dish:last-child { background-image: none; }
.mm-front-dish-img {
	width: 90px; height: 90px; flex-shrink: 0;
	display: flex; align-items: center; justify-content: center;
	/* Sin fondo ni recuadro: pensado para PNG transparentes (plato recortado) */
	background: transparent;
}
.mm-front-dish-img img {
	width: 100%; height: 100%;
	object-fit: contain;            /* contain, no cover: respeta el recorte del PNG */
	filter: drop-shadow(0 4px 8px rgba(16,24,40,.12)); /* sombra suave bajo el plato */
}
.mm-front-noimg {
	width: 100%; height: 100%;
	display: flex; align-items: center; justify-content: center;
	background: #F6F7F9; border-radius: 14px;  /* el placeholder sí lleva fondo, solo cuando NO hay foto */
}
.mm-front-noimg i { font-size: 26px; color: #C4C7CE; }
.mm-front-dish-body { flex: 1; min-width: 0; }
.mm-front-dish-label {
	display: block; font-size: 10px; letter-spacing: 1.2px;
	text-transform: uppercase; color: var(--mmf-soft); margin-bottom: 2px;
}

/* Fila nombre + precio: el nombre a la izquierda, el precio a la derecha.
   Sin puntos aquí (los puntos van ENTRE platos, no en esta fila). */
.mm-front-dish-namerow {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
}
.mm-front-dish-name {
	font-weight: 600;
	font-size: 16px;
	flex-shrink: 1;
}
.mm-front-dish-price {
	font-weight: 700;
	font-size: 15px;
	white-space: nowrap;
	color: var(--mmf-ink);
	flex-shrink: 0;
}

/* La clase de puntos en la fila ya no se usa para el separador horizontal;
   la dejamos invisible para no afectar al maquetado. */
.mm-front-dots { display: none; }

.mm-front-dish-subtitle {
	display: block; font-size: 11px; font-weight: 600; letter-spacing: .5px;
	color: var(--mmf-accent); margin-top: 2px;
}
.mm-front-dish-desc { font-size: 13px; color: var(--mmf-soft); line-height: 1.5; margin: 4px 0 0; }
.mm-front-pricenote { display: block; font-size: 11px; color: var(--mmf-soft); font-style: italic; margin-top: 3px; }

/* Variantes (copa/botella, pollo/gambas...) */
.mm-front-variants { margin-top: 8px; }
.mm-front-variant { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 2px 0; }
.mm-front-variant-label { font-size: 13px; color: var(--mmf-soft); flex-shrink: 1; }
.mm-front-variant-price { font-size: 14px; font-weight: 700; white-space: nowrap; flex-shrink: 0; }

/* ==========================================================================
   LAYOUT LISTA (list): texto + precio, sin foto, compacto
   ========================================================================== */
.mm-layout-list .mm-front-dish {
	padding: 9px 0;
	border-bottom: none;
	background-image: radial-gradient(circle, #C2C5CC 1px, transparent 1.4px);
	background-position: bottom;
	background-size: 7px 3px;
	background-repeat: repeat-x;
}
.mm-layout-list .mm-front-dish:last-child { background-image: none; }
.mm-layout-list .mm-front-dish-img { display: none; }
.mm-layout-list .mm-front-dish-name { font-size: 15px; font-weight: 600; }
.mm-layout-list .mm-front-dish-desc { font-size: 12px; }

/* ==========================================================================
   BILINGÜE: en modo rústico se muestran ambos idiomas apilados.
   El JS añade .mm-show-es / .mm-show-en al alternar.
   (En modo profesional el PHP ya entrega solo un idioma.)
   ========================================================================== */
.mm-rustic .mm-front-dish-name[data-es][data-en]::after { content: ""; }

/* ==========================================================================
   BARRA INFERIOR FIJA
   ========================================================================== */
.mm-bottombar {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 9999;
	display: flex; align-items: center; justify-content: space-around;
	background: #fff;
	border-top: 1px solid var(--mmf-line);
	box-shadow: 0 -4px 20px rgba(16,24,40,.07);
	padding: 6px 8px;
	padding-bottom: calc(6px + env(safe-area-inset-bottom)); /* notch móvil */
	max-width: 760px; margin: 0 auto;
}
.mm-bb-item {
	display: flex; flex-direction: column; align-items: center; gap: 2px;
	background: none; border: none; cursor: pointer; text-decoration: none;
	color: var(--mmf-soft); font-size: 10px; font-weight: 500;
	padding: 4px 6px; flex: 1;
}
.mm-bb-item i { font-size: 21px; }
.mm-bb-item:hover { color: var(--mmf-accent); }
.mm-bb-reserve { color: var(--mmf-accent); }

/* Botón central destacado */
.mm-bb-center { position: relative; }
.mm-bb-center-circle {
	width: 50px; height: 50px; border-radius: 50%;
	background: var(--mmf-accent); color: #fff;
	display: flex; align-items: center; justify-content: center;
	margin-top: -22px; box-shadow: 0 6px 16px rgba(245,166,35,.4);
}
.mm-bb-center-circle i { font-size: 24px; }

/* Icono compuesto del botón de texto (tipografía + lupa) */
.mm-bb-texticon { position: relative; display: inline-flex; width: 22px; height: 22px; align-items: center; justify-content: center; }
.mm-bb-texticon-lens { position: absolute; right: -5px; bottom: -4px; font-size: 12px !important; }

/* Panel desplegable de categorías */
.mm-navpanel {
	position: fixed; left: 0; right: 0; bottom: 64px; z-index: 9998;
	max-width: 760px; margin: 0 auto;
	background: #fff;
	border-top: 1px solid var(--mmf-line);
	box-shadow: 0 -8px 24px rgba(16,24,40,.1);
	padding: 14px 14px 18px;
	border-radius: 18px 18px 0 0;
	max-height: 60vh; overflow-y: auto;
	animation: mm-slideup .25s ease;
}
.mm-navpanel[hidden] { display: none; }
@keyframes mm-slideup { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.mm-navpanel-label { text-align: center; font-size: 11px; letter-spacing: 1.5px; color: var(--mmf-soft); margin: 0 0 12px; }
.mm-navpanel-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mm-navpanel-item {
	display: flex; flex-direction: column; align-items: center; gap: 4px;
	padding: 10px 6px; border-radius: 12px;
	background: #F6F7F9; color: var(--mmf-ink); text-decoration: none;
	font-size: 11px; text-align: center;
}
.mm-navpanel-item i { font-size: 20px; color: var(--mmf-accent); }
.mm-navpanel-item:hover { background: #FEF3E2; }

/* Espaciador para que la barra no tape el último plato */
.mm-front-spacer { height: 80px; }

/* ==========================================================================
   AMPLIADOR DE TEXTO (clases que añade el JS al pulsar "Texto")
   ========================================================================== */
.mm-front.mm-text-1 { font-size: 1.08em; }
.mm-front.mm-text-2 { font-size: 1.18em; }

/* ==========================================================================
   RESPONSIVE: móvil → tablet → escritorio
   ========================================================================== */

/* Tablet: más aire, fotos algo mayores */
@media (min-width: 600px) {
	.mm-front { padding: 0 24px; }
	.mm-front-dish-img { width: 104px; height: 104px; }
	.mm-front-title { font-size: 34px; }
	.mm-front-cat-title { font-size: 27px; }
}

/* Escritorio: la carta se centra y la barra inferior se mantiene centrada y
   estrecha (no ocupa todo el ancho, queda elegante). */
@media (min-width: 1000px) {
	.mm-front { max-width: 820px; padding: 0 20px; }
	.mm-front-cat { padding: 34px 0 10px; }
	.mm-front-dish-img { width: 112px; height: 112px; }
	/* En escritorio, las tarjetas pueden ir en 2 columnas si la categoría es card */
	.mm-layout-card .mm-front-items {
		display: grid;
		grid-template-columns: 1fr 1fr;
		column-gap: 36px;
	}
	.mm-layout-card .mm-front-dish { background-image: radial-gradient(circle, #C2C5CC 1px, transparent 1.4px); background-position: bottom; background-size: 7px 3px; background-repeat: repeat-x; }
	/* En lista, mantenemos 2 columnas también para aprovechar el ancho */
	.mm-layout-list .mm-front-items {
		display: grid; grid-template-columns: 1fr 1fr; column-gap: 40px;
	}
}

/* Escritorio grande: barra inferior centrada con bordes redondeados flotante */
@media (min-width: 1000px) {
	.mm-bottombar {
		bottom: 16px;
		border-radius: 999px;
		border: 1px solid var(--mmf-line);
		left: 50%; right: auto; transform: translateX(-50%);
		width: auto; min-width: 480px; padding: 6px 18px;
	}
	.mm-navpanel { bottom: 84px; border-radius: 18px; }
}

/* ==========================================================================
   OPCIÓN DE SEPARADOR ENTRE PLATOS (del configurador: dotted / solid / none)
   Por defecto es de puntos. Estas reglas lo cambian si se elige otra opción.
   ========================================================================== */
.mm-front[data-sep="solid"] .mm-layout-card .mm-front-dish,
.mm-front[data-sep="solid"] .mm-layout-list .mm-front-dish {
	background-image: none;
	border-bottom: 1px solid var(--mmf-line);
}
.mm-front[data-sep="solid"] .mm-layout-card .mm-front-dish:last-child,
.mm-front[data-sep="solid"] .mm-layout-list .mm-front-dish:last-child {
	border-bottom: none;
}
.mm-front[data-sep="none"] .mm-layout-card .mm-front-dish,
.mm-front[data-sep="none"] .mm-layout-list .mm-front-dish {
	background-image: none;
	border-bottom: none;
}

/* ==========================================================================
   v1.6.0 — Espaciador en el front
   ========================================================================== */
.mm-front-spacer-el {
	width: 100%;
	background: linear-gradient(180deg, transparent, rgba(0,0,0,.015), transparent);
}

/* ==========================================================================
   v1.6.0 — Lightbox de imagen (vertical 75/25, glass)
   ========================================================================== */
.mm-lightbox {
	position: fixed; inset: 0; z-index: 100000;
	background: rgba(20, 22, 28, .55);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	display: flex; align-items: center; justify-content: center;
	padding: 24px 18px;
	animation: mm-lb-in .2s ease;
}
.mm-lightbox[hidden] { display: none; }
@keyframes mm-lb-in { from { opacity: 0; } to { opacity: 1; } }

/* Tarjeta — minimal, fondo blanco limpio por defecto */
.mm-lb-card {
	position: relative;
	width: 100%;
	max-width: 420px;
	max-height: calc(100vh - 48px);
	background: #ffffff;
	border-radius: 18px;
	overflow: hidden;
	display: flex; flex-direction: column;
	box-shadow: 0 24px 70px rgba(0,0,0,.35);
	animation: mm-lb-pop .28s cubic-bezier(.34,1.4,.64,1);
}
@keyframes mm-lb-pop { from { transform: scale(.9); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* Imagen */
.mm-lb-image {
	display: flex; align-items: center; justify-content: center;
	padding: 0;
	position: relative;
	background: #f6f7f9;
}
.mm-lb-image img {
	width: 100%;
	max-height: 70vh;
	object-fit: cover;
	display: block;
}

/* Info — minimal, tipografía limpia */
.mm-lb-info {
	padding: 18px 22px 22px;
	text-align: center;
	display: flex; flex-direction: column; align-items: center; gap: 6px;
	background: #fff;
}
.mm-lb-name {
	font-family: var(--mmf-title-font, 'Playfair Display', serif);
	font-size: 19px; font-weight: 700;
	margin: 0;
	letter-spacing: .3px;
	color: #1a1a1a;
	line-height: 1.2;
}
.mm-lb-desc {
	font-size: 13px;
	color: #6b7280;
	line-height: 1.5;
	margin: 0;
	max-width: 90%;
}
.mm-lb-price {
	font-weight: 700;
	font-size: 16px;
	color: var(--mmf-accent, #F5A623);
	margin: 2px 0 0;
}

/* Botón cerrar — minimal */
.mm-lb-close {
	position: absolute; top: 12px; right: 12px; z-index: 2;
	width: 34px; height: 34px;
	border-radius: 50%;
	background: rgba(255,255,255,.9);
	border: none;
	color: #1a1a1a;
	cursor: pointer;
	display: flex; align-items: center; justify-content: center;
	transition: background .15s ease, transform .15s ease;
	box-shadow: 0 2px 8px rgba(0,0,0,.15);
}
.mm-lb-close:hover { background: #fff; transform: scale(1.05); }
.mm-lb-close svg, .mm-lb-close i { display: block; color: #1a1a1a; font-size: 16px; }

@media (min-width: 600px) {
	.mm-lb-name { font-size: 21px; }
	.mm-lb-desc { font-size: 13.5px; }
}

/* ====== VARIANTES DE FONDO (data-bg) ====== */
/* glass: tarjeta translúcida elegante */
.mm-lightbox[data-bg="glass"] .mm-lb-card {
	background: rgba(255,255,255,.85);
	backdrop-filter: blur(24px);
	-webkit-backdrop-filter: blur(24px);
}
.mm-lightbox[data-bg="glass"] .mm-lb-info { background: transparent; }
.mm-lightbox[data-bg="glass"] .mm-lb-image { background: rgba(246,247,249,.5); }

/* dark: tarjeta oscura, texto claro */
.mm-lightbox[data-bg="dark"] { background: rgba(8, 8, 10, .8); }
.mm-lightbox[data-bg="dark"] .mm-lb-card { background: #18191d; }
.mm-lightbox[data-bg="dark"] .mm-lb-info { background: #18191d; }
.mm-lightbox[data-bg="dark"] .mm-lb-image { background: #1f2024; }
.mm-lightbox[data-bg="dark"] .mm-lb-name { color: #fff; }
.mm-lightbox[data-bg="dark"] .mm-lb-desc { color: rgba(255,255,255,.7); }
.mm-lightbox[data-bg="dark"] .mm-lb-close { background: rgba(255,255,255,.15); }
.mm-lightbox[data-bg="dark"] .mm-lb-close svg,
.mm-lightbox[data-bg="dark"] .mm-lb-close i { color: #fff; }

/* light: fondo muy claro */
.mm-lightbox[data-bg="light"] { background: rgba(245, 246, 248, .85); }
.mm-lightbox[data-bg="light"] .mm-lb-card { background: #fff; }

/* ====== MARCO (data-frame) ====== */
/* Sin marco: la tarjeta pierde sombra y fondo, imagen libre */
.mm-lightbox[data-frame="0"] .mm-lb-card {
	background: transparent !important;
	box-shadow: none !important;
	backdrop-filter: none !important;
	-webkit-backdrop-filter: none !important;
}
.mm-lightbox[data-frame="0"] .mm-lb-image { background: transparent !important; border-radius: 14px; overflow: hidden; }
.mm-lightbox[data-frame="0"] .mm-lb-info { background: transparent !important; }
.mm-lightbox[data-frame="0"][data-bg="dark"] .mm-lb-name { color: #fff; }
.mm-lightbox[data-frame="0"]:not([data-bg="dark"]) .mm-lb-name { color: #fff; text-shadow: 0 2px 8px rgba(0,0,0,.5); }
.mm-lightbox[data-frame="0"]:not([data-bg="dark"]) .mm-lb-desc { color: rgba(255,255,255,.9); text-shadow: 0 1px 4px rgba(0,0,0,.5); }

/* ====== MOSTRAR / OCULTAR campos (data-show-*) ====== */
.mm-lightbox[data-show-title="0"] .mm-lb-name { display: none !important; }
.mm-lightbox[data-show-desc="0"] .mm-lb-desc { display: none !important; }
.mm-lightbox[data-show-price="0"] .mm-lb-price { display: none !important; }
/* Si no se muestra nada de info, ocultar el bloque entero */
.mm-lightbox[data-show-title="0"][data-show-desc="0"][data-show-price="0"] .mm-lb-info { display: none !important; }

/* Cursor zoom en imágenes clicables */
.mm-clickable-img { cursor: zoom-in; }

/* ==========================================================================
   v1.9.0 — Barra inferior con SVG inline (arregla iconos, círculo, sombra)
   ========================================================================== */
.mm-bb-item { color: var(--mmf-soft); }
.mm-bb-ic { display: inline-flex; align-items: center; justify-content: center; }
.mm-bb-ic svg { display: block; }
.mm-bb-tx { line-height: 1; }
.mm-bb-item:hover { color: var(--mmf-accent); }
.mm-bb-reserve { color: var(--mmf-accent); }

/* Botón central de Secciones: círculo destacado bien centrado */
.mm-bb-center {
	position: relative;
	overflow: visible;
}
.mm-bb-center-circle {
	width: 54px; height: 54px;
	border-radius: 50%;
	background: var(--mmf-accent);
	color: #fff;
	display: flex; align-items: center; justify-content: center;
	margin: -22px auto 4px;
	/* Sombra del color del acento (no gris) para que parezca pertenecer */
	box-shadow: 0 8px 20px -4px var(--mmf-accent), 0 0 0 4px #fff;
	transition: transform .15s ease;
}
.mm-bb-center-circle svg { display: block; color: #fff; }
.mm-bb-center:hover .mm-bb-center-circle { transform: translateY(-2px); }

/* Pulso al pulsar el ampliador de texto */
.mm-bb-item.mm-pulse .mm-bb-ic { animation: mm-pulse .25s ease; }
@keyframes mm-pulse { 0% { transform: scale(1); } 50% { transform: scale(1.25); } 100% { transform: scale(1); } }

/* Iconos del panel de Secciones */
.mm-navpanel-ic { display: inline-flex; align-items: center; justify-content: center; color: var(--mmf-accent); }
.mm-navpanel-ic svg { display: block; }
.mm-navpanel-item { color: var(--mmf-ink); }
.mm-navpanel-item:hover .mm-navpanel-ic { transform: scale(1.1); transition: transform .15s ease; }

/* Lightbox: SVG del cerrar */
.mm-lb-close svg { display: block; color: #fff; }

/* ==========================================================================
   v1.10.0 — Cabecera de categoría: cada elemento en su línea (fix Super Delicious)
   ========================================================================== */
.mm-front-cat-head { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.mm-front-cat-head > * { display: block; width: auto; }
.mm-front-topline, .mm-front-cat-title, .mm-front-cat-sub, .mm-front-mini { display: block !important; }

/* ==========================================================================
   v1.12.0 — Toggle idioma modo rústico (ES/EN en la misma página)
   ========================================================================== */
/* En modo profesional, no se emiten ambos idiomas — no hace falta CSS */
/* En modo rústico, se emiten ambos en <span class="mm-l mm-l-es"> y <span class="mm-l mm-l-en"> */
.mm-front.mm-rustic .mm-l { display: inline; }
.mm-front.mm-rustic .mm-l-en { display: none; } /* por defecto ES visible */
body.mm-lang-en .mm-front.mm-rustic .mm-l-es { display: none; }
body.mm-lang-en .mm-front.mm-rustic .mm-l-en { display: inline; }

/* Para títulos de categoría con dos líneas (es+en en bloque) */
.mm-front.mm-rustic .mm-front-cat-title .mm-l,
.mm-front.mm-rustic .mm-front-mini .mm-l,
.mm-front.mm-rustic .mm-front-subgroup .mm-l,
.mm-front.mm-rustic .mm-front-title .mm-l { display: block; }
.mm-front.mm-rustic .mm-front-cat-title .mm-l-en,
.mm-front.mm-rustic .mm-front-mini .mm-l-en,
.mm-front.mm-rustic .mm-front-subgroup .mm-l-en,
.mm-front.mm-rustic .mm-front-title .mm-l-en { display: none; }
body.mm-lang-en .mm-front.mm-rustic .mm-front-cat-title .mm-l-es,
body.mm-lang-en .mm-front.mm-rustic .mm-front-mini .mm-l-es,
body.mm-lang-en .mm-front.mm-rustic .mm-front-subgroup .mm-l-es,
body.mm-lang-en .mm-front.mm-rustic .mm-front-title .mm-l-es { display: none; }
body.mm-lang-en .mm-front.mm-rustic .mm-front-cat-title .mm-l-en,
body.mm-lang-en .mm-front.mm-rustic .mm-front-mini .mm-l-en,
body.mm-lang-en .mm-front.mm-rustic .mm-front-subgroup .mm-l-en,
body.mm-lang-en .mm-front.mm-rustic .mm-front-title .mm-l-en { display: block; }

/* ==========================================================================
   v1.12.0 — Ampliar texto (3 niveles)
   ========================================================================== */
body.mm-zoom-1 .mm-front { font-size: 110%; }
body.mm-zoom-2 .mm-front { font-size: 125%; }
body.mm-zoom-1 .mm-front .mm-front-dish-name,
body.mm-zoom-1 .mm-front .mm-front-cat-title { font-size: 110%; }
body.mm-zoom-2 .mm-front .mm-front-dish-name,
body.mm-zoom-2 .mm-front .mm-front-cat-title { font-size: 125%; }

/* Indicador en el botón de la barra */
.mm-bar-btn.is-zoom1 .mm-bar-zoom-dot { background: var(--mm-bar-accent, #B5A66F); }
.mm-bar-btn.is-zoom2 .mm-bar-zoom-dot { background: #F5A623; }

/* ==========================================================================
   v1.12.0 — Espacio (spacer): permitir desactivar sombra
   ========================================================================== */
.mm-front-spacer-el { box-shadow: 0 1px 0 rgba(0,0,0,.04); }
body.mm-no-spacer-shadow .mm-front-spacer-el,
.mm-front.mm-no-spacer-shadow .mm-front-spacer-el { box-shadow: none; }

/* ==========================================================================
   v1.12.0 — Defensas para el primer plato (asegurar imagen y precio visibles)
   ========================================================================== */
/* Si por alguna razón el contenedor cortaba el primer item: */
.mm-front-items { overflow: visible !important; min-height: 0; }
.mm-layout-card .mm-front-dish:first-child { padding-top: 14px; }
/* Asegurar visibilidad de la imagen del primer plato y todos */
.mm-layout-card .mm-front-dish-img { opacity: 1 !important; visibility: visible !important; }
.mm-layout-card .mm-front-dish-img img { display: block !important; max-width: 100%; height: auto; }
/* Asegurar visibilidad del precio en todos los platos */
.mm-front-dish-price { display: inline-flex !important; align-items: baseline; opacity: 1 !important; }
/* Cabecera categoría no tapa el primer item */
.mm-front-cat-head { position: relative; z-index: 1; }
.mm-layout-card { position: relative; z-index: 2; }