/* Super Gadget — интерактивное сравнение моделей (/sravnit/ + виджет .sg-compare) */
:root{--cmp-brand:#2563EB;--cmp-line:#e2e8f0;--cmp-surf:#fff;--cmp-ink:#0f1b30;--cmp-ink2:#475569;--cmp-best:#16a34a;--cmp-bestbg:#ecfdf3}
#compare-root{margin:28px 0 8px}
.cmp-h{font-size:clamp(20px,3.2vw,27px);font-weight:700;letter-spacing:-.01em;margin:0;color:var(--cmp-ink);line-height:1.25}

/* --- пустое состояние: плитки категорий --- */
.cmp-start{background:var(--cmp-surf);border:1px solid var(--cmp-line);border-radius:16px;padding:26px}
.cmp-tiles{display:grid;gap:12px;grid-template-columns:1fr;margin:18px 0 8px}
@media(min-width:560px){.cmp-tiles{grid-template-columns:repeat(3,1fr)}}
.cmp-tile{display:flex;align-items:center;gap:12px;text-align:left;background:#f8fafc;border:1.5px solid var(--cmp-line);border-radius:12px;padding:18px;font:inherit;cursor:pointer;color:var(--cmp-ink);min-height:64px;transition:border-color .18s,background .18s}
.cmp-tile:hover{border-color:var(--cmp-brand);background:#fff}
.cmp-tile:focus-visible{outline:2px solid var(--cmp-brand);outline-offset:2px}
.cmp-tile-ico{font-size:26px;line-height:1}
.cmp-tile-t{font-weight:700;font-size:15.5px;flex:1}
.cmp-tile-a{color:var(--cmp-brand);font-weight:700}
.cmp-hint{margin:14px 0 0;font-size:14.5px;color:var(--cmp-ink2)}
.cmp-hint a,.cmp-rlinks a{color:var(--cmp-brand);font-weight:600;text-decoration:none}
.cmp-hint a:hover,.cmp-rlinks a:hover{text-decoration:underline}
.cmp-rlinks{margin-top:14px;padding-top:14px;border-top:1px solid var(--cmp-line);display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;font-size:14px;color:var(--cmp-ink2)}

/* --- слоты выбора --- */
.cmp-build{background:var(--cmp-surf);border:1px solid var(--cmp-line);border-radius:16px;padding:24px}
.cmp-build-top{display:flex;flex-direction:column;gap:8px}
.cmp-sub{color:var(--cmp-ink2);font-size:14.5px;margin:6px 0 18px}
.cmp-slots{display:grid;gap:12px;grid-template-columns:1fr}
@media(min-width:620px){.cmp-slots{grid-template-columns:1fr 1fr}}
.cmp-slot{position:relative}
.cmp-slot-empty .cmp-search{width:100%;box-sizing:border-box;font:inherit;font-size:15px;padding:13px 14px;min-height:48px;border:1.5px solid var(--cmp-line);border-radius:11px;background:#f8fafc;color:var(--cmp-ink)}
.cmp-search:focus{outline:none;border-color:var(--cmp-brand);background:#fff}
.cmp-drop{position:absolute;z-index:20;left:0;right:0;top:calc(100% + 4px);background:#fff;border:1px solid var(--cmp-line);border-radius:12px;box-shadow:0 10px 30px rgba(15,27,48,.12);overflow:hidden;max-height:320px;overflow-y:auto}
.cmp-drop-i{display:flex;align-items:center;gap:11px;width:100%;text-align:left;background:none;border:0;border-bottom:1px solid #f1f5f9;padding:10px 12px;font:inherit;cursor:pointer;color:var(--cmp-ink)}
.cmp-drop-i:hover{background:#f8fafc}
.cmp-drop-n{flex:1;font-weight:600;font-size:14.5px}
.cmp-drop-p{font-size:13px;color:var(--cmp-ink2);white-space:nowrap}
.cmp-drop-no{padding:14px;color:var(--cmp-ink2);font-size:14px}
.cmp-thumb{width:40px;height:40px;border-radius:8px;background:#f1f5f9;display:inline-flex;align-items:center;justify-content:center;font-size:20px;overflow:hidden;flex:0 0 auto}
.cmp-thumb img{width:100%;height:100%;object-fit:cover}
.cmp-slot-picked{display:flex;align-items:center;gap:11px;background:#f8fafc;border:1.5px solid var(--cmp-brand);border-radius:11px;padding:9px 11px;min-height:48px}
.cmp-slot-name{font-weight:600;font-size:14.5px;flex:1;line-height:1.2}
.cmp-slot-price{font-size:13px;color:var(--cmp-ink2);white-space:nowrap}
.cmp-slot-x{appearance:none;background:none;border:0;font-size:22px;line-height:1;color:#94a3b8;cursor:pointer;padding:2px 6px;border-radius:8px}
.cmp-slot-x:hover{color:#ef4444}
.cmp-build-act{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:20px;padding-top:18px;border-top:1px solid var(--cmp-line)}

.cmp-btn{appearance:none;display:inline-flex;align-items:center;justify-content:center;gap:6px;font:inherit;font-size:14.5px;font-weight:600;min-height:44px;padding:11px 18px;border-radius:10px;border:1.5px solid var(--cmp-line);background:#fff;color:var(--cmp-ink);cursor:pointer;text-decoration:none;transition:border-color .18s,background .18s,transform .12s}
.cmp-btn:hover{border-color:var(--cmp-brand);color:var(--cmp-brand)}
.cmp-btn:active{transform:scale(.99)}
.cmp-btn--pri{background:var(--cmp-brand);border-color:var(--cmp-brand);color:#fff}
.cmp-btn--pri:hover{background:#1d4ed8;color:#fff}
.cmp-btn--pri:disabled{background:#cbd5e1;border-color:#cbd5e1;color:#fff;cursor:not-allowed}
.cmp-btn--ghost{background:none;border-style:dashed;margin-top:12px}
.cmp-link{background:none;border:0;font:inherit;font-size:14px;font-weight:600;color:var(--cmp-brand);cursor:pointer;text-decoration:none;padding:4px 0}
.cmp-link:hover{text-decoration:underline}

/* --- таблица сравнения --- */
.cmp-result-top{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:baseline;justify-content:space-between;margin-bottom:16px}
.cmp-toggle{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--cmp-ink2);cursor:pointer;white-space:nowrap}
.cmp-toggle input{width:17px;height:17px;accent-color:var(--cmp-brand)}
.cmp-tablewrap{overflow-x:auto;border:1px solid var(--cmp-line);border-radius:14px;-webkit-overflow-scrolling:touch}
.cmp-table{border-collapse:separate;border-spacing:0;width:100%;min-width:520px;background:var(--cmp-surf)}
.cmp-table th,.cmp-table td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--cmp-line);font-size:14px;vertical-align:top}
.cmp-table thead th{position:sticky;top:0;z-index:3;background:#f8fafc;border-bottom:2px solid var(--cmp-line)}
.cmp-corner,.cmp-rowh{position:sticky;left:0;z-index:2;background:#fff;min-width:150px;max-width:180px}
.cmp-table thead .cmp-corner{z-index:4;background:#f8fafc}
.cmp-rowh{font-weight:600;color:var(--cmp-ink);box-shadow:1px 0 0 var(--cmp-line)}
.cmp-corner-t{font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:#94a3b8}
.cmp-unit,.cmp-u{color:#94a3b8;font-weight:600;font-size:12px}
.cmp-col{min-width:150px}
.cmp-col-pic{width:100%;aspect-ratio:4/3;max-height:96px;background:#f1f5f9;border-radius:9px;display:flex;align-items:center;justify-content:center;overflow:hidden;margin-bottom:8px}
.cmp-col-pic img{width:100%;height:100%;object-fit:cover}
.cmp-col-ph{font-size:30px;opacity:.5}
.cmp-col-name{font-weight:700;font-size:15px;color:var(--cmp-ink);line-height:1.25}
.cmp-col-price{font-weight:700;font-size:14px;color:var(--cmp-brand);margin:3px 0 6px}
.cmp-col-src{font-size:13px;font-weight:600;color:var(--cmp-brand);text-decoration:none;white-space:nowrap}
.cmp-col-src:hover{text-decoration:underline}
.cmp-cell{color:var(--cmp-ink);font-weight:600}
.cmp-best{background:var(--cmp-bestbg);color:var(--cmp-best);font-weight:700}
.cmp-best::after{content:" ▲";font-size:10px;color:var(--cmp-best)}
.cmp-same td,tr.cmp-same .cmp-cell{color:#94a3b8;font-weight:500}
.cmp-yes{color:var(--cmp-best);font-weight:700}
.cmp-no{color:#94a3b8}
.cmp-verdict-row th,.cmp-verdict-row td{border-top:2px solid var(--cmp-line);background:#f8fafc}
.cmp-verdict{font-weight:500;color:var(--cmp-ink2);line-height:1.45;font-size:13.5px}
.cmp-result-act{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:20px}
.cmp-share-note{font-size:13.5px;color:var(--cmp-best);font-weight:600}
.cmp-empty{background:var(--cmp-surf);border:1px solid var(--cmp-line);border-radius:16px;padding:32px;text-align:center;color:var(--cmp-ink2)}
.cmp-empty a{color:var(--cmp-brand);font-weight:600}

/* --- встраиваемый виджет .sg-compare --- */
.sg-compare{margin:26px 0}
.cw-box{border:1.5px solid var(--cmp-line);border-radius:16px;overflow:hidden;background:var(--cmp-surf)}
.cw-head{padding:14px 18px 0}
.cw-eyebrow{font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--cmp-brand)}
.cw-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;padding:12px 0 0}
.cw-table{border-collapse:separate;border-spacing:0;width:100%;min-width:420px}
.cw-table th,.cw-table td{padding:9px 14px;text-align:left;font-size:13.5px;border-bottom:1px solid #f1f5f9}
.cw-table thead th{font-size:12px;color:var(--cmp-ink);font-weight:700;border-bottom:1.5px solid var(--cmp-line);vertical-align:bottom}
.cw-table tbody th{position:sticky;left:0;background:#fff;font-weight:600;color:var(--cmp-ink2);min-width:120px;box-shadow:1px 0 0 #f1f5f9}
.cw-name{display:block;font-weight:700}
.cw-price{display:block;font-size:12px;color:var(--cmp-brand);font-weight:700;margin-top:2px}
.cw-table td{font-weight:600;color:var(--cmp-ink)}
.cw-table td.cmp-best{background:var(--cmp-bestbg);color:var(--cmp-best)}
.cw-table tr.cmp-same td{color:#94a3b8;font-weight:500}
.cw-full{display:block;padding:13px 18px;background:#f8fafc;border-top:1px solid var(--cmp-line);font-size:14px;font-weight:700;color:var(--cmp-brand);text-decoration:none}
.cw-full:hover{background:#eff4ff}

@media(max-width:400px){.cmp-build,.cmp-start{padding:18px}.cmp-slots{grid-template-columns:1fr}}