/* ============================================================
   WARM HOME CLUB v5.6 - HEAD-TO-HEAD COMPARISON TEMPLATE
   assets/css/comparisons.css

   Loaded only on posts using the Comparison template
   (see inc/comparisons.php). Depends on style.css for the brand
   tokens and never redefines them.

   Every selector is namespaced .whc-comparison-* or scoped inside
   .whc-comparison. Nothing here can match a Buying Guide element,
   and the file is not loaded on Buying Guides at all.

   Visual language
   Product A    light warm neutral panel
   Product B    deeper stone panel
   Shared       dark walnut (what both products share)
   WHC tested   forest green
   Commercial   ember
   Rules, not boxes. Serif headlines, small sans structure labels.
   ============================================================ */

.whc-comparison{
  --cmp-wide:1100px;
  --cmp-measure:720px;
  --cmp-a:color-mix(in srgb, var(--white) 55%, var(--parchment));
  --cmp-b:var(--parchment-d);
  --cmp-a-edge:var(--border);
  --cmp-b-edge:var(--border-d);
  --cmp-shared:var(--walnut);
  --cmp-tested:var(--forest);
  --cmp-tested-l:var(--forest-l);
  --cmp-cta:var(--ember);
  --cmp-rule:var(--border);
  --cmp-gap:clamp(64px,8vw,104px);
  --cmp-pad:clamp(22px,3.4vw,44px);
  --cmp-label:var(--font-sans);
  /* The FAQ dropdowns (whc_advice_faq) read this. Home Advice sets it
     on its own wrapper; set it here so they space correctly. */
  --advice-gap:clamp(44px,6vw,72px);
  background:var(--cream);
  color:var(--ink-m);
}

.whc-comparison-frame{
  max-width:calc(var(--cmp-wide) + 48px);
  margin:0 auto;
  padding:0 24px;
}

/* Breadcrumb: the shared one is built for the dark post header. */
.whc-comparison-crumbs{padding-top:clamp(20px,3vw,32px)}
.whc-comparison-crumbs .breadcrumb{color:var(--ink-l);margin-bottom:0}
.whc-comparison-crumbs .breadcrumb a{color:var(--ink-l)}
.whc-comparison-crumbs .breadcrumb a:hover{color:var(--ember)}
.whc-comparison-crumbs .breadcrumb-sep{color:var(--border-d)}

/* ── BODY: prose at reading width, modules at full width ──── */
.whc-comparison-body{padding:clamp(12px,2vw,20px) 0 24px}
/* Scoped through .whc-comparison so it outranks the shared
   .entry-content h2 / h3 margin shorthands for prose headings. */
.whc-comparison .whc-comparison-body > *{
  max-width:var(--cmp-measure);
  margin-left:auto;
  margin-right:auto;
}
.whc-comparison .whc-comparison-body > .whc-comparison-wide{max-width:none}
.whc-comparison-body > .whc-comparison-wide + .whc-comparison-wide,
.whc-comparison-body > * + .whc-comparison-wide{margin-top:var(--cmp-gap)}
.whc-comparison-body > .whc-comparison-wide + *:not(.whc-comparison-wide){margin-top:var(--cmp-gap)}
.whc-comparison-body > p:empty{display:none}
.whc-comparison-body > .whc-comparison-hero:first-child{margin-top:0}
/* First screen: hero, decision and prices sit close together so the
   answer and the purchase options arrive before the long read. */
.whc-comparison-body > .whc-comparison-hero + .whc-comparison-decision{margin-top:clamp(40px,5vw,56px)}
.whc-comparison-body > .whc-comparison-decision + .whc-comparison-pair{margin-top:clamp(36px,4.4vw,48px)}

/* ── SHARED PIECES ────────────────────────────────────────── */
.whc-comparison-sr{
  position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

.whc-comparison-body .whc-comparison-label{
  display:block;
  font-family:var(--cmp-label);
  font-size:.66rem;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink-l);
  margin:0 0 8px;
  line-height:1.4;
}

/* Side tag: a small structural label with a swatch of the side tone.
   It is never part of a product title. */
.whc-comparison-body .whc-comparison-sidetag{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:var(--cmp-label);
  font-size:.68rem;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink-m);
  line-height:1.3;
  margin:0 0 10px;
}
.whc-comparison-body .whc-comparison-sidetag::before{
  content:"";
  flex:0 0 auto;
  width:9px;height:9px;
  border:1px solid var(--cmp-a-edge);
  background:var(--cmp-a);
}
.whc-comparison-body .whc-comparison-sidetag--b::before{background:var(--cmp-b);border-color:var(--cmp-b-edge)}
.whc-comparison-body .whc-comparison-sidetag--both::before{background:var(--cmp-shared);border-color:var(--cmp-shared)}

/* WHC status chip: forest only for real testing. Never a pill. */
.whc-comparison-body .whc-comparison-status{
  display:inline-block;
  font-family:var(--cmp-label);
  font-size:.6rem;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  line-height:1;
  padding:5px 7px 4px;
  border:1px solid var(--border-d);
  border-radius:2px;
  color:var(--ink-l);
  background:transparent;
  white-space:nowrap;
}
.whc-comparison-body .whc-comparison-status--tested{
  color:var(--cmp-tested);
  border-color:var(--cmp-tested);
  background:var(--cmp-tested-l);
}

/* Section headings inside modules */
.whc-comparison-body .whc-comparison-module-h{
  font-family:var(--font-display);
  font-size:clamp(1.6rem,2.6vw,2.15rem);
  font-weight:700;
  line-height:1.15;
  color:var(--ink);
  margin:0 0 22px;
  letter-spacing:-.005em;
}

/* Centred label-style heading with rules either side */
.whc-comparison-body .whc-comparison-eyebrow-h{
  display:flex;
  align-items:center;
  gap:18px;
  font-family:var(--cmp-label);
  font-size:.7rem;
  font-weight:600;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--ink-m);
  margin:0 0 20px;
  line-height:1.4;
}
.whc-comparison-body .whc-comparison-eyebrow-h::before,
.whc-comparison-body .whc-comparison-eyebrow-h::after{
  content:"";flex:1 1 auto;height:1px;background:var(--cmp-rule);
}

.whc-comparison-body .whc-comparison-intro,
.whc-comparison-body .whc-comparison-source{
  font-family:var(--font-body);
  font-size:.95rem;
  line-height:1.75;
  color:var(--ink-m);
  max-width:var(--cmp-measure);
  margin:-8px 0 26px;
}
.whc-comparison-body .whc-comparison-source{font-style:italic;color:var(--ink-l);font-size:.9rem}

/* Lists inside modules: no theme discs, no theme indent */
.whc-comparison-body .whc-comparison-list{margin:0;padding:0;list-style:none}
.whc-comparison-body .whc-comparison-list > li{
  list-style:none;
  margin:0;
  font-family:var(--font-body);
  font-size:.98rem;
  line-height:1.6;
  color:var(--ink-m);
}
.whc-comparison-body .whc-comparison-list a,
.whc-comparison-body .whc-comparison-difference a,
.whc-comparison-body .whc-comparison-own-side a{color:var(--ember)}

/* ── BUTTONS ──────────────────────────────────────────────── */
.whc-comparison-body a.whc-comparison-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  width:100%;
  min-height:50px;
  box-sizing:border-box;
  padding:12px 18px;
  font-family:var(--font-body);
  font-size:.92rem;
  font-weight:700;
  letter-spacing:.02em;
  line-height:1.25;
  text-align:center;
  text-decoration:none;
  border-radius:var(--r);
  transition:background .18s var(--ease),color .18s var(--ease),border-color .18s var(--ease);
}
.whc-comparison-body a.whc-comparison-btn--amazon{
  background:var(--cmp-cta);
  color:#fff;
  box-shadow:0 3px 0 var(--ember-d);
}
.whc-comparison-body a.whc-comparison-btn--amazon:hover{background:var(--ember-d);color:#fff}
.whc-comparison-body a.whc-comparison-btn--retailer{
  background:transparent;
  color:var(--walnut);
  border:1.5px solid var(--walnut-m);
}
.whc-comparison-body a.whc-comparison-btn--retailer:hover{background:var(--walnut);border-color:var(--walnut);color:var(--cream)}
.whc-comparison-body a.whc-comparison-btn--guide{
  background:transparent;
  color:var(--ink);
  border:1.5px solid var(--ink);
}
.whc-comparison-body a.whc-comparison-btn--guide:hover{background:var(--ink);color:var(--cream)}

/* AAWP button inside comparison modules: same ember CTA, full width.
   The shared AAWP rules are scoped .entry-content and use !important,
   so these are scoped deeper and match their strength. */
.whc-comparison-body .whc-comparison-amz .aawp-button,
.whc-comparison-body .whc-comparison-amz .aawp-button--buy{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:100% !important;
  min-height:50px !important;
  box-sizing:border-box !important;
  margin:0 !important;
  padding:12px 18px !important;
  font-size:.92rem !important;
  line-height:1.25 !important;
  text-align:center !important;
  text-decoration:none !important;
  float:none !important;
}
/* No decorative cart icon inside comparison buttons */
.whc-comparison-body .whc-comparison-amz .aawp-button::before,
.whc-comparison-body .whc-comparison-amz .aawp-button::after{display:none !important;content:none !important}
.whc-comparison-body .whc-comparison-amz .aawp-button{background-image:none !important}
.whc-comparison-body .whc-comparison-amz + .whc-comparison-btn,
.whc-comparison-body .whc-comparison-amz + a{margin-top:10px}

/* ============================================================
   1. HERO
   ============================================================ */
.whc-comparison-body .whc-comparison-hero{
  text-align:center;
  padding:clamp(20px,4vw,44px) 0 0;
}
.whc-comparison-body .whc-comparison-kicker{
  display:flex;
  justify-content:center;
  gap:12px;
  font-family:var(--cmp-label);
  font-size:.7rem;
  font-weight:600;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--ember);
  margin:0 0 clamp(18px,3vw,28px);
}
.whc-comparison-kicker span + span::before{
  content:"";display:inline-block;width:18px;height:1px;background:var(--border-d);
  vertical-align:middle;margin-right:12px;
}

.whc-comparison-body .whc-comparison-title{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:baseline;
  column-gap:clamp(14px,2.4vw,30px);
  font-family:var(--font-display);
  font-weight:900;
  color:var(--ink);
  margin:0;
  line-height:1.02;
  letter-spacing:-.015em;
}
.whc-comparison-title-name{
  font-size:clamp(2.3rem,5.6vw,4.5rem);
  overflow-wrap:anywhere;
}
.whc-comparison-title-name--a{text-align:right}
.whc-comparison-title-name--b{text-align:left}
.whc-comparison-title-vs{
  font-family:var(--font-elegant);
  font-style:italic;
  font-weight:500;
  font-size:clamp(1.15rem,1.8vw,1.5rem);
  color:var(--ember);
  letter-spacing:.02em;
  position:relative;
  top:-.35em;
}
.whc-comparison-title-q{
  grid-column:1 / -1;
  display:block;
  font-family:var(--font-elegant);
  font-style:italic;
  font-weight:500;
  font-size:clamp(1.35rem,2.4vw,1.9rem);
  line-height:1.3;
  letter-spacing:0;
  color:var(--ink-m);
  margin-top:clamp(14px,2vw,20px);
}
.whc-comparison-body .whc-comparison-line{
  font-family:var(--cmp-label);
  font-size:.74rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--ink-l);
  margin:14px 0 0;
}

/* Featured image: once, under the title */
/* style.css forces .entry-content figure{max-width:100% !important};
   matched here, scoped to this one figure. */
.whc-comparison-body figure.whc-comparison-feature,
.whc-comparison-fallback-head figure.whc-comparison-feature{
  max-width:860px !important;
  margin:clamp(22px,3.4vw,34px) auto 0;
  padding:0;
}
.whc-comparison-body .whc-comparison-feature img,
.whc-comparison-fallback-head .whc-comparison-feature img{
  display:block;
  width:100%;
  height:auto;
  margin:0;
}

/* Nameplates open the A/B tonal language */
.whc-comparison-plates{
  display:grid;
  grid-template-columns:1fr 1fr;
  margin:clamp(26px,4vw,40px) 0 0;
  border:1px solid var(--cmp-rule);
  text-align:left;
}
.whc-comparison-plate{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:2px;
  padding:18px clamp(18px,2.6vw,28px) 20px;
  background:var(--cmp-a);
}
.whc-comparison-plate--b{background:var(--cmp-b);border-left:1px solid var(--cmp-rule)}
.whc-comparison-plate .whc-comparison-sidetag{margin-bottom:6px}
.whc-comparison-plate-name{
  font-family:var(--font-display);
  font-weight:600;
  font-size:clamp(1rem,1.5vw,1.14rem);
  line-height:1.3;
  color:var(--ink);
  margin:0 0 10px;
  overflow-wrap:anywhere;
}
.whc-comparison-plate-foot{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:10px 16px;
  width:100%;
  margin-top:auto;
}
.whc-comparison-plate-buy{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px 12px}
.whc-comparison-plate-price{
  font-family:var(--font-display);
  font-weight:700;
  font-size:1.2rem;
  color:var(--ink);
  font-variant-numeric:lining-nums tabular-nums;
}
.whc-comparison-body a.whc-comparison-plate-jump{
  font-family:var(--cmp-label);
  font-size:.7rem;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ember);
  text-decoration:none;
  border-bottom:1px solid currentColor;
  padding-bottom:1px;
  white-space:nowrap;
}
.whc-comparison-body .whc-comparison-plates-note{
  font-family:var(--font-elegant);
  font-style:italic;
  font-size:.78rem;
  color:var(--ink-l);
  text-align:right;
  margin:6px 0 0;
}
.whc-comparison-pair{scroll-margin-top:90px}

.whc-comparison-meta{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:6px 18px;
  font-family:var(--cmp-label);
  font-size:.74rem;
  color:var(--ink-l);
  margin:20px 0 0;
}
.whc-comparison-meta span + span::before{content:"\00B7";margin-right:18px;color:var(--border-d)}

.whc-comparison-standard{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:6px 16px;
  text-align:left;
  margin:22px 0 0;
  padding:14px 18px;
  border-left:3px solid var(--walnut-l);
  background:color-mix(in srgb, var(--parchment) 70%, transparent);
}
.whc-comparison-standard--tested,
.whc-comparison-standard--mixed{border-left-color:var(--cmp-tested);background:var(--cmp-tested-l)}
.whc-comparison-standard-label{
  font-family:var(--cmp-label);
  font-size:.68rem;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink);
}
.whc-comparison-standard--tested .whc-comparison-standard-label,
.whc-comparison-standard--mixed .whc-comparison-standard-label{color:var(--cmp-tested)}
.whc-comparison-standard-note{
  flex:1 1 320px;
  font-family:var(--font-body);
  font-size:.86rem;
  line-height:1.6;
  color:var(--ink-m);
}
.whc-comparison-body .whc-comparison-standard-note a{color:var(--ink-m);white-space:nowrap}
.whc-comparison-disclosure{text-align:left}
.whc-comparison-disclosure > p{margin:14px 0 0 !important}

/* ============================================================
   2. 30-SECOND DECISION: split background
   ============================================================ */
.whc-comparison-split{
  display:grid;
  grid-template-columns:1fr 1fr;
  border:1px solid var(--cmp-rule);
}
.whc-comparison-split--single{grid-template-columns:1fr}
.whc-comparison-split-side{
  padding:var(--cmp-pad);
  background:var(--cmp-a);
  min-width:0;
}
.whc-comparison-split-side--b{background:var(--cmp-b)}
.whc-comparison-split:not(.whc-comparison-split--single) .whc-comparison-split-side--b{border-left:1px solid var(--cmp-rule)}

.whc-comparison-body .whc-comparison-split-h{
  font-family:var(--font-display);
  font-size:clamp(1.45rem,2.3vw,1.85rem);
  font-weight:700;
  line-height:1.15;
  color:var(--ink);
  margin:0 0 18px;
}
.whc-comparison-body .whc-comparison-split-h::after{content:"\2026"}

.whc-comparison-body .whc-comparison-reasons{counter-reset:cmp-reason}
.whc-comparison-body .whc-comparison-reasons > li{
  counter-increment:cmp-reason;
  display:grid;
  grid-template-columns:30px 1fr;
  gap:0 6px;
  padding:13px 0;
  border-top:1px solid color-mix(in srgb, var(--border-d) 60%, transparent);
}
.whc-comparison-body .whc-comparison-reasons > li:last-child{padding-bottom:0}
.whc-comparison-body .whc-comparison-reasons > li::before{
  content:counter(cmp-reason, decimal-leading-zero);
  font-family:var(--cmp-label);
  font-size:.7rem;
  font-weight:600;
  letter-spacing:.06em;
  color:var(--ember);
  padding-top:.32em;
  font-variant-numeric:tabular-nums;
}

.whc-comparison-difference{
  display:grid;
  grid-template-columns:minmax(150px,220px) 1fr;
  gap:12px clamp(20px,3vw,40px);
  align-items:baseline;
  padding:clamp(22px,3vw,30px) var(--cmp-pad);
  border:1px solid var(--cmp-rule);
  border-top:none;
  background:var(--white);
}
.whc-comparison-body .whc-comparison-difference .whc-comparison-label{color:var(--ember);margin:0}
.whc-comparison-body .whc-comparison-difference-body p{
  font-family:var(--font-display);
  font-style:italic;
  font-size:clamp(1.12rem,1.7vw,1.32rem);
  line-height:1.5;
  color:var(--ink);
  margin:0 0 .5em;
}
.whc-comparison-body .whc-comparison-difference-body p:last-child{margin-bottom:0}

/* ============================================================
   3. PRODUCT PAIR: one structured display, rows aligned
   ============================================================ */
.whc-comparison-pair-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  border:1px solid var(--cmp-rule);
}
.whc-comparison-pair-grid--single{grid-template-columns:1fr;max-width:540px;margin:0 auto}
.whc-comparison-cell{
  min-width:0;
  padding:0 var(--cmp-pad) 16px;
  background:var(--cmp-a);
}
.whc-comparison-cell--b{background:var(--cmp-b);border-left:1px solid var(--cmp-rule)}
.whc-comparison-pair-grid--single .whc-comparison-cell--b{border-left:none}
.whc-comparison-cell--side{padding-top:24px;padding-bottom:6px}
.whc-comparison-cell--cta{padding-bottom:var(--cmp-pad);padding-top:6px}

.whc-comparison-cell--media > *{display:block}
.whc-comparison-cell--media a,
.whc-comparison-cell--media > img{
  display:flex;
  align-items:center;
  justify-content:center;
  aspect-ratio:16 / 10;
  max-height:300px;
  width:100%;
  background:var(--white);
  border:1px solid color-mix(in srgb, var(--border) 70%, transparent);
  padding:clamp(12px,2vw,22px);
  box-sizing:border-box;
}
.whc-comparison-cell--media > img{object-fit:contain}
.whc-comparison-body .whc-comparison-cell--media img{
  display:block;
  width:100%;
  height:100%;
  max-width:100% !important;
  object-fit:contain;
  margin:0;
}

.whc-comparison-body .whc-comparison-pair-name{
  font-family:var(--font-display);
  font-size:clamp(1.12rem,1.7vw,1.36rem);
  font-weight:700;
  line-height:1.25;
  color:var(--ink);
  margin:6px 0 0;
  overflow-wrap:anywhere;
}
.whc-comparison-cell--status{padding-bottom:18px}
.whc-comparison-body .whc-comparison-pair-best{
  font-family:var(--font-body);
  font-style:italic;
  font-size:.95rem;
  line-height:1.6;
  color:var(--ink-m);
  margin:0;
}
.whc-comparison-cell--best{padding-bottom:18px}
.whc-comparison-cell--price{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:4px 12px;
  padding-top:14px;
  border-top:1px solid color-mix(in srgb, var(--border-d) 55%, transparent);
  background-clip:padding-box;
}
.whc-comparison-cell--price .whc-comparison-label{flex:1 0 100%;margin:0}
.whc-comparison-pair-price{
  font-family:var(--font-display);
  font-size:1.6rem;
  font-weight:700;
  color:var(--ink);
  font-variant-numeric:lining-nums tabular-nums;
  line-height:1.1;
}
.whc-comparison-pair-prime{display:inline-flex;align-items:center}
.whc-comparison-pair-prime img{height:16px;width:auto;margin:0}
.whc-comparison-body .whc-comparison-pair-note{
  font-family:var(--font-elegant);
  font-style:italic;
  font-size:.82rem;
  color:var(--ink-l);
  text-align:center;
  margin:12px 0 0;
}

/* ============================================================
   4. KEY DIFFERENCES TABLE
   Theme table rules are generic (.entry-content table) and are
   overridden here, inside this table only.
   ============================================================ */
.whc-comparison-table .whc-table-scroll{
  overflow:visible;
  margin:0;
  background:none;
}
.whc-comparison-body table.whc-comparison-dtable{
  width:100%;
  min-width:0;
  table-layout:fixed;
  border-collapse:collapse;
  font-family:var(--font-body);
  font-size:.95rem;
  margin:0;
}
.whc-comparison-body table.whc-comparison-dtable thead th{
  background:transparent;
  color:var(--ink);
  font-family:var(--cmp-label);
  font-size:.68rem;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  white-space:normal;
  padding:0 18px 12px;
  border-bottom:2px solid var(--ink);
  text-align:left;
}
.whc-comparison-body table.whc-comparison-dtable thead th:first-child{width:28%}
.whc-comparison-body table.whc-comparison-dtable tbody th{
  background:transparent;
  color:var(--ink);
  font-family:var(--font-body);
  font-size:.92rem;
  font-weight:600;
  letter-spacing:0;
  text-transform:none;
  white-space:normal;
  text-align:left;
  vertical-align:top;
  padding:16px 18px 16px 0;
  border-bottom:1px solid var(--cmp-rule);
}
.whc-comparison-body table.whc-comparison-dtable tbody td,
.whc-comparison-body table.whc-comparison-dtable tbody tr:nth-child(even) td,
.whc-comparison-body table.whc-comparison-dtable tbody tr:hover td{
  padding:16px 18px;
  color:var(--ink-m);
  vertical-align:top;
  line-height:1.55;
  border-bottom:1px solid var(--cmp-rule);
  background:var(--cmp-a);
}
.whc-comparison-body table.whc-comparison-dtable tbody td.whc-comparison-dtable-b,
.whc-comparison-body table.whc-comparison-dtable tbody tr:nth-child(even) td.whc-comparison-dtable-b,
.whc-comparison-body table.whc-comparison-dtable tbody tr:hover td.whc-comparison-dtable-b{
  background:var(--cmp-b);
  border-left:1px solid var(--cmp-rule);
}
.whc-comparison-body table.whc-comparison-dtable tbody tr:last-child td{border-bottom:1px solid var(--cmp-rule)}

/* Key differences read heavier */
.whc-comparison-body table.whc-comparison-dtable tbody tr.is-key th{border-left:3px solid var(--ember);padding-left:14px}
.whc-comparison-body table.whc-comparison-dtable tbody tr.is-key td{color:var(--ink);font-weight:600}
.whc-comparison-keyflag{
  display:block;
  font-family:var(--cmp-label);
  font-size:.58rem;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ember);
  margin-top:5px;
}

/* Where they are the same, the row steps back */
.whc-comparison-body table.whc-comparison-dtable tbody tr.is-same td,
.whc-comparison-body table.whc-comparison-dtable tbody tr.is-same:nth-child(even) td,
.whc-comparison-body table.whc-comparison-dtable tbody tr.is-same:hover td{
  background:transparent;
  color:var(--ink-l);
  font-style:italic;
}
.whc-comparison-body table.whc-comparison-dtable tbody tr.is-same th{color:var(--ink-m);font-weight:500}
.whc-comparison-both-tag{
  display:inline-block;
  font-family:var(--cmp-label);
  font-style:normal;
  font-size:.6rem;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink-m);
  margin-right:10px;
}

/* ============================================================
   5. HEAD-TO-HEAD TESTS: evidence blocks
   ============================================================ */
.whc-comparison-test{border-top:3px solid var(--cmp-tested);padding-top:26px}
.whc-comparison-test-eyebrow{
  display:block;
  font-family:var(--cmp-label);
  font-size:.68rem;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--cmp-tested);
  margin:0 0 10px;
}
.whc-comparison-body .whc-comparison-test-head .whc-comparison-module-h{margin-bottom:12px}
.whc-comparison-body .whc-comparison-test-scope{
  font-family:var(--font-body);
  font-style:italic;
  font-size:.92rem;
  line-height:1.65;
  color:var(--ink-m);
  max-width:var(--cmp-measure);
  margin:0 0 10px;
}

.whc-comparison-trial{
  display:grid;
  grid-template-columns:minmax(180px,250px) 1fr;
  grid-template-areas:
    "head results"
    "head found"
    "head fig";
  gap:18px clamp(24px,3.6vw,48px);
  padding:clamp(26px,3.4vw,38px) 0;
  border-bottom:1px solid var(--cmp-rule);
}
.whc-comparison-trial:first-of-type{margin-top:16px;border-top:1px solid var(--cmp-rule)}
.whc-comparison-trial-head{grid-area:head}
.whc-comparison-trial-results{grid-area:results}
.whc-comparison-trial-found{grid-area:found}
.whc-comparison-trial-fig{grid-area:fig}

.whc-comparison-trial-no{
  display:block;
  font-family:var(--cmp-label);
  font-size:.66rem;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--cmp-tested);
  font-variant-numeric:tabular-nums;
  margin-bottom:8px;
}
.whc-comparison-body .whc-comparison-trial-name{
  font-family:var(--font-display);
  font-size:1.5rem;
  font-weight:700;
  line-height:1.2;
  color:var(--ink);
  margin:0 0 10px;
}
.whc-comparison-body .whc-comparison-trial-method{
  font-family:var(--font-body);
  font-size:.86rem;
  line-height:1.6;
  color:var(--ink-l);
  margin:0;
}
.whc-comparison-trial-method span{
  display:block;
  font-family:var(--cmp-label);
  font-size:.6rem;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-m);
  margin-bottom:3px;
}

.whc-comparison-trial-results{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.whc-comparison-result{
  padding:16px 18px 18px;
  border:1px solid var(--cmp-rule);
  min-width:0;
}
.whc-comparison-result.is-tested{border-color:color-mix(in srgb, var(--cmp-tested) 35%, transparent);border-left:3px solid var(--cmp-tested);background:var(--cmp-tested-l)}
.whc-comparison-result.is-untested{background:transparent}
.whc-comparison-result-kind{
  display:block;
  font-family:var(--cmp-label);
  font-size:.58rem;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink-l);
  margin:0 0 8px;
}
.whc-comparison-result.is-tested .whc-comparison-result-kind{color:var(--cmp-tested)}
.whc-comparison-body .whc-comparison-result-value{
  font-family:var(--font-display);
  font-size:clamp(1.15rem,1.8vw,1.4rem);
  font-weight:700;
  line-height:1.3;
  color:var(--ink);
  font-variant-numeric:lining-nums tabular-nums;
  margin:0;
  overflow-wrap:anywhere;
}
.whc-comparison-body .whc-comparison-result-detail{
  font-family:var(--font-body);
  font-size:.86rem;
  line-height:1.55;
  color:var(--ink-m);
  margin:8px 0 0;
}
.whc-comparison-body .whc-comparison-result-untested{
  font-family:var(--font-body);
  font-style:italic;
  font-size:.88rem;
  line-height:1.55;
  color:var(--ink-l);
  margin:0;
}
.whc-comparison-body .whc-comparison-trial-found p{
  font-family:var(--font-body);
  font-size:.98rem;
  line-height:1.75;
  color:var(--ink-m);
  margin:0 0 .7em;
}
.whc-comparison-body .whc-comparison-trial-found p:last-child{margin-bottom:0}
.whc-comparison-trial-fig{margin:0}
.whc-comparison-body .whc-comparison-trial-fig img{display:block;width:100%;height:auto;margin:0}
.whc-comparison-trial-fig figcaption{
  font-family:var(--font-elegant);
  font-style:italic;
  font-size:.86rem;
  color:var(--ink-l);
  margin-top:8px;
}

/* ============================================================
   6. WHAT EACH DOES BETTER / WHAT BOTH GET WRONG
   ============================================================ */
.whc-comparison-wins{
  display:grid;
  grid-template-columns:1fr 1fr;
  border-top:1px solid var(--ink);
}
.whc-comparison-wins--single{grid-template-columns:1fr}
.whc-comparison-win{padding:28px var(--cmp-pad) 36px 0;min-width:0}
.whc-comparison-win--b{padding:28px 0 36px var(--cmp-pad);border-left:1px solid var(--cmp-rule)}
.whc-comparison-wins--single .whc-comparison-win--b{border-left:none;padding-left:0}
.whc-comparison-body .whc-comparison-win-h{
  font-family:var(--font-display);
  font-style:italic;
  font-size:clamp(1.4rem,2.2vw,1.75rem);
  font-weight:600;
  line-height:1.2;
  color:var(--ink);
  margin:2px 0 20px;
}
.whc-comparison-body .whc-comparison-winlist{counter-reset:cmp-win}
.whc-comparison-body .whc-comparison-winlist > li{
  counter-increment:cmp-win;
  display:grid;
  grid-template-columns:44px 1fr;
  padding:14px 0;
  border-top:1px solid var(--cmp-rule);
}
.whc-comparison-body .whc-comparison-winlist > li::before{
  content:counter(cmp-win);
  font-family:var(--font-display);
  font-size:1.5rem;
  font-weight:400;
  font-style:italic;
  line-height:1;
  color:var(--ember);
  padding-top:.08em;
}

/* Shared truths: the one dark walnut band on the page */
.whc-comparison-flaws{
  display:grid;
  grid-template-columns:minmax(200px,320px) 1fr;
  grid-template-rows:auto 1fr;
  gap:0 clamp(28px,4vw,56px);
  margin-top:clamp(28px,4vw,40px);
  padding:clamp(28px,4.4vw,52px) clamp(24px,4.4vw,52px);
  background:var(--cmp-shared);
  color:var(--cream);
}
.whc-comparison-flaws-eyebrow{
  grid-column:1;
  display:block;
  font-family:var(--cmp-label);
  font-size:.66rem;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--amber);
  margin:0 0 10px;
}
.whc-comparison-body .whc-comparison-flaws-h{
  grid-column:1;
  grid-row:2;
  font-family:var(--font-display);
  font-size:clamp(1.6rem,2.6vw,2.1rem);
  font-weight:700;
  line-height:1.15;
  color:var(--cream);
  margin:0;
  align-self:start;
}
.whc-comparison-body .whc-comparison-flawlist{grid-column:2;grid-row:1 / span 2;align-self:start}
.whc-comparison-body .whc-comparison-flawlist > li{
  position:relative;
  padding:12px 0 12px 26px;
  border-top:1px solid rgba(250,246,240,.14);
  color:rgba(250,246,240,.86);
}
.whc-comparison-body .whc-comparison-flawlist > li:first-child{border-top:none;padding-top:0}
.whc-comparison-body .whc-comparison-flawlist > li::before{
  content:"";
  position:absolute;
  left:0;top:1.35em;
  width:12px;height:1px;
  background:var(--amber);
}
.whc-comparison-body .whc-comparison-flawlist > li:first-child::before{top:.75em}
.whc-comparison-body .whc-comparison-flawlist a{color:var(--amber)}

/* ============================================================
   7. OWNER CONSENSUS: restrained columns
   ============================================================ */
.whc-comparison-owner-cols{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0;
  border-top:1px solid var(--cmp-rule);
}
.whc-comparison-owner-cols--single{grid-template-columns:1fr}
.whc-comparison-owner-col{padding:26px var(--cmp-pad) 6px 0;min-width:0}
.whc-comparison-owner-col--b{padding:26px 0 6px var(--cmp-pad);border-left:1px solid var(--cmp-rule)}
.whc-comparison-owner-cols--single .whc-comparison-owner-col--b{border-left:none;padding-left:0}
.whc-comparison-body .whc-comparison-owner-name{
  font-family:var(--font-display);
  font-size:1.2rem;
  font-weight:700;
  line-height:1.3;
  color:var(--ink);
  margin:0 0 20px;
  overflow-wrap:anywhere;
}
.whc-comparison-owner-group{margin:0 0 24px}
.whc-comparison-body .whc-comparison-owner-group h4.whc-comparison-label{margin-bottom:10px}
.whc-comparison-body .whc-comparison-ownerlist > li{
  position:relative;
  padding:7px 0 7px 22px;
  font-size:.95rem;
}
.whc-comparison-body .whc-comparison-ownerlist > li::before{
  position:absolute;
  left:0;top:7px;
  font-family:var(--cmp-label);
  font-weight:700;
  font-size:.95rem;
  line-height:1.6;
}
.whc-comparison-body .whc-comparison-ownerlist--praise > li::before{content:"+";color:var(--cmp-tested)}
.whc-comparison-body .whc-comparison-ownerlist--gripe > li::before{content:"\2212";color:var(--walnut-l)}
.whc-comparison-owner-long{
  padding:14px 16px;
  background:var(--amber-l);
  border-left:3px solid var(--amber);
}
.whc-comparison-body .whc-comparison-owner-long p{
  font-family:var(--font-body);
  font-size:.92rem;
  line-height:1.65;
  color:var(--ink-m);
  margin:0 0 .5em;
}
.whc-comparison-body .whc-comparison-owner-long p:last-child{margin-bottom:0}

/* ============================================================
   8. OWNERSHIP: calmer, editorial, "living with them"
   ============================================================ */
.whc-comparison-ownership{
  background:var(--parchment);
  padding:clamp(34px,5vw,64px) clamp(22px,5vw,64px);
}
.whc-comparison-ownership-eyebrow{
  display:block;
  font-family:var(--font-elegant);
  font-style:italic;
  font-size:1.15rem;
  color:var(--ember);
  margin:0 0 4px;
}
.whc-comparison-own-list{border-top:1px solid var(--border-d)}
.whc-comparison-own-row{
  display:grid;
  grid-template-columns:minmax(150px,210px) 1fr;
  gap:10px clamp(22px,3.4vw,44px);
  padding:24px 0;
  border-bottom:1px solid var(--border-d);
}
.whc-comparison-own-row:last-child{border-bottom:none;padding-bottom:0}
.whc-comparison-body .whc-comparison-own-topic{
  font-family:var(--font-elegant);
  font-style:italic;
  font-size:1.4rem;
  font-weight:500;
  line-height:1.2;
  color:var(--ink);
  margin:0;
}
.whc-comparison-own-body{display:grid;gap:18px;min-width:0}
.whc-comparison-own-sides{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,36px)}
.whc-comparison-own-sides--single{grid-template-columns:1fr}
.whc-comparison-own-side{min-width:0}
.whc-comparison-body .whc-comparison-own-side .whc-comparison-sidetag{margin-bottom:6px}
.whc-comparison-body .whc-comparison-own-side p{
  font-family:var(--font-body);
  font-size:.95rem;
  line-height:1.72;
  color:var(--ink-m);
  margin:0 0 .6em;
}
.whc-comparison-body .whc-comparison-own-side p:last-child{margin-bottom:0}

/* ============================================================
   9. FULL REVIEW LINKS: secondary to this article
   ============================================================ */
.whc-comparison-review-links{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}
.whc-comparison-body a.whc-comparison-review-link{
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  gap:2px 14px;
  padding:16px 20px;
  border:1px solid var(--cmp-rule);
  background:var(--white);
  text-decoration:none;
  color:var(--ink);
  transition:border-color .18s var(--ease);
}
.whc-comparison-body a.whc-comparison-review-link:hover{border-color:var(--ink)}
.whc-comparison-review-link .whc-comparison-sidetag{grid-column:1;margin:0}
.whc-comparison-review-text{grid-column:1;font-family:var(--font-display);font-weight:600;font-size:1.05rem;line-height:1.3}
.whc-comparison-review-arrow{grid-column:2;grid-row:1 / span 2;color:var(--ember);font-size:1.2rem}

/* ============================================================
   10. FINAL DECISION: back to the split
   ============================================================ */
.whc-comparison-final{text-align:center}
.whc-comparison-final-eyebrow{
  display:block;
  font-family:var(--cmp-label);
  font-size:.7rem;
  font-weight:700;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--ember);
  margin:0 0 10px;
}
.whc-comparison-body .whc-comparison-final .whc-comparison-module-h{font-size:clamp(1.8rem,3vw,2.5rem);margin-bottom:28px}
.whc-comparison-final .whc-comparison-split{text-align:left}
.whc-comparison-split--final .whc-comparison-split-side{padding-bottom:0}
.whc-comparison-body .whc-comparison-split--final .whc-comparison-split-h{margin-bottom:6px}
.whc-comparison-body .whc-comparison-final-product{
  font-family:var(--font-elegant);
  font-style:italic;
  font-size:1.05rem;
  line-height:1.4;
  color:var(--ink-m);
  margin:0 0 16px;
  overflow-wrap:anywhere;
}
.whc-comparison-final-cta{
  padding:26px var(--cmp-pad) var(--cmp-pad);
  background:var(--cmp-a);
  min-width:0;
}
.whc-comparison-final-cta--b{background:var(--cmp-b)}
.whc-comparison-split--final:not(.whc-comparison-split--single) .whc-comparison-final-cta--b{border-left:1px solid var(--cmp-rule)}

.whc-comparison-neither{
  display:grid;
  grid-template-columns:1fr minmax(220px,300px);
  gap:20px clamp(24px,4vw,48px);
  align-items:end;
  text-align:left;
  padding:var(--cmp-pad);
  border:1px solid var(--cmp-rule);
  border-top:3px solid var(--cmp-shared);
  margin-top:16px;
  background:var(--white);
}
.whc-comparison-neither--advice{grid-template-columns:1fr}
.whc-comparison-body .whc-comparison-neither .whc-comparison-split-h{font-size:clamp(1.3rem,2vw,1.6rem)}
.whc-comparison-body .whc-comparison-neither-name{
  font-family:var(--font-display);
  font-weight:600;
  font-size:1rem;
  color:var(--ink);
  margin:0 0 10px;
}
.whc-comparison-neither-cta > * + *{margin-top:10px}

/* ── Footer line ─────────────────────────────────────────── */
.whc-comparison-updated{
  max-width:var(--cmp-measure);
  margin:0 auto;
  padding:18px 0 clamp(40px,5vw,64px);
  border-top:1px solid var(--cmp-rule);
  font-family:var(--font-elegant);
  font-style:italic;
  font-size:.82rem;
  color:var(--ink-l);
}

/* ── Fallback header (template used without a hero) ──────── */
.whc-comparison-fallback-head{padding-top:28px;max-width:calc(var(--cmp-measure) + 48px)}
.whc-comparison-fallback-title{
  font-family:var(--font-display);
  font-size:clamp(2rem,4vw,3rem);
  font-weight:900;
  line-height:1.1;
  color:var(--ink);
  margin:0 0 12px;
}
.whc-comparison-fallback-meta{font-family:var(--cmp-label);font-size:.78rem;color:var(--ink-l);margin:0}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:900px){
  .whc-comparison-trial{
    grid-template-columns:1fr;
    grid-template-areas:"head" "results" "found" "fig";
  }
  .whc-comparison-own-row{grid-template-columns:1fr}
  .whc-comparison-flaws{grid-template-columns:1fr}
  .whc-comparison-flaws-eyebrow,
  .whc-comparison-body .whc-comparison-flaws-h,
  .whc-comparison-body .whc-comparison-flawlist{grid-column:1;grid-row:auto}
  .whc-comparison-body .whc-comparison-flawlist{margin-top:12px}
  .whc-comparison-difference{grid-template-columns:1fr}
}

@media (max-width:680px){
  .whc-comparison-frame{padding:0 16px}
  .whc-comparison{--cmp-pad:20px;--cmp-gap:56px}

  /* Hero: A, then vs, then B */
  .whc-comparison-body .whc-comparison-title{grid-template-columns:1fr;row-gap:2px}
  .whc-comparison-title-name--a,
  .whc-comparison-title-name--b{text-align:center}
  .whc-comparison-title-vs{top:0}
  .whc-comparison-plates{grid-template-columns:1fr}
  .whc-comparison-plate--b{border-left:none;border-top:1px solid var(--cmp-rule)}

  /* Splits stack A over B */
  .whc-comparison-split{grid-template-columns:1fr}
  .whc-comparison-split:not(.whc-comparison-split--single) .whc-comparison-split-side--b{border-left:none;border-top:1px solid var(--cmp-rule)}
  .whc-comparison-split--final > *{order:var(--o)}
  .whc-comparison-split--final .whc-comparison-final-cta--b{border-left:none}
  .whc-comparison-final-cta.is-empty{display:none}

  /* Product pair: all of A, then all of B */
  .whc-comparison-pair-grid{grid-template-columns:1fr}
  .whc-comparison-cell{order:var(--o)}
  .whc-comparison-cell.is-empty{display:none}
  .whc-comparison-cell--b{border-left:none}
  .whc-comparison-cell--b.whc-comparison-cell--side{border-top:1px solid var(--cmp-rule)}
  .whc-comparison-cell--media a,
  .whc-comparison-cell--media > img{aspect-ratio:16 / 10}

  /* Table: each row becomes a small stacked card, no sideways scroll */
  .whc-comparison-body table.whc-comparison-dtable,
  .whc-comparison-body table.whc-comparison-dtable tbody,
  .whc-comparison-body table.whc-comparison-dtable tr{display:block;width:100%}
  .whc-comparison-body table.whc-comparison-dtable thead{display:none}
  .whc-comparison-body table.whc-comparison-dtable tbody tr{
    display:grid;
    grid-template-columns:1fr 1fr;
    border-top:1px solid var(--cmp-rule);
    padding:14px 0 0;
  }
  .whc-comparison-body table.whc-comparison-dtable tbody th{
    grid-column:1 / -1;
    display:block;
    padding:0 0 10px;
    border-bottom:none;
  }
  .whc-comparison-body table.whc-comparison-dtable tbody tr.is-key th{padding-left:10px}
  .whc-comparison-body table.whc-comparison-dtable tbody td,
  .whc-comparison-body table.whc-comparison-dtable tbody tr:nth-child(even) td,
  .whc-comparison-body table.whc-comparison-dtable tbody tr:hover td{
    display:block;
    padding:10px 12px 12px;
    font-size:.9rem;
    border-bottom:none;
    margin-bottom:14px;
  }
  .whc-comparison-body table.whc-comparison-dtable tbody tr:last-child td{border-bottom:none}
  .whc-comparison-body table.whc-comparison-dtable tbody td.whc-comparison-dtable-b{border-left:none}
  .whc-comparison-body table.whc-comparison-dtable tbody td::before{
    content:attr(data-side);
    display:block;
    font-family:var(--cmp-label);
    font-style:normal;
    font-size:.58rem;
    font-weight:700;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--ink-l);
    margin-bottom:4px;
  }
  .whc-comparison-body table.whc-comparison-dtable tbody td.whc-comparison-dtable-both{grid-column:1 / -1;padding-left:0}
  .whc-comparison-body table.whc-comparison-dtable tbody td.whc-comparison-dtable-both::before{content:none}
  .whc-comparison-body table.whc-comparison-dtable tbody tr:last-child{border-bottom:1px solid var(--cmp-rule)}

  .whc-comparison-trial-results{grid-template-columns:1fr}

  .whc-comparison-wins,
  .whc-comparison-owner-cols{grid-template-columns:1fr}
  .whc-comparison-win,
  .whc-comparison-win--b,
  .whc-comparison-owner-col,
  .whc-comparison-owner-col--b{padding-left:0;padding-right:0;border-left:none}
  .whc-comparison-win--b,
  .whc-comparison-owner-col--b{border-top:1px solid var(--cmp-rule)}

  .whc-comparison-ownership{margin-left:-16px;margin-right:-16px}
  .whc-comparison-own-sides{grid-template-columns:1fr}

  .whc-comparison-neither{grid-template-columns:1fr}
}