/* Catalog direction: generous product stages, clear navy hierarchy and the
   existing blue/yellow storefront actions. Images retain their real source
   and complete silhouette. This layer is loaded only by catalog/detail pages. */
.catalog-interface {
  --catalog-ink: #142c50;
  --catalog-muted: #52627a;
  background: #f8f9fb;
  color: var(--catalog-ink);
}

.catalog-interface :is(h1, h2, h3) { color: var(--catalog-ink); }
.catalog-interface :is(input, select):focus-visible {
  outline: 3px solid var(--nachon-blue-dark);
  outline-offset: 2px;
  box-shadow: var(--focus-ring);
}
.catalog-interface :is(input, select, button) { font: inherit; }
.catalog-interface :is(.doors-back-link, .hardware-detail-back) { text-underline-offset: .2em; }

.catalog-interface .doors-page-header {
  padding-top: 1rem;
  padding-bottom: 1.5rem;
}
.catalog-interface .doors-breadcrumb { margin-bottom: 1rem; }
.catalog-introduction { display: grid; gap: 1.5rem; align-items: center; }
.catalog-interface .catalog-introduction h1 {
  max-width: 19ch;
  margin: 0 0 1rem;
  font-size: clamp(2rem, 4vw, 3.25rem);
  line-height: 1.08;
  text-wrap: balance;
}
.catalog-guidance { max-width: 58ch; color: var(--catalog-muted); }
.catalog-journey { display: flex; flex-wrap: wrap; gap: .6rem 1.25rem; margin-top: 1.25rem; }
.catalog-journey li { display: flex; align-items: center; gap: .5rem; font-size: .8125rem; font-weight: 600; }
.catalog-journey li > span {
  display: grid;
  place-items: center;
  width: 1.6rem;
  height: 1.6rem;
  flex: none;
  border: 1px solid var(--nachon-blue);
  border-radius: 50%;
  color: var(--nachon-blue-dark);
  background: var(--color-paper);
  font-variant-numeric: tabular-nums;
}
.catalog-inspiration { display: none; margin: 0; min-width: 0; }
.catalog-inspiration img { width: 100%; height: 16rem; object-fit: cover; border-radius: var(--radius); }
.catalog-inspiration figcaption { margin-top: .35rem; text-align: right; color: var(--catalog-muted); font-size: .75rem; }
.catalog-interface .doors-header-band {
  margin-top: 1.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-border);
}
.catalog-interface .doors-search { width: 100%; margin: 0; }
.catalog-interface .doors-search input { min-height: 52px; padding: .75rem 1rem; border: 1px solid #718098; }
.catalog-interface .doors-search label { color: var(--catalog-ink); }
.catalog-interface .doors-catalog-subtitle { font-size: .9375rem; color: var(--catalog-muted); }
.catalog-interface .doors-catalog { padding-top: .5rem; }
.catalog-interface .doors-layout { gap: 1.5rem; }
.catalog-interface #doors-facets { min-width: 0; }
.catalog-interface .doors-filters-heading { display: block; padding: 0 0 1rem; font-size: 1.25rem; border-bottom: 1px solid var(--color-border); }
.catalog-interface .doors-facet { padding: .75rem 0; border-width: 0 0 1px; }
.catalog-interface .doors-facet legend { padding: 0; font-size: .8125rem; letter-spacing: .02em; }
.catalog-interface .doors-check { align-items: center; gap: .65rem; font-size: .875rem; }
.catalog-interface .doors-check-label { min-width: 0; overflow-wrap: anywhere; }
.catalog-interface .doors-facet-count { font-size: .75rem; color: var(--catalog-muted); }
.catalog-interface .doors-toolbar { gap: .75rem; align-items: flex-end; margin-bottom: 1rem; }
.catalog-interface .doors-results-heading { font-size: 1.125rem; line-height: 1.5; padding: .6rem 0; }
.catalog-interface .doors-sort { min-width: min(100%, 11rem); }
.catalog-interface .doors-sort select { border-width: 1px; border-color: #718098; }
.catalog-interface .doors-chips { order: 2; }
.catalog-interface .doors-chip { background: var(--selector-selected); border-color: #a8b8e3; color: var(--nachon-blue-dark); font-size: .8125rem; }
.catalog-interface .doors-grid { align-items: stretch; }
.catalog-interface .door-card { border: 1px solid var(--color-border); border-radius: var(--radius); }
.catalog-interface .door-card:hover { border-color: var(--nachon-blue); }
.catalog-interface .door-card-image {
  height: 15.5rem;
  aspect-ratio: auto;
  object-fit: contain;
  padding: 1.1rem;
  background: #f0f2f5;
}
.catalog-interface .door-card-body { flex: 1; gap: .4rem; padding: 1rem; border-top: 1px solid var(--color-border); }
.catalog-interface .door-card-brand { font-size: .6875rem; line-height: 1.5; letter-spacing: .055em; }
.catalog-interface .door-card-code { font-size: 1.3rem; line-height: 1.2; }
.catalog-interface .door-card-code a { color: var(--catalog-ink); text-decoration: none; }
.catalog-interface .door-card-code a:hover { text-decoration: underline; }
.catalog-interface .door-card-meta { flex: 1; padding-bottom: .5rem; font-size: .8125rem; overflow-wrap: anywhere; }
.catalog-interface .door-card-build { padding: .65rem .5rem; font-size: .8125rem; white-space: normal; }
.catalog-interface .doors-hardware-cross-sell { padding-top: 1rem; }
.catalog-interface .doors-hardware-cross-sell .aisle-card {
  padding: 1.5rem;
  background: var(--color-paper);
  border: 1px solid var(--color-border);
}

/* The hardware hub uses the same product rhythm. Filters stay native GET
   controls inside an initially open, keyboard-operable disclosure. */
.hardware-interface .doors-page-header { padding-top: 2.5rem; }
.hardware-interface .doors-page-header h1 { font-size: clamp(2rem, 4vw, 3rem); }
.hardware-interface .hardware-catalog { padding-top: .5rem; }
.hardware-interface .hardware-category-chips { margin-bottom: 1.5rem; }
.hardware-catalog-layout { display: grid; gap: 1.5rem; min-width: 0; }
.hardware-catalog-filters { min-width: 0; padding: 1.25rem; background: var(--color-paper); border: 1px solid var(--color-border); border-radius: var(--radius); }
.hardware-catalog-facet-details > summary { min-height: var(--touch-target); cursor: pointer; font-size: 1.125rem; font-weight: 700; }
.hardware-catalog-facet-content { padding-top: .75rem; }
.hardware-catalog-filters .hardware-filters { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; margin: 0 0 1rem; padding: 0; border: 0; background: transparent; }
.hardware-catalog-filters .doors-filters-grid { grid-template-columns: minmax(0, 1fr); margin: 0; }
.hardware-catalog-filters .doors-filter-field { min-width: 0; width: 100%; }
.hardware-catalog-filters .doors-filter-field select { min-width: 0; }
.hardware-catalog-filters .hardware-finish-chips { grid-template-columns: minmax(0, 1fr); }
.hardware-catalog-filters .hardware-option-cell-inner { padding: .6rem .4rem; }
.hardware-catalog-filters .hardware-option-cell-label { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; font-size: .8125rem; }
.hardware-catalog-results { min-width: 0; }
.hardware-interface .doors-results-count { margin: 0 0 1rem; padding: .65rem 0; font-weight: 700; color: var(--catalog-ink); }
.hardware-interface .hardware-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 0; }
.hardware-interface .hardware-card { display: flex; flex-direction: column; min-width: 0; border-width: 1px; }
.hardware-card-stage { display: grid; place-items: center; height: 15rem; min-height: 0; overflow: hidden; background: #f0f2f5; }
.hardware-interface .hardware-card-image { width: 100%; height: 100%; min-height: 0; aspect-ratio: auto; object-fit: contain; padding: 1rem; background: transparent; }
.hardware-interface .hardware-card-body { display: flex; flex: 1; flex-direction: column; padding: 1rem; gap: .5rem; }
.hardware-interface .hardware-card-body h3 { margin: 0; font-size: 1rem; line-height: 1.4; overflow-wrap: anywhere; }
.hardware-interface .hardware-card-body p { margin: 0; font-size: .8125rem; }
.hardware-interface .hardware-card-swatches { margin-bottom: .5rem; }
.hardware-card-action { display: flex; justify-content: space-between; gap: .5rem; align-items: center; min-height: var(--touch-target); margin-top: auto; padding: .5rem .65rem; border: 1px solid var(--nachon-blue); border-radius: var(--radius); color: var(--nachon-blue-dark); font-size: .8125rem; font-weight: 700; }
.hardware-card:hover .hardware-card-action { background: var(--selector-selected); }

/* Detail pages keep the source gallery and real options. The quote group
   appears before long specifications, so it is reachable on every viewport. */
.catalog-interface .door-detail { gap: 2.5rem; }
.catalog-interface .door-detail-info { min-width: 0; }
.catalog-interface .door-detail-subtitle { font-size: 1.125rem; line-height: 1.5; }
.catalog-interface .door-detail-specs-section { padding-top: 1.5rem; border-top: 1px solid var(--color-border); }
.catalog-interface :is(.door-detail-specs-section, .door-detail-features, .hardware-detail-documents-section) h2 { display: block; border: 0; padding: 0; margin-bottom: 1rem; font-size: 1.25rem; }
.catalog-interface .door-detail-specs { grid-template-columns: minmax(7rem, 1fr) minmax(0, 1.5fr); gap: 0; }
.catalog-interface .door-detail-specs :is(dt, dd) { margin: 0; padding: .75rem .5rem .75rem 0; border-bottom: 1px solid var(--color-border); font-size: .9375rem; overflow-wrap: anywhere; }
.catalog-interface .door-detail-trust { padding: 1rem; background: var(--selector-selected); border: 1px solid #b6c5ec; border-radius: var(--radius); font-size: .9375rem; }
.catalog-interface .door-detail-actions .btn-cta { min-height: 52px; }
.catalog-interface .door-detail-track { padding: 1rem; }
.hardware-detail-page .door-detail-image { height: min(62vh, 34rem); object-fit: contain; padding: 1.5rem; background: #f0f2f5; border-width: 1px; }
.hardware-detail-page h1 { font-size: clamp(1.75rem, 3.2vw, 2.65rem); line-height: 1.15; overflow-wrap: anywhere; }
.hardware-detail-page .hq-section { margin-top: 1.5rem; padding: 1.5rem; background: var(--color-paper); border: 1px solid var(--color-border); border-radius: var(--radius); }
.hardware-detail-page .hq-section h2 { border: 0; font-size: 1.25rem; }
.hardware-detail-page .hq-note { font-size: .875rem; }
.hardware-detail-page .hq-controls label { margin-top: .75rem; }
.hardware-detail-page .hardware-detail-cta { background: var(--color-paper); border-width: 1px; }
.hardware-detail-page .hardware-detail-cta h2 { font-size: 1.5rem; }

@media (min-width: 760px) {
  .catalog-introduction { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
  .catalog-inspiration { display: block; }
  .catalog-interface .doors-header-band { flex-direction: row; align-items: flex-end; justify-content: space-between; }
  .catalog-interface .doors-search { order: 0; width: min(50%, 26rem); }
  .catalog-interface .door-detail { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (min-width: 1024px) {
  .catalog-interface .doors-layout { grid-template-columns: 14rem minmax(0, 1fr); }
  .catalog-interface #doors-facet-groups { padding: 1.25rem; background: var(--color-paper); border: 1px solid var(--color-border); border-radius: var(--radius); }
  .hardware-catalog-layout { grid-template-columns: 14rem minmax(0, 1fr); align-items: start; }
  .hardware-interface .hardware-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 759px) {
  .catalog-interface .doors-catalog-form > section { padding-left: 1rem; padding-right: 1rem; }
  .catalog-interface .catalog-introduction h1 { max-width: 22ch; }
  .catalog-journey { gap: .6rem; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .catalog-journey li { align-items: flex-start; flex-direction: column; font-size: .75rem; }
  .catalog-interface .doors-header-band { margin-top: 1.25rem; padding-top: 1rem; }
  .catalog-interface .door-card-image { height: 12.5rem; padding: .75rem; }
  .catalog-interface .door-card-body { padding: .75rem; }
  .catalog-interface .door-card-code { font-size: 1.125rem; }
  .catalog-interface .doors-sort { width: 100%; margin-left: 0; }
  .hardware-interface .hardware-category-chips { display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 11rem; overflow-x: auto; padding-bottom: .75rem; }
  .hardware-interface .hardware-option-grid--pill .hardware-option-cell-inner { height: 100%; }
  .hardware-card-stage { height: 11rem; }
  .hardware-interface .hardware-card-body { padding: .75rem; }
  .hardware-interface .hardware-card-body h3 { font-size: .875rem; }
  .hardware-detail-page .hq-section { padding: 1rem; }
  .catalog-interface .door-detail { gap: 1.5rem; }
}
@media (max-width: 360px) {
  .hardware-interface .hardware-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .catalog-interface .door-card, .hardware-interface .hardware-card { transition: none; }
}