/* ============================================================
 * Run Reviews — Archive + Category-landing polish (2026)
 * ------------------------------------------------------------
 * Loaded AFTER css/modern.css (auto-enqueued via functions.php with
 * the `runreviews-modern` dependency), so these rules win the cascade.
 *
 * Scope (per-template polish only — no markup/URL/query changes):
 *   1. CTA normalization — force affiliate CTAs to brand red (Task B).
 *   2. Category hero — editorial depth, refined rating + media.
 *   3. Role coherence — brand vs best-of vs year vs cpt (Task C).
 *   4. Editorial prose — intro/outro at --rr-measure, modern type.
 *   5. Product-card grid — cleaner data-forward retail tiles.
 *   6. Pagination — modern pill control.
 *   7. Non-rich archive list — tags / CPT archives (archive.php).
 *   8. Responsive refinements.
 *
 * Design direction: ink-dominant charcoal, brand RED as a sharp
 * precise accent, generous editorial whitespace, soft layered depth.
 * Tokens only (var()); fonts + tokens are owned by modern.css.
 * ============================================================ */

/* ============================================================
 * 1. AFFILIATE CTA NORMALIZATION (Task B)
 * ------------------------------------------------------------
 * Some terms/posts carry an off-brand `button_color` (e.g. #0013bf,
 * #1ca6df) that archive-category.php / archive-category-card.php pass
 * through as an inline `style="--rr-cta-color: …"`. The base rule in
 * main.css resolves `background`/`border` from that custom property,
 * so the CTA renders blue.
 *
 * Setting `background` / `border-color` to brand red HERE overrides
 * the inline style: the inline rule only sets the *custom property*
 * --rr-cta-color (not the `background`/`border-color` declarations),
 * so a real-property declaration wins over the variable-driven base.
 *
 * Selectors are scoped to the archive wrapper (`.rr-category-page` —
 * the only place these CTAs render) which also lifts specificity to
 * 0,2,0. That keeps the red authoritative over any equal-specificity
 * bare `.rr-cta-affiliate` rule from sibling stylesheets, present or
 * future, WITHOUT resorting to !important. (No archive CTA carries an
 * inline `background`, so no inline style can out-rank these.)
 * ============================================================ */
.rr-category-page .rr-cta-affiliate,
.rr-category-page .rr-category-hero__cta,
.rr-category-page .rr-product-card__cta {
  /* Re-point the token too, so any downstream consumer of
   * --rr-cta-color (e.g. focus rings) also reads brand red. */
  --rr-cta-color: var(--rr-red);
  background: var(--rr-red);
  border-color: var(--rr-red);
  color: #fff;
}

/* Hover/focus: deepen to red-dark instead of the legacy brightness
 * filter so the on-brand color stays crisp (no muddy multiply). */
.rr-category-page .rr-cta-affiliate:hover,
.rr-category-page .rr-cta-affiliate:focus-visible,
.rr-category-page .rr-category-hero__cta:hover,
.rr-category-page .rr-category-hero__cta:focus-visible,
.rr-category-page .rr-product-card__cta:hover,
.rr-category-page .rr-product-card__cta:focus-visible {
  background: var(--rr-red-dark);
  border-color: var(--rr-red-dark);
  color: #fff;
  filter: none;
}

/* Sharpen the affiliate CTA shape to match the modern button language
 * (pill, refined weight, tighter tracking). Scoped to the archive so
 * this stylesheet never bleeds onto single-review CTAs, which their own
 * stylesheet owns. */
.rr-category-page .rr-cta-affiliate {
  border-radius: var(--rr-radius-pill);
  border-width: 1.5px;
  letter-spacing: 0;
  text-transform: none;
  font-weight: 700;
}

/* Keyboard focus: visible brand ring on the now-red control (a11y). */
.rr-category-page .rr-cta-affiliate:focus-visible {
  outline: 2px solid var(--rr-red);
  outline-offset: 3px;
  box-shadow: var(--rr-shadow-card-hover), 0 0 0 3px var(--rr-red-50);
}

/* ============================================================
 * 2. CATEGORY PAGE SHELL + HERO
 * ============================================================ */
.rr-category-page {
  gap: clamp(var(--rr-space-7), 5vw, var(--rr-space-9));
}

/* Hero: lift onto a soft ink panel so the page opens with editorial
 * authority + layered depth, rather than floating copy on white. */
.rr-category-hero {
  position: relative;
  padding: clamp(var(--rr-space-5), 4vw, var(--rr-space-8));
  background:
    radial-gradient(120% 140% at 100% 0%, var(--rr-red-50) 0%, transparent 42%),
    var(--rr-ink-50);
  border: 1px solid var(--rr-ink-200);
  border-radius: var(--rr-radius-lg);
  box-shadow: var(--rr-shadow-card);
  overflow: hidden;
}

/* Sharp red rule down the leading edge — the "precise accent". */
.rr-category-hero::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 4px;
  background: var(--rr-red);
}

.rr-category-hero__copy {
  gap: clamp(var(--rr-space-3), 2vw, var(--rr-space-4));
}

/* Eyebrow: kicker style — small caps + a short red tick. Used by both
 * the brand "Brand reviews" eyebrow and the best-of "Buying guide". */
.rr-category-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0;
  font-family: var(--rr-font-sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rr-red-dark);
}
.rr-category-hero__eyebrow::before {
  content: "";
  width: 1.4rem;
  height: 2px;
  background: var(--rr-red);
  border-radius: var(--rr-radius-pill);
  flex: none;
}

/* Title: display font is already set by modern.css; reset the legacy
 * left margin + open the leading slightly for the larger ink type. */
.rr-category-hero__title {
  margin: 0;
  font-size: clamp(2.1rem, 1.5rem + 2.4vw, 3.25rem);
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: var(--rr-ink-900);
}

/* Rating: render as a compact data chip so it reads as a verdict, not
 * loose inline text. */
.rr-category-hero__rating {
  align-items: center;
  gap: 0.6rem;
  align-self: flex-start;
  padding: 0.4rem 0.85rem 0.4rem 0.6rem;
  background: #fff;
  border: 1px solid var(--rr-ink-200);
  border-radius: var(--rr-radius-pill);
  box-shadow: var(--rr-shadow-card);
}
.rr-category-hero__rating-value {
  font-family: var(--rr-font-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--rr-ink-900);
}
.rr-category-hero__rating-suffix {
  font-size: 0.8rem;
  color: var(--rr-ink-500);
  letter-spacing: 0;
}

.rr-category-hero__lede {
  margin: 0;
  max-width: var(--rr-measure);
  font-family: var(--rr-font-sans);
  font-size: clamp(1.075rem, 1rem + 0.4vw, 1.2rem);
  line-height: 1.6;
  color: var(--rr-ink-600);
}

/* B1: brand hero highlights (replace the prose lede so the body below reads
 * cleanly from paragraph 1). A compact red-check list. */
.rr-category-hero__highlights {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--rr-space-3);
}
.rr-category-hero__highlights li {
  position: relative;
  padding-left: 2rem;
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.15rem);
  line-height: 1.4;
  font-weight: 500;
  color: var(--rr-ink-700);
}
.rr-category-hero__highlights li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: 0.05em;
  width: 1.45rem;
  height: 1.45rem;
  display: grid;
  place-items: center;
  font-size: 0.82rem;
  font-weight: 700;
  color: #fff;
  background: var(--rr-red);
  border-radius: 50%;
  box-shadow: 0 2px 6px -1px rgba(224, 50, 43, 0.4);
}

.rr-category-hero__cta {
  align-self: flex-start;
  margin-top: var(--rr-space-1);
}

/* FTC disclosure inside the hero, directly above the first affiliate CTA.
 * Compact + constrained so it reads as a quiet note, not a banner — the reader
 * still sees a disclosure before clicking the page's first affiliate link. */
.rr-category-hero__ftc {
  align-self: flex-start;
  max-width: 60ch;
  margin-top: var(--rr-space-2);
}
.rr-category-hero__ftc .rr-ftc-disclosure {
  margin: 0;
}
.rr-category-hero__ftc .rr-ftc-disclosure__copy {
  font-size: 0.82rem;
}

/* Media slot: brighter card so the product image sits on a clean stage
 * with soft inner depth. */
.rr-category-hero__media {
  background: #fff;
  border: 1px solid var(--rr-ink-200);
  border-radius: var(--rr-radius-md);
  box-shadow:
    var(--rr-shadow-card),
    inset 0 -16px 28px -22px rgba(21, 23, 28, 0.18);
}

/* No-image brand fallback: bigger, more confident watermark on a subtle
 * red-tinted stage — reads as a deliberate brand mark. */
.rr-category-hero--no-image .rr-category-hero__media {
  background:
    radial-gradient(80% 80% at 70% 20%, var(--rr-red-50) 0%, transparent 60%),
    #fff;
}
.rr-category-hero__watermark {
  font-family: var(--rr-font-display);
  font-weight: 700;
  color: var(--rr-red);
  opacity: 0.14;
}

/* ============================================================
 * 3. ROLE COHERENCE (Task C)
 * ------------------------------------------------------------
 * brand    → product hero (image/watermark) + "Brand reviews" eyebrow.
 * best-of  → editorial round-up: single-column hero already collapses
 *            (--no-media); lean it further into an editorial header.
 * year     → stale temporal bucket: muted, reads as an archive.
 * cpt      → editorial CPT taxonomy: same single-column editorial lean.
 * Roles come from rr_category_role() via the wrapper class hook; we only
 * adjust emphasis, never structure or content.
 * ============================================================ */

/* Editorial roles (best-of / year / cpt) render a single-column hero
 * (the renderer sets --no-media). Tighten that hero to read as an
 * article masthead: contained measure, no empty media stage. */
.rr-category-page--best-of .rr-category-hero,
.rr-category-page--year .rr-category-hero,
.rr-category-page--cpt .rr-category-hero {
  padding-block: clamp(var(--rr-space-5), 3.5vw, var(--rr-space-7));
}
.rr-category-page--best-of .rr-category-hero__title,
.rr-category-page--year .rr-category-hero__title,
.rr-category-page--cpt .rr-category-hero__title {
  max-width: 20ch;
}

/* Year archives are stale buckets — signal that with a cooler, quieter
 * eyebrow + a desaturated stage so they read as "archive", not a pick. */
.rr-category-page--year .rr-category-hero {
  background: var(--rr-ink-50);
}
.rr-category-page--year .rr-category-hero::before {
  background: var(--rr-ink-400);
}
.rr-category-page--year .rr-category-hero__eyebrow {
  color: var(--rr-ink-500);
}
.rr-category-page--year .rr-category-hero__eyebrow::before {
  background: var(--rr-ink-400);
}

/* Best-of guides: the product grid IS the round-up payload, so give it a
 * touch more separation from the editorial intro above it. */
.rr-category-page--best-of .rr-product-grid {
  margin-top: var(--rr-space-1);
}

/* ============================================================
 * 4. EDITORIAL PROSE — intro / outro
 * ------------------------------------------------------------
 * Apply --rr-measure for a readable line length + modern prose type.
 * Block-level callouts (charts, aligned figures, <center>) opt out of
 * the measure so they can still span full width.
 * ============================================================ */
.rr-category-intro,
.rr-category-outro {
  color: var(--rr-ink-600);
  font-size: clamp(1rem, 0.97rem + 0.18vw, 1.075rem);
  line-height: 1.75;
}

/* Second affiliate CTA band after the model grid (B6 — David's "BUY button
 * lower down"). Mirrors the single-review repeat band for cross-page parity. */
.rr-category-cta-repeat {
  margin: var(--rr-space-7) 0 var(--rr-space-6);
  padding: clamp(1.5rem, 1rem + 2vw, 2.25rem);
  background: var(--rr-ink-50);
  border: 1px solid var(--rr-ink-200);
  border-radius: var(--rr-radius-lg);
  text-align: center;
}
.rr-category-cta-repeat__lead {
  margin: 0 0 var(--rr-space-3);
  font-family: var(--rr-font-display);
  font-weight: 700;
  font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.55rem);
  line-height: 1.22;
  color: var(--rr-ink-900);
}
.rr-category-cta-repeat .rr-ftc-disclosure {
  justify-content: center;
  margin-inline: auto;
  max-width: 64ch;
}
.rr-category-cta-repeat .rr-ftc-disclosure__copy { text-align: left; }
.rr-category-cta-repeat .rr-cta-affiliate { margin-top: var(--rr-space-2); }

/* "Current Models" heading above the brand model grid (B8 — separates the grid
 * from the preceding prose so the models no longer read as "under Discontinued"). */
.rr-product-grid__heading {
  margin: clamp(var(--rr-space-6), 4vw, var(--rr-space-7)) 0 var(--rr-space-4);
  font-family: var(--rr-font-display);
  font-weight: 600;
  font-size: clamp(1.45rem, 1.2rem + 0.9vw, 1.9rem);
  line-height: 1.18;
  color: var(--rr-ink-900);
}

/* Lifted "Discontinued …" discussion, rendered below the grid as a quieter
 * aside (B8) — de-emphasized vs the current-models content above. */
.rr-category-discontinued {
  margin-top: clamp(var(--rr-space-6), 4vw, var(--rr-space-7));
  padding-top: var(--rr-space-5);
  border-top: 1px solid var(--rr-ink-200);
  color: var(--rr-ink-500);
  font-size: clamp(0.95rem, 0.92rem + 0.16vw, 1.0125rem);
  line-height: 1.7;
}
.rr-category-discontinued > p { max-width: var(--rr-measure); margin-block: 0 var(--rr-space-4); }
.rr-category-discontinued h2,
.rr-category-discontinued h3 {
  font-family: var(--rr-font-display);
  font-weight: 600;
  color: var(--rr-ink-700);
  font-size: clamp(1.2rem, 1.05rem + 0.5vw, 1.5rem);
  margin: 0 0 var(--rr-space-3);
}

/* Brand-level comments (B7) — set the thread apart from the content above. */
.rr-brand-comments {
  margin-top: clamp(var(--rr-space-7), 5vw, var(--rr-space-9));
  padding-top: var(--rr-space-6);
  border-top: 1px solid var(--rr-ink-200);
}
.rr-brand-comments__note {
  margin: 0 0 var(--rr-space-5);
  color: var(--rr-ink-500);
  font-size: 0.9rem;
}

/* Constrain prose flow to a comfortable measure; let figures break out. */
.rr-category-intro > p,
.rr-category-outro > p,
.rr-category-intro > ul,
.rr-category-outro > ul,
.rr-category-intro > ol,
.rr-category-outro > ol {
  max-width: var(--rr-measure);
}
.rr-category-intro > p,
.rr-category-outro > p {
  margin-block: 0 var(--rr-space-4);
}

/* Lead paragraph: subtle emphasis to ease the reader in. */
.rr-category-intro > p:first-of-type {
  font-size: clamp(1.075rem, 1rem + 0.35vw, 1.2rem);
  line-height: 1.62;
  color: var(--rr-ink-700);
}

/* Headings inside prose: display font + the refined hairline-with-accent
 * motif from modern.css (replace the legacy heavy 3px-red underline). */
.rr-category-intro h2,
.rr-category-outro h2 {
  position: relative;
  max-width: var(--rr-measure);
  margin: clamp(var(--rr-space-6), 4vw, var(--rr-space-7)) 0 var(--rr-space-4);
  padding-bottom: var(--rr-space-3);
  font-family: var(--rr-font-display);
  font-weight: 600;
  font-size: clamp(1.45rem, 1.2rem + 0.9vw, 1.9rem);
  line-height: 1.18;
  letter-spacing: -0.02em;
  color: var(--rr-ink-900);
  border-bottom: 1px solid var(--rr-ink-200);
}
.rr-category-intro h2::after,
.rr-category-outro h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 2.5rem;
  height: 3px;
  background: var(--rr-red);
  border-radius: var(--rr-radius-pill);
}

.rr-category-intro h3,
.rr-category-outro h3 {
  max-width: var(--rr-measure);
  margin: var(--rr-space-6) 0 var(--rr-space-2);
  font-family: var(--rr-font-display);
  font-weight: 600;
  font-size: clamp(1.15rem, 1.05rem + 0.45vw, 1.4rem);
  letter-spacing: -0.015em;
  color: var(--rr-ink-900);
}

.rr-category-intro li,
.rr-category-outro li {
  line-height: 1.7;
}
/* Tighten list indent + add a brand marker for scannability. */
.rr-category-intro ul,
.rr-category-outro ul {
  list-style: none;
  padding-left: 0;
  margin-left: 0;
}
.rr-category-intro ul > li,
.rr-category-outro ul > li {
  position: relative;
  padding-left: 1.5rem;
}
.rr-category-intro ul > li::before,
.rr-category-outro ul > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.66em;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 2px;
  background: var(--rr-red);
}

/* Prose links: brand red with refined underline (matches modern.css). */
.rr-category-intro a:not(:has(> img)),
.rr-category-outro a:not(:has(> img)) {
  color: var(--rr-red);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
.rr-category-intro a:not(:has(> img)):hover,
.rr-category-outro a:not(:has(> img)):hover {
  color: var(--rr-red-dark);
}

/* Divider between intro + outro: refine to a hairline (override legacy). */
.rr-category-outro--has-intro {
  border-top-color: var(--rr-ink-200);
}

/* Workout archives use the intro slot only for the fitness disclaimer ("not
 * professional trainers… consult your physician") — the dark hero already
 * carries the real lede. Render it as quiet fine print and tighten the page
 * stack so it stops floating in a big empty band between the hero and the grid.
 * Scoped to workout categories so other CPT archives keep their full intros. */
body.tax-workout_category .rr-category-page { gap: var(--rr-space-6); } /* was ~72px between hero / intro / grid */
body.tax-workout_category .rr-category-intro { margin-top: 0; }
body.tax-workout_category .rr-category-intro > p,
body.tax-workout_category .rr-category-intro > p:first-of-type { /* also beat the lead-paragraph rule */
  margin: 0;
  font-size: 0.8rem;
  font-weight: 400; /* drop the <strong> emphasis — fine print, not a lead */
  color: var(--rr-ink-500);
}
body.tax-workout_category .rr-category-intro > p strong { font-weight: inherit; }

/* ============================================================
 * 5. PRODUCT-CARD GRID
 * ------------------------------------------------------------
 * Cleaner data-forward retail tiles. The base card (main.css) already
 * has the soft card + red hover bar; refine spacing, badge, rating,
 * and the read-more affordance toward the modern editorial language.
 * ============================================================ */
.rr-product-grid {
  gap: clamp(var(--rr-space-4), 2vw, var(--rr-space-6));
}

.rr-product-card {
  border-color: var(--rr-ink-200);
  border-radius: var(--rr-radius-lg);
  padding: var(--rr-space-4) var(--rr-space-4) var(--rr-space-5);
  gap: var(--rr-space-4);
}
/* Thicker, snappier hover bar that reads as a deliberate accent. */
.rr-product-card::after {
  height: 0;
}
.rr-product-card:hover::after,
.rr-product-card:focus-within::after {
  height: 4px;
}

.rr-product-card__media {
  background: var(--rr-ink-50);
  border: 1px solid var(--rr-ink-100);
  border-radius: var(--rr-radius-md);
}

/* Badge: refined pill, brand red, crisp. */
.rr-product-card__badge {
  top: var(--rr-space-3);
  right: var(--rr-space-3);
  padding: 0.28rem 0.6rem;
  font-family: var(--rr-font-sans);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  border-radius: var(--rr-radius-pill);
  box-shadow: 0 2px 6px -1px rgba(224, 50, 43, 0.45);
}

.rr-product-card__title {
  margin: 0;
  font-family: var(--rr-font-display);
  font-weight: 600;
  font-size: 1.075rem;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--rr-ink-900);
}
.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-value {
  font-size: 0.82rem;
  color: var(--rr-ink-500);
  font-variant-numeric: tabular-nums;
}

/* Read affordance: lowercase-tracked link cue, not shouty uppercase. */
.rr-product-card__read {
  font-family: var(--rr-font-sans);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--rr-red);
}
.rr-product-card__read-arrow {
  font-size: 0.95em;
}

/* CTA pinned to the card bottom (base sets margin-top:auto); refine size
 * to sit comfortably as the tile's primary on-brand action. */
.rr-product-card__cta {
  padding: 0.7rem 1rem;
  font-size: 0.82rem;
  border-width: 1.5px;
}

/* Empty state: align to the modern button + ink language. */
.rr-category-empty {
  background: var(--rr-ink-50);
  border-color: var(--rr-ink-200);
  border-radius: var(--rr-radius-lg);
}
.rr-category-empty__title {
  position: relative;
  font-family: var(--rr-font-display);
  font-weight: 600;
  letter-spacing: -0.02em;
  border-bottom: 0;
  padding-bottom: var(--rr-space-2);
}
.rr-category-empty__title::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  width: 2.5rem;
  height: 3px;
  background: var(--rr-red);
  border-radius: var(--rr-radius-pill);
}
.rr-category-empty__cta {
  border-radius: var(--rr-radius-pill);
  text-transform: none;
  letter-spacing: 0;
  font-family: var(--rr-font-sans);
  font-weight: 600;
}

/* ============================================================
 * 6. PAGINATION
 * ------------------------------------------------------------
 * Modern pill controls. Covers the rich-archive pagination AND the
 * non-rich list pagination (both render .pagination > .nav-links >
 * .page-numbers via the_posts_pagination()).
 * ============================================================ */
.rr-category-page .pagination,
.archive-posts .pagination {
  margin-top: clamp(var(--rr-space-6), 4vw, var(--rr-space-8));
}
.rr-category-page .pagination .nav-links,
.archive-posts .pagination .nav-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
}
.rr-category-page .pagination .page-numbers,
.archive-posts .pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.6rem;
  height: 2.6rem;
  margin: 0;
  padding: 0 0.85rem;
  border: 1px solid var(--rr-ink-200);
  border-radius: var(--rr-radius-pill);
  background: #fff;
  color: var(--rr-ink-700);
  font-family: var(--rr-font-sans);
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1;
  transition: background 0.18s, color 0.18s, border-color 0.18s, box-shadow 0.18s;
}
.rr-category-page .pagination a.page-numbers:hover,
.rr-category-page .pagination a.page-numbers:focus-visible,
.archive-posts .pagination a.page-numbers:hover,
.archive-posts .pagination a.page-numbers:focus-visible {
  border-color: var(--rr-red);
  color: var(--rr-red);
  background: var(--rr-red-50);
  outline: none;
  box-shadow: 0 0 0 3px var(--rr-red-50);
}
.rr-category-page .pagination .page-numbers.current,
.archive-posts .pagination .page-numbers.current {
  background: var(--rr-red);
  border-color: var(--rr-red);
  color: #fff;
}
.rr-category-page .pagination .page-numbers.dots,
.archive-posts .pagination .page-numbers.dots {
  border-color: transparent;
  background: transparent;
  color: var(--rr-ink-400);
}
/* Prev / Next get a little more room for their word labels. */
.rr-category-page .pagination .page-numbers.prev,
.rr-category-page .pagination .page-numbers.next,
.archive-posts .pagination .page-numbers.prev,
.archive-posts .pagination .page-numbers.next {
  padding: 0 1.1rem;
}

/* ============================================================
 * 7. NON-RICH ARCHIVE LIST (archive.php — tags / CPT archives)
 * ------------------------------------------------------------
 * .archive-posts > .archive-header + .archive-list > .archive-item.
 * These had no styling — build a clean editorial list of media + copy
 * rows that matches the site's card language.
 * ============================================================ */
.archive-posts {
  display: flex;
  flex-direction: column;
  gap: clamp(var(--rr-space-6), 4vw, var(--rr-space-8));
  min-width: 0;
}

/* Header: editorial masthead with the kicker accent rule. */
.archive-header {
  position: relative;
  padding: clamp(var(--rr-space-5), 4vw, var(--rr-space-7));
  background:
    radial-gradient(120% 140% at 100% 0%, var(--rr-red-50) 0%, transparent 42%),
    var(--rr-ink-50);
  border: 1px solid var(--rr-ink-200);
  border-radius: var(--rr-radius-lg);
  box-shadow: var(--rr-shadow-card);
  overflow: hidden;
}
.archive-header::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 4px;
  background: var(--rr-red);
}
.archive-title {
  margin: 0;
  font-family: var(--rr-font-display);
  font-weight: 700;
  font-size: clamp(1.9rem, 1.4rem + 2vw, 3rem);
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--rr-ink-900);
}
.archive-description {
  margin-top: var(--rr-space-3);
  max-width: var(--rr-measure);
  color: var(--rr-ink-600);
  font-size: 1.05rem;
  line-height: 1.6;
}

/* List: stacked editorial rows. */
.archive-list {
  display: flex;
  flex-direction: column;
  gap: var(--rr-space-4);
}

.archive-item {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--rr-space-4);
  align-items: start;
  padding: var(--rr-space-4);
  background: #fff;
  border: 1px solid var(--rr-ink-200);
  border-radius: var(--rr-radius-lg);
  box-shadow: var(--rr-shadow-card);
  transition:
    transform 0.2s var(--rr-ease-out),
    box-shadow 0.2s var(--rr-ease-out),
    border-color 0.2s var(--rr-ease-out);
}
.archive-item:hover,
.archive-item:focus-within {
  transform: translateY(-3px);
  box-shadow: var(--rr-shadow-card-hover);
  border-color: transparent;
}

@media (min-width: 600px) {
  /* Media + copy two-column row when a thumbnail exists. */
  .archive-item:has(.archive-thumb) {
    grid-template-columns: minmax(0, 14rem) 1fr;
    gap: var(--rr-space-5);
    align-items: center;
  }
}

.archive-thumb {
  display: block;
  overflow: hidden;
  border-radius: var(--rr-radius-md);
  background: var(--rr-ink-50);
  border: 1px solid var(--rr-ink-100);
  aspect-ratio: 16 / 10;
  line-height: 0;
}
.archive-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s var(--rr-ease-out);
}
.archive-item:hover .archive-thumb img,
.archive-item:focus-within .archive-thumb img {
  transform: scale(1.04);
}

/* When an item has no thumbnail, let the copy occupy the full row. */
.archive-item:not(:has(.archive-thumb)) .archive-item-title,
.archive-item:not(:has(.archive-thumb)) .archive-item-excerpt {
  grid-column: 1 / -1;
}

.archive-item-title {
  margin: 0;
  font-family: var(--rr-font-display);
  font-weight: 600;
  font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.5rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.archive-item-title a {
  color: var(--rr-ink-900);
  text-decoration: none;
  transition: color 0.18s var(--rr-ease-out);
}
.archive-item-title a:hover,
.archive-item-title a:focus-visible {
  color: var(--rr-red);
}

.archive-item-excerpt {
  margin-top: var(--rr-space-2);
  max-width: var(--rr-measure);
  color: var(--rr-ink-600);
  font-size: 1rem;
  line-height: 1.65;
}
.archive-item-excerpt p:last-child {
  margin-bottom: 0;
}
/* Soften the default WP "Read more »" link into a brand cue. */
.archive-item-excerpt .more-link {
  display: inline-block;
  margin-top: var(--rr-space-1);
  font-family: var(--rr-font-sans);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--rr-red);
  text-decoration: none;
}
.archive-item-excerpt .more-link:hover,
.archive-item-excerpt .more-link:focus-visible {
  color: var(--rr-red-dark);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ============================================================
 * 8. RESPONSIVE REFINEMENTS
 * ============================================================ */
@media (max-width: 599px) {
  /* Hero: drop the inner padding a touch + ensure media doesn't crop the
   * watermark on the narrowest screens. */
  .rr-category-hero {
    padding: var(--rr-space-5) var(--rr-space-4);
  }
  /* Full-width affiliate CTAs already handled by main.css @599; keep the
   * card CTA edge-to-edge inside its tile. */
  .rr-product-card__cta {
    width: 100%;
  }
}

/* Reduced-motion: neutralize the transforms this stylesheet adds. */
@media (prefers-reduced-motion: reduce) {
  .archive-item,
  .archive-item:hover,
  .archive-item:focus-within,
  .archive-thumb img,
  .archive-item:hover .archive-thumb img,
  .archive-item:focus-within .archive-thumb img {
    transition: none;
    transform: none;
  }
}

/* ============================================================
 * 9. "KEEP EXPLORING" CONTEXTUAL CROSS-NAV (template-parts/archive-related.php)
 * ------------------------------------------------------------
 * Full-width section rendered after the archive content/grid (mirrors the
 * choose-by-price-type placement). The shell (.rr-section--soft), grid
 * (.rr-cardgrid--brand) and chips (.rr-navcard--brand) are inherited verbatim
 * from modern.css; only the role eyebrow + a little rhythm are added here.
 * ============================================================ */

/* Red uppercase kicker above the heading — the same kicker language as the
 * category hero eyebrow, but on a section-scoped class (the hero rule is
 * scoped to .rr-category-hero__eyebrow and would not apply here). */
.rr-archive-related__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0 0 var(--rr-space-2);
  font-family: var(--rr-font-sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rr-red-dark);
}
.rr-archive-related__eyebrow::before {
  content: "";
  width: 1.4rem;
  height: 2px;
  background: var(--rr-red);
  border-radius: var(--rr-radius-pill);
  flex: none;
}

/* Sit the chip grid a touch closer to the heading than the homepage default
 * (no group sub-headings here), and cap the row so 10 chips wrap tidily. */
.rr-archive-related__grid {
  margin-top: var(--rr-space-5);
  margin-bottom: 0;
}

/* ============================================================
 * 10. CPT HUB ARCHIVES — Dark Training/Editorial Hub
 * ------------------------------------------------------------
 * "Lights down." Pulls the SIX editorial CPT taxonomy archives — workouts,
 * running advice, treadmill questions (faq), news, accessories, testimonials —
 * into the site's signature dark-ink + red-glow + Bricolage identity (they were
 * the only archives not participating). A glowing marquee hero (per-archive
 * eyebrow + stat pills + — workouts only — goal chips) + a poster-wall of
 * full-bleed photo tiles (index number + per-archive/title-derived intent glyph
 * + overlay title + hover rescue-dek). EVERY selector is scoped to
 * `.rr-category-page--cpt` (the role class rr_category_role()='cpt' emits for
 * exactly these 6 taxonomies — never brand/best-of/year), so the shared
 * .rr-product-card / .rr-category-hero stay LIGHT on brand/product archives.
 * Tokens only; all motion is opacity/transform/background (CLS 0); FA icons are
 * real <i>. The workouts page (the flagship) came from an agent design-panel
 * (A "dark hub" + B excerpt-deks + C intent glyphs); generalized to the family here.
 * ============================================================ */

/* ---------- 10a. Marquee hero ---------- */
.rr-category-page--cpt .rr-category-hero {
  margin-top: var(--rr-space-4);
  padding: clamp(var(--rr-space-7), 6vw, var(--rr-space-10));
  min-height: clamp(300px, 40vw, 440px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* Left-aligned editorial masthead on every hub archive (the base hero centers
   * its copy, which only read as left when a lede happened to widen the block). */
  align-items: flex-start;
  text-align: left;
  isolation: isolate;
  background:
    radial-gradient(120% 150% at 12% -10%, rgba(224, 50, 43, 0.34) 0%, transparent 46%),
    radial-gradient(90% 120% at 96% 0%, rgba(224, 50, 43, 0.14) 0%, transparent 50%),
    linear-gradient(180deg, var(--rr-ink-900) 0%, var(--rr-ink-800) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: var(--rr-shadow-card-hover);
}
/* Leading rule → a brighter, glowing edge bar. */
.rr-category-page--cpt .rr-category-hero::before {
  width: 5px;
  background: linear-gradient(180deg, #ff6a5e, var(--rr-red));
  box-shadow: 0 0 24px 2px rgba(224, 50, 43, 0.55);
}
/* Subliminal diagonal speed-streaks (free pseudo — base hero only uses ::before). */
.rr-category-page--cpt .rr-category-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: repeating-linear-gradient(-18deg, transparent 0 22px, rgba(255, 255, 255, 0.022) 22px 23px);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 40%);
  mask-image: linear-gradient(90deg, transparent, #000 40%);
}
.rr-category-page--cpt .rr-category-hero__eyebrow { color: #ff6a5e; }
.rr-category-page--cpt .rr-category-hero__eyebrow::before { background: #ff6a5e; }
.rr-category-page--cpt .rr-category-hero__title {
  color: #fff;
  font-size: clamp(2.5rem, 1.8rem + 3.6vw, 4.25rem);
  letter-spacing: -0.03em;
  line-height: 1.02;
}
.rr-category-page--cpt .rr-category-hero__lede {
  color: var(--rr-ink-300);
  max-width: 54ch;
}

/* Stat strip — glass pills with FA glyphs (the energy beat). */
.rr-category-page--cpt .rr-wk-hero__stats {
  list-style: none;
  margin: var(--rr-space-4) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--rr-space-3);
}
.rr-category-page--cpt .rr-wk-stat {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.5rem 0.95rem;
  border-radius: var(--rr-radius-pill);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  font-family: var(--rr-font-sans);
  font-size: 0.85rem;
  color: var(--rr-ink-400);
}
.rr-category-page--cpt .rr-wk-stat i { color: #ff6a5e; font-size: 0.95em; }
.rr-category-page--cpt .rr-wk-stat strong { font-family: var(--rr-font-display); font-weight: 700; color: #fff; }

/* Intent chips — "choose your goal" signposts; scroll on mobile, wrap on wide. */
.rr-category-page--cpt .rr-wk-hero__intents {
  list-style: none;
  margin: var(--rr-space-4) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}
.rr-category-page--cpt .rr-wk-hero__intents::-webkit-scrollbar { display: none; }
.rr-category-page--cpt .rr-wk-intent {
  flex: 0 0 auto;
  scroll-snap-align: start;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.85rem 0.4rem 0.45rem;
  border-radius: var(--rr-radius-pill);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  font-family: var(--rr-font-sans);
  font-weight: 600;
  font-size: 0.85rem;
  color: #fff;
  transition: background 0.18s var(--rr-ease-out), transform 0.18s var(--rr-ease-out), border-color 0.18s;
}
.rr-category-page--cpt .rr-wk-intent__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  background: rgba(224, 50, 43, 0.18);
  color: #ff6a5e;
  font-size: 0.78rem;
}
.rr-category-page--cpt .rr-wk-intent:hover {
  background: rgba(224, 50, 43, 0.16);
  border-color: rgba(224, 50, 43, 0.5);
  transform: translateY(-1px);
}

/* Hero entrance — mirror the homepage hero (motion-safe only). */
@media (prefers-reduced-motion: no-preference) {
  .rr-category-page--cpt .rr-category-hero__copy > * { animation: rr-rise 0.6s var(--rr-ease-out) both; }
  .rr-category-page--cpt .rr-category-hero__eyebrow { animation-delay: 0.04s; }
  .rr-category-page--cpt .rr-category-hero__title { animation-delay: 0.1s; }
  .rr-category-page--cpt .rr-category-hero__lede { animation-delay: 0.18s; }
  .rr-category-page--cpt .rr-wk-hero__stats { animation-delay: 0.24s; }
  .rr-category-page--cpt .rr-wk-hero__intents { animation-delay: 0.3s; }
}

/* ---------- 10b. Poster-wall grid + featured tile ---------- */
@media (min-width: 1200px) {
  .rr-category-page--cpt .rr-product-grid {
    grid-template-columns: repeat(auto-fill, minmax(clamp(15rem, 20vw, 17rem), 1fr));
    gap: clamp(var(--rr-space-3), 1.4vw, var(--rr-space-4));
  }
}
.rr-category-page--cpt .rr-product-grid { scroll-margin-top: var(--rr-space-7); }
/* First visible tile → featured marquee. */
.rr-category-page--cpt .rr-product-grid > .rr-product-card:first-child { grid-column: 1 / -1; }
@media (min-width: 900px) {
  .rr-category-page--cpt .rr-product-grid > .rr-product-card:first-child {
    grid-column: span 2;
    grid-row: span 2;
    aspect-ratio: 16 / 10;
  }
  .rr-category-page--cpt .rr-product-grid > .rr-product-card:first-child .rr-product-card__title {
    font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem);
  }
}
/* Featured tile always shows its dek (no hover needed) + a kicker. */
.rr-category-page--cpt .rr-product-grid > .rr-product-card:first-child .rr-product-card__excerpt {
  opacity: 1;
  max-height: none;
  margin-top: var(--rr-space-1);
  transition: none;
}
.rr-category-page--cpt .rr-product-grid > .rr-product-card:first-child .rr-product-card__body::before {
  content: "Featured"; /* generic — the grid spans workouts/advice/faq/news/etc. */
  font-family: var(--rr-font-sans);
  font-weight: 700;
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #ff6a5e;
}
/* Featured tile carries a bigger title + an always-on dek + kicker over a large
 * (often light) photo — add a left-anchored wash so the bottom-left copy seats. */
.rr-category-page--cpt .rr-product-grid > .rr-product-card:first-child .rr-product-card__media::after {
  background:
    linear-gradient(180deg, transparent 0%, rgba(15, 17, 28, 0.1) 18%, rgba(15, 17, 28, 0.58) 50%, rgba(15, 17, 28, 0.97) 100%),
    linear-gradient(90deg, rgba(15, 17, 28, 0.4), transparent 58%);
}

/* ---------- 10c. The tile as a full-bleed photo poster ---------- */
.rr-category-page--cpt .rr-product-card {
  background: var(--rr-ink-900);
  border: 0;
  padding: 0;
  border-radius: var(--rr-radius-md);
  aspect-ratio: 4 / 5;
}
@media (min-width: 600px) { .rr-category-page--cpt .rr-product-card { aspect-ratio: 4 / 3; } }
@media (min-width: 900px) { .rr-category-page--cpt .rr-product-card { aspect-ratio: 16 / 11; } }
/* Repurpose the base bottom red bar into a TOP glow-line that fires on hover. */
.rr-category-page--cpt .rr-product-card::after {
  top: 0;
  bottom: auto;
  height: 0;
  background: linear-gradient(90deg, #ff6a5e, var(--rr-red));
  box-shadow: 0 0 16px 1px rgba(224, 50, 43, 0.6);
  z-index: 3;
}
.rr-category-page--cpt .rr-product-card:hover::after,
.rr-category-page--cpt .rr-product-card:focus-within::after { height: 3px; }

/* Media fills the whole tile; cover-crop normalizes the inconsistent legacy photos. */
.rr-category-page--cpt .rr-product-card__media {
  position: absolute;
  inset: 0;
  aspect-ratio: auto;
  background: var(--rr-ink-900);
  border: 0;
  border-radius: inherit;
  box-shadow: none;
}
.rr-category-page--cpt .rr-product-card__image,
.rr-category-page--cpt .rr-product-card__media img {
  object-fit: cover;
  filter: saturate(0.92) brightness(0.82);
}
.rr-category-page--cpt .rr-product-card:hover .rr-product-card__image,
.rr-category-page--cpt .rr-product-card:focus-within .rr-product-card__image {
  filter: saturate(1.05) brightness(1);
  transform: scale(1.06);
}
/* Scrim — the single AA-contrast dial for white text over any photo. Weighted to
 * darken from ~20% down so even a 3-line title over a near-white chart photo
 * (worst case measured 2.22:1) clears AA, while the photo's top focal area stays
 * visible. */
.rr-category-page--cpt .rr-product-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(15, 17, 28, 0.06) 20%,
    rgba(15, 17, 28, 0.55) 52%,
    rgba(15, 17, 28, 0.97) 100%
  );
}

/* Index chip (top-left) + intent glyph (top-right) on the scrim. */
.rr-category-page--cpt .rr-wk-card__index {
  position: absolute;
  top: var(--rr-space-3);
  left: var(--rr-space-3);
  z-index: 3;
  min-width: 1.9rem;
  height: 1.9rem;
  display: grid;
  place-items: center;
  padding: 0 0.4rem;
  border-radius: var(--rr-radius-pill);
  background: rgba(224, 50, 43, 0.92);
  color: #fff;
  font-family: var(--rr-font-display);
  font-weight: 700;
  font-size: 0.8rem;
  line-height: 1;
}
.rr-category-page--cpt .rr-wk-card__intent {
  position: absolute;
  top: var(--rr-space-3);
  right: var(--rr-space-3);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: var(--rr-radius-pill);
  background: rgba(21, 23, 28, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #ff6a5e;
  font-size: 0.85rem;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  transition: background 0.18s var(--rr-ease-out), color 0.18s var(--rr-ease-out);
}
.rr-category-page--cpt .rr-product-card:hover .rr-wk-card__intent,
.rr-category-page--cpt .rr-product-card:focus-within .rr-wk-card__intent {
  background: var(--rr-red);
  color: #fff;
  border-color: var(--rr-red);
}

/* Body → absolute overlay anchored to the tile bottom. */
.rr-category-page--cpt .rr-product-card__body {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  flex: none;
  display: flex;
  flex-direction: column;
  gap: var(--rr-space-2);
  padding: clamp(var(--rr-space-3), 2vw, var(--rr-space-4));
}
.rr-category-page--cpt .rr-product-card__title {
  margin: 0;
  color: #fff;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.45);
  line-height: 1.2;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Title stays white on hover (the red cue is the top glow-line + read link). */
.rr-category-page--cpt .rr-product-card__link:hover .rr-product-card__title,
.rr-category-page--cpt .rr-product-card__link:focus-visible .rr-product-card__title { color: #fff; }

/* Rescue-dek — hidden at rest, revealed on hover/focus (keyboard parity). */
.rr-category-page--cpt .rr-product-card__excerpt {
  margin: 0;
  color: var(--rr-ink-300);
  font-family: var(--rr-font-sans);
  font-size: 0.85rem;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  opacity: 0;
  max-height: 0;
  transition: opacity 0.25s var(--rr-ease-out), max-height 0.25s var(--rr-ease-out);
}
.rr-category-page--cpt .rr-product-card:hover .rr-product-card__excerpt,
.rr-category-page--cpt .rr-product-card:focus-within .rr-product-card__excerpt {
  opacity: 1;
  max-height: 4em;
}
.rr-category-page--cpt .rr-product-card__read { color: #ff6a5e; }

/* Focus-visible ring on dark. */
.rr-category-page--cpt .rr-product-card__link:focus-visible {
  outline: 2px solid #ff6a5e;
  outline-offset: 2px;
}

/* Image-less posts never read as empty boxes: an ink+red gradient stage with a
 * CSS-drawn ring mark (FA can't be used here — the kit is SVG-with-JS, so a CSS
 * `content` glyph renders blank; the index + intent chips + title carry meaning). */
.rr-category-page--cpt .rr-product-card__link:not(:has(img)) .rr-product-card__media {
  background:
    radial-gradient(90% 90% at 30% 10%, rgba(224, 50, 43, 0.28), transparent 60%),
    linear-gradient(180deg, var(--rr-ink-800), var(--rr-ink-900));
}
.rr-category-page--cpt .rr-product-card__link:not(:has(img)) .rr-product-card__media::before {
  content: "";
  position: absolute;
  right: 1rem;
  bottom: 1.2rem;
  z-index: 0;
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 50%;
  border: 6px solid rgba(255, 255, 255, 0.06);
}

/* ---------- 10d. Disclaimer → fine-print editor's note ---------- */
.rr-category-page--cpt .rr-category-intro > p:last-child {
  margin-top: var(--rr-space-5);
  padding: var(--rr-space-3) var(--rr-space-4);
  background: var(--rr-ink-50);
  border-radius: var(--rr-radius-md);
  border-left: 3px solid var(--rr-ink-300);
  font-size: 0.82rem;
  color: var(--rr-ink-500);
  max-width: var(--rr-measure);
}

/* ---------- 10e. Reduced-motion + touch (extend the existing guards) ---------- */
@media (prefers-reduced-motion: reduce) {
  .rr-category-page--cpt .rr-category-hero,
  .rr-category-page--cpt .rr-category-hero__copy > *,
  .rr-category-page--cpt .rr-product-card,
  .rr-category-page--cpt .rr-product-card__image {
    transition: none !important;
    transform: none !important;
    animation: none !important;
  }
  /* Show the rescue-dek always, so reduced-motion users still get it. */
  .rr-category-page--cpt .rr-product-card__excerpt {
    opacity: 1 !important;
    max-height: none !important;
    transition: none !important;
  }
}
@media (hover: none) {
  /* On touch (no hover), show the dek + intent fill always. */
  .rr-category-page--cpt .rr-product-card__excerpt {
    opacity: 1;
    max-height: none;
    transition: none;
  }
}