/* ============================================================
   Editorial Lab-Report Design System (ported from coldplunge)
   Replaces the old affiliate-components.css visual layer.
   Per-site --ice override applied via a body class:
     body.site-cold    { --ice: cyan }
     body.site-sauna   { --ice: warm amber }
     body.site-power   { --ice: electric amber }
     body.site-desk    { --ice: cool teal }
     body.site-espresso{ --ice: coffee bronze }
     body.site-ebike   { --ice: outdoor green }
   ============================================================ */

:root {
  /* Palette */
  --bone:        #efebe3;
  --bone-2:      #e6e1d6;
  --paper:       #faf7f1;
  --ink:         #0f1112;
  --ink-2:       #2a2a2a;
  --ink-soft:    #4a4a4a;
  --rule:        #d9d3c5;
  --rule-soft:   #e8e3d6;

  /* Default ice — cyan, overridden per-site */
  --ice:         oklch(0.86 0.05 220);
  --ice-2:       oklch(0.93 0.03 220);
  --ice-deep:    oklch(0.52 0.10 230);
  --steel:       oklch(0.42 0.03 230);
  --ember:       oklch(0.62 0.17 38);   /* hot-mode contrast / cons */
  --leaf:        oklch(0.62 0.10 150);  /* in stock / verified / pros */

  /* Type */
  --display: "Instrument Serif", "Times New Roman", serif;
  --body:    "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 14px;
  --shadow-card: 0 1px 0 rgba(15,17,18,0.04), 0 6px 24px -10px rgba(15,17,18,0.12);
}

/* Per-site accent overrides (single accent per site, never two) */
body.site-sauna {
  --ice:      oklch(0.78 0.13 50);   /* warm amber/copper */
  --ice-2:    oklch(0.92 0.07 55);
  --ice-deep: oklch(0.50 0.16 40);
}
body.site-power {
  --ice:      oklch(0.78 0.13 85);   /* electric amber */
  --ice-2:    oklch(0.93 0.07 85);
  --ice-deep: oklch(0.55 0.15 80);
}
body.site-desk {
  --ice:      oklch(0.80 0.07 195);  /* cool teal */
  --ice-2:    oklch(0.93 0.04 195);
  --ice-deep: oklch(0.52 0.10 200);
}
body.site-espresso {
  --ice:      oklch(0.68 0.10 60);   /* coffee bronze */
  --ice-2:    oklch(0.88 0.06 65);
  --ice-deep: oklch(0.42 0.12 50);
}
body.site-ebike {
  --ice:      oklch(0.77 0.13 145);  /* outdoor leaf green */
  --ice-2:    oklch(0.92 0.07 145);
  --ice-deep: oklch(0.50 0.13 145);
}

/* ── Base layer — applies whole-page when class .cpl is on body ───────── */
body.cpl {
  font-family: var(--body) !important;
  color: var(--ink) !important;
  background: var(--paper) !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: 1.55;
  font-feature-settings: "ss01", "cv11";
}
body.cpl h1, body.cpl h2, body.cpl h3, body.cpl h4 {
  font-family: var(--display) !important;
  font-weight: 400 !important;
  letter-spacing: -0.015em !important;
  color: var(--ink) !important;
}
body.cpl h1 { font-size: clamp(36px, 6vw, 80px); line-height: 1.0; }
body.cpl h2 { font-size: clamp(28px, 4vw, 48px); line-height: 1.05; }
body.cpl h3 { font-size: clamp(22px, 2.5vw, 28px); line-height: 1.2; }
body.cpl h4 { font-size: 18px; }
body.cpl em { font-style: italic; }
body.cpl strong { font-weight: 600; }
body.cpl a { color: inherit; }
body.cpl p { color: var(--ink-2); line-height: 1.65; }

/* Override Astro template's slate/sky theme tokens with paper/ink */
body.cpl { --brand: var(--ink); --brand-dark: var(--ink); --text: var(--ink); }
body.cpl .bg-white { background: var(--paper) !important; }
body.cpl .text-slate-500, body.cpl .text-slate-600 { color: var(--ink-2) !important; }
body.cpl .text-slate-400 { color: var(--steel) !important; }
body.cpl .text-slate-800 { color: var(--ink) !important; }
body.cpl .border-slate-100, body.cpl .border-slate-200 { border-color: var(--rule) !important; }
body.cpl .bg-slate-50 { background: var(--bone) !important; }
body.cpl header.sticky { background: var(--paper) !important; border-color: var(--rule) !important; }
body.cpl footer { background: var(--bone) !important; border-color: var(--rule) !important; }

/* Header brand: use display serif */
body.cpl header nav a:first-child { font-family: var(--display) !important; font-size: 22px !important; }

/* Hero section: flat ink background, no gradient */
body.cpl section[style*="gradient"] {
  background: var(--ink) !important;
}
body.cpl section[style*="gradient"] h1 { color: var(--paper) !important; }
body.cpl section[style*="gradient"] p { color: rgba(250,247,241,0.85) !important; }
body.cpl section[style*="gradient"] .uppercase { color: var(--ice-2) !important; }

/* ── CTA — Amazon orange, flattened with stroke + arrow ─────────────── */
body.cpl .aff-cta {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  background: #FF9900 !important;
  color: #0f1112 !important;
  font-family: var(--body) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  letter-spacing: 0.01em !important;
  padding: 14px 20px !important;
  border-radius: 6px !important;
  border: 1px solid #d97a00 !important;
  box-shadow: 0 1px 0 rgba(0,0,0,0.06), inset 0 1px 0 rgba(255,255,255,0.4) !important;
  transition: transform .12s ease, background .12s ease !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  min-height: auto !important;
}
body.cpl .aff-cta:hover { background: #ffaa1f !important; transform: translateY(-1px) !important; }
body.cpl .aff-cta::after { content: " ↗" !important; font-family: var(--mono) !important; font-weight: 500 !important; }

/* ── Product card — editorial spec sheet ─────────────────────────────── */
body.cpl .aff-product-card {
  display: grid !important;
  grid-template-columns: 200px 1fr !important;
  gap: 24px !important;
  align-items: start !important;
  padding: 24px !important;
  background: var(--paper) !important;
  border: 1px solid var(--rule) !important;
  border-radius: 10px !important;
  margin: 28px 0 !important;
  box-shadow: var(--shadow-card) !important;
  position: relative !important;
}
@media (max-width: 640px) {
  body.cpl .aff-product-card { grid-template-columns: 1fr !important; }
}
body.cpl .aff-product-image { background: var(--bone) !important; border: 1px solid var(--rule) !important; border-radius: 6px !important; padding: 12px !important; }
body.cpl .aff-product-info { font-family: var(--body); }
body.cpl .aff-product-title { font-family: var(--display) !important; font-size: 22px !important; }
body.cpl .aff-product-price {
  font-family: var(--display) !important;
  font-size: 32px !important;
  font-weight: 400 !important;
  color: var(--ink) !important;
  line-height: 1 !important;
}
body.cpl .aff-product-price-from {
  font-family: var(--mono) !important;
  font-size: 11px !important;
  color: var(--steel) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  margin-right: 6px !important;
}

/* ── Star rating — replace SVG-ish stars with mono bar ──────────────── */
body.cpl .aff-stars {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-family: var(--mono) !important;
  font-size: 12px !important;
  color: var(--steel) !important;
}
body.cpl .aff-stars-icons {
  position: relative !important;
  display: inline-block !important;
  width: 64px !important;
  height: 6px !important;
  background: var(--bone-2) !important;
  border-radius: 999px !important;
  overflow: hidden !important;
  font-size: 0 !important;
  letter-spacing: 0 !important;
  color: transparent !important;
}
body.cpl .aff-stars-icons::before {
  content: "" !important;
  position: absolute !important;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--stars-fill, 80%);
  background: var(--ink) !important;
  border-radius: 999px !important;
}
body.cpl .aff-stars-num { font-family: var(--mono) !important; color: var(--ink) !important; font-weight: 600 !important; }
body.cpl .aff-stars-count { color: var(--steel) !important; }
body.cpl .aff-stars-count::before { content: "(" !important; }
body.cpl .aff-stars-count::after { content: ")" !important; }

/* ── Badges (Editor's Pick, Best Buy etc) → cpl-chip style ──────────── */
body.cpl .aff-badge {
  font-family: var(--mono) !important;
  font-size: 10px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  padding: 4px 8px !important;
  border-radius: 3px !important;
  background: var(--bone-2) !important;
  color: var(--ink) !important;
  border: 1px solid var(--rule) !important;
}
body.cpl .aff-badge-gold {
  background: color-mix(in oklab, var(--ice) 18%, transparent) !important;
  border-color: color-mix(in oklab, var(--ice-deep) 30%, transparent) !important;
  color: var(--ice-deep) !important;
}

/* ── FAQ section — editorial dashed rules ───────────────────────────── */
body.cpl .aff-faq h2 {
  font-family: var(--display) !important;
  font-size: 40px !important;
}
body.cpl .aff-faq-item {
  background: var(--paper) !important;
  border: 0 !important;
  border-top: 1px solid var(--rule) !important;
  border-radius: 0 !important;
  padding: 18px 0 !important;
  margin: 0 !important;
}
body.cpl .aff-faq-item:last-child { border-bottom: 1px solid var(--rule); }
body.cpl .aff-faq-item summary {
  font-family: var(--body) !important;
  font-weight: 500 !important;
  font-size: 16px !important;
  color: var(--ink) !important;
}
body.cpl .aff-faq-item .aff-faq-answer { color: var(--ink-2) !important; }

/* ── TL;DR — eyebrow + ink-on-bone block ────────────────────────────── */
body.cpl .aff-tldr {
  background: var(--bone) !important;
  border-left: 0 !important;
  border-top: 1px solid var(--rule) !important;
  border-bottom: 1px solid var(--rule) !important;
  border-radius: 0 !important;
  padding: 18px 24px !important;
  margin: 0 0 28px !important;
}
body.cpl .aff-tldr strong:first-child {
  font-family: var(--mono) !important;
  color: var(--ice-deep) !important;
  font-size: 10px !important;
  letter-spacing: 0.14em !important;
  font-weight: 500 !important;
  display: block !important;
  margin-bottom: 6px !important;
}
body.cpl .aff-tldr p { font-family: var(--display) !important; font-size: 22px !important; line-height: 1.3 !important; color: var(--ink) !important; }

/* ── Sticky sidebar + mobile bar — restyled ─────────────────────────── */
body.cpl .aff-sticky-sidebar {
  background: var(--bone) !important;
  border: 1px solid var(--rule) !important;
  border-radius: 8px !important;
  padding: 18px !important;
}
body.cpl .aff-sticky-sidebar .aff-sticky-label {
  font-family: var(--mono) !important;
  color: var(--ice-deep) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.14em !important;
}
body.cpl .aff-sticky-sidebar .aff-sticky-title {
  font-family: var(--display) !important;
  font-size: 22px !important;
}
body.cpl .aff-mobile-bar {
  background: var(--paper) !important;
  border-top: 1px solid var(--rule) !important;
}
body.cpl .aff-mobile-bar-label { color: var(--ice-deep) !important; font-family: var(--mono) !important; }
body.cpl .aff-mobile-bar-name { font-family: var(--body) !important; }

/* ── Comparison tables ──────────────────────────────────────────────── */
body.cpl table {
  width: 100% !important;
  border-collapse: collapse !important;
  font-family: var(--body) !important;
  font-size: 14px !important;
  margin: 28px 0 !important;
  border: 1px solid var(--rule) !important;
}
body.cpl table thead {
  background: var(--bone) !important;
}
body.cpl table th {
  font-family: var(--mono) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  padding: 12px 14px !important;
  text-align: left !important;
  color: var(--ink) !important;
  border-bottom: 1px solid var(--rule) !important;
}
body.cpl table td {
  padding: 14px !important;
  border-top: 1px solid var(--rule-soft) !important;
  color: var(--ink-2) !important;
}
body.cpl table td strong { color: var(--ink) !important; font-weight: 600 !important; }

/* ── Inline body links — keep editorial subtle underline ────────────── */
body.cpl .prose a:not(.aff-cta) {
  color: var(--ink) !important;
  text-decoration: underline !important;
  text-decoration-thickness: 1px !important;
  text-decoration-color: var(--ice-deep) !important;
  text-underline-offset: 3px !important;
}

/* ── prose paragraphs ───────────────────────────────────────────────── */
body.cpl .prose { color: var(--ink-2) !important; font-size: 17px !important; line-height: 1.7 !important; }
body.cpl .prose p { color: var(--ink-2) !important; }
body.cpl .prose h2 { font-family: var(--display) !important; font-size: 40px !important; margin-top: 56px !important; margin-bottom: 20px !important; }
body.cpl .prose h3 { font-family: var(--display) !important; font-size: 26px !important; margin-top: 36px !important; }
body.cpl .prose ul li, body.cpl .prose ol li { color: var(--ink-2) !important; }
body.cpl .prose hr { border-color: var(--rule) !important; }

/* Freshness badge → verified pill */
body.cpl .freshness-badge {
  font-family: var(--mono) !important;
  font-size: 10px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--leaf) !important;
  padding: 4px 8px !important;
  border: 1px solid color-mix(in oklab, var(--leaf) 30%, transparent) !important;
  border-radius: 999px !important;
  background: color-mix(in oklab, var(--leaf) 6%, transparent) !important;
}

/* TOC */
body.cpl .toc-box {
  background: var(--bone) !important;
  border: 1px solid var(--rule) !important;
  border-radius: 8px !important;
}
body.cpl .toc-header {
  font-family: var(--mono) !important;
  font-size: 11px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--steel) !important;
}
body.cpl .toc-nav a { color: var(--ink-2) !important; font-size: 13.5px !important; font-family: var(--body) !important; }
body.cpl .toc-nav a.toc-active { color: var(--ink) !important; font-weight: 500 !important; }

/* Related cards */
body.cpl .related-card {
  background: var(--paper) !important;
  border: 1px solid var(--rule) !important;
  border-radius: 8px !important;
  padding: 18px !important;
}
body.cpl .related-card-title { font-family: var(--display) !important; font-size: 19px !important; color: var(--ink) !important; }
body.cpl .related-card-badge {
  font-family: var(--mono) !important;
  font-size: 10px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  background: var(--bone-2) !important;
  color: var(--ink) !important;
  padding: 3px 7px !important;
  border-radius: 3px !important;
}
body.cpl .related-card-meta { font-family: var(--mono) !important; color: var(--steel) !important; font-size: 11px !important; }