/* ═══════════════════════════════════════════════════════════════════
   MZ Mobile Menu – Offcanvas slide a livelli
   Tutto scoped sotto #mz-mob-root per zero conflitti
   ═══════════════════════════════════════════════════════════════════ */

/* ── Root container ──────────────────────────────────────────────── */
#mz-mob-root {
  position: relative;
  overflow: hidden;           /* clip degli slide */
  width: 100%;
  /* In offcanvas (contenitori con height:auto), 100% può diventare 0.
     Forziamo un'altezza "viewport-based" così i pannelli assoluti restano visibili. */
  height: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  background: #fff;
  color: #111;
  display: block;
}

/* ── Bricks Offcanvas: evita “testo bianco su sfondo bianco” ─────────
   Bricks/offcanvas può impostare colori globali (anche con !important).
   Qui forziamo i colori del menu dentro l’offcanvas, senza impattare il resto. */
.brxe-offcanvas-inner #mz-mob-root,
.brxe-offcanvas-inner #mz-mob-root a,
.brxe-offcanvas-inner #mz-mob-root button {
  color: #111 !important;
}

.brxe-offcanvas-inner #mz-mob-root {
  background: #fff !important;
}

.brxe-offcanvas-inner #mz-mob-root .mz-mob-pill {
  color: #888 !important;
  background: #fff !important;
  border-color: #ddd !important;
}

.brxe-offcanvas-inner #mz-mob-root .mz-mob-pill.is-active {
  background: #111 !important;
  color: #fff !important;
  border-color: #111 !important;
}

.brxe-offcanvas-inner #mz-mob-root .mz-mob-row__arrow {
  border-right-color: #aaa !important;
  border-top-color: #aaa !important;
}

.brxe-offcanvas-inner #mz-mob-root .mz-mob-back__icon {
  border-left-color: #111 !important;
  border-bottom-color: #111 !important;
}

/* ── Livelli: L0 (principale) e L1 (sotto-pannelli) ─────────────── */
.mz-mob-l0,
.mz-mob-l1 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  min-height: 100%;
  background: #fff;
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Stato default: L0 visibile, L1 fuori a destra */
.mz-mob-l0 {
  transform: translateX(0);
  z-index: 1;
}

.mz-mob-l1 {
  transform: translateX(100%);
  z-index: 2;
}

/* Quando L1 è attivo: L0 esce a sinistra, L1 entra */
#mz-mob-root.pushed .mz-mob-l0 {
  transform: translateX(-30%);  /* effetto profondità */
}

.mz-mob-l1.is-active {
  transform: translateX(0);
}

/* ── Pills genere (Donna / Uomo) ─────────────────────────────────── */
.mz-mob-pills {
  display: flex;
  gap: 0;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 16px 16px 0;
  -webkit-overflow-scrolling: touch;
}

.mz-mob-pills::-webkit-scrollbar { display: none; }

.mz-mob-pill {
  flex-shrink: 0;
  padding: 8px 20px;
  border-radius: 999px;
  border: 1.5px solid #ddd;
  background: #fff;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  color: #888;
  margin-right: 8px;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.mz-mob-pill.is-active {
  background: #111;
  color: #fff;
  border-color: #111;
}

/* ── Pannelli tipologia (uno per genere, uno visibile) ───────────── */
.mz-mob-tipologie {
  display: none;
  padding-top: 8px;
}

.mz-mob-tipologie.is-active {
  display: block;
}

/* ── Riga generica ───────────────────────────────────────────────── */
.mz-mob-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 15px 16px;
  font-size: 14px;
  font-weight: 500;
  color: #111;
  background: none;
  border: none;
  border-bottom: 1px solid #f0f0f0;
  text-decoration: none;
  cursor: pointer;
  text-align: left;
  box-sizing: border-box;
}

.mz-mob-row:last-child {
  border-bottom: none;
}

.mz-mob-row:active {
  background: #f9f9f9;
}

/* Freccia destra */
.mz-mob-row__arrow {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-right: 2px solid #aaa;
  border-top: 2px solid #aaa;
  transform: rotate(45deg);
  flex-shrink: 0;
  margin-right: 4px;
}

/* Voci secondarie (bambino, outlet ecc.) */
.mz-mob-row--secondary {
  font-size: 13px;
  font-weight: 400;
  color: #555;
}

/* ── Separatori ──────────────────────────────────────────────────── */
.mz-mob-sep {
  height: 1px;
  background: #f0f0f0;
  margin: 4px 0;
}

.mz-mob-sep--strong {
  height: 6px;
  background: #f5f5f5;
  margin: 8px 0;
}

/* ── Tasto back (L1) ─────────────────────────────────────────────── */
.mz-mob-back {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 16px 16px;
  background: none;
  border: none;
  border-bottom: 2px solid #f0f0f0;
  font-size: 14px;
  font-weight: 700;
  color: #111;
  cursor: pointer;
  text-align: left;
  letter-spacing: 0.02em;
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 1;
}

.mz-mob-back__icon {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-left: 2px solid #111;
  border-bottom: 2px solid #111;
  transform: rotate(45deg);
  flex-shrink: 0;
}

/* ── Lista categorie nel L1 ──────────────────────────────────────── */
.mz-mob-cat-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.mz-mob-cat-list li a {
  display: block;
  padding: 14px 16px;
  font-size: 14px;
  color: #333;
  text-decoration: none;
  border-bottom: 1px solid #f5f5f5;
}

.mz-mob-cat-list li:last-child a {
  border-bottom: none;
}

.mz-mob-cat-list li a:active {
  background: #f9f9f9;
}

/* ── Brands grid nel L1 ──────────────────────────────────────────── */
.mz-mob-brands-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  padding: 16px;
}

.mz-mob-brand-item {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  border: 1px solid #eee;
  border-radius: 6px;
  text-decoration: none;
}

.mz-mob-brand-item img {
  max-width: 100%;
  max-height: 40px;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* Nota: non nascondere #mz-mob-root su desktop.
   Questo markup viene iniettato dentro l'offcanvas: se lo testi da desktop (>768px)
   e lo nascondiamo, l'offcanvas risulta "vuoto/bianco". */