/* Carte produit : une seule structure ; l'habillage Galerie/Catalogue est dans modes/*.css. */
.tpc-product-card {
  position: relative; display: flex; flex-direction: column; height: 100%;
  background: var(--tpc-background-color); border: 1px solid var(--tpc-border-color);
  border-radius: var(--tpc-border-radius); overflow: hidden; transition: box-shadow var(--tpc-transition);
}
.tpc-product-card:hover { box-shadow: var(--tpc-shadow-md); }

/* Zone image : la taille du conteneur (ratio carré par défaut, ou taille fixe en mode
   Catalogue via modes/catalogue.css) gouverne toujours l'image, jamais l'inverse. Le lien
   occupe tout l'espace disponible (position absolue calée sur les 4 bords), et l'image le
   remplit intégralement en s'y adaptant. Avant ce correctif, la hauteur en % de l'image ne
   pouvait pas se résoudre : son parent direct (le lien) avait une hauteur "auto", et un
   pourcentage de hauteur est ignoré quand le parent immédiat n'a pas de hauteur définie
   -- même si un ancêtre plus haut (la zone image) en avait une. */
.tpc-product-card__media { position: relative; overflow: hidden; background: var(--tpc-surface-color); aspect-ratio: 1; min-width: 0; min-height: 0; }
.tpc-product-card__image-link { position: absolute; inset: 0; display: block; }
/*
 * max-width/min-width/min-height explicites : le reset global (base/reset.css) impose
 * `img { max-width: 100%; height: auto; }`. Notre sélecteur de classe est déjà plus
 * spécifique et l'emporte normalement, mais le rendre explicite ici évite qu'un futur
 * ajout de règle ne réintroduise la même ambiguïté sans qu'on s'en aperçoive. `min-width`/
 * `min-height` à 0 contrent la taille minimale implicite d'un enfant flex (`auto` par
 * défaut), qui peut sinon l'empêcher de descendre sous sa taille intrinsèque.
 */
/*
 * Les feuilles de WooCommerce (et parfois du CSS ajouté par un plugin) ciblent
 * `.woocommerce ul.products li.product a img` (spécificité 0,3,4) avec une largeur en %,
 * par ex. `width: 20%`, ce qui écrasait notre simple classe (0,1,0) : image minuscule.
 * Le sélecteur ci-dessous est volontairement PLUS spécifique (0,5,4) pour l'emporter sans
 * !important, avec et sans la classe `.woocommerce` sur un ancêtre.
 */
.tpc-product-card__image,
.woocommerce ul.products li.product .tpc-product-card__media a.tpc-product-card__image-link img.tpc-product-card__image,
ul.products li.product .tpc-product-card__media a.tpc-product-card__image-link img.tpc-product-card__image {
  display: block; width: 100%; height: 100%; max-width: none; min-width: 0; min-height: 0; margin: 0; object-fit: var(--tpc-image-fit, contain);
}
.tpc-product-card__badges { position: absolute; top: var(--tpc-space-3); left: var(--tpc-space-3); z-index: 2; display: flex; flex-direction: column; gap: .3rem; align-items: flex-start; }

.tpc-product-card__body { display: flex; flex: 1; flex-direction: column; gap: .35rem; padding: var(--tpc-space-4); }
.tpc-product-card__brand { margin: 0; font-size: var(--tpc-text-sm); color: var(--tpc-muted-color); }
.tpc-product-card__brand a { color: inherit; text-decoration: underline; }
.tpc-entity-label { font-weight: 600; }

.tpc-product-card__title { font-size: var(--tpc-text-base); margin: 0; }
.tpc-product-card__title a { text-decoration: none; }
.tpc-product-card__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.tpc-product-card__title a:focus-visible::after { outline: 3px solid var(--tpc-focus-color); outline-offset: -2px; }

.tpc-product-card__excerpt { margin: 0; font-size: var(--tpc-text-sm); color: var(--tpc-muted-color); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tpc-product-card__meta, .tpc-product-card__meta__row { margin: 0; font-size: var(--tpc-text-sm); }
.tpc-product-card__meta__row { display: flex; gap: .35rem; }
.tpc-product-card__meta__row dt { font-weight: 600; }
.tpc-product-card__meta__row dt::after { content: ":"; }

.tpc-product-card .star-rating { font-size: var(--tpc-text-sm); margin: 0; }
.tpc-product-card__price { margin-top: auto; font-size: var(--tpc-text-lg); }
.tpc-product-card__stock { margin: 0; font-size: var(--tpc-text-sm); }
.tpc-product-card__stock--instock { color: var(--tpc-success-color); }
.tpc-product-card__stock--backorder { color: var(--tpc-warning-color); }
.tpc-product-card__stock--outofstock { color: var(--tpc-muted-color); }

.tpc-product-card__actions { position: relative; z-index: 2; margin-top: .35rem; }
.tpc-product-card__actions .button { width: 100%; }

/* Grille du catalogue : nombre de colonnes piloté par les variables CSS du Customizer. */
ul.products {
  display: grid !important;
  grid-template-columns: repeat(var(--tpc-cols-mobile), 1fr);
  gap: var(--tpc-space-4); margin: 0 0 var(--tpc-space-6); padding: 0; list-style: none;
}
ul.products li.product { margin: 0 !important; padding: 0 !important; }
/* Réglage Customizer § Catalogue > « Forcer la largeur automatique » : décoché = classe tpc-free-item-width. */
body:not(.tpc-free-item-width) ul.products li.product { width: auto !important; }
@media (min-width: 48em) { ul.products { grid-template-columns: repeat(var(--tpc-cols-tablet), 1fr); gap: var(--tpc-space-5); } }
@media (min-width: 64em) { ul.products { grid-template-columns: repeat(var(--tpc-cols-desktop), 1fr); gap: var(--tpc-space-6); } }

/* Bandeau "produits associés" / "vous aimerez aussi" : même grille, sans dépendre du Customizer catalogue. */
.related.products ul.products, .up-sells.products ul.products { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 48em) { .related.products ul.products, .up-sells.products ul.products { grid-template-columns: repeat(4, 1fr); } }

/* Réglage Customizer § Fiche produit > "Afficher le Compositeur/la marque" désactivé. */
body.tpc-hide-brand .tpc-product-card__brand { display: none; }