/* APE 2026 — Header (BLUEPRINT §7.1). Glass SOLO qui e sticky-buy. */

/* Topbar contatti (2026-07-14, richiesta utente): sempre visibile, sottile */
.ape-topbar { background: var(--ape-ink); }
.ape-topbar__inner {
  display: flex; justify-content: center; gap: var(--ape-s6);
  padding-block: 6px; flex-wrap: wrap;
}
.ape-topbar__item {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600; color: #E6EDF3; text-decoration: none;
  white-space: nowrap;
}
.ape-topbar__item:hover { color: #fff; text-decoration: underline; }
.ape-topbar__item .ape-icon { color: var(--ape-accent); }
@media (max-width: 480px) { .ape-topbar__inner { gap: var(--ape-s3); } .ape-topbar__item { font-size: 11px; } }

.ape-header {
  position: sticky; top: 0; z-index: 90;
  background: color-mix(in srgb, var(--ape-surface) 85%, transparent);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--ape-line);
}
.ape-header__bar {
  display: flex; align-items: center; gap: var(--ape-s3);
  height: 56px;
}
.ape-header__logo { flex: 0 0 auto; }
.ape-header__logo img { max-height: 36px; width: auto; }
.ape-header__omnibox { display: none; }
.ape-header__actions { display: flex; align-items: center; gap: var(--ape-s1); margin-left: auto; }
.ape-header-action {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; height: 44px; border-radius: var(--ape-r-input);
  color: var(--ape-ink); position: relative;
  transition: background var(--ape-t-fast) var(--ape-ease);
}
.ape-header-action:hover { background: var(--ape-surface-2); color: var(--ape-ink); }

/* Badge carrello — selettori da CONTRATTO (compat-selectors.php) */
.header-cart-count {
  position: absolute; top: 4px; right: 2px;
  min-width: 18px; height: 18px; padding-inline: 4px;
  background: var(--ape-accent); color: var(--ape-on-accent); border-radius: 9px;
  font-size: 11px; line-height: 18px; font-weight: 600; text-align: center;
}
.header-cart-count.is-empty { display: none; }

/* Omnibox mobile sotto la barra */
.ape-header__omnibox-mobile { padding: 0 var(--ape-s4) var(--ape-s3); }

/* Nav categorie: solo desktop */
.ape-header__nav { display: none; }

@media (min-width: 1024px) {
  .ape-header__bar { height: var(--ape-header-h); gap: var(--ape-s8); }
  .ape-header__burger { display: none; }
  .ape-header__omnibox { display: block; flex: 1; max-width: 980px; margin-inline: auto; } /* ricerca dominante e CENTRATA */
  .ape-header__omnibox-mobile { display: none; }
  .ape-header__logo img { max-height: 52px; }
  .ape-header__nav {
    display: flex; align-items: center; justify-content: center;
    height: 46px; border-top: 1px solid var(--ape-line); position: relative;
  }
  .ape-nav { display: flex; gap: var(--ape-s4); overflow-x: auto; justify-content: center; }
  .ape-nav a {
    display: inline-block; padding: var(--ape-s2) var(--ape-s3); border-radius: 8px;
    font-size: 13px; font-weight: 500; color: var(--ape-ink-soft); white-space: nowrap;
  }
  .ape-nav a:hover { background: var(--ape-surface-2); color: var(--ape-ink); }
  .ape-nav .sub-menu { display: none; } /* dropdown in M3 con FilterRail */
  .ape-header__nav-side { position: absolute; right: var(--ape-s4); top: 50%; transform: translateY(-50%); }
}

/* Switcher lingua */
.ape-langs { display: flex; gap: var(--ape-s1); }
.ape-langs__item {
  font-size: 12px; font-weight: 600; color: var(--ape-ink-mute);
  padding: 2px 8px; border-radius: 6px;
}
.ape-langs__item.is-active { background: var(--ape-ink); color: #fff; }

/* Variante topbar (2026-09-08): il selettore IT/DE sta in cima, visibile anche
   da telefono (88% del traffico). Sfondo scuro, quindi colori dedicati. */
.ape-topbar .ape-langs { gap: 4px; align-items: center; }
.ape-topbar .ape-langs__item {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 34px; min-height: 26px; padding: 3px 9px;
  font-size: 12px; font-weight: 700; letter-spacing: .02em;
  color: #9FB0C0; text-decoration: none; border-radius: 6px;
}
.ape-topbar .ape-langs__item:hover { color: #fff; background: rgb(255 255 255 / 12%); }
.ape-topbar .ape-langs__item.is-active { background: var(--ape-accent); color: var(--ape-ink); }
.ape-topbar .ape-langs__item:focus-visible { outline: 2px solid var(--ape-accent); outline-offset: 2px; }
@media (max-width: 480px) {
  /* dito, non mouse: bersaglio piu' generoso */
  .ape-topbar .ape-langs__item { min-height: 30px; min-width: 38px; font-size: 12px; }
}

/* Drawer mobile */
.ape-drawer {
  border: 0; padding: 0; margin: 0; max-width: 320px; width: 85vw; height: 100dvh; max-height: 100dvh;
  background: var(--ape-surface); box-shadow: var(--ape-shadow-2);
}
.ape-drawer::backdrop { background: rgb(13 17 23 / 45%); }
.ape-drawer__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--ape-s4); border-bottom: 1px solid var(--ape-line);
}
.ape-drawer__head img { max-height: 32px; width: auto; }
.ape-drawer__close { min-width: 44px; height: 44px; display: grid; place-items: center; }
.ape-drawer__nav a { display: block; padding: var(--ape-s3) var(--ape-s4); font-weight: 500; border-bottom: 1px solid var(--ape-surface-2); }
.ape-drawer__nav .sub-menu a { padding-left: var(--ape-s8); font-weight: 400; color: var(--ape-ink-soft); }
.ape-drawer__foot { padding: var(--ape-s4); }
