/*
 * Cup Holders -- tokens and layout for the article blocks.
 *
 * Every block root carries "cch-app cch-root" and every rule is scoped under .cch-app. The
 * theme styles .tg-content h2/h3/ul/ol/li/a/img/figure/figcaption/table/th/td for prose; those
 * rules would otherwise leak in (list bullets, red underlined links, 24px image margins, striped
 * table rows, 20px cell padding). `.cch-app .x` (two classes) beats `.tg-content x` on
 * specificity, which is what keeps the two apart, and container-query rules need the prefix too.
 * 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(), no webfont (Oswald and Spectral
 * come from the theme and are inherited by name).
 */

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

/* ============================================================== block roots */
.cch-app.cch-root {
  display: block;
  margin: 28px 0;
  color: var(--cch-body);
  font-family: var(--cch-font-ui);
  font-size: 15px;
  line-height: 1.5;
  text-align: left;
  letter-spacing: normal;
}
.cch-app *, .cch-app *::before, .cch-app *::after { box-sizing: border-box; }
.cch-app p { margin: 0; }
.cch-app ul, .cch-app ol { list-style: none; margin: 0; padding: 0; }
.cch-app li { margin: 0; }
.cch-app img { display: block; margin: 0; border-radius: 0; max-width: 100%; height: auto; }
.cch-app a { text-decoration: none; }
.cch-app a:focus-visible, .cch-app .cch-scroll:focus-visible, .cch-app summary:focus-visible, .cch-app .cch-input:focus-visible { outline: 2px solid var(--cch-red); outline-offset: 2px; }
.cch-app .cch-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

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

/* ====================================================================== buy */
.cch-app a.cch-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(--cch-font-ui); font-weight: 600; font-size: 15px; line-height: 1.2; white-space: nowrap;
  color: #fff !important; background: var(--cch-red); border: 1px solid var(--cch-red); border-radius: var(--cch-radius);
  text-decoration: none !important; cursor: pointer;
}
.cch-app a.cch-buy:hover, .cch-app a.cch-buy:focus { color: #fff !important; background: var(--cch-red-dark); border-color: var(--cch-red-dark); }
.cch-app a.cch-buy--alt { color: var(--cch-ink) !important; background: #fff; border-color: var(--cch-ink); }
.cch-app a.cch-buy--alt:hover, .cch-app a.cch-buy--alt:focus { color: #fff !important; background: var(--cch-ink); border-color: var(--cch-ink); }

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

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

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

/* ====================================================================== fit */
.cch-app [hidden] { display: none; }
.cch-app .cch-fit-intro { margin: 0 0 12px; font-size: 15px; }
.cch-app .cch-fit-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin: 0 0 14px; padding: 14px; background: var(--cch-paper); border: 1px solid var(--cch-border); border-top: 3px solid var(--cch-red); }
.cch-app .cch-field { min-width: 0; }
.cch-app .cch-field label { display: block; margin: 0 0 4px; font-size: 13px; font-weight: 600; color: var(--cch-ink); }
.cch-app .cch-input { display: block; width: 100%; min-height: 44px; margin: 0; padding: 8px 12px; font-family: var(--cch-font-ui); font-size: 16px; line-height: 1.2; color: var(--cch-ink); background: #fff; border: 1px solid #b8b2a6; border-radius: var(--cch-radius); }
.cch-app .cch-input:disabled { color: var(--cch-muted); background: #ebe7df; }
.cch-app select.cch-select { appearance: auto; -webkit-appearance: menulist; height: 44px; }
.cch-app .cch-custom { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin: 0; padding: 10px 12px 12px; background: #fff; border: 1px solid var(--cch-border); }
.cch-app .cch-custom-title { margin: 0; font-family: var(--cch-font-display); font-weight: 600; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--cch-muted); }
.cch-app .cch-check { display: flex; align-items: center; gap: 10px; min-height: 44px; margin: 0; font-size: 14px; font-weight: 600; color: var(--cch-ink); cursor: pointer; }
.cch-app .cch-check input { flex: none; width: 22px; height: 22px; margin: 0; accent-color: var(--cch-red); }
.cch-app .cch-check input:disabled + span { color: var(--cch-muted); }
.cch-app .cch-units { display: flex; gap: 8px; margin: 0; padding: 0; border: 0; min-width: 0; }
.cch-app .cch-unit { position: relative; display: inline-flex; margin: 0; }
.cch-app .cch-unit input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.cch-app .cch-unit span { display: inline-flex; align-items: center; justify-content: center; min-width: 64px; min-height: 44px; padding: 0 16px; font-weight: 600; color: var(--cch-ink); background: #fff; border: 1px solid #b8b2a6; border-radius: var(--cch-radius); }
.cch-app .cch-unit input:checked + span { color: #fff; background: var(--cch-ink); border-color: var(--cch-ink); }
.cch-app .cch-unit input:focus-visible + span { outline: 2px solid var(--cch-red); outline-offset: 2px; }
/* The box reserves the height of the tallest outcome (verdict with its two notes, summary, two group headings, one 60px row per product) before any script runs. */
.cch-app .cch-fit-result { min-height: calc(var(--cch-n, 6) * 60px + 340px); }
.cch-app .cch-fit-prompt { margin: 0 0 8px; font-size: 14px; color: var(--cch-muted); }
.cch-app .cch-fit-err { margin: 0 0 8px; font-size: 14px; font-weight: 600; color: var(--cch-red-dark); }
.cch-app .cch-fit-table { width: 100%; margin: 0; border: 1px solid var(--cch-border); border-collapse: collapse; border-radius: 0; table-layout: fixed; font-size: 13px; background: #fff; }
.cch-app .cch-fit-table thead th { height: 36px; padding: 0 8px; text-align: left; font-family: var(--cch-font-display); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #fff; background: var(--cch-ink); border: 0; }
.cch-app .cch-fit-table thead th:first-child { width: 40%; }
.cch-app .cch-fit-table tbody th, .cch-app .cch-fit-table tbody td { height: 60px; padding: 0 8px; vertical-align: middle; text-align: left; font-family: var(--cch-font-ui); font-size: 13px; font-weight: 400; letter-spacing: normal; text-transform: none; line-height: 18px; color: var(--cch-body); background: #fff; border: 0; border-bottom: 1px solid var(--cch-hair); overflow: hidden; }
.cch-app .cch-fit-table tbody td .cch-cm { font-size: 12px; line-height: 16px; }
.cch-app a.cch-fit-link, .cch-app a.cch-fit-row { display: flex; flex-direction: column; justify-content: center; min-width: 0; height: 60px; color: var(--cch-ink); text-decoration: none; overflow: hidden; }
.cch-app .cch-fit-table a.cch-fit-link { margin: 0 -8px; padding: 0 8px; }
.cch-app .cch-fit-n { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; font-weight: 700; line-height: 22px; text-decoration: underline; text-decoration-color: var(--cch-red); text-underline-offset: 3px; }
.cch-app .cch-fit-s { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 400; line-height: 18px; color: var(--cch-muted); }
.cch-app .cch-fit-verdict { margin: 0 0 8px; padding: 10px 14px; background: #fff; border: 1px solid var(--cch-border); border-left: 6px solid var(--cch-ink); }
.cch-app .cch-fit-verdict[data-cch-verdict="fits"] { border-left-color: var(--cch-green); }
.cch-app .cch-fit-verdict[data-cch-verdict="snug"] { border-left-color: var(--cch-amber); }
.cch-app .cch-fit-verdict[data-cch-verdict="too-wide"] { border-left-color: var(--cch-red-dark); }
.cch-app .cch-fit-vs { margin: 0; font-size: 15px; font-weight: 600; line-height: 1.45; color: var(--cch-ink); }
.cch-app .cch-fit-note { margin: 6px 0 0; font-size: 14px; line-height: 1.45; color: var(--cch-muted); }
.cch-app .cch-fit-sum { margin: 0 0 6px; font-size: 14px; font-weight: 600; color: var(--cch-ink); }
.cch-app .cch-fit-gh { margin: 8px 0 0; padding: 6px 10px; font-family: var(--cch-font-display); font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; line-height: 20px; color: #fff; background: var(--cch-ink); }
.cch-app .cch-fit-gh--fit { background: var(--cch-green); }
.cch-app .cch-fit-gh--nomax { background: var(--cch-amber); }
.cch-app .cch-fit-list { background: #fff; border: 1px solid var(--cch-border); border-top: 0; }
.cch-app .cch-fit-list li { margin: 0; border-bottom: 1px solid var(--cch-hair); }
.cch-app .cch-fit-row { padding: 0 10px; }

/* ================================================================= bottles */
.cch-app .cch-bottles-note { margin: 0 0 10px; font-size: 14px; color: var(--cch-muted); }
.cch-app .cch-table--bottles { min-width: 820px; }
.cch-app a.cch-src { font-weight: 400; }

/* =================================================================== reddit */
.cch-app .cch-reddit-sub { margin: 0 0 12px; font-size: 14px; color: var(--cch-muted); }
.cch-app .cch-rlist { margin: 0 0 12px; padding: 0; border-top: 3px solid var(--cch-red); background: #fff; border-left: 1px solid var(--cch-border); border-right: 1px solid var(--cch-border); }
.cch-app .cch-ritem { margin: 0; padding: 12px 14px; border-bottom: 1px solid var(--cch-border); }
.cch-app .cch-rhead { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0 0 6px; }
.cch-app .cch-rrank { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; font-size: 13px; font-weight: 700; color: #fff; background: var(--cch-ink); border-radius: 50%; }
.cch-app a.cch-rname, .cch-app .cch-rname-plain { flex: 1 1 150px; min-width: 0; font-weight: 700; font-size: 16px; line-height: 1.3; color: var(--cch-ink); }
.cch-app a.cch-rname { display: inline-flex; align-items: center; min-height: 44px; text-decoration: underline; text-decoration-color: var(--cch-red); text-underline-offset: 3px; }
.cch-app .cch-rtag, .cch-app .cch-rscope { display: inline-block; padding: 2px 8px; font-size: 12px; font-weight: 600; letter-spacing: .03em; color: var(--cch-muted); background: #fff; border: 1px solid var(--cch-border); border-radius: 999px; }
.cch-app .cch-rcount { font-size: 13px; color: var(--cch-muted); }
.cch-app .cch-bar { height: 6px; margin: 0 0 8px; background: var(--cch-hair); }
.cch-app .cch-bar-fill { display: block; height: 100%; background: var(--cch-red); }
.cch-app .cch-rtext, .cch-app .cch-rnote { margin: 0 0 8px; font-size: 15px; line-height: 1.5; }
.cch-app .cch-rnote { font-size: 13px; color: var(--cch-muted); }
.cch-app .cch-ractions { margin: 0; }
.cch-app a.cch-link { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; color: var(--cch-ink); text-decoration: underline; text-decoration-color: var(--cch-red); text-underline-offset: 3px; }
.cch-app details > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding: 8px 14px; cursor: pointer; list-style: none; font-weight: 600; color: var(--cch-ink); background: #fff; border: 1px solid var(--cch-border); }
.cch-app details > summary::-webkit-details-marker { display: none; }
.cch-app details > summary::after { content: "+"; flex: none; font-size: 22px; line-height: 1; color: var(--cch-red); }
.cch-app details[open] > summary::after { content: "\2013"; }
.cch-app .cch-rmore { margin: 0 0 12px; }
.cch-app .cch-rmore .cch-rlist { margin: 0; border-top: 0; }
.cch-app .cch-rtips-title { margin: 18px 0 8px; font-family: var(--cch-font-display); font-weight: 600; font-size: 18px; color: var(--cch-ink); }
.cch-app .cch-rtips li { margin: 0 0 6px; padding-left: 14px; position: relative; font-size: 15px; }
.cch-app .cch-rtips li::before { content: ""; position: absolute; left: 0; top: 9px; width: 6px; height: 6px; background: var(--cch-red); }

/* =================================================================== how-to */
.cch-app .cch-howto-desc { margin: 0 0 12px; font-family: var(--cch-font-body); font-size: 17px; line-height: 1.6; }
.cch-app .cch-howto-steps { counter-reset: cch-step; }
.cch-app .cch-howto-step { position: relative; margin: 0 0 12px; padding: 12px 14px 12px 52px; background: #fff; border: 1px solid var(--cch-border); counter-increment: cch-step; scroll-margin-top: 96px; }
.cch-app .cch-howto-step::before { content: counter(cch-step); position: absolute; left: 12px; top: 12px; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; font-weight: 700; color: #fff; background: var(--cch-red); border-radius: 50%; }
.cch-app .cch-howto-sname { margin: 0 0 2px; font-family: var(--cch-font-display); font-weight: 600; font-size: 17px; color: var(--cch-ink); }
.cch-app .cch-howto-stext { font-family: var(--cch-font-body); font-size: 16px; line-height: 1.55; }

/* ====================================================================== faq */
.cch-app .cch-faq-item { margin: 0 0 8px; background: #fff; border: 1px solid var(--cch-border); }
.cch-app .cch-faq-item > summary { border: 0; font-family: var(--cch-font-display); font-size: 18px; font-weight: 600; line-height: 1.3; }
.cch-app .cch-faq-a { padding: 0 14px 12px; font-family: var(--cch-font-body); font-size: 17px; line-height: 1.65; color: var(--cch-body); }
.cch-app .cch-faq-a p { margin: 0 0 8px; }

/* ===================================================== article figures */
.cch-app.cch-figure { margin: 24px 0; }
.cch-app.cch-figure img { width: 100%; height: auto; border-radius: var(--cch-radius); }
.cch-app.cch-figure figcaption { margin: 8px 0 0; font-family: var(--cch-font-display); font-size: 13px; letter-spacing: .04em; color: var(--cch-muted); }

/* ================================================================== wider */
@media (min-width: 640px) {
  .cch-app .cch-pickrow { grid-template-columns: 150px minmax(0, 1.2fr) minmax(0, 1.6fr) auto; align-items: center; gap: 4px 16px; }
  .cch-app .cch-pick-act { margin-top: 0; }
  .cch-app.cch-card { grid-template-columns: 220px minmax(0, 1fr); gap: 24px; padding: 20px; }
  .cch-app .cch-fig { width: 220px; }
  .cch-app .cch-proscons { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .cch-app .cch-card-actions .cch-buy { width: auto; }
  .cch-app .cch-fit-form { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; }
  .cch-app .cch-custom, .cch-app .cch-units { grid-column: 1 / -1; }
  .cch-app .cch-custom { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; }
  .cch-app .cch-custom-title, .cch-app .cch-custom .cch-check { grid-column: 1 / -1; }
}