/* ============================================================
   1TPE Catalogue — styles
   Modern light theme + indigo/violet accent, with dark toggle.
   ============================================================ */

:root {
  /* Single accent blue — no secondary blues anywhere */
  --accent: #6366f1;          /* indigo-500 */
  --accent-strong: #4f46e5;   /* indigo-600 */
  --accent-soft: #eef2ff;     /* indigo-50  */

  /* Radii */
  --radius-sm: 9px;
  --radius: 14px;
  --radius-lg: 18px;          /* cards, featured */

  /* Shadows — softer, airier */
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, .04);
  --shadow-card: 0 10px 35px rgba(0, 0, 0, .04);
  --shadow-card-hover: 0 20px 55px rgba(0, 0, 0, .09);
  --shadow-md: 0 4px 16px rgba(15, 23, 42, .08);
  --shadow-lg: 0 12px 40px rgba(15, 23, 42, .16);
  --ring: 0 0 0 3px rgba(99, 102, 241, .35);

  /* Fonts */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji", sans-serif;

  /* Type scale (spec §4.2) */
  --fs-hero: 40px;
  --fs-card-title: 20px;
  --fs-body: 15px;
  --fs-meta: 13px;
  --fs-btn: 14px;

  /* Light theme tokens — calmer slate palette (spec §4.1) */
  --bg: #F8FAFC;              /* slate-50 */
  --bg-grid: #ffffff;
  --surface: #ffffff;         /* cards */
  --surface-2: #F8FAFC;       /* recessed panels */
  --border: #E2E8F0;          /* slate-200 — used sparingly */
  --border-strong: #CBD5E1;
  --text: #0F172A;            /* slate-900 */
  --secondary: #64748B;       /* slate-500 — replaces --text-soft */
  --text-soft: #64748B;       /* ALIAS kept for back-compat (existing rules use it) */
  --muted: #94A3B8;           /* slate-400 */
  --chip: #eef2ff;
  --chip-text: #4338ca;
  --green: #059669;
  --green-soft: #ecfdf5;
  --amber: #b45309;
  --amber-soft: #fffbeb;
  --code-bg: #eef0f5;
  --danger: #ef4444;

  /* Premium detail tokens */
  --separator: rgba(15, 23, 42, .06);   /* 1px translucent separators */
  --accent-glow: 0 0 0 4px rgba(99, 102, 241, .14);
}

[data-theme="dark"] {
  --bg: #0b1020;
  --bg-grid: #131a2e;
  --surface: #161d33;
  --surface-2: #1d2640;
  --border: #283353;
  --border-strong: #39456b;
  --text: #e8ecf8;
  --secondary: #aab3cf;
  --text-soft: #aab3cf;       /* alias */
  --muted: #6f7a9a;
  --chip: #1e2748;
  --chip-text: #c3c9ff;
  --accent: #818cf8;
  --accent-strong: #6366f1;
  --accent-soft: #1e2748;
  --green: #34d399;
  --green-soft: #0f2a23;
  --amber: #fbbf24;
  --amber-soft: #2a210a;
  --code-bg: #1d2640;
  --danger: #f87171;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
  --shadow-card: 0 10px 35px rgba(0, 0, 0, .28);
  --shadow-card-hover: 0 20px 55px rgba(0, 0, 0, .45);
  --shadow-md: 0 6px 20px rgba(0, 0, 0, .35);
  --shadow-lg: 0 16px 50px rgba(0, 0, 0, .55);
  --separator: rgba(255, 255, 255, .06);
  --accent-glow: 0 0 0 4px rgba(129, 140, 248, .18);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--text);
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  background-color: var(--bg);
  background-image: radial-gradient(80% 50% at 50% -10%, rgba(99,102,241,.05), transparent 60%);
  background-attachment: fixed;
}

.wrap { max-width: 1240px; margin: 0 auto; padding: 0 20px; }
/* 1px translucent section separators replace solid borders (spec §4.6) */
.sep { height: 1px; border: 0; background: var(--separator); margin: 0; }
.muted { color: var(--muted); }
.small { font-size: 12.5px; }
code { background: var(--code-bg); padding: 1px 6px; border-radius: 5px; font-size: .9em; }

/* ---------------- Header ---------------- */
.site-header {
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--border);
}
.header-inner { display: flex; align-items: center; gap: 18px; justify-content: space-between; min-height: 68px; flex-wrap: wrap; padding-top: 10px; padding-bottom: 10px; }
.brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.logo { font-size: 30px; line-height: 1; }
.brand h1 { font-size: 20px; margin: 0; font-weight: 700; letter-spacing: -.01em; }
.brand h1 .muted { font-weight: 500; }
.brand-com { color: var(--accent-strong); font-style: italic; font-weight: 800; }
[data-theme="dark"] .brand-com { color: var(--accent); }
.tagline { margin: 0; font-size: 12px; color: var(--muted); }

.header-actions { display: flex; align-items: center; gap: 10px; flex: 1; justify-content: flex-end; min-width: 260px; }

.search-box {
  position: relative; flex: 1; max-width: 460px; min-width: 180px;
  display: flex; align-items: center;
}
.search-icon { position: absolute; left: 12px; width: 18px; height: 18px; color: var(--muted); pointer-events: none; }
.search-box input {
  width: 100%; padding: 10px 34px 10px 14px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface-2); color: var(--text);
  font-size: 14px; outline: none; transition: border-color .15s, box-shadow .15s;
}
.search-box input:focus { border-color: var(--accent); box-shadow: var(--ring); }
.search-clear {
  position: absolute; right: 6px; border: none; background: var(--border);
  color: var(--text-soft); width: 22px; height: 22px; border-radius: 50%;
  cursor: pointer; font-size: 16px; line-height: 1; display: grid; place-items: center;
}
.search-clear:hover { background: var(--border-strong); }

.icon-btn {
  border: 1px solid var(--border); background: var(--surface-2); color: var(--text-soft);
  width: 40px; height: 40px; border-radius: 10px; cursor: pointer; display: grid; place-items: center;
  transition: background .15s, color .15s, border-color .15s;
}
.icon-btn:hover { background: var(--surface); color: var(--text); border-color: var(--border-strong); }
.icon-btn svg { width: 18px; height: 18px; }
#themeToggle .icon-moon, .nav-theme .icon-moon { display: none; }
[data-theme="dark"] #themeToggle .icon-sun,
[data-theme="dark"] .nav-theme .icon-sun { display: none; }
[data-theme="dark"] #themeToggle .icon-moon,
[data-theme="dark"] .nav-theme .icon-moon { display: block; }

/* ---------------- Collapsible sections (<details>) ---------------- */
.collapsible {
  margin-top: 22px; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow: hidden;
}
/* Native <summary> marker replaced by the .collapsible-chev glyph. */
.collapsible > summary { list-style: none; }
.collapsible > summary::-webkit-details-marker { display: none; }
.collapsible-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 13px 16px; cursor: pointer; user-select: none;
  background: var(--surface-2); transition: background .15s;
}
.collapsible-head:hover { background: color-mix(in srgb, var(--surface-2) 85%, var(--border)); }
.collapsible-title { font-size: 14px; font-weight: 700; color: var(--text); }
.collapsible-chev { font-size: 14px; color: var(--text-soft); transition: transform .18s ease; }
.collapsible[open] .collapsible-chev { transform: rotate(180deg); }
.collapsible-body { padding: 16px; }

/* ---------------- Stats ---------------- */
/* ---- KPI band: borderless, breathy, radial-gradient backdrop (spec §5.2) ----
   Scoped under .stats so the generic .stat-card (affiliate dashboard) is untouched. */
.stats {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
  padding: 26px 24px;
  border-radius: var(--radius-lg);
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(99,102,241,.07), transparent 55%),
    radial-gradient(120% 140% at 100% 0%, rgba(99,102,241,.05), transparent 55%);
  position: relative;
}
.stats .stat-card {
  text-align: left;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 10px 6px 4px;
}
.stats .stat-num {
  font-size: var(--fs-hero);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.02em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  text-align: left;
}
[data-theme="dark"] .stats .stat-num { color: var(--text); }
.stats .stat-lbl {
  font-size: var(--fs-meta);
  font-weight: 500;
  color: var(--secondary);
  margin-top: 6px;
  letter-spacing: .01em;
  text-transform: none;
}
.stat-spark { display: block; width: 84px; height: 22px; margin-top: 8px; }
.stat-spark path { stroke: var(--accent); stroke-width: 1.5; fill: none; }
.stat-spark path.spark-area { fill: rgba(99,102,241,.10); stroke: none; }
.stat-trend { display: inline-block; margin-top: 4px; font-size: 11.5px; font-weight: 600; color: var(--secondary); }
.stat-trend.up { color: var(--green); }
.stat-trend.down { color: var(--danger); }
.stat-trend:empty { display: none; }

/* ---------------- Filters → pills + whitespace (spec §5.3) ---------------- */
.filters-grid {
  display: grid; gap: 18px 20px;
  grid-template-columns: repeat(4, 1fr);
  align-items: end;
  padding: 4px 0;
}
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; border: 0; padding: 0; margin: 0; }
.field-lbl { font-size: var(--fs-meta); font-weight: 600; color: var(--secondary); letter-spacing: .01em; }
select, input[type="number"], input[type="search"] {
  appearance: none; -webkit-appearance: none;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--separator); border-radius: 999px;
  padding: 9px 32px 9px 14px; font-size: 14px; font-weight: 500; font-family: inherit; outline: none;
  transition: border-color .15s, box-shadow .15s; width: 100%;
}
input[type="number"], input[type="search"] { padding: 9px 14px; }
select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='3'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; cursor: pointer; }
select:hover, input[type="number"]:hover, input[type="search"]:hover { border-color: var(--border); }
select:focus, input:focus { border-color: var(--accent); box-shadow: var(--ring); }
/* ---------------- Dual-range slider ---------------- */
.range-slider-wrap { min-width: 120px; }
.range-track {
  position: relative; height: 32px; display: flex; align-items: center;
}
.range-track input[type="range"] {
  position: absolute; width: 100%; height: 6px; padding: 0;
  -webkit-appearance: none; appearance: none;
  background: transparent; pointer-events: none; margin: 0;
  border: none; border-radius: 0;
}
.range-track input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--accent-strong); border: 2px solid var(--surface);
  box-shadow: 0 1px 4px rgba(0,0,0,.15); cursor: pointer; pointer-events: all;
  margin-top: -1px; transition: transform .1s;
}
[data-theme="dark"] .range-track input[type="range"]::-webkit-slider-thumb { background: var(--accent); }
.range-track input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.15); }
.range-track input[type="range"]::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--accent-strong); border: 2px solid var(--surface);
  box-shadow: 0 1px 4px rgba(0,0,0,.15); cursor: pointer; pointer-events: all;
}
.range-track input[type="range"]::-moz-range-track { background: transparent; border: none; height: 0; }
.range-lo { z-index: 2; }
.range-hi { z-index: 1; }
.range-bar {
  position: absolute; height: 6px; border-radius: 3px;
  background: var(--accent); top: 50%; transform: translateY(-50%);
  pointer-events: none;
}
.range-track::before {
  content: ""; position: absolute; left: 0; right: 0; height: 6px;
  border-radius: 3px; background: var(--border); top: 50%; transform: translateY(-50%);
  pointer-events: none;
}
.range-display {
  display: block; text-align: center; font-size: 12.5px; font-weight: 600;
  color: var(--text-soft); margin-top: 2px; font-variant-numeric: tabular-nums;
}
/* Filter options as rounded pill toggles (spec §5.3) */
.checkbox-inline {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--separator);
  font-size: 13.5px; font-weight: 500; color: var(--secondary);
  cursor: pointer; white-space: nowrap;
  transition: border-color .15s, background .15s, color .15s;
}
.checkbox-inline:hover { border-color: var(--border); }
.checkbox-inline:has(input:checked) {
  background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 35%, transparent);
  color: var(--accent-strong);
}
.checkbox-inline input { accent-color: var(--accent); width: 15px; height: 15px; cursor: pointer; }

/* ---------------- Toolbar ---------------- */
.toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; flex-wrap: wrap; }
.toolbar-left { display: flex; align-items: center; gap: 14px; }
.result-count { font-size: 14px; color: var(--text-soft); font-weight: 500; }
.result-count b { color: var(--text); }
.link-btn {
  background: transparent;
  color: var(--secondary);
  border: none;
  font-size: var(--fs-meta);
  font-weight: 600;
  cursor: pointer;
  padding: 6px 4px;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color .15s;
}
.link-btn:hover { color: var(--accent-strong); }
[data-theme="dark"] .link-btn { color: var(--accent); }
.toolbar-right { display: flex; align-items: center; gap: 12px; }
.field.inline { flex-direction: row; align-items: center; gap: 8px; }
.field.inline .field-lbl { margin: 0; }
.field.inline select { width: auto; min-width: 150px; }
.view-toggle { display: flex; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 3px; }
.view-btn { border: none; background: transparent; color: var(--muted); width: 32px; height: 30px; border-radius: 7px; cursor: pointer; display: grid; place-items: center; transition: all .15s; }
.view-btn svg { width: 17px; height: 17px; }
.view-btn.active { background: var(--surface); color: var(--accent-strong); box-shadow: var(--shadow-sm); }
[data-theme="dark"] .view-btn.active { color: var(--accent); }

/* ---------------- Results: grid ---------------- */
/* ---- Cards: borderless, 16:9 media, hover lift (spec §4.3, §5.5-5.7) ---- */
.results { margin-top: 22px; padding-bottom: 40px; }
/* #results is now a block container holding tier wrappers (.tier-featured /
   .tier-medium / .tier-grid .results-grid own their own grids). The `grid`
   class only distinguishes the view mode from `table`; it must NOT re-grid the
   outer container or it crushes the nested tier columns. */
.results.grid { display: block; }
.card {
  position: relative;
  background: var(--surface);
  border: none;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  display: flex; flex-direction: column; cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card-hover); }
.card:focus-within { box-shadow: var(--shadow-card-hover); }

.card-link {
  display: flex; flex-direction: column;
  color: inherit; text-decoration: none; flex: 1;
}
.card-link:hover { text-decoration: none; color: inherit; }

.card-media { position: relative; aspect-ratio: 16 / 9; background: var(--surface-2); overflow: hidden; }
.card-thumb { width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .25s ease, filter .18s ease; }
.card:hover .card-thumb { transform: scale(1.04); filter: brightness(1.04); }
.card-thumb-ph { width: 100%; height: 100%; background: var(--surface-2); }
.card-media.no-img .card-thumb { display: none; }

.card-body { padding: 16px 18px 14px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.card-title {
  font-size: var(--fs-card-title); font-weight: 650; line-height: 1.25; margin: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  transition: color .15s;
}
.card:hover .card-title { color: var(--accent-strong); }
.card-descr {
  font-size: var(--fs-body); color: var(--secondary); margin: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.card-insight {
  font-size: var(--fs-meta); color: var(--accent); margin: 0; font-weight: 600;
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}
.card-metarow {
  display: flex; align-items: center; gap: 6px;
  font-size: var(--fs-meta); color: var(--secondary); font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.card-meta-score { color: var(--amber); font-weight: 700; }
.card-meta-dot { color: var(--muted); }

/* Collapsed details reveal (native <details>) */
.card-details { margin-top: 2px; }
.card-details > summary {
  list-style: none; cursor: pointer; font-size: var(--fs-meta); font-weight: 600;
  color: var(--secondary); user-select: none;
}
.card-details > summary::-webkit-details-marker { display: none; }
.card-details > summary::before { content: "Détails ▾ "; }
.card-details[open] > summary::before { content: "Détails ▴ "; }
.card-details-grid { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }

.card-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 18px 14px; margin-top: auto;
}
.card-foot .compare-btn { flex-shrink: 0; }
.card-meta { font-size: var(--fs-meta); color: var(--secondary); display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }

.badge { font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 999px; white-space: nowrap; }
.badge-type { background: var(--chip); color: var(--chip-text); }
.card-cats { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { font-size: 11.5px; background: var(--surface-2); color: var(--text-soft); border: 1px solid var(--border); padding: 2px 8px; border-radius: 999px; }
/* Clickable category/vendor chips → hub pages. Both real <a> (modal) and
   JS-driven spans (cards, where anchors can't nest inside the card link). */
.chip-link { cursor: pointer; text-decoration: none; transition: color .12s, border-color .12s, background .12s; }
.chip-link:hover, .chip-link:focus-visible { color: var(--indigo, #6366f1); border-color: var(--indigo, #6366f1); background: color-mix(in srgb, var(--indigo, #6366f1) 8%, var(--surface-2)); }
.chip-link:focus-visible { outline: 2px solid var(--indigo, #6366f1); outline-offset: 1px; }
/* "par {vendeur}" inline link on cards (lives inside .card-meta, right-aligned). */
.chip-link-inline { cursor: pointer; color: var(--text-soft); transition: color .12s; }
.chip-link-inline:hover, .chip-link-inline:focus-visible { color: var(--indigo, #6366f1); text-decoration: underline; }
.chip-link-inline:focus-visible { outline: 2px solid var(--indigo, #6366f1); outline-offset: 1px; border-radius: 3px; }
/* Vendor link inside the modal "Vendeur" meta row. */
.meta-link { color: var(--indigo, #6366f1); text-decoration: none; font-weight: 600; }
.meta-link:hover { text-decoration: underline; }

/* favorite heart toggle (card + product page) */
.fav-toggle { position: absolute; top: 10px; left: 10px; width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid var(--border); background: var(--surface); color: var(--muted); cursor: pointer;
  font-size: 16px; line-height: 1; display: grid; place-items: center; z-index: 4; transition: transform .1s, color .15s, background .15s; }
.fav-toggle:hover { transform: scale(1.12); color: #ef4444; }
.fav-toggle.is-fav { color: #ef4444; background: color-mix(in srgb, #ef4444 12%, var(--surface)); border-color: color-mix(in srgb, #ef4444 35%, transparent); }
[data-theme="dark"] .fav-toggle.is-fav { color: #f87171; }
.fav-toggle-lg { font-size: 22px; width: 42px; height: 42px; }

/* QR Code row in the promo generator */
.promo-qr-row { margin-top: 14px; }
.promo-qr-toggle { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-soft); cursor: pointer; }
.promo-qr-out { margin-top: 10px; text-align: center; }
.promo-qr-out svg { max-width: 200px; height: auto; border: 1px solid var(--border); border-radius: var(--radius-sm); background: #fff; padding: 6px; }
.promo-qr-out .qr-download { margin-top: 10px; }

/* SEO hub / curated page header */
.hub-head { margin: 18px 0 22px; }
.hub-head h1 { font-size: 26px; margin: 0 0 6px; }
.hub-head .muted { margin: 0; }
.hub-spark { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.hub-spark svg.spark { width: 200px; height: 28px; flex: 0 0 auto; }
.hub-spark-lbl { font-size: var(--fs-meta); color: var(--muted); }
.hub-rss { margin: 8px 0 0; font-size: var(--fs-meta); }
.hub-rss a { color: var(--accent); font-weight: 600; }

/* Comparator table.
   table-layout: fixed is REQUIRED: with "auto" (default) the browser sizes each
   column to its content's preferred width, so 4 product titles inflate the
   table far past the page width and force horizontal scrolling. With "fixed",
   column widths come only from the first row + explicit widths; the table then
   honours width:100% and product titles wrap inside their cells instead. */
/* ---- Comparator: frosted sticky header + winner tint + alignment (editorial) ---- */
.compare-table-wrap { overflow-x: auto; position: relative; border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }
.compare-table { width: 100%; border-collapse: collapse; font-size: 13.5px; table-layout: fixed; background: var(--surface); }
.compare-table th, .compare-table td {
  border: none; border-bottom: 1px solid var(--separator);   /* hairline, no box */
  padding: 13px 12px; text-align: left; vertical-align: middle; word-break: break-word;
}
.compare-table tbody tr:last-child td, .compare-table tbody tr:last-child th { border-bottom: none; }

/* Frosted-glass sticky header */
.compare-head-row th {
  position: sticky; top: 0; z-index: 3;
  background: color-mix(in srgb, var(--surface) 80%, transparent);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  padding-top: 16px; padding-bottom: 16px;
}
.compare-corner { text-align: left; background: var(--surface-2); width: 160px; }
.compare-head-row .compare-corner { background: color-mix(in srgb, var(--surface-2) 80%, transparent); }
.compare-col a { font-weight: 600; color: var(--text); display: block; overflow-wrap: anywhere; word-break: break-word; }
.compare-col img { border-radius: var(--radius-sm); object-fit: cover; margin-bottom: 6px; }

.compare-row-label { text-align: left; background: var(--surface-2); color: var(--secondary); font-weight: 600; white-space: nowrap; }

/* Alignment precision: numerics right-aligned + tabular */
.compare-cell { font-variant-numeric: tabular-nums; }
.compare-cell.num { text-align: right; }

/* Smart highlighting: pale mint tint on the winning cell — no bold, no crown */
.compare-best { background: rgba(16, 185, 129, .08); }
[data-theme="dark"] .compare-best { background: rgba(52, 211, 153, .12); }

/* Sticky left label column (existing behavior preserved) */
.compare-corner, .compare-row-label { position: sticky; left: 0; z-index: 2; }
.compare-corner { z-index: 4; }   /* corner sits above row labels and header */

/* Scroll cue: only shown on narrow/touch screens. */
.compare-scroll-cue { display: none; }

/* Bulk link generator table */
.lg-table { table-layout: auto; }
.lg-table th, .lg-table td { font-size: 12.5px; text-align: left; }
.lg-nom-th { min-width: 160px; } .lg-vend-th { min-width: 90px; }
.lg-nom { font-weight: 600; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lg-link { width: 100%; min-width: 200px; font-size: 11.5px; font-family: ui-monospace, monospace; background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px; padding: 5px 7px; color: var(--text); }
.lg-link:focus { outline: 2px solid var(--indigo, #6366f1); border-color: var(--indigo, #6366f1); }

/* Public affiliate stats dashboard */
.stat-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); gap: 14px; margin: 18px 0 26px; }
.stat-card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 18px; text-align: center; box-shadow: var(--shadow-sm); }
.stat-card-val { font-size: 30px; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; }
.stat-card-lbl { font-size: 12.5px; color: var(--text-soft); margin-top: 4px; }
.stat-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.stat-table th, .stat-table td { border-bottom: 1px solid var(--border); padding: 8px 10px; text-align: left; }
.stat-rank { width: 36px; color: var(--text-soft); font-weight: 700; }
.stat-num, .stat-num-th { text-align: right; font-variant-numeric: tabular-nums; }
.stat-bars { display: flex; flex-direction: column; gap: 8px; }
.stat-bar-row { display: grid; grid-template-columns: 90px 1fr 56px; align-items: center; gap: 10px; }
.stat-bar-lbl { font-size: 12px; color: var(--text-soft); font-variant-numeric: tabular-nums; }
.stat-bar-track { height: 14px; background: var(--surface-2); border-radius: 999px; overflow: hidden; }
.stat-bar-fill { height: 100%; background: var(--indigo, #6366f1); border-radius: 999px; }
.stat-bar-val { font-size: 12px; text-align: right; font-variant-numeric: tabular-nums; }

/* Trend sparkline (product page) */
.trend-section { margin: 16px 0; }
.sparkline { display: block; width: 100%; max-width: 320px; height: auto; background: var(--surface-2); border-radius: var(--radius-sm); border: 1px solid var(--border); }
.trend-legend { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; font-size: 12px; color: var(--text-soft); }
.legend-item { display: inline-flex; align-items: center; gap: 5px; }
.legend-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.legend-days { color: var(--muted); }
.trend-pending { font-style: italic; }

/* WordPress snippet + AI prompt generators (product page) */
.wp-snippet, .ai-prompt { margin: 22px 0; }
.wp-snippet-actions, .ai-prompt > .promo-copy { margin: 8px 0; display: inline-flex; align-items: center; gap: 12px; }
.ai-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0 0; }
.ai-actions .promo-copy { margin: 0; }
.ai-launch { display: inline-flex; align-items: center; text-decoration: none; }
.wp-preview-toggle { font-size: 12.5px; color: var(--indigo, #6366f1); text-decoration: none; }
.wp-code { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; line-height: 1.5; color: var(--text-soft); white-space: pre-wrap; word-break: break-word; overflow-x: auto; margin: 8px 0; max-height: 260px; overflow-y: auto; }
.wp-preview { border: 1px dashed var(--border); border-radius: var(--radius-sm); padding: 12px; margin-top: 8px; }
.ai-tabs { display: flex; gap: 6px; margin: 10px 0 8px; flex-wrap: wrap; }
.ai-tab { font-size: 12.5px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text-soft); cursor: pointer; }
.ai-tab.is-active { background: var(--indigo, #6366f1); color: #fff; border-color: var(--indigo, #6366f1); }

/* Global top navigation */
.site-nav {
  border-bottom: 1px solid var(--separator);
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  position: sticky; top: 0; z-index: 50;
}
.nav-toggle { display: none; }               /* burger — shown only ≤720px */
.nav-tools { display: none; }                /* mobile-only search+theme — shown ≤720px */
.site-nav-inner { display: flex; gap: 4px; padding: 0 16px; overflow-x: auto; scroll-padding-left: 16px; -webkit-overflow-scrolling: touch; min-height: 56px; align-items: center; }
.site-nav a { padding: 16px 14px; font-size: 13.5px; font-weight: 600; color: var(--secondary); text-decoration: none; white-space: nowrap; border-bottom: 2px solid transparent; transition: color .15s, border-color .15s; }
.site-nav a:hover { color: var(--text); }
.site-nav a.is-active { color: var(--accent-strong); border-bottom-color: var(--accent); }

/* Niches index grid */
.niche-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; margin-top: 16px; }
.niche-card { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; text-decoration: none; color: var(--text); background: var(--surface); transition: border-color .12s, transform .12s; }
.niche-card:hover { border-color: var(--indigo, #6366f1); transform: translateY(-1px); }
.niche-name { font-weight: 700; font-size: 14px; }
.niche-count { font-size: 12px; color: var(--text-soft); }

/* card mini-stats row */
.card-stats { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.mini-stat {
  display: inline-flex; flex-direction: column; gap: 0;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px;
  padding: 4px 8px; min-width: 52px;
}
.mini-stat .mini-lbl { font-size: 9.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); line-height: 1.1; }
.mini-stat .mini-val { font-size: 13px; font-weight: 700; color: var(--text); line-height: 1.25; font-variant-numeric: tabular-nums; }
.mini-stat.price { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 25%, transparent); }
.mini-stat.price .mini-val { color: var(--accent-strong); }
[data-theme="dark"] .mini-stat.price .mini-val { color: var(--accent); }
.mini-stat.comm-amt { background: var(--green-soft); border-color: color-mix(in srgb, var(--green) 30%, transparent); }
.mini-stat.comm-amt .mini-val { color: var(--green); }
.velo { color: var(--accent-strong); font-weight: 600; font-size: 11.5px; }
[data-theme="dark"] .velo { color: var(--accent); }
.quick-view {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  border: 1px solid var(--border); background: color-mix(in srgb, var(--surface) 90%, transparent);
  backdrop-filter: blur(6px); color: var(--text-soft);
  font-size: 11.5px; font-weight: 600; padding: 5px 11px; border-radius: 999px;
  cursor: pointer; font-family: inherit; transition: all .15s; opacity: 0;
}
.card:hover .quick-view, .card:focus-within .quick-view { opacity: 1; }
.quick-view:hover { background: var(--accent-strong); color: #fff; border-color: var(--accent-strong); }
[data-theme="dark"] .quick-view:hover { background: var(--accent); color: #0b1020; }

/* Compare button (card footer, table row, modal, product page) */
.compare-btn {
  border: 1px solid var(--border); background: var(--surface); color: var(--text-soft);
  font-size: 12.5px; font-weight: 600; font-family: inherit; cursor: pointer;
  padding: 6px 12px; border-radius: 999px; line-height: 1.2; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 5px; transition: background .15s, border-color .15s, color .15s;
}
.compare-btn:hover { border-color: var(--accent); color: var(--accent-strong); }
.compare-btn.is-active { background: var(--accent-soft); color: var(--accent-strong); border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
[data-theme="dark"] .compare-btn:hover { color: var(--accent); }
[data-theme="dark"] .compare-btn.is-active { color: var(--accent); background: var(--accent-soft); }
.compare-btn:focus-visible { outline: none; box-shadow: var(--ring); }
.compare-btn[disabled] { opacity: .5; cursor: not-allowed; }
.compare-btn[disabled]:hover { border-color: var(--border); color: var(--text-soft); }

/* Card footer: compare pill sits left, meta right */
.card-foot { /* already flex, justify-between — ensure compare + meta share it */ }
.card-foot .compare-btn { flex-shrink: 0; }

/* Table-row compare cell (NOT .compare-cell — that name is taken by the comparator table) */
.compare-action-cell { width: 1px; white-space: nowrap; padding-right: 8px; }
.compare-action-cell .compare-btn { padding: 4px 10px; font-size: 11.5px; }

/* Modal + product page: side-by-side actions under the page/pay links */
.modal-actions-row { display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.modal-actions-row > button { flex: 1 1 auto; justify-content: center; }
.modal-actions-row > a { flex: 1 1 auto; justify-content: center; text-decoration: none; }
.modal-jump { justify-content: center; }

/* Quick-jump anchors: clear the sticky site-nav (~42px) so headings aren't hidden */
.modal-body :is(section[id], [id]) { scroll-margin-top: 56px; }
/* Favorite button in the modal (full-width variant of the heart) */
.modal-fav-btn { font-size: 13px; }
.modal-fav-btn.is-fav { color: #ef4444; }
[data-theme="dark"] .modal-fav-btn.is-fav { color: #f87171; }

/* ---------------- Results: table ---------------- */
.results.table { display: block; }
.table-wrap { width: 100%; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
thead th {
  text-align: left; padding: 12px 14px; font-size: 11px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--muted); background: var(--surface-2); border-bottom: 1px solid var(--border); white-space: nowrap; position: sticky; top: 0;
}
tbody td { padding: 11px 14px; border-bottom: 1px solid var(--border); vertical-align: middle; }
tbody tr { cursor: pointer; transition: background .1s; }
tbody tr:hover { background: var(--surface-2); }
tbody tr:last-child td { border-bottom: none; }
.t-nom { font-weight: 600; max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.t-price { font-weight: 700; white-space: nowrap; }
.t-right { text-align: right; }
.num-col { font-variant-numeric: tabular-nums; }

/* ---------------- Load more ---------------- */
.load-more-wrap { text-align: center; padding: 14px 0 40px; }

/* ---------------- Buttons ---------------- */
.btn-primary {
  background: var(--accent-strong); color: #fff; border: none; border-radius: 10px;
  padding: 11px 22px; font-size: 14px; font-weight: 600; cursor: pointer; font-family: inherit;
  transition: background .15s, transform .1s; display: inline-block; text-decoration: none;
}
.btn-primary:hover { background: var(--accent); }
[data-theme="dark"] .btn-primary { background: var(--accent); color: #0b1020; }
[data-theme="dark"] .btn-primary:hover { filter: brightness(1.1); }
.btn-primary:active { transform: scale(.98); }

/* Buy button (distinct from primary — calls to purchase) */
.btn-buy {
  background: var(--green); color: #fff; border: none; border-radius: 10px;
  padding: 11px 22px; font-size: 14px; font-weight: 700; cursor: pointer; font-family: inherit;
  transition: background .15s, transform .1s; display: inline-block; text-decoration: none;
}
/* Cart icon: currentColor inherits the button text color (#fff light / dark
   in dark mode), so it stays visible on the green background. */
.btn-buy-icon { width: 17px; height: 17px; vertical-align: -3px; margin-right: 7px; fill: currentColor; }
.btn-buy:hover { filter: brightness(1.08); }
[data-theme="dark"] .btn-buy { color: #0b1020; }
.btn-buy:active { transform: scale(.98); }

/* ---- Three-button system: primary / ghost / danger (spec §4.4) ---- */
.btn-ghost {
  background: transparent;
  color: var(--secondary);
  border: 1px solid transparent;
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  font-size: var(--fs-btn);
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background .15s, color .15s;
}
.btn-ghost:hover { background: var(--surface-2); color: var(--text); }
.btn-ghost:active { transform: scale(.98); }
.btn-ghost:focus-visible { outline: none; box-shadow: var(--ring); }

.btn-danger {
  background: var(--danger);
  color: #fff;
  border: none;
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  font-size: var(--fs-btn);
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: filter .15s;
}
.btn-danger:hover { filter: brightness(1.08); }
.btn-danger:active { transform: scale(.98); }
.btn-danger:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(239,68,68,.35); }

/* ---------------- States ---------------- */
.state { text-align: center; padding: 70px 20px; }
.state-emoji { font-size: 44px; margin: 0 0 8px; }
.state h2 { margin: 6px 0 6px; font-size: 19px; }
.state p { margin: 4px 0; }
.spinner { width: 34px; height: 34px; border: 3px solid var(--border); border-top-color: var(--accent); border-radius: 50%; margin: 0 auto 14px; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------------- Modal ---------------- */
.breadcrumb { margin: 4px 0 0; font-size: 12px; color: var(--muted); }
.breadcrumb a { color: var(--accent-strong); text-decoration: none; }
[data-theme="dark"] .breadcrumb a { color: var(--accent); }
.breadcrumb a:hover { text-decoration: underline; }
.brand-link { color: inherit; text-decoration: none; }
.brand-link:hover { color: inherit; }
.product-title { margin: 0 0 10px; font-size: 22px; line-height: 1.25; padding-right: 36px; }
.product-detail { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--shadow-md); margin: 22px 0; overflow: hidden; position: relative; }
.back-link { text-align: center; margin: 0 0 40px; }
.back-link a { color: var(--accent-strong); text-decoration: none; font-weight: 600; }
[data-theme="dark"] .back-link a { color: var(--accent); }
.back-link a:hover { text-decoration: underline; }
.modal { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 20px; }
.modal[hidden] { display: none; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, .55); backdrop-filter: blur(3px); }
.modal-card {
  position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: 18px;
  box-shadow: var(--shadow-lg); max-width: 640px; width: 100%; max-height: 88vh; overflow-y: auto;
}
.modal-close {
  position: absolute; top: 14px; right: 14px; border: none; background: var(--surface-2); color: var(--text-soft);
  width: 34px; height: 34px; border-radius: 50%; font-size: 22px; line-height: 1; cursor: pointer; z-index: 2;
}
.modal-close:hover { background: var(--border); }
.modal-head { padding: 26px 28px 16px; border-bottom: 1px solid var(--border); }
.modal-head-top { display: flex; gap: 16px; align-items: flex-start; }
.modal-img { width: 90px; height: 70px; object-fit: cover; border-radius: var(--radius-sm); border: 1px solid var(--border); flex-shrink: 0; background: var(--surface-2); }
.modal-head-info { flex: 1; min-width: 0; padding-right: 36px; }
.modal-type { display: inline-block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; background: var(--chip); color: var(--chip-text); padding: 4px 10px; border-radius: 999px; margin-bottom: 10px; }
.modal-head h2 { margin: 0 0 10px; font-size: 22px; line-height: 1.25; }
.modal-page-btn { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; padding: 10px 18px; font-size: 14px; width: auto; }
.modal-cats { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.modal-body { padding: 22px 28px 28px; }
.modal-price-row { display: flex; gap: 30px; align-items: flex-end; margin-bottom: 22px; padding-bottom: 18px; border-bottom: 1px dashed var(--border); }
.modal-bigprice { font-size: 30px; font-weight: 800; letter-spacing: -.02em; }
.modal-bigprice.comm { color: var(--green); }
.modal-sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
.modal-section-title { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 0 0 8px; }
.modal-analytics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 22px; }
.perf-tile { background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; }
.perf-val { font-size: 18px; font-weight: 700; color: var(--text); line-height: 1.2; font-variant-numeric: tabular-nums; }
.perf-lbl { font-size: 11px; color: var(--muted); margin-top: 2px; }
.modal-descr { font-size: 15px; line-height: 1.65; color: var(--text); margin: 0 0 22px; white-space: pre-wrap; }

/* AI analysis section on product pages */
.analysis { margin: 0 0 24px; padding: 20px 22px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; }

/* ---------------- À Propos page ---------------- */
/* ---- About: premium reading layout (editorial) ---- */
.about-main { max-width: 680px; }   /* ~70ch, strict reading width */
.about-block { margin: 0 0 34px; }
.about-block .stat-cards { margin: 16px 0 10px; }
/* Light-weight headings, dramatic contrast against body */
.about-h2 { font-size: 24px; font-weight: 300; margin: 0 0 12px; color: var(--text); letter-spacing: -.01em; line-height: 1.25; }
.about-main h1 { font-weight: 300; }
.about-list, .about-steps { margin: 8px 0 4px; padding-left: 22px; }
.about-list li, .about-steps li { margin: 6px 0; line-height: 1.7; color: #18181b; }
[data-theme="dark"] .about-list li, [data-theme="dark"] .about-steps li { color: var(--text-soft); }
.about-steps li { padding-left: 4px; }
.about-main p { line-height: 1.75; color: #18181b; }
[data-theme="dark"] .about-main p { color: var(--text-soft); }
.about-main strong { color: var(--text); font-weight: 600; }
.about-main a { color: var(--accent-strong); }
[data-theme="dark"] .about-main a { color: var(--accent); }
.about-main code { font-size: .9em; }

/* FAQ accordion (native <details>) — uses house tokens for light/dark parity */
.faq { margin-top: 8px; }
details.faq-item {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm); margin-bottom: 10px; overflow: hidden;
}
details.faq-item summary {
  cursor: pointer; padding: 14px 16px; font-weight: 600; color: var(--text);
  list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
details.faq-item summary::-webkit-details-marker { display: none; }
details.faq-item summary::after {
  content: "+"; flex: none; font-size: 20px; font-weight: 400; line-height: 1;
  color: var(--accent-strong); transition: transform .15s ease;
}
[data-theme="dark"] details.faq-item summary::after { color: var(--accent); }
details.faq-item[open] summary::after { content: "−"; }
details.faq-item[open] summary { border-bottom: 1px solid var(--border); }
details.faq-item > div { padding: 14px 16px; color: var(--text-soft); line-height: 1.6; }
details.faq-item > div strong { color: var(--text); }

/* 5-star affiliate score (top of analysis) */
.score-block { margin-bottom: 22px; padding-bottom: 18px; border-bottom: 1px dashed var(--border); }
.score-top { display: flex; align-items: center; gap: 12px; }
.score-stars { font-size: 22px; line-height: 1; letter-spacing: 2px; }
.star { color: var(--border-strong); }
.star.full { color: #f59e0b; }
.star.half { background: linear-gradient(90deg, #f59e0b 50%, var(--border-strong) 50%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.star.empty { color: var(--border-strong); }
.score-num { font-size: 28px; font-weight: 800; color: var(--text); line-height: 1; font-variant-numeric: tabular-nums; }
.score-max { font-size: 15px; font-weight: 500; color: var(--muted); }
.score-label { margin-top: 6px; font-size: 15px; font-weight: 600; color: var(--accent-strong); }
[data-theme="dark"] .score-label { color: var(--accent); }
.score-breakdown { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.score-row { display: grid; grid-template-columns: 110px 1fr 30px; align-items: center; gap: 10px; }
.score-k { font-size: 12px; color: var(--text-soft); }
.score-bar { height: 7px; background: var(--border); border-radius: 4px; overflow: hidden; }
.score-fill { height: 100%; background: var(--accent); border-radius: 4px; transition: width .3s; }
.score-v { font-size: 12px; color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }

.analysis-body { font-size: 14.5px; line-height: 1.75; color: var(--text-soft); }
.analysis-body p { margin: 0 0 14px; }
.analysis-body p:last-child { margin-bottom: 0; }
.analysis-body p:first-child::first-letter { font-size: 1.4em; font-weight: 700; color: var(--accent-strong); }
[data-theme="dark"] .analysis-body p:first-child::first-letter { color: var(--accent); }
.recs-title { margin-top: 26px; }

/* Recommendation cards */
.recs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 10px; }

/* Affiliate link generator section */
.promo-gen { margin: 0 0 24px; padding: 20px 22px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; }
.promo-field { margin-bottom: 16px; }
.promo-label { display: block; font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 6px; }
.promo-input {
  width: 100%; padding: 10px 12px; font-size: 14px; font-family: inherit;
  background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 8px; outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.promo-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(99,102,241,.25); }
.promo-error { margin: 6px 0 0; font-size: 12.5px; color: #dc2626; }
[data-theme="dark"] .promo-error { color: #f87171; }
.promo-create { margin: 8px 0 0; font-size: 12.5px; }
.promo-create a { color: var(--accent-strong); text-decoration: none; }
[data-theme="dark"] .promo-create a { color: var(--accent); }
.promo-create a:hover { text-decoration: underline; }
.promo-reveal { margin-top: 8px; }
.promo-links { display: flex; flex-direction: column; gap: 12px; margin-top: 4px; }
.promo-link-row { display: flex; flex-direction: column; gap: 5px; }
.promo-link-label { font-size: 12.5px; font-weight: 600; color: var(--text-soft); }
.promo-link-box { display: flex; gap: 8px; align-items: stretch; }
.promo-link-input {
  flex: 1; padding: 9px 11px; font-size: 12.5px; font-family: ui-monospace, "SF Mono", Menlo, monospace;
  background: var(--surface); color: var(--text-soft); border: 1px solid var(--border); border-radius: 8px;
  outline: none; min-width: 0;
}
.promo-link-input:focus { border-color: var(--accent); }
.promo-copy {
  flex-shrink: 0; padding: 0 16px; font-size: 13px; font-weight: 600; font-family: inherit; cursor: pointer;
  background: var(--accent-strong); color: #fff; border: none; border-radius: 8px; transition: background .15s;
}
[data-theme="dark"] .promo-copy { background: var(--accent); color: #0b1020; }
.promo-copy:hover { filter: brightness(1.1); }
.promo-copy.copied { background: var(--green); }
.rec-card {
  display: flex; flex-direction: column; gap: 8px; padding: 12px 14px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  text-decoration: none; color: inherit; transition: transform .15s, box-shadow .15s, border-color .15s;
}
.rec-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--border-strong); }
.rec-card-top { display: flex; gap: 10px; align-items: center; }
.rec-thumb { width: 60px; height: 45px; object-fit: cover; border-radius: 6px; border: 1px solid var(--border); flex-shrink: 0; background: var(--surface-2); }
.rec-card-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rec-title { font-size: 13px; font-weight: 600; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rec-meta { font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.rec-reason { font-size: 12px; line-height: 1.5; color: var(--text-soft); margin: 0; }
@media (max-width: 720px) { .recs-grid { grid-template-columns: 1fr; } }

.modal-meta { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 24px; margin-bottom: 24px; }
.meta-row { display: flex; flex-direction: column; gap: 1px; }
.meta-k { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.meta-v { font-size: 14px; color: var(--text); word-break: break-word; }

/* ---------------- Footer ---------------- */
.site-footer { border-top: 1px solid var(--border); padding: 22px 0 30px; margin-top: 20px; }
.site-footer p { margin: 0; text-align: center; }

/* ---------------- Responsive ---------------- */

/* Tablet (≤ 1100px): stats collapse first, recommendation grids tighten. */
@media (max-width: 1100px) {
  .stats { grid-template-columns: repeat(4, 1fr); }
  .recs-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* Small tablet / large phone (≤ 980px): drop the secondary table columns,
   recommendation grids go to 1-2 columns. */
@media (max-width: 980px) {
  .stats { grid-template-columns: repeat(3, 1fr); }
  .filters-grid { grid-template-columns: repeat(2, 1fr); }
  .recs-grid { grid-template-columns: 1fr !important; }
}

/* Phone (≤ 720px): single-column primary layouts, touch-friendly controls. */
@media (max-width: 720px) {
  /* Container & type */
  .wrap { padding: 0 14px; }
  body { font-size: 15px; }

  /* Header: brand only on mobile; search+theme move into the burger panel. */
  .header-inner { flex-wrap: wrap; gap: 10px; min-height: 0; padding-top: 8px; padding-bottom: 8px; }
  .brand { gap: 10px; }
  .logo { font-size: 26px; }
  .brand h1 { font-size: 18px; }
  .tagline { font-size: 11px; }
  /* Desktop inline search + theme are replaced by the burger panel on mobile. */
  .header-actions { display: none; }
  .icon-btn { width: 42px; height: 42px; }   /* bigger touch target */

  /* Burger button: relocated to the top-right of the header (position: fixed
     keeps it pinned over the sticky header). Hidden on desktop. */
  .site-nav { top: 0; background: transparent; border-bottom: none; }
  .nav-toggle {
    display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
    position: fixed; top: 10px; right: 12px; z-index: 60;
    width: 44px; height: 44px; padding: 0; border: 1px solid var(--border);
    border-radius: 10px; background: var(--surface); cursor: pointer;
  }
  .nav-toggle-bar { display: block; width: 20px; height: 2px; margin: 0 auto; background: var(--text); border-radius: 2px; transition: transform .18s, opacity .18s; }
  /* X glyph when open */
  .nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* Drop-down panel: search + theme on top, then nav links. */
  .site-nav-inner {
    display: none;                       /* hidden until toggled open */
    flex-direction: column; gap: 0;
    padding: 8px 14px 8px; overflow: visible;
    background: var(--surface); border-bottom: 1px solid var(--border);
  }
  .site-nav-inner.is-open { display: flex; }
  .nav-tools { display: flex; align-items: center; gap: 8px; padding: 6px 0 10px; border-bottom: 1px solid var(--border); margin-bottom: 2px; }
  .nav-tools .search-box { flex: 1; }
  .nav-tools .icon-btn { flex: none; }
  .site-nav a { padding: 13px 6px; font-size: 15px; border-bottom: 1px solid var(--border); }
  .site-nav a:last-child { border-bottom: none; }
  .site-nav a.is-active { border-bottom-color: var(--indigo, #6366f1); }

  /* Homepage stats: 2 columns, compact numbers + labels so nothing overflows.
     Scoped under .stats to beat the 40px hero size and keep the affiliate
     dashboard's generic .stat-num untouched. */
  .stats { grid-template-columns: repeat(2, 1fr); gap: 10px; padding: 20px 16px; }
  .stats .stat-card { padding: 10px 8px 4px; }
  .stats .stat-num { font-size: 28px; }
  .stats .stat-lbl { font-size: 11.5px; }
  .stats .stat-spark { width: 72px; height: 18px; }
  .stat-card { padding: 12px 12px; }
  .stat-num { font-size: 20px; }
  .stat-lbl { font-size: 10.5px; letter-spacing: .02em; line-height: 1.25; }

  /* Comparator: show the scroll cue, give the sticky label column a drop shadow
     so the floating effect reads clearly as you scroll horizontally. */
  .compare-scroll-cue { display: block; text-align: center; color: var(--muted); font-size: 12px; margin: 0 0 10px; }
  .compare-corner, .compare-row-label { box-shadow: 4px 0 6px -4px rgba(0,0,0,.25); }

  /* Filters: single column, taller inputs for touch */
  .filters-grid { grid-template-columns: 1fr; gap: 12px; }
  .field { gap: 6px; }
  select.promo-input, input.promo-input, input[type="search"], input[type="text"] { min-height: 44px; }

  /* Toolbar (count + sort + view toggle) wraps cleanly */
  .toolbar { gap: 10px; }
  .toolbar-left, .toolbar-right { flex-wrap: wrap; gap: 8px; }
  .view-toggle { display: none; }   /* grid is the only sensible view on phones */

  /* Result cards */
  .results.grid { grid-template-columns: 1fr; gap: 12px; }
  .results.table { display: none; }  /* prefer grid on phones; table is too cramped */
  .card-link { padding: 38px 15px 15px; }
  .card-thumb { width: 72px; height: 56px; }

  /* Product detail page (= reuses .modal-* classes) */
  .modal-head { padding: 20px 16px 14px; }
  .modal-head-top { gap: 12px; }
  .modal-img { width: 72px; height: 56px; }
  .modal-head-info { padding-right: 32px; }
  .modal-head h2 { font-size: 19px; }
  .modal-body { padding: 18px 16px 22px; }
  .modal-page-btn { display: block; width: 100%; text-align: center; padding: 13px 18px; }
  .modal-price-row { flex-direction: column; align-items: flex-start; gap: 14px; }
  .modal-bigprice { font-size: 26px; }
  .modal-meta { grid-template-columns: 1fr; gap: 10px; }
  .modal-analytics { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .perf-tile { padding: 9px 9px; }
  .perf-val { font-size: 15px; }
  .modal-descr { font-size: 14.5px; }

  /* Affiliate link generator on the product page: stack the copy button */
  .promo-link-box { flex-wrap: wrap; }
  .promo-link-input { width: 100%; flex-basis: 100%; }
  .promo-copy { width: 100%; padding: 11px; }

  /* Larger product-page favorite button, repositioned so it never overlaps the close-less head */
  .fav-toggle-lg { width: 40px; height: 40px; font-size: 20px; top: 12px; left: 12px; }

  /* Score breakdown rows: keep the label readable */
  .score-row { grid-template-columns: 96px 1fr 28px; gap: 8px; }
  .score-stars { font-size: 18px; }
  .score-num { font-size: 24px; }

  /* Curated + hub page headers */
  .hub-head h1 { font-size: 22px; }

  /* À Propos: tighter FAQ on phones */
  details.faq-item summary { padding: 12px 13px; font-size: 14.5px; }
  details.faq-item > div { padding: 12px 13px; }

  /* Niches index: 2 columns on phones, tight gaps */
  .niche-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .niche-card { padding: 10px 11px; }
  .niche-name { font-size: 13px; }

  /* Stat dashboard cards + bars */
  .stat-cards { grid-template-columns: 1fr; gap: 10px; }
  .stat-card { padding: 14px; }
  .stat-bar-row { grid-template-columns: 78px 1fr 44px; gap: 8px; }
  .stat-table th, .stat-table td { padding: 9px 8px; }

  /* Bulk generator: hide the non-essential columns on phones */
  .lg-vend-th, .lg-table td.lg-vend { display: none; }
  .lg-link { font-size: 10.5px; }

  /* QR output + WP/AI code blocks */
  .promo-qr-out svg { max-width: 170px; }
  .wp-code { font-size: 10.5px; padding: 10px; }
  .ai-tabs { gap: 5px; }
  .ai-tab { padding: 7px 11px; font-size: 12px; }

  /* Sparkline full width */
  .sparkline { max-width: 100%; }
}

/* Small phone (≤ 480px): the tightest layouts. */
@media (max-width: 480px) {
  .stats { grid-template-columns: 1fr 1fr; gap: 8px; padding: 16px 12px; }
  .stats .stat-card { padding: 8px 6px 2px; }
  .stats .stat-num { font-size: 24px; }
  .stats .stat-lbl { font-size: 11px; }
  .stats .stat-spark { width: 60px; height: 14px; }
  .stat-card { padding: 10px 10px; }
  .stat-num { font-size: 18px; }
  .stat-lbl { font-size: 10px; letter-spacing: 0; }
  .results.grid { grid-template-columns: 1fr; }
  .modal-analytics { grid-template-columns: 1fr 1fr; }
  .niche-grid { grid-template-columns: 1fr; }
  .perf-val { font-size: 14px; }
  .modal-head h2 { font-size: 17px; }
  .hub-head h1 { font-size: 20px; }
  /* Comparison table: keep horizontal scroll but shrink the product column */
  .compare-col { min-width: 120px; }
  .compare-corner { width: 90px; }
  .score-row { grid-template-columns: 84px 1fr 24px; }
}

/* Touch device tweaks: no hover-only affordances; bigger tap targets. */
@media (hover: none) and (pointer: coarse) {
  .card:hover .quick-view { opacity: 1; }   /* quick-view always visible on touch */
  .quick-view { opacity: .9; }
  .rec-card:hover { transform: none; }       /* disable lift on touch */
  .fav-toggle:hover { transform: none; }
}

/* ============================================================
   Floating comparison panel (homepage + product page)
   ============================================================ */
#comparePanel {
  position: fixed; z-index: 55;            /* above nav(50), below modal(60) */
  background: var(--surface); border: 1px solid var(--border);
  box-shadow: var(--shadow-lg); border-radius: var(--radius);
  font-size: 13px; width: 320px; right: 20px; bottom: 20px;
  display: flex; flex-direction: column; overflow: hidden;
}
#comparePanel[hidden] { display: none; }
#comparePanel.is-collapsed .compare-panel-body,
#comparePanel.is-collapsed .compare-panel-foot { display: none; }

.compare-panel-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 11px 14px; border-bottom: 1px solid var(--border); cursor: default;
}
.compare-panel-title { font-weight: 700; display: inline-flex; align-items: center; gap: 6px; }
.compare-panel-count { color: var(--muted); font-weight: 600; font-variant-numeric: tabular-nums; }
.compare-panel-collapse {
  border: none; background: transparent; color: var(--text-soft); cursor: pointer;
  font-size: 15px; line-height: 1; padding: 2px 4px; border-radius: 6px;
}
.compare-panel-collapse:hover { background: var(--surface-2); color: var(--text); }
.compare-panel-collapse:focus-visible { outline: none; box-shadow: var(--ring); }

.compare-panel-msg { padding: 6px 14px; font-size: 12px; color: var(--amber); background: var(--amber-soft); border-bottom: 1px solid var(--border); }

.compare-panel-body { list-style: none; margin: 0; padding: 6px; max-height: 220px; overflow-y: auto; }
.compare-panel-item { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 8px; }
.compare-panel-item:hover { background: var(--surface-2); }
.compare-panel-item a { flex: 1; min-width: 0; color: var(--text); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.compare-panel-item a:hover { color: var(--accent-strong); }
[data-theme="dark"] .compare-panel-item a:hover { color: var(--accent); }
.compare-panel-remove {
  border: none; background: transparent; color: var(--muted); cursor: pointer;
  font-size: 14px; line-height: 1; padding: 4px 6px; border-radius: 6px; flex-shrink: 0;
}
.compare-panel-remove:hover { color: #ef4444; background: color-mix(in srgb, #ef4444 12%, transparent); }
.compare-panel-remove:focus-visible { outline: none; box-shadow: var(--ring); }

.compare-panel-foot { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--border); }
.compare-panel-foot .link-btn { font-size: 12.5px; }
.compare-panel-foot .compare-btn { flex: 1; justify-content: center; padding: 9px; }
.compare-panel-empty { padding: 10px 14px; color: var(--muted); font-size: 12.5px; }

/* Mobile: full-width bar flush to the bottom */
@media (max-width: 720px) {
  #comparePanel {
    left: 0; right: 0; bottom: 0; width: 100%; border-radius: var(--radius) var(--radius) 0 0;
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  .compare-panel-body { max-height: 40vh; }
  .compare-panel-head { padding: 12px 14px; }
}
@media (hover: none) and (pointer: coarse) {
  .compare-panel-collapse:hover, .compare-panel-remove:hover { background: transparent; }
}

/* ============================================================
   Card hierarchy + visual rhythm (spec §5.4)
   Positional breaks over the single sorted list — paging stays honest.
   ============================================================ */
.tier { width: 100%; }
.tier-featured { margin-bottom: 22px; }
.card-featured {
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 0;
  border-radius: var(--radius-lg); box-shadow: var(--shadow-card); overflow: hidden;
}
.card-featured-link { display: contents; }
.card-featured-media { aspect-ratio: 16/10; min-height: 220px; position: relative; }
.card-featured-media .card-thumb { width: 100%; height: 100%; object-fit: cover; }
.card-featured-tag {
  position: absolute; top: 14px; left: 14px;
  background: color-mix(in srgb, var(--accent) 92%, transparent); color: #fff;
  font-size: 12px; font-weight: 700; padding: 5px 12px; border-radius: 999px;
}
.card-featured-body { padding: 30px 32px; display: flex; flex-direction: column; gap: 12px; justify-content: center; }
.card-featured-title { font-size: 26px; font-weight: 700; line-height: 1.2; margin: 0; }
.card-featured-descr { font-size: var(--fs-body); color: var(--secondary); margin: 0; }
.card-featured-cta { align-self: flex-start; margin-top: 6px; text-decoration: none; display: inline-block; }

.tier-medium { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-bottom: 24px; }
.card-medium .card-media { aspect-ratio: 16/9; }
.card-medium .card-title { font-size: 22px; }

.tier-grid.results-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 22px; }

@media (max-width: 980px) {
  .card-featured { grid-template-columns: 1fr; }
  .tier-medium { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .tier-medium { grid-template-columns: 1fr; gap: 16px; }
  .card-featured-body { padding: 20px; }
  .card-featured-title { font-size: 21px; }
}


/* ============================================================
   Scroll fade-in (spec §5.9) — opacity only, never clobbers hover lift
   ============================================================ */
#results .card { opacity: 0; }
#results .card.in { opacity: 1; transition: opacity .4s ease; }
@media (prefers-reduced-motion: reduce) {
  #results .card { opacity: 1 !important; transition: none !important; }
}

/* ============================================================
   Premium detail: soft accent glow on active/focused controls (spec §4.6)
   ============================================================ */
.compare-btn.is-active { box-shadow: var(--accent-glow); }

/* ============================================================
   Section vertical rhythm (spec §1, §2 — let the eye rest)
   ============================================================ */
.filters-bar { margin-top: 28px; }
.toolbar { margin-top: 26px; }
.load-more-wrap { margin: 8px 0 30px; text-align: center; }

@media (max-width: 720px) {
  /* Tap targets ≥ 44px on touch (spec §4.4 invariant) */
  .compare-btn, .fav-toggle, .quick-view { min-height: 44px; }
}

/* ============================================================
   Editorial leaderboard primitives (rankings / sellers / niches)
   Hairline-separated rows, watermark ranks, sparklines, avatars.
   ============================================================ */
.lb { list-style: none; margin: 0; padding: 0; background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); overflow: hidden; }
.lb-row {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 20px; position: relative;
  border-bottom: 1px solid var(--separator);   /* hairline, no zebra */
  text-decoration: none; color: var(--text);
  transition: background .15s;
}
.lb-row:last-child { border-bottom: none; }
.lb-row:hover { background: var(--surface-2); }

/* Watermark rank: large, muted, sits behind the content */
.lb-rank {
  flex: none; width: 46px; text-align: center;
  font-size: 30px; font-weight: 300; line-height: 1;
  color: var(--border-strong); font-variant-numeric: tabular-nums;
}
[data-theme="dark"] .lb-rank { color: var(--muted); opacity: .55; }
/* Top-3 get a champagne/slate metallic tone instead of bold color */
.lb-rank.t1 { color: #b08d57; }
.lb-rank.t2 { color: #9ca3af; }
.lb-rank.t3 { color: #a7826a; }
[data-theme="dark"] .lb-rank.t1 { color: #c9a96a; }
[data-theme="dark"] .lb-rank.t2 { color: #aab3cf; }
[data-theme="dark"] .lb-rank.t3 { color: #bda890; }

/* Circular avatar with delicate inner stroke (ring-1 ring-black/5) */
.lb-avatar {
  flex: none; width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center; overflow: hidden;
  background: var(--accent-soft); color: var(--accent-strong);
  font-weight: 700; font-size: 15px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.05);
}
[data-theme="dark"] .lb-avatar { box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
.lb-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; box-shadow: inset 0 0 0 1px rgba(0,0,0,.05); }

.lb-main { flex: 1; min-width: 0; }
.lb-name { font-size: 15px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-sub { font-size: 12.5px; color: var(--secondary); margin-top: 2px; }

/* Sparkline */
.lb-spark { flex: none; width: 90px; }
.spark { width: 100%; height: 28px; display: block; }
.spark .spark-line { fill: none; stroke: var(--accent); stroke-width: 1.5; stroke-linejoin: round; }
.spark .spark-area { fill: rgba(99,102,241,.10); stroke: none; }
[data-theme="dark"] .spark .spark-area { fill: rgba(129,140,248,.12); }

.lb-value { flex: none; font-variant-numeric: tabular-nums; font-weight: 600; font-size: 14px; color: var(--text); text-align: right; }
.lb-value-lbl { display: block; font-size: 11px; font-weight: 500; color: var(--secondary); margin-top: 1px; }

@media (max-width: 720px) {
  .lb-row { gap: 10px; padding: 13px 14px; }
  .lb-rank { width: 34px; font-size: 24px; }
  .lb-avatar { width: 34px; height: 34px; font-size: 13px; }
  .lb-spark { display: none; }   /* hide sparkline on phones to avoid clutter */
}

/* ============================================================
   Leaderboard section titles (curated / niches)
   ============================================================ */
.lb-section-title {
  font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  color: var(--secondary); margin: 28px 0 12px; padding-bottom: 8px;
  border-bottom: 1px solid var(--separator);
}
.lb-section-title:first-of-type { margin-top: 8px; }

/* ---- Curated hero card (asymmetrical, oversized #1) + natural-language insight ---- */
.curated-hero {
  display: grid; grid-template-columns: 1.3fr 1fr; gap: 0;
  border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-card);
  text-decoration: none; color: var(--text); margin-bottom: 26px;
  transition: box-shadow .18s ease;
}
.curated-hero:hover { box-shadow: var(--shadow-card-hover); }
.hero-media { position: relative; aspect-ratio: 16/11; min-height: 240px; background: var(--surface-2); }
.hero-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-tag { position: absolute; top: 16px; left: 16px; background: color-mix(in srgb, var(--accent) 92%, transparent); color: #fff; font-size: 12px; font-weight: 700; padding: 5px 12px; border-radius: 999px; }
.hero-body { padding: 32px 34px; display: flex; flex-direction: column; gap: 12px; justify-content: center; }
.hero-title { font-size: 26px; font-weight: 700; line-height: 1.2; margin: 0; }
.hero-descr { font-size: var(--fs-body); color: var(--secondary); margin: 0; line-height: 1.6; }
/* Natural-language insight: muted inline text block, not a bright badge */
.hero-insight {
  font-size: 13.5px; color: var(--accent-strong); font-weight: 500;
  margin: 0; padding: 10px 14px; background: var(--accent-soft);
  border-radius: var(--radius-sm); border-left: 3px solid var(--accent);
}
[data-theme="dark"] .hero-insight { color: var(--accent); }
.hero-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; color: var(--secondary); font-variant-numeric: tabular-nums; }
.hero-meta span:nth-child(even) { color: var(--muted); }
.hero-cta { align-self: flex-start; margin-top: 4px; text-decoration: none; display: inline-block; }

@media (max-width: 980px) { .curated-hero { grid-template-columns: 1fr; } }
@media (max-width: 720px) { .hero-body { padding: 22px; } .hero-title { font-size: 21px; } }

/* ---- /niches: architectural sectioning (typographic headers + dividers) ---- */
.niches-sectioned > .lb-section-title { margin-top: 28px; }
.niches-sectioned > .lb-section-title:first-child { margin-top: 8px; }
.niches-sectioned > .niche-grid { margin-top: 14px; }

/* Architectural callout: left border, italic serif, larger */
.about-callout {
  margin: 22px 0; padding: 4px 0 4px 20px;
  border-left: 2px solid var(--accent);
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic; font-size: 17px; line-height: 1.6;
  color: #18181b;
}
[data-theme="dark"] .about-callout { color: var(--text-soft); border-left-color: var(--accent); }
.about-callout strong { font-style: normal; font-family: var(--font); font-size: 14px; }