/* 01 — Live catalogue in the Designer Supplier visual system */
.catalogue-intro { padding-block: clamp(2rem,4vw,4rem) var(--space-6); }
.catalogue-intro .eyebrow { margin-bottom: var(--space-4); }
.catalogue-intro-line { display: grid; gap: var(--space-4); }
.catalogue-intro h1 { font-size: clamp(2.75rem,6vw,5.5rem); max-width: 15ch; color: var(--ink); }
.catalogue-intro-line > div { color: var(--ink-muted); font-size: var(--type-sm); }
.catalogue-intro .text-link { margin-top: var(--space-3); color: var(--ink); }
.department-grid { max-width: calc(var(--content-width) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); display: grid; gap: var(--space-5) var(--space-3); }
.department-card > a { display: block; text-decoration: none; }
.department-image { aspect-ratio: 4 / 5; background: var(--surface); overflow: hidden; }
.department-image picture, .department-image img { display: block; width: 100%; height: 100%; object-fit: contain; }
.department-caption { display: flex; align-items: center; gap: var(--space-2); padding-top: var(--space-2); }
.department-caption .eyebrow { margin: 0; font-size: var(--type-ui); }
.department-caption h2 { flex: 1; font-size: var(--type-lg); }
.department-card a:hover h2 { text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; }

/* 02 — Category and brand albums: four columns on desktop, two on mobile */
.catalog-index { padding-top: var(--space-6); }
.index-heading { display: grid; gap: var(--space-3); margin-bottom: var(--space-5); }
.index-heading .eyebrow { margin-bottom: var(--space-2); }
.index-heading .text-link { justify-self: start; }
.album-grid, .supplier-brands { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--space-5) var(--space-2); }
.album-card { min-width: 0; }
.album-card > a { display: block; text-decoration: none; }
.album-image { display: grid; place-items: center; aspect-ratio: 4 / 5; background: var(--surface); overflow: hidden; }
.album-image picture, .album-image img { display: block; width: 100%; height: 100%; object-fit: contain; }
.album-title h2 { margin-top: var(--space-2); font: 500 var(--type-card)/1.45 var(--font-body); letter-spacing: -.01em; text-wrap: auto; }
/* Collection names are editorial; item names stay clean and easy to scan. */
.album-card:has([data-cover-id]) .album-title h2 { font: 500 var(--type-collection)/1.25 var(--font-display); letter-spacing: var(--tracking-heading); }
.album-card a:hover h2 { text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; }
.album-card p { margin-top: .375rem; font-size: var(--type-ui); color: var(--ink-muted); line-height: 1.6; }
.album-card .catalogue-price { color: var(--ink); }
.image-unavailable { padding: var(--space-2); font-size: var(--type-xs); color: var(--ink-muted); text-align: center; }
.catalogue-group + .catalogue-group { margin-top: var(--space-8); }
.catalogue-group-heading { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-2); padding-bottom: var(--space-3); border-bottom: 1px solid var(--hairline); margin-bottom: var(--space-4); }
.catalogue-group-heading h2 { font-size: var(--type-lg); }
.catalogue-group-heading > span, .index-footnote { font-size: var(--type-xs); color: var(--ink-muted); }
.index-footnote { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2); margin-top: var(--space-6); padding-top: var(--space-3); border-top: 1px solid var(--hairline); }
.catalogue-pagination { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-2); margin-top: var(--space-6); font-size: var(--type-xs); }
.catalogue-notice { padding-block: var(--space-2); font-size: var(--type-xs); }

/* 03 — Visible search with optional advanced filters */
.catalogue-toolbar { margin-bottom: var(--space-5); padding-block: var(--space-2); border-block: 1px solid var(--hairline); background: var(--bg); }
.catalogue-control-heading { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); font-size: var(--type-xs); }
.catalogue-control-heading .button { padding: .625rem var(--space-2); }
.catalogue-control-fields { display: none; gap: var(--space-2); padding-top: var(--space-3); }
.catalogue-toolbar[data-open="true"] .catalogue-control-fields { display: grid; }
.catalogue-control-fields label { min-width: 0; font-size: var(--type-xs); }
.catalogue-control-fields select { margin-top: var(--space-1); }
.catalogue-filter-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.catalogue-filter-note { grid-column: 1 / -1; font-size: var(--type-ui); color: var(--ink-muted); font-weight: 400; }
.catalogue-stock { display: flex; align-items: center; gap: var(--space-1); min-height: 48px; }
.catalogue-stock input { width: 20px; min-height: 20px; height: 20px; margin: 0; accent-color: var(--accent); }
#catalogue-results { scroll-margin-top: calc(var(--header-offset) + var(--space-3)); }

/* 04 — Original item galleries with restrained purchasing details */
.supplier-detail { padding-top: var(--space-4); }
.supplier-detail-layout { display: grid; gap: var(--space-5); }
.supplier-detail-info { min-width: 0; }
.supplier-detail-info h1 { font-size: var(--type-xl); margin-bottom: var(--space-3); }
.supplier-detail-info > p { font-size: var(--type-xs); color: var(--ink-muted); margin-block: var(--space-3); }
.supplier-detail-info > dl { font-size: var(--type-xs); margin-block: var(--space-3); }
.supplier-detail-info > dl > div { display: grid; grid-template-columns: 1fr 1.5fr; gap: var(--space-2); padding-block: var(--space-1); border-bottom: 1px solid var(--hairline); }
.supplier-detail-info .eyebrow { margin-bottom: var(--space-2); }
.supplier-availability { color: var(--ink-muted); font-size: var(--type-xs); margin-bottom: var(--space-3); }
.catalogue-gallery { min-width: 0; }
.catalogue-photo-track { display: flex; width: 100%; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: var(--ink-muted) var(--surface); }
.catalogue-photo-track .catalogue-main-photo { flex: 0 0 100%; min-width: 0; scroll-snap-align: start; scroll-snap-stop: always; }
.catalogue-photo-track button:focus-visible { outline-offset: -4px; }
.catalogue-main-photo { background: var(--surface); aspect-ratio: 4 / 5; }
.catalogue-main-photo button { display: block; width: 100%; height: 100%; padding: 0; cursor: zoom-in; }
.catalogue-main-photo img { display: block; width: 100%; height: 100%; object-fit: contain; }
.gallery-controls { display: flex; align-items: center; gap: var(--space-1); margin-block: var(--space-2); }
.gallery-controls > button:not(.text-link) { border: 1px solid var(--hairline); min-width: 44px; min-height: 44px; }
.photo-counter { flex: 1; min-width: 0; }
.photo-counter select { min-height: 44px; }
.gallery-enlarge { padding-inline: var(--space-1); }
.gallery-scroll-hint { margin-top: var(--space-1); font-size: var(--type-ui); color: var(--ink-muted); }
.gallery-controls [aria-disabled="true"], .catalogue-row-controls [aria-disabled="true"] { color: var(--ink-muted); border-color: var(--hairline); cursor: default; }
.catalogue-thumbnails { position: relative; display: flex; gap: var(--space-1); max-width: 100%; overflow-x: auto; padding: 4px 4px var(--space-1); scroll-snap-type: x proximity; overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: var(--ink-muted) var(--surface); }
.catalogue-thumbnails button { flex: 0 0 64px; height: 80px; padding: 0; border: 1px solid var(--hairline); }
.catalogue-thumbnails button { scroll-snap-align: start; }
.catalogue-thumbnails img { width: 100%; height: 100%; object-fit: contain; }
.catalogue-thumbnails [aria-pressed="true"] { outline: 2px solid var(--ink); outline-offset: 2px; }
.catalogue-size { margin-block: var(--space-3); }
.catalogue-size .size-label { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.catalogue-size select { margin-bottom: var(--space-1); }
.product-size-options button, .supplier-detail-info .product-missing-size { border-radius: var(--radius); }
.product-size-options button:disabled { background: var(--surface); }
.product-sticky:not([hidden]) { box-shadow: none; }
.photo-dialog .zoom-original { display: block; width: 100%; max-height: 75vh; object-fit: contain; }
.browse-links { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }

/* 05 — Responsive rhythm without changing the catalogue order */
@media (max-width: 700px) {
 .department-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: var(--space-1); }
 .department-caption h2 { font-size: 1.25rem; }
 .department-caption .eyebrow, .department-caption > span:last-child { display: none; }
 .main-nav { gap: .5rem; }
 .main-nav a { font-size: var(--type-ui); }
}
@media (min-width: 48rem) {
 .catalogue-intro-line { grid-template-columns: 1.6fr 1fr; align-items: end; gap: var(--space-8); }
 .department-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
 .catalogue-control-fields { grid-template-columns: repeat(3,minmax(0,1fr)); }
 .catalogue-filter-actions { grid-column: 1 / -1; }
 .index-heading { grid-template-columns: 1fr auto; align-items: end; }
}
@media (min-width: 64rem) {
 .album-grid, .supplier-brands { grid-template-columns: repeat(4,minmax(0,1fr)); gap: var(--space-6) var(--space-3); }
 .supplier-detail-layout { grid-template-columns: minmax(0,3fr) minmax(0,2fr); align-items: start; gap: var(--space-8); }
 .supplier-detail-info { position: sticky; top: calc(var(--header-offset) + var(--space-2)); }
}

/* 06 — Homepage catalogue rows. Search results retain their 4/2-column grids. */
.catalogue-departments { width: min(100%,calc(var(--content-width) + 2 * var(--gutter))); margin-inline: auto; padding-inline: var(--gutter); }
.catalogue-row { min-width: 0; }
.catalogue-row .catalogue-scroll-track { position: relative; display: flex; width: 100%; max-width: none; margin: 0; padding: 4px 0 var(--space-2); gap: var(--space-2); overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: var(--ink-muted) var(--surface); }
.catalogue-scroll-track > article { flex: 0 0 78%; min-width: 0; scroll-snap-align: start; }
.catalogue-scroll-track .department-caption h2 { font-size: var(--type-lg); }
.catalogue-scroll-track a:focus-visible { outline-offset: -3px; }
.catalogue-row-controls { display: flex; align-items: center; gap: var(--space-1); padding-top: var(--space-1); }
.catalogue-row-controls p { flex: 1; font-size: var(--type-ui); color: var(--ink-muted); }
.catalogue-row-controls button { flex: 0 0 44px; width: 44px; height: 44px; border: 1px solid var(--hairline); background: var(--bg); }
.catalogue-row-controls button:not([aria-disabled="true"]):hover { background: var(--surface); border-color: var(--ink-muted); }
@media (min-width: 48rem) {
 .catalogue-scroll-track > article { flex-basis: calc((100% - 2 * var(--space-2)) / 2.5); }
}
@media (min-width: 64rem) {
 .catalogue-row .album-grid > article { flex-basis: calc((100% - 3 * var(--space-2)) / 3.25); }
}
@media (prefers-reduced-motion: reduce) {
 .catalogue-scroll-track, .catalogue-photo-track, .catalogue-thumbnails { scroll-behavior: auto; }
}

/* Clear starting points and touch-friendly search on every screen. */
.catalogue-intro-copy { max-width: 44ch; margin-top: var(--space-3); }
.catalogue-shortcuts { display: flex; flex-wrap: wrap; gap: var(--space-1); margin-top: var(--space-3); }
.catalogue-shortcuts .button { min-height: 48px; }
.catalogue-home-find { min-width: 0; padding: var(--space-3); background: var(--surface); border: 1px solid var(--hairline); }
.catalogue-home-find label { color: var(--ink); font-size: var(--type-sm); }
.catalogue-home-find #home-search-help { margin-top: var(--space-1); font-size: var(--type-xs); }
.catalogue-search-line { display: flex; align-items: end; gap: var(--space-1); margin-block: var(--space-1) var(--space-2); }
.catalogue-search-line > input, .catalogue-query { flex: 1; min-width: 0; width: 0; }
.catalogue-query { font-size: var(--type-xs); }
.catalogue-search-line input { min-height: 48px; margin: 4px 0 0; font-size: 16px; }
.catalogue-search-line .button { min-height: 48px; flex-shrink: 0; padding-inline: var(--space-2); }
.catalogue-clear { margin-left: auto; min-height: 44px; display: inline-flex; align-items: center; }
.catalogue-control-heading { flex-wrap: wrap; }
.catalogue-preview-status { margin-top: var(--space-4); padding-top: var(--space-2); border-top: 1px solid var(--hairline); font-size: var(--type-xs); color: var(--ink-muted); max-width: 85ch; }
.catalogue-preview-status strong { color: var(--ink); margin-right: .5em; }
@media (max-width: 47.99rem) {
 .catalogue-intro .eyebrow { margin-bottom: var(--space-2); }
 .catalogue-intro-line { gap: var(--space-3); }
 .catalogue-preview-status { margin-top: var(--space-3); }
}