/* =========================================================
   PAYLANCE — сравнение: кнопка на карточке, нижняя панель, страница
   ========================================================= */
.pl-cmp { position:absolute; left:10px; bottom:10px; z-index:3; display:inline-flex; align-items:center; gap:6px; height:28px; padding:0 11px 0 7px; border:0; border-radius:980px; background:rgba(255,255,255,.94); color:#1d1d1f; font:inherit; font-size:12px; font-weight:600; cursor:pointer; box-shadow:0 1px 4px rgba(0,0,0,.14); }
.pl-cmp i { width:16px; height:16px; border-radius:5px; border:1.5px solid #c7c7cc; display:grid; place-items:center; color:transparent; background:#fff; }
.pl-cmp i svg { width:10px; height:10px; }
.pl-cmp.is-on i { background:#8e8474; border-color:#8e8474; color:#fff; }

.pl-cmpbar { position:fixed; left:50%; bottom:20px; z-index:950; transform:translateX(-50%); display:flex; align-items:center; gap:14px; width:min(640px, calc(100vw - 32px)); box-sizing:border-box; padding:10px 10px 10px 20px; border-radius:18px; background:#1d1d1f; color:#fff; box-shadow:0 20px 50px -12px rgba(0,0,0,.45); font-size:14px; }
.pl-cmpbar[hidden] { display:none; }
.pl-cmpbar__txt { flex:1; min-width:0; color:#a1a1a6; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pl-cmpbar__txt b { color:#fff; }
.pl-cmpbar__hide { border:0; background:none; color:#a1a1a6; font:inherit; font-size:14px; font-weight:500; cursor:pointer; padding:0 6px; }
.pl-cmpbar__hide:hover { color:#fff; }
.pl-cmpbar__go { display:inline-flex; align-items:center; height:40px; padding:0 20px; border-radius:980px; background:#fff; color:#1d1d1f !important; font-weight:600; text-decoration:none; }
.pl-cmpbar__go.is-off { pointer-events:none; opacity:.45; }
body.has-cmpbar .pp-bar:not([hidden]) { bottom:0; }
@media (max-width:900px) { body.pp-page.has-cmpbar .pl-cmpbar { bottom:84px; } }

/* ---------- страница сравнения ---------- */
body.cmp-page { --c-ink:#1d1d1f; --c-muted:#6e6e73; --c-faint:#8e8e93; --c-line:#e0e0e5; --c-green:#248a3d; --c-green-soft:#e8f7ec; --c-ti:#6f6657; --c-ti-soft:#f1ede6; background:#f5f5f7; color:var(--c-ink); }
.cmp-wrap { max-width:1240px; margin:0 auto; padding:18px 24px 64px; box-sizing:border-box; }
.cmp-head { display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:16px; }
.cmp-back { font-size:14px; color:var(--c-muted); text-decoration:none; }
.cmp-back:hover { color:var(--c-ink); }
.cmp-title { margin:0; flex:1; font-size:28px; font-weight:700; letter-spacing:-.6px; }
.cmp-diff { display:inline-flex; align-items:center; gap:8px; height:38px; padding:0 14px 0 8px; border:1px solid var(--c-line); border-radius:980px; background:#fff; font-size:14px; font-weight:500; cursor:pointer; user-select:none; }
.cmp-diff input { appearance:none; width:34px; height:20px; border-radius:980px; background:#d2d2d7; position:relative; margin:0; cursor:pointer; transition:background .15s; }
.cmp-diff input::after { content:""; position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:50%; background:#fff; transition:left .15s; }
.cmp-diff input:checked { background:var(--c-ti-fill, #8e8474); }
.cmp-diff input:checked::after { left:16px; }

.cmp-sum { display:grid; grid-template-columns:200px repeat(var(--n), minmax(0,1fr)); gap:0; background:#fff; border:1px solid var(--c-line); border-radius:22px; padding:18px 20px; margin-bottom:16px; align-items:center; }
.cmp-save small { display:block; font-size:11px; font-weight:700; letter-spacing:1.2px; text-transform:uppercase; color:var(--c-muted); }
.cmp-save b { display:block; font-size:30px; font-weight:700; letter-spacing:-.6px; margin-top:2px; font-variant-numeric:tabular-nums; }
.cmp-save span { font-size:13px; font-weight:600; color:var(--c-green); }
.cmp-item { display:grid; grid-template-columns:56px minmax(0,1fr) auto; gap:12px; align-items:center; padding-left:18px; border-left:1px solid #f0f0f3; min-width:0; }
.cmp-item__img { width:56px; height:56px; border-radius:12px; background:#f2f2f5; overflow:hidden; display:grid; place-items:center; }
.cmp-item__img img { width:100%; height:100%; object-fit:contain; }
.cmp-item__txt { min-width:0; }
.cmp-item__txt a { display:block; font-size:14px; font-weight:600; color:inherit; text-decoration:none; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cmp-item__txt b { display:block; font-size:20px; font-weight:700; font-variant-numeric:tabular-nums; }
.cmp-tag { display:inline-flex; align-items:center; height:20px; padding:0 7px; border-radius:6px; font-size:11px; font-weight:700; letter-spacing:.4px; background:#1d1d1f; color:#fff; margin-right:6px; vertical-align:2px; }
.cmp-tag--used { background:#fff; color:#1d1d1f; border:1px solid #1d1d1f; }
.cmp-x { width:28px; height:28px; border-radius:50%; border:1px solid var(--c-line); background:#fff; cursor:pointer; color:var(--c-muted); font-size:13px; }
.cmp-x:hover { color:var(--c-ink); border-color:#c7c7cc; }

.cmp-grid { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:16px; }
.cmp-sec { background:#fff; border:1px solid var(--c-line); border-radius:20px; padding:16px 20px 8px; }
.cmp-sec[hidden] { display:none; }
.cmp-row { display:grid; grid-template-columns:150px repeat(var(--n), minmax(0,1fr)); gap:14px; padding:10px 0; border-top:1px solid #f0f0f3; font-size:14px; align-items:start; }
.cmp-row--head { border-top:0; padding-top:0; font-size:11px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:var(--c-faint); align-items:end; }
.cmp-row--head > span:first-child { font-size:15px; letter-spacing:0; text-transform:none; color:var(--c-ink); }
.cmp-row[hidden] { display:none; }
.cmp-row > span:first-child { color:var(--c-muted); font-weight:500; }
.cmp-row b { font-weight:600; }
.cmp-row small { display:block; font-size:12px; color:var(--c-faint); margin-top:2px; }
.cmp-good { color:var(--c-green) !important; }
.cmp-good::after { content:" ●"; font-size:9px; vertical-align:2px; }

.cmp-pick { margin-top:16px; background:#fff; border:1px solid var(--c-line); border-radius:20px; padding:16px 20px; display:grid; grid-template-columns:150px repeat(var(--n), minmax(0,1fr)); gap:14px; align-items:center; }
.cmp-pick > b { font-size:15px; }
.cmp-pick__cell { display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:14px; }
.cmp-pick__cell em { font-style:normal; color:var(--c-green); font-weight:600; }
.cmp-btn { display:inline-flex; align-items:center; justify-content:center; height:40px; padding:0 18px; border-radius:980px; font-size:14px; font-weight:600; text-decoration:none; white-space:nowrap; }
.cmp-btn--dark { background:var(--c-ink); color:#fff !important; }
.cmp-btn--ghost { background:#fff; border:1px solid var(--c-ink); color:var(--c-ink) !important; }

.cmp-empty { text-align:center; padding:64px 20px; background:#fff; border:1px solid var(--c-line); border-radius:22px; }
.cmp-empty h2 { margin:0 0 6px; font-size:22px; }
.cmp-empty p { margin:0 0 18px; color:var(--c-muted); }

@media (max-width:900px) {
  .cmp-wrap { padding:14px 16px 48px; }
  .cmp-title { font-size:22px; flex-basis:100%; order:3; }
  .cmp-grid { grid-template-columns:1fr; }
  .cmp-sum { grid-template-columns:1fr; gap:12px; }
  .cmp-item { padding-left:0; border-left:0; border-top:1px solid #f0f0f3; padding-top:12px; }
  .cmp-row, .cmp-pick { grid-template-columns:96px repeat(var(--n), minmax(0,1fr)); gap:10px; font-size:13px; }
  .cmp-pick__cell { flex-direction:column; align-items:flex-start; }
}