/* Hallmark · pre-emit critique: P5 H5 E4 S5 R5 V4 · genre: modern-minimal · macrostructure: catalogue workbench · design-system: design.md */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; overflow-x: clip; }
body {
  min-height: 100dvh;
  overflow-x: clip;
  color: var(--color-ink);
  background: var(--color-paper);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
}
a { color: inherit; }
button, input { font: inherit; color: inherit; }
h1, h2, h3 {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--color-ink);
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 600;
  text-wrap: balance;
}
p, li { text-wrap: pretty; }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; border-radius: var(--radius-control); }
[hidden] { display: none !important; }
.container { width: min(100% - 2rem, var(--page-max)); margin-inline: auto; }
.skip-link { position: absolute; inset-inline-start: -9999px; }
.skip-link:focus { inset-inline-start: var(--space-md); top: var(--space-md); z-index: 300; background: var(--color-accent); color: var(--color-accent-ink); padding: var(--space-sm); }

.catalog-header {
  position: sticky;
  top: 0;
  z-index: 100;
  min-height: 64px;
  display: flex;
  align-items: center;
  background: var(--color-header-bg);
  border-bottom: var(--rule) solid var(--color-rule);
  backdrop-filter: blur(10px);
}
.catalog-nav { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); }
.catalog-wordmark { display: inline-flex; align-items: center; gap: var(--space-xs); text-decoration: none; white-space: nowrap; font-family: var(--font-display); font-weight: 700; }
.catalog-wordmark svg { flex: none; }
.catalog-links { display: flex; align-items: center; gap: var(--space-lg); }
.catalog-links a { text-decoration: none; white-space: nowrap; font-size: var(--text-sm); font-weight: 600; }
.catalog-links .primary-link { min-height: 44px; display: inline-flex; align-items: center; padding-inline: var(--space-lg); border-radius: var(--radius-control); color: var(--color-accent-ink); background: var(--color-accent); }

.breadcrumb { display: flex; flex-wrap: wrap; gap: var(--space-xs); padding-block: var(--space-lg); color: var(--color-muted); font-family: var(--font-mono); font-size: var(--text-xs); }
.breadcrumb a { text-decoration: none; }
.breadcrumb span + span::before, .breadcrumb a + span::before { content: "/"; margin-inline-end: var(--space-xs); }

.catalog-hero { padding-block: clamp(var(--space-2xl), 8vw, var(--space-4xl)); border-bottom: var(--rule) solid var(--color-rule); }
.catalog-hero-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; gap: var(--space-2xl); }
.eyebrow { display: block; margin-bottom: var(--space-md); color: var(--color-accent); font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.04em; text-transform: uppercase; }
.catalog-hero h1 { max-width: 13ch; font-size: var(--text-display); line-height: 1.04; letter-spacing: -0.035em; }
.catalog-hero-copy { max-width: 52ch; color: var(--color-muted); font-size: var(--text-md); }
.source-note { margin-top: var(--space-lg); padding-top: var(--space-md); border-top: var(--rule) solid var(--color-rule); color: var(--color-muted); font-family: var(--font-mono); font-size: var(--text-xs); }

.filter-rail { display: flex; flex-wrap: wrap; gap: var(--space-xs); padding-block: var(--space-xl); }
.filter-rail button { min-height: 44px; padding-inline: var(--space-md); border: var(--rule) solid var(--color-rule-strong); border-radius: var(--radius-control); background: var(--color-paper); white-space: nowrap; cursor: pointer; }
.filter-rail button[aria-pressed="true"] { border-color: var(--color-ink); background: var(--color-ink); color: var(--color-on-dark); }

.product-list { padding-block-end: var(--space-4xl); }
.product-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-lg); }
.product-card { display: flex; min-width: 0; flex-direction: column; border: var(--rule) solid var(--color-rule); border-radius: var(--radius-media); overflow: clip; background: var(--color-paper); transition: transform var(--dur-base) var(--ease-out); }
.product-card:hover { transform: translateY(-3px); }
.product-card-body { display: flex; flex: 1; flex-direction: column; padding: var(--space-lg); }
.product-code { margin-bottom: var(--space-sm); color: var(--color-muted); font-family: var(--font-mono); font-size: var(--text-xs); }
.product-card h2 { margin-bottom: var(--space-sm); font-size: var(--text-lg); line-height: 1.2; }
.product-card p { color: var(--color-muted); }
.product-meta { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-block: var(--space-lg); }
.product-meta span { padding: var(--space-2xs) var(--space-sm); border: var(--rule) solid var(--color-rule); border-radius: var(--radius-control); font-family: var(--font-mono); font-size: var(--text-xs); }
.product-link { display: inline-flex; align-items: center; width: fit-content; margin-top: auto; border-bottom: 2px solid var(--color-accent); text-decoration: none; white-space: nowrap; font-weight: 600; }

.catalog-card-media {
  position: relative;
  width: 100%;
  overflow: hidden;
  aspect-ratio: var(--media-ratio, 4 / 3);
  background: var(--color-paper-3);
  border-bottom: var(--rule) solid var(--color-rule);
}
.catalog-card-media picture,
.catalog-card-media img { display: block; width: 100%; height: 100%; }
.catalog-card-media img { object-fit: cover; object-position: center; }
.catalog-media-label { position: absolute; inset: var(--space-sm) auto auto var(--space-sm); padding: var(--space-2xs) var(--space-sm); border: var(--rule) solid var(--color-dark-border); border-radius: var(--radius-control); background: var(--color-concept-label-bg); color: var(--color-on-dark); font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.03em; text-transform: uppercase; backdrop-filter: blur(8px); }

.machine-plate { min-height: 13rem; display: grid; align-content: center; gap: var(--space-sm); padding: var(--space-xl); background: var(--color-paper-3); border-bottom: var(--rule) solid var(--color-rule); }
.machine-plate span { display: block; height: 1.25rem; border: var(--rule) solid var(--color-rule-strong); background: var(--color-paper); }
.machine-plate span:nth-child(1) { width: 38%; }
.machine-plate span:nth-child(2) { width: 84%; height: 3.25rem; border-inline-start: 0.55rem solid var(--color-accent); }
.machine-plate span:nth-child(3) { width: 58%; justify-self: end; }
.machine-plate[data-route="roll"] span:first-child, .machine-plate[data-route="roll"] span:last-child { width: 3.5rem; height: 3.5rem; border-radius: 50%; }
.machine-plate[data-route="glazing"] span:nth-child(2) { border-block-start: 0.55rem solid var(--color-accent); border-inline-start-width: var(--rule); }

.comparison-band { padding-block: var(--space-3xl); background: var(--color-graphite); color: var(--color-on-dark); }
.comparison-band h2 { color: var(--color-on-dark); font-size: var(--text-2xl); }
.comparison-band p { max-width: 65ch; color: var(--color-on-dark-muted); }
.comparison-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--rule); margin-top: var(--space-xl); background: var(--color-dark-border); border: var(--rule) solid var(--color-dark-border); }
.comparison-pair article { padding: var(--space-xl); background: var(--color-graphite); }
.comparison-pair h3 { color: var(--color-on-dark); }
.comparison-pair dl { margin-top: var(--space-lg); }
.comparison-pair dl div { display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: var(--space-md); padding-block: var(--space-sm); border-top: var(--rule) solid var(--color-dark-border); }
.comparison-pair dt { color: var(--color-on-dark-muted); font-family: var(--font-mono); font-size: var(--text-xs); }
.comparison-pair dd { margin: 0; }

.detail-hero { padding-block: var(--space-2xl) var(--space-3xl); }
.detail-hero-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-2xl); align-items: center; }
.detail-hero h1 { max-width: 14ch; font-size: clamp(2.5rem, 5vw, 4.5rem); line-height: 1.05; letter-spacing: -0.035em; }
.detail-lede { max-width: 62ch; margin-top: var(--space-lg); color: var(--color-muted); font-size: var(--text-md); }
.detail-actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-xl); }
.button { min-height: 44px; display: inline-flex; align-items: center; padding-inline: var(--space-lg); border-radius: var(--radius-control); text-decoration: none; white-space: nowrap; font-weight: 600; }
.button-primary { background: var(--color-accent); color: var(--color-accent-ink); }
.button-secondary { border: var(--rule) solid var(--color-rule-strong); }
.detail-visual { border: var(--rule) solid var(--color-rule); border-radius: var(--radius-media); overflow: clip; }
.detail-visual .machine-plate { min-height: 24rem; border-bottom: 0; }
.detail-product-image .detail-image-frame { position: relative; width: min(100%, var(--media-max-width, 46rem)); margin-inline: auto; overflow: hidden; background: var(--color-graphite); aspect-ratio: var(--media-ratio, 4 / 3); }
.detail-image-frame picture { display: block; width: 100%; height: 100%; }
.detail-image-frame img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.detail-image-label { position: absolute; inset: var(--space-md) auto auto var(--space-md); padding: var(--space-2xs) var(--space-sm); border: var(--rule) solid var(--color-dark-border); border-radius: var(--radius-control); background: var(--color-concept-label-bg); color: var(--color-on-dark); font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.03em; text-transform: uppercase; backdrop-filter: blur(8px); }
.detail-caption { padding: var(--space-md); border-top: var(--rule) solid var(--color-rule); color: var(--color-muted); font-family: var(--font-mono); font-size: var(--text-xs); }

.detail-section { padding-block: var(--space-3xl); border-top: var(--rule) solid var(--color-rule); }
.section-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-2xl); }
.section-grid h2 { font-size: var(--text-2xl); line-height: 1.1; }
.fact-list { list-style: none; }
.fact-list li { display: grid; grid-template-columns: minmax(8rem, 0.45fr) minmax(0, 1fr); gap: var(--space-lg); padding-block: var(--space-md); border-top: var(--rule) solid var(--color-rule); }
.fact-list strong { font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.03em; }
.fact-list span { color: var(--color-ink-2); }
.input-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--rule); list-style: none; background: var(--color-rule); border: var(--rule) solid var(--color-rule); }
.input-list li { min-height: 8rem; padding: var(--space-lg); background: var(--color-paper); }
.input-list li::before { content: "Required input"; display: block; margin-bottom: var(--space-sm); color: var(--color-accent); font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; }

.spec-table { width: 100%; border-collapse: collapse; }
.spec-table th, .spec-table td { padding: var(--space-md); border-bottom: var(--rule) solid var(--color-rule); text-align: left; vertical-align: top; }
.spec-table th { width: 38%; color: var(--color-muted); font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 500; text-transform: uppercase; }
.to-confirm { color: var(--color-muted); font-family: var(--font-mono); font-size: var(--text-sm); }

.video-panel { padding: var(--space-xl); border: var(--rule) solid var(--color-rule); border-radius: var(--radius-media); background: var(--color-paper-2); }
.video-stage { aspect-ratio: 16 / 9; display: grid; place-items: center; border: var(--rule) solid var(--color-rule-strong); background: var(--color-graphite); color: var(--color-on-dark); }
.video-stage iframe { width: 100%; height: 100%; border: 0; }
.video-stage video { width: 100%; height: 100%; border: 0; object-fit: contain; }
.video-panel-fit { width: min(100%, var(--media-panel-max, 56rem)); justify-self: start; padding: var(--space-md); }
.video-stage-fit { width: 100%; aspect-ratio: var(--media-ratio, 16 / 9); border: 0; outline: var(--rule) solid var(--color-rule-strong); }
.video-placeholder { max-width: 32rem; padding: var(--space-lg); text-align: center; }
.video-placeholder strong { display: block; margin-bottom: var(--space-sm); font-family: var(--font-display); font-size: var(--text-xl); }
.video-placeholder p { color: var(--color-on-dark-muted); }
.video-panel button { min-height: 44px; margin-top: var(--space-md); padding-inline: var(--space-lg); border: 0; border-radius: var(--radius-control); background: var(--color-accent); color: var(--color-accent-ink); white-space: nowrap; font-weight: 600; }
.video-panel button:disabled { cursor: not-allowed; opacity: 0.55; }
.video-note { margin-top: var(--space-md); color: var(--color-muted); font-size: var(--text-sm); }

.related-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-md); }
.related-card { min-width: 0; padding: var(--space-lg); border: var(--rule) solid var(--color-rule); border-radius: var(--radius-media); text-decoration: none; }
.related-card span { display: block; color: var(--color-muted); font-family: var(--font-mono); font-size: var(--text-xs); }
.related-card strong { display: block; margin-top: var(--space-sm); font-family: var(--font-display); }

.catalog-footer { padding-block: var(--space-2xl); background: var(--color-graphite); color: var(--color-on-dark); }
.footer-row { display: flex; justify-content: space-between; gap: var(--space-lg); align-items: center; }
.footer-row p { color: var(--color-on-dark-muted); }
.footer-row a { text-decoration: none; white-space: nowrap; }

@media (hover: hover) and (pointer: fine) {
  .product-card:hover, .related-card:hover { transform: translateY(-3px); }
}
@media (max-width: 960px) {
  .catalog-hero-grid, .detail-hero-grid, .section-grid { grid-template-columns: 1fr; }
  .catalog-hero h1, .detail-hero h1 { max-width: 18ch; }
  .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .detail-visual .machine-plate { min-height: 18rem; }
}
@media (max-width: 640px) {
  .catalog-header { min-height: 56px; }
  .catalog-wordmark { font-size: var(--text-sm); }
  .catalog-links a:not(.primary-link) { display: none; }
  .catalog-links .primary-link { padding-inline: var(--space-md); }
  .catalog-hero, .detail-hero { padding-block: var(--space-2xl); }
  .catalog-hero h1, .detail-hero h1 { max-width: 100%; }
  .product-grid, .related-grid, .input-list, .comparison-pair { grid-template-columns: 1fr; }
  .filter-rail { flex-wrap: nowrap; overflow-x: auto; padding-bottom: var(--space-md); }
  .fact-list li { grid-template-columns: 1fr; gap: var(--space-xs); }
  .comparison-pair dl div { grid-template-columns: 1fr; gap: var(--space-xs); }
  .footer-row { align-items: flex-start; flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; }
}