/* ==========================================================================
   PRESTASHOP 9: FIX COMPATTO 4 COLONNE GRANDI UNIFORMI (TRUELOVERS.IT)
   ========================================================================== */

/* 1. IMPONE IL LAYOUT GENERALE A GRIGLIA ESPANSA PER LE CATEGORIE */
.page-category #products .products, 
.page-category .products-grid .row, 
.page-category .products.product_list, 
.page-category .elementor-widget-leo_product_grid .products,
.page-category #products .row,
.page-category .products-layout {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important; /* Forza 4 colonne esatte */
    gap: 15px !important; /* Spazio identico tra i box dei prodotti */
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Elimina le interruzioni invisibili che scombinano la griglia */
.page-category .products.product_list::before, .page-category .products.product_list::after, 
.page-category .products-grid .row::before, .page-category .products-grid .row::after, 
.page-category .product-miniature::before, .page-category .product-miniature::after,
.page-category .row::before, .page-category .row::after {
    display: none !important; content: none !important; clear: none !important;
}

/* 2. UNIFORMITÀ ASSOLUTA ED ELIMINAZIONE DELLE ALTEZZE VUOTE */
.page-category .products .product-miniature, 
.page-category .products.product_list .product-miniature,
.page-category .js-product-miniature,
.page-category .products [class*="col-"] {
    width: 100% !important; 
    max-width: 100% !important; 
    min-width: 100% !important;
    flex: none !important; 
    float: none !important;
    margin: 0 !important; 
    padding: 10px !important; /* Spazio interno pulito */
    background: #ffffff !important;
    box-sizing: border-box !important; 
    display: flex !important; 
    flex-direction: column !important;
    
    /* ABBATTE L'ALTEZZA ALLUNGATA: Il box si adatta al contenuto senza allungarsi */
    height: auto !important; 
    min-height: auto !important; 
    max-height: none !important;
}

/* 3. ESPANSIONE MASSIMA DELLE IMMAGINI (RIMOZIONE BLOCCO PIXEL) */
.page-category .product-miniature .product-thumbnail, 
.page-category .product-miniature .thumbnail-container, 
.page-category .product-miniature .product-thumbnail a,
.page-category .product-miniature .left-block {
    display: block !important; 
    width: 100% !important; 
    max-width: 100% !important; 
    min-width: 100% !important; /* Annulla i limiti a 150px del tema Diva */
    height: auto !important; 
    padding: 0 !important; 
    margin: 0 auto 10px auto !important;
}

/* Costringe la foto reale del prodotto ad allargarsi a tutto schermo */
.page-category .product-miniature img,
.page-category .product-miniature .product-thumbnail img,
.page-category .product-miniature .img-hover img {
    display: block !important; 
    visibility: visible !important; 
    opacity: 1 !important; 
    width: 100% !important; 
    max-width: 100% !important; 
    min-width: 100% !important;
    height: auto !important; 
    aspect-ratio: 1 / 1 !important; /* Forza la foto quadrata come Dreamlove */
    object-fit: contain !important; /* Evita che il prodotto venga tagliato */
    background-color: #ffffff !important;
}

/* 4. GESTIONE TITOLI (MASSIMO 3 RIGHE PULITE COI PUNTINI) */
.page-category .product-miniature .product-title a, 
.page-category .product-miniature .product-name a,
.page-category .product-miniature h3 a {
    display: -webkit-box !important; 
    -webkit-line-clamp: 3 !important; 
    -webkit-box-orient: vertical !important; 
    overflow: hidden !important; 
    text-overflow: ellipsis !important; 
    white-space: normal !important; 
    font-size: 14px !important; 
    font-weight: 600 !important; 
    line-height: 19px !important; 
    height: 57px !important; 
    margin-bottom: 8px !important;
    text-align: center !important;
}

/* 5. ALLINEAMENTO PREZZI SUL FONDO DEL BOX */
.page-category .product-miniature .product-price-and-shipping, 
.page-category .product-miniature .price,
.page-category .product-miniature .product-price {
    margin-top: auto !important; /* Spinge i prezzi millimetricamente in basso */
    font-size: 17px !important; 
    font-weight: bold !important; 
    text-align: center !important; 
    display: block !important;
    color: #000000 !important;
}

/* 6. LAYOUT MOBILE: 2 COLONNE UNIFORMI */
@media (max-width: 991px) {
    .page-category #products .products, 
    .page-category .products-grid .row, 
    .page-category .products.product_list,
    .page-category .elementor-widget-leo_product_grid .products {
        grid-template-columns: repeat(2, 1fr) !important; 
        gap: 10px !important;
    }
}