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

/*
 * Своих цветов и отступов файл не заводит — только переменные из 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 {
    font-size: var(--font-xl);
    font-weight: 700;
    color: var(--text-primary);
    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);
}

/* ═══════════════════════════════════════
   Вкладки
   ═══════════════════════════════════════ */
.shop__tabs {
    display: flex;
    gap: var(--space-xs);
    border-bottom: 1px solid var(--border);
    margin-bottom: var(--space-xl);
    overflow-x: auto;
}

.shop__tab {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-md) var(--space-lg);
    border: none;
    border-bottom: 2px solid transparent;
    background: none;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: var(--font-md);
    font-weight: 500;
    white-space: nowrap;
    transition: color var(--transition-base), border-color var(--transition-base);
}

.shop__tab:hover {
    color: var(--text-primary);
}

.shop__tab--active {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

.shop__tab-count {
    padding: 0 var(--space-sm);
    border-radius: var(--radius-lg);
    background: var(--bg-hover);
    color: var(--text-muted);
    font-size: var(--font-xs);
}

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

.shop__panel--active {
    display: block;
}

/* ═══════════════════════════════════════
   Витрина
   ═══════════════════════════════════════ */
.shop__section-header {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
    align-items: flex-end;
    justify-content: space-between;
}

.shop__section-title {
    font-size: var(--font-lg);
    font-weight: 600;
    color: var(--text-primary);
    margin: var(--space-xl) 0 var(--space-md);
}

.shop__section-header .shop__section-title {
    margin-top: 0;
}

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

.shop__filters {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
    align-items: center;
    margin-bottom: var(--space-md);
}

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

.shop__filter--checkbox {
    flex-direction: row;
    align-items: center;
    gap: var(--space-sm);
}

.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);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--bg-surface);
}

.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: 500;
}

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

/* Метка редкости — цветом рамки и текста, а не заливкой: тёмная тема делает
   палитру светлее, и белый текст на ней перестал бы читаться. */
.showcase-row__rarity {
    padding: 2px var(--space-sm);
    border: 1px solid currentColor;
    border-radius: var(--radius-lg);
    font-size: var(--font-xs);
    white-space: nowrap;
    color: var(--rarity-common);
}

.showcase-row__rarity[data-rarity-value="uncommon"] { color: var(--rarity-uncommon); }
.showcase-row__rarity[data-rarity-value="rare"] { color: var(--rarity-rare); }
.showcase-row__rarity[data-rarity-value="legendary"] { color: var(--rarity-legendary); }

.showcase-row__price,
.cart-row__price {
    color: var(--text-secondary);
    white-space: nowrap;
}

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

/* Раскрытие генов: строка — 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: 1px solid var(--border);
}

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

.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);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--bg-surface);
}

.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 {
    color: var(--text-primary);
    font-weight: 500;
}

.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%;
    }

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

    .cart__footer {
        align-items: stretch;
    }

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