/*
 * Car Air Fresheners -- tokens and layout for the article blocks.
 *
 * Every block root carries "caf-app caf-root" and every rule is scoped under .caf-app. The
 * theme styles .tg-content h2/h3/ul/ol/li/a/img/figure/table for prose; those rules would
 * otherwise leak in (list bullets, red underlined links, 24px image margins, striped table
 * rows, drop-cap and heading sizes). Resets that must beat `.tg-content li` (0,1,1) are written
 * `.caf-app.caf-root li` (0,2,1); links always carry their own class (`.caf-app a.caf-x`).
 * Theme link colours need !important on the buttons (a:hover is red-dark on a red button).
 * Do not "simplify" the prefixes away.
 *
 * Mobile first: one column at 320px, no horizontal page overflow (the comparison table
 * scrolls inside its own wrapper), tap targets at least 44px. No url() and no JavaScript.
 */

.caf-app {
  --caf-red: #e11d2a;
  --caf-red-dark: #b91320;
  --caf-bg: #0a0a0b;
  --caf-ink: #16161a;
  --caf-body: #26262c;
  --caf-ink-muted: #55555c;
  --caf-paper: #f4f1ec;
  --caf-border: #e4dfd6;
  --caf-hair: #efeae1;
  --caf-green: #1d7a3a;
  --caf-font-display: "Oswald", "Arial Narrow", Arial, sans-serif;
  --caf-font-body: "Spectral", Georgia, "Times New Roman", serif;
  --caf-font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --caf-radius: 2px;
}

/* ============================================================== block roots */
.caf-app.caf-root {
  display: block;
  margin: 28px 0;
  color: var(--caf-body);
  font-family: var(--caf-font-ui);
  font-size: 15px;
  line-height: 1.5;
  text-align: left;
  letter-spacing: normal;
}
.caf-app *, .caf-app *::before, .caf-app *::after { box-sizing: border-box; }
.caf-app.caf-root p, .caf-app.caf-root dl, .caf-app.caf-root dd, .caf-app.caf-root figure { margin: 0; }
.caf-app.caf-root ul, .caf-app.caf-root ol { list-style: none; margin: 0; padding: 0; }
.caf-app.caf-root li { margin: 0; padding: 0; }
.caf-app.caf-root img { display: block; margin: 0; border-radius: 0; max-width: 100%; }
.caf-app.caf-root a { text-decoration: none; }
.caf-app a:focus-visible, .caf-app .caf-scroll:focus-visible, .caf-app summary:focus-visible { outline: 2px solid var(--caf-red); outline-offset: 2px; }

.caf-app .caf-disclosure { margin: 0 0 12px; font-size: 13px; line-height: 1.5; color: var(--caf-ink-muted); }
.caf-app .caf-disclosure a { color: var(--caf-red); text-decoration: underline; text-underline-offset: 2px; }
.caf-app.caf-disclosure-wrap { margin: 24px 0 -8px; }
.caf-app .caf-caption { margin: 0 0 8px; font-family: var(--caf-font-display); font-weight: 600; font-size: 18px; line-height: 1.25; color: var(--caf-ink); }

/* ====================================================================== buy */
.caf-app a.caf-buy {
  display: inline-flex; align-items: center; justify-content: center; text-align: center;
  min-height: 44px; min-width: 44px; padding: 10px 18px; margin: 0;
  font-family: var(--caf-font-ui); font-weight: 600; font-size: 15px; line-height: 1.2; white-space: nowrap;
  color: #fff !important; background: var(--caf-red); border: 1px solid var(--caf-red); border-radius: var(--caf-radius);
  text-decoration: none !important; cursor: pointer;
}
.caf-app a.caf-buy:hover, .caf-app a.caf-buy:focus { color: #fff !important; background: var(--caf-red-dark); border-color: var(--caf-red-dark); }
.caf-app a.caf-buy--alt { background: var(--caf-ink); border-color: var(--caf-ink); }
.caf-app a.caf-buy--alt:hover, .caf-app a.caf-buy--alt:focus { background: #000; border-color: #000; }

.caf-app .caf-badges { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; }
.caf-app .caf-badge { display: inline-block; padding: 3px 9px; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; white-space: normal; border: 1px solid var(--caf-ink); border-radius: 999px; color: #fff; background: var(--caf-ink); }

/* =================================================================== picks */
.caf-app .caf-picklist { border-top: 3px solid var(--caf-red); background: #fff; border-left: 1px solid var(--caf-border); border-right: 1px solid var(--caf-border); }
.caf-app.caf-root .caf-pickrow { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 12px 14px; border-bottom: 1px solid var(--caf-border); }
.caf-app .caf-pick-award { font-family: var(--caf-font-display); font-weight: 600; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--caf-red-dark); }
.caf-app a.caf-pick-title { display: flex; align-items: center; min-height: 44px; font-weight: 700; font-size: 16px; line-height: 1.3; color: var(--caf-ink); text-decoration: underline; text-decoration-color: var(--caf-red); text-underline-offset: 3px; }
.caf-app .caf-pick-best { font-size: 14px; color: var(--caf-body); }
.caf-app .caf-pick-price { font-size: 13px; font-weight: 600; color: var(--caf-ink-muted); }
.caf-app .caf-pick-act { display: block; margin-top: 8px; }

/* ==================================================================== cards */
.caf-app.caf-card {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 16px; margin: 22px 0;
  background: #fff; border: 1px solid var(--caf-border); border-top: 3px solid var(--caf-red); border-radius: var(--caf-radius);
  scroll-margin-top: 96px;
}
.caf-app.caf-root .caf-photo { width: 100%; max-width: 240px; aspect-ratio: 1 / 1; overflow: hidden; background: #fff; border: 1px solid var(--caf-hair); border-radius: var(--caf-radius); }
.caf-app.caf-root .caf-photo img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: contain; }
.caf-app .caf-card-main { min-width: 0; }
.caf-app .caf-title { margin: 0 0 4px; font-family: var(--caf-font-display); font-weight: 600; font-size: 22px; line-height: 1.2; letter-spacing: 0; text-transform: none; color: var(--caf-ink); overflow-wrap: anywhere; }
.caf-app .caf-byline { margin: 0 0 12px; font-size: 14px; color: var(--caf-ink-muted); }
.caf-app .caf-bestfor { margin: 0 0 10px; font-size: 15px; color: var(--caf-ink); }
.caf-app .caf-why { margin: 0 0 14px; font-family: var(--caf-font-body); font-size: 17px; line-height: 1.6; color: var(--caf-body); }
.caf-app .caf-specs { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px 16px; margin: 0 0 18px; padding: 0; }
.caf-app .caf-spec { margin: 0; min-width: 0; }
.caf-app .caf-spec dt { margin: 0; font-size: 11px; font-weight: 400; letter-spacing: .08em; text-transform: uppercase; color: var(--caf-ink-muted); }
.caf-app .caf-spec dd { margin: 0; font-size: 14px; font-weight: 600; color: var(--caf-ink); overflow-wrap: anywhere; }
.caf-app .caf-basis { display: block; font-size: 12px; font-weight: 400; color: var(--caf-ink-muted); }
.caf-app .caf-proscons { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px 20px; margin: 18px 0 14px; }
.caf-app .caf-pc { min-width: 0; }
.caf-app .caf-pc-title { margin: 0 0 4px; font-family: var(--caf-font-display); font-weight: 600; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--caf-ink); }
.caf-app.caf-root .caf-pros li, .caf-app.caf-root .caf-cons li { position: relative; padding: 0 0 4px 18px; font-size: 14px; line-height: 1.45; color: var(--caf-body); }
.caf-app.caf-root .caf-pros li::before { content: "+"; position: absolute; left: 0; top: 0; font-weight: 700; color: var(--caf-green); }
.caf-app.caf-root .caf-cons li::before { content: "\2212"; position: absolute; left: 0; top: 0; font-weight: 700; color: var(--caf-red-dark); }
.caf-app .caf-warning { margin: 0 0 14px; padding: 8px 12px; font-size: 14px; color: var(--caf-ink); background: var(--caf-paper); border-left: 3px solid var(--caf-red); }
.caf-app .caf-card-actions { margin: 0; }
.caf-app .caf-card-actions .caf-buy { width: 100%; }

/* ================================================================== compare */
.caf-app .caf-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--caf-border); background: #fff; }
.caf-app .caf-table { width: 100%; min-width: 1040px; margin: 0; border: 0; border-collapse: collapse; border-radius: 0; font-family: var(--caf-font-ui); font-size: 14px; background: #fff; }
.caf-app .caf-table caption { caption-side: top; padding: 10px 12px 8px; text-align: left; font-family: var(--caf-font-display); font-weight: 600; font-size: 18px; color: var(--caf-ink); }
.caf-app .caf-table thead th { padding: 10px 12px; text-align: left; white-space: nowrap; font-family: var(--caf-font-display); font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #fff; background: var(--caf-ink); border-bottom: 0; }
.caf-app .caf-table tbody th, .caf-app .caf-table tbody td { padding: 10px 12px; text-align: left; vertical-align: middle; white-space: nowrap; font-family: var(--caf-font-ui); font-size: 14px; font-weight: 400; letter-spacing: normal; text-transform: none; color: var(--caf-body); background: #fff; border-bottom: 1px solid var(--caf-hair); }
.caf-app .caf-table tbody th { font-weight: 600; color: var(--caf-ink); }
.caf-app .caf-table tbody tr:nth-child(even) th, .caf-app .caf-table tbody tr:nth-child(even) td { background: #faf8f4; }
.caf-app .caf-table tbody td.caf-wrap { min-width: 150px; white-space: normal; }
.caf-app .caf-sticky { position: sticky; left: 0; z-index: 1; min-width: 170px; box-shadow: 1px 0 0 var(--caf-border); }
.caf-app .caf-table thead .caf-sticky { z-index: 2; }
.caf-app .caf-table tbody th.caf-sticky { white-space: normal; }
.caf-app a.caf-name-link { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; color: var(--caf-ink); text-decoration: underline; text-decoration-color: var(--caf-red); text-underline-offset: 3px; }
.caf-app .caf-table a.caf-buy { min-height: 44px; padding: 8px 14px; font-size: 14px; }

/* ==================================================================== match */
.caf-app .caf-mtable { min-width: 0; border: 1px solid var(--caf-border); border-top: 3px solid var(--caf-red); }
.caf-app .caf-mtable tbody th.caf-mproblem { white-space: normal; font-family: var(--caf-font-display); font-weight: 600; font-size: 17px; line-height: 1.3; color: var(--caf-ink); }
.caf-app .caf-mtable tbody td { white-space: normal; vertical-align: top; }
.caf-app.caf-root .caf-mpicks li { margin: 0 0 8px; line-height: 1.35; }
.caf-app.caf-root .caf-mpicks li:last-child { margin-bottom: 0; }
.caf-app .caf-mtable tbody td.caf-mnote { font-size: 14px; line-height: 1.5; }

/* =================================================================== reddit */
.caf-app .caf-reddit-sub { margin: 0 0 12px; font-size: 14px; color: var(--caf-ink-muted); }
.caf-app .caf-rlist { border-top: 3px solid var(--caf-red); background: #fff; border-left: 1px solid var(--caf-border); border-right: 1px solid var(--caf-border); }
.caf-app.caf-root .caf-ritem { padding: 12px 14px; border-bottom: 1px solid var(--caf-border); }
.caf-app .caf-rhead { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; }
.caf-app .caf-rrank { flex: 0 0 28px; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; font-family: var(--caf-font-display); font-weight: 600; font-size: 14px; color: #fff; background: var(--caf-ink); border-radius: var(--caf-radius); }
.caf-app .caf-rname { flex: 1 1 140px; min-width: 0; font-weight: 700; font-size: 16px; line-height: 1.3; color: var(--caf-ink); overflow-wrap: anywhere; }
.caf-app a.caf-rname { display: flex; align-items: center; min-height: 44px; text-decoration: underline; text-decoration-color: var(--caf-red); text-underline-offset: 3px; }
.caf-app .caf-rcount { flex: 0 0 auto; font-size: 13px; font-weight: 600; color: var(--caf-ink-muted); white-space: nowrap; }
.caf-app .caf-bar { height: 6px; margin: 6px 0 8px; background: var(--caf-hair); border-radius: 3px; overflow: hidden; }
.caf-app .caf-bar-fill { display: block; height: 100%; background: var(--caf-red); }
.caf-app .caf-rtext { margin: 0; font-size: 14px; line-height: 1.5; color: var(--caf-body); }
.caf-app .caf-ractions { margin: 8px 0 0; }
.caf-app a.caf-buy--sm { min-height: 44px; padding: 8px 14px; font-size: 14px; }
.caf-app details.caf-rmore { margin-top: 12px; }
.caf-app details.caf-rmore > summary { display: flex; align-items: center; min-height: 44px; padding: 0 14px; font-weight: 600; font-size: 15px; color: var(--caf-ink); cursor: pointer; background: #fff; border: 1px solid var(--caf-border); border-radius: var(--caf-radius); }
.caf-app details.caf-rmore[open] > summary { border-bottom-color: var(--caf-red); }
.caf-app details.caf-rmore > .caf-rlist { border-top: 0; }

/* ==================================================================== howto */
.caf-app .caf-howto-desc { margin: 0 0 12px; font-family: var(--caf-font-body); font-size: 17px; line-height: 1.6; color: var(--caf-body); }
.caf-app .caf-howto-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px 16px; margin: 0 0 16px; padding: 12px 14px; background: var(--caf-paper); border-left: 3px solid var(--caf-red); }
.caf-app.caf-root .caf-howto-facts li { display: block; min-width: 0; }
.caf-app.caf-root .caf-howto-facts li.caf-fact-wide { grid-column: 1 / -1; }
.caf-app .caf-fact-k { display: block; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--caf-ink-muted); }
.caf-app .caf-fact-v { display: block; font-size: 14px; font-weight: 600; color: var(--caf-ink); }
.caf-app .caf-howto-steps { counter-reset: caf-step; }
.caf-app.caf-root .caf-howto-step { position: relative; counter-increment: caf-step; padding: 0 0 18px 46px; }
.caf-app.caf-root .caf-howto-step::before { content: counter(caf-step); position: absolute; left: 0; top: 0; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; font-family: var(--caf-font-display); font-weight: 600; font-size: 16px; color: #fff; background: var(--caf-ink); border-radius: var(--caf-radius); }
.caf-app.caf-root .caf-howto-step:not(:last-child)::after { content: ""; position: absolute; left: 15px; top: 36px; bottom: 4px; width: 2px; background: var(--caf-border); }
.caf-app .caf-howto-sname { margin: 0 0 2px; font-family: var(--caf-font-display); font-weight: 600; font-size: 19px; line-height: 1.3; color: var(--caf-ink); }
.caf-app .caf-howto-stext { margin: 0; font-family: var(--caf-font-body); font-size: 17px; line-height: 1.6; color: var(--caf-body); }

/* ====================================================================== faq */
.caf-app .caf-faq-q { margin: 26px 0 8px; font-family: var(--caf-font-display); font-weight: 600; font-size: 21px; line-height: 1.25; letter-spacing: 0; text-transform: none; color: var(--caf-ink); }
.caf-app .caf-faq-q:first-child { margin-top: 0; }
.caf-app .caf-faq-a { margin: 0 0 12px; font-family: var(--caf-font-body); font-size: 18px; line-height: 1.65; color: var(--caf-body); }

/* ============================================ phones: the match table stacks */
@media (max-width: 639px) {
  .caf-app .caf-mtable, .caf-app .caf-mtable tbody, .caf-app .caf-mtable tr, .caf-app .caf-mtable tbody th, .caf-app .caf-mtable tbody td { display: block; width: 100%; }
  .caf-app .caf-mtable caption { display: block; }
  .caf-app .caf-mtable thead { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .caf-app .caf-mtable tbody tr { padding: 12px 14px; border-bottom: 1px solid var(--caf-border); background: #fff; }
  .caf-app .caf-mtable tbody tr:nth-child(even) { background: #faf8f4; }
  .caf-app .caf-mtable tbody th, .caf-app .caf-mtable tbody td, .caf-app .caf-mtable tbody tr:nth-child(even) th, .caf-app .caf-mtable tbody tr:nth-child(even) td { padding: 0; border: 0; background: transparent; }
  .caf-app .caf-mtable tbody td { margin-top: 6px; }
  .caf-app .caf-mtable tbody td::before { content: attr(data-label); display: block; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--caf-ink-muted); }
}

/* ================================================================== wider */
@media (min-width: 640px) {
  .caf-app .caf-pickrow { grid-template-columns: minmax(0, 1fr) auto; column-gap: 20px; }
  .caf-app .caf-pickrow > * { grid-column: 1; }
  .caf-app .caf-pickrow > .caf-pick-act { grid-column: 2; grid-row: 1 / span 4; align-self: center; margin-top: 0; }
  .caf-app.caf-card { grid-template-columns: 200px minmax(0, 1fr); gap: 24px; padding: 20px; }
  .caf-app.caf-card.caf-card--noimg { grid-template-columns: minmax(0, 1fr); }
  .caf-app.caf-root .caf-photo { width: 200px; }
  .caf-app .caf-card-actions .caf-buy { width: auto; }
  .caf-app .caf-mtable { min-width: 0; }
  .caf-app .caf-mtable tbody th.caf-mproblem { width: 28%; }
  .caf-app .caf-rname { flex-basis: 240px; }
}