/* ==========================================================================
   T-03 — category archive and shop. The money template: the hero intro and
   the bottom editorial block hold the #1 "miniature keychain" ranking.
   ========================================================================== */

.esmaric-archive {
  max-width: var(--es-container);
  margin: 0 auto;
  padding: 0 48px var(--es-space-8);
}

/* — hero — */
.esmaric-archive__hero {
  padding: var(--es-space-7) 0 var(--es-space-6);
  display: flex; flex-direction: column; gap: 16px;
  border-bottom: 1px solid var(--es-rule);
  margin-bottom: var(--es-space-4);
}
.esmaric-archive__title { font-size: clamp(32px, 4vw, 48px); }
.esmaric-archive__intro {
  font-family: var(--es-font-display);
  font-size: 18px; line-height: 1.7; color: var(--es-ink-soft);
  max-width: 62ch;
}
.esmaric-archive__count {
  font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--es-brass-700);
}

/* — chips row — */
.esmaric-archive .esmaric-chips { margin-bottom: var(--es-space-4); }

/* — toolbar — */
.esmaric-archive__toolbar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 12px 0; margin-bottom: var(--es-space-4);
  border-bottom: 1px solid var(--es-rule);
}
.esmaric-filter-toggle {
  font: inherit; font-size: 11.5px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--es-umber-800); background: none; cursor: pointer;
  border: 1px solid var(--es-rule); border-radius: var(--es-radius);
  padding: 10px 20px; min-height: 44px;
}
.esmaric-filter-toggle:hover { border-color: var(--es-umber-800); }
.esmaric-archive .woocommerce-ordering select {
  font: inherit; font-size: 13px; color: var(--es-ink);
  background: var(--es-paper); border: 1px solid var(--es-rule);
  border-radius: var(--es-radius); padding: 10px 14px; min-height: 44px;
}

/* — filter slide-over — */
.esmaric-filter-panel {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 60;
  width: min(360px, 100%);
  background: var(--es-paper); border-left: 1px solid var(--es-rule);
  box-shadow: var(--es-shadow-lg);
  padding: var(--es-space-6) var(--es-space-5);
  overflow-y: auto;
}
.esmaric-filter-panel[hidden] { display: none; }

/* — product grid — */
.esmaric-archive ul.products {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: var(--es-space-6) var(--es-space-4);
}

/* — pagination — */
.esmaric-archive .woocommerce-pagination { margin-top: var(--es-space-7); text-align: center; }
.esmaric-archive .woocommerce-pagination ul {
  list-style: none; margin: 0; padding: 0;
  display: inline-flex; gap: 8px;
}
.esmaric-archive .woocommerce-pagination a,
.esmaric-archive .woocommerce-pagination span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px; padding: 0 12px;
  border: 1px solid var(--es-rule); border-radius: var(--es-radius);
  color: var(--es-umber-800); font-variant-numeric: tabular-nums;
}
.esmaric-archive .woocommerce-pagination span.current {
  background: var(--es-umber-800); color: var(--es-umber-100); border-color: var(--es-umber-800);
}

/* — editorial block — */
.esmaric-archive__editorial {
  margin-top: var(--es-space-8);
  padding-top: var(--es-space-6);
  border-top: 1px solid var(--es-rule);
  max-width: 72ch;
}
.esmaric-archive__editorial p { margin: 0 0 var(--es-space-3); font-size: 15px; line-height: 1.8; color: var(--es-ink-soft); }
.esmaric-archive__editorial a { color: var(--es-brass-700); border-bottom: 1px solid var(--es-gold); }
.esmaric-archive__editorial a:hover { color: var(--es-ink); }

/* — responsive — */
@media (max-width: 1024px) {
  .esmaric-archive ul.products { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 760px) {
  .esmaric-archive { padding: 0 20px var(--es-space-7); }
  .esmaric-archive ul.products { grid-template-columns: repeat(2, 1fr); gap: var(--es-space-5) var(--es-space-3); }
}