/* ============================================================
   redesign.css — SuppBest card system (loads last, overrides
   the .sp-card / .rv-card / .np-card / .ha-card definitions in
   pages.css / niche-tag.css / home.css with one consistent,
   distinct look across every listing page).
   ============================================================ */

/* ---- Shared card shell: flat border + colored top tab instead
        of the old soft-shadow style ---- */
.sp-card, .rv-card, .np-card {
  background: var(--surface-card);
  border: 1.5px solid var(--surface-border);
  border-radius: var(--radius-md);
  box-shadow: none;
  position: relative;
  overflow: hidden;
  transition: border-color var(--dur-med, .3s) var(--ease-out, ease),
              transform var(--dur-med, .3s) var(--ease-out, ease);
}
.sp-card::before, .rv-card::before, .np-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--grad-clay, linear-gradient(90deg, var(--c-clay-500), var(--c-clay-400)));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s var(--ease-out, ease);
}
.sp-card:hover, .rv-card:hover, .np-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--c-green-500);
}
.sp-card:hover::before, .rv-card:hover::before, .np-card:hover::before {
  transform: scaleX(1);
}

/* ---- Image area: squared-off, no more gray card padding look ---- */
.sp-card-img, .rv-card-img, .np-card-img {
  background: var(--c-paper-50) !important;
  border-bottom: 1.5px solid var(--surface-border);
}

/* ---- Score badge: floating pill, top-left, clay accent instead
        of gold, replacing the old star-icon badge treatment ---- */
.np-score-badge {
  background: var(--c-ink-900) !important;
  color: #fff !important;
  border-radius: var(--radius-pill) !important;
  padding: 4px 10px !important;
  font-weight: 800 !important;
  box-shadow: var(--shadow-sm);
}
.np-score-badge svg { fill: var(--c-clay-400) !important; }

.np-offer-ribbon {
  background: var(--grad-clay, var(--c-clay-500)) !important;
  border-radius: var(--radius-pill) !important;
  font-weight: 700 !important;
}

/* ---- Tag pills: outline style instead of filled ---- */
.np-tag-pill, .sp-card-tags span {
  background: transparent !important;
  border: 1px solid var(--c-green-200);
  color: var(--c-green-700) !important;
}

/* ---- Footer / CTA row: pill button instead of plain text+arrow link ---- */
.np-card-footer, .sp-card-btns {
  border-top: 1px dashed var(--surface-border) !important;
}
.np-cta {
  background: var(--c-ink-900);
  color: #fff !important;
  border-radius: var(--radius-pill);
  padding: 7px 14px;
  font-size: 12.5px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: background var(--dur-fast, .18s) ease;
}
.np-card:hover .np-cta { background: var(--c-green-600); }

/* ---- Star ratings on review cards: swap fill to clay accent ---- */
.rv-card-stars svg { fill: var(--c-clay-400) !important; }

/* ---- Research / article cards (.ha-card): left accent bar
        instead of plain row ---- */
.ha-card, [class*="researches"] .ha-card, .researches-grid a {
  border-left: 3px solid var(--c-green-500) !important;
  transition: border-left-color .25s ease, background .25s ease;
}
.ha-card:hover { border-left-color: var(--c-clay-500) !important; background: var(--c-green-50); }

/* ---- Generic buttons site-wide: squarer corners, bolder weight,
        small uppercase tracking — a different personality than
        the original fully-pill CTAs ---- */
.h-btn-primary, .h-finder-btn, .h-coupon-search-card button,
.h-subscribe-form button, a.h-view-all {
  border-radius: var(--radius-sm) !important;
  letter-spacing: .02em;
}
.h-btn-primary, .h-finder-btn, .h-coupon-search-card button, .h-subscribe-form button {
  font-weight: 700 !important;
}

/* ---- Section labels: small bordered tag instead of plain pill ---- */
.h-section-label {
  border: 1px solid currentColor;
  border-radius: var(--radius-sm) !important;
  background: transparent !important;
}