/*
 * 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;
	/* Squelette de chargement (classe "uku-img-skeleton" posée dans
	   product-card.php, mécanisme partagé par tout le site) — voir base.css,
	   section "SQUELETTE DE CHARGEMENT IMAGE". */
}

.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;
}

/* Icône "ajout rapide" — réintroduite (mesuré en direct sur meyaboutique.com,
   qui en affiche une sur chaque carte), MAIS jamais inconditionnelle comme
   l'ancien bouton "+" retiré plus tôt : $data['can_quick_add']
   (uku_get_product_card_data(), theme-bridge.php) ne la rend que si un ajout
   en un clic est réellement possible — jamais sur un produit qui exige un
   choix de taille/mesure, exactement la raison qui avait justifié ce retrait. */
.uku-pcard__price-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.uku-pcard__quickadd {
	display: flex; align-items: center; justify-content: center;
	flex: 0 0 auto; width: 26px; height: 26px;
	background: none; border: none; padding: 0; margin: 0; cursor: pointer;
	color: var(--uku-grid-text, var(--uku-color-primary));
	transition: opacity 0.15s var(--uku-ease, ease);
}
.uku-pcard__quickadd svg { width: 17px; height: 17px; }
.uku-pcard__quickadd:hover { opacity: 0.6; }
.uku-pcard__quickadd:disabled { opacity: 0.4; pointer-events: none; }
/* Pendant l'appel réseau (wcAjaxAddToCart) : l'icône sac s'efface au profit
   du spinner générique (.uku-spinner, base.css) — sans ça, rien n'indiquait
   que le clic avait été pris en compte avant l'ouverture du tiroir panier. */
.uku-pcard__quickadd.is-loading { position: relative; opacity: 0.7; }
.uku-pcard__quickadd.is-loading svg { visibility: hidden; }
.uku-pcard__quickadd.is-loading::after {
	content: ''; position: absolute; inset: 0; margin: auto;
	width: var(--uku-icon-size-xs, 14px); height: var(--uku-icon-size-xs, 14px);
	border-radius: 50%;
	border: 2px solid rgba(14, 14, 16, 0.12);
	border-top-color: currentColor;
	animation: uku-spin var(--uku-spinner-duration, 0.7s) linear infinite;
}
@media (prefers-reduced-motion: reduce) {
	.uku-pcard__quickadd.is-loading::after { animation: none; }
}

/* Confirmation brève après un ajout réussi — même rôle que .is-added sur le
   bouton principal de la fiche produit (base.css), ici juste la couleur
   d'accent + un petit "pop" (scale) le temps que le tiroir panier s'ouvre. */
.uku-pcard__quickadd.is-added {
	color: var(--uku-color-accent, var(--uku-color-primary));
	animation: uku-pcard-quickadd-pop 0.35s var(--uku-ease);
}
@keyframes uku-pcard-quickadd-pop {
	0% { transform: scale(1); }
	40% { transform: scale(1.25); }
	100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
	.uku-pcard__quickadd.is-added { animation: none; }
}

/* ---- Réglages de carte (Affichage → Carte produit, uku_get_card_settings())
   posés en data-* sur le conteneur (.uku-products-grid ou .uku-cfg) plutôt
   que sur chaque .uku-pcard — un seul point de réglage par grille, jamais
   une classe à répéter côté template. Chaque option reste indépendante et
   combinable (cf. bibliothèque Sézane/Rouje/COS/Ssense, mémoire projet) —
   aucune n'est activée par défaut : pas de config = comportement neutre. */

.uku-products-grid[data-wish-pos="bottom_right"] .uku-pcard__wish,
.uku-cfg[data-wish-pos="bottom_right"] .uku-pcard__wish {
	top: auto;
	bottom: 8px;
}

/* "Révélée au survol" (COS) : invisible au repos sur device à survol réel
   uniquement — jamais sur tactile, où il n'existe pas de vrai hover (la
   pastille resterait invisible en permanence sans ce garde-fou média). */
@media (hover: hover) and (min-width: 768px) {
	.uku-products-grid[data-wish-reveal="hover"] .uku-pcard__wish,
	.uku-cfg[data-wish-reveal="hover"] .uku-pcard__wish {
		opacity: 0;
		transition: opacity 0.15s ease, color 0.15s ease, transform 0.15s cubic-bezier(0.33, 1, 0.68, 1);
	}
	.uku-products-grid[data-wish-reveal="hover"] .uku-pcard:hover .uku-pcard__wish,
	.uku-products-grid[data-wish-reveal="hover"] .uku-pcard:focus-within .uku-pcard__wish,
	.uku-cfg[data-wish-reveal="hover"] .uku-pcard:hover .uku-pcard__wish,
	.uku-cfg[data-wish-reveal="hover"] .uku-pcard:focus-within .uku-pcard__wish {
		opacity: 1;
	}
}

/* 2ème visuel au survol : jusqu'ici réservé au mode quick_shop uniquement
   (règle plus haut, [data-hover-mode="quick-shop"]) — ce réglage l'active
   indépendamment de tout mode, sur n'importe quelle grille. */
@media (hover: hover) and (min-width: 768px) {
	.uku-products-grid[data-hover-swap="1"] .uku-pcard:hover .uku-pcard__img-hover,
	.uku-cfg[data-hover-swap="1"] .uku-pcard:hover .uku-pcard__img-hover {
		opacity: 1;
	}
}

/* Badge "Nouveau" : même gabarit que .uku-pcard__badge, coloris inversé
   (fond plein) pour se distinguer visuellement de Rupture/Promo au premier
   coup d'œil sans dépendre d'une nouvelle variable de couleur de marque. */
.uku-pcard__badge--new {
	background: var(--uku-color-primary);
	color: var(--uku-color-bg);
}

/* Densité de grille (Affichage → Grille produits) : le sélecteur d'attribut
   [style*="--uku-card-gap"] ne matche QUE si uku_get_grid_density() a posé
   la variable (réglage explicite en admin) — sans lui, ces règles ne
   s'appliquent tout simplement jamais, et le gap fixe par breakpoint déjà en
   place (base.css, .uku-grid) ainsi que le calage "wide desktop ≥1440px"
   restent intégralement en vigueur. Plus sûr qu'un var(--x, repli) à
   reproduire à chaque breakpoint existant (risque d'en oublier un et de
   silencieusement changer le calage déjà validé en production). */
.uku-products-grid[style*="--uku-card-gap"] .uku-grid,
.uku-cfg[style*="--uku-card-gap"] .uku-grid {
	gap: var(--uku-card-gap);
}
.uku-products-grid[style*="--uku-card-pad"] .uku-pcard__name,
.uku-cfg[style*="--uku-card-pad"] .uku-pcard__name {
	margin-top: var(--uku-card-pad);
}