/* Hallmark · macrostructure: Split Studio · tone: editorial outdoor supply · anchor hue: 142
 * theme: Garden (preserved) · nav: N6 · footer: Ft1 · audience: shoppers and visiting agents
 * use: browse, compare, and maintain field goods · enrichment: existing SVG illustrations
 * Hallmark · pre-emit critique: P4 H4 E4 S5 R5 V4 */
@import url("/tokens.css");

.catalog-main { min-height: 50dvh; }
.catalog-mast { padding-block-start: var(--space-xl); }
.catalog-mast__brand { display: grid; gap: var(--space-xs); padding-block-end: var(--space-lg); }
.catalog-mast .catalog-wordmark { font-size: clamp(1.5rem, 4vw, 2.5rem); font-weight: 700; }
.catalog-mast nav { display: flex; flex-wrap: wrap; gap: 0 var(--space-lg); padding-block: var(--space-xs); border-block: var(--rule-medium) solid var(--color-ink); }
.catalog-mast nav a, .catalog-close nav a, .catalog-collections a, .catalog-links a, .catalog-link { display: inline-flex; align-items: center; min-height: 2.75rem; white-space: nowrap; }
.catalog-mast nav a { text-decoration: none; }
.catalog-feature { display: grid; gap: var(--space-xl); align-items: center; padding-block: var(--space-xl) var(--space-2xl); }
.catalog-feature > div { min-width: 0; }
.catalog-feature h1 { font-size: var(--text-display-s); max-width: 15ch; }
.catalog-feature h2 { font-size: var(--text-3xl); }
.catalog-feature figure { margin: 0; min-width: 0; }
.catalog-feature img { width: 100%; background: var(--color-paper-2); }
.catalog-feature figcaption { padding-block-start: var(--space-sm); color: var(--color-muted); font-size: var(--text-sm); }
.catalog-collections { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); padding-block: var(--space-md); border-block: var(--rule-hair) solid var(--color-rule); }
.catalog-section { padding-block: var(--space-xl) var(--space-2xl); }
.catalog-section > h2 { margin-block-end: var(--space-xl); }
.catalog-directory { display: grid; gap: var(--space-xl); padding-block: var(--space-xl); }
.catalog-directory article { min-width: 0; border-block-start: var(--rule-hair) solid var(--color-rule); padding-block-start: var(--space-md); }
.catalog-directory h2 { font-family: var(--font-display); font-style: normal; font-size: var(--text-xl); margin: 0; overflow-wrap: anywhere; }
.catalog-actions, .catalog-links, .catalog-close nav { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.catalog-actions .button { font-size: var(--text-sm); }
.catalog-actions .button[aria-pressed="true"] { border-color: var(--color-accent); background: var(--color-paper-2); color: var(--color-ink); }
.catalog-reading { max-width: var(--measure); padding-block-end: var(--space-2xl); }
.catalog-reading h2 { font-family: var(--font-display); font-style: normal; font-size: var(--text-xl); margin-block-start: var(--space-xl); }
.catalog-links { margin-block: var(--space-lg); }
.catalog-search { display: grid; gap: var(--space-xs); max-width: 42rem; }
.catalog-search > div { display: grid; gap: var(--space-sm); }
.catalog-search input { width: 100%; min-width: 0; }
.catalog-status { min-height: 1.6em; color: var(--color-ink-2); }
.catalog-close { padding-block: var(--space-xl); }
.catalog-close .catalog-wordmark { white-space: normal; }
.catalog-close nav { gap: 0 var(--space-lg); }
.catalog-research { padding-block: var(--space-lg) var(--space-xl); font-size: var(--text-sm); }
.catalog-research details { max-width: var(--measure); }
.catalog-research summary, .catalog-reading summary, body[data-site="catalog"] .article summary { min-height: 2.75rem; padding-block: var(--space-sm); cursor: pointer; }
.catalog-research p { max-width: var(--measure); }
.catalog-selection { display: grid; gap: var(--space-lg); padding-block: var(--space-xl); }
.catalog-selection article { min-width: 0; border-block-start: var(--rule-hair) solid var(--color-rule); padding-block-start: var(--space-md); }
.catalog-selection h2 { font-family: var(--font-display); font-size: var(--text-xl); overflow-wrap: anywhere; }
.catalog-selection img { width: 100%; }
.catalog-selection .spec-list div { grid-template-columns: minmax(0, 1fr); gap: var(--space-xs); }
body[data-site="catalog"] h1, body[data-site="catalog"] h2, body[data-site="catalog"] h3 { font-style: normal; overflow-wrap: anywhere; min-width: 0; }
body[data-site="catalog"] .product-detail figure { margin: 0; }
body[data-site="catalog"] .product-card__meta { flex-wrap: wrap; }
body[data-site="catalog"] .button { transition: transform var(--dur-micro) var(--ease-out); }
body[data-site="catalog"] .button[data-state="loading"] { opacity: 0.7; cursor: progress; }
body[data-site="catalog"] .button[data-state="error"], body[data-site="catalog"] [data-shop-status][data-state="error"] { color: var(--color-error); }
body[data-site="catalog"] .field[data-state="success"] { border-color: var(--color-success); }
body[data-site="catalog"] .field[data-state="loading"] { cursor: progress; }
body[data-site="catalog"] .field:active { border-color: var(--color-ink); }
@media (hover: hover) and (pointer: fine) {
  body[data-site="catalog"] .field:hover { background: var(--color-paper-2); color: var(--color-ink); }
  .catalog-mast nav a:hover, .catalog-collections a:hover { color: var(--color-accent); }
}
@media (min-width: 40rem) {
  .catalog-mast__brand { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
  .catalog-directory { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .catalog-search > div { grid-template-columns: minmax(0, 1fr) auto; }
  .catalog-selection { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 60rem) {
  .catalog-feature { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--space-2xl); }
  .catalog-feature--reverse { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
  .catalog-selection { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  body[data-site="catalog"] .button { transition: none; transform: none; }
}

.catalog-mast nav, .catalog-close nav, .catalog-actions, .catalog-links { align-items: center; }
body[data-site="catalog"] .button:hover { transform: none; }