.cards { display: grid; gap: var(--sp-4); }

@media (min-width: 560px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .cards { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .cards--wide { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.card {
  --cat: var(--c-brand);
  display: flex;
  flex-direction: column;
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  background: var(--c-paper);
  overflow: hidden;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.card:hover { border-color: var(--cat); box-shadow: var(--shadow-lift); transform: translateY(-2px); }

.card__media {
  position: relative;
  display: grid;
  place-items: center;
  height: 200px;
  background: var(--c-sunken);
  border-bottom: 1px solid var(--c-line-soft);
}

.card__media img { max-height: 164px; width: auto; transition: transform var(--dur) var(--ease); }
.card:hover .card__media img { transform: scale(1.04); }

.card__tag {
  position: absolute;
  top: var(--sp-3);
  left: var(--sp-3);
  padding: 0.25rem 0.5rem;
  border-radius: var(--r-sm);
  background: var(--c-paper);
  border: 1px solid color-mix(in srgb, var(--cat) 38%, var(--c-line));
  font-family: var(--f-label);
  font-size: 0.6875rem;
  color: color-mix(in srgb, var(--cat) 80%, var(--c-ink));
}

.card__body { display: flex; flex-direction: column; gap: var(--sp-3); flex: 1; padding: var(--sp-4); }
.card__title { margin: 0; font-family: var(--f-display); font-size: 1.0625rem; font-weight: var(--fw-heading); line-height: var(--lh-snug); letter-spacing: var(--ls-heading); }
.card__title a:hover { color: var(--c-accent); }

.card__specs { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-3); margin: 0; font-family: var(--f-label); font-size: var(--fs-eyebrow); color: var(--c-ink-muted); }
.card__specs b { color: var(--c-ink-soft); font-weight: 400; }

.pills { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

.pill {
  padding: 0.3125rem 0.625rem;
  border: 1px solid var(--c-line);
  border-radius: var(--r-pill);
  font-family: var(--f-label);
  font-size: 0.6875rem;
  color: var(--c-ink-soft);
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease), color var(--dur) var(--ease);
}

.pill:hover { border-color: var(--c-brand); }
.pill[aria-pressed='true'] { background: var(--c-brand-deep); border-color: var(--c-brand-deep); color: var(--c-paper); }

.card__foot { display: grid; gap: var(--sp-3); margin-top: auto; }
.card__foot .btn { width: 100%; }
.card__price { display: grid; white-space: nowrap; }
.card__price span { font-family: var(--f-label); font-size: 0.6875rem; color: var(--c-ink-muted); }
.card__price b { font-family: var(--f-display); font-size: 1.5rem; font-weight: var(--fw-display); letter-spacing: var(--ls-display); }