/* Botón flotante + panel "bottom sheet" de categorías, solo visible por
   debajo de 1025px (mismo breakpoint que usa el header de Elementor para
   ocultar el botón "Menú" de escritorio). Centrado abajo, como una barra
   propia, en vez de anclado a una esquina: el carrito flotante (XT Woo
   Floating Cart) y el widget de WhatsApp ya ocupan las esquinas
   inferiores, así que quedar centrado evita taparlos sin depender de en
   cuál esquina esté cada uno. */

.eco-mobile-menu-fab,
.eco-mobile-menu-backdrop,
.eco-mobile-menu-sheet {
  display: none;
}

@media (max-width: 1024px) {
  .eco-mobile-menu-fab {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: max(14px, env(safe-area-inset-bottom));
    z-index: 99990;
    background: #ff7f30;
    color: #fff;
    border: none;
    border-radius: 999px;
    padding: 12px 16px;
    font-size: 13px;
    font-weight: 700;
    box-shadow: 0 6px 18px rgba(15, 34, 68, 0.28);
    cursor: pointer;
    /* Deja libres las esquinas inferiores para el carrito flotante y el
       widget de WhatsApp, sin importar en cuál esquina esté cada uno. */
    max-width: calc(100vw - 168px);
    white-space: nowrap;
  }

  .eco-mobile-menu-fab:active {
    transform: translateX(-50%) scale(0.96);
  }

  .eco-mobile-menu-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 34, 68, 0.45);
    z-index: 2147483646;
    opacity: 0;
    transition: opacity .2s ease;
  }
  .eco-mobile-menu-backdrop.is-open {
    display: block;
    opacity: 1;
  }

  .eco-mobile-menu-sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    max-height: 82vh;
    background: #fff;
    border-radius: 16px 16px 0 0;
    /* Máximo z-index práctico: el widget flotante de WhatsApp (de terceros,
       fuera de este repo) usa uno muy alto y terminaba tapando la lectura
       del panel de categorías. Esto garantiza que el panel siempre quede
       por encima, sin depender de conocer/ajustar el z-index del widget. */
    z-index: 2147483647;
    box-shadow: 0 -8px 24px rgba(15, 34, 68, 0.2);
    transform: translateY(100%);
    transition: transform .25s cubic-bezier(.32,.72,0,1);
    display: flex;
    flex-direction: column;
    padding-bottom: max(10px, env(safe-area-inset-bottom));
  }
  .eco-mobile-menu-sheet.is-open {
    display: flex;
    transform: translateY(0);
  }

  .eco-mobile-menu-sheet__handle {
    width: 40px;
    height: 4px;
    background: #d8e0da;
    border-radius: 999px;
    margin: 10px auto 4px;
    flex-shrink: 0;
  }

  .eco-mobile-menu-sheet__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 18px 10px;
    border-bottom: 1px solid #ebedef;
    flex-shrink: 0;
  }

  .eco-mobile-menu-sheet__title {
    font-weight: 800;
    font-size: 16px;
    color: #0f2244;
  }

  .eco-mobile-menu-sheet__close {
    background: #f4f5f6;
    border: none;
    border-radius: 50%;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #20272b;
    cursor: pointer;
  }

  .eco-mobile-menu-sheet__body {
    overflow-y: auto;
    padding: 8px 18px 18px;
    -webkit-overflow-scrolling: touch;
  }

  /* Dentro del sheet, la variante acordeón gana un poco de aire táctil
     respecto a la versión embebida en la columna angosta del header. */
  .eco-mobile-menu-sheet .eco-megamenu-acc {
    max-height: none;
  }
  .eco-mobile-menu-sheet .eco-megamenu-acc__toggle {
    padding: 12px 4px;
    font-size: 15px;
  }
  .eco-mobile-menu-sheet .eco-megamenu-acc__toggle--l2 {
    padding: 10px 4px;
    font-size: 14px;
  }
  .eco-mobile-menu-sheet .eco-megamenu-acc__item--l3 a {
    padding: 9px 4px;
    font-size: 14px;
  }

  body.eco-mobile-menu-open {
    overflow: hidden;
  }

  /* Refuerzo además del z-index de arriba: mientras el panel de categorías
     o el menú hamburguesa nativo están abiertos, se oculta cualquier widget
     flotante de WhatsApp (de terceros, nombre de clase/ID desconocido desde
     este repo) para que no tape la lectura. Selector amplio a propósito. */
  body.eco-mobile-menu-open [class*="whatsapp" i],
  body.eco-mobile-menu-open [id*="whatsapp" i],
  body.eco-native-menu-open [class*="whatsapp" i],
  body.eco-native-menu-open [id*="whatsapp" i] {
    visibility: hidden !important;
  }
}