/* =========================================================================
   compare.css — W59: «Сравнение» — кнопка, панель, тост.
   Подключается на index.html и product.html. Префикс .cmp-.
   ========================================================================= */

/* Иконка на карточке выдачи: слева от сердечка (в карточке нет иконки
   корзины, поэтому базовый right:98px из style.css не используется).
   Селектор с .card-image-wrapper — специфичность выше глобального,
   style.css НЕ правим. */
.card-image-wrapper .icon-btn--compare { right: 54px; }

/* Кнопка на странице товара — в ряду .pp-hero__actions */
.cmp-pp-btn {
  padding: 16px 24px;
  background: transparent;
  border: 1px solid #E8E6F0;
  color: #0E0E14;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color .15s, color .15s;
}
.cmp-pp-btn:hover { border-color: #7C5CFF; color: #7C5CFF; }
.cmp-pp-btn.active { background: #0E0E14; color: #fff; border-color: #0E0E14; }
@media (max-width: 899px) { .cmp-pp-btn { width: 100%; } }

/* Плавающая панель — слева снизу (не конфликтует с .pp-asi-float справа снизу) */
.cmp-panel {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 900;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: #0E0E14;
  color: #fff;
  border-radius: 14px;
  box-shadow: 0 12px 32px rgba(14,14,20,.28);
  box-sizing: border-box;
  max-width: min(520px, calc(100vw - 32px));
}
.cmp-panel[hidden] { display: none; }
.cmp-panel__label { font-size: 13px; color: rgba(255,255,255,.72); }
.cmp-panel__count {
  min-width: 22px; height: 22px; padding: 0 6px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; background: #7C5CFF; font-size: 12px; font-weight: 600;
}
.cmp-panel__thumbs { display: inline-flex; align-items: center; gap: 4px; }
.cmp-panel__thumb { width: 30px; height: 30px; border-radius: 7px; overflow: hidden; background: rgba(255,255,255,.1); display: inline-block; }
.cmp-panel__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cmp-panel__more { font-size: 12px; color: rgba(255,255,255,.72); }
.cmp-panel__go {
  padding: 9px 14px; border: 0; border-radius: 10px; cursor: pointer;
  background: #7C5CFF; color: #fff; font-size: 13px; font-weight: 600;
}
.cmp-panel__go:hover { background: #6b4be0; }
.cmp-panel__clear {
  width: 30px; height: 30px; border: 0; border-radius: 8px; cursor: pointer;
  background: rgba(255,255,255,.12); color: #fff; font-size: 14px; line-height: 1;
}
.cmp-panel__clear:hover { background: rgba(255,255,255,.2); }

/* Тост-подсказка над панелью */
.cmp-toast {
  position: fixed; left: 16px; bottom: 76px; z-index: 901;
  max-width: min(360px, calc(100vw - 32px));
  padding: 10px 14px; border-radius: 12px;
  background: rgba(14,14,20,.94); color: #fff; font-size: 13px;
  box-shadow: 0 10px 26px rgba(14,14,20,.28);
  opacity: 0; transform: translateY(6px); pointer-events: none;
  transition: opacity .18s, transform .18s;
}
.cmp-toast.is-visible { opacity: 1; transform: none; }

@media (max-width: 699px) {
  .cmp-panel__thumbs { display: none; }
  .cmp-panel { max-width: calc(100vw - 32px); }
  body.view-product .cmp-panel { max-width: calc(100vw - 96px); }
  .cmp-toast { bottom: 72px; }
}

/* =========================================================================
   W60: таблица «Сравнение характеристик» (reviewito.html, ?mode=compare).
   Префикс .cmpt-. Горизонтальный скролл колонок на мобиле.
   ========================================================================= */
.rv-compare[hidden] { display: none; }
.cmpt-head-actions { display: inline-flex; align-items: center; gap: 10px; }
.cmpt-add, .cmpt-clear {
  border: 1px solid #E8E6F0; background: #fff; color: #0E0E14;
  border-radius: 10px; padding: 7px 14px; font-size: 13px; font-weight: 500;
  cursor: pointer; text-decoration: none; line-height: 1.2;
}
.cmpt-add:hover, .cmpt-clear:hover { border-color: #7C5CFF; color: #7C5CFF; }
.cmpt-clear { color: #B4453A; }
.cmpt-clear:hover { border-color: #B4453A; color: #B4453A; }

.cmpt-body { margin-top: 4px; }

/* Пусто */
.cmpt-empty {
  background: #fff; border: 1px dashed var(--border, #E8E6F0); border-radius: 20px;
  padding: 36px 24px; text-align: center;
}
.cmpt-empty__text { font-size: 15px; color: var(--text-muted, #6B7280); margin: 0 0 14px; }
.cmpt-empty__link { font-size: 14px; color: #7C5CFF; text-decoration: none; font-weight: 500; }

/* Загрузка */
.cmpt-loading { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.cmpt-loading__note { font-size: 13px; color: var(--text-muted, #6B7280); }
.cmpt-spinner {
  width: 18px; height: 18px; border-radius: 50%; flex: none;
  border: 2px solid #E4DFFB; border-top-color: #7C5CFF; animation: cmpt-spin .8s linear infinite;
}
@keyframes cmpt-spin { to { transform: rotate(360deg); } }
.cmpt-skel-grid { display: grid; gap: 12px; grid-template-columns: repeat(var(--cmpt-cols, 2), minmax(0, 1fr)); }
.cmpt-skel-col { background: #fff; border: 1px solid var(--border, #E8E6F0); border-radius: 16px; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.cmpt-skel { display: block; background: #EEEBF7; border-radius: 8px; }
.cmpt-skel--img { height: 110px; }
.cmpt-skel--line { height: 12px; }
.cmpt-skel--short { width: 55%; }

/* Горизонтальный скролл колонок */
.cmpt-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
.cmpt-grid {
  display: grid;
  grid-template-columns: minmax(150px, 1.1fr) repeat(var(--cmpt-cols, 2), minmax(150px, 1fr));
  border: 1px solid var(--border, #E8E6F0); border-radius: 18px; overflow: hidden;
  background: #fff;
  /* W60-fix: overflow:hidden (для скругления) не давал .cmpt-scroll видеть
     переполнение. width:max-content + min-width:100% → на десктопе тянется
     по контейнеру, на мобиле расширяется по контенту и скроллится. */
  width: max-content;
  min-width: 100%;
}
.cmpt-grid.cmpt-collapsed .cmpt-extra { display: none; }

.cmpt-corner { padding: 12px 14px; background: #FAFAFF; border-bottom: 1px solid var(--border, #E8E6F0); }
.cmpt-cat { font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #6A48FF; }

.cmpt-col {
  position: relative; padding: 14px 14px 12px; background: #FAFAFF;
  border-bottom: 1px solid var(--border, #E8E6F0); border-left: 1px solid var(--border, #E8E6F0);
  display: flex; flex-direction: column; gap: 8px; min-width: 150px;
}
.cmpt-corner + .cmpt-col { border-left: 0; }
.cmpt-col--off { opacity: .72; background: #FCF9F2; }
.cmpt-col__remove {
  position: absolute; top: 8px; right: 8px; width: 24px; height: 24px;
  border: 0; border-radius: 8px; cursor: pointer; line-height: 1;
  background: rgba(14,14,20,.06); color: #6B7280; font-size: 15px;
}
.cmpt-col__remove:hover { background: rgba(180,69,58,.14); color: #B4453A; }
.cmpt-col__img {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 120px; border-radius: 12px; overflow: hidden; background: #fff;
}
.cmpt-col__img img { max-width: 100%; max-height: 120px; object-fit: contain; display: block; }
.cmpt-col__noimg { width: 60px; height: 60px; border-radius: 10px; background: #EEEBF7; }
.cmpt-col__name {
  font-size: 13.5px; font-weight: 600; color: var(--text, #0E0E14); text-decoration: none; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.cmpt-col__name:hover { color: #7C5CFF; }
.cmpt-col__meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.cmpt-col__src { font-size: 11.5px; color: var(--text-light, #9CA3AF); }
.cmpt-col__price { font-size: 15px; font-weight: 700; color: var(--text, #0E0E14); margin-left: auto; }
.cmpt-col__off { font-size: 11px; font-weight: 600; color: #B4453A; }

.cmpt-group {
  grid-column: 1 / -1; padding: 9px 14px; background: #F4F2FB;
  font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-light, #9CA3AF); border-bottom: 1px solid var(--border, #E8E6F0);
}
.cmpt-row { display: contents; }
.cmpt-row__name {
  padding: 11px 14px; font-size: 13px; color: var(--text-muted, #6B7280);
  border-bottom: 1px solid var(--border, #E8E6F0); background: #fff;
}
.cmpt-cell {
  padding: 11px 14px; font-size: 13.5px; color: var(--text, #0E0E14);
  border-bottom: 1px solid var(--border, #E8E6F0); border-left: 1px solid var(--border, #E8E6F0);
  word-break: break-word;
}
.cmpt-row .cmpt-row__name + .cmpt-cell { border-left: 0; }
.cmpt-cell--miss { color: var(--text-light, #9CA3AF); }

.cmpt-toggle {
  grid-column: 1 / -1; margin: 0; padding: 12px 14px; border: 0; cursor: pointer;
  background: #FAFAFF; color: #6A48FF; font-size: 13px; font-weight: 600; text-align: left;
  border-bottom: 1px solid var(--border, #E8E6F0);
}
.cmpt-toggle:hover { background: #F3F0FE; }

.cmpt-warn { margin: 10px 2px 0; font-size: 12.5px; color: var(--text-muted, #6B7280); }

.cmpt-error {
  background: #fff; border: 1px solid var(--border, #E8E6F0); border-radius: 18px; padding: 22px;
}
.cmpt-error__text { font-size: 14.5px; color: var(--text, #0E0E14); margin: 0; }
.cmpt-diag { margin: 12px 0 0; padding-left: 18px; font-size: 13px; color: var(--text-muted, #6B7280); }

@media (max-width: 699px) {
  .cmpt-grid { grid-template-columns: minmax(132px, 1fr) repeat(var(--cmpt-cols, 2), minmax(140px, 1fr)); }
  .cmpt-col__img { height: 96px; }
  .cmpt-col__img img { max-height: 96px; }
  .rv-compare .rv-section__head { margin: 28px 0 14px; }
  .rv-compare .rv-section__title { font-size: 22px; }
}

/* =========================================================================
   W63-AS-36: мост «ИИ-карточка ↔ колонка таблицы» (reviewito, mode=compare).
   Подсветка пары строго по refs source+source_id; имена не используются.
   ========================================================================= */
.rv-cmp--linked { cursor: pointer; transition: box-shadow .18s, transform .18s; }
.rv-cmp--linked:hover { box-shadow: 0 8px 24px rgba(124,92,255,.16); }
.rv-cmp--active { box-shadow: 0 10px 28px rgba(124,92,255,.26); }
.cmpt-col--linked {
  outline: 2px solid #7C5CFF;
  outline-offset: -2px;
  background: #F3F0FE;
  transition: background .18s, outline-color .18s;
}