/* =========================================
= WOOCOMMERCE — carte produit (.nl-product--card)
= Base surface partagée : .card (définie globalement) ; .nl-product--card ajoute
= la mise en page et tous les éléments sont préfixés .nl-product--*.
========================================= */
.products,
/* TODO: vérifier — sélecteur non utilisé (.grid--shop) */
.grid--shop {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: 1.25rem;
}

@media (max-width: 48rem) {
  .products,
  .grid--shop {
    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
    gap: 1rem;
  }
}

/* Carte produit */
.nl-product--card {
  position: relative;
  text-decoration: none;
  outline: none;
  list-style: none;
}

/* Lien global : porte la mise en page (media + body) */
.nl-product--link {
  display: grid;
  gap: 0.625rem;
  text-decoration: none;
  color: inherit;
  outline: none;
}

/* Media */
.nl-product--media {
  position: relative;
  margin: 0;
  overflow: hidden;
  aspect-ratio: 0.65 / 1;
  /* Skeleton shimmer pendant le chargement de la photo (recouvert par l'img) */
  background: linear-gradient(100deg,
    var(--secondary-c) 25%,
    var(--secondary) 50%,
    var(--secondary-c) 75%
  );
  background-size: 300% 100%;
  animation: nl-shimmer 1.5s ease-in-out infinite;
}
/* Photo chargée → shimmer coupé (classe posée par le JS sur img.load) */
.nl-product--media.is-loaded {
  animation: none;
  background: var(--secondary-c);
}
@keyframes nl-shimmer {
  0%   { background-position: 150% 0; }
  100% { background-position: -150% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .nl-product--media { animation: none; background: var(--secondary-c); }
}

.nl-product--img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.25s ease;
}
/* Image principale masquée tant que le chargement complet n'est pas fini,
   puis fondu d'apparition (classe .is-loaded posée par le JS quand
   principale + hover sont 100% chargées). */
.nl-product--img-main { opacity: 0; transition: opacity 0.5s ease; }
.nl-product--media.is-loaded .nl-product--img-main { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .nl-product--img-main { transition: none; }
}
.nl-product--img-hover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  opacity: 0;
  transition: opacity 0.25s ease;
}
/* La hover (au-dessus) fond par-dessus la principale restée opaque :
   pas de cross-fade simultané → le fond de la carte n'apparaît jamais. */
.nl-product--card:hover .nl-product--img-hover { opacity: 1; }
.nl-product--card.is-out .nl-product--img { opacity: 0.4; }
/* Conserver l'effet "épuisé" même au hover */
.nl-product--card.is-out .nl-product--img,
.nl-product--card.is-out .nl-product--img-hover { opacity: 0.625; }

/* Badge promo */
.nl-product--badge-sale {
  position: absolute;
  inset: 0 auto auto 0;
  margin: 0.75rem;
  padding: 0.25rem 0.625rem;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--secondary);
  background: var(--primary);
  border-radius: var(--radius-sm);
}

.nl-product--badge {
  position: absolute;
  top: 0.625rem;
  right: 0.625rem;
  display: inline-block;
  padding: 0.625rem 0.625rem;
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--primary);
  font-family: var(--font-display);
  letter-spacing: var(--ls-wide);
  font-style: italic;
  z-index: 5;
}
.nl-product--badge-new { background-color: var(--secondary-c); color: var(--primary); }
.nl-product--badge-out { background-color: var(--secondary-c); color: var(--primary); }

/* Corps */
.nl-product--body { display: grid; gap: 0.375rem; }

.nl-product--title {
  position: relative; /* repère pour l'overlay du bouton aperçu */
  font-family: var(--font-display);
  margin: 0;
  font-size: var(--text-sm);
  font-weight: 400;
  text-align: left;
  height: 2.5rem;
  display: flex;
  align-items: center; /* centrage vertical du bloc texte */
}
.nl-product--title-text {
  width: 100%;
  min-width: 0; /* indispensable : autorise le rétrécissement du flex enfant → ellipsis du titre */
}

/* Ligne 1 : titre à gauche, prix à droite (même ligne).
   Grid minmax(0,1fr)|auto : la colonne titre peut rétrécir jusqu'à 0
   (→ troncature) sans jamais élargir la cellule produit. */
.nl-product--row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.625rem;
  min-width: 0;
}

/* Titre : jamais sur 2 lignes → coupe nette (le rétrécissement est géré par
   la colonne grid minmax(0,1fr) de .nl-product--row) */
.nl-product--name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
}

/* Prix — classe dédiée (découplée du .price générique WooCommerce) */
.nl-product--price {
  white-space: nowrap; /* le prix ne se coupe jamais */
  font-family: var(--SR);
  font-size: var(--text-xxs);

}

/* Ligne 2 : collection sous le titre, atténuée */
.nl-product--collection {
  display: block;
  margin-top: 0.156rem;
  font-family: var(--SR);
  font-size: var(--text-xxs);
  color: var(--primary);
}

/* Bouton « Aperçu » : overlay au survol (pas de saut de hauteur) */
.nl-product--preview-btn {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  font-size: var(--text-xxs);
  font-family: var(--SR);
  color: var(--secondary-c);
  background-color: var(--primary);
  border: 0.0625rem solid var(--primary);
  text-transform: uppercase;
  font-weight: 400;
  transition: background-color 0.25s ease, color 0.25s ease;
}
.nl-product--card.is-in .nl-product--preview-btn:hover {
  color: var(--primary);
  background-color: var(--secondary-c);
}
.nl-product--link:hover .nl-product--preview-btn,
.nl-product--link:focus-within .nl-product--preview-btn { display: flex; }

.button:focus-visible {
  outline: none;
}