/* Страница сравнения: «Коротко», сравнительные таблицы и выровненная шапка.
   Старые стили страницы — в custom.css (.cmp-*), здесь только новые блоки .cmp2-*
   и точечные поправки поверх старых. Файл подключается только там, где выводится
   этот шаблон.

   Размеры и цвета — из стиля сайта: заголовки как .h2 (proxima-nova_semibold 24px),
   рамки --border-grey, подложки --geo-panel, зеленый --geo-green-ink, как в таблице
   «Характеристики» карточки товара. Значения крупнее подписей (16-20px против 15px):
   по сверке с G2 09.10.2026 у нас все было 13-14px и читалось «мелко».

   Ширина колонки подписей одна на всю страницу (--cmp2-label): по ней выровнены
   и шапка с продуктами, и все таблицы, и отзывы со скриншотами. */

.cmp2-n1, .cmp2-n2 { --cmp2-label: 240px; }
.cmp2-n3           { --cmp2-label: 210px; }
.cmp2-n4           { --cmp2-label: 190px; }

/* ── Заголовки ───────────────────────────────────────────────── */
.cmp-body h2.cmp2-h2,
.cmp-alternatives-wrap h2.h2 {
    font-family: var(--font-semibold, 'proxima-nova_semibold', Arial, sans-serif);
    font-weight: normal; font-size: 24px; line-height: 1.25;
    color: var(--text-black, #222325); margin: 0 0 20px; padding: 0;
}

/* ── «Коротко» ───────────────────────────────────────────────── */
.cmp2-summary {
    background: var(--geo-panel, #f4f5f8);
    border-radius: 12px;
    padding: 28px 32px;
    margin: 0 0 48px;
}
.cmp-body h2.cmp2-summary__title { margin-bottom: 14px; }
.cmp2-summary__list { list-style: none; margin: 0; padding: 0; }
.cmp2-summary__list li {
    position: relative; padding: 0 0 0 22px; margin: 0 0 10px;
    font-size: 16px; line-height: 1.6; color: var(--text-black, #222325);
}
.cmp2-summary__list li:last-child { margin-bottom: 0; }
.cmp2-summary__list li::before {
    content: ''; position: absolute; left: 3px; top: .66em;
    width: 7px; height: 7px; border-radius: 50%; background: var(--accent-blue, #273d94);
}
.cmp2-summary__list a { color: var(--accent-blue, #273d94); }

/* У шрифтов сайта жирность — отдельное семейство, font-weight его не включает. */
.cmp2-summary__list strong,
.cmp-feat-diff__text strong,
.cmp2-row--head,
.cmp2-score,
.cmp2-subscore,
.cmp2-price,
.cmp2-big,
.cmp2-tag,
.cmp2-more__toggle,
.cmp2-row--group .cmp2-row__label,
.cmp2-head__add,
.cmp2-method strong {
    font-family: var(--font-semibold, 'proxima-nova_semibold', Arial, sans-serif);
    font-weight: normal;
}

/* ── Таблица сравнения: строка = параметр, ячейки = продукты ─── */
.cmp2-table {
    border: 1px solid var(--border-grey, #ededee); border-radius: 12px; overflow: hidden;
    margin: 0 0 48px; background: #fff;
}
.cmp2-row {
    display: grid; align-items: center; column-gap: 20px;
    padding: 16px 20px; border-top: 1px solid var(--border-grey, #ededee);
    font-size: 16px; line-height: 1.45; color: var(--text-black, #222325);
}
.cmp2-table > .cmp2-row:first-child,
.cmp2-table > .cmp2-row--head + .cmp2-row { border-top: none; }
.cmp2-table--1 .cmp2-row { grid-template-columns: var(--cmp2-label) minmax(0, 1fr); }
.cmp2-table--2 .cmp2-row { grid-template-columns: var(--cmp2-label) repeat(2, minmax(0, 1fr)); }
.cmp2-table--3 .cmp2-row { grid-template-columns: var(--cmp2-label) repeat(3, minmax(0, 1fr)); }
.cmp2-table--4 .cmp2-row { grid-template-columns: var(--cmp2-label) repeat(4, minmax(0, 1fr)); }

.cmp2-row__label { color: var(--text-grey, #62646a); font-size: 15px; }
.cmp2-row__cell { min-width: 0; overflow-wrap: anywhere; }

/* Названия продуктов над столбцами нужны только на телефоне: на компьютере
   над таблицей стоит выровненная шапка с логотипами. */
.cmp2-row--head { display: none; }
.cmp2-row--sub { padding-top: 10px; padding-bottom: 10px; }
.cmp2-row--sub .cmp2-row__label { padding-left: 16px; }
.cmp2-row--text { align-items: start; }
.cmp2-row--text .cmp2-row__cell { font-size: 15px; line-height: 1.55; color: #3c3e44; }
.cmp2-row--group { background: #f8f9fb; padding-top: 10px; padding-bottom: 10px; }
.cmp2-row--group .cmp2-row__label {
    grid-column: 1 / -1;
    font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: #7d8190;
}
.cmp2-row--diff { background: #fffaf0; }
.cmp2-row--diff .cmp2-row__label { color: var(--text-black, #222325); }

/* Значения */
.cmp2-na { color: var(--text-light-grey, #a3a5ac); }
.cmp2-price,
.cmp2-big { font-size: 18px; }
.cmp2-muted-link {
    display: block; margin-top: 4px; font-size: 14px;
    color: var(--accent-blue, #273d94); text-decoration: underline; text-underline-offset: 2px;
}
.cmp2-muted-link:hover { text-decoration: none; }
.cmp2-plain-link { color: inherit; text-decoration: underline dotted; text-underline-offset: 4px; }
.cmp2-plain-link:hover { color: var(--accent-blue, #273d94); }

.cmp2-score { font-size: 20px; white-space: nowrap; vertical-align: middle; }
.cmp2-score__star { color: var(--accent-orange, #ff9b3c); margin-right: 4px; }
.cmp2-subscore { font-size: 16px; white-space: nowrap; vertical-align: middle; }
.cmp2-bar {
    display: inline-block; vertical-align: middle; width: 140px; max-width: 50%; height: 8px;
    border-radius: 4px; background: #eef0f4; margin-right: 10px; overflow: hidden;
}
.cmp2-bar__fill { display: block; height: 100%; background: #b3bcd9; border-radius: 4px; }
.cmp2-bar__fill.is-best { background: #27ae60; }
.cmp2-tag {
    display: inline-block; vertical-align: middle; margin-left: 8px;
    padding: 2px 9px; border-radius: 10px;
    background: #e5f4eb; color: var(--geo-green-ink, #1c7a43);
    font-size: 13px; line-height: 18px; white-space: nowrap;
}

/* Есть / нет / не указано */
.cmp2-check { display: inline-flex; align-items: center; gap: 8px; vertical-align: middle; }
.cmp2-ico { display: block; flex: 0 0 auto; }
.cmp2-ico path { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cmp2-check--yes circle { fill: #e5f4eb; }
.cmp2-check--yes path   { stroke: var(--geo-green-ink, #1c7a43); }
.cmp2-check--no circle  { fill: #f1f2f5; }
.cmp2-check--no path    { stroke: #a3a5ac; }
.cmp2-check--no .cmp2-check__word { color: var(--text-grey, #62646a); }
.cmp2-check--na { color: #c3c6cd; font-size: 18px; }

/* «Показать еще» без скрипта */
.cmp2-more { border-top: 1px solid var(--border-grey, #ededee); }
.cmp2-more > .cmp2-row:first-of-type { border-top: 1px solid var(--border-grey, #ededee); }
.cmp2-more__toggle {
    list-style: none; cursor: pointer; padding: 14px 20px;
    font-size: 15px; color: var(--accent-blue, #273d94);
}
.cmp2-more__toggle::-webkit-details-marker { display: none; }
.cmp2-more__toggle::after { content: ' ↓'; }
.cmp2-more[open] > .cmp2-more__toggle::after { content: ' ↑'; }
.cmp2-more__close { display: none; }
.cmp2-more[open] .cmp2-more__open { display: none; }
.cmp2-more[open] .cmp2-more__close { display: inline; }

/* «Чем различаются по функциям» — тот же размер текста, что у «Коротко» */
.cmp-body .cmp-feat-diff { margin-bottom: 24px; }
.cmp-body .cmp-feat-diff__text { font-size: 16px; line-height: 1.6; }

/* Пояснения */
.cmp2-empty-note { color: var(--text-grey, #62646a); font-size: 15px; line-height: 1.5; padding: 4px 0; }
.cmp2-empty-note a { color: var(--accent-blue, #273d94); }
.cmp2-note { color: var(--text-grey, #62646a); font-size: 16px; line-height: 1.55; margin: 0 0 20px; }
.cmp2-method {
    font-size: 14px; line-height: 1.55; color: #7a7e88;
    max-width: 860px; margin: 0;
}
.cmp2-method strong { color: var(--text-grey, #62646a); }

/* ── Компьютер: шапка и «полосы» в общей сетке с таблицами ───── */
@media (min-width: 768px) {
    /* Шапка: слева колонка подписей, справа продукты ровно над колонками таблиц.
       Отступ 21px = 20px внутреннего поля строки таблицы + 1px ее рамки. */
    .cmp2-head {
        display: grid; grid-template-columns: var(--cmp2-label) minmax(0, 1fr);
        column-gap: 20px; padding: 0 21px; border-bottom: 1px solid var(--border-grey, #ededee);
    }
    .cmp2-head__label { align-self: center; }
    .cmp2-head__add { font-size: 14px; color: var(--accent-blue, #273d94); text-decoration: none; }
    .cmp2-head__add:hover { text-decoration: underline; }
    .cmp2-head .cmp-header-products {
        display: grid !important; column-gap: 20px; border-bottom: none; padding-bottom: 16px;
    }
    .cmp2-n2 .cmp2-head .cmp-header-products { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .cmp2-n3 .cmp2-head .cmp-header-products { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
    .cmp2-n4 .cmp2-head .cmp-header-products { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
    .cmp2-head .cmp-header-product {
        padding: 0 28px 0 0 !important; border-left: none !important;
        align-items: flex-start; gap: 12px;
    }
    .cmp2-head .cmp-header-product__inner { gap: 14px; align-items: center; }
    .cmp2-head .cmp-header-product__logo {
        width: 56px; height: 56px; padding: 6px; box-sizing: border-box;
        border: 1px solid var(--border-grey, #ededee); border-radius: 12px; background: #fff;
    }
    .cmp2-head .cmp-header-product__name {
        font-family: var(--font-semibold, 'proxima-nova_semibold', Arial, sans-serif);
        font-weight: normal; font-size: 18px; line-height: 1.25; min-height: 0; margin-bottom: 4px;
    }
    .cmp2-head .cmp-header-product__actions { justify-content: flex-start; }
    /* Три-четыре продукта: колонки узкие, логотип над названием, иначе звезды не влезают. */
    .cmp2-n3 .cmp2-head .cmp-header-product__inner,
    .cmp2-n4 .cmp2-head .cmp-header-product__inner { flex-direction: column; align-items: flex-start; gap: 8px; }
    .cmp2-n3 .cmp2-head .cmp-header-product__logo,
    .cmp2-n4 .cmp2-head .cmp-header-product__logo { width: 44px; height: 44px; padding: 4px; border-radius: 10px; }
    .cmp2-n3 .cmp2-head .cmp-header-product__name,
    .cmp2-n4 .cmp2-head .cmp-header-product__name { font-size: 16px; }
    .cmp2-head .cmp-header-product__del { right: 0; }

    /* Отзывы и скриншоты: заголовок в колонке подписей, продукты под своими колонками.
       .cmp-body впереди обязателен: в custom.css у .cmp-section стоит display:block,
       и он подключается позже этого файла. */
    .cmp-body .cmp2-band {
        display: grid; grid-template-columns: var(--cmp2-label) minmax(0, 1fr);
        column-gap: 20px; padding-left: 21px; padding-right: 21px;
    }
    .cmp-body h2.cmp2-band__title { font-size: 20px; margin: 4px 0 0; }
    .cmp2-band .cmp2-band__cols { display: grid !important; column-gap: 20px; }
    .cmp2-n2 .cmp2-band__cols { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .cmp2-n3 .cmp2-band__cols { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
    .cmp2-n4 .cmp2-band__cols { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
    .cmp2-band .cmp-col { padding: 0 !important; border: none !important; }
}

/* ── Телефон: подпись строки над значениями, продукты рядом ──── */
@media (max-width: 767px) {
    .cmp2-head__label { display: none; }
    .cmp-body h2.cmp2-h2,
    .cmp-alternatives-wrap h2.h2 { font-size: 20px; margin-bottom: 14px; }

    .cmp2-summary { margin: 0 0 32px; padding: 18px 16px; border-radius: 12px; }
    .cmp2-summary__list li { font-size: 15px; }

    .cmp2-table { margin: 0 0 32px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .cmp2-table--1 .cmp2-row { grid-template-columns: minmax(0, 1fr); }
    .cmp2-table--2 .cmp2-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cmp2-table--3 .cmp2-row { grid-template-columns: repeat(3, minmax(110px, 1fr)); min-width: 360px; }
    .cmp2-table--4 .cmp2-row { grid-template-columns: repeat(4, minmax(110px, 1fr)); min-width: 470px; }
    .cmp2-row { column-gap: 12px; row-gap: 6px; padding: 12px 14px; font-size: 15px; }
    .cmp2-row__label { grid-column: 1 / -1; font-size: 13px; }
    .cmp2-row--head { display: grid; background: var(--geo-panel, #f4f5f8); font-size: 13px; padding-top: 10px; padding-bottom: 10px; }
    .cmp2-row--head .cmp2-row__label { display: none; }
    .cmp2-row--sub .cmp2-row__label { padding-left: 0; }
    .cmp2-row--text .cmp2-row__cell { font-size: 14px; }
    .cmp2-score { font-size: 18px; }
    .cmp2-price, .cmp2-big { font-size: 16px; }
    .cmp2-bar { width: 44px; margin-right: 6px; }
    .cmp2-tag { margin-left: 4px; padding: 1px 7px; font-size: 12px; }
    .cmp2-check__word { font-size: 15px; }
    .cmp2-more__toggle { padding: 12px 14px; }
    .cmp-body .cmp-feat-diff__text { font-size: 15px; }
}