/* 
 * css/custom/product-list.css 
 * Stili per la lista prodotti (griglia, layout, paginazione)
 * 
 * @package ItticiSurgelati
 * @version 1.0.0
 */

/* ============================================
   SEZIONE LISTA PRODOTTI
   ============================================ */

/*
 * css/custom/sections/product-list.css
 * Lista prodotti
 */

.gp-product-list-section {
    padding     : 0 100px 0 0;
    margin-top  : 50px;
    margin-left : 50px;
}

.gp-products-grid {
    display               : grid;
    grid-template-columns : repeat(4, minmax(0, 1fr));  
    /** grid-template-columns : repeat(6, minmax(0, 1fr)); */ 
    gap                   : 24px;
}

.gp-product-item {
    width     : 100%;
    min-width : 0;
}

/* Nessun prodotto */

.gp-no-products {
    grid-column   : 1 / -1;
    text-align    : center;
    padding       : 60px 20px;
    background    : #f8f9fa;
    border-radius : 12px;
    color         : #666;
}

.gp-no-products i {
    display       : block;
    margin-bottom : 16px;
    font-size     : 3rem;
    color         : #ccc;
}

.gp-no-products p {
    margin    : 0;
    font-size : 1.1rem;
}



.gp-product-list-heading {
    margin-bottom : 24px;
}

.gp-product-list-heading span {
    color          : var(--gp-text-secondary);
    font-size      : 16px;
    font-weight    : 500;
}

.gp-product-list-heading h2 {

    margin      : 4px 0 0 0;
    color       : var(--gp-theme-dark);
    font-family : 'Kondolar', sans-serif;
    font-size   : 34px;
    font-weight : 800;

}














/* Responsive */

@media (max-width: 1200px) {
    .gp-products-grid {
        grid-template-columns : repeat(4, minmax(0, 1fr));
        gap                   : 20px;
    }
}

@media (max-width: 992px) {
    .gp-products-grid {
        grid-template-columns : repeat(3, minmax(0, 1fr));
        gap                   : 20px;
    }
}

@media (max-width: 768px) {
    .gp-product-list-section {
        padding      : 0 16px 30px 16px;
        margin-top   : 32px;
        margin-left  : 0;
        margin-right : 0;
    }

    .gp-products-grid {
        grid-template-columns : repeat(2, minmax(0, 1fr));
        gap                   : 16px;
    }

    nav[aria-label="Paginazione prodotti"] {
        margin-top: 30px;
    }
}

@media (max-width: 480px) {
    .gp-products-grid {
        gap: 12px;
    }

    .gp-no-products {
        padding: 40px 16px;
    }

    .gp-no-products i {
        font-size: 2.5rem;
    }

    .gp-no-products p {
        font-size: 1rem;
    }

    nav[aria-label="Paginazione prodotti"] {
        margin-top: 25px;
    }
}