/* ═══════════════════════════════════════
   Магазин: витрина, корзина и история покупок
   ═══════════════════════════════════════ */

/*
 * Своих цветов и отступов файл не заводит — только переменные из global.css,
 * поэтому переключатель светлой и тёмной темы работает без правок здесь.
 * Тиры редкости берут общие с коллекцией `--rarity-*`: один и тот же вид
 * обязан выглядеть одинаково на обоих экранах.
 */
.shop {
    max-width: 1100px;
    margin: 0 auto;
    padding: var(--space-xl) var(--space-lg) var(--space-3xl);
}

.shop__header {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-lg);
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: var(--space-xl);
}

.shop__title {
    margin-bottom: var(--space-sm);
}

.shop__hint {
    max-width: 560px;
    line-height: 1.6;
    color: var(--text-secondary);
}

.shop__summary {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
    align-items: center;
    color: var(--text-muted);
}

/* ═══════════════════════════════════════
   Вкладки
   ═══════════════════════════════════════ */
/* Вкладки — общий .tabs; здесь только отступ. */
.shop__tabs {
    margin-bottom: var(--space-xl);
}

.shop__tab-count {
    margin-left: var(--space-xs);
}

/* Панель показывается только по клику на вкладку: три раздела делят одну
   страницу, и одновременно виден ровно один. */
.shop__panel {
    display: none;
}

.shop__panel--active {
    display: block;
}

/* ═══════════════════════════════════════
   Витрина
   ═══════════════════════════════════════ */
/* Подвкладки — общий .subtabs; здесь только отступ до фильтров. */
.shop__subtabs {
    margin-bottom: var(--space-lg);
}

.shop__note,
.shop__empty {
    margin-bottom: var(--space-md);
}

/* Фильтры — два ряда: строка селектов и под ней сброс, от левого края. Сброс
   последним элементом строки с переносом вставал то справа от флажка, то под
   ним: ширина селекта — по самому длинному варианту, а варианты «Вида» и
   «Уровня» сужаются под редкость, и «Части» на образцах нет. Место кнопки
   зависело от выбранного фильтра. Сторож — e2e `shop.spec`, сброс под
   фильтрами. */
.shop__filters {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-md);
    margin-bottom: var(--space-md);
}

.shop__filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
    align-items: center;
    align-self: stretch;
}

.shop__filter {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    font-size: var(--font-sm);
    color: var(--text-muted);
}

/* Флажок порога — вровень с селектами. Строка фильтров выравнивает элементы
   по центру, и флажок высотой в строку текста вставал между подписью
   «Уровень» и селектом, на дюжину пикселей выше его середины. Высота селекта
   (40px, как `.select` в global.css) и прижим к низу строки ставят флажок
   ровно по центру высоты селекта. Сторож — e2e `shop.spec`, флажок порога. */
.shop__filter--checkbox {
    flex-direction: row;
    align-items: center;
    gap: var(--space-sm);
    min-height: 40px;
    align-self: flex-end;
}

.showcase-list,
.cart-list,
.history-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    list-style: none;
}

.showcase-row,
.cart-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
    align-items: center;
    padding: var(--space-md) var(--space-lg);
}

.showcase-row__main,
.cart-row__main {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1 1 200px;
    min-width: 0;
}

.showcase-row__name,
.cart-row__name {
    color: var(--text-primary);
    font-weight: 700;
}

.showcase-row__meta {
    color: var(--text-muted);
    font-size: var(--font-sm);
}

/* Цена — голосом игры, как все крупные цифры. */
.showcase-row__price,
.cart-row__price {
    font-family: var(--font-display);
    white-space: nowrap;
}

/* Группа покупки: количество и кнопки строки витрины. Отдельными детьми
   flex-строки они переносились поодиночке, и на телефоне кнопка падала на
   свою строку под ценой, а степпер висел рядом с ценой. Группа переносится
   целиком; степпер тянется по высоте кнопки, чтобы ряд был ровным. */
.showcase-row__buy {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    align-items: stretch;
}

/* Строка, на которую увела ссылка из коллекции. */
.showcase-row--highlighted {
    border-color: var(--rust);
    background: var(--highlight);
}

/* Раскрытие генов: строка — flex с переносом, блок уходит на свою строку. */
.showcase-row__genes {
    flex-basis: 100%;
}

.showcase-row__genes-summary {
    cursor: pointer;
    font-size: var(--font-sm);
    color: var(--text-secondary);
}

.showcase-genes {
    list-style: none;
    margin: var(--space-sm) 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    font-size: var(--font-sm);
}

.showcase-genes__note {
    font-size: var(--font-xs);
    color: var(--text-muted);
    margin: 0 0 var(--space-sm);
}

/* Ссылки в справку: без класса браузер красит их своим синим мимо токенов. */
.showcase-genes__link {
    color: var(--accent);
}

.showcase-gene--self {
    color: var(--success);
}

.showcase-gene--partial {
    color: var(--text-muted);
}

/* ═══════════════════════════════════════
   Корзина
   ═══════════════════════════════════════ */

/* Невалидная позиция не блокирует чекаут и в итог не входит: она приглушена,
   а причина написана прямо под названием. */
.cart-row--invalid {
    background: var(--bg-panel);
    opacity: 0.7;
}

.cart-row__problem {
    color: var(--warning);
    font-size: var(--font-sm);
}

.cart-row__remove {
    padding: 0 var(--space-sm);
    border: none;
    background: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: var(--font-xl);
    line-height: 1;
    transition: color var(--transition-base);
}

.cart-row__remove:hover {
    color: var(--danger);
}

.cart__footer {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    align-items: flex-end;
    margin-top: var(--space-xl);
    padding-top: var(--space-lg);
    border-top: var(--border-ink) solid var(--ink);
}

.cart__total {
    font-size: var(--font-lg);
}

/* Итог корзины — крупно: это число, ради которого открыта вкладка. */
.cart__total-value {
    font-family: var(--font-display);
    font-size: var(--font-title);
    font-weight: 400;
}

.cart__samples {
    color: var(--text-muted);
    font-size: var(--font-sm);
}

/* Нехватка средств видна ещё до нажатия «Купить»: сервер присылает её вместе
   с пересчитанной корзиной. */
.cart__shortage {
    color: var(--danger);
    font-size: var(--font-sm);
}

.cart__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
}

/* ═══════════════════════════════════════
   История покупок
   ═══════════════════════════════════════ */
.purchase {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-lg);
}

.purchase__header {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    align-items: center;
    justify-content: space-between;
}

.purchase__date {
    color: var(--text-muted);
    font-size: var(--font-sm);
}

.purchase__total {
    font-family: var(--font-display);
}

.purchase__items {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    list-style: none;
    color: var(--text-secondary);
    font-size: var(--font-sm);
}

/* ═══════════════════════════════════════
   Адаптивность
   ═══════════════════════════════════════ */
@media (max-width: 600px) {
    .shop__summary,
    .shop__filters {
        width: 100%;
    }

    /* Счётчик корзины — в строку с подписью, как на десктопе. Три вкладки
       делят ширину телефона поровну, и бирка в обычном размере не влезала
       рядом со словом «Корзина»: переносилась под него, и подпись одной
       вкладки стояла выше двух других. Подпись не переносится, боковые
       отступы вкладки и бирка ужаты до того, что влезает в треть экрана.
       Сторож — e2e `shop.spec`, счётчик корзины. */
    .shop__tabs .tabs__tab {
        padding-left: var(--space-xs);
        padding-right: var(--space-xs);
        white-space: nowrap;
    }

    .shop__tab-count {
        padding: 0 var(--space-xs);
        line-height: 1.4;
    }

    /* Четыре селекта в строку на телефоне не влезают: вид вроде
       «Тасманийский дьявол» режется. Каждый тянется от 140px, и лишние
       переносятся целиком — длинный селект встаёт своей строкой. */
    .shop__filter {
        flex: 1 1 140px;
    }

    /* Флажок порога — своей строкой во всю ширину под селектами. В одной
       строке с «Уровнем» ему доставалась половина, и подпись разваливалась
       на колонки с переносом в каждой. */
    .shop__filter--checkbox {
        flex: 1 1 100%;
    }

    .showcase-row,
    .cart-row {
        align-items: flex-start;
    }

    /* Группа покупки — на всю ширину карточки: количество слева, кнопка справа
       на остаток. У образцов вторая кнопка «Продать» не помещается в тот же
       ряд и уходит строкой ниже, тоже на всю ширину. */
    .showcase-row__buy {
        flex: 1 1 100%;
    }

    .showcase-row__buy > .btn--secondary {
        flex: 1 1 8rem;
    }

    .cart__footer {
        align-items: stretch;
    }

    .cart__actions > * {
        flex: 1 1 auto;
    }
}