/**
 * VettedLiving Article Styles
 *
 * Deployed with public-site at:
 *   /merchant-assets/vl-article-styles.css  (e.g. https://vettedliving.com/merchant-assets/vl-article-styles.css)
 * Ghost can load it via Code injection → Site header:
 *   <link rel="stylesheet" href="https://YOUR_DOMAIN/merchant-assets/vl-article-styles.css">
 * Or paste the full file inside Ghost Code Injection as one HTML style block if you prefer no extra request.
 *
 * All selectors use the .vl- prefix to avoid conflicts with your Ghost theme.
 * Variables are declared on :root so the theme can override individual values.
 *
 * Version: 2.0.4  (roundup comp table: min-width + scroll on narrow viewports)
 */

:root {
  --vl-teal:        #1a7a6d;
  --vl-teal-light:  #e8f4f1;
  --vl-teal-dark:   #145f55;
  --vl-orange:      #e8912d;
  --vl-black:       #1a1a1a;
  --vl-dark-gray:   #333333;
  --vl-mid-gray:    #666666;
  --vl-light-gray:  #999999;
  --vl-border-gray: #e5e5e5;
  --vl-warm-bg:     #f7f5f0;
  --vl-card-bg:     #ffffff;

  --vl-font-heading: 'system-ui', -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --vl-font-body:    var(--vl-font-heading);
}

/* ============================================================
   Ring score widget
   The structure is set inline by renderRingScore() (positioning, sizing,
   colour) so it works even when Ghost strips external CSS. These rules
   provide font fallback + namespace consistency.
   ============================================================ */

.vl-ring {
  font-family: var(--vl-font-heading);
}

.vl-ring__label {
  font-family: var(--vl-font-heading);
  font-weight: 800;
  line-height: 1;
}

/* ============================================================
   Rating hero block  (brand + product articles)
   ============================================================ */

.vl-rating-hero {
  display: flex;
  align-items: center;
  gap: 20px;
  background: var(--vl-teal-light);
  border: 1px solid var(--vl-teal);
  border-radius: 10px;
  padding: 18px 22px;
  margin: 20px 0;
}

.vl-rating-hero__ring {
  flex-shrink: 0;
}

.vl-rating-hero__meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.vl-rating-hero__label {
  font-family: var(--vl-font-heading);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--vl-teal-dark);
}

.vl-rating-hero__cats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
}

.vl-rating-hero__cat {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--vl-font-heading);
  font-size: 13px;
}

.vl-rating-hero__cat-label {
  color: var(--vl-mid-gray);
}

.vl-rating-hero__cat-score {
  font-weight: 700;
}

.vl-rating-hero__verified {
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: var(--vl-font-heading);
  font-size: 12px;
  font-weight: 600;
  color: var(--vl-teal);
}

/* ============================================================
   Badge pill
   ============================================================ */

.vl-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 4px;
  background: var(--vl-teal-light);
  color: var(--vl-teal);
  border: 1px solid rgba(26,122,109,0.25);
  font-family: var(--vl-font-heading);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.4;
}

/* ============================================================
   CTA button  (orange, used in product cards)
   ============================================================ */

.vl-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  background: var(--vl-orange);
  color: #fff !important;
  border-radius: 6px;
  text-decoration: none !important;
  font-family: var(--vl-font-heading);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  transition: background 0.2s;
}

.vl-cta:hover {
  background: #d17e22;
}

/* ---- roundup card: optional coupon / offer (native <details>, no JS) ---- */

.vl-card__coupon {
  width: 100%;
  max-width: 220px;
  margin-top: 4px;
  text-align: right;
}

.vl-card__coupon-summary {
  display: inline-block;
  list-style: none;
  cursor: pointer;
  font-family: var(--vl-font-heading);
  font-size: 12px;
  font-weight: 600;
  color: var(--vl-teal);
  text-decoration: underline;
  text-underline-offset: 2px;
  user-select: none;
}

.vl-card__coupon-summary::-webkit-details-marker {
  display: none;
}

.vl-card__coupon[open] .vl-card__coupon-summary {
  color: #145a50;
}

.vl-card__coupon-body {
  margin-top: 8px;
  padding: 12px 14px;
  border-radius: 8px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  border: 1px solid #e2e8f0;
  box-shadow: inset 3px 0 0 0 var(--vl-teal), 0 1px 2px rgba(15, 23, 42, 0.04);
  text-align: left;
}

.vl-card__coupon-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.vl-card__coupon-headline {
  margin: 0;
  font-family: var(--vl-font-body);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--vl-black);
}

.vl-card__coupon-code-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

/* Legacy markup (older published posts): code without label row */
.vl-card__coupon-code-wrap {
  margin: 0;
}

.vl-card__coupon-code-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #64748b;
}

.vl-card__coupon-code {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 6px;
  background: #fff;
  border: 1px solid rgba(26, 122, 109, 0.35);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--vl-black);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset;
}

.vl-card__coupon-hint {
  margin: 0;
  padding-top: 2px;
  border-top: 1px solid #e8eef4;
  font-size: 11px;
  line-height: 1.45;
  color: #64748b;
}

.vl-card__coupon-fetch-error {
  margin: 0;
  font-size: 12px;
  color: #b45309;
}

.vl-card__coupon-empty {
  margin: 0;
  font-size: 13px;
  color: #475569;
}

/* ============================================================
   At-a-Glance card  (brand + product articles)
   Two-column pros/cons layout consistent with roundup product cards.
   ============================================================ */

.at-a-glance {
  border: 1px solid var(--vl-teal);
  border-left: 4px solid var(--vl-teal);
  background: var(--vl-teal-light);
  border-radius: 8px;
  padding: 20px 24px 16px;
  margin: 28px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0 28px;
}

.at-a-glance h3 {
  width: 100%;
  font-family: var(--vl-font-heading);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--vl-teal-dark);
  margin: 0 0 14px;
}

/* Side-by-side columns */
.at-a-glance ul {
  flex: 1;
  min-width: 160px;
  list-style: none;
  padding: 0;
  margin: 0 0 14px;
}

/* Column headings injected via pseudo-element */
.at-a-glance ul.pros::before {
  content: "What We Liked";
  display: block;
  font-family: var(--vl-font-heading);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--vl-teal);
  margin-bottom: 8px;
}

.at-a-glance ul.cons::before {
  content: "What Could Be Better";
  display: block;
  font-family: var(--vl-font-heading);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--vl-mid-gray);
  margin-bottom: 8px;
}

.at-a-glance ul li {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 4px 0;
  font-family: var(--vl-font-body);
  font-size: 14px;
  line-height: 1.65;
  color: var(--vl-dark-gray);
  border-bottom: none;
}

.at-a-glance ul.pros li::before {
  content: "✓";
  font-family: var(--vl-font-heading);
  font-weight: 700;
  color: var(--vl-teal);
  min-width: 14px;
  flex-shrink: 0;
}

.at-a-glance ul.cons li {
  color: var(--vl-mid-gray);
}

.at-a-glance ul.cons li::before {
  content: "✗";
  font-family: var(--vl-font-heading);
  font-weight: 700;
  color: #cc4444;
  min-width: 14px;
  flex-shrink: 0;
}

/* Price line spans full width at the bottom */
.at-a-glance .price {
  width: 100%;
  font-family: var(--vl-font-heading);
  font-size: 13px;
  color: var(--vl-mid-gray);
  margin: 4px 0 0;
  border-top: 1px solid rgba(26,122,109,0.18);
  padding-top: 12px;
}

.at-a-glance .price strong {
  color: var(--vl-black);
  font-weight: 700;
}

/* ============================================================
   Spec / comparison table  (brand + product articles)
   Rows = attributes; columns = product variants or before/after.
   Different from the roundup ranked table (.vl-comp-table).
   ============================================================ */

.comparison-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--vl-font-heading);
  font-size: 14px;
  margin: 24px 0;
}

.comparison-table thead th {
  padding: 10px 14px;
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--vl-mid-gray);
  border-bottom: 2px solid var(--vl-black);
}

.comparison-table tbody td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--vl-border-gray);
  color: var(--vl-dark-gray);
  vertical-align: top;
  line-height: 1.5;
}

.comparison-table tbody tr:last-child td {
  border-bottom: none;
}

/* First column = attribute label */
.comparison-table tbody td:first-child {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--vl-light-gray);
  white-space: nowrap;
}

/* Value column(s) */
.comparison-table tbody td:nth-child(2) {
  font-weight: 600;
  color: var(--vl-black);
}

/* Wrap in warm background to visually separate from body text */
.comparison-table-wrap {
  background: var(--vl-warm-bg);
  border-radius: 8px;
  padding: 4px 16px;
  margin: 20px 0 28px;
  overflow-x: auto;
}

/* ============================================================
   Comparison table  (roundup)
   ============================================================ */

.vl-comp-table-wrap {
  background: var(--vl-warm-bg);
  border-radius: 8px;
  padding: 4px 16px;
  margin: 20px 0 28px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

.vl-comp-table {
  /* Below ~520px viewports, width:100% alone squeezes columns until text stacks per-letter.
     min-width forces horizontal scroll inside .vl-comp-table-wrap instead. */
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-family: var(--vl-font-heading);
  font-size: 14px;
  table-layout: auto;
}

.vl-comp-table__head {
  border-bottom: 2px solid var(--vl-black);
}

.vl-comp-table__th {
  padding: 10px 12px;
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--vl-mid-gray);
  word-break: normal;
}

.vl-comp-table__row {
  border-bottom: 1px solid var(--vl-border-gray);
}

.vl-comp-table__cell {
  padding: 12px;
  vertical-align: top;
  word-break: normal;
  overflow-wrap: anywhere;
}

/* Keep narrow columns on one line when there is room */
.vl-comp-table__cell:nth-child(1),
.vl-comp-table__cell:nth-child(3),
.vl-comp-table__cell:nth-child(4) {
  white-space: nowrap;
}

/* ============================================================
   Product card  (roundup)
   ============================================================ */

.vl-product-card {
  background: var(--vl-card-bg);
  border-radius: 8px;
  border: 1px solid var(--vl-border-gray);
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
  overflow: hidden;
  margin-bottom: 16px;
  /* border-left color set inline per card */
}

.vl-card__main {
  display: flex;
  align-items: flex-start;
  padding: 20px 24px;
  gap: 16px;
  flex-wrap: wrap;
}

/* Rank number + product image (rank never overlaps the photo) */
.vl-card__media {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

/* Square + contain = full image visible for any aspect ratio; white mat hides letterboxing */
.vl-card__thumb {
  width: 130px;
  height: 130px;
  flex-shrink: 0;
  border-radius: 8px;
  overflow: hidden;
  background: var(--vl-card-bg);
  line-height: 0;
}

/* Same fill for every position — score ring carries accent color */
.vl-card__rank {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #3d4f5f;
  color: #fff;
  font-family: var(--vl-font-heading);
  font-weight: 800;
  font-size: 13px;
  line-height: 30px;
  text-align: center;
  box-shadow: 0 1px 2px rgba(0,0,0,0.12);
}

.vl-card__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
}

.vl-card__img-placeholder {
  width: 100%;
  height: 100%;
  min-height: 100%;
  box-sizing: border-box;
  background: #f4f4f2;
}

.vl-card__info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.vl-card__name {
  margin: 0;
  font-family: var(--vl-font-heading);
  font-size: 18px;
  font-weight: 700;
  color: var(--vl-black);
  line-height: 1.25;
}

/* Badge sits top-right in the price column (above price + CTA) */
.vl-card__price-col .vl-card__badge-row {
  margin-bottom: 18px;
  max-width: 220px;
  text-align: right;
}

.vl-card__meta-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.vl-card__verified {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--vl-font-heading);
  font-size: 12px;
  font-weight: 600;
  color: var(--vl-teal);
}

.vl-card__price-col {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  flex-shrink: 0;
  /* Fixed rail so opening “Offer details” doesn’t widen this column and squeeze the title. */
  width: 220px;
  max-width: 220px;
  box-sizing: border-box;
}

.vl-card__price {
  font-family: var(--vl-font-heading);
  font-size: 20px;
  font-weight: 800;
  color: var(--vl-black);
}

/* ---- roundup buyer's guide (BUYERS_GUIDE_JSON rendered block) ---- */

.vl-buyers-guide {
  margin: 28px 0 8px;
  padding: 0;
  font-family: var(--vl-font-body);
}

.vl-buyers-guide__title {
  margin: 0 0 18px;
  font-family: var(--vl-font-heading);
  font-size: 22px;
  font-weight: 700;
  color: var(--vl-black);
}

.vl-buyers-guide__factors {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 22px;
}

/* Factor titles: black (teal reserved for CTAs, badges, score ring — not link-like headings) */
.vl-buyers-guide__factor-title {
  margin: 0 0 6px;
  font-family: var(--vl-font-heading);
  font-size: 13px;
  font-weight: 700;
  color: var(--vl-black);
  letter-spacing: -0.01em;
}

.vl-buyers-guide__factor-body {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--vl-dark-gray);
}

.vl-buyers-guide__tiers {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 22px;
}

@media (max-width: 600px) {
  .vl-buyers-guide__tiers { grid-template-columns: 1fr; }
}

.vl-buyers-guide__tier {
  padding: 14px 16px;
  border-radius: 8px;
  border: 1px solid var(--vl-border-gray);
  font-size: 14px;
  line-height: 1.55;
  color: var(--vl-dark-gray);
}

.vl-buyers-guide__tier strong {
  display: block;
  margin-bottom: 6px;
  font-family: var(--vl-font-heading);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--vl-teal);
}

.vl-buyers-guide__tier p { margin: 0; }

.vl-buyers-guide__method {
  margin-bottom: 22px;
  padding: 16px 18px;
  background: var(--vl-teal-light);
  border-left: 4px solid var(--vl-teal);
  border-radius: 0 8px 8px 0;
}

/* Teal trust signal = left bar + panel tint; heading text stays neutral */
.vl-buyers-guide__method-title {
  margin: 0 0 8px;
  font-family: var(--vl-font-heading);
  font-size: 15px;
  font-weight: 700;
  color: var(--vl-black);
}

/* Extra air before FAQ when methodology block precedes it */
.vl-buyers-guide:has(.vl-buyers-guide__faqs) .vl-buyers-guide__method {
  margin-bottom: 34px;
}

.vl-buyers-guide__method p {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--vl-dark-gray);
}

.vl-buyers-guide__faqs-title {
  margin: 0 0 12px;
  font-family: var(--vl-font-heading);
  font-size: 17px;
  font-weight: 700;
  color: var(--vl-black);
  line-height: 1.25;
}

.vl-buyers-guide__faq-list {
  margin: 0;
}

/* Slightly subordinate to section H2 / factor headings — not same weight as factor titles */
.vl-buyers-guide__faq-q {
  margin: 14px 0 4px;
  font-family: var(--vl-font-heading);
  font-size: 13px;
  font-weight: 600;
  color: var(--vl-dark-gray);
  line-height: 1.35;
}

.vl-buyers-guide__faq-q:first-child { margin-top: 0; }

.vl-buyers-guide__faq-a {
  margin: 0 0 0 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--vl-dark-gray);
}

/* ---- expandable details section ---- */

.vl-card__details {
  border-top: 1px solid var(--vl-border-gray);
}

.vl-card__details > summary {
  list-style: none;
  width: 100%;
  padding: 10px;
  text-align: center;
  cursor: pointer;
  font-family: var(--vl-font-heading);
  font-size: 12px;
  font-weight: 600;
  color: var(--vl-light-gray);
  letter-spacing: 0.03em;
  background: transparent;
  border: none;
  user-select: none;
}

.vl-card__details > summary::-webkit-details-marker { display: none; }

.vl-card__details:not([open]) > summary::before { content: "▼  Show Pros, Cons & Verdict"; }
.vl-card__details[open]       > summary::before { content: "▲  Hide Details"; }
.vl-card__details > summary { color: var(--vl-light-gray); }

/* When closed, hide the body (summary is still shown via details default) */
.vl-card__details:not([open]) .vl-card__body { display: none; }

.vl-card__body {
  padding: 20px 24px 24px;
  background: #fafaf8;
}

.vl-card__points-row {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.vl-card__points-col {
  flex: 1;
  min-width: 180px;
}

.vl-card__points-head {
  margin: 0 0 8px;
  font-family: var(--vl-font-heading);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.vl-card__points-head--pro { color: var(--vl-teal); }
.vl-card__points-head--con { color: var(--vl-mid-gray); }

.vl-card__point {
  display: flex;
  gap: 8px;
  font-size: 14px;
  color: var(--vl-dark-gray);
  line-height: 1.7;
  font-family: var(--vl-font-body);
}

.vl-card__point-icon {
  flex-shrink: 0;
}

.vl-card__point-icon--pro { color: var(--vl-teal); }
.vl-card__point-icon--con { color: #cc4444; }

.vl-card__verdict {
  background: var(--vl-teal-light);
  border-radius: 6px;
  padding: 14px 18px;
  border-left: 3px solid var(--vl-teal);
}

.vl-card__verdict-label {
  display: block;
  font-family: var(--vl-font-heading);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--vl-teal);
  margin-bottom: 6px;
}

.vl-card__verdict-text {
  margin: 0;
  font-size: 15px;
  line-height: 1.65;
  color: var(--vl-dark-gray);
  font-family: var(--vl-font-body);
}

/* ============================================================
   Responsive
   ============================================================ */

@media (max-width: 600px) {
  .vl-card__main    { padding: 14px 16px; gap: 12px; }
  .vl-card__body    { padding: 14px 16px 18px; }
  .vl-card__media   { gap: 10px; align-items: flex-start; }
  .vl-card__thumb   { width: 88px; height: 88px; }
  .vl-card__img     { width: 100%; height: 100%; }
  .vl-card__img-placeholder { width: 100%; height: 100%; min-height: 100%; }
  .vl-card__rank    { width: 26px; height: 26px; line-height: 26px; font-size: 12px; }
  /* Row 1: image + name/rating. Row 2: badge + price + CTA — avoids cramped 3-column squeeze */
  .vl-card__price-col {
    flex-basis: 100%;
    width: 100%;
    min-width: 0;
    align-items: stretch;
    gap: 10px;
  }
  .vl-card__price-col .vl-card__badge-row {
    margin-bottom: 0;
    max-width: none;
    text-align: left;
  }
  .vl-card__price {
    align-self: flex-end;
  }
  .vl-card__price-col .vl-cta {
    display: flex;
    justify-content: center;
    width: 100%;
    box-sizing: border-box;
  }
  .vl-card__coupon {
    max-width: none;
    text-align: center;
  }
  .vl-card__coupon-summary {
    text-align: center;
  }
  .vl-card__info    { gap: 10px; }
  .vl-card__name    { font-size: 16px; }
  .vl-card__meta-row { gap: 8px; }
  .vl-rating-hero   { flex-direction: column; align-items: flex-start; }
  .vl-comp-table-wrap { padding: 4px 8px; }
  .vl-comp-table { font-size: 13px; }
  .vl-comp-table__th,
  .vl-comp-table__cell { padding: 10px 8px; }
  .at-a-glance      { padding: 14px 16px; }
  .at-a-glance ul   { min-width: 100%; } /* stack columns on mobile */
  .comparison-table-wrap { padding: 4px 8px; }
}