/* pages/category.css — category & brand listing pages (both use the same
   filter-sidebar partial, partials/category-filters.php). Split out of the
   old single style.css (2026-09-26).
   Note: .subcat-row and .cat-header-image live in base.css since the
   homepage's category tiles reuse .subcat-row's pill styling too. */

/* ---- Category page filter sidebar ----
   Sticks below the site header (not at the bare viewport top) — the header
   itself is position:sticky with z-index:1040, higher than Bootstrap's
   .sticky-lg-top default (1030) on this sidebar, so the header always paints
   over it during scroll instead of the reverse.

   Two different custom properties on purpose, both synced live by app.js
   ("Header height sync"):
   --header-h      — the header's *expanded/resting* height, frozen while
                      .header-hide-top is active. Only ever used by body's
                      padding-top (>=992px media query above) — body is
                      normal document flow and must always reserve space for
                      the header's largest state, or the page would jump
                      every time the header collapses/expands.
   --header-h-live — the header's *actual current* height, updated every
                      scroll frame including mid-collapse. Used here, since
                      this sidebar's sticky top offset and max-height need to
                      track where the header really is right now, not where
                      it is at rest.
   Both start at the same 122px pre-JS/no-JS fallback below (first paint,
   before app.js has run) — app.js overwrites each with its real measured
   value once it runs, since a hand-guessed constant drifts the moment the
   header's content changes height.

   History: originally a single --header-h fixed a real bug (2026-09-25:
   header grew to 158px, this constant stayed at 122px, so the fixed header
   overlapped/clipped the page's first ~36px of content — the breadcrumb nav
   took the hit since it's first in page flow). That fix then caused a
   second, opposite bug reported right after: once --header-h was pinned to
   the correct *expanded* 158px and never moved (deliberately, to stop
   collapse-animation jitter — see app.js), this sidebar's `top:calc(
   var(--header-h) + 16px)` stayed pinned as if the header were still 158px
   tall even after scrolling collapsed it to ~47px, leaving a ~110px dead gap
   above the sidebar (and the product grid) for as long as the page stayed
   scrolled. One variable can't correctly serve both "how much space must
   always be reserved" and "how tall is the header right now" — hence the
   split. Don't collapse these back into one property without re-solving
   both bugs at once. */
:root{ --header-h: 122px; --header-h-live: 122px; }
.cat-filters{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-xs);
  max-height:calc(100vh - var(--header-h-live) - 16px); display:flex; flex-direction:column; overflow:hidden;
  transition:top .25s var(--ease), max-height .25s var(--ease);
}
#cat-filter-form{ display:flex; flex-direction:column; flex:1; min-height:0; }
.cat-filters-scroll{ overflow-y:auto; padding:16px; flex:1; min-height:0; }
.cat-filters-head{ flex-shrink:0; padding:16px 16px 0; display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; }
.cat-filters-head h3{ font-size:14px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:var(--ink); margin:0; }

.cat-filter-section{ border-top:1px solid var(--line); padding:12px 0; }
.cat-filter-section:first-of-type{ border-top:none; padding-top:6px; }
.cat-filter-section summary{
  display:flex; align-items:center; gap:8px; cursor:pointer; list-style:none;
  font-size:13.5px; font-weight:700; color:var(--ink); padding:2px 0;
}
.cat-filter-section summary::-webkit-details-marker{ display:none; }
.cat-filter-section summary::before{
  content:''; width:8px; height:8px; border-right:2px solid var(--ink-soft); border-bottom:2px solid var(--ink-soft);
  transform:rotate(-45deg); transition:transform .15s; flex-shrink:0; margin-left:2px;
}
.cat-filter-section[open] summary::before{ transform:rotate(45deg); }
.cat-filter-section-name{ flex:1; }
.cat-filter-section-body{ padding-top:10px; display:flex; flex-direction:column; gap:14px; }

.cat-filter-attr-label{ font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:var(--ink-soft); margin-bottom:6px; }
.cat-filter-checklist{ display:flex; flex-direction:column; gap:2px; max-height:180px; overflow-y:auto; }
.cat-filter-check{ display:flex; align-items:center; gap:8px; font-size:13px; padding:5px 4px; border-radius:6px; cursor:pointer; user-select:none; }
.cat-filter-check:hover{ background:var(--paper); }
.cat-filter-check.active{ color:var(--brand-ink); font-weight:600; }
.cat-filter-check input{ accent-color:var(--brand); flex-shrink:0; }
.cat-filter-check-text{ flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.cat-filter-dd{ position:relative; }
.cat-filter-dd-toggle{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:8px;
  background:none; border:1px solid var(--line); border-radius:8px; padding:8px 10px; cursor:pointer; text-align:left;
}
.cat-filter-dd-toggle:hover{ border-color:var(--line-strong); }
.cat-filter-dd.is-open .cat-filter-dd-toggle{ border-color:var(--brand); }
.cat-filter-dd .cat-filter-attr-label{ margin-bottom:0; }
.cat-filter-dd-arrow{
  width:8px; height:8px; border-right:2px solid var(--ink-soft); border-bottom:2px solid var(--ink-soft);
  transform:rotate(45deg); transition:transform .15s; flex-shrink:0;
}
.cat-filter-dd.is-open .cat-filter-dd-arrow{ transform:rotate(225deg); }
.cat-filter-dd-panel{
  position:absolute; top:calc(100% + 4px); left:0; right:0; z-index:1030;
  background:var(--surface); border:1px solid var(--line-strong); border-radius:8px;
  box-shadow:0 8px 20px rgba(0,0,0,.12); padding:8px;
}
.cat-filter-dd-search{ width:100%; font-size:13px; padding:7px 9px; border:1px solid var(--line); border-radius:6px; margin-bottom:6px; }
.cat-filter-dd-search:focus{ outline:none; border-color:var(--brand); }
.cat-filter-dd .cat-filter-checklist{ max-height:220px; }
.cat-filter-dd-empty{ font-size:12.5px; color:var(--muted); padding:6px 4px; }

/* Lives OUTSIDE .cat-filters-scroll as a fixed flex footer, not inside the
   scrolling area — position:sticky nested inside an overflow:auto ancestor
   that itself sits inside a <details>-heavy tree proved unreliable to paint
   correctly in testing. A flex column with a non-scrolling footer avoids
   that class of bug entirely. */
.cat-filter-footer{
  flex-shrink:0; padding:12px 16px; border-top:1px solid var(--line);
  box-shadow:0 -8px 10px -6px rgba(0,0,0,.06);
  display:flex; gap:8px;
}
.cat-filter-reset, .cat-filter-submit{ flex:1; }
.cat-filter-reset.is-disabled{ opacity:.45; }


/* ---- Category/brand filter sidebar as a left-side drawer (<992px) ----
   Same slide-in-panel + dark-overlay mechanic as the header's mobile nav
   drawer (#mobile-drawer in layout.php / style.css above), mirrored to
   open from the LEFT instead of the right — kept as a visually distinct
   direction so it reads as "a different panel" from the nav drawer, not
   a copy of it. Reuses the .mobile-drawer-locked body-scroll-lock class
   already defined for the nav drawer rather than a second copy. */
@media (max-width: 991.98px){
  .cat-filters-drawer-overlay{
    position:fixed; inset:0; background:var(--ink); opacity:0; visibility:hidden;
    z-index:1055; transition:opacity .3s ease, visibility .3s ease;
  }
  .cat-filters-drawer-overlay.cat-filters-drawer-open{ opacity:.65; visibility:visible; }

  .cat-filters{
    position:fixed !important; top:0 !important; left:0; right:auto; width:340px; max-width:88vw; height:100%;
    max-height:none; border-radius:0; border:none; z-index:1060;
    transform:translateX(calc(-100% - 40px));
    transition:transform .3s cubic-bezier(.785,.135,.15,.86);
  }
  .cat-filters.cat-filters-drawer-open{ transform:translateX(0); }
  .cat-filters-scroll{ overflow-y:auto; }
  .cat-filter-footer{ position:static; box-shadow:none; }

  .cat-filters-close{
    display:flex; align-items:center; justify-content:center; width:32px; height:32px; flex-shrink:0;
    border:none; border-radius:99px; background:var(--paper); color:var(--ink-soft);
    transition:background .15s var(--ease), color .15s var(--ease);
  }
  .cat-filters-close:hover{ background:var(--brand-soft); color:var(--brand-ink); }
}

/* "Filters" button in the listing toolbar (listing-toolbar.php),
   <992px only — opens .cat-filters as the drawer above. */
.btn-filters-open{
  display:flex; align-items:center; gap:7px; padding:8px 14px; border:1px solid var(--line-strong); border-radius:99px;
  background:var(--surface); color:var(--ink); font-size:13.5px; font-weight:600;
  transition:border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.btn-filters-open:hover{ border-color:var(--brand); color:var(--brand-ink); box-shadow:var(--shadow-xs); }
.btn-filters-open .n{
  background:var(--brand); color:#fff; border-radius:99px; min-width:18px; height:18px;
  display:inline-flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; padding:0 4px;
}