@media (max-width: 1024px) {

    .woocommerce-page,
    .woocommerce-page .ct-container {
        --theme-container-width: 100%;
        --theme-normal-container-max-width: 100%;
    }
    
    .woocommerce-loop-product__title {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: 20px;
        letter-spacing: 0.2px;
        text-transform: uppercase;
        font-weight: 400;
    }
}

@media (min-width: 1025px) {

    .woocommerce-page,
    .woocommerce-page .ct-container {
        --theme-container-width: 85%;
        --theme-normal-container-max-width: 100%;
    }

    .woocommerce-page .products {
        display: flex;
        flex-wrap: wrap;
        justify-content: start;
        gap: 30x;
    }

    .woocommerce-page .products figure .ct-media-container {
        border-radius: 0px;
    }

    /* Efecto hover en imágenes */
    .paragoose-product-item .ct-media-container {
        position: relative;
        overflow: hidden;
        display: block;
    }

    .paragoose-product-item .product-image-hover {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .paragoose-product-item .ct-media-container:hover .product-image-main {
        opacity: 0;
    }

    .paragoose-product-item .ct-media-container:hover .product-image-hover {
        opacity: 1;
    }

      .woocommerce-loop-product__title {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: 20px;
        letter-spacing: 0.2px;
        text-transform: uppercase;
        font-weight: 400;
      }

}

/* Hacer que los filtros se muestren en línea horizontal (flex) */
#woo-filters-panel[data-behaviour=drop-down] .ct-filter-content {
    display: flex !important;
    flex-wrap: wrap;
    align-items: start;
}

#woo-filters-panel .ct-filter-widget-wrapper ul {
    gap: 30px;
}