/* MVP Affiliate Theme — main.css
 * Editorial affiliate review styling. Wirecutter-inspired typography +
 * Tom's Guide-style content density. All brand colors come from
 * --mvp-primary / --mvp-secondary, injected via wp_head from functions.php.
 */

/* ─── CSS variables (defaults; overridden by inline <style>) ──────────────── */
:root {
  --mvp-primary:        #0071e3;
  --mvp-secondary:      #34c759;
  --mvp-text:           #1a1a1a;
  --mvp-text-muted:     #5d5d65;
  --mvp-text-dim:       #8a8a93;
  --mvp-bg:             #ffffff;
  --mvp-bg-soft:        #f7f7f8;
  --mvp-border:         #e5e5ea;
  --mvp-border-strong:  #d1d1d6;
  --mvp-radius:         10px;
  --mvp-radius-sm:      6px;
  --mvp-shadow:         0 1px 2px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.04);
  --mvp-shadow-hover:   0 1px 2px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.08);
  --mvp-font-serif:     "Charter", "Georgia", "Cambria", "Times New Roman", serif;
  --mvp-font-sans:      -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mvp-container:      1200px;
  --mvp-gap:            24px;
}

/* ─── Reset / base ────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--mvp-font-sans);
  font-size: 17px;
  line-height: 1.6;
  color: var(--mvp-text);
  background: var(--mvp-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, svg { max-width: 100%; height: auto; vertical-align: middle; }
a { color: var(--mvp-primary); text-decoration: none; transition: opacity .15s ease, color .15s ease; }
a:hover { opacity: 0.75; }
button { font-family: inherit; cursor: pointer; }

h1, h2, h3, h4, h5 {
  font-family: var(--mvp-font-serif);
  font-weight: 700;
  line-height: 1.2;
  color: var(--mvp-text);
  margin: 0 0 0.5em;
  letter-spacing: -0.01em;
}
p { margin: 0 0 1em; }

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

/* ─── Container ───────────────────────────────────────────────────────────── */
.mvp-container {
  max-width: var(--mvp-container);
  margin: 0 auto;
  padding: 0 24px;
}
@media (max-width: 640px) {
  .mvp-container { padding: 0 16px; }
}

/* ─── Mobile overflow hardening ───────────────────────────────────────────
   Stops any single wide element (a long URL printed as text, a wide
   comparison table, an oversized embed) from pushing the page wider than the
   screen and clipping the whole layout on phones. `overflow-x: clip` (not
   hidden) kills the sideways scroll WITHOUT breaking the sticky table of
   contents / sticky CTA. Long words wrap, media is capped to 100%, and wide
   tables scroll inside their own box instead of widening the article. */
html, body { overflow-x: clip; }
.mvp-single-content, .mvp-single-title, .mvp-single-dek, .mvp-single-body, .mvp-single-body p, .mvp-single-body li, .mvp-single-body h2, .mvp-single-body h3 {
  overflow-wrap: break-word;
  word-wrap: break-word;
}
.mvp-single-body img, .mvp-single-body iframe, .mvp-single-body video, .mvp-single-body embed, .mvp-single-body object {
  max-width: 100%;
  height: auto;
}
/* Embedded videos (YouTube etc.) carry fixed width/height attributes that
   otherwise overflow the column on phones. Force them full-width 16:9. */
.mvp-single-content iframe, .mvp-single-body iframe {
  width: 100%;
  max-width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  border: 0;
}
.mvp-single-body pre { max-width: 100%; overflow-x: auto; }
.mvp-single-body table { display: block; width: 100%; max-width: 100%; overflow-x: auto; }

/* In-article "Get it now" product CTA card. It's an inline-styled flex ROW
   (text column + fixed 200px image column). The text column can shrink but the
   image column can't, so on a phone flexbox crushes the text to one-word-per-
   line and the image overflows instead of wrapping. Force it to stack on
   mobile. The row direction is an INLINE style, so !important is required. */
@media (max-width: 600px) {
  /* Force a single column on phones, whichever way the card was built:
       - flex variant  (lib/cta-thumb.ts): inline flex-direction:row
       - grid variant   (post <style>): display:grid + grid-template-columns:1fr 220px
     Forcing display:flex + column overrides BOTH (a grid ignores flex-direction,
     so the display switch is what actually fixes the grid posts). Children are
     reset to full-width, auto-height blocks so neither the text nor the fixed
     image column can crush the layout. */
  .gr-cta-card {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: 1fr !important;
    align-items: stretch !important;
    gap: 16px !important;
  }
  .gr-cta-card > * {
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  /* The image/thumbnail column (classed .gr-cta-thumb-wrap in the grid variant,
     an unclassed div in the flex variant) — center it, capped, below the text. */
  .gr-cta-card .gr-cta-thumb-wrap,
  .gr-cta-card > div:not(.gr-cta-body) {
    max-width: 320px !important;
    margin: 0 auto !important;
  }
  .gr-cta-card img { width: 100% !important; height: auto !important; }
}

/* ─── Utility bar (disclaimer + socials) ─────────────────────────────────── */
.mvp-utilitybar {
  background: #111;
  color: #fff;
  font-size: 13px;
  border-bottom: 1px solid #2a2a2a;
}
.mvp-utilitybar-inner {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 16px;
  padding: 6px 24px;
}
.mvp-utilitybar-socials { display: flex; flex-wrap: wrap; gap: 4px; }
/* Social-only bar: center the icons on phones so they're not jammed in a
   corner now that the disclaimer no longer shares the row. */
@media (max-width: 640px) {
  .mvp-utilitybar-inner { justify-content: center; }
}
.mvp-utilitybar-social {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px;
  color: rgba(255,255,255,0.7);
  border-radius: 6px;
}
.mvp-utilitybar-social:hover { color: #fff; background: rgba(255,255,255,0.1); opacity: 1; }
@media (max-width: 640px) {
  .mvp-utilitybar-disclaimer { font-size: 10.5px; }
}

/* ─── Logo banner ────────────────────────────────────────────────────────── */
.mvp-logobanner {
  width: 100%;
  padding: 18px 20px;
  text-align: center;
  position: relative;
  z-index: 50;
}
/* Banner mode: tighter padding so a wide header banner fills the strip
   without a chunky frame around it. */
.mvp-logobanner.mvp-logobanner--banner { padding: 0; }
.mvp-logobanner--banner .mvp-logobanner-link { display: block; }
.mvp-logobanner-link { display: inline-block; line-height: 0; }
.mvp-logobanner-img {
  height: 80px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}
/* When a wide header banner is uploaded (--banner variant), let it
   actually span the strip up to a cap — height is intrinsic, capped so
   it can't dominate the page. The image still contains (never crops),
   so a centered logo with margin still looks intentional. */
.mvp-logobanner-img--banner {
  height: auto;
  width: 100%;
  max-width: 1600px;
  max-height: 240px;
  margin: 0 auto;
  display: block;
}
@media (max-width: 640px) {
  .mvp-logobanner { padding: 14px 16px; }
  .mvp-logobanner.mvp-logobanner--banner { padding: 0; }
  .mvp-logobanner-img { height: 60px; }
  .mvp-logobanner-img--banner { height: auto; max-height: 120px; }
}

/* ─── Main header ────────────────────────────────────────────────────────── */
.mvp-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(255,255,255,0.98);
  border-bottom: 1px solid var(--mvp-border);
  backdrop-filter: saturate(180%) blur(10px);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
  transition: box-shadow .2s ease;
}
.mvp-header-scrolled { box-shadow: 0 1px 8px rgba(0,0,0,0.04); }
.mvp-header-inner {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 16px 24px;
}
.mvp-header-brand {
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: var(--mvp-text);
}
.mvp-header-brand:hover { opacity: 1; }
.mvp-header-title {
  font-family: var(--mvp-font-serif);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.015em;
  color: var(--mvp-text);
}
.mvp-header-tagline {
  font-size: 11px;
  color: var(--mvp-text-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.mvp-header-nav { flex: 1; display: flex; justify-content: center; }
.mvp-nav-menu {
  display: flex;
  gap: 6px;
  margin: 0; padding: 0; list-style: none;
  flex-wrap: wrap;
}
.mvp-nav-menu li { position: relative; }
.mvp-nav-menu a {
  display: inline-block;
  padding: 8px 14px;
  color: var(--mvp-text);
  font-size: 14px;
  font-weight: 500;
  border-radius: var(--mvp-radius-sm);
  text-decoration: none;
}
.mvp-nav-menu a:hover { background: var(--mvp-bg-soft); opacity: 1; color: var(--mvp-primary); }
.mvp-nav-menu .current-menu-item > a,
.mvp-nav-menu .current_page_item > a { color: var(--mvp-primary); font-weight: 600; }

.mvp-header-search-toggle,
.mvp-header-menu-toggle {
  background: transparent;
  border: 0;
  padding: 8px;
  color: var(--mvp-text);
  border-radius: var(--mvp-radius-sm);
}
.mvp-header-search-toggle:hover,
.mvp-header-menu-toggle:hover { background: var(--mvp-bg-soft); }
.mvp-header-menu-toggle { display: none; }

.mvp-header-search { border-top: 1px solid var(--mvp-border); padding: 14px 0; background: #fff; }
.mvp-searchform {
  display: flex; align-items: center;
  border: 1px solid var(--mvp-border-strong);
  border-radius: var(--mvp-radius);
  background: #fff;
  overflow: hidden;
  max-width: 600px; margin: 0 auto;
}
.mvp-searchform input[type="search"] {
  flex: 1; border: 0; padding: 10px 14px;
  font: inherit; outline: none; background: transparent;
}
.mvp-searchform-submit {
  background: transparent; border: 0; padding: 0 14px;
  color: var(--mvp-text-muted); height: 100%;
}

@media (max-width: 900px) {
  /* Allow the nav to drop to its own full-width row when the hamburger opens.
     Without flex-wrap the nav (flex-basis:100%) can't wrap, so it got crushed
     into a narrow right-hand column and the category links were cut off. */
  .mvp-header-inner { flex-wrap: wrap; }
  .mvp-header-menu-toggle { display: inline-flex; }
  .mvp-header-nav {
    display: none;
    flex-basis: 100%;
    width: 100%;
    order: 99;
    padding-bottom: 12px;
  }
  .mvp-header-open .mvp-header-nav { display: flex; justify-content: flex-start; }
  .mvp-header-open .mvp-nav-menu { flex-direction: column; width: 100%; gap: 0; }
  .mvp-header-open .mvp-nav-menu a { display: block; padding: 10px 14px; white-space: nowrap; }
}

/* ─── Hero ───────────────────────────────────────────────────────────────── */
.mvp-hero {
  padding: 56px 0 32px;
  text-align: center;
  background: linear-gradient(180deg, var(--mvp-bg-soft) 0%, var(--mvp-bg) 100%);
  border-bottom: 1px solid var(--mvp-border);
}
.mvp-hero-title {
  font-size: clamp(36px, 6vw, 56px);
  margin: 0 0 0.3em;
}
.mvp-hero-tagline {
  font-size: clamp(16px, 2vw, 19px);
  color: var(--mvp-text-muted);
  max-width: 640px;
  margin: 0 auto;
}

/* ─── Sections ───────────────────────────────────────────────────────────── */
.mvp-main { min-height: 50vh; }
.mvp-section { padding: 56px 0; }
.mvp-section-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 28px;
  border-bottom: 2px solid var(--mvp-text);
  padding-bottom: 12px;
}
.mvp-section-title {
  font-size: 28px;
  margin: 0;
}
.mvp-section-link {
  font-family: var(--mvp-font-sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--mvp-primary);
  white-space: nowrap;
}

/* Featured section uses the generic .mvp-grid .mvp-grid-4 — see below. */

/* ─── Lead (Wirecutter-style hero post) ─────────────────────────────────── */
.mvp-lead {
  padding: 48px 0 16px;
}
.mvp-lead-link {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 40px;
  align-items: center;
  text-decoration: none;
  color: inherit;
}
.mvp-lead-image {
  /* Match the source thumbnail's native 16:9 (YouTube) so object-fit:cover
     fills the box without slicing off the sides of the image. */
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--mvp-bg-soft);
  border-radius: 6px;
}
.mvp-lead-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .35s ease;
}
.mvp-lead-link:hover .mvp-lead-image img { transform: scale(1.02); }
.mvp-lead-body { padding: 8px 0; }
.mvp-lead-eyebrow {
  font-family: var(--mvp-font-sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mvp-primary);
  margin: 0 0 18px;
}
.mvp-lead-pick { color: var(--mvp-primary); }
.mvp-lead-cat { color: var(--mvp-text-muted); }
.mvp-lead-title {
  font-family: var(--mvp-font-serif);
  font-size: 48px;
  line-height: 1.05;
  font-weight: 700;
  margin: 0 0 16px;
  color: var(--mvp-text);
}
.mvp-lead-dek {
  font-size: 18px;
  line-height: 1.55;
  color: var(--mvp-text-muted);
  margin: 0 0 22px;
}
.mvp-lead-byline {
  font-family: var(--mvp-font-sans);
  font-size: 14px;
  color: var(--mvp-text-dim);
  margin: 0 0 22px;
}
.mvp-lead-byline strong { color: var(--mvp-text); font-weight: 600; }
.mvp-lead-dot { margin: 0 6px; }
.mvp-lead-cta {
  display: inline-block;
  font-family: var(--mvp-font-sans);
  font-size: 15px;
  font-weight: 700;
  color: var(--mvp-primary);
  border-bottom: 2px solid var(--mvp-primary);
  padding-bottom: 2px;
}
.mvp-lead-link:hover .mvp-lead-title { color: var(--mvp-primary); }

@media (max-width: 900px) {
  .mvp-lead-link { grid-template-columns: 1fr; gap: 24px; }
  .mvp-lead-title { font-size: 34px; }
  .mvp-lead-dek { font-size: 16px; }
}

/* ─── Homepage 3-up ad strip ────────────────────────────────────────────
   Replaces the previous newsletter strip. Same grey-on-grey feel
   (bg-soft, top/bottom border), but three 16:9 banner slots in a row
   that match the proportions of the post cards above/below it. */
.mvp-ad-strip {
  background: var(--mvp-bg-soft);
  border-top: 1px solid var(--mvp-border);
  border-bottom: 1px solid var(--mvp-border);
  padding: 40px 0;
  margin: 32px 0;
}
.mvp-ad-strip .mvp-section-header { display: none; }
.mvp-ad-strip-label {
  font-family: var(--mvp-font-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--mvp-text-dim);
  text-align: center;
  margin: 0 0 18px;
}
.mvp-ad-slot {
  display: block;
  aspect-ratio: 16 / 9;
  border-radius: 6px;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--mvp-border);
  position: relative;
  transition: transform .15s ease, box-shadow .15s ease;
}
.mvp-ad-slot-filled img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
a.mvp-ad-slot-filled:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
}
.mvp-ad-slot-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-style: dashed;
  border-color: var(--mvp-border);
}
.mvp-ad-slot-label {
  font-family: var(--mvp-font-sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--mvp-text-dim);
}

/* ─── Newsletter strip (legacy — kept around in case we re-enable) ────── */
.mvp-newsletter {
  background: var(--mvp-bg-soft);
  border-top: 1px solid var(--mvp-border);
  border-bottom: 1px solid var(--mvp-border);
  padding: 48px 0;
  margin: 32px 0;
}
.mvp-newsletter-inner {
  text-align: center;
  max-width: 620px;
  margin: 0 auto;
}
.mvp-newsletter-title {
  font-family: var(--mvp-font-serif);
  font-size: 28px;
  line-height: 1.2;
  margin: 0 0 8px;
  color: var(--mvp-text);
}
.mvp-newsletter-dek {
  font-size: 15px;
  color: var(--mvp-text-muted);
  margin: 0 0 20px;
}
.mvp-newsletter-form {
  display: flex;
  gap: 8px;
  max-width: 460px;
  margin: 0 auto;
}
.mvp-newsletter-input {
  flex: 1;
  padding: 12px 14px;
  border: 1px solid var(--mvp-border);
  border-radius: 4px;
  font-family: var(--mvp-font-sans);
  font-size: 15px;
  background: #fff;
  color: var(--mvp-text);
}
.mvp-newsletter-input:focus {
  outline: 2px solid var(--mvp-primary);
  outline-offset: -1px;
}
.mvp-newsletter-button {
  padding: 12px 24px;
  background: var(--mvp-text);
  color: #fff;
  border: 0;
  border-radius: 4px;
  font-family: var(--mvp-font-sans);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: opacity .15s ease;
}
.mvp-newsletter-button:hover:not(:disabled) { opacity: .85; }
.mvp-newsletter-button:disabled {
  background: var(--mvp-text-dim);
  cursor: default;
}
.mvp-newsletter-fineprint {
  margin: 12px 0 0;
  font-size: 12px;
  color: var(--mvp-text-dim);
}

@media (max-width: 560px) {
  .mvp-newsletter-form { flex-direction: column; }
}

/* ─── Recently Published list ──────────────────────────────────────────── */
.mvp-recent-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--mvp-border);
}
.mvp-recent-item {
  border-bottom: 1px solid var(--mvp-border);
}
.mvp-recent-link {
  display: grid;
  grid-template-columns: 80px 1fr auto;
  gap: 18px;
  align-items: baseline;
  padding: 16px 4px;
  text-decoration: none;
  color: inherit;
  transition: background .15s ease;
}
.mvp-recent-link:hover { background: var(--mvp-bg-soft); }
/* Dates hidden (Customize Blog → Post dates off): drop the 80px date
   column so titles don't slide into the empty slot. Higher specificity
   than the in-media-query base rule, so it wins on mobile too. */
.mvp-recent-nodate .mvp-recent-link { grid-template-columns: 1fr auto; }
.mvp-recent-date {
  font-family: var(--mvp-font-sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--mvp-text-dim);
}
.mvp-recent-title {
  font-family: var(--mvp-font-serif);
  font-size: 18px;
  line-height: 1.35;
  color: var(--mvp-text);
  font-weight: 500;
}
.mvp-recent-link:hover .mvp-recent-title { color: var(--mvp-primary); }
.mvp-recent-cat {
  font-family: var(--mvp-font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--mvp-text-dim);
  white-space: nowrap;
}

@media (max-width: 560px) {
  .mvp-recent-link { grid-template-columns: 56px 1fr; }
  .mvp-recent-cat { display: none; }
  .mvp-recent-title { font-size: 16px; }
}


/* ─── Generic card grids ─────────────────────────────────────────────────── */
.mvp-grid { display: grid; gap: 24px; }
.mvp-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mvp-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) {
  .mvp-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mvp-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 540px) {
  .mvp-grid-3, .mvp-grid-4 { grid-template-columns: 1fr; }
}

/* ─── Card ───────────────────────────────────────────────────────────────── */
.mvp-card {
  background: #fff;
  border-radius: var(--mvp-radius);
  overflow: hidden;
  transition: transform .15s ease, box-shadow .15s ease;
}
.mvp-card:hover { transform: translateY(-2px); box-shadow: var(--mvp-shadow-hover); }
.mvp-card-link { color: var(--mvp-text); text-decoration: none; display: block; }
.mvp-card-link:hover { opacity: 1; }
.mvp-card-image {
  aspect-ratio: 16/9;
  overflow: hidden;
  background: var(--mvp-bg-soft);
}
.mvp-card-image img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .35s ease;
}
.mvp-card:hover .mvp-card-image img { transform: scale(1.03); }
.mvp-card-body { padding: 16px 0; }
.mvp-card-title {
  font-size: 19px;
  line-height: 1.25;
  margin: 8px 0;
  color: var(--mvp-text);
}
.mvp-card-excerpt {
  color: var(--mvp-text-muted);
  font-size: 15px;
  margin: 0 0 12px;
}
.mvp-card-meta { font-size: 13px; color: var(--mvp-text-dim); }
.mvp-card:hover .mvp-card-title { color: var(--mvp-primary); }

/* ─── Category badge ─────────────────────────────────────────────────────── */
.mvp-category-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mvp-primary);
  text-decoration: none;
}

/* ─── Byline ─────────────────────────────────────────────────────────────── */
.mvp-byline {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 13px;
  color: var(--mvp-text-dim);
}
.mvp-byline-author { color: var(--mvp-text-muted); font-weight: 500; }
.mvp-byline-dot { color: var(--mvp-border-strong); }
/* 2026-06-08 (v1.4.18): updated + read-time chips next to the date. The
   chips read as one continuous byline ("By Michelle · Jun 6, 2026 · Updated
   today · 11 min read"). Updated chip uses a subtle accent color so the
   freshness signal stands out without screaming. */
.mvp-byline-updated {
  display: inline-flex;
  align-items: center;
  color: #15803d;
  font-weight: 600;
}
.mvp-byline-readtime {
  display: inline-flex;
  align-items: center;
  color: var(--mvp-text-muted);
}

/* ─── Category cards (Browse by Category section) ────────────────────────── */
.mvp-section-categories { background: var(--mvp-bg-soft); }
.mvp-category-card {
  display: block;
  background: #fff;
  padding: 28px;
  border-radius: var(--mvp-radius);
  border: 1px solid var(--mvp-border);
  text-decoration: none;
  color: var(--mvp-text);
  transition: border-color .15s ease, transform .15s ease;
}
.mvp-category-card:hover {
  border-color: var(--mvp-primary);
  transform: translateY(-2px);
  opacity: 1;
}
.mvp-category-card-title {
  font-size: 22px; margin: 0 0 6px;
}
.mvp-category-card-count {
  font-size: 14px;
  color: var(--mvp-primary);
  margin: 0;
  font-weight: 600;
}

/* ─── Single post ────────────────────────────────────────────────────────── */
.mvp-single { padding: 32px 0 56px; }
.mvp-single-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 48px;
  align-items: start;
}
@media (max-width: 1000px) {
  /* minmax(0, 1fr) — NOT plain 1fr. Plain 1fr is minmax(auto, 1fr), whose
     `auto` minimum is the content's min-content width, so a fixed-size video
     iframe would force the column (and every paragraph in it) wider than the
     phone screen. minmax(0, …) lets the column shrink to the viewport. */
  .mvp-single-layout { grid-template-columns: minmax(0, 1fr); gap: 32px; }
}

.mvp-single-header { margin-bottom: 24px; }
.mvp-single-title {
  font-size: clamp(28px, 4.5vw, 44px);
  line-height: 1.15;
  margin: 8px 0 12px;
}
.mvp-single-dek {
  font-size: 19px;
  color: var(--mvp-text-muted);
  line-height: 1.5;
  margin: 0 0 20px;
}
.mvp-single-meta { color: var(--mvp-text-dim); }

.mvp-single-featured { margin: 0 0 28px; }
.mvp-single-featured img {
  width: 100%; height: auto;
  border-radius: var(--mvp-radius);
  display: block;
}
.mvp-single-featured-caption {
  font-size: 13px;
  color: var(--mvp-text-dim);
  margin-top: 8px;
  text-align: center;
  font-style: italic;
}

.mvp-single-body {
  font-size: 18px;
  line-height: 1.7;
}
.mvp-single-body p { margin: 0 0 1.2em; }
.mvp-single-body h2 {
  font-size: 28px; margin: 1.6em 0 0.5em;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--mvp-border);
}
.mvp-single-body h3 { font-size: 22px; margin: 1.4em 0 0.5em; }
.mvp-single-body a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.mvp-single-body img { border-radius: var(--mvp-radius); margin: 24px 0; }
.mvp-single-body blockquote {
  border-left: 3px solid var(--mvp-primary);
  margin: 24px 0; padding: 4px 0 4px 20px;
  font-family: var(--mvp-font-serif);
  font-size: 22px; font-style: italic;
  color: var(--mvp-text-muted);
}
.mvp-single-body ul, .mvp-single-body ol { padding-left: 1.4em; margin: 0 0 1.2em; }
.mvp-single-body li { margin-bottom: 0.3em; }
.mvp-single-body table {
  width: 100%; border-collapse: collapse;
  font-size: 15px; margin: 24px 0;
}
.mvp-single-body th, .mvp-single-body td {
  padding: 12px 14px; text-align: left;
  border-bottom: 1px solid var(--mvp-border);
}
.mvp-single-body th { background: var(--mvp-bg-soft); font-weight: 700; }

.mvp-single-tags {
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid var(--mvp-border);
  display: flex; flex-wrap: wrap; gap: 8px;
}
.mvp-tag {
  display: inline-block;
  font-size: 13px;
  padding: 4px 10px;
  background: var(--mvp-bg-soft);
  color: var(--mvp-text-muted);
  border-radius: 999px;
  text-decoration: none;
}
.mvp-tag:hover { background: var(--mvp-primary); color: #fff; opacity: 1; }

/* ─── Sidebar ────────────────────────────────────────────────────────────── */
.mvp-single-sidebar {
  position: sticky;
  top: 90px;
}
.mvp-single-sidebar .widget {
  margin-bottom: 32px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--mvp-border);
}
.mvp-single-sidebar .widget:last-child { border-bottom: 0; }
.mvp-single-sidebar .widget-title {
  font-size: 14px;
  font-family: var(--mvp-font-sans);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--mvp-text);
  margin: 0 0 14px;
}

/* ─── Pick of the Day ────────────────────────────────────────────────────── */
.mvp-pick {
  margin-bottom: 32px;
  padding: 18px;
  border: 1px solid var(--mvp-border);
  border-radius: var(--mvp-radius);
  background: linear-gradient(180deg, var(--mvp-bg-soft) 0%, var(--mvp-bg) 100%);
}
.mvp-pick-label {
  margin: 0 0 10px;
  font-family: var(--mvp-font-sans);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mvp-primary);
}
.mvp-pick-link { display: block; color: var(--mvp-text); }
.mvp-pick-link:hover { opacity: 1; }
.mvp-pick-image {
  aspect-ratio: 16/9;
  overflow: hidden;
  border-radius: var(--mvp-radius-sm);
  margin-bottom: 12px;
}
.mvp-pick-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.mvp-pick-link:hover .mvp-pick-image img { transform: scale(1.03); }
.mvp-pick-title {
  font-size: 18px;
  line-height: 1.25;
  margin: 0 0 6px;
}
.mvp-pick-link:hover .mvp-pick-title { color: var(--mvp-primary); }
.mvp-pick-excerpt {
  font-size: 14px;
  color: var(--mvp-text-muted);
  margin: 0 0 10px;
  line-height: 1.5;
}
.mvp-pick-cta {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  color: var(--mvp-primary);
}

/* Homepage variant: wider and prouder */
.mvp-pick-homepage {
  padding: 32px;
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 32px;
  align-items: center;
  border: 2px solid var(--mvp-primary);
  background: var(--mvp-bg-soft);
}
.mvp-pick-homepage .mvp-pick-label {
  font-size: 12px;
  margin-bottom: 14px;
}
.mvp-pick-homepage .mvp-pick-link {
  display: contents;
}
.mvp-pick-homepage .mvp-pick-image {
  grid-column: 2;
  grid-row: 1 / span 3;
  margin: 0;
  /* 16:9 to match the YouTube thumbnail source — no side cropping. */
  aspect-ratio: 16/9;
}
.mvp-pick-homepage .mvp-pick-title {
  font-size: clamp(24px, 3.2vw, 36px);
  line-height: 1.15;
  grid-column: 1;
}
.mvp-pick-homepage .mvp-pick-excerpt {
  font-size: 16px;
  grid-column: 1;
}
.mvp-pick-homepage .mvp-pick-cta {
  grid-column: 1;
  font-size: 15px;
}
@media (max-width: 800px) {
  .mvp-pick-homepage { grid-template-columns: 1fr; padding: 20px; }
  .mvp-pick-homepage .mvp-pick-image { grid-column: 1; grid-row: 2; }
  .mvp-pick-homepage .mvp-pick-title { grid-row: 1; }
}

/* ─── Ad blocks ──────────────────────────────────────────────────────────── */
.mvp-ad-block {
  margin: 24px 0;
  border-radius: var(--mvp-radius);
  overflow: hidden;
}
.mvp-ad-block-label {
  font-family: var(--mvp-font-sans);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mvp-text-dim);
  margin: 0 0 8px;
}
.mvp-ad-image img { display: block; width: 100%; height: auto; border-radius: var(--mvp-radius-sm); }
.mvp-ad-html { padding: 0; }

/* ─── Pagination ─────────────────────────────────────────────────────────── */
.mvp-pagination { margin-top: 48px; text-align: center; }
.mvp-pagination .nav-links { display: inline-flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.mvp-pagination .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 38px; height: 38px; padding: 0 12px;
  border-radius: var(--mvp-radius-sm);
  border: 1px solid var(--mvp-border);
  color: var(--mvp-text);
  text-decoration: none;
  font-weight: 500;
}
.mvp-pagination .page-numbers:hover,
.mvp-pagination .current { background: var(--mvp-primary); color: #fff; border-color: var(--mvp-primary); opacity: 1; }

/* ─── About Us band (sits just above the footer) ─────────────────────────── */
.mvp-about-band {
  margin-top: 80px;
  background: #161616;
  border-top: 1px solid rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  color: #fff;
}
.mvp-about-inner {
  display: flex;
  align-items: flex-start;
  gap: 44px;
  padding: 56px 24px;
  /* No max-width override — inherit the site's 1200px .mvp-container so
     the bio flows at the same width as the rest of the page instead of
     a cramped column. */
}
.mvp-about-headshot {
  width: 110px; height: 110px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 3px solid rgba(255,255,255,0.12);
}
.mvp-about-text { flex: 1; min-width: 0; }
.mvp-about-eyebrow {
  font-family: var(--mvp-font-sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  margin: 0 0 8px;
}
.mvp-about-name {
  font-family: var(--mvp-font-serif);
  font-size: 28px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 14px;
  line-height: 1.15;
}
.mvp-about-bio {
  color: rgba(255,255,255,0.72);
  line-height: 1.7;
  font-size: 15px;
}
.mvp-about-bio br { content: ""; display: block; margin-bottom: 8px; }
.mvp-about-bio-rest { margin-top: 4px; }
.mvp-about-bio-rest[hidden] { display: none; }
.mvp-about-readmore {
  display: inline-block;
  margin-top: 14px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--mvp-font-sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--mvp-primary);
  border-bottom: 1px solid currentColor;
  line-height: 1.2;
}
.mvp-about-readmore:hover { opacity: 0.8; }
@media (max-width: 640px) {
  .mvp-about-inner { flex-direction: column; align-items: center; text-align: center; gap: 20px; padding: 40px 20px; }
  .mvp-about-headshot { width: 88px; height: 88px; }
  .mvp-about-name { font-size: 24px; }
}

/* ─── Footer ─────────────────────────────────────────────────────────────── */
.mvp-footer {
  margin-top: 0;
  background: #111;
  color: #fff;
  font-size: 14px;
}
.mvp-footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 48px;
  padding: 56px 24px 32px;
}
@media (max-width: 900px) {
  .mvp-footer-grid { grid-template-columns: repeat(2, 1fr); gap: 32px; }
}
@media (max-width: 540px) {
  .mvp-footer-grid { grid-template-columns: 1fr; }
}
.mvp-footer-heading {
  font-family: var(--mvp-font-sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  margin: 0 0 14px;
}
.mvp-footer-author-card {}
.mvp-footer-headshot {
  width: 56px; height: 56px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 12px;
  border: 2px solid rgba(255,255,255,0.15);
}
.mvp-footer-author-name {
  font-family: var(--mvp-font-serif);
  font-size: 18px; font-weight: 700;
  color: #fff;
  margin: 0 0 6px;
}
.mvp-footer-author-bio {
  color: rgba(255,255,255,0.7);
  line-height: 1.55;
  margin: 0;
  font-size: 13.5px;
}
.mvp-footer-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.mvp-footer-list a { color: rgba(255,255,255,0.75); text-decoration: none; }
.mvp-footer-list a:hover { color: #fff; opacity: 1; }

.mvp-footer-socials { display: flex; flex-wrap: wrap; gap: 8px; }
.mvp-footer-social {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  border-radius: 8px;
  background: rgba(255,255,255,0.1);
  color: #fff;
}
.mvp-footer-social:hover { background: var(--mvp-primary); opacity: 1; }

.mvp-footer-disclaimer {
  background: rgba(0,0,0,0.3);
  padding: 16px 0;
  font-size: 12px;
  color: rgba(255,255,255,0.6);
  text-align: center;
}
.mvp-footer-disclaimer p { margin: 0; }

.mvp-footer-bottom {
  padding: 20px 0;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.mvp-footer-bottom-inner {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  flex-wrap: wrap;
}
.mvp-footer-logo-link { display: inline-flex; align-items: center; line-height: 0; }
.mvp-footer-logo {
  height: 36px; width: auto; max-width: 200px;
  object-fit: contain;
  opacity: 0.85;
}
.mvp-footer-copyright {
  margin: 0;
  font-size: 12px;
  color: rgba(255,255,255,0.5);
}

/* ─── Archive ────────────────────────────────────────────────────────────── */
.mvp-archive { padding: 40px 0 56px; }
.mvp-archive-header {
  text-align: center;
  margin-bottom: 40px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--mvp-border);
}
.mvp-archive-eyebrow {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--mvp-primary);
  font-weight: 700;
  margin: 0 0 8px;
}
.mvp-archive-title {
  font-size: clamp(32px, 5vw, 48px);
  margin: 0;
}
.mvp-archive-description {
  color: var(--mvp-text-muted);
  max-width: 640px;
  margin: 16px auto 0;
}

/* ─── Page ───────────────────────────────────────────────────────────────── */
.mvp-page { padding: 56px 0; }
.mvp-page-inner { max-width: 760px; }
.mvp-page-title {
  font-size: clamp(32px, 5vw, 48px);
  margin: 0 0 32px;
}
.mvp-page-body { font-size: 18px; line-height: 1.7; }
.mvp-page-body h2 { font-size: 26px; margin: 1.4em 0 0.5em; }
.mvp-page-body a { text-decoration: underline; }

/* ─── 404 ────────────────────────────────────────────────────────────────── */
.mvp-404 { padding: 80px 0; }
.mvp-404-inner { max-width: 520px; margin: 0 auto; text-align: center; }
.mvp-404-eyebrow {
  font-size: 64px; font-weight: 800;
  color: var(--mvp-primary);
  font-family: var(--mvp-font-serif);
  margin: 0 0 12px;
}
.mvp-404-title { font-size: 32px; margin: 0 0 12px; }
.mvp-404-text { color: var(--mvp-text-muted); }
.mvp-404-actions { margin: 24px 0 40px; }
.mvp-404-search-heading { font-size: 16px; }

/* ─── Buttons ────────────────────────────────────────────────────────────── */
.mvp-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  background: var(--mvp-primary);
  color: #fff;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 600;
  font-size: 15px;
  transition: opacity .15s ease;
}
.mvp-button:hover { opacity: 0.85; }

/* ─── "Our Pick" callout box (use as block in editor) ────────────────────── */
.mvp-ourpick {
  background: var(--mvp-bg-soft);
  border: 2px solid var(--mvp-primary);
  border-radius: var(--mvp-radius);
  padding: 24px;
  margin: 32px 0;
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 20px;
  align-items: center;
}
.mvp-ourpick-label {
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mvp-primary);
  margin-bottom: 6px;
}
.mvp-ourpick-name {
  font-family: var(--mvp-font-serif);
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 8px;
}
/* Stack the "Our Pick" callout on phones — its 140px image column would
   otherwise squeeze the text into a narrow strip. */
@media (max-width: 600px) {
  .mvp-ourpick { grid-template-columns: 1fr; gap: 16px; }
  .mvp-ourpick img { max-width: 320px; margin: 0 auto; }
}
/* Bottom clearance for the mobile sticky "Get the best price" bar (the plugin's
   #mvp-sticky-cta, fixed at bottom). Without it the bar covers the last line of
   the post. ~92px clears the bar + the iOS home indicator safe-area. */
@media (max-width: 768px) {
  .mvp-single .mvp-single-content { padding-bottom: calc(92px + env(safe-area-inset-bottom)); }
}

/* ─── Empty states ───────────────────────────────────────────────────────── */
.mvp-empty { text-align: center; color: var(--mvp-text-muted); padding: 40px 20px; }

/* ─── Review video embed (responsive 16:9) ───────────────────────────────────
   Mirrors the per-post injected <style>. Lives in the theme too so the embed
   stays 16:9 even when WP KSES / a security plugin strips inline <style> from
   post content — the iframe carries no width/height of its own, so without
   this it collapses to the 300x150 browser default. */
.gr-video-wrap { margin: 0 0 32px; width: 100%; }
.gr-video-wrap .gr-video-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; border-radius: 4px; background: #111; box-shadow: 0 4px 20px rgba(0,0,0,.15); }
.gr-video-wrap .gr-video-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }
.gr-video-label { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 12px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: #555; }
.gr-video-label::before { content: '▶'; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; background: #FF0000; color: #fff; border-radius: 4px; font-size: 10px; }

/* ── Newsletter homepage hero ─────────────────────────────────────────────
   Two-column section that wraps the signup form on the homepage. Reads as
   a designed band of the page (gradient + ample padding) instead of a
   small card floating in white space. Left column: title + bullets +
   optional social-proof eyebrow. Right column: the standard form.

   The .mvp-newsletter-section wrapper around it (in front-page.php) is the
   outer .mvp-section, so vertical rhythm is consistent with the rest of
   the page. */
.mvp-section.mvp-newsletter-section {
  background: linear-gradient(180deg, #f5faff 0%, #ffffff 100%);
}
.mvp-newsletter-hero {
  padding: 12px 0;
}
.mvp-newsletter-hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}
.mvp-newsletter-hero-copy { max-width: 480px; }
.mvp-newsletter-hero-eyebrow {
  display: inline-block;
  margin: 0 0 12px;
  padding: 4px 12px;
  background: rgba(52, 199, 89, 0.12);
  color: #1d8a4a;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.mvp-newsletter-hero-title {
  margin: 0 0 12px;
  font-family: var(--mvp-font-serif);
  font-size: 32px;
  line-height: 1.2;
  color: #1d1d1f;
  font-weight: 700;
}
.mvp-newsletter-hero-dek {
  margin: 0 0 18px;
  font-size: 15px;
  line-height: 1.55;
  color: #4a4a4d;
}
.mvp-newsletter-hero-bullets {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mvp-newsletter-hero-bullets li {
  position: relative;
  padding-left: 24px;
  font-size: 14px;
  line-height: 1.55;
  color: #1d1d1f;
}
.mvp-newsletter-hero-bullets li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  background: #34c759;
  color: #fff;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
}
.mvp-newsletter-hero-form .mvp-newsletter {
  /* Override the standalone form's max-width so it uses the column it
     sits in rather than centering at its own 480px. */
  max-width: 100%;
  margin: 0;
}

/* Mobile: stack the columns vertically, hide the bullets to save space
   (the dek covers the same ground), make the form's email + button stack
   full-width instead of side-by-side — bigger tap targets, no
   thumbnail-sized button. */
@media (max-width: 768px) {
  .mvp-newsletter-hero-grid {
    grid-template-columns: 1fr;
    gap: 24px;
    text-align: left;
  }
  .mvp-newsletter-hero-title { font-size: 26px; }
  .mvp-newsletter-hero-bullets { display: none; }
  .mvp-newsletter-hero-form .mvp-newsletter .mvp-newsletter-form { flex-direction: column; }
  .mvp-newsletter-hero-form .mvp-newsletter .mvp-newsletter-form input[type="email"],
  .mvp-newsletter-hero-form .mvp-newsletter .mvp-newsletter-form button { width: 100%; }
}
/* Apply the stacked email+button to ALL placements on mobile, including
   the sidebar form and standalone shortcode renders. */
@media (max-width: 768px) {
  .mvp-newsletter .mvp-newsletter-form { flex-direction: column; }
  .mvp-newsletter .mvp-newsletter-form input[type="email"],
  .mvp-newsletter .mvp-newsletter-form button { width: 100%; }
}

/* ── Mobile-only sticky "Buy" bar ─────────────────────────────────────────
   Fixed at the bottom of the viewport on phones so the affiliate CTA is
   always one tap away. Renders only when the theme found an affiliate link
   in the post content (single.php gates on mvp_affiliate_extract_affiliate_link).
   Hidden entirely on tablet+ — desktop readers can reach the in-content
   buttons just fine. Adds bottom padding to the article so the bar doesn't
   cover the last paragraph. */
.mvp-mobile-buy-bar { display: none; }
@media (max-width: 768px) {
  .mvp-mobile-buy-bar {
    display: block;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    background: rgba(255,255,255,0.97);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-top: 1px solid rgba(0,0,0,0.08);
    box-shadow: 0 -8px 24px rgba(0,0,0,0.06);
    z-index: 50;
  }
  .mvp-mobile-buy-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 48px;
    padding: 12px 16px;
    background: #ff9500;
    color: #fff;
    text-decoration: none;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.01em;
    transition: background 0.15s ease;
  }
  .mvp-mobile-buy-btn:active { background: #e0801f; }
  /* Don't let the sticky bar hide the last paragraph of the post. */
  .mvp-single-content { padding-bottom: 80px; }
}

/* ── Quick Verdict highlight (first H2 in the post body) ─────────────────
   Most reviews lead with a "Quick Verdict" / "TL;DR" / "The bottom line"
   section. We don't change the markup the AI writes — we just style the
   first H2 in the post body and its immediate next sibling so it reads as
   a featured card. Subtle on desktop, prominent on mobile (where the
   first screen is everything). */
.mvp-single-body > h2:first-of-type {
  position: relative;
  margin-top: 28px;
  margin-bottom: 12px;
  padding: 14px 18px 14px 22px;
  background: linear-gradient(90deg, rgba(0,113,227,0.07) 0%, rgba(0,113,227,0.02) 100%);
  border-left: 4px solid #0071e3;
  border-radius: 0 8px 8px 0;
  font-family: var(--mvp-font-serif);
}
.mvp-single-body > h2:first-of-type + p {
  margin-top: 0;
  padding: 0 22px 16px;
  background: linear-gradient(180deg, rgba(0,113,227,0.02) 0%, transparent 100%);
  font-size: 17px;
  line-height: 1.6;
  color: #1d1d1f;
}
@media (max-width: 768px) {
  .mvp-single-body > h2:first-of-type {
    margin-top: 20px;
    padding: 16px 18px 16px 20px;
    font-size: 22px;
    line-height: 1.25;
    border-left-width: 5px;
  }
  .mvp-single-body > h2:first-of-type + p {
    padding: 0 20px 18px;
    font-size: 16px;
  }
}

/* ── 44px minimum tap targets (Apple HIG + Lighthouse a11y) ──────────────
   Bump the most-tapped interactive elements on mobile to a 44px-min
   target, with extra padding when needed so 12px-line buttons aren't
   thumbnail-sized. Buttons that already exceed 44px aren't affected
   (min-height is a floor, not a ceiling). */
@media (max-width: 768px) {
  .mvp-single-body a[rel*="sponsored"],
  .mvp-single-body .wp-block-button__link,
  .mvp-single-tags .mvp-tag,
  .mvp-single-sidebar a,
  .mvp-newsletter button,
  .mvp-card a,
  .mvp-lead-link,
  .mvp-section-pick a,
  .mvp-ad-slot,
  .mvp-mobile-buy-btn { min-height: 44px; }
  /* Inline-link targets too: a paragraph link should still feel like
     text, just with enough vertical room that a thumb hits the right one.
     padding-block bumps the effective hit box without changing the visual. */
  .mvp-single-body p a:not(.wp-block-button__link) { padding-block: 4px; }
}

/* ── Comparison tables → stacked cards on mobile ─────────────────────────
   The MVP comparison generator emits standard <table> elements ("Product
   X vs Y" rows). On mobile they horizontal-scroll, which most readers
   miss — they think it ends at the right edge of the screen. Transform
   each row into a small card on phones: header becomes the row label,
   each cell becomes a labelled line. Pure CSS — no markup change, works
   on any review's comparison block. */
@media (max-width: 768px) {
  .mvp-single-body table {
    display: block;
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
  }
  .mvp-single-body table thead { display: none; }
  .mvp-single-body table tbody { display: block; }
  .mvp-single-body table tr {
    display: block;
    margin: 0 0 14px;
    padding: 14px 16px;
    background: #fafafc;
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 10px;
  }
  /* First cell of each row acts as the card header — bold, no label
     prefix, slightly larger. Reviewers consistently put the product
     name there. */
  .mvp-single-body table tr td:first-child {
    display: block;
    margin: 0 0 10px;
    padding: 0;
    font-size: 16px;
    font-weight: 700;
    color: #1d1d1f;
    border: 0;
  }
  /* Subsequent cells use the colgroup-less data-label trick — we set
     a data-label attribute via JS below; if it isn't set, the row still
     renders fine, just without the column label. */
  .mvp-single-body table tr td {
    display: block;
    padding: 6px 0;
    border: 0;
    border-top: 1px solid rgba(0,0,0,0.06);
    font-size: 14px;
    line-height: 1.5;
    color: #3a3a3c;
  }
  .mvp-single-body table tr td:nth-child(n+2)::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 2px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #8e8e93;
  }
}

/* ── Auto-generated collapsible TOC for long posts ───────────────────────
   Built by the inline JS at the bottom of main.js — it scans
   .mvp-single-body for H2s, and when there are 4+, prepends a
   collapsible <nav.mvp-toc> with anchor links. On mobile the TOC starts
   collapsed (tap to expand); on desktop it stays expanded by default. */
.mvp-toc {
  margin: 0 0 28px;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 10px;
  background: #fafafc;
  overflow: hidden;
}
.mvp-toc-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 12px 16px;
  background: transparent;
  border: 0;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #1d1d1f;
  cursor: pointer;
  text-align: left;
}
.mvp-toc-toggle::after {
  content: '▼';
  font-size: 10px;
  color: #8e8e93;
  transition: transform 0.15s ease;
}
.mvp-toc.is-collapsed .mvp-toc-toggle::after { transform: rotate(-90deg); }
.mvp-toc-list {
  list-style: none;
  margin: 0;
  padding: 0 16px 14px;
}
.mvp-toc.is-collapsed .mvp-toc-list { display: none; }
.mvp-toc-list li { margin: 0; padding: 0; }
.mvp-toc-list a {
  display: block;
  padding: 8px 0;
  border-top: 1px solid rgba(0,0,0,0.05);
  font-size: 14px;
  line-height: 1.4;
  color: #1d1d1f;
  text-decoration: none;
}
.mvp-toc-list li:first-child a { border-top: 0; }
.mvp-toc-list a:hover { color: var(--mvp-primary); }
@media (max-width: 768px) {
  .mvp-toc-toggle { padding: 14px 16px; min-height: 48px; }
  .mvp-toc-list a { padding: 10px 0; min-height: 44px; line-height: 1.35; }
}

/* ── Mobile polish pass ──────────────────────────────────────────────────
   The desktop theme was inheriting too much vertical/horizontal space
   when viewed on phones — 56px section padding × N sections = brutal on
   a 6" screen, and the lead title at 34px was eating the whole first
   viewport. Plus a handful of small things that matter on iOS Safari
   specifically (text-size-adjust, overflow protection, header spacing,
   safe-area padding for the new sticky Buy bar).

   Three tiers:
     ≤ 900px (small tablets + landscape phones)
     ≤ 640px (most phones)
     ≤ 380px (tiny phones — iPhone SE etc.)

   Read each block top-down — the tightening compounds. */
@media (max-width: 900px) {
  body { overflow-wrap: break-word; word-wrap: break-word; }
  .mvp-section { padding: 36px 0; }
  .mvp-hero { padding: 36px 0 20px; }
  .mvp-section-header { margin-bottom: 18px; }
}
@media (max-width: 640px) {
  body { font-size: 16px; line-height: 1.55; }
  /* Single-post: tighter spacing + smaller dek for the first screen */
  .mvp-single-header { margin-bottom: 16px; }
  .mvp-single-title { font-size: clamp(24px, 7.5vw, 32px); margin: 6px 0 10px; }
  .mvp-single-dek { font-size: 16px; line-height: 1.45; margin: 0 0 14px; }
  .mvp-single-meta { font-size: 13px; }
  .mvp-single-content { padding-top: 4px; }
  /* Lead hero on the homepage — was 34px (still big), now scales */
  .mvp-lead-title { font-size: clamp(22px, 7vw, 30px); }
  .mvp-lead-dek { font-size: 15px; line-height: 1.5; }
  .mvp-lead-image { border-radius: 8px; }
  /* Section spacing — tighter to make scrolling feel snappier */
  .mvp-section { padding: 28px 0; }
  /* Section-header (big bordered titles like "Editor's Picks") get a
     smaller bottom border so they don't crowd the cards underneath */
  .mvp-section-header { margin-bottom: 14px; padding-bottom: 8px; }
  .mvp-section-header h2 { font-size: 22px; line-height: 1.2; }
  /* Newsletter hero on mobile — make sure the section padding is its
     own rule so the gradient band still reads as designed */
  .mvp-section.mvp-newsletter-section { padding: 24px 0; }
  /* 3-up ad strip — vertical stack with smaller labels */
  .mvp-ad-strip-label { font-size: 11px; }
  /* Generic body cards: bump font + tighten padding */
  .mvp-card .mvp-card-title { font-size: 17px; line-height: 1.3; }
  .mvp-card .mvp-card-dek { font-size: 14px; line-height: 1.45; }
  /* Footer rhythm */
  .mvp-footer { padding: 32px 0; }
}
@media (max-width: 380px) {
  /* Tiny screens — drop a few more pixels everywhere */
  .mvp-container { padding: 0 14px; }
  .mvp-single-title { font-size: 22px; }
  .mvp-lead-title { font-size: 20px; }
  .mvp-section { padding: 22px 0; }
}

/* iOS Safari: prevent rubber-banding from revealing the sticky Buy bar's
   background, and respect bottom safe-area inset on devices with a home
   indicator (iPhone X+). We already set safe-area-inset padding on the
   sticky bar itself; this rule just makes sure the article gets enough
   bottom space when the bar's rendered. */
@supports (padding: max(0px)) {
  @media (max-width: 768px) {
    .mvp-single-content { padding-bottom: max(80px, calc(64px + env(safe-area-inset-bottom))); }
  }
}