table.compare thead th{ background:var(--paper); position:sticky; top:0; }
table.compare .attr-label{ color:var(--muted); white-space:nowrap; font-weight:600; }
.compare-thumb{ display:block; width:96px; height:96px; margin:0 0 10px; border-radius:var(--radius); overflow:hidden; background:var(--surface); }
.compare-thumb img{ width:100%; height:100%; object-fit:contain; }

table.compare .compare-group-row th{
  background:var(--paper); position:sticky; top:37px;
  text-align:left; font-size:12px; letter-spacing:.04em; text-transform:uppercase;
  color:var(--ink); font-weight:600; padding:10px 12px;
}
table.compare .compare-group-icon{ display:inline-flex; align-items:center; justify-content:center; width:16px; height:16px; color:var(--brand); margin-right:8px; vertical-align:-3px; }
table.compare .compare-group-icon svg{ width:14px; height:14px; display:block; }

table.compare tr.row-highlight-diff td,
table.compare tr.row-highlight-diff td.attr-label{ background:var(--danger-bg); box-shadow:inset 3px 0 0 var(--danger); }
table.compare tr.row-highlight-same td,
table.compare tr.row-highlight-same td.attr-label{ background:var(--brand-soft); box-shadow:inset 3px 0 0 var(--brand); }
.compare-view-toggle .btn.active{ color:#fff; background:var(--brand); border-color:var(--brand); }