/*
 * ProductCard (ProductCard.jsx dell'oracolo) — la tile del catalogo.
 * Composito: usa Card (superficie/hover), Badge (fascia estetica/nuovo),
 * IconButton (wishlist), PriceTag/rate (già iniettati dal filtro sul blocco
 * prezzo, vedi functions.php), Rating (già iniettato via hook), Button
 * (nativo, product-button). Uso reale: la card `<li class="wc-block-product">`
 * dentro woocommerce/product-template (archive-product.html). NON copre
 * ancora i prodotti correlati sulla PDP (stesso blocco ma non è un
 * "archive template" nel bridge WooCommerce, i hook classici di
 * functions.php non ci arrivano — solo questa CSS si applica lì).
 *
 * NON include il badge "scorta bassa": la logica dati esiste già nel
 * vecchio child (flashmac_sf_loop_stock, quantità <= 3) ma è una delle 8
 * dipendenze esterne in lavorazione su Design (§9bis punto 4) — fermato al
 * confine, non improvvisato.
 */

/* ---- Superficie della card (equivalente a Card, applicato dove WooCommerce
   genera già il proprio <li>: non un blocco nostro da vestire con uno Stile) ---- */
.wc-block-product {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--wp--custom--surface-card);
	border: var(--wp--custom--border-width--hair) solid var(--wp--custom--border-subtle);
	border-radius: var(--wp--custom--radius--lg);
	overflow: hidden;
	box-shadow: var(--wp--custom--shadow--sm);
	transition:
		transform var(--wp--custom--dur--base) var(--wp--custom--ease--out),
		box-shadow var(--wp--custom--dur--base) var(--wp--custom--ease--out);
}
@media (hover: hover) {
	.wc-block-product:hover {
		transform: translateY(-6px);
		box-shadow: var(--wp--custom--shadow--lg);
	}
}

/* ---- Immagine — riquadro 5:4, foto "contain" con margine, sfondo bianco
   (letterale dell'oracolo, non un token: le foto prodotto restano su bianco
   anche in tema scuro, scelta comune nell'e-commerce). "scale":"contain" va
   impostato sull'attributo del blocco in archive-product.html (altrimenti lo
   style inline "object-fit:cover" del blocco nativo vince, mai da forzare
   con !important). ---- */
.wc-block-components-product-image {
	position: relative;
	aspect-ratio: 5 / 4;
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}
.wc-block-components-product-image img {
	padding: 7%;
	box-sizing: border-box;
}

/* ---- Badge fascia estetica / "Nuovo" — in alto a sinistra sull'immagine
   (iniettati da functions.php, woocommerce_before_shop_loop_item_title) ---- */
.fm-card-badges {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 1;
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
}

/* ---- Wishlist — cuoricino in alto a destra sull'immagine (iniettato da
   functions.php, woocommerce_after_shop_loop_item). Icona intera via ::before
   invece del glifo letterale nel markup, così il testo cambia con un solo
   selettore invece di duplicare il bottone per stato "salvato"/"non salvato"
   (stesso principio del "senza JS che tocchi lo stile", solo la classe
   .is-active cambia — coerente con IconButton/Tag). ---- */
.fm-card-wish {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 1;
}
.fm-card-wish-icon {
	font-size: 0;
}
.fm-card-wish-icon::before {
	content: "♡";
	font-size: 15px;
}
.fm-card-wish.is-active .fm-card-wish-icon::before {
	content: "♥";
}
.fm-card-wish.is-active {
	color: var(--wp--custom--accent);
}

/* ---- Esaurito — overlay sull'immagine, via CSS pura sulla classe nativa
   WooCommerce (.outofstock sulla <li>): nessun dato dinamico da iniettare,
   solo uno stato. Il testo "Non disponibile" del bottone nativo resta la
   fonte accessibile reale (letta dagli screen reader come testo vero); il
   badge qui è un rinforzo visivo decorativo, coerente con quel testo. ---- */
.wc-block-product.outofstock .wc-block-components-product-image::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(13, 11, 20, 0.55);
}
.wc-block-product.outofstock .wc-block-components-product-image::before {
	content: "Esaurito";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 1;
	font-family: var(--wp--preset--font-family--spec);
	font-size: var(--wp--preset--font-size--xxs);
	font-weight: var(--wp--custom--fw--bold);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--custom--on-accent);
	background: var(--wp--preset--color--danger);
	padding: var(--wp--custom--badge-padding--md--y) var(--wp--custom--badge-padding--md--x);
	border-radius: var(--wp--custom--radius--pill);
}

/* ---- Corpo della card ---- */
.wc-block-product h2.wp-block-post-title {
	margin: 0;
	padding: 0 var(--wp--preset--spacing--4);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--sm); /* il blocco NON deve avere l'attributo "fontSize" (genera .has-md-font-size con !important nel core WP) — tolto in archive-product.html, mai da forzare qui */
	font-weight: var(--wp--custom--fw--semibold);
	color: var(--wp--custom--text-strong);
	letter-spacing: -0.005em;
	line-height: 1.3;
}
.wc-block-product h2.wp-block-post-title a {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 2.6em;
	text-decoration: none;
	color: inherit;
}
/* STATO.md §3.6: nell'oracolo il titolo della card non è nemmeno un <a> (il click sta sulla
   card intera via onClick) e non cambia mai colore — il segnale di hover è solo il
   sollevamento della card. Qui il titolo È un <a> reale (post-title isLink:true), quindi va
   neutralizzato l'hover→accent globale di styles.blocks."core/post-title" in theme.json
   (pensato per H1/blog, non per questo contesto) SENZA toccare quella regola globale. */
.wc-block-product h2.wp-block-post-title a:hover {
	color: var(--wp--custom--text-strong);
}

.wc-block-product .fm-rating {
	margin: 8px var(--wp--preset--spacing--4) 0;
}

.wc-block-product .wp-block-woocommerce-product-price {
	margin-top: auto;
	padding: 8px var(--wp--preset--spacing--4) 0;
}
.fm-installments {
	margin: 6px var(--wp--preset--spacing--4) 0;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--xxs);
	color: var(--wp--custom--text-muted);
}
.fm-installments b {
	color: var(--wp--custom--text-body);
	font-weight: var(--wp--custom--fw--bold);
}

.wc-block-product .wp-block-button {
	margin: 12px var(--wp--preset--spacing--4) var(--wp--preset--spacing--4);
	width: auto;
}
.wc-block-product .wp-block-button .wp-block-button__link {
	width: 100%;
}