/* ══════════════════════════════════════════════════════════════════
   BrahimGSM — Carte produit & grilles (identique a Force Mobiles)

   Le probleme de l'ancienne grille : `repeat(auto-fill, minmax(230px, 1fr))`
   laissait les cartes deborder de leur colonne, et sans hauteur reservee
   sur chaque bloc les boutons ne tombaient jamais sur la meme ligne.
   Ici : nombre de colonnes FIXE par palier, `minmax(0, 1fr)` pour que la
   colonne puisse retrecir, et une hauteur minimale par bloc.
   ══════════════════════════════════════════════════════════════════ */

/* ── Grille ────────────────────────────────────────────────────── */
.product-grid, .mg-product-grid, .mg-home-cat-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(16px, 1.8vw, 28px);
}
@media (max-width: 1100px) { .product-grid, .mg-product-grid, .mg-home-cat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Deux cartes par ligne jusqu'en bas de gamme d'ecran : sous 460px on
   repassait a une seule colonne, ce qui obligeait a beaucoup defiler. */
@media (max-width: 820px)  { .product-grid, .mg-product-grid, .mg-home-cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ── Collision .row + classe-grille ────────────────────────────
   Plusieurs vues posent une classe-grille SUR une .row et gardent des
   enfants en col-*. Les deux systemes se superposent alors : le parent
   passe en `display:grid`, mais chaque enfant conserve la largeur de sa
   colonne — `col-lg-4` vaut 33 % de la PISTE, pas de la rangee. Sur une
   piste de 280px la carte tombait a ~95px et le texte se brisait
   verticalement.

   On neutralise donc l'heritage flex sur toutes les grilles concernees.
   La specificite (0,2,0) passe devant `.col-lg-4` (0,1,0) : les requetes
   media n'ajoutent aucune specificite, la regle vaut donc a toute taille. */
.row.product-grid,
.row.mg-product-grid,
.row.mg-home-cat-grid,
.row.mg-categories-grid { margin-inline: 0; }

.row.product-grid > *,
.row.mg-product-grid > *,
.row.mg-home-cat-grid > *,
.row.mg-categories-grid > * {
    width: auto;
    max-width: none;
    flex: initial;
    padding-inline: 0;
    margin-top: 0;
    min-width: 0;
}

/* ── Carte ─────────────────────────────────────────────────────
   Difference de structure avec Force Mobiles : l'image occupe le haut
   de la carte a BORD PERDU, sans cadre interieur ni rembourrage — la
   carte n'a donc pas de padding global, chaque zone gere le sien. Un
   simple filet la separe du corps. Le resultat respire davantage et se
   distingue au premier regard du cadre-dans-le-cadre de fm. */
.product-card {
    position: relative;
    display: flex; flex-direction: column;
    min-width: 0;
    background: var(--mg-panel);
    border: 1px solid var(--mg-border);
    border-radius: var(--mg-r-lg);
    overflow: hidden;
    transition: transform var(--mg-t-base), box-shadow var(--mg-t-base), border-color var(--mg-t-base);
}
.product-card:hover {
    transform: translateY(-4px);
    border-color: var(--mg-cyan);
    box-shadow: var(--mg-sh-md);
}

.product-img-link {
    position: relative; display: block;
    aspect-ratio: 4 / 3;                     /* plus large que le carre de fm */
    background: var(--mg-surface);
    border: 0;
    border-bottom: 1px solid var(--mg-border);
    overflow: hidden;
}
/* `contain` et non `cover` : le catalogue melange des visuels detoures
   et des photos plein cadre — rogner couperait les telephones. */
.product-image {
    width: 100%; height: 100%;
    object-fit: contain;
    padding: 14px;
    transition: transform .45s var(--mg-ease);
}
.product-card:hover .product-image { transform: scale(1.04); }

/* ── Badges ────────────────────────────────────────────────────
   Une seule etiquette flottante (la promo), collee au bord superieur
   gauche sans marge : chez fm les deux badges flottent en vis-a-vis a
   20px des angles. La categorie, elle, descend dans le corps de carte
   au-dessus du titre — c'est une information de classement, pas une
   pastille a poser sur la photo. */
.badge-promo {
    position: absolute; z-index: 2;
    top: 0; left: 0;
    display: inline-flex; align-items: center; gap: 5px;
    padding: 6px 12px 6px 10px;
    background: var(--mg-orange); color: #fff;
    border-bottom-right-radius: var(--mg-r-md);
    font-family: var(--mg-font-head);
    font-size: .72rem; font-weight: 800;
    letter-spacing: .02em;
    font-variant-numeric: tabular-nums;
}
/* Categorie : petites capitales cyan, dans le flux du corps de carte. */
.product-badge {
    display: block;
    font-family: var(--mg-font-head);
    font-size: .66rem; font-weight: 700;
    letter-spacing: .13em; text-transform: uppercase;
    color: var(--mg-cyan-600);
    margin-bottom: 5px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ── Contenu ───────────────────────────────────────────────────── */
.product-info {
    display: flex; flex-direction: column; flex: 1; min-width: 0;
    padding: var(--mg-sp-4);
}

/* Hauteurs reservees : c'est ce qui aligne les cartes entre elles. */
.pc-title {
    font-family: var(--mg-font-body);
    font-size: 1rem; font-weight: 600;
    letter-spacing: -.02em; line-height: 1.35;
    margin-bottom: 2px;
    min-height: calc(1.35em * 2);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}
.pc-title a { transition: color var(--mg-t-fast); }
.pc-title a:hover { color: var(--mg-orange); }

.pc-subtitle {
    font-size: .82rem; color: var(--mg-ink-muted);
    line-height: 1.45; margin-bottom: var(--mg-sp-4);
    min-height: calc(1.45em * 2);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ── Prix ──────────────────────────────────────────────────────
   Pas de bloc teinte encadre comme chez fm : le prix est pose a nu sur
   le fond de carte, en marine, souligne d'un court filet cyan. La
   hauteur minimale reste — c'est elle qui aligne les cartes entre
   elles, et c'etait le vrai defaut de la grille precedente. */
.pc-price {
    position: relative;
    display: flex; align-items: baseline; flex-wrap: wrap;
    gap: var(--mg-sp-2);
    min-height: 46px;
    padding-top: 10px;
    margin-bottom: var(--mg-sp-3);
    font-family: var(--mg-font-head);
    font-size: 1.42rem; font-weight: 800;
    letter-spacing: -.03em;
    color: var(--mg-navy);
}
.pc-price::before {
    content: ""; position: absolute; top: 0; left: 0;
    width: 26px; height: 3px;
    background: var(--mg-cyan); border-radius: 2px;
}
.pc-price-current { order: 1; color: var(--mg-navy); }
.pc-price-old {
    order: 2;
    font-family: var(--mg-font-body);
    font-size: .82rem; font-weight: 500;
    color: var(--mg-ink-muted); text-decoration: line-through;
}

/* Ligne de stock — hauteur fixe pour aligner les boutons.
   Pastille pleine plutot que l'icone ronde de fm. */
.product-card-stock {
    display: flex; align-items: center; gap: 7px;
    min-height: 22px;
    font-size: .78rem; font-weight: 500;
    color: var(--mg-ink-soft);
    margin-bottom: var(--mg-sp-4);
}
.product-card-stock i {
    font-size: 0; width: 7px; height: 7px; border-radius: 50%;
    background: currentColor; flex-shrink: 0;
}
.product-card-stock--in_stock { color: var(--mg-green); }
.product-card-stock--preorder { color: var(--mg-orange); }
.product-card-stock--out      { color: var(--mg-ink-muted); }

/* ── Actions ───────────────────────────────────────────────────
   Hierarchie inversee par rapport a Force Mobiles, qui met « Details »
   en premier et relegue la commande en dessous.
   Ici :
     Ligne 1 — « Ajouter au panier », pleine largeur, ambre plein. C'est
               l'action reellement branchee (AJAX, badge panier) et celle
               qui convertit.
     Ligne 2 — « Details » (contour, extensible) + WhatsApp (icone).
   La boutique vend en paiement a la livraison : WhatsApp reste a portee
   mais ne concurrence plus le panier. */
.pc-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--mg-sp-2);
    margin-top: auto;
}
.pc-actions .btn {
    padding: 11px 14px;
    font-size: .85rem;
    border-radius: var(--mg-r-md);
    min-width: 0;
}
.pc-cart-primary { grid-column: 1 / -1; width: 100%; }
.pc-details { grid-column: 1; overflow: hidden; text-overflow: ellipsis; }

/* padding: 0 prive le bouton de toute hauteur propre. Tant qu'il partage
   sa rangee avec « Details » il s'etire a la meme hauteur ; seul sur sa
   rangee (cartes etroites) il retombait a 23px — sous le seuil tactile.
   D'ou le min-height explicite. */
.pc-icon-btn {
    width: 44px; min-height: 44px; padding: 0 !important;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .95rem;
    border-radius: var(--mg-r-md);
    box-shadow: none;
}
/* WhatsApp — contour vert discret, il accompagne sans concurrencer. */
.pc-wa-btn { background: #fff; border: 1.5px solid #bfe6cf; color: #14884a; }
.pc-wa-btn:hover { background: var(--mg-wa); border-color: var(--mg-wa); color: #fff; }
/* Panier — action principale : ambre plein, pleine largeur. */
.pc-cart-btn { background: var(--mg-orange); color: #fff; border-color: var(--mg-orange); box-shadow: none; }
.pc-cart-btn:hover { background: var(--mg-orange-600); border-color: var(--mg-orange-600); color: #fff; box-shadow: var(--mg-sh-orange); }
.pc-cart-btn.is-added { background: var(--mg-green); border-color: var(--mg-green); color: #fff; }
/* Rupture : le bouton pleine largeur reste, desactive. */
.pc-order-btn { grid-column: 1 / -1; width: 100%; box-shadow: none; }

/* Cartes etroites (2 par ligne sur mobile) : « Details + 2 icones »
   demande ~105px fixes, soit presque toute la largeur d'une carte de
   ~155px. On empile en trois rangees en dessous de ce seuil. */
.product-card { container-type: inline-size; }

/* Les libelles longs (« Rupture de stock », « Precommander ») debordent
   d'un bouton de ~120px : on resserre le rembourrage et la police, et on
   autorise le repli sur deux lignes plutot que de laisser le texte sortir
   du cadre. Le bouton reste tactile grace au min-height. */
@container (max-width: 230px) {
    /* min-height sur TOUS les boutons : a 10px de rembourrage vertical la
       hauteur retombe a 43px, juste sous le seuil tactile de 44px. */
    .pc-actions .btn { padding: 10px 8px; font-size: .76rem; min-height: 44px; }
    /* « Ajouter au panier » ne tient pas sur une ligne a cette largeur :
       on autorise le repli plutot que le debordement, et l'icone cede la
       place au texte. */
    .pc-cart-primary, .pc-order-btn {
        white-space: normal; line-height: 1.25; text-wrap: balance;
    }
    .pc-cart-primary i, .pc-order-btn i { display: none; }
}

/* Repli pour les navigateurs sans requetes de conteneur (Safari < 16). */
@supports not (container-type: inline-size) {
    @media (max-width: 560px) {
        .pc-actions .btn { padding: 10px 8px; font-size: .76rem; min-height: 44px; }
        .pc-cart-primary, .pc-order-btn { white-space: normal; line-height: 1.25; }
        .pc-cart-primary i, .pc-order-btn i { display: none; }
    }
}

/* ── Rail horizontal (accueil) ─────────────────────────────────── */
.mg-slider { position: relative; }
.mg-slider__track {
    display: grid; grid-auto-flow: column;
    grid-auto-columns: minmax(230px, 1fr);
    gap: clamp(16px, 1.8vw, 28px);
    overflow-x: auto; scroll-snap-type: x mandatory;
    padding-bottom: var(--mg-sp-3);
}
.mg-slider__track > * { scroll-snap-align: start; min-width: 0; }
.mg-slider__nav {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px;
    background: #fff; border: 1px solid var(--mg-border);
    border-radius: var(--mg-r-md); color: var(--mg-navy);
}
.mg-slider__nav:hover { background: var(--mg-navy); color: #fff; }

/* ── Enveloppes de grille ──────────────────────────────────────
   Les cartes sont posees dans un div intermediaire (col-* ou
   .mg-home-cat-grid__item). Sans ces regles l'enveloppe s'etire — c'est
   un element de grille — mais la carte qu'elle contient garde sa hauteur
   naturelle, et les cartes d'une meme rangee finissent inegales. */
.mg-home-cat-grid__item,
.row.product-grid > * {
    display: flex;
    min-width: 0;
}
.mg-home-cat-grid__item > .product-card,
.row.product-grid > * > .product-card {
    width: 100%;
}