/*
 * Mode Catalogue : texte en priorité (listes de partitions), en ligne horizontale — image
 * réduite à gauche, texte à droite — à TOUTES les largeurs d'écran, y compris mobile.
 *
 * Avant correctif, cette mise en page en ligne ne s'activait qu'à partir de 48em : en
 * dessous, la vignette (pilotée par --tpc-catalogue-thumb-size, 48px par défaut) restait
 * quand même à sa taille réduite, mais SANS la mise en page qui lui donne son sens —
 * résultat, un petit carré orphelin en haut d'une carte restée en colonne, qui donnait
 * l'impression d'un affichage cassé plutôt que d'une liste compacte. Désormais la même
 * ligne (petite image + texte à côté) s'applique partout, cohérente avec l'objectif de
 * densité du mode Catalogue sur toutes les tailles d'écran.
 */
html[data-view="catalogue"] ul.products {
  grid-template-columns: 1fr !important; /* Une seule colonne quel que soit le réglage de colonnes. */
}
html[data-view="catalogue"] .tpc-product-card__excerpt { -webkit-line-clamp: 3; }

html[data-view="catalogue"] .tpc-product-card { flex-direction: row; align-items: stretch; }
html[data-view="catalogue"] .tpc-product-card__body { flex: 1; flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--tpc-space-2) var(--tpc-space-4); padding: var(--tpc-space-3) var(--tpc-space-4); min-width: 0; }
html[data-view="catalogue"] .tpc-product-card__brand,
html[data-view="catalogue"] .tpc-product-card__title,
html[data-view="catalogue"] .tpc-product-card__excerpt,
html[data-view="catalogue"] .tpc-product-card__meta { flex-basis: 100%; }
html[data-view="catalogue"] .tpc-product-card__title { flex-basis: auto; min-width: 8rem; flex: 1; }
html[data-view="catalogue"] .tpc-product-card__excerpt { display: -webkit-box; flex-basis: 100%; order: 5; }
html[data-view="catalogue"] .tpc-product-card__price { margin-top: 0; flex: 0 0 auto; }
html[data-view="catalogue"] .tpc-product-card__stock { flex: 0 0 auto; }
html[data-view="catalogue"] .tpc-product-card__actions { flex: 0 0 auto; margin-top: 0; margin-inline-start: auto; }
html[data-view="catalogue"] .tpc-product-card__actions .button { width: auto; min-width: 7rem; }
html[data-view="catalogue"] .tpc-product-card__badges { flex-direction: row; top: .3rem; left: .3rem; }

/* Au-delà de 48em, un peu plus de respiration (la largeur disponible le permet). */
@media (min-width: 48em) {
  html[data-view="catalogue"] .tpc-product-card__body { gap: var(--tpc-space-2) var(--tpc-space-5); padding: var(--tpc-space-4) var(--tpc-space-5); }
  html[data-view="catalogue"] .tpc-product-card__title { min-width: 14rem; }
  html[data-view="catalogue"] .tpc-product-card__actions .button { min-width: 9rem; }
  html[data-view="catalogue"] .tpc-product-card__badges { top: .4rem; left: .4rem; }
}

/*
 * Vignette du mode Catalogue (réglage Customizer § Catalogue > "Image dans le mode
 * Catalogue"). S'applique à toutes les tailles d'écran, pas seulement à partir de 48em :
 * l'objectif est une liste compacte y compris sur mobile. Spécificité volontairement plus
 * élevée que les règles ci-dessus (attribut data-thumb en plus) pour l'emporter sans
 * dépendre de l'ordre des règles dans le fichier.
 */
/*
 * Taille de l'image du mode Catalogue (réglage Customizer § Catalogue > "Taille de
 * l'image (mode Catalogue, px)"), pilotée par la variable --tpc-catalogue-thumb-size
 * (voir inc/helpers.php). S'applique à toutes les tailles d'écran : l'objectif est une
 * liste compacte y compris sur mobile. Les états "hidden"/"compact" (voir
 * tpc_catalogue_thumb_state() dans inc/display-modes.php) activent des règles
 * tout-ou-rien que la seule variable numérique ne peut pas exprimer.
 */
html[data-view="catalogue"] .tpc-product-card__media {
  flex: 0 0 var(--tpc-catalogue-thumb-size); width: var(--tpc-catalogue-thumb-size); height: var(--tpc-catalogue-thumb-size);
  align-self: center; border-radius: 4px; aspect-ratio: auto; /* la taille fixe prime sur le ratio carré par défaut. */
}
html[data-view="catalogue"][data-thumb="hidden"] .tpc-product-card__media { display: none; }
html[data-view="catalogue"][data-thumb="compact"] .tpc-product-card__badges { display: none; } /* Ne tiennent pas sous 56px. */

/* Réglages Customizer § Catalogue > "Séparateurs entre les lignes" et "Afficher le statut de stock".
   Par défaut (dividers "on") : lignes serrées avec un simple trait de séparation, plus
   compact qu'une grille de cartes espacées. Désactivé, on retrouve les cartes normales
   (avec bordure complète et espacement), comme en dehors du mode Catalogue. */
@media (min-width: 48em) {
  html[data-view="catalogue"][data-dividers="on"] ul.products { gap: 0; }
  html[data-view="catalogue"][data-dividers="on"] .tpc-product-card {
    border: 0; border-radius: 0; border-bottom: 1px solid var(--tpc-border-color);
  }
  html[data-view="catalogue"][data-dividers="on"] ul.products li.product:last-child .tpc-product-card { border-bottom: 0; }
}
html[data-view="catalogue"][data-stock="off"] .tpc-product-card__stock { display: none; }


/*
 * Densité des lignes (Customizer § Catalogue > "Hauteur des lignes"), via html[data-density].
 * "comfortable" = rendu historique (aucune règle ci-dessous). "compact" (défaut) : une seule
 * ligne par produit, sans description ni note ; "dense" : en plus, interlignes et marges
 * minimales, sans informations secondaires. La hauteur d'une ligne ne descend jamais sous
 * celle de l'image : réduire aussi "Taille de l'image" pour gagner davantage.
 * Les sélecteurs commencent par html[...] ul.products pour l'emporter sur les règles de
 * WooCommerce (margin-bottom des li.product, etc.) sans !important.
 */
html[data-view="catalogue"]:is([data-density="compact"], [data-density="dense"]) ul.products li.product { margin: 0; }
html[data-view="catalogue"]:is([data-density="compact"], [data-density="dense"]) ul.products { gap: 0; }
html[data-view="catalogue"]:is([data-density="compact"], [data-density="dense"]) .tpc-product-card__excerpt,
html[data-view="catalogue"]:is([data-density="compact"], [data-density="dense"]) .tpc-product-card .star-rating,
html[data-view="catalogue"]:is([data-density="compact"], [data-density="dense"]) .tpc-product-card .woocommerce-product-rating { display: none; }
html[data-view="catalogue"]:is([data-density="compact"], [data-density="dense"]) .tpc-product-card__body {
  flex-wrap: nowrap; gap: 0 var(--tpc-space-3); padding: .3rem var(--tpc-space-3); line-height: 1.25;
}
/* Marque (Compositeur) sur la même ligne que le titre, au lieu d'une ligne entière. */
html[data-view="catalogue"]:is([data-density="compact"], [data-density="dense"]) .tpc-product-card__brand { flex: 0 1 12rem; font-size: var(--tpc-text-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[data-view="catalogue"]:is([data-density="compact"], [data-density="dense"]) .tpc-product-card__title { flex: 1 1 0; min-width: 0; font-size: var(--tpc-text-base); }
html[data-view="catalogue"]:is([data-density="compact"], [data-density="dense"]) .tpc-product-card__actions .button { padding: .3rem .7rem; min-width: 0; font-size: var(--tpc-text-sm); line-height: 1.2; }
html[data-view="catalogue"]:is([data-density="compact"], [data-density="dense"]) .tpc-product-card__badges { display: none; }
/* Sur mobile : on autorise le retour à la ligne pour que titre et prix restent lisibles. */
@media (max-width: 47.99em) {
  html[data-view="catalogue"]:is([data-density="compact"], [data-density="dense"]) .tpc-product-card__body { flex-wrap: wrap; row-gap: .15rem; }
  html[data-view="catalogue"]:is([data-density="compact"], [data-density="dense"]) .tpc-product-card__brand { flex-basis: 100%; }
  html[data-view="catalogue"]:is([data-density="compact"], [data-density="dense"]) .tpc-product-card__title { flex-basis: 100%; }
}

html[data-view="catalogue"][data-density="dense"] .tpc-product-card__body { padding-block: .15rem; }
html[data-view="catalogue"][data-density="dense"] .tpc-product-card__meta,
html[data-view="catalogue"][data-density="dense"] .tpc-product-card__stock { display: none; }
html[data-view="catalogue"][data-density="dense"] .tpc-product-card__title,
html[data-view="catalogue"][data-density="dense"] .tpc-product-card__brand,
html[data-view="catalogue"][data-density="dense"] .tpc-product-card__price { font-size: var(--tpc-text-sm); }