/* mobile-nav.css — fixes responsive navbar & cart for mobile/tablet Only rules under max-width:1024px (no desktop impact) */ /* Safety variables */ :root { --nav-height: 68px; } @media (max-width: 1024px) { /* Ensure nav is above all content on mobile/tablet */ #main-nav { z-index: 1200; position: fixed; left: 0; right: 0; top: 0; } /* Mobile menu base: hidden visually but animatable via .open */ #mobile-menu { position: fixed; top: var(--nav-height); left: 0; right: 0; width: 100%; background: #ffffff; padding: 14px 18px; box-shadow: 0 10px 30px rgba(0,0,0,0.12); z-index: 1215; /* above most page content */ transform: translateY(-6px); opacity: 0; visibility: hidden; transition: transform .22s ease, opacity .18s ease, visibility .18s; max-height: calc(100vh - var(--nav-height)); overflow-y: auto; -webkit-overflow-scrolling: touch; } /* Ensure cart modal and popovers are above everything on mobile */ .cart-modal .bg-white { z-index: 1250; position: relative; } /* When JS toggles .open the menu becomes visible */ #mobile-menu.open { transform: translateY(0); opacity: 1; visibility: visible; } /* Robust: allow forcing menu visible by setting attribute on */ html[data-mobile-open="true"] #mobile-menu { transform: translateY(0) !important; opacity: 1 !important; visibility: visible !important; display: block !important; } /* Cart open attribute (robust) */ html[data-cart-open="true"] #cart-overlay { opacity: 1 !important; visibility: visible !important; display: block !important; } html[data-cart-open="true"] #cart-sidebar { transform: translateX(0) !important; right: 0 !important; visibility: visible !important; } /* When JS toggles .open the menu becomes visible */ #mobile-menu.open { transform: translateY(0); opacity: 1; visibility: visible; } /* Keep the menu hidden by default via display if the page uses display:block—this doesn't affect JS toggling .open */ #mobile-menu.hidden { visibility: hidden; opacity: 0; transform: translateY(-6px); } /* Ensure hamburger button is visible on mobile/tablet and above nav */ #mobile-menu-btn { display: inline-flex !important; z-index: 1210; } /* Minimal hamburger styles for simplified button */ .hamburger { font-size: 18px; cursor: pointer; user-select: none; background: transparent; border: 0; padding: 6px 10px; display: inline-flex; align-items: center; gap: 8px; } .hamburger svg { display: inline-block; } .hamburger #menu-icon-close { display: none; } /* Swap icons when menu is open via attribute on */ html[data-mobile-open="true"] .hamburger #menu-icon-open { display: none; } html[data-mobile-open="true"] .hamburger #menu-icon-close { display: inline-block; } /* Hide simplified hamburger on larger screens (desktop) */ @media (min-width: 1025px) { .hamburger { display: none !important; } } /* Make sure cart button is visible and above content */ button[onclick="toggleCart()"] { z-index: 1210; position: relative; display: inline-flex !important; } /* Cart badge visible and synced — keep default opacity but ensure positioned */ #cart-count { opacity: 1 !important; transition: opacity .18s ease; } /* Ensure cart overlay and sidebar sit above the nav on mobile/tablet */ #cart-overlay { z-index: 1230 !important; } #cart-sidebar { z-index: 1240 !important; } /* Ensure nav items and controls are clickable over content */ #main-nav, #main-nav * { -webkit-tap-highlight-color: rgba(0,0,0,0.05); } /* Focus & a11y improvements */ #mobile-menu a:focus, #mobile-menu button:focus { outline: 3px solid rgba(212,175,55,0.12); outline-offset: 2px; } }