/* Estilo para limitar el texto de los títulos de productos a 2 líneas */
.ecommerce-title {
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Limitar a 2 líneas */
    line-clamp: 2; /* Compatibilidad estándar */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    height: 3em; /* Ajustar según el tamaño de línea */
    line-height: 1.5em; /* Altura de línea para calcular el alto total */
}

/* Estilos para la paginación */
    .pagination {
        display: flex;
        justify-content: center;
        margin: 20px;
    }

    .pagination a {
        text-decoration: none;
        padding: 10px 15px;
        margin: 0 5px;
        border-radius: 5px;
        transition: background-color 0.3s, color 0.3s;
    }

    .pagination a:hover {
        background-color: #eeeeee;
        color: #000;
    }

    .pagination a.active {
        background-color: #eeeeee;
        color: #000;
        pointer-events: none;
    }
    
    .custom-grid {
        display: flex;
        flex-wrap: wrap;
        gap: 20px; /* Espaciado entre las tarjetas */
        justify-content: flex-start; /* Distribuir uniformemente las tarjetas */
    }

    .custom-grid > li {
        flex: 0 0 calc(33.333% - 20px); /* Tres columnas con espacio entre ellas */
        max-width: calc(33.333% - 20px); /* Asegurar que no excedan el ancho */
        box-sizing: border-box;
        list-style: none;
        overflow: hidden; /* Evitar que el contenido exceda el contenedor */
    }

    .custom-grid > li img {
        width: 100%; /* Asegurar que las imágenes se ajusten al contenedor */
        height: auto;
        display: block;
        object-fit: cover; /* Ajustar las imágenes dentro del contenedor */
    }

    @media (max-width: 768px) {
        .custom-grid {
            flex-direction: column; /* Cambiar a una columna en dispositivos móviles */
            gap: 15px; /* Reducir el espacio entre las tarjetas */
        }

        .custom-grid > li {
            flex: 0 0 100%; /* Cada tarjeta ocupa el 100% del ancho */
            max-width: 100%; /* Asegurar que no excedan el ancho */
        }

        .image_wrapper {
            margin: 20px 0 20px 0; /* Agregar margen en dispositivos móviles */
        }
    }

    @media (min-width: 768px) and (max-width: 1025px) {
        .custom-grid {
            flex-wrap: wrap;
            gap: 20px; /* Espaciado entre las tarjetas */
            justify-content: flex-start; /* Distribuir uniformemente las tarjetas */
        }

        .custom-grid > li {
            flex: 0 0 calc(50% - 20px); /* Dos columnas con espacio entre ellas */
            max-width: calc(50% - 20px); /* Asegurar que no excedan el ancho */
        }
    }