/* ==========================================================================
   masquenautica · Menú móvil dentro de la hamburguesa (v2, independiente del tema)
   Funciona con el tema Classic (entorno de pruebas) y con theme_rozer4 (web oficial).
   Forma parte del módulo mqnmobilemenu
   ========================================================================== */

/* 1. En móvil, el bloque azul de categorías deja de mostrarse en la página.
      La clase mqn-mobile la pone el script cuando la hamburguesa está visible. */
html.mqn-mobile nav.mnmm { display: none !important; }
/* Evita el parpadeo del bloque azul antes de que cargue el script */
@media (max-width: 767px) { nav.mnmm { display: none !important; } }

html.mqn-lock, html.mqn-lock body { overflow: hidden; }

/* 2. Fondo oscurecido */
.mqn-backdrop {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 10000;
  background: rgba(10, 20, 40, .5);
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s, visibility .3s;
}
.mqn-backdrop.is-open { opacity: 1; visibility: visible; }

/* 3. Panel lateral */
.mqn-drawer {
  position: fixed;
  top: 0; bottom: 0; left: 0;
  z-index: 10001;
  width: 86vw;
  max-width: 350px;
  display: flex;
  flex-direction: column;
  background: #fff;
  color: #14213a;
  box-shadow: 0 0 24px rgba(10, 20, 40, .25);
  transform: translateX(-105%);
  visibility: hidden;
  transition: transform .3s, visibility .3s;
  text-align: left;
}
.mqn-drawer.is-open { transform: translateX(0); visibility: visible; }
.mqn-drawer * { box-sizing: border-box; }

.mqn-bar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 54px;
  padding: 0 4px 0 20px;
  background: #144396;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
}
.mqn-close {
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: 0; padding: 0;
  color: #fff; cursor: pointer;
}
.mqn-close svg { width: 22px; height: 22px; }
.mqn-scroll { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; }

/* 4. Lista de categorías por niveles */
.mqn-list { list-style: none; margin: 0; padding: 0; }
.mqn-list > li { margin: 0; padding: 0; border-bottom: 1px solid #e3e7ee; }

.mqn-drawer .mqn-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 50px;
  padding: 8px 14px 8px 20px;
  background: none;
  border: 0;
  border-radius: 0;
  text-align: left;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  color: #14213a;
  text-decoration: none;
  text-transform: none;
  cursor: pointer;
}
.mqn-drawer .mqn-item:hover, .mqn-drawer .mqn-item:focus { color: #144396; text-decoration: none; }
.mqn-drawer .mqn-item:focus-visible,
.mqn-drawer .mqn-back:focus-visible,
.mqn-drawer .mqn-close:focus-visible { outline: 2px solid #f0a23b; outline-offset: -2px; }
.mqn-drawer .mqn-item--root { font-weight: 700; }
.mqn-label { flex: 1 1 auto; min-width: 0; }
/* Icono sobre recuadro azul: sirve igual para los iconos de línea y para los
   iconos propios en blanco subidos al megamenú */
.mqn-ico {
  flex: 0 0 32px; width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 8px; background: #144396; color: #fff;
}
.mqn-ico svg {
  width: 19px; height: 19px;
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
.mqn-ico img { display: block; width: 19px; height: 19px; object-fit: contain; }
.mqn-chev { flex: 0 0 18px; width: 18px; height: 18px; color: #55607a; }

/* Cabecera de subnivel: volver, título y "Ver todo" */
.mqn-drawer .mqn-back {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  min-height: 46px;
  padding: 0 20px 0 12px;
  background: #eef1f6;
  border: 0;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: #3a4763;
  text-align: left;
  cursor: pointer;
}
.mqn-back svg { width: 18px; height: 18px; flex: 0 0 18px; }
.mqn-title { margin: 0; padding: 16px 20px 4px; font-size: 17px; font-weight: 700; line-height: 1.25; color: #14213a; }
.mqn-drawer .mqn-all {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 10px 16px 8px;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 8px;
  background: #eef1f6;
  font-size: 14px;
  font-weight: 700;
  color: #144396;
  text-decoration: none;
}
.mqn-drawer .mqn-all:hover { color: #0e2c68; text-decoration: none; }
.mqn-all svg { width: 18px; height: 18px; }

/* 5. Enlaces secundarios: cuenta, wishlist, contacto, idioma */
.mqn-extra { padding: 8px 0 16px; }
.mqn-drawer .mqn-extra a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 20px;
  font-size: 14px;
  font-weight: 400;
  color: #3a4763;
  text-decoration: none;
}
.mqn-drawer .mqn-extra a:hover { color: #144396; }
.mqn-langs { display: flex; flex-wrap: wrap; gap: 8px; padding: 8px 20px 0; }
.mqn-drawer .mqn-langs a {
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid #c5ccda;
  border-radius: 18px;
  font-size: 13px;
}
.mqn-drawer .mqn-langs a.is-current { border-color: #144396; color: #144396; font-weight: 700; }