/* Category pages keep their original menu in a compact sheet on phones. */
:root { --mobile-browse-height: 0px; }
.mobile-browse-bar, .mobile-browse-dialog:not([open]) { display: none; }
.mobile-browse-bar[hidden] { display: none !important; }

@media (max-width: 768px) {
  html.has-mobile-browse, .has-mobile-browse body { overflow-x: clip !important; }
  html.has-mobile-browse { --mobile-browse-height: 61px; scroll-padding-top: calc(var(--mobile-browse-height) + 12px); }
  html.mobile-browse-is-open { overflow: hidden !important; }
  .mobile-browse-bar { position: sticky; top: 0; z-index: 80; display: block; flex: 0 0 auto; align-self: stretch; width: 100%; border-bottom: 1px solid #dfe7ef; background: rgba(255, 255, 255, .98); box-shadow: 0 3px 12px rgba(20, 50, 80, .04); }
  .mobile-browse-row { display: flex; align-items: center; min-width: 0; width: 100%; max-width: 768px; margin: 0 auto; padding: 8px 12px; }
  .mobile-browse-category-control { display: inline-flex; align-items: center; justify-content: flex-start; gap: 8px; width: 100%; min-width: 0; min-height: 44px; margin: 0; padding: 10px 12px; border: 1px solid #d5e0eb; border-radius: 8px; background: #f7f9fc; color: #123f73; font: inherit; font-size: 13px; font-weight: 500; line-height: 1.4; text-decoration: none; white-space: nowrap; cursor: pointer; }
  .mobile-browse-category-control::after { content: ""; width: 6px; height: 6px; margin: 0 3px 3px auto; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); }
  .mobile-browse-category-control svg { width: 16px; height: 16px; flex: 0 0 16px; }
  .mobile-browse-category-control[aria-expanded="true"] { border-color: #a9c6df; background: #edf3f9; }
  .mobile-browse-category-control:focus-visible, .mobile-browse-close:focus-visible { outline: 3px solid #2674ae; outline-offset: 3px; }

  .mobile-browse-dialog { position: fixed; inset: auto 8px max(8px, env(safe-area-inset-bottom)); width: calc(100% - 16px); max-width: 480px; max-height: calc(100dvh - 24px - env(safe-area-inset-top)); margin: 0 auto; padding: 0; border: 1px solid #dce6f0; border-radius: 16px; background: #fff; color: #153958; box-shadow: 0 -12px 45px rgba(6, 26, 48, .18); overflow: hidden; }
  .mobile-browse-dialog[open] { display: flex; flex-direction: column; }
  .mobile-browse-dialog::backdrop { background: rgba(6, 26, 48, .46); }
  .mobile-browse-sheet-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex: 0 0 auto; padding: 12px 14px 10px 20px; border-bottom: 1px solid #e5ebf1; }
  .mobile-browse-sheet-heading h2 { margin: 0; color: #123f73; font-size: 18px; font-weight: 700; line-height: 1.4; }
  .mobile-browse-close { display: grid; place-items: center; flex: 0 0 44px; width: 44px; height: 44px; margin: 0; padding: 10px; border: 1px solid #e1e8ef; border-radius: 8px; background: #f7f9fc; color: #345b7d; cursor: pointer; }
  .mobile-browse-close svg { width: 20px; height: 20px; }
  .mobile-browse-sheet-body { min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
  .mobile-browse-dialog .category-browser-sidebar { position: static !important; width: 100% !important; min-width: 0 !important; max-height: none !important; margin: 0 !important; padding: 8px 12px 16px !important; border: 0 !important; border-radius: 0 !important; background: #fff !important; box-shadow: none !important; overflow: visible !important; }
  .mobile-browse-dialog .category-browser-sidebar .sidebar-toggle,
  .mobile-browse-dialog .category-browser-sidebar .browse-sidebar-title,
  .mobile-browse-dialog .category-browser-sidebar .browse-help { display: none !important; }
  .mobile-browse-dialog .category-browser-sidebar.open #sidebarCategories { display: block !important; max-height: none !important; overflow: visible !important; scrollbar-gutter: auto; }
}