/**
 * Igualar altura de tarjetas de productos
 * VERSIÓN CON DISTRIBUCIÓN CORRECTA DE ESPACIOS
 * 
 * Distribución:
 * - Imagen: Área grande fija (aunque imagen sea pequeña)
 * - Título: 3 líneas
 * - [ESPACIO FLEXIBLE]
 * - Precio: Centrado, justo encima de categoría
 * - Categoría: Centrada
 * - Botón: Final
 */

/* ============================================
   ESTRUCTURA BASE
   ============================================ */

/* El contenedor UL de productos */
ul.products {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: stretch !important;
}

/* Cada LI (tarjeta de producto) es un flex container vertical */
ul.products li.product {
    display: flex !important;
    flex-direction: column !important;
}

/* El link principal que contiene imagen, título y precio */
ul.products li.product > a.woocommerce-LoopProduct-link:first-child {
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1 !important;
}

/* ============================================
   IMÁGENES - Área grande fija
   ============================================ */
ul.products li.product img {
    flex-shrink: 0 !important;
    width: 100% !important;
    /* Altura mínima para reservar espacio */
    min-height: 350px !important;
    object-fit: cover !important;
    margin-bottom: 15px !important;
}

/* ============================================
   TÍTULOS - 3 líneas máximo
   ============================================ */
ul.products li.product h2.woocommerce-loop-product__title {
    /* Altura para 3 líneas */
    min-height: 3.5em !important;
    max-height: 4.5em !important;
    margin-bottom: -5px !important;
    line-height: 1.2 !important;
    
    /* Alineado en el centro */
    text-align: center !important;
    
    /* Cortar texto después de 3 líneas */
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;

    /* Color Textos */
    color: #3f3f3f !important;
}


/* ============================================
   ESPACIADOR - Empuja el precio hacia abajo
   ============================================ */
/* Añadir un div espaciador sería ideal, pero como no podemos 
   modificar el HTML, usamos margin-top: auto en el precio */

/* ============================================
   PRECIOS - Centrados y abajo
   ============================================ */
ul.products li.product .price {
    /* Altura fija para todos */
    min-height: 3.5em !important;
    
    /* CENTRADO */
    text-align: center !important;
    
    /* Empujar hacia abajo - justo encima de categoría */
    margin-top: auto !important;
    margin-bottom: 0px !important;
    
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;

    /* Color Texto */
    color: #373737 !important;
}

/* Precio normal (sin rebaja) - CENTRADO */
ul.products li.product .price .woocommerce-Price-amount {
    font-size: 1em !important;
    font-weight: 600 !important;
}

/* Precio original TACHADO (cuando hay rebaja) - CENTRADO */
ul.products li.product .price del {
    display: block !important;
    margin-bottom: 4px !important;
    opacity: 0.6 !important;
    text-align: center !important;
}

ul.products li.product .price del .woocommerce-Price-amount {
    font-size: 0.9em !important;
    font-weight: 400 !important;
    text-decoration: line-through !important;
    color: #999 !important;
}

/* Precio REBAJADO (más grande y destacado) - CENTRADO */
ul.products li.product .price ins {
    display: block !important;
    text-decoration: none !important;
    background: none !important;
    text-align: center !important;
}

ul.products li.product .price ins .woocommerce-Price-amount {
    font-size: 1.2em !important;
    font-weight: 700 !important;
    color: #e74c3c !important;
}

/* Texto "IVA Incluido" - CENTRADO */
ul.products li.product .price .woocommerce-price-suffix {
    display: block !important;
    font-size: 0.75em !important;
    margin-top: 2px !important;
    opacity: 0.7 !important;
    text-align: center !important;
}

/* ============================================
   CATEGORÍAS - Centradas
   ============================================ */
ul.products li.product .archive-product-categories {
    min-height: 1.5em !important;
    margin-bottom: -10px !important;
    flex-shrink: 0 !important;
    
    /* CENTRADO */
    text-align: center !important;
}

/* ============================================
   BOTONES - Centrados
   ============================================ */
ul.products li.product > a.button {
    margin-top: 10px !important;
    flex-shrink: 0 !important;
    text-align: center !important;
}

/* ============================================
   RESPONSIVE - 3 Breakpoints
   ============================================ */

/* TABLETS - max-width: 1024px */
@media (max-width: 1024px) {
    /* Área de imagen un poco más pequeña en tablets */
    ul.products li.product img {
        min-height: 300px !important;
    }
    
    /* Títulos se mantienen igual (3 líneas) */
    ul.products li.product h2.woocommerce-loop-product__title {
        min-height: 4.2em !important;
        max-height: 4.2em !important;
        font-size: 0.95em !important;
    }
    
    /* Precios un poco más pequeños */
    ul.products li.product .price {
        min-height: 3.2em !important;
    }
    
    ul.products li.product .price .woocommerce-Price-amount {
        font-size: 0.95em !important;
    }
    
    ul.products li.product .price ins .woocommerce-Price-amount {
        font-size: 1.1em !important;
    }
}

/* MÓVILES - max-width: 480px */
@media (max-width: 480px) {
    /* Área de imagen más pequeña en móviles */
    ul.products li.product img {
        min-height: 220px !important;
    }
    
    /* Títulos pueden ser un poco más altos si es necesario */
    ul.products li.product h2.woocommerce-loop-product__title {
        min-height: 4.5em !important;
        max-height: 4.5em !important;
        font-size: 0.9em !important;
        margin-bottom: 10px !important;
    }
    
    /* Precios más flexibles en móviles */
    ul.products li.product .price {
        min-height: auto !important;
        margin-bottom: 10px !important;
    }
    
    ul.products li.product .price .woocommerce-Price-amount {
        font-size: 0.9em !important;
    }
    
    ul.products li.product .price ins .woocommerce-Price-amount {
        font-size: 1.05em !important;
    }
    
    /* Categorías más flexibles */
    ul.products li.product .archive-product-categories {
        min-height: auto !important;
        font-size: 0.85em !important;
    }
    
    /* Botones un poco más pequeños */
    ul.products li.product > a.button {
        font-size: 0.9em !important;
        padding: 8px 15px !important;
    }
}

/* MÓVILES PEQUEÑOS - max-width: 360px */
@media (max-width: 360px) {
    /* Área de imagen aún más pequeña en móviles pequeños */
    ul.products li.product img {
        min-height: 180px !important;
    }
    
    /* Títulos más compactos */
    ul.products li.product h2.woocommerce-loop-product__title {
        min-height: 4em !important;
        max-height: 4em !important;
        font-size: 0.85em !important;
        line-height: 1.3 !important;
    }
    
    /* Precios más pequeños */
    ul.products li.product .price .woocommerce-Price-amount {
        font-size: 0.85em !important;
    }
    
    ul.products li.product .price ins .woocommerce-Price-amount {
        font-size: 1em !important;
    }
    
    ul.products li.product .price .woocommerce-price-suffix {
        font-size: 0.7em !important;
    }
    
    /* Categorías más pequeñas */
    ul.products li.product .archive-product-categories {
        font-size: 0.8em !important;
    }
    
    /* Botones más compactos */
    ul.products li.product > a.button {
        font-size: 0.85em !important;
        padding: 6px 12px !important;
    }
}