/**
 * Override CSS per forzare layout responsive
 * Override CSS to force responsive layout
 */

/**
 * Override CSS per forzare layout responsive
 * Override CSS to force responsive layout
 * 
 * NOTA: Le griglie all'interno del componente offer-items-preview (ID che inizia con "offer-preview-")
 * hanno le loro regole specifiche e non sono influenzate da queste regole globali
 * NOTE: Grids inside offer-items-preview component (ID starting with "offer-preview-")
 * have their own specific rules and are not affected by these global rules
 */

/* Forza 1 colonna su mobile per migliore visibilità / Force 1 column on mobile for better visibility */
/* Escludi le griglie del componente offer-items-preview usando selettore più specifico / Exclude offer-items-preview component grids using more specific selector */
.items-grid {
    grid-template-columns: 1fr !important;
    justify-items: center !important;
    justify-content: center !important;
    margin: 0 auto !important;
    max-width: 100% !important;
}

/* Escludi le griglie del componente offer-items-preview / Exclude offer-items-preview component grids */
[id^="offer-preview-"] .items-grid {
    grid-template-columns: repeat(auto-fit, minmax(95px, 95px)) !important;
    max-width: 50% !important;
    padding: 0 5px !important;
    justify-content: center !important;
}

/* Solo desktop ha layout auto-fit */
@media (min-width: 993px) {
    .items-grid {
        grid-template-columns: repeat(auto-fit, minmax(235px, 1fr)) !important;
    }

    [id^="offer-preview-"] .items-grid {
        grid-template-columns: repeat(auto-fit, minmax(95px, 95px)) !important;
        justify-content: center !important;
    }
}

/* 2 colonne per tablet (601px - 992px) / 2 columns for tablet */
@media (max-width: 992px) and (min-width: 601px) {
    .items-grid {
        grid-template-columns: 1fr 1fr !important;
        justify-items: center !important;
        justify-content: center !important;
        padding: 0 10px !important;
        /* background-color: rgba(255, 0, 0, 0.1); Rimuovi commento per debug */
    }

    [id^="offer-preview-"] .items-grid {
        grid-template-columns: repeat(auto-fit, minmax(90px, 90px)) !important;
        padding: 0 3px !important;
        justify-content: center !important;
    }
}

/* 1 colonna per mobile (sotto 600px) / 1 column for mobile (under 600px) */
@media (max-width: 600px) {
    .items-grid {
        grid-template-columns: 1fr !important;
    }

    [id^="offer-preview-"] .items-grid {
        grid-template-columns: repeat(auto-fit, minmax(80px, 80px)) !important;
        justify-content: center !important;
    }
}

/* Una sola colonna centrata sotto i 600px */
@media (max-width: 600px) {
    .items-grid {
        grid-template-columns: 1fr !important;
        justify-items: center !important;
        justify-content: center !important;
        padding: 0 20px !important;
        gap: 16px !important;
        max-width: 400px !important;
        margin: 0 auto !important;
    }

    [id^="offer-preview-"] .items-grid {
        grid-template-columns: repeat(auto-fit, minmax(80px, 80px)) !important;
        padding: 0 3px !important;
        max-width: 100% !important;
        gap: 8px !important;
        justify-content: center !important;
    }
    
    .item-card {
        max-width: 100% !important;
        margin: 0 !important;
        width: 100% !important;
    }
}

/* Centratura ottimizzata per mobile piccolo */
@media (max-width: 480px) {
    .items-grid {
        padding: 0 15px !important;
        gap: 12px !important;
        max-width: 350px !important;
    }

    [id^="offer-preview-"] .items-grid {
        padding: 0 3px !important;
        max-width: 100% !important;
        grid-template-columns: repeat(auto-fit, minmax(75px, 75px)) !important;
        gap: 8px !important;
        justify-content: center !important;
    }
}