/* =========================================================
   DYSKEU: VERSIÓN FINAL (FIX IMAGEN + TEXTOS)
   ========================================================= */

/* 1. EL GRID (ESTRUCTURA) */
.woocommerce ul.products, .wp-block-post-template {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
    gap: 20px !important;
    align-items: stretch !important; /* Estira todas las cajas igual */
}

/* 2. LA TARJETA (CONTENEDOR) */
.woocommerce ul.products li.product, .wp-block-post {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important; 
    border: 1px solid #e0e0e0 !important;
    border-radius: 8px !important;
    padding: 15px !important;
    background: #fff !important;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05) !important;
    box-sizing: border-box !important;
}

/* --- 3. EL FIX DE LA IMAGEN (TÉCNICA DE FRANCOTIRADOR) --- */
/* Usamos la clase exacta que encontraste en tu código */

img.attachment-woocommerce_thumbnail, 
.wp-block-post-featured-image img {
    /* 1. ROMPEMOS EL TAMAÑO ORIGINAL */
    height: 220px !important; /* Altura obligatoria para el grid */
    width: 100% !important;
    
    /* 2. SOBRESCRIBIMOS EL 'COVER' */
    /* Esto obliga a que se vea la carta entera, aunque sobren bordes blancos */
    object-fit: contain !important; 
    font-family: 'object-fit: contain;' !important; /* Hack para navegadores viejos */
    
    /* 3. ALINEACIÓN */
    object-position: center center !important;
    margin-bottom: 15px !important;
    background-color: transparent !important;
    
    /* 4. LIMPIEZA */
    max-width: none !important;
    max-height: none !important;
}

/* --- 4. TEXTOS (TÍTULO) --- */
h2.wp-block-post-title, 
h2.wp-block-post-title a,
.woocommerce-loop-product__title {
    font-size: 19px !important; 
    font-weight: 700 !important; 
    text-align: center !important;
    line-height: 1.3 !important; 
    
    /* Espacio reservado para 3 líneas */
    min-height: 3.9em !important; 
    
    overflow: hidden !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important; 
    -webkit-box-orient: vertical !important;
    margin-bottom: 15px !important;
    
    text-decoration: none !important;
    /* USA TU COLOR ORIGINAL (VIOLETA) */
}

/* 5. PRECIO (ALINEADOR) */
.price {
    margin-top: auto !important; 
    display: block !important;
    text-align: center !important;
    font-size: 1.1em !important; 
    font-weight: bold !important;
    margin-bottom: 10px !important;
}

/* 6. BOTÓN */
.wp-block-button, .add_to_cart_button, .button {
    width: 100% !important;
    display: block !important;
    text-align: center !important;
}

/* --- REGLAS MÓVIL (2 COLUMNAS + 5 LÍNEAS) --- */
@media only screen and (max-width: 767px) {
    
    /* 2 Productos por fila */
    .woocommerce ul.products, .wp-block-post-template {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important; 
    }

    /* Imagen más chica en móvil */
    img.attachment-woocommerce_thumbnail, 
    .wp-block-post-featured-image img {
        height: 160px !important;
    }

    /* Título Móvil: Letra ajustada y más líneas */
    h2.wp-block-post-title, 
    h2.wp-block-post-title a,
    .woocommerce-loop-product__title {
        font-size: 14px !important; 
        -webkit-line-clamp: 5 !important; 
        min-height: 6.5em !important;
    }
}
/* =========================================================
   EFECTO AGOTADO: RADAR AMPLIADO (PARA STOCK 0 SIN BOTÓN)
   ========================================================= */

/* 1. SELECCIONAMOS POR CLASES ESTÁNDAR DE WOOCOMMERCE */
/* Captura productos agotados, fuera de stock o sin precio */
.woocommerce ul.products li.product.outofstock,
.woocommerce ul.products li.product.out-of-stock,
.wp-block-post.outofstock,
.wp-block-post.out-of-stock,
/* Y también capturamos por el detector de botón que ya nos funcionó */
.wp-block-post:has([data-wp-context*="Avísame"]),
.woocommerce ul.products li.product:has(a[aria-label*="Lee más"]) {
    
    /* Aplicamos el filtro de blanco y negro a la tarjeta completa */
    filter: grayscale(1) !important;
    -webkit-filter: grayscale(100%) !important;
    opacity: 0.7 !important;
    isolation: isolate !important;
}

/* 2. FORZADO DIRECTO A LA IMAGEN */
/* Para asegurar que la imagen pierda el color incluso en esos productos rebeldes */
.outofstock img,
.out-of-stock img,
.woocommerce-badge.out-of-stock-badge + a img {
    filter: grayscale(100%) !important;
    -webkit-filter: grayscale(100%) !important;
    mix-blend-mode: luminosity !important;
}

/* 3. RESCATAMOS CUALQUIER BOTÓN QUE EXISTA */
/* Si por casualidad aparece un botón de "Leer más", lo dejamos visible */
.outofstock .wp-block-button,
.out-of-stock .wp-block-button,
.outofstock .button {
    filter: grayscale(0) !important;
    -webkit-filter: grayscale(0%) !important;
    opacity: 1 !important;
}
/* =========================================================
   DYSKEU: AGOTADO EN ROJO VIBRANTE (CORRECCIÓN FINAL)
   ========================================================= */

/* 1. FILTRO GRIS (Solo a la imagen y textos, evitando el contenedor raíz) */
.wc-block-product:has(a[aria-label*="Lee más"]) img,
.wc-block-product:has(a[aria-label*="Lee más"]) .wp-block-post-title,
.wc-block-product:has(a[aria-label*="Lee más"]) .wc-block-components-product-price {
    filter: grayscale(100%) !important;
    -webkit-filter: grayscale(100%) !important;
    opacity: 0.6 !important;
}

/* 2. ETIQUETA ROJA CON PROTECCIÓN DE COLOR */
/* Usamos 'after' en lugar de 'before' para que quede por encima de todo */
.wc-block-product:has(a[aria-label*="Lee más"]) .wc-block-grid__product-image::after,
.wc-block-product:has([data-wp-context*="Avísame"]) .wc-block-grid__product-image::after {
    content: "AGOTADO" !important;
    position: absolute !important;
    top: 10px !important;
    left: 10px !important;
    z-index: 99999 !important;
    
    /* Color Rojo */
    background: #ff0000 !important; 
    color: #ffffff !important;
    
    padding: 5px 12px !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    border-radius: 4px !important;
    box-shadow: 0px 4px 10px rgba(0,0,0,0.5) !important;
    
    /* ESTA ES LA CLAVE: Anulamos cualquier filtro heredado */
    filter: brightness(1) saturate(1) grayscale(0) !important;
    -webkit-filter: brightness(1) saturate(1) grayscale(0) !important;
    display: block !important;
}

/* 3. BOTÓN VIOLETA (YA FUNCIONA, LO MANTENEMOS) */
.wc-block-product:has(a[aria-label*="Lee más"]) .wp-block-button__link {
    filter: none !important;
    -webkit-filter: none !important;
    background-color: #663399 !important;
    color: white !important;
    opacity: 1 !important;
}

/* 4. ASEGURAR QUE EL CONTENEDOR NO TENGA FILTRO GLOBAL */
.wc-block-product {
    filter: none !important;
    -webkit-filter: none !important;
}