/**
 * Styles pour la page Boutique SureCart
 * 
 * PRINCIPE : Aider Gutenberg/SureCart à appliquer le layout grid
 * On intervient pour masquer les filtres/recherche ET activer le grid CSS
 */

/* ============================================================
   ACTIVER LE GRID LAYOUT GUTENBERG
   ============================================================ */

/* S'assurer que les conteneurs parents prennent toute la largeur disponible */
/* Sur la page boutique, forcer .alignwide à prendre toute la largeur de la page */
body.page-template-default .wp-block-group.alignwide,
body.single-page .wp-block-group.alignwide {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 2rem !important;
    padding-right: 2rem !important;
    box-sizing: border-box !important;
}

.wp-block-group.alignwide .wp-block-surecart-product-list,
.wp-block-group.alignwide [class*="surecart-product-list"] {
    width: 100% !important;
    max-width: 100% !important;
}

/* Le conteneur product-template avec layout grid doit utiliser display: flex */
/* Les produits sont limités à 30vw chacun (30% de la largeur de la page) */
.wp-block-surecart-product-template.is-layout-grid,
.wp-block-surecart-product-template[class*="is-layout-grid"],
[class*="surecart-product-template"][class*="is-layout-grid"],
[class*="product-template"] {
    display: flex !important; /* Utiliser flexbox pour permettre plusieurs produits côte à côte */
    flex-wrap: wrap !important; /* Permettre le retour à la ligne si nécessaire */
    gap: 1.5rem !important;
    width: 100% !important;
    max-width: 100% !important;
    align-items: stretch !important; /* Tous les produits ont la même hauteur */
    justify-content: center !important; /* Centrer les produits */
    box-sizing: border-box !important;
}

/* Forcer tous les enfants directs du template à avoir la même largeur de base (30vw) */
/* Cela garantit l'uniformité même si la structure HTML diffère entre produits */
.wp-block-surecart-product-template[class*="is-layout-grid"] > *,
[class*="product-template"] > * {
    flex: 0 0 30vw !important;
}

/* S'assurer que les produits individuels (wp-block-group) sont bien des enfants du flex */
/* Chaque produit occupe exactement 30vw (30% de la largeur totale de la page) */
/* Utiliser des sélecteurs descendants pour cibler tous les niveaux de conteneurs */
.wp-block-surecart-product-template.is-layout-grid > .wp-block-group,
.wp-block-surecart-product-template[class*="is-layout-grid"] > .wp-block-group,
.wp-block-surecart-product-template[class*="is-layout-grid"] > * > .wp-block-group,
[class*="surecart-product-template"][class*="is-layout-grid"] > .wp-block-group,
[class*="surecart-product-template"][class*="is-layout-grid"] > * > .wp-block-group,
[class*="product-template"] > .wp-block-group,
[class*="product-template"] > * > .wp-block-group {
    flex: 0 0 30vw !important; /* 30% de la largeur de la fenêtre (viewport width) - NE PAS grandir/rétrécir */
    width: 30vw !important; /* Largeur fixe à 30vw */
    min-width: 30vw !important; /* Largeur minimale de 30vw */
    max-width: 30vw !important; /* Largeur maximale de 30vw */
    display: flex !important;
    flex-direction: column !important;
    max-height: 600px !important; /* Hauteur maximale pour éviter qu'ils dépassent */
    overflow: hidden !important;
    box-sizing: border-box !important;
}

/* S'assurer que TOUS les conteneurs intermédiaires entre le template et le produit prennent aussi 30vw */
/* Mais seulement ceux qui contiennent directement un .wp-block-group (produit) */
.wp-block-surecart-product-template[class*="is-layout-grid"] > *:has(> .wp-block-group),
[class*="product-template"] > *:has(> .wp-block-group) {
    width: 30vw !important;
    max-width: 30vw !important;
    min-width: 30vw !important;
    box-sizing: border-box !important;
}

/* Fallback pour les navigateurs qui ne supportent pas :has() */
/* Cibler directement les enfants du template qui sont des conteneurs de produits */
.wp-block-surecart-product-template > div > .wp-block-group,
[class*="product-template"] > div > .wp-block-group {
    width: 30vw !important;
    max-width: 30vw !important;
    min-width: 30vw !important;
}

/* Limiter la hauteur du contenu interne des produits */
.wp-block-surecart-product-template .wp-block-group > .wp-block-group {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important; /* Permet au flex de fonctionner correctement */
    overflow: hidden !important;
    width: 100% !important; /* Remplir toute la largeur du conteneur parent */
}

/* Limiter la largeur et la hauteur des images pour qu'elles ne prennent pas toute la place */
.wp-block-surecart-product-template .wp-block-cover {
    max-width: 100% !important;
    width: 100% !important;
    max-height: 300px !important; /* Hauteur maximale des images */
    height: auto !important;
    flex-shrink: 0 !important;
    overflow: hidden !important;
}

.wp-block-surecart-product-template .wp-block-cover img,
.wp-block-surecart-product-template img {
    max-width: 100% !important;
    width: 100% !important;
    max-height: 300px !important; /* Hauteur maximale des images */
    height: auto !important;
    object-fit: cover !important; /* Recadre l'image pour remplir l'espace */
    object-position: center !important;
}

/* Limiter la hauteur du conteneur de l'image (wp-block-cover) */
.wp-block-surecart-product-template .wp-block-group .wp-block-group.has-background {
    max-height: 300px !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
}

/* Le titre et le prix doivent s'adapter avec flex */
.wp-block-surecart-product-template .wp-block-surecart-product-title,
.wp-block-surecart-product-template h3 {
    flex-shrink: 0 !important;
    margin-bottom: 0.5rem !important;
}

.wp-block-surecart-product-template .wp-block-group[style*="flex"] {
    flex-shrink: 0 !important;
    margin-top: auto !important; /* Pousse le prix vers le bas */
}

/* Responsive : ajuster la largeur des produits selon la largeur d'écran */
@media (max-width: 1024px) {
    .wp-block-surecart-product-template.is-layout-grid > .wp-block-group,
    .wp-block-surecart-product-template[class*="is-layout-grid"] > .wp-block-group,
    [class*="surecart-product-template"][class*="is-layout-grid"] > .wp-block-group {
        flex: 0 0 45vw !important; /* 45% de la largeur de la fenêtre sur tablettes */
        width: 45vw !important; /* 2 produits côte à côte sur tablettes */
        min-width: 45vw !important;
        max-width: 45vw !important;
    }
}

@media (max-width: 768px) {
    .wp-block-surecart-product-template.is-layout-grid > .wp-block-group,
    .wp-block-surecart-product-template[class*="is-layout-grid"] > .wp-block-group,
    [class*="surecart-product-template"][class*="is-layout-grid"] > .wp-block-group {
        width: 100% !important; /* 1 produit par ligne sur mobile */
        max-width: 100% !important;
    }
}

/* ============================================================
   MASQUER LES FILTRES ET RECHERCHES
   ============================================================ */

/* Masquer les contrôles de tri SureCart */
.wp-block-group.alignwide select[aria-label*="sort"],
.wp-block-group.alignwide select[name*="sort"],
.wp-block-group.alignwide select[name*="order"] {
    display: none !important;
}

/* Masquer les formulaires de filtres SureCart */
.wp-block-group.alignwide form:has(select[aria-label*="sort"]),
.wp-block-group.alignwide form:has(select[name*="sort"]),
.wp-block-group.alignwide form:has(select[name*="order"]),
.wp-block-group.alignwide div:has(select[aria-label*="sort"]),
.wp-block-group.alignwide div:has(select[name*="sort"]),
.wp-block-group.alignwide div:has(select[name*="order"]) {
    display: none !important;
}

/* Masquer les champs de recherche SureCart */
.wp-block-group.alignwide input[type="search"],
.wp-block-group.alignwide input[type="text"][placeholder*="Search"],
.wp-block-group.alignwide input[type="text"][placeholder*="Recherche"] {
    display: none !important;
}

/* Masquer les conteneurs de filtres SureCart */
.wp-block-group.alignwide .sc-dropdown,
.wp-block-group.alignwide .wp-block-surecart-product-list-sort,
.wp-block-group.alignwide .sc-input-group,
.wp-block-group.alignwide .wp-block-surecart-product-list-search,
.wp-block-group.alignwide .wp-block-surecart-product-list-filter-tags {
    display: none !important;
}

/* Masquer les conteneurs qui contiennent UNIQUEMENT des filtres (pas de produits) */
.wp-block-group.alignwide > div:first-child:not([class*="product-item-list"]):not([class*="product-item"]):not([class*="product-list"]):has(select[aria-label*="sort"]):not(:has([class*="product-item"])),
.wp-block-group.alignwide > div:first-child:not([class*="product-item-list"]):not([class*="product-item"]):not([class*="product-list"]):has(select[name*="sort"]):not(:has([class*="product-item"])),
.wp-block-group.alignwide > div:first-child:not([class*="product-item-list"]):not([class*="product-item"]):not([class*="product-list"]):has(input[type="search"]):not(:has([class*="product-item"])) {
    display: none !important;
}