/* Floating bottom navigation for phones (under 768px), and the offsets it needs for the FAB, trays and page end. */

.mobile-bar { display: none; }
@media (max-width: 767px) {
  .has-mobile-bar .mobile-bar {
    display: block; position: fixed; left: 12px; right: 12px; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 44;
    transition: transform .3s var(--ease), opacity .3s;
  }
  .mb-inner {
    display: grid; grid-template-columns: repeat(var(--mb-n, 5), minmax(0, 1fr)); height: 62px; padding: 6px;
    border-radius: 22px; background: color-mix(in srgb, var(--surface) 84%, transparent); backdrop-filter: blur(18px) saturate(1.3);
    -webkit-backdrop-filter: blur(18px) saturate(1.3); border: 1px solid var(--line-2); box-shadow: 0 12px 34px rgb(0 0 0 / .35);
  }
  .mb-item {
    position: relative; display: grid; place-items: center; align-content: center; gap: 3px; min-width: 0; border-radius: 16px;
    color: var(--muted); font-size: 10.5px; font-weight: 600; line-height: 1; background: none; border: 0; padding: 0; cursor: pointer;
    -webkit-tap-highlight-color: transparent; transition: color .2s, background .2s;
  }
  .mb-item:active { transform: scale(.96); }
  .mb-item.current { color: var(--gold); background: color-mix(in srgb, var(--gold) 12%, transparent); }
  .mb-ico { position: relative; display: grid; place-items: center; }
  .mb-ico svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
  .mb-label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 2px 2px; line-height: 1.25; }
  .mb-badge {
    position: absolute; top: -6px; right: -10px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px;
    background: var(--gold); color: var(--bg); font-size: 10px; font-weight: 700; display: grid; place-items: center;
  }
  .mb-badge[hidden] { display: none; }
  /* Room for the bar: page end, floating button, compare tray. */
  .has-mobile-bar body { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
  .has-mobile-bar .fab, .has-mobile-bar .compare-tray { bottom: calc(84px + env(safe-area-inset-bottom)); }
  /* The floating button is redundant when the bar already links to the same place. */
  .has-mobile-bar.fab-in-bar .fab { display: none; }
  /* Product pages have their own sticky buy bar, and checkout needs the space: hide the bar there. */
  .has-mobile-bar[data-route="p"] .mobile-bar, .has-mobile-bar[data-route="checkout"] .mobile-bar { transform: translateY(140%); opacity: 0; pointer-events: none; }
  .has-mobile-bar[data-route="p"] body, .has-mobile-bar[data-route="checkout"] body { padding-bottom: 0; }
  .has-mobile-bar[data-route="p"] .fab, .has-mobile-bar[data-route="checkout"] .fab { bottom: 14px; }
  .has-mobile-bar[data-route="p"] .has-sticky .fab { bottom: 90px; }
}