/**
 * Paprika Atlas — Review Content Styles
 *
 * CSS for pipeline-published review articles (formaterare → publicerare → WP).
 * Covers full class catalog A+B+C+D from steg 5b spec.
 *
 * Design reference: docs/drafts/2026-02-15_testsida-komplett-prototyp.html
 *
 * Scope rule (mandatory):
 *   Primary:       .page-content .page-content__body  (page.php — pipeline target)
 *   Compatibility: .single-article .article-body       (single.php — fallback)
 *
 * Both scopes handled via :is() to avoid duplication.
 * Tokens only — no hardcoded colors, spacing, radius, shadows, or typography.
 *
 * @package PaprikaAtlas
 */


/* ═══════════════════════════════════════════════════
   A) ACTIVE — Full design
   ═══════════════════════════════════════════════════ */

/* ── review-intro ── */
:is(.page-content .page-content__body, .single-article .article-body) .review-intro {
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--ink-soft);
  margin-bottom: var(--s7);
  max-width: 780px;
}

:is(.page-content .page-content__body, .single-article .article-body) .review-intro p:last-child {
  margin-bottom: 0;
}


/* ── review-quick-overview ── */
:is(.page-content .page-content__body, .single-article .article-body) .review-quick-overview {
  background: var(--paper-warm);
  border: var(--border-thin) solid var(--ink);
  border-radius: var(--r-lg);
  padding: var(--s6);
  margin-bottom: var(--s7);
}

/* ── review-quick-overview-list ── */
:is(.page-content .page-content__body, .single-article .article-body) .review-quick-overview-list,
:is(.page-content .page-content__body, .single-article .article-body) .review-quick-overview .wp-block-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  counter-reset: overview;
}

:is(.page-content .page-content__body, .single-article .article-body) .review-quick-overview-list li,
:is(.page-content .page-content__body, .single-article .article-body) .review-quick-overview .wp-block-list li {
  display: flex;
  align-items: baseline;
  gap: var(--s3);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-snug);
  color: var(--ink);
  padding: var(--s3) 0;
  border-bottom: var(--border-divider) solid var(--divider-on-light);
  margin-bottom: 0;
  counter-increment: overview;
}

:is(.page-content .page-content__body, .single-article .article-body) .review-quick-overview-list li::before,
:is(.page-content .page-content__body, .single-article .article-body) .review-quick-overview .wp-block-list li::before {
  content: counter(overview) ".";
  font-family: var(--font-mono);
  font-size: var(--fs-tag);
  font-weight: var(--fw-bold);
  color: var(--accent);
  min-width: var(--s5);
  flex-shrink: 0;
}

:is(.page-content .page-content__body, .single-article .article-body) .review-quick-overview-list li:last-child,
:is(.page-content .page-content__body, .single-article .article-body) .review-quick-overview .wp-block-list li:last-child {
  border-bottom: none;
}


/* ── review-section-heading ── */
:is(.page-content .page-content__body, .single-article .article-body) .review-section-heading {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-top: var(--s8);
  margin-bottom: var(--s5);
  padding-bottom: var(--s3);
  border-bottom: var(--border-thin) solid var(--ink);
}


/* ═══════════════════════════════════════════════════
   PRODUCT CARD — The core visual component
   Pipeline renders each product as .review-product-section
   Prototype equivalent: .product-card

   NOTE: overflow is visible so badge can extend outside.
   Border-radius on children via inner clipping.
   ═══════════════════════════════════════════════════ */

:is(.page-content .page-content__body, .single-article .article-body) .review-product-section {
  position: relative;
  border: var(--border-thin) solid var(--ink);
  border-radius: var(--r-lg);
  background: var(--paper);
  margin-bottom: var(--s6);
  padding-top: var(--s5);
  transition: transform var(--duration-normal) var(--ease-bounce),
              box-shadow var(--duration-normal) ease;
}

:is(.page-content .page-content__body, .single-article .article-body) .review-product-section:hover {
  transform: translateY(var(--hover-lift));
  box-shadow: 6px 8px 0 var(--ink);
}

:is(.page-content .page-content__body, .single-article .article-body) .review-product-section:last-of-type {
  margin-bottom: 0;
}

/* ── review-product-heading ── */
:is(.page-content .page-content__body, .single-article .article-body) .review-product-heading {
  font-family: var(--font-display);
  font-size: var(--fs-ring);
  font-weight: var(--fw-black);
  line-height: var(--lh-tight);
  color: var(--ink);
  padding: 0 var(--s6);
  padding-right: calc(var(--badge-size) + var(--s6));
  margin-bottom: var(--s3);
}


/* ── review-badge ──
   Pipeline: <div class="wp-block-group review-badge review-badge--winner"><p>Winner</p></div>
   Positioned top-right inside the card. Circle shape.
   ───────────────────── */
:is(.page-content .page-content__body, .single-article .article-body) .review-badge {
  position: absolute;
  top: var(--s4);
  right: var(--s5);
  z-index: 2;
  width: var(--badge-size);
  height: var(--badge-size);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: rotate(4deg);
  transition: transform 0.3s var(--ease-bounce);
  cursor: default;
  padding: 0;
  margin: 0;
}

:is(.page-content .page-content__body, .single-article .article-body) .review-badge p {
  font-family: var(--font-mono);
  font-size: var(--fs-tag);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  margin: 0;
  text-align: center;
  line-height: var(--lh-tight);
}

:is(.page-content .page-content__body, .single-article .article-body) .review-badge:hover {
  transform: rotate(-6deg) scale(1.1);
}

/* ── review-badge--winner ── */
:is(.page-content .page-content__body, .single-article .article-body) .review-badge--winner {
  background: var(--canary);
  border: var(--border-thick) solid var(--ink);
}

:is(.page-content .page-content__body, .single-article .article-body) .review-badge--winner p {
  color: var(--ink);
}

/* ── review-badge--runner-up ── */
:is(.page-content .page-content__body, .single-article .article-body) .review-badge--runner-up {
  background: var(--paper-warm);
  border: var(--border-thin) solid var(--ink);
}

:is(.page-content .page-content__body, .single-article .article-body) .review-badge--runner-up p {
  color: var(--ink-soft);
}

:is(.page-content .page-content__body, .single-article .article-body) .review-badge--runner-up:hover {
  transform: rotate(-4deg) scale(1.05);
}


/* ── review-product-image ──
   Pipeline: <figure class="wp-block-image review-product-image"><img .../></figure>
   Image fills the box edge-to-edge. Border on the container, not the image.
   ───────────────────── */
:is(.page-content .page-content__body, .single-article .article-body) .review-product-image {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: var(--border-frame) solid var(--plum);
  padding: 0;
  margin: 0 var(--s6);
  margin-bottom: var(--s4);
  border-radius: var(--r-md);
  overflow: hidden;
  max-height: var(--image-frame-max);
}

:is(.page-content .page-content__body, .single-article .article-body) .review-product-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  max-height: var(--image-frame-max);
}

/* ── review-product-intro-heading ── */
:is(.page-content .page-content__body, .single-article .article-body) .review-product-intro-heading {
  font-family: var(--font-display);
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  font-style: italic;
  color: var(--ink);
  padding: 0 var(--s6);
  margin-bottom: var(--s3);
}

/* ── review-product-body ── */
:is(.page-content .page-content__body, .single-article .article-body) .review-product-body {
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--ink-soft);
  padding: 0 var(--s6);
  margin-bottom: var(--s5);
}

:is(.page-content .page-content__body, .single-article .article-body) .review-product-body p:last-child {
  margin-bottom: 0;
}


/* ═══════════════════════════════════════════════════
   PROS / CONS — verdict blocks with colored border-left
   Pipeline: <ul class="wp-block-list review-pros">
   ═══════════════════════════════════════════════════ */

/* Pros */
:is(.page-content .page-content__body, .single-article .article-body) .review-pros {
  border-left: var(--border-thick) solid var(--pro-green);
  background: var(--pro-green-light);
  border-radius: var(--r-md);
  padding: var(--s4) var(--s5);
  margin: 0 var(--s6) var(--s3);
  list-style: none;
}

:is(.page-content .page-content__body, .single-article .article-body) .review-pros::before {
  content: 'Előnyök';
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-tag);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--pro-green);
  margin-bottom: var(--s3);
}

:is(.page-content .page-content__body, .single-article .article-body) .review-pros li {
  position: relative;
  padding-left: var(--s5);
  padding-top: var(--s1);
  padding-bottom: var(--s1);
  color: var(--ink-soft);
  font-family: var(--font-body);
  font-size: var(--fs-small);
  line-height: var(--lh-snug);
  margin-bottom: 0;
  list-style: none;
}

:is(.page-content .page-content__body, .single-article .article-body) .review-pros li::before {
  content: '+';
  position: absolute;
  left: 0;
  font-weight: var(--fw-bold);
  font-size: var(--fs-body);
  color: var(--pro-green);
}

/* Cons */
:is(.page-content .page-content__body, .single-article .article-body) .review-cons {
  border-left: var(--border-thick) solid var(--con-red);
  background: var(--con-red-light);
  border-radius: var(--r-md);
  padding: var(--s4) var(--s5);
  margin: 0 var(--s6) var(--s5);
  list-style: none;
}

:is(.page-content .page-content__body, .single-article .article-body) .review-cons::before {
  content: 'Hátrányok';
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-tag);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--con-red);
  margin-bottom: var(--s3);
}

:is(.page-content .page-content__body, .single-article .article-body) .review-cons li {
  position: relative;
  padding-left: var(--s5);
  padding-top: var(--s1);
  padding-bottom: var(--s1);
  color: var(--ink-soft);
  font-family: var(--font-body);
  font-size: var(--fs-small);
  line-height: var(--lh-snug);
  margin-bottom: 0;
  list-style: none;
}

:is(.page-content .page-content__body, .single-article .article-body) .review-cons li::before {
  content: '−';
  position: absolute;
  left: 0;
  font-weight: var(--fw-bold);
  font-size: var(--fs-body);
  color: var(--con-red);
}


/* ═══════════════════════════════════════════════════
   TOTAL SCORE — prominent display
   Pipeline: <div class="review-total-score"><p>9.5 / 10</p></div>
   ═══════════════════════════════════════════════════ */

:is(.page-content .page-content__body, .single-article .article-body) .review-total-score {
  display: flex;
  align-items: center;
  gap: var(--s4);
  background: var(--paper-warm);
  border-top: var(--border-divider) solid var(--paper-dark);
  border-bottom: var(--border-divider) solid var(--paper-dark);
  padding: var(--s5) var(--s6);
  margin-bottom: 0;
}

:is(.page-content .page-content__body, .single-article .article-body) .review-total-score p {
  font-family: var(--font-display);
  font-size: var(--fs-total);
  font-weight: var(--fw-black);
  color: var(--ink);
  line-height: var(--lh-none);
  margin: 0;
}


/* ── review-price-indicator ── */
:is(.page-content .page-content__body, .single-article .article-body) .review-price-indicator {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  font-family: var(--font-mono);
  font-size: var(--fs-tag);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-normal);
  padding: var(--s1) var(--s3);
  border-radius: var(--r-sm);
  margin: var(--s4) var(--s6);
  background: var(--paper-warm);
  color: var(--ink-soft);
  border: var(--border-divider) solid var(--paper-dark);
}

:is(.page-content .page-content__body, .single-article .article-body) .review-price-indicator p {
  margin: 0;
}

:is(.page-content .page-content__body, .single-article .article-body) .review-price-indicator--budget {
  background: var(--tier-good-bg);
  color: var(--chartreuse-dark);
  border-color: var(--chartreuse);
}

:is(.page-content .page-content__body, .single-article .article-body) .review-price-indicator--mid {
  background: var(--tier-great-bg);
  color: var(--accent);
  border-color: var(--accent);
}

:is(.page-content .page-content__body, .single-article .article-body) .review-price-indicator--premium {
  background: var(--tier-excellent-bg);
  color: var(--deep-indigo);
  border-color: var(--deep-indigo);
}


/* ═══════════════════════════════════════════════════
   BUY BUTTONS — CTA footer area
   Pipeline: <div class="review-buy-buttons"><div class="review-buy-button"><a>...</a></div></div>
   ═══════════════════════════════════════════════════ */

:is(.page-content .page-content__body, .single-article .article-body) .review-buy-buttons,
:is(.page-content .page-content__body, .single-article .article-body) .review-product-section .wp-block-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
  padding: var(--s5) var(--s6);
  border-top: var(--border-thin) solid var(--ink);
  background: var(--paper-warm);
  border-radius: 0 0 var(--r-lg) var(--r-lg);
  margin-top: var(--s4);
}

:is(.page-content .page-content__body, .single-article .article-body) .review-buy-button,
:is(.page-content .page-content__body, .single-article .article-body) .review-product-section .wp-block-button {
  display: inline-flex;
}

:is(.page-content .page-content__body, .single-article .article-body) .review-buy-button .wp-block-button__link,
:is(.page-content .page-content__body, .single-article .article-body) .review-product-section .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  padding: var(--s3) var(--s5);
  min-height: var(--s7);
  background: linear-gradient(135deg, var(--accent-dark) 0%, var(--accent) 40%, var(--accent-bright) 100%);
  color: var(--paper);
  border: var(--border-thin) solid var(--accent);
  border-radius: var(--r-sm);
  text-decoration: none;
  letter-spacing: var(--ls-tight);
  transition: transform var(--duration-fast) var(--ease-bounce),
              box-shadow var(--duration-fast) var(--ease-bounce),
              background var(--duration-fast) ease;
}

:is(.page-content .page-content__body, .single-article .article-body) .review-buy-button .wp-block-button__link:hover,
:is(.page-content .page-content__body, .single-article .article-body) .review-product-section .wp-block-button__link:hover {
  background: linear-gradient(135deg, var(--accent-dark-hover) 0%, var(--accent-hover) 40%, var(--accent-bright-hover) 100%);
  border-color: var(--accent-hover);
  transform: translateY(calc(-1 * var(--border-thin)));
  box-shadow: 3px 4px 0 var(--shadow-cta);
}

/* Arrow after CTA text */
:is(.page-content .page-content__body, .single-article .article-body) .review-buy-button .wp-block-button__link::after,
:is(.page-content .page-content__body, .single-article .article-body) .review-product-section .wp-block-button__link::after {
  content: '→';
  transition: transform var(--duration-fast) var(--ease-bounce);
}

:is(.page-content .page-content__body, .single-article .article-body) .review-buy-button .wp-block-button__link:hover::after,
:is(.page-content .page-content__body, .single-article .article-body) .review-product-section .wp-block-button__link:hover::after {
  transform: translateX(4px);
}


/* ═══════════════════════════════════════════════════
   SUBSCORES — table layout
   Pipeline renders as wp-block-table inside product section.
   Format: <tr><td>Label</td><td>Score</td></tr>
   ═══════════════════════════════════════════════════ */

:is(.page-content .page-content__body, .single-article .article-body) .review-product-section .wp-block-table,
:is(.page-content .page-content__body, .single-article .article-body) .review-subscores {
  margin: 0 var(--s6) var(--s4);
  border-top: var(--border-divider) solid var(--paper-dark);
  border-bottom: var(--border-divider) solid var(--paper-dark);
  padding: var(--s4) 0;
  overflow: visible;
}

:is(.page-content .page-content__body, .single-article .article-body) .review-product-section .wp-block-table table,
:is(.page-content .page-content__body, .single-article .article-body) .review-subscores table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-body);
  font-size: var(--fs-small);
}

:is(.page-content .page-content__body, .single-article .article-body) .review-product-section .wp-block-table th,
:is(.page-content .page-content__body, .single-article .article-body) .review-subscores th {
  font-family: var(--font-mono);
  font-size: var(--fs-tag);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  text-align: left;
  padding: var(--s2) var(--s3);
  border-bottom: var(--border-thin) solid var(--ink);
  color: var(--ink);
}

:is(.page-content .page-content__body, .single-article .article-body) .review-product-section .wp-block-table td,
:is(.page-content .page-content__body, .single-article .article-body) .review-subscores td {
  padding: var(--s3) var(--s3);
  border-bottom: var(--border-divider) solid var(--divider-on-light);
  color: var(--ink-soft);
}

/* First column: subscore label */
:is(.page-content .page-content__body, .single-article .article-body) .review-product-section .wp-block-table td:first-child,
:is(.page-content .page-content__body, .single-article .article-body) .review-subscores td:first-child {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  color: var(--ink);
  font-weight: var(--fw-medium);
  width: 60%;
}

/* Second column: score value */
:is(.page-content .page-content__body, .single-article .article-body) .review-product-section .wp-block-table td:last-child,
:is(.page-content .page-content__body, .single-article .article-body) .review-subscores td:last-child {
  font-family: var(--font-display);
  font-size: var(--fs-base);
  font-weight: var(--fw-black);
  text-align: right;
  color: var(--accent);
  width: 40%;
}

:is(.page-content .page-content__body, .single-article .article-body) .review-product-section .wp-block-table tr:last-child td,
:is(.page-content .page-content__body, .single-article .article-body) .review-subscores tr:last-child td {
  border-bottom: none;
}


/* ═══════════════════════════════════════════════════
   METHODOLOGY section
   ═══════════════════════════════════════════════════ */

:is(.page-content .page-content__body, .single-article .article-body) .review-methodology {
  background: var(--paper-warm);
  border: var(--border-thin) solid var(--ink);
  border-radius: var(--r-lg);
  padding: var(--s6);
  margin-top: var(--s8);
  margin-bottom: var(--s7);
}

:is(.page-content .page-content__body, .single-article .article-body) .review-methodology h2,
:is(.page-content .page-content__body, .single-article .article-body) .review-methodology h3 {
  font-family: var(--font-display);
  color: var(--ink);
}

:is(.page-content .page-content__body, .single-article .article-body) .review-methodology p {
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--ink-soft);
}

:is(.page-content .page-content__body, .single-article .article-body) .review-methodology .wp-block-table table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-body);
  font-size: var(--fs-small);
}

:is(.page-content .page-content__body, .single-article .article-body) .review-methodology .wp-block-table th {
  font-family: var(--font-mono);
  font-size: var(--fs-tag);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  text-align: left;
  padding: var(--s2) var(--s3);
  border-bottom: var(--border-thin) solid var(--ink);
  color: var(--ink);
}

:is(.page-content .page-content__body, .single-article .article-body) .review-methodology .wp-block-table td {
  padding: var(--s2) var(--s3);
  border-bottom: var(--border-divider) solid var(--divider-on-light);
  color: var(--ink-soft);
}


/* ═══════════════════════════════════════════════════
   BUYING GUIDE section
   ═══════════════════════════════════════════════════ */

:is(.page-content .page-content__body, .single-article .article-body) .review-buying-guide {
  padding: var(--s6) 0;
  margin-bottom: var(--s6);
  border-top: var(--border-divider) solid var(--paper-dark);
}

:is(.page-content .page-content__body, .single-article .article-body) .review-buying-guide h2,
:is(.page-content .page-content__body, .single-article .article-body) .review-buying-guide h3 {
  font-family: var(--font-display);
  color: var(--ink);
}

:is(.page-content .page-content__body, .single-article .article-body) .review-buying-guide p {
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--ink-soft);
}


/* ═══════════════════════════════════════════════════
   FAQ section
   ═══════════════════════════════════════════════════ */

:is(.page-content .page-content__body, .single-article .article-body) .review-faq {
  border: var(--border-thin) solid var(--ink);
  border-radius: var(--r-lg);
  padding: var(--s6);
  margin-bottom: var(--s6);
}

:is(.page-content .page-content__body, .single-article .article-body) .review-faq h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  margin-bottom: var(--s5);
}

:is(.page-content .page-content__body, .single-article .article-body) .review-faq .wp-block-details {
  border-bottom: var(--border-divider) solid var(--paper-dark);
  padding: var(--s4) 0;
}

:is(.page-content .page-content__body, .single-article .article-body) .review-faq .wp-block-details:last-child {
  border-bottom: none;
}

:is(.page-content .page-content__body, .single-article .article-body) .review-faq .wp-block-details summary {
  font-family: var(--font-display);
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  color: var(--ink);
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s3);
  padding: var(--s2) 0;
}

:is(.page-content .page-content__body, .single-article .article-body) .review-faq .wp-block-details summary::-webkit-details-marker {
  display: none;
}

:is(.page-content .page-content__body, .single-article .article-body) .review-faq .wp-block-details summary::after {
  content: '+';
  font-family: var(--font-mono);
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  color: var(--accent);
  flex-shrink: 0;
  transition: transform var(--duration-fast) var(--ease-smooth);
}

:is(.page-content .page-content__body, .single-article .article-body) .review-faq .wp-block-details[open] summary::after {
  transform: rotate(45deg);
}

:is(.page-content .page-content__body, .single-article .article-body) .review-faq .wp-block-details > :not(summary) {
  padding: var(--s3) 0 var(--s4);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--ink-soft);
}


/* ═══════════════════════════════════════════════════
   WP BLOCK OVERRIDES inside review scope
   ═══════════════════════════════════════════════════ */

:is(.page-content .page-content__body, .single-article .article-body) .review-product-section > .wp-block-group {
  margin-bottom: 0;
}

:is(.page-content .page-content__body, .single-article .article-body) .review-product-section .wp-block-image {
  margin: 0;
}


/* ═══════════════════════════════════════════════════
   QUICK OVERVIEW TABLE
   ═══════════════════════════════════════════════════ */

:is(.page-content .page-content__body, .single-article .article-body) .review-quick-overview .wp-block-table,
:is(.page-content .page-content__body, .single-article .article-body) .review-quick-overview-table {
  margin-top: var(--s5);
  margin-bottom: 0;
}

:is(.page-content .page-content__body, .single-article .article-body) .review-quick-overview .wp-block-table table,
:is(.page-content .page-content__body, .single-article .article-body) .review-quick-overview-table table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-body);
  font-size: var(--fs-small);
}

:is(.page-content .page-content__body, .single-article .article-body) .review-quick-overview .wp-block-table th,
:is(.page-content .page-content__body, .single-article .article-body) .review-quick-overview-table th {
  font-family: var(--font-mono);
  font-size: var(--fs-tag);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  text-align: left;
  padding: var(--s2) var(--s3);
  border-bottom: var(--border-thin) solid var(--ink);
  color: var(--ink);
}

:is(.page-content .page-content__body, .single-article .article-body) .review-quick-overview .wp-block-table td,
:is(.page-content .page-content__body, .single-article .article-body) .review-quick-overview-table td {
  padding: var(--s2) var(--s3);
  border-bottom: var(--border-divider) solid var(--divider-on-light);
  color: var(--ink-soft);
}

:is(.page-content .page-content__body, .single-article .article-body) .review-quick-overview .wp-block-table td:first-child,
:is(.page-content .page-content__body, .single-article .article-body) .review-quick-overview-table td:first-child {
  font-family: var(--font-mono);
  font-weight: var(--fw-bold);
  color: var(--accent);
  width: 3em;
}

:is(.page-content .page-content__body, .single-article .article-body) .review-quick-overview .wp-block-table td:last-child,
:is(.page-content .page-content__body, .single-article .article-body) .review-quick-overview-table td:last-child {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  text-align: right;
  color: var(--ink);
}

:is(.page-content .page-content__body, .single-article .article-body) .review-quick-overview .wp-block-table tr:last-child td,
:is(.page-content .page-content__body, .single-article .article-body) .review-quick-overview-table tr:last-child td {
  border-bottom: none;
}


/* ═══════════════════════════════════════════════════
   B) BLOCKED BY SERIALIZATION
   ═══════════════════════════════════════════════════ */

:is(.page-content .page-content__body, .single-article .article-body) .review-faq-item {
  border-bottom: var(--border-divider) solid var(--paper-dark);
  padding: var(--s4) 0;
}

:is(.page-content .page-content__body, .single-article .article-body) .review-faq-item:last-child {
  border-bottom: none;
}

:is(.page-content .page-content__body, .single-article .article-body) .review-faq-item summary {
  font-family: var(--font-display);
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  color: var(--ink);
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s3);
  padding: var(--s2) 0;
}

:is(.page-content .page-content__body, .single-article .article-body) .review-faq-item summary::-webkit-details-marker {
  display: none;
}

:is(.page-content .page-content__body, .single-article .article-body) .review-faq-item summary::after {
  content: '+';
  font-family: var(--font-mono);
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  color: var(--accent);
  flex-shrink: 0;
  transition: transform var(--duration-fast) var(--ease-smooth);
}

:is(.page-content .page-content__body, .single-article .article-body) .review-faq-item[open] summary::after {
  transform: rotate(45deg);
}

:is(.page-content .page-content__body, .single-article .article-body) .review-faq-item > :not(summary) {
  padding: var(--s3) 0 var(--s4);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--ink-soft);
}


/* ═══════════════════════════════════════════════════
   C) READINESS
   ═══════════════════════════════════════════════════ */

:is(.page-content .page-content__body, .single-article .article-body) .review-total-score--unrated {
  opacity: 0.5;
  border-style: dashed;
}

:is(.page-content .page-content__body, .single-article .article-body) .review-total-score--unrated p {
  color: var(--ink-muted);
}

:is(.page-content .page-content__body, .single-article .article-body) .review-product-no-link .review-buy-buttons {
  display: none;
}


/* ═══════════════════════════════════════════════════
   D) READINESS FOR EXPANSION
   ═══════════════════════════════════════════════════ */

:is(.page-content .page-content__body, .single-article .article-body) .review-badge--value {
  background: var(--tier-good-bg);
  color: var(--chartreuse-dark);
  border-color: var(--chartreuse);
}

:is(.page-content .page-content__body, .single-article .article-body) .review-badge--budget {
  background: var(--tier-ok-bg);
  color: var(--amber);
  border-color: var(--amber);
}

:is(.page-content .page-content__body, .single-article .article-body) .review-badge--premium {
  background: var(--tier-excellent-bg);
  color: var(--deep-indigo);
  border-color: var(--deep-indigo);
}


/* ═══════════════════════════════════════════════════
   RESPONSIVE — Tablet (900px)
   ═══════════════════════════════════════════════════ */

@media (max-width: 900px) {
  :is(.page-content .page-content__body, .single-article .article-body) .review-badge {
    width: 72px;
    height: 72px;
    right: var(--s4);
  }

  :is(.page-content .page-content__body, .single-article .article-body) .review-badge p {
    font-size: var(--fs-xs);
  }

  :is(.page-content .page-content__body, .single-article .article-body) .review-product-heading {
    padding: 0 var(--s5);
    padding-right: calc(72px + var(--s5));
  }

  :is(.page-content .page-content__body, .single-article .article-body) .review-product-image {
    margin: 0 var(--s5);
    margin-bottom: var(--s3);
  }

  :is(.page-content .page-content__body, .single-article .article-body) .review-product-intro-heading,
  :is(.page-content .page-content__body, .single-article .article-body) .review-product-body {
    padding: 0 var(--s5);
  }

  :is(.page-content .page-content__body, .single-article .article-body) .review-pros,
  :is(.page-content .page-content__body, .single-article .article-body) .review-cons {
    margin-left: var(--s5);
    margin-right: var(--s5);
  }

  :is(.page-content .page-content__body, .single-article .article-body) .review-product-section .wp-block-table,
  :is(.page-content .page-content__body, .single-article .article-body) .review-subscores {
    margin-left: var(--s5);
    margin-right: var(--s5);
  }

  :is(.page-content .page-content__body, .single-article .article-body) .review-total-score {
    padding: var(--s4) var(--s5);
  }

  :is(.page-content .page-content__body, .single-article .article-body) .review-price-indicator {
    margin-left: var(--s5);
    margin-right: var(--s5);
  }

  :is(.page-content .page-content__body, .single-article .article-body) .review-buy-buttons,
  :is(.page-content .page-content__body, .single-article .article-body) .review-product-section .wp-block-buttons {
    padding: var(--s4) var(--s5);
  }
}


/* ═══════════════════════════════════════════════════
   RESPONSIVE — Mobile (600px)
   ═══════════════════════════════════════════════════ */

@media (max-width: 600px) {
  :is(.page-content .page-content__body, .single-article .article-body) .review-product-section {
    border-radius: var(--r-md);
  }

  :is(.page-content .page-content__body, .single-article .article-body) .review-product-heading {
    padding: 0 var(--s4);
    padding-right: calc(72px + var(--s4));
    font-size: var(--fs-base);
  }

  :is(.page-content .page-content__body, .single-article .article-body) .review-product-image {
    margin: 0 var(--s4);
    margin-bottom: var(--s3);
  }

  :is(.page-content .page-content__body, .single-article .article-body) .review-product-intro-heading,
  :is(.page-content .page-content__body, .single-article .article-body) .review-product-body {
    padding: 0 var(--s4);
  }

  :is(.page-content .page-content__body, .single-article .article-body) .review-pros,
  :is(.page-content .page-content__body, .single-article .article-body) .review-cons {
    margin-left: var(--s4);
    margin-right: var(--s4);
  }

  :is(.page-content .page-content__body, .single-article .article-body) .review-product-section .wp-block-table,
  :is(.page-content .page-content__body, .single-article .article-body) .review-subscores {
    margin-left: var(--s4);
    margin-right: var(--s4);
    overflow-x: auto;
    display: block;
  }

  :is(.page-content .page-content__body, .single-article .article-body) .review-total-score {
    padding: var(--s4);
  }

  :is(.page-content .page-content__body, .single-article .article-body) .review-total-score p {
    font-size: var(--fs-h2);
  }

  :is(.page-content .page-content__body, .single-article .article-body) .review-price-indicator {
    margin-left: var(--s4);
    margin-right: var(--s4);
  }

  :is(.page-content .page-content__body, .single-article .article-body) .review-buy-buttons,
  :is(.page-content .page-content__body, .single-article .article-body) .review-product-section .wp-block-buttons {
    flex-direction: column;
    padding: var(--s4);
    border-radius: 0 0 var(--r-md) var(--r-md);
  }

  :is(.page-content .page-content__body, .single-article .article-body) .review-buy-button .wp-block-button__link,
  :is(.page-content .page-content__body, .single-article .article-body) .review-product-section .wp-block-button__link {
    width: 100%;
    justify-content: center;
  }

  :is(.page-content .page-content__body, .single-article .article-body) .review-quick-overview {
    padding: var(--s4);
    border-radius: var(--r-md);
  }

  :is(.page-content .page-content__body, .single-article .article-body) .review-quick-overview .wp-block-table,
  :is(.page-content .page-content__body, .single-article .article-body) .review-quick-overview-table {
    overflow-x: auto;
    display: block;
  }

  :is(.page-content .page-content__body, .single-article .article-body) .review-methodology {
    padding: var(--s4);
    border-radius: var(--r-md);
  }

  :is(.page-content .page-content__body, .single-article .article-body) .review-faq {
    padding: var(--s4);
    border-radius: var(--r-md);
  }
}


/* ═══════════════════════════════════════════════════
   REDUCED MOTION
   ═══════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  :is(.page-content .page-content__body, .single-article .article-body) .review-product-section {
    transition: none;
  }

  :is(.page-content .page-content__body, .single-article .article-body) .review-product-section:hover {
    transform: none;
    box-shadow: none;
  }

  :is(.page-content .page-content__body, .single-article .article-body) .review-badge,
  :is(.page-content .page-content__body, .single-article .article-body) .review-badge:hover {
    transition: none;
    transform: rotate(4deg);
  }

  :is(.page-content .page-content__body, .single-article .article-body) .review-buy-button .wp-block-button__link,
  :is(.page-content .page-content__body, .single-article .article-body) .review-product-section .wp-block-button__link {
    transition: none;
  }

  :is(.page-content .page-content__body, .single-article .article-body) .review-buy-button .wp-block-button__link:hover,
  :is(.page-content .page-content__body, .single-article .article-body) .review-product-section .wp-block-button__link:hover {
    transform: none;
    box-shadow: none;
  }

  :is(.page-content .page-content__body, .single-article .article-body) .review-buy-button .wp-block-button__link::after,
  :is(.page-content .page-content__body, .single-article .article-body) .review-product-section .wp-block-button__link::after {
    transition: none;
  }

  :is(.page-content .page-content__body, .single-article .article-body) .review-faq .wp-block-details summary::after,
  :is(.page-content .page-content__body, .single-article .article-body) .review-faq-item summary::after {
    transition: none;
  }
}


/* ── tk-vik: position context for SVG overlay (2026-03-09) ── */
:is(.page-content .page-content__body, .single-article .article-body) .review-product-image {
  position: relative;
}