/* Base styles for filtro-autopartes plugin */
.fa-filter-wrapper {
    padding: 12px;
    border-radius: 8px;
    box-shadow: 0 1px 6px rgba(0,0,0,0.06);
    margin-bottom: 18px;
    width: 100%;
    box-sizing: border-box;
}

.fa-filter-form { display:flex; gap:10px; flex-wrap:wrap; align-items:center; width:100%; }
.fa-filter-form .fa-field { padding:8px 10px; border:1px solid #cc0000; border-radius:4px; min-width:140px; box-sizing:border-box; }
.fa-search-btn { padding:9px 14px; border-radius:4px; border:1px solid #cc0000; background:#cc0000; color:#fff; cursor:pointer; flex:0 0 160px; }

/* Make filter occupy full width on desktop and proportion fields */
.fa-filter-form .fa-field { flex:1 1 0; }
.fa-filter-form .fa-field:nth-last-child(1) { min-width:120px; }

/* Results header */
.fa-results-header-inner { display:flex; justify-content:space-between; align-items:center; margin-top:15px !important; margin-bottom:8px; gap:10px; }
.fa-counter { font-weight:600; }
.fa-year-controls button { padding:6px 8px; border-radius:4px; margin-left:6px; border:1px solid #ddd; background:#fff; cursor:pointer; }

/* Table */
.fa-results-table { width:100%; border-collapse:collapse; margin-top:6px; }
.fa-results-table th, .fa-results-table td { padding:8px 10px; border:1px solid #eee; text-align:left; vertical-align:middle; color:#111; }
.fa-results-table img { display:block; max-width:100%; height:auto; }

/* SKU visibility */
.baf-sku { display:inline-block; font-weight:700; font-size:14px; color:#000 !important; }
.baf-sku a { color:#c50212!important; text-decoration:none; }

/* Estilos para las imágenes en la tabla de resultados */
.fa-results-table img {
    max-width: 80px;
    height: auto;
    border-radius: 4px;
    cursor: pointer;
    margin-right: 5px;
    transition: transform 0.2s;
    border: none;
    box-shadow: none;
}

.fa-results-table img:hover {
    transform: scale(1.05);
}

/* Contenedor de las imágenes en la celda */
.fa-results-table td[data-label="Fotos"] {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.fa-results-table td[data-label="Fotos"] {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center; /* Centra las imágenes verticalmente */
    justify-content: center; /* Centra las imágenes horizontalmente */
    gap: 10px;
}

.fa-results-table .fa-formula-logo {
    max-width: 80px !important;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* Estilo para el logo de la fórmula en los resultados */
.fa-results-table td[data-label="Fórmula"] {
    text-align: center; /* Centra el contenido de la celda */
}

.fa-formula-logo {
    max-width: 80px; /* Tamaño del icono */
    height: auto;
    display: block;
    margin: 0 auto; /* Centra el icono dentro de la celda */
    /* Aseguramos que no se apliquen estilos de hover o galería */
    cursor: default !important; 
    box-shadow: none !important;
    border: none !important;
    transition: none !important;
}

/* Mobile: transform table to stacked cards with labels (no horizontal scroll) */
@media (max-width: 768px) {
    .fa-results-table, .fa-results-table thead, .fa-results-table tbody, .fa-results-table th, .fa-results-table td, .fa-results-table tr { display:block; }
    .fa-results-table thead { display:none; }
    .fa-results-table tr { margin-bottom:12px; border:1px solid #eee; padding:8px; border-radius:8px; }
    .fa-results-table td { display:flex; justify-content:space-between; padding:6px 4px; }
    .fa-results-table td::before { content: attr(data-label); font-weight:600; margin-right:8px; color:#333; }
    .fa-filter-form { flex-direction:column; align-items:stretch; }
    .fa-filter-form .fa-field, .fa-search-btn { width:100%; flex:none; }
    .fa-results-table td[data-label="Fotos"] {
        flex-direction: row;
        align-items: flex-start;
    }
}

/* ... código anterior ... */

/* Estilos para asegurar que el icono de la fórmula se vea bien */
.fa-results-table td[data-label="Fórmula"] {
    /* Centrar contenido horizontal y verticalmente */
    text-align: center;
    padding-top: 5px;
    padding-bottom: 5px;
}

.fa-results-table td[data-label="Fórmula"] img {
    /* Aseguramos que el logo no sea demasiado grande y se centre correctamente */
    max-width: 80px; /* Nuevo tamaño recomendado para un icono de fórmula */
    height: auto;
    display: block;
    margin: 0 auto;
    /* Remover estilos de imagen de galería que no aplican aquí */
    cursor: default; 
    box-shadow: none;
    border: none;
    transition: none;
}


/* --- NUEVO: Estilos para Forzar el Color del Ícono del Carrito --- */

/* Seleccionamos el ícono (i) dentro del enlace con la clase .fa-add-to-cart-btn */
.fa-add-to-cart-btn i {
    color: #c50212; /* Asignamos el color rojo principal del plugin */
    transition: opacity 0.2s ease-in-out; /* Añadimos una transición suave para el efecto hover */
}

/* Cambiamos la opacidad del ícono cuando el cursor está sobre el enlace */
.fa-add-to-cart-btn:hover i {
    opacity: 0.5;
}