/* IT: brand header+footer in verde uniforme (con prefissi webkit) */
/* IT: footer wordmark – uniforma spessore al resto del sito */
/* IT: brand header+footer – unico blocco coerente */
html[lang="it"] .brand-word,
html[lang="it"] .footer-brand .wordmark{
  background: linear-gradient(180deg,#66e19d 0%,#25d366 60%,#1aa34a 100%) !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  -webkit-text-fill-color: transparent !important; color: transparent !important;
  font-weight:700 !important;
  font-variation-settings:"wght" 700 !important;
  letter-spacing:.02em !important;
  text-shadow:none !important; filter:none !important;
}

/* R24e-resp: wrap language switch on very small screens */
@media (max-width: 400px){
  .topbar .lang-switch,
  header .lang-switch,
  header [class*="lang-switch"]{
    flex-wrap: wrap;
    row-gap: .25rem;
  }
  .lang-switch .pill{
    min-width: auto;
    padding: 0 .45rem;
  }
}

/* R24e-resp: evita overflow del payoff nel footer su 360px */
@media (max-width: 400px){
  .foot-tagline{ white-space: normal; }
}

/* R24e-stack-it: header mobile in colonna (logo → lingue → social), centrato */
@media (max-width: 400px){
  header .topbar,
  header .vx-header{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    text-align: center;
  }
  /* garantisce wrap lingue e centratura (già aggiunto, qui ribadiamo) */
  header .lang-switch{ flex-wrap: wrap; justify-content: center; row-gap: .25rem; }
  /* allinea eventuali blocchi social */
  header .social, header .socials, header [class*="social-"]{
    display: flex; gap: .5rem; justify-content: center; flex-wrap: wrap;
  }
}

/* R24e-nowrap-fix-it: consenti a lingua/social di andare a capo e centrarsi */
@media (max-width: 400px){
  header .top-lang,
  header [class*="lang-switch"],
  header [class*="lang-bar"]{
    white-space: normal !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    row-gap: .25rem;
  }
  /* social centrati e a capo se serve */
  header .top-social,
  header .social, header .socials, header [class*="social-"]{
    display:flex; justify-content:center; flex-wrap:wrap; gap:.5rem;
  }
}

/* R24e-stack-it-2: .topbar non è dentro <header> → forziamo lo stack e la centratura */
@media (max-width: 400px){
  .topbar{
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    gap:.5rem !important;
    text-align:center !important;
  }
  .topbar .brand{ display:flex; align-items:center; gap:.5rem; justify-content:center; }
  .topbar .top-lang,
  .topbar [class*="lang-switch"],
  .topbar [class*="lang-bar"]{
    white-space:normal !important; flex-wrap:wrap !important;
    justify-content:center !important; row-gap:.25rem;
  }
  .topbar .top-social,
  .topbar .social, .topbar .socials, .topbar [class*="social-"]{
    display:flex; justify-content:center; flex-wrap:wrap; gap:.5rem;
  }
}

/* R24e-nav-it: nav mobile — stack <=400px, una riga 401–640px */
@media (max-width: 400px){
  .nav-link.navbar .nav-link.container{
    display:flex; flex-direction:column; align-items:center; gap:.6rem;
    text-align:center;
  }
  .nav-link.navbar .nav-link.nav-toggle{ order:0; align-self:center; }
  .nav-link.navbar .nav-link.search{ order:1; width:100%; max-width:520px; }
  .nav-link.navbar .nav-link.search input{ width:100%; display:block; }
  .nav-link.navbar .nav-link.menu{ order:2; } /* il JS gestisce show/hide */
}

@media (min-width:401px) and (max-width:640px){
  .nav-link.navbar .nav-link.container{
    display:flex; flex-direction:row; align-items:center; gap:.6rem;
  }
  .nav-link.navbar .nav-link.nav-toggle{ flex:0 0 auto; }
  .nav-link.navbar .nav-link.search{ flex:1 1 auto; min-width:0; }
  .nav-link.navbar .nav-link.search input{ width:100%; display:block; }
}

/* R24e-footgrid-it: centrature + link in 2 colonne (IT) */
@media (max-width: 640px){
  /* brand e payoff al centro */
  .site-footer .footer-brand{
    display:flex; align-items:center; justify-content:center; gap:.5rem; margin:0 auto;
    text-align:center;
  }
  .site-footer .foot-tagline{ text-align:center; white-space:normal; }

  /* social centrati e wrappati */
  .site-footer .footer-social{ display:flex; justify-content:center; flex-wrap:wrap; gap:.5rem; }

  /* NAV link testuali: 2 colonne (esclude social e lang-switch) */
  .site-footer nav:not(.footer-social):not(.lang-switch){
    display:grid; grid-template-columns:1fr 1fr; column-gap:1rem; row-gap:.4rem;
    justify-items:center; text-align:center;
  }
  .site-footer nav:not(.footer-social):not(.lang-switch) a{
    display:block; font-weight:600;
  }
}

/* R24e-footgrid-it-v2: 2 colonne affiancate (sx=primaria, dx=legale) */
@media (max-width:640px){
  /* annulla la vecchia griglia centrata dei nav testuali */
  .site-footer .footer-nav{ display:block !important; text-align:left; }
  .site-footer .footer-nav a{ display:block; }

  /* i due blocchi diventano 2 colonne al 48% */
  .site-footer .footer-nav.links-primary,
  .site-footer .footer-nav.links-legal{
    display:inline-block; width:48%; vertical-align:top; margin:.25rem 0;
  }
  .site-footer .footer-nav.links-primary{ text-align:left;  }  /* sx */
  .site-footer .footer-nav.links-legal  { text-align:right; }  /* dx */
}

/* R24e-footgrid-it-v3: social centrati + 2 colonne 3+3, blocco centrato */
@media (max-width:640px){
  /* disattiva la griglia del container e centra i figli */
  .site-footer .cols{ display:block !important; text-align:center; }

  /* social davvero centrati anche se il grid li spostava */
  .site-footer nav.footer-social{ justify-self:center !important; }
  .site-footer .footer-social{ display:flex; justify-content:center !important; flex-wrap:wrap; gap:.5rem; }

  /* link: due colonne inline-block, blocco complessivo centrato */
  .site-footer .footer-nav.links-primary,
  .site-footer .footer-nav.links-legal{
    display:inline-block; width:46%; vertical-align:top; margin:.25rem 0;
    text-align:left; /* colonna sx/destra con testi a bandiera sx */
  }
}

/* R24e-footgrid-it-v4: 2 colonne affiancate 3+3, blocco centrato (IT) */
@media (max-width:640px){
  /* il contenitore del footer non fa più grid: centriamo i figli */
  .site-footer .cols{ display:block !important; text-align:center; }

  /* social invariati e centrati */
  .site-footer .footer-social{
    display:flex; justify-content:center !important; flex-wrap:wrap; gap:.5rem;
  }

  /* NAV: due colonne affiancate, ciascuna 46% (3 link per colonna) */
  .site-footer .footer-nav.links-primary,
  .site-footer .footer-nav.links-legal{
    display:inline-block !important;   /* <-- vince su regole precedenti */
    width:46%;
    vertical-align:top;
    margin:.25rem 0;
    text-align:left;                   /* colonna di sinistra */
  }
  .site-footer .footer-nav.links-legal{ text-align:right; } /* colonna destra */
}

/* R24e-footgap-it: stessa distanza sotto brand e social (IT) */
@media (max-width:640px){
  .site-footer{ --it-foot-gap: 14px; }                /* <— regola unica */
  .site-footer .footer-brand{ margin-bottom: var(--it-foot-gap); }
  .site-footer .footer-social{ margin-bottom: var(--it-foot-gap); }
}
/* Footer strip: lingue sopra, copy sotto, centrati */
.foot-copy .inner{display:flex;flex-direction:column;align-items:center;gap:.75rem;text-align:center}
.lang-switch{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center}

/* R22 — Footer bottom: centratura coerente su tutte le pagine IT */
.site-footer .foot-copy .inner{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.75rem;
  text-align:center;
}
.site-footer .foot-copy .lang-switch{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:.5rem;
}
.site-footer .foot-copy .copy{ margin:0 auto; }
/* === FINAL HEADER LOGO OVERRIDE (mirror) === */
.topbar a.brand img.brand-logo.shield,
.topbar a.brand .brand-logo.shield{
  width:82px !important;
  height:82px !important;
  max-width:none !important;
  border-radius:12px;
  box-shadow:0 0 0 3px rgba(34,197,94,.40), 0 12px 24px rgba(0,0,0,.16) !important;
  filter:none !important;
}
@media (max-width:1024px){ .topbar a.brand img.brand-logo.shield,
  .topbar a.brand .brand-logo.shield{ width:68px !important; height:68px !important; } }
@media (max-width:640px){ .topbar a.brand img.brand-logo.shield,
  .topbar a.brand .brand-logo.shield{ width:56px !important; height:56px !important; } }
/* === Vero INCI — FINAL HEADER COMPACT (ITA) === */
.site-header .topbar a.brand img.brand-logo.shield{
  width:46px !important; height:46px !important;
  background:none !important; border:0 !important; padding:0 !important; filter:none !important;
  box-shadow:0 0 0 2px rgba(34,197,94,.30), 0 8px 18px rgba(0,0,0,.14) !important; /* ring + ombra */
}
@media (max-width:1024px){
  .site-header .topbar a.brand img.brand-logo.shield{ width:42px !important; height:42px !important; }
}
@media (max-width:640px){
  .site-header .topbar a.brand img.brand-logo.shield{ width:36px !important; height:36px !important; }
}

/* Wordmark più grande */
.site-header .topbar .brand-word{
  font-size: clamp(1.55rem, 1.1rem + 1.2vw, 2.10rem) !important;
  font-weight:900; letter-spacing:.005em; line-height:1.05; white-space:nowrap;
}
/* Avvicina scudo e testo */
.site-header .topbar a.brand{ gap:.45rem !important; }
/* === Vero INCI — HEADER RESPONSIVE (logo + wordmark) === */
.site-header .topbar a.brand{ gap:.50rem !important; }

.site-header .topbar a.brand img.brand-logo.shield{
  /* ~56px desktop → ~44px mobile */
  width: clamp(44px, 38px + 1.2vw, 56px) !important;
  height: auto !important;
  border-radius: 12px;
  background: none !important; border: 0 !important; filter: none !important;
  box-shadow: 0 0 0 2px rgba(34,197,94,.30), 0 8px 18px rgba(0,0,0,.14) !important;
}

.site-header .topbar .brand-word{
  /* massimo 1.80rem, scala giù su tablet/mobile */
  font-size: clamp(1.45rem, 1.10rem + 0.9vw, 1.80rem) !important;
  font-weight: 900; line-height: 1.05; letter-spacing: .005em; white-space: nowrap;
}

@media (max-width:1024px){
  .site-header .topbar a.brand{ gap:.45rem !important; }
}
@media (max-width:640px){
  .site-header .topbar a.brand{ gap:.40rem !important; }
}