/* 📄 /assets/css/categorie.css */

/* ==========================================================================
    SOGUIFY - categorie.css
    Description : Styles pour la page catégorie
    ========================================================================== */

/*
    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.
*/

/* Utilisation du nouveau wrapper de page pour contenir le contenu principal */
/* Si cette page a besoin d'une largeur de conteneur différente, ajustez le .page-section-wrapper */
/* Par exemple, si vous voulez une largeur spécifique pour la page catégorie: */
.page-section-wrapper {
    max-width: 1000px; /* Largeur max spécifique pour la page catégorie */
    /* Les autres styles (background, shadow, padding, margin auto) viennent de 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-default);
} */


/* -------------------------------------------------------------------------- */
/* 📱 Responsive (Ajustements spécifiques à cette page) */
/* -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    
    /* C'est ici qu'on force les 2 produits par ligne */
    .products-grid {
        display: grid;
        /* repeat(2, 1fr) = Force exactement 2 colonnes de même taille */
        grid-template-columns: repeat(2, 1fr); 
        
        /* On réduit l'espace entre les cartes pour que ça rentre bien sur petit écran */
        gap: 8px; 
    }

    /* Optionnel : Ajuster le padding global de la page pour gagner de la place sur les côtés */
    .page-section-wrapper {
        padding-left: 8px;
        padding-right: 8px;
    }
}