/* Shared two-level catalog controls; page content and navigation stay separate. */
.catalog-sidebar {
  width: 286px;
  top: 100px;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  padding: 22px 16px 16px;
}
.catalog-sidebar .side-head { margin-bottom: 12px; }
.filter-hint { font-size: 12px; line-height: 1.6; color: var(--muted); margin-bottom: 22px; }
.catalog-sidebar .f-group { margin-bottom: 24px; }
.catalog-sidebar .g-label { margin-bottom: 10px; }
.filter-branch { margin-bottom: 3px; }
.filter-row { display: flex; align-items: center; gap: 2px; }
.catalog-sidebar .f-pill {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-family: inherit;
  font-weight: 400;
  line-height: 1.5;
  padding-top: 9px;
  padding-bottom: 9px;
  min-width: 0;
}
.catalog-sidebar .filter-parent { flex: 1; font-size: 13px; }
.catalog-sidebar .f-pill:hover { background: #f7f9f3; }
.catalog-sidebar .f-pill.active { background: #f0f6e4; font-weight: 500; }
.catalog-sidebar .f-pill.partial::before { background: var(--green); border-color: var(--green); }
.catalog-sidebar .f-pill.partial::after {
  content: '';
  position: absolute;
  top: 50%; left: 7px;
  width: 8px; height: 2px;
  background: #fff;
  border: none;
  transform: translateY(-50%);
}
.filter-expand {
  flex: 0 0 28px;
  height: 34px;
  display: flex; align-items: center; justify-content: center;
  border: none; border-radius: 6px;
  background: transparent; color: var(--muted); cursor: pointer;
}
.filter-expand:hover { background: #f0f6e4; color: var(--green-dark); }
.filter-expand[aria-expanded="true"] svg { transform: rotate(90deg); }
.filter-children { margin: 3px 0 10px 11px; padding-left: 11px; border-left: 1px solid var(--line); }
.filter-children[hidden] { display: none; }
.catalog-sidebar .filter-child { font-size: 12.5px; padding-right: 8px; }
.catalog-sidebar button:focus-visible { outline: 2px solid var(--green-dark); outline-offset: 2px; }
.catalog-sidebar .side-clear { font-family: inherit; }
#activePills .a-pill { max-width: 100%; overflow-wrap: anywhere; }
#activePills .a-pill button { flex: none; }
#cards .card[hidden] { display: none; }
@media (max-width: 900px) {
  .catalog-sidebar { width: 100%; position: static; max-height: none; overflow: visible; }
  .catalog-sidebar .f-group { display: inline-block; vertical-align: top; width: calc(50% - 12px); }
  .catalog-sidebar .f-group + .f-group { margin-left: 20px; }
}
@media (max-width: 560px) {
  .catalog-sidebar .f-group { display: block; width: 100%; }
  .catalog-sidebar .f-group + .f-group { margin-left: 0; }
}