/* Famous-inspired compact navigation drawer: fixed left panel that slides in/out. */
@media (max-width: 1100px) {
  .compact-nav-backdrop {
    position: fixed !important;
    inset: 0 !important;
    z-index: 290 !important;
    display: block;
    background: rgba(0, 0, 0, .38) !important;
    opacity: 0;
    pointer-events: none;
    transition: opacity 240ms ease !important;
  }

  .compact-nav-backdrop[hidden] {
    display: none !important;
  }

  .compact-nav-backdrop.is-open {
    opacity: 1;
    pointer-events: auto;
  }

  .compact-nav-menu {
    position: fixed !important;
    z-index: 300 !important;
    top: 0 !important;
    left: 0 !important;
    right: auto !important;
    bottom: 0 !important;
    width: min(340px, 78vw) !important;
    max-width: 340px !important;
    height: 100dvh !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 14px 28px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    border: 0 !important;
    border-radius: 0 !important;
    background: #fff !important;
    box-shadow: 12px 0 32px rgba(0, 0, 0, .16) !important;
    transform: translate3d(-102%, 0, 0);
    visibility: visible !important;
    will-change: transform;
    transition: transform 280ms cubic-bezier(.22, .61, .36, 1) !important;
  }

  .compact-nav-menu[hidden] {
    display: none !important;
  }

  .compact-nav-menu.is-open {
    transform: translate3d(0, 0, 0);
  }

  html.compact-nav-open,
  html.compact-nav-open body {
    overflow: hidden !important;
    overscroll-behavior: none !important;
  }

  /* The hamburger lives in the centered compact header, independent of drawer state. */
  .app-header.compact-header-layout > .compact-nav-toggle {
    pointer-events: auto !important;
    touch-action: manipulation !important;
  }

  /* Slight movement on the page shade makes the opening feel less abrupt. */
  @media (prefers-reduced-motion: reduce) {
    .compact-nav-menu,
    .compact-nav-backdrop {
      transition-duration: 0ms !important;
    }
  }
}

@media (max-width: 580px) {
  .compact-nav-menu {
    width: min(315px, 82vw) !important;
    max-width: 315px !important;
  }
}