/* ==========================================================
   PICIEMME — Complianz vestito con l'identita del sito
   ----------------------------------------------------------
   NON TOCCA I FILE DEL PLUGIN. Complianz si aggiorna e cancellerebbe
   qualsiasi modifica fatta dentro di lui: qui si lavora solo dall'esterno,
   con selettori abbastanza specifici da vincere sul suo foglio.

   La specificita si ottiene ancorando al contenitore che il plugin mette
   sempre (#cmplz-cookiebanner-container) invece di ricorrere a !important.
   Dove il foglio di Complianz usa gia un id, si aggiunge un attributo o si
   raddoppia la classe: resta leggibile e non blocca chi verra dopo.

   STRUTTURA E TESTI NON SI TOCCANO: la conformita dipende da quelli.
   Qui cambiano solo colori, forme e tipografia.
   ========================================================== */

/* ---------- Il pannello ---------- */
#cmplz-cookiebanner-container .cmplz-cookiebanner{
  background:var(--white);
  border:1px solid var(--black-25);
  border-radius:0;                       /* il sito non ha angoli tondi */
  box-shadow:0 12px 48px rgba(4,3,1,.14);
  padding:28px 32px;
  font-family:var(--body);
  color:var(--black);
}

#cmplz-cookiebanner-container .cmplz-header .cmplz-title{
  font-family:var(--display);
  font-size:clamp(20px, 1.85vw, 26px);
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:.02em;
  color:var(--black);
}

#cmplz-cookiebanner-container .cmplz-body,
#cmplz-cookiebanner-container .cmplz-message{
  font-family:var(--body);
  font-size:16px;
  line-height:1.5;
  color:var(--n700);
}

#cmplz-cookiebanner-container .cmplz-divider{
  background:var(--black-25);
  height:1px;
}

#cmplz-cookiebanner-container .cmplz-close{ color:var(--n700); }
#cmplz-cookiebanner-container .cmplz-close:hover{ color:var(--black); }

/* ---------- I pulsanti ----------
   Forma di .btn-pill del tema. La gerarchia e nei colori, non nelle
   misure: Accetta e Rifiuta hanno LA STESSA dimensione, lo stesso
   riempimento e lo stesso peso tipografico.

   Non e una scelta estetica ma un obbligo: il GDPR chiede che rifiutare
   sia facile quanto accettare. Un "Rifiuta" piu piccolo, piu chiaro o
   nascosto fra i link e un dark pattern, e le autorita lo contestano.
   Se qualcuno chiede di "far risaltare di piu Accetta", la risposta e
   che si puo cambiare il colore, mai la dimensione o l'evidenza. */
#cmplz-cookiebanner-container .cmplz-btn{
  font-family:var(--body);
  font-size:14px;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  border-radius:999px;
  padding:13px 30px;
  min-width:168px;
  border:1px solid transparent;
  cursor:pointer;
  transition:background var(--hover-fx), color var(--hover-fx), border-color var(--hover-fx);
}

/* Azione principale: bordeaux pieno */
#cmplz-cookiebanner-container .cmplz-btn.cmplz-accept{
  background:var(--burgundy-600);
  border-color:var(--burgundy-600);
  color:var(--white);
}
#cmplz-cookiebanner-container .cmplz-btn.cmplz-accept:hover{
  background:var(--black);
  border-color:var(--black);
}

/* Rifiuta: stessa misura e stesso peso, contorno invece di pieno.
   Contrasto del testo su fondo chiaro ampiamente oltre il 4.5:1. */
#cmplz-cookiebanner-container .cmplz-btn.cmplz-deny{
  background:transparent;
  border-color:var(--black);
  color:var(--black);
}
#cmplz-cookiebanner-container .cmplz-btn.cmplz-deny:hover{
  background:var(--black);
  color:var(--white);
}

/* Le due terziarie non sono scelte sul consenso ma navigazione:
   prendono la forma di .u-link, sottolineate e senza riquadro. */
#cmplz-cookiebanner-container .cmplz-btn.cmplz-view-preferences,
#cmplz-cookiebanner-container .cmplz-btn.cmplz-save-preferences{
  background:transparent;
  border-color:transparent;
  color:var(--n700);
  min-width:0;
  padding:13px 12px;
  text-decoration:underline;
  text-underline-offset:4px;
}
#cmplz-cookiebanner-container .cmplz-btn.cmplz-view-preferences:hover,
#cmplz-cookiebanner-container .cmplz-btn.cmplz-save-preferences:hover{
  color:var(--black);
}

/* Il focus da tastiera resta sempre visibile: senza, il banner diventa
   inutilizzabile per chi non usa il mouse — ed e anch'esso un requisito. */
#cmplz-cookiebanner-container .cmplz-btn:focus-visible,
#cmplz-cookiebanner-container .cmplz-link:focus-visible{
  outline:2px solid var(--burgundy-600);
  outline-offset:3px;
}

/* ---------- Categorie e interruttori ---------- */
#cmplz-cookiebanner-container .cmplz-category{
  background:transparent;
  border:1px solid var(--black-25);
  border-radius:0;
}
#cmplz-cookiebanner-container .cmplz-category .cmplz-title{
  font-family:var(--body);
  font-weight:600;
  color:var(--black);
  text-transform:none;
  font-size:15px;
}
#cmplz-cookiebanner-container .cmplz-description{
  font-size:14px;
  color:var(--n700);
}
#cmplz-cookiebanner-container .cmplz-banner-checkbox input:checked + .cmplz-slider,
#cmplz-cookiebanner-container .cmplz-slider-checked{ background:var(--burgundy-600); }

/* ---------- I link ai documenti ---------- */
#cmplz-cookiebanner-container .cmplz-links a,
#cmplz-cookiebanner-container a.cmplz-link{
  color:var(--n700);
  text-decoration:underline;
  text-underline-offset:4px;
  transition:color var(--hover-fx);
}
#cmplz-cookiebanner-container .cmplz-links a:hover,
#cmplz-cookiebanner-container a.cmplz-link:hover{ color:var(--burgundy-600); }

/* ---------- Telefono ---------- */
@media (max-width:600px){
  #cmplz-cookiebanner-container .cmplz-cookiebanner{ padding:22px 20px; }
  #cmplz-cookiebanner-container .cmplz-btn{ min-width:0; width:100%; }
}

/* ----------------------------------------------------------
   IL TITOLO SPARIVA SOTTO I 425px
   ----------------------------------------------------------
   Non era un nostro errore: e Complianz che lo spegne, con una riga sola
   dentro @media (max-width: 425px) nel foglio che genera. Immagino per
   guadagnare spazio sul banner compatto, ma il risultato e un pannello
   che sul telefono si apre senza dire cosa sia — e "Gestisci consenso" e
   proprio l'informazione che rende comprensibile il resto.

   Basta riaccenderlo: il selettore del plugin pesa tre classi, questo un
   id e due, quindi vince senza !important e senza dipendere dall'ordine
   di caricamento.

   Nel blocco a 425px di Complianz non c'e nient'altro che quella riga: la
   griglia della testata resta la sua, "auto 1fr auto", e il titolo torna
   nella colonna centrale. Il logo qui e vuoto, quindi la sua colonna
   misura zero e lo spazio c'e tutto.
   ---------------------------------------------------------- */
@media (max-width:425px){
  #cmplz-cookiebanner-container .cmplz-header .cmplz-title{ display:block; }
}

/* ==========================================================
   PAGINE PRIVACY E COOKIE POLICY
   ----------------------------------------------------------
   PERCHE #cmplz-document E NON .cmplz-document

   Il foglio del plugin (assets/css/document.min.css) aggancia tutto
   all'id: "#cmplz-document .cmplz-dropdown summary { ... }". Un id pesa
   piu di qualunque catena di classi, quindi le regole scritte sulla
   classe perdevano tutte, in silenzio: il CSS era caricato per ultimo e
   sembrava a posto, ma vinceva sempre Complianz.

   Si vedeva cosi: il riquadro grigio attorno a ogni servizio restava,
   e le chevron diventavano DUE — la sua, che e un'immagine di sfondo su
   summary div::after, piu la mia. Da qui in giu si ancora all'id, che e
   quello che l'intestazione di questo file dice di fare fin dall'inizio
   per il banner.

   Il testo legale non si tocca: qui cambiano solo colori, forme e
   tipografia.
   ========================================================== */

/* Complianz impagina il documento a 800px fissi. Sulla nostra pagina la
   larghezza la decide .doc-corpo, quindi il tetto va tolto: era questo,
   non la nostra misura, a fermare il testo prima di meta schermo. */
#cmplz-document{
  max-width:none;
  font-family:var(--body);
  font-size:var(--fs-body-m);
  line-height:1.6;
  color:var(--n800);
  text-justify:auto;
  /* Le cifre di serie in Cormorant sono oldstyle: nascono all'altezza
     della x e scendono sotto la riga. Nel resto del sito e quello che
     serve (site.css:995), ma un documento legale e fatto di numeri —
     "1.1 Newsletter", "art. 6", "24 mesi", "2026" — e mezzi oldstyle
     accanto a mezzi alti sembravano due caratteri diversi. Qui vanno
     tutti alti. Tabular resta solo dove i numeri si incolonnano. */
  font-variant-numeric:lining-nums;
}

/* --- Paragrafi e liste --- */
#cmplz-document p,
#cmplz-document li{ font-size:inherit; }
#cmplz-document p{ margin:0 0 1.1em; }
#cmplz-document ul,
#cmplz-document ol{ margin:0 0 1.1em; padding-left:1.4em; margin-left:0; }
#cmplz-document li{ margin-bottom:.4em; }
#cmplz-document li::marker{ color:var(--n400); }

#cmplz-document > p:first-child{
  margin-bottom:1.4em; padding-bottom:1em;
  border-bottom:1px solid var(--n300);
}
#cmplz-document > p:first-child i{ color:var(--n600); }

/* ----------------------------------------------------------
   GERARCHIA
   In Cormorant come il resto del testo, distinta per peso e misura e non
   per carattere. Aboreto ha un peso solo, nessun corsivo e nessuna
   minuscola: regge tre parole in copertina, non quaranta intestazioni.

   font-variant-numeric: le cifre di serie in Cormorant sono oldstyle —
   nascono all'altezza della x e scendono sotto la riga. Nel corpo del
   testo e quello che vuole il sito (site.css:995), ma in "1. Introduzione"
   e "5.1 Cookie tecnici" l'uno accanto a una maiuscola sembrava di un
   altro corpo. Nei titoli servono le cifre alte; nel testo restano
   oldstyle come ovunque.
   ---------------------------------------------------------- */
#cmplz-document h2,
#cmplz-document h3,
#cmplz-document h4,
#cmplz-document h5{
  font-family:var(--body);
  color:var(--black);
  text-transform:none;
  letter-spacing:0;
  font-variant-numeric:lining-nums tabular-nums;
  border-bottom:0;
}

#cmplz-document h2{
  font-size:clamp(24px, 2.38vw, 36px);
  font-weight:700; line-height:1.2;
  margin:1.5em 0 .45em;
  padding:.9em 0 0;
  border-top:1px solid var(--n300);
}
#cmplz-document > h2:first-of-type{ margin-top:0; padding-top:0; border-top:0; }

#cmplz-document h3{
  font-size:clamp(19px, 1.65vw, 25px);
  font-weight:700; line-height:1.25;
  margin:1.3em 0 .4em;
  padding-bottom:0;
}

#cmplz-document h4{
  font-size:var(--fs-body-m);
  font-weight:700; line-height:1.3;
  margin:1.4em 0 .3em;
}

/* h5 non sono titoli ma etichette di dato: "Nome", "Scadenza", "Funzione". */
#cmplz-document h5{
  font-size:var(--fs-xs);
  font-weight:500; letter-spacing:.08em; text-transform:uppercase;
  color:var(--n700);
  margin:0;
}
#cmplz-document .name-header strong,
#cmplz-document .retention-header strong,
#cmplz-document .function-header strong{
  font-size:inherit; font-weight:inherit; text-transform:inherit;
}

#cmplz-document a{
  color:var(--burgundy-600);
  text-decoration:underline;
  text-decoration-thickness:.5px;
  text-underline-offset:3px;
  transition:color var(--hover-fx);
}
#cmplz-document a:hover{ color:var(--black); }
/* Il focus del plugin disegna un bordo nero che sposta il testo di 2px. */
#cmplz-document a:focus{ border:0; padding:0; }
#cmplz-document a:focus-visible{ outline:2px solid var(--burgundy-600); outline-offset:2px; }

/* Il grassetto dentro il testo legale. Complianz lo usa per i termini che
   contano — la base giuridica, il periodo di conservazione, il nome del
   titolare — ma il peso di serie del carattere lo rendeva quasi
   indistinguibile dal resto della riga: a 700 e in nero pieno si vede. */
#cmplz-document strong,
#cmplz-document b{ font-weight:700; color:var(--black); }

/* ----------------------------------------------------------
   ELENCO DEI COOKIE
   ----------------------------------------------------------
   SPECIFICITA, SECONDO GIRO

   Complianz non aggancia solo con l'id: per la cookie policy usa
   "#cmplz-document .cmplz-dropdown.cmplz-dropdown-cookiepolicy summary",
   cioe un id e due classi. Le regole scritte con una classe sola
   perdevano ancora — e il suo display:block batteva il nostro flex, per
   cui la categoria del servizio finiva dove capitava invece che in
   colonna. Da qui in giu si ripete #cmplz-document anche come classe:
   pesa una classe in piu della sua catena piu lunga, e vince ovunque.

   L'IMPIANTO
   Ogni servizio e una scheda piena, staccata dalla successiva. Prima
   erano righe divise da un filetto dentro un unico riquadro tinto: ad
   apertura fatta non si capiva piu dove finisse il contenuto di un
   servizio e cominciasse quello dopo, perche il filetto pesa uguale sia
   che separi due testate sia che separi mezza pagina di testo. Il fondo
   pieno chiude la scheda da solo, e i 10px fra una e l'altra fanno il
   resto: nessun bordo.

   L'ALLINEAMENTO
   --cookie-gutter e il riempimento laterale della scheda, ed e la corsia
   che allinea tutto quanto: nome del servizio, descrizioni e tabella dei
   cookie partono dalla stessa ascissa. I blocchi che devono stendere il
   proprio fondo da bordo a bordo lo annullano con un margine negativo
   pari al riempimento, cosi il fondo arriva ai lati ma il testo resta in
   colonna. Il contenuto aperto non torna mai al margine del riquadro:
   sarebbe piu a sinistra del titolo che lo annuncia.

   IL CORPO
   Dentro la scheda si legge alla stessa misura della testata (--fs-sm).
   La gerarchia la fa il peso, non il corpo: le etichette sono a 700 e
   nere, i valori a 400 in n700. A --fs-xs — dove stava prima — le
   diciotto righe di un servizio aperto erano un blocco unico di grigio
   in cui non si distingueva un'intestazione da un dato.

   La testata resta una griglia a tre colonne fisse — nome, categoria,
   casella — cosi le categorie di servizi diversi si incolonnano invece
   di galleggiare. La chevron sta fuori dalla griglia, appoggiata al
   margine destro, come nei filtri della pagina Eventi.
   ---------------------------------------------------------- */

/* Lo stacco dal testo che presenta l'elenco: prima era 1.6em e l'ultimo
   paragrafo della descrizione sembrava la prima riga della lista. */
#cmplz-document.cmplz-document .cmplz-cookies-overview{
  margin:3.2em 0 2em;
  padding:0;
  background:transparent;
}

/* --- La scheda --- */
#cmplz-document.cmplz-document .cmplz-dropdown{
  --cookie-gutter:22px;
  background-color:rgba(4,3,1,.045);
  border:0;
  margin:2.8em 0 10px;
  padding:0 var(--cookie-gutter);
  transition:background-color var(--hover-fx);
}
/* Il margine sopra e lo stacco dalla riga che introduce l'elenco — nella
   privacy policy le tendine escono attaccate al testo, senza il
   contenitore che nella cookie policy tiene le distanze. Serve pero solo
   alla prima: fra una tendina e l'altra bastano i 10px, se no l'elenco
   si sfilaccia in tante schede sparse. */
#cmplz-document.cmplz-document .cmplz-dropdown + .cmplz-dropdown,
#cmplz-document.cmplz-document .cmplz-cookies-overview > .cmplz-dropdown:first-child{
  margin-top:0;
}
/* Il passaggio del mouse tinge solo le schede chiuse: su una aperta
   cambiare fondo mentre si legge e un movimento senza motivo. */
#cmplz-document.cmplz-document .cmplz-dropdown:not([open]):hover{
  background-color:rgba(4,3,1,.065);
}
#cmplz-document.cmplz-document .cmplz-dropdown[open]{
  background-color:rgba(4,3,1,.07);
  padding-bottom:22px;
}

/* ----------------------------------------------------------
   TESTATA — vale per tutte le tendine
   ----------------------------------------------------------
   Complianz ne fa due tipi con markup diverso: quelle dell'elenco
   cookie (.cmplz-dropdown-cookiepolicy, tre colonne dentro un div) e
   quelle della privacy policy, dove il summary contiene solo il titolo
   della finalita — "1.1 Newsletter".

   Questo azzeramento prima era agganciato alla sola variante cookie, e
   nella privacy restava tutto del plugin: un fondo grigio suo sopra il
   nostro, e un riempimento sinistro suo che spostava il titolo rispetto
   al testo sotto. Si vedeva come una tendina in due colori, con la
   testata piu stretta della scheda e il contenuto che sbordava a
   sinistra rispetto al titolo che lo annuncia.

   Il fondo lo mette la scheda, una volta sola, e la testata ci sta
   sopra trasparente: cosi la tendina e tutta dello stesso colore da un
   bordo all'altro. Il riempimento e quello della scheda, quindi titolo
   e contenuto partono dalla stessa ascissa.
   ---------------------------------------------------------- */
#cmplz-document.cmplz-document .cmplz-dropdown > summary{
  position:relative; display:block;
  margin:0; padding:0;
  background:transparent; background-color:transparent;
  border:0;
  cursor:pointer; list-style:none;
}

/* --- Testata della privacy policy: il titolo e solo, senza griglia ---
   Il selettore non nomina il figlio (h3, h5 o altro secondo la versione
   del plugin) ma lo prende comunque: qualunque cosa ci metta dentro,
   esce con la misura e il peso del titolo di una tendina. */
#cmplz-document.cmplz-document .cmplz-dropdown:not(.cmplz-dropdown-cookiepolicy) > summary{
  display:flex; align-items:center;
  min-height:54px; padding:12px 30px 12px 0;
}
#cmplz-document.cmplz-document .cmplz-dropdown:not(.cmplz-dropdown-cookiepolicy) > summary > *{
  margin:0; padding:0; border:0;
  font-family:var(--body);
  font-size:var(--fs-azione); font-weight:700; line-height:1.3;
  color:var(--black); text-transform:none; letter-spacing:0;
  transition:color var(--hover-fx);
}
#cmplz-document.cmplz-document .cmplz-dropdown:not(.cmplz-dropdown-cookiepolicy) > summary:hover > *{
  color:var(--burgundy-600);
}

/* --- Testata dell'elenco cookie --- */
#cmplz-document.cmplz-document .cmplz-dropdown summary::-webkit-details-marker,
#cmplz-document.cmplz-document .cmplz-dropdown summary::marker{ display:none; content:""; }

/* Tre colonne: il nome prende lo spazio che avanza, la categoria si
   allinea a destra sulla stessa ascissa per tutti i servizi, la casella
   chiude. 30px di margine a destra sono la corsia della chevron. */
#cmplz-document.cmplz-document .cmplz-dropdown.cmplz-dropdown-cookiepolicy summary > div{
  display:grid; grid-template:none; grid-gap:0;
  grid-template-columns:minmax(0, 1fr) max-content 22px;
  align-items:center; column-gap:20px;
  min-height:58px; padding:2px 30px 2px 0;
}
/* Il nome del servizio e la voce piu alta dentro l'elenco: a 700 si
   stacca dalla finalita che gli sta accanto e dal testo della scheda
   aperta, che sono entrambi a 400. */
#cmplz-document.cmplz-document .cmplz-dropdown.cmplz-dropdown-cookiepolicy summary > div h3{
  grid-area:auto; grid-column:1;
  margin:0; padding:0; border-bottom:0;
  font-size:var(--fs-azione); font-weight:700;
  text-transform:uppercase; letter-spacing:.03em;
  color:var(--black); line-height:1.3;
  transition:color var(--hover-fx);
}
#cmplz-document.cmplz-document .cmplz-dropdown.cmplz-dropdown-cookiepolicy summary:hover > div h3{
  color:var(--burgundy-600);
}
#cmplz-document.cmplz-document .cmplz-dropdown.cmplz-dropdown-cookiepolicy summary > div p{
  grid-area:auto; grid-column:2;
  margin:0; padding:0; text-align:right;
  font-size:var(--fs-sm); font-weight:400; color:var(--n700);
}

/* L'etichetta della casella contiene solo testo per gli screen reader:
   toglierla dal flusso lascia tre soli elementi in griglia, uno per
   colonna. Nascosta all'occhio, non alla lettura assistita. */
#cmplz-document.cmplz-document .cmplz-dropdown summary > div label{
  position:absolute; width:1px; height:1px; padding:0; margin:0;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap;
}
#cmplz-document.cmplz-document .cmplz-dropdown summary > div input{
  grid-area:auto; grid-column:3; justify-self:end;
  width:16px; height:16px; margin:0;
  accent-color:var(--burgundy-600); cursor:pointer;
}

/* La chevron del plugin e un'immagine di sfondo su questo pseudo-elemento:
   spenta qui, ne resta una sola. */
#cmplz-document.cmplz-document .cmplz-dropdown summary > div::after{
  content:none; background:none; width:0; height:0; margin:0;
}

/* La nostra: due lati di un quadrato ruotati, come .ev-filtro::after.
   Tratto in n700 e non n600: a 8px un grigio chiaro su fondo tinto non
   si distingue da uno sporco dello schermo. */
#cmplz-document.cmplz-document .cmplz-dropdown summary::after{
  content:""; position:absolute; right:2px; top:50%; pointer-events:none;
  background:none;
  width:9px; height:9px; margin-top:-7px;
  border-right:1.2px solid var(--n700); border-bottom:1.2px solid var(--n700);
  transform:rotate(45deg);
  transition:transform var(--hover-fx), border-color var(--hover-fx);
}
#cmplz-document.cmplz-document .cmplz-dropdown[open] > summary::after{
  transform:rotate(-135deg); margin-top:-2px;
}
#cmplz-document.cmplz-document .cmplz-dropdown summary:hover::after{ border-color:var(--burgundy-600); }

/* --- Aperto: le due colonne di testo ---
   Partono dopo la testata con un filo d'aria, non incollate: la scheda
   aperta e un secondo livello di lettura e si deve vedere. */
#cmplz-document.cmplz-document .cmplz-dropdown .cmplz-service-description,
#cmplz-document.cmplz-document .cmplz-dropdown .cmplz-sharing-data{
  display:inline-block; vertical-align:top;
  width:calc(50% - 16px);
  padding:4px 0 0;
}
#cmplz-document.cmplz-document .cmplz-dropdown .cmplz-service-description{ margin-right:28px; }
/* Le due colonne cominciano con la propria etichetta: li il margine
   sopra non separa niente, e la colonna partirebbe piu bassa della
   sorella se una delle due ha una riga in meno. */
#cmplz-document.cmplz-document .cmplz-dropdown .cmplz-service-description > :first-child,
#cmplz-document.cmplz-document .cmplz-dropdown .cmplz-sharing-data > :first-child{ margin-top:0; }
/* ----------------------------------------------------------
   DENTRO LA TENDINA APERTA: UNA SOLA SCALA
   ----------------------------------------------------------
   Nella privacy policy il plugin scrive "Per questo scopo usiamo i
   seguenti dati" e "Periodo di conservazione" come h3, cioe con la
   misura dei titoli di capitolo del documento: aperta la tendina, il
   contenuto era piu grande del titolo che l'aveva aperta. Dentro una
   tendina non ci sono capitoli — sono tutte etichette dello stesso
   rango, e stanno tutte a --fs-sm come il resto del contenuto. La
   gerarchia la fa il peso: etichette a 700 e nere, valori a 400 in n700.

   Il margine sopra e quello che stacca un gruppo dal precedente, il
   margine sotto tiene l'etichetta attaccata al proprio dato: senza,
   "Periodo di conservazione" galleggiava a meta strada fra la sua frase
   e quella di prima. */
#cmplz-document.cmplz-document .cmplz-dropdown h3,
#cmplz-document.cmplz-document .cmplz-dropdown h4,
#cmplz-document.cmplz-document .cmplz-dropdown h5{
  margin:1.15em 0 .3em; padding:0; border:0;
  font-family:var(--body);
  font-size:var(--fs-sm); font-weight:700; color:var(--black);
  text-transform:none; letter-spacing:0; line-height:1.35;
}
#cmplz-document.cmplz-document .cmplz-dropdown > :first-child + h3,
#cmplz-document.cmplz-document .cmplz-dropdown > :first-child + h4,
#cmplz-document.cmplz-document .cmplz-dropdown > :first-child + h5{
  margin-top:.9em;
}
#cmplz-document.cmplz-document .cmplz-dropdown p,
#cmplz-document.cmplz-document .cmplz-dropdown li,
#cmplz-document.cmplz-document .cmplz-dropdown a{
  font-size:var(--fs-sm); line-height:1.55;
}
#cmplz-document.cmplz-document .cmplz-dropdown p{ margin:0 0 .2em; padding:0; }
#cmplz-document.cmplz-document .cmplz-dropdown a{ margin:0; padding:0; }

/* L'elenco puntato rientra di un pallino soltanto: piu dentro e sembra
   appartenere a un livello che non esiste. */
#cmplz-document.cmplz-document .cmplz-dropdown ul,
#cmplz-document.cmplz-document .cmplz-dropdown ol{
  margin:0 0 .2em; padding-left:1.1em;
}
#cmplz-document.cmplz-document .cmplz-dropdown li{ margin-bottom:.15em; }

/* ----------------------------------------------------------
   NOME / SCADENZA / FUNZIONE
   Il plugin ne fa una tabella: bordo, fondo grigio e grid-gap di 1px per
   disegnare le righe, piu 15px di padding per cella. Qui restano le tre
   colonne — sono tre dati che si confrontano — ma senza cornice e con
   larghezze proporzionate al contenuto invece che tre terzi uguali: il
   nome di un cookie e corto, la sua funzione e una frase.

   Nessun fondo proprio. Aveva quello della pagina — l'idea era dire
   "questi sono dati, non prosa" senza tirare un filetto — ma dentro una
   scheda tinta un rettangolo del colore della pagina non si legge come
   un blocco: si legge come un buco, e la scheda sembrava finire li e
   ricominciare dopo. Lo stacco lo fa lo spazio sopra, che e largo il
   doppio di quello fra un'etichetta e il suo testo, e le tre
   intestazioni in maiuscoletto nero.
   ---------------------------------------------------------- */
#cmplz-document.cmplz-document .cmplz-dropdown.cmplz-dropdown-cookiepolicy .cookies-per-purpose{
  border:0; border-top:0;
  background-color:transparent;
  grid-gap:0; column-gap:24px; row-gap:8px;
  grid-template-columns:minmax(0, 1.1fr) minmax(0, .8fr) minmax(0, 2.2fr);
  margin:0 0 6px;
  padding:26px 0 0;
  font-size:var(--fs-sm);
}
#cmplz-document.cmplz-document .cmplz-dropdown .cookies-per-purpose div{
  background-color:transparent; padding:0;
}

/* La finalita e gia scritta nella testata quando il servizio ne ha una
   sola, ma quando ne ha due (Wistia: pubblicita e statistiche) e l'unica
   cosa che divide i due gruppi. Resta, in tono minore. */
#cmplz-document.cmplz-document .cmplz-dropdown.cmplz-dropdown-cookiepolicy .cookies-per-purpose .purpose{
  grid-area:purpose; margin-bottom:8px;
}
#cmplz-document.cmplz-document .cmplz-dropdown .cookies-per-purpose .purpose h4{
  margin:0; font-size:var(--fs-xs); font-weight:700;
  text-transform:uppercase; letter-spacing:.08em; color:var(--n700);
}

/* Le tre intestazioni di colonna: maiuscoletto a 700. Erano a 500, cioe
   lo stesso peso dei valori sotto, e in una griglia senza righe non si
   capiva quale riga fosse l'intestazione. */
#cmplz-document.cmplz-document .cmplz-dropdown .cookies-per-purpose h5{
  font-size:var(--fs-xs); font-weight:700;
  letter-spacing:.08em; text-transform:uppercase;
  color:var(--n800); margin:0;
}
#cmplz-document.cmplz-document .cmplz-dropdown .cookies-per-purpose .name{
  font-weight:700; color:var(--black); word-break:break-word;
}
#cmplz-document.cmplz-document .cmplz-dropdown .cookies-per-purpose .retention,
#cmplz-document.cmplz-document .cmplz-dropdown .cookies-per-purpose .function{
  font-weight:400; color:var(--n700);
}

@media only screen and (min-width:600px){
  #cmplz-document.cmplz-document .cmplz-dropdown .cookies-per-purpose .name-header,
  #cmplz-document.cmplz-document .cmplz-dropdown .cookies-per-purpose .retention-header,
  #cmplz-document.cmplz-document .cmplz-dropdown .cookies-per-purpose .function-header{
    background-color:transparent; padding:0 0 4px;
  }
}
/* Sotto i 600 il plugin colora a righe alterne con nth-child(12n+…):
   serviva alle celle della tabella, e senza tabella stona. Le due
   colonne di testo si accavallavano a meta larghezza: qui vanno in fila. */
@media only screen and (max-width:600px){
  #cmplz-document.cmplz-document .cmplz-dropdown{ --cookie-gutter:16px; }
  #cmplz-document.cmplz-document .cmplz-dropdown .cmplz-service-description,
  #cmplz-document.cmplz-document .cmplz-dropdown .cmplz-sharing-data{
    display:block; width:100%; margin-right:0; padding-bottom:0;
  }
  #cmplz-document.cmplz-document .cmplz-dropdown .cookies-per-purpose{
    grid-template-columns:minmax(0, 92px) minmax(0, 1fr);
  }
  #cmplz-document.cmplz-document .cmplz-dropdown .cookies-per-purpose div{
    background-color:transparent;
  }
}



/* ----------------------------------------------------------
   GESTIONE DEL CONSENSO DENTRO LA PAGINA
   Il contenitore lo riempie il JavaScript di Complianz.
   ---------------------------------------------------------- */
#cmplz-document .cmplz-manage-consent-container:not(:empty){
  margin:1.6em 0 1.8em;
  padding:20px 22px;
  border:0;
  background:rgba(4,3,1,.045);
}

/* --- Tabelle vere, nei documenti piu vecchi --- */
#cmplz-document table{ width:100%; border-collapse:collapse; margin:1.5em 0; }
#cmplz-document th,
#cmplz-document td{
  border:1px solid var(--n300);
  padding:10px 12px; text-align:left;
  font-size:var(--fs-xs);
}
#cmplz-document th{ font-weight:700; background:rgba(4,3,1,.03); }