/* ===================================================================== standalone-lab-quote.css - LA COLONNA DEL PREVENTIVO Porta sulla colonna destra del configuratore DXF il linguaggio visivo della pagina lab-astucci. DNA e valori: /root/backups/2026-08-15-astucci-dna/ Zona: .sago-summary-column e tutto cio' che contiene. Nient'altro. Rollback: cancellare questo file (il PHP lo appende solo se leggibile). PERCHE' QUESTO PREFISSO LUNGO Sulla pagina servita nessuna delle 964 dichiarazioni !important tocca un elemento dentro .sago-summary-column: verificato con selmatch sul DOM vero, 57 elementi in zona, 139 dichiarazioni che li colpiscono, tutte da standalone.css e tutte senza !important. Quindi qui si vince con la sola specificita' e non serve un solo !important. L'avversario piu' specifico in standalone.css e' (0,3,0), cioe' .sago-summary-column>.sago-panel:first-child del blocco "SAGO LOOK". Il prefisso "main .sago-configurator .sago-summary-column" vale (0,2,1) e ogni regola qui sotto ne aggiunge almeno un livello: si arriva sempre a (0,3,1) o piu', che batte (0,3,0) sul terzo termine. Questo NON e' un vezzo: i fogli sono appesi due volte, in testa e in coda. Pareggiare la specificita' farebbe vincere solo la copia in coda, e la pagina lampeggerebbe al primo paint prima che il foglio finale arrivi. Vincere in testa vuol dire nessun lampeggio. Ricontrollato a lavoro finito con il risolutore di cascata sul servito: 619 dichiarazioni toccano la zona, 406 sono di questo foglio, e le dichiarazioni di questo foglio battute da un altro foglio sono ZERO. I 30 !important che ora arrivano in zona sono tutti la riga 614 di standalone-lab.css, cioe' l'azzeramento delle animazioni sotto prefers-reduced-motion: spegne la transizione del bottone, che e' esattamente quello che deve fare. I TOKEN SI CONSUMANO, NON SI RIDEFINISCONO Li scrive standalone-lab.css, primo della cascata. Qui ogni var() ha un valore di ripiego, cosi' il foglio regge anche da solo. INCHIOSTRO CONTRO SUPERFICIE (misurato, non stimato) --ast-blue #0878e8 su bianco vale 4,32:1 e su --ast-price-bg 4,19:1: sotto la soglia AA di 4,5:1 per il testo. Va benissimo come SUPERFICIE (fondi pieni, filetti, riquadri) ma non come inchiostro. Percio' qui: --ast-blue-text (#075fbd, 6,21:1 su bianco) per tutto cio' che si legge, --ast-green-text (#04795a, 5,40:1 su bianco) per il verde di conferma, --ast-blue-dark (#075fbd) per i pieni che portano testo bianco sopra (bianco su #075fbd = 6,21:1; su #0878e8 sarebbe 4,32:1). NIENTE SOTTO I 12px. La ricetta astucci scende a 9px sulle etichette minute: irripetibile qui. Si tiene la PROPORZIONE (etichetta minuta in maiuscoletto contro numero grande) alzando il piede a 12px. ===================================================================== */ /* --------------------------------------------------------------------- 1. QUELLO CHE QUESTO FOGLIO NON FA Il CONTENITORE della colonna non e' di questo foglio. standalone-lab.css, primo della cascata, lo tiene gia' tutto: - html[data-sago-a] .sago-summary-column -> display:grid, gap:--ast-gap, min-width:0, align-content:start; - la posizione nella griglia madre via grid-template-areas, e il numero di sotto-colonne alle tre bande (3 col sopra 1181, 2 sotto, 1 sotto 1023); - position:sticky con top:calc(var(--ast-topbar-h) + var(--ast-gap)), cioe' 76+12: la barra in alto e' alta 76px per davvero (standalone.css:56) e 68px sotto gli 820 (standalone.css:196), e il token la segue. - la ricetta dei pannelli, html[data-sago-a] .sago-panel, che legge --ast-panel-pad / -line / -r / -bg / -edge / -edge-color. Da li' arrivano gia' il fondo carta, il filetto --ast-line, il raggio 4px, box-shadow:none e lo scioglimento della fusione verticale che il vecchio look imponeva sopra i 1181px. Una prima stesura di questo foglio riscriveva tutto quanto sopra e pareggiava la loro specificita': avrebbe vinto solo perche' arriva dopo, e sarebbero rimaste due descrizioni dello stesso layout in due file. Sono state tolte. Qui restano solo il CONTENUTO della colonna e le due tinte che quella ricetta non puo' indovinare (la scheda prezzo e il blocco pieno), piu' un riquadro per riga di rassicurazione. Chi cambia il ritmo verticale o le bande lo fa in standalone-lab.css, in un posto solo. Conseguenza pratica sulla fascia 1024-1180, che il brief segnalava come trappola: li' standalone.css:13 spezza la colonna in "1fr 1fr" e le fondamenta la mandano a tutta larghezza con grid-template-areas ("sum sum"). Le due celle risultano da circa 555px, non "strettissime": la trappola era che la colonna restasse nella terza traccia stretta, e non succede piu'. Verificato sul servito, vedi sezione 6. --------------------------------------------------------------------- */ /* --------------------------------------------------------------------- 2. LA SCHEDA DEL PREZZO E' il pezzo forte della pagina astucci ed e' il mestiere di questa colonna. La ricetta e' .ast-price-card: padding 14px, 1px #76baf1, border-left 4px --ast-blue, raggio 4px, fondo #f8fcff, min-height 116px, numero grande a sinistra, totale ordine in un blocco pieno saturo accanto. COME E' STATA PORTATA, E PERCHE' NON ALLA LETTERA. Su astucci il numero grande e' il PREZZO AL PEZZO ("€ 0,67"): corto. Il numero lungo ("€ 188,60") sta nel blocco piccolo. Per questo la composizione orizzontale entra in una colonna da 350px. Qui il numero grande disponibile e' il TOTALE IVA ESCLUSA, che puo' arrivare a "€ 1.234,56": dieci caratteri, circa 175px a 28px. Sommato al blocco pieno (170px minimo) non entra nella colonna del configuratore, larga 285-340px. Percio' la scheda si compone con flex-wrap invece che con una griglia fissa: le due parti stanno affiancate quando c'e' spazio e si impilano quando non ce n'e', senza un solo media query e senza mai schiacciare le cifre. box-sizing e' border-box (standalone.css:6), quindi i flex-basis comprendono gia' imbottitura e filetti e la soglia di andata a capo e' 240+10+170 = 420px di larghezza interna della scheda. Come cade, misurato sulle bande vere delle fondamenta (colonna = clamp(288px,23vw,368px), imbottitura = clamp(13px,1.05vw,17px)): 1181px -> colonna 288, interno 260 -> impilata 1440px -> colonna 331, interno 299 -> impilata 1600px -> colonna 368, interno 332 -> impilata 1180px -> due sotto-colonne da 562, interno 534 -> affiancata 1024px -> due sotto-colonne da 484, interno 456 -> affiancata 390px -> colonna 366, interno 338 -> impilata Cioe': sulle tre colonne del desktop resta impilata SEMPRE, senza una banda in cui a volte si', a volte no. Affiancata solo dove il preventivo diventa una fascia larga, che e' poi la forma della .ast-price-card. Il rapporto di crescita 1.6 contro 1 tiene il blocco pieno intorno al 40% della riga anche quando la fascia e' larghissima: e' l'unico saturo della colonna e deve catturare l'occhio, non prendersi meta' scheda. --------------------------------------------------------------------- */ /* L'imbottitura NON si dichiara: arriva da --ast-panel-pad della ricetta dei pannelli, cosi' la scheda respira come tutte le altre della pagina. */ main .sago-configurator .sago-summary-column .sago-summary-card { display: flex; flex-wrap: wrap; align-items: stretch; column-gap: 10px; row-gap: 12px; } /* Le parti che occupano sempre una riga intera. Il carrello a piena larghezza e' un requisito esplicito a 390px, dove il preventivo sta in fondo alla pagina ed e' l'ultima cosa raggiungibile. */ main .sago-configurator .sago-summary-column .sago-summary-card > .sago-mini-label, main .sago-configurator .sago-summary-column .sago-summary-card > .sago-cart-button, main .sago-configurator .sago-summary-column .sago-summary-card > .sago-secondary-button { flex: 1 1 100%; } /* L'occhiello "IL TUO PREVENTIVO". standalone.css lo tiene a 11px con letter-spacing .16em: a 12px quella spaziatura diventa eccessiva e la riga va a capo nella colonna stretta, quindi scende a .09em. */ main .sago-configurator .sago-summary-column .sago-mini-label { font-size: 12px; line-height: 1.2; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--ast-blue-text, #075fbd); } /* Il corpo della scheda: fondo, filetto azzurrato e il bordo sinistro da 4px che nel sistema astucci qualifica gli elementi importanti. */ main .sago-configurator .sago-summary-column .sago-price-block { flex: 1.6 1 240px; min-width: 0; min-height: 116px; display: flex; flex-direction: column; justify-content: center; padding: 14px; border: 1px solid var(--ast-price-line, #76baf1); border-left: 4px solid var(--ast-blue, #0878e8); border-radius: var(--ast-r, 4px); background: var(--ast-price-bg, #f8fcff); } main .sago-configurator .sago-summary-column .sago-price-block > span { font-size: 12px; line-height: 1.2; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--ast-blue-text, #075fbd); } /* Il numero grande. Inchiostro --ast-blue-text e non --ast-blue: su #f8fcff l'azzurro pieno vale 4,19:1, che basterebbe per il testo grande (soglia 3:1) ma non a qualunque corpo. Con #075fbd si sta a 6,02:1 e la scheda regge anche se un domani il numero rimpicciolisce. tabular-nums perche' il valore si riscrive a ogni ricalcolo: senza, le cifre ballano di qualche pixel a ogni aggiornamento. */ main .sago-configurator .sago-summary-column .sago-price-block > strong { margin: 7px 0 0; font-family: var(--ast-sans, Inter, "Segoe UI", Arial, sans-serif); font-size: 28px; line-height: 1; font-weight: 900; letter-spacing: -.022em; font-variant-numeric: tabular-nums; color: var(--ast-blue-text, #075fbd); } /* La nota sotto il numero. A pagina appena aperta dice "Carica il DXF per ottenere il prezzo"; a calcolo fatto standalone.js:1388 ci scrive "€ 0,63 per pezzo · IVA esclusa". E' l'unico posto dove il prezzo al pezzo compare, ed e' una stringa sola: vedi la nota in fondo al file. Inchiostro --ast-text (9,76:1) e non --ast-copy, che su questo fondo scenderebbe a 4,43:1, appena sotto la soglia. */ main .sago-configurator .sago-summary-column .sago-price-block > small { margin: 8px 0 0; font-size: 12.5px; line-height: 1.35; font-weight: 600; color: var(--ast-text, #29445f); } /* Il blocco pieno saturo: totale IVA inclusa. Fondo --ast-blue-dark e non --ast-blue perche' ci sta sopra del testo bianco: 6,21:1 contro 4,32:1. */ main .sago-configurator .sago-summary-column .sago-gross-row { flex: 1 1 170px; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 5px; padding: 14px; border: 1px solid var(--ast-blue-dark, #075fbd); border-radius: var(--ast-r, 4px); background: var(--ast-blue-dark, #075fbd); color: var(--ast-paper, #ffffff); } /* L'etichetta si smorza con l'opacita' invece che con una tinta a mano: resta un solo colore da mantenere. All'86% l'effetto e' #dce9f6 sul fondo, cioe' 5,04:1, ancora sopra la soglia AA. */ main .sago-configurator .sago-summary-column .sago-gross-row > span { font-size: 12px; line-height: 1.2; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--ast-paper, #ffffff); opacity: .86; } /* standalone.css colora questo valore di verde (--green). Il verde nel sistema astucci vuol dire "incluso, confermato", non "totale": qui diventa bianco pieno sul fondo azzurro. */ main .sago-configurator .sago-summary-column .sago-gross-row > strong { font-size: 19px; line-height: 1.05; font-weight: 900; font-variant-numeric: tabular-nums; color: var(--ast-paper, #ffffff); } /* --------------------------------------------------------------------- 3. IL BOTTONE "AGGIUNGI AL CARRELLO" Azzurro pieno, raggio --ast-r, testo bianco, con l'ombra bassa del sistema (0 7px 16px rgba(8,119,230,.16)) e la freccia a destra che sulla pagina astucci accompagna il bottone di avanzamento. La freccia e' un'immagine data: su ::after e non un carattere: un "→" generato da CSS finisce nell'albero di accessibilita' di piu' di un browser e verrebbe letto ad alta voce dopo l'etichetta. height:auto con min-height al posto dell'altezza fissa da 48px: a 390px l'etichetta va a capo e con l'altezza fissa uscirebbe dal bottone. --------------------------------------------------------------------- */ main .sago-configurator .sago-summary-column .sago-cart-button { min-height: 50px; height: auto; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 12px 18px; border: 1px solid transparent; border-radius: var(--ast-r, 4px); background: var(--ast-blue-dark, #075fbd); color: var(--ast-paper, #ffffff); font-size: 15px; line-height: 1.2; font-weight: 800; letter-spacing: .01em; cursor: pointer; box-shadow: 0 7px 16px rgba(8, 119, 230, .16); transition: background-color .18s ease, box-shadow .18s ease; } main .sago-configurator .sago-summary-column .sago-cart-button::after { content: ""; flex: 0 0 16px; width: 16px; height: 12px; background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 12' fill='none' stroke='%23ffffff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 6h13'/%3E%3Cpath d='m9.6 1.6 4.4 4.4-4.4 4.4'/%3E%3C/svg%3E") center / 16px 12px no-repeat; } main .sago-configurator .sago-summary-column .sago-cart-button:hover { background: var(--ast-navy, #0b2745); box-shadow: 0 9px 20px rgba(8, 119, 230, .22); } /* LO STATO DISABILITATO. La pagina parte sempre col carrello disabled: finche' non c'e' un DXF non c'e' niente da comprare. Nella grammatica astucci uno stato inerte e' SPENTO, non un pieno colorato con un lucchetto sopra: chi guarda deve capire senza leggere che li' non si clicca. Fondo --ast-page, filetto --ast-line, inchiostro --ast-mute (4,55:1: sopra la soglia anche se un comando disabilitato ne sarebbe esente), nessuna ombra, freccia tolta. Questo blocco viene DOPO :hover di proposito: a parita' di specificita' vince l'ultimo, quindi passare col mouse su un bottone disabilitato non lo riaccende. Da confermare col committente. */ main .sago-configurator .sago-summary-column .sago-cart-button:disabled { background: var(--ast-page, #f8fafc); border-color: var(--ast-line, #d7e3ee); color: var(--ast-mute, #64748b); box-shadow: none; cursor: not-allowed; } main .sago-configurator .sago-summary-column .sago-cart-button:disabled::after { display: none; } /* Il secondario resta una traccia leggera: due pieni uno sopra l'altro annullerebbero la gerarchia che la scheda del prezzo ha appena costruito. standalone.css gli mette margin-top:9px, che qui duplicherebbe il row-gap. */ main .sago-configurator .sago-summary-column .sago-secondary-button { min-height: 44px; height: auto; margin-top: 0; display: inline-flex; align-items: center; justify-content: center; padding: 10px 14px; border: 1px solid var(--ast-line, #d7e3ee); border-radius: var(--ast-r, 4px); background: var(--ast-paper, #ffffff); color: var(--ast-copy, #62788e); font-size: 13px; line-height: 1.25; font-weight: 700; box-shadow: none; } main .sago-configurator .sago-summary-column .sago-secondary-button:disabled { background: var(--ast-page, #f8fafc); color: var(--ast-mute, #64748b); cursor: not-allowed; } /* Fuoco da tastiera. L'anello del sistema (0 0 0 3px rgba(8,120,232,.11)) e' bellissimo ma da solo e' troppo tenue per segnalare dove si e': si accompagna a un contorno pieno. :focus-visible e non :focus, cosi' il contorno non compare a chi clicca col mouse. */ main .sago-configurator .sago-summary-column .sago-cart-button:focus-visible, main .sago-configurator .sago-summary-column .sago-secondary-button:focus-visible { outline: 2px solid var(--ast-blue-dark, #075fbd); outline-offset: 2px; box-shadow: var(--ast-focus, 0 0 0 3px rgba(8, 120, 232, .11)); } /* --------------------------------------------------------------------- 4. RIEPILOGO / CONFIGURAZIONE Sei righe: etichetta a sinistra, valore a destra. Questa e' una pagina di preventivi: qui la tipografia dei numeri E' il design. I valori vanno in --ast-mono con font-variant-numeric:tabular-nums, cosi' "1.240 pezzi" e "310 pezzi" incolonnano le cifre invece di ballare, e la larghezza non cambia a ogni ricalcolo. --------------------------------------------------------------------- */ main .sago-configurator .sago-summary-column .sago-summary-details .sago-panel-head { align-items: flex-start; } main .sago-configurator .sago-summary-column .sago-summary-details .sago-panel-head strong { display: block; margin-top: 5px; font-size: 15px; line-height: 1.2; font-weight: 800; color: var(--ast-navy, #0b2745); } main .sago-configurator .sago-summary-column .sago-summary-details dl { margin: 12px 0 0; } /* baseline e non center: l'etichetta a 12px e il valore monospaziato a 12,5px hanno altezze diverse e allineati al centro si sfalsano. */ main .sago-configurator .sago-summary-column .sago-summary-details dl > div { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 9px 0; border-top: 1px solid var(--ast-line, #d7e3ee); } main .sago-configurator .sago-summary-column .sago-summary-details dl > div:first-child { padding-top: 2px; border-top: 0; } main .sago-configurator .sago-summary-column .sago-summary-details dt { font-size: 12px; line-height: 1.3; font-weight: 600; color: var(--ast-copy, #62788e); } /* max-width e overflow-wrap perche' la riga "File" porta il nome del DXF caricato, che puo' essere lungo quanto vuole e senza spazi. */ main .sago-configurator .sago-summary-column .sago-summary-details dd { max-width: 62%; margin: 0; font-family: var(--ast-mono, ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace); font-size: 12.5px; line-height: 1.3; font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; color: var(--ast-navy, #0b2745); overflow-wrap: anywhere; } /* --------------------------------------------------------------------- 5. LE QUATTRO RASSICURAZIONI Su astucci sono tre voci sobrie in fondo alla colonna: icona in un riquadro tenue, testo breve, nessuna scatola colorata. Qui sono quattro e standalone.css le rende quattro schede, una delle quali con fondo e bordo oro (#fffaf0 / #ead9b9 / #a56c0b): sono esattamente le "quattro schede colorate" da cui il committente e' scappato. Diventano quattro riquadri su fondo carta con un filetto da 1px, e IL COLORE RESTA CONFINATO NEL RIQUADRO DELL'ICONA. Sono state ridotte: 12,5px sul titolo contro i 15px della scheda riepilogo, nessuna ombra, riquadri da 26px. Il prezzo deve restare il punto piu' forte della colonna e queste non devono competerci. --------------------------------------------------------------------- */ /* Il fondo oro (#fffaf0 / #ead9b9 di standalone.css:12) sparisce da solo: la ricetta dei pannelli delle fondamenta lo copre a (0,2,1) col fondo carta e il filetto --ast-line. Qui resta la sola composizione. */ main .sago-configurator .sago-summary-column .sago-verification-note { display: flex; align-items: flex-start; gap: 12px; } /* Il verde e' la conferma del sistema astucci, e "controllo tecnico incluso" e' una conferma: l'oro non aveva significato. --ast-green su --ast-green-soft varrebbe 2,94:1, sotto ogni soglia: il glifo prende --ast-green-text (5,04:1 su quel fondo). */ main .sago-configurator .sago-summary-column .sago-note-icon { flex: 0 0 26px; width: 26px; height: 26px; display: grid; place-items: center; border-radius: var(--ast-r, 4px); background: var(--ast-green-soft, #edfaf5); color: var(--ast-green-text, #04795a); font-size: 14px; line-height: 1; font-weight: 900; } main .sago-configurator .sago-summary-column .sago-verification-note strong { display: block; font-size: 12.5px; line-height: 1.25; font-weight: 800; color: var(--ast-navy, #0b2745); } main .sago-configurator .sago-summary-column .sago-verification-note p { margin: 5px 0 0; font-size: 12px; line-height: 1.45; color: var(--ast-copy, #62788e); } main .sago-configurator .sago-summary-column .sago-service-list { display: grid; gap: 8px; } main .sago-configurator .sago-summary-column .sago-service-list > div { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border: 1px solid var(--ast-line, #d7e3ee); border-radius: var(--ast-r, 4px); background: var(--ast-paper, #ffffff); box-shadow: none; } /* Il rombo ereditato dal template entra nello stesso riquadro da 26px della spunta: allineati fra loro, il colore non esce dal quadratino. */ main .sago-configurator .sago-summary-column .sago-service-list > div > span { flex: 0 0 26px; width: 26px; height: 26px; display: grid; place-items: center; border-radius: var(--ast-r, 4px); background: var(--ast-soft, #f5f9fd); color: var(--ast-blue-text, #075fbd); font-size: 13px; line-height: 1; } main .sago-configurator .sago-summary-column .sago-service-list p { min-width: 0; margin: 0; } main .sago-configurator .sago-summary-column .sago-service-list strong { display: block; font-size: 12.5px; line-height: 1.25; font-weight: 800; color: var(--ast-navy, #0b2745); } main .sago-configurator .sago-summary-column .sago-service-list small { display: block; margin-top: 2px; font-size: 12px; line-height: 1.3; color: var(--ast-copy, #62788e); } /* --------------------------------------------------------------------- 6. LA FASCIA FRA 1024 E 1180 - il punto che ha gia' sorpreso chi ci ha lavorato prima, e come e' finita. standalone.css:13, sotto i 1180px, fa due cose alla colonna: la manda a grid-column:1/-1 e la spezza in grid-template-columns:1fr 1fr. Il "1fr 1fr" sarebbe fatale se la colonna restasse nella terza traccia stretta: due celle da 150px con prezzo e riepilogo schiacciati dentro. Verificato sul servito: non succede. Le fondamenta mandano la colonna a tutta larghezza con grid-template-areas ("visual main" / "sum sum") e confermano le due sotto-colonne, che su un
da 1136px a 1180 di finestra risultano da circa 555px l'una. Sotto i 1023 tornano a una. Percio' qui NON si sovrascrive grid-template-columns della colonna: sarebbe un secondo foglio che descrive lo stesso layout, e a parita' di specificita' (0,2,1) vincerebbe solo per ordine di appensione. Resta il caso in cui la scheda del prezzo si trovi larga: la sua composizione a flex-wrap ci arriva da sola, senza un media query. Le rassicurazioni invece sono contenuto, quindi sono di questo foglio. standalone.css le inchioda a repeat(3,1fr) sotto i 1180 e a 1fr sotto gli 820: con auto-fit diventano tre in fila quando la fascia e' larga e una sotto l'altra quando non lo e', senza dipendere da quale banda la griglia madre stia usando in quel momento. --------------------------------------------------------------------- */ @media (max-width: 1180px) { main .sago-configurator .sago-summary-column .sago-service-list { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); } } /* ===================================================================== NOTA SUL MARKUP - IL PREZZO AL PEZZO Sulla scheda astucci convivono due numeri: "PREZZO PER PEZZO € 0,63" grande a sinistra e "TOTALE ORDINE € 188,60 · 300 pezzi" nel blocco pieno. Qui il dato esiste gia': il server manda net_unit, arrotondato a due decimali, e standalone.js:1388 lo scrive in #sago-unit-price. Ma ci scrive UNA STRINGA SOLA - "€ 0,63 per pezzo · IVA esclusa" - in un che gia' fa da messaggio di attesa ("Carica il DXF per ottenere il prezzo"). Un numero e le sue parole nello stesso nodo di testo non si possono comporre separatamente da CSS: non si inventa qui. Servirebbe, dentro .sago-price-block: Prezzo per pezzo — IVA esclusa con standalone.js che scrive in #sago-unit-value SOLO euro.format(net_unit) e lascia le parole al markup, e #sago-unit-price che torna a essere il solo messaggio di stato. Con quei tre nodi la scheda diventa la .ast-price-card alla lettera: numero corto grande a sinistra, totale lungo nel blocco pieno a destra, e la composizione orizzontale entra anche nella colonna da 285px. ===================================================================== */