/* Phone tab bar: Home · Shop · Search · Saved · Cart, fixed to the bottom edge.
   Its height lives in --tabbar-h (tokens.css), which the page padding, the floating
   WhatsApp button and the toasts all add, so nothing ever sits underneath it. */
.tabbar { display: none; }

@media (max-width: 600px) {
  body { padding-bottom: var(--tabbar-h); }

  .tabbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 35;
    display: grid; grid-template-columns: repeat(5, 1fr);
    height: var(--tabbar-h); padding-bottom: env(safe-area-inset-bottom, 0px); /* clear the iPhone home bar */
    background: rgba(255, 255, 255, .97); backdrop-filter: blur(10px);
    border-top: 1px solid var(--color-line); box-shadow: 0 -6px 18px rgba(21, 23, 27, .06);
  }
  .tabbar__item {
    position: relative;
    display: grid; justify-items: center; align-content: center; gap: 3px; min-width: 0;
    font-size: 11.5px; font-weight: 600; line-height: 1.2; color: var(--color-muted);
    transition: color .15s;
  }
  .tabbar__item:hover, .tabbar__item:focus-visible { color: var(--color-ink); }
  .tabbar__item .icon { width: 23px; height: 23px; stroke-width: 1.7; }
  .tabbar__item[aria-current="page"] { color: var(--color-ink); font-weight: 800; }
  .tabbar__item[aria-current="page"] .icon { stroke-width: 2.1; }
  /* count bubble on the icon's top-right */
  .tabbar__item .count { top: 4px; right: auto; left: calc(50% + 4px); }
}