/*
 * Mobile-first strict : tout ce qui suit s'applique d'abord au mobile,
 * enrichi ensuite par @media (min-width: var(--uku-bp-tablet)) pour desktop.
 * Jamais l'inverse — règle actée dans la spec.
 */

.uku-pcard {
	position: relative;
}

.uku-pcard__media {
	position: relative;
	/* 4:5 plutôt que 3:4 — ratio standard des grilles mode premium (Aritzia,
	   COS, Ssense) : plus haut, donc moins de recadrage forcé sur des photos
	   silhouette souvent tirées plus verticales que 3:4, qui coupaient trop
	   haut/bas ("crop trop serré, silhouette coupée" signalé). */
	aspect-ratio: 4 / 5;
	overflow: hidden;
	border-radius: 8px;
	background-color: #f2f2f2;
	/* Squelette animé pendant le chargement (loading="lazy") — un dégradé
	   qui balaie l'aplat gris ; entièrement recouvert dès que la photo est
	   peinte par-dessus, donc rien à retirer en JS. */
	background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.7) 20%, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0) 100%);
	background-size: 200% 100%;
	animation: uku-skeleton-shimmer 1.6s ease-in-out infinite;
}

@keyframes uku-skeleton-shimmer {
	0% { background-position: 200% 0; }
	100% { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
	.uku-pcard__media { animation: none; }
}

.uku-pcard__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* "top" plutôt que "center" (défaut) : quand la photo source est plus
	   verticale que le cadre 4:5, un recadrage centré coupe un peu de tête
	   ET un peu de pieds à parts égales — biaiser vers le haut préserve le
	   visage/l'épaule, zone qu'aucun oeil ne pardonne de voir tronquée,
	   quitte à perdre un peu plus bas (chaussures) qui se remarque moins. */
	object-position: center top;
	display: block;
	/* Zoom léger réservé au survol (règle plus bas) — jamais par défaut. */
	transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Zoom discret uniquement sur device à survol réel — jamais sur tactile où
   il n'y a "hover" qu'au premier tap, ce qui ferait flasher l'effet sans
   raison avant la navigation. */
@media (hover: hover) and (min-width: 768px) {
	.uku-pcard:hover .uku-pcard__media img:not(.uku-pcard__img-hover) {
		transform: scale(1.045);
	}
}

.uku-pcard__badge {
	position: absolute;
	top: 8px;
	left: 8px;
	background: var(--uku-color-bg);
	color: var(--uku-color-primary);
	font-size: 10px;
	letter-spacing: 0.04em;
	padding: 3px 8px;
	border-radius: 2px;
	text-transform: uppercase;
}

/* Zone de tap : minimum 44px recommandé (Apple HIG) une fois le padding
   inclus dans le bouton réel — 30px de cible visuelle + marge cliquable. */
.uku-pcard__wish {
	position: absolute;
	top: 8px;
	right: 8px;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--uku-color-bg);
	/* Couleur explicite : sans elle l'icône (currentColor) hérite d'un
	   ambiant parfois blanc/quasi-blanc et devient invisible sur la pastille
	   claire ("blanc sur blanc" signalé) — corrigé ici + ombre en défense. */
	color: var(--uku-color-primary);
	box-shadow: 0 1px 5px rgba(0, 0, 0, 0.18);
	border: none;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: color 0.15s ease, transform 0.15s cubic-bezier(0.33, 1, 0.68, 1);
}

.uku-pcard__wish:active {
	transform: scale(0.88);
}

.uku-pcard__wish.is-active {
	color: var(--uku-color-accent);
}

/* Nom en police de texte (pas la serif de titrage) : une display serif
   répétée des dizaines de fois dans une grille dense casse net l'effet
   "premium" qu'elle produit en grand format (PDP, hero) — c'est la police
   de texte, sobre et nette à petite taille, qui donne le ton épuré des
   grilles Zara/COS/Arket. Casse phrase, jamais tout capitales (réservé aux
   libellés de navigation/filtres). */
.uku-pcard__name {
	font-family: var(--uku-font-body);
	/* Même famille que la nav (.uku-header__nav a, 12px) — déjà le bon choix
	   pour une grille dense (une display serif répétée des dizaines de fois
	   casse l'effet premium qu'elle produit en grand format) ; remonté à
	   14px/600 (au lieu de 13px/500) pour une présence plus affirmée, plus
	   proche du poids réel utilisé sur les grilles Aritzia/COS. */
	font-size: 14px;
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: 0.005em;
	/* 10px (au lieu de 6px) entre nom et prix — respiration insuffisante
	   signalée, la fourchette demandée est 8-12px. */
	margin: 20px 0 10px;
	/* --uku-grid-text : posée en inline sur .uku-products-grid uniquement
	   quand un fond de grille par shortcode a été choisi (cf. products-
	   grid.php) — hérite jusqu'ici, sinon retombe sur la couleur du thème
	   comme partout ailleurs (boutique, widgets sans réglage). */
	color: var(--uku-grid-text, var(--uku-color-primary));
}

/* Carte éclatée par couleur (option shortcode) — discret, sous le nom. */
.uku-pcard__color-label {
	font-family: var(--uku-font-body);
	font-size: 11px;
	letter-spacing: 0.01em;
	color: var(--uku-grid-text, var(--uku-color-muted, #888));
	margin: 0 0 4px;
}

.uku-pcard__price {
	font-family: var(--uku-font-body);
	font-size: 13px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	/* Repris sur la couleur pleine du nom (plus la couleur "muted" grisée
	   d'avant) : un prix en gris clair et poids normal se lisait "en retrait"
	   par rapport au reste de la carte — jamais le cas chez Aritzia/COS, où
	   le prix a la même présence que le nom. */
	color: var(--uku-grid-text, var(--uku-color-primary));
	margin: 0;
}

/* Le bouton d'ajout rapide "+" (.uku-pcard__quickadd/__add-btn) a été retiré
   de product-card.php — grille éditoriale pure (cf. commentaire dans le
   template), plus de CSS associé à maintenir ici. */