/**
 * PRODUCT CARD FIX RADICAL - Sin Quick View en Móvil
 * Solución: Eliminar botón Vista rápida en móvil, mantener solo en PC
 * Versión: 3.0 - Solución Radical Mobile-First
 * Fecha: 2025-07-28
 */

/* ================================================
   SOLUCIÓN PRINCIPAL: Quick View sin superposición
   ================================================ */

/* ================================================
   MÓVIL: ELIMINAR COMPLETAMENTE EL BOTÓN VISTA RÁPIDA
   ================================================ */

/* MÓVIL ÚNICAMENTE: Sin botón Vista rápida - Imagen limpia al 100% */
@media (max-width: 767px) {
    body .product-miniature .thumbnail-container .highlighted-informations,
    body article.product-miniature .thumbnail-container .highlighted-informations,
    body .products .product-miniature .thumbnail-container .highlighted-informations {
        display: none !important; /* OCULTAR completamente SOLO en móvil */
    }
}

/* ================================================
   IMAGEN: Asegurar visualización completa
   ================================================ */

/* Contenedor de imagen optimizado - SIN limitaciones de altura */
.product-miniature .thumbnail-container .thumbnail-top {
    position: relative;
    overflow: visible; /* SOLUCIÓN: Permitir imagen completa */
    background: #f8f9fa;
}

/* Imagen siempre visible completamente */
.product-miniature .thumbnail-container .thumbnail-top .thumbnail {
    display: block;
    width: 100%;
    position: relative;
}

/* SOBRESCRIBIR: CSS problemático del tema con especificidad máxima */
body .js-product.product .product-thumbnail img,
body .product-miniature .thumbnail-container .thumbnail-top .thumbnail img,
body .products .product-miniature .thumbnail-container .thumbnail-top .thumbnail img {
    width: 100% !important;
    height: auto !important; /* CRÍTICO: Eliminar altura fija que corta imágenes */
    object-fit: contain !important; /* SOLUCIÓN: Muestra imagen COMPLETA sin recortar */
    display: block !important;
}

/* ================================================
   MÓVIL: FORZAR IMÁGENES COMPLETAS - ESPECIFICIDAD NUCLEAR
   ================================================ */

/* MÓVIL: Forzar imágenes completas sin recortes */
@media (max-width: 767px) {
    /* ESPECIFICIDAD NUCLEAR para sobrescribir cualquier CSS del tema */
    body .js-product.product .product-thumbnail img,
    body .product-miniature .thumbnail-container .thumbnail-top .thumbnail img,
    body .products .product-miniature .thumbnail-container .thumbnail-top .thumbnail img,
    body article.product-miniature .thumbnail-container .thumbnail-top .thumbnail img {
        height: auto !important; /* ELIMINAR altura fija 220px */
        max-height: none !important; /* ELIMINAR cualquier limitación */
        object-fit: contain !important; /* MOSTRAR imagen completa */
        object-position: center !important; /* CENTRAR imagen */
        width: 100% !important;
        display: block !important;
    }
    
    /* Contenedor móvil sin limitaciones */
    body .product-miniature .thumbnail-container .thumbnail-top,
    body .js-product.product .thumbnail-container .thumbnail-top {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }
}

/* ================================================
   TÍTULOS: Mostrar completo en máximo 2 líneas
   ================================================ */

/* Título del producto en 2 líneas máximo */
.product-title,
.product-title a {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    line-height: 1.4 !important;
    height: auto !important;
    max-height: 2.8em !important; /* 2 líneas */
    text-overflow: ellipsis !important;
    word-wrap: break-word !important;
}

/* ================================================
   DESKTOP: 768px+ - AQUÍ SÍ MOSTRAR VISTA RÁPIDA
   ================================================ */

@media (min-width: 768px) {
    /* ACTIVAR Vista rápida solo en PC/Tablet grande */
    .product-miniature .thumbnail-container .highlighted-informations {
        /* Mostrar el botón en desktop */
        display: block !important;
        
        /* Posicionamiento limpio debajo de imagen */
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        transform: none !important;
        
        /* Estilo desktop limpio */
        width: 100%;
        background: #f8f9fa !important;
        padding: 10px !important;
        text-align: center;
        border-top: 1px solid #dee2e6;
        
        /* Siempre visible en desktop */
        opacity: 1 !important;
        visibility: visible !important;
        
        /* Transición suave */
        transition: background-color 0.2s ease;
    }
    
    /* Hover desktop */
    .product-miniature .thumbnail-container:hover .highlighted-informations {
        background: #ffffff !important;
    }
    
    /* Botón Vista rápida para desktop */
    .highlighted-informations .quick-view {
        font-size: 14px !important;
        color: #333333 !important;
        text-decoration: none !important;
        font-weight: 500;
        padding: 8px 16px !important;
        border-radius: 4px;
        background: #e9ecef !important;
        border: 1px solid #ced4da !important;
        transition: all 0.2s ease;
        display: inline-block;
        min-height: 36px;
        line-height: 1.4;
    }
    
    /* Hover desktop */
    .highlighted-informations .quick-view:hover {
        color: #ffffff !important;
        background: #24b9d7 !important;
        border-color: #1d93ab !important;
        text-decoration: none !important;
    }
    
    /* Focus desktop */
    .highlighted-informations .quick-view:focus {
        outline: 2px solid #24b9d7 !important;
        outline-offset: 2px;
    }
    
    /* Icono desktop */
    .highlighted-informations .quick-view i {
        margin-right: 5px;
        font-size: 16px;
    }
}

/* ================================================
   COMPATIBILIDAD: Variantes de producto
   ================================================ */

/* Asegurar que funciona con y sin variantes */
.highlighted-informations.no-variants,
.product-miniature .thumbnail-container:hover .highlighted-informations.no-variants {
    position: relative !important;
    top: auto !important;
}

/* ================================================
   BACKUP: Ocultar reglas problemáticas antiguas
   ================================================ */

/* Desactivar animaciones problemáticas del tema original */
.product-miniature .thumbnail-container .highlighted-informations::after,
.product-miniature .thumbnail-container:hover .highlighted-informations::after {
    display: none !important;
}

/* Fix para elementos que pueden estar interfiriendo */
.product-miniature .thumbnail-container {
    position: relative;
    overflow: visible;
}

.product-miniature .thumbnail-container .thumbnail-top {
    z-index: 1;
}

.product-miniature .thumbnail-container .highlighted-informations {
    z-index: 2;
}