/*
 * ZELMIO_MOBILE_CATEGORIES_V2
 *
 * Solo afecta a móvil.
 */

@media (max-width: 900px) {

  :root {
    --zelmio-cat-top: 150px;
    --zelmio-cat-bottom: 82px;
  }


  /*
   * Panel principal
   */
  .zelmio-mega-menu {
    position: fixed !important;

    top:
      var(--zelmio-cat-top) !important;

    left:
      12px !important;

    right:
      12px !important;

    bottom:
      var(--zelmio-cat-bottom) !important;

    width:
      auto !important;

    height:
      auto !important;

    max-width:
      none !important;

    max-height:
      none !important;

    margin:
      0 !important;

    padding:
      0 14px 18px !important;

    overflow-y:
      auto !important;

    overflow-x:
      hidden !important;

    overscroll-behavior:
      contain !important;

    -webkit-overflow-scrolling:
      touch;

    border:
      1px solid
      rgba(17,24,39,.08) !important;

    border-radius:
      18px !important;

    background:
      #ffffff !important;

    box-shadow:
      0 22px 55px
      rgba(15,23,42,.22) !important;

    z-index:
      9500 !important;

    box-sizing:
      border-box !important;

    scroll-behavior:
      auto !important;
  }


  /*
   * Cabecera pegada dentro del panel
   */
  .zelmio-mobile-cat-head {
    position:
      sticky;

    top:
      0;

    z-index:
      10;

    display:
      flex;

    align-items:
      center;

    justify-content:
      space-between;

    gap:
      12px;

    min-height:
      54px;

    margin:
      0 -14px 14px;

    padding:
      0 15px;

    border-bottom:
      1px solid #eef0f3;

    background:
      rgba(255,255,255,.98);

    backdrop-filter:
      blur(10px);
  }


  .zelmio-mobile-cat-head strong {
    color:
      #111827;

    font-size:
      16px;

    font-weight:
      850;
  }


  .zelmio-mobile-cat-close {
    display:
      inline-flex;

    align-items:
      center;

    justify-content:
      center;

    width:
      36px;

    height:
      36px;

    flex:
      0 0 36px;

    padding:
      0;

    border:
      0;

    border-radius:
      50%;

    background:
      #f3f4f6;

    color:
      #374151;

    font:
      inherit;

    font-size:
      20px;

    cursor:
      pointer;

    touch-action:
      manipulation;
  }


  /*
   * Categorías: dos columnas limpias
   */
  .zelmio-mega-menu-grid,
  .zelmio-mega-menu
  .zelmio-category-grid {
    display:
      grid !important;

    grid-template-columns:
      repeat(2, minmax(0,1fr)) !important;

    gap:
      10px 12px !important;
  }


  .zelmio-mega-menu a {
    min-width:
      0;

    box-sizing:
      border-box;
  }


  /*
   * Evitar que el contenido inferior se
   * transparente visualmente.
   */
  .zelmio-mega-menu::after {
    content:
      "";

    display:
      block;

    height:
      4px;
  }


  /*
   * Buscador un poco más compacto en móvil.
   * Solo tocamos su altura visual.
   */
  #searchInput,
  .search-box,
  .header-search input,
  .search-bar input {
    min-height:
      48px !important;
  }


  /*
   * Cuando categorías está abierto,
   * evitamos scroll de la página de fondo.
   */
  body.zelmio-categories-open {
    overflow:
      hidden !important;

    overscroll-behavior:
      none;
  }

}