/* Core mobile navigation: the bottom tab bar and the account drawer. Shared by every theme through storefront-core::mobile-nav.
   Themes restyle it with the colour and surface variables; they cannot replace it. */
.mobile-nav { display: none; position: fixed; bottom: 0; inset-inline-start: 0; inset-inline-end: 0; background: var(--wh-surface); border-top: 1px solid var(--wh-line); z-index: 90; padding: 8px 4px max(12px, env(safe-area-inset-bottom)); box-shadow: 0 -1px 12px rgba(0,0,0,.08); }
@media (max-width: 768px) {
  .mobile-nav { display: flex; }
}
.mobile-nav a, .mnav-account-btn { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; text-decoration: none; padding: 4px 2px; background: none; border: none; cursor: pointer; font-family: inherit; -webkit-tap-highlight-color: transparent; position: relative; min-width: 0; }
.mnav-icon { width: 36px; height: 28px; border-radius: 10px; display: flex; align-items: center; justify-content: center; position: relative; transition: background .1s; }
.mnav-icon i { font-size: 17px; color: var(--wh-faint); transition: color .1s; }
.mnav-label { font-size: 10px; font-weight: 600; line-height: 1; color: var(--wh-faint); transition: color .1s; }
.mobile-nav a.active:not(.mnav-cart-tab) .mnav-icon { background: color-mix(in srgb,var(--orange) 10%,transparent); }
.mobile-nav a.active:not(.mnav-cart-tab) .mnav-icon i { color: var(--orange-text); }
.mobile-nav a.active .mnav-label { color: var(--orange-text); font-weight: 700; }
.mobile-nav a:active .mnav-icon { background: rgba(0,0,0,.06); transform: scale(.9); }
.mnav-account-btn:active .mnav-avatar { transform: scale(.9); }
.mnav-cart-tab .mnav-icon { width: 40px; height: 32px; background: var(--orange); border-radius: 12px; box-shadow: 0 2px 8px color-mix(in srgb,var(--orange) 30%,transparent); }
.mnav-cart-tab .mnav-icon i { color: #fff !important; font-size: 16px; }
.mnav-cart-tab .mnav-label { color: var(--orange-text); font-weight: 700; }
.mnav-cart-tab.active .mnav-icon { background: var(--orange); box-shadow: 0 3px 12px color-mix(in srgb,var(--orange) 45%,transparent); }
.mnav-cart-tab:active .mnav-icon { transform: scale(.9); box-shadow: none; }
.mnav-avatar { width: 26px; height: 26px; border-radius: 8px; background: var(--navy); color: var(--on-navy); font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center; transition: transform .1s; }
.mnav-account-btn .mnav-label { color: var(--wh-faint); font-size: 10px; font-weight: 600; }
.mnav-account-btn.drawer-open .mnav-avatar { background: var(--orange); }
.mnav-account-btn.drawer-open .mnav-label { color: var(--orange-text); font-weight: 700; }
.mnav-quote-badge, .mnav-cart-badge { position: absolute; top: -3px; inset-inline-end: -2px; min-width: 15px; height: 15px; font-size: 9px; font-weight: 800; border-radius: 8px; padding: 0 3px; display: flex; align-items: center; justify-content: center; border: 1.5px solid var(--wh-surface); line-height: 1; background: #DC2626; color: #fff; }
.mnav-cart-badge { top: -3px; inset-inline-end: -2px; }
.mnav-drawer-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 997; backdrop-filter: blur(3px); }
.mnav-drawer { display: none; position: fixed; bottom: 0; inset-inline-start: 0; inset-inline-end: 0; z-index: 998; background: var(--wh-surface); border-radius: 24px 24px 0 0; padding-bottom: max(16px, env(safe-area-inset-bottom)); box-shadow: 0 -8px 40px rgba(0,0,0,.12); transform: translateY(100%); transition: transform .3s cubic-bezier(.4,0,.2,1); }
.mnav-drawer.open { transform: translateY(0); }
.mnav-drawer-handle { width: 36px; height: 4px; background: var(--wh-line); border-radius: 2px; margin: 12px auto 4px; }
.mnav-drawer-item { display: flex; align-items: center; gap: 14px; padding: 12px 20px; text-decoration: none; color: var(--wh-ink); font-size: 14px; font-weight: 600; transition: background .15s; }
.mnav-drawer-item:active { background: var(--wh-surface-3); }
.mnav-drawer-icon { width: 38px; height: 38px; border-radius: 11px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.mnav-drawer-sub { font-size: 11px; color: var(--wh-faint); font-weight: 400; margin-top: 1px; }
.mobile-nav a.mnav-cart .mnav-icon { width: 44px; height: 36px; background: var(--orange); border-radius: 14px; box-shadow: 0 4px 14px color-mix(in srgb,var(--orange) 40%,transparent); }
.mobile-nav a.mnav-cart .mnav-icon i { color: #fff; font-size: 18px; }
.mobile-nav a.mnav-cart { color: var(--orange-text); }
.mobile-nav a.mnav-cart.active .mnav-icon, .mobile-nav a.mnav-cart:hover .mnav-icon { background: var(--orange); filter: brightness(1.08); transform: scale(1.08); }
.mnav-avatar { overflow: hidden; white-space: nowrap; }
@media (max-width: 360px) {
  .store-shell .mobile-nav {
        padding-inline: 0;
    }
  .store-shell .mnav-label {
        font-size: 9px;
    }
}

/* Account drawer: header and the colour variants of its icons. */
.mnav-drawer-head { padding: 8px 20px 14px; border-bottom: 1px solid var(--wh-line-soft); }
.mnav-who { display: flex; align-items: center; gap: 12px; }
.mnav-who-avatar { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 42px; height: 42px; border-radius: 12px; background: var(--navy); color: var(--on-navy); font-size: 16px; font-weight: 800; }
.mnav-who-name { color: var(--wh-brand-text); font-size: 14px; font-weight: 800; }
.mnav-who-sub { color: var(--wh-faint); font-size: 12px; }
.mnav-drawer-icon--admin { background: color-mix(in srgb, var(--orange) 8%, var(--wh-surface)); }
.mnav-drawer-glyph--admin { color: var(--orange-text); font-size: 15px; }
.mnav-drawer-icon--plain { background: var(--wh-surface-3); }
.mnav-drawer-glyph--plain { color: var(--wh-muted); font-size: 15px; }
.mnav-drawer-icon--blue { background: var(--tone-blue-soft); }
.mnav-drawer-glyph--blue { color: var(--tone-blue-mid); font-size: 15px; }
.mnav-drawer-icon--red { background: var(--tone-red-soft); }
.mnav-drawer-glyph--red { color: var(--tone-red-mid); font-size: 15px; }
.mnav-drawer-sep { height: 1px; margin: 4px 0; background: var(--wh-surface-3); }
.mnav-drawer-line { display: flex; align-items: center; gap: 8px; }
.mnav-drawer-form { margin: 0; }
.mnav-drawer-button { width: 100%; border: 0; background: none; font: inherit; text-align: start; cursor: pointer; }
.mnav-drawer-danger { color: var(--tone-red-mid); }
.mnav-drawer-safe { height: max(8px, env(safe-area-inset-bottom)); }
.mnav-wish-badge { padding: 1px 6px; border-radius: 9999px; background: #DC2626; color: #fff; font-size: 10px; font-weight: 700; }