/* Блок "Другие товары" (карточка товара, catalog.element/.default/template.php).
 * Отдельный файл, не часть сборки local/layout (webpack/scss) — переживает
 * пересборку дизайн-макетов, см. тот же приём в catalog-price.css.
 *
 * Показываем ровно 5 товаров (см. $otherProductsCount в template.php) — 4
 * не занимали всю ширину ряда при точном совпадении с шириной карточки
 * листинга, посчитано что 5-я тоже помещается с запасом (см. ниже), 6-я уже
 * нет. main.css задаёт .interesting-products__list как grid на 3 колонки —
 * при 5 карточках это даёт перенос на несколько строк и слишком крупные
 * карточки; переопределяем ниже. display/flex-wrap продублированы через
 * !important — единственное назначение файла — это переопределение, поэтому
 * лишняя защита от неожиданного порядка подключения/специфичности здесь
 * уместна.
 *
 * Ширина карточки (только на десктопе, см. ниже) подогнана под ширину
 * карточки в листинге категории (.catalog__list) — формула ниже делит на 4,
 * ПОТОМУ ЧТО в листинге на этой ширине экрана 4 колонки (не потому что у
 * нас 5 карточек — количество карточек в нашем ряду и число колонок в
 * листинге не связаны, формула просто копирует, какой ширины получается
 * ОДНА карточка в листинге). В листинге слева ещё сайдбар с фильтрами
 * (.catalog__content: grid-template-columns: rem(290) 1fr, gap rem(22) —
 * см. widgets/catalog-content/catalog-content.scss), которого у нас нет.
 * Наш блок лежит в .container той же ширины (C), что и .catalog__inner на
 * странице листинга, поэтому карточка листинга (4 колонки, gap rem(20))
 * занимает ((C - 18.125rem - 1.375rem) - 3*1.25rem) / 4 — та же формула
 * ниже, подставленная для C = 100% нашего контейнера. Проверено расчётом
 * для контейнера от 1140px (xl, 1200-1399px) до 1320px (xxl, ≥1400px) —
 * 5 карточек такой ширины + 4 промежутка между ними везде укладываются в
 * контейнер с запасом (61-106px), 6-я уже не влезла бы.
 *
 * Ниже 1200px в листинге сайдбар всё ещё занимает те же 18.125rem (складывается
 * в одну колонку только под $tab-sm=768px) — точное совпадение ширины на
 * планшете потребовало бы то 3, то 1 карточку в ряд, а не "один ряд из 5"
 * которого просит эта задача. Поэтому под 1200px просто переходим на
 * читаемую обёртывающую сетку (2 карточки в ряд, 1 на совсем узких
 * экранах) без претензии на точное совпадение ширины — это уже не тот
 * "один ряд" случай, под который просили подогнать ширину. */

.interesting-products__list {
    display: flex !important;
    flex-wrap: nowrap !important;
    column-gap: 1.25rem;
    row-gap: 1.25rem;
}

.interesting-products__list .catalog-card {
    flex: 0 1 calc((100% - 18.125rem - 1.375rem - 3 * 1.25rem) / 4);
    max-width: calc((100% - 18.125rem - 1.375rem - 3 * 1.25rem) / 4);
}

@media (max-width: 1200px) {
    .interesting-products__list {
        flex-wrap: wrap !important;
    }
    .interesting-products__list .catalog-card {
        flex-basis: calc((100% - 1.25rem) / 2);
        max-width: calc((100% - 1.25rem) / 2);
    }
}

@media (max-width: 480px) {
    .interesting-products__list .catalog-card {
        flex-basis: 100%;
        max-width: 100%;
    }
}