/* Catalogue: the category head, the filter rail, result states. The product
   card itself lives in shell.css (.bjc-card--v2) because every page uses it. */

.bjc-catalog-page { padding-block: var(--bjc-5) var(--bjc-8); }

/* ---- head: copy beside the illustration ---------------------------------- */
.bjc-catalog-head { display: grid; gap: var(--bjc-5); margin-bottom: var(--bjc-7); }
@media (min-width: 900px) {
  .bjc-catalog-head--with-art { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--bjc-8); align-items: center; }
}
.bjc-catalog-head__copy h1 { margin-bottom: var(--bjc-4); }
.bjc-catalog-head__copy .bjc-prose p, .bjc-catalog-head__copy .bjc-category-copy p { font-size: var(--bjc-text-lg); color: var(--bjc-ink-muted); }
/* Only the opening of the pack's copy belongs in the head; the rest reads after
   the products. Sub-headings and later paragraphs are kept but quieter. */
.bjc-catalog-head__copy .bjc-category-copy h2 { font-size: var(--bjc-text-xl); margin-top: var(--bjc-5); }
.bjc-catalog-head__copy .bjc-category-copy h2:first-child { margin-top: 0; }
.bjc-catalog-head__copy .bjc-category-copy > *:nth-child(n+4) { display: none; }
.bjc-catalog-head__media { padding: var(--bjc-6); background: var(--bjc-blue-grey); border-radius: var(--bjc-radius-xl); }
.bjc-catalog-head__art { max-width: 420px; margin-inline: auto; }

/* ---- filter rail as chips ------------------------------------------------ */
.bjc-catalog { display: grid; gap: var(--bjc-6); }
@media (min-width: 900px) {
  .bjc-catalog { grid-template-columns: 240px minmax(0, 1fr); column-gap: var(--bjc-7); align-items: start; }
  .bjc-filters { position: sticky; top: calc(var(--bjc-target) + var(--bjc-6)); }
}
.bjc-filters { padding: 0; border: 0; }
.bjc-filters__heading { margin: 0 0 var(--bjc-4); font-size: var(--bjc-display-3); }
.bjc-filters__group { margin: 0 0 var(--bjc-5); padding: 0; border: none; }
.bjc-filters__group legend { padding: 0 0 var(--bjc-2); font-family: var(--bjc-font-mono); font-size: var(--bjc-text-xs); letter-spacing: var(--bjc-tracking-label); text-transform: uppercase; color: var(--bjc-ink-muted); }
.bjc-filters__group { display: flex; flex-wrap: wrap; gap: var(--bjc-2); }
.bjc-filters__group legend { flex-basis: 100%; }
.bjc-filters__option {
  position: relative; display: inline-flex; align-items: center; gap: var(--bjc-2);
  min-height: var(--bjc-target); padding: 0 var(--bjc-4);
  border: 1px solid var(--bjc-line-strong); border-radius: 999px;
  background: var(--bjc-white); color: var(--bjc-navy); font-weight: var(--bjc-weight-medium);
  cursor: pointer;
  transition: background var(--bjc-dur-fast) var(--bjc-ease-out), border-color var(--bjc-dur-fast) var(--bjc-ease-out), color var(--bjc-dur-fast) var(--bjc-ease-out);
}
.bjc-filters__option:hover { border-color: var(--bjc-navy); }
.bjc-filters__option input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.bjc-filters__option:has(input:checked) { background: var(--bjc-navy); border-color: var(--bjc-navy); color: var(--bjc-white); }
.bjc-filters__option:has(input:focus-visible) { outline: var(--bjc-focus-width) solid var(--bjc-focus); outline-offset: var(--bjc-focus-offset); }
/* Without :has() the checkbox stays visible, which is the honest fallback. */
@supports not selector(:has(*)) { .bjc-filters__option input { position: static; opacity: 1; width: auto; height: auto; accent-color: var(--bjc-navy); } }
.bjc-filters__actions { display: flex; gap: var(--bjc-2); flex-wrap: wrap; }

/* ---- results ------------------------------------------------------------- */
.bjc-catalog__count { margin: 0 0 var(--bjc-4); font-family: var(--bjc-font-mono); font-size: var(--bjc-text-sm); color: var(--bjc-teal-text); letter-spacing: 0.02em; }
.bjc-catalog .bjc-card-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--bjc-5); }

.pagination, .navigation.pagination { margin-top: var(--bjc-7); }
.nav-links { display: flex; flex-wrap: wrap; gap: var(--bjc-2); }
.nav-links .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: var(--bjc-target); min-height: var(--bjc-target); padding: 0 var(--bjc-3); border: 1px solid var(--bjc-line-strong); border-radius: 999px; color: var(--bjc-navy); text-decoration: none; font-family: var(--bjc-font-mono); }
.nav-links .page-numbers.current { background: var(--bjc-navy); border-color: var(--bjc-navy); color: var(--bjc-white); }
.nav-links .page-numbers:hover { border-color: var(--bjc-navy); }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); }