/* Hallmark · genre: editorial · macrostructure: Catalogue + technical split detail
 * design-system: design.md · designed-as-app · theme: existing Argon
 * pre-emit critique: P4 H4 E4 S5 R5 V4
 * Existing industrial masthead retained; quiet mast-headed footer. Real supplied product assets.
 */
.catalog-site main { padding-bottom: 0; }
.catalog-site .mast { position: relative; }
.catalog-site .mast-nav a { min-height: 48px; }
.catalog-site .mast-top { padding-block: var(--space-sm); }
.catalog-site h1, .catalog-site h2, .catalog-site h3 { font-style: normal; }
.catalog-site .btn, .product-sections a, .catalog-tabs a, .close-links a, .crumbs a, .text-cta { white-space: nowrap; }
.catalog-heading { padding-block: var(--space-xl) var(--space-lg); }
.catalog-title-note { margin: 0 0 var(--space-sm); font-family: var(--font-ui); font-size: var(--text-sm); color: var(--color-muted); }
.catalog-heading h1 { max-width: 24ch; font-size: var(--text-product); }
.catalog-heading .lead { max-width: 63ch; margin-block: var(--space-md) var(--space-xl); }
.catalog-tabs { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); padding-block: var(--space-md); border-block: var(--rule); font-family: var(--font-ui); }
.catalog-tabs a { display: inline-flex; min-height: 44px; align-items: center; color: var(--color-muted); text-decoration: none; }
.catalog-tabs a:hover, .catalog-tabs a[aria-current] { color: var(--color-ink); text-decoration: underline; text-underline-offset: 7px; }
.catalog-policy { font-family: var(--font-ui); color: var(--color-muted); font-size: var(--text-sm); max-width: 90ch; }
.catalog-tools { display: grid; gap: var(--space-xs); margin-top: var(--space-xl); font-family: var(--font-ui); }
.catalog-tools label { font-weight: 600; }
.catalog-tools input { width: 100%; max-width: 36rem; min-height: 48px; padding: var(--space-sm) var(--space-md); border: 1px solid var(--color-line-strong); background: var(--color-photo); color: var(--color-ink); font: inherit; }
.catalog-tools p { margin: 0; color: var(--color-muted); font-size: var(--text-sm); }
.catalog-tools input::placeholder { color: var(--color-muted); opacity: 1; }
.catalog-tools input:hover { background: var(--color-paper-2); color: var(--color-ink); }
.catalog-tools input:disabled, .product-hero .thumbs button:disabled { opacity: .55; cursor: not-allowed; }
.product-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xl) var(--space-lg); }
.catalog-results { padding-block: var(--space-lg) var(--space-2xl); }
.product-tile { min-width: 0; border-bottom: var(--rule); padding-bottom: var(--space-lg); }
.product-tile[hidden] { display: none; }
.tile-photo { display: block; position: relative; background: var(--color-photo); color: var(--color-muted); text-decoration: none; }
.tile-photo img { width: 100%; aspect-ratio: 1.25; object-fit: contain; padding: var(--space-md); }
.tile-photo > span { position: absolute; left: var(--space-xs); bottom: var(--space-xs); font: var(--text-xs) var(--font-ui); background: var(--color-photo); color: var(--color-muted); padding: var(--space-2xs) var(--space-xs); }
.tile-copy { padding-block: var(--space-md) 0; }
.tile-code { font-family: var(--font-ui); font-size: var(--text-xs); letter-spacing: .04em; color: var(--color-muted); margin: 0 0 var(--space-xs); }
.tile-copy h3 { font-size: var(--text-lg); margin: 0; line-height: 1.2; }
.tile-copy h3 a { color: var(--color-ink); text-decoration: none; }
.tile-copy h3 a:hover { text-decoration: underline; }
.tile-copy > p:not(.tile-code) { font-family: var(--font-ui); font-size: var(--text-sm); color: var(--color-muted); margin: var(--space-sm) 0; line-height: 1.5; }
.tile-terms { display: grid; gap: var(--space-2xs); font-family: var(--font-ui); font-variant-numeric: tabular-nums; font-size: var(--text-sm); margin-top: var(--space-md); }
.tile-terms span { color: var(--color-muted); font-size: var(--text-xs); }
.tile-link { font: var(--text-sm) var(--font-ui); min-height: 44px; display: inline-flex; align-items: center; gap: var(--space-lg); text-decoration: none; }
.tile-link:hover { text-decoration: underline; }
.catalog-empty { padding-block: var(--space-xl); }
.product-opening { padding-block: var(--space-lg) var(--space-xl); }
.product-opening .crumbs { font-size: var(--text-xs); margin-bottom: var(--space-lg); }
.product-hero { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); align-items: start; }
.product-hero .gallery { min-width: 0; }
.product-hero .gallery .main { background: var(--color-photo); border: 0; }
.product-hero .gallery .main img { width: 100%; aspect-ratio: 1.15; object-fit: contain; padding: var(--space-lg); }
.product-hero .gallery .cap { font-size: var(--text-sm); margin-block: var(--space-sm) var(--space-xs); line-height: 1.4; }
.product-hero .gallery .cap small { font-size: var(--text-xs); line-height: 1.4; margin-top: var(--space-2xs); }
.product-hero .thumbs { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.product-hero .thumbs button { width: calc((100% - 32px) / 5); min-width: 44px; min-height: 44px; background: var(--color-photo); opacity: 1; }
.product-hero .thumbs img { object-fit: contain; aspect-ratio: 1.2; padding: var(--space-2xs); }
.product-hero .thumbs button[aria-current="true"] { border: 2px solid var(--color-ink); box-shadow: none; }
.product-hero .thumbs button:hover { border-color: var(--color-ink); background: var(--color-photo); }
.product-hero .thumbs button:active { opacity: .7; }
.photo-caveat { font: var(--text-xs)/1.5 var(--font-ui); color: var(--color-muted); margin-top: var(--space-md); }
.product-code { font: var(--text-sm)/1.5 var(--font-ui); color: var(--color-muted); margin: 0 0 var(--space-sm); }
.product-summary h1 { font-size: var(--text-product); line-height: 1.08; letter-spacing: 0; }
.product-lead { margin-block: var(--space-lg); line-height: 1.65; }
.quick-facts { margin: 0; font-family: var(--font-ui); font-size: var(--text-sm); }
.quick-facts > div { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: var(--space-md); border-top: var(--rule); padding-block: var(--space-sm); }
.quick-facts dt { color: var(--color-muted); }
.quick-facts dd { margin: 0; font-weight: 600; }
.buy-panel { background: var(--color-callout); color: var(--color-ink); padding: var(--space-lg); margin-top: var(--space-lg); font-family: var(--font-ui); }
.price-value { display: block; font-family: var(--font-display); font-size: 2.75rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.price-value span { font-family: var(--font-ui); font-weight: 400; font-size: var(--text-md); }
.quote-value { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 600; }
.buy-panel p { font-size: var(--text-sm); margin-block: var(--space-xs) var(--space-md); }
.buy-panel .btn { min-height: 48px; }
.buy-panel .price-qualification { font-size: var(--text-xs); line-height: 1.5; color: var(--color-muted); margin: var(--space-md) 0 0; }
.sample-note { font: var(--text-xs)/1.5 var(--font-ui); color: var(--color-muted); margin-top: var(--space-md); }
.product-sections { border-block: var(--rule); display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); font-family: var(--font-ui); padding-block: var(--space-xs); }
.product-sections a { min-height: 44px; display: inline-flex; align-items: center; font-size: var(--text-sm); text-decoration: none; color: var(--color-muted); }
.product-sections a:hover { color: var(--color-ink); text-decoration: underline; }
.product-content { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
.detail-section { margin-block: var(--space-2xl); scroll-margin-top: var(--space-lg); }
.detail-section h2 { margin-top: 0; font-size: var(--text-xl); }
.detail-section > p { color: var(--color-muted); margin-block: var(--space-md) var(--space-lg); }
.spec-table table { width: 100%; font: var(--text-sm)/1.6 var(--font-ui); }
.spec-table th { width: 29%; min-width: 0; color: var(--color-muted); font-weight: 400; }
.spec-table th, .spec-table td { padding: var(--space-md) var(--space-sm); overflow-wrap: anywhere; vertical-align: top; }
.spec-table th:first-child { padding-left: 0; }
.spec-table td { padding-right: 0; }
.spec-table tbody tr:last-child { border-bottom: var(--rule); }
.plain-list, .request-list { margin-block: var(--space-lg); }
.plain-list li, .request-list li { padding-block: var(--space-xs); }
.engineering-note { padding: var(--space-lg); background: var(--color-paper-2); color: var(--color-ink); margin-top: var(--space-lg); }
.engineering-note h3 { margin-top: 0; }
.engineering-note p { margin-bottom: 0; font-family: var(--font-ui); font-size: var(--text-sm); }
.text-cta { font-family: var(--font-ui); display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
.supply-notes { display: grid; gap: var(--space-lg) var(--space-xl); }
.supply-notes h3 { margin: 0 0 var(--space-xs); }
.supply-notes p { font: var(--text-sm)/1.6 var(--font-ui); color: var(--color-muted); margin: 0; }
.product-aside { padding-top: 0; margin-bottom: var(--space-xl); }
.product-aside .aside-title { font-family: var(--font-ui); color: var(--color-ink); font-weight: 600; }
.product-aside p { color: var(--color-muted); font: var(--text-sm)/1.6 var(--font-ui); }
.product-aside a { display: flex; align-items: center; min-height: 44px; font: var(--text-sm) var(--font-ui); }
.responsive-table { font: var(--text-sm)/1.5 var(--font-ui); font-variant-numeric: tabular-nums; }
.responsive-table thead { display: none; }
.responsive-table table, .responsive-table tbody { display: block; width: 100%; }
.responsive-table tr { display: block; padding-block: var(--space-md); border-top: var(--rule); }
.responsive-table td { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-md); border: none; padding: var(--space-xs) 0; }
.responsive-table td::before { content: attr(data-label); color: var(--color-muted); }
.catalog-rfq { padding-block: var(--space-xl); background: var(--color-paper-3); color: var(--color-ink); }
.catalog-rfq > .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-lg); }
.catalog-rfq h2 { margin-top: 0; }
.catalog-rfq p { font: var(--text-sm)/1.6 var(--font-ui); margin-bottom: 0; max-width: 65ch; }
.catalog-footer { background-image: none; padding-block: var(--space-xl); }
.catalog-close { display: grid; gap: var(--space-lg); align-items: start; }
.catalog-close .word { font-size: var(--text-xl); }
.catalog-close p { margin: 0; max-width: 52ch; font: var(--text-sm)/1.6 var(--font-ui); }
.catalog-close > a:not(.word) { min-height: 44px; font: var(--text-sm) var(--font-ui); display: inline-flex; align-items: center; }
.close-links { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); margin-top: var(--space-lg); }
.close-links a { min-height: 44px; }
.catalog-footer .legal { font: var(--text-xs)/1.6 var(--font-ui); max-width: none; margin-top: var(--space-lg); }
.home-catalog-hero { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); padding-block: var(--space-xl) var(--space-2xl); }
.home-intro h1 { font-size: var(--text-home); line-height: 1.06; letter-spacing: 0; }
.home-intro .lead { font-size: var(--text-md); max-width: 50ch; margin-block: var(--space-lg); }
.home-intro .actions { gap: var(--space-lg); }
.home-caption { font: var(--text-xs)/1.5 var(--font-ui); color: var(--color-muted); margin-top: var(--space-lg); }
.home-product { margin: 0; min-width: 0; }
.home-product img { width: 100%; aspect-ratio: 1.15; object-fit: contain; padding: var(--space-lg); background: var(--color-photo); }
.home-product figcaption { margin-top: var(--space-md); font: var(--text-xs)/1.6 var(--font-ui); color: var(--color-muted); }
.family-index { margin-block: 0 var(--space-2xl); }
.family-index h2 { margin-top: 0; margin-bottom: var(--space-lg); }
.family-row { border-top: var(--rule); display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: var(--space-sm) var(--space-lg); padding-block: var(--space-lg); text-decoration: none; color: var(--color-ink); }
.family-row > span { font: 600 var(--text-xl)/1.1 var(--font-display); }
.family-row > p { font: var(--text-sm)/1.6 var(--font-ui); color: var(--color-muted); margin: 0; grid-row: 2; }
.family-row > strong { grid-column: 2; grid-row: 1; font-weight: 400; }
.family-row:hover > span { text-decoration: underline; }
.featured-products { padding-block: 0 var(--space-2xl); }
.section-intro { margin-bottom: var(--space-xl); }
.section-intro h2 { margin-top: 0; }
.section-intro p { color: var(--color-muted); }
.buying-method { padding-block: var(--space-2xl); background: var(--color-graphite); color: var(--color-on-dark); }
.buying-method h2 { margin-top: 0; }
.method-grid { display: grid; gap: var(--space-xl); margin-top: var(--space-xl); }
.method-grid h3 { margin: 0 0 var(--space-sm); color: var(--color-on-dark); }
.method-grid p { font: var(--text-sm)/1.65 var(--font-ui); color: var(--color-on-dark-muted); margin: 0; }
@media (min-width: 40rem) {
  .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .supply-notes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .family-row { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr) auto; }
  .family-row > p { grid-row: auto; }
  .family-row > strong { grid-column: 3; }
  .responsive-table table { display: table; }
  .responsive-table tbody { display: table-row-group; }
  .responsive-table thead { display: table-header-group; }
  .responsive-table tr { display: table-row; }
  .responsive-table td, .responsive-table th { display: table-cell; padding: var(--space-md) var(--space-sm); }
  .responsive-table td::before { content: none; }
}
@media (min-width: 60rem) {
  .catalog-heading { padding-top: var(--space-2xl); }
  .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .featured-products .product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .product-opening { padding-top: var(--space-xl); }
  .product-hero { grid-template-columns: minmax(0, 1.13fr) minmax(0, 1fr); gap: var(--space-xl); }
  .product-hero .gallery { position: sticky; top: var(--space-lg); }
  .product-content { grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); gap: var(--space-2xl); }
  .product-aside { padding-top: var(--space-2xl); }
  .home-catalog-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; padding-top: var(--space-2xl); }
  .method-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.15fr); }
  .catalog-close { grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-xl); }
}
@media (prefers-reduced-motion: reduce) { .catalog-site * { scroll-behavior: auto; } }