/* A single mobile bar; every destination is a normal link without JavaScript. */
body .mobile-nav[data-site-navigation] { display: none; }
@media (max-width: 1024px) {
  :root { --mobile-bar-height: calc(66px + env(safe-area-inset-bottom)); }
  body { padding-bottom: var(--mobile-bar-height); }
  /* Keep the callback above the navigation on both storefront and native pages. */
  body .callback-fab,body.mobiat-native .callback-fab { bottom: calc(var(--mobile-bar-height) + 14px); right: max(14px, env(safe-area-inset-right)); }
  body .mobile-nav[data-site-navigation] {
    display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); position: fixed; inset: auto 0 0; z-index: 40;
    min-height: var(--mobile-bar-height); padding: 6px max(8px, env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
    gap: 0; border-top: 1px solid var(--ui-border); background: var(--ui-glass); color: var(--ui-muted);
    backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  }
  body .mobile-nav[data-site-navigation] a {
    position: relative; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 5px;
    min-width: 0; min-height: 52px; padding: 4px 0; border-radius: 10px; color: var(--ui-muted); text-decoration: none;
    font-size: 10px; line-height: 1.2; white-space: nowrap;
  }
  body .mobile-nav[data-site-navigation] a.active { color: var(--ui-accent-text); }
  body .mobile-nav[data-site-navigation] a:focus-visible { outline: 2px solid var(--ui-accent-text); outline-offset: -2px; }
  body .mobile-nav[data-site-navigation] svg { width: 21px; height: 21px; flex-shrink: 0; }
  body .mobile-nav[data-site-navigation] .badge { top: 0; right: calc(50% - 23px); background: var(--ui-accent-solid); color: #fff; border-color: var(--ui-bg); }
  body:has(.compare-dock:not([hidden])) .mobile-nav[data-site-navigation] { box-shadow: 0 -6px 24px #0000000a; }
}
@media (max-width: 360px) { body .mobile-nav[data-site-navigation] a { font-size: 9px; } }
@media (hover: hover) { body .mobile-nav[data-site-navigation] a:hover { color: var(--ui-accent-text); background: var(--ui-surface-2); } }