/* ========================================================================= IL PREZZO NELLE SCHEDE DELLE GRIGLIE. ========================================================================= Segnalato il 2026-08-24: nelle griglie il listino barrato era **grigio** e lo scontato **rosso**, mentre Figma li vuole **entrambi neri**. Decisione dell'utente: tenere il rosso sullo scontato, che gli piace piu' del disegno, e portare il listino al **verde scuro del nome prodotto** — cioe' non al nero del disegno ma alla tinta che il sito usa per i titoli. Sara' presentata ai creativi al collaudo insieme al nome prodotto, che nel disegno e' nero e sul sito e' verde. Poi, guardando il risultato, altre tre cose (context §7.53): lo scontato era **verde nei correlati e rosso negli archivi**, negli archivi era **sottolineato**, e il barrato degli archivi era **piccolo e sbiadito** rispetto a quello dei correlati. Piu' il prezzo **pieno** — i prodotti senza sconto, come in «Articoli Sanitari» — rimasto grigio. ------------------------------------------------------------------------ DUE MARKUP, NON UNO — trovato verificando invece di fermarsi al primo caso Le griglie di questo sito sono costruite in due modi diversi: archivi, negozio e caroselli in home usano il **loop di Elementor** (`.e-loop-item`), mentre i **prodotti correlati** sulla scheda usano il markup **classico di WooCommerce** (`li.product` dentro `ul.products`). Sistemato solo il primo, i correlati restavano grigi: la difformita' dal disegno sostituita da una difformita' **interna al sito**, che e' peggio. Le regole per i correlati stanno in `single-product.css`, dove il loro colore era **gia' scritto da noi con `!important`**: la' si corregge **alla fonte** invece di sovrapporre un'altra regola, perche' due dichiarazioni contrarie sullo stesso elemento sono un debito che qualcuno paga dopo. Questo foglio governa quindi **solo** le schede del loop Elementor. Il prezzo principale della scheda prodotto non e' in nessuno dei due contenitori e non viene toccato: e' gia' verde per conto suo. ------------------------------------------------------------------------ PERCHE' IL FOGLIO E' CARICATO SU TUTTO IL SITO La stessa scheda compare in **tre posti** oltre ai correlati: archivi di categoria, `/negozio/` e caroselli in home. Limitare le regole agli archivi avrebbe lasciato i caroselli col prezzo di prima. ------------------------------------------------------------------------ QUANTO `!important` SERVE, E PERCHE' QUASI MAI I colori e i corpi delle schede sono **impostazioni dei widget** nel template del loop, e arrivano dal CSS in linea che Elementor genera: valgono **(0,4,0)**, che nessun selettore ragionevole di questo foglio batte. Ma sono dichiarati sul contenitore `.price`, e `del`, `ins` e l'importo interno li **ereditano**. Da cui la regola che risparmia quasi tutti gli `!important`: un valore **ereditato** perde contro qualunque dichiarazione che colpisca l'elemento **direttamente**, a prescindere dalla specificita'. Quindi basta dichiarare su `del`, su `ins` e sull'importo. L'unica eccezione e' l'**opacita'**, che non e' ereditata ma dichiarata per davvero, e da WooCommerce stesso: .woocommerce div.product p.price del { opacity: 0.7 } (0,3,3) Quella va battuta, e con `!important` invece che gonfiando il selettore fino a pareggiarla: un pareggio si deciderebbe sull'**ordine di caricamento** dei fogli, cioe' su una cosa che non controlliamo. Se un giorno qualcuno impostasse questi valori sul `del` **dentro Elementor**, diventerebbero dichiarazioni dirette a (0,4,0) e queste regole non basterebbero piu': in quel caso la cosa giusta e' cambiarli la', non rincorrerli qui. ========================================================================= */ /* ------------------------------------------------- il listino barrato --- */ /* * COME QUELLO DEI CORRELATI, che e' il riferimento scelto dall'utente: negli * archivi era **16 px con opacita' 0,7** — piccolo e sbiadito — mentre nei * correlati e' **18 px pieno** e si legge. I numeri sono copiati da * `single-product.css` (righe 153-154), non stimati. * * Gli 8 px di margine a destra sono l'aria fra il barrato e lo scontato: nel loop * i due elementi sono separati da un solo spazio di testo. */ .e-loop-item .price del, .e-loop-item .price del * { color: #012F2B; font-size: 18px; font-weight: 400; } .e-loop-item .price del { margin-right: 8px; opacity: 1 !important; /* vedi la nota sull'opacita' in cima */ } /* --------------------------------------------------- il prezzo pieno --- */ /* * I PRODOTTI SENZA SCONTO — la categoria «Articoli Sanitari» e' tutta cosi'. * * Li' il prezzo non ha ne' `del` ne' `ins`: e' un importo nudo dentro `.price`, e * restava **grigio 16 px** perche' erediteva dal contenitore. Richiesta * dell'utente: trattarlo **come il barrato, barra a parte** — quindi stesso verde * e stesso corpo, senza la barra. * * IL SELETTORE USA `>` E NON E' UN VEZZO. Verificato sul sito prima di scriverlo: * nelle schede **scontate** gli importi stanno dentro `del` e `ins`, e i figli * diretti di `.price` sono `del`, `ins` e due `span.screen-reader-text` — quindi * gli importi figli diretti sono **zero**. Nelle schede a prezzo pieno e' * **esattamente uno**. Senza `>` questa regola colpirebbe anche l'importo dentro * `ins`, cioe' cancellerebbe il rosso dello scontato. */ .e-loop-item .price > .woocommerce-Price-amount, .e-loop-item .price > .woocommerce-Price-amount * { color: #012F2B; font-size: 18px; } /* ------------------------------------------------- il prezzo scontato --- */ /* * VIA LA SOTTOLINEATURA. Non era una scelta di nessuno: e' il predefinito del * browser per ``, il tag che WooCommerce usa per il prezzo attuale. Su un * prezzo una sottolineatura si legge come un collegamento, e nei correlati infatti * `text-decoration: none` c'era gia' esplicito. * * Nessun `!important`: le regole del browser perdono contro qualunque regola * d'autore. */ .e-loop-item .price ins, .e-loop-item .price ins * { text-decoration: none; } /* ------------------------------------------- il nome che non sta nella card --- */ /* * IL TITOLO CON UNA PAROLA PIU' LARGA DELLA CARD — 2026-09-09. * * Nasce dalla segnalazione dell'utente sul **titolo della scheda prodotto**, dove una * parola sola («Rianimazione», 312 px a 48 px di corpo) faceva scorrere la pagina di * lato sotto i 389 px di finestra. Corretto la', ma la stessa esposizione ce l'hanno le * card delle griglie, e lasciarla sarebbe consegnare un difetto che si conosce. * * IL CONTO. Nel catalogo ci sono 109 parole da 12 caratteri o piu', e la peggiore e' * **«Psiconeuroendocrinoimmunologia»**, 30 caratteri. Nel titolo della card, che e' a * **20 px**, misura circa **325 px**; a 344 px di finestra la card e' larga **292**. * Sfora di una trentina di pixel. Non capita con «Otorinolaringoiatria» (20 caratteri, * circa 217 px), quindi e' un caso raro — ma esiste **oggi**, in catalogo, e non * dipende da una futura aggiunta. * * `overflow-wrap: anywhere` e non `break-word`: la differenza sta nel dimensionamento * intrinseco. `break-word` evita che il testo esca ma **non riduce il minimo** * dell'elemento, quindi dove la traccia della griglia si dimensiona sul contenuto — ed * e' esattamente cio' che succede con le tracce `1fr` di Elementor — il problema * resta. C'e' un precedente in casa, annotato in `carrello.css`: sul nome * dell'articolo `break-word` non cambiava niente e si e' dovuto usare `anywhere`. * * `hyphens: auto` accanto: la pagina dichiara `lang="it-IT"`, quindi dove il browser * ha i modelli italiani la parola si spezza col trattino invece che di netto. * * Vale su tutte le griglie — home, archivi, ricerca, correlati — perche' il selettore * e' quello della card e non quello di una pagina, e la spezzatura scatta da se' solo * quando la parola non ci sta: sui titoli normali non cambia nulla. */ .e-loop-item .elementor-widget-woocommerce-product-title, .e-loop-item .elementor-widget-woocommerce-product-title *, .e-loop-item .woocommerce-loop-product__title { overflow-wrap: anywhere; hyphens: auto; }