/* ══════════════════════════════════════════════════════════
   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: 'Montserrat', 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 .3s 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: 20px;
  overflow: hidden;
  background: #f2f2f2;
  flex-shrink: 0;
  transition: box-shadow .25s;
}
.pc2-card:hover .pc2-img-wrap { box-shadow: 0 12px 28px rgba(11,26,43,.12); }
.pc2-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .25s;
}

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

.pc2-title {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  font-weight: 800;
  color: #191919;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.4;
}
/* Nom complet déplié — repasse en retour à la ligne normal (le bouton reste, juste pivoté) */
.pc2-title-row.pc2-name-open .pc2-title {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}
.pc2-name-toggle {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  margin-left: 2px;
  background: #E7F5EE;
  border-radius: 50%;
  border: none;
  padding: 0;
  color: #166534;
  cursor: pointer;
  transition: transform .2s;
}
.pc2-title-row.pc2-name-open .pc2-name-toggle { transform: rotate(180deg); }

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

/* -- Ligne "X vendus ★note ... temps restant promo (à droite)" -- */
.pc2-sold-row {
  margin-top: 3px;
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: #8a8a8a;
  white-space: nowrap;
  overflow: hidden;
}
.pc2-sep { color: #d0d0d0; font-size: 10px; }
.pc2-star { color: #ffb400; font-size: 10px; }
.pc2-rating-val { color: #8a8a8a; }
.pc2-promo-left {
  margin-left: auto;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  color: #e53935;
  font-weight: 500;
}
.pc2-promo-left svg { flex-shrink: 0; }

/* -- Prix : gros prix + ancien prix + réduction, tout sur une ligne (le prix ne rétrécit/ne
   disparaît jamais ; l'ancien prix et la réduction cèdent la place en premier si ça manque). -- */
.pc2-price-row {
  margin-top: 6px;
  display: flex;
  align-items: baseline;
  gap: 5px;
  flex-wrap: nowrap;
  overflow: hidden;
}
/* 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 {
  flex-shrink: 0;
  font-size: 15px;
  font-weight: 500;
  color: #191919;
  white-space: nowrap;
}
.pc2-price-old {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pc2-price-old .price-old {
  font-size: 11px;
  font-weight: 500;
  color: #8a8a8a;
  white-space: nowrap;
}

/* -- 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 { 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: 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;
}

.pc2-badge-discount {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .02em;
  padding: 4px 9px;
  border-radius: 10px;
  line-height: 1;
  background: #fb2c36;
  color: #fff;
  box-shadow: 0 2px 8px rgba(251,44,54,.35);
}

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

/* -- 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 2px 8px rgba(251,44,54,.18);
  cursor: pointer;
  transition: transform .2s, background .2s;
}
.pc2-wishlist-btn:hover { transform: scale(1.12); background: #fff; }

/* -- Icône panier (toutes les cartes, coin bas-droit) — ajoute directement au panier -- */
.pc2-cart-btn {
  position: absolute;
  bottom: 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;
  opacity: .7;
  box-shadow: 0 2px 8px rgba(0,208,132,.20);
  cursor: pointer;
  transition: transform .2s, background .2s, opacity .2s;
}
.pc2-cart-btn:hover { opacity: 1; transform: scale(1.12); background: #fff; }
/* Rempli tant que le produit est dans le panier (cf. panier.js::markCartIcons()/addToCart()) */
.pc2-cart-btn.in-cart {
  opacity: 1;
  background: var(--primary);
  box-shadow: 0 2px 6px rgba(0,208,132,.45);
}
.pc2-cart-btn.in-cart::after {
  content: "✓";
  position: absolute;
  top: -3px;
  right: -3px;
  width: 14px;
  height: 14px;
  background: #fff;
  color: var(--primary);
  border-radius: 50%;
  font-size: 9px;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 2px rgba(0,0,0,.25);
}

/* -- 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-name-toggle { background: #12291b; color: #4ade80; }
:root[data-theme="dark"] .pc2-img-wrap { background: #232323; }
:root[data-theme="dark"] .pc2-badge--deals { background: #d9cdf7; color: #191919; }