.category-carousel-item {
    overflow: hidden;
    display: block;
    position: relative;
}

.category-carousel-item img {
    transition: transform 0.3s ease;
    display: block;
    width: 100%;
    height: auto;
}

.category-carousel-item:hover img {
    transform: scale(1.1); /* agranda un 10% */
}

.filter-sidebar{
	max-width: 100%;
}

/* CSS para la animación de filtro */

/* Los items de la lista */
.listing-item {
    /* Asegúrate de que tenga una altura definida o max-height si no es fija */
    /* Por ejemplo, si los cards tienen una altura variable, usa max-height */
    /* Si todos tienen la misma altura, una altura fija puede ser mejor */
    /* height: 653px; /* Tu altura actual */
    /* overflow: hidden; /* Importante para que la altura funcione bien */

    opacity: 1;
    transform: translateY(0); /* Para un efecto de deslizamiento */
    transition: opacity 0.4s ease-out, transform 0.4s ease-out, max-height 0.4s ease-out; /* Transiciones suaves */
    /* Si usas height en vez de max-height: transition: opacity 0.4s ease-out, transform 0.4s ease-out, height 0.4s ease-out; */
}

/* Clase para ocultar elementos filtrados */
.listing-item.hidden-filtered {
    opacity: 0;
    transform: translateY(20px); /* Se desliza hacia abajo al desaparecer */
    max-height: 0; /* Colapsa la altura */
    /* height: 0 !important; /* Si usas height fijo, usa !important */
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    overflow: hidden; /* Asegura que el contenido se corte */
    pointer-events: none; /* Deshabilita interacciones de ratón en elementos ocultos */
    /* Display none después de la transición para remover del flujo */
    /* La transición de display: none no funciona directamente, así que lo hacemos con JS */
}

/* Asegura que los elementos inicialmente visibles tengan una max-height adecuada */
/* Puedes añadir esto si tus items no tienen una altura fija */
.listing-item:not(.hidden-filtered) {
    max-height: 1000px; /* Un valor lo suficientemente grande para que siempre se vea */
    /* Ajusta este valor si tus cards son muy altos */
}

.whatsapp-button {
	right: auto;
    left: 8px;
}

@media (max-width: 720px){
  .whatsapp-button{
    opacity: .5;
    right: 2px;
    left: auto;
  }
}