/* ==========================================================================
   MediActiv - responsive.css - Ajustes responsive globales.
   Cargado en TODO el sitio tras main.css (la home usa .mc-product y no carga woo.css).
   ========================================================================== */

/* --- Tarjeta de producto (home "más vendido" + tienda + relacionados):
       igualar alturas de tarjeta y anclar el botón "Añadir al carrito" abajo,
       para que todos los botones queden alineados aunque el título ocupe
       distinto número de líneas. --- */
.mc-product{height:100%}
.mc-product__body{flex:1 1 auto}
.mc-product__add{margin-top:auto;line-height:1.25}

/* Móvil: en 2 columnas el botón "Añadir al carrito" rompía en 2 líneas y
   desalineaba. Botón más compacto (menos tracking/padding) + título algo menor. */
@media(max-width:560px){
	.mc-product__add{letter-spacing:.05em;padding:.85em .6em;font-size:.63rem}
	.mc-product__title{font-size:1rem}
	.mc-product__body{padding-top:.9rem}
}

/* ==========================================================================
   HEADER MÓVIL (<=860px)
   - Fuera la franja naranja (announce)
   - Orden: [lupa] [usuario]  ·LOGO centrado·  [carrito] [menú]
   - Conmutador de idiomas fuera del header (va al final del menú desplegable)
   - Menú desplegable: solo elementos principales; los que tienen hijos, flecha
     para desplegar/plegar (accordion)
   ========================================================================== */
@media(max-width:860px){
	/* fuera la franja naranja en móvil */
	.mc-announce{display:none!important}

	/* aplanar el header para poder ordenar iconos alrededor del logo */
	.mc-header__inner{display:flex!important;align-items:center;gap:.4rem}
	.mc-header__right{display:contents!important}
	.mc-header__actions{display:contents!important}
	.mc-nav--left,.mc-nav--right{display:none!important}
	.mc-header__actions .mc-lang{display:none!important}   /* idiomas fuera del header... */
	.mc-lang--mobile{display:flex!important}               /* ...pero visible al final del menú */

	.mc-search-btn{order:1}
	.mc-user{order:2}
	.mc-logo{order:3;margin-inline:auto;justify-self:center}
	.mc-cart{order:4}
	.mc-burger{order:5;justify-self:auto}

	/* --- Menú desplegable: accordion --- */
	.mc-menu--mobile>li{display:flex;flex-wrap:wrap;align-items:center;width:100%;gap:0}
	.mc-menu--mobile>li>a{flex:1 1 auto}
	/* botón flecha (inyectado por JS) */
	.mc-subtoggle{flex:0 0 auto;background:none;border:0;padding:.5rem .3rem;margin:0;color:var(--mc-ink);cursor:pointer;display:inline-flex;align-items:center;transition:transform .25s ease}
	.mc-menu--mobile>li.is-open>.mc-subtoggle{transform:rotate(180deg)}
	/* submenús ocultos por defecto; se despliegan al abrir.
	   Animación de altura con grid-template-rows (0fr->1fr): sin layout thrash. */
	.mc-menu--mobile .mc-submenu-wrap{flex:1 1 100%;display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s ease}
	.mc-menu--mobile>li.is-open>.mc-submenu-wrap{grid-template-rows:1fr}
	.mc-menu--mobile .mc-submenu{overflow:hidden;min-height:0;padding:0 0 0 1rem!important;opacity:1;visibility:visible}
}

/* ==========================================================================
   FOOTER MÓVIL
   - Botones flotantes (WhatsApp + carrito) no deben tapar las políticas
   - Listas de enlaces a 2 columnas cuando el footer colapsa a 1 columna
   ========================================================================== */
@media(max-width:768px){
	/* espacio inferior para que los flotantes no se solapen con el contenido final */
	.mc-footer{padding-bottom:96px}
}
@media(max-width:560px){
	/* listas de enlaces en 2 columnas (el footer ya está a 1 columna aquí) */
	.mc-footer__col ul{grid-template-columns:1fr 1fr;gap:.7rem 1.4rem}
}