/* KnowThePepper readability override
   Purpose: reduce typography fragmentation from legacy inline styles without
   changing article templates one by one. Loaded after the main stylesheet. */

:root {
  /* Font system override (all-sans modern). Loaded after style.css so these win. */
  --font-heading: 'Bricolage Grotesque', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --ktp-text-body: 20px;
  --ktp-text-ui: 19.5px;
  --ktp-text-small: 19.5px;
  --ktp-text-caption: 19px;
  --ktp-text-label: 19px;
  --ktp-line-body: 1.82;
  --ktp-line-tight: 1.42;
  --ktp-readable-color: #263241;
  --ktp-muted-readable: #475569;
}

html {
  font-size: 100%;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  font-size: 19.5px;
  line-height: var(--ktp-line-body);
  color: var(--ktp-readable-color);
  font-kerning: normal;
  text-rendering: optimizeLegibility;
}

main {
  color: var(--ktp-readable-color);
}

main h1 {
  font-size: clamp(2.15rem, 4.8vw, 3.45rem) !important;
  line-height: 1.08 !important;
  letter-spacing: 0 !important;
}

main h2,
main .pepper-section-h2 {
  font-family: var(--font-heading) !important;
  font-size: clamp(1.45rem, 2.4vw, 2rem) !important;
  line-height: 1.22 !important;
  letter-spacing: 0 !important;
  font-weight: 800 !important;
}

main h3 {
  font-family: var(--font-heading) !important;
  font-size: clamp(1.25rem, 1.6vw, 1.55rem) !important;
  line-height: 1.28 !important;
  letter-spacing: 0 !important;
  font-weight: 800 !important;
}

main p,
main li,
main td,
main th {
  line-height: var(--ktp-line-body) !important;
}

main p {
  margin-bottom: 1.08em;
}

main li {
  margin-bottom: 0.4em;
}

main .content-section > p,
main .content-section > ul,
main .content-section > ol,
main .content-section li,
main .guide-content > p,
main .guide-content li,
main .guide-section-lead p,
main .guide-callout p,
main .guide-insight-card p,
main .guide-stat-highlight p,
main .pepper-section p,
main .pepper-section li,
main .comparison-content p,
main .comparison-content li,
main .recipe-content p,
main .recipe-content li,
main .faq-answer,
main .aio-summary-box__text {
  font-size: var(--ktp-text-body) !important;
  line-height: var(--ktp-line-body) !important;
  color: var(--ktp-readable-color) !important;
}

/* Key Insight card sits on a dark (#1c1917) background — keep its text light,
   overriding the readable-color rule above that would make it dark-on-dark. */
main .guide-insight-card p { color: #e7e5e4 !important; }
main .guide-insight-card strong { color: #fff !important; }

/* Affiliate pills are solid-fill chips — never inherit content-link borders,
   underlines or focus rings that would show as a dotted outline. */
main .aff-shop-btn,
main .aff-chip { border: 0 !important; outline: 0 !important; text-decoration: none !important; color: #fff !important; }

main .faq-answer p {
  margin: 0 !important;
}

main .faq-answer p + p {
  margin-top: 0.9em !important;
}

main .faq-question span:first-child {
  flex: 1 1 auto;
}

main .content-section a,
main .guide-content a,
main .pepper-section a,
main .recipe-content a {
  text-underline-offset: 0.16em;
}

main small,
main figcaption,
main .breadcrumb,
main .meta,
main .tagline {
  font-size: var(--ktp-text-caption) !important;
  line-height: 1.58 !important;
}

main [style*="font-size: 10px"],
main [style*="font-size:10px"],
main [style*="font-size: 11px"],
main [style*="font-size:11px"] {
  font-size: var(--ktp-text-label) !important;
  line-height: var(--ktp-line-tight) !important;
}

main [style*="font-size: 12px"],
main [style*="font-size:12px"] {
  font-size: var(--ktp-text-caption) !important;
  line-height: 1.55 !important;
}

main [style*="font-size: 13px"],
main [style*="font-size:13px"] {
  font-size: var(--ktp-text-small) !important;
  line-height: 1.62 !important;
}

main [style*="font-size: 14px"],
main [style*="font-size:14px"],
main [style*="font-size: 15px"],
main [style*="font-size:15px"],
main [style*="font-size: 16px"],
main [style*="font-size:16px"],
main [style*="font-size: 17px"],
main [style*="font-size:17px"] {
  font-size: var(--ktp-text-ui) !important;
  line-height: 1.72 !important;
}

main [style*="font-size: var(--fs-md)"],
main [style*="font-size:var(--fs-md)"] {
  font-size: var(--ktp-text-body) !important;
  line-height: var(--ktp-line-body) !important;
}

main a p,
main .masonry-grid p,
main [class*="card"] p,
main [class*="hub"] p {
  font-size: 19px !important;
  line-height: 1.7 !important;
}

main a h3,
main .masonry-grid h3,
main [class*="card"] h3,
main [class*="hub"] h3 {
  font-family: var(--font-body) !important;
  font-size: clamp(1.25rem, 1.55vw, 1.5rem) !important;
  line-height: 1.25 !important;
  font-weight: 800 !important;
}

main select,
main button,
main input,
main textarea,
main a[style*="font-size"] {
  font-size: 18px !important;
  line-height: 1.55 !important;
}

main button,
main input,
main select,
main textarea {
  font: inherit;
}

main :where(p, li, dd, dt, blockquote, summary, label, input, select, textarea, button, td, th),
.site-footer :where(p, li, a, span) {
  font-size: var(--ktp-text-ui) !important;
  line-height: 1.74 !important;
}

main :where(span, div, a, p, li, label, button, input, select, textarea, td, th)[style*="font-size: 10px"],
main :where(span, div, a, p, li, label, button, input, select, textarea, td, th)[style*="font-size:10px"],
main :where(span, div, a, p, li, label, button, input, select, textarea, td, th)[style*="font-size: 11px"],
main :where(span, div, a, p, li, label, button, input, select, textarea, td, th)[style*="font-size:11px"],
main :where(span, div, a, p, li, label, button, input, select, textarea, td, th)[style*="font-size: 12px"],
main :where(span, div, a, p, li, label, button, input, select, textarea, td, th)[style*="font-size:12px"],
main :where(span, div, a, p, li, label, button, input, select, textarea, td, th)[style*="font-size: 13px"],
main :where(span, div, a, p, li, label, button, input, select, textarea, td, th)[style*="font-size:13px"],
main :where(span, div, a, p, li, label, button, input, select, textarea, td, th)[style*="font-size: 14px"],
main :where(span, div, a, p, li, label, button, input, select, textarea, td, th)[style*="font-size:14px"],
main :where(span, div, a, p, li, label, button, input, select, textarea, td, th)[style*="font-size: 15px"],
main :where(span, div, a, p, li, label, button, input, select, textarea, td, th)[style*="font-size:15px"],
main :where(span, div, a, p, li, label, button, input, select, textarea, td, th)[style*="font-size: 16px"],
main :where(span, div, a, p, li, label, button, input, select, textarea, td, th)[style*="font-size:16px"],
main :where(span, div, a, p, li, label, button, input, select, textarea, td, th)[style*="font-size: 17px"],
main :where(span, div, a, p, li, label, button, input, select, textarea, td, th)[style*="font-size:17px"],
.site-footer :where(span, a, p, li)[style*="font-size: 10px"],
.site-footer :where(span, a, p, li)[style*="font-size:10px"],
.site-footer :where(span, a, p, li)[style*="font-size: 11px"],
.site-footer :where(span, a, p, li)[style*="font-size:11px"],
.site-footer :where(span, a, p, li)[style*="font-size: 12px"],
.site-footer :where(span, a, p, li)[style*="font-size:12px"],
.site-footer :where(span, a, p, li)[style*="font-size: 13px"],
.site-footer :where(span, a, p, li)[style*="font-size:13px"],
.site-footer :where(span, a, p, li)[style*="font-size: 14px"],
.site-footer :where(span, a, p, li)[style*="font-size:14px"],
.site-footer :where(span, a, p, li)[style*="font-size: 15px"],
.site-footer :where(span, a, p, li)[style*="font-size:15px"],
.site-footer :where(span, a, p, li)[style*="font-size: 16px"],
.site-footer :where(span, a, p, li)[style*="font-size:16px"],
.site-footer :where(span, a, p, li)[style*="font-size: 17px"],
.site-footer :where(span, a, p, li)[style*="font-size:17px"] {
  font-size: var(--ktp-text-ui) !important;
  line-height: 1.62 !important;
}

main :where(span, div, a, p, li, label, button, input, select, textarea, td, th)[style*="font-size: 0.65rem"],
main :where(span, div, a, p, li, label, button, input, select, textarea, td, th)[style*="font-size:0.65rem"],
main :where(span, div, a, p, li, label, button, input, select, textarea, td, th)[style*="font-size: 0.7rem"],
main :where(span, div, a, p, li, label, button, input, select, textarea, td, th)[style*="font-size:0.7rem"],
main :where(span, div, a, p, li, label, button, input, select, textarea, td, th)[style*="font-size: 0.75rem"],
main :where(span, div, a, p, li, label, button, input, select, textarea, td, th)[style*="font-size:0.75rem"],
main :where(span, div, a, p, li, label, button, input, select, textarea, td, th)[style*="font-size: 0.8rem"],
main :where(span, div, a, p, li, label, button, input, select, textarea, td, th)[style*="font-size:0.8rem"],
main :where(span, div, a, p, li, label, button, input, select, textarea, td, th)[style*="font-size: 0.85rem"],
main :where(span, div, a, p, li, label, button, input, select, textarea, td, th)[style*="font-size:0.85rem"],
main :where(span, div, a, p, li, label, button, input, select, textarea, td, th)[style*="font-size: 0.875rem"],
main :where(span, div, a, p, li, label, button, input, select, textarea, td, th)[style*="font-size:0.875rem"],
main :where(span, div, a, p, li, label, button, input, select, textarea, td, th)[style*="font-size: .875rem"],
main :where(span, div, a, p, li, label, button, input, select, textarea, td, th)[style*="font-size:.875rem"],
main :where(span, div, a, p, li, label, button, input, select, textarea, td, th)[style*="font-size: 0.9rem"],
main :where(span, div, a, p, li, label, button, input, select, textarea, td, th)[style*="font-size:0.9rem"],
main :where(span, div, a, p, li, label, button, input, select, textarea, td, th)[style*="font-size: 0.95rem"],
main :where(span, div, a, p, li, label, button, input, select, textarea, td, th)[style*="font-size:0.95rem"],
main :where(span, div, a, p, li, label, button, input, select, textarea, td, th)[style*="font-size: 1rem"],
main :where(span, div, a, p, li, label, button, input, select, textarea, td, th)[style*="font-size:1rem"] {
  font-size: var(--ktp-text-ui) !important;
  line-height: 1.62 !important;
}

main :where([class*="card"], [class*="hub"], [class*="tool"], [class*="callout"], [class*="summary"], [class*="meta"]) :where(p, li, span, div, a, label, button),
main :where([data-recipe-page], .comparison-content, .pepper-section, .guide-content, .recipe-content, .content-section) :where(p, li, span, div, a, label, button),
main :where([class*="meta"], [class*="label"], [class*="caption"], [class*="tag"], [class*="badge"], [class*="byline"], [class*="breadcrumb"], [class*="eyebrow"], [class*="read"], [class*="count"]) {
  font-size: var(--ktp-text-ui) !important;
}

.site-header .nav-link,
.site-header .dropdown-item,
.site-header button {
  font-size: 18px !important;
  line-height: 1.5 !important;
}

.site-header .nav-dropdown-menu--heat {
  min-width: 280px !important;
}

.site-header .nav-dropdown-menu--heat .dropdown-item {
  align-items: center;
}

.site-header .nav-dropdown-menu--heat .dropdown-item-text {
  min-width: 0;
  flex: 1 1 auto;
}

.site-header .nav-dropdown-menu--heat .dropdown-item-text strong,
.site-header .nav-dropdown-menu--heat .dropdown-item-text small {
  display: block;
}

.site-header .nav-dropdown-menu--heat .dropdown-item-text small {
  white-space: nowrap;
}

main .comp-table,
main .comparison-table,
main table {
  font-size: var(--ktp-text-ui) !important;
}

main .comp-table th,
main .comp-table td,
main .comparison-table th,
main .comparison-table td {
  font-size: var(--ktp-text-ui) !important;
  line-height: 1.7 !important;
}

main .masonry-grid .masonry-item h3,
main a.masonry-item h3 {
  font-family: var(--font-body) !important;
  font-size: clamp(1.35rem, 1.9vw, 1.7rem) !important;
  line-height: 1.22 !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
}

main div[style*="font-family: var(--font-heading)"][style*="font-size: 16px"],
main div[style*="font-family:var(--font-heading)"][style*="font-size:16px"],
main div[style*="font-family: var(--font-heading)"][style*="font-size: 18px"],
main div[style*="font-family:var(--font-heading)"][style*="font-size:18px"] {
  font-family: var(--font-body) !important;
  font-size: 21px !important;
  line-height: 1.3 !important;
  font-weight: 800 !important;
}

main .masonry-grid .masonry-item p,
main a.masonry-item p {
  font-size: 19.5px !important;
  line-height: 1.74 !important;
  color: var(--ktp-muted-readable) !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

main .masonry-grid .masonry-item div[style*="font-size: 13px"],
main .masonry-grid .masonry-item div[style*="font-size:13px"],
main .masonry-grid .masonry-item span[style*="font-size: 11px"],
main .masonry-grid .masonry-item span[style*="font-size:11px"],
main a.masonry-item div[style*="font-size: 13px"],
main a.masonry-item div[style*="font-size:13px"],
main a.masonry-item span[style*="font-size: 11px"],
main a.masonry-item span[style*="font-size:11px"] {
  font-size: var(--ktp-text-ui) !important;
  line-height: 1.58 !important;
}

.ktp-related-visual-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin: 20px 0 38px;
}

.ktp-related-visual-card {
  display: block;
  color: inherit;
  text-decoration: none;
}

.ktp-related-visual-image {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 8px;
  background: var(--warm-bg);
  transition: transform .18s ease, filter .18s ease;
}

.ktp-related-visual-card:hover .ktp-related-visual-image {
  filter: saturate(1.06) contrast(1.02);
  transform: translateY(-2px);
}

.ktp-related-visual-label {
  display: block;
  margin-top: 11px;
  color: var(--red);
  font-size: 14px !important;
  font-weight: 800;
  letter-spacing: .08em;
  line-height: 1.28 !important;
  text-transform: uppercase;
}

.ktp-related-visual-title {
  display: block;
  margin-top: 4px;
  color: var(--dark);
  font-family: var(--font-body);
  font-size: 20px !important;
  font-weight: 800;
  line-height: 1.32 !important;
}

.ktp-related-visual-card:hover .ktp-related-visual-title {
  color: var(--red);
}

.ktp-inline-related {
  display: block;
  margin: 26px 0;
  padding: 13px 0 13px 18px;
  border-left: 2px solid currentColor;
  color: var(--red);
}

.ktp-inline-related__label {
  display: block;
  font-size: 14px !important;
  font-weight: 800;
  letter-spacing: .08em;
  line-height: 1.28 !important;
  text-transform: uppercase;
}

.ktp-inline-related__link {
  display: inline-block;
  margin-top: 6px;
  color: var(--dark);
  font-family: var(--font-body);
  font-size: 20px !important;
  font-weight: 800;
  line-height: 1.36 !important;
  text-decoration: none;
}

.ktp-inline-related__link:hover {
  color: var(--red);
}

.ktp-light-warning-section {
  margin: 34px 0;
  padding: 20px 0 0;
  border-top: 2px solid #fecaca;
}

.ktp-light-warning-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  color: #991b1b;
  font-family: var(--font-body);
  font-size: 23px !important;
  font-weight: 850;
  line-height: 1.32 !important;
}

.ktp-light-warning-title svg {
  flex: 0 0 auto;
}

.ktp-light-warning-body {
  color: #374151;
}

.ktp-light-warning-body p,
.ktp-light-warning-body li {
  margin-bottom: 14px !important;
}

.ktp-tip-strip {
  margin: 30px 0;
  padding: 0 0 0 18px;
  border-left: 3px solid #f59e0b;
  color: #78350f;
}

.ktp-tip-strip p {
  margin: 0 !important;
}

.ktp-handy-tools {
  margin: 24px 0;
}

.ktp-handy-tools--divider {
  padding-top: 14px;
  border-top: 1px solid var(--gray-border);
}

.ktp-handy-tools__label {
  margin-bottom: 10px;
  color: #6b7280;
  font-size: 12px !important;
  font-weight: 800;
  letter-spacing: .08em;
  line-height: 1.2 !important;
  text-transform: uppercase;
}

.ktp-handy-tools__list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.ktp-handy-tools__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid var(--gray-border);
  border-radius: 9px;
  background: var(--white);
  color: var(--dark);
  text-decoration: none;
  font-size: 16px !important;
  line-height: 1.4 !important;
}

.ktp-handy-tools__link i {
  font-size: 17px !important;
  line-height: 1 !important;
}

.ktp-handy-tools__link strong {
  font-weight: 700;
}

.ktp-handy-tools__link:hover {
  color: var(--dark);
  text-decoration: none;
}

.site-footer .footer-grid {
  grid-template-columns: minmax(260px, 1.6fr) repeat(4, minmax(0, 1fr)) !important;
  gap: 28px 24px !important;
  align-items: start;
  /* No max-width override here — `.site-footer .footer-grid` outranks style.css's
     `.footer-grid { max-width: 1100px }`, so setting 100% stretched the footer
     columns full-width. Let the 1100px design cap (centered) stand. */
}

.site-footer .footer-col {
  min-width: 0;
  overflow-wrap: anywhere;
}

.site-footer .footer-col ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer .footer-col li {
  margin-bottom: 12px;
}

.site-footer .footer-col a {
  display: inline-flex;
  align-items: flex-start;
  gap: 10px;
  max-width: 100%;
}

.site-footer .footer-heading {
  margin-bottom: 14px;
}

.site-footer .footer-tier-link {
  display: flex !important;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  text-decoration: none;
}

.site-footer .footer-tier-dot {
  flex: 0 0 6px;
  width: 6px;
  height: 6px;
  margin-top: 0.72em;
  border-radius: 999px;
}

.site-footer .footer-tier-copy {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 8px;
  row-gap: 2px;
  min-width: 0;
}

.site-footer .footer-tier-name {
  white-space: nowrap;
}

.site-footer .footer-tier-range {
  color: #64748b;
  font-size: 0.92em !important;
  line-height: 1.5 !important;
  white-space: nowrap;
}

main {
  max-width: 100%;
}

main .section {
  /* Keep .section's design max-width (style.css caps it at 1100px) and only clip
     overflow. A previous `max-width:100%` here outranked that cap (main .section is
     more specific than .section) and stretched every section full-width on hub,
     listing, tool and comparison pages. */
  overflow-x: clip;
}

.pep-spotlight__orb {
  max-width: 100%;
}

.pepper-sticky-bar {
  max-width: 100%;
  overflow: hidden;
}

.pepper-sticky-bar__inner {
  /* Align the sticky TOC inner with the article content column (.page-content /
     .section / header .container are all 1100px centered). A prior overflow fix
     set this to 100%, which left-aligned the bar full-width and broke alignment. */
  max-width: 1100px;
  margin-inline: auto;
  min-width: 0;
}

.pepper-sticky-bar__name,
.pepper-sticky-bar__right {
  min-width: 0;
  flex: 0 1 auto;
}

.pepper-sticky-bar__pepper-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  /* Recipe/guide titles are full article names (40+ chars) and would otherwise take
     their whole content width, squeezing the section links. Profiles have short
     entity names and are unaffected. Cap it so long titles truncate with the ellipsis
     above and the links keep room; clamp keeps it tight on mobile. */
  max-width: clamp(120px, 22vw, 260px);
}

.pepper-sticky-bar__links {
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.pepper-sticky-bar__link {
  flex: 0 0 auto;
  white-space: nowrap;
}

.recipe-hub-grid .masonry-item p {
  display: none !important;
}

.recipe-hub-grid .masonry-item h3 {
  font-family: var(--font-body) !important;
  font-size: clamp(1.15rem, 1.6vw, 1.45rem) !important;
  line-height: 1.22 !important;
  letter-spacing: 0 !important;
}

.recipe-hub-grid .recipe-card-featured h3 {
  color: #fff !important;
  font-size: clamp(1.35rem, 4.8vw, 1.75rem) !important;
  line-height: 1.12 !important;
  text-shadow: 0 2px 10px rgba(0,0,0,.45);
}

.recipe-hub-grid .recipe-card-featured span,
.recipe-hub-grid .recipe-card-featured div {
  color: inherit;
}

@media (max-width: 1180px) {
  .ktp-related-visual-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .site-footer .footer-grid {
    grid-template-columns: repeat(2, minmax(220px, 1fr)) !important;
  }

  .site-footer .footer-brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 1100px) {
  .pepper-sticky-bar__divider,
  .pepper-sticky-bar__right {
    display: none !important;
  }

  .pepper-sticky-bar__links {
    padding-inline-end: 8px;
  }
}

@media (max-width: 768px) {
  :root {
    --ktp-text-body: 19.5px;
    --ktp-text-ui: 19px;
    --ktp-text-small: 19px;
    --ktp-text-caption: 19px;
    --ktp-text-label: 19px;
  }

  body {
    font-size: 19px;
  }

  main h1 {
    font-size: clamp(2rem, 9vw, 2.8rem) !important;
  }

  main h2,
  main .pepper-section-h2 {
    font-size: clamp(1.35rem, 6vw, 1.75rem) !important;
  }

  .ktp-related-visual-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .ktp-handy-tools__list {
    gap: 8px;
  }

  .ktp-handy-tools__link {
    width: 100%;
    justify-content: space-between;
  }

  .site-footer .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  .site-footer .footer-col li {
    margin-bottom: 10px;
  }
}

/* TOC ("In This Guide"): even auto-fit columns regardless of group count
   (fixes the fixed 4-column grid that left an empty column with 3 groups). */
.pepper-nav-card__grid {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
}

/* ── Amazon product cards (Creators API) ─────────────────────────────────────
   Rendered only from cached API data by AffiliateLink::productCards(). Prices and
   images come from Amazon and expire in 24h, so this block may vanish on any render
   and the chip box takes over — never style it as a required layout anchor. */
.aff-cards {
  margin: 32px 0;
  padding: 20px 22px;
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 14px;
  background: var(--color-bg-alt, #f9fafb);
}
.aff-cards-head {
  margin: 0 0 4px;
  font-family: var(--font-secondary, serif);
  font-size: var(--text-xl, 20px);
  color: var(--color-text, #1f2937);
}
.aff-cards-note {
  margin: 0 0 14px;
  font-size: var(--text-xs, 12px);
  color: var(--color-text-muted, #6b7280);
}
.aff-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--space-md, 16px);
}
main .aff-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px;
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 10px;
  background: var(--color-bg, #fff);
  text-decoration: none !important;
  border-bottom: 1px solid var(--color-border, #e5e7eb) !important;
  transition: box-shadow .15s ease, transform .15s ease;
}
main .aff-card:hover {
  box-shadow: 0 4px 14px rgba(0, 0, 0, .10);
  transform: translateY(-2px);
}
.aff-card-img {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 120px;
}
/* Amazon images are mixed aspect ratios; contain keeps every product intact. */
.aff-card-img img {
  max-width: 100%;
  max-height: 120px;
  width: auto;
  height: auto;
  object-fit: contain;
}
.aff-card-title {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: var(--text-sm, 14px);
  line-height: 1.35;
  color: var(--color-text, #1f2937);
}
.aff-card-meta {
  margin-top: auto;
  font-size: var(--text-sm, 14px);
}
.aff-card-price { font-weight: 700; color: var(--color-primary, #dc2626); }
.aff-card-was   { margin-left: 6px; color: var(--color-text-muted, #6b7280); font-weight: 400; }
/* Required Amazon attribution + "as of" price stamp. Small, but must stay visible. */
.aff-cards-legal {
  margin: 14px 0 0;
  font-size: 11px;
  line-height: 1.45;
  color: var(--color-text-muted, #6b7280);
}
@media (max-width: 480px) {
  .aff-card-grid { grid-template-columns: repeat(2, 1fr); }
}