/* --- VISTA iHERB MEJORADA PARA PLANTILLA ZOHO (VERSIÓN FINAL) --- */
@media screen and (max-width: 768px) {
    
    /* 0. El Contenedor Padre (Control Total) */
    div.theme-prod-box.theme-product-list-style-03 {
        margin-bottom: 0px !important;
        padding-bottom: 3px !important; /* Espacio exacto antes de la línea divisoria */
        height: auto !important; 
        min-height: 0px !important;
        max-height: max-content !important; 
        /* Borde rojo eliminado */
    }

    /* 1. Ajustar la cuadrícula: Imagen más pequeña y texto a la derecha */
    div.theme-product-box-inner {
        display: grid !important;
        grid-template-columns: 28% 1fr !important; 
        gap: 12px !important; 
        align-items: center !important; /* Centra verticalmente */
        align-content: center !important;
        border-bottom: 1px solid #e5e5e5 !important; /* La línea gris separadora */
        padding: 4px 5px 8px 5px !important; /* Arriba, derecha, abajo, izquierda */
        height: auto !important; 
        min-height: 0px !important; 
        margin-bottom: 0 !important; 
    }
    
    /* 2. Columna de la Imagen */
    .theme-prod-img {
        grid-column: 1 !important;
        grid-row: 1 / 10 !important; 
        padding: 0 !important; 
        margin: 0 !important;
        display: flex !important;
        align-items: flex-start !important; 
    }

    /* 2.1 Limitar el tamaño de la foto */
    .theme-prod-img img {
        width: 100% !important;
        max-width: 85px !important; 
        height: auto !important;
        margin: 0 auto !important;
    }
    
    /* 3. Columna de Texto y Detalles (Derecha) */
    .theme-prod-box-content:not(.theme-prod-img) {
        grid-column: 2 !important;
        text-align: left !important;
        justify-content: center !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 4px !important; 
    }
    
    /* 4. Título del producto */
    .theme-prod-name {
        font-size: 10px !important; /* Ajustado para legibilidad en móviles */
        line-height: 1.3 !important;
        font-weight: 400 !important;
        white-space: normal !important;
        margin-bottom: 2px !important;
        color: #333 !important; 
    }

    /* 5. Precio del producto */
    .theme-prod-price {
        font-size: 20px !important;
        font-weight: 700 !important;
        margin-bottom: 0px !important; /* Eliminamos margen extra abajo */
        text-align: left !important;
        display: block !important;
        width: 100% !important;
    }
    
    /* 6. El enlace invisible de Zoho */
    .theme-prod-link-overlay {
        grid-column: 1 / -1 !important;
        grid-row: 1 / -1 !important;
        z-index: 10 !important;
    }
}