/* ===========================================================================
   IndustrieWert — catalogue: listing hero, filters, results, pager, search page
   =========================================================================== */
.crumbs { padding-block: var(--s-4); font-size: var(--fs-body-s); color: var(--c-ink-faint); }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s-2); }
.crumbs li + li::before { content: "/"; margin-right: var(--s-2); color: var(--c-grey-300); }
.crumbs a { text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.crumbs [aria-current] { color: var(--c-ink); }

/* ------------------------------------------------------------- hero band */
.lst-hero { position: relative; border-bottom: var(--bw-hair) solid var(--c-rule); padding-bottom: var(--s-7); }
.lst-hero__inner { display: flex; flex-direction: column; gap: var(--s-6); padding-top: var(--s-4); }
.lst-hero__copy { display: flex; flex-direction: column; gap: var(--s-3); max-width: 60ch; }
.lst-hero__title { font-size: clamp(2.2rem, 1.4rem + 3.4vw, 4rem); }
.lst-hero__intro { color: var(--c-ink-muted); }

/* Photographic band: the family's own product photograph, held back behind a
   steel gradient so the type stays AAA. Never a stock image (R2). */
.lst-hero--photo { color: #fff; border-bottom: 0; isolation: isolate; }
.lst-hero--photo::after {
  content: ""; position: absolute; inset: 0; z-index: -2; background-image: var(--hero);
  background-size: cover; background-position: center 40%; opacity: .34; filter: saturate(.75) contrast(1.05);
}
.lst-hero--photo .wrap { position: relative; z-index: 1; }
.lst-hero--photo.m-grid::before { z-index: -1; }
.lst-hero--photo .crumbs { color: var(--c-grey-400); } .lst-hero--photo .crumbs [aria-current] { color: var(--c-grey-200); }
.lst-hero--photo .lst-hero__intro { color: var(--c-grey-300); }
.lst-hero--photo .t-label { color: var(--c-accent); }
.lst-hero--photo .lst-hero__copy { text-shadow: 0 1px 2px rgb(0 0 0 / .5); }

.chips { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s-2); }
.chip {
  display: inline-flex; align-items: center; gap: var(--s-2); min-height: 40px; padding: 8px var(--s-3);
  border: var(--bw-hair) solid var(--c-grey-300); border-radius: var(--r-2); text-decoration: none;
  font-size: var(--fs-body-s); font-weight: 550; background: var(--c-surface); color: var(--c-ink);
  transition: border-color var(--t-fast) var(--ease-mech), background var(--t-fast) var(--ease-mech);
}
.chip:hover { border-color: var(--c-industrial-900); }
.chip.is-on { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-accent-ink); }
.chip__n { color: var(--c-ink-faint); font-size: var(--fs-caption); }
.chip.is-on .chip__n { color: var(--c-accent-ink); }
.lst-hero--photo .chip { background: rgb(13 13 13 / .62); color: #fff; border-color: rgb(255 255 255 / .28); backdrop-filter: blur(4px); }
.lst-hero--photo .chip:hover { border-color: var(--c-accent); }
.lst-hero--photo .chip__n { color: var(--c-grey-400); }
.lst-hero--photo .chip.is-on { background: var(--c-accent); color: var(--c-accent-ink); border-color: var(--c-accent); }
.lst-hero--photo .chip.is-on .chip__n { color: var(--c-accent-ink); }

.lst { padding-top: var(--s-6); }
.lst__layout { display: grid; gap: var(--s-7); grid-template-columns: 264px minmax(0, 1fr); align-items: start; }
@media (max-width: 900px) { .lst__layout { grid-template-columns: 1fr; gap: var(--s-5); } }

.lst__filters { position: sticky; top: calc(var(--h-header-compact) + var(--s-4)); display: flex; flex-direction: column; gap: var(--s-4); }
@media (max-width: 900px) { .lst__filters { position: static; } }
.lst__filters-head { display: flex; justify-content: space-between; align-items: baseline; }
.lst__reset { font-size: var(--fs-caption); color: var(--c-ink-faint); }
.facet { border: 0; padding: 0; margin: 0; padding-top: var(--s-3); border-top: var(--bw-hair) solid var(--c-rule); }
.facet legend { padding: 0; margin-bottom: var(--s-2); }
.facet__opt { display: flex; align-items: center; gap: var(--s-2); padding: 6px 0; font-size: var(--fs-body-s); cursor: pointer; }
.facet__opt input { width: 16px; height: 16px; accent-color: var(--c-industrial-900); }
.facet__opt span:first-of-type { flex: 1; }
.facet__n { color: var(--c-ink-faint); font-size: var(--fs-caption); }
.facet__range { display: flex; align-items: center; gap: var(--s-2); }
.facet__range input { width: 100%; min-width: 0; padding: 8px 10px; border: var(--bw-hair) solid var(--c-rule); border-radius: var(--r-1); font-family: var(--f-mono); font-size: var(--fs-body-s); }
.lst__apply { margin-top: var(--s-2); }
.js-motion .lst__apply { display: none; }        /* filters apply live once JS runs */

.lst__bar { display: flex; justify-content: space-between; align-items: center; gap: var(--s-4); padding-bottom: var(--s-4); margin-bottom: var(--s-5); border-bottom: var(--bw-hair) solid var(--c-rule); flex-wrap: wrap; }
.lst__sort { display: flex; align-items: center; gap: var(--s-3); }
.lst__sort select { padding: 8px 12px; border: var(--bw-hair) solid var(--c-rule); border-radius: var(--r-1); background: var(--c-surface); font-size: var(--fs-body-s); }
.lst__results { position: relative; min-height: 200px; }
.lst__results.is-loading { opacity: .55; pointer-events: none; }
.lst__empty { padding: var(--s-8) 0; display: flex; flex-direction: column; gap: var(--s-3); }
.pager { display: flex; align-items: center; justify-content: center; gap: var(--s-4); margin-top: var(--s-7); }
.pager__pos { color: var(--c-ink-faint); }

.search__page { display: flex; gap: var(--s-2); margin-top: var(--s-4); max-width: 640px; }
.search__page input { flex: 1; min-width: 0; padding: 12px var(--s-3); border: var(--bw-hair) solid var(--c-rule); border-radius: var(--r-1); font-size: var(--fs-body); }