/* =====================================================================
   himade - header (shop.himade.it + himade.it) - 26/10/2026
   Template header Elementor 756, stessi ID sui due siti.
   Header espresso sottile, filo bronzo, logo in avorio, lingua discreta,
   hamburger a due linee, menu a comparsa a tutta larghezza.
   Tutto sotto body.himade-header.
   ===================================================================== */

@font-face {
  font-family: 'avenir';
  src: url('/wp-content/uploads/useanyfont/768AVENIR.woff2') format('woff2'),
       url('/wp-content/uploads/useanyfont/768AVENIR.woff') format('woff');
  font-weight: 100 900; font-style: normal; font-display: swap;
}

body.himade-header {
  --hh-espresso: #1E1813;
  --hh-espresso-2: #16110D;
  --hh-ivory: #F2EBDE;
  --hh-bronze: #C9B79C;
  --hh-line: rgba(201,183,156,.32);
  --hh-font: 'avenir', 'Avenir Next', 'Helvetica Neue', Arial, sans-serif;
  --hh-ease: cubic-bezier(.22,.61,.36,1);
  --hh-h: 64px;
  --hh-gutter: clamp(16px, 4vw, 56px);
}
@media (max-width: 767px) { body.himade-header { --hh-h: 56px; } }

/* ---------- barra ---------- */
html body.himade-header:not(#hm) .elementor-location-header .elementor-element-3ff41377 {
  background: var(--hh-espresso) !important;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  border: 0 !important;
  border-bottom: 1px solid var(--hh-line) !important;
  min-height: var(--hh-h) !important; height: var(--hh-h) !important;
  padding: 0 var(--hh-gutter) !important;
  box-shadow: none;
  transition: box-shadow .35s var(--hh-ease), background-color .35s var(--hh-ease) !important;
  z-index: 1000;
}
html.hm-hdr-scrolled body.himade-header:not(#hm) .elementor-location-header .elementor-element-3ff41377 {
  background: rgba(30,24,19,.97) !important;
  box-shadow: 0 10px 28px -18px rgba(0,0,0,.65) !important;
}
html body.himade-header:not(#hm) .elementor-location-header .elementor-element-3ff41377 > .e-con-inner {
  max-width: 1340px !important; width: 100%; margin: 0 auto; padding: 0 !important;
  height: 100%; display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; gap: 0 !important;
}
html body.himade-header:not(#hm) .elementor-location-header .elementor-element-3ff41377 > .e-con-inner > .e-con {
  padding: 0 !important; margin: 0 !important; min-height: 0 !important; height: 100%;
  display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: flex-end !important;
}
html body.himade-header:not(#hm) .elementor-location-header .elementor-element-5ae9d576,
html body.himade-header:not(#hm) .elementor-location-header .elementor-element-5ae9d576 > .elementor-widget-container { text-align: left !important; }
/* ordine: logo | lingua | menu */
html body.himade-header:not(#hm) .elementor-location-header .elementor-element-20cc9a7b { flex: 1 1 auto !important; width: auto !important; justify-content: flex-start !important; order: 1; }
html body.himade-header:not(#hm) .elementor-location-header .elementor-element-c5308a9 { flex: 0 0 auto !important; width: auto !important; order: 2; }
html body.himade-header:not(#hm) .elementor-location-header .elementor-element-429ec028 { flex: 0 0 auto !important; width: auto !important; order: 3; margin-left: 18px !important; position: static !important; }

/* ---------- logo: stesso marchio, resa avorio su scuro ---------- */
html body.himade-header:not(#hm) .elementor-location-header .elementor-element-5ae9d576 { width: auto !important; margin: 0 !important; }
html body.himade-header:not(#hm) .elementor-location-header .elementor-element-5ae9d576 a { display: block; line-height: 0; }
html body.himade-header:not(#hm) .elementor-location-header .elementor-element-5ae9d576 img {
  height: calc(var(--hh-h) - 26px) !important; width: auto !important; max-width: none !important; max-height: none !important;
  filter: brightness(0) invert(94%) sepia(9%) saturate(353%) hue-rotate(345deg) brightness(102%) !important; /* ~ avorio #F2EBDE */
  transition: opacity .3s var(--hh-ease);
}
html body.himade-header:not(#hm) .elementor-location-header .elementor-element-5ae9d576 a:hover img { opacity: .82; }

/* ---------- lingua (GTranslate): sigla + globo a filo bronzo ---------- */
html body.himade-header:not(#hm) .elementor-location-header .elementor-element-867ee19 { margin: 0 !important; width: auto !important; }
html body.himade-header:not(#hm) .elementor-location-header .gtranslate_wrapper { position: relative; display: flex; align-items: center; }
html body.himade-header:not(#hm) .elementor-location-header .gglobe {
  background-image: none !important; background-color: transparent !important; box-shadow: none !important;
  width: auto !important; min-width: 44px; height: 44px !important; border-radius: 0 !important; opacity: 1 !important;
  display: inline-flex !important; align-items: center; justify-content: center; gap: 7px;
  color: var(--hh-bronze) !important; cursor: pointer; padding: 0 6px;
  font: 400 11px/1 var(--hh-font) !important; letter-spacing: .2em;
  transition: color .25s var(--hh-ease);
}
html body.himade-header:not(#hm) .elementor-location-header .gglobe::before {
  content: ""; width: 16px; height: 16px; flex: 0 0 16px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C9B79C' stroke-width='1.3'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3c2.5 2.7 3.8 5.7 3.8 9s-1.3 6.3-3.8 9c-2.5-2.7-3.8-5.7-3.8-9S9.5 5.7 12 3z'/%3E%3C/svg%3E") center / contain no-repeat;
}
html body.himade-header:not(#hm) .elementor-location-header .gglobe::after { content: attr(data-hm-lang); min-width: 1.6em; }
html body.himade-header:not(#hm) .elementor-location-header .gglobe:not([data-hm-lang])::after { content: "IT"; }
html body.himade-header:not(#hm) .elementor-location-header .gglobe:hover { color: var(--hh-ivory) !important; }
/* bandierine che si aprono attorno al globo: piccole e ordinate */
html body.himade-header:not(#hm) .elementor-location-header .gsatelite { border-radius: 50% !important; box-shadow: 0 0 0 1px var(--hh-line), 0 6px 16px -8px rgba(0,0,0,.6) !important; background-color: var(--hh-espresso-2) !important; }

/* ---------- hamburger: due linee sottili, diventa X ---------- */
html body.himade-header:not(#hm) .elementor-location-header .elementor-element-3bde4582 { width: auto !important; margin: 0 !important; }
html body.himade-header:not(#hm) .elementor-location-header .elementor-menu-toggle {
  position: relative; width: 44px !important; height: 44px !important; padding: 0 !important; margin: 0 !important;
  background: transparent !important; border: 0 !important; border-radius: 0 !important; cursor: pointer;
  display: flex !important; align-items: center; justify-content: center;
}
html body.himade-header:not(#hm) .elementor-location-header .elementor-menu-toggle svg,
html body.himade-header:not(#hm) .elementor-location-header .elementor-menu-toggle i { display: none !important; }
html body.himade-header:not(#hm) .elementor-location-header .elementor-menu-toggle::before,
html body.himade-header:not(#hm) .elementor-location-header .elementor-menu-toggle::after {
  content: ""; position: absolute; left: 11px; right: 11px; height: 1.5px; background: var(--hh-ivory); border-radius: 1px;
  transition: transform .35s var(--hh-ease), top .35s var(--hh-ease), background-color .25s var(--hh-ease);
}
html body.himade-header:not(#hm) .elementor-location-header .elementor-menu-toggle::before { top: 17px; }
html body.himade-header:not(#hm) .elementor-location-header .elementor-menu-toggle::after { top: 25px; left: 17px; }
html body.himade-header:not(#hm) .elementor-location-header .elementor-menu-toggle:hover::before,
html body.himade-header:not(#hm) .elementor-location-header .elementor-menu-toggle:hover::after { background: var(--hh-bronze); }
html body.himade-header:not(#hm) .elementor-location-header .elementor-menu-toggle.elementor-active::before { top: 21px; transform: rotate(45deg); }
html body.himade-header:not(#hm) .elementor-location-header .elementor-menu-toggle.elementor-active::after { top: 21px; left: 11px; transform: rotate(-45deg); }
html body.himade-header:not(#hm) .elementor-location-header .elementor-menu-toggle:focus-visible,
html body.himade-header:not(#hm) .elementor-location-header .gglobe:focus-visible,
html body.himade-header:not(#hm) .elementor-location-header a:focus-visible {
  outline: 1px solid var(--hh-bronze) !important; outline-offset: 2px !important; box-shadow: none !important;
}

/* ---------- menu a comparsa: pannello espresso a tutta larghezza ---------- */
html body.himade-header:not(#hm) .elementor-location-header nav.elementor-nav-menu--dropdown.elementor-nav-menu__container {
  background: var(--hh-espresso) !important;
  border-top: 1px solid var(--hh-line) !important;
  box-shadow: 0 30px 60px -30px rgba(0,0,0,.7) !important;
  margin-top: calc((var(--hh-h) - 44px) / 2) !important; /* il pannello parte dal bordo inferiore dell'header */
}
html body.himade-header:not(#hm) .elementor-location-header .elementor-menu-toggle.elementor-active + nav.elementor-nav-menu__container {
  max-height: calc(100vh - var(--hh-h)) !important; max-height: calc(100dvh - var(--hh-h)) !important; overflow-y: auto !important;
}
html body.himade-header:not(#hm) .elementor-location-header nav.elementor-nav-menu--dropdown > ul.elementor-nav-menu {
  max-width: 1340px; margin: 0 auto !important; padding: clamp(18px, 3vw, 40px) var(--hh-gutter) clamp(26px, 4vw, 56px) !important;
  display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(24px, 4vw, 72px);
}
html body.himade-header:not(#hm) .elementor-location-header nav.elementor-nav-menu--dropdown li { border: 0 !important; border-bottom: 1px solid rgba(201,183,156,.14) !important; background: transparent !important; }
html body.himade-header:not(#hm) .elementor-location-header nav.elementor-nav-menu--dropdown a.elementor-item,
html body.himade-header:not(#hm) .elementor-location-header nav.elementor-nav-menu--dropdown a.elementor-sub-item {
  font-family: var(--hh-font) !important; font-weight: 400 !important;
  font-size: clamp(17px, 1.5vw, 21px) !important; letter-spacing: .01em !important; text-transform: none !important;
  color: var(--hh-ivory) !important; background: transparent !important;
  padding: 16px 0 !important; border: 0 !important; justify-content: space-between;
  transition: color .25s var(--hh-ease), padding-left .35s var(--hh-ease) !important;
}
html body.himade-header:not(#hm) .elementor-location-header nav.elementor-nav-menu--dropdown a:hover,
html body.himade-header:not(#hm) .elementor-location-header nav.elementor-nav-menu--dropdown a:focus-visible { color: var(--hh-bronze) !important; padding-left: 6px !important; }
html body.himade-header:not(#hm) .elementor-location-header nav.elementor-nav-menu--dropdown a.elementor-item-active,
html body.himade-header:not(#hm) .elementor-location-header nav.elementor-nav-menu--dropdown .current-menu-item > a { color: var(--hh-bronze) !important; }
/* via gli effetti "pointer" di Elementor (sembravano testo barrato) */
html body.himade-header:not(#hm) .elementor-location-header nav.elementor-nav-menu--dropdown a::before,
html body.himade-header:not(#hm) .elementor-location-header nav.elementor-nav-menu--dropdown a::after { display: none !important; content: none !important; }
html body.himade-header:not(#hm) .elementor-location-header nav.elementor-nav-menu--dropdown .sub-arrow,
html body.himade-header:not(#hm) .elementor-location-header nav.elementor-nav-menu--dropdown .sub-arrow * { color: var(--hh-bronze) !important; fill: var(--hh-bronze) !important; }
html body.himade-header:not(#hm) .elementor-location-header nav.elementor-nav-menu--dropdown ul.sub-menu {
  position: static !important; background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 0 10px 14px !important; margin: 0 !important; width: auto !important; min-width: 0 !important;
}
html body.himade-header:not(#hm) .elementor-location-header nav.elementor-nav-menu--dropdown ul.sub-menu li { border: 0 !important; }
html body.himade-header:not(#hm) .elementor-location-header nav.elementor-nav-menu--dropdown ul.sub-menu a { font-size: 15px !important; padding: 8px 0 !important; color: rgba(242,235,222,.78) !important; }

@media (max-width: 1024px) {
  html body.himade-header:not(#hm) .elementor-location-header nav.elementor-nav-menu--dropdown > ul.elementor-nav-menu { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  html body.himade-header:not(#hm) .elementor-location-header .elementor-element-429ec028 { margin-left: 4px !important; }
  html body.himade-header:not(#hm) .elementor-location-header .elementor-element-5ae9d576 img { height: 28px !important; }
  html body.himade-header:not(#hm) .elementor-location-header nav.elementor-nav-menu--dropdown > ul.elementor-nav-menu { grid-template-columns: 1fr; padding-top: 8px !important; }
  html body.himade-header:not(#hm) .elementor-location-header nav.elementor-nav-menu--dropdown a.elementor-item { font-size: 18px !important; padding: 15px 0 !important; }
}
@media (prefers-reduced-motion: reduce) {
  body.himade-header .elementor-location-header * { transition: none !important; }
}

/* logo a sinistra (vince sulla regola generale delle colonne) */
html body.himade-header:not(#hm) .elementor-location-header .elementor-element-3ff41377 > .e-con-inner > .elementor-element-20cc9a7b { justify-content: flex-start !important; }
/* tutti gli elementi dell'header centrati in verticale (il widget lingua era allineato in basso) */
html body.himade-header:not(#hm) .elementor-location-header .elementor-element-3ff41377 .elementor-widget { align-self: center !important; }

/* lingue: le bandierine "in orbita" diventano un elenco ordinato sotto la sigla */
html body.himade-header:not(#hm) .elementor-location-header .gsatelites {
  position: absolute !important; top: calc(100% + (var(--hh-h) - 44px) / 2) !important; right: 0; left: auto !important;
  display: none !important; flex-direction: column; min-width: 200px; white-space: nowrap; padding: 8px 0 !important;
  background: var(--hh-espresso) !important; border: 1px solid var(--hh-line); border-top: 0;
  box-shadow: 0 24px 40px -24px rgba(0,0,0,.7); z-index: 1001;
}
html body.himade-header:not(#hm) .elementor-location-header .gsatelites:has(.gsatelite[style*="inline"]) { display: flex !important; }
html body.himade-header:not(#hm) .elementor-location-header .gsatelites:has(.gsatelite[style*="inline"]) .gsatelite {
  position: static !important; left: auto !important; top: auto !important; width: auto !important; height: auto !important;
  display: flex !important; align-items: center; gap: 12px; padding: 10px 18px !important; margin: 0 !important;
  border-radius: 0 !important; box-shadow: none !important; background: transparent !important; opacity: 1 !important; transform: none !important;
  color: var(--hh-ivory) !important; text-decoration: none !important; font: 400 14px/1.2 var(--hh-font) !important; letter-spacing: .02em;
}
html body.himade-header:not(#hm) .elementor-location-header .gsatelite img { width: 18px !important; height: 18px !important; border-radius: 50%; object-fit: cover; flex: 0 0 18px; }
html body.himade-header:not(#hm) .elementor-location-header .gsatelite::after { content: attr(title); }
html body.himade-header:not(#hm) .elementor-location-header .gsatelite:hover,
html body.himade-header:not(#hm) .elementor-location-header .gsatelite.gt-current-lang { color: var(--hh-bronze) !important; background: rgba(201,183,156,.06) !important; }