/* ============================================================
 * Run Reviews — CPT single + search + 404 polish (2026)
 * ------------------------------------------------------------
 * Loaded LAST (after modern.css) so it wins the cascade. Scope:
 * the custom-post-type single templates, the search results page,
 * and the 404 page. Design direction: "modern editorial review
 * authority" — ink-dominant charcoal, brand RED as a sharp accent,
 * generous editorial whitespace, soft layered depth.
 *
 * Tokens consumed via var() (defined in modern.css :root) — this
 * file never (re)declares tokens or @font-face.
 *
 * Structure map:
 *   1. Shared editorial article shell (all CPT singles)
 *   2. Entry header — eyebrow kicker + title + meta
 *   3. Featured thumbnail (editorial framing)
 *   4. Prose rhythm for .entry-content (the migrated body copy)
 *   5. Repeater sections — news / workout / faq / accessorie
 *   6. FAQ-as-Q&A treatment (heading-less rows -> clean answer cards)
 *   7. Testimonial — editorial pull-quote
 *   8. Running-advice "Source:" footnote
 *   9. Search results page refinement
 *  10. 404 — helpful, on-brand page
 *  11. Reduced-motion + responsive
 * ============================================================ */

/* The CPT single body classes set on <main> by each template:
 *   single-advice · single-news · single-faq · single-workout
 *   single-testimonial · single-accessory
 * We group them so the shared editorial shell applies uniformly. */

/* ---------- 1. Shared editorial article shell ---------- */
.single-advice > .site-content-wrap > article,
.single-news > .site-content-wrap > article,
.single-faq > .site-content-wrap > article,
.single-workout > .site-content-wrap > article,
.single-accessory > .site-content-wrap > article {
  display: flex;
  flex-direction: column;
  gap: var(--rr-space-5);
  padding-block: var(--rr-space-4) 0;
}

/* Constrain prose to a comfortable reading measure while letting
 * full-bleed elements (tables, images) breathe a touch wider.
 * The article column already lives in the 2-col content grid, so we
 * only cap the inner text blocks — not the article box itself. */
.single-advice .entry-content,
.single-news .entry-content,
.single-faq .entry-content,
.single-workout .entry-content,
.single-accessory .entry-content,
.single-advice .rr-news-section__body,
.single-news .rr-news-section__body,
.single-faq .rr-faq-section__body,
.single-accessory .rr-faq-section__body,
.single-workout .rr-workout-section__body {
  max-width: var(--rr-measure);
}

/* ---------- 2. Entry header — eyebrow kicker + title + meta ---------- */
.single-advice .entry-header,
.single-news .entry-header,
.single-faq .entry-header,
.single-workout .entry-header,
.single-testimonial .entry-header,
.single-accessory .entry-header {
  display: flex;
  flex-direction: column;
  gap: var(--rr-space-3);
  margin-bottom: 0;
}

/* Small decorative kicker label (rendered as a <p>/<span>, never a
 * heading) — establishes editorial "section" authority above the H1. */
.rr-cpt-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  align-self: flex-start;
  margin: 0;
  font-family: var(--rr-font-sans);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rr-red);
}
.rr-cpt-eyebrow::before {
  content: "";
  width: 1.5rem;
  height: 2px;
  background: var(--rr-red);
  border-radius: var(--rr-radius-pill);
}

/* Title: lean on modern.css display sizing; just tighten rhythm. */
.single-advice .entry-title,
.single-news .entry-title,
.single-faq .entry-title,
.single-workout .entry-title,
.single-testimonial .entry-title,
.single-accessory .entry-title {
  margin: 0;
  max-width: 22ch;
  max-width: min(22ch, 100%);
}

/* News meta line — quiet, dotted from the title. */
.single-news .entry-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--rr-font-sans);
  font-size: 0.9rem;
  color: var(--rr-ink-500);
}
.single-news .entry-meta time {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
/* Small ink dot before the date — avoids depending on the FA *JS kit*
 * (SVG-with-JS), which never ships a webfont, so CSS ::before glyphs
 * can't render. A token-colored dot is reliable + on-brand. */
.single-news .entry-meta time::before {
  content: "";
  width: 0.4rem;
  height: 0.4rem;
  border-radius: var(--rr-radius-pill);
  background: var(--rr-red);
  flex: none;
}

/* ---------- 3. Featured thumbnail (editorial framing) ---------- */
.single-advice .entry-thumbnail,
.single-news .entry-thumbnail,
.single-workout .entry-thumbnail,
.single-accessory .entry-thumbnail {
  margin: 0;
  border-radius: var(--rr-radius-lg);
  overflow: hidden;
  background: var(--rr-ink-50);
  border: 1px solid var(--rr-ink-200);
  box-shadow: var(--rr-shadow-card);
}
.single-advice .entry-thumbnail img,
.single-news .entry-thumbnail img,
.single-workout .entry-thumbnail img,
.single-accessory .entry-thumbnail img {
  display: block;
  width: 100%;
  height: auto;
}

/* ---------- 4. Prose rhythm for .entry-content ----------
 * main.css ships almost no editorial typography for the migrated
 * body copy (only a blockquote rule). Establish a clean, modern
 * vertical rhythm + heading hierarchy here. Applies to every CPT
 * single body and the repeater body wrappers, which carry the same
 * the_content()-filtered HTML. */
.rr-prose,
.single-advice .entry-content,
.single-news .entry-content,
.single-faq .entry-content,
.single-workout .entry-content,
.single-accessory .entry-content,
.rr-news-section__body,
.rr-faq-section__body,
.rr-workout-section__body {
  color: var(--rr-ink-700);
  line-height: 1.72;
  font-size: 1.0625rem;
}

/* Paragraph rhythm. */
.single-advice .entry-content p,
.single-news .entry-content p,
.single-faq .entry-content p,
.single-workout .entry-content p,
.single-accessory .entry-content p,
.rr-news-section__body p,
.rr-faq-section__body p,
.rr-workout-section__body p {
  margin: 0 0 1.15em;
}
.single-advice .entry-content > *:last-child,
.single-news .entry-content > *:last-child,
.single-faq .entry-content > *:last-child,
.single-workout .entry-content > *:last-child,
.single-accessory .entry-content > *:last-child,
.rr-news-section__body > *:last-child,
.rr-faq-section__body > *:last-child,
.rr-workout-section__body > *:last-child { margin-bottom: 0; }

/* In-body headings (legacy inline <h2>/<h3> inside post copy):
 * editorial scale, generous top space, tight to the text below. */
.single-advice .entry-content h2,
.single-news .entry-content h2,
.single-faq .entry-content h2,
.single-workout .entry-content h2,
.single-accessory .entry-content h2,
.rr-news-section__body h2,
.rr-faq-section__body h2,
.rr-workout-section__body h2 {
  font-family: var(--rr-font-display);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--rr-ink-900);
  font-size: clamp(1.45rem, 1.2rem + 0.9vw, 1.85rem);
  line-height: 1.18;
  margin: 2.1em 0 0.55em;
}
.single-advice .entry-content h3,
.single-news .entry-content h3,
.single-faq .entry-content h3,
.single-workout .entry-content h3,
.single-accessory .entry-content h3,
.rr-news-section__body h3,
.rr-faq-section__body h3,
.rr-workout-section__body h3 {
  font-family: var(--rr-font-display);
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--rr-ink-900);
  font-size: clamp(1.2rem, 1.05rem + 0.5vw, 1.4rem);
  line-height: 1.25;
  margin: 1.7em 0 0.45em;
}
.single-advice .entry-content h4,
.single-news .entry-content h4,
.single-faq .entry-content h4,
.single-workout .entry-content h4,
.single-accessory .entry-content h4,
.rr-news-section__body h4,
.rr-faq-section__body h4,
.rr-workout-section__body h4 {
  font-family: var(--rr-font-display);
  font-weight: 600;
  color: var(--rr-ink-900);
  font-size: 1.1rem;
  margin: 1.5em 0 0.4em;
}
/* First heading shouldn't push a giant gap when it opens the body. */
.single-advice .entry-content > h2:first-child,
.single-news .entry-content > h2:first-child,
.single-faq .entry-content > h2:first-child,
.single-workout .entry-content > h2:first-child,
.single-accessory .entry-content > h2:first-child,
.rr-news-section__body > h2:first-child,
.rr-faq-section__body > h2:first-child,
.rr-workout-section__body > h2:first-child { margin-top: 0; }

/* Lists — comfortable indentation + marker color. */
.single-advice .entry-content ul,
.single-advice .entry-content ol,
.single-news .entry-content ul,
.single-news .entry-content ol,
.single-faq .entry-content ul,
.single-faq .entry-content ol,
.single-workout .entry-content ul,
.single-workout .entry-content ol,
.single-accessory .entry-content ul,
.single-accessory .entry-content ol,
.rr-news-section__body ul,
.rr-news-section__body ol,
.rr-faq-section__body ul,
.rr-faq-section__body ol,
.rr-workout-section__body ul,
.rr-workout-section__body ol {
  margin: 0 0 1.2em;
  padding-left: 1.35em;
}
.single-advice .entry-content li,
.single-news .entry-content li,
.single-faq .entry-content li,
.single-workout .entry-content li,
.single-accessory .entry-content li,
.rr-news-section__body li,
.rr-faq-section__body li,
.rr-workout-section__body li { margin: 0.3em 0; }
.single-advice .entry-content ul li::marker,
.single-news .entry-content ul li::marker,
.single-faq .entry-content ul li::marker,
.single-workout .entry-content ul li::marker,
.single-accessory .entry-content ul li::marker,
.rr-news-section__body ul li::marker,
.rr-faq-section__body ul li::marker,
.rr-workout-section__body ul li::marker { color: var(--rr-red); }

/* Inline images / figures in body copy — soft framing, centered
 * legacy `aligncenter` images get a touch of depth. */
.single-advice .entry-content img,
.single-news .entry-content img,
.single-faq .entry-content img,
.single-workout .entry-content img,
.single-accessory .entry-content img,
.rr-news-section__body img,
.rr-faq-section__body img,
.rr-workout-section__body img {
  max-width: 100%;
  height: auto;
  border-radius: var(--rr-radius-md);
}
.single-advice .entry-content img.aligncenter,
.single-news .entry-content img.aligncenter,
.single-faq .entry-content img.aligncenter,
.single-workout .entry-content img.aligncenter,
.single-accessory .entry-content img.aligncenter,
.rr-news-section__body img.aligncenter,
.rr-faq-section__body img.aligncenter,
.rr-workout-section__body img.aligncenter {
  display: block;
  margin-inline: auto;
  margin-block: 1.4em;
}
/* Caption-ish single-line paragraphs right under an image (e.g.
 * "Photo source: …") read as a quiet caption. */
.rr-news-section__body p > img.aligncenter + br { display: none; }

/* Blockquotes inside body copy — refined editorial pull treatment
 * (overrides the legacy italic left-rule from main.css §7). */
.single-advice .entry-content blockquote,
.single-news .entry-content blockquote,
.single-faq .entry-content blockquote,
.single-workout .entry-content blockquote,
.single-accessory .entry-content blockquote,
.rr-news-section__body blockquote,
.rr-faq-section__body blockquote,
.rr-workout-section__body blockquote {
  margin: 1.6em 0;
  padding: var(--rr-space-3) var(--rr-space-5);
  border-left: 3px solid var(--rr-red);
  background: var(--rr-ink-50);
  border-radius: 0 var(--rr-radius-md) var(--rr-radius-md) 0;
  color: var(--rr-ink-800);
  font-style: normal;
}

/* Strong = ink, not muted (helps the many <strong> lead-ins). */
.single-advice .entry-content strong,
.single-news .entry-content strong,
.single-faq .entry-content strong,
.single-workout .entry-content strong,
.single-accessory .entry-content strong,
.rr-news-section__body strong,
.rr-faq-section__body strong,
.rr-workout-section__body strong { color: var(--rr-ink-900); font-weight: 700; }

/* Tables in body copy (TablePress + plain) — just add vertical rhythm.
 * modern.css §7 already gives them width:100%, soft borders, rounded
 * corners (overflow:hidden) — we must NOT clobber that on desktop, so we
 * only add margin here and push the horizontal-scroll safety into the
 * small-screen media query (§11) where shrinking the table is acceptable. */
.single-advice .entry-content table,
.single-news .entry-content table,
.single-faq .entry-content table,
.single-workout .entry-content table,
.single-accessory .entry-content table {
  margin: 1.6em 0;
}
/* TablePress wrapper / name heading spacing. */
.entry-content .tablepress-table-name {
  font-family: var(--rr-font-display);
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--rr-ink-900);
}

/* ---------- 5. Repeater sections — news / workout / faq / accessorie ----------
 * main.css gives these a heavy 3px-red underline heading. Re-skin to the
 * refined hairline + short accent motif used site-wide (modern.css §4),
 * and separate consecutive rows with a soft divider so a long stack of
 * sections reads as one editorial spine. */
.rr-news-sections,
.rr-workout-sections,
.rr-faq-sections {
  gap: var(--rr-space-7);
  margin-top: var(--rr-space-6);
}

.rr-news-section__heading,
.rr-workout-section__heading,
.rr-faq-section__heading {
  position: relative;
  font-family: var(--rr-font-display);
  font-weight: 600;
  letter-spacing: -0.02em;
  font-size: clamp(1.4rem, 1.15rem + 0.8vw, 1.8rem);
  line-height: 1.18;
  color: var(--rr-ink-900);
  padding-bottom: var(--rr-space-3);
  border-bottom: 1px solid var(--rr-ink-200);
}
.rr-news-section__heading::after,
.rr-workout-section__heading::after,
.rr-faq-section__heading::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 2.5rem;
  height: 3px;
  background: var(--rr-red);
  border-radius: var(--rr-radius-pill);
}

/* Repeater body links pick up the global prose underline-on-hover. */
.rr-news-section__body a,
.rr-workout-section__body a,
.rr-faq-section__body a {
  color: var(--rr-red);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--rr-red); /* fallback */
  text-decoration-color: color-mix(in srgb, var(--rr-red) 35%, transparent);
}
.rr-news-section__body a:hover,
.rr-workout-section__body a:hover,
.rr-faq-section__body a:hover {
  color: var(--rr-red-dark);
  text-decoration-color: currentColor;
}

/* ---------- 6. FAQ-as-Q&A treatment ----------
 * On the `faqs` CPT, repeater rows usually have NO <h2> — each row is a
 * self-contained answer (often "On <Brand>: …"). Markup is fixed
 * <section class="rr-faq-section"><div class="rr-faq-section__body">,
 * so a native <details> accordion isn't possible; instead we render each
 * row as a clean, card-like answer block with a red index rail — modern,
 * scannable, and distinct from the news/workout long-form rows.
 *
 * Heading-LESS rows (no <h2>) → card treatment.
 * Heading-FULL rows (accessorie long-form) → keep the editorial heading. */
.single-faq .rr-faq-section,
.single-accessory .rr-faq-section {
  position: relative;
}

/* Card treatment applies to the body of *every* faq/accessorie row, but
 * stays visually light so heading-led long-form (accessorie) still reads
 * as an article rather than a boxy widget. */
.single-faq .rr-faq-section__body {
  padding: var(--rr-space-4) var(--rr-space-5);
  background: var(--rr-bg);
  border: 1px solid var(--rr-ink-200);
  border-left: 3px solid var(--rr-red);
  border-radius: var(--rr-radius-md);
  box-shadow: var(--rr-shadow-card);
}
/* Lead-in <strong> ("On Horizon Treadmills:") reads as a mini answer
 * label. */
.single-faq .rr-faq-section__body > p:first-child > strong:first-child {
  color: var(--rr-ink-900);
}

/* Accessorie rows keep article-flow bodies (no card box) — they carry
 * full headings + nested H2s. */
.single-accessory .rr-faq-section__body {
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
}

/* ---------- 7. Testimonial — editorial pull-quote ---------- */
.single-testimonial .site-content-wrap > article {
  padding-block: var(--rr-space-5) 0;
}
.single-testimonial .entry-content,
.single-testimonial blockquote.entry-content {
  position: relative;
  max-width: var(--rr-measure);
  margin: var(--rr-space-5) 0 0;
  padding: var(--rr-space-6) 0 0;
  border: 0;
  font-style: normal;
  color: var(--rr-ink-800);
  font-size: clamp(1.2rem, 1.05rem + 0.7vw, 1.6rem);
  line-height: 1.5;
  font-family: var(--rr-font-display);
  font-weight: 400;
  letter-spacing: -0.01em;
}
.single-testimonial blockquote.entry-content::before {
  content: "\201C"; /* left double quote */
  position: absolute;
  top: -0.35em;
  left: -0.02em;
  font-family: var(--rr-font-display);
  font-weight: 700;
  font-size: 4.5rem;
  line-height: 1;
  color: var(--rr-red);
  opacity: 0.9;
}
.single-testimonial blockquote.entry-content p { margin: 0 0 0.7em; }
.single-testimonial blockquote.entry-content p:last-child { margin-bottom: 0; }
.single-testimonial blockquote.entry-content a {
  color: var(--rr-red);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ---------- 8. Running-advice "Source:" footnote ---------- */
.tip-source {
  margin-top: var(--rr-space-6);
  padding-top: var(--rr-space-4);
  border-top: 1px solid var(--rr-ink-200);
  font-size: 0.9rem;
  color: var(--rr-ink-500);
}
.tip-source a {
  color: var(--rr-red);
  text-decoration: underline;
  text-underline-offset: 2px;
  word-break: break-word;
}

/* ============================================================
 * 9. SEARCH RESULTS PAGE — refinement
 * main.css §44 already builds the search hero + buckets + cards.
 * We sharpen it to the modern editorial system: ink hero band,
 * hairline section heads (drop the heavy 2px-red underline), tighter
 * card meta, refined empty-state.
 * ============================================================ */

/* Hero — promote to an ink band with a soft red atmosphere, matching
 * the homepage hero family without copying its full chrome. */
.rr-search-page-hero {
  gap: var(--rr-space-3);
  padding: clamp(var(--rr-space-6), 4vw, var(--rr-space-8)) clamp(var(--rr-space-5), 4vw, var(--rr-space-7));
  margin-bottom: var(--rr-space-6);
  border-bottom: 0;
  border-radius: var(--rr-radius-lg);
  background: var(--rr-ink-900);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.rr-search-page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(55% 90% at 92% 8%, rgba(224, 50, 43, 0.30), transparent 60%),
    radial-gradient(50% 70% at 0% 100%, rgba(224, 50, 43, 0.12), transparent 55%);
  pointer-events: none;
}
.rr-search-page-hero__eyebrow {
  font-family: var(--rr-font-sans);
  font-weight: 700;
  letter-spacing: 0.2em;
  color: rgba(255, 255, 255, 0.72);
}
.rr-search-page-hero__title {
  font-family: var(--rr-font-display);
  font-weight: 700;
  letter-spacing: -0.025em;
  color: #fff;
}
.rr-search-page-hero__query { color: var(--rr-red); }
.rr-search-page-hero__count {
  font-family: var(--rr-font-sans);
  color: rgba(255, 255, 255, 0.66);
}
.rr-search-page-hero__form { margin-top: var(--rr-space-2); }
.rr-search-page-hero__form .rr-search { max-width: 520px; }

/* Section heads — hairline + short red accent (matches §4 motif). */
.rr-search-section {
  gap: var(--rr-space-4);
  margin-bottom: var(--rr-space-7);
}
.rr-search-section__title {
  position: relative;
  font-family: var(--rr-font-display);
  font-weight: 600;
  letter-spacing: -0.015em;
  font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
  color: var(--rr-ink-900);
  padding-bottom: var(--rr-space-3);
  border-bottom: 1px solid var(--rr-ink-200);
}
.rr-search-section__title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 2.5rem;
  height: 3px;
  background: var(--rr-red);
  border-radius: var(--rr-radius-pill);
}
.rr-search-section__title i { color: var(--rr-red); font-size: 0.95rem; }
.rr-search-section__count {
  margin-left: auto;
  background: var(--rr-ink-50);
  border: 1px solid var(--rr-ink-200);
  color: var(--rr-ink-600);
  font-family: var(--rr-font-sans);
  font-weight: 700;
}

/* Brand chips — keep the lift; modernize border + label. */
.rr-search-brand-chip {
  border-color: var(--rr-ink-200);
  border-left: 3px solid var(--rr-red);
  border-radius: var(--rr-radius-md);
  color: var(--rr-ink-900);
}
.rr-search-brand-chip:hover,
.rr-search-brand-chip:focus-visible {
  border-color: var(--rr-ink-300);
  border-left-color: var(--rr-red);
}
.rr-search-brand-chip__name { font-family: var(--rr-font-sans); color: var(--rr-ink-900); }
.rr-search-brand-chip__count { font-family: var(--rr-font-sans); color: var(--rr-ink-500); }

/* Result cards — refined ink/border + meta chips. */
.rr-search-card {
  border-color: var(--rr-ink-200);
  border-radius: var(--rr-radius-lg);
  color: var(--rr-ink-900);
}
.rr-search-card:hover,
.rr-search-card:focus-visible { border-color: var(--rr-red); }
.rr-search-card__media { background: var(--rr-ink-50); border-radius: var(--rr-radius-md); }
.rr-search-card__meta { color: var(--rr-ink-500); }
.rr-search-card__kind {
  background: var(--rr-red-50);
  border-color: var(--rr-red-50); /* fallback */
  border-color: color-mix(in srgb, var(--rr-red) 22%, transparent);
  color: var(--rr-red-700);
  font-weight: 700;
}
.rr-search-card__title { font-family: var(--rr-font-sans); color: var(--rr-ink-900); }
.rr-search-card__excerpt { font-family: var(--rr-font-sans); color: var(--rr-ink-600); }

/* Query highlight — align to the brand-red token (main.css uses an
 * old flat rgba). */
.rr-search-hl {
  background: var(--rr-red-50);
  color: var(--rr-red-700);
  font-weight: 600;
  padding: 0 0.12rem;
  border-radius: 3px;
}

/* Empty state — soft card, refined links. */
.rr-search-empty {
  gap: var(--rr-space-3);
  padding: clamp(var(--rr-space-6), 5vw, var(--rr-space-8)) var(--rr-space-5);
  background: var(--rr-ink-50);
  border: 1px solid var(--rr-ink-200);
  border-radius: var(--rr-radius-lg);
}
.rr-search-empty__icon { color: var(--rr-red); }
.rr-search-empty__title { font-family: var(--rr-font-display); font-weight: 600; letter-spacing: -0.02em; color: var(--rr-ink-900); }
.rr-search-empty__hint { font-family: var(--rr-font-sans); color: var(--rr-ink-600); }
.rr-search-empty__links a {
  font-family: var(--rr-font-sans);
  font-weight: 600;
  background: var(--rr-bg);
  border-color: var(--rr-ink-200);
  border-radius: var(--rr-radius-pill);
  color: var(--rr-ink-800);
  padding: 0.5rem 1.05rem;
  transition: border-color 0.18s, color 0.18s, transform 0.18s;
}
.rr-search-empty__links a:hover,
.rr-search-empty__links a:focus-visible {
  border-color: var(--rr-red);
  color: var(--rr-red);
  transform: translateY(-1px);
}

/* ============================================================
 * 10. 404 — helpful, on-brand page
 * main.css ships no rules for .error-404 / .error-content, so the
 * default 404 reads as a bare stack. Build a confident editorial
 * "not found" with a search box + suggested destinations.
 * ============================================================ */
.error-404 .error-content {
  display: flex;
  flex-direction: column;
  gap: var(--rr-space-4);
  align-items: flex-start;
  padding: clamp(var(--rr-space-6), 5vw, var(--rr-space-9)) clamp(var(--rr-space-5), 4vw, var(--rr-space-8));
  background: var(--rr-ink-900);
  border-radius: var(--rr-radius-lg);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  color: rgba(255, 255, 255, 0.78);
}
.error-404 .error-content::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(55% 90% at 90% 6%, rgba(224, 50, 43, 0.30), transparent 60%),
    radial-gradient(50% 70% at 0% 100%, rgba(224, 50, 43, 0.10), transparent 55%);
}
/* Giant ghost "404" watermark for character. */
.error-404 .error-content::before {
  content: "404";
  position: absolute;
  top: 50%;
  right: clamp(-0.5rem, -2vw, 1rem);
  transform: translateY(-50%);
  z-index: -1;
  font-family: var(--rr-font-display);
  font-weight: 800;
  font-size: clamp(7rem, 18vw, 14rem);
  line-height: 1;
  letter-spacing: -0.05em;
  color: rgba(255, 255, 255, 0.05);
  pointer-events: none;
  user-select: none;
}
.error-404 .page-title {
  margin: 0;
  color: #fff;
  font-family: var(--rr-font-display);
  font-weight: 700;
  letter-spacing: -0.025em;
  max-width: 16ch;
}
.error-404 .error-content > p {
  margin: 0;
  max-width: 46ch;
  font-size: 1.05rem;
  color: rgba(255, 255, 255, 0.78);
}
/* The re-rendered header search form sits on the ink band. */
.error-404 .error-content .rr-search {
  width: 100%;
  max-width: 480px;
  margin-top: var(--rr-space-1);
}

/* Suggested-links row (rendered by 404.php below the search). */
.rr-404-suggestions {
  list-style: none;
  margin: var(--rr-space-2) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--rr-space-3);
}
.rr-404-suggestions a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1.05rem;
  border-radius: var(--rr-radius-pill);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #fff;
  font-family: var(--rr-font-sans);
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
  transition: background 0.18s, border-color 0.18s, transform 0.18s;
}
.rr-404-suggestions a:hover,
.rr-404-suggestions a:focus-visible {
  background: var(--rr-red);
  border-color: var(--rr-red);
  transform: translateY(-1px);
}
.rr-404-suggestions a i { color: inherit; opacity: 0.85; font-size: 0.85em; }

/* On the 404, the sidebar reads as a "popular destinations" rail —
 * keep it but let the hero own the top of the column. */
.error-404 .error-content + .site-sidebar { margin-top: var(--rr-space-2); }

/* ============================================================
 * 11. Reduced-motion + responsive
 * ============================================================ */
@media (max-width: 600px) {
  .single-faq .rr-faq-section__body {
    padding: var(--rr-space-3) var(--rr-space-4);
  }
  .rr-search-page-hero {
    padding: var(--rr-space-5) var(--rr-space-4);
  }
  .error-404 .error-content {
    padding: var(--rr-space-6) var(--rr-space-4);
  }
  .single-testimonial blockquote.entry-content::before { font-size: 3.2rem; }

  /* Wide body tables get horizontal scroll instead of overflowing the
   * viewport. display:block turns the <table> into its own scroll box;
   * acceptable on phones where the rounded-corner clip matters less than
   * not breaking layout. */
  .single-advice .entry-content table,
  .single-news .entry-content table,
  .single-faq .entry-content table,
  .single-workout .entry-content table,
  .single-accessory .entry-content table {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rr-search-empty__links a,
  .rr-404-suggestions a {
    transition: none;
  }
}

/* ============================================================
 * 12. CPT in-content discovery module (template-parts/cpt-related.php)
 * Full-width "More …" band after a CPT article: a 3-up grid of recent
 * same-type posts + a contextual CTA to the treadmill picks. Reuses the
 * site .rr-section / .rr-cardgrid / .rr-card / .button system; only the
 * grid track count, title spacing, and the CTA block are bespoke here.
 * ============================================================ */

/* Editorial section title (left-aligned via modern.css §4) gets the
 * short hairline + red accent motif used by the other CPT section heads. */
.rr-cpt-related__title {
  position: relative;
  margin: 0 0 var(--rr-space-6);
  padding-bottom: var(--rr-space-3);
  border-bottom: 1px solid var(--rr-ink-200);
}
.rr-cpt-related__title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 2.5rem;
  height: 3px;
  background: var(--rr-red);
  border-radius: var(--rr-radius-pill);
}

/* 3-up grid (matches posts_per_page=3); collapses gracefully. */
.rr-cardgrid--cpt {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}
.rr-cpt-related__item { margin: 0; }
.rr-cpt-related__item .rr-card { height: 100%; }

/* Neutralize the stray left margin main.css gives .rr-card__title (it
 * assumes a sibling input); here the title is the card's own block. */
.rr-cpt-related__item .rr-card__title {
  margin: 0;
  font-family: var(--rr-font-sans);
  font-weight: 600;
  color: var(--rr-ink-900);
  letter-spacing: -0.01em;
}

/* Contextual CTA — quiet card-like band; sits below the grid (separated
 * by a hairline) or stands alone when there are no related posts. */
.rr-cpt-related__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--rr-space-4);
  margin-top: var(--rr-space-6);
  padding: var(--rr-space-5) clamp(var(--rr-space-4), 3vw, var(--rr-space-6));
  background: var(--rr-bg);
  border: 1px solid var(--rr-ink-200);
  border-left: 3px solid var(--rr-red);
  border-radius: var(--rr-radius-lg);
  box-shadow: var(--rr-shadow-card);
}
/* When the grid is skipped, the CTA is the only block — drop the top gap. */
.rr-cpt-related .rr-section__inner > .rr-cpt-related__cta:first-child {
  margin-top: 0;
}
.rr-cpt-related__cta-lead {
  margin: 0;
  flex: 1 1 18rem;
  font-family: var(--rr-font-display);
  font-weight: 500;
  font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.3rem);
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--rr-ink-900);
}
/* Red pill inherits .button base; ensure it never shrinks below its label. */
.rr-cpt-related__cta-btn { flex: 0 0 auto; white-space: nowrap; }

@media (max-width: 600px) {
  .rr-cpt-related__cta {
    flex-direction: column;
    align-items: flex-start;
    padding: var(--rr-space-4);
  }
  .rr-cpt-related__cta-btn { width: 100%; text-align: center; }
}