/* ========================================================
   LISTA DE DESEOS — ver inc/lista-deseos.php.
   ======================================================== */

/* Botón de corazón sobre la imagen de cada tarjeta de producto (catálogo,
   home, recomendaciones, carrito) — esquina superior derecha, sin fondo/
   círculo propio (pedido explícito: al pasar el mouse SOLO se pinta el
   corazón, nada más alrededor). .mmc-catalogo-img-wrapper/.mmc-home-img-wrapper
   ya tienen position:relative, así que solo hace falta posicionar el botón
   encima; z-index por sobre .hover-image (z-index:2). */
/* Reset agresivo: al ser un <button> pelado, el CSS genérico de botones del tema (Kadence/WC) lo
   estaba pintando como botón cuadrado azul en hover/focus — se anula acá explícitamente, en vez de
   depender de que ninguna otra regla del tema le gane por especificidad/orden de carga. */
.mmc-boton-deseo,
.mmc-boton-deseo:hover,
.mmc-boton-deseo:focus,
.mmc-boton-deseo:active {
    position: absolute;
    top: 10px; /* misma altura que .onsale del catálogo (top:10px), que arranca justo en el borde de la tarjeta */
    right: 10px;
    z-index: 3;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    border-radius: 0 !important;
    -webkit-appearance: none;
    appearance: none;
    padding: 0 !important;
    margin: 0 !important;
    min-width: 0 !important;
    line-height: 1 !important;
    cursor: pointer;
}
.mmc-boton-deseo .mmc-icono-corazon {
    width: 100%;
    height: 100%;
}
/* Tres estados, iguales en TODO el sitio (catálogo, carrusel de la Home, recomendaciones, carrito):
     1. Sin guardar   → vacío con borde negro.
     2. Con el mouse  → el borde pasa al celeste de la marca, sigue vacío.
     3. Guardado      → relleno completo en celeste.
   El orden importa: "guardado" va última para que, si el producto ya está guardado y además se
   pasa el mouse, siga viéndose relleno y no solo con el borde.
   Antes: borde gris #b3b3b3 y relleno negro tanto al pasar el mouse como al guardarlo, así que no
   se distinguía "lo estoy señalando" de "ya lo guardé". */
.mmc-boton-deseo .mmc-icono-corazon path {
    fill: #fff;
    stroke: #111;
    stroke-width: 1.3;
    transition: fill .15s ease, stroke .15s ease;
}
.mmc-boton-deseo:hover .mmc-icono-corazon path {
    fill: #fff;
    stroke: #38B8C4;
}
.mmc-boton-deseo.mmc-activo .mmc-icono-corazon path,
.mmc-boton-deseo.mmc-activo:hover .mmc-icono-corazon path {
    fill: #38B8C4;
    stroke: #38B8C4;
}
.mmc-boton-deseo.mmc-cargando { opacity: .6; pointer-events: none; }

/* Carrusel de home: .mmc-home-img-wrapper ya arranca 12px adentro del borde de la tarjeta (el
   padding:12px de .mmc-home-card, ver css/carrusel.css) — el mismo inset que usa
   .mmc-home-sale-badge (top:12px, medido directo desde el borde de la tarjeta). Si el corazón
   usara acá el top:10px de base (pensado para el catálogo, donde el wrapper SÍ arranca pegado al
   borde de la tarjeta) quedaría 12px más abajo que el descuento — top:0 lo deja a la misma altura. */
/* Acá solo queda la POSICIÓN: los colores y el tamaño del corazón ya son los mismos en todo el
   sitio (ver el bloque de tres estados más arriba). */
.mmc-home-img-wrapper .mmc-boton-deseo {
    top: 0;
}

/* Ícono del header — [mmc_wishlist_icon]. vertical-align:middle además de inline-flex: la fila del
   header de Kadence no siempre trata a sus elementos como flex-items, esto asegura que quede a la
   misma altura que el ícono de cuenta y el del carrito sin importar cómo Kadence arme esa fila. */
.mmc-header-deseos-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: inherit;
    text-decoration: none !important;
    vertical-align: middle;
}
.mmc-header-deseos-link .mmc-icono-corazon {
    width: 22px;
    height: 22px;
}
.mmc-header-deseos-link .mmc-icono-corazon path {
    fill: none;
    stroke: currentColor;
    stroke-width: 1;
}
.mmc-header-deseos-badge {
    position: absolute;
    top: -6px;
    right: -8px;
    background: #e0295b;
    color: #fff;
    border-radius: 999px;
    min-width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
    padding: 0 4px;
    line-height: 1;
}

/* ========================================================
   GRILLA DE FAVORITOS — usada en Mi Cuenta → Lista de deseos Y en la página
   dedicada "Favoritos" ([mmc_favoritos]). Cada producto se imprime tal cual
   con la tarjeta de la Home (mmc_render_tarjeta_home(), inc/carrusel.php,
   clases .mmc-home-*, estilos en css/carrusel.css) — acá solo se define la
   grilla en sí (es un <ul> real, con reset de lista).
   ======================================================== */
.mmc-favoritos-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    list-style: none;
    margin: 0 !important;
    padding: 0 !important; /* pisa el padding-left que el tema le pone por defecto a los <ul> */
}
@media (max-width: 900px) {
    .mmc-favoritos-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
    .mmc-favoritos-grid { grid-template-columns: 1fr; }
}

/* ========================================================
   PÁGINA "FAVORITOS" — [mmc_favoritos]. El título de la página es nativo de
   WordPress (no se repite acá); esto es solo el contenido debajo.
   ======================================================== */
.mmc-favoritos-pagina {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    box-sizing: border-box;
}
.mmc-favoritos-aviso,
.mmc-favoritos-lista-bloque {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 10px;
    padding: 30px;
    box-sizing: border-box;
}
.mmc-favoritos-aviso {
    text-align: center;
    padding: 50px 30px;
}
.mmc-favoritos-aviso h2 {
    margin: 0 0 10px;
    font-size: 24px;
    font-weight: 800;
    color: #111;
}
.mmc-favoritos-aviso p {
    margin: 0 0 20px;
    color: #555;
    font-size: 14px;
}
.mmc-favoritos-aviso-botones {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
.mmc-favoritos-btn-negro,
.mmc-favoritos-btn-outline {
    display: inline-block;
    min-width: 200px;
    text-align: center;
    padding: 12px 24px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none !important;
    box-sizing: border-box;
}
.mmc-favoritos-btn-negro {
    background: #111;
    color: #fff !important;
    border: 1px solid #111;
}
.mmc-favoritos-btn-negro:hover { background: #333; }
.mmc-favoritos-btn-outline {
    background: transparent;
    color: #111 !important;
    border: 1px solid #111;
}
.mmc-favoritos-btn-outline:hover { background: #f5f5f5; }

.mmc-favoritos-nota-cookie {
    background: #f5f8fc;
    border: 1px solid #dce6f2;
    border-radius: 8px;
    padding: 12px 16px;
    font-size: 13px;
    color: #444;
    margin: 0 0 16px;
}
.mmc-favoritos-contador {
    font-size: 13px;
    color: #666;
    margin: 0 0 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid #eee;
}
.mmc-favoritos-vacio {
    text-align: center;
    color: #666;
    font-size: 14px;
    margin: 0;
}