/* Mobile sticky bottom navigation — visible only on mobile (max-width 920px,
   matching the breakpoint where the desktop header collapses to a hamburger). */
.mobile-bottom-nav{display:none}

@media(max-width:920px){
  /* Top slide-in menu is replaced by the sticky footer nav on mobile. */
  .main-nav{display:none}
  .mobile-bottom-nav{
    position:fixed;left:0;right:0;bottom:0;z-index:90;
    display:grid;grid-template-columns:repeat(5,1fr);
    background:#fff;border-top:1px solid var(--line);
    box-shadow:0 -6px 20px rgba(0,0,0,.08);
    padding-bottom:env(safe-area-inset-bottom,0);
    transition:transform .3s ease;
  }
  /* When a drawer, mobile menu or modal is open the body is locked; slide the
     bar out of the way so it never overlaps the backdrop or an open panel. */
  body.no-scroll .mobile-bottom-nav,
  body.nav-open .mobile-bottom-nav{transform:translateY(100%)}
  .mobile-bottom-nav a,
  .mobile-bottom-nav button{
    position:relative;border:0;background:none;cursor:pointer;
    font:inherit;color:var(--black);text-decoration:none;
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:3px;padding:9px 0 8px;min-height:56px;
  }
  .mobile-bottom-nav span{font-size:21px;line-height:1}
  .mobile-bottom-nav small{font-size:9px;font-weight:800;letter-spacing:.04em;text-transform:uppercase}
  .mobile-bottom-nav .count-pill b{
    position:absolute;top:5px;right:calc(50% - 20px);
    min-width:15px;height:15px;padding:0 3px;
    display:flex;align-items:center;justify-content:center;
    border-radius:20px;background:var(--lime);color:#000;font-size:9px;font-weight:800;
  }
  /* keep page content clear of the fixed bar (incl. iOS home indicator) */
  body{padding-bottom:calc(60px + env(safe-area-inset-bottom,0))}
  /* lift the product-page sticky add-to-cart bar above the nav */
  .sticky-atc{bottom:calc(72px + env(safe-area-inset-bottom,0))}
}