/* Quory - header a tutta larghezza + menu a scomparsa (hamburger a sinistra, secondo livello per SHOP) */

/* ---------- header: tre colonne, logo sempre al centro, blocchi laterali vicino ai margini ---------- */
.site-header .header-inner {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  width: 100%; max-width: none; margin: 0;
  padding-left: clamp(16px, 2.5vw, 40px); padding-right: clamp(16px, 2.5vw, 40px); box-sizing: border-box;
}
.site-header .header-left { justify-self: start; display: flex; align-items: center; align-self: stretch; margin: 0; }
.site-header .logo { justify-self: center; text-align: center; margin: 0; }
.site-header .logo img, .site-header .logo .custom-logo { display: block; max-height: 44px; width: auto; }
.site-header .header-icons { justify-self: end; margin: 0; }

/* ---------- pulsante hamburger ---------- */
.qm { position: relative; display: flex; align-items: center; align-self: stretch; }
.qm-toggle {
  position: relative; z-index: 1002;
  appearance: none; background: none; border: 0; margin: 0 0 0 -10px; padding: 10px; cursor: pointer;
  display: flex; flex-direction: column; justify-content: center; gap: 5px; color: inherit;
}
.qm-toggle span { display: block; width: 24px; height: 1.5px; background: currentColor; transition: transform .25s, opacity .2s; }
.qm.is-open .qm-toggle span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.qm.is-open .qm-toggle span:nth-child(2) { opacity: 0; }
.qm.is-open .qm-toggle span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
.qm-toggle:focus-visible { outline: 1px solid currentColor; outline-offset: 2px; }

/* ---------- pannello: tutta l'altezza, un terzo della larghezza ---------- */
.qm-panel {
  position: fixed; top: 0; left: 0; bottom: 0; z-index: 1001;
  width: 33.333vw; min-width: 320px;
  padding: calc(var(--qm-top, 76px) + 24px) 0 40px; box-sizing: border-box;
  background: #fff; opacity: 0; visibility: hidden;
  box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0);            /* velo scuro sul resto della pagina, non intercetta il mouse */
  transition: opacity .25s, box-shadow .25s, visibility 0s linear .25s;
}
.qm.is-open .qm-panel { opacity: 1; visibility: visible; box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .18); transition: opacity .25s, box-shadow .25s; }

.qm-list, .qm-list .sub-menu { list-style: none; margin: 0; padding: 0; }
.qm-list > li { position: static; }
.qm-list a {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 14px clamp(24px, 3vw, 48px);
  font-size: 15px; letter-spacing: .16em; text-transform: uppercase; color: #111; text-decoration: none; white-space: nowrap;
  transition: background-color .15s, padding-left .2s;
}
.qm-list a:hover, .qm-list a:focus-visible, .qm-list li.is-open > a { background: #f5f5f3; }
.qm-list .menu-item-has-children > a::after { content: "\203A"; font-size: 20px; line-height: 1; }

/* secondo livello: una seconda colonna a tutta altezza, accanto al pannello */
.qm-list .sub-menu {
  position: absolute; top: 0; bottom: 0; left: 100%; width: 100%;
  padding: calc(var(--qm-top, 76px) + 24px) 0 40px; box-sizing: border-box; overflow-y: auto;
  background: #fafaf8; border-left: 1px solid #eee;
  opacity: 0; visibility: hidden; transition: opacity .2s, visibility 0s linear .2s;
}
.qm-list li.is-open > .sub-menu, .qm-list li:focus-within > .sub-menu { opacity: 1; visibility: visible; transition: opacity .2s; }
.qm-list .sub-menu a { text-transform: none; letter-spacing: .03em; font-size: 15px; padding-top: 11px; padding-bottom: 11px; }
.qm-list .sub-menu a:hover { padding-left: calc(clamp(24px, 3vw, 48px) + 6px); }

/* il menu precedente resta nel codice (lo usano gli script del tema) ma non si vede più */
.header-left .menu-toggle, .header-left .menu-left, .mobile-menu, .menu-overlay { display: none !important; }

/* ---------- telefono e tablet: pannello a tutta larghezza sotto l'header, sottomenu a fisarmonica ---------- */
@media (max-width: 900px), (hover: none) {
  .site-header .logo img, .site-header .logo .custom-logo { max-height: 34px; }
  .qm-panel { top: var(--qm-top, 64px); width: 100vw; min-width: 0; padding: 8px 0 32px; overflow-y: auto; box-shadow: none !important; }
  .qm-list a { padding: 15px 20px; font-size: 14px; }
  .qm-list .sub-menu {
    position: static; display: none; width: auto; padding: 0 0 8px 12px; overflow: visible;
    background: none; border: 0; opacity: 1; visibility: visible; transition: none;
  }
  .qm-list li.is-open > .sub-menu { display: block; }
  .qm-list .sub-menu a:hover { padding-left: 20px; }
  .qm-list .menu-item-has-children > a::after { content: "+"; font-size: 18px; }
  .qm-list .menu-item-has-children.is-open > a::after { content: "\2013"; }
}
@media (prefers-reduced-motion: reduce) {
  .qm-panel, .qm-toggle span, .qm-list .sub-menu, .qm-list a { transition: none; }
}