/* Guscio comune del sito (header, nav, footer, toast, responsive).
   ESTRATTO da chi-siamo.html il 04/10/2026 per le pagine PHP (diario.php).
   Se cambi header/footer in chi-siamo.html, allinea anche questo file. */
/* ─── tokens — palette ESTRATTA dai pixel del logo ─────────────────── */
:root{
  --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;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%; text-size-adjust:100%}
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after { animation:none !important; transition:none !important; }
  html { scroll-behavior:auto; }
}

.cred__visual{transition:transform .55s cubic-bezier(.22,.61,.36,1)}
.cred__visual:hover{transform:rotate(-.5deg) translateY(-4px)}

@keyframes glow{
  0%, 100%{filter:drop-shadow(0 0 0 transparent)}
  50%{filter:drop-shadow(0 4px 28px rgba(229,192,87,.4))}
}
.feast__date em{animation:glow 4.5s ease-in-out infinite}
body{
  font-family:var(--sans);
  font-size:16.5px; line-height:1.6;
  color:var(--ink); background:var(--paper);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
::selection{background:var(--terra); color:var(--paper)}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
button{font:inherit; cursor:pointer}
hr{border:0; height:1px; background:var(--rule); margin:0}

.wrap{max-width:1320px; margin:0 auto; padding:0 48px}
@media (max-width:720px){
  .wrap{
    padding-left:max(30px, env(safe-area-inset-left));
    padding-right:max(30px, env(safe-area-inset-right));
  }
}

/* ─── shared atoms ─────────────────────────────────────────────────── */
.eyebrow{
  display:inline-flex; align-items:center; gap:14px; max-width:100%; white-space:nowrap;
  font-size:11px; letter-spacing:.26em; text-transform:uppercase;
  color:var(--ink-soft); font-weight:500;
}
.eyebrow .num{
  font-family:var(--display); font-style:italic; font-weight:500;
  color:var(--terra); font-size:16px; letter-spacing:-.01em; text-transform:none;
}
.eyebrow .rule{flex:0 1 60px; min-width:0; height:1px; background:var(--rule)}
.eyebrow .dot{width:6px; height:6px; background:var(--terra); border-radius:50%}

.h-display{
  font-family:var(--display); font-weight:400;
  font-size:clamp(40px, 5.2vw, 76px);
  line-height:.98; letter-spacing:-.012em; margin:14px 0 0;
  text-wrap:balance;
}
.h-display em{font-style:italic; color:var(--terra)}

.lede{
  font-size:17px; line-height:1.65; color:var(--ink-soft);
  max-width:58ch; margin:0;
}

.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:12px 22px; border:0; border-radius:999px;
  font-family:var(--sans); font-weight:600;
  font-size:11.5px; letter-spacing:.18em; text-transform:uppercase;
  background:var(--ink); color:var(--paper);
  transition:background .15s, color .15s;
}
.btn:hover{background:var(--terra)}
.btn .arr{
  font-family:var(--display); font-style:italic;
  text-transform:none; letter-spacing:0; font-size:15px; font-weight:500;
}
.btn--ghost{background:transparent; color:var(--ink); border:1px solid var(--ink)}
.btn--ghost:hover{background:var(--ink); color:var(--paper)}
.btn--terra{background:var(--terra)}
.btn--terra:hover{background:var(--terra-d)}

.section{padding:120px 0; border-top:1px solid var(--rule)}
.section--tight{padding:80px 0}
.section--dark{
  background:var(--sea-d); color:#e9e1ce;
  border-top:0; border-bottom:0;
}
.section--dark .eyebrow{color:rgba(233,225,206,.66)}
.section--dark .h-display{color:#f3ead4}
.section--dark .h-display em{color:var(--gold)}
.section--dark .lede{color:rgba(233,225,206,.78)}
.section--dark .eyebrow .num{color:var(--gold)}

.section__head{
  display:grid; grid-template-columns:5fr 6fr; gap:56px;
  margin-bottom:64px; align-items:end;
}
.section__head--center{
  display:block; max-width:760px; margin-left:auto; margin-right:auto;
  text-align:center; margin-bottom:64px;
}
.section__head--center .eyebrow{justify-content:center}
.section__head--center .h-display{margin-top:14px}

/* ─── nav ──────────────────────────────────────────────────────────── */
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);
}
.nav{
  display:grid; grid-template-columns:auto 1fr auto;
  align-items:center; gap:20px;
  padding-top:14px; padding-bottom:14px;
}
.brand{display:flex; align-items:center; gap:12px; cursor:pointer}
.brand img{width:36px; height:36px; flex-shrink:0; object-fit:contain}
.brand .word{
  font-family:var(--display); font-size:19px; font-weight:500;
  line-height:1.05; letter-spacing:.005em;
}
.brand .word em{font-style:italic; color:var(--terra); font-weight:500}
.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;
}
.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;
}
.nav__links a{transition:color .15s; cursor:pointer; white-space:nowrap}
.nav__links a:hover{color:var(--ink)}
.nav__right{display:flex; align-items:center; gap:10px}
.lang{
  display:inline-flex; gap:6px;
  font-size:11.5px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-soft); font-weight:500;
}
.lang button{
  background:none; border:0; padding:4px 2px;
  color:var(--ink-soft); border-bottom:1px solid transparent;
}
.lang button.on{color:var(--ink); border-bottom-color:var(--terra)}
.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;
}
.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;
}

.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;
}
.nav-account:hover{color:var(--terra)}
.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;
}
.nav-account.is-loggato:hover{color:var(--paper); filter:brightness(1.08)}
.nav-account.is-loggato::after{content:" ▾"; font-size:9px; opacity:.7; margin-left:2px}
.nav-account-wrap{position:relative}
.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;
}
.nav-account-wrap.is-open .nav-menu{display:block}
.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;
}
.nav-menu a[hidden]{display:none}
.nav-menu a:hover{background:var(--paper-2); color:var(--terra)}
.nav-menu a.terra{color:var(--terra)}
.nav-menu a.terra:hover{background:var(--terra); color:var(--paper)}
.nav-menu hr{border:0; border-top:1px solid var(--rule); margin:4px 0}

.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){
  .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);
  }
  .nav__links.open{display:flex}
  .nav__links a{padding:12px 0; border-bottom:1px solid var(--rule)}
  .nav-toggle{display:inline-flex}
}

/* ─── footer hairline ──────────────────────────────────────────────── */
footer.site{position:relative}
footer.site::before{
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg, transparent, var(--gold) 30%, var(--gold) 70%, transparent);
  opacity:.55;
}

footer.site{
  background:var(--ink); color:#a8a092;
  padding:96px 0 32px;
}
footer.site .foot{
  display:grid; grid-template-columns:2fr 1fr 1fr 1.4fr; gap:48px;
}
footer.site .brand-foot .mark{
  font-family:var(--display); font-weight:400;
  font-size:clamp(40px, 6vw, 84px); line-height:.95; color:#f3ead4;
  letter-spacing:-.012em;
}
footer.site .brand-foot .mark em{font-style:italic; color:var(--terra)}
footer.site .brand-foot .motto{
  margin-top:18px; max-width:36ch;
  font-family:var(--display); font-style:italic; font-size:17px; line-height:1.5;
  color:#a8a092;
}
footer.site .brand-foot .social-foot{
  display:inline-flex; align-items:center; gap:8px; margin-top:16px;
  font-size:13px; letter-spacing:.04em; color:#a8a092; text-decoration:none;
}
footer.site .brand-foot .social-foot:hover{ color:#fbf2d4; }
footer.site h5{
  font-size:10.5px; letter-spacing:.22em; text-transform:uppercase;
  color:#f3ead4; font-weight:600; margin:0 0 14px;
}
footer.site ul{list-style:none; margin:0; padding:0; display:grid; gap:8px; font-size:14px}
footer.site a{color:#a8a092}
footer.site a:hover{color:var(--gold)}
.newsletter input{
  width:100%; padding:11px 14px; background:#221e18;
  border:1px solid #2f2a23; color:#e9e1ce;
  font-family:var(--sans); font-size:13.5px; margin-bottom:10px;
}
.newsletter input:focus{outline:none; border-color:var(--terra)}
.newsletter button{
  width:100%; background:var(--terra); color:var(--paper); border:0; padding:11px;
  font-weight:600; letter-spacing:.16em; text-transform:uppercase; font-size:10.5px;
}
.newsletter button:hover{background:var(--terra-d)}
.foot-legal{
  grid-column:1/-1; border-top:1px solid #2a261f;
  margin-top:48px; padding-top:24px;
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:#665e51;
}
.aps-info{
  font-size:12px; line-height:1.65; color:#a89f8a;
  letter-spacing:.02em; text-transform:none;
  max-width:480px;
}
.aps-info strong{color:#d9c285; font-weight:500; letter-spacing:.04em}
.cf-num{font-variant-numeric:tabular-nums; letter-spacing:.06em}
.aps-claim{
  display:flex; flex-direction:column; gap:6px;
  text-align:right; font-size:10.5px;
}
.foot-credits{
  grid-column:1/-1;
  border-top:1px solid #2a261f;
  margin-top:18px; padding-top:14px;
  font-size:10.5px; line-height:1.6;
  color:#7a715f; font-style:italic;
  letter-spacing:.02em; text-transform:none;
  max-width:920px;
}
.foot-credits strong{color:#d9c285; font-style:normal; font-weight:500}
.foot-credits a{color:#d9c285; text-decoration:underline}
@media (max-width:720px){
  .aps-info{text-align:center; max-width:none}
  .aps-claim{text-align:center}
}
@media (max-width:980px){
  footer.site .foot{grid-template-columns:1fr 1fr; gap:32px}
  .foot-legal{flex-direction:column}
}

/* ─── toast ────────────────────────────────────────────────────────── */
.toast{
  position:fixed; bottom:30px; left:50%; transform:translateX(-50%) translateY(120px);
  background:var(--ink); color:var(--paper); padding:14px 22px;
  font-size:13px; opacity:0; transition:all .3s ease; z-index:200;
  pointer-events:none;
}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0)}

/* ─── responsive ───────────────────────────────────────────────────── */
@media (max-width:980px){
  .section{padding:80px 0}
  .section__head{grid-template-columns:1fr; gap:18px}
  .manifesto, .cammini, .cred, .pellegrino{grid-template-columns:1fr; gap:36px}
  .manifesto__side{position:static}
  .hero{min-height:auto; padding:40px 0 60px}
  .hero__title{font-size:48px}
  .hero__top{padding-bottom:40px; flex-wrap:wrap; gap:14px}
}

/* ─── mobile (≤720px) — fix wrapping, overflow, density ─────────────── */
@media (max-width:720px){
  html, body{overflow-x:hidden; overflow-x:clip}  /* clip non rompe lo sticky della navbar */
  .section{padding:64px 0}
  .section--tight{padding:56px 0}

  /* HEADER: compact brand, tighter chrome */
  .nav{grid-template-columns:minmax(0,1fr) auto; gap:10px; padding-top:10px; padding-bottom:10px}
  .brand{min-width:0}
  .brand img{width:32px; height:32px}
  .brand .word{font-size:14px; line-height:1.1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  .brand .word small{display:block; font-size:9px; letter-spacing:.18em; margin-top:1px; overflow:hidden; text-overflow:ellipsis}
  .nav__right{gap:8px}
  .lang{display:none}
  .cart-btn{padding:7px 11px; font-size:10px; letter-spacing:.14em}
  .nav-account{padding:7px 8px; font-size:10px; letter-spacing:.14em}
  .nav-account.is-loggato{padding:7px 11px}
  .nav-toggle{padding:6px 10px}

  /* HERO */
  .hero{padding:24px 0 56px}
  .hero__logo{width:84px; height:84px}
  .hero__top{padding:4px 0 24px}
  .hero__top .axis{font-size:10px; gap:10px}
  .hero__epigraph{font-size:15px; margin-bottom:28px; padding-left:14px}
  .hero__title{
    font-size:clamp(36px, 10.5vw, 52px); max-width:none;
    text-shadow:0 2px 18px rgba(241,236,226,.85), 0 1px 3px rgba(241,236,226,.9);
    word-break:normal; overflow-wrap:break-word; hyphens:none;
    padding-right:8px;
  }
  .hero__sub{
    font-size:17px; margin-top:18px;
    text-shadow:0 1px 8px rgba(241,236,226,.85);
  }
  .hero__slogan{text-shadow:0 1px 8px rgba(241,236,226,.85)}
  .hero__cta{margin-top:28px; gap:10px}
  .hero__cta .btn{font-size:10.5px; padding:11px 18px}
  /* Overlay piu' marcato su mobile per leggibilita' sul titolo */
  .hero__photo::after{
    background:
      linear-gradient(180deg,
        rgba(26,24,20,.05) 0%,
        rgba(241,236,226,.30) 35%,
        rgba(241,236,226,.85) 70%,
        rgba(241,236,226,1) 100%),
      linear-gradient(90deg,
        rgba(241,236,226,.7) 0%,
        rgba(241,236,226,.2) 50%,
        rgba(241,236,226,.4) 100%);
  }

  /* META STRIP */
  .meta__value{font-size:28px}
  .meta__value small{font-size:10px}

  /* MANIFESTO */
  .manifesto__copy p.lead{font-size:22px; margin-bottom:24px}
  .manifesto__copy p{font-size:16px}
  .evangelium{font-size:18px; margin:28px 0; padding:4px 0 4px 22px}

  /* CAMMINI */
  .cammino-card{padding:28px 22px}
  .cammino-card h3{font-size:30px}
  .cammino-card .stat strong{font-size:24px}
  .cammino-card .stat span{font-size:9px; letter-spacing:.16em}
  .cammini-symmetry{font-size:18px; margin-top:32px}

  /* TAPPE */
  .tabs button{padding:8px 14px; font-size:10.5px; letter-spacing:.14em}
  .stage, .stages__sum{padding:18px 4px; gap:8px 12px}
  .stage:hover{padding-left:8px; padding-right:8px}
  .stage__n{font-size:18px}
  .stage__route{font-size:18px}
  .stage__host{font-size:12px}
  .stage__num{font-size:16px}
  .stage__diff{font-size:12px}

  /* MAPPA */
  #map{height:380px}
  .map-controls{top:10px; left:10px; padding:8px 10px}
  .map-controls button{padding:5px 10px; font-size:10.5px}
  .map-legend{gap:14px 18px; font-size:11px; margin-top:18px}

  /* FORMATI — single column under 560 is cleaner */
  .formats{grid-template-columns:1fr}
  .format{min-height:auto; padding:24px 22px; border-right:0; border-bottom:1px solid var(--rule)}
  .format:last-child{border-bottom:0}

  /* CREDENTIALE */
  .cred__visual{transform:none; padding:28px 22px}
  .cred__visual h4{font-size:28px}
  .cred__copy h3{font-size:24px; margin:18px 0 10px}

  /* 24 GIUGNO */
  .countdown > div{padding:18px 6px}
  .countdown strong{font-size:30px}
  .countdown span{font-size:9px; letter-spacing:.16em}

  /* SHOP — single column for legibility */
  .products{grid-template-columns:1fr}
  .product{border-right:0 !important; padding:24px 22px}
  .product:nth-child(n+2){border-top:1px solid var(--rule)}
  .product__thumb{aspect-ratio:1.6/1}
  .product__icon{max-width:96px}
  .product__name{font-size:22px}

  /* PELLEGRINO */
  .pellegrino__panel{padding:28px 22px}
  .pellegrino__copy h3{font-size:36px}

  /* FOOTER */
  footer.site{padding:64px 0 24px}
  footer.site .foot{grid-template-columns:1fr; gap:36px}
  footer.site .brand-foot .mark{font-size:44px}

  /* CART DRAWER — full width on phone */
  .cart-drawer{width:100vw; max-width:100vw; right:-100vw}
  .cart-drawer__head{padding:18px 20px}
  .cart-items{padding:16px 20px}
  .cart-foot{padding:18px 20px}

  /* MODAL fits comfortably */
  .modal{padding:32px 24px 28px}
  .modal h3{font-size:26px}
}

/* ─── extra tight su schermi stretti (≤480px) — navbar compatta ─────── */
@media (max-width:480px){
  .nav{gap:8px}
  .brand{gap:8px}
  .brand img{width:28px; height:28px}
  .brand .word{font-size:12.5px; line-height:1.15}
  .brand .word small{font-size:8px; letter-spacing:.12em}
  .nav__right{gap:4px}
  .cart-btn{padding:6px 7px; font-size:9.5px; letter-spacing:.05em}
  .nav-account{padding:6px 5px; font-size:9.5px; letter-spacing:.05em}
  .nav-account.is-loggato{padding:6px 8px; max-width:90px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  .nav-account.is-loggato::before{display:none}     /* niente ✓ su mobile, troppo spazio */
  .nav-account.is-loggato::after{margin-left:1px}
  .nav-toggle{padding:6px 10px; font-size:14px; line-height:1}
}

/* ─── very small (≤380px) — last-mile tweaks ───────────────────────── */
@media (max-width:380px){
  .wrap{padding:0 14px}
  .brand img{width:26px; height:26px}
  .brand .word{font-size:11.5px}
  .brand .word small{display:block; font-size:7.5px; letter-spacing:.1em}
  .nav__right{gap:4px}
  .cart-btn{padding:5px 7px; font-size:9px; letter-spacing:.06em}
  .nav-account{padding:5px 7px; font-size:9px; letter-spacing:.06em}
  .nav-account.is-loggato{padding:5px 8px; max-width:78px}
  .nav-account.is-loggato::after{display:none}
  .nav-toggle{padding:5px 8px; font-size:13px; line-height:1}
  .hero__title{font-size:38px}
  .stage, .stages__sum{grid-template-columns:32px 1fr 1fr}
  .meta__value{font-size:24px}
}

/* ─── language dropdown (menu a tendina lingue) ─────────────────────── */
.langsel{position:relative; display:inline-block}
.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;
}
.langsel__btn:hover{color:var(--terra)}
.langsel__btn:focus-visible{outline:2px solid var(--terra); outline-offset:2px}
.langsel__car{font-size:9px; transition:transform .2s}
.langsel.is-open .langsel__car{transform:rotate(180deg)}
.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;
}
.langsel.is-open .langsel__menu{opacity:1; visibility:visible; transform:translateY(0)}
.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;
}
.langsel__menu a:hover{background:var(--paper-2); color:var(--ink)}
.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){
  .langsel__btn{padding:6px 6px; font-size:10px; letter-spacing:.14em}
  .langsel__menu{min-width:150px}
}

/* ─── sottomenu nav (I Cammini ▾ → Formati) ─────────────────────────── */
.navdrop{position:relative; display:inline-block}
.navdrop__car{font-size:11px; margin-left:5px; opacity:1; display:inline-block; transform:translateY(-1px)}
.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;
}
.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);
}
.navdrop:hover .navdrop__menu,
.navdrop:focus-within .navdrop__menu{opacity:1; visibility:visible; transform:translate(-50%,0)}
.navdrop__menu a{padding:9px 14px; border-radius:7px; white-space:nowrap}
.navdrop__menu a:hover{background:var(--paper-2); color:var(--ink)}
/* voce "Diventa socio" in evidenza (pulsante) */
.navdrop--cta > a{color:var(--terra)!important; font-weight:700}
@media (min-width:1321px){
  .nav__links{align-items:center}
  .navdrop--cta > a{background:var(--terra); color:var(--paper)!important; padding:7px 14px; border-radius:999px}
  .navdrop--cta > a:hover{filter:brightness(.92)}
}

@media (max-width:1320px){
  /* nel menu hamburger: voci in colonna, sottovoci rientrate e sempre visibili */
  .navdrop{display:contents}
  .navdrop > a{display:flex; align-items:center; justify-content:space-between}
  .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}
  .navdrop.open > a .navdrop__car{transform:rotate(180deg); opacity:1}
  .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}
  .navdrop.open .navdrop__menu{max-height:480px}
  .navdrop:hover .navdrop__menu,.navdrop:focus-within .navdrop__menu{transform:none}
  .navdrop__menu::before{display:none}
  .navdrop__menu a{padding:11px 0 11px 18px; border-radius:0; font-size:11.5px; color:var(--muted)}
}

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

/* ─── transizione morbida tra le pagine ─────────────────────────────── */
@media (prefers-reduced-motion: no-preference){
  @view-transition{ navigation: auto; }
  body{ animation: vgb-pagefade .3s ease both }
  @keyframes vgb-pagefade{ from{opacity:0} to{opacity:1} }
}

/* ─── navbar mobile: piu' grande e sempre visibile ──────────────────── */
@media (max-width:720px){
  .nav{padding-top:12px; padding-bottom:12px}
}
@media (max-width:480px){
  .brand img{width:33px; height:33px}
  .brand .word{font-size:13.5px}
  .brand .word small{font-size:8.5px}
  .cart-btn{padding:7px 10px; font-size:10.5px}
  .nav-account{padding:7px 8px; font-size:10.5px}
  .nav-toggle{padding:7px 11px; font-size:16px}
}

.is-hidden{display:none !important}