/* I documenti legali (`/privacy`, `/condizioni`, `/cookie`) come pagine autonome.
   Va caricato DOPO `sito.css`, che porta colori, caratteri, intestazione e piede.
   ⚠️⚠️ È una COPIA delle regole `.pg-doc*` che stanno in linea dentro `index.html`
   (l'applicazione le usa ancora per le altre viste): se cambia una, va cambiata l'altra.
   Il giorno in cui `index.html` non conterrà più i documenti, quelle si potranno togliere. */

.pg-doc { max-width: 740px; margin: 0 auto; padding: 48px 18px 56px; text-align: left;
  color: var(--ink); }
.pg-doc h1 { font-family: var(--serif); font-size: 32px; font-weight: 500;
  line-height: 1.2; margin: 0 0 6px; color: var(--ink); }
.pg-doc h2 { font-family: var(--serif); font-size: 21px; font-weight: 500;
  line-height: 1.3; margin: 38px 0 12px; color: var(--ink); }
.pg-doc p { font-size: 15.5px; line-height: 1.7; color: var(--muted); margin: 0 0 14px; }
.pg-doc strong { color: var(--ink); font-weight: 600; }
.pg-doc ul, .pg-doc ol { font-size: 15.5px; line-height: 1.7; color: var(--muted);
  margin: 0 0 14px; padding-left: 22px; }
.pg-doc li { margin-bottom: 7px; }
.pg-doc a { color: var(--brand); text-decoration: none; }
.pg-doc a:hover { color: var(--brand-ink); text-decoration: underline; }
.pg-doc code { font-size: 13.5px; background: #f1f4f5; border-radius: 4px; padding: 1px 5px; }
/* La data in cima: piccola, ma è la riga che dice quale versione si sta leggendo. */
.pg-doc-data { font-size: 13px !important; color: var(--faint) !important;
  margin: 0 0 30px !important; }
/* ⚠️⚠️ Le tabelle sono la parte che si rompe sul telefono: quattro colonne di testo non
   ci stanno in 360px e sfondavano la pagina di lato. Il contenitore scorre da solo, e
   a sfondare è lui, non il documento. */
.pg-doc-scorri { overflow-x: auto; margin: 0 0 18px; }
.pg-doc-tab { border-collapse: collapse; width: 100%; min-width: 460px; font-size: 14px; }
.pg-doc-tab th, .pg-doc-tab td { border: 1px solid var(--line); padding: 9px 11px;
  text-align: left; vertical-align: top; line-height: 1.55; color: var(--muted); }
.pg-doc-tab th { background: #f6f8f9; color: var(--ink); font-weight: 600; }
/* Il riquadro giallo: stesso significato che ha in `.pg-avviso` — "guarda bene questa",
   non "hai sbagliato". Qui marca i punti che il cliente si pentirebbe di aver saltato:
   il recesso perso, l'email che resta sugli ordini. */
.pg-doc-nota { background: #fff8e1; border: 1px solid #ffe082; border-radius: 10px;
  padding: 13px 15px; color: #5a4b00 !important; margin: 0 0 18px !important; }
.pg-doc-nota strong { color: #3f3400 !important; }
.pg-doc-nota a { color: #6b5a00; text-decoration: underline; }
/* La clausola citata per esteso: si stacca dal testo perché è LA frase che il cliente
   ha spuntato, e deve potersi confrontare parola per parola con quella della cassa. */
.pg-doc-cit { margin: 0 0 16px; padding: 12px 16px; border-left: 3px solid var(--brand);
  background: #f6f8f9; font-size: 15px; line-height: 1.65; color: var(--ink);
  font-style: italic; }
.pg-doc-vicini { margin-top: 40px !important; padding-top: 18px;
  border-top: 1px solid var(--line); font-size: 14px !important; }
@media (max-width: 700px) {
  .pg-doc { padding: 30px 16px 40px; }
  .pg-doc h1 { font-size: 26px; }
  .pg-doc h2 { font-size: 19px; margin-top: 30px; }
}