.siteMobileNav {display:none;}

@media only screen and (max-width:879px) {
  .siteMobileNav {
    position:sticky;
    top:0;
    z-index:1100;
    isolation:isolate;
    display:block;
    flex:none;
    width:calc(100% + 20px);
    margin-left:-10px;
    padding:6px 10px;
    background:var(--pageBg);
    box-shadow:none;
  }
  .siteMobileNav.is-stuck {
    box-shadow:0 4px 14px rgba(0,0,0,.2);
  }
  .mobileNavHeader {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    min-height:48px;
  }
  .mobileRatePaging {display:flex; align-items:center; gap:4px; flex:0 0 auto;}
  .mobileRatePaging .btnLink {
    display:inline-flex; align-items:center; justify-content:center;
    flex:0 0 44px; width:44px; min-width:44px; max-width:44px;
    height:44px; min-height:44px; max-height:44px;
    margin:0; padding:0; box-sizing:border-box;
  }
  .mobileRatePaging .btnLink::before,
  .mobileRatePaging .btnLink::after {display:none; content:none;}
  .mobileRatePaging .btnLink i {
    display:block; width:24px; height:24px; font-size:24px; line-height:24px;
    margin:0 !important;
  }
  .mobileNavHeading {
    flex:1;
    min-width:0;
    margin:0;
    padding:0;
    background:none;
    color:var(--txt);
    font-size:1.15rem;
    line-height:1.2;
  }
  .mobileNavTitle {
    display:flex;
    align-items:center;
    gap:10px;
    width:100%;
    min-height:46px;
    margin:0;
    padding:2px 0;
    border:0;
    background:none;
    color:var(--txt);
    font:inherit;
    font-weight:600;
    text-align:left;
    text-transform:none;
    cursor:pointer;
  }
  .mobileNavTitle > img {width:24px; height:24px; flex:none;}
  .mobileNavTitleText {
    display:flex;
    flex-direction:column;
    min-width:0;
    gap:3px;
  }
  .mobileNavTitleHeading {overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .mobileNavSubtitle {
    overflow:hidden;
    color:var(--txtAlt);
    font-size:11px;
    font-weight:500;
    line-height:1.2;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .mobileNavSortTrigger {
    display:grid;
    flex:none;
    width:44px;
    height:44px;
    place-items:center;
    padding:8px;
    border:0;
    border-radius:8px;
    background:none;
    cursor:pointer;
  }
  .mobileNavSortTrigger {color:var(--txt);}
  .mobileNavTitle:hover, .mobileNavSortTrigger:hover,
  .mobileNavTitle[aria-expanded="true"], .mobileNavSortTrigger[aria-expanded="true"] {
    color:var(--theme); background:var(--bgAlt);
  }
  .mobileNavTrigger:focus-visible,
  .mobileNavSortTrigger:focus-visible,
  .mobileNavBack:focus-visible,
  .mobileNavClose:focus-visible,
  .mobileNavSheetCrumb:focus-visible,
  .mobileNavItem:focus-visible {
    outline:2px solid var(--theme);
    outline-offset:3px;
  }

  .mobileNavBackdrop {
    position:fixed;
    inset:0;
    z-index:1000;
    display:flex;
    align-items:flex-end;
    justify-content:center;
    background:rgba(0,0,0,.52);
  }
  .mobileNavBackdrop[hidden] {display:none;}
  .mobileNavSheet {
    display:flex;
    flex-direction:column;
    width:min(100%, 560px);
    max-height:min(88dvh, 780px);
    min-height:230px;
    overflow:hidden;
    padding:8px 20px max(16px, env(safe-area-inset-bottom));
    border-radius:18px 18px 0 0;
    background:var(--cardBg);
    color:var(--txt);
    box-shadow:var(--shadowPopup);
    animation:mobileNavSheetIn .18s ease-out;
  }
  .mobileNavSheetHeader {
    display:flex;
    flex:none;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    min-height:48px;
    border-bottom:var(--line);
  }
  .mobileNavSheetPath {
    display:flex;
    align-items:center;
    justify-content:center;
    flex:1;
    gap:7px;
    min-width:0;
    overflow:hidden;
  }
  .mobileNavSheetCrumb {
    flex:none;
    max-width:42%;
    overflow:hidden;
    padding:6px 0;
    border:0;
    background:none;
    color:var(--txtAlt);
    font-size:13px;
    text-overflow:ellipsis;
    white-space:nowrap;
    cursor:pointer;
  }
  .mobileNavBack,
  .mobileNavClose {
    display:grid;
    flex:none;
    width:34px;
    height:38px;
    place-items:center;
    padding:5px;
    border:0;
    background:none;
    cursor:pointer;
  }
  .mobileNavBack[hidden] {visibility:hidden;}
  .mobileNavBack img,
  .mobileNavClose img {width:22px; height:22px;}
  .mobileSortTitle {flex:1; font-size:16px; font-weight:600;}
  .mobileNavItems {
    flex:1;
    overflow-y:auto;
    overscroll-behavior:contain;
    margin:0;
    padding:6px 0 32px;
    list-style:none;
    -webkit-overflow-scrolling:touch;
  }
  .mobileNavSearch {
    margin:0 0 8px;
    padding:0 8px 8px;
    border-bottom:var(--line);
  }
  .mobileNavSearch form {margin:0;}
  .mobileNavItems > li {border:0;}
  .mobileNavItems > li.mobileNavGroupStart {
    margin-top:6px;
    padding-top:6px;
    border-top:var(--line);
  }
  .mobileNavItem {
    border-radius:8px;
    display:flex;
    align-items:center;
    gap:12px;
    width:100%;
    min-height:46px;
    padding:10px 8px;
    border:0;
    background:none;
    color:var(--txt);
    font:inherit;
    font-size:15px;
    text-align:left;
    text-decoration:none;
    cursor:pointer;
  }
  a.mobileNavItem:link,
  a.mobileNavItem:visited,
  a.mobileNavItem:hover,
  a.mobileNavItem:active,
  button.mobileNavItem {color:var(--txt);}
  .mobileNavItem > img:first-child {width:22px; height:22px; flex:none; opacity:.65;}
  .mobileNavItem > span {flex:1; min-width:0;}
  .mobileNavItem .mobileNavArrow {width:20px; height:20px; flex:none; opacity:.5;}
  .mobileNavItem .mobileNavExternalIcon {width:15px; height:15px; flex:none; opacity:.55;}
  .mobileNavItems > li.selected > .mobileNavItem {
    border-radius:8px;
    background:var(--selectedBg);
    color:var(--selectedTxt);
    font-weight:600;
  }
  .mobileNavSelected {width:20px; height:20px; flex:none; opacity:.85;}
  .mobileNavItem:active {background:var(--bgAlt);}
  body.mobileNavOpen {overflow:hidden;}
}

@media (prefers-color-scheme:dark) {
  .mobileNavTitle > img,
  .mobileNavSortTrigger img,
  .mobileNavBack img,
  .mobileNavClose img,
  .mobileNavItem img {filter:invert(1);}
}

@keyframes mobileNavSheetIn {
  from {transform:translateY(16px); opacity:.7;}
  to {transform:translateY(0); opacity:1;}
}

@media (prefers-reduced-motion:reduce) {
  .mobileNavSheet {animation:none;}
}