/* ==========================================================================
   GARD — barra e footer condivisi (settembre 2026)

   Una sola testata e un solo piede per tutto il sito. Le classi hanno il
   prefisso "g" (gbar, ghd, gnav, gfoot...) perche' nessuna pagina le usava:
   cosi' non c'e' alcun conflitto con il CSS gia' presente nelle pagine e non
   serve un solo !important.

   La homepage ha la stessa barra e lo stesso piede scritti inline, perche' e'
   la pagina critica per il caricamento: se cambi qualcosa qui, cambialo anche
   in index.html.
   ========================================================================== */

:root{
  --g-petrol:#0F4C5C;--g-petrol-d:#0B3A47;--g-action:#087F3D;--g-action-h:#066632;
  --g-text:#163D4A;--g-muted:#50636B;--g-surface:#F5F9F8;--g-border:#DDE7E7;
  --g-maxw:1240px;--g-hd-h:77px;
}

/* ── scudo ───────────────────────────────────────────────────────────
   Alcune pagine hanno regole su elementi "nudi" (nav{position:fixed...},
   footer{text-align:center...}) che colpirebbero anche la testata e il piede
   condivisi, sballandoli. Le classi qui sotto sono piu' specifiche e
   riportano i valori a quelli attesi: senza questo blocco, per esempio, le
   guide mostravano la navigazione come una barra fissa color crema.       */
.gbar nav,.gnav{
  position:static;inset:auto;z-index:auto;
  background:none;backdrop-filter:none;box-shadow:none;
  border:0;padding:0;margin:0;max-width:none;width:auto;
}
.gnav{margin-left:auto}
.gfoot{text-align:left;float:none;position:static}
/* con testata e piede la pagina deve scorrere dall'alto: il 404 centrava la
   sua scheda con flex sul body e avrebbe centrato anche loro */
body{display:block;min-height:0}
body > .card{max-width:560px;margin:64px auto}

/* ── barra istituzionale ─────────────────────────────────────────────── */
.gbar{background:var(--g-petrol);color:#EAF2F4;font-size:13.5px;font-family:'Manrope',system-ui,sans-serif}
.gbar .in{max-width:var(--g-maxw);margin:0 auto;padding:9px 28px;display:flex;align-items:center;gap:18px;justify-content:space-between}
.gbar a{color:#EAF2F4;font-weight:700;padding:10px 6px;white-space:nowrap;text-decoration:none}
.gbar a:hover{text-decoration:underline}
.gbar .lk{display:flex;gap:20px}
@media(max-width:760px){.gbar .tag{font-size:12px}.gbar .lk{display:none}}

/* ── testata ─────────────────────────────────────────────────────────── */
.ghd{position:sticky;top:0;z-index:60;background:#fff;border-bottom:1px solid var(--g-border);font-family:'Manrope',system-ui,sans-serif}
.ghd .in{max-width:var(--g-maxw);margin:0 auto;padding:10px 28px;display:flex;align-items:center;gap:18px}
.glogo{display:flex;align-items:center;flex-shrink:0;text-decoration:none}
.glogo img{height:56px;width:auto;display:block;border:0;background:none;padding:0;border-radius:0}
.gnav{display:flex;gap:2px;margin-left:auto;align-items:center}
.gnav a{font-size:15px;font-weight:700;color:var(--g-text);padding:11px 12px;border-radius:8px;text-decoration:none;min-height:44px;display:inline-flex;align-items:center}
.gnav a:hover{background:var(--g-surface);color:var(--g-petrol)}
.gnav a[aria-current="page"]{color:var(--g-petrol);background:var(--g-surface)}
.gact{display:flex;align-items:center;gap:10px;flex-shrink:0;margin-left:8px}
.gcta{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:11px 22px;border-radius:10px;background:var(--g-action);color:#fff;font-weight:700;font-size:15px;text-decoration:none;border:0;cursor:pointer;font-family:inherit}
.gcta:hover{background:var(--g-action-h);color:#fff}
.gsignin{display:inline-flex;align-items:center;gap:7px;background:#fff;border:1.5px solid var(--g-border);color:var(--g-text);padding:11px 16px;border-radius:10px;font:inherit;font-size:14.5px;font-weight:700;cursor:pointer;min-height:46px}
.gsignin:hover{border-color:var(--g-petrol)}
.gcart{display:inline-flex;align-items:center;gap:8px;background:var(--g-petrol);color:#fff;border:0;padding:11px 18px;border-radius:10px;font:inherit;font-size:14.5px;font-weight:800;cursor:pointer;min-height:46px}
.gcart:hover{background:var(--g-petrol-d)}
.gcart .n{background:#fff;color:var(--g-petrol);border-radius:999px;font-size:12px;font-weight:800;min-width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;padding:0 6px}
.gact svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
/* flex-direction:column e' obbligatorio: senza, le tre linee si mettono in fila
   e si vede una sola riga. Il passo tra le linee (2px + 2.5px*2 = 7px) deve
   coincidere con i translateY(7px) della X qui sotto. */
.gburger{display:none;margin-left:auto;background:none;border:1.5px solid var(--g-border);cursor:pointer;width:48px;height:48px;border-radius:10px;flex-direction:column;align-items:center;justify-content:center;flex-shrink:0}
.gburger span{display:block;width:22px;height:2px;background:var(--g-petrol);margin:2.5px auto;transition:.2s}
.gburger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.gburger[aria-expanded="true"] span:nth-child(2){opacity:0}
.gburger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media(max-width:1100px){
  html.js .gnav{display:none;position:absolute;top:100%;left:16px;right:16px;background:#fff;border:1px solid var(--g-border);border-radius:16px;padding:12px;flex-direction:column;align-items:stretch;box-shadow:0 8px 28px rgba(15,76,92,.12)}
  html.js .gnav.open{display:flex}
  .gnav a{padding:14px 16px}
  html.js .gburger{display:flex}
  html:not(.js) .ghd .in{flex-wrap:wrap}
  html:not(.js) .gnav{flex-wrap:wrap;margin-left:0;width:100%}
  .gact{margin-left:auto}
  .gburger{margin-left:0}
}
@media(max-width:620px){
  .glogo img{height:46px}
  .gsignin{display:none}
  .gcta{padding:10px 16px;font-size:14px}
  /* col logo piu' piccolo la testata scende a 69px: senza aggiornare questa
     misura la barra filtri del negozio si incollava a 77px e restava una
     fessura di 8px da cui si vedeva scorrere il contenuto sotto.
     La variabile va dichiarata DENTRO una regola, non sciolta qui. */
  :root{--g-hd-h:69px}
}

/* ── piede ───────────────────────────────────────────────────────────── */
.gfoot{background:var(--g-petrol);color:#C9DADF;padding:56px 0 28px;margin-top:70px;font-family:'Manrope',system-ui,sans-serif;font-size:14.5px;line-height:1.6}
/* display:block e' contro le pagine vecchie che hanno "footer .in{display:flex}"
   per il LORO piede: quella regola prendeva anche questo, e la riga legale
   finiva accorciata e disallineata invece di stare sotto le colonne. */
.gfoot .in{max-width:var(--g-maxw);margin:0 auto;padding:0 28px;display:block}
.gfoot .cols{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:36px}
.gfoot .lg{background:#fff;border-radius:12px;padding:10px 14px;display:inline-block}
.gfoot .lg img{height:48px;width:auto;display:block}
.gfoot p{font-size:14px;margin-top:14px;max-width:300px;color:#A7C2C9}
/* Gli !important servono contro gard-v2.css, che per le SUPERFICI SCURE fa
   "footer h2{color:inherit!important}" e le pagine legali che fanno
   "h2{margin-top:28px}": senza questi, i titoli delle colonne perdevano il
   bianco (restavano dello stesso grigio dei link) e scendevano rispetto al logo. */
.gfoot h2{color:#fff !important;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.16em;margin:0 0 14px !important;font-family:inherit;border:0;padding:0}
.gfoot .col a{display:block;font-size:14.5px;padding:10px 0;color:#C9DADF;text-decoration:none}
.gfoot .col a:hover{color:#fff;text-decoration:underline}
.gfoot .legal{border-top:1px solid rgba(255,255,255,.15);margin-top:40px;padding-top:22px;font-size:12.5px;color:#A9C4CB;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.gfoot .legal a{color:#C9DADF;text-decoration:underline}
.gfoot .legal a:hover{color:#fff}
@media(max-width:860px){.gfoot .cols{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.gfoot .cols{grid-template-columns:1fr;gap:24px}}

/* ── accessibilita' ──────────────────────────────────────────────────── */
.gskip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--g-petrol);color:#fff;padding:12px 20px;border-radius:0 0 10px 0;font-weight:700;text-decoration:none}
.gskip:focus{left:0}
.gbar a:focus-visible,.gfoot a:focus-visible{outline:3px solid #fff;outline-offset:2px;border-radius:4px}

/* ── compensazioni: le pagine avevano un padding alto per lasciare spazio
   alla vecchia testata FISSA. La nuova e' sticky, quindi sta nel flusso e
   quel padding diventerebbe un buco bianco in cima.
   Escluse dalla homepage ([data-gard-v2]), che non ha mai avuto una testata
   fissa e usa spaziature sue.                                              */
body:not([data-gard-v2]) > .wrap{padding-top:40px}   /* privacy, cookie, termini, recesso */
body:not([data-gard-v2]) main.wrap{padding-top:28px} /* schede prodotto */
body:not([data-gard-v2]) .shero{padding-top:40px}    /* negozio */
body:not([data-gard-v2]) .hero{padding-top:34px}     /* guide */
.pills{top:var(--g-hd-h)}                            /* i filtri si incollano sotto la testata */

/* Il pulsante WhatsApp e la fascia cookie stanno tutti e due in basso a 18px:
   su telefono la fascia e' alta ~157px e copriva il pulsante per intero.
   La home e il blog avevano gia' questa regola scritta dentro; qui vale per
   tutte le altre 19 pagine. La classe cbon e la misura --cb-h le mette lo
   script del banner, presente ora su ogni pagina. */
@media(max-width:700px){
  html.cbon .wa-fab{bottom:calc(30px + var(--cb-h,150px))}
}