/* ─────────────────────────────────────────────────────────────────────────────
 * marchio.css — I COLORI DEL NETWORK, IN UN POSTO SOLO.
 *
 * NASCE IL 24/10/2026 da una cosa vista dall'utente: *«cambi pagina sempre su
 * Colpo di Sconto e cambia colore, usiamo lo standard della home su tutte le
 * pagine del marchio ed anche su tutti gli altri marchi, si deve capire che
 * siamo sempre noi»*. E poi, scegliendo: *«navy e giallo»*.
 *
 * COSA ERA PRIMA. Tre fogli di stile con tre palette: le sei pagine di
 * presentazione (navy diverso per marchio), `/offerte` (un altro navy, un
 * altro giallo, un altro rosso, più un ritocco per marchio scritto in
 * JavaScript) e le pagine d'archivio. Nessuno dei tre sbagliava da solo: messi
 * in fila raccontavano quattro siti diversi.
 *
 * ⚠ IL COLORE È ANCORA IN DUE POSTI, e non per pigrizia: il `manifest-<id>.json`
 * e il `<meta name="theme-color">` servono al sistema operativo quando la
 * pagina viene salvata come app, e un JSON non può leggere un CSS. Quelle
 * copie le tiene allineate una prova — vedi `FONDO` in `api/_pagina.js`.
 * Da qui in poi però le copie sono DUE e non otto.
 *
 * COSA NON STA QUI: le misure, gli spazi e le forme di ogni pagina. Qui ci
 * sono i colori, cioè l'unica cosa che deve essere identica ovunque perché si
 * capisca che siamo sempre noi. Le card dei post NON seguono questo file: la
 * loro palette sta in `brands.js` ed è quella del badge nazionale di ogni
 * marchio — una card tedesca non diventa blu perché il sito lo è.
 * ────────────────────────────────────────────────────────────────────────── */
:root{
  --navy:#0E1B33;
  --navy2:#091324;
  --card:#16263f;
  --line:rgba(255,255,255,.12);
  --muted:#aeb9cc;
  --gold:#E8B923;
  --red:#C8102E;
  /* Due nomi per gli stessi due colori: le pagine d'archivio e `/offerte` li
     chiamano `accent` e `badge`, le home `gold` e `red`. Gli alias evitano una
     riscrittura di trecento righe di CSS per cambiare un nome — e il valore
     resta uno solo, che è l'unica cosa che conta. */
  --accent:var(--gold);
  --badge:var(--red);
  --link:#ffd97a;
  --nav:#cfd9e8;
  --ok:#7fe0a0;
  --ko:#ff9aa2;
  --tg:#229ED9;
  --tg2:#1c7cb8;
  /* I COLORI CHE NON SONO NOSTRI: il bollino di provenienza porta la tinta
     del negozio, non la nostra, perche' serve a riconoscerlo a colpo d'occhio.
     Stanno qui lo stesso: cosi' il controllo puo' dire "nessun colore scritto
     a mano dentro una pagina" senza eccezioni da ricordare a memoria. */
  --amazon:#FF9900;
  --ebay:#3665F3;
  --prime:#00A8E1;
  --suChiaro:#111;
}
body{ background:linear-gradient(180deg,var(--navy) 0%,var(--navy2) 100%); color:#fff; min-height:100vh; }

/* ─── LA BARRA DEL NETWORK — 24/10/2026, idea dell'utente ───────────────────
 *
 * *«Farebbe molto scena far vedere in alto che siamo un network serio, magari
 * con le bandiere, dire che ci possono trovare anche lì»*. C'era già in fondo
 * a ogni pagina, dove la legge chi è arrivato in fondo: cioè quasi nessuno.
 *
 * ⚠ NIENTE BANDIERE EMOJI, ed è una misura e non un gusto: su Windows le
 * emoji bandiera non hanno un glifo e il sistema disegna le due lettere del
 * paese dentro due riquadri. Qui si usano le icone dei marchi, che la
 * bandiera ce l'hanno dentro e sono già sul nostro dominio.
 *
 * Il marchio su cui sei NON è un link: un collegamento alla pagina dove sei
 * già è rumore, e marcarlo dice dove ti trovi senza scriverlo. */
.netbar{ display:flex; align-items:center; justify-content:center; gap:6px; flex-wrap:wrap;
         font-size:11.5px; color:var(--muted); padding:2px 0 14px; margin-bottom:14px;
         border-bottom:1px solid var(--line); }
.netbar .et{ width:100%; text-align:center; margin-bottom:2px; letter-spacing:.2px; }
.netbar a, .netbar .qui{ display:inline-flex; align-items:center; gap:5px; text-decoration:none;
         color:var(--muted); border:1px solid var(--line); border-radius:999px;
         padding:3px 9px 3px 4px; background:rgba(255,255,255,.04); font-weight:700; }
.netbar a:hover{ color:#fff; }
.netbar .qui{ color:#0E1B33; background:var(--gold); border-color:var(--gold); }
.netbar img{ width:20px; height:20px; border-radius:50%; display:block; }
@media (max-width:620px){
  .netbar{ flex-wrap:nowrap; overflow-x:auto; justify-content:flex-start; -webkit-overflow-scrolling:touch; }
  .netbar a, .netbar .qui{ flex:0 0 auto; }
  .netbar .et{ width:auto; margin:0 4px 0 0; flex:0 0 auto; }
}