/* Intestazione comune del sito (menù, profilo, zaino, lingue) per le pagine
   che hanno uno stile proprio (statuto, privacy, cookie). Tutto è limitato a
   header.site per non toccare il resto della pagina.
   Generato da assets/css/sito-shell.css il 07/10/2026: se cambi il menù lì, allinea anche qui. */
header.site{
  --paper:   #fbf2d4;       /* crema raggi (luce conchiglia) */
  --paper-2: #f5e4a8;       /* giallo caldo (raggi del sole) */
  --paper-3: #f0d98a;       /* giallo profondo */
  --ink:     #2b2620;       /* inchiostro caldo */
  --ink-soft:#4a3f33;
  --muted:   #7a6e5c;
  --rule:    #d9c285;       /* riga su crema, dal giallo logo */
  --terra:   #b84a2b;       /* terracotta — onde di terra */
  --terra-d: #b04020;       /* rosso pellegrino — hover */
  --terra-l: #e07040;       /* arancio caldo — punti focali */
  --sea:     #3080c0;       /* petalo blu medio */
  --sea-d:   #005090;       /* petalo blu profondo (sezioni dark) */
  --gold:    #e5c057;       /* oro sole */
  --gold-l:  #f5e4a8;       /* oro chiaro */
  --north:   #5f7d3a;       /* verde Postumia — pianura e colli del Settentrione */
  --north-d: #4c6630;       /* verde profondo */
  --shadow:  0 12px 32px rgba(43,38,32,.10);

  --display: 'Cormorant Garamond', Georgia, serif;
  --sans:    'Manrope', ui-sans-serif, system-ui, sans-serif;
  font-family:var(--sans); color:var(--ink); line-height:1.5; font-size:15px;
}
header.site *{box-sizing:border-box}
header.site a{color:inherit; text-decoration:none; border-bottom:0}
header.site button{font:inherit; cursor:pointer}
header.site img{max-width:100%; display:block}
header.site hr{border:0; height:1px; background:var(--rule); margin:0}
header.site .wrap{max-width:1320px; margin:0 auto; padding:0 48px}
@media (max-width:720px){
  header.site .wrap{padding-left:max(30px, env(safe-area-inset-left)); padding-right:max(30px, env(safe-area-inset-right))}
}
@media (max-width:380px){ header.site .wrap{padding:0 14px} }

header.site{
  position:sticky; top:0; z-index:50;
  background:color-mix(in oklab, var(--paper) 92%, transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid color-mix(in oklab, var(--rule) 70%, transparent);
}
header.site .nav{
  display:grid; grid-template-columns:auto 1fr auto;
  align-items:center; gap:20px;
  padding-top:14px; padding-bottom:14px;
}
header.site .brand{display:flex; align-items:center; gap:12px; cursor:pointer}
header.site .brand img{width:36px; height:36px; flex-shrink:0; object-fit:contain}
header.site .brand .word{
  font-family:var(--display); font-size:19px; font-weight:500;
  line-height:1.05; letter-spacing:.005em;
}
header.site .brand .word em{font-style:italic; color:var(--terra); font-weight:500}
header.site .brand .word small{
  display:block; font-family:var(--sans);
  font-size:9.5px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--muted); font-weight:500; margin-top:2px;
}
header.site .nav__links{
  display:flex; flex-wrap:nowrap; gap:13px; justify-content:center;
  font-size:10.5px; letter-spacing:.07em; text-transform:uppercase;
  color:var(--ink-soft); font-weight:600;
}
header.site .nav__links a{transition:color .15s; cursor:pointer; white-space:nowrap}
header.site .nav__links a:hover{color:var(--ink)}
header.site .nav__right{display:flex; align-items:center; gap:10px}
header.site .lang{
  display:inline-flex; gap:6px;
  font-size:11.5px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-soft); font-weight:500;
}
header.site .lang button{
  background:none; border:0; padding:4px 2px;
  color:var(--ink-soft); border-bottom:1px solid transparent;
}
header.site .lang button.on{color:var(--ink); border-bottom-color:var(--terra)}
header.site .cart-btn{
  position:relative;
  background:none; border:1px solid var(--rule); padding:8px 14px;
  border-radius:999px; font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink); font-weight:600;
}
header.site .cart-btn .count{
  position:absolute; top:-6px; right:-6px;
  background:var(--terra); color:var(--paper); border-radius:999px;
  width:18px; height:18px; font-size:10px; display:grid; place-items:center; font-weight:700;
  letter-spacing:0;
}

header.site .nav-account{
  background:none; border:0; cursor:pointer; text-decoration:none;
  font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-soft); font-weight:600;
  padding:8px 10px; transition:color .15s;
  font-family:inherit; display:inline-flex; align-items:center;
}
header.site .nav-account:hover{color:var(--terra)}
header.site .nav-account.is-loggato{
  background:var(--terra); color:var(--paper);
  border-radius:999px; padding:6px 12px;
  letter-spacing:.1em; font-size:10.5px;
  white-space:nowrap;
}
header.site .nav-account.is-loggato:hover{color:var(--paper); filter:brightness(1.08)}
header.site .nav-account.is-loggato::after{content:" ▾"; font-size:9px; opacity:.7; margin-left:2px}
header.site .nav-account-wrap{position:relative}
header.site .nav-menu{
  position:absolute; top:calc(100% + 6px); right:0;
  background:var(--paper); border:1px solid var(--rule);
  box-shadow:var(--shadow); padding:5px 0; min-width:220px;
  display:none; z-index:200;
}
header.site .nav-account-wrap.is-open .nav-menu{display:block}
header.site .nav-menu a{
  display:block; padding:10px 18px;
  font-size:12.5px; letter-spacing:.06em; text-transform:none;
  color:var(--ink); text-decoration:none;
  cursor:pointer; transition:background .15s, color .15s;
  white-space:nowrap;
}
header.site .nav-menu a[hidden]{display:none}
header.site .nav-menu a:hover{background:var(--paper-2); color:var(--terra)}
header.site .nav-menu a.terra{color:var(--terra)}
header.site .nav-menu a.terra:hover{background:var(--terra); color:var(--paper)}
header.site .nav-menu hr{border:0; border-top:1px solid var(--rule); margin:4px 0}

header.site .nav-toggle{display:none; background:none; border:1px solid var(--rule); padding:8px 12px; border-radius:6px; line-height:1; font-size:16px}
@media (max-width:1320px){
  header.site .nav__links{
    display:none;
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; gap:0; padding:14px 22px 22px;
    font-size:12px; letter-spacing:.1em;
    background:var(--paper); border-bottom:1px solid var(--rule);
    max-height:80vh;
    max-height:calc(100vh - 60px);
    max-height:calc(100dvh - 60px);
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
    overflow-anchor:none;
    touch-action:pan-y;
    box-shadow:0 12px 24px rgba(43,38,32,.12);
  }
  header.site .nav__links.open{display:flex}
  header.site .nav__links a{padding:12px 0; border-bottom:1px solid var(--rule)}
  header.site .nav-toggle{display:inline-flex}
}

  header.site .meta__value{font-size:24px}
}


header.site .langsel{position:relative; display:inline-block}
header.site .langsel__btn{
  display:inline-flex; align-items:center; gap:6px;
  background:none; border:0;
  padding:8px 8px; font:inherit; cursor:pointer;
  font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-soft); font-weight:600; line-height:1;
  transition:color .15s;
}
header.site .langsel__btn:hover{color:var(--terra)}
header.site .langsel__btn:focus-visible{outline:2px solid var(--terra); outline-offset:2px}
header.site .langsel__car{font-size:9px; transition:transform .2s}
header.site .langsel.is-open .langsel__car{transform:rotate(180deg)}
header.site .langsel__menu{
  position:absolute; top:calc(100% + 8px); right:0; z-index:60;
  min-width:168px; padding:6px;
  background:var(--paper); border:1px solid var(--rule); border-radius:10px;
  box-shadow:0 14px 36px rgba(43,38,32,.16);
  opacity:0; visibility:hidden; transform:translateY(-8px);
  transition:opacity .18s ease, transform .18s ease, visibility .18s;
  display:flex; flex-direction:column; gap:2px;
}
header.site .langsel.is-open .langsel__menu{opacity:1; visibility:visible; transform:translateY(0)}
header.site .langsel__menu a{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; border-radius:7px;
  font-family:var(--sans); font-size:13.5px; letter-spacing:.01em; text-transform:none;
  color:var(--ink-soft); font-weight:500; white-space:nowrap;
}
header.site .langsel__menu a:hover{background:var(--paper-2); color:var(--ink)}
header.site .langsel__menu a .code{
  margin-left:auto; font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted); font-weight:600;
}
@media (max-width:720px){
  header.site .langsel__btn{padding:6px 6px; font-size:10px; letter-spacing:.14em}
  header.site .langsel__menu{min-width:150px}
}


header.site .navdrop{position:relative; display:inline-block}
header.site .navdrop__car{font-size:11px; margin-left:5px; opacity:1; display:inline-block; transform:translateY(-1px)}
header.site .navdrop__menu{
  position:absolute; top:100%; left:50%; transform:translate(-50%,-4px);
  padding:14px 6px 6px; min-width:150px; z-index:60;
  opacity:0; visibility:hidden;
  transition:opacity .15s ease, transform .15s ease, visibility .15s;
  display:flex; flex-direction:column; gap:2px;
}
header.site .navdrop__menu::before{
  content:''; position:absolute; inset:10px 0 0 0; z-index:-1;
  background:var(--paper); border:1px solid var(--rule); border-radius:10px;
  box-shadow:0 14px 36px rgba(43,38,32,.16);
}
header.site .navdrop:hover .navdrop__menu,
header.site .navdrop:focus-within .navdrop__menu{opacity:1; visibility:visible; transform:translate(-50%,0)}
header.site .navdrop__menu a{padding:9px 14px; border-radius:7px; white-space:nowrap}
header.site .navdrop__menu a:hover{background:var(--paper-2); color:var(--ink)}

header.site .navdrop--cta > a{color:var(--terra)!important; font-weight:700}
@media (min-width:1321px){
  header.site .nav__links{align-items:center}
  header.site .navdrop--cta > a{background:var(--terra); color:var(--paper)!important; padding:7px 14px; border-radius:999px}
  header.site .navdrop--cta > a:hover{filter:brightness(.92)}
}

@media (max-width:1320px){
  
  header.site .navdrop{display:contents}
  header.site .navdrop > a{display:flex; align-items:center; justify-content:space-between}
  header.site .navdrop__car{display:inline-flex; align-items:center; justify-content:center; margin:0 0 0 auto; width:34px; height:34px; font-size:17px; color:var(--terra); opacity:1; border:1px solid var(--rule); border-radius:50%; background:var(--paper-2); transition:transform .2s ease}
  header.site .navdrop.open > a .navdrop__car{transform:rotate(180deg); opacity:1}
  header.site .navdrop__menu{position:static; transform:none; opacity:1; visibility:visible; min-width:0; padding:0; z-index:auto; gap:0; max-height:0; overflow:hidden; flex-shrink:0; transition:max-height .32s ease}
  header.site .navdrop.open .navdrop__menu{max-height:480px}
  header.site .navdrop:hover .navdrop__menu, header.site .navdrop:focus-within .navdrop__menu{transform:none}
  header.site .navdrop__menu::before{display:none}
  header.site .navdrop__menu a{padding:11px 0 11px 18px; border-radius:0; font-size:11.5px; color:var(--muted)}
}


header.site .nav__langs{display:none}
@media (max-width:720px){
  header.site .nav__right .langsel{display:none}
  header.site .nav__langs{
    display:flex; align-items:center; gap:16px;
    padding:16px 0 6px; font-size:11px; letter-spacing:.14em;
  }
  header.site .nav__langs .cur{color:var(--terra); font-weight:700; border-bottom:2px solid var(--terra); padding:2px 0}
  header.site .nav__langs a{color:var(--ink-soft); padding:2px 0; border-bottom:2px solid transparent}
  header.site .nav__langs a:hover{color:var(--ink)}
}


@media (prefers-reduced-motion: no-preference){
 header.site @view-transition{ navigation: auto; }
  header.site body{ animation: vgb-pagefade .3s ease both }
 header.site @keyframes vgb-pagefade{ from{opacity:0} to{opacity:1} }
}


@media (max-width:720px){
  header.site .nav{padding-top:12px; padding-bottom:12px}
@media (max-width:720px){
  header.site .nav{grid-template-columns:minmax(0,1fr) auto; gap:10px; padding-top:12px; padding-bottom:12px}
  header.site .brand{min-width:0}
  header.site .brand img{width:32px; height:32px}
  header.site .brand .word{font-size:14px; line-height:1.1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  header.site .brand .word small{display:block; font-size:9px; letter-spacing:.18em; margin-top:1px; overflow:hidden; text-overflow:ellipsis}
  header.site .nav__right{gap:8px}
  header.site .cart-btn{padding:7px 11px; font-size:10px; letter-spacing:.14em}
  header.site .nav-account{padding:7px 8px; font-size:10px; letter-spacing:.14em}
  header.site .nav-account.is-loggato{padding:7px 11px}
  header.site .nav-toggle{padding:6px 10px}
}
@media (max-width:480px){
  header.site .nav{gap:8px}
  header.site .brand{gap:8px}
  header.site .brand img{width:28px; height:28px}
  header.site .brand .word{font-size:12.5px; line-height:1.15}
  header.site .brand .word small{font-size:8px; letter-spacing:.12em}
  header.site .nav__right{gap:4px}
  header.site .cart-btn{padding:6px 7px; font-size:9.5px; letter-spacing:.05em}
  header.site .nav-account{padding:6px 5px; font-size:9.5px; letter-spacing:.05em}
  header.site .nav-account.is-loggato{padding:6px 8px; max-width:90px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  header.site .nav-account.is-loggato::before{display:none}     
  header.site .nav-account.is-loggato::after{margin-left:1px}
  header.site .nav-toggle{padding:6px 10px; font-size:14px; line-height:1}
}
@media (max-width:380px){
  header.site .brand img{width:26px; height:26px}
  header.site .brand .word{font-size:11.5px}
  header.site .brand .word small{display:block; font-size:7.5px; letter-spacing:.1em}
  header.site .nav__right{gap:4px}
  header.site .cart-btn{padding:5px 7px; font-size:9px; letter-spacing:.06em}
  header.site .nav-account{padding:5px 7px; font-size:9px; letter-spacing:.06em}
  header.site .nav-account.is-loggato{padding:5px 8px; max-width:78px}
  header.site .nav-account.is-loggato::after{display:none}
  header.site .nav-toggle{padding:5px 8px; font-size:13px; line-height:1}
}
@media (max-width:480px){
  header.site .brand img{width:33px; height:33px}
  header.site .brand .word{font-size:13.5px}
  header.site .brand .word small{font-size:8.5px}
  header.site .cart-btn{padding:7px 10px; font-size:10.5px}
  header.site .nav-account{padding:7px 8px; font-size:10.5px}
  header.site .nav-toggle{padding:7px 11px; font-size:16px}
}
header.site .is-hidden{display:none !important}