/**
 * Dabi — product catalog archives (shop / category / tag).
 * Shared chrome also used on brand archives.
 */

/* --------------------------------------------------------------------------
   Archive header
   -------------------------------------------------------------------------- */

.catalog-archive {
  padding-block-start: var(--s-8);
  padding-block-end: var(--section-y);
}

.page-content {
  padding-block-start: var(--s-8);
}

.page-content__body {
  max-width: var(--container-text);
  color: var(--ink-2);
}

.page-content__body > *:first-child {
  margin-block-start: 0;
}

.page-content__body a {
  color: var(--ink);
}

.catalog-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0;
}

.catalog-header .eyebrow {
  margin: 0 0 var(--s-2);
}

.catalog-header__title {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-h1);
  font-weight: 600;
  line-height: var(--lh-head);
  color: var(--ink);
}

.catalog-header__desc {
  margin: var(--s-6) 0 0;
  max-width: 60ch;
  color: var(--ink-2);
}

.catalog-header__desc > *:first-child {
  margin-block-start: 0;
}

.catalog-header__desc > *:last-child {
  margin-block-end: 0;
}

.catalog-header__desc p {
  margin: 0 0 var(--s-4);
}

/* Product grid lives in components.css (unified Clay card grids). */

/* --------------------------------------------------------------------------
   Toolbar
   -------------------------------------------------------------------------- */

.catalog-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3) var(--s-6);
}

.catalog-toolbar__count {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--ink-2);
}

.catalog-toolbar__sort {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}

.catalog-toolbar__select {
  min-height: 2.75rem;
  padding: var(--s-3) var(--s-8) var(--s-3) var(--s-4);
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--ink);
  background: var(--paper);
  border: var(--border);
  border-radius: var(--radius);
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2317150F' stroke-width='1.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--s-3) center;
}

/* --------------------------------------------------------------------------
   Empty + pagination
   -------------------------------------------------------------------------- */

.catalog-empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-6);
  padding-block: var(--block-y);
}

.catalog-empty .body-lg {
  margin: 0;
  color: var(--ink-2);
}

/* Pagination styles live in components.css */