/* Таблица сравнения. На телефоне листается вбок, первый столбец закреплён. */

.cmp {
  margin: var(--space-5) 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
}

.cmp__table { min-width: 560px; font-size: var(--fs-sm); }

.cmp__table th,
.cmp__table td {
  padding: var(--space-3);
  border-bottom: 1px solid var(--color-border);
  text-align: center;
  vertical-align: top;
}

.cmp__table thead th { background: var(--color-primary-light); font-weight: var(--fw-bold); }
.cmp__table thead a { color: var(--color-primary-dark); text-decoration: none; }

.cmp__table tbody th {
  position: sticky;
  left: 0;
  min-width: 170px;
  background: var(--color-surface);
  text-align: left;
  font-weight: var(--fw-semibold);
}
.cmp__table .cmp__corner { position: sticky; left: 0; text-align: left; }

.cmp-yes { color: var(--color-success); font-weight: var(--fw-bold); font-size: var(--fs-lg); }
.cmp-no { color: var(--color-text-muted); }

.cmp__price td { font-weight: var(--fw-bold); font-size: var(--fs-base); white-space: nowrap; }

.shop-compare { margin: var(--space-5) 0 var(--space-6); }
.shop-compare__title { font-size: var(--fs-xl); }
.shop-compare__note { color: var(--color-text-soft); }

.related-compare { margin-top: var(--space-7); }
.related-compare h2 { font-size: var(--fs-xl); }
.related-compare__list { columns: 1; }

@media (min-width: 700px) {
  .related-compare__list { columns: 2; }
}