#mobytic-mobile-header, #mobytic-mobile-menu { display: none; } @media only screen and (max-width: 920px) { #mega-menu-wrap-menu-principal #mega-menu-menu-principal > li.mega-menu-item { display: flex; /* margin-bottom: 10px; */ border-bottom: 1px solid var(--mm-color-border); } #mega-menu-wrap-menu-principal #mega-menu-menu-principal > li.mega-menu-item > .mm-listitem__btn { border-color: var(--mm-color-border); } } @media screen and (max-width: 768px) { /* Prevent header flash on initial load by hiding until JS marks ready. Keep the menu element visible so the mmenu library can perform its built-in slide in/out animations. */ #mobytic-mobile-header { display: block; visibility: hidden; opacity: 0; transition: opacity 150ms ease; } /* Allow mmenu to handle off-canvas/menu transitions itself */ #mobytic-mobile-menu { display: block; } /* Position the menu off-canvas by default so it doesn't flash before JavaScript initialises. When the JS sets `body.mobytic-mobile-menu-ready` the transform will be removed and mmenu can perform its normal slide animations. */ body:not(.mobytic-mobile-menu-ready) #mobytic-mobile-menu { transform: translateX(-110%) translateZ(0); transition: transform 300ms ease; will-change: transform; } /* When JS initialisation completes it adds `mobytic-mobile-menu-ready` to */ body.mobytic-mobile-menu-ready #mobytic-mobile-header { visibility: visible; opacity: 1; } #mobytic-mobile-menu.mm-menu--offcanvas { z-index: 10010 !important; } #mobytic-mobile-menu.mm-menu--opened { pointer-events: auto; } .mm-wrapper__blocker.mm-blocker { z-index: 10000 !important; } .mobytic-mobile-menu-ready .preheader, .mobytic-mobile-menu-ready #masthead, .mobytic-mobile-menu-ready #site-navigation { display: none !important; } #mobytic-mobile-header { display: flex; flex-direction: column; gap: 6px; position: sticky; top: 0; z-index: 1200; background: #ffffff; border-bottom: 1px solid #efefef; padding: 6px 10px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); } .mobytic-mobile-top-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; } .mobytic-mobile-search-row { width: 100%; padding: 6px 4px 8px; box-sizing: border-box; border-top: 0; } .mobytic-mobile-topbar { width: 100%; background: #f8f9fa; color: #2c3e50; font-size: 12px; text-align: center; padding: 6px 8px; border-bottom: 1px solid #efefef; box-sizing: border-box; } .mobytic-mobile-menu-toggle, .mobytic-mobile-cart { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid #d8d8d8; border-radius: 6px; text-decoration: none; color: #2c3e50; background: #ffffff; flex: 0 0 auto; } .mobytic-mobile-menu-icon, .mobytic-mobile-menu-icon::before, .mobytic-mobile-menu-icon::after { width: 18px; height: 2px; background: #2c3e50; display: block; content: ""; position: relative; } .mobytic-mobile-menu-icon::before { top: -6px; } .mobytic-mobile-menu-icon::after { top: 4px; } .mobytic-mobile-logo-wrap { min-width: 0; flex: 1 1 auto; text-align: center; } .mobytic-mobile-logo, .mobytic-mobile-logo-link img, .mobytic-mobile-logo-link .custom-logo, .mobytic-mobile-logo-link .mobytic-mobile-logo { max-height: 36px; width: auto; max-width: 180px; } .mobytic-mobile-site-name { font-size: 18px; color: #2c3e50; font-weight: 700; } .mobytic-mobile-site-name img { height: 88px; object-fit: contain; } .mobytic-mobile-cart { position: relative; } .mobytic-mobile-cart i svg { width: 20px; height: 20px; margin-right: 0; } .mobytic-mobile-cart-count { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; border-radius: 10px; background: #8bc34a; color: #1f2a37; font-size: 11px; line-height: 18px; text-align: center; padding: 0 4px; } #mobytic-mobile-menu .mega-menu-toggle, #mobytic-mobile-menu .mega-toggle-block, #mobytic-mobile-menu .mega-hide-on-mobile, #mobytic-mobile-menu .mm-panel__noresults, #mobytic-mobile-menu .mm-searchfield__btn { display: none !important; } #mobytic-mobile-menu .mobytic-mobile-meta { padding: 10px 12px; border-bottom: 1px solid #efefef; background: #ffffff; } #mobytic-mobile-menu .mobytic-mobile-meta p { margin: 0 0 6px; font-size: 12px; line-height: 1.4; color: #2c3e50; } #mobytic-mobile-menu .mobytic-mobile-quick-links { display: flex; gap: 12px; flex-wrap: wrap; } #mobytic-mobile-menu .mobytic-mobile-quick-links a { color: #2c3e50; font-size: 13px; text-decoration: none; border-bottom: 1px solid #cfd8dc; padding-bottom: 1px; } #mobytic-mobile-menu .mm-navbar__title { color: #2c3e50; font-weight: 700; } #mobytic-mobile-menu .mm-listitem__text { color: #2c3e50; } #mobytic-mobile-menu .mm-searchfield { display: flex !important; padding: 10px 12px; border-bottom: 1px solid #efefef; } #mobytic-mobile-menu .mm-searchfield__input input { width: 100%; border: 1px solid #d7d7d7; border-radius: 6px; } } /* Highlight account icon when user is logged in */ .mobytic-connected i { color: #28a745 !important; } body.logged-in #mobytic-mobile-menu .mm-iconbar a.mobytic-connected i { color: #28a745 !important; } /* Remove generated ::before icons on first-level menu items to avoid duplicates The mmenu library may add decorative pseudo-elements; hide them for the top-level list so only the original icons (from the markup) remain. */ #mobytic-mobile-menu .mm-panel > .mm-listview > .mm-listitem > .mm-listitem__text::before, #mobytic-mobile-menu .mm-panel > .mm-listview > .mm-listitem > .mm-listitem__btn::before { display: none !important; content: none !important; } #mobytic-mobile-menu #mega-menu-wrap-menu-principal #mega-menu-menu-principal > li.mega-menu-item > a.mega-menu-link { padding: 4px 0; height: auto; }