/* ========================================
   GRID DE PRODUCTOS RESPONSIVE - FINAL
   4 columnas en desktop, 2 en mobile
======================================== */

/* ESTILOS BASE PARA TODOS LOS PRODUCTOS */
.product-grid-item {
    cursor: pointer;
    float: left;
    margin-bottom: 30px;
    padding-left: 15px;
    padding-right: 15px;
    position: relative;
}

/* Mobile: 2 productos por fila (50%) */
.product-grid-item {
    width: 50% !important;
}

/* Tablet: 3 productos por fila */
@media (min-width: 768px) {
    .product-grid-item {
        width: 33.333333% !important;
    }
}

/* Desktop: 4 productos por fila */
@media (min-width: 992px) {
    .product-grid-item {
        width: 25% !important;
    }
}

/* Ajustar el contenedor del producto */
.product-image-wrapper {
    position: relative;
    overflow: visible;
}

/* Imágenes responsive con altura fija */
.productinfo img {
    width: 100% !important;
    height: 240px !important;
    object-fit: contain !important;
}

/* Ajustes para mobile */
@media (max-width: 767px) {
    .product-grid-item {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
    
    .productinfo {
        padding: 8px 5px !important;
    }
    
    .productinfo img {
        height: 180px !important;
    }
    
    .productinfo h4,
    .prod_name {
        font-size: 13px !important;
        margin: 8px 0 !important;
        line-height: 1.3 !important;
    }
    
    .productinfo p,
    .prod_pais {
        font-size: 11px !important;
        margin: 5px 0 !important;
    }
    
    .product-price h4,
    .product-price h5 {
        font-size: 13px !important;
        margin: 3px 0 !important;
    }
    
    .choose ul li a {
        font-size: 11px !important;
        padding: 6px 4px !important;
    }
}

/* Mobile muy pequeño */
@media (max-width: 480px) {
    .product-grid-item {
        padding-left: 5px !important;
        padding-right: 5px !important;
    }
    
    .productinfo {
        padding: 5px 3px !important;
    }
    
    .productinfo img {
        height: 150px !important;
    }
    
    .productinfo h4 {
        font-size: 12px !important;
    }
    
    .productinfo p {
        font-size: 10px !important;
    }
}

/* FIX para productos recomendados también */
.recommended-items-container .col-sm-4 {
    width: 50% !important;
}

@media (min-width: 768px) {
    .recommended-items-container .col-sm-4 {
        width: 33.333333% !important;
    }
}

@media (min-width: 992px) {
    .recommended-items-container .col-sm-4 {
        width: 25% !important;
    }
}