/* Кабельрост — страница раздела каталога: плитки товаров, фильтр подбора,
   пагинация.

   Грузится только на страницах раздела, фильтра и поиска. Токены и каркас
   берутся из site.css, здесь их не переобъявляем.

   Про префиксы: свои классы носят k-, как везде в редизайне. Классы фильтра
   (cf_*) — вендорские, менять их нельзя, поэтому каждое правило по ним
   заужено до .left-column .mod_cf_filtering: те же имена встречаются в
   выдаче com_customfilters, и без зауживания правила уедут туда. */

/* ——— Заголовок раздела ——— */

.k-cat__title {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--s-3);
}

/* Счётчик найденного: тише заголовка, но на одной с ним строке — при
   фильтрации меняется именно он, и заметить это надо не прокручивая. */
.k-cat__count {
    font-size: var(--fs-s);
    font-weight: 400;
    color: var(--c-ink-3);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* ——— Сетка плиток ——— */

/* Промежуток, а не волосяная сетка в 1px: со сплошной сеткой выдача читалась
   одним равномерным полотном, ряды переставали отделяться друг от друга. */
.k-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
    gap: var(--s-4);
    margin: 0 0 var(--s-6);
}

/* Плитка — строка спецификации: цифры выровнены по левому краю и набраны
   табличными цифрами, чтобы соседние типоразмеры читались столбиком. */
.k-tile {
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
    padding: var(--s-4);
    background: var(--c-surface);
    border: 1px solid var(--c-hairline);
    font-variant-numeric: tabular-nums;
}

.k-tile:hover {
    border-color: var(--c-hairline-strong);
}

.k-tile__media {
    display: block;
    aspect-ratio: 4 / 3;
    background: var(--c-surface-2);
    overflow: hidden;
}

.k-tile__img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.k-tile__name {
    margin: 0;
    font-size: var(--fs-s);
    font-weight: 400;
    line-height: var(--lh-snug);
}

.k-tile__name a {
    color: var(--c-ink);
    text-decoration: none;
}

.k-tile__name a:hover {
    color: var(--c-brand-ink);
    text-decoration: underline;
}

.k-tile__size {
    margin: 0;
    font-size: var(--fs-l);
    font-weight: 700;
    line-height: var(--lh-tight);
    color: var(--c-ink);
}

.k-tile__specs,
.k-tile__sku {
    margin: 0;
    font-size: var(--fs-xs);
    color: var(--c-ink-3);
    line-height: var(--lh-snug);
}

/* Подвал плитки прижат вниз: у соседей разное число строк данных, а цена и
   кнопка должны стоять на одной линии по всему ряду. */
.k-tile__foot {
    margin-top: auto;
    padding-top: var(--s-3);
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s-3);
    border-top: 1px solid var(--c-hairline);
}

/* «от» и цена — одной строкой: VirtueMart печатает цену блочным div, и без
   этого приставка вставала отдельной строкой над числом. */
.k-tile__price {
    display: flex;
    align-items: baseline;
    gap: var(--s-1);
    font-size: var(--fs-m);
    font-weight: 700;
    color: var(--c-ink);
}

/* Разметку цены печатает VirtueMart (createPriceDiv), внутри свои обёртки. */
.k-tile__price .PricesalesPrice,
.k-tile__price .PricebasePrice {
    display: inline;
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
}

.k-tile__price--ask {
    font-size: var(--fs-s);
    font-weight: 400;
    color: var(--c-ink-2);
}

.k-tile__from {
    font-size: var(--fs-xs);
    font-weight: 400;
    color: var(--c-ink-3);
}

/* Кнопка, а не текстовая ссылка: подпись у самого края плитки склеивалась с
   соседним товаром и читалась как его заголовок. */
.k-tile__buy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 0 var(--s-4);
    border-radius: var(--radius-lg);
    background: var(--c-brand);
    color: #fff;
    font-size: var(--fs-xs);
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.k-tile__buy:hover,
.k-tile__buy:focus {
    background: var(--c-brand-hover);
    color: #fff;
}

/* ——— Фильтр подбора ——— */

.left-column .mod_cf_filtering {
    font-family: var(--font);
    font-size: var(--fs-s);
    color: var(--c-ink);
}

.left-column .mod_cf_filtering .cf_wrapp_all {
    border: 1px solid var(--c-hairline);
    background: var(--c-surface);
    padding: var(--s-4);
}

.left-column .mod_cf_filtering .cf_flt_wrapper + .cf_flt_wrapper {
    margin-top: var(--s-4);
    padding-top: var(--s-4);
    border-top: 1px solid var(--c-hairline);
}

.left-column .mod_cf_filtering .cf_flt_header {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    cursor: pointer;
    margin-bottom: var(--s-3);
}

.left-column .mod_cf_filtering .cf_flt_header_text {
    font-size: var(--fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--c-ink-3);
}

.left-column .mod_cf_filtering .cf_filters_list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--s-1);
}

.left-column .mod_cf_filtering .cf_filters_list_li {
    margin: 0;
}

/* Чекбокс — настоящий input, а не рисованный квадрат.
   Модуль прячет input (display:none) и рисует вместо него псевдоэлементы на
   ссылке и на label — получается незнакомый элемент без «птицы». Возвращаем
   штатный чекбокс браузера: он узнаваем, доступен с клавиатуры и красится
   одним accent-color. Вендорские псевдоэлементы глушим все четыре — класс
   cf_sel_opt висит и на label, и на ссылке внутри него. */
.left-column .mod_cf_filtering .cf_filters_list a.cf_option::before,
.left-column .mod_cf_filtering .cf_filters_list a.cf_option::after,
.left-column .mod_cf_filtering .cf_filters_list label::before,
.left-column .mod_cf_filtering .cf_filters_list label::after {
    content: none;
}

.left-column .mod_cf_filtering .form-check {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    min-height: 32px;
    padding: 0;
    margin: 0;
}

.left-column .mod_cf_filtering .cf_filters_list .form-check-input {
    display: inline-block;
    position: static;
    float: none;
    flex: none;
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--c-brand);
}

/* Строка фильтра: галочка и подпись на одной высоте.

   Подпись уезжала вверх на 9px — ровно на `margin-bottom: 9px`, который
   висел на ссылке значения от старой вёрстки списком. Флексом строку не
   выровнять: модуль держит `label{display:inline!important}` в своём
   media-файле, а как элемент флекс-строки label всё равно блокифицируется.
   Поэтому убираем причину — лишний внешний отступ у ссылки. */
.left-column .mod_cf_filtering .form-check label {
    flex: 1 1 auto;
    margin: 0;
    padding-right: 0;
    cursor: pointer;
}

.left-column .mod_cf_filtering .cf_link {
    display: block;
    width: 100%;
}

.left-column .mod_cf_filtering .cf_filters_list a.cf_option {
    margin: 0;
    font-size: var(--fs-s);
    line-height: var(--lh-snug);
    font-variant-numeric: tabular-nums;
}

.left-column .mod_cf_filtering .cf_option {
    display: block;
    padding: var(--s-2) 0;
    color: var(--c-ink-2);
    text-decoration: none;
}

.left-column .mod_cf_filtering .cf_option:hover {
    color: var(--c-brand-ink);
}

.left-column .mod_cf_filtering .cf_filters_list a.cf_sel_opt {
    color: var(--c-brand-ink);
    font-weight: 700;
}

/* «Очистить» внутри группы носит тот же класс cf_option, но чекбокса у него
   нет — иначе строка сброса выглядит как ещё одно значение фильтра. */
.left-column .mod_cf_filtering .cf_li_clear .cf_clear {
    padding-left: var(--s-5);
    font-size: var(--fs-xs);
    color: var(--c-ink-3);
}

.left-column .mod_cf_filtering .cf_counter {
    color: var(--c-ink-3);
    font-size: var(--fs-xs);
}

/* Сброс — второстепенное действие: кнопка «--on-light» из дизайн-системы,
   тон и высота как у вторичных кнопок сайта, а не вендорская ссылка-надпись. */
.left-column .mod_cf_filtering .cf_resetAll_link {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    margin-top: var(--s-4);
    padding: 0 var(--s-4);
    border: 1px solid var(--c-hairline-strong);
    border-radius: var(--radius-lg);
    background: var(--c-surface);
    color: var(--c-ink-2);
    font-size: var(--fs-xs);
    font-weight: 700;
    text-decoration: none;
}

.left-column .mod_cf_filtering .cf_resetAll_link:hover {
    border-color: var(--c-brand);
    color: var(--c-brand-ink);
}

/* Кнопка сворачивания фильтра существует только ниже 900px — на десктопе
   фильтр всегда развёрнут. */
.left-column .k-filter-toggle {
    display: none;
}

/* ——— Пагинация ——— */

.vm-pagination {
    margin: var(--s-6) 0 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-4);
    padding-top: var(--s-4);
    border-top: 1px solid var(--c-hairline);
}

.vm-pagination .vm-page-counter {
    font-size: var(--fs-s);
    color: var(--c-ink-3);
}

.vm-pagination .pagination-list {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-1);
    margin: 0;
    padding: 0;
}

.vm-pagination .pagination-list li {
    margin: 0;
}

.vm-pagination .pagination-list a,
.vm-pagination .pagination-list span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    min-height: 40px;
    padding: 0 var(--s-2);
    border: 1px solid var(--c-hairline);
    border-radius: var(--radius);
    font-size: var(--fs-s);
    color: var(--c-ink-2);
    text-decoration: none;
    font-variant-numeric: tabular-nums;
}

.vm-pagination .pagination-list a:hover {
    border-color: var(--c-hairline-strong);
    color: var(--c-ink);
}

.vm-pagination .pagination-list .disabled span {
    background: var(--c-brand-tint);
    border-color: var(--c-brand-tint);
    color: var(--c-brand-ink);
    font-weight: 700;
}

/* ——— Планшет и мобильный ——— */

/* Граница 900px задана в mobile/adaptive.css, своих не изобретаем.
   Там же (строка 72) контентной колонке ставится flex: 0 0 100%, а колонка
   фильтра остаётся col-sm-3 с 25% — список уезжает под фильтр, а справа от
   него зияет пустое поле в четверть экрана. Доводим до конца то, что там
   начато: ниже 900 обе колонки во всю ширину, фильтр идёт над списком. */
@media (max-width: 900px) {
    .row > .left-column {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .left-column .mod_cf_filtering .cf_wrapp_all {
        padding: var(--s-3);
    }

    /* Группы фильтра свёрстаны inline-block шириной 200px — на телефоне это
       оставляло половину экрана пустой, а значения шли одной колонкой, и
       раскрытый фильтр вырастал до 1279px, почти четырёх экранов. */
    .left-column .mod_cf_filtering .cf_flt_wrapper {
        display: block;
        width: 100%;
    }

    /* Фильтр во всю ширину — значения в несколько колонок, иначе на телефоне
       до товаров пришлось бы прокручивать четыре экрана чекбоксов. */
    .left-column .mod_cf_filtering .cf_filters_list {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    }

    /* Группы встают в ряд, и разделительная линия «между соседями» рисуется
       уже не между строками, а над заголовками — убираем. */
    .left-column .mod_cf_filtering .cf_flt_wrapper + .cf_flt_wrapper {
        margin-top: 0;
        padding-top: 0;
        border-top: 0;
    }

    /* Свёрнутый фильтр: на планшете развёрнутый занимал экран целиком, и до
       первого товара приходилось прокручивать всю подборку. */
    .left-column .k-filter-toggle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--s-3);
        width: 100%;
        min-height: 48px;
        padding: 0 var(--s-4);
        border: 1px solid var(--c-hairline-strong);
        border-radius: var(--radius-lg);
        background: var(--c-surface);
        color: var(--c-ink);
        font: inherit;
        font-size: var(--fs-s);
        font-weight: 700;
        cursor: pointer;
    }

    .left-column .k-filter-toggle::after {
        content: "";
        width: 8px;
        height: 8px;
        border-right: 2px solid var(--c-ink-2);
        border-bottom: 2px solid var(--c-ink-2);
        transform: translateY(-2px) rotate(45deg);
    }

    .left-column .k-filter-toggle[aria-expanded="true"]::after {
        transform: translateY(2px) rotate(-135deg);
    }

    .left-column .k-filter-collapsed .cf_wrapp_all {
        display: none;
    }

    .k-tiles {
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
        gap: var(--s-3);
    }

    .k-tile {
        padding: var(--s-3);
    }
}

@media (max-width: 480px) {
    .k-tiles {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .k-tile__foot {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--s-2);
    }
}