/* BY HOME — сравнение товаров.
   Правка Светланы: «Сравнить товар можно добавить функцию» — кнопка и
   счётчик в каталоге были, но открывать было нечего.
   Переменные берутся из app.css (:root) — файл подключается только там,
   где каталог, поэтому дублировать цвета не нужно. */

.cmp{ position:fixed; inset:0; z-index:80; display:grid; place-items:center; padding:20px; }
.cmp[hidden]{ display:none; }
.cmp-back{ position:absolute; inset:0; background:rgba(20,18,14,.45); backdrop-filter:blur(2px); }
.cmp-card{ position:relative; background:#fff; border-radius:18px; width:100%; max-width:1100px;
  max-height:90vh; display:flex; flex-direction:column; overflow:hidden; box-shadow:0 24px 60px -12px rgba(20,18,14,.35); }

.cmp-head{ display:flex; align-items:center; gap:14px; padding:18px 22px; border-bottom:1px solid var(--line); flex:none; }
.cmp-head h2{ font-size:19px; font-weight:800; }
.cmp-head .cmp-count{ font-size:13px; color:var(--soft); }
.cmp-x{ margin-left:auto; width:36px; height:36px; border-radius:50%; display:grid; place-items:center;
  font-size:15px; color:var(--soft); flex:none; }
.cmp-x:hover{ background:var(--panel); color:var(--ink); }

.cmp-diff{ display:flex; align-items:center; gap:8px; font-size:12.5px; color:#43423c; cursor:pointer; user-select:none; }
.cmp-diff input{ width:15px; height:15px; accent-color:var(--ink); }

.cmp-body{ overflow:auto; flex:1; }
.cmp-empty{ padding:40px 22px; text-align:center; color:var(--soft); font-size:14px; }

.cmp-table{ border-collapse:collapse; width:100%; font-size:13.5px; }
.cmp-table th,.cmp-table td{ padding:11px 14px; text-align:left; vertical-align:top;
  border-bottom:1px solid var(--line); }
/* первая колонка — названия характеристик, липкая при горизонтальной прокрутке */
.cmp-table th.cmp-label{ position:sticky; left:0; background:var(--panel); font-weight:600; color:#43423c;
  width:180px; min-width:150px; z-index:1; }
.cmp-table td{ min-width:200px; color:#34332e; }
.cmp-table tr.cmp-differs td{ background:#fffaf3; }

.cmp-prod{ position:sticky; top:0; background:#fff; z-index:2; }
.cmp-prod td{ border-bottom:1px solid var(--line2); }
.cmp-prod img{ width:100%; max-width:150px; aspect-ratio:1; object-fit:contain; background:var(--panel);
  border-radius:10px; display:block; margin-bottom:8px; }
.cmp-prod .cmp-name{ font-weight:600; line-height:1.35; margin-bottom:5px; display:block; color:var(--ink); }
.cmp-prod .cmp-name:hover{ color:var(--orange-d); }
.cmp-prod .cmp-price{ font-weight:800; font-size:16px; font-variant-numeric:tabular-nums; margin-bottom:8px; }
.cmp-prod .cmp-acts{ display:flex; gap:6px; flex-wrap:wrap; }
.cmp-prod .cmp-buy{ background:var(--ink); color:#fff; border-radius:9px; padding:8px 14px; font-weight:700; font-size:12.5px; }
.cmp-prod .cmp-buy:hover{ background:#000; }
.cmp-prod .cmp-buy.added{ background:var(--green); }
.cmp-prod .cmp-drop{ border:1.5px solid var(--line2); border-radius:9px; padding:7px 12px; font-size:12.5px; color:var(--soft); }
.cmp-prod .cmp-drop:hover{ border-color:var(--ink); color:var(--ink); }

@media(max-width:760px){
  .cmp{ padding:0; }
  /* Кнопка закрытия — всегда в правом верхнем углу: на iPhone SE шапка окна
     не помещалась в ширину, и ✕ уезжал за край экрана */
  .cmp-head{ flex-wrap:wrap; padding-right:60px; position:relative; }
  .cmp-x{ position:absolute; top:12px; right:12px; width:40px; height:40px; }
  .cmp-card{ max-width:none; max-height:100vh; border-radius:0; height:100vh; }
  .cmp-table th.cmp-label{ width:120px; min-width:110px; font-size:12.5px; }
  .cmp-table td{ min-width:160px; }
  .cmp-prod img{ max-width:110px; }
}