/**
 * SPD Product Card — canonical card styles (shared component)
 * ============================================================
 * Phase 5H.1 — extracted from spd-shop.css (§16–18 + card min-width
 * rules from §19b) so the canonical card design travels with the card
 * component instead of being bound to the shop archive page.
 *
 * `template-parts/products/product-card.php` is the single visual and
 * functional source of truth (React ProductCard.tsx — aspect-4/3 media,
 * object-contain, p-3, badges top-left, wishlist top-right, category /
 * title / price+formats / rating / CTA). It is rendered by:
 *
 *   - Shop / category / tag archives and product search
 *       → woocommerce/archive-product.php — the page container
 *         #spd-shop-page carries the .spd-product-cards scope class
 *   - Single product "Produits similaires" + up-sells
 *       → woocommerce/single-product/related.php + up-sells.php
 *         overrides — the sections carry the .spd-product-cards class
 *
 *   - Homepage "Produits Populaires & Ventes Flash"
 *       → template-parts/home/featured-products.php
 *         The grid carries the .spd-product-cards class so the same
 *         canonical card styles apply on the homepage as well.
 *         Only the surrounding section/grid styles live in
 *         spd-products.css.
 *
 * Scope convention: every rule below is prefixed with
 * `.spd-product-cards`, the class carried by the closest ancestor of
 * the card markup. The --spd-prod-* aliases reference the centralized
 * --spd-ui-* tokens defined in spd-design-system.css.
 *
 * @package SPD_Child
 * @since   2.6.0
 */

/* ============================================================
   1. Scoped tokens (--spd-prod-* aliases)
   ============================================================ */
.spd-product-cards {
	/* Section-scoped brand colors — reference the centralized UI tokens. */
	--spd-prod-blue:       var(--spd-ui-blue);
	--spd-prod-blue-dark:   var(--spd-ui-blue-dark);
	--spd-prod-blue-soft:   var(--spd-ui-blue-soft);
	--spd-prod-red:         var(--spd-ui-red);
	--spd-prod-gold:        var(--spd-ui-gold);

	/* Neutrals (Tailwind slate scale, raw values). */
	--spd-prod-slate-50:    #F8FAFC;
	--spd-prod-slate-100:   #F1F5F9;
	--spd-prod-slate-200:   #E2E8F0;
	--spd-prod-slate-200-90: rgba(226, 232, 240, 0.9);
	--spd-prod-slate-300:   #CBD5E1;
	--spd-prod-slate-400:   #94A3B8;
	--spd-prod-slate-500:   #64748B;
	--spd-prod-slate-700:   #334155;
	--spd-prod-slate-800:   #1E293B;
	--spd-prod-slate-900:   #0F172A;
	--spd-prod-blue-40:     rgba(15, 91, 148, 0.40);

	--spd-prod-focus-ring: 0 0 0 2px var(--spd-ui-blue);  /* React focus:ring-2 focus:ring-[#0F5B94] */

	/* Transitions — match the React Tailwind durations. */
	--spd-prod-t-200: 200ms cubic-bezier(0.4, 0, 0.2, 1);
	--spd-prod-t-300: 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================================
   2. Card container — React faithful
   ============================================================
   React: group bg-white rounded-2xl border border-slate-200 shadow-xs
   hover:shadow-md transition-all duration-300 flex flex-col
   justify-between overflow-hidden cursor-pointer relative.
   ============================================================ */
.spd-product-cards .spd-product-card {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: 100%;                          /* equal height within grid row */
	background-color: #fff;                /* bg-white */
	border: 1px solid var(--spd-prod-slate-200); /* React border-slate-200 */
	border-radius: var(--spd-radius-xl);   /* React rounded-2xl (16px) */
	box-shadow: var(--spd-shadow-xs);      /* React shadow-xs */
	overflow: hidden;
	padding: 0;                            /* media goes edge-to-edge */
	cursor: pointer;                       /* React: whole card navigates */
	transition: box-shadow var(--spd-prod-t-300);
	min-width: 0; /* grid/flex shrink safety — the card must never push
	               its grid track wider (long titles, wide price rows) */
}

/* React: hover:shadow-md transition-all duration-300 (no transform). */
.spd-product-cards .spd-product-card:hover {
	box-shadow: var(--spd-shadow-md);
}

/* ── Image media container — React: aspect-4/3, bg-slate-50 ──
   The image occupies the full inner width of the card, touching the
   top-left and top-right corners (the card's overflow:hidden + radius
   clips them). A stable 4:3 ratio and object-fit:cover keeps the media
   area filled edge-to-edge while centering the subject. */
.spd-product-cards .spd-product-card__media {
	position: relative;
	width: 100%;
	aspect-ratio: 4 / 3;                   /* React aspect-4/3 */
	background-color: var(--spd-prod-slate-50);
	overflow: hidden;
	border-radius: 0;                     /* no radius — image goes to card edge */
	margin-bottom: 0;
	padding: 0;                           /* full width, no artificial horizontal gap */
	display: flex;
	align-items: center;
	justify-content: center;
}

.spd-product-cards .spd-product-card__image-wrap {
	width: 100%;
	height: 100%;
	aspect-ratio: auto;
	border-radius: 0;
	background-color: transparent;      /* no second white frame */
	margin-bottom: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.spd-product-cards .spd-product-card__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;                    /* fill the media area edge-to-edge */
	object-position: center;              /* keep the subject centered */
	mix-blend-mode: multiply;             /* React: mix-blend-multiply */
	transition: transform var(--spd-prod-t-300), opacity 140ms ease;
}

.spd-product-cards .spd-product-card__image-wrap.is-changing .spd-product-card__img {
	opacity: 0;
}

/* React: group-hover:scale-105 */
.spd-product-cards .spd-product-card:hover .spd-product-card__img {
	transform: scale(1.05);
}

/* ── Unit pill (bottom-left of image) — React: bg-white/90 backdrop-blur-xs ── */
.spd-product-cards .spd-product-card__unit {
	position: absolute;
	bottom: 8px;                           /* bottom-2 */
	left: 12px;                            /* left-3 */
	z-index: 5;
	display: inline-flex;
	align-items: center;
	background-color: rgba(255, 255, 255, 0.9);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	color: var(--spd-prod-slate-700);
	font-size: 11px;                        /* text-[11px] */
	font-weight: var(--spd-font-weight-semibold);
	padding: 2px 8px;                       /* px-2 py-0.5 */
	border-radius: 6px;                     /* rounded-md (6px Tailwind) */
	border: 1px solid rgba(226, 232, 240, 0.6);
	box-shadow: var(--spd-shadow-xs);
	pointer-events: none;
}

/* ── Badges & wishlist (top corners) — adjust for overflow:hidden ──
   React: badge container absolute top-3 left-3 flex flex-col gap-1.5. */
.spd-product-cards .spd-product-card__badges {
	position: absolute;
	top: 12px;                             /* top-3 */
	left: 12px;                            /* left-3 */
	z-index: 10;
	display: flex;
	flex-direction: column;
	gap: 6px;                              /* gap-1.5 */
	pointer-events: none;
}

/* ── Badge ──
   React Badge.tsx size="sm": text-[11px] font-bold px-2 py-0.5 rounded-md
   uppercase tracking-wider; promo = bg-[#D93829], new = bg-[#0F5B94]. */
.spd-product-cards .spd-product-card__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;                          /* React text-[11px] */
	font-weight: var(--spd-font-weight-bold); /* React font-bold (700) */
	padding: 2px 8px;                          /* React px-2 py-0.5 */
	border-radius: 6px;                        /* React rounded-md (6px in Tailwind) */
	box-shadow: var(--spd-shadow-xs);
	line-height: 1.2;
	letter-spacing: 0.05em;                    /* React tracking-wider */
	pointer-events: none;
	user-select: none;
	text-transform: uppercase;
}

.spd-product-cards .spd-product-card__badge--promo {
	background-color: var(--spd-prod-red);   /* #D93829 */
	color: #fff;
}

.spd-product-cards .spd-product-card__badge--new {
	background-color: var(--spd-prod-blue);  /* #0F5B94 */
	color: #fff;
}

/* ── Wishlist button — React: absolute top-3 right-3 w-8 h-8
   rounded-full bg-white/80 backdrop-blur-xs text-slate-400
   hover:text-[#D93829] hover:bg-white shadow-xs. ── */
.spd-product-cards .spd-product-card__wishlist {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 10;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;                              /* w-8 */
	height: 32px;                            /* h-8 */
	border: none;
	border-radius: var(--spd-radius-full);
	background-color: rgba(255, 255, 255, 0.8);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	color: var(--spd-prod-slate-400);
	box-shadow: var(--spd-shadow-xs);
	cursor: pointer;
	transition: color var(--spd-prod-t-200), background-color var(--spd-prod-t-200);
}

.spd-product-cards .spd-product-card__wishlist:hover {
	color: var(--spd-prod-red);
	background-color: #fff;
}

/* React favorited state: bg-[#FDECEB] text-[#D93829] shadow-sm,
   heart filled (fill="currentColor"). */
.spd-product-cards .spd-product-card__wishlist.is-favorited,
.spd-product-cards .spd-product-card__wishlist.is-active {
	color: var(--spd-prod-red);
	background-color: #FDECEB;
	box-shadow: var(--spd-shadow-sm);
}
.spd-product-cards .spd-product-card__wishlist.is-active .spd-icon,
.spd-product-cards .spd-product-card__wishlist.is-favorited .spd-icon {
	fill: currentColor;
}

.spd-product-cards .spd-product-card__wishlist .spd-icon {
	width: 16px;
	height: 16px;
}

/* ── Info section — React: p-4 flex flex-col flex-1 justify-between ──
   React wraps category/title/price/rating in a compact plain div, with
   the CTA row as the second flex child — justify-between pushes the CTA
   to the bottom. Here __action is a sibling of __info, so the card-level
   justify-between handles it: __info grows (flex:1) and must NOT spread
   its own children. */
.spd-product-cards .spd-product-card__info {
	padding: 16px;                         /* p-4 */
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-width: 0; /* its children (title, price row) can push the card
	               wider — min-width:0 lets them shrink to the track */
}

.spd-product-cards .spd-product-card__category {
	display: block;
	margin-bottom: 4px;                    /* mb-1 */
	font-size: 11px;                        /* React text-[11px] */
	font-weight: var(--spd-font-weight-bold); /* React font-bold (700) */
	text-transform: uppercase;               /* React uppercase */
	letter-spacing: 0.05em;                  /* React tracking-wider */
	color: var(--spd-prod-slate-400);        /* React text-slate-400 */
	line-height: 1.2;
}

.spd-product-cards .spd-product-card__title {
	margin: 0 0 8px;                        /* mb-2 */
	font-size: 14px;                        /* React text-sm */
	font-weight: var(--spd-font-weight-bold); /* React font-bold (700) */
	color: var(--spd-prod-slate-900);       /* React text-slate-900 (navy/black) */
	line-height: 1.375;                     /* React leading-snug (1.375) */
	min-height: 0;
	display: block;
	overflow: visible;
	overflow-wrap: anywhere;
	transition: color var(--spd-prod-t-200);
}

.spd-product-cards .spd-product-card__title a {
	color: inherit;
	text-decoration: none;
	transition: color var(--spd-prod-t-200);
}

.spd-product-cards .spd-product-card:hover .spd-product-card__title a {
	color: var(--spd-prod-blue);           /* React group-hover:text-[#0F5B94] */
}

@media (min-width: 768px) {
	.spd-product-cards .spd-product-card__title {
		font-size: 16px;                    /* React md:text-base (md = 768px) */
	}
}

.spd-product-cards .spd-product-card__description {
	margin: -2px 0 8px;
	font-size: 12px;
	line-height: 1.45;
	color: var(--spd-prod-slate-500);
}

.spd-product-cards .spd-product-card__description p {
	margin: 0;
}

/* ── Price row — React: flex items-center justify-between gap-2, mb-2 ── */
.spd-product-cards .spd-product-card__price {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;                              /* gap-2 */
	flex-wrap: nowrap;
	margin-bottom: 8px;                    /* mb-2 */
	padding-top: 0;
}

.spd-product-cards .spd-product-card__price-main {
	display: inline-flex;
	align-items: baseline;
	gap: 8px;                              /* React gap-2 */
	flex-wrap: wrap;
	min-width: 0; /* the price row is flex-wrap:nowrap — without
	               min-width:0 a long price + formats badge overflows */
}

/* ── Price styling — React Price.tsx size=md:
   text-base font-extrabold text-[#D93829] tracking-tight
   Currency: text-xs md:text-sm font-bold uppercase
   Original (del): text-xs md:text-sm font-medium text-slate-400 line-through
   Discount badge: text-[10px] font-extrabold bg-[#FDECEB] text-[#D93829] ── */
.spd-product-cards .spd-product-card__price .spd-price,
.spd-product-cards .spd-product-card__price ins.spd-price {
	font-size: 16px;                            /* React text-base (md size) */
	font-weight: var(--spd-font-weight-extrabold); /* React font-extrabold (800) */
	color: var(--spd-prod-red);                 /* React text-[#D93829] */
	letter-spacing: var(--spd-tracking-tight);
	line-height: 1.2;
	text-decoration: none;                      /* remove <ins> default underline */
}

.spd-product-cards .spd-product-card__price .spd-price-currency {
	font-size: 12px;                            /* React text-xs */
	font-weight: var(--spd-font-weight-bold);   /* React font-bold (700) */
	text-transform: uppercase;
}

@media (min-width: 768px) {
	.spd-product-cards .spd-product-card__price .spd-price-currency {
		font-size: 14px;                         /* React md:text-sm (md = 768px) */
	}
}

/* Struck-through original price (sale products). */
.spd-product-cards .spd-product-card__price del.spd-price {
	font-size: 12px;                            /* React text-xs */
	font-weight: var(--spd-font-weight-medium); /* React font-medium (500) */
	color: var(--spd-prod-slate-400);           /* React text-slate-400 */
	text-decoration: line-through;
	line-height: 1.2;
	order: 2;                                   /* sale price first */
}

@media (min-width: 768px) {
	.spd-product-cards .spd-product-card__price del.spd-price {
		font-size: 14px;                         /* React md:text-sm (md = 768px) */
	}
}

/* Sale price (<ins>) rendered first. */
.spd-product-cards .spd-product-card__price ins.spd-price {
	order: 1;
}

/* ── Price discount badge ──
   React Price.tsx: text-[10px] font-extrabold bg-[#FDECEB] text-[#D93829]
   px-1.5 py-0.5 rounded-md */
.spd-product-cards .spd-product-card__price-discount {
	font-size: 10px;
	font-weight: var(--spd-font-weight-extrabold); /* 800 */
	color: var(--spd-prod-red);
	background-color: #FDECEB;
	padding: 2px 6px;                       /* px-1.5 py-0.5 */
	border-radius: 6px;                     /* rounded-md (6px Tailwind) */
	line-height: 1.2;
	order: 3;                               /* after sale (1) and original (2) */
}

/* ── Formats badge — React: text-[10px] font-bold text-[#0F5B94] bg-[#EBF3F9] ── */
.spd-product-cards .spd-product-card__formats {
	font-size: 10px;                        /* text-[10px] */
	font-weight: var(--spd-font-weight-bold);
	color: var(--spd-prod-blue);
	background-color: var(--spd-prod-blue-soft);
	padding: 2px 8px;                       /* px-2 py-0.5 */
	border-radius: 6px;                     /* rounded-md (6px Tailwind) */
	flex-shrink: 0;
	white-space: nowrap;
}

/* ── Rating — React: mb-4 + Rating.tsx inline-flex items-center
   gap-1.5, star size 14 (sm), #EAA21D filled / slate-300 empty,
   review count text-xs. ── */
.spd-product-cards .spd-product-card__rating {
	display: flex;
	align-items: center;
	gap: 6px;                                  /* React gap-1.5 */
	margin-bottom: 16px;                       /* mb-4 */
	font-size: 12px;                           /* text-xs */
	color: var(--spd-prod-slate-500);
	padding-top: 2px;
	line-height: 1;
}

.spd-product-cards .spd-product-card__stars {
	display: inline-flex;
	align-items: center;
	/* React: flex items-center — no gap between stars (default flex) */
}

.spd-product-cards .spd-product-card__star {
	display: inline-flex;
	align-items: center;
	color: var(--spd-prod-slate-300);        /* empty star — stroke only, slate-300 */
}

.spd-product-cards .spd-product-card__star .spd-icon {
	width: 14px;                             /* React size={14} */
	height: 14px;
}

.spd-product-cards .spd-product-card__star.is-filled {
	color: #EAA21D;                          /* React fill+stroke #EAA21D gold */
}

.spd-product-cards .spd-product-card__review-count {
	font-size: 12px;                           /* React text-xs */
	font-weight: var(--spd-font-weight-normal); /* React font-normal */
	color: var(--spd-prod-slate-500);          /* React text-slate-500 */
}

/* ── Action button — React: flex items-center gap-2 pt-2 border-t border-slate-100 ──
   The action div is INSIDE the info section in the React (it's part of the
   flex-1 justify-between bottom group). In product-card.php it's rendered
   as a sibling of .spd-product-card__info. We add the border-top here. */
.spd-product-cards .spd-product-card__action {
	padding-top: 8px;                       /* pt-2 */
	padding-left: 16px;                    /* React: action is inside p-4 */
	padding-right: 16px;                   /* React: action is inside p-4 */
	padding-bottom: 16px;                  /* React: p-4 bottom padding */
	border-top: 1px solid var(--spd-prod-slate-100);
	margin-top: 0;
}

/* ============================================================
   3. Card button — states + label/added toggle
   ============================================================
   Base button — React: flex-1 py-2 px-2.5 rounded-xl font-bold
   text-[11px] sm:text-xs shadow-xs whitespace-nowrap
   ============================================================ */
.spd-product-cards .spd-product-card__btn {
	display: flex;
	width: 100%;                           /* React flex-1 — full width */
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 8px 10px;                        /* py-2 px-2.5 */
	border: none;
	border-radius: var(--spd-radius-lg);     /* React rounded-xl (12px) */
	background-color: var(--spd-prod-blue);  /* bg-[#0F5B94] */
	color: #fff;
	font-family: var(--spd-font-family);
	font-size: 11px;                          /* text-[11px] */
	font-weight: var(--spd-font-weight-bold); /* font-bold (700) */
	text-decoration: none;
	cursor: pointer;
	box-shadow: var(--spd-shadow-xs);
	transition: background-color var(--spd-prod-t-200),
		box-shadow var(--spd-prod-t-200),
		transform var(--spd-prod-t-200);
	line-height: 1.2;
	white-space: nowrap;
}

@media (min-width: 640px) {
	.spd-product-cards .spd-product-card__btn {
		font-size: 12px;                      /* sm:text-xs */
	}
}

.spd-product-cards .spd-product-card__btn:hover {
	background-color: var(--spd-prod-blue-dark); /* hover:bg-[#0A436D] */
	color: #fff;
}

.spd-product-cards .spd-product-card__btn:active {
	transform: scale(0.98);                   /* active:scale-98 */
}

.spd-product-cards .spd-product-card__btn:focus-visible {
	outline: none;
	box-shadow: var(--spd-prod-focus-ring);
}

.spd-product-cards .spd-product-card__btn .spd-icon {
	width: 13px;                            /* React ShoppingBag/SlidersHorizontal size={13} */
	height: 13px;
	flex-shrink: 0;
}

/* Label — truncated to fit */
.spd-product-cards .spd-product-card__btn-label {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* "Ajouté !" feedback — hidden by default, shown via JS after AJAX
   add-to-cart (WooCommerce adds .is-added / .loading classes). */
.spd-product-cards .spd-product-card__btn-added {
	display: none;
	align-items: center;
	gap: 4px;
}

.spd-product-cards .spd-product-card__btn-added .spd-icon {
	width: 14px;
	height: 14px;
}

.spd-product-cards .spd-product-card__btn.is-added .spd-product-card__btn-label {
	display: none;
}

.spd-product-cards .spd-product-card__btn.is-added .spd-product-card__btn-added {
	display: inline-flex;
}

.spd-product-cards .spd-product-card__btn.is-added {
	background-color: #059669;               /* emerald-600 */
}

/* Loading state (WooCommerce AJAX add-to-cart in-flight). */
.spd-product-cards .spd-product-card__btn.loading {
	opacity: 0.7;
	cursor: wait;
}

/* ── Out-of-stock variant ──
   React: bg-slate-100 text-slate-400 cursor-not-allowed
   Compound selector (.btn.btn--disabled) raises specificity so the base
   .spd-product-card__btn rule above cannot override it. */
.spd-product-cards .spd-product-card__btn.spd-product-card__btn--disabled {
	background-color: var(--spd-prod-slate-100);
	color: var(--spd-prod-slate-400);
	cursor: not-allowed;
}

.spd-product-cards .spd-product-card__btn.spd-product-card__btn--disabled:hover {
	background-color: var(--spd-prod-slate-100);
	color: var(--spd-prod-slate-400);
}

/* ── Variable product variant ──
   React: bg-slate-900 hover:bg-[#0F5B94] */
.spd-product-cards .spd-product-card__btn.spd-product-card__btn--options {
	background-color: var(--spd-prod-slate-900);
}

.spd-product-cards .spd-product-card__btn.spd-product-card__btn--options:hover {
	background-color: var(--spd-prod-blue);
}

/* ── Card state variants ──
   React applies no opacity/grayscale to out-of-stock cards — only the
   button state differs (bg-slate-100 text-slate-400). */

/* Hide cards filtered out by homepage tabs. */
.spd-product-cards .spd-product-card[hidden] {
	display: none;
}

/* ============================================================
   4. Reduced motion
   ============================================================
   Mirrors the homepage card rules (spd-products.css §13). On archives
   the blanket `.spd-shop *` rule in spd-shop.css also applies; this
   block keeps the card self-sufficient wherever it renders. */
@media (prefers-reduced-motion: reduce) {
	.spd-product-cards .spd-product-card,
	.spd-product-cards .spd-product-card__img,
	.spd-product-cards .spd-product-card__title,
	.spd-product-cards .spd-product-card__title a,
	.spd-product-cards .spd-product-card__wishlist,
	.spd-product-cards .spd-product-card__btn {
		transition: none;
	}

	.spd-product-cards .spd-product-card:hover .spd-product-card__img {
		transform: none;
	}

	.spd-product-cards .spd-product-card__btn:active {
		transform: none;
	}
}