/* TheTechVector (India) site-wide article redesign - theme-level (mu-plugin), IN027.
   Replaces the per-article <style> block from write-article.md STEP 4.6b. Single
   source of truth: edit this file, not individual posts.
   Ported from the UK sibling (thetechvector.com). UK ran tagDiv/Newspaper; this runs
   Blocksy, so the content wrapper is .entry-content (not .tdb_single_content) and the
   post title is h1.page-title. Blocksy/newer-WP does NOT wrap group-block children in
   .wp-block-group__inner-container, so structural selectors target direct children and
   also tolerate the inner-container form for safety.
   Accent: indigo #4F46E5 (distinct from the site's old #0066cc chrome blue). */

:root {
  --ttv-accent: #4F46E5;
  --ttv-accent-hover: #4338CA;
  --ttv-ink: #141826;
  --ttv-line: #e2e5ec;
  --ttv-good: #16A34A;
  --ttv-bad: #DC2626;
  --ttv-surface: #F5F6FA;
  --ttv-muted: #6b7280;
  --ttv-tag-bg: #EEF0FF;

  /* Value Score bands (IN029 addendum) - distinct from --ttv-accent so the
     quality signal (band colour) never gets confused with the brand/CTA colour. */
  --band-excellent: #16A34A;
  --band-strong: #0D9488;
  --band-good: #0284C7;
  --band-fair: #D97706;
}

/* ---------- Typography ---------- */
.entry-title, h1.page-title {
  font-family: 'Archivo', sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em !important;
}
.entry-content .wp-block-heading,
.entry-content h2, .entry-content h3,
article h2, article h3 {
  font-family: 'Archivo', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
}
html { scroll-behavior: smooth; }

/* ---------- Affiliate CTA buttons ----------
   .affiliate-cta (Amazon) and .secondary-cta (extra retailer, same product)
   MUST look identical. High-specificity selector + border/gradient resets so
   Blocksy's .wp-element-button / ghost / .is-style-outline rules can't bleed in. */
.affiliate-cta .wp-block-button__link,
.affiliate-cta .wp-element-button,
.affiliate-cta .wp-element-button.wp-element-button.wp-element-button[href] {
  background-color: var(--ttv-accent) !important;
  background-image: none !important;
  color: #ffffff !important;
  border: 0 !important;
  border-radius: 10px !important;
  padding: 14px 26px !important;
  font-weight: 700 !important;
  font-feature-settings: "tnum" 1 !important;
  box-shadow: 0 6px 20px -6px rgba(79, 70, 229, 0.35) !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease !important;
}
.affiliate-cta .wp-block-button__link:hover,
.affiliate-cta .wp-element-button:hover {
  background-color: var(--ttv-accent-hover) !important;
  color: #ffffff !important;
  transform: translateY(-2px);
  box-shadow: 0 10px 26px -6px rgba(79, 70, 229, 0.45) !important;
}
@media (max-width: 600px) {
  .affiliate-cta .wp-block-button,
  .affiliate-cta {
    width: 100% !important;
  }
  .affiliate-cta .wp-block-button__link,
  .affiliate-cta .wp-element-button {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
  }
}

/* Secondary retailer CTA (.secondary-cta) - an ADDITIONAL buy link for the same
   product (Amazon primary + e.g. Tata CLiQ / Lenovo Store). Renders IDENTICALLY
   to .affiliate-cta - one real solid button per retailer, not a button plus an
   easy-to-miss outline/text link. Same convention as the UK sibling site. The
   sticky "top pick" bar keys off .affiliate-cta only, so .secondary-cta never
   becomes the bar link. Not used inside .final-cta-dark (that block stays
   Amazon-only). */
.secondary-cta .wp-block-button__link,
.secondary-cta .wp-element-button,
.secondary-cta .wp-element-button.wp-element-button.wp-element-button[href] {
  background-color: var(--ttv-accent) !important;
  background-image: none !important;
  color: #ffffff !important;
  border: 0 !important;
  border-radius: 10px !important;
  padding: 14px 26px !important;
  font-weight: 700 !important;
  font-feature-settings: "tnum" 1 !important;
  box-shadow: 0 6px 20px -6px rgba(79, 70, 229, 0.35) !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease !important;
}
.secondary-cta .wp-block-button__link:hover,
.secondary-cta .wp-element-button:hover {
  background-color: var(--ttv-accent-hover) !important;
  color: #ffffff !important;
  transform: translateY(-2px);
  box-shadow: 0 10px 26px -6px rgba(79, 70, 229, 0.45) !important;
}
/* Third retailer CTA (.flipkart-cta) - same convention as .secondary-cta: an
   ADDITIONAL buy link for the same product (Amazon primary + Tata CLiQ/Lenovo
   secondary + Flipkart tertiary, added 2026-09-21 for products/brands that are
   Flipkart-exclusive or cheaper there). Renders IDENTICALLY to the other two -
   never used inside .final-cta-dark (stays Amazon-only). */
.flipkart-cta .wp-block-button__link,
.flipkart-cta .wp-element-button,
.flipkart-cta .wp-element-button.wp-element-button.wp-element-button[href] {
  background-color: var(--ttv-accent) !important;
  background-image: none !important;
  color: #ffffff !important;
  border: 0 !important;
  border-radius: 10px !important;
  padding: 14px 26px !important;
  font-weight: 700 !important;
  font-feature-settings: "tnum" 1 !important;
  box-shadow: 0 6px 20px -6px rgba(79, 70, 229, 0.35) !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease !important;
}
.flipkart-cta .wp-block-button__link:hover,
.flipkart-cta .wp-element-button:hover {
  background-color: var(--ttv-accent-hover) !important;
  color: #ffffff !important;
  transform: translateY(-2px);
  box-shadow: 0 10px 26px -6px rgba(79, 70, 229, 0.45) !important;
}
@media (max-width: 600px) {
  .flipkart-cta .wp-block-button,
  .flipkart-cta {
    width: 100% !important;
  }
  .flipkart-cta .wp-block-button__link,
  .flipkart-cta .wp-element-button {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
  }
}
/* Neutralise Blocksy's .is-style-outline (transparent bg + border) if it ever
   lands on one of our CTA buttons. */
.affiliate-cta .wp-block-button__link.is-style-outline,
.affiliate-cta.is-style-outline .wp-block-button__link,
.secondary-cta .wp-block-button__link.is-style-outline,
.secondary-cta.is-style-outline .wp-block-button__link,
.flipkart-cta .wp-block-button__link.is-style-outline,
.flipkart-cta.is-style-outline .wp-block-button__link {
  background-color: var(--ttv-accent) !important;
  color: #ffffff !important;
  border-color: var(--ttv-accent) !important;
}
/* When a product's button row holds more than one CTA (Amazon + secondary),
   stack them full-width so each reads as its own button rather than two
   half-width buttons crammed side by side. */
.provider-review .wp-block-buttons,
.wp-block-group.verdict-card .wp-block-buttons {
  flex-direction: column !important;
  gap: 8px !important;
  align-items: stretch !important;
}
.provider-review .wp-block-buttons > .wp-block-button,
.wp-block-group.verdict-card .wp-block-buttons > .wp-block-button,
.provider-review .wp-block-buttons .wp-element-button,
.wp-block-group.verdict-card .wp-block-buttons .wp-element-button {
  display: block !important;
  width: 100% !important;
  text-align: center !important;
}
/* Desktop/tablet: don't stretch each CTA to the full card width - size it to
   its own label so two stacked buttons (Amazon + secondary retailer) read as
   normal-sized buttons, not two oversized bars. Mobile keeps the full-width
   tap target from the rule above (a deliberate, separate pattern, untouched
   here - the max-width:600px rules further down still win under 600px). */
@media (min-width: 601px) {
  .provider-review .wp-block-buttons,
  .wp-block-group.verdict-card .wp-block-buttons {
    align-items: flex-start !important;
  }
  .provider-review .wp-block-buttons > .wp-block-button,
  .wp-block-group.verdict-card .wp-block-buttons > .wp-block-button,
  .provider-review .wp-block-buttons .wp-element-button,
  .wp-block-group.verdict-card .wp-block-buttons .wp-element-button {
    display: inline-flex !important;
    width: auto !important;
  }
}
@media (max-width: 600px) {
  .secondary-cta .wp-block-button,
  .secondary-cta {
    width: 100% !important;
  }
  .secondary-cta .wp-block-button__link,
  .secondary-cta .wp-element-button {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
  }
}

/* ---------- Trust strip (after the intro) ---------- */
.entry-content p.trust-strip {
  margin: 4px auto 22px !important;
  font-size: 13px !important;
  color: #6b7280 !important;
  letter-spacing: 0.01em !important;
}

/* ---------- On-page TOC (JS-built, inserted after the trust strip) ---------- */
#ttv-toc {
  margin: 0 auto 28px !important;
  background: #f5f6fa;
  border: 1px solid var(--ttv-line);
  border-radius: 12px;
  padding: 16px 20px;
}
#ttv-toc .ttv-toc-h {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: #4b5163; margin-bottom: 10px;
}
#ttv-toc ul { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 28px; }
#ttv-toc li { margin: 0 0 7px; break-inside: avoid; }
#ttv-toc a {
  color: #2b2f3a !important; text-decoration: none !important; font-weight: 600 !important;
  font-size: 13.5px; line-height: 1.4; display: inline-block;
}
#ttv-toc a:hover, #ttv-toc a:focus-visible { color: var(--ttv-accent) !important; text-decoration: underline !important; }
@media (max-width: 560px) { #ttv-toc ul { columns: 1; } }
.entry-content h2 { scroll-margin-top: 16px; }

/* ---------- Affiliate disclosure: neutral strip, not an amber warning ---------- */
.wp-block-group.affiliate-disclosure.affiliate-disclosure {
  background: #f5f6fa !important;
  background-color: #f5f6fa !important;
  border: 1px solid #dee2ea !important;
  border-left: 1px solid #dee2ea !important;
  border-radius: 10px !important;
  padding: 14px 18px !important;
  margin-bottom: 28px !important;
}
.wp-block-group.affiliate-disclosure.affiliate-disclosure p {
  font-size: 13.5px !important;
  color: #4b5563 !important;
  margin: 0 !important;
}

/* ---------- Quick verdict cards ---------- */
.wp-block-columns:has(.verdict-card) { align-items: stretch !important; }
.wp-block-columns:has(.verdict-card) .wp-block-column { display: flex !important; }
.wp-block-column .wp-block-group.verdict-card.verdict-card {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
}
.wp-block-group.verdict-card.verdict-card {
  position: relative !important;
  background: #ffffff !important;
  border: 1px solid var(--ttv-line) !important;
  border-radius: 14px !important;
  box-sizing: border-box !important;
  padding: 22px 22px 20px !important;
  box-shadow: 0 1px 2px rgba(20, 24, 38, 0.06) !important;
}
.wp-block-group.verdict-card.verdict-card::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important; left: 0 !important; right: 0 !important;
  height: 3px !important;
  background: var(--ttv-accent) !important;
  border-radius: 14px 14px 0 0 !important;
}
/* first paragraph = "Best for X: ..." - style the lead-in label */
.wp-block-group.verdict-card.verdict-card > p:first-of-type,
.wp-block-group.verdict-card.verdict-card > .wp-block-group__inner-container > p:first-of-type {
  margin: 0 0 6px 0 !important;
  line-height: 1.55 !important;
}
.wp-block-group.verdict-card.verdict-card > p:first-of-type strong,
.wp-block-group.verdict-card.verdict-card > .wp-block-group__inner-container > p:first-of-type strong {
  display: block !important;
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  color: var(--ttv-accent) !important;
  margin-bottom: 4px !important;
}
/* if a CTA is ever placed inside a verdict card (redesign Phase 2), pin it to the bottom */
.wp-block-column .wp-block-group.verdict-card.verdict-card > .wp-block-group__inner-container {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
  min-height: 0 !important;
}
.wp-block-group.verdict-card.verdict-card .wp-block-buttons {
  margin-top: auto !important;
  padding-top: 14px !important;
}

/* ---------- Provider / product review sections ---------- */
body { counter-reset: ttv-review; }
.wp-block-group.provider-review.provider-review {
  counter-increment: ttv-review;
  position: relative !important;
  background: #ffffff !important;
  border: 1px solid var(--ttv-line) !important;
  border-left: 1px solid var(--ttv-line) !important;
  border-radius: 16px !important;
  box-shadow: 0 1px 3px rgba(20, 24, 38, 0.06) !important;
  padding: 30px 32px 32px !important;
  margin: 0 auto 28px !important; /* auto L/R keeps Blocksy's constrained-column centring */
}
.wp-block-group.provider-review.provider-review::before {
  content: "PICK " counter(ttv-review, decimal-leading-zero) !important;
  display: block !important;
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  color: #8b90a3 !important;
  margin-bottom: 10px !important;
}
.wp-block-group.provider-review.provider-review .wp-block-heading { margin-top: 0 !important; }
/* keep the card's own content flush to its padding box, not re-constrained by Blocksy */
.wp-block-group.provider-review.provider-review > * {
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
@media (max-width: 600px) {
  .wp-block-group.provider-review.provider-review { padding: 22px 18px 24px !important; }
}

/* ---------- Pros / cons boxes ---------- */
.wp-block-group.pros-box, .wp-block-group.cons-box {
  border-radius: 12px !important;
  padding: 20px 22px !important;
}
.wp-block-group.pros-box { background: #f0fdf4 !important; border-left: 4px solid #22c55e !important; }
.wp-block-group.cons-box { background: #fff1f2 !important; border-left: 4px solid #ef4444 !important; }
.pros-box p:first-of-type, .cons-box p:first-of-type { margin: 0 0 12px 0 !important; }
.pros-box p:first-of-type strong, .cons-box p:first-of-type strong {
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
}
.pros-box p:first-of-type strong { color: #15803D !important; }
.cons-box p:first-of-type strong { color: #B91C1C !important; }
.pros-box ul, .cons-box ul { list-style: none !important; margin: 0 !important; padding: 0 !important; }
.pros-box li, .cons-box li {
  position: relative !important;
  padding-left: 24px !important;
  margin: 0 0 10px 0 !important;
  line-height: 1.45 !important;
}
.pros-box li:last-child, .cons-box li:last-child { margin-bottom: 0 !important; }
.pros-box li::before {
  content: "\2713" !important;
  position: absolute !important; left: 0 !important; top: 0 !important;
  color: var(--ttv-good) !important; font-weight: 800 !important;
}
.cons-box li::before {
  content: "\2715" !important;
  position: absolute !important; left: 0 !important; top: 0 !important;
  color: var(--ttv-bad) !important; font-weight: 800 !important;
}

/* ---------- Tables ---------- */
figure.wp-block-table.wp-block-table {
  border: 1px solid var(--ttv-line) !important;
  border-radius: 12px !important;
  box-shadow: 0 1px 2px rgba(20, 24, 38, 0.05) !important;
  /* no overflow:hidden - it silently breaks position:sticky on descendants */
}
figure.wp-block-table.wp-block-table table {
  border-collapse: collapse !important;
  width: 100% !important;
  table-layout: auto !important; /* neutralises has-fixed-layout on the 10 legacy posts */
}
figure.wp-block-table.wp-block-table thead th:first-child { border-top-left-radius: 11px !important; }
figure.wp-block-table.wp-block-table thead th:last-child { border-top-right-radius: 11px !important; }
figure.wp-block-table.wp-block-table tbody tr:last-child td:first-child { border-bottom-left-radius: 11px !important; }
figure.wp-block-table.wp-block-table tbody tr:last-child td:last-child { border-bottom-right-radius: 11px !important; }
figure.wp-block-table.wp-block-table th {
  background: #F5F6FA !important;
  color: var(--ttv-ink) !important;
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  padding: 14px 16px !important;
  border-bottom: 2px solid var(--ttv-line) !important;
  text-align: left !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 3 !important;
}
figure.wp-block-table.wp-block-table td {
  padding: 13px 16px !important;
  border-bottom: 1px solid #eef0f5 !important;
  font-size: 15px !important;
  color: #2b2f3a !important;
  vertical-align: top !important;
}
figure.wp-block-table.wp-block-table tr:last-child td { border-bottom: none !important; }
figure.wp-block-table.wp-block-table tbody tr:nth-child(even) td { background: #FAFBFD !important; }
figure.wp-block-table.wp-block-table tr.is-pick td {
  background: #EEF0FF !important;
  box-shadow: inset 3px 0 0 var(--ttv-accent) !important;
}
.entry-content .price {
  display: inline-block;
  background: #EEF0FF;
  color: var(--ttv-accent);
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 6px;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 640px) {
  figure.wp-block-table.wp-block-table {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  figure.wp-block-table.wp-block-table table {
    width: auto !important;
    min-width: 560px !important;
  }
}

/* ---------- Final CTA block (India writer emits .final-cta-dark) ---------- */
.wp-block-group.final-cta-dark {
  background: linear-gradient(135deg, #1e3a5f 0%, #24304f 100%) !important;
  background-color: #1e3a5f !important;
  padding: 36px 32px !important;
  border-radius: 16px !important;
}
.wp-block-group.final-cta-dark h1,
.wp-block-group.final-cta-dark h2,
.wp-block-group.final-cta-dark h3,
.wp-block-group.final-cta-dark p { color: #e2e8f0 !important; }
.wp-block-group.final-cta-dark .wp-block-buttons { gap: 12px !important; }

/* ---------- Body / internal links ---------- */
.entry-content a:not(.wp-element-button):not(.wp-block-button__link):not(.cmp-cta):not(.ttv-sc-btn):not([style*="background-color"]) {
  color: var(--ttv-accent) !important;
  font-weight: 600 !important;
  text-decoration: underline !important;
  text-decoration-color: rgba(79, 70, 229, 0.35) !important;
  text-underline-offset: 3px !important;
  transition: text-decoration-color 0.15s ease, color 0.15s ease !important;
}
.entry-content a:not(.wp-element-button):not(.wp-block-button__link):not(.cmp-cta):not(.ttv-sc-btn):not([style*="background-color"]):hover {
  color: var(--ttv-accent-hover) !important;
  text-decoration-color: var(--ttv-accent-hover) !important;
}
/* leftover inline link colours from the writer (#0066cc) */
a[style*="color:#0066cc"], a[style*="color: #0066cc"] { color: var(--ttv-accent) !important; }

/* ---------- FAQ accordion (wp:details, collapsed by default) ---------- */
.entry-content details.wp-block-details {
  border: 1px solid var(--ttv-line) !important;
  border-radius: 12px !important;
  padding: 16px 20px !important;
  margin: 0 auto 12px !important; /* auto L/R keeps Blocksy's constrained-column centring */
  background: #ffffff !important;
}
/* Blocksy also constrains flow-container children (max-width + margin-inline:auto);
   inside the card that reads as the answer sitting narrower/off from the summary.
   Force every direct child to fill the card's padding box. */
.entry-content details.wp-block-details > * {
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.entry-content details.wp-block-details summary {
  cursor: pointer !important;
  list-style: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  font-family: 'Archivo', sans-serif !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  color: var(--ttv-ink) !important;
  padding: 2px 0 !important;
}
.entry-content details.wp-block-details summary::-webkit-details-marker { display: none !important; }
.entry-content details.wp-block-details summary::after {
  content: "+" !important;
  flex-shrink: 0 !important;
  font-size: 22px !important;
  line-height: 1 !important;
  font-weight: 400 !important;
  color: var(--ttv-accent) !important;
}
.entry-content details.wp-block-details[open] summary::after { content: "\2212" !important; }
.entry-content details.wp-block-details summary:hover { color: var(--ttv-accent) !important; }
.entry-content details.wp-block-details p {
  margin: 12px 0 0 0 !important;
  padding-top: 12px !important;
  border-top: 1px solid #eef0f5 !important;
  color: #2b2f3a !important;
  line-height: 1.6 !important;
}

/* ---------- "Continue reading" related cards (redesign Phase 3 / JS-built) ---------- */
.ttv-related-wrap { margin: 36px auto; }
.ttv-related-wrap h2 { font-size: 20px; margin: 0 0 16px; }
.ttv-related-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.ttv-related-card {
  display: block; border: 1px solid var(--ttv-line); border-radius: 12px; padding: 16px;
  text-decoration: none !important; background: #ffffff;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.ttv-related-card:hover, .ttv-related-card:focus-visible { border-color: var(--ttv-accent); transform: translateY(-2px); }
.ttv-related-card .ttv-rc-tag {
  display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--ttv-accent) !important; background: #EEF0FF; padding: 2px 8px; border-radius: 5px; margin-bottom: 10px;
}
.ttv-related-card .ttv-rc-title { display: block; font-size: 14.5px; font-weight: 700; color: var(--ttv-ink) !important; margin: 0 0 6px; line-height: 1.35; }
.ttv-related-card .ttv-rc-desc { display: block; font-size: 12.5px; color: #6b7280; margin: 0; }

/* ---------- Reading progress bar ---------- */
#ttv-progress {
  position: fixed !important; top: 0 !important; left: 0 !important; height: 3px; width: 0%;
  background: var(--ttv-accent); z-index: 999999 !important; transition: width 0.1s linear; margin: 0 !important;
}

/* ---------- Sticky mobile CTA bar ---------- */
#ttv-sticky-cta {
  position: fixed !important; left: 0 !important; right: 0 !important; bottom: 0 !important; z-index: 999999 !important;
  background: #ffffff; border-top: 1px solid var(--ttv-line);
  padding: 10px 16px; display: none; align-items: center; justify-content: space-between;
  gap: 12px; box-shadow: 0 -8px 24px -8px rgba(20,24,38,0.18);
  transform: translateY(100%); transition: transform 0.25s ease;
  margin: 0 !important; width: auto !important;
}
#ttv-sticky-cta.show { transform: translateY(0); }
#ttv-sticky-cta .ttv-sc-label { font-size: 10px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: #8b90a3; }
#ttv-sticky-cta .ttv-sc-text { font-size: 13.5px; font-weight: 700; color: var(--ttv-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 62vw; display: block; }
#ttv-sticky-cta .ttv-sc-btn {
  background: var(--ttv-accent) !important; color: #ffffff !important; border: none; padding: 10px 16px;
  border-radius: 8px !important; font-weight: 700 !important; font-size: 13px; white-space: nowrap;
  text-decoration: none !important; flex-shrink: 0;
}
@media (max-width: 782px) {
  #ttv-sticky-cta.ttv-ready { display: flex; }
}

/* ---------- Jump-to-pick nav + back links (JS-built) ---------- */
#ttv-jump-nav {
  display: flex; flex-wrap: wrap; gap: 8px; padding: 14px; background: #f5f6fa;
  border: 1px solid var(--ttv-line); border-radius: 12px; margin: 0 auto 28px; scroll-margin-top: 20px;
}
#ttv-jump-nav .ttv-jn-label { font-size: 12.5px; color: #6b7280; align-self: center; margin-right: 2px; font-weight: 600; }
#ttv-jump-nav a {
  background: #ffffff; border: 1px solid var(--ttv-line); color: #2b2f3a !important;
  padding: 7px 14px; border-radius: 20px; font-size: 13px; font-weight: 600 !important;
  text-decoration: none !important; transition: all 0.15s ease;
}
#ttv-jump-nav a:hover, #ttv-jump-nav a:focus-visible { border-color: var(--ttv-accent); color: var(--ttv-accent) !important; }
.ttv-back-link {
  display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 600 !important;
  color: var(--ttv-accent) !important; text-decoration: none !important; margin-top: 18px; padding-top: 16px;
  border-top: 1px solid #eef0f5; width: 100%;
}
.ttv-back-link:hover { color: var(--ttv-accent-hover) !important; }

/* ---------- Focus visibility ---------- */
.entry-content a:focus-visible,
.entry-content button:focus-visible,
.entry-content summary:focus-visible {
  outline: 3px solid var(--ttv-accent) !important;
  outline-offset: 2px !important;
  border-radius: 4px;
}
.entry-content .wp-element-button:focus-visible,
.entry-content .wp-block-button__link:focus-visible {
  outline: 3px solid var(--ttv-ink) !important;
  outline-offset: 3px !important;
}

/* ---------- Keep the round author avatar ---------- */
.is-style-rounded img { border-radius: 50%; }

/* ==========================================================================
   Value Score (IN029 addendum, 2026-09-14) - retrofit pilot on one post first.
   Ribbon = category pick (verdict cards only, brand-indigo, never a quality
   signal). Score badge = the editorial 0-10 number, framed + banded by
   quality (Excellent/Strong/Good/Fair - see --band-* tokens above), never
   confused with the ribbon's colour. Subfactors = optional supporting
   breakdown on full product-review sections only, deliberately muted so it
   doesn't compete with the headline badge. Informed by how 91mobiles (plain
   X/10), Tom's Guide/TechRadar (star rows), PCMag (star + named badge) and
   RTINGS (hero score + attribute grid) each layer a second signal on top of
   a raw number - see docs/competitor-ux-audit-2026-09-14.md addendum.
   ========================================================================== */

.ribbon {
  position: absolute !important;
  top: 16px !important; left: -6px !important; z-index: 2 !important;
  background: var(--ttv-accent) !important; color: #fff !important;
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-size: 10px !important; font-weight: 700 !important;
  letter-spacing: 0.05em !important; text-transform: uppercase !important; line-height: 1 !important;
  padding: 7px 14px 7px 16px !important;
  clip-path: polygon(0 0, 100% 0, calc(100% - 9px) 50%, 100% 100%, 0 100%) !important;
  box-shadow: 0 4px 10px -4px rgba(79, 70, 229, 0.55) !important;
}
/* only cards that actually carry a ribbon get the extra top padding - every
   untouched verdict card on the other 14 live posts is unaffected until its
   own retrofit. */
.wp-block-group.verdict-card.verdict-card:has(.ribbon) { padding-top: 44px !important; }

.score-wrap, .review-score-row .score-block {
  display: flex !important; align-items: center !important; gap: 10px !important;
  margin: 10px 0 0 !important;
}
.score-badge {
  flex-shrink: 0 !important; width: 52px !important; height: 52px !important; border-radius: 14px !important;
  border: 2px solid var(--band, var(--ttv-accent)) !important;
  background: var(--ttv-surface) !important;
  background: color-mix(in srgb, var(--band, var(--ttv-accent)) 10%, white) !important;
  display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important;
}
.score-block .score-badge { width: 60px !important; height: 60px !important; border-radius: 16px !important; }
.score-badge .sb-num {
  font-family: 'Archivo', sans-serif !important; font-weight: 800 !important; font-size: 18px !important;
  line-height: 1 !important; color: var(--ttv-ink) !important; font-feature-settings: "tnum" 1 !important;
}
.score-block .score-badge .sb-num { font-size: 21px !important; }
.score-badge .sb-of { font-family: 'IBM Plex Sans', sans-serif !important; font-weight: 600 !important; font-size: 8.5px !important; color: var(--ttv-muted) !important; margin-top: 2px !important; }
.sb-label { font-family: 'IBM Plex Sans', sans-serif !important; font-size: 12px !important; font-weight: 700 !important; letter-spacing: 0.03em !important; }
.sb-label small { display: block !important; font-size: 9.5px !important; font-weight: 600 !important; letter-spacing: 0.06em !important; text-transform: uppercase !important; color: #8b90a3 !important; margin-top: 1px !important; }

.subfactors {
  display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 16px !important;
  margin: 14px 0 18px !important; padding: 14px 16px !important;
  background: var(--ttv-surface) !important; border-radius: 10px !important;
}
.sf-label {
  display: block !important; font-family: 'IBM Plex Sans', sans-serif !important; font-size: 10px !important;
  font-weight: 700 !important; letter-spacing: 0.05em !important; text-transform: uppercase !important;
  color: #8b90a3 !important; margin-bottom: 7px !important;
}
.sf-bar { height: 4px !important; border-radius: 3px !important; background: var(--ttv-line) !important; overflow: hidden !important; }
.sf-bar i { display: block !important; height: 100% !important; border-radius: 3px !important; }
@media (max-width: 560px) {
  .subfactors { grid-template-columns: 1fr !important; gap: 10px !important; }
}

/* ==========================================================================
   Hero strip + Quick-Answer card (IN035, ported from UK sibling 2026-09-24).
   Reusable, no per-site ID dependency (unlike UK's tdi_NN selectors, which
   this project doesn't have - Blocksy, not tagDiv). Piloted on 2 posts
   before wider rollout. No photo panel variant shipped yet - no licensed
   product-image source exists for this project (Cuelinks has no per-SKU
   image API; Flipkart's own Affiliate API does but needs a separate,
   not-yet-created Flipkart affiliate account - see tickets.md IN035).
   ========================================================================== */
.ttv-hero-strip.ttv-hero-strip.ttv-hero-strip {
  background: #EEF0FF !important; border-radius: 14px !important;
  padding: 20px 24px 22px !important; margin: 0 auto 28px !important; display: block !important;
  /* max-width + auto L/R match Blocksy's constrained content column - a raw
     wp:html div carries none of core/Blocksy's own .wp-block-group max-width
     + auto-margin treatment, so this component must restate it itself or it
     renders full-width and left-aligned against the narrower centered text
     column. Reuses the theme's own content-size token, not a guessed px value. */
  max-width: var(--wp--style--global--content-size) !important;
  box-sizing: border-box !important;
}
.ttv-hero-breadcrumb {
  font-size: 12px !important; font-weight: 700 !important; letter-spacing: 0.04em !important;
  text-transform: uppercase !important; color: #5b5fc7 !important; margin-bottom: 14px !important;
}
.ttv-hero-breadcrumb a { color: #5b5fc7 !important; text-decoration: none !important; }
.ttv-hero-breadcrumb a:hover { text-decoration: underline !important; }
.ttv-hero-stats.ttv-hero-stats.ttv-hero-stats {
  display: flex !important; align-items: center !important; gap: 14px !important; flex-wrap: wrap !important;
}
.ttv-hero-stat.ttv-hero-stat.ttv-hero-stat { display: flex !important; align-items: center !important; gap: 10px !important; }
.ttv-hero-stat-num {
  font-family: 'Archivo', sans-serif !important; font-size: 26px !important; font-weight: 900 !important;
  color: #4F46E5 !important; white-space: nowrap !important;
}
.ttv-hero-stat-label { font-size: 13px !important; line-height: 1.4 !important; color: #3a3f4d !important; max-width: 220px !important; }
.ttv-hero-stat-divider { width: 1px !important; height: 32px !important; background: #c7cbef !important; flex-shrink: 0 !important; }
@media (max-width: 520px) {
  .ttv-hero-stat-divider { display: none !important; }
  .ttv-hero-stats { gap: 18px 24px !important; }
}

.ttv-quick-answer.ttv-quick-answer.ttv-quick-answer {
  border-radius: 16px !important; background: #141822 !important; padding: 26px 28px !important;
  margin: 0 auto 28px !important; color: #ffffff !important;
  display: flex !important; gap: 26px !important; align-items: stretch !important;
  max-width: var(--wp--style--global--content-size) !important;
  box-sizing: border-box !important;
}
.ttv-qa-main.ttv-qa-main.ttv-qa-main {
  flex-grow: 1 !important; display: flex !important; flex-direction: column !important;
  justify-content: center !important; min-width: 0 !important;
}
.ttv-qa-photo.ttv-qa-photo.ttv-qa-photo {
  width: 180px !important; flex-shrink: 0 !important; background: #1f2333 !important;
  border-radius: 12px !important; padding: 20px !important; display: flex !important;
  flex-direction: column !important; gap: 10px !important; align-items: center !important; text-align: center !important;
}
.ttv-qa-photo img {
  width: 80px !important; height: 80px !important; object-fit: contain !important;
  background: #ffffff !important; border-radius: 10px !important; padding: 8px !important;
}
.ttv-qa-photo-name { font-family: 'Archivo', sans-serif !important; font-size: 15px !important; font-weight: 800 !important; color: #ffffff !important; }
.ttv-qa-photo-price { font-family: 'Archivo', sans-serif !important; font-size: 22px !important; font-weight: 900 !important; color: #ffffff !important; }
.ttv-qa-photo-price span { font-size: 12px !important; font-weight: 600 !important; color: #8388a8 !important; }
@media (max-width: 600px) {
  .ttv-quick-answer.ttv-quick-answer.ttv-quick-answer { flex-direction: column !important; }
  .ttv-qa-photo.ttv-qa-photo.ttv-qa-photo { width: 100% !important; flex-direction: row !important; justify-content: center !important; gap: 16px !important; }
}
.ttv-qa-badges { display: flex !important; align-items: center !important; gap: 8px !important; margin-bottom: 14px !important; flex-wrap: wrap !important; }
.ttv-qa-tag {
  font-family: 'Archivo', sans-serif !important; font-size: 12px !important; font-weight: 800 !important;
  letter-spacing: 0.04em !important; text-transform: uppercase !important;
  color: #141822 !important; background: #ffffff !important; padding: 6px 14px !important; border-radius: 999px !important;
}
.ttv-qa-rating {
  font-family: 'Archivo', sans-serif !important; font-size: 12px !important; font-weight: 800 !important;
  color: #ffffff !important; background: #4F46E5 !important; padding: 6px 14px !important; border-radius: 999px !important;
}
.ttv-qa-text { margin: 0 0 18px !important; font-size: 17px !important; line-height: 1.55 !important; color: #ffffff !important; }
/* CTA-stretch fix baked into the class rule from day one (UK learned this the
   hard way - a flex parent's default align-items:stretch silently stretches
   an inline-block button full-width; fixing only via inline style meant the
   bug came back on 09-24 whenever the inline style was omitted/miswritten).
   The inline style on the anchor stays as a defensive backstop, not the fix. */
.ttv-quick-answer .ttv-qa-cta.ttv-qa-cta.ttv-qa-cta {
  display: inline-block !important;
  align-self: flex-start !important;
  width: fit-content !important;
  background: #4F46E5 !important; color: #ffffff !important; font-weight: 700 !important;
  font-size: 14px !important; padding: 12px 24px !important; border-radius: 8px !important;
  text-decoration: none !important;
}
/* The .price pill (light lavender bg, indigo text) is styled for a white body
   background - reused unmodified inside the dark Quick-Answer card it renders
   as a stray pale rectangle. Inside this card only, render it as plain bold
   white text instead, matching the UK reference card's price treatment. */
.ttv-quick-answer .ttv-qa-text .price {
  background: transparent !important;
  color: #ffffff !important;
  padding: 0 !important;
  font-weight: 700 !important;
}

/* ==========================================================================
   Article title banner - flat dark navy instead of a per-article photo
   (2026-09-25, user request). Blocksy's own "hero-section type-2" header
   normally shows the featured image with a dark gradient overlay behind the
   title/byline; replaced with a solid --ttv-ink fill so the banner ties
   directly to the same dark navy already used by the Quick-Answer card,
   comparison-table header and final-cta-dark block instead of depending on
   a fresh photo (and its realism risk) on every article. The featured image
   itself is unaffected - it still appears as its own large block further
   down the page, right after the affiliate disclosure.
   ========================================================================== */
.hero-section.hero-section {
  background-color: #141826 !important;
  background-image: none !important;
}
.hero-section .ct-media-container,
.hero-section > figure {
  display: none !important;
}