/* ALTHA · Corrección fiel al video aportado por el cliente (solo móvil)
   Una única barra superior, que permanece exactamente en su lugar.
   El mismo botón de dos líneas se transforma en X; el menú ocupa el área
   BAJO la barra superior. Se mantiene el color corporativo, no se copia
   la marca de la web utilizada como referencia.
*/
@media (max-width:900px) {
  :root {
    --altha-nav-height: 69px;
    --altha-menu-surface: #F4F1EB;
    --altha-menu-ink: #161B1F;
    --altha-menu-line: #DEDAD2;
    --altha-menu-accent: #F48C54;
  }

  /* El encabezado ORIGINAL queda en primer plano sin cambiar su estructura.
     Solo existe un logo, un botón de menú y un botón de búsqueda. */
  .header,
  body.drawer-open .header {
    position:sticky !important;
    top:0 !important;
    z-index:210 !important;
    background:#0A0D0F !important;
    overflow:visible !important;
    isolation:isolate;
  }
  .header .menu-toggle {
    -webkit-appearance:none;
    appearance:none;
    display:flex !important;
    flex-direction:column !important;
    gap:7px !important;
    align-items:center;
    justify-content:center;
    background:transparent!important;
    border:none!important;
    border-radius:0!important;
    box-shadow:none!important;
    transform:none!important;
    transition:none!important;
    padding:9px!important;
    width:48px!important;
    height:48px!important;
  }
  .header .menu-toggle span {
    display:block!important;
    width:26px!important;
    height:1.8px!important;
    flex:0 0 1.8px;
    border-radius:1px;
    background:currentColor!important;
    transform:translateY(0) rotate(0)!important;
    transform-origin:center center;
    transition:transform .32s cubic-bezier(.22,.8,.2,1)!important;
    will-change:transform;
  }
  /* Distancia entre centros de las líneas: 1.8px + 7px = 8.8px. */
  .header .menu-toggle[aria-expanded="true"] span:first-child {
    transform:translateY(4.4px) rotate(45deg)!important;
  }
  .header .menu-toggle[aria-expanded="true"] span:last-child {
    transform:translateY(-4.4px) rotate(-45deg)!important;
  }
  .header .menu-toggle:is(:hover,:active),
  .header .search-trigger:is(:hover,:active) {
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
    transform:none!important;
  }

  /* Al abrir, solamente el área BAJO el header se convierte en menú.
     No hay un segundo navbar, ni otra X flotante ni logotipo repetido. */
  .mobile-drawer,
  body.drawer-open .mobile-drawer {
    position:fixed!important;
    inset:var(--altha-nav-height) 0 0 0!important;
    top:var(--altha-nav-height)!important;
    bottom:0!important;
    left:0!important;
    right:0!important;
    width:100%!important;
    max-width:100vw!important;
    min-height:0!important;
    height:calc(100dvh - var(--altha-nav-height))!important;
    max-height:calc(100dvh - var(--altha-nav-height))!important;
    z-index:190!important;
    display:flex!important;
    flex-direction:column!important;
    background:var(--altha-menu-surface)!important;
    color:var(--altha-menu-ink)!important;
    overflow:hidden!important;
    border:0!important;
    border-radius:0!important;
    box-shadow:none!important;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    transition:transform .38s cubic-bezier(.22,.8,.24,1),visibility .38s!important;
  }
  .mobile-drawer {
    transform:translate3d(-101%,0,0)!important;
    visibility:hidden!important;
    pointer-events:none!important;
  }
  body.drawer-open .mobile-drawer {
    transform:translate3d(0,0,0)!important;
    visibility:visible!important;
    pointer-events:auto!important;
  }
  .drawer-backdrop {display:none!important;}
  .mobile-drawer .drawer-head {display:none!important;}

  /* Navegación Shopify-like: zona de enlaces arriba, footer al fondo;
     el contenido SOLO se desplaza cuando excede el espacio libre. */
  .mobile-drawer .drawer-scroll {
    flex:1 1 auto!important;
    min-height:0!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    overscroll-behavior-y:contain;
    -webkit-overflow-scrolling:touch;
    touch-action:pan-y;
    scrollbar-width:thin;
    padding:0 0 1.3rem!important;
    background:var(--altha-menu-surface)!important;
  }
  .mobile-drawer .drawer-main {
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    margin:0!important;
    padding:1.05rem 0 .35rem!important;
    background:transparent!important;
    gap:0!important;
  }
  .mobile-drawer .drawer-main a {
    display:flex!important;
    align-items:center!important;
    width:100%!important;
    min-height:53px!important;
    padding:.82rem clamp(1.2rem,5vw,2rem)!important;
    margin:0!important;
    border:0!important;
    border-bottom:1px solid var(--altha-menu-line)!important;
    border-radius:0!important;
    color:var(--altha-menu-ink)!important;
    background:transparent!important;
    font-size:clamp(1rem,3.8vw,1.13rem)!important;
    font-weight:550!important;
    letter-spacing:0!important;
    line-height:1.2!important;
    text-align:left!important;
    transition:none!important;
    transform:none!important;
  }
  .mobile-drawer .drawer-main a:is(:hover,:focus) {
    padding-left:clamp(1.2rem,5vw,2rem)!important;
    background:transparent!important;
    color:var(--altha-menu-ink)!important;
  }
  .mobile-drawer .drawer-main a[aria-current="page"] {font-weight:750!important;}
  /* La lupa ya está en el navbar, no necesitamos duplicarla en el menú. */
  .mobile-drawer .drawer-search-link {display:none!important;}

  .mobile-drawer .drawer-accordion {
    margin:1rem clamp(1.2rem,5vw,2rem) .8rem!important;
    border:0!important;
    background:transparent!important;
  }
  .mobile-drawer .drawer-accordion summary {
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    min-height:48px!important;
    padding:.7rem 0!important;
    margin:0!important;
    border-top:1px solid var(--altha-menu-line)!important;
    font-size:.92rem!important;
    font-weight:600!important;
    color:var(--altha-menu-ink)!important;
  }
  .mobile-drawer .drawer-accordion-icon {font-size:1.2rem!important;}
  .mobile-drawer #drawer-categories a {
    color:var(--altha-menu-ink)!important;
    min-height:44px!important;
    padding:.58rem 0!important;
    border-bottom:1px solid var(--altha-menu-line)!important;
    background:transparent!important;
    font-size:.91rem!important;
  }
  .mobile-drawer .drawer-secondary {
    display:flex!important;
    margin:.35rem clamp(1.2rem,5vw,2rem) 0!important;
    gap:.1rem .95rem!important;
    flex-wrap:wrap!important;
  }
  .mobile-drawer .drawer-secondary a {
    min-height:36px!important;
    padding:.35rem 0!important;
    font-size:.76rem!important;
    color:#50585A!important;
  }
  .mobile-drawer .drawer-footer {
    flex:0 0 auto!important;
    display:flex!important;
    flex-direction:column!important;
    gap:.4rem!important;
    padding:.85rem clamp(1.2rem,5vw,2rem) max(1rem,env(safe-area-inset-bottom))!important;
    margin:0!important;
    border-top:1px solid var(--altha-menu-line)!important;
    background:var(--altha-menu-surface)!important;
    color:var(--altha-menu-ink)!important;
  }
  .mobile-drawer .drawer-instagram {
    color:var(--altha-menu-ink)!important;
    min-height:28px!important;
    font-size:.86rem!important;
  }
  .mobile-drawer .drawer-cta {
    display:flex!important;
    align-items:center!important;
    background:#161B1F!important;
    color:#FFF!important;
    border-radius:2px!important;
    min-height:48px!important;
    font-size:.9rem!important;
    padding:.7rem 1rem!important;
  }
  .mobile-drawer .drawer-cta:is(:hover,:active) {background:#161B1F!important;color:#FFF!important;}

  /* Se congela solo el documento; scroll nativo dentro del menú. */
  html.altha-scroll-locked,
  html.altha-scroll-locked body,
  body.drawer-open {
    overflow:hidden!important;
    overscroll-behavior:none!important;
  }
  html.altha-scroll-locked {scroll-behavior:auto!important;}
  body.drawer-open .mobile-bottom-nav {display:none!important;}
}
@media(max-width:900px) and (prefers-reduced-motion:reduce) {
  .header .menu-toggle span,
  .mobile-drawer {transition:none!important;animation:none!important;}
}
/* Un header sticky deja de adherirse cuando la raíz recibe overflow:hidden.
   Mientras el menú está abierto, el MISMO header se fija a la ventana;
   al cerrarlo recupera su comportamiento sticky, sin crear un segundo. */
@media(max-width:900px){
 body.drawer-open .header {
   position:fixed!important;
   top:0!important;
   left:0!important;
   right:0!important;
   width:100%!important;
   max-width:none!important;
   margin:0!important;
   z-index:210!important;
 }
}