/* ===============================================================
   Francone · HEADER + PILL responsive  (Manrope 600)
================================================================ */

:root{ --header-h:92px; }                  /* altezza pill-bar */

/* ---------- header fixed ------------------------------------- */
.site-header{position:fixed;inset:0 0 auto 0;width:100%;z-index:99999;padding:.75rem 1rem;}
main > section:not(.hero){padding-top:var(--header-h);}

/* ---------- pill-bar ----------------------------------------- */
.header-inner{
  width:min(92%,1200px);margin-inline:auto;
  display:flex;justify-content:space-between;align-items:center;
  font:600 1rem/1.55 "Manrope",system-ui,sans-serif;
  background:#fff;position:relative;min-height:82px;padding-inline:1.25rem;
  border-radius:999px;box-shadow:0 4px 8px rgb(0 0 0 /.08);
  transition:width .35s ease,padding-inline .35s ease;
}
.logo img{height:72px;width:auto;z-index:9;}

/* ---------- burger & piccola × ------------------------------- */
.burger{width:32px;height:24px;display:flex;flex-direction:column;justify-content:space-between;border:0;background:none;padding:0;cursor:pointer;}
.burger span{height:3px;width:100%;background:#000;border-radius:2px;}
.pill-close{display:none;order:3;margin-left:auto;font-size:1.8rem;line-height:1;background:none;border:0;cursor:pointer;}

/* ---------- NAV overlay / desktop inline --------------------- */
.main-nav{position:fixed;inset:0;display:grid;place-items:center;background:#ffffff;transform:translateY(-100%);transition:transform .35s ease-out;}
.main-nav ul{margin:0;padding:0;list-style:none;display:flex;gap:1.5rem;text-align:center;}
.nav-close{position:absolute;top:1rem;right:1rem;font-size:2rem;line-height:1;background:none;border:0;color:#fff;cursor:pointer;}

/* ▼▼▼  PRODUCT-DROPDOWN – full-width fluido ▼▼▼ */
#product-dropdown{
  position:fixed;
  top:calc(var(--header-h) + 8px);

  /* centrato orizzontalmente */
  left:50%;
  transform:translateX(-50%);

  width:90%;                    /* 90 % della viewport */
  max-width:1280px;             /* (facoltativo) limite max desktop */

  padding:1rem 1.2rem;
  background:#fff;
  border-radius:50px;
  box-shadow:0 6px 14px rgb(0 0 0 /.18);
  z-index:10000;

  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
  gap:1rem 1.2rem;
  justify-items:center;

  max-height:0;
  overflow:hidden;
  opacity:0;
  pointer-events:none;
  transition:max-height .3s, opacity .3s;
}

#product-dropdown.show{max-height:80vh;opacity:1;pointer-events:auto;overflow-y:auto;}

.prod-badge{display:flex;flex-direction:column;align-items:center;gap:.45rem;background:#fff;padding:.6rem;border-radius:14px;cursor:pointer;transition:background .2s;}
.prod-badge:hover{background:#e8e8e8;}

.prod-badge img{width:100%;height:auto;max-height:120px;object-fit:cover;border-radius:10px;}

#product-dropdown a,
#product-dropdown a:visited{margin-top:.35rem;font-family:'Gloria Hallelujah','Caveat',cursive,var(--font-body);font-size:.85rem;font-weight:600;text-transform:uppercase;text-align:center;color:#395934;text-decoration:none;}
.prod-badge:hover a,
.prod-badge:focus-within a{color:#395934;}

/* ---------- 1 riga fissa: landscape smartphone & tablet ≤1024px */
@media (orientation:landscape) and (max-width:1024px){
  #product-dropdown{grid-template-columns:repeat(8,minmax(80px,1fr));gap:.8rem 1rem;}
  .prod-badge img{max-height:80px;}
  #product-dropdown a{font-size:.75rem;}
}
/* ▲▲▲  END PRODUCT-DROPDOWN ▲▲▲ */

/* ===== DESKTOP ≥1025 px ====================================== */
@media (min-width:1025px){
  .burger,.nav-close,.pill-close{display:none;}
  .main-nav{position:static;transform:none;background:none;}
  .main-nav ul{flex-direction:row;gap:2rem;}
  .main-nav a{color:#000;font-size:1rem;text-decoration:none;text-transform: uppercase;}
}

/* ===== COMMON ≤1024 px (burger) ============================== */
@media (max-width:1024px){
  .burger{display:flex !important;}
  .main-nav a{color:#fff !important;text-transform:uppercase;font-weight:600;text-decoration:none;}
}

/* ===== PORTRAIT phone & tablet ≤1024 px ====================== */
@media (orientation:portrait) and (max-width:1024px){
  .header-inner{width:min(92%,1200px);}
  .nav-close{display:block;}
  .pill-close{display:none !important;}
  .main-nav ul{flex-direction:column;gap:1.5rem;}
  body.nav-open .main-nav{transform:translateY(0);}
  .main-nav{background:#395934;}
  .main-nav a{color:#ffffff !important;}
  .nav-close{color:#ffffff;}
}

/* ===== LANDSCAPE phone & tablet ≤1024 px ===================== */
@media (orientation:landscape) and (max-width:1024px){
  body:not(.nav-open) .header-inner{display:inline-flex;width:auto !important;max-width:none !important;margin-inline:0;padding-inline:.85rem .9rem;gap:.6rem;justify-content:flex-start;}
  body:not(.nav-open) .main-nav{display:none;}
  body:not(.nav-open) .logo img{height:60px;}

  body.nav-open .header-inner{width:min(92%,1200px) !important;max-width:100% !important;margin-inline:auto;padding-inline:1.25rem;justify-content:space-between;}
  .main-nav{position:static !important;transform:none !important;background:none !important;display:flex;align-items:center;height:auto;inset:auto;}
  .main-nav ul{flex-direction:row;gap:1.4rem;margin-left:1.5rem;}
  .main-nav a{color:#000 !important;font-size:13px;font-weight:600;text-transform:none;}
  .nav-close{display:none;}
  .pill-close{display:inline-block;}body:not(.nav-open) .pill-close{display:none;}
  body.nav-open .burger{display:none !important;}
}

/* ===== PORTRAIT smartphone ≤600 px =========================== */
@media (max-width:600px){
  .pill-close{display:none !important;}
}