/* Farmamol - Carrusel de destacados
   El contenedor/flechas/scroll ya los trae fbf-filter.css (.fbf-carrusel-contenedor,
   .fbf-carrusel, .fbf-flecha) -- aquí solo va el layout propio de cada
   producto (imagen + nombre debajo). Todo editable desde el widget de
   Elementor sin tocar este archivo. */

.fbf-destacado {
    /* Ancho = "cuántos caben a la vez" (--fbf-columnas), descontando los
       espacios entre ellos (--fbf-gap) -- las dos variables las pone el
       propio widget de Elementor en .fbf-carrusel-contenedor (controles
       "Productos visibles a la vez" y "Espacio entre productos", cada una
       responsive) y bajan por herencia. El segundo argumento de var() es
       solo el valor de respaldo si por lo que sea no llegó ninguna. */
    flex: 0 0 auto;
    width: calc( ( 100% - ( var( --fbf-columnas, 4 ) - 1 ) * var( --fbf-gap, 24px ) ) / var( --fbf-columnas, 4 ) );
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    text-align: center;
    scroll-snap-align: start;
}

.fbf-destacados-carrusel {
    scroll-snap-type: x proximity;
    padding-top: 8px;
    padding-bottom: 8px; /* espacio para que el zoom del hover no se recorte */
}

.fbf-destacado-imagen {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 90px;
}

.fbf-destacado-imagen img {
    transition: transform 0.3s ease;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

.fbf-destacado-nombre {
    color: #2f6bed;
    font-weight: 600;
    font-size: 14px;
    line-height: 1.3;
}

.fbf-destacado:hover .fbf-destacado-imagen img {
    transform: scale(1.12);
}

.fbf-destacado:hover .fbf-destacado-nombre {
    text-decoration: underline;
}

.fbf-destacados-vacio {
    padding: 20px;
    text-align: center;
    color: #666;
}