/* ============================================================================
   Recode Audio — product grid + cards + filter chips (effects/synths/amps)
   ============================================================================ */
.pagehead { padding-block: var(--s-8) var(--s-5); }
.pagehead__title { font-size: var(--fs-h1); margin-top: var(--s-3); }
.pagehead__sub { margin-top: var(--s-4); font-size: 1.1rem; max-width: 56ch; }

/* filter chips */
.filterbar { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-block: var(--s-5) var(--s-6); }
.fchip {
  font-family: var(--font-mono); font-size: var(--fs-small);
  padding: 0.45em 0.95em; border-radius: var(--radius-pill);
  background: transparent; color: var(--text-dim);
  border: 1px solid var(--surface-line); cursor: pointer;
  transition: .15s var(--ease);
}
.fchip:hover { color: var(--text); border-color: var(--graphite); }
.fchip.is-active { background: var(--green); color: var(--text-on-green); border-color: var(--green); }

/* grid */
.pgrid { display: grid; gap: var(--s-5);
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); padding-bottom: var(--s-9); }

/* card */
.pcard {
  position: relative; display: flex; flex-direction: column;
  background: var(--bg-elevated); border: 1px solid var(--surface-line);
  border-radius: var(--radius-lg); overflow: hidden;
  transition: transform .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.pcard:hover { transform: translateY(-5px); border-color: var(--green-glow); box-shadow: var(--shadow); }
.pcard__art {
  aspect-ratio: 1480 / 1040; overflow: hidden;
  background: radial-gradient(120% 100% at 50% 0%, #303236, #16171a);
  display: grid; place-items: center;
}
.pcard__art img { width: 100%; height: 100%; object-fit: contain; object-position: center;
  transition: transform .4s var(--ease); }
.pcard:hover .pcard__art img { transform: scale(1.04); }
.pcard__body { padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-2); flex: 1; }
.pcard__cat { font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--green-bright); }
.pcard__name { font-size: 1.3rem; font-family: var(--font-plugin); letter-spacing: 0.01em; line-height: 1.2; }
.pcard__tag { font-size: var(--fs-small); }
.pcard__foot { margin-top: auto; padding-top: var(--s-3); display: flex; align-items: center;
  justify-content: space-between; gap: var(--s-3); }
.pcard__formats { font-size: var(--fs-micro); color: var(--text-dim); }
.pcard__soon { position: absolute; top: var(--s-3); right: var(--s-3); z-index: 3; }

/* wide amp faceplates: match exact image dimensions, show full panel */
.pcard__art--wide { aspect-ratio: 1456 / 512; background: #0a0a0a; padding: 0; }
.pcard__art--wide img { width: 100%; height: 100%; object-fit: contain; object-position: center; }

/* metal variant (effects) — silver card body to echo the faceplates.
   Effect faceplates are WIDE rack units (~1480x450), so use a wide art box +
   contain so the whole face shows without cropping. */
.pcard--metal { background: var(--bg-elevated); }
.pcard--metal .pcard__art { aspect-ratio: 1480 / 560; background: linear-gradient(160deg, #e9ebec, #c2c7c9); padding: var(--s-4); }
.pcard--metal .pcard__art img { object-fit: contain; }