/* ==========================================================================
   GARD — foglio di stile condiviso v2 (settembre 2026)
   Allinea tutte le pagine interne all'identita' della homepage.

   Va incluso DOPO il <style> inline della pagina: ridefinisce le variabili
   :root gia' usate dalle pagine v1, quindi ricolora tutto senza riscrivere
   il markup. Gli override successivi sistemano tipografia e "chrome"
   (barra, header, footer, banner cookie, bottoni).

   La homepage NON usa questo file: ha la stessa palette inline perche' e'
   la pagina critica per il tempo di caricamento. Se cambi un colore qui,
   cambialo anche in index.html.
   ========================================================================== */

:root{
  /* palette v2 */
  --gard-petrol:#0F4C5C;
  --gard-petrol-d:#0B3A47;
  --gard-action:#087F3D;
  --gard-action-hover:#066632;
  --gard-text:#163D4A;
  --gard-muted:#50636B;
  --gard-surface:#F5F9F8;
  --gard-border:#DDE7E7;
  --gard-field-border:#6E8288;
  --gard-family-bg:#EEF6EF;
  --gard-professional-bg:#EAF4F8;
  --gard-technology-bg:#FFF8E8;
  --gard-container:1240px;

  /* rimappatura delle variabili v1 -> palette v2
     (i nomi restano quelli vecchi: cosi' il CSS gia' scritto nelle pagine
     continua a funzionare, ma con i colori nuovi) */
  --paper:#FFFFFF;
  --paper-2:#F5F9F8;
  --card:#FFFFFF;
  --ink:#163D4A;
  --muted:#50636B;
  --line:#DDE7E7;
  --pine:#0F4C5C;
  --pine-d:#0B3A47;
  --pine-soft:#EAF4F8;
  --amber:#087F3D;
  --amber-d:#066632;
  --blu:#0F4C5C;
  --blue:#0F4C5C;
  --blue-d:#0B3A47;
  --r:16px;
  --r-lg:24px;
  --shadow:0 8px 28px rgba(15,76,92,.08);
}

/* ── tipografia: niente corsivo calligrafico nei testi funzionali ────── */
body{font-family:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;color:var(--gard-text)}
/* elenco completo dei selettori che nelle pagine v1 usavano 'Fraunces':
   il font non viene piu' scaricato, quindi vanno tutti riportati a Manrope,
   altrimenti cadono nel serif di sistema. */
h1,h2,h3,h4,h5,h6,
.serif,.brand,.brand .nm,.brand span,
.row h3,.pcard h3,.gcard h3,.caa h2,.t,
.code,.price,.panel h2,.shero h1,.strip h4,.vendita h2,
.cta-box h3,article h2,article h3,
#recSuccess h2,#recSuccess h3,
#soro-blog h1,#soro-blog h2,#soro-blog h3{
  font-family:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif !important;
  font-weight:800 !important;
  font-style:normal !important;
  letter-spacing:-.01em;
}
/* niente corsivo nelle parole evidenziate dei titoli */
h1 em,h2 em,h3 em,.shero h1 em,.vendita h2 em{font-style:normal !important}
h1,h2,h3{color:var(--gard-petrol)}
em{font-style:normal;color:var(--gard-petrol)}

/* ── SUPERFICI SCURE ────────────────────────────────────────────────
   Regola d'oro di questo foglio: le regole generiche qui sopra
   (titoli petrolio, paragrafi scuri, link petrolio) NON devono entrare
   dentro i blocchi con fondo scuro, altrimenti producono testo scuro su
   scuro. Ogni contenitore scuro va elencato qui.                      */
.cta-box,footer,.foot,#cb,.caa{--dark:1}
.cta-box h1,.cta-box h2,.cta-box h3,.cta-box h4,
footer h1,footer h2,footer h3,footer h4,
.foot h1,.foot h2,.foot h3,.foot h4,
#cb h1,#cb h2,#cb h3,
.caa h1,.caa h2,.caa h3{color:inherit !important}
.cta-box p,.cta-box li,.cta-box span,.cta-box div{color:#C9DADF !important}
.cta-box a{color:#EAF2F4 !important}
.cta-box .wa{background:var(--gard-action) !important;color:#fff !important}
.cta-box .wa:hover{background:var(--gard-action-hover) !important;color:#fff !important}
.cta-box .mail{border-color:rgba(255,255,255,.5) !important;color:#EAF2F4 !important}

/* ── barra superiore istituzionale (aggiunta via markup) ────────────── */
.ubar{background:var(--gard-petrol);color:#EAF2F4;font-size:13.5px}
.ubar .in{max-width:var(--gard-container);margin:0 auto;padding:9px 28px;display:flex;align-items:center;gap:18px;justify-content:space-between}
.ubar a{font-weight:700;padding:10px 6px;white-space:nowrap;color:#EAF2F4}
.ubar a:hover{text-decoration:underline}
.ubar .links{display:flex;gap:20px}
@media(max-width:700px){.ubar .tag{font-size:12px}.ubar .links{display:none}}

/* ── header: da trasparente/crema a bianco con filo ──────────────────
   NB: si mantiene il posizionamento originale (fixed) delle pagine v1,
   perche' ogni pagina ha gia' un padding superiore calcolato per
   compensarlo. Cambiarlo in sticky lascerebbe un vuoto in cima.        */
/* le pagine usano quattro marcature diverse per la stessa barra:
   .topbar (negozio, schede, blog) · .bar (privacy, cookie, termini)
   body > nav (le due guide) · header.nav (recesso) */
.topbar,.bar,body > nav,header.nav{
  background:#fff !important;
  backdrop-filter:none !important;
  border-bottom:1px solid var(--gard-border);
  box-shadow:none !important;
}
.topbar.scrolled{background:#fff !important;box-shadow:none !important}
/* il logo e' un JPEG con fondo bianco: su barra bianca sparisce il riquadro */
header.nav .logo img,body > nav .brand img{
  height:56px !important;width:auto !important;
  border:0 !important;background:none !important;padding:0 !important;border-radius:0 !important;
}
header.nav a{color:var(--gard-petrol) !important}
.topbar .in,.bar .in{max-width:var(--gard-container);margin:0 auto;padding:10px 28px}
.brand img{
  height:56px !important;
  width:auto !important;
  border-radius:0 !important;
  border:0 !important;
  background:none !important;
  padding:0 !important;
}
.brand .nm,.brand .sub,.brand small{display:none !important}
.nav a,.navlinks a{font-size:15px;font-weight:700;color:var(--gard-text);border-radius:8px}
.nav a:hover,.navlinks a:hover{background:var(--gard-surface);color:var(--gard-petrol)}
.back{color:var(--gard-petrol);font-weight:700;border-radius:10px;min-height:44px;display:inline-flex;align-items:center}
.back:hover{background:var(--gard-surface)}

/* ── bottoni: stessa grammatica della homepage ──────────────────────── */
.btn,.add,.pill{
  border-radius:10px !important;
  font-weight:700;
}
.btn{min-height:48px;padding:12px 26px;font-size:15.5px}
.btn-pine,.btn-ink{background:var(--gard-petrol) !important;color:#fff !important;border-color:var(--gard-petrol) !important}
.btn-pine:hover,.btn-ink:hover{background:var(--gard-petrol-d) !important}
.btn-amber{background:var(--gard-action) !important;color:#fff !important}
.btn-amber:hover{background:var(--gard-action-hover) !important;color:#fff !important}
.btn-line{background:#fff !important;color:var(--gard-petrol) !important;border:1.5px solid var(--gard-petrol) !important}
.btn-line:hover{background:var(--gard-petrol) !important;color:#fff !important}
.add{background:var(--gard-action) !important;color:#fff !important;min-height:48px}
.add:hover{background:var(--gard-action-hover) !important}
/* contatore carrello: badge bianco sul bottone petrolio (prima era
   testo scuro su verde, 2.3:1) */
.cartbtn{background:var(--gard-petrol) !important}
.cartbtn:hover{background:var(--gard-petrol-d) !important}
.cartbtn .ct{background:#fff !important;color:var(--gard-petrol) !important;font-weight:800}

/* ── filtri del negozio ─────────────────────────────────────────────── */
.pills{background:#fff !important;border-bottom:1px solid var(--gard-border)}
.pill{border:1.5px solid var(--gard-border) !important;background:#fff !important;color:var(--gard-text) !important;min-height:44px}
.pill.on{background:var(--gard-petrol) !important;color:#fff !important;border-color:var(--gard-petrol) !important}

/* ── card e superfici ───────────────────────────────────────────────── */
.pcard,.gcard,.card,.box{border-radius:var(--r);border-color:var(--gard-border)}
.pcard .im{background:var(--gard-surface)}
.brandrow{background:var(--gard-surface);border:1px solid var(--gard-border);border-radius:10px;color:var(--gard-muted)}
.crumbs{color:var(--gard-muted)}
.crumbs a{color:var(--gard-petrol);font-weight:700}

/* ── contenuti editoriali (pagine legali e guide) ───────────────────── */
.wrap p,.wrap li,.doc p,.doc li{color:#3A4C55}
.wrap a,.doc a{color:var(--gard-petrol);font-weight:700}
table{border-color:var(--gard-border)}
th{background:var(--gard-surface);color:var(--gard-petrol)}
td,th{border-color:var(--gard-border)}

/* ── footer petrolio, come in homepage ──────────────────────────────── */
footer,.foot{background:var(--gard-petrol) !important;color:#C9DADF !important}
/* !important necessario: molte pagine hanno il footer dentro un .wrap,
   e la regola .wrap a e' piu' specifica di footer a */
footer a,.foot a{color:#C9DADF !important}
footer a:hover,.foot a:hover{color:#fff !important;text-decoration:underline}
footer h5,footer .fh{color:#fff !important;font-size:12px;text-transform:uppercase;letter-spacing:.16em}
footer .fb .serif,footer .serif{color:#fff !important}
footer .col a{padding:10px 0}
footer .legal,.foot .links{border-top:1px solid rgba(255,255,255,.15);color:#A9C4CB}
footer .legal a,.foot .links a{color:#C9DADF;text-decoration:underline}
/* stesso motivo del banner: testo scuro ereditato dalle regole di pagina */
footer p,footer li,footer span,footer div,
.foot p,.foot li,.foot span,.foot div{color:#C9DADF !important}
footer .fh,footer h5,footer .serif,.foot .fh{color:#fff !important}

/* ── banner cookie, uguale ovunque ──────────────────────────────────── */
#cb{background:var(--gard-petrol-d) !important;color:#fff !important;border-radius:16px}
/* alcune pagine hanno una regola p{color:...} che vincerebbe sull'ereditarieta'
   e renderebbe il testo scuro su fondo scuro: va forzato sui figli */
#cb p,#cb a,#cb span,#cb li,#cb div{color:#fff !important}
#cb button{min-height:48px;border-radius:999px}
#cb .ok{background:var(--gard-action) !important;color:#fff !important}
#cb .no{background:transparent !important;color:#fff !important;border:1px solid rgba(255,255,255,.5) !important}

/* ── accessibilita' ─────────────────────────────────────────────────── */
:focus-visible{outline:3px solid var(--gard-petrol);outline-offset:2px;border-radius:4px}
.ubar a:focus-visible,footer a:focus-visible,.foot a:focus-visible,#cb button:focus-visible{outline-color:#fff}
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--gard-petrol);color:#fff;padding:12px 20px;border-radius:0 0 10px 0;font-weight:700}
.skip:focus{left:0}
input,select,textarea{border-color:var(--gard-field-border)}
input,select,textarea{font-size:16px}

@media (prefers-reduced-motion:reduce){
  *{transition-duration:.01ms !important;animation-duration:.01ms !important}
}