/* 
 * css/custom/product-list.css 
 * Stili per la lista prodotti (griglia, layout, paginazione)
 * 
 * @package ItticiSurgelati
 * @version 1.0.0
 */

/* ============================================
   SEZIONE LISTA PRODOTTI
   ============================================ */

/* Contenitore principale */
.product-list-section {
    padding         : 0 0 40px 0 !important;
}

/* Griglia principale - 4 colonne su desktop */
.products-grid {
    display         : grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    gap             : 24px !important;
    margin-bottom   : 40px !important;
}

/* Singolo prodotto */
.product-item {
    width           : 100% !important;
}

/* ============================================
   NESSUN PRODOTTO TROVATO
   ============================================ */
.no-products {
    text-align      : center !important;
    padding         : 60px 20px !important;
    background      : #f8f9fa !important;
    border-radius   : 12px !important;
    color           : #666 !important;
    grid-column     : 1 / -1 !important;  /* Occupa tutta la larghezza */
}

.no-products i {
    font-size       : 3rem !important;
    color           : #ccc !important;
    margin-bottom   : 16px !important;
    display         : block !important;
}

.no-products p {
    margin          : 0 !important;
    font-size       : 1.1rem !important;
}

/* ============================================
   PAGINAZIONE
   ============================================ */

/* Contenitore paginazione */
nav[aria-label="Paginazione prodotti"] {
    margin-top      : 40px !important;
}

/* Lista paginazione */
.pagination {
    display         : flex !important;
    justify-content : center !important;
    gap             : 8px !important;
    list-style      : none !important;
    padding         : 0 !important;
    margin          : 0 !important;
}

/* Elemento paginazione */
.page-item {
    margin          : 0 !important;
}

/* Link paginazione */
.page-link {
    display         : flex !important;
    align-items     : center !important;
    justify-content : center !important;
    width           : 40px !important;
    height          : 40px !important;
    border-radius   : 8px !important;
    background      : #fff !important;
    border          : 1px solid #ddd !important;
    color           : #555 !important;
    text-decoration : none !important;
    transition      : all 0.2s ease !important;
    font-size       : 0.9rem !important;
}

/* Hover sui link */
.page-link:hover {
    background-color: #fff5f0 !important;
    border-color    : #ff5f1f !important;
    color           : #ff5f1f !important;
}

/* Elemento attivo (pagina corrente) */
.page-item.active .page-link {
    background-color: #ff5f1f !important;
    border-color    : #ff5f1f !important;
    color           : #fff !important;
    cursor          : default !important;
}

/* Elemento disabilitato (frecce) */
.page-item.disabled .page-link {
    background-color: #f5f5f5 !important;
    border-color    : #eee !important;
    color           : #aaa !important;
    cursor          : not-allowed !important;
}

/* ============================================
   RESPONSIVE
   ============================================ */

/* Desktop medio (max 1200px) - 4 colonne */
@media (max-width: 1200px) {
    .products-grid {
        grid-template-columns: repeat(4, 1fr) !important;
        gap             : 20px !important;
    }
}

/* Tablet (max 992px) - 3 colonne */
@media (max-width: 992px) {
    .products-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap             : 20px !important;
    }
}

/* Mobile (max 768px) - 2 colonne */
@media (max-width: 768px) {
    .product-list-section {
        padding         : 0 0 30px 0 !important;
    }
    
    .products-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap             : 16px !important;
    }
    
    nav[aria-label="Paginazione prodotti"] {
        margin-top      : 30px !important;
    }
    
    .page-link {
        width           : 36px !important;
        height          : 36px !important;
        font-size       : 0.85rem !important;
    }
    
    .pagination {
        gap             : 6px !important;
    }
}

/* Mobile piccoli (max 480px) - 2 colonne */
@media (max-width: 480px) {
    .products-grid {
        gap             : 12px !important;
    }
    
    .no-products {
        padding         : 40px 16px !important;
    }
    
    .no-products i {
        font-size       : 2.5rem !important;
    }
    
    .no-products p {
        font-size       : 1rem !important;
    }
    
    nav[aria-label="Paginazione prodotti"] {
        margin-top      : 25px !important;
    }
    
    .page-link {
        width           : 32px !important;
        height          : 32px !important;
        font-size       : 0.8rem !important;
    }
    
    .pagination {
        gap             : 5px !important;
    }
}

/* Mobile molto piccoli (max 380px) */
@media (max-width: 380px) {
    .page-link {
        width           : 30px !important;
        height          : 30px !important;
        font-size       : 0.75rem !important;
    }
    
    .pagination {
        gap             : 4px !important;
    }
}