/* =================================================================== ENETBHOOMI — shared site navigation (sidebar + bottom nav) Injected on every page by assets/site-nav.js. Kept in one file so the nav looks and behaves identically on the storefront, cart, account and orders pages. Breakpoint matches the storefront's own mobile breakpoint (640px): below it you get the bottom nav, above it you get the sidebar. =================================================================== */ /* ---------- DESKTOP SIDEBAR ---------- */ .site-sidebar{ position:fixed; left:0; top:var(--topbar-h, 76px); bottom:0; z-index:90; width:212px; background:linear-gradient(165deg, var(--forest) 0%, var(--forest) 70%, var(--backwater-deep) 160%); display:flex; flex-direction:column; padding:14px 10px 18px; gap:2px; overflow-x:hidden; overflow-y:auto; transition:width .2s ease; border-right:1px solid rgba(255,255,255,0.06); } .site-sidebar.collapsed{width:66px;} .sidebar-toggle{ display:flex; align-items:center; gap:12px; width:100%; margin-bottom:10px; background:none; border:none; cursor:pointer; color:var(--leaf-pale); padding:10px 12px; border-radius:10px; font-family:inherit; font-size:0.78rem; font-weight:600; } .sidebar-toggle:hover{background:rgba(255,255,255,0.08); color:var(--white);} .sidebar-toggle svg{width:20px; height:20px; flex-shrink:0; transition:transform .2s ease;} .site-sidebar.collapsed .sidebar-toggle svg{transform:rotate(180deg);} .sidebar-nav{display:flex; flex-direction:column; gap:2px;} .sidebar-link{ position:relative; display:flex; align-items:center; gap:14px; padding:11px 12px; border-radius:10px; color:var(--leaf-pale); font-weight:600; font-size:0.88rem; white-space:nowrap; transition:background .15s ease, color .15s ease; } .sidebar-link:hover{background:rgba(255,255,255,0.08); color:var(--white);} .sidebar-link.active{background:var(--leaf-deep); color:var(--white);} .sidebar-link svg{width:21px; height:21px; flex-shrink:0;} .site-sidebar.collapsed .sidebar-link{justify-content:center; padding:11px 0;} .site-sidebar.collapsed .sidebar-label{display:none;} .site-sidebar.collapsed .sidebar-toggle{justify-content:center;} .site-sidebar.collapsed .sidebar-toggle .sidebar-label{display:none;} .sidebar-badge{ background:var(--harvest); color:var(--forest); font-family:'IBM Plex Mono', monospace; font-weight:700; font-size:0.65rem; min-width:17px; height:17px; border-radius:999px; display:flex; align-items:center; justify-content:center; padding:0 4px; margin-left:auto; } .sidebar-badge[hidden]{display:none;} .site-sidebar.collapsed .sidebar-badge{ position:absolute; top:6px; right:6px; margin-left:0; } @media (max-width:640px){ .site-sidebar{display:none;} } /* Reserve the sidebar's space on the itself (padding, not a margin on .layout). Each page's own ".layout{ max-width:...; margin:0 auto; }" then centers correctly *within* the remaining width — instead of getting a fixed margin-left that breaks auto-centering and leaves the page looking shoved against the sidebar with a dead zone on the right. */ @media (min-width:641px){ body.site-has-sidebar{ padding-left:212px; transition:padding-left .2s ease; } body.site-has-sidebar.sidebar-collapsed{ padding-left:66px; } } /* ---------- MOBILE BOTTOM NAV ---------- */ .site-bottomnav{ display:none; } @media (max-width:640px){ .site-bottomnav{ display:flex; align-items:center; justify-content:space-around; position:fixed; left:0; right:0; bottom:0; z-index:150; background:var(--forest); box-shadow:0 -4px 16px rgba(0,0,0,0.14); padding:6px 4px calc(6px + env(safe-area-inset-bottom)); } body.site-has-bottomnav{padding-bottom:66px;} } .bottomnav-link{ position:relative; display:flex; flex-direction:column; align-items:center; gap:3px; color:var(--leaf-pale); font-size:0.62rem; font-weight:600; padding:5px 14px; border-radius:10px; flex:1; max-width:100px; } .bottomnav-link svg{width:22px; height:22px;} .bottomnav-link.active{color:var(--harvest);} .bottomnav-badge{ position:absolute; top:0; right:14px; background:var(--harvest); color:var(--forest); font-family:'IBM Plex Mono', monospace; font-weight:700; font-size:0.6rem; min-width:15px; height:15px; border-radius:999px; display:flex; align-items:center; justify-content:center; padding:0 3px; border:2px solid var(--forest); } .bottomnav-badge[hidden]{display:none;}