/* ─────────────────────────────────────────────────────────────────────
   Collection / category list page
   ───────────────────────────────────────────────────────────────────── */

.cat-header {
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--s-7) var(--pad-x-d) var(--s-5);
  border-bottom: var(--rule-strong);
}
.cat-header .crumb { color: var(--ink-3); margin-bottom: var(--s-4); display: flex; gap: var(--s-3); }
.cat-header .crumb .sep { color: var(--ink-4); }
.cat-header h1 {
  margin: 0 0 var(--s-4);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(36px, 4.5vw, 60px);
  line-height: 1;
  letter-spacing: -0.02em;
}
.cat-header .standfirst {
  max-width: 680px;
  color: var(--ink-2);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 18px;
  line-height: 1.5;
  margin: 0 0 var(--s-4);
}
.cat-header .signed { color: var(--ink-3); }

.toolbar {
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--s-4) var(--pad-x-d);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-4);
  border-bottom: var(--rule);
  flex-wrap: wrap;
}
.toolbar .count { color: var(--ink-3); }
.toolbar .sort { display: flex; align-items: center; gap: var(--s-3); }
.toolbar .sort label { margin: 0; }
.toolbar select {
  width: auto;
  min-width: 140px;
  padding: 8px 12px;
  border: 1px solid var(--paper-3);
  background: var(--paper);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ink);
}

.plp {
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--s-5) var(--pad-x-d) var(--s-9);
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: var(--s-7);
  align-items: start;
}
@media (max-width: 900px) {
  .plp { grid-template-columns: 1fr; gap: var(--s-5); padding: var(--s-5) var(--pad-x-m) var(--s-9); }
  .cat-header { padding: var(--s-5) var(--pad-x-m) var(--s-4); }
  .toolbar { padding: var(--s-4) var(--pad-x-m); }
}
@media (max-width: 375px) {
  .cat-header { padding: var(--s-4) var(--s-3) var(--s-3); }
  .cat-header h1 { font-size: 28px; }
  .cat-header .standfirst { font-size: 15px; }
  .toolbar { padding: var(--s-3) var(--s-3); }
  .plp { padding: var(--s-4) var(--s-3) var(--s-7); }
}

.filters { position: sticky; top: 104px; align-self: start; }
.filter-group { padding: var(--s-4) 0; border-bottom: var(--rule); }
.filter-group:first-child { padding-top: 0; }
.filter-group h4 {
  margin: 0 0 var(--s-3);
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
}
.filter-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.filter-chips button {
  background: transparent;
  border: 1px solid var(--paper-3);
  color: var(--ink-2);
  padding: 6px 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: all var(--d-fast) var(--ease);
}
.filter-chips button:hover { border-color: var(--ink); color: var(--ink); }
.filter-chips button.on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.price-row { display: flex; gap: var(--s-2); }
.price-row input { font-family: var(--font-mono); font-size: 12px; padding: 8px 10px; }
.clear-link {
  display: inline-block;
  appearance: none;
  background: none;
  border: 0;
  font-family: inherit;
  margin-top: var(--s-3);
  color: var(--ink-2);
  font-size: 13px;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.clear-link:hover { color: var(--accent); }
@media (max-width: 900px) {
  .filters { position: static; padding-bottom: var(--s-5); border-bottom: var(--rule); }
}

.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-5); }
@media (max-width: 900px) { .grid { grid-template-columns: repeat(2, 1fr); gap: var(--s-3); } }
/* Keep 2-up on phones — denser browsing, more product per scroll. Drop to
   1-up only at extreme small (≤375px) where 2 cards become unreadable. */
@media (max-width: 375px) { .grid { grid-template-columns: 1fr; gap: var(--s-3); } }

/* Inline pcard rules — same shape as home.css .pcard but the meta-link
   wrapper is the navigable surface (since cards have heart + quick-add
   that sit outside the link). */
.pcard .meta-link { display: block; color: inherit; text-decoration: none; }

/* Empty state */
.empty {
  grid-column: 1 / -1;
  padding: var(--s-9) var(--s-7);
  text-align: center;
  border: var(--rule);
  background: var(--paper-2);
}
.empty h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 32px;
  letter-spacing: -0.01em;
  margin: 0 0 var(--s-4);
  line-height: 1.1;
}
.empty p {
  max-width: 480px;
  margin: 0 auto var(--s-5);
  color: var(--ink-2);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 18px;
  line-height: 1.5;
}
.empty form { display: flex; gap: 0; max-width: 380px; margin: 0 auto; border: 1px solid var(--ink); }
.empty form input { border: 0; padding: 12px 14px; flex: 1; background: var(--paper); }
.empty form button { border: 0; }

/* Fabric collection — no left filter aside, simplified card */
.plp-fabric { grid-template-columns: 1fr; }
.fabric-card {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  cursor: pointer;
  color: inherit;
  text-decoration: none;
}
.fabric-card .swatch {
  aspect-ratio: 4/3;
  border: var(--rule);
  position: relative;
  overflow: hidden;
  transition: box-shadow 500ms var(--ease);
  background: var(--paper-2);
}
.fabric-card:hover .swatch { box-shadow: 0 18px 40px -22px rgba(26, 22, 19, 0.45); }
.fabric-card .swatch img { object-fit: cover; transition: transform 600ms var(--ease); }
.fabric-card:hover .swatch img { transform: scale(1.04); }
.fabric-card h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 20px;
  letter-spacing: -0.005em;
  color: var(--ink);
}
.fabric-card .col-row {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink-2);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.fabric-card .col-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1px solid var(--paper-3);
  flex: 0 0 auto;
}
.fabric-card .desc {
  color: var(--ink-2);
  font-size: 14px;
  line-height: 1.55;
  margin: 0;
  max-width: 60ch;
}

/* ---------------------------------------------------------------------------
   Self-contained product-card layout.
   home.css carries the canonical .pcard rules, but home.css is only loaded on
   the home route. The collection route must not depend on it (a cold/direct
   load — or any mobile load — otherwise left the quick-add button overlapping
   the price; QA-003). These mirror the home.css block so /collection renders
   correctly on its own.
--------------------------------------------------------------------------- */
.pcard {
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition: transform 500ms var(--ease);
  color: inherit;
  text-decoration: none;
}
.pcard:hover { transform: translateY(-3px); }
.pcard .plate {
  aspect-ratio: 3/4;
  position: relative;
  overflow: hidden;
  background: var(--paper-2);
  box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
  transition: box-shadow 500ms var(--ease);
}
.pcard:hover .plate { box-shadow: 0 18px 40px -22px rgba(26, 22, 19, 0.45); }
.pcard .plate img { object-fit: cover; transition: opacity var(--d-slow) var(--ease); }
.pcard .plate img.alt,
.pcard .plate img.alt-2 { opacity: 0; }
.pcard:hover .plate img.primary { opacity: 0; }
.pcard:hover .plate img.alt { opacity: 1; }
.pcard .meta { padding: var(--s-3) 0 var(--s-2); }
.pcard .name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 18px;
  letter-spacing: -0.005em;
  color: var(--ink);
  margin: 0 0 var(--s-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pcard .row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3); }
.pcard .price {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 14px;
  color: var(--ink);
  letter-spacing: 0.02em;
}
.pcard .tag { color: var(--ink-3); font-family: var(--font-body); font-size: 11px; letter-spacing: 0.06em; }