/*
 * Aggiunte tecniche minime alla homepage, fuori da home.css (copia
 * invariata del prototipo, Regola 1 del brief — non si tocca).
 *
 * 1) La compensazione visiva delle foto prodotto in style.css (V2, righe
 *    finali) punta ai nomi file del prototipo (es. img[src$="/303.jpg"]):
 *    le foto reali di WooCommerce hanno altri nomi file (vedi rapporto), la
 *    selezione per attributo non può funzionare. Stesso effetto, stesso ID
 *    prodotto reale, tramite l'attributo data-cb-product stampato da
 *    piu-venduti.php invece che dal nome del file immagine.
 *
 * 2) Il reset del contenitore #page incassato (Fedeltà 1, punto 1) è ora
 *    globale, spostato in css/main.css (caricato su ogni pagina) durante il
 *    giro di fedeltà 2 — vedi il commento lì. Non è più ripetuto qui.
 *
 * Fase 10 (flusso carrello): il link ".added_to_cart" nativo che
 * WooCommerce aggiungeva qui accanto al pulsante dopo un'aggiunta AJAX
 * (stile sotto, ex punto 1) è ora rimosso dal DOM da
 * js/purchase-feedback.js — ridondante con la barra di conferma
 * persistente. Regola di stile tolta con lui.
 */

/*
 * Fedeltà 1, punto 2 — pulsanti grigi: reso globale in css/main.css durante
 * il giro di fedeltà 2 (trovato anche fuori dalla home). Non è più
 * ripetuto qui.
 */

/*
 * Fedeltà 1, punto 5 — prezzo nelle schede: `.price-row span{font-size:12px}`
 * di home.css (verbatim, non si tocca) è pensato per l'unico <span> del
 * prezzo unitario nel prototipo statico. wc_price() però avvolge SEMPRE il
 * simbolo di valuta in <span class="woocommerce-Price-currencySymbol"> e
 * l'importo in <span class="woocommerce-Price-amount">, anche dentro il
 * prezzo principale in <strong> — quello span viene preso anche lui dalla
 * regola generica e il "CHF" resta piccolo (12px) mentre "25.00" resta
 * grande (23px), incollati senza spazio. Ripristina la dimensione ereditata
 * solo per gli span reali di WooCommerce dentro il prezzo principale — lo
 * span del prezzo unitario (fuori da strong) resta piccolo come nel design.
 *
 * Stessa collisione anche su "display": nel breakpoint telefono home.css
 * (verbatim) mette `.price-row span{display:block}` per impilare il
 * prezzo unitario sotto al prezzo principale (voluto) — ma colpisce anche
 * gli span interni di WooCommerce, sia dentro <strong> (prezzo principale
 * su due righe, "CHF" / "25.00") sia dentro lo <span> del prezzo unitario
 * stesso (che si spezza in tre righe, "CHF" / "0.25" / "/ Kapsel").
 * Rimessi in linea ovunque nel price-row; la dimensione resta quella
 * ereditata dal loro span esterno (grande dentro strong, piccola nello
 * span del prezzo unitario, come nel design) — sotto solo per il prezzo
 * principale.
 *
 * Fedeltà 4 (§2.2 prezzi, §3.1 "colore prezzo card"): stesso motivo, manca
 * "color:inherit" qui sotto — ".price-row span{color:var(--muted)}" di
 * home.css (verbatim) colora di grigio-caldo anche questo span reale di
 * WooCommerce dentro <strong>, il prezzo card risultava #544c45 invece del
 * blu #003e78 del testo principale.
 */
.price-row .woocommerce-Price-amount,
.price-row .woocommerce-Price-currencySymbol {
	display: inline;
}
.price-row strong .woocommerce-Price-amount,
.price-row strong .woocommerce-Price-currencySymbol {
	font-size: inherit;
	color: inherit;
}

.add-button.loading {
	opacity: .6;
	pointer-events: none;
}

/*
 * 20.09.2026 — via le compensazioni per singolo prodotto.
 *
 * Erano nate perche' le foto avevano proporzioni diverse fra loro: le due
 * Respresso (303, 358) occupavano il 57% del quadrato e servivano un 1.4 per
 * non sembrare rimpicciolite accanto alle altre; la cialda 304 un 1.15, i
 * chicchi 319 un 1.08. Quattro numeri scritti a mano per quattro foto.
 *
 * Ora tutte le foto sono normalizzate alla stessa occupazione (82% del lato
 * lungo, foto-prodotti/_report/normalizza.py), quindi quelle compensazioni non
 * solo non servono: fanno danno. Misurato prima di toglierle: 303 e 358
 * occupavano il 115% del riquadro, cioe' tagliate sopra e sotto di 16px.
 *
 * Un solo valore per tutti, lo stesso delle card di negozio e categoria.
 */
.product-art[data-cb-product] img { --image-scale: 1.07; --image-offset-y: 0%; transform: translateY(var(--image-offset-y)) scale(var(--image-scale)); }@media(hover:hover){.product-image:hover .product-art[data-cb-product] img{
	transform: translateY(var(--image-offset-y)) scale(calc(var(--image-scale) * 1.025));
}}

/*
 * Fedeltà 4 (§3.1 "scala ottica delle 4 immagini card categoria"): stesso
 * meccanismo di cui sopra, applicato a .compat-image (blocco "Welche
 * Maschine haben Sie?") — vedi il commento in inc/home/compat.php. Valori
 * del prototipo per slug di categoria (303.jpg/344.jpg/349.jpg/304.jpg
 * nell'ordine Nespresso®/Dolce Gusto®/Lavazza®/ESE Pads di style.css).
 */
.compat-image[data-cb-category="nespresso-kompatible"] img { --image-scale: 1.4; }
.compat-image[data-cb-category="dolce-gusto"] img { --image-scale: 1.5; }
.compat-image[data-cb-category="lavazza-kompatible"] img { --image-scale: 1.25; }
.compat-image[data-cb-category="pads"] img { --image-scale: 1.15; --image-offset-y: -5%; }
/* ".compat-card:hover img{transform:...scale(var(--image-scale))}" è già in
   base.css (V2): legge le stesse custom property, non serve ripeterlo. */

/*
 * Ritmo dentro le schede prodotto della home, su telefono: lo stesso delle
 * schede di categoria (css/listing.css, 21.09.2026), chiesto da Stefan dopo
 * averle viste affiancate — marca e titolo insieme, prezzo e prezzo al pezzo
 * attaccati, uno stacco appena piu' largo fra un gruppo e l'altro.
 *
 * Qui il titolo non ha il padding nascosto di WooCommerce (la scheda della
 * home non e' un li.product), l'aria veniva dalle interlinee: il prezzo a
 * 21px stava in una riga alta 31,5px (interlinea 1.5 ereditata).
 *
 * Due cose volute:
 *  - resta intatto "margin-bottom:auto" sulle stelle (css/main.css): e' quello
 *    che tiene allineati prezzi e bottoni fra due schede con nomi di
 *    lunghezza diversa, quindi qui si tocca solo il margine SOPRA;
 *  - il selettore parte da ".products-section": vale per questa sezione della
 *    home e basta, non per i correlati della scheda prodotto ne' per i
 *    suggeriti del carrello, che usano la stessa ".product-card".
 */
@media (max-width: 850px) {
	.products-section .product-grid .product-card .product-info { padding-top: 10px; }
	.products-section .product-grid .product-card .product-brand { margin-bottom: 1px; line-height: 1.3; }
	.products-section .product-grid .product-card h3 { line-height: 1.15; }
	.products-section .product-grid .product-card .card-rating { margin-top: 5px; min-height: 0; }
	.products-section .product-grid .product-card .price-row { margin: 7px 0 11px; line-height: 1.15; }
	.products-section .product-grid .product-card .price-row strong,
	.products-section .product-grid .product-card .price-row .price { line-height: 1.15; }
	.products-section .product-grid .product-card .price-row > span { margin-top: 0; line-height: 1.3; }
}