/* Sets index (/sets) — grid of ready-made kit cards.
   Scoped BEM, loaded only on /sets via head_extra. Uses theme tokens. */

.hc-sets-head {
  margin: 8px 0 28px;
}
.hc-sets-head__title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 500;
  color: var(--hc-ink, #1a1716);
  margin: 6px 0 8px;
}
.hc-sets-head__sub {
  max-width: 640px;
  font-size: var(--hc-fs-md, 14px);
  line-height: 1.6;
  color: var(--hc-text-secondary, #6b6258);
  margin: 0;
}

.hc-sets-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
}

.hc-set-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--hc-line-2, #e8e4e0);
  border-radius: var(--hc-r-md, 14px);
  background: var(--hc-paper, #fff);
  overflow: hidden;
  text-decoration: none;
  transition: border-color var(--hc-dur-fast, 140ms), box-shadow var(--hc-dur-fast, 140ms), transform var(--hc-dur-fast, 140ms);
}
.hc-set-card:hover {
  border-color: var(--hc-accent, #8b7355);
  box-shadow: 0 8px 24px rgba(26, 23, 22, .08);
  transform: translateY(-2px);
}
.hc-set-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--hc-bg, #f5f2ec);
}
.hc-set-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hc-set-card__badge {
  font-family: var(--hc-mono, monospace);
  font-size: 10px;
  letter-spacing: .14em;
  font-weight: 600;
  color: var(--hc-accent, #8b7355);
  border: 1px solid var(--hc-accent, #8b7355);
  border-radius: 999px;
  padding: 6px 14px;
  background: var(--hc-paper, #fff);
}
.hc-set-card__badge--float {
  position: absolute;
  top: 12px;
  left: 12px;
}
.hc-set-card__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px;
  flex: 1;
}
.hc-set-card__name {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--hc-ink, #1a1716);
  margin: 0;
}
.hc-set-card__meta {
  font-size: var(--hc-fs-sm, 12px);
  color: var(--hc-text-muted, #a6a29c);
}
.hc-set-card__price {
  margin-top: auto;
  padding-top: 6px;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 20px;
  font-weight: 500;
  color: var(--hc-ink, #1a1716);
}