/*
 * SWEB Market — страницы каталога: хлебные крошки, раскладка, тулбар, пагинация.
 */

.sw-catalog {
    padding-block: 16px 32px;
}

/* ------------------------------------------------------- Хлебные крошки -- */

.sw-breadcrumbs {
    margin-bottom: 16px;
    font-size: .8125rem;
}

.sw-breadcrumbs ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sw-breadcrumbs li + li::before {
    content: '/';
    margin-right: 6px;
    color: var(--sw-text-muted);
}

.sw-breadcrumbs a {
    color: var(--sw-text-dim);
}

.sw-breadcrumbs li:last-child a {
    color: var(--sw-ink);
    pointer-events: none;
}

/* ------------------------------------------------------------ Раскладка -- */

/* Flex, а не grid с фиксированными колонками: сайдбар бывает и слева
   (`column_left`), и справа (`column_right` — так стоит модуль кабинета).
   У grid колонка задаётся позицией, и при правом сайдбаре 260px доставались
   основному содержимому, а колонка модулей растягивалась на всю ширину.
   При flex порядок берётся из разметки, и оба случая работают без правок. */
.sw-catalog__layout {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

@media (min-width: 992px) {
    .sw-catalog__layout--sidebar {
        flex-direction: row;
        align-items: flex-start;
    }

    .sw-catalog__layout--sidebar .sw-catalog__aside {
        flex: 0 0 260px;
    }
}

.sw-catalog__main {
    flex: 1;
    min-width: 0;
}

/* Несколько модулей в колонке идут друг под другом с зазором. */
.sw-column {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sw-catalog__title {
    margin-bottom: 16px;
}

.sw-catalog__intro {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    margin-bottom: 24px;
    color: var(--sw-text-dim);
}

.sw-catalog__intro-image {
    flex: none;
    width: 120px;
    border-radius: var(--sw-radius);
}

/* ------------------------------------------------------- Подкатегории -- */

.sw-subcats {
    margin-bottom: 24px;
}

/* Одна строка с горизонтальной прокруткой, а не перенос: у раздела с
   двумя десятками подкатегорий перенос съедал бы весь первый экран. */
.sw-subcats__track {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: thin;
}

.sw-subcats__item {
    display: flex;
    flex: none;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 124px;
    padding: 12px 8px;
    border: 1px solid transparent;
    border-radius: var(--sw-radius-lg);
    background: var(--sw-surface);
    color: var(--sw-ink);
    text-align: center;
    transition: border-color var(--sw-transition-fast), box-shadow var(--sw-transition);
}

.sw-subcats__item:hover {
    border-color: var(--sw-border-strong);
    box-shadow: var(--sw-shadow);
    color: var(--sw-primary);
}

.sw-subcats__image {
    width: 60px;
    height: 60px;
    object-fit: contain;
}

.sw-subcats__name {
    font-size: .8125rem;
    font-weight: 600;
    line-height: 1.3;
}

.sw-subcats__count {
    color: var(--sw-text-muted);
    font-size: .75rem;
}

/* ---------------------------------------------------------------- Тулбар -- */

/* Тулбар референса — карточка на подложке, а не голая строка. */
.sw-catalog__toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    padding: 12px 16px;
    border-radius: var(--sw-radius-lg);
    background: var(--sw-surface);
}

.sw-field {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sw-field__label {
    color: var(--sw-text-dim);
    font-size: .8125rem;
    white-space: nowrap;
}

.sw-select--sm {
    width: auto;
    padding: 8px 32px 8px 12px;
    font-size: .8125rem;
}

.sw-catalog__results {
    margin-left: auto;
    color: var(--sw-text-muted);
    font-size: .8125rem;
}

/* ------------------------------------------------ Переключатель раскладки -- */

.sw-viewswitch {
    display: flex;
    gap: 4px;
    padding: 3px;
    border-radius: var(--sw-radius);
    background: var(--sw-bg);
}

.sw-viewswitch__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: var(--sw-radius-sm);
    background: none;
    color: var(--sw-text-dim);
    cursor: pointer;
    transition: background var(--sw-transition-fast), color var(--sw-transition-fast);
}

.sw-viewswitch__btn:hover {
    color: var(--sw-primary);
}

.sw-viewswitch__btn.is-active {
    background: var(--sw-primary);
    color: #fff;
}

/* Список и прайс — плотные раскладки, на узком экране в них нет смысла:
   карточка и так занимает всю ширину. Кнопки там прячем. */
@media (max-width: 767.98px) {
    .sw-viewswitch {
        display: none;
    }
}

/* --------------------------------------------------------- «Показати ще» -- */

.sw-catalog__more {
    display: flex;
    justify-content: center;
    margin-top: 24px;
}

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

.sw-catalog__pagination {
    margin-top: 28px;
}

.sw-catalog__pagination ul {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sw-catalog__pagination li > a,
.sw-catalog__pagination li > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding-inline: 10px;
    border: 1px solid var(--sw-border-strong);
    border-radius: var(--sw-radius);
    background: var(--sw-surface);
    color: var(--sw-ink);
    font-size: .875rem;
}

.sw-catalog__pagination li.active > span {
    border-color: var(--sw-primary);
    background: var(--sw-primary);
    color: #fff;
}

.sw-catalog__pagination li > a:hover {
    border-color: var(--sw-primary);
    color: var(--sw-primary);
}

/* -------------------------------------------------- Описание категории -- */

.sw-catdesc {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 32px;
    padding: 20px;
    border-radius: var(--sw-radius-lg);
    background: var(--sw-surface);
}

@media (min-width: 768px) {
    .sw-catdesc {
        flex-direction: row;
        align-items: flex-start;
    }
}

.sw-catdesc__image {
    flex: none;
}

.sw-catdesc__image img {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: var(--sw-radius);
}

.sw-catdesc__body {
    min-width: 0;
}

.sw-catdesc__text {
    color: var(--sw-text-dim);
    line-height: 1.6;
}

.sw-catdesc__text > :first-child {
    margin-top: 0;
}

.sw-catdesc__text > :last-child {
    margin-bottom: 0;
}

/* Свёрнутое состояние ставит скрипт: без него описание должно быть
   видно целиком, иначе часть текста пропадёт из выдачи. */
.sw-catdesc__text.is-clamped {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;
}

.sw-catdesc__toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--sw-ink);
    cursor: pointer;
    font-size: .8125rem;
    font-weight: 500;
    text-decoration: underline;
}

.sw-catdesc__toggle .sw-icon {
    transition: transform var(--sw-transition-fast);
}

.sw-catdesc__toggle.is-open .sw-icon {
    transform: rotate(180deg);
}

/* ---------------------------------------------------- Расширенный поиск -- */

.sw-catalog__subtitle {
    margin: 24px 0 16px;
    font-size: 1.125rem;
}

.sw-searchform {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 8px;
    padding: 20px;
    border-radius: var(--sw-radius-lg);
    background: var(--sw-surface);
}

.sw-searchform__row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
}

/* Поля формы поиска стоят подписью сверху, а не в строку, как в тулбаре. */
.sw-searchform .sw-field {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
}

.sw-searchform__options {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

/* ------------------------------------------------------------- Бренды -- */

.sw-alphabet {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 24px;
}

.sw-alphabet__item {
    min-width: 36px;
    padding: 6px 10px;
    border: 1px solid var(--sw-border-strong);
    border-radius: var(--sw-radius);
    background: var(--sw-surface);
    color: var(--sw-ink);
    font-size: .875rem;
    text-align: center;
}

.sw-alphabet__item:hover {
    border-color: var(--sw-primary);
    color: var(--sw-primary);
}

/* Буква и её бренды стоят одной строкой: у магазина на десяток марок
   отдельный заголовок на каждую букву растягивал бы страницу на экраны
   пустоты. При сотне брендов список просто переносится. */
.sw-brandlist {
    display: flex;
    align-items: baseline;
    gap: 16px;
    padding: 12px 0;
    border-bottom: 1px solid var(--sw-border);
}

.sw-brandlist__letter {
    flex: none;
    width: 40px;
    margin: 0;
    color: var(--sw-text-muted);
    font-size: 1rem;
    scroll-margin-top: 96px;
}

.sw-brandlist__list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.sw-brandlist__item {
    padding: 6px 12px;
    border: 1px solid var(--sw-border-strong);
    border-radius: var(--sw-radius-pill);
    background: var(--sw-surface);
    color: var(--sw-ink);
    font-size: .875rem;
}

.sw-brandlist__item:hover {
    border-color: var(--sw-primary);
    color: var(--sw-primary);
}

/* ----------------------------------------------------------- Сравнение -- */

.sw-compare {
    width: 100%;
    border-collapse: collapse;
    font-size: .875rem;
}

.sw-compare th,
.sw-compare td {
    min-width: 200px;
    padding: 12px;
    border: 1px solid var(--sw-border);
    text-align: left;
    vertical-align: top;
}

/* Первый столбец — названия строк, он уже и держится у края при прокрутке. */
.sw-compare th[scope="row"] {
    position: sticky;
    left: 0;
    z-index: 1;
    min-width: 150px;
    background: var(--sw-surface);
    color: var(--sw-text-dim);
    font-weight: 400;
}

.sw-compare__group th {
    background: var(--sw-bg);
    color: var(--sw-ink);
    font-weight: 700;
}

.sw-compare__name {
    color: var(--sw-ink);
    font-weight: 600;
}

.sw-compare__name:hover {
    color: var(--sw-primary);
}

.sw-compare__image {
    display: block;
    max-width: 120px;
    height: auto;
}

.sw-compare__summary {
    color: var(--sw-text-dim);
}

.sw-compare__actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* -------------------------------------------------------------- Пустота -- */

.sw-empty {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding: 32px 0;
    color: var(--sw-text-dim);
}