@media (min-width: 851px) {
  .mobile-filter-header { display: none; }
}

@media (max-width: 850px) {
  .mobile-filter-label {
    display: inline-flex;
    align-items: center;
    gap: 9px;
  }

  .mobile-filter-label svg {
    display: block;
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    shape-rendering: geometricPrecision;
  }

  .mobile-filter-label > span { font-size: 12px; }

  body:has(.directory.filters-open) { overflow: hidden; }

  .directory.filters-open::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 1200;
    background: rgba(20, 31, 38, .48);
    -webkit-backdrop-filter: blur(1px);
    backdrop-filter: blur(1px);
  }

  .directory.filters-open aside {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 1201;
    display: flex;
    flex-direction: column;
    width: min(84vw, 420px);
    max-height: 100vh;
    max-height: 100dvh;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: 0 14px 14px 0;
    background: #fff;
    box-shadow: 12px 0 36px rgba(16, 28, 36, .2);
    animation: mobile-filter-enter .2s ease-out;
  }

  .mobile-filter-header {
    display: flex;
    flex: 0 0 72px;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    border-bottom: 1px solid #e0e5e9;
    background: #fff;
  }

  .mobile-filter-header h2 {
    margin: 0;
    color: #26343d;
    font: 600 19px 'Noto Serif Bengali', serif;
  }

  .mobile-filter-header button {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #3e4d57;
    font: 400 32px/1 Arial, sans-serif;
    cursor: pointer;
  }

  .mobile-filter-header button:hover { background: #f1f4f6; }

  @keyframes mobile-filter-enter {
    from { transform: translateX(-16px); opacity: .8; }
    to { transform: translateX(0); opacity: 1; }
  }

  .mobile-filter-scroll {
    flex: 1 1 auto;
    min-height: 0;
    padding: 18px 16px 8px;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #91a4ad transparent;
    touch-action: pan-y;
  }

  /* Keep each filter group compact; the drawer itself remains scrollable too. */
  .mobile-filter-scroll .filters {
    max-height: min(30vh, 240px);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: #91a4ad #edf2f4;
  }

  .mobile-filter-scroll .filters::-webkit-scrollbar { display: block; width: 6px; }
  .mobile-filter-scroll .filters::-webkit-scrollbar-track { background: #edf2f4; }
  .mobile-filter-scroll .filters::-webkit-scrollbar-thumb { border-radius: 8px; background: #91a4ad; }

  .directory.filters-open .filter-box {
    margin-bottom: 16px;
    border-color: #dce2e8;
    border-radius: 10px;
    background: #f8fafd;
  }

  .directory.filters-open .filter-title {
    min-height: 54px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    font-size: 15px;
  }

  .directory.filters-open .filter-title button { margin-left: auto; }
}