/* The same floating navigation island is available on phones and computers. */
body { padding-bottom: calc(112px + env(safe-area-inset-bottom)); }
body > .mobile-tabbar, body.home-active > .mobile-tabbar { position: fixed; z-index: 80; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom)); display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); grid-template-columns: none; align-items: stretch; gap: 4px; width: min(calc(100% - 28px), 480px); height: auto; min-height: 76px; padding: 7px; overflow: visible; transform: translateX(-50%); border: 1px solid var(--line); border-radius: 25px; background: color-mix(in srgb, var(--card) 95%, transparent); box-shadow: 0 12px 35px rgba(15, 22, 13, .16), 0 2px 6px rgba(15, 22, 13, .04); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); isolation: isolate; transition: transform .22s ease, opacity .18s ease, visibility 0s; }
.mobile-tabbar button { display: flex; flex-direction: column; flex-wrap: nowrap; align-items: center; justify-content: center; gap: 5px; min-width: 0; width: 100%; min-height: 60px; height: 60px; padding: 7px 4px; border: 0; border-radius: 19px; color: var(--muted); font-size: 11px; font-weight: 600; line-height: 1.15; touch-action: manipulation; cursor: pointer; transition: background .15s ease, color .15s ease; }
.mobile-tabbar button::before { content: none; }
.mobile-tabbar button > * { cursor: pointer; }
.mobile-tabbar button .nav-icon { display: block; flex: 0 0 auto; width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.mobile-tabbar button .nav-label { display: inline-flex; align-items: center; justify-content: center; gap: 4px; white-space: nowrap; }
.mobile-tabbar button:hover { background: var(--soft); color: var(--text); }
.mobile-tabbar button.nav-active, .mobile-tabbar button[aria-current="page"] { background: var(--lime); color: #18210f; border: 0; }
.mobile-tabbar button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mobile-tabbar button[hidden] { display: none !important; }
.mobile-tabbar #saved-count, .mobile-tabbar #inbox-count { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; margin: 0; padding: 1px 4px; border-radius: 5px; background: var(--soft); color: var(--text); font-size: 10px; line-height: 1; }
body:has(.club-shell) > .mobile-tabbar, body:has(.checkout-shell) > .mobile-tabbar { display: none; }
#navigation-status { position: fixed; z-index: 90; bottom: calc(103px + env(safe-area-inset-bottom)); left: 50%; width: max-content; max-width: calc(100% - 32px); transform: translateX(-50%); padding: 10px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); box-shadow: 0 6px 22px #0001; color: var(--text); font-size: 13px; text-align: center; }
#navigation-status[hidden] { display: none !important; }
body > .toast { z-index: 90; bottom: calc(110px + env(safe-area-inset-bottom)); width: max-content; max-width: calc(100% - 32px); text-align: center; }
@media (prefers-reduced-motion: reduce) { .mobile-tabbar, .mobile-tabbar button { transition: none; } }

body > .mobile-tabbar.is-hidden-on-scroll, body.home-active > .mobile-tabbar.is-hidden-on-scroll { transform: translate(-50%, calc(100% + 24px)); opacity: 0; visibility: hidden; pointer-events: none; transition: transform .22s ease, opacity .18s ease, visibility 0s linear .22s; }