.collection-header {
  display: grid;
  gap: var(--space-3);
  max-width: var(--reading-max);
}

.collection-header__eyebrow {
  width: fit-content;
  padding: var(--space-1) var(--space-3);
  background: var(--color-category-bg);
  color: var(--color-category-text);
  border-radius: var(--radius-pill);
  font-size: var(--text-label);
  font-weight: var(--font-weight-bold);
  line-height: var(--leading-label);
  text-transform: uppercase;
}

.collection-header > p:last-child,
.search-page__summary {
  color: var(--color-text-secondary);
  font-size: var(--text-article);
}

.incremental-collection,
.search-page,
.search-page__form,
.search-page__summary {
  display: grid;
  gap: var(--space-6);
}

.collection-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--card-gap);
  min-width: 0;
}

.load-more {
  justify-self: center;
  margin-block-start: var(--space-6);
}

.search-page__form {
  max-width: var(--reading-max);
  padding: var(--space-6);
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-card);
}

.search-page__form label {
  font-weight: var(--font-weight-bold);
}

.search-page__controls {
  display: flex;
  gap: var(--space-3);
}

.search-page__controls input {
  flex: 1 1 auto;
  min-width: 0;
  padding-inline: var(--space-4);
  background: var(--color-page);
  border: var(--border-width) solid var(--color-border);
}

.search-page__controls button,
[data-local-load-more] {
  min-height: var(--control-min-size);
  padding-inline: var(--space-4);
  background: var(--color-category-bg);
  color: var(--color-category-text);
  border: var(--border-width) solid var(--color-nav-active-line);
  border-radius: var(--radius-control);
  font-weight: var(--font-weight-bold);
}

.search-page__controls input:hover,
.search-page__controls input:focus-visible,
.search-page__controls button:hover,
.search-page__controls button:focus-visible,
[data-local-load-more]:hover,
[data-local-load-more]:focus-visible {
  border-color: var(--color-focus);
  box-shadow: inset 0 0 0 var(--border-width) var(--color-focus);
}