/* ══════════════════════════════════════════════════════════
   product-card-v2.css — Carte produit v2 (style AliExpress)
   Tout le sélecteur est scopé sous le préfixe pc2- (aucun sélecteur
   global, aucune collision avec ico-pdp / fp- / pg- / sb- / rv- / rs- / bn-
   ni avec les anciens .product-card / .deal-card / .fp-rel-card / .mini-prod).
   Le composant ne définit pas sa grille parente : chaque page garde son
   propre conteneur (.products-grid, .deals-box__right, .fp-rel-grid…).
   ══════════════════════════════════════════════════════════ */

.pc2-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  color: #191919;
  text-decoration: none;
  cursor: pointer;
}
.pc2-card:hover .pc2-img { transform: scale(1.03); }

/* Apparition en fondu au scroll (posée par main.js via IntersectionObserver,
   même mécanisme que .product-card/.deal-card). Si JS ne s'exécute pas,
   .reveal-init n'est jamais ajoutée : la carte reste visible normalement. */
.pc2-card.reveal-init { opacity: 0; transition: opacity .5s ease; }
.pc2-card.reveal-init.reveal-in { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .pc2-card.reveal-init { opacity: 1; transition: none; }
}

/* -- Image -------------------------------------------------- */
.pc2-img-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1.08;
  border-radius: 12px;
  overflow: hidden;
  background: #f2f2f2;
  flex-shrink: 0;
}
.pc2-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .25s;
}

/* -- Badge + titre (même ligne, jamais superposés sur l'image) -- */
.pc2-title-row {
  display: flex;
  align-items: baseline;
  gap: 5px;
  margin-top: 8px;
  min-width: 0;
}
.pc2-badge {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  border-radius: 4px;
  padding: 1px 6px;
  font-size: 11px;
  line-height: 1.6;
  white-space: nowrap;
}
.pc2-badge--deals {
  background: #ece6fb;
  color: #191919;
  font-weight: 700;
  font-style: italic;
}
.pc2-badge--brand {
  background: #2f6bff;
  color: #fff;
  font-weight: 700;
  font-style: normal;
}
.pc2-badge--brand .pc2-badge-plus { color: #ffd23c; }

.pc2-title {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  font-weight: 400;
  color: #191919;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.4;
}

/* -- Ligne "ajouts au panier" (masquée si aucune donnée) -- */
.pc2-cart-count {
  margin-top: 4px;
  font-size: 13px;
  font-weight: 700;
  color: #5f5f5f;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* -- Ligne "X vendus ★note" -- */
.pc2-sold-row {
  margin-top: 3px;
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  color: #8a8a8a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pc2-star { color: #ffb400; font-size: 12px; }
.pc2-rating-val { color: #8a8a8a; }

/* -- Prix -- */
.pc2-price-row {
  margin-top: 6px;
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
}
/* displayPrice()/displayOldPrice() reçoivent nos propres classes racines
   (pc2-price / pc2-price-old) au lieu de "price-display" par défaut,
   précisément pour échapper au sélecteur global .price-display .price-fcfa
   (design-system.css, font-size 36px !important) sans avoir à utiliser
   !important nous-mêmes. */
.pc2-price {
  font-size: 19px;
  font-weight: 800;
  color: #191919;
  white-space: nowrap;
}
.pc2-price-old .price-old {
  font-size: 13px;
  font-weight: 400;
  color: #8a8a8a;
}

/* -- Réduction, sur sa propre ligne sous le prix -- */
.pc2-discount {
  margin-top: 2px;
  font-size: 13px;
  font-weight: 800;
  color: #e62e04;
}

/* -- Rupture de stock / réapprovisionné (fonctionnalité existante conservée,
   hors anatomie pc2 mais indispensable : ne pas laisser un produit indisponible
   se comporter comme cliquable/commandable). -- */
.pc2-card--rupture { cursor: default; }
.pc2-card--rupture .pc2-img {
  filter: grayscale(1) brightness(.9);
  opacity: .75;
}
.pc2-card--rupture:hover .pc2-img { transform: none; }
.pc2-card--rupture .pc2-title-row,
.pc2-card--rupture .pc2-sold-row,
.pc2-card--rupture .pc2-price-row,
.pc2-card--rupture .pc2-discount { opacity: .55; }

.pc2-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: 800;
  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;
}

.pc2-badge-restock {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  font-size: .58rem;
  font-weight: 800;
  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);
}

/* -- Bouton "retirer des favoris" (wishlist.php uniquement) -- */
.pc2-wishlist-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 3;
  width: 32px;
  height: 32px;
  background: rgba(255,255,255,.9);
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .95rem;
  box-shadow: 0 1px 4px rgba(0,0,0,.15);
  cursor: pointer;
  transition: transform .2s, background .2s;
}
.pc2-wishlist-btn:hover { transform: scale(1.12); background: #fff; }

/* -- Dark mode : le site supporte data-theme="dark" ; la maquette est
   pensée pour fond clair, on ajuste juste les teintes de texte neutres
   pour rester lisible (les couleurs de badge/prix/remise restent identiques). -- */
:root[data-theme="dark"] .pc2-card,
:root[data-theme="dark"] .pc2-title,
:root[data-theme="dark"] .pc2-price {
  color: #f0f0f0;
}
:root[data-theme="dark"] .pc2-img-wrap { background: #232323; }
:root[data-theme="dark"] .pc2-badge--deals { background: #d9cdf7; color: #191919; }