/* compare_matrix.css — premium side-by-side comparison matrix.
 *
 * Theme-proof: НЕ хардкодим палитру. Все цвета — через design-tokens из
 * style.css (--surface, --good/--warn/--bad, --accent, --text, --dim,
 * --radius*, --border*). Прозрачность строим через color-mix(... transparent)
 * — авто-адаптируется ко всем темам (mint/ocean/caramel/lime/grape/peach).
 *
 * grade_color приходит с сервера как hex — используется ТОЛЬКО inline для
 * кольца медальона (--ring), что допустимо по ТЗ.
 *
 * Семантика «лучше → хуже»: --good → --warn → --bad. Накрутка/риск: чем
 * меньше, тем зеленее (good); чем больше — тем краснее (bad).
 */

.cmp-wrap { max-width: 1180px; margin: 26px auto 64px; padding: 0 18px; }

/* ─── Hero ─── */
.cmp-hero { text-align: center; padding: 20px 0 22px; }
.cmp-hero h1 {
  font-size: clamp(24px, 3.4vw, 38px);
  margin: 0 0 8px; font-weight: 850; letter-spacing: -0.02em;
}
.cmp-hero .sub {
  font-size: 14px; color: var(--dim);
  max-width: 560px; margin: 0 auto; line-height: 1.55;
}
.cmp-hero .cmp-count-chip {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 12px; padding: 5px 13px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  color: var(--text); font-size: 12px; font-weight: 700;
  letter-spacing: 0.2px;
}
.cmp-hero .cmp-count-chip b { color: var(--accent-hi, var(--accent)); }

/* ─── Notices (missing / category warning) ─── */
.cmp-notice {
  display: flex; align-items: flex-start; gap: 10px;
  max-width: 760px; margin: 0 auto 16px;
  padding: 12px 16px;
  font-size: 13px; line-height: 1.5; color: var(--text-dim, var(--text));
  border-radius: var(--radius, 14px);
  background: var(--surface);
  border: 1px solid var(--border);
}
.cmp-notice .ico { flex: 0 0 auto; font-size: 16px; line-height: 1.4; }
.cmp-notice--warn {
  background: color-mix(in srgb, var(--warn) 9%, var(--surface));
  border-color: color-mix(in srgb, var(--warn) 45%, transparent);
}
.cmp-notice--muted { color: var(--dim); border-style: dashed; }

/* ─── Empty state (preserved) ─── */
.cmp-empty {
  background: var(--surface);
  border: 1px dashed var(--border-2, var(--border));
  border-radius: var(--radius-lg, 20px);
  padding: 52px 26px; text-align: center; color: var(--dim);
}
.cmp-empty h3 { color: var(--text); margin: 0 0 10px; font-size: 19px; font-weight: 800; }
.cmp-empty p { margin: 0 auto 22px; max-width: 460px; font-size: 14.5px; line-height: 1.6; }
.cmp-empty code {
  padding: 1px 6px; border-radius: 6px;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent-hi, var(--accent)); font-weight: 700;
}
.cmp-empty .cmp-cta {
  display: inline-block; padding: 12px 24px; border-radius: var(--radius-sm, 12px);
  background: var(--accent); color: var(--bg, #07080b);
  font-size: 14px; font-weight: 850; text-decoration: none;
  box-shadow: 0 10px 26px color-mix(in srgb, var(--accent) 32%, transparent);
  transition: filter .14s, transform .14s;
}
.cmp-empty .cmp-cta:hover { filter: brightness(1.06); transform: translateY(-1px); }

/* ─── Matrix surface (glass) ─── */
.cmp-matrix-shell {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl, 28px);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(14px) saturate(1.1);
  overflow: hidden;
}
.cmp-matrix-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* CSS grid: первый столбец — rail, остальные — товары.
 * Кол-во товарных столбцов проставляется inline через --cmp-cols. */
.cmp-matrix {
  display: grid;
  grid-template-columns: minmax(132px, 168px) repeat(var(--cmp-cols, 1), minmax(190px, 1fr));
  min-width: min-content;
}

/* Каждая «ячейка» — обычный grid item. Рисуем row-разделители через cell. */
.cmp-cell {
  padding: 13px 16px;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  display: flex; flex-direction: column; justify-content: center;
  min-width: 0;
}
.cmp-row-last .cmp-cell,
.cmp-cell.cmp-row-last { border-bottom: none; }

/* Left rail (sticky on horizontal scroll) */
.cmp-rail {
  position: sticky; left: 0; z-index: 3;
  background: var(--surface-2, var(--surface));
  border-right: 1px solid var(--border);
  font-size: 12px; font-weight: 700; color: var(--dim);
  text-transform: uppercase; letter-spacing: 0.4px;
  gap: 3px;
}
.cmp-rail .hint { font-size: 10.5px; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--muted, var(--dim)); }

/* Winner column accent (applied to every cell in winner col via data attr) */
.cmp-cell[data-winner="1"] {
  background: color-mix(in srgb, var(--good) 6%, transparent);
}

/* ─── Header cells (sticky top) ─── */
.cmp-head {
  position: sticky; top: 0; z-index: 2;
  background: var(--surface-2, var(--surface));
  padding: 16px 16px 18px;
  gap: 10px; align-items: stretch;
  border-bottom: 1px solid var(--border-2, var(--border));
}
.cmp-head.cmp-rail { z-index: 4; }
.cmp-head[data-winner="1"] {
  background:
    radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--good) 16%, transparent) 0%, transparent 70%),
    var(--surface-2, var(--surface));
}

.cmp-winner-pill {
  display: inline-flex; align-items: center; gap: 5px; align-self: center;
  padding: 4px 11px; border-radius: 999px;
  background: var(--good); color: var(--bg, #07080b);
  font-size: 10.5px; font-weight: 850; letter-spacing: 0.4px;
  text-transform: uppercase; white-space: nowrap;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--good) 40%, transparent);
  margin-bottom: 2px;
}
.cmp-winner-spacer { height: 19px; } /* keeps non-winner heads aligned */

.cmp-cover {
  aspect-ratio: 1 / 1; width: 100%;
  background: color-mix(in srgb, var(--bg, #000) 35%, transparent);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 10px); overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.cmp-cover img { width: 100%; height: 100%; object-fit: contain; }
.cmp-cover .nope { font-size: 30px; opacity: 0.5; }

.cmp-mp {
  align-self: flex-start;
  display: inline-block; padding: 3px 9px; border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  color: var(--text-dim, var(--text));
  font-size: 10.5px; font-weight: 800; letter-spacing: 0.3px;
}
.cmp-pname {
  font-size: 14px; font-weight: 700; line-height: 1.32; color: var(--text);
  margin: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; min-height: 37px;
}

/* Grade medallion (ring uses inline --ring = item.grade_color) */
.cmp-medallion-row { display: flex; align-items: center; gap: 12px; margin-top: 2px; }
.cmp-medallion {
  flex: 0 0 auto;
  width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 21px; font-weight: 850; color: var(--text);
  background:
    radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--ring, var(--accent)) 18%, transparent), transparent 72%),
    var(--surface-solid, var(--surface));
  border: 2.5px solid var(--ring, var(--border-2));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--ring, var(--accent)) 14%, transparent);
  letter-spacing: -0.02em;
}
.cmp-medallion.is-unknown {
  border-color: var(--border-2, var(--border));
  box-shadow: none; color: var(--dim);
}
.cmp-grade-meta { min-width: 0; }
.cmp-grade-label { font-size: 12.5px; font-weight: 800; color: var(--text); line-height: 1.2; }
.cmp-grade-sub { font-size: 10.5px; color: var(--dim); text-transform: uppercase; letter-spacing: 0.4px; }

/* pb_score gauge */
.cmp-gauge { margin-top: 2px; }
.cmp-gauge-num {
  font-size: 13px; font-weight: 800; color: var(--text);
  font-feature-settings: "tnum"; margin-bottom: 5px;
}
.cmp-gauge-num .tot { font-size: 11px; font-weight: 600; color: var(--dim); }
.cmp-gauge-num .lbl { float: right; font-size: 10.5px; font-weight: 700; color: var(--dim); text-transform: uppercase; letter-spacing: 0.3px; }
.cmp-gauge-track {
  height: 6px; border-radius: 999px;
  background: color-mix(in srgb, var(--text) 10%, transparent);
  overflow: hidden;
}
.cmp-gauge-fill {
  height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--bad), var(--warn) 55%, var(--good));
  transition: width .5s cubic-bezier(0.16,1,0.3,1);
}

/* ─── Attribute cells ─── */
.cmp-best-tick {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10px; font-weight: 800; color: var(--good);
  text-transform: uppercase; letter-spacing: 0.3px; margin-top: 5px;
}
.cmp-cell.is-best {
  box-shadow: inset 0 -2.5px 0 -0.5px var(--good);
}

/* verdict chip */
.cmp-vchip {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: 999px;
  font-size: 12px; font-weight: 800; letter-spacing: 0.2px;
  border: 1.5px solid var(--tok, var(--dim));
  color: var(--tok, var(--text));
  background: color-mix(in srgb, var(--tok, var(--dim)) 10%, transparent);
}
.cmp-tok-good { --tok: var(--good); }
.cmp-tok-warn { --tok: var(--warn); }
.cmp-tok-bad  { --tok: var(--bad); }
.cmp-tok-unknown { --tok: var(--dim); }

/* horizontal bar metric (suspicion / counterfeit) */
.cmp-bar-val { font-size: 14px; font-weight: 800; color: var(--text); font-feature-settings: "tnum"; margin-bottom: 5px; }
.cmp-bar-track {
  height: 7px; border-radius: 999px;
  background: color-mix(in srgb, var(--text) 9%, transparent);
  overflow: hidden;
}
.cmp-bar-fill { height: 100%; border-radius: 999px; transition: width .5s cubic-bezier(0.16,1,0.3,1); }
.cmp-bar-fill.lvl-good { background: var(--good); }
.cmp-bar-fill.lvl-warn { background: var(--warn); }
.cmp-bar-fill.lvl-bad  { background: var(--bad); }

/* rating row */
.cmp-rating-shown { font-size: 13px; color: var(--dim); text-decoration: line-through; }
.cmp-rating-adj { font-size: 16px; font-weight: 850; color: var(--text); font-feature-settings: "tnum"; }
.cmp-pill {
  display: inline-flex; align-items: center;
  padding: 2px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 800; line-height: 1.4;
}
.cmp-pill-down { background: color-mix(in srgb, var(--bad) 16%, transparent); color: var(--bad); }
.cmp-pill-up { background: color-mix(in srgb, var(--good) 16%, transparent); color: var(--good); }
.cmp-pill-flat { background: color-mix(in srgb, var(--text) 10%, transparent); color: var(--dim); }

/* price row */
.cmp-price-main { font-size: 16px; font-weight: 850; color: var(--text); font-feature-settings: "tnum"; }
.cmp-price-old { font-size: 12px; color: var(--dim); text-decoration: line-through; margin-left: 6px; }
.cmp-price-rec { font-size: 11px; color: var(--dim); margin-top: 4px; line-height: 1.35; }

/* generic numeric */
.cmp-num { font-size: 15px; font-weight: 800; color: var(--text); font-feature-settings: "tnum"; }

/* flags */
.cmp-flags { display: flex; flex-wrap: wrap; gap: 5px; }
.cmp-flag-pill {
  font-size: 11px; font-weight: 700; line-height: 1.3;
  padding: 3px 9px; border-radius: 999px;
  background: color-mix(in srgb, var(--bad) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--bad) 28%, transparent);
  color: var(--text-dim, var(--text));
}
.cmp-flag-over {
  font-size: 11px; font-weight: 800; padding: 3px 9px; border-radius: 999px;
  background: color-mix(in srgb, var(--text) 8%, transparent); color: var(--dim);
}
.cmp-flags-none { font-size: 12px; font-weight: 700; color: var(--good); }
.cmp-na { font-size: 13px; color: var(--muted, var(--dim)); }

/* ─── Pro lock chip (gated rows for non-Pro) ─── */
.pb-pro-lock {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 11px; border-radius: 999px;
  font-size: 11.5px; font-weight: 850; letter-spacing: 0.2px;
  text-decoration: none; white-space: nowrap;
  color: var(--accent-hi, var(--accent));
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  transition: background .12s, filter .12s, transform .12s;
}
.pb-pro-lock:hover {
  background: color-mix(in srgb, var(--accent) 20%, transparent);
  filter: brightness(1.04); transform: translateY(-1px);
}
.pb-pro-lock:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 60%, transparent);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .pb-pro-lock { transition: none !important; }
}

/* per-product action footer cell */
.cmp-actions { display: flex; flex-direction: column; gap: 7px; }
.cmp-actions a {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 9px 12px; border-radius: var(--radius-sm, 10px);
  font-size: 12.5px; font-weight: 800; text-decoration: none;
  transition: filter .12s, background .12s;
}
.cmp-actions a.primary { background: var(--accent); color: var(--bg, #07080b); }
.cmp-actions a.primary:hover { filter: brightness(1.07); }
.cmp-actions a.secondary {
  background: color-mix(in srgb, var(--text) 6%, transparent);
  color: var(--text); border: 1px solid var(--border-2, var(--border));
}
.cmp-actions a.secondary:hover { background: color-mix(in srgb, var(--text) 11%, transparent); }

/* ─── Характеристики (collapsible side-by-side specs) ─── */
.cmp-specs {
  margin-top: 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl, 28px);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(14px) saturate(1.1);
  overflow: hidden;
}
.cmp-specs-summary {
  display: flex; align-items: center; gap: 10px;
  padding: 16px 20px; cursor: pointer;
  list-style: none; user-select: none;
  font-weight: 800; color: var(--text);
}
.cmp-specs-summary::-webkit-details-marker { display: none; }
.cmp-specs-summary:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 60%, transparent);
  outline-offset: -2px; border-radius: var(--radius-xl, 28px);
}
.cmp-specs-title {
  font-size: 15px; font-weight: 850; letter-spacing: -0.01em;
}
.cmp-specs-meta {
  font-size: 11px; font-weight: 700; color: var(--dim);
  padding: 3px 9px; border-radius: 999px;
  background: color-mix(in srgb, var(--text) 7%, transparent);
  white-space: nowrap;
}
.cmp-specs-caret {
  margin-left: auto; flex: 0 0 auto;
  width: 9px; height: 9px;
  border-right: 2px solid var(--dim);
  border-bottom: 2px solid var(--dim);
  transform: rotate(45deg);
  transition: transform .2s cubic-bezier(0.16,1,0.3,1);
}
.cmp-specs[open] .cmp-specs-caret { transform: rotate(-135deg); }

.cmp-specs-scroll {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  border-top: 1px solid var(--border);
}
/* Reuse the .cmp-matrix grid (same --cmp-cols + column widths). */
.cmp-specs-grid { border-radius: 0; }

.cmp-spec-name {
  text-transform: none; letter-spacing: 0;
  font-size: 12.5px; font-weight: 700; color: var(--text-dim, var(--text));
  justify-content: center;
}
.cmp-spec-val {
  font-size: 13px; font-weight: 600; color: var(--text);
  line-height: 1.45; word-break: break-word;
}
/* Differences stand out; identical rows stay calm. */
.cmp-spec-val.is-differ {
  background: color-mix(in srgb, var(--accent) 5%, transparent);
  box-shadow: inset 3px 0 0 -0.5px color-mix(in srgb, var(--accent) 55%, transparent);
}
.cmp-spec-name.is-differ { color: var(--text); }

/* ─── Verdict end-cap banner ─── */
.cmp-endcap {
  display: flex; align-items: center; gap: 14px;
  margin-top: 18px; padding: 18px 22px;
  border-radius: var(--radius-lg, 20px);
  background:
    radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--good) 14%, transparent), transparent 60%),
    var(--surface);
  border: 1px solid color-mix(in srgb, var(--good) 40%, transparent);
}
.cmp-endcap .trophy {
  flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center; font-size: 22px;
  background: color-mix(in srgb, var(--good) 18%, transparent);
}
.cmp-endcap .txt { min-width: 0; }
.cmp-endcap .eyebrow { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; color: var(--good); }
.cmp-endcap .headline { font-size: 16px; font-weight: 800; color: var(--text); line-height: 1.35; margin-top: 2px; }
.cmp-endcap .headline b { color: var(--good); }

/* ─── Foot hint (preserved) ─── */
.cmp-foot {
  margin: 30px auto 0; text-align: center;
  color: var(--dim); font-size: 13px; line-height: 1.6;
}
.cmp-foot a { color: var(--accent); text-decoration: none; border-bottom: 1px dashed; }
.cmp-foot code {
  padding: 1px 6px; border-radius: 6px;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent-hi, var(--accent));
}

/* ─── Mobile: horizontal scroll, sticky rail ─── */
@media (max-width: 768px) {
  .cmp-wrap { padding: 0 12px; }
  .cmp-matrix {
    grid-template-columns: minmax(116px, 132px) repeat(var(--cmp-cols, 1), minmax(168px, 72vw));
  }
  .cmp-matrix-shell { border-radius: var(--radius-lg, 20px); }
  .cmp-endcap { flex-direction: column; text-align: center; align-items: center; }
  .cmp-cover { max-width: 168px; margin: 0 auto; }
}

/* ─── Reduced motion ─── */
@media (prefers-reduced-motion: reduce) {
  .cmp-gauge-fill, .cmp-bar-fill, .cmp-empty .cmp-cta,
  .cmp-specs-caret { transition: none !important; }
}