/* ══════════════════════════════════════════════════════════
   Cartes simples 2 colonnes — Boutique + Tu vas adorer
   Carré blanc sur fond #f2f2f2, prix inline
   ══════════════════════════════════════════════════════════ */

/* Grille 2 colonnes */
.products-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* Carte */
.products-grid .product-card {
  background: #fff;
  border-radius: 16px;
  border: 1px solid #e8e8e8;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition: box-shadow .25s, transform .25s;
  box-shadow: 0 4px 16px rgba(0,0,0,.06);
}
.products-grid .product-card:hover { box-shadow: 0 8px 24px rgba(0,0,0,.10); transform: translateY(-2px); }
.products-grid .product-card:active { opacity: .93; }

/* Apparition en fondu au scroll (posée par main.js via IntersectionObserver).
   Uniquement opacity — jamais transform ici, pour ne pas entrer en conflit de spécificité
   avec le transform du survol ci-dessus une fois la carte révélée. Si JS ne s'exécute pas,
   .reveal-init n'est jamais ajoutée : la carte reste visible normalement (aucune régression). */
.products-grid .product-card.reveal-init,
.deal-card.reveal-init {
  opacity: 0;
  transition: opacity .3s ease;
}
.products-grid .product-card.reveal-init.reveal-in,
.deal-card.reveal-init.reveal-in {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .products-grid .product-card.reveal-init,
  .deal-card.reveal-init { opacity: 1; transition: none; }
}

/* Image carrée */
.products-grid .product-card__img-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  /* Neutralise l'ancienne règle .product-card__img-wrap de style.css (technique padding-top:100%
     historique, même nom de classe) : sans ce reset, padding-top:100% s'additionne à
     aspect-ratio:1/1 et fausse la hauteur réelle du conteneur, rendant l'image invisible. */
  padding-top: 0;
  overflow: hidden;
  background: #f5f5f5;
  flex-shrink: 0;
}
.products-grid .product-card__img {
  /* Aligné sur l'ancienne règle .product-card__img de style.css (position absolute + inset 0)
     plutôt que "relative" : les deux règles s'appliquent au même élément (même nom de classe,
     spécificité différente), et un mélange relative/absolute cassait le remplissage de l'image. */
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  z-index: 1;
  opacity: 0;
  transition: opacity .35s ease, transform .3s;
}
.products-grid .product-card:hover .product-card__img { transform: scale(1.04); }
/* Supprimer l'image hover secondaire si elle existe */
.products-grid .product-card__img--hover { display: none !important; }

/* Squelette de chargement — shimmer affiché tant que l'image n'est pas prête
   (classe .pc-img-ready posée par initImgSkeletons() dans main.js) */
.product-card__img-wrap::before,
.deal-card__img-wrap::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #ececec 25%, #f6f6f6 37%, #ececec 63%);
  background-size: 400% 100%;
  animation: pcImgShimmer 1.4s ease infinite;
}
.product-card__img-wrap.pc-img-ready::before,
.deal-card__img-wrap.pc-img-ready::before {
  display: none;
}
.product-card__img-wrap.pc-img-ready .product-card__img,
.deal-card__img-wrap.pc-img-ready .deal-card__img {
  opacity: 1;
}
@keyframes pcImgShimmer {
  0%   { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .product-card__img-wrap::before,
  .deal-card__img-wrap::before { animation: none; }
}

/* Corps — hauteur uniforme via justify-content */
.products-grid .product-card__body {
  padding: 10px 12px 14px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 5px;
  justify-content: space-between;
}
/* Prix toujours en bas de la carte */
.products-grid .product-card__price-row { margin-top: auto; }

/* Nom : 2 lignes max */
.products-grid .product-card__name {
  font-family: 'Montserrat', sans-serif !important;
  font-size: .8rem !important;
  font-weight: 800 !important;
  color: #111;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
}

/* Ligne prix : prix + disc% + étoiles sur même baseline */
.products-grid .product-card__price-row {
  display: flex;
  align-items: baseline;
  gap: 5px;
  flex-wrap: wrap;
  margin-top: 3px;
}
.products-grid .product-card__price-row .price-display,
.products-grid .product-card__price-row .price-fcfa {
  font-family: 'Montserrat', sans-serif !important;
  font-size: .88rem !important;
  font-weight: 500 !important;
  color: #00d084 !important;
  white-space: nowrap;
}

/* Remise % */
.pc-disc-pct {
  font-family: 'Montserrat', sans-serif;
  font-size: .65rem;
  font-weight: 500;
  color: #008138;
  white-space: nowrap;
  background: rgba(0,208,132,.12) !important;
  padding: 2px 7px !important;
  border-radius: 9999px !important;
}

/* Étoiles en jaune */
.pc-rating-val {
  font-size: .65rem;
  font-weight: 500;
  color: #f59e0b;
  white-space: nowrap;
}

/* Supprimer cart button et card-rating */
.products-grid .card-cart   { display: none !important; }
.products-grid .card-rating { display: none !important; }

/* ══════════════════════════════════════════════════════════
   Badge sur l'image — pilule frosted-glass, sans icône
   Priorité : Rupture > Best Seller > Bon Deal > Nouveau
   ══════════════════════════════════════════════════════════ */
.pc-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  font-size: .58rem;
  font-weight: 500;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 50px;
  line-height: 1;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 2px 6px rgba(0,0,0,.13), inset 0 1px 0 rgba(255,255,255,.5);
}
.pc-badge--bestseller { background: rgba(143,253,208,.9); color: #054a2e; border: 1px solid rgba(143,253,208,.55); }
.pc-badge--bondeal    { background: rgba(163,240,249,.9); color: #0c4a54; border: 1px solid rgba(163,240,249,.55); }
.pc-badge--nouveau    { background: rgba(255,184,165,.9); color: #6b1a00; border: 1px solid rgba(255,184,165,.55); }
.pc-badge--rupture    { background: rgba(229,229,229,.9); color: #444;    border: 1px solid rgba(200,200,200,.55); }

/* ══════════════════════════════════════════════════════════
   Carte produit épuisé — grisée, non cliquable, ruban diagonal
   ══════════════════════════════════════════════════════════ */
.products-grid .product-card--rupture,
.product-card--rupture {
  cursor: default;
}
.products-grid .product-card--rupture:hover,
.product-card--rupture:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,.06);
  transform: none;
}
.product-card--rupture .product-card__img-wrap { background: #ececec; }
.product-card--rupture .product-card__img {
  filter: grayscale(1) brightness(.9);
  opacity: .75;
}
.product-card--rupture:hover .product-card__img { transform: none; }
.product-card--rupture .product-card__body { opacity: .55; }
.product-card--rupture .card-cart { pointer-events: none; }

/* Ruban diagonal "Rupture" sur le coin de l'image */
.pc-ribbon-rupture {
  position: absolute;
  top: 16px;
  left: -38px;
  z-index: 3;
  width: 150px;
  padding: 5px 0;
  background: rgba(55,55,55,.94);
  color: #fff;
  font-size: .62rem;
  font-weight: 500;
  letter-spacing: .09em;
  text-transform: uppercase;
  text-align: center;
  transform: rotate(-40deg);
  box-shadow: 0 2px 6px rgba(0,0,0,.25);
  pointer-events: none;
}

/* Badge "à nouveau disponible" — coin haut-droit */
.pc-badge-restock {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  font-size: .58rem;
  font-weight: 500;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 50px;
  line-height: 1;
  background: rgba(0,208,132,.92);
  color: #fff;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 2px 6px rgba(0,0,0,.13), inset 0 1px 0 rgba(255,255,255,.35);
}

/* ══════════════════════════════════════════════════════════
   Nom + flèche expand/collapse sur même ligne
   ══════════════════════════════════════════════════════════ */
.pc-name-wrap {
  display: flex;
  align-items: flex-start;
  gap: 3px;
}
/* Nom 2 lignes — toutes cartes (produits-grid, card-title-row, wishlist…) */
.pc-name-wrap .product-card__name,
.pc-name-wrap .deal-card__name {
  flex: 1;
  min-width: 0;
  min-height: calc(2 * 1.4 * .78rem);
}
/* .products-grid conserve son propre override (déjà couvert par le sélecteur ci-dessus) */
.products-grid .product-card__name {
  flex: 1;
  min-height: calc(2 * 1.4 * .78rem);
}
/* card-title-row : pc-name-wrap prend la place du flex:1 autrefois sur h3 */
.card-title-row .pc-name-wrap {
  flex: 1;
  min-width: 0;
}
.card-title-row .product-card__name {
  flex: none; /* la largeur est gérée par pc-name-wrap */
  width: 100%;
}
.pc-name-wrap.open .product-card__name {
  display: block;
  overflow: visible;
  -webkit-line-clamp: unset;
  min-height: 0;
}
.pc-name-btn {
  flex-shrink: 0;
  background: rgba(0, 199, 88, .12);
  border: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  padding: 0;
  cursor: pointer;
  color: #008138;
  font-size: .52rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .22s, background .15s;
  margin-bottom: 1px;
}
.pc-name-btn:hover { background: rgba(0, 199, 88, .22); color: #005c28; }
.pc-name-wrap.open .pc-name-btn { transform: rotate(180deg); }
.pc-name-btn:focus { outline: none; }

/* ══════════════════════════════════════════════════════════
   Mentions carousel — slide bas → haut (translateY)

   height:100% sur la pilule = toujours égal au wrapper.
   translateY(100%) = 100% de la pilule = hauteur du wrapper
   → l'item en attente démarre exactement au bord inférieur,
   invisible. Aucune dépendance à font-size ou zoom.
   ══════════════════════════════════════════════════════════ */
.pc-mention-wrap {
  position: relative;
  height: 20px;
  overflow: hidden;
  margin-top: 4px;
}
.pc-mention {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 9px;
  font-weight: 500;
  padding: 0 8px 0 6px;
  border-radius: 50px;
  white-space: nowrap;
  letter-spacing: .01em;
  transform: translateY(100%);
}
/* Premier item visible avant l'init JS */
.pc-mention-wrap .pc-mention:first-child {
  transform: translateY(0);
}
.pc-mention::before {
  content: '';
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* X vendus — pilule sombre */
.pc-mention--sold    { background: #0b1a2b; color: #e2e8f0; font-family: 'Montserrat', sans-serif; }
.pc-mention--sold::before    { background: #00d084; }

/* Qualité assurée — pilule sombre (même fond que "vendu") */
.pc-mention--quality { background: #0b1a2b; color: #e2e8f0; font-family: 'Montserrat', sans-serif; }
.pc-mention--quality::before { background: #00d084; }

/* ── Badge note + avis (superposé bas-gauche de l'image) ── */
.card-rating {
  position: absolute;
  left: 7px;
  bottom: 7px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  background: rgba(255,255,255,.95);
  border: 1px solid #e8e8e8;
  border-radius: 9999px;
  box-shadow: 0 2px 6px rgba(0,0,0,.12);
  line-height: 1;
  z-index: 3;
  pointer-events: none;
}
.card-rating__score   { font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 500; color: #111; }
.card-rating__star    { font-size: 11px; color: #f59e0b; line-height: 1; }
.card-rating__divider { width: 1px; height: 9px; background: #d9d9d9; }
.card-rating__count   { font-size: 10px; font-weight: 500; color: #888; }

/* ── Ligne nom + lien panier ── */
.card-title-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
}
.card-title-row .product-card__name {
  flex: 1;
  min-width: 0;
  margin-top: 0;
}
.card-cart {
  flex: none;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #e8f4fd;
  color: #3ba0e6;
  border-radius: 7px;
  border: none;
  padding: 0;
  cursor: pointer;
  text-decoration: none;
  transition: background .15s ease;
}
.card-cart:hover  { background: #d8ecfb; }
.card-cart:active { background: #c2e0f7; }
.card-cart svg    { display: block; pointer-events: none; }

/* ── Page produit : badge "Garantie assurée" dans la ligne de meta ── */
.pp-assured-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: .78rem;
  color: var(--primary, #00d084);
  font-weight: 500;
}
.pp-assured-badge svg { color: var(--primary, #00d084); flex-shrink: 0; }
.pp-meta-sep { color: #d5d5d5; font-size: .9rem; }

/* ── Page produit : liste d'avantages (perks) sous le bloc prix ── */
.pdp-perks-list {
  list-style: none;
  padding: 10px 16px;
  margin: 0;
  background: #fff;
  border-top: 1px solid #f0f0f0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pdp-perks-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .82rem;
  color: #333;
}
.pdp-perks-list svg { color: var(--primary, #00d084); flex-shrink: 0; }

/* ══════════════════════════════════════════════════════════
   Deal cards — "Nos offres du jour" (deals-box__right)
   ══════════════════════════════════════════════════════════ */

/* Enveloppe image : position relative pour le badge */
.deal-card__img-wrap {
  position: relative;
  overflow: hidden;
  border-radius: 8px 8px 0 0;
}

/* Nom du produit — 2 lignes avec expand */
.deal-card__name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 1;
  font-family: 'Montserrat', sans-serif;
  font-size: .8rem;
  font-weight: 800;
  color: #111;
  line-height: 1.4;
  min-height: calc(2 * 1.4 * .8rem);
}
.pc-name-wrap.open .deal-card__name {
  display: block;
  overflow: visible;
  -webkit-line-clamp: unset;
  min-height: 0;
}

/* Ligne prix deal */
.deal-card__price-row {
  display: flex;
  align-items: baseline;
  gap: 5px;
  flex-wrap: wrap;
}
.deal-card__price .price-display,
.deal-card__price .price-fcfa {
  font-family: 'Montserrat', sans-serif !important;
  font-size: .88rem !important;
  font-weight: 500 !important;
  color: #00d084 !important;
}

/* Coups de cœur + Nouveautés — même taille que les offres du jour */
.mini-prod__price .price-display,
.mini-prod__price .price-fcfa {
  font-family: 'Montserrat', sans-serif !important;
  font-size: .88rem !important;
  font-weight: 500 !important;
  color: #00d084 !important;
  white-space: nowrap;
}

/* Supprime l'ancien rating séparé dans les deals */
.deal-card .deal-card__rating { display: none !important; }

/* Prix uniformes sur toutes les cartes produit (produits populaires = offres du jour) */
.product-card__price-row .price-display,
.product-card__price-row .price-fcfa {
  font-family: 'Montserrat', sans-serif !important;
  font-size: .88rem !important;
  font-weight: 500 !important;
  color: #00d084 !important;
  white-space: nowrap;
}

/* ══════════════════════════════════════════════════════════
   Desktop — 4 colonnes (boutique + Tu vas adorer)
   Tablette intermédiaire — 3 colonnes
══════════════════════════════════════════════════════════ */
@media(min-width:640px) {
  .products-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; }
}
@media(min-width:900px) {
  .products-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
  }
  /* Cartes légèrement compactes à 4 col */
  .products-grid .product-card__body  { padding: 8px 10px 12px; }
  .products-grid .product-card__name  { font-size: .74rem !important; }
  .products-grid .product-card__price-row .price-display,
  .products-grid .product-card__price-row .price-fcfa { font-size: .8rem !important; }
}

/* ── Mode sombre — [data-theme="dark"] posé sur <html> par themeInitScript() ──
   Couleurs codées en dur ici (non pilotées par les variables globales de style.css) :
   corrigées explicitement pour rester lisibles sur fond sombre. */
:root[data-theme="dark"] .products-grid .product-card,
:root[data-theme="dark"] .pdp-perks-list {
  background: #1a1d24;
}
:root[data-theme="dark"] .products-grid .product-card__name,
:root[data-theme="dark"] .card-rating__score,
:root[data-theme="dark"] .deal-card__name {
  color: #f0f1f3;
}
:root[data-theme="dark"] .pdp-perks-list { border-top-color: #2a2e37; }
:root[data-theme="dark"] .pdp-perks-list li { color: #c7c9ce; }
:root[data-theme="dark"] .product-card__img-wrap,
:root[data-theme="dark"] .deal-card__img-wrap {
  background: #22252c;
}
:root[data-theme="dark"] .product-card__img-wrap::before,
:root[data-theme="dark"] .deal-card__img-wrap::before {
  background: linear-gradient(90deg, #22252c 25%, #2c303a 37%, #22252c 63%);
}