/*
 * Carte produit Trade Medical (.tm-pcard) — gabarit template-parts/product-card.php.
 *
 * Maquette : « Catalogue Produits » (ordinateur) et « Catalogue Produits Mobile » (Claude Design).
 * Toutes les valeurs viennent des jetons du design system (css/tm-tokens.css). Les valeurs de la
 * maquette absentes du design system sont ramenées au jeton le plus proche (à égalité : le jeton
 * le plus grand). Correspondances :
 *   ordinateur : textes 13 → --text-sm, 14,5 → --text-sm, 19 → --text-lg, 12,5 / 11,5 → --text-xs,
 *                10,5 → --text-2xs ; espacements 9 / 10 → --space-2 / --space-3, 14-15 → --space-4,
 *                11-13 → --space-3 ; avatar 28 → --space-8 ; bouton favori 34 → --space-8 ;
 *                interligne du titre 1,35 → --lh-snug.
 *   mobile     : rayon 12 → --radius-lg ; textes 12,5 / 11,5 → --text-xs, 11 / 10,5 / 9,5 → --text-2xs,
 *                16 → --text-base ; espacements 10 → --space-3, 5 → --space-1.
 * Valeurs conservées faute de jeton : bordures de 1 px, soulèvement de 2 px au survol, proportions
 * d'image (4:3 ordinateur, 1:1 mobile), zone de toucher de 44 px du favori (accessibilité).
 * Point de rupture mobile : 767 px (celui d'Elementor et de Besa).
 *
 * Toute la carte est cliquable : le lien du titre s'étend sur la carte (::after), le favori et le
 * lien de la boutique passent au-dessus (z-index 2).
 */

.tm-pcard {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	font-family: var(--font-sans);
	color: var(--fg-1);
	text-align: left; /* Besa centre le contenu des cartes produit */
	background: var(--bg-surface);
	border: 1px solid var(--border-subtle);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
	transition: box-shadow var(--dur-normal) var(--ease-out), transform var(--dur-normal) var(--ease-out);
}

/* Montants WooCommerce (wc_price) : Besa leur donne sa propre taille et sa couleur ; dans la carte,
   ils reprennent celles de leur conteneur (prix, prix barré, économie). */
.tm-pcard .woocommerce-Price-amount,
.tm-pcard .woocommerce-Price-amount bdi,
.tm-pcard .woocommerce-Price-currencySymbol {
	font: inherit;
	color: inherit;
	letter-spacing: inherit;
}

.tm-pcard:hover {
	box-shadow: var(--shadow-md);
	transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
	.tm-pcard,
	.tm-pcard:hover {
		transition: none;
		transform: none;
	}
}

/* ---------- Image et badges ---------- */

.tm-pcard__media {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 4 / 3;
	background: var(--tm-neutral-50);
	border-bottom: 1px solid var(--border-subtle);
}

.tm-pcard .tm-pcard__img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.tm-pcard__placeholder {
	width: var(--space-12);
	height: var(--space-12);
	color: var(--tm-neutral-300);
}

.tm-pcard__badge {
	position: absolute;
	left: var(--space-2);
	max-width: calc(100% - 2 * var(--space-2));
	padding: var(--space-1) var(--space-2);
	overflow: hidden;
	font-size: var(--text-xs);
	line-height: var(--lh-snug);
	white-space: nowrap;
	text-overflow: ellipsis;
	border-radius: var(--radius-pill);
}

.tm-pcard__badge--discount {
	top: var(--space-2);
	font-weight: var(--fw-bold);
	color: var(--tm-neutral-900);
	background: var(--tm-yellow-300);
}

.tm-pcard__badge--type {
	bottom: var(--space-2);
	font-weight: var(--fw-medium);
	color: var(--fg-2);
	background: var(--bg-surface);
	box-shadow: var(--shadow-xs);
}

/* Bouton favori : le contenu est fourni par YITH Wishlist (rempli en AJAX). On garde le lien et
   ses messages pour les lecteurs d'écran, on n'affiche que l'icône dans un rond. */
.tm-pcard__fav {
	position: absolute;
	top: var(--space-1);
	right: var(--space-1);
	z-index: 2;
}

.tm-pcard__fav .yith-wcwl-add-to-wishlist {
	margin: 0;
}

.tm-pcard__fav a {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	color: var(--fg-3);
	text-decoration: none;
}

.tm-pcard__fav a::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: var(--space-8);
	height: var(--space-8);
	background: var(--bg-surface);
	border-radius: var(--radius-pill);
	box-shadow: var(--shadow-xs);
	transform: translate(-50%, -50%);
	transition: transform var(--dur-fast) var(--ease-spring);
}

.tm-pcard__fav a:hover::before {
	transform: translate(-50%, -50%) scale(1.08);
}

.tm-pcard__fav a:focus-visible {
	outline: none;
}

.tm-pcard__fav a:focus-visible::before {
	box-shadow: var(--shadow-focus);
}

.tm-pcard__fav svg,
.tm-pcard__fav i,
.tm-pcard__fav img {
	position: relative;
	width: var(--space-5);
	height: var(--space-5);
	margin: 0;
	font-size: var(--text-lg);
	line-height: 1;
}

.tm-pcard__fav .yith-wcwl-wishlistexistsbrowse a,
.tm-pcard__fav .yith-wcwl-wishlistaddedbrowse a,
.tm-pcard__fav .exists a {
	color: var(--tm-orange-300);
}

.tm-pcard__fav span,
.tm-pcard__fav .feedback {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* ---------- Corps ---------- */

.tm-pcard__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: var(--space-2);
	padding: var(--space-4) var(--space-4) var(--space-1);
}

.tm-pcard__brand {
	font-size: var(--text-sm);
	font-weight: var(--fw-medium);
	color: var(--fg-3);
}

.tm-pcard__title {
	display: -webkit-box;
	min-height: calc(2em * var(--lh-snug));
	margin: 0;
	overflow: hidden;
	font-size: var(--text-sm);
	font-weight: var(--fw-semibold);
	line-height: var(--lh-snug);
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.tm-pcard__title a {
	color: var(--fg-1);
	text-decoration: none;
}

/* Lien étendu à toute la carte */
.tm-pcard__title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: var(--radius-lg);
}

.tm-pcard:hover .tm-pcard__title a {
	color: var(--tm-blue-700);
}

.tm-pcard__title a:focus-visible {
	outline: none;
}

/* Contour de focus à l'intérieur de la carte (overflow: hidden couperait une ombre extérieure). */
.tm-pcard__title a:focus-visible::after {
	box-shadow: inset 0 0 0 2px var(--border-focus);
}

.tm-pcard__price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--space-2);
}

.tm-pcard__price-current {
	font-size: var(--text-lg);
	font-weight: var(--fw-bold);
	letter-spacing: var(--ls-snug);
	color: var(--tm-blue-600);
}

.tm-pcard__price-regular {
	font-size: var(--text-xs);
	color: var(--fg-4);
	text-decoration: line-through;
}

.tm-pcard__saving {
	font-size: var(--text-xs);
	font-weight: var(--fw-medium);
	color: var(--tm-green-400);
}

/* ---------- Vendeur ---------- */

/* Bloc vendeur : badge de profil sur sa propre ligne, au-dessus de l'avatar et du nom, jamais
   tronqué (2 lignes si besoin) — écart voulu à la maquette, où le badge est à droite de l'avatar.
   Grille : badge / avatar + nom / avatar + lieu. */
.tm-pcard__seller {
	display: grid;
	grid-template-columns: var(--space-8) minmax(0, 1fr);
	grid-template-areas:
		"type   type"
		"avatar name"
		"avatar place";
	align-items: center;
	gap: var(--space-1) var(--space-2);
	margin: var(--space-3) var(--space-4) 0;
	padding: var(--space-3) 0;
	border-top: 1px solid var(--border-subtle);
}

.tm-pcard__avatar {
	grid-area: avatar;
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: var(--space-8);
	height: var(--space-8);
	font-size: var(--text-2xs);
	font-weight: var(--fw-bold);
	color: var(--tm-blue-800);
	background: var(--tm-pale-blue);
	border-radius: var(--radius-pill);
}

/* Badge de profil : style partagé .tm-badge (style.css : couleurs, bordure, coche des profils
   vérifiés) ; ici, seulement sa place et sa taille (sur deux lignes si besoin, d'où un rayon de
   carte plutôt qu'une pilule). */
.tm-pcard__seller-type {
	grid-area: type;
	justify-self: start;
	max-width: 100%;
	margin: 0 0 var(--space-1);
}

.tm-pcard__seller-type .tm-badge {
	gap: var(--space-1);
	max-width: 100%;
	margin: 0;
	padding: var(--space-1) var(--space-2);
	font-size: var(--text-2xs);
	line-height: var(--lh-snug);
	white-space: normal;
	border-radius: var(--radius-lg);
}

.tm-pcard__seller-name {
	grid-area: name;
	position: relative;
	z-index: 2; /* au-dessus du lien étendu du titre */
	min-width: 0;
	overflow: hidden;
	font-size: var(--text-xs);
	font-weight: var(--fw-medium);
	color: var(--fg-2);
	white-space: nowrap;
	text-decoration: none;
	text-overflow: ellipsis;
}

a.tm-pcard__seller-name:hover {
	color: var(--tm-blue-700);
}

.tm-pcard__place {
	grid-area: place;
	min-width: 0;
	display: flex;
	align-items: center;
	gap: var(--space-1);
	overflow: hidden;
	font-size: var(--text-xs);
	color: var(--fg-4);
	white-space: nowrap;
}

.tm-pcard__place > span {
	overflow: hidden;
	text-overflow: ellipsis;
}

.tm-pcard__icon {
	flex-shrink: 0;
	width: var(--space-3);
	height: var(--space-3);
}

/* ---------- Mobile ---------- */

@media (max-width: 767px) {
	.tm-pcard {
		border-radius: var(--radius-lg);
	}

	.tm-pcard__media {
		aspect-ratio: 1 / 1;
	}

	.tm-pcard__badge {
		font-size: var(--text-2xs);
	}

	.tm-pcard__body {
		gap: var(--space-1);
		padding: var(--space-3) var(--space-3) 0;
	}

	.tm-pcard__brand,
	.tm-pcard__title {
		font-size: var(--text-xs);
	}

	.tm-pcard__price-current {
		font-size: var(--text-base);
	}

	.tm-pcard__price-regular {
		font-size: var(--text-2xs);
	}

	.tm-pcard__saving,
	.tm-pcard__avatar {
		display: none;
	}

	/* Avatar masqué : une seule colonne (badge, nom, lieu). */
	.tm-pcard__seller {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			"type"
			"name"
			"place";
		margin: var(--space-2) var(--space-3) 0;
		padding: var(--space-2) 0 var(--space-3);
	}

	.tm-pcard__seller-name {
		font-size: var(--text-xs);
	}

	.tm-pcard__place {
		font-size: var(--text-2xs);
	}
}