/* Catalog layer: page heads, spec plates, control panel, operation card, datasheet, FAQ. Tokens only. */

.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.page-section--tight { padding-top: var(--space-6); }
.page-head { padding-bottom: var(--space-6); }
.page-head__lead { font-size: var(--step-1); color: var(--ink-muted); max-width: 60ch; }
.prose { max-width: 72ch; }
.prose h2 { font-size: var(--step-2); margin-top: var(--space-7); }
.prose ul { padding-left: var(--space-5); }
.prose li { margin-bottom: var(--space-2); }
.prose li::marker { color: var(--signal-text); }

/* Breadcrumbs */
.breadcrumbs { max-width: var(--max-width); margin: 0 auto; padding: var(--space-5) var(--gutter) 0; font-size: var(--step--1); color: var(--ink-muted); }
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; margin: 0; padding: 0; }
.breadcrumbs li + li::before { content: "/"; margin-right: var(--space-2); color: var(--line); }
.breadcrumbs a { text-decoration: none; }
.breadcrumbs a:hover { color: var(--ink); }

/* Operation card «OP 10 … OP 60» */
.op-card__title { font-size: var(--step--1); text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-muted); margin-top: var(--space-7); }
.op-card { list-style: none; margin: 0; padding: 0; display: grid; border-top: var(--border); }
.op-card__step { display: grid; grid-template-columns: 5.5rem 1fr; gap: var(--space-4); padding: var(--space-3) 0; border-bottom: var(--border); }
.op-card__code { color: var(--signal-text); }
@media (min-width: 1024px) {
  .op-card { grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 0; border-left: var(--border); }
  .op-card__step { grid-template-columns: 1fr; padding: var(--space-4); border: var(--border); border-left: 0; margin-top: -1px; }
}

/* Control panel (filters) */
.panel { border: var(--border); background: var(--surface-1); padding: var(--space-5); display: grid; gap: var(--space-5); }
.panel__group { border: 0; margin: 0; padding: 0; min-width: 0; }
.panel__group--row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); }
.panel__legend { font-size: var(--step--1); text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-muted); padding: 0; margin-bottom: var(--space-3); }
.panel__group--row .panel__legend { margin: 0; }
.panel__switches { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.panel__select { min-height: var(--tap); min-width: 12rem; background: var(--surface-0); color: var(--ink); border: var(--border); border-radius: var(--radius); padding: 0 var(--space-3); font: inherit; font-size: var(--step--1); }
.switch { position: relative; display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--tap); padding: 0 var(--space-3); border: var(--border); background: var(--surface-0); cursor: pointer; font-size: var(--step--1); }
.switch input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.switch__led { width: 8px; height: 8px; border-radius: 50%; background: var(--line); flex: none; }
.switch input:checked ~ .switch__led { background: var(--signal); box-shadow: 0 0 0 3px var(--grid-axis); }
.switch input:checked ~ .switch__label { color: var(--ink); }
.switch__label { color: var(--ink-muted); }
.switch__count { color: var(--ink-muted); font-size: 0.75em; }
.switch:has(input:focus-visible) { outline: 2px solid var(--signal); outline-offset: 2px; }
.results { color: var(--ink-muted); font-size: var(--step--1); margin: var(--space-5) 0; }
.btn--small { padding: var(--space-2) var(--space-4); }

/* Spec plates */
.plate-grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--card-min)), 1fr)); }
.plate-grid--three { grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--card-min-mid)), 1fr)); }
.plate {
  position: relative; display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5); border: var(--border);
  /* four rivets in the corners */
  background:
    radial-gradient(circle at 9px 9px, var(--line) 2.5px, transparent 3px),
    radial-gradient(circle at calc(100% - 9px) 9px, var(--line) 2.5px, transparent 3px),
    radial-gradient(circle at 9px calc(100% - 9px), var(--line) 2.5px, transparent 3px),
    radial-gradient(circle at calc(100% - 9px) calc(100% - 9px), var(--line) 2.5px, transparent 3px),
    var(--surface-1);
}
.plate__rivets { display: none; }
.plate__head { display: flex; justify-content: space-between; font-size: 0.75rem; color: var(--ink-muted); padding: 0 var(--space-2); }
.plate__head abbr { text-decoration: none; border: var(--border); padding: 0 var(--space-1); }
.plate__logo { display: grid; place-items: center; height: var(--logo-box); background: var(--plate); text-decoration: none; padding: var(--space-3); }
.plate__logo--dark { background: var(--plate-dark); }
.plate__logo img { max-height: var(--logo-max); width: auto; object-fit: contain; }
.plate__logo-text { font-family: var(--font-display); font-stretch: 125%; font-weight: 800; font-size: var(--step-1); color: var(--surface-0); text-transform: uppercase; letter-spacing: 0.04em; text-align: center; }
.plate__logo--dark .plate__logo-text { color: var(--ink); }
.plate__name { font-size: var(--step-1); margin: 0; }
.plate__name a { text-decoration: none; }
.plate__name a:hover { color: var(--signal-text); }
.plate__summary { color: var(--ink-muted); font-size: var(--step--1); margin: 0; flex: 1; }
.plate__country { font-size: 0.75rem; text-transform: uppercase; color: var(--coolant-text); margin: 0; }
.plate__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); padding-top: var(--space-3); border-top: var(--border); }
.plate--large .plate__logo { height: var(--logo-box-large); }
.plate--large .plate__logo img { max-height: var(--logo-max-large); }

/* Spec list of types */
.spec-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--card-min-wide)), 1fr)); column-gap: var(--space-7); border-top: var(--border); }
.spec-list li { display: grid; grid-template-columns: 2.5rem 1fr auto; gap: var(--space-3); padding: var(--space-3) 0; border-bottom: var(--border); }
.spec-list__pos, .spec-list__count { color: var(--ink-muted); font-size: var(--step--1); }
.spec-list a { text-decoration: none; }
.spec-list a:hover { color: var(--signal-text); }

/* Brand page */
.brand-head { display: grid; gap: var(--space-7); align-items: start; }
/* Grid items may shrink below their longest word: long brand names (BURKHARDT+WEBER) wrap instead of widening the page. */
.brand-head > *, .plate { min-width: 0; }
.brand-head h1 { overflow-wrap: anywhere; }
@media (min-width: 1024px) { .brand-head { grid-template-columns: 5fr 7fr; } }
.datasheet { display: grid; grid-template-columns: minmax(0, max-content) minmax(0, 1fr); gap: var(--space-2) var(--space-4); margin: 0; font-size: var(--step--1); }
.datasheet dt { color: var(--ink-muted); text-transform: uppercase; overflow-wrap: anywhere; }
.datasheet dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 479px) {
  .datasheet { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .datasheet dd { margin-bottom: var(--space-3); }
}
.table-scroll { overflow-x: auto; max-width: 100%; }

/* Stock: datasheet table, hours gauge */
.table-scroll { overflow-x: auto; border: var(--border); max-width: 100%; }
.table-scroll:focus-visible { outline: 2px solid var(--signal); }
.spec-table { border-collapse: collapse; font-size: 0.8rem; min-width: 1200px; width: 100%; }
.spec-table th, .spec-table td { border-bottom: var(--border); padding: var(--space-2) var(--space-3); text-align: left; vertical-align: top; }
.spec-table thead th { color: var(--ink-muted); text-transform: uppercase; font-weight: 600; background: var(--surface-1); white-space: nowrap; }
.spec-table tbody th { position: sticky; left: 0; background: var(--surface-0); white-space: nowrap; }
.spec-table a { text-decoration: none; color: var(--ink); }
.spec-table a:hover { color: var(--signal-text); }
.spec-list--plain li { grid-template-columns: 2.5rem 1fr; }
.gauge__bar { width: 100%; height: 6px; }
.gauge__track { fill: var(--line); }
.gauge__fill { fill: var(--signal); }
.gauge__label { font-size: 0.75rem; color: var(--ink-muted); margin: var(--space-2) 0 0; }

/* Brand gallery */
.gallery__grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--card-min-wide)), 1fr)); }
.gallery__item { margin: 0; padding: var(--space-3); }
.gallery__item img, .gallery__item video { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: contain; background: var(--plate); }
.gallery__item figcaption { font-size: 0.75rem; color: var(--ink-muted); text-transform: uppercase; letter-spacing: 0.06em; }

/* Related groups and FAQ */
.related { display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--card-min-wide)), 1fr)); }
.related__group { border-top: 2px solid var(--signal); padding-top: var(--space-3); }
.related__brands { color: var(--ink-muted); font-size: var(--step--1); }
.faq__item { border-top: var(--border); padding: var(--space-4) 0; max-width: 80ch; }
.faq__item:last-child { border-bottom: var(--border); }
.faq__item summary { cursor: pointer; list-style: none; display: flex; gap: var(--space-3); }
.faq__item summary::before { content: "+"; font-family: var(--font-mono); color: var(--signal-text); }
.faq__item[open] summary::before { content: "−"; }
.faq__q { font-size: var(--step-1); margin: 0; display: inline; }
.faq__item p { margin: var(--space-3) 0 0 var(--space-6); color: var(--ink-muted); }