/* ============================================================
 * Run Reviews — child theme brand styling
 * ------------------------------------------------------------
 * Goal: brand-recognizable on top of GeneratePress, not a
 * pixel-perfect port of wp-old. Brand colour, fonts, and a
 * handful of accents (header strip, nav hover, footer, stars,
 * buttons) so visitors recognise "this is runreviews".
 * ============================================================
 *
 * TABLE OF CONTENTS
 * -----------------
 *  1. Web fonts                  — `@font-face` declarations
 *  2. Brand tokens               — `:root` custom properties (colors,
 *                                  --rr-space-*, radii, shadows, container)
 *  3. Body / typography baseline — body, headings, links, p, hr
 *  4. Site header (GP compat)    — legacy GeneratePress header bits
 *  5. Primary navigation (GP)    — legacy GP nav hover/active accents
 *  6. Sidebar widgets            — `.sidebar .widget` shared styling
 *  7. Article / single post      — `.entry-title`, `.entry-content`
 *  8. Review / star-rating block — runreviews/star-rating + legacy ratings
 *  9. Buttons / CTA              — `.button`, `<button>`, `.wp-block-button`
 * 10. Form fields                — text/email/url/textarea/select
 * 11. Footer (legacy)            — site-footer + site-info
 * 12. Pagination                 — `.pagination` + `.nav-links`
 * 13. Utility                    — `.rr-text-brand`, `.rr-bg-brand`
 * 14. Footer columns layout      — `.footer-columns` grid + nav
 * 15. Site header (two-strip)    — masthead row + `.nav-strip`
 *                                  (mega-menu trigger lives here too)
 * 16. SEARCH BY mega-panel       — `.mega-panel`, `.mega-grid`,
 *                                  mobile drawer override
 * 17. Article + sidebar grid     — `.site-content-wrap` + `.site-sidebar`
 * 18. Footer brand column        — `.footer-column--brand` white logo
 * 19. Motion preferences (a11y)  — `prefers-reduced-motion` overrides
 * 20. Reusable layout primitives — `.rr-section`, `.rr-card`,
 *                                  universal `:focus-visible` ring
 * 21. Homepage hero              — `.rr-hero` + responsive
 * 22. Popular Topics grid        — `.rr-popular-topics` + `.rr-topics-*`
 * 23. Other Resources tile grid  — `.rr-other-resources` + `.rr-tile`
 * 24. Card meta variant          — `.rr-card__meta` (used by Latest Reviews)
 * 25. Latest Reviews grid        — `.rr-latest-reviews` + per-section
 *                                  `.rr-card__media` no-crop override
 * 26. Single Review — section spacing — `.rr-review`
 * 27. Single Review — overview hero  — `.rr-review-overview`
 * 28. Single Review — affiliate CTA  — `.rr-cta-affiliate`
 * 29. Single Review — specs table    — `.rr-specs-table`
 * 30. Single Review — detail blocks  — `.rr-review-detail`
 * 31. Single Review — share strip    — `.rr-share`
 * 32. Sidebar related-reviews        — `.rr-related-reviews`
 * 33. Breadcrumbs                    — `.rr-breadcrumbs`
 * 34. Category archive               — `.rr-category-page`,
 *                                       `.rr-product-grid`,
 *                                       `.rr-product-card`
 * 35. Choose By Price or Type       — `.rr-choose-by`
 * 36. Sidebar widget polish         — `.site-sidebar .widget_nav_menu` card
 *                                     container, item count, 2-col brands,
 *                                     hover chevron, current-page dot
 * 37. Deals page                     — `.rr-deals`, `.rr-deal-card`
 * 38. Floating deals CTA             — `.rr-floating-cta`
 * 39. Header search + autosuggest    — `.rr-search`
 * 40. Contact page                   — `.rr-contact` + `.rr-cf7-*` form
 *                                       polish (CF7 reset, label rhythm,
 *                                       form card, validation styling)
 * 41. All Brands directory           — `.rr-all-brands`
 * 42. Browse By Type widgets         — `.rr-bbt-widget`
 * 43. Best Buy Treadmills 2016       — `.rr-bb-widget`
 * 44. Search results page            — `.rr-search-page-hero`, `.rr-search-section`, `.rr-search-card`
 * 45. Tips / Influential Runners      — `.page-tips`, `.rr-tips-badges`,
 *                                       `.rr-tips-list`, `.rr-tip`
 * 46. Quizzes page                    — `.rr-quizzes`, `.rr-quiz-card`
 *                                       (race-bib themed quiz cards)
 * 47. Editorial runners spread        — `.rr-tips-list--editorial`,
 *                                       `.rr-tip--lede` (drop caps,
 *                                       big numerals, magazine layout)
 * 48. News content sections          — `.rr-news-sections`,
 *                                       `.rr-news-section` (legacy
 *                                       `news_content` ACF repeater on
 *                                       `news` CPT singles)
 * 49. FAQ / Accessorie content       — `.rr-faq-sections`,
 *                                       `.rr-faq-section` (legacy
 *                                       `faq_content` ACF repeater on
 *                                       `faqs` + `accessorie` CPTs)
 * 50. Workout content sections        — `.rr-workout-sections`,
 *                                       `.rr-workout-section` (legacy
 *                                       `workout_content` ACF repeater
 *                                       on `workout_post` CPT singles)
 * 51. FTC affiliate disclosure        — `.rr-ftc-disclosure` (compact
 *                                       compliance band rendered above
 *                                       affiliate CTAs on review pages)
 * 52. Comments + comment form         — `.rr-comments`, `.rr-comment-list`,
 *                                       `.rr-comment`, `.rr-comment-form`
 *                                       (rendered by comments.php +
 *                                       runreviews_comment_callback)
 *
 * Conventions
 * -----------
 * - Tokens are `--rr-*` prefixed; new sections must consume tokens, not
 *   hardcode color/space/shadow values.
 * - Reusable patterns are `.rr-*` BEM (`.rr-block`, `.rr-block__elem`,
 *   `.rr-block--modifier`).
 * - Section dividers use `/* ---------- Title ---------- */` for browse-
 *   ability and `/* ============ */` for the TOC + appendix headers.
 * - Any new motion path (transform / transition) must be added to the
 *   `prefers-reduced-motion` block in section 19.
 * ============================================================ */

/* ---------- Web fonts (relative to /css/main.css) ---------- */
@font-face {
  font-family: 'robotoregular';
  src: url('../fonts/roboto-regular-webfont.woff2') format('woff2'),
       url('../fonts/roboto-regular-webfont.woff') format('woff'),
       url('../fonts/roboto-regular-webfont.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'robotolight';
  src: url('../fonts/roboto-light-webfont.woff2') format('woff2'),
       url('../fonts/roboto-light-webfont.woff') format('woff'),
       url('../fonts/roboto-light-webfont.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'vigaregular';
  src: url('../fonts/viga-regular-webfont.woff2') format('woff2'),
       url('../fonts/viga-regular-webfont.woff') format('woff'),
       url('../fonts/viga-regular-webfont.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* ---------- Brand tokens ---------- */
:root {
  --rr-red: #f13434;       /* extracted from wp-old style.css */
  --rr-red-dark: #c91f1f;  /* for hover/active states */
  --rr-dark: #1a1a1a;
  --rr-bg: #ffffff;
  --rr-bg-soft: #fafafa;
  --rr-text: #666;
  --rr-heading: #1a1a1a;
  --rr-border: #e7e7e7;
  --rr-muted: #999;
  --rr-ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* Spacing scale — used by .rr-section, cards, sidebar/footer rethreading. */
  --rr-space-1: 0.25rem;
  --rr-space-2: 0.5rem;
  --rr-space-3: 0.75rem;
  --rr-space-4: 1rem;
  --rr-space-5: 1.5rem;
  --rr-space-6: 2rem;
  --rr-space-7: 3rem;
  --rr-space-8: 4rem;

  /* Radii. */
  --rr-radius-sm: 4px;
  --rr-radius-md: 8px;

  /* Card shadow — subtle, brand-neutral. */
  --rr-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.06);
  --rr-shadow-card-hover: 0 2px 4px rgba(0, 0, 0, 0.06), 0 12px 24px rgba(0, 0, 0, 0.10);

  /* Container width — matches existing ad-hoc 1200px usage; new sections use this. */
  --rr-container-max: 1200px;
}

/* ---------- Body / typography baseline ---------- */
/* NOTE: wp-old uses 12px body; bumping to 15px is a defensible
 *       modernisation — 12px is unreadable on modern displays. */
body {
  background: var(--rr-bg);
  color: var(--rr-text);
  font-family: 'robotoregular', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 15px;
  line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'robotoregular', sans-serif;
  color: var(--rr-heading);
  font-weight: normal;
  margin: 0 0 0.6em;
  line-height: 1.25;
}

h1 { font-size: 2rem; }     /* ~32px */
h2 { font-size: 1.5rem; }   /* ~24px */
h3 { font-size: 1.125rem; } /* ~18px */
h4 { font-size: 0.95rem; }  /* ~15px */
h5 { font-size: 0.9rem; }
h6 { font-size: 0.85rem; }

a {
  color: var(--rr-red);
  text-decoration: none;
  transition: color 0.15s ease;
}

a:hover,
a:focus {
  color: var(--rr-red-dark);
  text-decoration: underline;
}

p { margin: 0 0 1em; }

hr { border: 0; border-top: 1px solid var(--rr-border); margin: 1.5em 0; }

/* ---------- Site header (GeneratePress) ---------- */
/* Logo sizing — match wp-old's 230x70 ratio. */
.site-logo img,
.site-branding .header-image,
.custom-logo {
  max-height: 70px;
  width: auto;
}

.main-title,
.site-branding .main-title a {
  font-family: 'vigaregular', 'robotoregular', sans-serif;
  color: var(--rr-heading);
}

.site-description {
  font-family: 'robotolight', 'robotoregular', sans-serif;
  color: var(--rr-muted);
}

/* ---------- Primary navigation ---------- */
.main-navigation {
  background: #fff;
  border-bottom: 1px solid var(--rr-border);
}

.main-navigation .main-nav ul li a {
  font-family: 'robotoregular', sans-serif;
  color: var(--rr-heading);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-size: 0.9rem;
}

.main-navigation .main-nav ul li:hover > a,
.main-navigation .main-nav ul li:focus > a,
.main-navigation .main-nav ul li.sfHover > a,
.main-navigation .main-nav ul li[class*="current-menu"] > a {
  color: var(--rr-red);
}

.main-navigation .main-nav ul li[class*="current-menu"] > a {
  box-shadow: inset 0 -3px 0 var(--rr-red);
}

/* Sub-menu accent */
.main-navigation .main-nav ul ul {
  border-top: 2px solid var(--rr-red);
}

/* ---------- Sidebar widgets ---------- */
.sidebar .widget,
.widget-area .widget {
  margin-bottom: var(--rr-space-5);
  padding-top: var(--rr-space-3);
  border-top: 3px solid var(--rr-red);
  background: var(--rr-bg-soft);
  padding: var(--rr-space-3) var(--rr-space-4) var(--rr-space-4);
}

.sidebar .widget-title,
.widget-area .widget-title {
  font-family: 'vigaregular', 'robotoregular', sans-serif;
  color: var(--rr-heading);
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 0.6em;
}

.sidebar .widget ul,
.widget-area .widget ul {
  list-style: none;
  padding: 0;
  margin: 0 0 0 var(--rr-space-2); /* breathing room from input field */
}

.sidebar .widget ul li,
.widget-area .widget ul li {
  border-bottom: 1px solid var(--rr-border);
  padding: 0.4em 0;
}

.sidebar .widget ul li:last-child,
.widget-area .widget ul li:last-child {
  border-bottom: 0;
}

/* ---------- Article / single post ---------- */
.entry-title {
  font-family: 'vigaregular', 'robotoregular', sans-serif;
  color: var(--rr-heading);
  font-size: 1.85rem;
  line-height: 1.2;
}

.entry-title a {
  color: inherit;
}

.entry-title a:hover {
  color: var(--rr-red);
  text-decoration: none;
}

.entry-meta,
.entry-header .posted-on,
.entry-header .byline {
  color: var(--rr-muted);
  font-size: 0.85rem;
}

.entry-meta a {
  color: var(--rr-muted);
}

.entry-meta a:hover {
  color: var(--rr-red);
}

.entry-content {
  line-height: 1.7;
}

.entry-content blockquote {
  border-left: 4px solid var(--rr-red);
  padding-left: 1em;
  margin-left: 0;
  color: var(--rr-heading);
  font-style: italic;
}

/* ---------- Review / star-rating block ---------- */
/* The runreviews/star-rating block lives in the core plugin
 * (class .runreviews-star-rating with .rr-star-full / .rr-star-half / .rr-star-empty).
 * The plugin already styles those; here we just give the wrapper
 * a bit of breathing room and align it with brand red. */
.wp-block-runreviews-star-rating,
.runreviews-star-rating {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 0.25em 0;
  color: var(--rr-red);
  font-size: 1.25rem;
  line-height: 1;
}

.runreviews-star-rating .rr-star-full,
.runreviews-star-rating .rr-star-half {
  color: var(--rr-red);
}

.runreviews-star-rating .rr-star-empty {
  color: #d8d8d8;
}

/* Generic review-card harmonisation — covers any legacy markup
 * that survived migration with .review-rating-block etc. */
.review-rating-block,
.ratings-row,
.rating-block {
  border: 1px solid var(--rr-border);
  border-top: 3px solid var(--rr-red);
  padding: 1em;
  margin: 1em 0;
  background: #fafafa;
}

.review-rating-block .label,
.ratings-row .label,
.rating-block .label {
  font-family: 'robotoregular', sans-serif;
  color: var(--rr-heading);
  font-weight: bold;
}

/* ---------- Buttons / CTA ---------- */
.button,
button,
input[type="submit"],
input[type="button"],
.wp-block-button__link {
  display: inline-block;
  background: var(--rr-red);
  color: #fff;
  border: 0;
  padding: 10px 20px;
  font-family: 'robotoregular', sans-serif;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
  text-decoration: none;
  border-radius: 2px;
  transition: filter 0.15s ease, background 0.15s ease;
}

.button:hover,
.button:focus,
button:hover,
button:focus,
input[type="submit"]:hover,
input[type="submit"]:focus,
input[type="button"]:hover,
input[type="button"]:focus,
.wp-block-button__link:hover,
.wp-block-button__link:focus {
  background: var(--rr-red-dark);
  color: #fff;
  filter: brightness(0.95);
  text-decoration: none;
}

/* ---------- Form fields ---------- */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="password"],
textarea,
select {
  border: 1px solid var(--rr-border);
  background: #fff;
  padding: 8px 10px;
  font-family: inherit;
  font-size: inherit;
  border-radius: 2px;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
  outline: 0;
  border-color: var(--rr-red);
  box-shadow: 0 0 0 2px rgba(241, 52, 52, 0.15);
}

/* ---------- Footer ---------- */
.site-footer,
.site-info {
  background: var(--rr-dark);
  color: #cfcfcf;
}

.site-footer a,
.site-info a {
  color: #fff;
}

.site-footer a:hover,
.site-info a:hover {
  color: var(--rr-red);
}

.footer-columns {
  background: var(--rr-dark);
  color: #cfcfcf;
  padding: 2em 0;
}

.footer-column .widget {
  background: transparent;
  border: 0;
  padding: 0;
}

.footer-column .widget-title {
  color: var(--rr-red);
  font-family: 'vigaregular', 'robotoregular', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 1em;
}

.footer-column .widget ul li {
  border-bottom: 1px solid #2a2a2a;
}

.site-info {
  border-top: 3px solid var(--rr-red);
  padding: 1em 0;
  font-size: 0.85rem;
}

/* ---------- Pagination ---------- */
.pagination .page-numbers,
.nav-links .page-numbers {
  display: inline-block;
  padding: 6px 12px;
  margin: 0 2px;
  border: 1px solid var(--rr-border);
  color: var(--rr-heading);
  background: #fff;
}

.pagination .page-numbers.current,
.pagination .page-numbers:hover,
.nav-links .page-numbers.current,
.nav-links .page-numbers:hover {
  background: var(--rr-red);
  color: #fff;
  border-color: var(--rr-red);
  text-decoration: none;
}

/* ---------- Utility ---------- */
.rr-text-brand { color: var(--rr-red); }
.rr-bg-brand { background: var(--rr-red); color: #fff; }

/* ---------- Footer columns layout ---------- */
.footer-columns {
  display: grid;
  gap: var(--rr-space-6);
  grid-template-columns: 1fr;
  max-width: var(--rr-container-max);
  margin: 0 auto;
  padding: var(--rr-space-7) var(--rr-space-5);
}

@media (min-width: 768px) {
  .footer-columns { grid-template-columns: repeat(3, 1fr); }
}

.footer-column .widget-title {
  margin-top: 0;
  margin-bottom: 1rem;
  font-size: 1rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.footer-nav {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding: 1.5rem;
  text-align: center;
}

.footer-menu {
  list-style: none;
  margin: 0 0 0 var(--rr-space-2); /* breathing room from input field */
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;
}

.footer-menu a {
  text-decoration: none;
  color: inherit;
  font-size: 0.9rem;
}

.footer-copyright {
  margin: 0 0 0 var(--rr-space-2); /* breathing room from input field */
  padding: 1rem 1.5rem 2rem;
  text-align: center;
  font-size: 0.85rem;
}

/* ---------- Site header: two-strip layout (Task 5) ---------- */
.site-header {
  background: #fff;
  border-top: 4px solid var(--rr-red);
}

.masthead-row {
  border-bottom: 1px solid var(--rr-border);
}

.masthead-inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  max-width: var(--rr-container-max);
  margin: 0 auto;
  padding: 1.25rem var(--rr-space-5);
}

.site-branding { flex: 0 0 auto; }

.site-logo-img {
  display: block;
  max-height: 65px;
  width: auto;
  height: auto;
}

.site-search {
  flex: 1 1 240px;
  max-width: 360px;
  margin-left: auto;
}

.site-search .search-form { display: flex; gap: 0.5rem; }
.site-search .search-field { flex: 1 1 auto; }

.masthead-toggle {
  display: none;
  background: transparent;
  border: 0;
  padding: 0.5rem;
  cursor: pointer;
  border-radius: var(--rr-radius-sm);
  transition: background 0.15s var(--rr-ease-out);
}

.masthead-toggle:hover,
.masthead-toggle:focus-visible {
  background: var(--rr-red);
}

.masthead-toggle span {
  display: block;
  width: 26px;
  height: 3px;
  margin: 5px 0;
  background: var(--rr-heading);
  transition:
    transform 0.2s,
    opacity 0.2s,
    background 0.15s var(--rr-ease-out);
}

.masthead-toggle:hover span,
.masthead-toggle:focus-visible span {
  background: #fff;
}

.nav-strip {
  background: var(--rr-bg-soft, #fafafa);
  position: relative;
}

/* Drawer-only chrome — hidden on desktop, revealed by the mobile
 * breakpoint below. The "Menu" label, close button, and search slot
 * only exist for the mobile drawer presentation. */
.nav-strip__header,
.nav-strip__search { display: none; }

.nav-strip-inner {
  display: flex;
  align-items: center;
  gap: 1rem;
  max-width: var(--rr-container-max);
  margin: 0 auto;
  padding: 0.5rem var(--rr-space-5);
}

.search-by-toggle {
  background: var(--rr-red);
  color: #fff;
  border: 0;
  padding: 0.5rem 1rem;
  font-family: 'robotoregular', sans-serif;
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  /* Lift above the backdrop (z:90) so hover state doesn't flicker
     when the panel opens. Without this the backdrop covers the
     button and the cursor's mouseleave/mouseenter oscillates. */
  position: relative;
  z-index: 95;
}

.search-by-toggle:hover { filter: brightness(0.92); }

.primary-nav { flex: 1 1 auto; }

.primary-menu {
  list-style: none;
  margin: 0 0 0 var(--rr-space-2); /* breathing room from input field */
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
}

.primary-menu li { margin: 0; }

.primary-menu a {
  text-decoration: none;
  font-family: 'robotoregular', sans-serif;
  font-size: 0.9rem;
  color: var(--rr-heading);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  /* Position so the underline pseudo can be absolutely-positioned
   * to the link's bottom edge without relying on padding math. */
  position: relative;
  padding-bottom: 0.35rem;
  transition: color 0.15s var(--rr-ease-out);
}

.primary-menu a::after {
  /* Slide-in underline used by both hover and current-page states.
   * Active state shows full-width red bar; hover animates from 0 → 100%. */
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--rr-red);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.22s var(--rr-ease-out);
}

.primary-menu a:hover { color: var(--rr-red); }

.primary-menu a:hover::after,
.primary-menu a:focus-visible::after {
  transform: scaleX(1);
}

/* Active page indicator — WP sets one of these classes on the matching
 * menu-item when the current request matches the menu target. We honor
 * all four because nav menus mix page links and category links, and
 * category-archive pages set _ancestor classes for parent items. */
.primary-menu li.current-menu-item > a,
.primary-menu li.current-menu-ancestor > a,
.primary-menu li.current_page_item > a,
.primary-menu li.current_page_ancestor > a {
  color: var(--rr-red);
}

.primary-menu li.current-menu-item > a::after,
.primary-menu li.current-menu-ancestor > a::after,
.primary-menu li.current_page_item > a::after,
.primary-menu li.current_page_ancestor > a::after {
  transform: scaleX(1);
}

/* "NEW" badge — opt-in via the `is-new` menu-item class set in wp-admin
 * (or pinned via transform-data.sh). Renders a small pill after the link
 * label. The dot pulses subtly to draw attention; muted when the user
 * has prefers-reduced-motion set (handled in section 19). */
/* "NEW" badge — opt-in via the `is-new` menu-item class. The badge is
 * attached to the <li> rather than the <a> so the link's underline
 * (drawn by `.primary-menu a::after`) hugs the label text and isn't
 * stretched by the badge. Positioned absolutely above the link's
 * top-right corner, with `pointer-events: none` so clicks pass through
 * to the link beneath. */
.primary-menu li.is-new {
  position: relative;
}

.primary-menu li.is-new::after {
  content: "NEW";
  position: absolute;
  top: -0.65rem;
  right: -0.5rem;
  padding: 0.08rem 0.3rem;
  background: var(--rr-red);
  color: #fff;
  font-family: 'robotoregular', sans-serif;
  font-size: 0.48rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  line-height: 1.25;
  border-radius: 999px;
  box-shadow: 0 1px 2px rgba(15, 15, 15, 0.1);
  pointer-events: none;
}

@media (max-width: 900px) {
  .masthead-toggle { display: block; margin-left: auto; }
  /* Search lives inside the drawer on mobile (relocated by main.js).
   * The masthead row keeps logo + hamburger only. */

  body.nav-open .masthead-toggle span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
  }
  body.nav-open .masthead-toggle span:nth-child(2) { opacity: 0; }
  body.nav-open .masthead-toggle span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
  }

  /* Drawer: .nav-strip is the slide-in container on mobile.
   * Flex column so the header pins to the top and content scrolls below. */
  .nav-strip {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(420px, 88vw);
    height: 100vh; /* fallback */
    height: 100dvh; /* iOS Safari + modern browsers respect dynamic viewport */
    transform: translateX(100%);
    transition: transform 0.28s var(--rr-ease-out);
    overflow-y: auto;
    overscroll-behavior: contain;
    z-index: 110;
    background: #fff;
    box-shadow: -4px 0 12px rgba(0, 0, 0, 0.16);
    display: flex;
    flex-direction: column;
  }

  body.mega-open .nav-strip { transform: translateX(0); }

  /* Drawer chrome: top "MENU" kicker + close × button. Sits above
   * the search slot, separated by a thin red rule like a magazine
   * masthead. */
  .nav-strip__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.85rem 1rem 0.85rem 1.25rem;
    border-bottom: 2px solid var(--rr-red);
    flex: 0 0 auto;
  }

  .nav-strip__label {
    font-family: 'vigaregular', 'robotoregular', sans-serif;
    font-size: 0.78rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--rr-red);
  }

  .nav-strip__close {
    background: transparent;
    border: 0;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--rr-heading);
    border-radius: var(--rr-radius-sm);
    transition:
      background 0.15s var(--rr-ease-out),
      color 0.15s var(--rr-ease-out);
  }

  .nav-strip__close span {
    font-size: 1.85rem;
    line-height: 1;
    font-family: 'robotolight', 'robotoregular', sans-serif;
  }

  .nav-strip__close:hover,
  .nav-strip__close:focus-visible {
    background: var(--rr-red);
    color: #fff;
  }

  /* Drawer search slot — receives the relocated .site-search form. */
  .nav-strip__search {
    display: block;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--rr-border);
    flex: 0 0 auto;
  }

  .nav-strip__search .site-search {
    display: block;
    flex: none;
    max-width: none;
    margin: 0;
  }

  .nav-strip__search .rr-search {
    width: 100%;
    max-width: none;
  }

  .nav-strip__search .rr-search__results {
    max-height: 50vh;
  }

  .nav-strip-inner {
    display: block;
    padding: 1rem 1.25rem 0;
    flex: 0 0 auto;
  }

  .search-by-toggle { display: none; }

  .primary-menu {
    flex-direction: column;
    gap: 0;
    margin: 0 0 1rem;
  }

  .primary-menu li { border-bottom: 1px solid var(--rr-border); }
  .primary-menu li:last-child { border-bottom: 0; }

  .primary-menu a {
    display: block;
    padding: 0.85rem 0;
  }

  /* Mobile drawer: the desktop slide-in underline doesn't read well as
   * a horizontal item in a vertical stack — each item already has its
   * own 1px row separator. Keep the active color shift, hide the
   * underline pseudo, and re-anchor the NEW badge inline at the right
   * of the row (using `li` flex) instead of floating it absolutely. */
  .primary-menu a::after { display: none; }

  .primary-menu li.is-new {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--rr-space-3);
  }

  .primary-menu li.is-new::after {
    position: static;
    box-shadow: none;
    flex: 0 0 auto;
  }
}

/* ---------- SEARCH BY mega-panel (Task 2) ---------- */
.mega-backdrop {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(15, 15, 15, 0.4);
  backdrop-filter: blur(2px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease-out;
}

.mega-backdrop[hidden] { display: none; }

body.mega-open .mega-backdrop {
  opacity: 1;
  pointer-events: auto;
}

.mega-panel {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 100;
  background: #fff;
  border-top: 1px solid var(--rr-border);
  border-bottom: 4px solid var(--rr-red);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.16);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-12px);
  transition:
    opacity 0.22s var(--rr-ease-out),
    transform 0.22s var(--rr-ease-out),
    visibility 0s linear 0.22s;
}

body.mega-open .mega-panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition:
    opacity 0.22s var(--rr-ease-out),
    transform 0.22s var(--rr-ease-out),
    visibility 0s linear 0s;
}

.mega-panel__inner {
  max-width: var(--rr-container-max);
  margin: 0 auto;
  padding: 2.5rem var(--rr-space-5) 1.5rem;
}

.mega-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 3rem;
}

.mega-column { min-width: 0; }

.mega-column__heading {
  font-family: 'vigaregular', sans-serif;
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rr-heading);
  margin: 0 0 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--rr-red);
}

.mega-column__list {
  list-style: none;
  margin: 0 0 0 var(--rr-space-2); /* breathing room from input field */
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  row-gap: 0.4rem;
}

.mega-column__list--brands {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 1.5rem;
}

.mega-column__item { margin: 0; }

.mega-column__link {
  display: block;
  padding: 0.35rem 0;
  font-family: 'robotoregular', sans-serif;
  font-size: 0.92rem;
  color: var(--rr-text);
  text-decoration: none;
  transition: color 0.15s ease-out, transform 0.15s ease-out;
}

.mega-column__link:hover,
.mega-column__link:focus-visible {
  color: var(--rr-red);
  transform: translateX(2px);
}

.mega-panel__hint {
  margin: 1.5rem 0 0;
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--rr-muted);
  text-align: right;
}

@media (max-width: 900px) {
  .mega-panel__hint { display: none; }

  /* Demote the panel to a static section inside the drawer. */
  .mega-panel {
    position: static;
    border-top: 2px solid var(--rr-red);
    border-bottom: 0;
    box-shadow: none;
    transform: none;
    opacity: 1;
    visibility: visible;
    transition: none;
  }

  body.mega-open .mega-panel {
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  /* Pad the mega-panel content so its accordion headings align with
   * the .nav-strip-inner above (matching primary-menu's 1.25rem inset).
   * Without this the section headings sit flush-left at the drawer
   * edge, looking detached from the rest of the menu. */
  .mega-panel__inner {
    padding: 0.5rem 1.25rem 1.25rem;
  }

  .mega-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .mega-column__heading {
    cursor: pointer;
    margin: 0;
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--rr-border);
    position: relative;
    /* Match the primary-menu typography so accordion headings read as
     * peers of the nav items above, not a different component. */
    font-family: 'robotoregular', sans-serif;
    font-size: 0.9rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--rr-heading);
  }

  .mega-column:last-child .mega-column__heading {
    border-bottom: 0;
  }

  .mega-column[aria-expanded="true"] .mega-column__heading {
    color: var(--rr-red);
  }

  .mega-column__heading::after {
    content: '+';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    color: var(--rr-red);
    font-family: 'vigaregular', 'robotoregular', sans-serif;
    font-size: 1.25rem;
    line-height: 1;
    transition: transform 0.18s ease-out;
  }

  .mega-column[aria-expanded="true"] .mega-column__heading::after {
    content: '−';
  }

  .mega-column__list {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.28s ease-out;
    /* Indent sub-items inward from the section heading for clear
     * parent/child hierarchy without breaking the drawer's left rail. */
    padding-left: var(--rr-space-3);
    margin-bottom: 0;
  }

  .mega-column[aria-expanded="true"] .mega-column__list {
    max-height: 800px;
    /* Add a soft top spacer so the first sub-item doesn't crash into
     * the heading rule. */
    padding-top: var(--rr-space-2);
    padding-bottom: var(--rr-space-3);
  }

  .mega-column__list--brands {
    grid-template-columns: 1fr;
    column-gap: 0;
  }

  /* Mega-panel sub-items inherit the primary-menu's row rhythm so the
   * whole drawer reads as one continuous list:
   *   - Same dark color so brand names sit at parity with top-level
   *     menu items (don't fade them with --rr-text grey)
   *   - Same per-row hairline border so accordion rows scan like
   *     primary-menu rows
   *   - Mixed case is preserved (uppercase would shout brand names
   *     like "Bowflex TreadClimbers"); the parent heading carries
   *     the uppercase weight for the section
   *   - Trim the desktop hover underline so the current-page state
   *     reads as a colour shift, not a heavy bar
   */
  .mega-column__link {
    display: block;
    padding: 0.85rem 0;
    font-family: 'robotoregular', sans-serif;
    font-size: 0.9rem;
    letter-spacing: 0.01em;
    color: var(--rr-heading);
    border-bottom: 1px solid var(--rr-border);
    border-left: 0;
    text-decoration: none;
  }

  .mega-column__item:last-child .mega-column__link {
    border-bottom: 0;
  }

  .mega-column__link:hover,
  .mega-column__link:focus-visible {
    color: var(--rr-red);
    border-bottom-color: var(--rr-border);
  }

  /* Current-page indicator: a small red leading dot rather than the
   * desktop bottom-border underline, which competed visually with
   * the row separators. */
  .mega-column__link.is-current,
  .mega-column__item.current-menu-item > .mega-column__link,
  .mega-column__item.current_page_item > .mega-column__link {
    color: var(--rr-red);
    border-bottom-color: var(--rr-border);
  }

  /* Backdrop is now visible on mobile (drawer is fixed-positioned). */
  .mega-backdrop { display: block; }
}

/* ---------- Article + sidebar grid ---------- */
.site-content-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: var(--rr-space-6);
  max-width: var(--rr-container-max);
  margin: 0 auto;
  padding: var(--rr-space-6) var(--rr-space-5);
}

.home-content,
.site-main > article { min-width: 0; }

.site-sidebar { font-size: 0.95rem; }

.site-sidebar .widget {
  margin-bottom: var(--rr-space-6);
  padding-bottom: var(--rr-space-5);
  border-bottom: 1px solid var(--rr-border);
}

.site-sidebar .widget:last-child { border-bottom: 0; }

.site-sidebar .widget-title {
  font-family: 'vigaregular', sans-serif;
  font-size: 1rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--rr-red);
  margin: 0 0 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--rr-red);
}

.site-sidebar .menu,
.site-sidebar ul {
  list-style: none;
  margin: 0 0 0 var(--rr-space-2); /* breathing room from input field */
  padding: 0;
}

.site-sidebar .menu li,
.site-sidebar ul li {
  margin: 0 0 0 var(--rr-space-2); /* breathing room from input field */
  border-bottom: 1px solid #f0f0f0;
}

.site-sidebar .menu li:last-child,
.site-sidebar ul li:last-child { border-bottom: 0; }

.site-sidebar .menu a,
.site-sidebar ul li a {
  display: block;
  padding: 0.4rem 0;
  font-size: 0.9rem;
  color: var(--rr-text);
  text-decoration: none;
}

.site-sidebar .menu a:hover,
.site-sidebar ul li a:hover { color: var(--rr-red); }

@media (max-width: 900px) {
  .site-content-wrap {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

/* ---------- Footer brand column ---------- */
.footer-column--brand {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.footer-logo-img {
  display: block;
  max-width: 240px;
  height: auto;
}

.footer-logo-link { display: inline-block; }

/* ---------- Motion preferences (a11y) ---------- */
@media (prefers-reduced-motion: reduce) {
  .mega-backdrop,
  .mega-panel,
  .mega-column__link,
  .mega-column__heading::after,
  .mega-column__list,
  .masthead-toggle span,
  .nav-strip,
  .rr-card,
  .rr-card__media img,
  .rr-hero__cta,
  .rr-tile__media,
  .rr-tile::after,
  .rr-cta-affiliate,
  .rr-share__link,
  .rr-review-detail__block,
  .rr-product-card,
  .rr-product-card::after,
  .rr-product-card__image,
  .rr-product-card__cta,
  .rr-product-card__read-arrow,
  .rr-category-empty__cta,
  .rr-category-intro a img,
  .rr-category-outro a img,
  .site-sidebar .widget_nav_menu,
  .site-sidebar .widget_nav_menu .sub-menu > li > a,
  .site-sidebar .widget_nav_menu .sub-menu > li > a::after,
  .site-sidebar .widget_nav_menu .rr-widget-see-all,
  .primary-menu a,
  .primary-menu a::after,
  .primary-menu li.is-new::after,
  .rr-deal-card,
  .rr-deal-card__logo,
  .rr-deal-card__body strong a,
  .rr-floating-cta,
  .rr-floating-cta__icon,
  .rr-floating-cta__arrow,
  .rr-search,
  .rr-search__icon,
  .rr-search__submit,
  .rr-search__result,
  .rr-contact__form-card,
  .rr-contact__aside,
  .rr-contact .wpcf7-form input[type="text"],
  .rr-contact .wpcf7-form input[type="email"],
  .rr-contact .wpcf7-form textarea,
  .rr-contact .wpcf7-form input.rr-cf7-submit,
  .rr-all-brands__card,
  .rr-all-brands__cta i,
  .rr-bbt-widget,
  .rr-bbt-widget__cta,
  .rr-bbt-widget__cta i,
  .rr-bb-widget,
  .rr-bb-widget__link,
  .rr-search-card,
  .rr-search-card__img,
  .rr-search-brand-chip,
  .rr-quiz-card,
  .rr-quiz-card__media img,
  .rr-quiz-card__title a,
  .rr-quiz-card__cta,
  .rr-quiz-card__cta::after,
  .rr-tips-list--editorial .rr-tip__source a,
  .rr-tips-list--editorial .rr-tip__source a::after,
  .nav-strip,
  .nav-strip__close,
  .rr-comment,
  .rr-comment-form__form input[type="text"],
  .rr-comment-form__form input[type="email"],
  .rr-comment-form__form input[type="url"],
  .rr-comment-form__form textarea,
  .rr-comment-form__submit,
  .rr-comment__actions a {
    transition: none;
    animation: none;
  }
  .rr-search.is-loading .rr-search__input { animation: none; background-image: none; }
  .mega-panel,
  .mega-column__link,
  .nav-strip,
  .rr-card,
  .rr-card__media img,
  .rr-hero__cta,
  .rr-tile__media,
  .rr-cta-affiliate,
  .rr-share__link,
  .rr-review-detail__block,
  .rr-product-card,
  .rr-product-card__image,
  .rr-product-card__read-arrow,
  .rr-category-empty__cta,
  .rr-category-intro a img,
  .rr-category-outro a img,
  .site-sidebar .widget_nav_menu .sub-menu > li > a::after,
  .primary-menu a::after,
  .rr-deal-card,
  .rr-floating-cta,
  .rr-floating-cta__arrow,
  .rr-search__submit,
  .rr-search__result,
  .rr-contact__form-card,
  .rr-contact__aside,
  .rr-contact .wpcf7-form input.rr-cf7-submit,
  .rr-all-brands__card,
  .rr-all-brands__cta i,
  .rr-bbt-widget__cta,
  .rr-bbt-widget__cta i,
  .rr-search-card,
  .rr-search-card__img,
  .rr-search-brand-chip,
  .rr-quiz-card,
  .rr-quiz-card__media img,
  .rr-quiz-card__cta::after,
  .rr-tips-list--editorial .rr-tip__source a::after,
  .rr-comment-form__submit {
    transform: none;
  }
}

/* ============================================================
 * Reusable layout primitives — added by homepage-chrome-restore
 * ============================================================ */

/* Section wrapper: full-bleed background + constrained inner. */
.rr-section {
  width: 100%;
  padding-block: var(--rr-space-7);
}

.rr-section__inner {
  max-width: var(--rr-container-max);
  margin: 0 auto;
  padding-inline: var(--rr-space-5);
}

.rr-section__title {
  font-family: 'vigaregular', 'robotoregular', sans-serif;
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-align: center;
  margin: 0 0 var(--rr-space-6);
  color: var(--rr-heading);
}

.rr-section--soft { background: var(--rr-bg-soft); }

/* Card pattern: thumbnail above, title below. */
.rr-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--rr-border);
  border-radius: var(--rr-radius-md);
  box-shadow: var(--rr-shadow-card);
  overflow: hidden;
  transition:
    transform 0.18s var(--rr-ease-out),
    box-shadow 0.18s var(--rr-ease-out),
    border-color 0.18s var(--rr-ease-out);
}

.rr-card:hover,
.rr-card:focus-within {
  transform: translateY(-2px);
  box-shadow: var(--rr-shadow-card-hover);
  border-color: transparent;
}

.rr-card__media {
  display: block;
  aspect-ratio: 16 / 9;
  background: var(--rr-bg-soft);
  overflow: hidden;
}

.rr-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s var(--rr-ease-out);
}

.rr-card:hover .rr-card__media img,
.rr-card:focus-within .rr-card__media img {
  transform: scale(1.04);
}

.rr-card__title {
  margin: 0 0 0 var(--rr-space-2); /* breathing room from input field */
  padding: var(--rr-space-3) var(--rr-space-4);
  font-family: 'robotoregular', sans-serif;
  font-size: 0.95rem;
  line-height: 1.35;
  color: var(--rr-heading);
}

.rr-card__title a {
  color: inherit;
  text-decoration: none;
}

.rr-card__title a:hover,
.rr-card__title a:focus-visible { color: var(--rr-red); }

/* Universal focus-visible ring — accessibility upgrade for the whole site. */
:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--rr-red);
  outline-offset: 2px;
  border-radius: var(--rr-radius-sm);
}

/* ---------- Homepage hero (Task 2) ---------- */
.rr-hero {
  position: relative;
  isolation: isolate;
  background: var(--rr-dark);
  color: #fff;
  min-height: 420px;
  display: grid;
  align-items: center;
  overflow: hidden;
  padding-block: var(--rr-space-8);
}

.rr-hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.rr-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.rr-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(135deg, rgba(15, 15, 15, 0.78) 0%, rgba(15, 15, 15, 0.45) 60%, rgba(241, 52, 52, 0.18) 100%);
}

.rr-hero:not(.rr-hero--has-image) .rr-hero__overlay {
  background:
    linear-gradient(135deg, var(--rr-dark) 0%, #2a1010 60%, var(--rr-red-dark) 100%);
}

.rr-hero__inner {
  position: relative;
  z-index: 1;
  text-align: left;
  max-width: 720px;
}

.rr-hero__eyebrow {
  margin: 0 0 var(--rr-space-3);
  font-family: 'robotoregular', sans-serif;
  font-size: 0.85rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
}

.rr-hero__headline {
  margin: 0 0 var(--rr-space-4);
  font-family: 'vigaregular', 'robotoregular', sans-serif;
  font-size: clamp(2rem, 1.4rem + 3vw, 3.5rem);
  line-height: 1.05;
  color: #fff;
}

.rr-hero__sub {
  margin: 0 0 var(--rr-space-6);
  font-family: 'robotolight', 'robotoregular', sans-serif;
  font-size: clamp(1rem, 0.9rem + 0.4vw, 1.2rem);
  color: rgba(255, 255, 255, 0.92);
  max-width: 56ch;
}

.rr-hero__ctas {
  display: flex;
  gap: var(--rr-space-4);
  flex-wrap: wrap;
}

.rr-hero__cta {
  display: inline-block;
  padding: 0.85rem 1.5rem;
  font-family: 'robotoregular', sans-serif;
  font-size: 0.95rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: var(--rr-radius-sm);
  transition: transform 0.18s var(--rr-ease-out), background 0.18s, color 0.18s, border-color 0.18s;
}

.rr-hero__cta--primary {
  background: var(--rr-red);
  color: #fff;
  border: 2px solid var(--rr-red);
}

.rr-hero__cta--primary:hover,
.rr-hero__cta--primary:focus-visible {
  background: var(--rr-red-dark);
  border-color: var(--rr-red-dark);
  color: #fff;
  text-decoration: none;
  transform: translateY(-1px);
}

.rr-hero__cta--ghost {
  background: transparent;
  color: #fff;
  border: 2px solid rgba(255, 255, 255, 0.78);
}

.rr-hero__cta--ghost:hover,
.rr-hero__cta--ghost:focus-visible {
  background: #fff;
  color: var(--rr-dark);
  border-color: #fff;
  text-decoration: none;
  transform: translateY(-1px);
}

@media (max-width: 600px) {
  .rr-hero {
    min-height: 320px;
    padding-block: var(--rr-space-7);
  }
  .rr-hero__ctas { flex-direction: column; align-items: stretch; }
  .rr-hero__cta { text-align: center; }
}

/* ---------- Popular Topics grid (Task 4) ---------- */
.rr-popular-topics .rr-topics-grid {
  display: grid;
  gap: var(--rr-space-6);
  grid-template-columns: 1fr;
}

@media (min-width: 600px) {
  .rr-popular-topics .rr-topics-grid[data-columns="2"],
  .rr-popular-topics .rr-topics-grid[data-columns="3"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 900px) {
  .rr-popular-topics .rr-topics-grid[data-columns="3"] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.rr-topics-column { min-width: 0; }

.rr-topics-column__heading {
  font-family: 'vigaregular', 'robotoregular', sans-serif;
  font-size: 1rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  margin: 0 0 var(--rr-space-4);
  padding-bottom: var(--rr-space-2);
  border-bottom: 2px solid var(--rr-red);
  color: var(--rr-heading);
}

.rr-topics-list {
  list-style: none;
  margin: 0 0 0 var(--rr-space-2); /* breathing room from input field */
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--rr-space-3);
}

.rr-topics-item { margin: 0; }

/* The card inside a topics-list is anchor-as-card. */
.rr-topics-item .rr-card {
  height: 100%;
  text-decoration: none;
}

.rr-topics-item .rr-card__title {
  font-size: 0.875rem;
  padding: var(--rr-space-2) var(--rr-space-3);
}

@media (max-width: 480px) {
  .rr-topics-list { grid-template-columns: 1fr; }
}

/* ---------- Other Resources tile grid (Task 8) ---------- */
.rr-other-resources .rr-tile-grid {
  list-style: none;
  margin: 0 0 0 var(--rr-space-2); /* breathing room from input field */
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--rr-space-3);
}

@media (min-width: 600px) {
  .rr-other-resources .rr-tile-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 900px) {
  .rr-other-resources .rr-tile-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

.rr-tile-item { margin: 0; }

.rr-tile {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--rr-radius-sm);
  background: var(--rr-bg-soft);
  text-decoration: none;
  color: #fff;
  isolation: isolate;
}

.rr-tile__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s var(--rr-ease-out);
}

.rr-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(15, 15, 15, 0.78) 0%,
    rgba(15, 15, 15, 0.30) 45%,
    rgba(15, 15, 15, 0.00) 70%
  );
  pointer-events: none;
  transition: background 0.18s var(--rr-ease-out);
  z-index: 1;
}

.rr-tile:hover::after,
.rr-tile:focus-visible::after {
  background: linear-gradient(
    to top,
    rgba(193, 25, 25, 0.85) 0%,
    rgba(15, 15, 15, 0.55) 50%,
    rgba(15, 15, 15, 0.10) 80%
  );
}

.rr-tile:hover .rr-tile__media,
.rr-tile:focus-visible .rr-tile__media {
  transform: scale(1.06);
}

.rr-tile__label {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: var(--rr-space-3);
  font-family: 'robotoregular', sans-serif;
  font-size: 0.85rem;
  line-height: 1.25;
  letter-spacing: 0.02em;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

@media (max-width: 480px) {
  .rr-tile__label { font-size: 0.78rem; padding: var(--rr-space-2); }
}

/* ---------- Card meta variant (used by Latest Reviews) ---------- */
.rr-card__meta {
  display: block;
  margin: 0 0 0 var(--rr-space-2); /* breathing room from input field */
  padding: 0 var(--rr-space-4) var(--rr-space-3);
  font-family: 'robotolight', 'robotoregular', sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--rr-muted);
  text-transform: uppercase;
}

/* ---------- Latest Reviews grid (Task 9) ---------- */
.rr-latest-reviews__grid {
  list-style: none;
  margin: 0 0 0 var(--rr-space-2); /* breathing room from input field */
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--rr-space-5);
}

@media (min-width: 600px) {
  .rr-latest-reviews__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 900px) {
  .rr-latest-reviews__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.rr-latest-reviews__item { margin: 0; }

/* The Latest Reviews cards are slightly larger than Popular Topics cards
 * (which sit 2-up inside columns). Reset the topics override so the base
 * .rr-card sizing applies. */
.rr-latest-reviews__item .rr-card {
  height: 100%;
  text-decoration: none;
}

.rr-latest-reviews__item .rr-card__media {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  background: var(--rr-bg-soft);
}

.rr-latest-reviews__item .rr-card__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ---------- Single review — section spacing (Task 26) ---------- */
.rr-review {
  display: flex;
  flex-direction: column;
  gap: var(--rr-space-7);
  padding-block: var(--rr-space-5) 0;
}

/* ---------- Single review — overview hero (Task 27) ---------- */
.rr-review-overview {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--rr-space-5);
  align-items: start;
}
@media (min-width: 900px) {
  .rr-review-overview {
    grid-template-columns: minmax(0, 420px) 1fr;
    gap: var(--rr-space-7);
  }
}
.rr-review-overview__media {
  background: var(--rr-bg-soft);
  border: 1px solid var(--rr-border);
  border-radius: var(--rr-radius-md);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rr-review-overview__media img,
.rr-review-overview__image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.rr-review-overview__copy {
  display: flex;
  flex-direction: column;
  gap: var(--rr-space-4);
}
.rr-review-overview__header {
  display: flex;
  flex-direction: column;
  gap: var(--rr-space-2);
}
@media (min-width: 600px) {
  .rr-review-overview__header {
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--rr-space-4);
  }
}
.rr-review-overview__title {
  font-family: 'vigaregular', 'robotoregular', sans-serif;
  font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.4rem);
  line-height: 1.15;
  color: var(--rr-heading);
  margin: 0 0 0 var(--rr-space-2); /* breathing room from input field */
}
.rr-review-overview__rating { font-size: 1.1rem; }
.rr-review-overview__heading {
  margin: 0 0 0 var(--rr-space-2); /* breathing room from input field */
  font-family: 'vigaregular', 'robotoregular', sans-serif;
  font-size: 1.25rem;
  letter-spacing: 0.02em;
  color: var(--rr-heading);
}
.rr-review-overview__body {
  color: var(--rr-text);
  line-height: 1.7;
}
.rr-review-overview__body p:last-child { margin-bottom: 0; }

/* ---------- Single review — affiliate CTA (Task 28) ---------- */
.rr-cta-affiliate {
  --rr-cta-color: var(--rr-red);
  display: inline-block;
  margin-top: var(--rr-space-2);
  padding: 0.95rem 1.5rem;
  background: var(--rr-cta-color);
  color: #fff;
  font-family: 'robotoregular', sans-serif;
  font-size: 1rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  border: 2px solid var(--rr-cta-color);
  border-radius: var(--rr-radius-sm);
  box-shadow: var(--rr-shadow-card);
  transition:
    transform 0.18s var(--rr-ease-out),
    box-shadow 0.18s var(--rr-ease-out),
    filter 0.18s var(--rr-ease-out);
  text-align: center;
}
.rr-cta-affiliate:hover,
.rr-cta-affiliate:focus-visible {
  transform: translateY(-1px);
  box-shadow: var(--rr-shadow-card-hover);
  filter: brightness(0.93);
  color: #fff;
  text-decoration: none;
}
@media (max-width: 599px) {
  .rr-cta-affiliate { display: block; width: 100%; }
}

/* ---------- Single review — specs table (Task 29) ---------- */
.rr-specs__heading {
  font-family: 'vigaregular', 'robotoregular', sans-serif;
  font-size: 1.5rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--rr-heading);
  margin: 0 0 var(--rr-space-4);
  padding-bottom: var(--rr-space-2);
  border-bottom: 3px solid var(--rr-red);
}
.rr-specs-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
  border: 1px solid var(--rr-border);
  border-radius: var(--rr-radius-md);
  overflow: hidden;
}
.rr-specs-table thead th {
  text-align: left;
  padding: var(--rr-space-3) var(--rr-space-4);
  background: var(--rr-dark);
  color: #fff;
  font-family: 'robotoregular', sans-serif;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-bottom: 2px solid var(--rr-red);
}
.rr-specs-table tbody th,
.rr-specs-table tbody td {
  padding: var(--rr-space-3) var(--rr-space-4);
  border-bottom: 1px solid var(--rr-border);
  vertical-align: top;
  text-align: left;
}
.rr-specs-table tbody th {
  width: 38%;
  color: var(--rr-heading);
  font-weight: 600;
  background: #fff;
}
.rr-specs-table tbody td { color: var(--rr-text); background: #fff; }
.rr-specs-table tbody tr:nth-child(even) th,
.rr-specs-table tbody tr:nth-child(even) td { background: var(--rr-bg-soft); }
.rr-specs-table tbody tr:last-child th,
.rr-specs-table tbody tr:last-child td { border-bottom: 0; }
@media (max-width: 599px) {
  .rr-specs-table tbody th { width: 50%; }
  .rr-specs-table { font-size: 0.85rem; }
}

/* ---------- Single review — detail blocks (Task 30) ---------- */
.rr-review-detail {
  display: flex;
  flex-direction: column;
  gap: var(--rr-space-7);
}
.rr-review-detail__group {
  display: flex;
  flex-direction: column;
  gap: var(--rr-space-5);
}
.rr-review-detail__heading {
  font-family: 'vigaregular', 'robotoregular', sans-serif;
  font-size: clamp(1.4rem, 1.1rem + 0.7vw, 1.75rem);
  letter-spacing: 0.02em;
  color: var(--rr-heading);
  margin: 0 0 0 var(--rr-space-2); /* breathing room from input field */
  padding-bottom: var(--rr-space-2);
  border-bottom: 3px solid var(--rr-red);
}
.rr-review-detail__block {
  display: flex;
  flex-direction: column;
  gap: var(--rr-space-2);
  padding: var(--rr-space-3) var(--rr-space-4);
  background: var(--rr-bg-soft);
  border-left: 3px solid var(--rr-border);
  border-radius: 0 var(--rr-radius-sm) var(--rr-radius-sm) 0;
  transition: border-left-color 0.18s var(--rr-ease-out), background 0.18s var(--rr-ease-out);
}
.rr-review-detail__block:hover { border-left-color: var(--rr-red); background: #fff; }
.rr-review-detail__subheading {
  font-family: 'robotoregular', sans-serif;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--rr-heading);
  margin: 0 0 0 var(--rr-space-2); /* breathing room from input field */
}
.rr-review-detail__body { color: var(--rr-text); line-height: 1.7; }
.rr-review-detail__body p:last-child { margin-bottom: 0; }

/* ---------- Single review — share strip (Task 31) ---------- */
.rr-share {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rr-space-2);
  align-items: center;
  margin-top: var(--rr-space-5);
  padding: var(--rr-space-4) 0;
  border-top: 1px solid var(--rr-border);
  border-bottom: 1px solid var(--rr-border);
}
.rr-share::before {
  content: attr(aria-label);
  font-family: 'robotoregular', sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rr-muted);
  margin-right: var(--rr-space-2);
}
.rr-share__link {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--rr-bg-soft);
  color: var(--rr-heading);
  border: 1px solid var(--rr-border);
  border-radius: var(--rr-radius-sm);
  text-decoration: none;
  transition:
    background 0.18s var(--rr-ease-out),
    color 0.18s var(--rr-ease-out),
    transform 0.18s var(--rr-ease-out),
    border-color 0.18s var(--rr-ease-out);
}
.rr-share__link:hover,
.rr-share__link:focus-visible {
  background: var(--rr-red);
  color: #fff;
  border-color: var(--rr-red);
  transform: translateY(-1px);
  text-decoration: none;
}

/* ---------- Sidebar related-reviews (Task 32) ---------- */
.rr-related-reviews__heading {
  /* Inherits .widget-title style from the sidebar widgets section. */
}
.rr-related-reviews__list {
  list-style: none;
  margin: 0 0 0 var(--rr-space-2); /* breathing room from input field */
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--rr-space-3);
}
.rr-related-reviews__item { margin: 0; }
.rr-related-reviews__item .rr-card {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  border: 1px solid var(--rr-border);
  background: #fff;
  height: auto;
  box-shadow: none;
  border-radius: var(--rr-radius-sm);
  text-decoration: none;
}
.rr-related-reviews__item .rr-card:hover {
  box-shadow: var(--rr-shadow-card);
  transform: none;
  border-color: var(--rr-red);
}
.rr-related-reviews__item .rr-card__media {
  flex: 0 0 84px;
  aspect-ratio: 4 / 3;
  background: var(--rr-bg-soft);
  border-radius: 0;
}
.rr-related-reviews__item .rr-card__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.rr-related-reviews__item .rr-card__title {
  flex: 1;
  padding: var(--rr-space-2) var(--rr-space-3);
  font-size: 0.85rem;
  line-height: 1.3;
}

/* ---------- Breadcrumbs (Task 33) ---------- */
.rr-breadcrumbs {
  /* Breadcrumbs render inside .site-content-wrap, which is a 2-column
   * grid (article + sidebar) on single/page templates. Without this
   * grid-column override, the nav would consume the first grid cell
   * and force the article into the 300px sidebar column. */
  grid-column: 1 / -1;
  margin: 0 0 var(--rr-space-4);
  padding: var(--rr-space-3) 0;
  font-family: 'robotoregular', sans-serif;
  font-size: 0.85rem;
  color: var(--rr-muted);
  border-bottom: 1px solid var(--rr-border);
}

.rr-breadcrumbs__list {
  list-style: none;
  margin: 0 0 0 var(--rr-space-2); /* breathing room from input field */
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.5rem;
  align-items: center;
}

.rr-breadcrumbs__item {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.rr-breadcrumbs__item:not(:last-child)::after {
  content: "›";
  color: var(--rr-border);
  font-size: 1rem;
  line-height: 1;
}

.rr-breadcrumbs__link {
  color: var(--rr-muted);
  text-decoration: none;
  transition: color 0.15s var(--rr-ease-out);
}

.rr-breadcrumbs__link:hover,
.rr-breadcrumbs__link:focus-visible {
  color: var(--rr-red);
  text-decoration: underline;
}

.rr-breadcrumbs__current {
  color: var(--rr-heading);
  font-weight: 600;
}

/* ---------- Category archive (Task 34) ---------- */
.rr-category-page {
  display: flex;
  flex-direction: column;
  gap: var(--rr-space-7);
}

/* Editorial hero — image right, copy left (≥900px). Matches the spirit of
 * the single-review overview hero: showcase product image + brand title +
 * star rating + lede + affiliate CTA. */
.rr-category-hero {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--rr-space-5);
  align-items: center;
}
@media (min-width: 900px) {
  .rr-category-hero {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: var(--rr-space-7);
  }
}

/* CPT taxonomy archives (workouts, advice, faq, news, accessories,
 * testimonials) suppress the media slot when no hero image exists,
 * so the hero collapses to a single-column copy block at every width. */
.rr-category-hero--no-media {
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .rr-category-hero--no-media {
    grid-template-columns: 1fr;
  }
}

.rr-category-hero__copy {
  display: flex;
  flex-direction: column;
  gap: var(--rr-space-4);
  /* Order on mobile: copy stacks below image (image first reads better
   * on small screens — it's the hook). */
  order: 2;
}
@media (min-width: 900px) {
  .rr-category-hero__copy { order: 0; }
}

.rr-category-hero__eyebrow {
  margin: 0 0 0 var(--rr-space-2); /* breathing room from input field */
  font-family: 'robotoregular', sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--rr-muted);
}

.rr-category-hero__title {
  margin: 0 0 0 var(--rr-space-2); /* breathing room from input field */
  font-family: 'vigaregular', 'robotoregular', sans-serif;
  font-size: clamp(2rem, 1.4rem + 2vw, 3rem);
  line-height: 1.05;
  letter-spacing: 0.01em;
  color: var(--rr-heading);
}

.rr-category-hero__rating {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--rr-space-2);
  font-size: 1.1rem;
  line-height: 1;
}
.rr-category-hero__rating .runreviews-star-rating {
  font-size: 1.25rem;
  line-height: 1;
}
.rr-category-hero__rating-value {
  font-family: 'robotoregular', sans-serif;
  font-weight: 600;
  color: var(--rr-heading);
  font-size: 1.05rem;
}
.rr-category-hero__rating-suffix {
  font-family: 'robotoregular', sans-serif;
  font-size: 0.85rem;
  color: var(--rr-muted);
}

.rr-category-hero__lede {
  margin: 0 0 0 var(--rr-space-2); /* breathing room from input field */
  font-family: 'robotolight', 'robotoregular', sans-serif;
  font-size: 1.1rem;
  line-height: 1.6;
  color: var(--rr-text);
}

.rr-category-hero__cta {
  align-self: flex-start;
  padding: 1rem 1.75rem;
  font-size: 1.02rem;
}

.rr-category-hero__media {
  order: 1;
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--rr-bg-soft);
  border: 1px solid var(--rr-border);
  border-radius: var(--rr-radius-md);
  padding: var(--rr-space-5);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (min-width: 900px) {
  .rr-category-hero__media { order: 0; }
}
.rr-category-hero__media img {
  display: block;
  /* Override any width/height attributes baked into the migrated <img>
   * markup so the showcase image fills the hero slot proportionally. */
  width: 100% !important;
  height: 100% !important;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  margin: 0 0 0 var(--rr-space-2); /* breathing room from input field */
  float: none !important;
}
.rr-category-hero--no-image .rr-category-hero__media {
  background:
    radial-gradient(circle at 75% 25%, rgba(241, 52, 52, 0.08), transparent 60%),
    var(--rr-bg-soft);
}
.rr-category-hero__watermark {
  font-family: 'vigaregular', 'robotoregular', sans-serif;
  font-size: clamp(6rem, 14vw, 10rem);
  line-height: 1;
  color: var(--rr-red);
  opacity: 0.12;
  user-select: none;
}

/* Editorial body — H2/H3 inside intro/outro mirror the single-review
 * detail typography (viga display H2 with red 3px underline, roboto
 * semibold H3). */
.rr-category-intro,
.rr-category-outro {
  color: var(--rr-text);
  line-height: 1.7;
}
.rr-category-intro p,
.rr-category-outro p {
  margin: 0 0 var(--rr-space-4);
  line-height: 1.7;
}
.rr-category-intro p:first-child,
.rr-category-outro p:first-child { margin-top: 0; }
.rr-category-intro p:last-child,
.rr-category-outro p:last-child { margin-bottom: 0; }

.rr-category-intro h2,
.rr-category-outro h2 {
  margin: var(--rr-space-6) 0 var(--rr-space-4);
  padding-bottom: var(--rr-space-2);
  font-family: 'vigaregular', 'robotoregular', sans-serif;
  font-size: clamp(1.4rem, 1.1rem + 0.7vw, 1.75rem);
  line-height: 1.2;
  letter-spacing: 0.02em;
  color: var(--rr-heading);
  border-bottom: 3px solid var(--rr-red);
}
.rr-category-intro h2:first-child,
.rr-category-outro h2:first-child { margin-top: 0; }

.rr-category-intro h3,
.rr-category-outro h3 {
  margin: var(--rr-space-5) 0 var(--rr-space-2);
  font-family: 'robotoregular', sans-serif;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--rr-heading);
}

.rr-category-intro ul,
.rr-category-outro ul,
.rr-category-intro ol,
.rr-category-outro ol {
  margin: 0 0 var(--rr-space-4) var(--rr-space-5);
  padding: 0;
}
.rr-category-intro li,
.rr-category-outro li {
  margin-bottom: var(--rr-space-2);
  line-height: 1.7;
}

.rr-category-intro img,
.rr-category-outro img {
  max-width: 100%;
  height: auto;
  border-radius: var(--rr-radius-sm);
}

/* Floated images: keep functional but soften corners + tighten margins. */
.rr-category-intro .alignright,
.rr-category-outro .alignright {
  float: right;
  margin: 0 0 var(--rr-space-3) var(--rr-space-4);
  max-width: 45%;
  border-radius: var(--rr-radius-sm);
}
.rr-category-intro .alignleft,
.rr-category-outro .alignleft {
  float: left;
  margin: 0 var(--rr-space-4) var(--rr-space-3) 0;
  max-width: 45%;
  border-radius: var(--rr-radius-sm);
}
.rr-category-intro .aligncenter,
.rr-category-outro .aligncenter {
  display: block;
  margin: var(--rr-space-4) auto;
}
@media (max-width: 599px) {
  .rr-category-intro .alignright,
  .rr-category-outro .alignright,
  .rr-category-intro .alignleft,
  .rr-category-outro .alignleft {
    float: none;
    display: block;
    margin: var(--rr-space-3) auto;
    max-width: 100%;
  }
}

/* Legacy <center> elements: render as a soft centered callout — feels
 * like a featured note inside the editorial flow without competing with
 * the main hero CTA. */
.rr-category-intro center,
.rr-category-outro center {
  display: block;
  margin: var(--rr-space-5) 0;
  padding: var(--rr-space-4) var(--rr-space-5);
  background: var(--rr-bg-soft);
  border-left: 3px solid var(--rr-red);
  border-radius: 0 var(--rr-radius-sm) var(--rr-radius-sm) 0;
  text-align: center;
  color: var(--rr-text);
}
.rr-category-intro center a,
.rr-category-outro center a {
  font-family: 'robotoregular', sans-serif;
  font-weight: 600;
  color: var(--rr-red);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}
.rr-category-intro center a:hover,
.rr-category-outro center a:hover,
.rr-category-intro center a:focus-visible,
.rr-category-outro center a:focus-visible { color: var(--rr-red-dark); }

/* Comparison-chart-like images linked from inside body content: present
 * as a tasteful callout. */
.rr-category-intro a:has(> img),
.rr-category-outro a:has(> img) {
  display: block;
  margin: var(--rr-space-5) auto;
  max-width: 100%;
  text-align: center;
  border: 1px solid var(--rr-border);
  border-radius: var(--rr-radius-md);
  padding: var(--rr-space-3);
  background: #fff;
  box-shadow: var(--rr-shadow-card);
  transition: box-shadow 0.18s var(--rr-ease-out), transform 0.18s var(--rr-ease-out);
}
.rr-category-intro a:has(> img):hover,
.rr-category-outro a:has(> img):hover {
  box-shadow: var(--rr-shadow-card-hover);
  transform: translateY(-2px);
}
.rr-category-intro a > img,
.rr-category-outro a > img {
  display: block;
  margin: 0 auto;
}

/* Visual separator between intro and outro when both exist. */
.rr-category-outro--has-intro {
  padding-top: var(--rr-space-7);
  border-top: 1px solid var(--rr-border);
}

/* Product grid */
.rr-product-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--rr-space-5);
}
@media (min-width: 600px) {
  .rr-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  .rr-product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Refined product card — feels like a premium retail listing tile.
 * 3px red bottom bar slides up on hover (::after). */
.rr-product-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--rr-space-3);
  padding: var(--rr-space-4);
  background: #fff;
  border: 1px solid var(--rr-border);
  border-radius: var(--rr-radius-md);
  box-shadow: var(--rr-shadow-card);
  overflow: hidden;
  transition:
    transform 0.22s var(--rr-ease-out),
    box-shadow 0.22s var(--rr-ease-out),
    border-color 0.22s var(--rr-ease-out);
}
.rr-product-card::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 0;
  background: var(--rr-red);
  transition: height 0.22s var(--rr-ease-out);
}
.rr-product-card:hover,
.rr-product-card:focus-within {
  transform: translateY(-3px);
  box-shadow: var(--rr-shadow-card-hover);
  border-color: transparent;
}
.rr-product-card:hover::after,
.rr-product-card:focus-within::after { height: 3px; }

.rr-product-card__link {
  display: flex;
  flex-direction: column;
  gap: var(--rr-space-3);
  text-decoration: none;
  color: inherit;
}
.rr-product-card__link:hover { text-decoration: none; }

.rr-product-card__media {
  display: block;
  aspect-ratio: 4 / 3;
  background: var(--rr-bg-soft);
  border-radius: var(--rr-radius-sm);
  overflow: hidden;
  position: relative;
  box-shadow: inset 0 -8px 12px -8px rgba(0, 0, 0, 0.06);
}
.rr-product-card__media img,
.rr-product-card__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 0.4s var(--rr-ease-out);
}
.rr-product-card:hover .rr-product-card__image,
.rr-product-card:focus-within .rr-product-card__image {
  transform: scale(1.05);
}

.rr-product-card__badge {
  position: absolute;
  top: var(--rr-space-2);
  right: var(--rr-space-2);
  z-index: 1;
  padding: 0.3rem 0.55rem;
  background: var(--rr-red);
  color: #fff;
  font-family: 'robotoregular', sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: var(--rr-radius-sm);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
  pointer-events: none;
}

.rr-product-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--rr-space-2);
  flex: 1 1 auto;
}

.rr-product-card__title {
  margin: 0 0 0 var(--rr-space-2); /* breathing room from input field */
  font-family: 'robotoregular', sans-serif;
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--rr-heading);
  transition: color 0.18s var(--rr-ease-out);
}
.rr-product-card__link:hover .rr-product-card__title,
.rr-product-card__link:focus-visible .rr-product-card__title { color: var(--rr-red); }

.rr-product-card__rating {
  display: inline-flex;
  align-items: baseline;
  gap: var(--rr-space-2);
  line-height: 1;
}
.rr-product-card__rating .runreviews-star-rating { line-height: 1; }
.rr-product-card__rating-value {
  font-family: 'robotoregular', sans-serif;
  font-size: 0.85rem;
  color: var(--rr-muted);
}

.rr-product-card__read {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: 'robotoregular', sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rr-red);
}
.rr-product-card__read-arrow {
  display: inline-block;
  transition: transform 0.18s var(--rr-ease-out);
}
.rr-product-card__link:hover .rr-product-card__read,
.rr-product-card__link:focus-visible .rr-product-card__read { text-decoration: underline; }
.rr-product-card__link:hover .rr-product-card__read-arrow,
.rr-product-card__link:focus-visible .rr-product-card__read-arrow {
  transform: translateX(2px);
}

.rr-product-card__cta {
  /* Inherits .rr-cta-affiliate base styles. Override sizing for inline
   * card placement (smaller, full-width, pinned to card bottom by the
   * flex container). */
  margin-top: auto;
  width: 100%;
  padding: 0.65rem 1rem;
  font-size: 0.82rem;
}

/* Empty state — warmer, brand-accented. */
.rr-category-empty {
  margin: 0 0 0 var(--rr-space-2); /* breathing room from input field */
  padding: var(--rr-space-7) var(--rr-space-6);
  background: var(--rr-bg-soft);
  border: 1px solid var(--rr-border);
  border-radius: var(--rr-radius-md);
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: var(--rr-space-3);
  align-items: center;
}
.rr-category-empty__title {
  margin: 0 0 0 var(--rr-space-2); /* breathing room from input field */
  font-family: 'vigaregular', 'robotoregular', sans-serif;
  font-size: clamp(1.4rem, 1.1rem + 0.7vw, 1.75rem);
  line-height: 1.2;
  color: var(--rr-heading);
  padding-bottom: var(--rr-space-2);
  border-bottom: 3px solid var(--rr-red);
}
.rr-category-empty__body {
  margin: 0 0 0 var(--rr-space-2); /* breathing room from input field */
  max-width: 42ch;
  color: var(--rr-text);
  line-height: 1.6;
}
.rr-category-empty__cta {
  display: inline-block;
  margin-top: var(--rr-space-2);
  padding: 0.75rem 1.5rem;
  background: var(--rr-red);
  color: #fff;
  font-family: 'robotoregular', sans-serif;
  font-size: 0.95rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: var(--rr-radius-sm);
  transition:
    background 0.18s var(--rr-ease-out),
    transform 0.18s var(--rr-ease-out);
}
.rr-category-empty__cta:hover,
.rr-category-empty__cta:focus-visible {
  background: var(--rr-red-dark);
  color: #fff;
  text-decoration: none;
  transform: translateY(-1px);
}

/* ---------- Choose By Price or Type (Task 35) ---------- */
.rr-choose-by {
  /* Reuses .rr-section + .rr-section--soft + .rr-section__inner from
   * homepage chrome. Just adds the per-group structure inside. */
}

.rr-choose-by__group {
  margin-top: var(--rr-space-6);
}

.rr-choose-by__group:first-of-type {
  margin-top: 0;
}

.rr-choose-by__group-heading {
  font-family: 'vigaregular', 'robotoregular', sans-serif;
  font-size: 1rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  margin: 0 0 var(--rr-space-4);
  padding-bottom: var(--rr-space-2);
  color: var(--rr-heading);
  position: relative;
}

.rr-choose-by__group-heading::after {
  content: "";
  display: block;
  width: 48px;
  height: 2px;
  background: var(--rr-red);
  margin: var(--rr-space-2) auto 0;
}

/* Grid sizing for the Choose-By tile groups. The base .rr-tile-grid
 * declarations live under `.rr-other-resources .rr-tile-grid` (Task 8),
 * so we mirror the same breakpoints here for `.rr-choose-by`. */
.rr-choose-by .rr-tile-grid {
  list-style: none;
  margin: 0 0 0 var(--rr-space-2); /* breathing room from input field */
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--rr-space-3);
}

@media (min-width: 600px) {
  .rr-choose-by .rr-tile-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 900px) {
  .rr-choose-by .rr-tile-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

/* ---------- Sidebar widget polish (Task 36) ---------- */
/* Editorial-index look: white card container, red top accent, item-count
 * chip, redundant-parent suppression, 2-col Brands, hover chevron, current-
 * page dot. Scoped strictly to `.site-sidebar` so the homepage Other
 * Resources / related-reviews / footer widget contexts are untouched. */

/* Card container — overrides section 6 + section 17 baseline. */
.site-sidebar .widget_nav_menu {
  background: #fff;
  border: 1px solid var(--rr-border);
  border-top: 3px solid var(--rr-red);
  border-radius: var(--rr-radius-md);
  box-shadow: var(--rr-shadow-card);
  padding: var(--rr-space-3) var(--rr-space-4) var(--rr-space-4);
  margin-bottom: var(--rr-space-5);
  padding-bottom: var(--rr-space-4);
  /* Override section 17's bottom-border separator — cards don't need it. */
  border-bottom: 1px solid var(--rr-border);
  transition:
    border-color 0.18s var(--rr-ease-out),
    box-shadow 0.18s var(--rr-ease-out);
}

.site-sidebar .widget_nav_menu:hover {
  border-color: #d8d8d8;
  box-shadow: var(--rr-shadow-card-hover);
}

/* Widget title — keep red border-bottom + viga + uppercase. Add inline
 * count chip rendered by sidebar-widgets.js. */
.site-sidebar .widget_nav_menu .widget-title {
  display: flex;
  align-items: baseline;
  gap: var(--rr-space-2);
  margin: 0 0 var(--rr-space-3);
}

.site-sidebar .widget_nav_menu .rr-widget-count {
  font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  font-feature-settings: 'tnum' 1;
  font-size: 0.7rem;
  letter-spacing: 0;
  color: var(--rr-muted);
  text-transform: none;
  font-weight: normal;
}

.site-sidebar .widget_nav_menu .rr-widget-count::before {
  content: "·";
  margin-right: 0.35em;
  color: var(--rr-border);
}

/* Suppress the redundant top-level menu link (the parent label is already
 * the widget H2). Promote the .sub-menu children to top-level look. */
.site-sidebar .widget_nav_menu .menu > .menu-item-has-children > a:first-child {
  display: none;
}

.site-sidebar .widget_nav_menu .menu > .menu-item-has-children {
  border-bottom: 0;
  padding: 0;
}

.site-sidebar .widget_nav_menu .sub-menu {
  list-style: none;
  margin: 0 0 0 var(--rr-space-2); /* breathing room from input field */
  padding: 0;
}

/* Refined link styling — flex + chevron reveal on hover. */
.site-sidebar .widget_nav_menu .sub-menu > li {
  margin: 0 0 0 var(--rr-space-2); /* breathing room from input field */
  padding: 0;
  border-bottom: 1px solid var(--rr-border);
}

.site-sidebar .widget_nav_menu .sub-menu > li:last-child {
  border-bottom: 0;
}

.site-sidebar .widget_nav_menu .sub-menu > li > a {
  display: flex;
  align-items: baseline;
  gap: var(--rr-space-2);
  padding: var(--rr-space-2) 0;
  font-family: 'robotoregular', sans-serif;
  font-size: 0.85rem;
  color: var(--rr-text);
  text-decoration: none;
  transition: color 0.18s var(--rr-ease-out);
}

.site-sidebar .widget_nav_menu .sub-menu > li > a::after {
  content: "›";
  margin-left: auto;
  color: var(--rr-red);
  font-size: 1rem;
  line-height: 1;
  opacity: 0;
  transform: translateX(-4px);
  transition:
    opacity 0.18s var(--rr-ease-out),
    transform 0.18s var(--rr-ease-out);
}

.site-sidebar .widget_nav_menu .sub-menu > li > a:hover,
.site-sidebar .widget_nav_menu .sub-menu > li > a:focus-visible {
  color: var(--rr-heading);
}

.site-sidebar .widget_nav_menu .sub-menu > li > a:hover::after,
.site-sidebar .widget_nav_menu .sub-menu > li > a:focus-visible::after {
  opacity: 1;
  transform: translateX(0);
}

/* Current-page indicator — small red dot + bolder text. Matches a sub-menu
 * item that is the active page itself, OR the taxonomy parent of the
 * current post (e.g. "Freemotion" while on a Freemotion review). */
.site-sidebar .widget_nav_menu .sub-menu .current-menu-item > a,
.site-sidebar .widget_nav_menu .sub-menu .current-menu-parent > a,
.site-sidebar .widget_nav_menu .sub-menu .current-menu-ancestor > a,
.site-sidebar .widget_nav_menu .sub-menu .current-post-parent > a,
.site-sidebar .widget_nav_menu .sub-menu .current-post-ancestor > a {
  color: var(--rr-heading);
  font-weight: 600;
}

.site-sidebar .widget_nav_menu .sub-menu .current-menu-item > a::before,
.site-sidebar .widget_nav_menu .sub-menu .current-menu-parent > a::before,
.site-sidebar .widget_nav_menu .sub-menu .current-menu-ancestor > a::before,
.site-sidebar .widget_nav_menu .sub-menu .current-post-parent > a::before,
.site-sidebar .widget_nav_menu .sub-menu .current-post-ancestor > a::before {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--rr-red);
  flex: 0 0 4px;
  align-self: center;
  /* The link is a flex row with gap; no margin needed. */
}

/* "See all →" footer link — appended by sidebar-widgets.js to each widget
 * that had a redundant parent. Brand-red, right-aligned, separated by a
 * thin top border. */
.site-sidebar .widget_nav_menu .rr-widget-see-all {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  margin-top: var(--rr-space-3);
  padding-top: var(--rr-space-3);
  border-top: 1px solid var(--rr-border);
  font-family: 'robotoregular', sans-serif;
  font-size: 0.78rem;
  color: var(--rr-red);
  text-decoration: none;
  letter-spacing: 0.02em;
  width: 100%;
  justify-content: flex-end;
  transition: color 0.18s var(--rr-ease-out);
}

.site-sidebar .widget_nav_menu .rr-widget-see-all:hover,
.site-sidebar .widget_nav_menu .rr-widget-see-all:focus-visible {
  color: var(--rr-red-dark);
  text-decoration: underline;
}

/* ---------- Deals page (Task 37) ---------- */
.rr-deals {
  display: flex;
  flex-direction: column;
  gap: var(--rr-space-6);
}

.rr-deals__banner {
  padding: var(--rr-space-4) var(--rr-space-5);
  background: var(--rr-bg-soft);
  border-left: 3px solid var(--rr-red);
  border-radius: var(--rr-radius-sm);
  color: var(--rr-heading);
  font-size: 0.95rem;
}
.rr-deals__banner p:last-child { margin-bottom: 0; }
.rr-deals__banner strong { color: var(--rr-red); }
.rr-deals__banner font[color="red"] { color: var(--rr-red); }

.rr-deals__grid {
  list-style: none;
  margin: 0 0 0 var(--rr-space-2); /* breathing room from input field */
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--rr-space-4);
}

/* Two-column outer grid at sidebar-flanked widths — matches the
 * original site's `col-md-6` layout (2 cards per row at desktop). The
 * single-column article width here is ~820px, so 2-up gives ~395px
 * cards, comfortable for a compact logo + 2-line description. */
@media (min-width: 720px) {
  .rr-deals__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.rr-deal-card {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: var(--rr-space-3);
  align-items: center;
  padding: var(--rr-space-3) var(--rr-space-4);
  background: #fff;
  border: 1px solid var(--rr-border);
  border-radius: var(--rr-radius-md);
  box-shadow: var(--rr-shadow-card);
  transition:
    transform 0.18s var(--rr-ease-out),
    box-shadow 0.18s var(--rr-ease-out),
    border-color 0.18s var(--rr-ease-out);
}

/* Below 480px, stack logo on top so the description has full width. */
@media (max-width: 479px) {
  .rr-deal-card {
    grid-template-columns: 1fr;
    gap: var(--rr-space-3);
  }
}

.rr-deal-card:hover,
.rr-deal-card:focus-within {
  transform: translateY(-2px);
  box-shadow: var(--rr-shadow-card-hover);
  border-color: transparent;
}

.rr-deal-card__media {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--rr-bg-soft);
  border-radius: var(--rr-radius-sm);
  aspect-ratio: 4 / 3;
  padding: var(--rr-space-3);
}

.rr-deal-card__logo {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.rr-deal-card__body {
  color: var(--rr-text);
  line-height: 1.6;
  font-size: 0.95rem;
}
.rr-deal-card__body p:last-child { margin-bottom: 0; }
.rr-deal-card__body p:first-child { margin-top: 0; }
.rr-deal-card__body strong a {
  display: inline-block;
  margin-top: var(--rr-space-2);
  padding: 0.55rem 1rem;
  background: var(--rr-red);
  color: #fff;
  text-transform: uppercase;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  border-radius: var(--rr-radius-sm);
  text-decoration: none;
  transition: background 0.15s var(--rr-ease-out);
}
.rr-deal-card__body strong a:hover,
.rr-deal-card__body strong a:focus-visible {
  background: var(--rr-red-dark);
  color: #fff;
  text-decoration: none;
}

.rr-deals__bottom {
  color: var(--rr-text);
  line-height: 1.7;
}
.rr-deals__bottom h2 {
  font-family: 'vigaregular', 'robotoregular', sans-serif;
  font-size: clamp(1.4rem, 1.1rem + 0.7vw, 1.75rem);
  letter-spacing: 0.02em;
  color: var(--rr-heading);
  margin: var(--rr-space-7) 0 var(--rr-space-3);
  padding-bottom: var(--rr-space-2);
  border-bottom: 3px solid var(--rr-red);
}
.rr-deals__bottom h2:first-child { margin-top: 0; }
.rr-deals__bottom h3 {
  font-family: 'robotoregular', sans-serif;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--rr-heading);
  margin: var(--rr-space-5) 0 var(--rr-space-2);
}
.rr-deals__bottom p { margin: 0 0 var(--rr-space-4); }
.rr-deals__bottom p:last-child { margin-bottom: 0; }

/* ---------- Floating deals CTA (Task 38) ---------- */
.rr-floating-cta {
  position: fixed;
  right: var(--rr-space-5);
  bottom: var(--rr-space-5);
  z-index: 80;
  display: inline-grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--rr-space-3);
  align-items: center;
  padding: 0.7rem 1.1rem 0.7rem 0.9rem;
  background:
    linear-gradient(180deg, var(--rr-red) 0%, var(--rr-red-dark) 100%);
  color: #fff;
  text-decoration: none;
  border-radius: 999px;
  /* Stacked shadow: a tight contact shadow + a softer ambient lift to
   * pop the CTA off the page without feeling cartoonish. */
  box-shadow:
    0 1px 2px rgba(15, 15, 15, 0.18),
    0 8px 24px rgba(241, 52, 52, 0.32);
  transition:
    transform 0.18s var(--rr-ease-out),
    box-shadow 0.22s var(--rr-ease-out);
  /* Entrance: slide up + fade in after the page has settled so it
   * doesn't compete with the primary content's first impression. */
  animation: rr-floating-cta-in 0.42s var(--rr-ease-out) 0.8s both;
}

.rr-floating-cta:hover,
.rr-floating-cta:focus-visible {
  color: #fff;
  text-decoration: none;
  transform: translateY(-2px) scale(1.02);
  box-shadow:
    0 2px 4px rgba(15, 15, 15, 0.22),
    0 16px 36px rgba(241, 52, 52, 0.38);
}

.rr-floating-cta__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  /* Subtle "live" pulse — slow, low-contrast ring expanding from the
   * icon. Reads as a quiet beacon without being a flashing demand. */
  box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.55);
  animation: rr-floating-cta-pulse 2.4s var(--rr-ease-out) infinite;
}

.rr-floating-cta__copy {
  display: flex;
  flex-direction: column;
  gap: 0;
  line-height: 1.1;
  font-family: 'robotoregular', sans-serif;
}

.rr-floating-cta__eyebrow {
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.86;
}

.rr-floating-cta__label {
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  margin-top: 0.1rem;
}

.rr-floating-cta__arrow {
  font-size: 1.15rem;
  line-height: 1;
  font-weight: 600;
  margin-left: var(--rr-space-1);
  transition: transform 0.18s var(--rr-ease-out);
}

.rr-floating-cta:hover .rr-floating-cta__arrow,
.rr-floating-cta:focus-visible .rr-floating-cta__arrow {
  transform: translateX(3px);
}

@keyframes rr-floating-cta-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes rr-floating-cta-pulse {
  0%   { box-shadow: 0 0 0 0   rgba(255, 255, 255, 0.55); }
  70%  { box-shadow: 0 0 0 10px rgba(255, 255, 255, 0); }
  100% { box-shadow: 0 0 0 0   rgba(255, 255, 255, 0); }
}

@media (max-width: 480px) {
  .rr-floating-cta {
    right: var(--rr-space-3);
    bottom: var(--rr-space-3);
    padding: 0.6rem 0.95rem 0.6rem 0.7rem;
    gap: var(--rr-space-2);
  }
  .rr-floating-cta__icon { width: 22px; height: 22px; }
  .rr-floating-cta__icon svg { width: 14px; height: 14px; }
  .rr-floating-cta__eyebrow { font-size: 0.6rem; }
  .rr-floating-cta__label { font-size: 0.85rem; }
}

/* ---------- Header search + autosuggest (Task 39) ---------- */
.rr-search {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0;
  background: #fff;
  border: 1px solid var(--rr-border);
  border-radius: 999px;
  padding: 0.25rem 0.45rem 0.25rem 0.85rem;
  transition: border-color 0.18s var(--rr-ease-out), box-shadow 0.18s var(--rr-ease-out);
}

/* Softer focus state — neutral dark border + a faint red glow ring,
 * instead of a hard red border + tinted icon. The leading icon stays
 * muted-gray on focus. */
.rr-search:focus-within {
  border-color: var(--rr-heading);
  box-shadow: 0 0 0 3px rgba(241, 52, 52, 0.08);
}

.rr-search__icon {
  flex: 0 0 auto;
  color: var(--rr-muted);
  margin-right: 0.5rem;
  pointer-events: none;
  /* The icon is a FA Pro <i>; size it explicitly so the leading edge
   * reads consistently regardless of the kit's default. */
  font-size: 0.95rem;
  width: 18px;
  text-align: center;
}

.rr-search__input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font-family: 'robotoregular', sans-serif;
  font-size: 0.9rem;
  color: var(--rr-heading);
  padding: 0.45rem 0;
}

.rr-search__input::placeholder { color: var(--rr-muted); }

/* Submit button — must explicitly reset the legacy global `button`
 * rule (padding 10px 20px, border-radius 2px, display inline-block)
 * which would otherwise blow this circle out into a 72×52 oval. */
.rr-search__submit {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  margin: 0 0 0 var(--rr-space-2); /* breathing room from input field */
  border: 0;
  border-radius: 50%;
  background: var(--rr-red);
  color: #fff;
  font-size: 0.78rem;
  line-height: 1;
  cursor: pointer;
  box-sizing: border-box;
  transition: background 0.15s var(--rr-ease-out), transform 0.15s var(--rr-ease-out);
}

.rr-search__submit:hover,
.rr-search__submit:focus-visible {
  background: var(--rr-red-dark);
  transform: translateX(1px);
}

.rr-search__submit i {
  /* FA icons render as <i> with pseudo-glyphs. Anchor at center. */
  display: inline-block;
  line-height: 1;
}

/* Loading hint — shown via .is-loading while debouncing/fetching.
 * The leading icon itself stays static; we use a faint pulsing
 * border-bottom on the input to suggest activity without moving any
 * glyph the user's eye is already locked onto. */
.rr-search__input {
  position: relative;
}

.rr-search.is-loading .rr-search__input {
  background-image: linear-gradient(90deg, transparent, var(--rr-red), transparent);
  background-size: 30% 1.5px;
  background-repeat: no-repeat;
  background-position: -30% 100%;
  animation: rr-search-loading-bar 0.95s ease-in-out infinite;
}

@keyframes rr-search-loading-bar {
  to { background-position: 130% 100%; }
}

/* ---- Dropdown ---- */
.rr-search__results {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 0;
  right: 0;
  z-index: 96; /* above mega-backdrop:90, below mega-trigger:95 */
  max-height: min(70vh, 500px);
  overflow-y: auto;
  background: #fff;
  border: 1px solid var(--rr-border);
  border-radius: var(--rr-radius-md);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.16);
  padding: var(--rr-space-2);
}

.rr-search__results[hidden] { display: none; }

.rr-search__result {
  display: flex;
  align-items: center;
  gap: var(--rr-space-3);
  padding: var(--rr-space-2) var(--rr-space-3);
  border-radius: var(--rr-radius-sm);
  text-decoration: none;
  color: var(--rr-heading);
  transition: background 0.12s var(--rr-ease-out);
}

.rr-search__result:hover,
.rr-search__result.is-active {
  background: var(--rr-bg-soft);
  text-decoration: none;
}

.rr-search__thumb {
  flex: 0 0 auto;
  display: block;
  width: 44px;
  height: 44px;
  border-radius: var(--rr-radius-sm);
  background: var(--rr-bg-soft);
  object-fit: contain;
  border: 1px solid var(--rr-border);
}

/* Imageless thumbs (brand kind). Render a small mark from the kind name. */
.rr-search__thumb--brand {
  background: linear-gradient(135deg, var(--rr-bg-soft), #fff);
  position: relative;
}
.rr-search__thumb--brand::after {
  content: "★";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--rr-red);
  font-size: 1.1rem;
  line-height: 1;
}

.rr-search__copy {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.rr-search__title {
  font-family: 'robotoregular', sans-serif;
  font-size: 0.88rem;
  line-height: 1.25;
  color: var(--rr-heading);
  /* Truncate long titles */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rr-search__hl {
  background: rgba(241, 52, 52, 0.16);
  color: inherit;
  border-radius: 2px;
  padding: 0 0.1rem;
}

.rr-search__meta {
  font-family: 'robotoregular', sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--rr-muted);
}

.rr-search__empty {
  padding: var(--rr-space-3) var(--rr-space-4);
  font-size: 0.85rem;
  color: var(--rr-muted);
  text-align: center;
}

/* Mobile: the search form is relocated by main.js into the drawer's
 * .nav-strip__search slot. Width / autosuggest sizing for that slot
 * is handled in the drawer's own mobile breakpoint (Section 15). The
 * masthead row no longer hosts the search on mobile, so no flex-wrap
 * hacks are needed here. */
@media (max-width: 900px) {
  .rr-search {
    width: 100%;
    max-width: none;
  }
}

/* ---------- Contact page (Section 40) ---------- */
/*
 * `.rr-contact` is rendered by template-parts/page-contact.php. The post
 * body's prose is split into a hero lead, an "in the meantime" aside,
 * and a sign-off; the CF7 form is slotted into a card that anchors the
 * page. Everything consumes --rr-* tokens and matches the editorial
 * tone of single-review.
 *
 * The CF7 form body itself is rewritten in transform-data.sh step 10
 * to use <p class="rr-cf7-row"><label/>[shortcode]</p> structure plus
 * a `.rr-cf7-actions` wrapper around the submit. The selectors below
 * style that markup directly; they don't touch CF7's outer .wpcf7-form
 * spacing so the rest of the site (legacy pages with CF7 elsewhere)
 * keeps the global `.entry-content form` rhythm.
 */

.rr-contact {
  --rr-contact-card-bg: #fff;
  --rr-contact-aside-bg: var(--rr-bg-soft);

  display: flex;
  flex-direction: column;
  gap: var(--rr-space-7);
}

.rr-contact__header {
  position: relative;
  padding-top: var(--rr-space-2);
}

.rr-contact__eyebrow,
.rr-contact__form-eyebrow,
.rr-contact__aside-eyebrow {
  margin: 0 0 var(--rr-space-2);
  font-family: 'robotoregular', sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--rr-red);
}

.rr-contact__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--rr-space-3);
}

.rr-contact__eyebrow::before {
  content: "";
  display: inline-block;
  width: 28px;
  height: 2px;
  background: var(--rr-red);
}

.rr-contact__title {
  font-family: 'vigaregular', 'robotoregular', sans-serif;
  font-size: clamp(1.9rem, 1.3rem + 2.4vw, 3rem);
  line-height: 1.1;
  color: var(--rr-heading);
  margin: 0 0 var(--rr-space-4);
  max-width: 22ch;
}

.rr-contact__lead {
  max-width: 60ch;
  font-family: 'robotolight', 'robotoregular', sans-serif;
  font-size: clamp(1.05rem, 1rem + 0.25vw, 1.18rem);
  line-height: 1.65;
  color: var(--rr-text);
}

.rr-contact__lead p { margin: 0; }
.rr-contact__lead p + p { margin-top: var(--rr-space-3); }

.rr-contact__main {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--rr-space-6);
}

@media (min-width: 760px) {
  .rr-contact__main {
    grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
    align-items: start;
  }
}

/* Form card — the page's primary anchor. */
.rr-contact__form-card {
  position: relative;
  padding: var(--rr-space-5) clamp(var(--rr-space-4), 2.5vw, var(--rr-space-5)) var(--rr-space-5);
  background: var(--rr-contact-card-bg);
  border: 1px solid var(--rr-border);
  border-radius: var(--rr-radius-md);
  box-shadow: var(--rr-shadow-card);
  overflow: hidden;
}

.rr-contact__form-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--rr-red);
}

.rr-contact__form-title {
  font-family: 'robotoregular', sans-serif;
  font-size: clamp(1.05rem, 1rem + 0.3vw, 1.2rem);
  font-weight: 500;
  line-height: 1.35;
  color: var(--rr-heading);
  margin: 0 0 var(--rr-space-4);
  max-width: 28ch;
}

/* Aside — supporting copy, lighter visual weight. */
.rr-contact__aside {
  position: relative;
  padding: var(--rr-space-5) var(--rr-space-5) var(--rr-space-5) calc(var(--rr-space-5) + 4px);
  background: var(--rr-contact-aside-bg);
  border-radius: var(--rr-radius-md);
}

.rr-contact__aside::before {
  content: "";
  position: absolute;
  inset: var(--rr-space-5) auto var(--rr-space-5) 0;
  width: 3px;
  background: var(--rr-red);
  border-radius: 0 2px 2px 0;
}

.rr-contact__aside-body {
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--rr-text);
}

.rr-contact__aside-body p { margin: 0 0 var(--rr-space-3); }
.rr-contact__aside-body p:last-child { margin-bottom: 0; }
.rr-contact__aside-body a { color: var(--rr-red); text-decoration: none; }
.rr-contact__aside-body a:hover,
.rr-contact__aside-body a:focus-visible { text-decoration: underline; }

/* Sign-off — quiet flourish below the grid. */
.rr-contact__signoff {
  text-align: center;
  font-family: 'robotolight', 'robotoregular', sans-serif;
  font-size: 0.95rem;
  color: var(--rr-muted);
  padding-top: var(--rr-space-5);
  border-top: 1px solid var(--rr-border);
}

.rr-contact__signoff p {
  margin: 0 0 0 var(--rr-space-2); /* breathing room from input field */
}

.rr-contact__signoff p + p {
  margin-top: 0.15rem;
}

/* CF7 form polish — scoped to .rr-contact so the rest of the site is
 * unaffected if CF7 ever appears in another template. */
.rr-contact .wpcf7 { padding: 0; }

.rr-contact .wpcf7-form {
  display: flex;
  flex-direction: column;
  gap: var(--rr-space-3);
  margin: 0 0 0 var(--rr-space-2); /* breathing room from input field */
}

.rr-contact .rr-cf7-row {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  margin: 0 0 0 var(--rr-space-2); /* breathing room from input field */
}

.rr-contact .rr-cf7-row label {
  font-family: 'robotoregular', sans-serif;
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--rr-heading);
}

.rr-contact .rr-cf7-req {
  margin-left: 2px;
  color: var(--rr-red);
  font-weight: 400;
}

/* Inputs — scoped, override the global form-fields baseline (section 10)
 * so the contact form has its own rhythm without leaking elsewhere. */
.rr-contact .wpcf7-form-control-wrap {
  display: block;
}

.rr-contact .wpcf7-form input[type="text"],
.rr-contact .wpcf7-form input[type="email"],
.rr-contact .wpcf7-form textarea {
  width: 100%;
  padding: 0.55rem 0.75rem;
  font-family: 'robotoregular', sans-serif;
  font-size: 0.95rem;
  line-height: 1.4;
  color: var(--rr-heading);
  background: #fff;
  border: 1px solid var(--rr-border);
  border-radius: var(--rr-radius-sm);
  transition:
    border-color 0.15s var(--rr-ease-out),
    box-shadow 0.15s var(--rr-ease-out),
    background 0.15s var(--rr-ease-out);
}

.rr-contact .wpcf7-form input::placeholder,
.rr-contact .wpcf7-form textarea::placeholder {
  color: var(--rr-muted);
  opacity: 1;
}

.rr-contact .wpcf7-form input[type="text"]:hover,
.rr-contact .wpcf7-form input[type="email"]:hover,
.rr-contact .wpcf7-form textarea:hover {
  border-color: #c8c8c8;
}

.rr-contact .wpcf7-form input[type="text"]:focus,
.rr-contact .wpcf7-form input[type="email"]:focus,
.rr-contact .wpcf7-form textarea:focus {
  outline: 0;
  border-color: var(--rr-red);
  box-shadow: 0 0 0 3px rgba(241, 52, 52, 0.14);
  background: #fff;
}

.rr-contact .wpcf7-form textarea {
  resize: vertical;
  min-height: 7rem;
}

.rr-contact .rr-cf7-actions {
  margin: var(--rr-space-1) 0 0;
  display: flex;
  justify-content: flex-start;
}

.rr-contact .wpcf7-form input.rr-cf7-submit {
  /* Override the global red CTA pill with the brand button rhythm. */
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--rr-space-2);
  padding: 0.65rem 1.4rem;
  background: var(--rr-red);
  color: #fff;
  font-family: 'robotoregular', sans-serif;
  font-size: 0.88rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: 1px solid var(--rr-red);
  border-radius: var(--rr-radius-sm);
  cursor: pointer;
  transition:
    transform 0.18s var(--rr-ease-out),
    background 0.18s var(--rr-ease-out),
    border-color 0.18s var(--rr-ease-out),
    box-shadow 0.18s var(--rr-ease-out);
}

.rr-contact .wpcf7-form input.rr-cf7-submit:hover,
.rr-contact .wpcf7-form input.rr-cf7-submit:focus-visible {
  background: var(--rr-red-dark);
  border-color: var(--rr-red-dark);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(241, 52, 52, 0.28);
}

.rr-contact .wpcf7-form input.rr-cf7-submit:active {
  transform: translateY(0);
  box-shadow: none;
}

/* CF7 spinner — keep but tone down to brand red. */
.rr-contact .wpcf7-spinner {
  background-color: var(--rr-red);
}

/* CF7 response output (success / error pill below submit). */
.rr-contact .wpcf7-response-output {
  margin: var(--rr-space-4) 0 0;
  padding: 0.8rem 1rem;
  border-radius: var(--rr-radius-sm);
  font-size: 0.9rem;
  line-height: 1.45;
  border: 1px solid var(--rr-border);
  background: var(--rr-bg-soft);
}

.rr-contact .wpcf7 form.sent .wpcf7-response-output {
  border-color: rgba(46, 125, 50, 0.4);
  background: rgba(46, 125, 50, 0.06);
  color: #1f4e21;
}

.rr-contact .wpcf7 form.invalid .wpcf7-response-output,
.rr-contact .wpcf7 form.unaccepted .wpcf7-response-output,
.rr-contact .wpcf7 form.payment-required .wpcf7-response-output {
  border-color: rgba(201, 31, 31, 0.45);
  background: rgba(241, 52, 52, 0.06);
  color: var(--rr-red-dark);
}

.rr-contact .wpcf7 form.failed .wpcf7-response-output,
.rr-contact .wpcf7 form.aborted .wpcf7-response-output {
  border-color: rgba(201, 31, 31, 0.45);
  background: rgba(241, 52, 52, 0.06);
  color: var(--rr-red-dark);
}

/* Per-field validation tip CF7 emits inline (.wpcf7-not-valid-tip). */
.rr-contact .wpcf7-not-valid-tip {
  display: block;
  margin-top: var(--rr-space-2);
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--rr-red-dark);
}

.rr-contact .wpcf7-form input.wpcf7-not-valid,
.rr-contact .wpcf7-form textarea.wpcf7-not-valid {
  border-color: var(--rr-red);
  box-shadow: 0 0 0 3px rgba(241, 52, 52, 0.10);
}

/* Subtle entrance — form card lifts in on first paint. Keyed off the
 * card class itself so it runs once on load, not on hover/focus. */
@keyframes rr-contact-card-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

.rr-contact__form-card,
.rr-contact__aside {
  animation: rr-contact-card-in 0.45s var(--rr-ease-out) both;
}

.rr-contact__aside {
  animation-delay: 0.08s;
}

/* Dim the page sign-off on small screens (the surrounding white space
 * already says "we're done") and keep the form card readable. */
@media (max-width: 600px) {
  .rr-contact__title { font-size: clamp(1.7rem, 1.4rem + 2vw, 2.2rem); }
  .rr-contact__form-card { padding-inline: var(--rr-space-5); }
}

/* ---------- All Brands directory (Section 41) ---------- */
.rr-all-brands {
  margin-top: var(--rr-space-6);
}

.rr-all-brands__title {
  font-family: 'vigaregular', 'robotoregular', sans-serif;
  font-size: clamp(1.5rem, 1.2rem + 0.7vw, 1.85rem);
  letter-spacing: 0.01em;
  margin: 0 0 var(--rr-space-5);
  padding-bottom: var(--rr-space-3);
  border-bottom: 3px solid var(--rr-red);
  color: var(--rr-heading);
}

.rr-all-brands__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--rr-space-3);
}

@media (min-width: 540px) {
  .rr-all-brands__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 900px) {
  /* Article column is ~820px in this layout — 4 columns gives ~190px
   * cards which comfortably fit the longest brand name ("Spirit Fitness"). */
  .rr-all-brands__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.rr-all-brands__item { margin: 0; }

.rr-all-brands__card {
  display: flex;
  flex-direction: column;
  gap: var(--rr-space-2);
  align-items: flex-start;
  padding: var(--rr-space-4);
  height: 100%;
  background: #fff;
  border: 1px solid var(--rr-border);
  border-radius: var(--rr-radius-md);
  box-shadow: var(--rr-shadow-card);
  text-decoration: none;
  transition:
    transform 0.18s var(--rr-ease-out),
    box-shadow 0.18s var(--rr-ease-out),
    border-color 0.18s var(--rr-ease-out);
}

.rr-all-brands__card:hover,
.rr-all-brands__card:focus-visible {
  transform: translateY(-2px);
  box-shadow: var(--rr-shadow-card-hover);
  border-color: var(--rr-red);
  text-decoration: none;
}

.rr-all-brands__name {
  font-family: 'robotoregular', sans-serif;
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--rr-heading);
  letter-spacing: -0.005em;
}

.rr-all-brands__card:hover .rr-all-brands__name,
.rr-all-brands__card:focus-visible .rr-all-brands__name {
  color: var(--rr-red);
}

.rr-all-brands__desc {
  font-family: 'robotoregular', sans-serif;
  font-size: 0.85rem;
  line-height: 1.4;
  color: var(--rr-text);
}

.rr-all-brands__cta {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: 'robotoregular', sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--rr-red);
}

.rr-all-brands__cta i {
  transition: transform 0.18s var(--rr-ease-out);
  font-size: 0.7rem;
}

.rr-all-brands__card:hover .rr-all-brands__cta i,
.rr-all-brands__card:focus-visible .rr-all-brands__cta i {
  transform: translateX(3px);
}

/* ---------- Browse By Type widgets (Section 42) ---------- */
.rr-browse-by-type {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--rr-space-5);
  margin-top: var(--rr-space-6);
}

@media (min-width: 720px) {
  .rr-browse-by-type {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.rr-bbt-widget {
  --rr-bbt-accent: var(--rr-red);
  display: flex;
  flex-direction: column;
  gap: var(--rr-space-3);
  padding: var(--rr-space-4);
  background: #fff;
  border: 1px solid var(--rr-border);
  border-top: 4px solid var(--rr-bbt-accent);
  border-radius: var(--rr-radius-md);
  box-shadow: var(--rr-shadow-card);
  position: relative;
  transition: box-shadow 0.18s var(--rr-ease-out);
}

.rr-bbt-widget:hover { box-shadow: var(--rr-shadow-card-hover); }

.rr-bbt-widget__header { margin: 0; }

.rr-bbt-widget__title {
  font-family: 'vigaregular', 'robotoregular', sans-serif;
  font-size: 1.25rem;
  letter-spacing: 0.01em;
  margin: 0;
  color: var(--rr-heading);
  /* Subtle eyebrow line in the type's authored color, so the coding
   * shows even when the user is mid-card and the top accent is out
   * of view. */
  padding-bottom: var(--rr-space-2);
  border-bottom: 2px solid var(--rr-bbt-accent);
}

.rr-bbt-widget__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--rr-space-2);
}

.rr-bbt-widget__item { margin: 0; }

.rr-bbt-widget__link {
  display: flex;
  align-items: center;
  gap: var(--rr-space-3);
  padding: var(--rr-space-2);
  border-radius: var(--rr-radius-sm);
  text-decoration: none;
  color: var(--rr-heading);
  transition: background 0.12s var(--rr-ease-out);
}

.rr-bbt-widget__link:hover,
.rr-bbt-widget__link:focus-visible {
  background: var(--rr-bg-soft);
  text-decoration: none;
}

.rr-bbt-widget__thumb {
  flex: 0 0 auto;
  display: block;
  width: 56px;
  height: 56px;
  border-radius: var(--rr-radius-sm);
  background: var(--rr-bg-soft);
  border: 1px solid var(--rr-border);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rr-bbt-widget__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.rr-bbt-widget__post-title {
  flex: 1 1 auto;
  font-family: 'robotoregular', sans-serif;
  font-size: 0.92rem;
  line-height: 1.3;
  color: var(--rr-heading);
}

.rr-bbt-widget__link:hover .rr-bbt-widget__post-title,
.rr-bbt-widget__link:focus-visible .rr-bbt-widget__post-title { color: var(--rr-red); }

.rr-bbt-widget__cta {
  margin-top: auto;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 0.95rem;
  background: var(--rr-bbt-accent);
  color: #fff;
  font-family: 'robotoregular', sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: var(--rr-radius-sm);
  transition: filter 0.18s var(--rr-ease-out), transform 0.18s var(--rr-ease-out);
}

.rr-bbt-widget__cta:hover,
.rr-bbt-widget__cta:focus-visible {
  filter: brightness(0.92);
  color: #fff;
  text-decoration: none;
  transform: translateY(-1px);
}

.rr-bbt-widget__cta i {
  font-size: 0.7rem;
  transition: transform 0.18s var(--rr-ease-out);
}

.rr-bbt-widget__cta:hover i,
.rr-bbt-widget__cta:focus-visible i {
  transform: translateX(3px);
}

/* ---------- Best Buy Treadmills 2016 widgets (Section 43) ---------- */
.rr-best-buy {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--rr-space-5);
  margin-top: var(--rr-space-6);
}

@media (min-width: 720px) {
  .rr-best-buy { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.rr-bb-widget {
  --rr-bb-accent: var(--rr-red);
  display: flex;
  flex-direction: column;
  gap: var(--rr-space-3);
  padding: var(--rr-space-4);
  background: #fff;
  border: 1px solid var(--rr-border);
  border-top: 4px solid var(--rr-bb-accent);
  border-radius: var(--rr-radius-md);
  box-shadow: var(--rr-shadow-card);
  transition: box-shadow 0.18s var(--rr-ease-out);
}

.rr-bb-widget:hover { box-shadow: var(--rr-shadow-card-hover); }

.rr-bb-widget__header { margin: 0; }

.rr-bb-widget__title {
  font-family: 'vigaregular', 'robotoregular', sans-serif;
  font-size: 1.2rem;
  letter-spacing: 0.01em;
  margin: 0;
  color: var(--rr-heading);
  padding-bottom: var(--rr-space-2);
  border-bottom: 2px solid var(--rr-bb-accent);
}

.rr-bb-widget__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--rr-space-2);
}

.rr-bb-widget__item { margin: 0; }

.rr-bb-widget__link {
  display: flex;
  align-items: center;
  gap: var(--rr-space-3);
  padding: var(--rr-space-2);
  border-radius: var(--rr-radius-sm);
  text-decoration: none;
  color: var(--rr-heading);
  transition: background 0.12s var(--rr-ease-out);
}

.rr-bb-widget__link:hover,
.rr-bb-widget__link:focus-visible {
  background: var(--rr-bg-soft);
  text-decoration: none;
}

.rr-bb-widget__thumb {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  border-radius: var(--rr-radius-sm);
  background: var(--rr-bg-soft);
  border: 1px solid var(--rr-border);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rr-bb-widget__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.rr-bb-widget__copy {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.rr-bb-widget__post-title {
  font-family: 'robotoregular', sans-serif;
  font-size: 0.92rem;
  line-height: 1.3;
  color: var(--rr-heading);
}

.rr-bb-widget__link:hover .rr-bb-widget__post-title,
.rr-bb-widget__link:focus-visible .rr-bb-widget__post-title { color: var(--rr-red); }

.rr-bb-widget__rating { line-height: 1; font-size: 0.9rem; }

/* ---------- Search results page (Section 44) ---------- */
.rr-search-page {
  display: flex;
  flex-direction: column;
  gap: var(--rr-space-7);
}

.rr-search-page-hero {
  display: flex;
  flex-direction: column;
  gap: var(--rr-space-3);
  padding-bottom: var(--rr-space-5);
  border-bottom: 1px solid var(--rr-border);
}

.rr-search-page-hero__eyebrow {
  font-family: 'robotoregular', sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--rr-muted);
  margin: 0;
}

.rr-search-page-hero__title {
  font-family: 'vigaregular', 'robotoregular', sans-serif;
  font-size: clamp(1.85rem, 1.4rem + 1.6vw, 2.6rem);
  line-height: 1.1;
  margin: 0;
  color: var(--rr-heading);
}

.rr-search-page-hero__query {
  color: var(--rr-red);
}

.rr-search-page-hero__count {
  font-family: 'robotoregular', sans-serif;
  font-size: 0.92rem;
  color: var(--rr-text);
  margin: 0;
}

/* The header search-form re-rendered here is `<form class="rr-search">`;
 * keep it from stretching across the full page width inside the hero. */
.rr-search-page-hero__form .rr-search {
  max-width: 480px;
}

.rr-search-section {
  display: flex;
  flex-direction: column;
  gap: var(--rr-space-4);
}

.rr-search-section__title {
  display: flex;
  align-items: center;
  gap: var(--rr-space-3);
  font-family: 'vigaregular', 'robotoregular', sans-serif;
  font-size: 1.25rem;
  letter-spacing: 0.02em;
  margin: 0;
  padding-bottom: var(--rr-space-2);
  border-bottom: 2px solid var(--rr-red);
  color: var(--rr-heading);
}

.rr-search-section__title i {
  color: var(--rr-red);
  font-size: 1rem;
}

.rr-search-section__count {
  margin-left: auto;
  background: var(--rr-bg-soft);
  color: var(--rr-text);
  font-family: 'robotoregular', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  border: 1px solid var(--rr-border);
}

.rr-search-brand-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--rr-space-3);
  grid-template-columns: 1fr;
}
@media (min-width: 600px) {
  .rr-search-brand-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  .rr-search-brand-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.rr-search-brand-chip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rr-space-3);
  padding: var(--rr-space-3) var(--rr-space-4);
  background: #fff;
  border: 1px solid var(--rr-border);
  border-left: 3px solid var(--rr-red);
  border-radius: var(--rr-radius-md);
  text-decoration: none;
  color: var(--rr-heading);
  transition: transform 0.18s var(--rr-ease-out), box-shadow 0.18s var(--rr-ease-out);
}

.rr-search-brand-chip:hover,
.rr-search-brand-chip:focus-visible {
  transform: translateY(-2px);
  box-shadow: var(--rr-shadow-card-hover);
  text-decoration: none;
}

.rr-search-brand-chip__name {
  font-family: 'robotoregular', sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
}

.rr-search-brand-chip__count {
  font-family: 'robotoregular', sans-serif;
  font-size: 0.78rem;
  color: var(--rr-muted);
}

.rr-search-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--rr-space-4);
  grid-template-columns: 1fr;
}
@media (min-width: 600px) {
  .rr-search-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  .rr-search-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.rr-search-card {
  display: flex;
  flex-direction: column;
  gap: var(--rr-space-3);
  padding: var(--rr-space-3);
  background: #fff;
  border: 1px solid var(--rr-border);
  border-radius: var(--rr-radius-md);
  box-shadow: var(--rr-shadow-card);
  text-decoration: none;
  color: var(--rr-heading);
  transition: transform 0.18s var(--rr-ease-out), box-shadow 0.18s var(--rr-ease-out), border-color 0.18s var(--rr-ease-out);
  height: 100%;
}

.rr-search-card:hover,
.rr-search-card:focus-visible {
  transform: translateY(-2px);
  box-shadow: var(--rr-shadow-card-hover);
  border-color: var(--rr-red);
  text-decoration: none;
}

.rr-search-card__media {
  display: block;
  aspect-ratio: 4 / 3;
  background: var(--rr-bg-soft);
  border-radius: var(--rr-radius-sm);
  overflow: hidden;
  position: relative;
}

.rr-search-card__media .rr-search-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 0.3s var(--rr-ease-out);
}

.rr-search-card:hover .rr-search-card__img,
.rr-search-card:focus-visible .rr-search-card__img {
  transform: scale(1.04);
}

.rr-search-card__copy {
  display: flex;
  flex-direction: column;
  gap: var(--rr-space-2);
  flex: 1 1 auto;
}

.rr-search-card__meta {
  display: flex;
  align-items: center;
  gap: var(--rr-space-2);
  font-family: 'robotoregular', sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--rr-muted);
}

.rr-search-card__kind {
  background: var(--rr-bg-soft);
  border: 1px solid var(--rr-border);
  padding: 0.12rem 0.5rem;
  border-radius: 999px;
  color: var(--rr-text);
}

.rr-search-card__brand {
  /* No background — read like a quiet annotation next to the kind chip. */
}

.rr-search-card__title {
  font-family: 'robotoregular', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--rr-heading);
}

.rr-search-card:hover .rr-search-card__title,
.rr-search-card:focus-visible .rr-search-card__title { color: var(--rr-red); }

.rr-search-card__rating { line-height: 1; font-size: 0.95rem; }

.rr-search-card__excerpt {
  font-family: 'robotoregular', sans-serif;
  font-size: 0.85rem;
  color: var(--rr-text);
  line-height: 1.5;
}

.rr-search-hl {
  background: rgba(241, 52, 52, 0.16);
  color: inherit;
  padding: 0 0.1rem;
  border-radius: 2px;
}

.rr-search-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--rr-space-3);
  padding: var(--rr-space-7) var(--rr-space-5);
  background: var(--rr-bg-soft);
  border: 1px solid var(--rr-border);
  border-radius: var(--rr-radius-md);
  text-align: center;
}

.rr-search-empty__icon {
  font-size: 2.4rem;
  color: var(--rr-red);
}

.rr-search-empty__title {
  font-family: 'vigaregular', 'robotoregular', sans-serif;
  font-size: clamp(1.4rem, 1.1rem + 0.7vw, 1.8rem);
  margin: 0;
  color: var(--rr-heading);
}

.rr-search-empty__hint {
  font-family: 'robotoregular', sans-serif;
  font-size: 0.95rem;
  color: var(--rr-text);
  margin: 0;
}

.rr-search-empty__links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--rr-space-3);
  justify-content: center;
}

.rr-search-empty__links a {
  display: inline-block;
  padding: 0.5rem 0.95rem;
  background: #fff;
  border: 1px solid var(--rr-border);
  border-radius: var(--rr-radius-sm);
  text-decoration: none;
  color: var(--rr-heading);
  font-family: 'robotoregular', sans-serif;
  font-size: 0.85rem;
}

.rr-search-empty__links a:hover,
.rr-search-empty__links a:focus-visible {
  border-color: var(--rr-red);
  color: var(--rr-red);
  text-decoration: none;
}

/* ---------- Tips / Influential Runners page (Section 45) ---------- */

.page-tips .entry-header {
  margin-bottom: var(--rr-space-5);
}

.page-tips .rr-breadcrumbs {
  margin-bottom: var(--rr-space-3);
}

/* Badge / embed-code section: section heading + featured preview at top,
 * two embed-code cards below in a 2-col grid. Featured pulled forward via
 * `order` so the legacy markup order (block, block, featured) doesn't
 * dictate visual order. */
.rr-tips-badges {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--rr-space-5);
  margin: var(--rr-space-4) 0 var(--rr-space-7);
  padding: var(--rr-space-6) var(--rr-space-5);
  background: var(--rr-bg-soft);
  border: 1px solid var(--rr-border);
  border-radius: var(--rr-radius-md);
  position: relative;
}

.rr-tips-badges::before {
  content: "Add this badge to your site";
  grid-column: 1 / -1;
  font-family: 'vigaregular', 'robotoregular', sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--rr-red);
  text-align: center;
  margin-bottom: var(--rr-space-2);
}

/* The standalone featured image — the canonical badge preview. Pull it to
 * the top, span both columns, and centre it as a hero. */
.rr-tips-badges__featured {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--rr-space-2);
  order: -1;
  padding-bottom: var(--rr-space-4);
  border-bottom: 1px dashed var(--rr-border);
}

.rr-tips-badges__featured img {
  width: 178px;
  height: auto;
  border-radius: var(--rr-radius-sm);
  box-shadow: var(--rr-shadow-card);
}

.rr-tips-badges__featured a {
  display: inline-block;
  transition: transform 0.18s var(--rr-ease-out);
}

.rr-tips-badges__featured a:hover,
.rr-tips-badges__featured a:focus-visible {
  transform: scale(1.03);
}

/* Each embed-code block becomes a self-contained card with image preview
 * top, description middle, copy-this-code textarea bottom. The legacy
 * markup is just <img> + raw text + <textarea> in a div, so we use flex
 * column + a small order trick to put the textarea at the end. */
.rr-tips-badges__block {
  display: flex;
  flex-direction: column;
  gap: var(--rr-space-3);
  font-family: 'robotoregular', sans-serif;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--rr-text);
  background: #fff;
  border: 1px solid var(--rr-border);
  border-radius: var(--rr-radius-md);
  padding: var(--rr-space-5);
  position: relative;
}

.rr-tips-badges__block::before {
  font-family: 'vigaregular', 'robotoregular', sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--rr-red);
}

.rr-tips-badges__block--first::before { content: "Option 1 — Visitor"; }
.rr-tips-badges__block--second::before { content: "Option 2 — Featured"; }

.rr-tips-badges__block img {
  width: 96px;
  height: auto;
  border-radius: var(--rr-radius-sm);
  border: 1px solid var(--rr-border);
  align-self: flex-start;
}

.rr-tips-badges__block br {
  display: none;
}

.rr-tips-badges__block textarea {
  display: block;
  width: 100%;
  min-height: 6rem;
  padding: var(--rr-space-3);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.75rem;
  line-height: 1.5;
  background: var(--rr-bg-soft);
  border: 1px solid var(--rr-border);
  border-radius: var(--rr-radius-sm);
  color: var(--rr-heading);
  resize: vertical;
  margin-top: auto;
  transition: border-color 0.18s var(--rr-ease-out);
}

.rr-tips-badges__block textarea:focus {
  outline: 2px solid var(--rr-red);
  outline-offset: 2px;
  border-color: var(--rr-red);
}

.rr-tips-list {
  display: flex;
  flex-direction: column;
  gap: var(--rr-space-6);
}

.rr-tip {
  padding-bottom: var(--rr-space-5);
  border-bottom: 1px solid var(--rr-border);
}

.rr-tip:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.rr-tip__heading {
  margin: 0 0 var(--rr-space-3);
  font-size: clamp(1.25rem, 1.05rem + 0.6vw, 1.6rem);
  line-height: 1.25;
  color: var(--rr-heading);
}

.rr-tip__content {
  color: var(--rr-text);
}

.rr-tip__content > :first-child {
  margin-top: 0;
}

.rr-tip__content > :last-child {
  margin-bottom: 0;
}

.rr-tip__content p {
  margin: 0 0 var(--rr-space-3);
  line-height: 1.65;
}

.rr-tip__content img {
  max-width: 100%;
  height: auto;
  border-radius: var(--rr-radius-sm);
  margin: var(--rr-space-2) 0;
}

.rr-tip__source {
  margin: var(--rr-space-3) 0 0;
  font-size: 0.9rem;
  color: var(--rr-muted);
}

.rr-tip__source a {
  color: var(--rr-red);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.rr-tip__source a:hover,
.rr-tip__source a:focus-visible {
  border-bottom-color: currentColor;
}

/* ---------- Quizzes page (Section 46) ----------
 * Race-bib themed quiz cards. Each card pairs a numbered "bib" panel
 * with a title, description, and starting-gun CTA. The card markup
 * lives in post_content (post 1101); CSS targets the BEM classes
 * `.rr-quizzes`, `.rr-quiz-card`, `.rr-quiz-card__bib`, etc.
 */

.page-id-1101 .entry-header {
  position: relative;
  margin-bottom: var(--rr-space-6);
  padding-bottom: var(--rr-space-4);
  border-bottom: 3px solid var(--rr-dark);
}

.page-id-1101 .entry-header::before {
  content: "Race-day quizzes";
  display: block;
  font-family: 'robotoregular', sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--rr-red);
  margin-bottom: var(--rr-space-2);
}

.page-id-1101 .entry-title {
  font-family: 'vigaregular', 'robotoregular', sans-serif;
  font-size: clamp(1.85rem, 1.4rem + 1.6vw, 2.85rem);
  letter-spacing: -0.02em;
  margin: 0;
  line-height: 1.05;
}

.rr-quizzes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--rr-space-6);
  counter-reset: rr-quiz;
  margin: var(--rr-space-6) 0 var(--rr-space-7);
}

.rr-quiz-card {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  gap: var(--rr-space-4);
  padding: var(--rr-space-6) var(--rr-space-5) var(--rr-space-5);
  background: #fff;
  border: 1px solid var(--rr-border);
  border-radius: var(--rr-radius-md);
  box-shadow: var(--rr-shadow-card);
  transition:
    transform 0.18s var(--rr-ease-out),
    box-shadow 0.18s var(--rr-ease-out),
    border-color 0.18s var(--rr-ease-out);
  isolation: isolate;
  overflow: hidden;
  counter-increment: rr-quiz;
}

/* Race-day stripe at the top — half red, half dark, like a finish-line ribbon. */
.rr-quiz-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 6px;
  background: linear-gradient(
    90deg,
    var(--rr-red) 0,
    var(--rr-red) 50%,
    var(--rr-dark) 50%,
    var(--rr-dark) 100%
  );
  z-index: 1;
}

.rr-quiz-card__bib {
  position: relative;
  width: 88px;
  height: 88px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'vigaregular', 'robotoregular', sans-serif;
  font-size: 3rem;
  line-height: 1;
  color: var(--rr-red);
  background: var(--rr-bg-soft);
  border: 2px solid var(--rr-dark);
  border-radius: var(--rr-radius-sm);
  letter-spacing: -0.04em;
  font-feature-settings: "tnum" 1;
}

.rr-quiz-card__bib::before {
  content: counter(rr-quiz, decimal-leading-zero);
  position: relative;
  z-index: 2;
}

/* Subtle halftone dots inside the bib for race-day texture. */
.rr-quiz-card__bib::after {
  content: "";
  position: absolute;
  inset: 4px;
  background-image: radial-gradient(rgba(0, 0, 0, 0.06) 1px, transparent 1px);
  background-size: 7px 7px;
  pointer-events: none;
  border-radius: 2px;
  z-index: 1;
}

.rr-quiz-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--rr-space-2);
  min-width: 0;
}

.rr-quiz-card__kicker {
  display: inline-flex;
  align-items: center;
  gap: var(--rr-space-2);
  font-family: 'robotoregular', sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--rr-red);
}

.rr-quiz-card__kicker::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--rr-border);
}

.rr-quiz-card__title {
  font-family: 'vigaregular', 'robotoregular', sans-serif;
  font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.3rem);
  line-height: 1.2;
  color: var(--rr-heading);
  margin: 0;
  letter-spacing: -0.01em;
}

.rr-quiz-card__title a {
  color: inherit;
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 2px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size 0.3s var(--rr-ease-out);
}

.rr-quiz-card:hover .rr-quiz-card__title a,
.rr-quiz-card:focus-within .rr-quiz-card__title a {
  background-size: 100% 2px;
}

.rr-quiz-card__desc {
  font-family: 'robotoregular', sans-serif;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--rr-text);
  margin: 0;
}

.rr-quiz-card__cta {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: var(--rr-space-2);
  margin-top: var(--rr-space-3);
  padding: 0.55rem var(--rr-space-4);
  background: var(--rr-dark);
  color: #fff;
  font-family: 'vigaregular', 'robotoregular', sans-serif;
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: var(--rr-radius-sm);
  transition:
    background 0.18s var(--rr-ease-out),
    color 0.18s var(--rr-ease-out);
}

.rr-quiz-card__cta::after {
  content: "→";
  display: inline-block;
  transition: transform 0.18s var(--rr-ease-out);
}

.rr-quiz-card__cta:hover,
.rr-quiz-card__cta:focus-visible {
  background: var(--rr-red);
  color: #fff;
  text-decoration: none;
}

.rr-quiz-card__cta:hover::after,
.rr-quiz-card__cta:focus-visible::after {
  transform: translateX(4px);
}

.rr-quiz-card__media {
  grid-column: 1 / -1;
  display: block;
  position: relative;
  aspect-ratio: 175 / 92;
  background: var(--rr-bg-soft);
  border-radius: var(--rr-radius-sm);
  overflow: hidden;
  border: 1px solid var(--rr-border);
}

.rr-quiz-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s var(--rr-ease-out);
}

.rr-quiz-card:hover .rr-quiz-card__media img,
.rr-quiz-card:focus-within .rr-quiz-card__media img {
  transform: scale(1.04);
}

.rr-quiz-card:hover,
.rr-quiz-card:focus-within {
  transform: translateY(-3px);
  box-shadow: var(--rr-shadow-card-hover);
  border-color: var(--rr-dark);
}

@media (max-width: 600px) {
  .rr-quiz-card {
    grid-template-columns: 1fr;
    padding: var(--rr-space-5) var(--rr-space-4);
  }

  .rr-quiz-card__bib {
    width: auto;
    height: auto;
    padding: var(--rr-space-2) var(--rr-space-4);
    justify-self: start;
    font-size: 2.25rem;
  }
}

/* ---------- Editorial runners spread (Section 47) ----------
 * Magazine-style layout for /most-influential-runners/ — the first
 * `.rr-tip` becomes a centred lede, subsequent tips render as
 * numbered features with oversized Viga numerals, drop caps on the
 * first paragraph, and a `Via …` source pill. Targets are scoped to
 * `.rr-tips-list--editorial` so other tips.php pages keep their
 * simpler layout.
 */

.rr-tips-list--editorial {
  counter-reset: rr-runner;
  position: relative;
  margin-top: var(--rr-space-5);
}

/* Lede entry (the page intro). */
.rr-tips-list--editorial .rr-tip--lede {
  border-bottom: 3px double var(--rr-dark);
  padding: 0 0 var(--rr-space-7);
  margin-bottom: var(--rr-space-7);
  text-align: left;
}

.rr-tips-list--editorial .rr-tip--lede .rr-tip__heading {
  font-family: 'vigaregular', 'robotoregular', sans-serif;
  font-size: clamp(1.6rem, 1.25rem + 1.4vw, 2.5rem);
  text-align: center;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin-bottom: var(--rr-space-4);
  color: var(--rr-heading);
}

.rr-tips-list--editorial .rr-tip--lede .rr-tip__heading::after {
  content: "";
  display: block;
  width: 64px;
  height: 3px;
  background: var(--rr-red);
  margin: var(--rr-space-3) auto 0;
}

.rr-tips-list--editorial .rr-tip--lede .rr-tip__content {
  max-width: 64ch;
  margin: 0 auto;
  font-size: 1.02rem;
  line-height: 1.75;
  color: var(--rr-text);
}

/* Treat <strong> in the lede as a section kicker (e.g. "Why this list?"). */
.rr-tips-list--editorial .rr-tip--lede .rr-tip__content p strong {
  display: block;
  font-family: 'vigaregular', 'robotoregular', sans-serif;
  font-weight: normal;
  color: var(--rr-red);
  font-size: 0.85rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-top: var(--rr-space-5);
  margin-bottom: var(--rr-space-2);
}

.rr-tips-list--editorial .rr-tip--lede .rr-tip__content p:first-child strong:first-child {
  margin-top: 0;
}

/* Numbered runner features — every tip after the lede.
 * Two-column grid: number panel (col 1) | content panel (col 2).
 * The CSS-counter ::before goes in col 1 spanning all rows; heading,
 * content, and source pill all stack in col 2. Without the explicit
 * grid-column / grid-row placement, the children auto-flow into wrong
 * cells and the bio gets squeezed under the number. */
.rr-tips-list--editorial .rr-tip:not(.rr-tip--lede) {
  counter-increment: rr-runner;
  display: grid;
  grid-template-columns: minmax(110px, 1fr) minmax(0, 4fr);
  gap: var(--rr-space-3) var(--rr-space-6);
  align-items: start;
  padding: var(--rr-space-7) 0;
  border-bottom: 1px solid var(--rr-border);
}

.rr-tips-list--editorial .rr-tip:not(.rr-tip--lede)::before {
  content: counter(rr-runner, decimal-leading-zero);
  grid-column: 1;
  grid-row: 1 / -1;
  font-family: 'vigaregular', 'robotoregular', sans-serif;
  font-size: clamp(2.75rem, 2rem + 3vw, 5rem);
  line-height: 0.9;
  color: var(--rr-red);
  letter-spacing: -0.04em;
  padding-right: var(--rr-space-5);
  border-right: 2px solid var(--rr-dark);
  align-self: stretch;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  font-feature-settings: "tnum" 1;
}

.rr-tips-list--editorial .rr-tip:not(.rr-tip--lede) .rr-tip__heading,
.rr-tips-list--editorial .rr-tip:not(.rr-tip--lede) .rr-tip__content,
.rr-tips-list--editorial .rr-tip:not(.rr-tip--lede) .rr-tip__source {
  grid-column: 2;
}

.rr-tips-list--editorial .rr-tip:not(.rr-tip--lede) .rr-tip__heading {
  margin: 0 0 var(--rr-space-3);
  font-family: 'vigaregular', 'robotoregular', sans-serif;
  font-size: clamp(1.35rem, 1.1rem + 0.9vw, 1.85rem);
  letter-spacing: -0.01em;
  color: var(--rr-heading);
  line-height: 1.2;
}

.rr-tips-list--editorial .rr-tip:not(.rr-tip--lede) .rr-tip__heading::after {
  content: "";
  display: block;
  width: 32px;
  height: 3px;
  background: var(--rr-red);
  margin-top: var(--rr-space-3);
}

.rr-tips-list--editorial .rr-tip:not(.rr-tip--lede) .rr-tip__content {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--rr-text);
}

/* Drop cap on the first paragraph of each runner feature. */
.rr-tips-list--editorial .rr-tip:not(.rr-tip--lede) .rr-tip__content > p:first-child::first-letter {
  font-family: 'vigaregular', 'robotoregular', sans-serif;
  font-size: 3.4em;
  line-height: 0.85;
  float: left;
  padding: 0.35rem 0.5rem 0 0;
  color: var(--rr-red);
}

/* Legacy WP alignleft / alignright thumbnails embedded in the bio HTML —
 * give them generous breathing room from the surrounding text and a soft
 * card treatment so they don't fight the drop cap. */
.rr-tips-list--editorial .rr-tip:not(.rr-tip--lede) .rr-tip__content img.alignleft,
.rr-tips-list--editorial .rr-tip:not(.rr-tip--lede) .rr-tip__content img.alignright {
  border-radius: var(--rr-radius-sm);
  border: 1px solid var(--rr-border);
  box-shadow: var(--rr-shadow-card);
  background: #fff;
  padding: 4px;
}

.rr-tips-list--editorial .rr-tip:not(.rr-tip--lede) .rr-tip__content img.alignleft {
  float: left;
  margin: var(--rr-space-1) var(--rr-space-5) var(--rr-space-4) 0;
}

.rr-tips-list--editorial .rr-tip:not(.rr-tip--lede) .rr-tip__content img.alignright {
  float: right;
  margin: var(--rr-space-1) 0 var(--rr-space-4) var(--rr-space-5);
}

/* Source attribution pill — "Via …" with arrow. */
.rr-tips-list--editorial .rr-tip:not(.rr-tip--lede) .rr-tip__source {
  margin: var(--rr-space-4) 0 0;
}

.rr-tips-list--editorial .rr-tip:not(.rr-tip--lede) .rr-tip__source a {
  display: inline-flex;
  align-items: center;
  gap: var(--rr-space-2);
  padding: 0.4rem 0.85rem;
  background: var(--rr-bg-soft);
  border: 1px solid var(--rr-border);
  border-radius: 999px;
  font-family: 'robotoregular', sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: none;
  color: var(--rr-text);
  text-decoration: none;
  transition:
    background 0.18s var(--rr-ease-out),
    color 0.18s var(--rr-ease-out),
    border-color 0.18s var(--rr-ease-out);
}

.rr-tips-list--editorial .rr-tip:not(.rr-tip--lede) .rr-tip__source a::before {
  content: "Via";
  font-family: 'vigaregular', 'robotoregular', sans-serif;
  color: var(--rr-red);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 0.72rem;
}

.rr-tips-list--editorial .rr-tip:not(.rr-tip--lede) .rr-tip__source a::after {
  content: "↗";
  font-size: 0.85em;
  transition: transform 0.18s var(--rr-ease-out);
}

.rr-tips-list--editorial .rr-tip:not(.rr-tip--lede) .rr-tip__source a:hover,
.rr-tips-list--editorial .rr-tip:not(.rr-tip--lede) .rr-tip__source a:focus-visible {
  background: var(--rr-dark);
  color: #fff;
  border-color: var(--rr-dark);
  border-bottom-color: var(--rr-dark);
}

.rr-tips-list--editorial .rr-tip:not(.rr-tip--lede) .rr-tip__source a:hover::after,
.rr-tips-list--editorial .rr-tip:not(.rr-tip--lede) .rr-tip__source a:focus-visible::after {
  transform: translate(2px, -2px);
}

.rr-tips-list--editorial .rr-tip:last-child {
  border-bottom: 0;
}

@media (max-width: 700px) {
  .rr-tips-list--editorial .rr-tip:not(.rr-tip--lede) {
    grid-template-columns: 1fr;
    gap: var(--rr-space-3);
    padding: var(--rr-space-6) 0;
  }

  .rr-tips-list--editorial .rr-tip:not(.rr-tip--lede)::before,
  .rr-tips-list--editorial .rr-tip:not(.rr-tip--lede) .rr-tip__heading,
  .rr-tips-list--editorial .rr-tip:not(.rr-tip--lede) .rr-tip__content,
  .rr-tips-list--editorial .rr-tip:not(.rr-tip--lede) .rr-tip__source {
    grid-column: 1;
  }

  .rr-tips-list--editorial .rr-tip:not(.rr-tip--lede)::before {
    grid-row: auto;
    border-right: 0;
    border-bottom: 2px solid var(--rr-dark);
    padding: 0 0 var(--rr-space-3);
    justify-content: flex-start;
    font-size: 2.75rem;
    align-self: flex-start;
  }
}

/* ---------- News content sections (Section 48) ---------- */
.rr-news-sections {
  display: flex;
  flex-direction: column;
  gap: var(--rr-space-6);
  margin-top: var(--rr-space-5);
}
.rr-news-section {
  display: flex;
  flex-direction: column;
  gap: var(--rr-space-3);
}
.rr-news-section__heading {
  font-family: 'vigaregular', 'robotoregular', sans-serif;
  font-size: clamp(1.35rem, 1.05rem + 0.7vw, 1.65rem);
  letter-spacing: 0.02em;
  color: var(--rr-heading);
  margin: 0;
  padding-bottom: var(--rr-space-2);
  border-bottom: 3px solid var(--rr-red);
}
.rr-news-section__body {
  color: var(--rr-text);
  line-height: 1.7;
}
.rr-news-section__body p:last-child {
  margin-bottom: 0;
}
.rr-news-section__body img {
  max-width: 100%;
  height: auto;
  border-radius: var(--rr-radius-sm);
}
.rr-news-section__body a {
  color: var(--rr-red);
}
.rr-news-section__body a:hover {
  color: var(--rr-red-dark);
}

/* ---------- Workout content sections (Section 50) ---------- */
.rr-workout-sections {
  display: flex;
  flex-direction: column;
  gap: var(--rr-space-6);
  margin-top: var(--rr-space-5);
}
.rr-workout-section {
  display: flex;
  flex-direction: column;
  gap: var(--rr-space-3);
}
.rr-workout-section__heading {
  font-family: 'vigaregular', 'robotoregular', sans-serif;
  font-size: clamp(1.35rem, 1.05rem + 0.7vw, 1.65rem);
  letter-spacing: 0.02em;
  color: var(--rr-heading);
  margin: 0;
  padding-bottom: var(--rr-space-2);
  border-bottom: 3px solid var(--rr-red);
}
.rr-workout-section__body {
  color: var(--rr-text);
  line-height: 1.7;
}
.rr-workout-section__body p:last-child {
  margin-bottom: 0;
}
.rr-workout-section__body img {
  max-width: 100%;
  height: auto;
  border-radius: var(--rr-radius-sm);
}
.rr-workout-section__body a {
  color: var(--rr-red);
}
.rr-workout-section__body a:hover {
  color: var(--rr-red-dark);
}

/* ---------- FAQ / Accessorie content sections (Section 49) ----------
 * Shared treatment for the legacy `faq_content` ACF repeater on the
 * `faqs` and `accessorie` CPTs. Visually parallels the News-content
 * pattern (Section 48) so the three CPT-specific repeater renderers
 * read as a family. On the `faqs` CPT, `content_heading` is commonly
 * empty (row content is a brand logo + paragraph inside the wysiwyg
 * body), so the heading rule must tolerate sections with no <h2>.
 */
.rr-faq-sections {
  display: flex;
  flex-direction: column;
  gap: var(--rr-space-6);
  margin-top: var(--rr-space-5);
}
.rr-faq-section {
  display: flex;
  flex-direction: column;
  gap: var(--rr-space-3);
}
.rr-faq-section__heading {
  font-family: 'vigaregular', 'robotoregular', sans-serif;
  font-size: clamp(1.35rem, 1.05rem + 0.7vw, 1.65rem);
  letter-spacing: 0.02em;
  color: var(--rr-heading);
  margin: 0;
  padding-bottom: var(--rr-space-2);
  border-bottom: 3px solid var(--rr-red);
}
.rr-faq-section__body {
  color: var(--rr-text);
  line-height: 1.7;
}
.rr-faq-section__body p:last-child {
  margin-bottom: 0;
}
.rr-faq-section__body img {
  max-width: 100%;
  height: auto;
  border-radius: var(--rr-radius-sm);
}
.rr-faq-section__body a {
  color: var(--rr-red);
}
.rr-faq-section__body a:hover {
  color: var(--rr-red-dark);
}

/* ---------- FTC affiliate disclosure (Section 51) ----------
 * Compact compliance band rendered directly above affiliate CTAs on
 * review pages (see template-parts/ftc-disclosure.php). Visual treatment
 * is intentionally restrained: muted text, soft background, brand-red
 * left-border accent for scannability. Sized smaller than body copy but
 * large enough to remain readable per FTC "clear and conspicuous" rule.
 */
.rr-ftc-disclosure {
  display: flex;
  align-items: flex-start;
  gap: var(--rr-space-2);
  margin: var(--rr-space-4) 0 var(--rr-space-3);
  padding: var(--rr-space-2) var(--rr-space-3);
  background: var(--rr-bg-soft);
  border-left: 3px solid var(--rr-red);
  border-radius: var(--rr-radius-sm);
}
.rr-ftc-disclosure__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--rr-red);
}
.rr-ftc-disclosure__copy {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--rr-muted);
}
.rr-ftc-disclosure__copy strong {
  color: var(--rr-text);
  font-weight: 600;
}
/* When the disclosure leads a card grid (best-buy page, category/brand archives)
 * it's injected as the grid's first child — span it full-width so it reads as a
 * clean note row above the buy buttons; the grid's own row-gap handles spacing. */
.rr-best-buy > .rr-ftc-disclosure,
.rr-product-grid > .rr-ftc-disclosure {
  grid-column: 1 / -1;
  margin: 0;
}

/* ---------- Comments + comment form (Section 52) ----------
 * Editorial "reader letters" treatment. Lives inside the article column on
 * single review + default posts (rendered by comments.php, which is invoked
 * once from single.php inside the while-loop after the per-type template
 * part). Visual rhythm intentionally parallels the sibling .rr-share strip
 * and .rr-faq-section family so the page reads as one continuous editorial
 * spine rather than three disconnected widgets.
 *
 * Threading: up to depth 5 (WP default thread_comments_depth). Each nested
 * level indents by --rr-space-5 on desktop, --rr-space-3 on small screens;
 * border-left token shifts from --rr-border (depth 2) toward --rr-muted
 * (depth 5) so very-deep replies are still scannable without running off
 * the right edge.
 *
 * Form: borrowed wholesale from the .rr-contact pattern (uppercase tracked
 * labels, soft underline focus ring, brand-red submit pill) so the two
 * primary author-facing forms on the site share one rhythm.
 */
.rr-comments {
  grid-column: 1 / -1;
  margin-top: var(--rr-space-7);
  padding-top: var(--rr-space-6);
  border-top: 1px solid var(--rr-border);
}

.rr-comments__header {
  margin-bottom: var(--rr-space-5);
}

.rr-comments__heading {
  font-family: 'vigaregular', 'robotoregular', sans-serif;
  font-size: clamp(1.35rem, 1.05rem + 0.7vw, 1.65rem);
  letter-spacing: 0.02em;
  color: var(--rr-heading);
  margin: 0;
  padding-bottom: var(--rr-space-2);
  border-bottom: 3px solid var(--rr-red);
  line-height: 1.3;
}

.rr-comments__count {
  font-weight: normal;
  color: var(--rr-heading);
}

.rr-comments__on {
  color: var(--rr-muted);
  font-size: 0.85em;
  margin: 0 0.25em;
}

.rr-comments__post {
  color: var(--rr-heading);
  font-style: italic;
}

/* Comment list — top-level reset + per-comment rhythm. */
.rr-comment-list,
.rr-comment-list .children {
  list-style: none;
  padding: 0;
  margin: 0;
}

.rr-comment-list > .rr-comment {
  margin-top: var(--rr-space-5);
  padding-top: var(--rr-space-5);
  border-top: 1px solid var(--rr-border);
}

.rr-comment-list > .rr-comment:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.rr-comment {
  position: relative;
}

.rr-comment .children {
  margin-top: var(--rr-space-4);
  padding-left: var(--rr-space-5);
  border-left: 2px solid var(--rr-border);
}

.rr-comment .children > .rr-comment {
  margin-top: var(--rr-space-4);
}

.rr-comment .children > .rr-comment + .rr-comment {
  padding-top: var(--rr-space-4);
  border-top: 1px dashed var(--rr-border);
}

/* Depth-aware left-border tint — nudges progressively muted as threads
 * deepen so the eye can chunk replies without literal numeric markers. */
.rr-comment--depth-3 + .children,
.rr-comment .children .children { border-left-color: var(--rr-border); }
.rr-comment .children .children .children { border-left-color: var(--rr-muted); opacity: 0.95; }

/* Single comment layout — avatar / body two-column. */
.rr-comment__article {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--rr-space-3) var(--rr-space-4);
}

.rr-comment__avatar {
  grid-row: 1 / span 3;
  flex-shrink: 0;
}

.rr-comment__avatar-img,
.rr-comment__avatar img {
  display: block;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--rr-bg-soft);
}

.rr-comment--depth-2 .rr-comment__avatar-img,
.rr-comment--depth-2 .rr-comment__avatar img,
.rr-comment--depth-3 .rr-comment__avatar-img,
.rr-comment--depth-3 .rr-comment__avatar img,
.rr-comment--depth-4 .rr-comment__avatar-img,
.rr-comment--depth-4 .rr-comment__avatar img,
.rr-comment--depth-5 .rr-comment__avatar-img,
.rr-comment--depth-5 .rr-comment__avatar img {
  width: 44px;
  height: 44px;
}

.rr-comment__main {
  min-width: 0; /* let long URLs in body wrap inside grid cell */
}

.rr-comment__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--rr-space-2);
  font-size: 0.9rem;
  margin: 0 0 var(--rr-space-2);
}

.rr-comment__author {
  font-family: 'robotoregular', sans-serif;
  font-weight: 500;
  color: var(--rr-heading);
  font-size: 1rem;
}

.rr-comment__author-link {
  color: inherit;
  text-decoration: none;
}

.rr-comment__author-link:hover,
.rr-comment__author-link:focus-visible {
  color: var(--rr-red);
}

.rr-comment__date {
  font-family: 'robotolight', 'robotoregular', sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--rr-muted);
  text-decoration: none;
}

.rr-comment__date:hover,
.rr-comment__date:focus-visible {
  color: var(--rr-text);
}

.rr-comment__reply-to {
  font-size: 0.82rem;
  color: var(--rr-muted);
}

.rr-comment__reply-to-link {
  color: var(--rr-red);
  text-decoration: none;
}

.rr-comment__reply-to-link:hover,
.rr-comment__reply-to-link:focus-visible {
  text-decoration: underline;
}

.rr-comment__body {
  color: var(--rr-text);
  line-height: 1.7;
}

.rr-comment__body p {
  margin: 0 0 var(--rr-space-3);
}

.rr-comment__body p:last-child {
  margin-bottom: 0;
}

.rr-comment__body a {
  color: var(--rr-red);
}

.rr-comment__body a:hover,
.rr-comment__body a:focus-visible {
  color: var(--rr-red-dark);
  text-decoration: underline;
}

.rr-comment__body blockquote {
  margin: var(--rr-space-3) 0;
  padding: var(--rr-space-2) var(--rr-space-4);
  border-left: 3px solid var(--rr-border);
  background: var(--rr-bg-soft);
  color: var(--rr-text);
  font-style: italic;
}

.rr-comment__moderation {
  margin: 0 0 var(--rr-space-3);
  padding: var(--rr-space-2) var(--rr-space-3);
  background: var(--rr-bg-soft);
  border-left: 3px solid var(--rr-red);
  border-radius: var(--rr-radius-sm);
  font-size: 0.88rem;
  color: var(--rr-muted);
}

.rr-comment--pending {
  opacity: 0.85;
}

.rr-comment__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rr-space-3);
  margin-top: var(--rr-space-3);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.rr-comment__actions a,
.rr-comment__actions .comment-reply-link {
  color: var(--rr-red);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.18s var(--rr-ease-out);
}

.rr-comment__actions a:hover,
.rr-comment__actions a:focus-visible,
.rr-comment__actions .comment-reply-link:hover,
.rr-comment__actions .comment-reply-link:focus-visible {
  color: var(--rr-red-dark);
  text-decoration: underline;
}

.rr-comment__edit {
  color: var(--rr-muted) !important;
}

/* Pagination — mimics the share-strip eyebrow type, brand-red active page. */
.rr-comments__pagination {
  margin-top: var(--rr-space-6);
  padding-top: var(--rr-space-4);
  border-top: 1px solid var(--rr-border);
  display: flex;
  flex-wrap: wrap;
  gap: var(--rr-space-2);
  justify-content: center;
}

.rr-comments__pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.25rem;
  padding: 0.4rem 0.75rem;
  font-family: 'robotoregular', sans-serif;
  font-size: 0.85rem;
  color: var(--rr-text);
  background: var(--rr-bg-soft);
  border: 1px solid var(--rr-border);
  border-radius: var(--rr-radius-sm);
  text-decoration: none;
}

.rr-comments__pagination .page-numbers.current {
  background: var(--rr-red);
  color: #fff;
  border-color: var(--rr-red);
}

.rr-comments__pagination .page-numbers:hover:not(.current),
.rr-comments__pagination .page-numbers:focus-visible:not(.current) {
  color: var(--rr-red);
  border-color: var(--rr-red);
  background: #fff;
}

/* ===== Comment form =====
 * Mirrors the .rr-contact form (Section 40) rhythm: uppercase tracked
 * labels, soft inputs, brand-red pill submit. Compact enough to live
 * inside the article column without dominating the page. */
.rr-comment-form {
  margin-top: var(--rr-space-6);
  padding: var(--rr-space-5);
  background: var(--rr-bg-soft);
  border: 1px solid var(--rr-border);
  border-radius: var(--rr-radius-md);
  position: relative;
  overflow: hidden;
}

.rr-comment-form::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--rr-red);
}

.rr-comment-form__title {
  font-family: 'vigaregular', 'robotoregular', sans-serif;
  font-size: clamp(1.15rem, 1rem + 0.4vw, 1.35rem);
  letter-spacing: 0.02em;
  color: var(--rr-heading);
  margin: 0 0 var(--rr-space-2);
}

.rr-comment-form__intro {
  font-size: 0.9rem;
  color: var(--rr-muted);
  margin: 0 0 var(--rr-space-4);
}

.rr-comment-form__form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--rr-space-3) var(--rr-space-4);
}

.rr-comment-form__field {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  margin: 0;
}

.rr-comment-form__field--comment,
.rr-comment-form__field--url,
.rr-comment-form__actions,
.rr-comment-form__must-login,
.rr-comment-form__intro {
  grid-column: 1 / -1;
}

@media (max-width: 540px) {
  .rr-comment-form__form {
    grid-template-columns: 1fr;
  }
}

.rr-comment-form__field label {
  font-family: 'robotoregular', sans-serif;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rr-heading);
}

.rr-comment-form__hint {
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--rr-muted);
  font-size: 0.78rem;
  margin-left: 0.25rem;
}

.rr-comment-form__req {
  margin-left: 2px;
  color: var(--rr-red);
}

.rr-comment-form__form input[type="text"],
.rr-comment-form__form input[type="email"],
.rr-comment-form__form input[type="url"],
.rr-comment-form__form textarea {
  width: 100%;
  padding: 0.55rem 0.75rem;
  font-family: 'robotoregular', sans-serif;
  font-size: 0.95rem;
  line-height: 1.4;
  color: var(--rr-heading);
  background: #fff;
  border: 1px solid var(--rr-border);
  border-radius: var(--rr-radius-sm);
  transition:
    border-color 0.15s var(--rr-ease-out),
    box-shadow 0.15s var(--rr-ease-out);
}

.rr-comment-form__form input[type="text"]::placeholder,
.rr-comment-form__form input[type="email"]::placeholder,
.rr-comment-form__form input[type="url"]::placeholder,
.rr-comment-form__form textarea::placeholder {
  color: var(--rr-muted);
  opacity: 1;
}

.rr-comment-form__form input[type="text"]:hover,
.rr-comment-form__form input[type="email"]:hover,
.rr-comment-form__form input[type="url"]:hover,
.rr-comment-form__form textarea:hover {
  border-color: #c8c8c8;
}

.rr-comment-form__form input[type="text"]:focus,
.rr-comment-form__form input[type="email"]:focus,
.rr-comment-form__form input[type="url"]:focus,
.rr-comment-form__form textarea:focus {
  outline: 0;
  border-color: var(--rr-red);
  box-shadow: 0 0 0 3px rgba(241, 52, 52, 0.14);
}

.rr-comment-form__form textarea {
  resize: vertical;
  min-height: 7rem;
}

.rr-comment-form__actions {
  margin: var(--rr-space-2) 0 0;
  display: flex;
  align-items: center;
  gap: var(--rr-space-3);
  flex-wrap: wrap;
}

.rr-comment-form__submit {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--rr-space-2);
  padding: 0.65rem 1.4rem;
  background: var(--rr-red);
  color: #fff;
  font-family: 'robotoregular', sans-serif;
  font-size: 0.88rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: 1px solid var(--rr-red);
  border-radius: var(--rr-radius-sm);
  cursor: pointer;
  transition:
    transform 0.18s var(--rr-ease-out),
    background 0.18s var(--rr-ease-out),
    border-color 0.18s var(--rr-ease-out),
    box-shadow 0.18s var(--rr-ease-out);
}

.rr-comment-form__submit:hover,
.rr-comment-form__submit:focus-visible {
  background: var(--rr-red-dark);
  border-color: var(--rr-red-dark);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(241, 52, 52, 0.28);
}

.rr-comment-form__submit:active {
  transform: translateY(0);
  box-shadow: none;
}

/* Reply form: when WordPress moves #commentform into a parent <li>, fade
 * the chrome down a notch so the reply hierarchy is visually clear. */
.rr-comment-list .rr-comment-form {
  margin-top: var(--rr-space-4);
}

.rr-comment-form #cancel-comment-reply-link {
  color: var(--rr-muted);
  text-decoration: none;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.rr-comment-form #cancel-comment-reply-link:hover,
.rr-comment-form #cancel-comment-reply-link:focus-visible {
  color: var(--rr-red);
  text-decoration: underline;
}

/* Empty-state shim: when the post has 0 comments and the form heading is
 * the "Be the first to comment" intro, give it slightly more breathing
 * room above so it doesn't feel orphaned under the share strip. */
.rr-comments:not(:has(.rr-comment-list)) .rr-comment-form {
  margin-top: var(--rr-space-5);
}

/* Tighten on narrow screens so the avatar column doesn't squeeze content. */
@media (max-width: 540px) {
  .rr-comment__article {
    grid-template-columns: 40px 1fr;
    gap: var(--rr-space-2) var(--rr-space-3);
  }
  .rr-comment__avatar-img,
  .rr-comment__avatar img {
    width: 40px;
    height: 40px;
  }
  .rr-comment .children {
    padding-left: var(--rr-space-3);
  }
  .rr-comment-form {
    padding: var(--rr-space-4);
  }
}