/* 🧱 produits_liste.css - Styles spécifiques à la page liste des produits */
/* Ce fichier s'appuie fortement sur style.css et components.css */

/*
    Les styles de .container, .section-title-flex, .products-grid, .store-cards-grid,
    .product-card, .store-card sont maintenant définis et gérés dans style.css et components.css.
    Ce fichier ne contient que les ajustements TRÈS SPÉCIFIQUES à cette page.
*/

/* Si cette page a besoin d'une largeur de conteneur différente, ajustez le .page-section-wrapper */
/* Exemple: si vous voulez qu'il soit plus large que le max par défaut de 1200px */
.page-section-wrapper {
    max-width: var(--container-max-width-lg); /* Utilisation de la variable pour une plus grande largeur */
    /* Pas besoin de redéfinir margin, padding, background, box-shadow, border-radius ici,
       ils sont hérités de la définition générique dans style.css */
}

/* Ajustements pour la taille des titres de section sur cette page si différente du défaut */
/* .section-title-flex {
    font-size: var(--section-title-font-size-lg);
} */

/* Ajustements spécifiques aux images des cartes produit sur cette page si elles ont une hauteur différente */
/* .product-card img {
    height: 220px;
} */

/* -------------------------------------------------------------------------- */
/* 📱 Responsive (Ajustements spécifiques à cette page si nécessaires) */
/* -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    /* Si les grilles doivent avoir un comportement responsive différent ici: */
    /* .products-grid,
    .store-cards-grid {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
        gap: var(--grid-gap-sm);
    } */

    /* Si les images de cartes produit ont une hauteur responsive différente ici: */
    /* .product-card img {
        height: 160px;
    } */
}