/* ========================================================= WALON — Header + menú mobile nuevos, construidos desde cero Nada de esto se activa hasta que el JS confirma que pudo montar el reemplazo completo (clase walon-mnew-ready en ): si el JS no corre o Astra cambia de estructura, el header/menú nativos de Astra se quedan visibles y funcionando tal cual — nunca hay un estado a medio construir ni un hueco en blanco. Todo lo nuevo vive bajo IDs/clases propias (walon-mheader-*, walon-mnav-*, walon-panel-*) que no existen en ningún otro lugar del sitio: cero selectores compartidos con Astra, cero choque de CSS/JS entre ambos. Solo afecta mobile porque #ast-mobile-header y #ast-mobile-site-navigation son, de por sí, exclusivos de la vista mobile de Astra (nunca se muestran en desktop). ========================================================= */ html.walon-mnew-ready #ast-mobile-header .main-header-bar-wrap { display: none !important; } html.walon-mnew-ready #ast-mobile-site-navigation { display: none !important; } /* ---- Header nuevo ---- No usa "position: sticky": algún ancestro del header (típico en Astra, para evitar scroll horizontal de los mega-menús) tiene overflow distinto de "visible", lo que desactiva sticky por completo — por eso el header solo aparecía en su posición natural (arriba del todo) en vez de quedar fijo. Se resuelve a mano con "position: fixed" + un spacer que evita que el contenido salte cuando el header sale del flujo normal. Nota: solo se fija/oculta la parte blanca (#walon-mheader). Se intentó incluir también la barra de envío (negra) en el mismo mecanismo, pero rompía el "mostrar al subir" — queda pendiente revisar esa combinación más adelante. */ #walon-mheader { display: none; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 14px; background: #fff; border-bottom: 1px solid #e6e6e6; z-index: 100000; transform: translateY(0); transition: transform .25s ease; } html.walon-mnew-ready #walon-mheader { display: flex; } /* JS activa esto apenas el scroll pasa la posición natural del header (debajo de la barra de envío), imitando "sticky". */ #walon-mheader.walon-mheader-fixed { position: fixed; top: 0; left: 0; right: 0; } /* Se oculta al hacer scroll hacia abajo y reaparece al subir (JS agrega/quita esta clase). Solo aplica a este header nuevo mobile; el de escritorio ya tiene su propio comportamiento sticky de Astra y no se toca. */ #walon-mheader.walon-mheader-hidden { transform: translateY(-100%); } /* Ocupa el espacio que deja el header al volverse "fixed" (fuera del flujo normal), para que el contenido de abajo no salte hacia arriba. */ #walon-mheader-spacer { display: none; } #walon-mheader-spacer.walon-mheader-spacer-active { display: block; } .walon-mheader-icon { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; background: none; border: 0; padding: 0; cursor: pointer; color: #111; flex-shrink: 0; text-decoration: none; } .walon-mheader-icon svg { width: 20px; height: 20px; display: block; } .walon-mheader-logo { display: flex; align-items: center; justify-content: center; flex: 1 1 auto; min-width: 0; } .walon-mheader-logo figure { margin: 0; line-height: 0; } .walon-mheader-logo img { display: block; height: 32px; width: auto; max-width: 140px; object-fit: contain; } /* Buscador y carrito son los widgets REALES de sus plugins, trasladados tal cual desde el header nativo (no reconstruidos): la funcionalidad la siguen dando ellos. A propósito NO se toca el tamaño de sus contenedores/wrappers (.dgwt-wcas-search-wrapp, .dgwt-wcas-search-icon, .walon-header- cart-direct): FiboSearch calcula su propio layout ("modo flexible", clases dgwt-wcas-layout-icon-flexible) en base al tamaño real de su contenedor, y forzarlo rompía ese cálculo (se veía descuadrado al cargar). Solo se redimensiona el en sí — un elemento hoja sin lógica de layout propia — así el ícono se ve del mismo tamaño que el resto sin arriesgar el funcionamiento interno del plugin. */ .walon-mheader-right { display: flex; align-items: center; gap: 14px; flex-shrink: 0; } #walon-mheader .dgwt-wcas-search-icon svg { width: 16px !important; height: 16px !important; } #walon-mheader .walon-header-cart-direct svg { width: 20px !important; height: 20px !important; } #walon-mheader .walon-header-cart-direct span { display: none !important; } /* Carrito FunnelKit (producción): mismo criterio que el buscador, solo se redimensiona el del ícono, no su contenedor (#fkcart-mini-toggler / .fkcart-shortcode-icon-wrap), para no interferir con el mini-carrito que abre por su cuenta. */ #walon-mheader svg.fkcart-icon-checkout { width: 20px !important; height: 20px !important; } /* ---- Panel de navegación (paneles por nivel) ---- Marcado 100% propio (walon-mp-*), generado desde datos extraídos del menú — nunca se clonan nodos de Astra aquí, así que no hay forma de que se filtre una clase/estilo suyo (ast-flex, etc.). */ #walon-mnav-viewport { display: none; position: fixed; left: 0; right: 0; bottom: 0; background: #fff; z-index: 99999; flex-direction: column; } #walon-mnav-viewport.walon-mnav-open { display: flex; } body.walon-mnav-locked { overflow: hidden; } .walon-mp-viewport { position: relative; flex: 1 1 auto; overflow: hidden; background: #fff; } .walon-mp-panel { position: absolute; inset: 0; background: #fff; display: flex; flex-direction: column; transform: translateX(0); opacity: 1; transition: transform .32s cubic-bezier(.22,.61,.36,1), opacity .32s ease; } .walon-mp-panel[data-state="offright"] { transform: translateX(100%); } .walon-mp-panel[data-state="offleft"] { transform: translateX(-28%); opacity: 0; pointer-events: none; } .walon-mp-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px 12px; border-bottom: 1px solid #e6e6e6 !important; flex-shrink: 0; } .walon-mp-back { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; background: none; border: 0; padding: 0; cursor: pointer; color: #111; flex-shrink: 0; } .walon-mp-back svg { width: 18px; height: 18px; display: block; } .walon-mp-title { display: block; font-weight: 800; font-size: 13.5px; text-transform: uppercase; letter-spacing: .03em; color: #111; } .walon-mp-crumb { display: block; font-weight: 400; font-size: 10.5px; text-transform: none; letter-spacing: 0; color: #9a9a9a; margin-bottom: 1px; } .walon-mp-body { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; padding-top: 4px; } .walon-mp-viewall { display: flex; align-items: center; justify-content: space-between; padding: 13px 16px; border-bottom: 1px solid #e6e6e6 !important; background: #fafafa; font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #111; text-decoration: none; } .walon-mp-viewall svg { width: 13px; height: 13px; color: #9a9a9a; flex-shrink: 0; } .walon-mp-row { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 15px 16px; border: 0 !important; border-bottom: 1px solid #e6e6e6 !important; background: none; font-size: 14.5px; color: #111; text-decoration: none; line-height: 1.3; cursor: pointer; text-align: left; } .walon-mp-row svg { width: 13px; height: 13px; color: #9a9a9a; flex-shrink: 0; } .walon-mp-foot { flex-shrink: 0; max-height: 32vh; overflow-y: auto; border-top: 1px solid #e6e6e6 !important; padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; } .walon-mp-foot a { display: flex; align-items: center; gap: 10px; font-size: 13px; color: #555; text-decoration: none; } .walon-mp-foot a svg { width: 16px; height: 16px; color: #9a9a9a; flex-shrink: 0; } @media (max-width: 360px) { .walon-mp-row { font-size: 14px; padding: 13px 14px; } }