/* The credit cards page (sections/CardCatalog.php, web/card-catalog.js). Tokens only (R7): a card face takes its two colours from the card's own row. */

.nv-catalog__filters { margin: 0 0 clamp(20px, 3vw, 30px); padding: 0; list-style: none; }
.nv-catalog__filters[hidden] { display: none; }
.nv-catalog__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.nv-catalog__title { font-size: clamp(18px, 2.1vw, 23px); font-weight: 600; letter-spacing: -.015em; }
.nv-catalog__hint { font-size: 14px; color: var(--nv-text-3); }
.nv-catalog__grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }

.nv-ccard { display: flex; flex-direction: column; overflow: hidden; border: 1px solid transparent; border-radius: 22px; background: var(--nv-surface); transition: box-shadow var(--nv-dur-hover), border-color var(--nv-dur-hover); }
.nv-ccard[hidden] { display: none; }
.nv-ccard.is-selected { border-color: var(--nv-primary); box-shadow: 0 12px 30px rgba(var(--nv-primary-rgb), .16); }
.nv-ccard__face {
  display: flex; flex-direction: column; min-height: 176px; margin: 18px 18px 0; padding: 18px; border-radius: 18px; color: var(--nv-on-hero);
  background: linear-gradient(135deg, var(--nv-face-a, var(--nv-hero-card-a)) 0%, var(--nv-face-b, var(--nv-hero-card-b)) 100%); box-shadow: 0 12px 26px rgba(var(--nv-ink-rgb), .22);
}
.nv-ccard__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.nv-ccard__brand { font-size: 13px; font-weight: 700; letter-spacing: .16em; }
.nv-ccard__tier { margin-top: 2px; font-size: 11.5px; letter-spacing: .13em; color: var(--nv-on-hero-2); }
.nv-ccard__wave { display: inline-flex; color: var(--nv-on-hero); }
.nv-ccard__number { display: flex; align-items: center; gap: 11px; margin-top: 16px; font-size: 14px; letter-spacing: .12em; }
.nv-ccard__chip { flex: none; width: 34px; height: 25px; border-radius: 5px; background: linear-gradient(140deg, var(--nv-chip-gold-a), var(--nv-chip-gold-b)); }
.nv-ccard__bottom { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 14px; }
.nv-ccard__name { font-size: 12.5px; letter-spacing: .05em; color: var(--nv-on-hero-2); }
.nv-ccard__mark { font-size: 14px; font-weight: 700; }

.nv-ccard__body { display: flex; flex: 1; flex-direction: column; gap: 12px; padding: 20px; }
.nv-ccard__title { margin-bottom: 4px; font-size: 17px; font-weight: 600; letter-spacing: -.02em; }
.nv-ccard__category { font-size: 13px; font-weight: 600; color: var(--nv-primary); }
.nv-ccard__facts { display: flex; flex-wrap: wrap; gap: 14px; margin: 0; }
.nv-ccard__facts dt { font-size: 12.5px; color: var(--nv-text-3); }
.nv-ccard__facts dd { margin: 0; font-size: 14.5px; font-weight: 600; }
.nv-ccard__rewards { padding: 12px; border-radius: 12px; background: var(--nv-canvas); font-size: 14px; line-height: 1.5; }
.nv-ccard__label { margin-bottom: 4px; font-size: 12.5px; color: var(--nv-text-3); }
.nv-ccard__benefits { display: flex; flex: 1; flex-direction: column; gap: 7px; margin: 0; padding: 0; list-style: none; }
.nv-ccard__benefits li { display: flex; align-items: flex-start; gap: 9px; font-size: 14px; line-height: 1.5; color: var(--nv-text-2); }
.nv-ccard__benefits .nv-icon { flex: none; margin-top: 3px; color: var(--nv-primary); }
.nv-ccard__actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 2px; }
.nv-ccard__apply { flex: 1 1 120px; }
.nv-ccard__compare { flex: 1 1 110px; border: 1px solid transparent; }
.nv-ccard__compare[hidden] { display: none; }
.nv-ccard__compare[aria-pressed="true"] { border-color: var(--nv-primary); background: var(--nv-primary-light); color: var(--nv-primary); }
.nv-ccard__apr { margin: 4px 0 0; font-size: 12px; line-height: 1.5; color: var(--nv-text-3); }

/* the bar that keeps the choice in view while the page scrolls */
.nv-catalog__dock {
  position: sticky; bottom: 16px; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; max-width: 640px; margin: 24px auto 0;
  padding: 12px 14px 12px 20px; border-radius: var(--nv-r-card); background: var(--nv-surface); box-shadow: var(--nv-shadow-pop);
}
.nv-catalog__dock[hidden], .nv-catalog__dock [hidden], .nv-compare[hidden] { display: none; }
.nv-catalog__dock-text { font-size: 14px; font-weight: 600; }
@media (max-width: 560px) {
  .nv-catalog__dock { padding: 12px 14px; }
  .nv-catalog__dock-text { flex: 1 1 100%; }
  .nv-catalog__dock .nv-btn { flex: 1 1 0; }
}

/* the comparison: a table with a header that stays under the page header, or a block per card on a phone */
.nv-compare { margin-top: clamp(28px, 4vw, 48px); scroll-margin-top: 96px; }
.nv-compare:focus { outline: none; }
.nv-compare__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.nv-compare .nv-cmp__wide { overflow: clip; }
.nv-compare .nv-cmp thead th { position: sticky; top: calc(var(--nv-header-h, 72px) + 8px); z-index: 2; background: var(--nv-surface); }
.nv-compare .nv-cmp td { vertical-align: top; }

@media (prefers-reduced-motion: reduce) { .nv-ccard { transition: none; } }