/* Desktop menu (#153): the row under the header and the category dropdown. Linked in head.tpl off a smartphone, after
   custom.css. From 1024px «Tutte le categorie» opens the dropdown, below 1024px the mobile menu (ziu-menu.css).
   Row markup: templates/_partials/header.tpl and
   modules/zonemegamenu/views/templates/hook/zonemegamenu.tpl. Panel markup: templates/_partials/ziu-panel.tpl,
   rail and pane built by initializeDesktopPanel() in assets/js/ziu-menu.js.
   Links set their border with !important and every shadow needs !important (trap 9 in theme.md). */

/*-----------------------
THE ROW
 ----------------------*/
/* The turquoise of the logo, with white text, on the row and on the sticky row. theme.css loads after this file and
   gives the sticky row "background: inherit" with #header .desktop-sticky-wrapper.is-sticky [data-sticky-menu]. */
#header .header-main-menu,
#header .desktop-sticky-wrapper.is-sticky .header-main-menu[data-sticky-menu] {
  background: var(--ziu-logo-turquoise);
}
#header .header-bottom .header-main-menu-wrapper {
  display: flex;
  align-items: stretch;
  height: 56px;
}
/* The sticky plugin writes the height of the row inline on the wrapper. */
#header .desktop-sticky-wrapper {
  height: 56px !important;
}
#header .header-main-menu-wrapper .ziu-bar-ic {
  width: 24px;
  height: 24px;
  flex: none;
}
#header .header-main-menu-wrapper .ziu-bar-ic path {
  fill: currentColor;
}
#header .header-main-menu-wrapper .ziu-bar-big {
  position: static;
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 6px 0;
  padding: 0 12px;
  color: var(--text-lighter);
  font-weight: 700;
  cursor: pointer;
  user-select: none;
}
#header .ziu-bar-big-title {
  font-size: 15px;
  line-height: 1.2;
}
#header .ziu-bar-items {
  flex: none;
  display: flex;
  margin-left: auto;
}
#header .ziu-bar-item {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 6px 0;
  padding: 0 12px;
  color: var(--text-lighter) !important;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
}
#header .header-main-menu-wrapper .ziu-bar-item .ziu-bar-ic {
  width: 20px;
  height: 20px;
}
#header .ziu-bar-big,
#header .ziu-bar-item {
  border-radius: var(--radius-leaf);
}
@media (hover: hover) {
  #header .ziu-bar-big:hover,
  #header .ziu-bar-item:hover {
    box-shadow: var(--shadow-bar) !important;
  }
}
#header .ziu-bar-big:focus-visible,
#header .ziu-bar-item:focus-visible {
  outline: 2px solid var(--text-lighter);
  outline-offset: -2px;
}
#header .ziu-bar-mark {
  display: none;
  color: var(--text-lighter);
}
#header .ziu-bar-mark .ziu-bar-ic {
  width: 36px;
  height: 36px;
}

/* Sticky: the white logo, the button, the entries, the cart, and a shadow that separates the row from the page. */
#header .desktop-sticky-wrapper.is-sticky .header-main-menu {
  box-shadow: var(--shadow-sticky) !important;
}
#header .desktop-sticky-wrapper.is-sticky .sticky-logo {
  display: flex;
  padding: 0 16px 0 0;
}
#header .desktop-sticky-wrapper.is-sticky .sticky-logo img.logo {
  height: 36px;
}
#header .desktop-sticky-wrapper.is-sticky .ziu-bar-items {
  margin-right: 16px;
}
#header .header-main-menu-wrapper .sticky-icon-cart {
  display: none;
  position: static;
  flex: none;
  align-self: center;
}
#header .desktop-sticky-wrapper.is-sticky .sticky-icon-cart {
  display: block;
}
#header .header-main-menu-wrapper .sticky-icon-cart a {
  width: 48px;
  height: 48px;
  border: 0 !important;
  border-radius: var(--border-radius) !important;
  background: var(--surface-color);
}

/* Below 1000px the entries put the icon above the text, and the sticky row shows the logomark. */
@media (max-width: 999px) {
  #header .ziu-bar-item {
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    padding: 0 10px;
  }
  #header .desktop-sticky-wrapper.is-sticky .sticky-logo {
    padding-right: 12px;
  }
  #header .desktop-sticky-wrapper.is-sticky .sticky-logo > a:not(.ziu-bar-mark) {
    display: none;
  }
  #header .desktop-sticky-wrapper.is-sticky .ziu-bar-mark {
    display: flex;
    align-items: center;
  }
  #header .desktop-sticky-wrapper.is-sticky .ziu-bar-items {
    margin-right: 12px;
  }
}

/*-----------------------
THE PANEL
 ----------------------*/
/* Every rule starts from .ziu-panel so it outranks the theme's a:hover and h2/h3 rules.
   A dropdown under the row: ziu-menu.js writes in --ziu-drop-top where the visible row ends, at the top of the page
   or sticky. theme.css translates and animates every property of .st-menu: transform and transition need !important. */
html .st-menu.st-effect-left.ziu-panel {
  top: var(--ziu-drop-top, 70px);
  left: 20px;
  z-index: 1002;
  width: 1100px;
  max-width: calc(100vw - 40px);
  height: auto;
  max-height: calc(100vh - var(--ziu-drop-top, 70px) - 24px);
  padding-bottom: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--background-color);
  border-radius: 0 0 16px 16px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .25) !important;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-12px) !important;
  transition: opacity 180ms ease-out, transform 180ms ease-out, visibility 0s 180ms !important;
}
html.st-effect-left.st-menu-open .st-menu.st-effect-left.ziu-panel {
  opacity: 1;
  visibility: visible;
  transform: none !important;
  transition: opacity 180ms ease-out, transform 180ms ease-out !important;
}
/* Both menus are on the page: the width picks one. */
@media (min-width: 1024px) {
  html .st-menu.ziu-menu {
    display: none;
  }
  /* The page under the row turns dark; the row stays clickable. */
  html.st-effect-left.st-menu-open .ziu-panel ~ .st-overlay {
    top: var(--ziu-drop-top, 70px);
    background: rgba(0, 0, 0, .5);
  }
  html.st-effect-left.st-menu-open .ziu-panel ~ #page #header .header-main-menu {
    z-index: 1001;
  }
}
/* 1023.98px: a zoomed window can be 1023.5px wide, and neither query would hide a menu. */
@media (max-width: 1023.98px) {
  html .st-menu.st-effect-left.ziu-panel {
    display: none;
  }
}
.st-effect-left.st-menu-open #amazzing_filter {
  visibility: hidden;
}
.ziu-panel * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: Inter, sans-serif;
}
.ziu-panel a,
.ziu-panel button {
  all: unset;
  cursor: pointer;
  box-sizing: border-box;
}
.ziu-panel a:focus-visible,
.ziu-panel button:focus-visible {
  outline: 2px solid var(--primary-color-hover);
  outline-offset: 2px;
}
.ziu-panel ul {
  list-style: none;
}
.ziu-panel .ziu-panel-ic,
.ziu-panel .ziu-menu-ic {
  width: 24px;
  height: 24px;
  flex: none;
  display: block;
}
.ziu-panel .ziu-panel-ic path,
.ziu-panel .ziu-menu-ic path {
  fill: var(--primary-color-dark);
}

.ziu-panel .ziu-panel-head-name:focus {
  outline: none;
}

.ziu-panel .ziu-panel-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  scrollbar-gutter: stable;
  padding: 16px;
}
.ziu-panel .ziu-panel-grid {
  display: grid;
  grid-template-columns: 330px minmax(0, 1fr);
  gap: 16px;
}
.ziu-panel .ziu-panel-rail {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ziu-panel .ziu-panel-r {
  display: flex;
  gap: 8px;
}
.ziu-panel .ziu-panel-go {
  flex: 1;
  min-width: 0;
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  background: var(--surface-color);
  border: 1px solid var(--primary-color-dark) !important;
  border-radius: var(--radius-leaf) !important;
  font-size: 16px;
  line-height: 1.3;
  color: var(--text-dark);
  white-space: nowrap;
  transition: background-color var(--motion-press), border-color var(--motion-press);
}
.ziu-panel .ziu-panel-go-l1 {
  padding: 6px 14px 6px 8px;
}
.ziu-panel .ziu-panel-go-l1 .ziu-panel-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-title);
}
.ziu-panel .ziu-panel-leaf {
  flex: none;
  width: 36px;
  height: 36px;
  padding: 6px;
  background: var(--primary-color-soft);
  border-radius: var(--radius-leaf);
}
.ziu-panel .ziu-panel-open {
  flex: none;
  width: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primary-color-soft);
  border: 1px solid var(--primary-color-dark);
  border-radius: var(--radius-leaf);
  transition: background-color var(--motion-press);
}
.ziu-panel .ziu-panel-slot {
  flex: none;
  width: 56px;
}
.ziu-panel .ziu-panel-sel .ziu-panel-go {
  background: var(--primary-color-soft);
  border-color: var(--primary-color-dark) !important;
  box-shadow: inset 4px 0 0 var(--primary-color-dark) !important;
}
.ziu-panel .ziu-panel-sel .ziu-panel-open {
  background: var(--primary-color-dark);
}
.ziu-panel .ziu-panel-sel .ziu-panel-open path {
  fill: var(--text-lighter);
}
@media (hover: hover) {
  .ziu-panel .ziu-panel-go:hover {
    background: var(--primary-color-soft);
    border-color: var(--primary-color-dark) !important;
  }
  .ziu-panel .ziu-panel-open:hover {
    background: var(--primary-color-dark);
  }
  .ziu-panel .ziu-panel-open:hover path {
    fill: var(--text-lighter);
  }
}

/* Seven pulsing rows while the category tree loads. */
.ziu-panel .ziu-panel-skel {
  min-height: 48px;
  background: var(--surface-color);
  border-radius: var(--radius-leaf);
}
.st-menu-open .ziu-panel .ziu-panel-skel {
  animation: ziu-panel-pulse 1.2s ease-in-out infinite alternate;
}
@keyframes ziu-panel-pulse {
  from { opacity: 1; }
  to { opacity: .4; }
}

.ziu-panel .ziu-panel-pane {
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 24px;
  background: var(--surface-color);
  border-radius: var(--radius-leaf);
}
.ziu-panel .ziu-panel-pane-empty {
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 18px;
  line-height: 1.4;
  color: var(--text-gray);
}
.ziu-panel .ziu-panel-back {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  margin-bottom: 8px;
  padding: 0 14px;
  background: var(--spine-3);
  border-radius: var(--radius-leaf);
  color: var(--text-lighter);
  font-size: 15px;
  font-weight: 600;
  text-align: left;
}
.ziu-panel .ziu-panel-back-2 {
  background: var(--spine-2);
}
/* No color-mix() before iOS 16.2 / Chrome 111: the strip would turn transparent under white text. */
@supports not (color: color-mix(in srgb, red, red)) {
  .ziu-panel .ziu-panel-back-2 {
    background: #115655;
  }
}
.ziu-panel .ziu-panel-back path {
  fill: var(--text-lighter);
}
.ziu-panel .ziu-panel-back:focus-visible {
  outline-offset: -4px;
  outline-color: var(--text-lighter);
}
.ziu-panel .ziu-panel-back + .ziu-panel-headrow {
  margin-top: 16px;
}
.ziu-panel .ziu-panel-headrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
}
.ziu-panel .ziu-panel-head {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.ziu-panel .ziu-panel-head-name {
  font: 700 24px/1.2 Inter, sans-serif;
  color: var(--text-title);
  text-transform: none;
  overflow-wrap: anywhere;
}
.ziu-panel .ziu-panel-all {
  flex: none;
  height: 48px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
  background: var(--surface-color);
  border: 2px solid var(--primary-color-dark) !important;
  border-radius: var(--radius-leaf) !important;
  font-size: 16px;
  font-weight: 600;
  color: var(--primary-color-dark);
  white-space: nowrap;
}
.ziu-panel .ziu-panel-all:hover {
  background: var(--primary-color-soft);
}
/* The subcategories: names only, each on one line, with a pale border: the seven categories have the dark one.
   ziu-menu.js sets --ziu-panel-rows: one column up to 8 names, two past 8, filled column by column. */
.ziu-panel .ziu-panel-subs {
  margin-top: 16px;
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: repeat(2, max-content);
  grid-template-rows: repeat(var(--ziu-panel-rows, 8), auto);
  gap: 8px 32px;
}
.ziu-panel .ziu-panel-subs .ziu-panel-r {
  gap: 4px;
}
.ziu-panel .ziu-panel-subs .ziu-panel-go {
  min-height: 40px;
  padding: 8px 12px;
  border-color: var(--ziu-turquoise-pale) !important;
}
.ziu-panel .ziu-panel-subs .ziu-panel-open {
  width: 40px;
  border-color: var(--ziu-turquoise-pale);
}
.ziu-panel .ziu-panel-subs .ziu-panel-open:not(:hover) {
  background: none;
}
@media (hover: hover) {
  .ziu-panel .ziu-panel-subs .ziu-panel-go:hover {
    border-color: var(--primary-color-dark) !important;
  }
}

/* Below 1140px the dropdown is narrower than 1100px: a narrower rail leaves the pane room for two columns of names. */
@media (max-width: 1139.98px) {
  .ziu-panel .ziu-panel-grid {
    grid-template-columns: 260px minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .st-menu-open .ziu-panel .ziu-panel-skel {
    animation: none;
  }
}