/* PB_UI4_MOBILE_NAV_CANON_R1 — visual-only shared bottom nav.
 * Scope: smartphone <=720px, matching existing visible bottom-nav breakpoint.
 * Explicitly do not touch .bottom-bar display, transform, opacity, visibility,
 * pointer-events, .is-hidden, fixed positioning, z-index, or JS header height.
 * The mobile header/breakpoint 721-767 remains a separate work item.
 */
@media (max-width:720px) {
  .bottom-bar {
    background:var(--pb-surface,#fff) !important;
    border-top:1px solid var(--pb-line,#eadfd6) !important;
    padding:0 0 env(safe-area-inset-bottom) !important;
  }
  .bottom-bar-in {
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
    padding:0 !important;
    gap:0 !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    grid-auto-flow:column !important;
    grid-auto-columns:minmax(0,1fr) !important;
    background:transparent !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
  }
  .bottom-bar .bb {
    min-height:68px !important;
    padding:8px 4px 6px !important;
    gap:3px !important;
    background:transparent !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
    color:var(--pb-muted,#6b5a55) !important;
    transform:none !important;
  }
  .bottom-bar .bb .l {
    font-size:12px !important;
    font-weight:500 !important;
    color:inherit !important;
  }
  .bottom-bar .bb.on {
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
    color:var(--pb-brand,var(--site-primary,#b3121d)) !important;
    transform:none !important;
  }
  .bottom-bar .bb.on .i,
  .bottom-bar .bb.on .l {
    color:var(--pb-brand,var(--site-primary,#b3121d)) !important;
  }
  .bottom-bar .bb:focus-visible {
    outline:2px solid var(--pb-focus,#1e4c8a) !important;
    outline-offset:-4px !important;
  }
}

/* PB_UI4_NAV_VISUAL_R3: Reuse exact Canonical SVG masks from the active Foundation source.
 * Root cause: Foundation is not loaded on checkout; apply the same masks in
 * the shared stylesheet that is already loaded on every public UI page.
 * Visual-only: no PHP/JS, nav slots, link targets, nav visibility or timing changes.
 */
@media (max-width:720px) {
  /* SVG icon only for exact valid key OR exact href; unknown items keep their emoji */
  .bottom-bar .bb[data-nav-key="menu"] .i,
  .bottom-bar .bb[href="/public_menu.php"] .i{font-size:0 !important;line-height:0 !important;width:22px !important;height:22px !important;background-color:currentColor !important;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3L3 20h18L12 3z'/%3E%3Ccircle cx='12' cy='13' r='1.4'/%3E%3Ccircle cx='9.5' cy='16.5' r='1.2'/%3E%3Ccircle cx='14.5' cy='16.5' r='1.2'/%3E%3C/svg%3E") center/contain no-repeat !important;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3L3 20h18L12 3z'/%3E%3Ccircle cx='12' cy='13' r='1.4'/%3E%3Ccircle cx='9.5' cy='16.5' r='1.2'/%3E%3Ccircle cx='14.5' cy='16.5' r='1.2'/%3E%3C/svg%3E") center/contain no-repeat !important}
  .bottom-bar .bb[data-nav-key="orders"] .i,
  .bottom-bar .bb[href="/orders.php"] .i{font-size:0 !important;line-height:0 !important;width:22px !important;height:22px !important;background-color:currentColor !important;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h12v18l-3-2-3 2-3-2-3 2V3z'/%3E%3Cpath d='M9 8h6M9 12h6'/%3E%3C/svg%3E") center/contain no-repeat !important;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h12v18l-3-2-3 2-3-2-3 2V3z'/%3E%3Cpath d='M9 8h6M9 12h6'/%3E%3C/svg%3E") center/contain no-repeat !important}
  .bottom-bar .bb[data-nav-key="profile"] .i,
  .bottom-bar .bb[href="/profile.php"] .i{font-size:0 !important;line-height:0 !important;width:22px !important;height:22px !important;background-color:currentColor !important;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4 4-6 8-6s8 2 8 6'/%3E%3C/svg%3E") center/contain no-repeat !important;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4 4-6 8-6s8 2 8 6'/%3E%3C/svg%3E") center/contain no-repeat !important}
  .bottom-bar .bb[data-nav-key="login"] .i,
  .bottom-bar .bb[href="/login.php"] .i{font-size:0 !important;line-height:0 !important;width:22px !important;height:22px !important;background-color:currentColor !important;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 17l5-5-5-5M15 12H3M15 4h4a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2h-4'/%3E%3C/svg%3E") center/contain no-repeat !important;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 17l5-5-5-5M15 12H3M15 4h4a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2h-4'/%3E%3C/svg%3E") center/contain no-repeat !important}
}