/* 
 * Optimización de cajas de productos para vista móvil
 * Versión corregida - solución a problemas de espaciado
 */

/* Ajustes para dispositivos móviles - vista simplificada */
@media only screen and (max-width: 991.98px) {
    /* Reset de estilos anteriores que podrían estar causando duplicación */
    .modern-product-card,
    .modern-product-info,
    .price-rating {
        all: initial !important;
        display: block !important;
        box-sizing: border-box !important;
    }
    
    /* Tarjeta de producto */
    .modern-product-card {
        border-radius: 8px !important;
        overflow: hidden !important;
        margin-bottom: 15px !important;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
    }
    
    /* Contenedor de imagen */
    .modern-product-img {
        height: auto !important;
        position: relative !important;
        overflow: hidden !important;
    }
    
    .modern-product-img img {
        width: 100% !important;
        height: auto !important;
        display: block !important;
    }
    
    /* Contenedor de información - COMPACTO */
    .modern-product-info {
        padding: 8px 10px !important;
        background-color: #fff !important;
    }
    
    /* Título del producto - SIN ESPACIO EXTRA */
    .modern-product-info h4 {
        margin: 0 !important;
        padding: 0 !important;
        font-size: 15px !important;
        line-height: 1.2 !important;
        font-weight: bold !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }
    
    /* Contenedor de precio - PEGADO AL TÍTULO */
    .price-rating {
        margin: 4px 0 0 0 !important;
        padding: 0 !important;
        text-align: left !important;
    }
    
    /* Precio - SIN ESPACIO INFERIOR */
    .price {
        font-size: 14px !important;
        font-weight: bold !important;
        color: #000 !important;
        margin: 0 !important;
        padding: 0 !important;
        display: inline-block !important;
    }
}

/* Ajustes específicos para dispositivos pequeños */
@media only screen and (max-width: 575.98px) {
    .modern-product-info {
        padding: 6px 8px !important;
    }
    
    .modern-product-info h4 {
        font-size: 14px !important;
    }
    
    .price-rating {
        margin-top: 2px !important;
    }
    
    .price {
        font-size: 13px !important;
    }
}