/* The phone filter drawer keeps its existing layout and scrolling behavior. */
.inventory-filter-scroll { display: contents; }
#inventory-floating-filters[hidden],
#inventory-desktop-filter-dialog:not([open]) { display: none !important; }

@media (min-width: 961px) {
  /* overflow-x:hidden also creates an overflow-y:auto ancestor, preventing
     viewport sticky positioning. Clip only horizontal overflow on this page. */
  html.inventory-sticky-filters-page,
  html.inventory-sticky-filters-page body { overflow: visible !important; }
  @supports (overflow-x: clip) {
    html.inventory-sticky-filters-page,
    html.inventory-sticky-filters-page body { overflow-x: clip !important; overflow-y: visible !important; }
  }
  html.inventory-sticky-filters-page .shopping-inventory,
  html.inventory-sticky-filters-page .shopping-inventory > .shopping-container,
  html.inventory-sticky-filters-page .shopping-inventory .inv-layout { overflow: visible !important; }

  html.inventory-sticky-filters-page #inventory-filters.sidebar {
    display: flex;
    flex-direction: column;
    align-self: start;
    position: static !important;
    top: var(--inventory-filters-top, 84px) !important;
    bottom: auto !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0;
    overflow: visible !important;
    transform: none !important;
  }
  html.inventory-sticky-filters-page .inventory-filter-scroll {
    display: block;
    flex: 0 0 auto;
    min-height: 0;
    max-height: none !important;
    overflow: visible !important;
    padding: 2px;
  }
  /* Expanded lists belong to the page too, not to nested scroll boxes. */
  html.inventory-sticky-filters-page #inventory-filters .filter-group {
    max-height: none !important;
    overflow: visible !important;
    padding-right: 0 !important;
  }
  html.inventory-sticky-filters-page #inventory-filters .sidebar-box { padding: 12px; margin-bottom: 8px; }
  html.inventory-sticky-filters-page #inventory-filters .sidebar-head { margin-bottom: 8px; }
  html.inventory-sticky-filters-page #inventory-filters .collapsed .sidebar-head { margin-bottom: 0; }
  html.inventory-sticky-filters-page #inventory-filters .sidebar-title,
  html.inventory-sticky-filters-page #inventory-filters .toggle-checks { min-height: 32px; }
  html.inventory-sticky-filters-page #inventory-filters .sidebar-title { flex: 1 1 auto; }
  html.inventory-sticky-filters-page #inventory-filters .inventory-search-label { margin-bottom: 8px; }
  html.inventory-sticky-filters-page #inventory-filters #sb-apply {
    flex: 0 0 auto;
    position: static !important;
    display: flex !important;
    min-height: 44px;
    margin: 8px 0 0 !important;
    padding: 10px 12px;
  }

  /* Keep the entire form visible only when it fits. Taller/expanded filters
     remain in normal page flow, including the Apply button at the bottom. */
  html.inventory-sticky-filters-page.inventory-filters-fit-viewport #inventory-filters.sidebar {
    position: sticky !important;
  }

  #inventory-floating-filters {
    position: fixed;
    left: max(20px, env(safe-area-inset-left));
    bottom: max(20px, env(safe-area-inset-bottom));
    z-index: 60;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 10px 24px;
    border: 1px solid #0e6fb7;
    border-radius: 999px;
    background: #0e6fb7;
    color: #fff;
    font: inherit;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.3;
    box-shadow: 0 5px 18px rgba(12, 40, 72, .22);
    cursor: pointer;
  }
  #inventory-floating-filters:hover { background: #095e9e; }
  #inventory-floating-filters:focus-visible,
  .inventory-desktop-filter-close:focus-visible { outline: 3px solid #84bfff; outline-offset: 3px; }
  #inventory-sidebar-placeholder { min-width: 0; pointer-events: none; }

  /* Only the open modal is scrollable. The ordinary sidebar and every option
     group still use page scrolling, including when their contents are tall. */
  #inventory-desktop-filter-dialog {
    position: fixed;
    inset: 16px auto 16px 16px;
    margin: 0;
    width: min(400px, calc(100vw - 32px));
    max-width: none;
    max-height: calc(100dvh - 32px);
    height: auto;
    box-sizing: border-box;
    padding: 0 16px 16px;
    border: 1px solid var(--line, #d6e2ed);
    border-radius: 18px;
    background: #f6f8fc;
    color: var(--ink, #09213f);
    overflow: auto;
    overscroll-behavior: contain;
    box-shadow: 0 12px 45px rgba(12, 24, 48, .25);
  }
  #inventory-desktop-filter-dialog::backdrop { background: rgba(12, 24, 48, .46); }
  .inventory-desktop-filter-head {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 -16px 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--line, #d6e2ed);
    background: #f6f8fc;
  }
  .inventory-desktop-filter-head h2 { margin: 0; font: inherit; font-size: 18px; font-weight: 800; line-height: 1.3; }
  .inventory-desktop-filter-close {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--line, #d6e2ed);
    border-radius: 50%;
    background: #fff;
    color: var(--ink, #09213f);
    font: 24px/1 sans-serif;
    cursor: pointer;
  }
  html.inventory-sticky-filters-page #inventory-desktop-filter-dialog #inventory-filters.sidebar { position: static !important; }
  html.inventory-sticky-filters-page.inventory-desktop-filters-open,
  html.inventory-sticky-filters-page.inventory-desktop-filters-open body { overflow: hidden !important; }
}

@media (max-width: 960px) {
  #inventory-floating-filters,
  #inventory-desktop-filter-dialog { display: none !important; }
}
@media print {
  #inventory-floating-filters,
  #inventory-desktop-filter-dialog { display: none !important; }
}