:root {
    --G:   #01A572;   /* primary green  */
    --GL:  #ecfdf5;   /* green light bg */
    --GB:  #a7f3d0;   /* green border   */
    --OR:  #FF7700;   /* orange / price */
    --BD:  #ccd0d6;   /* border - было #E8EAED, слишком светлое */
    --T:   #111827;   /* text dark      */
    --M:   #6B7280;   /* muted          */
    --BG:  #F3F4F6;   /* page bg        */
    --W:   #ffffff;
    --R:   18px;
    --LW:  160px;     /* label col width  */
    --CW:  220px;     /* product col width*/

    /* НОВАЯ ПЕРЕМЕННАЯ — чтобы зелёная полоса всегда шла до конца всех карточек */
    --table-width: calc(var(--LW) + 4 * var(--CW));
}

/* ── Top bar (enhanced) ─────────────────────────── */
.cmp-topbar {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    flex-wrap:       wrap;
    gap:             16px;
    margin-bottom:   32px;
}
.cmp-topbar-l { display: flex; align-items: center; gap: 12px; }
.cmp-topbar-r { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* H1 ПО ШКАЛЕ - см. тот же комментарий в css/cart.css. Вес был 900. */
.cmp-topbar h1 {
    font-size:   var(--zd-text-2xl, 28px);
    font-weight: var(--zd-fw-bold, 700);
    color:       var(--zd-ink, #1F1F1F);
    margin:      0;
    letter-spacing: -0.02em;
}

/* Зелёный --G на светло-зелёной подложке даёт 3:1 - счётчик товаров
   почти сливался с фоном. Берём тёмный зелёный. */
.cmp-badge {
    display:       inline-flex;
    align-items:   center;
    background:    var(--GL);
    color:         #01A572;
    border:        1px solid var(--GB);
    border-radius: 20px;
    padding:       8px 16px;
    font-size:     14px;
    font-weight:   700;
    white-space:   nowrap;
}

/* ── Toggle switch (polished) ───────────────────── */
.cmp-diff-btn {
    display:       flex;
    align-items:   center;
    gap:           8px;
    cursor:        pointer;
    user-select:   none;
    background:    var(--W);
    border:        1.5px solid var(--BD);
    border-radius: 12px;
    padding:       8px 16px;
    font-size:     14px;
    font-weight:   600;
    color:         var(--M);
    white-space:   nowrap;
    transition:    border-color .2s, color .2s, background-color .2s;
}
.cmp-diff-input { display: none; }

.cmp-diff-track {
    display:       flex;
    align-items:   center;
    width:         36px;
    height:        20px;
    background-color:    #D1D5DB;
    border-radius: 20px;
    position:      relative;
    flex-shrink:   0;
    transition:    background-color .2s;
}
.cmp-diff-thumb {
    position:      absolute;
    left:          2px;
    width:         16px;
    height:        16px;
    background:    var(--W);
    border-radius: 50%;
    transition:    transform .2s cubic-bezier(0.2, 0.9, 0.4, 1.1);
}
.cmp-diff-input:checked ~ .cmp-diff-track               { background: var(--G); }
.cmp-diff-input:checked ~ .cmp-diff-track .cmp-diff-thumb { transform: translateX(16px); }
.cmp-diff-btn:has(.cmp-diff-input:checked) {
    border-color: var(--G);
    color:        var(--G);
    background:   #f9fffc;
}

/* ── Clear button (refined) ─────────────────────── */
.cmp-clear-btn {
    display:       flex;
    align-items:   center;
    gap:           8px;
    background:    var(--W);
    color:         #DC2626;
    border:        1.5px solid #FECACA;
    border-radius: 12px;
    padding:       8px 16px;
    min-height:    44px;
    font-weight:   700;
    font-size:     14px;
    cursor:        pointer;
    white-space:   nowrap;
    transition:    background-color .2s, border-color .2s;
}
.cmp-clear-btn:hover {
    background-color:   #FEF2F2;
    border-color: #DC2626;
}
.cmp-clear-btn:active {
    transform: scale(0.97);
}

/* ── Area wrapper ───────────────────────────────── */
.cmp-area { position: relative; }

/* ── Fade-подсказка «есть ещё товары за краем» ──── */
.cmp-scroll-fade {
    position:      absolute;
    top:           0;
    bottom:        0;
    width:         28px;
    pointer-events: none;
    opacity:       0;
    transition:    opacity .2s ease;
    z-index:       6;
    border-radius: var(--R);
}
.cmp-scroll-fade--right {
    right: 0;
    background: linear-gradient(to right, rgba(255,255,255,0), rgba(17,24,39,.10));
}
.cmp-scroll-fade--left {
    left: 0;
    background: linear-gradient(to left, rgba(255,255,255,0), rgba(17,24,39,.10));
}
.cmp-area.has-more-right .cmp-scroll-fade--right { opacity: 1; }
.cmp-area.has-more-left  .cmp-scroll-fade--left   { opacity: 1; }

/* ── Точки-индикаторы позиции (сколько товаров за пределами экрана) ──── */
.cmp-dots {
    display:         flex;
    justify-content: center;
    align-items:     center;
    gap:             8px;
    margin-top:      16px;
}
.cmp-dot {
    width:         7px;
    height:        7px;
    border-radius: 50%;
    background:    var(--BD);
    border:        none;
    padding:       0;
    cursor:        pointer;
    transition:    background-color .2s, transform .2s;
}
.cmp-dot.is-active {
    background: var(--G);
    transform:  scale(1.35);
}

/* ── Scroll container ───────────────────────────── */
.cmp-scroll {
    overflow-x:                 auto;
    overflow-y:                 visible;
    scroll-behavior:            smooth;
    -webkit-overflow-scrolling: touch;
    border-radius:              var(--R);
    background:                 var(--W);
    scrollbar-width: thin;
    scrollbar-color: #CBD5E1 transparent;
}
.cmp-scroll::-webkit-scrollbar       { height: 5px; }
.cmp-scroll::-webkit-scrollbar-track { background: transparent; }
.cmp-scroll::-webkit-scrollbar-thumb { background: #CBD5E1; border-radius: 10px; }

/* ── Скелетон — пока js/comparison-page.js ждёт api/products/by-ids.php.
   Не пытается повторить реальные строки характеристик 1:1 (их набор заранее
   неизвестен) - просто карточка-заголовок на ширину товарной колонки (--CW)
   плюс несколько строк-полосок под неё, этого достаточно как визуального
   сигнала "грузится", не "зависло". .skel - общий шиммер из css/main.css.
   Подменяется реальным innerHTML целиком (render/renderEmpty) - отдельно
   убирать не нужно.
   */
.cmp-skel-row {
    display: flex;
    gap: 12px;
    padding: 16px;
}
.cmp-skel-col {
    flex: 0 0 var(--CW);
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.cmp-skel-col .skel-photo { width: 100%; height: 140px; border-radius: 12px; }
.cmp-skel-col .skel-line-1 { height: 14px; width: 90%; }
.cmp-skel-col .skel-line-2 { height: 14px; width: 60%; }
.cmp-skel-col .skel-price  { height: 20px; width: 50%; margin-top: 4px; }
@media (max-width: 640px) {
    .cmp-skel-col { flex-basis: 78vw; max-width: 320px; }
}

/* ── Row ────────────────────────────────────────── */
.cmp-row {
    display:   flex;
    min-width: fit-content;
    width:     100%;
}

/* ── Label cell ─────────────────────────────────── */
.cmp-lbl {
    flex:         0 0 var(--LW);
    width:        var(--LW);
    position:     sticky;
    left:         0;
    background:   var(--W);
    z-index:      5;
    padding:      16px 16px;
    /* 12 -> 14px: это названия характеристик, по которым и сравнивают
       товары - самый читаемый текст таблицы. */
    font-size:    14px;
    font-weight:  700;
    color:        var(--M);
    border-right: 1px solid var(--BD);
    display:      flex;
    align-items:  center;
    line-height:  1.35;
}

/* ── Product cell ───────────────────────────────── */
.cmp-prod {
    flex:         0 0 var(--CW);
    width:        var(--CW);
    border-right: 1px solid var(--BD);
}

.cmp-val i.icon {
    color: #01A572;        /* золотой цвет звезды */
    font-size: 14px;
    margin-right: 8px;
}
.cmp-prod:last-child { border-right: none; }

/* ── Value cell ─────────────────────────────────── */
.cmp-val {
    flex:            0 0 var(--CW);
    width:           var(--CW);
    padding:         16px 16px;
    font-size:       14px;
    font-weight:     500;
    color:           var(--T);
    text-align:      center;
    border-right:    1px solid var(--BD);
    display:         flex;
    align-items: center;
    justify-content: center;
}
.cmp-val:last-child { border-right: none; }

/* ── Product card + закругления + убрали hover ──── */
.cmp-card {
    padding:       24px 16px 20px;
    text-align:    center;
    position:      relative;
    border-bottom: 3px solid var(--BD);
    height:        100%;
    box-sizing:    border-box;
    border-radius: 16px 16px 0 0;   /* закругление карточек */
}

/* Убрали любой hover на карточках */
.cmp-card:hover {
    box-shadow: none;
    transform:  none;
}

.cmp-remove {
    position:        absolute;
    top:             10px;
    right:           10px;
    width:           28px;
    height:          28px;
    border-radius:   50%;
    background:      #FEF2F2;
    color:           #DC2626;
    border:          1px solid #FECACA;
    font-size:       21px;
    cursor:          pointer;
    display:         flex;
    align-items:     center;
    justify-content: center;
    padding:         0;
    line-height:     1;
    transition:      background-color .2s, transform .1s;
}
.cmp-remove:hover {
    background-color: #FEE2E2;
    transform:  scale(1.05);
}

/* Картинки товаров — строго одного размера + закругление */
.cmp-img-wrap {
    display:    block;
    width:      120px;
    height:     120px;
    margin:     0 auto 16px;
    background: #f8fafc;
    border-radius: 12px;           /* закругление картинок */
    overflow:   hidden;
}
.cmp-img-wrap img {
    width:      100%;
    height:     100%;
    /* cover - см. решение в css/card.css (.image-track img). */
    object-fit: cover;
}

/* Название — hover только на ссылке (как было) */
/* РОВНО ДВЕ СТРОКИ. Обрезка была задумана (-webkit-box + overflow:hidden), но
   без -webkit-line-clamp она не работала: длинное имя разворачивалось в три
   строки, карточка становилась на 20px выше соседних, и кнопки в ряду
   расходились лесенкой. Полное имя остаётся в подсказке и по ссылке. */
.cmp-prod-name {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    font-size:       14px;
    font-weight:     700;
    color:           var(--T);
    text-decoration: none;
    line-height:     1.45;
    margin-bottom:   8px;
    min-height:      38px;
    word-break:      break-word;
}
.cmp-prod-name:hover { color: var(--G); }

/* ВЫСОТА СТРОКИ ЦЕНЫ ОДНА ДЛЯ ВСЕХ ТРЁХ ВИДОВ - 30px.
   Цена, «Цена договорная» и «Ждём поступления» набраны разным кеглем (22/15/14),
   и без общей высоты колонки расходятся, а кнопки под ними встают лесенкой.
   30px - это фактическая высота обычной цены (22px × 1.36), к ней и равняем;
   прежняя попытка равнять к 26px промахивалась на 4px. */
.cmp-prod-price,
.cmp-prod-price--contract,
.cmp-prod-status {
    min-height:    30px;
    line-height:   30px;
    margin-bottom: 16px;
}

.cmp-prod-price {
    font-size:     22px;
    font-weight:   700;
    color:         var(--OR);
}

.cmp-cart {
    width:           100%;
    height:          42px;
    background:      var(--OR);
    color:           var(--W);
    border:          none;
    border-radius:   12px;
    font-weight:     700;
    /* Надпись «В КОРЗИНУ» на 12px читалась хуже всего на странице - и это
       главная кнопка. Порог читаемости проекта - 14px. */
    font-size:       14px;
    text-transform:  uppercase;
    letter-spacing:  .04em;
    cursor:          pointer;
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             8px;
    transition:      background-color .25s, transform .1s;
}
.cmp-cart:hover  { background-color: #e56900; }
.cmp-cart.added  { background-color: var(--G); }
.cmp-cart.added:hover { background-color: #018f63; }

/* =========================================================
   Out-of-stock в сравнении (.cmp-card--out). Тот же визуальный
   язык что и на listing/recommend: серая картинка + фиолетовая
   плашка + статус вместо цены + notify-кнопка.
   ========================================================= */
.cmp-card--out .cmp-img-wrap {
    position: relative;
}
.cmp-card--out .cmp-img-wrap img {
    filter: grayscale(0.7) brightness(0.92);
    opacity: 0.78;
}
.cmp-card--out .cmp-prod-name {
    opacity: 0.7;
}
.cmp-out-overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 4px 4px;
    background: linear-gradient(135deg, #6D28D9 0%, #7C3AED 100%);
    color: #fff;
    font-size: 9.5px;
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: 0;
    white-space: nowrap;
    pointer-events: none;
}
.cmp-out-overlay i { font-size: 10.5px; line-height: 1; flex-shrink: 0; }
/* Статус вместо цены — высота строки идентична .cmp-prod-price
   (22px шрифт × 1.2 line-height ≈ 26px), чтобы notify-кнопка
   была на одной линии с обычными «В корзину». */
.cmp-prod-status {
    font-size:     14px;
    font-weight:   700;
    color:         #5B21B6;
    display:       flex;
    align-items:   center;
    justify-content: center;
}
/* Кнопка «Уведомить» — фиолетовая default, тёмная при is-active. */
.cmp-cart--notify,
.cmp-cart--notify:hover {
    background: linear-gradient(135deg, #7C3AED 0%, #8B5CF6 100%);
    color: #fff;
}
/* Заявка отправлена - зелёный, как «Добавлено» у корзины и как в избранном.
   Прежний тёмно-фиолетовый отличался от обычного слишком слабо: понять,
   прошла заявка или нет, можно было только вчитавшись в текст кнопки.
   На наведении - красный: следующий клик СНИМЕТ уведомление. */
.cmp-cart--notify.is-active {
    background: linear-gradient(135deg, #01A572 0%, #019060 100%);
}
.cmp-cart--notify.is-active:hover {
    background: linear-gradient(135deg, #E11D48 0%, #BE123C 100%);
}
.cmp-cart--notify .notify-bell {
    font-size: 14px;
    line-height: 1;
}

/* ── ЗАГОЛОВОК КАТЕГОРИИ ─────────────────────────
   Появляется, только когда в сравнении товары больше чем из одной категории
   (js/comparison-page.js::renderGroups). Тогда таблиц несколько - у каждой
   своя шапка с карточками и свой набор строк-характеристик, и без подписи
   непонятно, где кончается одна и начинается следующая. */
.cmp-cat {
    min-width:   var(--table-width);
    width:       100%;
    box-sizing:  border-box;
    padding:     26px 0 10px;
}
/* Над первой категорией уже есть топбар - лишний воздух там не нужен. */
.cmp-scroll > .cmp-cat:first-child { padding-top: 2px; }

.cmp-cat__text {
    position:    sticky;
    left:        0;
    display:     inline-flex;
    align-items: center;
    gap:         10px;
    padding:     0 16px;
    /* 18px, а не 12px как у .cmp-section: это навигация по таблице, а не
       подпись группы строк, и аудитории 40-65+ её надо видеть сразу. */
    font-size:   var(--zd-text-lg, 18px);
    font-weight: 700;
    line-height: 1.25;
    color:       var(--T);
}
/* Фирменный зелёный не затемняем: ссылка
   остаётся тёмной, зелёным подчёркиваем только при наведении. */
.cmp-cat__link { color: inherit; text-decoration: none; }
.cmp-cat__link:hover { color: var(--G); text-decoration: underline; }
.cmp-cat__count {
    display:       inline-flex;
    align-items:   center;
    justify-content: center;
    min-width:     22px;
    height:        22px;
    padding:       0 7px;
    border-radius: 11px;
    background:    var(--GL);
    border:        1px solid var(--GB);
    color:         var(--zd-brand-ink, #016B4A);
    font-size:     var(--zd-text-sm, 14px);
    font-weight:   700;
    line-height:   1;
}

/* ── ЗЕЛЁНАЯ ПОЛОСА (исправлено для телефона) ───── */
.cmp-section {
    min-width:      var(--table-width);   /* теперь всегда до конца всех карточек */
    width:          100%;
    background:     var(--GL);
    border-top:     1.5px solid var(--GB);
    border-bottom:  1.5px solid var(--GB);
    padding:        9px 0; /* горизонтальный padding ушёл на __text-обёртку */
    font-size:      12px;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color:          var(--G);
    box-sizing:     border-box;
}
/* Текст секций («Цена и оценки», «Производитель», «Характеристики»)
   прилипает к левому краю при горизонтальной прокрутке таблицы.
   JS оборачивает текст в .cmp-section__text при загрузке страницы. */
.cmp-section__text {
    position:      sticky;
    left:          0;
    display:       inline-flex;
    align-items:   center;
    padding-left:  16px;
    padding-right: 16px;
}

/* Zebra: фон ВСЕГО ряда одним цветом (lbl + все val).
   JS ставит .cmp-row-data--alt на каждый второй ряд.
   !important нужен потому что .cmp-lbl сам имеет background: var(--W). */
.cmp-row-data .cmp-val,
.cmp-row-data .cmp-lbl              { background: #FFFBEB !important; }
.cmp-row-data--alt .cmp-val,
.cmp-row-data--alt .cmp-lbl         { background: #FFFFFF !important; }
/* ── Diff-only hidden rows ──────────────────────── */
.diff-hidden { display: none !important; }

/* ── Empty state (consistent) ───────────────────── */
.cmp-empty {
    text-align:    center;
    padding:       80px 24px;
    background:    var(--W);
    border-radius: var(--R);
}
.cmp-empty h2 { font-size: 20px; font-weight: 700; margin: 0 0 10px; color: var(--T); }
.cmp-empty p  { font-size: 14px; color: var(--M); margin-bottom: 24px; }

.btn-go-catalog {
    display:         inline-block;
    background:      var(--G);
    color:           var(--W);
    padding:         16px 32px;
    border-radius:   12px;
    font-weight:     700;
    font-size:       14px;
    text-decoration: none;
    transition:      background-color .2s;
}
.btn-go-catalog:hover { background-color: #018f63; }

/* ================================================
   RESPONSIVE
   ================================================ */

/* ── Tablet 641–859px ───────────────────────────── */
@media (max-width: 859px) {
    :root { --CW: 190px; }
}

/* ── Mobile ≤640px ──────────────────────────────── */
/* Карусель: вместо горизонтального
   скролла таблицы или аккордеона групп (v2) - один товар на весь экран,
   пейджер "N из M" + точки-индикаторы + свайп для переключения между
   товарами (см. showColumn/stepColumn в <script> ниже). Секции характеристик
   всегда развёрнуты - на один товар их и так немного.
   */
@media (max-width: 640px) {
    .cmp-topbar {
        flex-direction: column;
        align-items:    flex-start;
        gap:            12px;
        margin-bottom:  20px;
    }
    /* Заголовок не переопределяем: списки (каталог, корзина, избранное,
       сравнение) держат общие 28px на любой ширине. Стоявшие здесь 22px делали
       сравнение мельче каталога и корзины. Замер.
       */
    .cmp-topbar-r  { width: 100%; justify-content: space-between; gap: 8px; }

    .cmp-diff-btn  { font-size: 14px; padding: 8px 12px; gap: 8px; }
    .cmp-clear-btn { font-size: 14px; padding: 8px 12px; }
    /* 12 -> 14px: счётчик товаров в сравнении, читается наравне с
       заголовком рядом. */
    .cmp-badge     { font-size: 14px; padding: 6px 12px; }

    /* Пейджер "‹  2 из 4  ›" над карточкой товара. */
    .cmp-pager {
        display:         flex;
        align-items:     center;
        justify-content: center;
        gap:             16px;
        margin-bottom:   8px;
    }
    .cmp-pager-arrow {
        width:           32px;
        height:          32px;
        border-radius:   50%;
        border:          1.5px solid var(--BD);
        background:      var(--W);
        color:           var(--T);
        font-size:       16px;
        display:         flex;
        align-items:     center;
        justify-content: center;
        cursor:          pointer;
    }
    .cmp-pager-arrow:disabled { opacity: .35; cursor: default; }
    .cmp-pager-text { font-size: 14px; font-weight: 700; color: var(--M); min-width: 64px; text-align: center; }

    /* Отключаем горизонтальный скролл таблицы - карусель управляет
       видимостью колонок через .is-active-col (JS). */
    .cmp-scroll { overflow-x: visible; border-radius: 14px; }
    .cmp-scroll-fade { display: none; }

    .cmp-row-head { display: block; }
    .cmp-row-head .cmp-lbl { display: none; }
    .cmp-prod {
        display: none;
        width:   100%;
        border-right: none;
    }
    .cmp-prod.is-active-col { display: block; }

    .cmp-section {
        min-width: auto;
        padding:   8px 12px;
        /* 12px не проходили порог читаемости (минимум 14px на телефоне под аудиторию 40-65+). Заголовок короткий («ЦЕНА
           И НАЛИЧИЕ»), в строку помещается и на 320px.
           */
        font-size: 14px;
        letter-spacing: .06em;
    }
    .cmp-section__text { position: static; padding-left: 0; }
    .cmp-section-chevron { display: none; }

    /* Карусель показывает один товар за раз, а таблиц теперь может быть
       несколько - у чужих категорий на экране остались бы заголовок и
       столбец подписей без единого значения. Гасит их showColumn()
       в comparison.php, здесь только правило. */
    .cmp-cat-off { display: none !important; }
    .cmp-cat { padding: 16px 0 8px; }
    .cmp-cat__text { position: static; padding: 0 12px; font-size: var(--zd-text-md, 16px); }

    /* Строка характеристики становится парой "лейбл : значение" -
       ровно одна активная колонка вместо N-в-ряд. */
    .cmp-row-data { display: flex; align-items: stretch; }
    .cmp-lbl {
        position:     static;
        flex:         0 0 42%;
        width:        auto;
        padding:      12px 8px;
        font-size:    14px;
    }
    .cmp-val {
        display: none;
        flex:    1;
        width:   auto;
        padding: 12px 8px;
        font-size: 14px;
        text-align: left;
        justify-content: flex-start;
    }
    .cmp-val.is-active-col { display: flex; }

    .cmp-img-wrap  { width: 96px; height: 96px; margin-bottom: 10px; border-radius: 10px; }
    .cmp-card      { padding: 16px 10px 14px; border-radius: 14px; border-bottom: none; }
    /* Размеры ниже 14px не проходят порог читаемости проекта (аудит
       под аудиторию 40-65+). На карусели товар один на экран, места хватает -
       жать текст незачем. Заодно кнопка вернулась к 44px: 40px были ниже
       минимальной зоны нажатия.
       */
    .cmp-prod-name { font-size: 14px; min-height: auto; margin-bottom: 7px; -webkit-line-clamp: 2; }
    .cmp-prod-price { font-size: 20px; margin-bottom: 10px; }
    .cmp-cart      { height: 44px; font-size: 14px; border-radius: 10px; }
    .cmp-remove    { width: 32px; height: 32px; font-size: 18px; top: 6px; right: 6px; }
}
/* Иконка-заголовок строки характеристики.
   Строки строит js/comparison-page.js из products.icons: код иконки — тип
   характеристики, подпись — значение. Размер берём как на карточке товара
   (там .feature i идёт 28px): мелкий глиф в узкой колонке подписи
   превращался в неразборчивую закорючку. */
.cmp-spec-icon {
  font-size: 24px;
  line-height: 1;
  color: var(--c-brand, #01A572);
  display: inline-block;
}

/* Договорная цена в сравнении - те же значения, что на витрине и в
   избранном (см. .hot-price--contract / .hot-add--contract). */
/* Высота строки - ТА ЖЕ, что у обычной цены и у статуса (26px), хотя кегль
   меньше: иначе колонка с договорной ценой короче соседних на 8px, и кнопки
   «Узнать цену» и «В корзину» стоят в ряду лесенкой. Ровно та же причина, по
   которой высоту фиксировали у .cmp-prod-status. */
.cmp-prod-price--contract {
  font-size: 15px;
  font-weight: 700;
  color: #616161;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cmp-cart--contract {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  background: #1E88E5;
}
.cmp-cart--contract:hover { background: #1976D2; }

/* body здесь - flex-контейнер (стили кабинета, order.css): без этого main
   растягивался по содержимому (920px на телефоне), и колонки уезжали за экран. */
main.cmp-page { width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; }

/* Компактный размер до 400px: заголовок и панель управления не занимают полэкрана. */
@media screen and (max-width: 400px) {
  .cmp-page h1 { font-size: 22px; }
  .cmp-topbar { gap: 8px; }
  .cmp-diff-btn { min-height: 40px; font-size: 14px; }
  .cmp-clear-btn { min-height: 40px; font-size: 13px; padding: 6px 12px; }
  .cmp-prod-name { font-size: 14px; }
}
@media screen and (max-width: 400px) {
  .cmp-pager-arrow, .cmp-remove { min-width: 40px; min-height: 40px; width: 40px; height: 40px; }
}


/* ===== Сравнение на телефоне (С2): товары карточками, листаются вбок; таблица скрыта ===== */
.cmp-m { display: none; }
@media screen and (max-width: 640px) {
  .cmp-m { display: block; }
  #cmp-scroll, .cmp-pager, .cmp-dots, .cmp-scroll-fade { display: none !important; }
  .cmp-m-cat { display: flex; align-items: center; gap: 8px; margin: 14px 0 8px; font-size: 16px; font-weight: 700; color: #111827; }
  .cmp-m-cat a { color: inherit; text-decoration: none; }
  .cmp-m-row {
    display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory;
    margin: 0 -12px; padding: 2px 12px 10px; -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .cmp-m-row::-webkit-scrollbar { display: none; }
  .cmp-m-card {
    position: relative; flex: 0 0 min(66vw, 230px); scroll-snap-align: start;
    display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: 16px; background: #F2F2F2;
  }
  .cmp-m-card .cmp-remove { position: absolute; top: 6px; right: 6px; z-index: 2; }
  .cmp-m-img { display: block; aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: #fff; }
  .cmp-m-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .cmp-m-name {
    font-size: 14px; font-weight: 700; line-height: 1.25; color: #111827; text-decoration: none;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 35px;
  }
  .cmp-m-specs { list-style: none; margin: 0; padding: 0; }
  .cmp-m-specs li {
    display: flex; align-items: center; gap: 8px; min-height: 32px; padding: 4px 6px; border-top: 1px solid #fff;
    font-size: 13px; font-weight: 600; color: #1f1f1f; line-height: 1.25;
  }
  .cmp-m-specs li[data-same="0"] { background: #FFF8E6; border-radius: 8px; }
  .cmp-m-ico { font-size: 20px; color: #01A572; flex: none; }
  .cmp-m-k { color: #6B7280; font-weight: 500; flex: none; }
  .cmp-m--diff .cmp-m-specs li[data-same="1"] { display: none; }
  .cmp-m-buy { margin-top: auto; display: flex; flex-direction: column; gap: 8px; }
  .cmp-m-buy .cmp-prod-price { font-size: 17px; font-weight: 800; }
  .cmp-m-buy .cmp-cart { width: 100%; min-height: 44px; justify-content: center; }
}

@media screen and (max-width: 640px) {
  .cmp-m-img { aspect-ratio: 1.3; }
}

/* Телефон: в сравнении видно два товара рядом (сравнивать удобно без листания), кнопки «Только различия»
   и «Очистить» - одной строкой над товарами. */
@media screen and (max-width: 640px) {
  .cmp-m-row { margin: 0; padding: 2px 0 10px; scroll-padding: 0; }
  .cmp-m-card { flex: 0 0 calc(50% - 5px); min-width: 0; padding: 8px; gap: 6px; }
  .cmp-m-img { aspect-ratio: 1; }
  .cmp-m-specs li { font-size: 12px; padding: 4px; gap: 6px; overflow-wrap: anywhere; min-width: 0; }
  .cmp-m-specs li > span:last-child { min-width: 0; }
  .cmp-m-ico { font-size: 16px; }
  .cmp-m-buy .cmp-prod-price { font-size: 15px; }
  .cmp-m-buy .cmp-cart { font-size: 13px; padding: 0 6px; }
  .cmp-topbar-r { flex-wrap: nowrap; }
  .cmp-diff-btn, .cmp-clear-btn { white-space: nowrap; font-size: 13px; padding: 6px 10px; min-height: 40px; }
}

/* Компьютер, вошедший покупатель (меню кабинета слева): колонка как у «Избранного» - прижата к меню, до 1120px,
   те же отступы. Правило main.cmp-page выше растягивало её на всю ширину и уводило заголовок от меню. */
@media (min-width: 1025px) {
  body aside + main.cmp-page { max-width: 1600px; margin: 0; padding: calc(var(--zd-header-h) + 10px) 32px 48px; }
}

/* Телефон, два товара рядом (~160px): значения 14px вместо 12px. У строки «Бренд» подпись над значением -
   в строку на такой ширине название бренда ломалось посередине. Значки характеристик остаются. */
@media screen and (max-width: 640px) {
  .cmp-m-specs li { font-size: 14px; padding: 6px; }
  .cmp-m-specs li:has(.cmp-m-k) { flex-direction: column; align-items: flex-start; gap: 2px; }
  .cmp-m-specs li .cmp-m-k { font-size: 13px; }
}

/* Телефон: переключатель «Избранное / Сравнение» - как на странице избранного (css/favorites.css, И2). Заголовок остаётся для поиска, но скрыт глазу. */
.cmp-switch { display: none; }
@media screen and (max-width: 768px) {
  .cmp-switch { display: flex; gap: 0; margin: 0 0 14px; padding: 3px; border-radius: 16px; background: #F2F2F2; }
  .cmp-switch__item {
    flex: 1 1 0; display: flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 44px; border-radius: 13px; font-size: 15px; font-weight: 700; color: #4B5563; text-decoration: none;
  }
  .cmp-switch__item.is-active { background: #fff; color: #017A55; box-shadow: 0 1px 4px rgba(17, 24, 39, .12); }
  .cmp-switch__n {
    display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 24px; padding: 0 7px;
    border-radius: 12px; background: #E5E7EB; color: #374151; font-size: 14px; font-weight: 700;
  }
  .cmp-switch__item.is-active .cmp-switch__n { background: #E6F3EC; color: #017A55; }
  .cmp-topbar-l h1 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .cmp-topbar-l .cmp-badge { display: none; }
}

/* Телефон, сравнение (владелец 08.10 «всё сжато, непонятно»): строки - белые плашки на сером фоне карточки,
   высота строки общая у соседних товаров (js/comparison-page.js, alignMobileRows), пустое значение - серое «нет»,
   строки, пустые у всех товаров, не выводятся. Жёлтая подсветка каждой разницы убрана - пестрило. */
@media screen and (max-width: 640px) {
  .cmp-m-card { gap: 8px; padding: 8px; }
  .cmp-m-name { min-height: 0; font-size: 15px; }
  .cmp-m-specs { display: flex; flex-direction: column; gap: 4px; }
  .cmp-m-specs li, .cmp-m-specs li[data-same="0"] {
    box-sizing: border-box; min-height: 40px; padding: 8px; border: 0; border-radius: 10px; background: #fff;
    font-size: 14px; font-weight: 600; line-height: 1.3; color: #111827; overflow-wrap: break-word; hyphens: auto;
  }
  .cmp-m-specs li.is-empty { color: #9CA3AF; font-weight: 400; }
  .cmp-m-specs li.is-empty .cmp-m-ico { opacity: .45; }
  .cmp-m-ico { font-size: 18px; }
  .cmp-m-buy { margin-top: 4px; }
  .cmp-m-buy .cmp-prod-price { font-size: 17px; }
}

/* Переключатель «Избранное / Сравнение» на компьютере - вкладки с подчёркиванием (пара к .fav-header в css/favorites.css):
   активная - зелёная с линией, вторая - серая ссылка; кнопки «Только различия» и «Очистить» справа в той же строке. */
@media screen and (max-width: 768px) {
  .cmp-topbar { flex-wrap: wrap; }
  .cmp-topbar-l { width: 100%; }
  .cmp-switch { width: 100%; box-sizing: border-box; }
}
@media screen and (min-width: 769px) {
  .cmp-topbar { align-items: flex-end; margin-bottom: 20px; border-bottom: 1px solid #E5E7EB; }
  .cmp-topbar-l h1 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .cmp-topbar-l .cmp-badge { display: none; }
  .cmp-topbar-r { padding-bottom: 0; align-self: flex-start; }
  .cmp-switch { display: flex; gap: 28px; }
  .cmp-switch__item {
    display: inline-flex; align-items: center; gap: 10px; padding: 0 2px 12px; margin-bottom: -1px;
    border-bottom: 3px solid transparent; font-size: 26px; font-weight: 700; line-height: 1.2; color: #6B7280; text-decoration: none;
  }
  a.cmp-switch__item:hover { color: #111827; }
  .cmp-switch__item.is-active { color: #111827; border-bottom-color: #01A572; }
  .cmp-switch__n {
    display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 28px; padding: 0 8px;
    border-radius: 14px; background: #F3F4F6; color: #4B5563; font-size: 15px; font-weight: 700;
  }
  .cmp-switch__item.is-active .cmp-switch__n { background: #E6F3EC; color: #017A55; }
  /* Таблица: пустая характеристика - бледный прочерк, чтобы глаз шёл по заполненным значениям. */
  .cmp-val.is-empty { color: #C4C9D0; }
}

/* ===== Сравнение «Ozon + WB» (js/comparison-page.js, renderMx) - все ширины =====
   Серый фон, белые скруглённые блоки, у товара свой номер и цвет: номер на фото, фон его значений.
   Старые таблица/карточки остаются в DOM скрытыми - на них завязаны удаление и счётчики. */
.cmp-mx-on #cmp-scroll, .cmp-mx-on .cmp-scroll-fade, .cmp-mx-on #cmp-m, .cmp-mx-on #cmp-pager, .cmp-mx-on #cmp-dots { display: none !important; }
.cmp-mx { background: #F6F6F9; border-radius: 18px; padding: 14px; }
.cmp-mx .t0 { --tc: #01A572; --tb: #E9F7F1; } .cmp-mx .t1 { --tc: #2563EB; --tb: #EBF1FE; } .cmp-mx .t2 { --tc: #D97706; --tb: #FEF5E7; }
.cmp-mx .t3 { --tc: #9333EA; --tb: #F5EDFD; } .cmp-mx .t4 { --tc: #DB2777; --tb: #FDEDF5; } .cmp-mx .t5 { --tc: #0891B2; --tb: #E8F7FA; }
.mx-pills { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 0 12px; }
.mx-pills::-webkit-scrollbar { display: none; }
.mx-pill { flex: none; min-height: 44px; padding: 0 16px; border: 0; border-radius: 12px; background: #fff; color: #111827; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.mx-pill small { font-size: 13px; opacity: .7; margin-left: 4px; }
.mx-pill.is-on { background: #01A572; color: #fff; }
.mx-card { position: relative; display: flex; flex-direction: column; gap: 6px; height: 100%; padding: 10px; border-radius: 16px; background: #fff; box-shadow: 0 2px 10px rgba(17, 24, 39, .05); box-sizing: border-box; }
.mx-img { position: relative; display: block; aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: #fff; }
.mx-img img { width: 100%; height: 100%; object-fit: contain; display: block; }
.mx-num { position: absolute; top: 8px; left: 8px; display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 24px; padding: 0 7px; border-radius: 12px; background: var(--tc); color: #fff; font-size: 13px; font-weight: 800; }
.mx-x { position: absolute; top: 14px; right: 14px; z-index: 2; width: 32px; height: 32px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .92); color: #6B7280; font-size: 18px; line-height: 1; cursor: pointer; box-shadow: 0 1px 4px rgba(0, 0, 0, .12); }
.mx-card .cmp-prod-price { font-size: 18px; font-weight: 800; color: #FF7700; text-align: left; margin: 0; }
.mx-card .cmp-prod-status { font-size: 14px; font-weight: 700; color: #6B7280; margin: 0; }
.mx-name { font-size: 14px; font-weight: 600; line-height: 1.3; color: #111827; text-decoration: none; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 36px; }
.mx-card .cmp-cart { margin-top: auto; width: 100%; min-height: 44px; }
.mx-blk { background: #fff; border-radius: 16px; padding: 4px 0 6px; margin-top: 12px; }
.mx-sec { margin: 10px 0 4px; padding: 0 14px; font-size: 17px; font-weight: 800; color: #111827; position: sticky; left: 0; display: inline-block; }
.mx-k { display: flex; align-items: center; gap: 8px; color: #6B7280; font-size: 14px; }
.mx-ico { font-size: 20px; color: #01A572; flex: none; }
.mx-row.is-diff .mx-k { color: #111827; font-weight: 700; }
.mx-row.is-diff .mx-k::after { content: "•"; color: #FF7700; font-weight: 800; }
.mx-v { border-radius: 10px; background: var(--tb); font-size: 14px; font-weight: 600; color: #111827; line-height: 1.35; }
.mx-empty { color: #A3AAB3; font-weight: 500; }
.cmp-mx.is-diff-only .mx-row.is-same { display: none; }

/* Компьютер: подписи слева закреплены, товары листаются стрелками */
.mx-desk { position: relative; }
.mx-scroll { overflow-x: auto; scroll-behavior: smooth; scrollbar-width: none; }
.mx-scroll::-webkit-scrollbar { display: none; }
.mx-in { width: max-content; min-width: 100%; }
.mx-cards, .mx-desk .mx-row { display: grid; grid-template-columns: 210px repeat(var(--n), 230px); }
.mx-cards { position: sticky; top: 0; z-index: 3; padding: 2px 0 0; }
.mx-cards > div { padding: 0 5px; }
.mx-corner { position: sticky; left: 0; z-index: 4; background: #F6F6F9; }
.mx-desk .mx-k { position: sticky; left: 0; z-index: 2; background: #fff; padding: 10px 14px; }
.mx-desk .mx-v { margin: 3px 5px; padding: 8px 10px; }
.mx-arr { position: absolute; top: 110px; z-index: 5; width: 44px; height: 44px; border: 1px solid #E5E7EB; border-radius: 50%; background: #fff; color: #111827; font-size: 24px; line-height: 1; cursor: pointer; box-shadow: 0 4px 14px rgba(0, 0, 0, .1); }
.mx-arr--l { left: 220px; } .mx-arr--r { right: 4px; }

/* Телефон: два товара рядом, каждая колонка листается отдельно */
.mx-head { position: sticky; top: 0; z-index: 4; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; background: #F6F6F9; padding: 2px 0 6px; }
.mx-head.is-one { grid-template-columns: 1fr; }
.mx-slot { min-width: 0; display: flex; flex-direction: column; }
.mx-mob .mx-img { aspect-ratio: 1.2; }
.mx-mob .mx-card .cmp-prod-price { font-size: 15px; }
.mx-mob .mx-name { font-size: 14px; min-height: 36px; }
.mx-mob .mx-card .cmp-cart { font-size: 14px; padding: 0 4px; gap: 4px; }
.mx-mob .mx-x { top: 12px; right: 12px; width: 30px; height: 30px; }
.mx-nav { display: flex; align-items: center; justify-content: space-between; gap: 4px; margin-top: 6px; }
.mx-nav button { width: 40px; height: 40px; border: 1px solid #E5E7EB; border-radius: 50%; background: #fff; color: #111827; font-size: 18px; cursor: pointer; }
.mx-nav span { font-size: 13px; color: #6B7280; font-weight: 600; white-space: nowrap; }
.mx-slot { position: relative; }
.mx-pin { position: absolute; top: 52px; right: 12px; z-index: 2; width: 30px; height: 30px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .92); font-size: 13px; cursor: pointer; box-shadow: 0 1px 4px rgba(0, 0, 0, .12); }
.mx-pin.is-on { background: #01A572; }
.mx-mob .mx-k { padding: 10px 12px 4px; font-size: 14px; font-weight: 600; }
.mx-vals { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 0 8px 6px; }
.mx-head.is-one ~ .mx-blk .mx-vals { grid-template-columns: 1fr; }
.mx-mob .mx-v { padding: 8px; }
@media (max-width: 768px) {
  .cmp-mx { margin: 0 -4px; padding: 10px; }
  .mx-head { top: calc(var(--zd-header-h, 64px) - 4px); }
}

/* Сравнение - в стилях плиток каталога: карточка 12px с серой рамкой без тени, фото 11px «на обрез» (cover),
   блоки 12px; точку-маркер разницы убрали (непонятна) - разница видна жирной подписью. */
.mx-card { border-radius: 12px; border: 1px solid #D5DAE0; box-shadow: none; }
.mx-img { border-radius: 11px; background: #F6F7F8; }
.mx-img img { object-fit: cover; }
.mx-blk { border-radius: 12px; }
.mx-v { border-radius: 8px; }
.mx-row.is-diff .mx-k::after { content: none; }
/* Адаптив: ноутбук и планшет - колонки уже; телефон - узкие экраны. */
@media (max-width: 1280px) {
  .mx-cards, .mx-desk .mx-row { grid-template-columns: 170px repeat(var(--n), 210px); }
  .mx-arr--l { left: 180px; }
}
@media (max-width: 1024px) {
  .mx-cards, .mx-desk .mx-row { grid-template-columns: 140px repeat(var(--n), 190px); }
  .mx-arr--l { left: 150px; }
  .mx-desk .mx-k { padding: 10px; }
}
@media (max-width: 400px) {
  .cmp-mx { padding: 8px; }
  .mx-head { gap: 6px; }
  .mx-card { padding: 8px; gap: 5px; }
  .mx-vals { gap: 5px; padding: 0 6px 6px; }
  .mx-mob .mx-v { padding: 7px; }
}
/* «Только различия»: блок, где все строки одинаковые, прячется целиком - не остаётся пустой заголовок. */
.cmp-mx.is-diff-only .mx-blk:not(:has(.mx-row.is-diff)) { display: none; }
/* Крестик - наш общий (значок f000 в светлом кружке, как в окнах сайта); рейтинг - звезда цветом по оценке. */
.mx-x { display: flex; align-items: center; justify-content: center; background: #F1F3F5; color: #3A3F44; box-shadow: none; }
.mx-x .icon { font-size: 13px; line-height: 1; }
.mx-x:hover { background: #E3E7EB; color: #111; }
.mx-rate { display: inline-flex; align-items: center; gap: 4px; }
.mx-rate .icon { font-size: 15px; }
.mx-rate small { font-size: 13px; color: #6B7280; font-weight: 500; }
/* Телефон: компактнее - текст и кнопки мельче, чтобы две карточки рядом не были громоздкими (просьба владельца). */
@media (max-width: 768px) {
  .mx-mob .mx-card { padding: 8px; gap: 4px; border-radius: 12px; }
  .mx-mob .mx-name { font-size: 13px; min-height: 34px; }
  .mx-mob .mx-card .cmp-prod-price { font-size: 15px; }
  .mx-mob .mx-card .cmp-cart { min-height: 38px; font-size: 12px; border-radius: 10px; }
  .mx-mob .mx-x, .mx-mob .mx-pin { width: 28px; height: 28px; }
  .mx-mob .mx-x { top: 12px; right: 12px; }
  .mx-mob .mx-pin { top: 44px; right: 12px; font-size: 12px; }
  .mx-mob .mx-k { font-size: 13px; padding: 8px 10px 3px; }
  .mx-mob .mx-v { font-size: 13px; padding: 7px 8px; }
  .mx-mob .mx-sec { font-size: 15px; }
  .mx-nav { margin-top: 4px; }
  .mx-nav button { width: 34px; height: 34px; font-size: 16px; }
  .mx-nav span { font-size: 12px; }
  .mx-pill { min-height: 38px; font-size: 13px; padding: 0 12px; }
}
/* Телефон: длинное слово («Транспортабельный») не распирает колонку - колонки делят ширину поровну, слово переносится. */
.mx-head, .mx-vals { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.mx-head.is-one, .mx-head.is-one ~ .mx-blk .mx-vals { grid-template-columns: minmax(0, 1fr); }
.mx-v { min-width: 0; overflow-wrap: anywhere; hyphens: auto; }
@media (max-width: 360px) {
  .mx-card, .mx-mob .mx-card .cmp-cart { min-width: 0; }
  .mx-mob .mx-card .cmp-cart .icon { display: none; }
  .mx-nav button { width: 32px; height: 32px; }
}
.mx-card .cmp-prod-price--contract { white-space: normal; justify-content: flex-start; font-size: 14px; }
/* Цены чёрные, как на плитках каталога. */
.mx-card .cmp-prod-price { color: #000; font-weight: 700; }
/* Стрелки крупнее - заметнее и легче попасть. */
.mx-arr { width: 52px; height: 52px; font-size: 28px; }
.mx-nav button { width: 44px; height: 44px; font-size: 22px; }
@media (max-width: 360px) { .mx-nav button { width: 40px; height: 40px; } }

/* Телефон: большие карточки не прилипают; при прокрутке вниз сверху едет мини-полоса с двумя товарами
   (номер, название, цена). Отступы меньше - тексту больше места. */
.mx-mini { display: none; }
@media (max-width: 768px) {
  .mx-head { position: static; }
  .mx-mini { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px; position: sticky; top: calc(var(--zd-header-h, 64px) - 4px); z-index: 5;
    margin: 0 -10px; padding: 6px 10px; background: #F6F6F9; box-shadow: 0 4px 10px rgba(17, 24, 39, .08);
    opacity: 0; transform: translateY(-6px); pointer-events: none; transition: opacity .15s ease, transform .15s ease; height: 0; overflow: hidden; padding-top: 0; padding-bottom: 0; }
  .mx-mini.is-on { opacity: 1; transform: none; height: auto; padding-top: 6px; padding-bottom: 6px; }
  .mx-mini.is-one { grid-template-columns: minmax(0, 1fr); }
  .mx-mini__it { display: flex; align-items: center; gap: 6px; min-width: 0; padding: 6px 8px; border-radius: 10px; background: #fff; }
  .mx-mini__it .mx-num { position: static; flex: none; }
  .mx-mini__txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
  .mx-mini__txt b { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #111827; }
  .mx-mini__txt span { font-size: 13px; font-weight: 700; color: #000; }
  .cmp-mx { padding: 8px; margin: 0 -6px; }
  .mx-blk { margin-top: 8px; padding: 2px 0 4px; }
  .mx-mob .mx-sec { padding: 0 8px; margin: 8px 0 2px; }
  .mx-mob .mx-k { padding: 8px 8px 3px; }
  .mx-vals { padding: 0 4px 4px; gap: 4px; }
  .mx-mob .mx-v { padding: 7px 8px; }
  .mx-head { gap: 6px; }
  .mx-mob .mx-card { padding: 6px; }
}
/* Карточка: под русским названием - английское (серым) и рейтинг, как на плитке каталога. */
.mx-name { min-height: 0; }
.mx-name-en { font-size: 13px; color: #6B7280; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.mx-card-rate { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 700; color: #111827; }
.mx-card-rate .icon { font-size: 15px; }
.mx-card-rate small { font-size: 13px; font-weight: 500; color: #6B7280; }
.mx-card-rate.is-empty { font-weight: 500; color: #6B7280; }
.mx-card-rate.is-empty .icon { color: #C4C9D0; }
@media (max-width: 768px) { .mx-mob .mx-name { min-height: 0; } .mx-mob .mx-name-en, .mx-mob .mx-card-rate { font-size: 12px; } .mx-mob .mx-card-rate .icon { font-size: 13px; } }
/* Широкий экран: колонки товаров шире, на экран влезает больше товаров. */
@media (min-width: 1440px) {
  .mx-cards, .mx-desk .mx-row { grid-template-columns: 210px repeat(var(--n), 250px); }
}