/* =============================== MOBILE BOTTOM NAV Premium Stable Version ================================ */ .mbn-bar{ display:none; } @media (max-width:768px){ .mbn-bar{ display:flex; position:fixed; left:0; right:0; bottom:0; height:64px; background:#fff; border-top:1px solid #ececec; box-shadow:0 -3px 12px rgba(0,0,0,.08); padding-bottom:env(safe-area-inset-bottom,0); z-index:500; } html body{ padding-bottom:64px !important; } .cart-drawer-foot, .cart-drawer-footer, .cart-summary, .cart-checkout{ padding-bottom:calc(20px + 64px + env(safe-area-inset-bottom, 0px)) !important; } .cart-drawer-body, .cart-items, .cart-drawer-content{ padding-bottom:220px !important; } } /* Very small / narrow phones — keep all 5 labels on one line without crowding */ @media (max-width:360px){ .mbn-item svg{ width:20px; height:20px; } .mbn-label{ font-size:9.5px; } .mbn-item{ padding:0 1px; } } /* Landscape on short screens — hide the bar so it doesn't eat the little vertical space available (matches how most apps behave in landscape) */ @media (max-height:420px) and (orientation:landscape){ .mbn-bar{ display:none !important; } html body{ padding-bottom:0 !important; } } @media (max-width:768px){ /* "Added to bag" toast — cart-toast.css positions it with bottom:16px and no awareness of this bar, so it would otherwise sit half-behind it. Override the offset directly (same mechanism, position:fixed + bottom, so this is a clean override, not a conflicting one). */ #cartAddedToast, .cart-added-toast{ bottom:calc(64px + 12px + env(safe-area-inset-bottom,0)) !important; } /* Note: cart-drawer.css also has its own base padding-bottom rule on .cart-drawer-foot (without !important). Depending on which stylesheet loads later in , that rule could silently win the cascade tie and undo the 84px clearance above — which is what was actually happening. The !important on the rule above guarantees this bar never covers the checkout button, regardless of load order. */ } .mbn-item{ flex:1; min-width:0; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:3px; background:none; border:none; color:#111; text-decoration:none; cursor:pointer; font-family:inherit; } .mbn-item svg{ width:24px; height:24px; flex-shrink:0; } .mbn-label{ font-size:11px; font-weight:600; color:#111; white-space:nowrap; } .mbn-cart-wrap{ position:relative; } .mbn-badge{ position:absolute; top:-6px; right:-10px; min-width:17px; height:17px; padding:0 4px; border-radius:999px; background:#111; color:#fff; font-size:10px; font-weight:700; display:flex; justify-content:center; align-items:center; }