/*
Theme Name: Redrecommend
Description: Community-informed product recommendations, maintained by editors in WordPress.
Version: 2.0.0
Requires at least: 6.4
Requires PHP: 8.0
Text Domain: redrecommend
*/

/* =========================================================================
   1. Tokens
   Values measured from the reference implementation at 1440x900.
   ====================================================================== */

:root {
  --rr-bg:            #f8f5f2;
  --rr-card:          #ffffff;
  --rr-surface-muted: #f9f8f5;
  --rr-surface-soft:  #fbfaf9;
  --rr-track:         #efecea;
  --rr-border:        #e6e2db;
  --rr-border-strong: #e5e5e5;

  --rr-ink:      #141414;
  --rr-body:     #5c5c5c;
  --rr-muted:    #8a8a8a;
  --rr-base:     #0a0a0a;

  --rr-accent:   #ff4400;
  --rr-accent-tint: rgba(255, 68, 0, .07);
  --rr-positive: #2eb265;
  --rr-neutral:  #f2a921;
  --rr-negative: #f5702e;
  --rr-dark:     #171717;

  --rr-container: 1200px;
  --rr-gutter:    16px;
  --rr-radius-sm: 6px;
  --rr-radius:    10px;
  --rr-radius-lg: 12px;
  --rr-radius-xl: 14px;

  --rr-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --rr-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --rr-header-h: 80px;
}

/* =========================================================================
   2. Base
   ====================================================================== */

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--rr-bg);
  color: var(--rr-base);
  font-family: var(--rr-font);
  font-size: 16px;
  line-height: 1.5;
}

/*
 * Keeps the footer near the bottom of the window on short pages (empty states, 404).
 * Deliberately NOT `display:flex` on body: a column flex container sizes its items against
 * their content on the cross axis, which let the horizontal scrollers push the page wider
 * than the viewport on mobile.
 */
body > main { min-height: calc(100vh - var(--rr-header-h) - 90px); }

img { max-width: 100%; height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }

/*
 * `hidden` is the single source of truth for collapsed content. Component rules that set a
 * `display` value (the overlay's flex, the menus, the rows) would otherwise override the
 * attribute's default and leave an invisible element still occupying space and taking clicks.
 */
[hidden] { display: none !important; }

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--rr-accent);
  outline-offset: 2px;
  border-radius: 3px;
}

.screen-reader-text {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

.icon { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Layout container: 1200px max with 16px inner gutters -> 1168px of content. */
.rr-wrap, main.ranking, main.prose, main.simple, main.home, main.rr-entity {
  max-width: var(--rr-container);
  margin-inline: auto;
  padding: 0 var(--rr-gutter) 48px;
}

.eyebrow {
  margin: 0 0 4px;
  font-size: 11.52px; font-weight: 600; line-height: 17.28px;
  text-transform: uppercase; letter-spacing: .05em; color: var(--rr-muted);
}

.rr-breadcrumb {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 6px;
  margin: 16px 0 8px; font-size: 12.8px; line-height: 1.4; color: var(--rr-muted);
}
/* Each crumb and separator is its own flex item so a wrap breaks between items, never inside one.
   flex-shrink:0 stops flex from squeezing a crumb narrower than its text, which is what was
   forcing individual words to split mid-word on narrow viewports; overflow-wrap/word-break are
   pinned to "normal" so no ancestor rule can reintroduce a mid-word break. */
.rr-breadcrumb a, .rr-breadcrumb span {
  white-space: nowrap; overflow-wrap: normal; word-break: normal; flex-shrink: 0;
}
.rr-breadcrumb a { text-decoration: none; }
.rr-breadcrumb a:hover { color: var(--rr-accent); }
.rr-breadcrumb .sep { color: var(--rr-muted); }
.rr-breadcrumb [aria-current="page"] { white-space: normal; overflow-wrap: normal; word-break: normal; flex-shrink: 1; min-width: 0; }

/* =========================================================================
   3. Header and footer
   The header is full-bleed with a 20px gutter; the search sits flush right.
   ====================================================================== */

.site-header {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  height: var(--rr-header-h);
  padding: 0 20px;
  background: var(--rr-bg);
}
.site-header .logo { display: flex; align-items: center; gap: 8px; text-decoration: none; }
.site-header .logo img { width: auto; height: 56px; object-fit: contain; }

.site-nav { display: flex; gap: 24px; font-size: 18px; margin-left: auto; }
.site-nav a { text-decoration: none; color: var(--rr-body); }

/*
 * wp_nav_menu emits <li> items. Without an explicit list reset the browser draws the markers, so
 * an assigned menu rendered a row of bullets between the links while the hard-coded fallback
 * (bare <a>) looked correct. The <ul> carries the same flex layout as the nav around it, so both
 * paths render identically whether or not the client has assigned a menu in WP Admin.
 */
.rr-menu { display: flex; flex-wrap: wrap; align-items: center; margin: 0; padding: 0; list-style: none; }
.rr-menu li { list-style: none; }
.site-nav .rr-menu { gap: 24px; }
.site-footer .rr-menu { justify-content: center; gap: 8px 16px; }
.site-nav a:hover { color: var(--rr-accent); }

.suggestions {
  position: absolute; z-index: 40; top: calc(100% + 4px); left: 0; right: 0;
  background: var(--rr-card); border: 1px solid var(--rr-border);
  border-radius: var(--rr-radius); box-shadow: 0 8px 24px rgba(0,0,0,.10);
  max-height: 320px; overflow-y: auto;
}
.suggestions a { display: flex; align-items: center; gap: 8px; padding: 8px 12px; font-size: 14px; text-decoration: none; }
.suggestions a:hover, .suggestions a.is-active { background: var(--rr-surface-muted); }
.suggestions a img { flex: none; width: 28px; height: 28px; object-fit: contain; border-radius: 4px; }
.suggestions a span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.suggestions small { flex: none; margin-left: auto; color: var(--rr-muted); font-size: 11px; }
.suggestions p { margin: 0; padding: 10px 12px; color: var(--rr-muted); font-size: 13px; }

.site-footer {
  border-top: 1px solid var(--rr-border);
  background: var(--rr-surface-muted);
  padding: 12px 16px;
  text-align: center;
}
.site-footer nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 16px; row-gap: 8px; margin-bottom: 8px; }
.site-footer a, .site-footer small { font-size: 12px; color: var(--rr-muted); text-decoration: none; }
.site-footer a:hover { color: var(--rr-accent); }

/* =========================================================================
   4. Category page - intro
   ====================================================================== */

main.ranking { padding-top: 16px; }

.intro { margin-bottom: 24px; }
.intro h1 {
  margin: 0 0 8px;
  font-family: var(--rr-mono);
  font-size: clamp(1.75rem, 4vw, 2.35rem);
  font-weight: 700; line-height: 1.25; letter-spacing: -.025em; color: var(--rr-ink);
}
/* "Top" stays ink; the category name carries the accent. */
.intro h1 .rr-category-name { color: var(--rr-accent); }

.intro-meta {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 4px 16px;
  font-size: 14px; color: var(--rr-body);
}
.intro-meta strong { color: var(--rr-ink); font-weight: 600; }
.intro-sub { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 12px; color: var(--rr-muted); }
.intro-body { margin: 12px 0 0; font-size: 15px; color: var(--rr-body); max-width: 72ch; }
.intro-body p { margin: 0 0 8px; }

.how {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 0; border: 0; background: none; cursor: pointer;
  font-size: 12px; color: var(--rr-muted); text-decoration: underline;
}
.how:hover { color: var(--rr-accent); }

/* =========================================================================
   5. Evidence card
   Sized to its content rather than the full column.
   ====================================================================== */

.evidence {
  width: fit-content; max-width: 100%;
  margin: 0 0 32px;
  padding: 16px;
  background: var(--rr-card);
  border: 1px solid var(--rr-border);
  border-radius: var(--rr-radius-xl);
}
.evidence h2 {
  margin: 0 0 8px;
  font-size: 12.8px; font-weight: 600; line-height: 19.2px;
  text-transform: uppercase; letter-spacing: .05em; color: var(--rr-muted);
}
.rr-insight {
  display: flex; align-items: baseline; gap: 6px;
  min-height: 24px; margin-bottom: 4px;
  font-size: 14px; line-height: 20px; color: var(--rr-body);
}
.rr-insight .discussion-icon { flex: none; width: 14px; height: 14px; color: var(--rr-muted); transform: translateY(2px); }
.rr-insight strong { font-weight: 500; color: var(--rr-muted); }
.rr-insight a { color: var(--rr-body); text-decoration: underline; text-underline-offset: 2px; }
.rr-insight a:hover { color: var(--rr-accent); }

/* The count sits at the foot of the card, not above the list. */
.evidence-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin-top: 8px;
  font-size: 12px; line-height: 18px; color: var(--rr-muted);
}
.evidence-foot .rr-toggle {
  padding: 0; border: 0; background: none; cursor: pointer;
  font-size: 12px; color: var(--rr-body); text-decoration: underline;
}
.evidence-foot .rr-toggle:hover { color: var(--rr-accent); }

/* =========================================================================
   6. Filter bar
   ====================================================================== */

.model-section { margin: 0; }

.filter-bar {
  position: sticky; top: 0; z-index: 30;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  min-height: 56px; padding: 12px 0;
  background: var(--rr-bg);
}
.filter-bar h2 {
  margin: 0 auto 0 0;
  font-family: var(--rr-mono); font-size: 20px; font-weight: 600; color: var(--rr-ink);
}

.filter { position: relative; }
.filter > button, .chip {
  display: inline-flex; align-items: center; gap: 4px;
  height: 32px; padding: 0 12px;
  font-size: 12px; font-weight: 500; line-height: 1; white-space: nowrap;
  color: var(--rr-base); background: var(--rr-card);
  border: 1px solid var(--rr-border); border-radius: 999px;
  cursor: pointer;
}
.filter > button:hover { border-color: var(--rr-accent); color: var(--rr-accent); }
.filter > button[aria-expanded="true"] { border-color: var(--rr-accent); }
.filter.is-active > button { border-color: var(--rr-accent); color: var(--rr-accent); background: var(--rr-accent-tint); }
.chip-chevron { width: 12px; height: 12px; transition: transform .15s; }
.filter > button[aria-expanded="true"] .chip-chevron { transform: rotate(180deg); }

.filter .menu {
  position: absolute; z-index: 35; top: calc(100% + 6px); left: 0;
  min-width: 200px; padding: 4px;
  background: var(--rr-card); border: 1px solid var(--rr-border);
  border-radius: var(--rr-radius); box-shadow: 0 8px 24px rgba(0,0,0,.10);
}
.filter .menu a {
  display: block; padding: 7px 10px; border-radius: var(--rr-radius-sm);
  font-size: 13px; color: var(--rr-body); text-decoration: none;
}
.filter .menu a:hover, .filter .menu a:focus-visible { background: var(--rr-surface-muted); color: var(--rr-ink); }
.filter .menu a[aria-current="true"] { color: var(--rr-accent); font-weight: 600; }

.active-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 12px; }
.active-filters .chip { cursor: pointer; }
.active-filters .chip-remove { color: var(--rr-muted); font-size: 14px; line-height: 1; }
.active-filters .clear-all { color: var(--rr-body); text-decoration: underline; }

.product-search { display: block; position: relative; margin: 0 0 8px; }
.product-search input {
  width: 100%; max-width: 320px; height: 34px; padding: 0 12px;
  font-size: 13px; background: var(--rr-card);
  border: 1px solid var(--rr-border); border-radius: var(--rr-radius-sm);
}
#product-search-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; padding: 0;
  background: var(--rr-card); border: 1px solid var(--rr-border); border-radius: 999px;
  color: var(--rr-body); cursor: pointer;
}
#product-search-toggle:hover { color: var(--rr-accent); border-color: var(--rr-accent); }

/* =========================================================================
   7. Ranking workspace
   ====================================================================== */

.ranking-workspace {
  display: grid;
  grid-template-columns: minmax(300px, 420px) 1fr;
  align-items: start;
  gap: 20px;
  margin-top: 4px;
}

.ranking-list {
  display: flex; flex-direction: column;
  background: var(--rr-card);
  border: 1px solid var(--rr-border);
  border-radius: var(--rr-radius-lg);
  overflow: hidden;
}
.rank-label {
  margin: 0; padding: 16px 24px 8px;
  font-size: 12.8px; font-weight: 600; line-height: 19.2px;
  text-transform: uppercase; letter-spacing: .05em; color: var(--rr-body);
}

/* ---- product row ---- */

.model {
  position: relative; display: grid; grid-template-columns: auto 1fr;
  column-gap: 12px; width: 100%;
  padding: 12px 16px 2px;
  background: none; border: 0; text-align: left; cursor: pointer;
}
.model.is-selected {
  background: linear-gradient(to right, var(--rr-accent-tint), transparent);
  box-shadow: inset 3px 0 0 var(--rr-accent);
}
.model:hover:not(.is-selected) { background: var(--rr-surface-soft); }

.model .rank {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; flex: none;
  font-size: 14px; font-weight: 600; font-style: normal;
  color: var(--rr-base);
  border: 1px solid var(--rr-border); border-radius: 999px;
}
.model.is-selected .rank { border-color: var(--rr-accent); background: var(--rr-card); }

.model-copy { min-width: 0; }

/* The thumbnail floats so the text wraps around it, as in the reference. */
.model .thumb {
  float: right; margin: 0 0 8px 8px;
  width: 72px; height: 72px; flex: none;
  display: block; overflow: hidden;
  background: #ededed;
  border: 1px solid var(--rr-border); border-radius: 8px;
}
.model .thumb img { width: 100%; height: 100%; padding: 4px; object-fit: contain; background: var(--rr-card); }
.model .thumb-fallback {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
  font-size: 22px; font-weight: 700; color: var(--rr-muted); background: var(--rr-card);
}

.model-copy small { display: block; margin-bottom: 2px; font-size: 12.8px; font-weight: 500; line-height: 19.2px; color: var(--rr-body); }
.model-copy h3 { margin: 0 0 4px; font-size: 15.2px; font-weight: 700; line-height: 22.8px; color: var(--rr-ink); }
.model-copy h3 a { text-decoration: none; }
.model-copy h3 a:hover { color: var(--rr-accent); }

.sentiment-track {
  display: flex; overflow: hidden;
  height: 8px; margin: 8px 0 4px;
  background: var(--rr-surface-muted); border-radius: 4px;
}
.sentiment-track i { background: var(--rr-positive); }
.sentiment-track span { background: var(--rr-neutral); }
.sentiment-track em { background: var(--rr-negative); }

.sentiment { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: 12.48px; line-height: 18.72px; color: var(--rr-body); }
.sentiment b { font-weight: 600; color: var(--rr-ink); }
.sentiment small { color: var(--rr-body); }
.sentiment .rr-unknown { color: var(--rr-muted); font-style: italic; }

.model-copy > p { margin: 4px 0 0; font-size: 12.8px; line-height: 17.6px; color: var(--rr-muted); }

.model .shop {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 14px 0;
  font-size: 14px; line-height: 20px; color: var(--rr-body); text-decoration: none;
}
.model .shop:hover { color: var(--rr-accent); }
.icon-external { width: 12px; height: 12px; }

/* Explicit control for the desktop sidebar preview; the row itself navigates on click.
   No side panel exists below 901px, so the control is hidden there. */
.model .preview {
  display: none; align-self: flex-start; margin: 4px 0 0; padding: 4px 10px;
  font-size: 11.52px; font-weight: 600; color: var(--rr-body);
  background: var(--rr-surface-muted); border: 1px solid var(--rr-border); border-radius: 999px;
  cursor: pointer;
}
.model .preview:hover { color: var(--rr-accent); border-color: var(--rr-accent); }
@media (min-width: 901px) {
  .model .preview { display: inline-flex; }
}

.show-more {
  width: 100%; padding: 24px 12px;
  background: none; border: 0; border-top: 1px solid var(--rr-border);
  font-size: 14.08px; font-weight: 500; color: var(--rr-body); cursor: pointer;
}
.show-more:hover { color: var(--rr-accent); }

.rr-no-results { padding: 24px; text-align: center; color: var(--rr-muted); font-size: 14px; }

/* =========================================================================
   8. Analysis panel
   ====================================================================== */

.rank-analysis {
  position: sticky; top: 72px;
  padding: 24px 0;
  background: var(--rr-card);
  border: 1px solid var(--rr-border);
  border-radius: var(--rr-radius-lg);
}
.analysis-inner { display: flex; flex-direction: column; gap: 16px; padding: 0 20px; }

.analysis-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.analysis-head-text { min-width: 0; flex: 1; }
.rr-analysis-rankline { margin: 0 0 4px; font-size: 11.52px; font-weight: 500; line-height: 17.28px; letter-spacing: .02em; color: var(--rr-muted); }
.rr-analysis-brand { margin: 0; font-size: 15.2px; font-weight: 500; line-height: 22.8px; color: var(--rr-body); }
.rr-analysis-name { margin: 0; font-family: var(--rr-mono); font-size: 24px; font-weight: 600; line-height: 30px; color: var(--rr-ink); }

.analysis-visual {
  flex: none; width: 132px; height: 132px; max-width: 34vw;
  overflow: hidden; background: #ededed;
  border: 1px solid var(--rr-border); border-radius: var(--rr-radius);
}
.analysis-visual img { width: 100%; height: 100%; padding: 8px; object-fit: contain; background: var(--rr-card); }
.analysis-visual:empty { background: var(--rr-surface-muted); }

.rr-analysis-summary { margin: 0; font-size: 14px; line-height: 21px; color: var(--rr-body); }

.rr-score-card {
  padding: 16px;
  background: linear-gradient(to bottom, var(--rr-surface-soft), var(--rr-card));
  border: 1px solid var(--rr-border); border-radius: var(--rr-radius-lg);
}
.score-head {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px;
  margin-bottom: 8px;
  font-size: 11.52px; font-weight: 600; line-height: 17.28px;
  text-transform: uppercase; letter-spacing: .025em; color: var(--rr-muted);
}
.score-head .how { text-transform: none; letter-spacing: 0; }

.score-rows { display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 2px 4px; }
.score-rows .icon { width: 18px; height: 18px; }
.score-rows b {
  font-family: var(--rr-mono); font-size: 14px; font-weight: 600; line-height: 20px;
  font-variant-numeric: tabular-nums; text-align: right; min-width: 2.4em;
}
.score-rows .bar { height: 12px; overflow: hidden; background: var(--rr-track); border-radius: 999px; }
.score-rows .bar > span { display: block; height: 100%; transition: width .22s ease-in-out; }
.score-rows .positive .icon, .score-rows .positive b { color: var(--rr-positive); }
.score-rows .neutral  .icon, .score-rows .neutral  b { color: var(--rr-neutral); }
.score-rows .negative .icon, .score-rows .negative b { color: var(--rr-negative); }
.score-rows .positive .bar > span { background: var(--rr-positive); }
.score-rows .neutral  .bar > span { background: var(--rr-neutral); }
.score-rows .negative .bar > span { background: var(--rr-negative); }
/* Row cells sit on one grid line each. */
.score-rows > .icon { grid-column: 1; }
.score-rows > b     { grid-column: 2; }
.score-rows > .bar  { grid-column: 3; }

.rr-percent-only { display: flex; align-items: center; gap: 8px; }
.rr-percent-only .bar { flex: 1; height: 12px; overflow: hidden; background: var(--rr-track); border-radius: 999px; }
.rr-percent-only .bar > span { display: block; height: 100%; background: var(--rr-positive); }
.rr-percent-only b { font-family: var(--rr-mono); font-size: 14px; font-weight: 600; color: var(--rr-positive); }
.rr-sentiment-note { margin: 8px 0 0; font-size: 11.52px; line-height: 17px; color: var(--rr-muted); }

.pros-cons { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.pros-cons > div {
  padding: 12px 16px;
  background: var(--rr-surface-soft);
  border: 1px solid var(--rr-border); border-radius: 8px;
}
.pros-cons h3 {
  margin: 0 0 8px;
  font-size: 11.52px; font-weight: 600; line-height: 17.28px;
  text-transform: uppercase; letter-spacing: .05em; color: var(--rr-muted);
}
.pros-cons p { display: flex; align-items: flex-start; gap: 4px; margin: 0 0 8px; font-size: 14.4px; line-height: 21.6px; color: var(--rr-base); }
.pros-cons .icon { flex: none; width: 16px; height: 16px; margin-top: 3px; }
.rr-analysis-pros .icon { color: var(--rr-positive); }
.rr-analysis-cons .icon { color: var(--rr-negative); }
.pros-cons .rr-more { display: block; margin-top: 4px; font-size: 12.48px; line-height: 18.72px; color: var(--rr-muted); background: none; border: 0; padding: 0; cursor: pointer; text-align: left; }
.pros-cons .rr-more:hover { color: var(--rr-accent); }
.pros-cons .rr-empty-note { color: var(--rr-muted); font-style: italic; }

.rr-analysis-evidence { font-size: 12.8px; line-height: 18px; color: var(--rr-muted); }
.rr-analysis-evidence a { color: var(--rr-body); }

.rr-analysis-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.analysis-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 36px; padding: 8px 16px;
  font-size: 14px; font-weight: 500; line-height: 20px; text-decoration: none;
  color: #fafafa; background: var(--rr-dark);
  border: 1px solid var(--rr-dark); border-radius: var(--rr-radius-sm);
}
.analysis-button:hover { background: #000; }
.rr-analysis-offer {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 36px; padding: 8px 16px;
  font-size: 14px; font-weight: 500; line-height: 20px; text-decoration: none;
  color: var(--rr-base); background: var(--rr-card);
  border: 1px solid var(--rr-border-strong); border-radius: var(--rr-radius-sm);
}
.rr-analysis-offer:hover { border-color: var(--rr-accent); color: var(--rr-accent); }
.rr-analysis-offer strong { font-weight: 700; }

.rr-analysis-disclosure {
  margin: 0; padding-top: 12px;
  border-top: 1px solid var(--rr-border);
  font-size: 12.8px; line-height: 19.2px; color: var(--rr-muted);
}

/* =========================================================================
   9. Sections after the workspace: brands, use cases, FAQ, related
   ====================================================================== */

.rr-section { margin-top: 40px; }
.rr-section > h2 { margin: 0 0 12px; font-family: var(--rr-mono); font-size: 20px; font-weight: 600; line-height: 28px; color: var(--rr-ink); }
.rr-section > p.rr-section-note { margin: -6px 0 12px; font-size: 12.8px; color: var(--rr-muted); }

/* Horizontal scrollers. The scroll lives on this element, so the page itself never scrolls. */
.rr-scroller { display: flex; gap: 16px; overflow-x: auto; padding-bottom: 4px; scroll-snap-type: x mandatory; }
.rr-scroller > * { scroll-snap-align: start; }
.rr-scroller::-webkit-scrollbar { height: 6px; }
.rr-scroller::-webkit-scrollbar-thumb { background: var(--rr-border); border-radius: 999px; }

.brand-card {
  display: flex; align-items: center; gap: 12px; flex: none;
  width: 250px; padding: 12px 16px;
  background: var(--rr-card); border: 1px solid var(--rr-border); border-radius: var(--rr-radius-lg);
}
.brand-card .brand-rank { font-family: var(--rr-mono); font-size: 14px; font-weight: 600; color: var(--rr-muted); }
.brand-card h3 { margin: 0 0 2px; font-size: 15px; font-weight: 600; line-height: 20px; color: var(--rr-ink); }
.brand-card h3 a { text-decoration: none; }
.brand-card h3 a:hover { color: var(--rr-accent); }
.brand-card p { margin: 0; font-size: 12.48px; line-height: 18px; color: var(--rr-body); }
.brand-card strong { color: var(--rr-ink); }

.usecase-card {
  display: flex; flex-direction: column; gap: 8px; flex: none;
  width: 280px; padding: 16px;
  background: var(--rr-card); border: 1px solid var(--rr-border); border-radius: var(--rr-radius-lg);
  text-decoration: none;
}
.usecase-card:hover { border-color: var(--rr-accent); }
.usecase-card h3 { margin: 0; font-size: 16px; font-weight: 600; line-height: 21px; color: var(--rr-ink); }
.usecase-card .usecase-product { display: flex; align-items: center; gap: 10px; padding: 8px; background: var(--rr-surface-soft); border-radius: 8px; }
.usecase-card .usecase-product img { width: 40px; height: 40px; object-fit: contain; background: var(--rr-card); border-radius: 6px; }
.usecase-card small { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--rr-muted); }
.usecase-card strong { font-size: 13px; color: var(--rr-ink); }
.usecase-card p { margin: 0; font-size: 12.8px; line-height: 18px; color: var(--rr-muted); }
.usecase-card b { margin-top: auto; font-size: 12.8px; color: var(--rr-accent); }

/* FAQ */
.faq { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--rr-border); }
.faq h2 { margin: 0 0 12px; font-family: var(--rr-mono); font-size: 20px; font-weight: 600; color: var(--rr-ink); }
.faq-list { display: flex; flex-direction: column; gap: 8px; }
.faq-item { background: var(--rr-card); border: 1px solid var(--rr-border); border-radius: var(--rr-radius); }
.faq-q {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; min-height: 46px; padding: 12px 16px;
  background: none; border: 0; cursor: pointer;
  font-size: 14px; font-weight: 500; text-align: left; color: var(--rr-ink);
}
.faq-q .icon-chevron { flex: none; width: 16px; height: 16px; color: var(--rr-muted); transition: transform .15s; }
.faq-q[aria-expanded="true"] .icon-chevron { transform: rotate(180deg); }
.faq-answer { padding: 0 16px 14px; font-size: 14px; line-height: 21px; color: var(--rr-body); }
.faq-answer p { margin: 0 0 8px; }

/* Category cards */
.category-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
.category-card {
  display: flex; flex-direction: column; gap: 8px;
  padding: 16px; text-align: center; text-decoration: none;
  background: var(--rr-card); border: 1px solid var(--rr-border); border-radius: var(--rr-radius-lg);
}
.category-card:hover { border-color: var(--rr-accent); }
.category-card h3 { margin: 0; font-size: 15px; font-weight: 600; color: var(--rr-ink); }
/* The thumbnail wrapper defines the image region and clips anything larger than it (a source
   image with unusual intrinsic dimensions could otherwise escape the white card). */
.category-card span { display: block; height: 130px; overflow: hidden; padding: 4px; }
.category-card img { display: block; width: 100%; height: 100%; object-fit: contain; }
.category-card p { margin: 0; font-size: 12px; color: var(--rr-muted); }

/* =========================================================================
   10. Overlay, empty states, prose pages
   ====================================================================== */

.overlay {
  position: fixed; inset: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center;
  padding: 16px; background: rgba(20,20,20,.45);
}
.overlay .dialog {
  position: relative; width: min(560px, 100%); max-height: 80vh; overflow-y: auto;
  padding: 24px; background: var(--rr-card); border-radius: var(--rr-radius-lg);
}
.overlay .dialog h2 { margin: 0 0 12px; font-family: var(--rr-mono); font-size: 20px; }
.overlay .close { position: absolute; top: 8px; right: 12px; background: none; border: 0; font-size: 24px; line-height: 1; cursor: pointer; color: var(--rr-muted); }

/* Public empty state. Never contains administrator instructions. */
.rr-empty-state { max-width: 560px; margin: 40px auto; padding: 32px; text-align: center;
  background: var(--rr-card); border: 1px solid var(--rr-border); border-radius: var(--rr-radius-xl); }
.rr-empty-state h2 { margin: 0 0 8px; font-family: var(--rr-mono); font-size: 20px; color: var(--rr-ink); }
.rr-empty-state p { margin: 0 0 16px; font-size: 14px; color: var(--rr-body); }

.back-link { display: inline-block; margin: 16px 0; font-size: 13px; color: var(--rr-body); text-decoration: none; }
.back-link:hover { color: var(--rr-accent); }

main.prose { max-width: 800px; }
/* Reference measures 44px/800/1.25 at 1280. Clamped rather than fixed so the same rule does not
   leave a 44px title in a 358px column on phones - the convention the blog titles already use. */
main.prose h1 {
  font-family: var(--rr-mono); font-weight: 800; line-height: 1.25; color: var(--rr-ink);
  font-size: clamp(30px, 3.5vw, 44px);
  overflow-wrap: break-word;
}
main.prose h2 { font-family: var(--rr-mono); font-size: 22px; color: var(--rr-ink); margin-top: 32px; }
main.prose h3 { font-family: var(--rr-mono); font-size: 17px; color: var(--rr-ink); margin-top: 24px; }
main.prose p, main.prose li { font-size: 16px; line-height: 1.65; color: var(--rr-body); }
main.prose p { margin: 0 0 16px; }
main.prose strong { color: var(--rr-ink); font-weight: 600; }
main.prose ul, main.prose ol { margin: 0 0 16px; padding-left: 24px; }
main.prose ul { list-style: disc; }
main.prose ol { list-style: decimal; }
main.prose li { margin: 0 0 8px; }
main.prose a { color: var(--rr-accent); }
main.prose .rr-updated { font-size: 13px; color: var(--rr-muted); margin: 0 0 24px; }
main.prose img { border-radius: var(--rr-radius-lg); }

/* Contact form */
.rr-contact-form-wrap { max-width: 480px; margin-top: 16px; }
.rr-form-success { padding: 12px 16px; margin: 0 0 16px; background: var(--rr-accent-tint); border: 1px solid var(--rr-accent); border-radius: var(--rr-radius-sm); }
.rr-form-success p { margin: 0; color: var(--rr-ink); }
.rr-form-error-summary { padding: 12px 16px; margin: 0 0 16px; background: rgba(245, 112, 46, .1); border: 1px solid var(--rr-negative); border-radius: var(--rr-radius-sm); }
.rr-form-error-summary p { margin: 0; color: var(--rr-ink); }
.rr-contact-form .rr-field { display: block; margin: 0 0 16px; }
.rr-contact-form label { display: block; font-size: 13px; font-weight: 500; color: var(--rr-ink); margin: 0 0 6px; }
.rr-contact-form input, .rr-contact-form textarea {
  width: 100%; padding: 10px 12px; font-size: 14px; font-family: inherit;
  background: var(--rr-card); border: 1px solid var(--rr-border); border-radius: var(--rr-radius-sm);
}
.rr-contact-form input:focus, .rr-contact-form textarea:focus { outline: 2px solid var(--rr-accent); outline-offset: 1px; }
.rr-contact-form input[aria-invalid="true"], .rr-contact-form textarea[aria-invalid="true"] { border-color: var(--rr-negative); }
.rr-contact-form textarea { resize: vertical; }
.rr-field-error { display: block; margin-top: 6px; font-size: 12.8px; color: var(--rr-negative); }
.rr-contact-form button[disabled] { opacity: .6; cursor: not-allowed; }
/* Honeypot: kept in the layout (not display:none) so simple bots that skip hidden fields still fill it in. */
.rr-hp-field { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }

.blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px; }
.blog-grid article { display: flex; flex-direction: column; gap: 8px; background: var(--rr-card);
  border: 1px solid var(--rr-border); border-radius: var(--rr-radius-lg); overflow: hidden; padding-bottom: 16px; }
.blog-grid .rr-blog-image img { width: 100%; height: 170px; object-fit: cover; display: block; }
.blog-grid small, .blog-grid h2, .blog-grid p, .blog-grid > article > a { padding-inline: 16px; }
.blog-grid small { color: var(--rr-muted); font-size: 12px; padding-top: 12px; }
.blog-grid h2 { margin: 0; font-size: 17px; line-height: 23px; }
.blog-grid h2 a { text-decoration: none; color: var(--rr-ink); }
.blog-grid h2 a:hover { color: var(--rr-accent); }
.blog-grid p { margin: 0; font-size: 13.5px; line-height: 20px; color: var(--rr-body); }
.blog-grid > article > a:last-child { font-size: 13px; color: var(--rr-accent); text-decoration: none; }

.rr-list-links { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; }
.list-link { display: flex; justify-content: space-between; gap: 8px; padding: 12px 16px; text-decoration: none;
  background: var(--rr-card); border: 1px solid var(--rr-border); border-radius: var(--rr-radius); font-size: 14px; }
.list-link:hover { border-color: var(--rr-accent); color: var(--rr-accent); }

/* Homepage hero */
main.home .hero { text-align: center; padding: 32px 0 24px; }
main.home .hero h1 { font-family: var(--rr-mono); font-size: clamp(2rem, 5vw, 3rem); line-height: 1.15; color: var(--rr-ink); margin: 0 0 12px; }
main.home .hero h1 span { display: block; }
main.home .hero h1 em { color: var(--rr-accent); font-style: normal; }
main.home .hero h2 { font-size: 16px; font-weight: 400; line-height: 1.6; color: var(--rr-body); max-width: 640px; margin: 0 auto 16px; }
main.home .hero h2 u { text-decoration-line: underline; text-decoration-color: var(--rr-accent); text-decoration-thickness: 2px; text-underline-offset: 3px; }
main.home .updated { font-size: 12px; color: var(--rr-muted); }
.home-search { position: relative; display: block; max-width: 600px; margin: 16px auto 0; }
.home-search input { width: 100%; height: 44px; padding: 0 14px; font-size: 15px;
  background: var(--rr-card); border: 1px solid var(--rr-border); border-radius: var(--rr-radius-sm); }
main.home section > h2 { font-family: var(--rr-mono); font-size: 22px; color: var(--rr-ink); }
.testimonials { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
.testimonials img { border-radius: var(--rr-radius-lg); }

/* Homepage social / publication links panel */
main.home .rr-social-panel {
  margin-top: 24px; padding: 28px var(--rr-gutter); background: var(--rr-dark);
  border-radius: var(--rr-radius-xl); text-align: center;
}
main.home .rr-social-panel > h2 { color: #fafafa; margin: 0 0 16px; }
.rr-social-grid { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.rr-social-link {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.18); border-radius: var(--rr-radius);
  color: #fafafa; font-size: 14px; font-weight: 500; text-decoration: none;
}
.rr-social-link:hover, .rr-social-link:focus-visible { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.32); }
.rr-social-link .icon { width: 18px; height: 18px; flex: none; }

/*
 * Each publication's own brand colour on its icon, so the panel reads as a row of recognisable
 * marks rather than four identical grey glyphs. Medium's mark is black, which would disappear on
 * this dark panel, so it keeps the panel's foreground colour.
 */
.rr-social-link.is-substack  .icon { color: #ff6719; }
.rr-social-link.is-pinterest .icon { color: #e60023; }
.rr-social-link.is-flipboard .icon { color: #f52828; }
.rr-social-link.is-medium    .icon { color: #fafafa; }

/* =========================================================================
   Pros / cons disclosure rows
   Reference renders each row as a button with aria-expanded and reveals the
   agree/disagree counts and supporting quotes beneath it. Rows with nothing
   behind them stay plain list items and are not clickable.
   ====================================================================== */

.rr-pc-list { margin: 0; padding: 0; list-style: none; }
.rr-pc-item { display: flex; align-items: flex-start; gap: 8px; padding: 6px 0; }
.rr-pc-item.has-detail { display: block; padding: 0; }

.rr-pc-toggle {
  display: flex; align-items: flex-start; gap: 8px;
  width: 100%; padding: 8px 0; margin: 0;
  background: none; border: 0; text-align: left; cursor: pointer;
  font-size: 14px; line-height: 20px; color: var(--rr-ink);
}
.rr-pc-toggle > span { flex: 1; min-width: 0; }
.rr-pc-toggle:hover { color: var(--rr-accent); }
/* The chevron is the last child; it points down when closed and flips when open. */
.rr-pc-toggle > .icon:last-child {
  flex: none; width: 16px; height: 16px; margin-top: 2px; color: var(--rr-muted);
  transform: rotate(0deg); transition: transform .15s cubic-bezier(.4, 0, .2, 1);
}
.rr-pc-toggle[aria-expanded="true"] > .icon:last-child { transform: rotate(180deg); }

.rr-pc-detail { padding: 0 0 12px 24px; }
.rr-pc-counts { display: flex; align-items: center; gap: 16px; margin: 0 0 8px; font-size: 13px; font-weight: 600; }
.rr-pc-counts span { display: inline-flex; align-items: center; gap: 4px; }
.rr-pc-counts .up { color: var(--rr-positive); }
.rr-pc-counts .down { color: var(--rr-muted); }
.rr-pc-counts .icon { width: 15px; height: 15px; }

.rr-pc-quote {
  margin: 0 0 8px; font-size: 13.5px; line-height: 20px; font-style: italic; color: var(--rr-body);
}
.rr-pc-quote:last-child { margin-bottom: 0; }

@media (max-width: 640px) {
  .rr-social-grid { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .rr-social-link { justify-content: center; }
}

/* =========================================================================
   11. Responsive
   Below 900px the analysis panel is not rendered; each row is self-sufficient
   and links through to the model page, matching the reference's mobile pattern.
   ====================================================================== */

@media (max-width: 900px) {
  .ranking-workspace { grid-template-columns: 1fr; }
  .rank-analysis { display: none; }
  .model { padding: 12px 16px 4px; }
  .filter-bar { gap: 6px; }
  .filter-bar h2 { flex: 1 0 100%; margin-bottom: 4px; }
  .pros-cons { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .site-header { flex-wrap: nowrap; height: var(--rr-header-h); padding: 0 16px; gap: 12px; }
  .site-header .logo { flex: none; }
  .site-header .logo img { height: 44px; }
  .site-nav { flex: none; gap: 16px; font-size: 16px; }
  .evidence { width: auto; }
  .intro h1 { font-size: 1.7rem; }
  .rr-analysis-name { font-size: 20px; }
  .model .thumb { width: 64px; height: 64px; }
  .brand-card, .usecase-card { width: 240px; }
  .category-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .category-card span { height: 100px; }
  .category-card img { height: 100%; }
}

/*
 * Interactive-state motion. Measured from the reference, which animates every hover/focus state
 * with a single 150ms cubic-bezier(.4,0,.2,1) curve over colour, background, border and outline
 * only - it has no entrance, scroll-triggered or transform animation anywhere, so none is added
 * here. Written with :where() so specificity stays 0 and the component rules below still decide
 * the actual colours. Layout-affecting properties are deliberately excluded: transitioning them
 * would make expanding content (FAQ answers, "Show more") jump.
 */
:where(
  a, button, summary, input, select, textarea,
  .filter > button, .filter .menu a, .suggestions a,
  .model, .model .preview, .model .shop,
  .brand-card, .usecase-card, .category-card, .list-link,
  .analysis-button, .rr-analysis-offer, .show-more, .rr-toggle, .rr-more, .how
) {
  transition: color .15s cubic-bezier(.4, 0, .2, 1),
              background-color .15s cubic-bezier(.4, 0, .2, 1),
              border-color .15s cubic-bezier(.4, 0, .2, 1),
              outline-color .15s cubic-bezier(.4, 0, .2, 1);
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* =========================================================================
   12. Inner pages (model, brand, series, use case)
   The reference narrows the container to 900px on these pages and stacks
   sections 48px apart.
   ====================================================================== */

main.rr-entity { max-width: 900px; }
.rr-stack { display: flex; flex-direction: column; gap: 48px; }

.rr-entity-head p.rr-kicker { margin: 0; font-size: 14px; font-weight: 500; line-height: 20px; color: var(--rr-body); }
.rr-entity-head h1 {
  margin: 0;
  font-family: var(--rr-mono);
  font-size: clamp(1.5rem, 3.2vw, 1.875rem);
  font-weight: 700; line-height: 1.25; color: var(--rr-ink);
}
.rr-entity-head .rr-entity-sub { margin: 8px 0 0; font-size: 14px; color: var(--rr-body); }

/* Main detail card */
.rr-detail-card { background: var(--rr-card); border: 1px solid var(--rr-border); border-radius: var(--rr-radius-lg); }
.rr-tldr {
  margin: 16px; padding: 16px;
  background: var(--rr-surface-soft); border: 1px solid var(--rr-border); border-radius: 8px;
  font-size: 14px; line-height: 20px; color: var(--rr-base);
}
.rr-tldr strong { font-weight: 700; color: var(--rr-ink); }

.rr-detail-grid { display: grid; grid-template-columns: 1fr 2fr; gap: 16px; padding: 0 16px 16px; }
.rr-panel { padding: 16px; background: var(--rr-surface-soft); border: 1px solid var(--rr-border); border-radius: 8px; }
.rr-panel > h3, .rr-panel > .rr-panel-label {
  display: block; margin: 0 0 8px;
  font-size: 11.52px; font-weight: 600; line-height: 17.28px;
  text-transform: uppercase; letter-spacing: .05em; color: var(--rr-muted);
}
.rr-overall-label { margin: 0; font-size: 14px; font-weight: 700; line-height: 20px; color: var(--rr-body); }
.rr-overall-rank { margin: 0; font-family: var(--rr-mono); font-size: 24px; font-weight: 700; line-height: 30px; color: var(--rr-ink); }
.rr-overall-rank span { font-size: 14px; font-weight: 600; color: var(--rr-body); }
.rr-overall-cat { font-family: var(--rr-mono); font-size: 18px; font-weight: 600; line-height: 28px; color: var(--rr-ink); text-decoration: underline; }
.rr-overall-note { display: inline-flex; align-items: center; gap: 6px; margin: 4px 0 0; font-size: 12.8px; line-height: 19.2px; color: var(--rr-muted); }
.rr-overall-note b { color: var(--rr-accent); font-weight: 500; }

.rr-detail-proscons { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 0 16px 16px; }
.rr-detail-proscons ul { margin: 0; padding: 0; list-style: none; }
.rr-detail-proscons li { display: flex; align-items: flex-start; gap: 6px; padding: 4px 0; font-size: 14.4px; line-height: 21.6px; color: var(--rr-base); }
.rr-detail-proscons .icon { flex: none; width: 16px; height: 16px; margin-top: 3px; }
.rr-detail-proscons .rr-pros .icon { color: var(--rr-positive); }
.rr-detail-proscons .rr-cons .icon { color: var(--rr-negative); }
.rr-detail-proscons .rr-empty-note { font-size: 14px; color: var(--rr-muted); font-style: italic; }

.rr-detail-foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px;
  padding: 0 16px 14px; font-size: 12px; line-height: 16px; color: var(--rr-muted);
}

/* Evidence list on an inner page */
.rr-evidence-list { display: flex; flex-direction: column; gap: 8px; }
.rr-evidence-item {
  padding: 12px 16px;
  background: var(--rr-card); border: 1px solid var(--rr-border); border-radius: var(--rr-radius);
}
.rr-evidence-item header { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 4px; font-size: 12.48px; color: var(--rr-muted); }
.rr-evidence-item .rr-sentiment-tag { padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.rr-sentiment-tag.positive { background: rgba(46,178,101,.12); color: #1e7c46; }
.rr-sentiment-tag.neutral  { background: rgba(242,169,33,.14); color: #8a5f06; }
.rr-sentiment-tag.negative { background: rgba(245,112,46,.12); color: #a33c0d; }
.rr-evidence-item p { margin: 0; font-size: 14px; line-height: 21px; color: var(--rr-body); }
.rr-evidence-item a.rr-source-link { font-size: 12.8px; color: var(--rr-body); }
.rr-evidence-item a.rr-source-link:hover { color: var(--rr-accent); }

/* Ranked list on a use-case page */
.rr-ranked { display: flex; flex-direction: column; gap: 12px; }
.rr-ranked-item {
  display: grid; grid-template-columns: auto 88px 1fr; gap: 16px; align-items: start;
  padding: 16px; background: var(--rr-card); border: 1px solid var(--rr-border); border-radius: var(--rr-radius-lg);
}
.rr-ranked-item.is-winner { border-color: var(--rr-accent); box-shadow: inset 3px 0 0 var(--rr-accent); }
.rr-ranked-item .rank {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; font-size: 14px; font-weight: 600;
  border: 1px solid var(--rr-border); border-radius: 999px;
}
.rr-ranked-item.is-winner .rank { border-color: var(--rr-accent); }
.rr-ranked-item .rr-ranked-thumb { width: 88px; height: 88px; overflow: hidden; background: #ededed; border: 1px solid var(--rr-border); border-radius: 8px; }
.rr-ranked-item .rr-ranked-thumb img { width: 100%; height: 100%; padding: 4px; object-fit: contain; background: var(--rr-card); }
.rr-ranked-item h3 { margin: 0 0 2px; font-size: 16px; font-weight: 700; line-height: 21px; color: var(--rr-ink); }
.rr-ranked-item h3 a { text-decoration: none; }
.rr-ranked-item h3 a:hover { color: var(--rr-accent); }
.rr-ranked-item small { display: block; font-size: 12.8px; color: var(--rr-body); }
.rr-ranked-item .rr-reason { margin: 8px 0 0; font-size: 14px; line-height: 21px; color: var(--rr-body); }
.rr-ranked-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }

.rr-winner-note {
  margin: 0 0 12px; padding: 10px 14px;
  background: var(--rr-surface-soft); border: 1px solid var(--rr-border); border-radius: 8px;
  font-size: 13px; color: var(--rr-body);
}

.rr-cta-row { display: flex; justify-content: center; margin: 8px 0 24px; }

@media (max-width: 720px) {
  .rr-detail-grid, .rr-detail-proscons { grid-template-columns: 1fr; }
  /* Rank badge and thumbnail share row 1; the content div explicitly spans both columns on
     row 2, otherwise it auto-places into column 1 only and the text is squeezed into half
     the width with the rest of the row left blank. */
  .rr-ranked-item { grid-template-columns: auto 72px; column-gap: 12px; }
  .rr-ranked-item .rr-ranked-thumb { grid-row: 1; grid-column: 2; width: 72px; height: 72px; }
  .rr-ranked-item > div:last-child { grid-column: 1 / -1; }
  .rr-keyfeatures-grid { grid-template-columns: 1fr; }
  .rr-specs-table th, .rr-specs-table td { padding: 8px 10px; }
  .rr-social-grid { grid-template-columns: 1fr 1fr; }
}

/* Key features / specifications / best-for / limitations / detailed analysis (model page) */
.rr-keyfeatures-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.rr-keyfeature .icon { width: 20px; height: 20px; color: var(--rr-accent); }
.rr-keyfeature h3 { margin: 8px 0 4px; font-size: 15px; font-weight: 600; color: var(--rr-ink); }
.rr-keyfeature p { margin: 0; font-size: 14px; line-height: 21px; color: var(--rr-body); }

.rr-specs-table { width: 100%; border-collapse: collapse; background: var(--rr-card); border: 1px solid var(--rr-border); border-radius: var(--rr-radius-lg); overflow: hidden; }
.rr-specs-table tr:not(:last-child) th, .rr-specs-table tr:not(:last-child) td { border-bottom: 1px solid var(--rr-border); }
.rr-specs-table th, .rr-specs-table td { text-align: left; padding: 10px 16px; font-size: 14px; }
.rr-specs-table th { color: var(--rr-muted); font-weight: 500; width: 40%; }
.rr-specs-table td { color: var(--rr-ink); font-weight: 600; }

.rr-best-for, .rr-limitations { padding: 16px; background: var(--rr-surface-soft); border: 1px solid var(--rr-border); border-radius: var(--rr-radius-lg); }
.rr-best-for p, .rr-limitations p, .rr-detailed-analysis p { margin: 0 0 10px; font-size: 14.4px; line-height: 21.6px; color: var(--rr-body); }
.rr-best-for p:last-child, .rr-limitations p:last-child, .rr-detailed-analysis p:last-child { margin-bottom: 0; }

.rr-section-h { margin: 0 0 12px; font-family: var(--rr-mono); font-size: 20px; font-weight: 600; line-height: 28px; color: var(--rr-ink); }

/* =========================================================================
   13. Blog
   The reference uses one 800px column of stacked, bottom-bordered entries.
   ====================================================================== */

main.rr-blog-index, main.rr-article { max-width: 800px; margin-inline: auto; padding: 0 16px 48px; }
main.rr-blog-index .rr-page-heading { margin: 24px 0 48px; }
main.rr-blog-index .rr-page-heading h1,
main.rr-article h1 {
  margin: 0 0 12px; font-family: var(--rr-mono); font-weight: 700; line-height: 1.111; color: var(--rr-ink);
  /* Scales between mobile and desktop so longer titles ("How to Choose a Webcam") wrap at word
     boundaries instead of overflowing the 800px column on small viewports. */
  font-size: clamp(24px, 6vw, 36px);
  overflow-wrap: break-word;
}
main.rr-blog-index .rr-page-heading p { margin: 0; font-size: 15px; color: var(--rr-body); }

.blog-list article { margin-bottom: 48px; padding-bottom: 24px; border-bottom: 1px solid var(--rr-border); }
.blog-list article:last-child { border-bottom: 0; }
.blog-list .rr-blog-image { display: block; margin-bottom: 12px; }
.blog-list .rr-blog-image img { width: 100%; height: auto; max-height: 300px; object-fit: cover; border-radius: var(--rr-radius-lg); }
.blog-list h2 { margin: 0 0 6px; font-family: var(--rr-mono); font-size: 24px; font-weight: 700; line-height: 1.25; }
.blog-list h2 a { text-decoration: none; color: var(--rr-ink); }
.blog-list h2 a:hover { color: var(--rr-accent); }
.rr-byline { margin: 0 0 10px; font-size: 12.8px; color: var(--rr-muted); }
.blog-list .rr-blog-excerpt { margin: 0 0 10px; font-size: 15px; line-height: 1.6; color: var(--rr-body); }
.blog-list .rr-blog-more { font-size: 14px; color: var(--rr-accent); text-decoration: none; }
.blog-list .rr-blog-more:hover { text-decoration: underline; }

main.rr-article header img { width: 100%; height: auto; border-radius: var(--rr-radius-lg); margin: 12px 0 24px; }
.rr-article-content { font-size: 16.5px; line-height: 1.7; color: var(--rr-body); }
.rr-article-content h2 { font-family: var(--rr-mono); font-size: 22px; color: var(--rr-ink); margin-top: 32px; }
.rr-article-content h3 { font-size: 18px; color: var(--rr-ink); margin-top: 24px; }
.rr-article-content img { border-radius: var(--rr-radius-lg); }
.rr-article-content a { color: var(--rr-accent); }

/*
 * Model page header: the reference sets the product image beside the title as a fixed 200px
 * second column (868 = 644 text + 24 gap + 200 figure at 1280), vertically centred against the
 * text block, rather than stacking a wide figure underneath it. Scoped with :has() so the
 * brand/series/campaign heads, which have no figure, keep their single-column block layout.
 */
.rr-entity-head:has(.rr-model-figure) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 200px;
  gap: 16px 24px;
  align-items: center;
}
.rr-entity-headtext { min-width: 0; }

/*
 * Retailer rows in the product header. Measured from the reference: 300x32 pill rows, the retailer
 * name left and the price right (space-between), 12px side padding, 1px #e5e5e5 border on white,
 * 14px/500, stacked 8px apart, with the affiliate disclosure below the header at 12.8px muted.
 */
.rr-head-offers { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-top: 16px; }
.rr-head-offer {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 6px;
  width: 100%; max-width: 300px; height: 32px; padding: 0 12px;
  font-size: 14px; font-weight: 500; line-height: 1; text-decoration: none; color: var(--rr-ink);
  background: var(--rr-card); border: 1px solid var(--rr-border-strong); border-radius: 999px;
}
.rr-head-offer:hover { border-color: var(--rr-accent); color: var(--rr-accent); }
.rr-head-offer-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rr-head-offer-price { display: inline-flex; align-items: center; gap: 6px; flex: none; }
.rr-head-offer-price strong { font-weight: 500; }
.rr-head-offer-price svg { width: 13px; height: 13px; }

.rr-head-disclosure { margin: 8px 0 0; font-size: 12.8px; line-height: 18px; color: var(--rr-muted); }

.rr-model-figure {
  display: flex; align-items: center; justify-content: center;
  width: 200px; height: 200px; margin: 0; padding: 16px;
  background: var(--rr-card); border: 1px solid var(--rr-border); border-radius: var(--rr-radius-lg);
}
.rr-model-figure img { max-width: 100%; max-height: 100%; width: auto; object-fit: contain; }

/* Below the reference's stacking point the figure returns above the text, full-column width. */
@media (max-width: 720px) {
  .rr-entity-head:has(.rr-model-figure) { grid-template-columns: minmax(0, 1fr) 112px; gap: 12px 16px; }
  .rr-entity-head .rr-model-figure { width: 114px; height: 114px; max-width: none; padding: 0; }
  /* Full-column offer rows below 720: the reference spans them edge to edge at 390. */
  .rr-head-offer { max-width: none; }
}

/* A use case with no curated order lists models without position numbers. */
.rr-ranked-item.is-unranked { grid-template-columns: 88px 1fr; }
@media (max-width: 720px) {
  .rr-ranked-item.is-unranked { grid-template-columns: 72px 1fr; }
  .rr-ranked-item.is-unranked .rr-ranked-thumb { grid-row: auto; grid-column: auto; }
  .rr-ranked-item.is-unranked > div:last-child { grid-column: 1 / -1; }
}

/* Lists page search - same treatment as the other search inputs on the site. */
.related-search { display: block; position: relative; max-width: 400px; margin: 16px 0 24px; }
.related-search input {
  width: 100%; height: 40px; padding: 0 14px;
  font-size: 14px; color: var(--rr-ink);
  background: var(--rr-card); border: 1px solid var(--rr-border); border-radius: var(--rr-radius-sm);
}
/* Reference renders the lists index in a 1000px container (968px content), not the 1200px
   container the category pages use. */
main.simple.rr-lists { max-width: 1000px; }

main.simple h1 {
  margin: 0 0 8px;
  font-family: var(--rr-mono); font-size: 30px; font-weight: 800; line-height: 1.5; color: var(--rr-ink);
}
main.simple.rr-404 { text-align: center; }
main.simple.rr-404 h1 { font-size: 24px; font-weight: 700; line-height: 1.333; }
main.simple.rr-404 .rr-breadcrumb { justify-content: center; }
main.simple.rr-404 .home-search { margin-inline: auto; }

main.simple .rr-no-results { padding: 24px 0; }