`, quindi non eredita gli stili del contenuto: la larghezza se la deve dare da se' (`--fascia`, la stessa del contenitore). */ .fascia-sped { display: flex; align-items: center; justify-content: center; gap: 10px; max-width: var(--fascia); margin: 0 auto; padding: 12px var(--s2); border-bottom: 2px solid var(--filetto); font-family: var(--f-titoli); font-size: 16px; color: var(--testo-sec); } .fascia-sped .ico { flex: 0 0 auto; width: 22px; height: 22px; color: var(--rosso-testo); } .fascia-sped b { color: var(--testo); font-weight: 700; } /* Carrello: la soglia raggiunta si vede, senza cambiare colore ============== Stessa riga, con l'importo tolto di mezzo e il testo pieno: la fascia dice una buona notizia, non un avviso. ⚠️ Niente verde: nel tema non esiste, e introdurne uno per una riga vorrebbe dire aggiungere un colore al marchio. */ .fascia-sped--ok { color: var(--testo); font-weight: 700; } /* == Le mattonelle del catalogo, tutte della stessa altezza ================= 🔴 Il tema aveva scelto il CONTRARIO, e c'e' scritto: «la griglia dei prodotti non pareggia le altezze: ogni copertina ha la sua» (`.griglia--prodotti { align-items: start }`). Su un catalogo vero quella scelta si vede male - le copertine hanno proporzioni diverse e i titoli vanno a una o due righe, quindi i riquadri finiscono sfalsati e i prezzi non stanno su una linea. E' un cambio consapevole della consegna, chiesto dall'utente. Tre pezzi, e nessuno dei tre ritaglia le copertine. 1) LA COPERTINA IN UN RIQUADRO DI PROPORZIONE FISSA, intera dentro. ⭐ `7 / 10` non e' un numero scelto a occhio: e' la MEDIANA misurata sulle 70 copertine vere (1,427). Quaranta stanno fra 1,42 e 1,44, cioe' riempiono il riquadro quasi esatto; undici sono piu' slanciate (~1,55) e restano un filo piu' strette; due sono ORIZZONTALI (0,71: sono i cofanetti) e si posano al centro con una banda sopra e sotto. 🔴 `object-fit: contain` e non `cover`: `cover` pareggerebbe tutto ma taglierebbe via testate e titoli, cioe' proprio quello che di una copertina si deve vedere. Meglio una banda bianca che una copertina decapitata - ed e' anche la ragione per cui il fondo del riquadro e' bianco: le bande non si notano. 2) LA CELLA SI ALLUNGA e la scheda la riempie tutta. 3) PREZZO E SCORTA SCENDONO IN FONDO (`margin-top: auto`), cosi' stanno su una linea sola anche quando un titolo va a capo e un altro no. ⚠️ Senza questo, pareggiare le altezze non basterebbe: i riquadri sarebbero uguali ma i prezzi resterebbero sfalsati, che e' il difetto che si nota di piu'. Niente altezza minima sul titolo: lo spazio se lo prende chi ne ha bisogno, e le righe di soli titoli corti non sprecano una riga vuota. */ .griglia--prodotti { align-items: stretch; } .griglia--prodotti > * { height: 100%; } .prodotto-media { display: flex; align-items: center; justify-content: center; aspect-ratio: 7 / 10; overflow: hidden; /* ⭐ Lo stesso grigio del corpo della card (il tema qui mette `--bianco`): la mattonella si legge come un pezzo unico invece che come un riquadro bianco incollato sopra una fascia grigia. Si nota soprattutto perche' le copertine hanno proporzioni diverse fra loro e `object-fit: contain` lascia scoperto un margine sopra e sotto: quel margine era bianco, e disegnava una cornice che non c'era. */ background: var(--grigio-card); } .prodotto-media img { width: 100%; height: 100%; object-fit: contain; } .prodotto-corpo { display: flex; flex-direction: column; } .prodotto-corpo .prezzo { margin-top: auto; } /* == Le mattonelle delle categorie, tutte uguali in TUTTA la griglia ======== Qui il punto di partenza era gia' migliore che nel catalogo: le immagini di categoria sono tutte **quadrate** e il tema le mette in un riquadro 1:1 con `object-fit: contain`, quindi dentro una stessa riga le mattonelle erano gia' della stessa altezza a ogni larghezza provata (1280, 940, 700, 480, 375). ⚠️ Restava una differenza fra RIGHE DIVERSE: sotto i 400px «Bambini e Ragazzi» e «Costume e Societa'» vanno a capo e la loro riga cresce di 18px (201 → 219). Poco, ma si vede scorrendo, perche' il filetto arancione in fondo alle mattonelle si sfalsa. 🔴 `grid-auto-rows: 1fr` pareggia **tutte le righe della griglia**, non solo quelle affiancate: e' quello che serve qui e non nel catalogo, dove le schede sono sedici e un titolo lungo allungherebbe tutte e quattro le righe. Le categorie sono nove e le etichette sono corte: il costo e' al massimo la riga in piu' di due nomi. */ .griglia-mattonelle { grid-auto-rows: 1fr; align-items: stretch; } .griglia-mattonelle > .mattonella { height: 100%; } /* L'etichetta scende in fondo: con le righe pareggiate, senza questo il nome resterebbe attaccato all'immagine e sotto ci sarebbe il vuoto. */ .mattonella-etichetta { margin-top: auto; } /* == Gli elenchi laterali: colonna di destra e piede ======================== Due difetti diversi, misurati e non supposti. 1) 🔴 NEL PIEDE LE MINIATURE NON ERANO TUTTE UGUALI: 84x65 la prima, 84x56 le altre. `.piede-news > li` e' un flex senza `align-items`, quindi il default e' `stretch` e la miniatura **si allunga** quando il titolo va a due righe; e siccome il ritaglio e' `cover`, quella foto veniva pure tagliata in modo diverso dalle altre. `flex-start` la lascia della sua misura. ⚠️ Nel piede il ritaglio `cover` si TIENE, ed e' una scelta: in un francobollo da 84x56 il `contain` renderebbe una locandina verticale a 42x56, cioe' illeggibile fra due bande. E' l'opposto di quel che si fa nel catalogo, dove la copertina e' il contenuto e va vista intera. 2) Le righe erano di altezze diverse (88-93 nella colonna, 80-90 nel piede) a seconda che il titolo stesse su una o due righe. Il titolo ne riserva due sempre: le righe si pareggiano **senza troncare niente**, che e' la stessa scelta fatta ovunque oggi. ⚠️ Un titolo su TRE righe allunghera' comunque la sua riga: e' voluto, meglio una riga piu' alta di un titolo con i puntini. */ .piede-news > li, .widget-lista > li { align-items: flex-start; } .piede-news .titolo, .widget-lista .titolo { min-height: calc(2 * 1.4em); } /* Nel piede le immagini restano RITAGLIATE, ed e' una decisione ============ Il 2026-09-02 le si era portate a «intere» (riquadro quadrato e `contain`), poi l'utente ha guardato le due versioni affiancate e ha scelto di tornare al ritaglio del tema, che e' anche quello del sito vivo: tagliate si', ma **tutte della stessa forma**, e in un elenco di francobolli la regolarita' conta piu' del vedere l'inquadratura intera. In piu' era gia' approvato. ⚠️ Quindi qui NON c'e' nessuna regola: vale `site.css` (`aspect-ratio: 3/2`, `object-fit: cover`). Resta scritto perche' e' una scelta presa guardando, non una dimenticanza - e perche' e' l'opposto di quel che si fa nel catalogo, dove la copertina e' il contenuto e va vista intera. ⭐ Quel che di quel giro si TIENE e' la correzione vera, poco sopra: `align-items: flex-start` sulle righe. Senza, il flex stirava la miniatura della riga col titolo a due capi - 84x65 invece di 84x56 - e col ritaglio `cover` quella foto veniva tagliata in modo diverso da tutte le altre. */ /* Anche i titoli degli elenchi laterali in Oswald =========================== Completa la scelta gia' fatta per le mattonelle del catalogo («tutti i titoli del sito nello stesso carattere», scelta aperta n. 4 della consegna): la barra laterale e il piede erano rimasti indietro, e misurandoli erano **gli unici due posti** con un titolo in Open Sans - le schede news, le intestazioni dei riquadri e i titoli di pagina erano gia' tutti in Oswald. ⚠️ Il piede si include anche se la richiesta parlava della barra laterale: e' lo stesso tipo di elenco, e lasciarlo fuori avrebbe reso il piede l'unica eccezione del sito - cioe' avrebbe avuto tutta l'aria di una dimenticanza. */ .widget-lista .titolo, .piede-news .titolo { font-family: var(--f-titoli); } /* Lo stacco bianco fra l'intestazione del riquadro e il suo corpo =========== C'era sul sito vivo e nell'innesto si era perso: il tema separa i due blocchi con un margine, ma quel margine lascia vedere il fondo del riquadro (`--grigio-card`, #f2f2f2) contro l'intestazione (`--grigio-fascia`, #f5f5f5) - due grigi cosi' vicini che lo stacco non si legge, e il corpo sembra attaccato al filetto rosso. 🔴 La regola e' su `.widget-testa + *` e non sulla sola `.widget-lista`: i riquadri della colonna sono **tre** e il terzo - i social - non ha una `.widget-lista` ma una `.social-pila`. Puntando la classe si sarebbe sistemato due riquadri su tre, e il terzo sarebbe rimasto diverso senza che nessuno capisse perche'. ⚠️ E' un bordo e non un margine perche' il bordo lo dipinge l'elemento: un margine mostrerebbe di nuovo il grigio del contenitore. */ .widget .widget-testa { margin-bottom: 0; } .widget .widget-testa + * { border-top: 15px solid var(--bianco); } /* I social della colonna: badge in fila, come sul sito vivo ================= Nel tema sono un elenco verticale di pulsanti scuri col nome accanto; sul sito vivo sono **solo i badge**, affiancati su una riga. In una colonna stretta la seconda forma dice la stessa cosa in un ottavo dello spazio. 🔴 Il nome NON viene cancellato, viene tolto dalla vista: un link il cui unico contenuto e' una pastiglia marcata `aria-hidden` non avrebbe **nessun testo accessibile**, cioe' sarebbe un collegamento che chi legge con la voce non sa dove porta. Qui si usa la tecnica del tema (`.solo-lettori-schermo`), scritta a mano perche' la classe sta sul markup e questo e' un adattamento di contesto. ⚠️ Tutto sotto `.widget--social`, che e' il riquadro della colonna: nel PIEDE le stesse classi restano come sono - li' c'e' spazio e il nome per esteso e' piu' chiaro di otto quadratini. ⚠️ `flex-wrap` e non una riga forzata: i social sono otto e la colonna e' stretta, quindi su schermi piccoli vanno a capo invece di stringersi fino a diventare illeggibili. */ .widget--social .social-pila { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; padding: 0 var(--s2) var(--s2); } .widget--social .social-btn { min-height: 0; padding: 0; background: none; border: 0; gap: 0; } .widget--social .social-btn:hover { background: none; } .widget--social .social-btn .pastiglia { width: 34px; height: 34px; font-size: 15px; border-radius: 6px; } .widget--social .social-btn:hover .pastiglia { opacity: .82; } /* Il nome resta nel documento, ma fuori dalla vista. */ .widget--social .social-nome { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* == I loghi social veri, dal pacchetto Tabler gia' in casa ================= Le pastiglie mostravano una SIGLA («f», «ig», «wa»): era la scelta n. 5 della consegna, in attesa che il cliente desse i loghi. ⭐ Non servivano: i loghi stanno gia' nel pacchetto **Tabler Icons 3.45.0** che il core usa per il pannello (`app/lib/tabler-icons/`, licenza MIT), e ci sono tutti e otto. 🔴 Erano dentro un ICON FONT, non file SVG: i path sono stati estratti dai glifi del woff2 con fontTools - nessuna rete, nessuna icona ridisegnata a occhio - e portati qui come maschere. Le otto forme condividono un viewBox calcolato sui loro bounding box veri, quindi hanno tutte la stessa scala ottica invece di ballare l'una rispetto all'altra. 🔴 Perche' nel CSS e non nell'HTML: come `` inline peserebbero ~8 KB gzip **in ogni pagina**; qui stanno in un foglio che si scarica una volta e che l'`.htaccess` dichiara valido dieci anni. ⚠️ Tutto sotto `@supports`: dove le maschere CSS non esistono, la sigla resta al suo posto e si vede quella. Un ripiego che e' gia' scritto nel markup vale piu' di un quadrato bianco. */ @supports ((-webkit-mask-image: url("")) or (mask-image: url(""))) { /* ⚠️ La sigla si spegne con selettori ALMENO specifici quanto quelli che le danno un corpo: `.social-btn .pastiglia` nel tema (0,2,0) e `.widget--social .social-btn .pastiglia` qui sopra (0,3,0). Con la sola `.pastiglia` la regola c'era e non vinceva - la maschera si disegnava SOTTO la sigla, che restava visibile. */ .pastiglia { position: relative; } .social-btn .pastiglia, .widget--social .social-btn .pastiglia, .piede .social-btn .pastiglia { font-size: 0; } .pastiglia::before { content: ""; position: absolute; inset: 16%; background: currentColor; -webkit-mask: var(--sb-ico) center / contain no-repeat; mask: var(--sb-ico) center / contain no-repeat; } .pastiglia.s-facebook { --sb-ico: url("data:image/svg+xml,"); } .pastiglia.s-instagram { --sb-ico: url("data:image/svg+xml,"); } .pastiglia.s-whatsapp { --sb-ico: url("data:image/svg+xml,"); } .pastiglia.s-x { --sb-ico: url("data:image/svg+xml,"); } .pastiglia.s-tiktok { --sb-ico: url("data:image/svg+xml,"); } .pastiglia.s-youtube { --sb-ico: url("data:image/svg+xml,"); } .pastiglia.s-linkedin { --sb-ico: url("data:image/svg+xml,"); } .pastiglia.s-threads { --sb-ico: url("data:image/svg+xml,"); } } /* Le miniature del widget su fondo trasparente ============================= Il tema le mette su `--bianco`, quindi ogni copertina si porta dietro un quadratino bianco dentro la card grigia: un riquadro che si vede anche quando l'immagine e' piu' stretta di lui - ed e' quasi sempre, visto che le copertine sono verticali dentro un riquadro 1:1. Trasparente, il fondo che si vede e' quello della card e restano solo le copertine. ⚠️ Non e' solo estetica: cosi' l'unico rettangolo bianco in quella colonna torna a essere l'immagine vera, quando ce l'ha. */ .widget-miniatura { background: transparent; } /* == Il piede: due rifiniture =============================================== 1) I SOCIAL RESPIRANO UN PIXEL IN PIU'. `gap: 7px` invece di 6: nel piede la pila e' verticale e otto pulsanti attaccati sembrano un blocco unico. ⚠️ Tocca solo il piede: nella colonna la stessa classe ha gia' il suo `gap` (8px) in questo stesso foglio, e vince perche' e' piu' specifico. 2) IL PUNTINO GRIGIO DIVENTA UNA FRECCETTA ROSSA. Il pallino di default e' l'unico segno del piede che non appartiene al tema - grigio di sistema, in una colonna dove tutto il resto e' rosso o bianco. ⭐ La freccetta e' **la stessa** che il tema usa nelle briciole di pane (`sbam_ico('chevron')`, lo stesso `polyline`): non e' un segno nuovo, e' quello del sito riusato dove serve. 🔴 Come `background-image` e non come maschera: e' gia' del colore giusto e non deve cambiarlo, quindi non c'e' motivo di dipendere da `mask` (e dal suo `@supports`). Il colore e' `--rosso` scritto per esteso perche' dentro un `data:` URI le variabili CSS non arrivano. ⚠️ `list-style: none` e allineamento a mano: il segno va sulla PRIMA riga del testo, non centrato sulla voce, sennO' una voce che va a capo lo sposta a meta'. */ .sito-piede .social-pila { gap: 7px; } /* ⭐ Lo stacco sopra il piede (2026-09-14). Finche' c'era la fila dei social tondi sopra (`.piede-social`, ~108px con il suo padding) lo spazio lo dava lei; tolta quella, il piede si incollava all'ultima sezione, a ~32px dai riquadri della home. Il margine sta sul piede e non sul `

`, perche' il `

` cambia forma da vista a vista (colonna singola, due colonne, negozio) mentre il piede e' uno solo. */ .sito-piede { margin-top: var(--s5); } .piede-menu { list-style: none; padding-left: 0; } .piede-menu li { position: relative; padding-left: 22px; } .piede-menu li::before { content: ""; position: absolute; left: 2px; top: 0.45em; width: 11px; height: 11px; background: url("data:image/svg+xml,") center / contain no-repeat; } /* ── La copertina in cima a una pagina editoriale ────────────────────── Nella bozza (`pagina.html`) l'immagine di apertura riempie la colonna, ma la' e' un caso: il file di esempio era largo 800px e la colonna ne misura 750. Il file VERO del cliente e' 606px - lo stesso che il sito vivo serve dentro un riquadro da 750x400 - quindi senza questa riga uscirebbe a sinistra con 144px di bianco a destra: la stessa immagine, un'altra pagina. ⚠️ `width` e non `max-width`: l'ingrandimento e' voluto ed e' esattamente quello che fa gia' il sito da cui stiamo traslocando. Su un logo dai bordi morbidi non si vede; se un giorno il cliente ci desse il file grande, questa riga continuerebbe a fare la cosa giusta. Nella bozza il margine era a zero e lo stacco veniva dalla sola interlinea del sommario: sul vivo, col logo a fondo nero, il testo attaccava al bordo dell'immagine (visto il 2026-09-04). Ora sotto c'e' lo stesso spazio che `.prosa figure` mette attorno a una figura. */ .prosa .copertina-pagina { display: block; width: 100%; margin: 0 0 var(--s3); } /* -- il modulo di recesso e la dichiarazione (R2) ---------------------------- Il core stampa il modulo tipo e la dichiarazione dentro un `

`: un testo
   che si stampa e si copia va lasciato a spaziatura fissa, ma sul telefono
   deve andare a capo, sennO' una riga di sottolineature esce dallo schermo. */
.modulo-recesso,
.shop-recedi pre {
  white-space: pre-wrap;
  word-break: break-word;
  background: #f5f5f5;
  padding: var(--s2);
  font-size: 14px;
  line-height: 1.45;
}
.shop-recedi-form input[type="text"],
.shop-recedi-form input[type="email"],
.shop-recedi-form select,
.shop-recedi-form textarea { width: 100%; max-width: 480px; }
.shop-recedi-form input[type="number"] { width: 5em; }

/* -- l'avviso armonizzato sulla garanzia legale (dal 27/09/2026) -------------
   Il core lo compone in tre tagli (`lcr_legal_avviso_garanzia`): «cassa» sopra
   il pulsante, «compatto» ripiegato nella scheda prodotto, «pieno» nella pagina
   Garanzia legale e nelle condizioni. L'immagine e' il modello ufficiale del
   MIMIT, 794x1123: a colori e leggibile e' un requisito, non una scelta. */
.shop-garanzia { margin: var(--s3) 0; }
.shop-garanzia img {
  display: block;
  max-width: 100%;
  height: auto;
  border: 1px solid var(--filetto);
  margin: 0 auto;
}
/* ⚠️ `min(…, 100%)` e non il solo tetto in px: con la stessa specificita' e
   dichiarato dopo, il tetto scavalcava il `max-width: 100%` qui sopra e
   l'immagine usciva dalla colonna sul telefono - il difetto trovato sui tre
   WordPress il 2026-09-06 (lc-recesso 1.2.1). */
.shop-garanzia--pieno img { max-width: min(560px, 100%); }

/* ⭐ 6.1 - IL PULSANTE CON LO SCUDO, in cassa e nella scheda: lo stesso dei tre
   WordPress (lc-recesso 1.3.0), che l'utente ha voluto anche qui. Apre
   l'avviso in una finestra; senza JavaScript e' un link alla pagina.
   Blu e giallo sono quelli dell'Unione, non del tema: e' un'informazione di
   legge e deve distinguersi dai pulsanti del negozio. #003399 su bianco fa
   12,6:1. */
.shop-garanzia--cassa,
.shop-garanzia--compatto { margin: var(--s2) 0; }
.shop-gar-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: 100%;
  padding: 8px 14px;
  border: 2px solid #003399;
  border-radius: 6px;
  background: var(--bianco);
  color: #003399;
  line-height: 1.2;
  text-decoration: none;
}
.shop-gar-btn:hover,
.shop-gar-btn:focus-visible {
  background: #eef2fb;
  color: #003399;
  text-decoration: none;
}
.shop-gar-icona { flex: 0 0 28px; width: 28px; height: 28px; }
.shop-gar-testo {
  display: flex;
  flex-direction: column;
  min-width: 0;
  text-align: left;
}
.shop-gar-testo strong { font-size: 15px; font-weight: 700; }
.shop-gar-testo small { font-size: 13px; opacity: .85; }
/* In cassa sta a tutta larghezza, allineato al pulsante per comprare sotto. */
.shop-garanzia--cassa .shop-gar-btn { width: 100%; justify-content: center; }
/* ⭐ Nella SCHEDA PRODOTTO (2026-09-15) il pulsante diventa una riga discreta:
   scudo piccolo, niente bordo ne' fondo, testo grigio in corpo 13 e il
   «Leggi l'avviso» sottolineato perche' si capisca che si clicca. Il cliente
   lo trovava troppo in vista: bordato di blu, pesava quanto «Aggiungi al
   carrello». Lo script lo ha anche spostato in fondo alla scheda.
   ⚠️ Solo il taglio «compatto»: in CASSA resta il pulsante pieno, perche' li'
   l'avviso e' informazione precontrattuale e va dato ben visibile.
   #666 su bianco fa 5,74:1, e l'area cliccabile resta tutta la riga. */
.shop-garanzia--compatto .shop-gar-btn {
  gap: 6px;
  padding: 4px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--testo-sec);
}
.shop-garanzia--compatto .shop-gar-btn:hover,
.shop-garanzia--compatto .shop-gar-btn:focus-visible {
  background: transparent;
  color: var(--rosso-testo);
}
.shop-garanzia--compatto .shop-gar-icona { flex-basis: 18px; width: 18px; height: 18px; }
.shop-garanzia--compatto .shop-gar-testo {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 .35em;
}
.shop-garanzia--compatto .shop-gar-testo strong { font-size: 13px; font-weight: 600; }
.shop-garanzia--compatto .shop-gar-testo small {
  font-size: 13px;
  opacity: 1;
  text-decoration: underline;
}

/* -- la finestra dell'avviso (una per pagina, la stampa il piede) --------- */
.shop-gar-finestra[hidden] { display: none; }
.shop-gar-finestra {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s2);
}
.shop-gar-sfondo {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .65);
}
.shop-gar-riquadro {
  position: relative;
  width: 100%;
  max-width: 640px;
  max-height: calc(100vh - 32px);
  overflow: auto;
  padding: 48px var(--s2) var(--s2);
  border-radius: 8px;
  background: var(--bianco);
  box-shadow: 0 10px 40px rgba(0, 0, 0, .4);
}
.shop-gar-riquadro img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--filetto);
}
/* ⚠️ `button.` davanti per battere lo stile che il tema da' ai pulsanti in
   generale: questa X deve restare un cerchietto. */
button.shop-gar-chiudi {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 36px;
  height: 36px;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #eee;
  color: #222;
  font-size: 24px;
  line-height: 36px;
  text-align: center;
  cursor: pointer;
}
button.shop-gar-chiudi:hover,
button.shop-gar-chiudi:focus-visible { background: #ddd; }
body.shop-gar-aperta { overflow: hidden; }
.shop-garanzia-didascalia {
  font-size: 14px;
  color: var(--grigio-testo, #555);
  margin: var(--s1) 0 0;
  text-align: center;
}
/* la riga «Consegna: solo in … Pagamenti accettati: …» in testa al carrello
   (art. 51 c.3): informazione, non avviso - quindi niente giallo */
.shop-inizio {
  font-size: 15px;
  border-left: 3px solid var(--filetto);
  padding-left: var(--s2);
  margin: 0 0 var(--s3);
}

/* == I riquadri scuri della home: il titolo si vedeva bianco su grigio =======
   Difetto del kit, visto solo con la home montata: `.modulo-testa` dichiara la
   fascia del titolo a `rgba(0,0,0,.25)` - pensata per i riquadri scuri - ma
   subito dopo `.modulo .modulo-testa` la rimette a `--grigio-fascia` per TUTTI
   i riquadri, scuri compresi, e il titolo bianco sparisce su #f5f5f5. Qui si
   ripristina la fascia scura sui soli `.modulo--scuro` (e' il pezzo che sul
   sito vivo e' nero con la scritta bianca). */
.modulo--scuro .modulo-testa { background: rgba(0, 0, 0, 0.25); }

/* Il titolo dell'articolo in grande nei riquadri scuri: il tema sbianca solo
   `.card-titolo a` e `.titolo`, e l'`` di `.modulo-articolo` non ha
   nessuna delle due classi, quindi usciva col rosso e la sottolineatura dei
   link di default - sul sito vivo e' bianco, come il resto del riquadro. */
.modulo--scuro .modulo-articolo h3 a { color: var(--bianco); text-decoration: none; }
.modulo--scuro .modulo-articolo h3 a:hover { color: var(--bianco); text-decoration: underline; }

/* ── L'indice dei tag (`/it/tag/`) ─────────────────────────────────────────
   La pastiglia `.etichetta` e' del tema e non si tocca: qui si impagina solo
   l'elenco che la contiene e il numero che le sta accanto.
   ⚠️ `list-style: none` con `padding: 0` sulla ``: senza, i pallini e il
   rientro dell'elenco si sommano alle pastiglie e la nuvola va a scale. */
.nuvola-tag {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	list-style: none;
	margin: 1.5rem 0;
	padding: 0;
}
.nuvola-tag .quanti {
	opacity: .65;
	font-size: .85em;
	font-variant-numeric: tabular-nums;
}
.torna-tag { margin-top: 2rem; text-align: center; }

/* ── La pagina della newsletter (`/it/newsletter.html`, 2026-09-14) ────────
   Il riquadro e' il `.modulo` chiaro della home (testa grigia col filetto
   rosso), quindi non e' una forma nuova: e' una che il sito ha gia'.
   ⚠️ La pagina non ha la colonna di destra, e a tutta larghezza un testo corre
   su 1140px: la sezione si ferma a una misura da lettura, come la colonna
   editoriale delle altre pagine, e sta al centro sotto il titolo, che nella
   fascia e' centrato anche lui.
   🔴 L'`h2` sta dentro `.prosa`, che gli mette margine grande, maiuscolo e
   filetto sotto: nella testa del riquadro va riportato alla misura del
   modulo, sennO' la testa diventa alta il doppio con due righe. */
.newsletter { max-width: 760px; margin-left: auto; margin-right: auto; }
.newsletter-box { margin: 0 0 var(--s3); }
/* 🔴 La spunta del consenso e' una `` figlia diretta di `.campo`, e
   `.campo > label` (del tema) la veste da etichetta di campo: blocco,
   maiuscolo, carattere dei titoli. Qui torna testo corrente con la casella a
   fianco, come `.consenso` vuole - serve la specificita' in piu'. */
.newsletter-box .campo > label.consenso {
	display: flex;
	margin-bottom: 0;
	font-family: var(--f-testo);
	font-size: 14px;
	letter-spacing: 0;
	text-transform: none;
}
.prosa .newsletter-box .modulo-testa h2 {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 17px;
	letter-spacing: 0.14em;
}
.newsletter-box .modulo-corpo { padding: var(--s3); }
.newsletter-box form { margin: 0; }
.newsletter-box .conferma p:last-child,
.newsletter-box .avviso:last-child { margin-bottom: 0; }
.newsletter-box .consenso { line-height: 1.5; }
.newsletter-box .btn { margin-top: var(--s1); }
@media (max-width: 480px) {
	.newsletter-box .modulo-corpo { padding: var(--s2); }
	.newsletter-box .btn { width: 100%; }
}
/* La trappola per i programmi: fuori dallo schermo e non `display:none`,
   che alcuni riconoscono e saltano. */
.nl-trappola {
	position: absolute;
	left: -10000px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ── In coda agli articoli: i due inviti e i post correlati (2026-09-15) ───
   Erano sul WordPress e la migrazione non li aveva rifatti: li ha chiesti
   indietro il cliente. La forma e' quella di allora - due fasce a tutta
   larghezza una sopra l'altra, poi quattro riquadri col titolo sull'immagine -
   con due correzioni di leggibilita' sui colori.
   🔴 Il verde del WordPress (#5cb82f) col bianco sopra fa 2,5:1: qui e' #2f7d1a,
   5,16:1. Il rosso sul rosa e' `--rosso-testo`, 4,6:1 sul fondo #fbe3e3. */
.inviti-articolo {
	display: grid;
	gap: var(--s2);
	margin: var(--s4) 0;
}
.invito {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 14px var(--s2);
	border-radius: 4px;
	font-family: var(--f-testo);
	font-size: 17px;
	line-height: 1.3;
	text-align: center;
	text-decoration: none;
}
.invito .ico { flex: 0 0 auto; }
.invito--catalogo { background: #fbe3e3; color: var(--rosso-testo); }
.invito--newsletter { background: #2f7d1a; color: var(--bianco); }
/* Al passaggio si sottolinea e non si scurisce il fondo del rosa: un rosa piu'
   carico porterebbe il rosso sotto 4,5:1. */
.invito--catalogo:hover,
.invito--catalogo:focus-visible { color: var(--rosso-testo); text-decoration: underline; }
.invito--newsletter:hover,
.invito--newsletter:focus-visible { background: #256414; color: var(--bianco); text-decoration: underline; }

/* ⚠️ `.titolo-sezione` e' quella del tema, la stessa dei titoli della home:
   non una forma nuova per un titolo solo. */
.correlati { margin-top: var(--s5); }
.correlati-griglia {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--s3);
	margin: 0;
	padding: 0;
	list-style: none;
}
@media (min-width: 600px) {
	.correlati-griglia { grid-template-columns: repeat(2, 1fr); }
}
.correlati-griglia > li { min-width: 0; }
.correlato {
	position: relative;
	display: block;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	background: var(--nero-menu);
	color: var(--bianco);
	text-decoration: none;
}
.correlato img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .3s ease;
}
/* 🔴 La sfumatura e' piena (0,85) gia' a meta' altezza della fascia di testo:
   il titolo bianco sta sopra una fotografia qualunque - anche una locandina
   bianca - e deve leggersi comunque. */
.correlato-testo {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	padding: 56px var(--s2) var(--s2);
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, .85) 55%, rgba(0, 0, 0, .9) 100%);
	text-align: center;
}
.correlato--senza-media .correlato-testo { top: 0; justify-content: center; background: none; }
.correlato-titolo {
	font-family: var(--f-titoli);
	font-size: 17px;
	line-height: 1.3;
	letter-spacing: .04em;
	text-transform: uppercase;
	overflow-wrap: anywhere;
}
.correlato-data {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 13px;
	color: #e6e6e6;
}
.correlato:hover .correlato-titolo,
.correlato:focus-visible .correlato-titolo { text-decoration: underline; }
.correlato:hover img { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) {
	.correlato img { transition: none; }
	.correlato:hover img { transform: none; }
}

/* ─── MEGAMENU' DELLA VOCE «NEWS» (2026-09-26) ─────────────────────────────
   Come sul sito vecchio: passando sulla voce «News» si apre sotto la barra un
   pannello scuro con l'articolo IN PRIMO PIANO a sinistra e i sei RECENTI a
   destra. Il markup lo fa `sbam_mega_news()` (inc/func.inc.php).
   🔴 Il pannello sta nella  e NON dentro la voce: la fila delle voci ha
   `overflow-x: auto` (site.css) e lo taglierebbe. Lo apre `:has()` guardando la
   voce `.con-mega`, e resta aperto finche' il puntatore ci sta sopra.
   ⚠️ Si chiude con un attimo di ritardo (la `visibility` passa dopo 0,18 s): e'
   il tempo di scendere dalla voce al pannello senza che si richiuda per strada.
   ⚠️ Nascosto con `visibility`, quindi a pannello chiuso i suoi link non sono
   raggiungibili col tasto Tab: chi usa la tastiera ha la voce «News», che porta
   all'elenco completo. La barra da computer esiste solo sopra i 1140px, e con
   lei il pannello.
   Contrasto: titoli bianchi su #2d2d2d, date #bbbbbb su #2d2d2d = 7,2:1. */
.barra-menu { position: relative; }
.mega-news {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 80;                       /* sotto il banner dei cookie (90) e la ricerca (100) */
  visibility: hidden;
  opacity: 0;
  transition: opacity .12s ease, visibility 0s linear .18s;
}
.barra-menu:has(.con-mega:hover) .mega-news,
.barra-menu:has(.con-mega:focus-within) .mega-news,
.mega-news:hover {
  visibility: visible;
  opacity: 1;
  transition-delay: 0s;
}
.mega-griglia {
  display: grid;
  grid-template-columns: 400px 1fr;
  max-width: calc(var(--contenitore) + 2 * var(--s2));
  margin: 0 auto;
  background: var(--nero-modulo);
  box-shadow: 0 12px 28px rgba(0, 0, 0, .35);
}
.mega-primo { padding: 26px 20px 28px; border-right: 1px solid var(--filetto-scuro); }
.mega-recenti { padding: 26px 30px 28px; }
.mega-titolo {
  margin: 0 0 22px;
  font-family: var(--f-titoli);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-align: center;
  color: var(--bianco);
}
.mega-titolo::after {
  content: "";
  display: block;
  width: 72px;
  height: 3px;
  margin: 10px auto 0;
  background: var(--rosso);
}
.mega-meta {
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: var(--f-titoli);
  font-size: 12px;
  letter-spacing: .03em;
  color: var(--testo-piede);
}
/* in primo piano: l'immagine col titolo sopra, su una sfumatura scura */
.mega-primo-link {
  position: relative;
  display: block;
  color: var(--bianco);
  text-decoration: none;
  background: var(--nero-menu);
}
.mega-primo-link img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
.mega-primo-testo {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 48px 16px 14px;
  text-align: center;
  background: linear-gradient(to top, rgba(0, 0, 0, .88) 0%, rgba(0, 0, 0, .7) 45%, rgba(0, 0, 0, 0) 100%);
}
.mega-primo-testo .mega-meta { color: #dddddd; justify-content: center; flex-wrap: wrap; }
.mega-primo-nome {
  font-family: var(--f-titoli);
  font-size: 21px;
  line-height: 1.2;
  letter-spacing: .02em;
}
.mega-primo-link:hover .mega-primo-nome,
.mega-primo-link:focus-visible .mega-primo-nome { text-decoration: underline; text-underline-offset: 3px; }
/* recenti: due colonne, miniatura 80x60 e titolo */
.mega-recenti ul {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px 30px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.mega-rec {
  display: grid;
  grid-template-columns: 80px 1fr;
  column-gap: 16px;
  align-items: center;
  color: var(--bianco);
  text-decoration: none;
}
.mega-rec img,
.mega-rec-vuota {
  display: block;
  width: 80px;
  height: 60px;
  object-fit: cover;
  background: var(--nero-menu);
}
.mega-rec-testo { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.mega-rec-nome {
  font-family: var(--f-titoli);
  font-size: 15px;
  line-height: 1.3;
  letter-spacing: .02em;
}
.mega-rec:hover .mega-rec-nome,
.mega-rec:focus-visible .mega-rec-nome { text-decoration: underline; text-underline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .mega-news { transition: none; }
}
@media print {
  .mega-news { display: none; }
}

/* ── I BANNER DELLA COLONNA DI DESTRA (lcBanners, posizione «colonna», 2026-09-27)
   In cima alla colonna, uno sotto l'altro, a tutta larghezza (360 px) e senza la
   scheda grigia dei riquadri: un banner ha gia' la sua grafica, e dentro una
   cornice sembrerebbe un contenuto del sito. L'immagine e' 6:5, 360x300 a video. */
.widget-banner { display: grid; gap: var(--s3); }
.banner-colonna { display: block; }
.banner-colonna img { display: block; width: 100%; height: auto; }

/* ── L'ANTEPRIMA CALAMEO DELLA SCHEDA LIBRO (2026-09-27) ────────────────────
   Come la presenta Calameo stesso, su un'immagine data da Luca («un po' piu'
   grande»): la copertina, con una linguetta grigia a destra e il triangolo.
   La copertina e' la nostra (nessuna richiesta esterna prima del clic); al clic
   `sbam.js` apre la finestra grande (`data-incorpora` + `data-modale`).
   L'altezza si riduce sugli schermi stretti, e la larghezza non supera mai lo
   spazio: una copertina larga non sfonda la colonna. */
.sfoglia-riquadro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s1);
  margin: var(--s3) 0;
}
.sfoglia {
  display: inline-flex;
  align-items: stretch;
  max-width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.prosa .sfoglia-copertina img,
.sfoglia-copertina img {
  display: block;
  position: relative;
  z-index: 1;
  width: auto;
  height: clamp(240px, 62vw, 340px);
  max-width: calc(100vw - 120px);
  margin: 0;
  object-fit: contain;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.28);
}
.sfoglia-linguetta {
  flex: none;
  width: 54px;
  margin: 14px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(to bottom, #b4b4b4, #8c8c8c);
  border-radius: 0 12px 12px 0;
  transition: background 0.15s;
}
.sfoglia-linguetta svg { width: 28px; height: 28px; fill: var(--bianco); }
.sfoglia:hover .sfoglia-linguetta,
.sfoglia:focus-visible .sfoglia-linguetta { background: var(--rosso); }
.sfoglia:focus-visible { outline: 3px solid var(--rosso-testo); outline-offset: 4px; }
.sfoglia-nota { font-size: 13px; color: var(--testo-sec); text-align: center; }
@media (prefers-reduced-motion: reduce) { .sfoglia-linguetta { transition: none; } }