.mobile-bottom-nav { display: none; }
@media (max-width: 63.999rem) {
    :root { --mobile-bottom-nav-height: calc(68px + env(safe-area-inset-bottom, 0px)); }
    body.has-mobile-bottom-nav { padding-bottom: var(--mobile-bottom-nav-height); }
    body.account-shell.has-mobile-bottom-nav { padding-bottom: 0; }
    .has-mobile-bottom-nav .account-scroll-content { padding-bottom: calc(1.5rem + var(--mobile-bottom-nav-height)); scroll-padding-bottom: var(--mobile-bottom-nav-height); }
    .mobile-bottom-nav { position: fixed; inset: auto 0 0; z-index: 30; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); direction: rtl; min-height: var(--mobile-bottom-nav-height); padding: 4px 8px calc(4px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid #e2e8f0; background: #fff; color: #64748b; box-shadow: 0 -4px 20px rgb(15 23 42 / .06); }
    .mobile-bottom-nav a, .mobile-bottom-nav button { display: flex; min-width: 0; min-height: 60px; flex-direction: column; align-items: center; justify-content: center; gap: 5px; border: 0; border-radius: 10px; padding: 4px 2px; background: transparent; color: inherit; font: inherit; font-size: 11px; line-height: 1.5; text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
    .mobile-bottom-nav svg { width: 24px; height: 24px; flex-shrink: 0; }
    .mobile-bottom-nav [aria-current="page"] { color: #434ece; background: #eef0ff; font-weight: 700; }
    .mobile-bottom-nav a:hover, .mobile-bottom-nav button:hover { color: #434ece; }
    .mobile-bottom-nav a:focus-visible, .mobile-bottom-nav button:focus-visible { outline: 2px solid #818cf8; outline-offset: -2px; }
    .dark .mobile-bottom-nav { background: #1f2937; color: #cbd5e1; border-color: #374151; }
    .dark .mobile-bottom-nav [aria-current="page"] { color: #c7d2fe; background: #31365e; }
    .dark .mobile-bottom-nav a:hover, .dark .mobile-bottom-nav button:hover { color: #c7d2fe; }
}

#mobile-site-menu { position: fixed; inset: 0 0 0 auto; margin: 0; width: min(88vw, 380px); max-width: 100vw; height: 100dvh; max-height: 100dvh; padding: 0; border: 0; background: #fff; color: #334155; overflow-y: auto; overscroll-behavior: contain; }
#mobile-site-menu::backdrop { background: rgb(15 23 42 / .5); }
#mobile-site-menu [hidden] { display: none !important; }
.mobile-site-menu-header { display: flex; align-items: center; gap: 8px; position: sticky; top: 0; z-index: 1; padding: 16px; border-bottom: 1px solid #e2e8f0; background: inherit; }
.mobile-site-menu-header h2 { flex: 1; font-size: 18px; font-weight: 700; }
.mobile-site-menu-header button { width: 44px; height: 44px; border: 0; border-radius: 12px; background: #f1f5f9; color: inherit; font-size: 26px; cursor: pointer; }
#mobile-site-menu [data-mobile-menu-links] { display: grid; gap: 8px; padding: 16px; }
#mobile-site-menu [data-mobile-menu-links] > * { display: flex; align-items: center; justify-content: space-between; min-height: 52px; padding: 12px 16px; border: 1px solid #e2e8f0; border-radius: 12px; background: transparent; color: inherit; text-decoration: none; font: inherit; text-align: start; cursor: pointer; }
#mobile-site-menu [data-mobile-menu-links] > *:hover { background: #eef0ff; color: #434ece; }
#mobile-site-menu a:hover { color: #434ece; }
#mobile-site-menu button:focus-visible, #mobile-site-menu a:focus-visible, #mobile-site-menu summary:focus-visible { outline: 2px solid #818cf8; outline-offset: 2px; }
.dark #mobile-site-menu { background: #18181b; color: #e4e4e7; }
.dark #mobile-site-menu .mobile-site-menu-header, .dark #mobile-site-menu [data-mobile-menu-links] > * { border-color: #3f3f46; }
.dark #mobile-site-menu .mobile-site-menu-header button { background: #27272a; }

#mobile-site-menu[open] { display: block; }

#mobile-site-menu:has(#mobile-site-menu-categories:not([hidden])) { width: min(390px, 92vw); }