/* =============================================================================
   Eternal Thread — Shop / Archive
   ============================================================================= */

.et-shop {
  padding-top: var(--space-96);
  padding-bottom: var(--space-96);
}

/* ══════════════════════════════════════════════════════
   PAGE HEADER
   ══════════════════════════════════════════════════════ */

.et-shop__header {
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: calc(var(--gutter) * 2);
  padding-bottom: var(--space-64);
  text-align: center;
}

/* Ruled kicker — thin lines flank the text */
.et-shop__kicker {
  display: flex;
  align-items: center;
  gap: var(--space-24);
  font-family: var(--font-ui);
  font-size: var(--text-micro);
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--secondary);
  margin-bottom: var(--space-32);
}

.et-shop__kicker::before,
.et-shop__kicker::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--surface-container-high);
}

.et-shop__heading {
  font-family: var(--font-display);
  font-size: clamp(3.25rem, 6.5vw, 5.75rem);
  font-weight: 800;
  color: var(--primary);
  line-height: 0.92;
  letter-spacing: -.03em;
  margin: 0 0 var(--space-32);
}

.et-shop__subhead {
  font-family: var(--font-editorial);
  font-size: clamp(var(--text-body-md), 1.4vw, var(--text-body-lg));
  font-style: italic;
  color: var(--on-surface-variant);
  max-width: 48ch;
  margin-inline: auto;
  line-height: 1.7;
}

/* ══════════════════════════════════════════════════════
   FILTER BAR
   Thin rules above and below, clean text-only links
   ══════════════════════════════════════════════════════ */

.et-shop__filterbar {
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: calc(var(--gutter) * 2);
  padding-block: var(--space-16);
  margin-bottom: var(--space-48);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-32);
  border-top: 1px solid var(--surface-container-high);
  border-bottom: 1px solid var(--surface-container-high);
}

/* ── Category links ── */
.et-filter-pills {
  display: flex;
  align-items: center;
  gap: var(--space-32);
}

.et-filter-pill {
  font-family: var(--font-ui);
  font-size: var(--text-micro);
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--outline-variant);
  text-decoration: none;
  position: relative;
  padding-bottom: 3px;
  transition: color var(--transition-fast);
}

.et-filter-pill:hover {
  color: var(--on-surface);
}

.et-filter-pill.is-active {
  color: var(--primary);
  font-weight: 700;
}

.et-filter-pill.is-active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--primary);
  border-radius: 1px;
}

/* ── Sort links ── */
.et-filter-sort {
  display: flex;
  align-items: center;
  gap: var(--space-24);
}

.et-filter-sort a {
  font-family: var(--font-ui);
  font-size: var(--text-micro);
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--outline-variant);
  text-decoration: none;
  position: relative;
  padding-bottom: 3px;
  transition: color var(--transition-fast);
}

.et-filter-sort a:hover { color: var(--on-surface); }

.et-filter-sort a.is-active {
  color: var(--primary);
  font-weight: 700;
}

.et-filter-sort a.is-active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--primary);
  border-radius: 1px;
}

/* ══════════════════════════════════════════════════════
   PRODUCT GRID
   ══════════════════════════════════════════════════════ */

.et-shop__grid {
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: calc(var(--gutter) * 2);
}

/* Wider gap and 4 cols on the shop page for a more curated feel */
.et-shop__grid .et-products {
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-32);
}

/* ── Editorial callout between rows ── */
.et-editorial-callout {
  grid-column: 1 / -1;
  background: var(--primary);
  border-radius: var(--radius-xl);
  padding: var(--space-64);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-48);
  margin-block: var(--space-8);
}

.et-editorial-callout__text {
  font-family: var(--font-display);
  font-size: var(--text-headline-md);
  font-weight: 800;
  color: var(--on-primary);
  max-width: 36ch;
  line-height: 1.2;
  margin: 0;
}

.et-editorial-callout__text em {
  font-style: italic;
  font-family: var(--font-editorial);
  font-weight: 300;
  color: var(--tertiary);
}

/* ── Pagination ── */
.et-pagination {
  display: flex;
  justify-content: center;
  gap: var(--space-8);
  margin-top: var(--space-64);
  padding-top: var(--space-48);
  border-top: 1px solid var(--surface-container-high);
}

.et-pagination a,
.et-pagination span {
  font-family: var(--font-ui);
  font-size: var(--text-micro);
  font-weight: 600;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--on-surface-variant);
  transition: background var(--transition-fast), color var(--transition-fast);
}

.et-pagination a:hover { background: var(--surface-container); color: var(--on-surface); }
.et-pagination .current { background: var(--primary); color: var(--on-primary); }

/* ══════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════ */

@media (max-width: 1100px) {
  .et-shop__header,
  .et-shop__filterbar,
  .et-shop__grid {
    padding-inline: var(--gutter);
  }
}

@media (max-width: 768px) {
  .et-shop { padding-top: var(--space-64); }

  .et-shop__filterbar {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-16);
    padding-block: var(--space-16);
  }

  /* Thin rule between category row and sort row on mobile */
  .et-filter-sort {
    padding-top: var(--space-16);
    border-top: 1px solid var(--surface-container-high);
    width: 100%;
  }

  .et-shop__grid .et-products {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-16);
  }

  .et-editorial-callout {
    flex-direction: column;
    padding: var(--space-32);
    gap: var(--space-24);
  }
}

@media (max-width: 480px) {
  /* Filter bar — smaller text, tighter gaps */
  .et-filter-pills { gap: var(--space-16); }
  .et-filter-sort  { gap: var(--space-12); }
  .et-filter-pill,
  .et-filter-sort a { font-size: 10px; letter-spacing: .08em; }

  /* Product grid — tighter gap on phones */
  .et-shop__grid .et-products { gap: var(--space-12); }

  /* Editorial callout — less padding on phones */
  .et-editorial-callout {
    padding: var(--space-24);
    border-radius: var(--radius-lg);
  }
  .et-editorial-callout__text { font-size: var(--text-headline-sm); }

  /* Shop heading tighter on small screens */
  .et-shop__heading { font-size: clamp(2.5rem, 11vw, 3.25rem); }
  .et-shop__subhead { font-size: var(--text-body-sm); }
}