/* Compare page — reuses the site.js PAGE_CSS variables (--bg,--panel,--panel2,--line,--ink,--mut,--acc,--accD) */
:root{--good:#7FD99A;--ok:#F2C46B;--bad:#FF8A7A;--faint:#737C90;--line2:#344059}
.cmp-page{margin-top:26px}
.cmp-picker{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:18px 20px;margin-bottom:22px}
.cmp-picker-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.cmp-picker-top h2{font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:var(--mut);font-weight:700}
.cmp-count{font-size:13px;color:var(--faint)}
.cmp-count b{color:var(--ink)}
.cmp-chips{display:flex;flex-wrap:wrap;gap:8px}
.cmp-chip{display:flex;align-items:center;gap:8px;border:1px solid var(--line2);background:var(--panel2);border-radius:999px;padding:8px 14px 8px 10px;font-size:14px;transition:border-color .15s,background .15s;color:var(--ink)}
.cmp-chip .dot{width:9px;height:9px;border-radius:50%;background:var(--faint);flex:0 0 auto}
.cmp-chip .pr{color:var(--faint);font-size:12.5px}
.cmp-chip:hover{border-color:var(--acc)}
.cmp-chip.sel{background:var(--accD);border-color:var(--acc)}
.cmp-chip.sel .dot{background:var(--acc)}
.cmp-chip.disabled{opacity:.35;pointer-events:none}
.cmp-chip .st{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:1px 6px;border-radius:5px}
.cmp-chip .st.new{background:rgba(79,209,197,.15);color:var(--acc)}
.cmp-chip .st.pre{background:rgba(242,196,107,.15);color:var(--ok)}
.cmp-chip .st.disc{background:rgba(255,138,122,.15);color:var(--bad)}
.cmp-targetbar{display:flex;align-items:center;gap:10px;margin-bottom:22px;flex-wrap:wrap}
.cmp-targetbar label{font-size:13px;color:var(--mut)}
.cmp-targetbar select{background:var(--panel2);color:var(--ink);border:1px solid var(--line2);border-radius:10px;padding:8px 12px;font-size:14px}
.cmp-empty{border:1px dashed var(--line2);border-radius:14px;padding:40px 20px;text-align:center;color:var(--mut)}
.cmp-tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:14px;background:var(--panel)}
table.cmp-table{border-collapse:collapse;width:100%;min-width:640px}
table.cmp-table th,table.cmp-table td{padding:12px 16px;border-bottom:1px solid var(--line);vertical-align:top;text-align:left}
table.cmp-table tr:last-child th,table.cmp-table tr:last-child td{border-bottom:0}
table.cmp-table th.cmp-rowlabel,table.cmp-table td.cmp-rowlabel{position:sticky;left:0;background:var(--panel);z-index:2;color:var(--mut);font-size:12.5px;text-transform:uppercase;letter-spacing:.04em;font-weight:700;min-width:130px;border-right:1px solid var(--line)}
table.cmp-table th.cmp-prodcol{min-width:210px;background:var(--panel2);position:sticky;top:0;z-index:1;border-left:1px solid var(--line)}
table.cmp-table td.cmp-prodcol{border-left:1px solid var(--line)}
.cmp-prodhead{display:flex;flex-direction:column;gap:6px}
.cmp-prodhead .rm{align-self:flex-end;color:var(--faint);font-size:18px;line-height:1;padding:2px 6px;border-radius:6px;background:none;border:0;cursor:pointer}
.cmp-prodhead .rm:hover{color:var(--bad);background:rgba(255,138,122,.1)}
.cmp-prodhead .nm{font-weight:700;font-size:16px;color:var(--ink)}
.cmp-prodhead .br{color:var(--faint);font-size:12.5px}
.cmp-prodhead .stbadge{align-self:flex-start;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:2px 7px;border-radius:5px;margin-top:2px}
.cmp-stbadge-new{background:rgba(79,209,197,.15);color:var(--acc)}
.cmp-stbadge-pre{background:rgba(242,196,107,.15);color:var(--ok)}
.cmp-stbadge-disc{background:rgba(255,138,122,.15);color:var(--bad)}
.cmp-best{background:rgba(127,217,154,.08);position:relative}
.cmp-best::before{content:"Best";position:absolute;top:4px;right:8px;font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--good)}
.cmp-val{font-size:15px;color:var(--ink)}
.cmp-val b{font-size:17px}
.cmp-strike{color:var(--faint);text-decoration:line-through;font-size:12.5px;margin-left:6px}
.cmp-offertag{display:block;font-size:11px;color:var(--ok);margin-top:2px}
.cmp-wtier-row{display:flex;align-items:center;gap:8px}
.cmp-wticon{width:18px;height:18px;flex:0 0 auto;stroke:var(--acc);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.cmp-wtier-name{font-size:12.5px;color:var(--mut)}
.cmp-featlist{list-style:none;font-size:13px;color:var(--mut);display:flex;flex-direction:column;gap:5px;padding:0}
.cmp-featlist li{padding-left:14px;position:relative}
.cmp-featlist li::before{content:"";position:absolute;left:0;top:7px;width:5px;height:5px;border-radius:50%;background:var(--acc)}
.cmp-scorebar{display:flex;align-items:center;gap:8px}
.cmp-scoretrack{flex:1;height:6px;border-radius:4px;background:var(--line2);overflow:hidden;min-width:60px}
.cmp-scorefill{height:100%;background:var(--acc);border-radius:4px}
.cmp-scoreval{font-size:13px;color:var(--mut);min-width:28px;text-align:right}
.cmp-noscore{color:var(--faint);font-size:13px}
.cmp-buycol{display:flex;flex-direction:column;gap:8px}
.cmp-buybtn{display:inline-flex;align-items:center;gap:6px;background:var(--acc);color:#04201d;font-weight:700;font-size:13.5px;padding:8px 14px;border-radius:999px;text-decoration:none}
.cmp-buybtn:hover{filter:brightness(1.08)}
.cmp-buybtn.alt{background:transparent;border:1px solid var(--line2);color:var(--ink)}
@media(max-width:640px){
  table.cmp-table th.cmp-rowlabel,table.cmp-table td.cmp-rowlabel{min-width:100px;font-size:11.5px}
  table.cmp-table th.cmp-prodcol{min-width:180px}
}