/* ==========================================================================
   CARRUSEL HOME (AISLADO) - SWIPER
   ========================================================================== */
.mmc-home-carousel { 
    position: relative; 
    overflow: hidden; 
    padding: 10px 0; 
    margin: 20px 0; 
    width: 100%; /* Límite de pared a pared */
    min-width: 0; /* 🔥 EL ANTÍDOTO MÁGICO CONTRA EL INFINITO 🔥 */
    box-sizing: border-box;
}

.mmc-home-carousel .swiper-slide { 
    height: auto !important; 
    display: flex; 
    align-items: stretch; 
    box-sizing: border-box;
}

/* Tarjeta */
.mmc-home-card {
    position: relative; /* ancla al .mmc-home-sale-badge — ANTES faltaba, así que el badge se
       posicionaba respecto al carrusel entero (.mmc-home-carousel), no a su propia tarjeta */
    display: flex; flex-direction: column; background: #fff;
    border: 1px solid #e2e8f0; border-radius: 8px; padding: 12px;
    /* Misma letra que el resumen del modal (la carga el plugin del mega menú en todo el sitio);
       si faltara, cae en la del tema. */
    font-family: 'Roboto', 'Poppins', -apple-system, 'Segoe UI', Arial, sans-serif;
    width: 100%; /* Fuerza a la tarjeta a respetar el ancho del slide */
    box-sizing: border-box;
}
/* Sin cambio de borde al pasar el mouse: antes se oscurecía a #d8d8d8 y remarcaba toda la tarjeta.
   El borde base (#e2e8f0) queda igual siempre, así que la tarjeta no "salta" ni se resalta. */

/* Imagen */
.mmc-home-img-wrapper {
    width: 100%; position: relative; display: block; overflow: hidden;
    border-radius: 6px; background-color: #fff; margin-bottom: 12px;
    aspect-ratio: 500 / 370; /* Mantiene la proporción horizontal de tus lentes */
    box-sizing: border-box;
}
.mmc-home-img-wrapper img {
    position: absolute !important; top: 0; left: 0; width: 100% !important; height: 100% !important;
    object-fit: contain !important; transition: opacity 0.4s ease !important; margin: 0;
}
.mmc-home-img-wrapper .hover-image { opacity: 0; z-index: 2; }
.mmc-home-card:hover .mmc-home-img-wrapper .hover-image { opacity: 1; }
.mmc-home-card:hover .mmc-home-img-wrapper > img:not(.hover-image) { opacity: 0; }

/* Info Box */
.mmc-home-info-box { display: flex; flex-direction: column; flex-grow: 1; }

/* ==========================================================================
   JERARQUÍA VISUAL: PRECIO, TÍTULO Y COLOR (antes: Categoría, Título+Precio,
   Color — la categoría se ocultó por pedido del usuario, ver inc/carrusel.php).
   Ahora van uno debajo del otro (ya no en una fila Título/Precio lado a lado),
   siguiendo el orden natural de .mmc-home-info-box (flex-direction: column).
   ========================================================================== */

/* Categoría — regla comentada, no se borra por si se vuelve a mostrar más
   adelante (el <span class="mmc-home-cat"> ya no se imprime, ver inc/carrusel.php).
.mmc-home-cat { font-size: 10px; text-transform: uppercase; margin-bottom: 6px; display: block; }
.mmc-home-cat a { color: #999 !important; text-decoration: none !important; transition: color 0.2s ease; }
.mmc-home-cat a:hover { color: #111 !important; }
*/

/* Precio (arriba de todo) — rojo de marca #e0102c y peso normal, como la referencia: antes iba en
   negrita y en otro rojo (#e63946). */
.mmc-home-price { display: block; font-size: 16px; font-weight: 500; color: #e0102c; margin-bottom: 4px; }
.mmc-home-price del { color: #9aa5ad; font-weight: 400; font-size: 14px; margin-right: 6px; }
.mmc-home-price ins { text-decoration: none; color: #e0102c; }

/* Título (17px y con puntos suspensivos) */
.mmc-home-title-link { display: block; min-width: 0; text-decoration: none !important; }
/* Nombre en peso normal (antes 700): en la referencia el título no compite con el precio. */
.mmc-home-title {
    font-size: 15px; font-weight: 400; color: #3a4850; margin: 0 0 10px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ==========================================================================
   ETIQUETA DE OFERTA Y BOTÓN
   ========================================================================== */

/* Etiqueta Oferta — píldora negra, mismo lenguaje visual que el resto del sitio (aro de
   .mmc-color-dot-activo, botones sólidos, etc.), a la izquierda de la tarjeta. */
/* Etiqueta de descuento — mismo criterio que la del flujo de lentes (.mmc-opcion-badge en
   css/modal-optica.css): pegada a la esquina superior izquierda, esquinas casi rectas y rojo
   suave (fondo rosado claro con el texto en rojo). Antes era una píldora negra flotante con
   sombra. */
.mmc-home-sale-badge {
    /* top/left 12px: la misma separación que tiene el corazón de favoritos (que arranca en el
       borde de la caja de la foto, 12px adentro por el padding de la tarjeta). Así los dos quedan
       a la misma altura. Si se cambia este valor, revisar .mmc-home-img-wrapper .mmc-boton-deseo
       en css/lista-deseos.css. */
    position: absolute; top: 12px; left: 12px; background: #fef4f6; color: #e0102c;
    font-size: 11px; letter-spacing: .04em; padding: 4px 10px;
    border-radius: 2px; z-index: 10; text-transform: uppercase;
    /* Roboto en peso delgado (300) — esa variante se carga desde el plugin del mega menú
       (Extra/plugins/mega-menu-custom/mega-menu-custom.php, wght@300;400;500;700). */
    font-family: 'Roboto', 'Poppins', -apple-system, 'Segoe UI', Arial, sans-serif;
    font-weight: 300;
}

/* Botón de compra */
.mmc-home-buy-btn {
    display: block; width: 100%; text-align: center; margin-top: auto; 
    background: #2b6282; color: #fff; font-size: 14px; font-weight: 600; 
    padding: 10px 0; border-radius: 4px; text-decoration: none !important; transition: background 0.2s;
}
.mmc-home-buy-btn:hover { background: #1f4a63; color: #fff; }

/* ==========================================================================
   FLECHAS SWIPER Y FIX DE CARGA
   ========================================================================== */

/* Flechas */
.mmc-home-carousel .mmc-home-swiper-btn {
    background-color: #ffffff !important; border: 1px solid #e2e8f0; width: 40px !important; height: 40px !important;
    border-radius: 50% !important; box-shadow: 0 2px 8px rgba(0,0,0,0.08); z-index: 10;
    display: flex; align-items: center; justify-content: center; position: absolute; top: 50%; transform: translateY(-50%); cursor: pointer;
}
.mmc-home-carousel .mmc-home-swiper-btn::after { font-size: 14px !important; color: #333; font-weight: 700; }
.mmc-home-carousel .swiper-button-prev { left: 0px; }
.mmc-home-carousel .swiper-button-next { right: 0px; }
@media (max-width: 768px) { .mmc-home-carousel .mmc-home-swiper-btn { display: none !important; } }

/* FOUC (Evitar saltos antes de cargar) */
.mmc-home-carousel:not(.swiper-initialized) { display: flex; overflow: hidden; gap: 15px; flex-wrap: nowrap; width: 100%; box-sizing: border-box; }
.mmc-home-carousel:not(.swiper-initialized) .swiper-slide { width: 25% !important; flex: 0 0 25%; box-sizing: border-box; }
@media (max-width: 768px) { .mmc-home-carousel:not(.swiper-initialized) .swiper-slide { width: 45% !important; flex: 0 0 45%; } }

/* ==========================================================================
   ESPACIADO EN MÓVILES (BORDES LATERALES)
   ========================================================================== */
@media (max-width: 768px) {
    .mmc-home-carousel { 
        padding-left: 21px !important; 
        padding-right: 21px !important; 
    }
}