/* Витрина магазина.
 *
 * Оформление то же, что у самой программы: чёрное зеркало и золото, антиква.
 * Человек, купивший здесь, откроет программу и увидит то же лицо — это
 * важнее любой моды.
 *
 * Тему Телеграма нарочно не подхватываем: у магазина свой облик, и в
 * светлой теме он не должен становиться белым.
 *
 * Движение — короткое, 150–250 мс: витрина должна отзываться, а не танцевать.
 * Телефон 360px — одна колонка наборов и две колоды в ряд, без горизонтальной
 * прокрутки; на широком экране до 1200px — несколько колонок. */

:root {
    --фон:          #060507;
    --фон-выше:     #0c0a0e;
    --фон-карточки: #100c16;
    --золото:       #c9a227;
    --золото-свет:  #ebd48c;
    --золото-тень:  #6b5518;
    --текст:        #e4dac2;
    --тусклый:      #8c8270;
    --антиква:      Georgia, "Times New Roman", serif;

    /* оттенки и мелочи оформления */
    --золото-дым:   rgba(201, 162, 39, .10);
    --кайма:        rgba(201, 162, 39, .22);
    --кайма-ярче:   rgba(201, 162, 39, .55);
    --беда:         #b8483c;
    --лад:          #6fbf73;
    --тень:         0 12px 34px rgba(0, 0, 0, .55);
    --тень-мягкая:  0 4px 14px rgba(0, 0, 0, .38);
    --радиус:       10px;
    --быстро:       .15s;
    --плавно:       .22s;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--фон);
    color: var(--текст);
    font-family: var(--антиква);
    font-size: 16px;
    line-height: 1.5;
    overscroll-behavior-y: contain;
}

html { scroll-behavior: auto; }

/* Небо за витриной (sky.js): звёзды и Цветок Жизни на холсте позади всего. Чёрный фон даёт html,
   body прозрачно — иначе холст с z-index -1 скрылся бы под ним. */
body { background: transparent; }
.небо { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }

body {
    padding-bottom: env(safe-area-inset-bottom);
    overflow-x: hidden;
}

/* Пока открыта карточка, витрина под ней не прокручивается. */
body.заперто { overflow: hidden; }

button { font-family: inherit; }

mark {
    background: rgba(201, 162, 39, .32);
    color: var(--золото-свет);
    padding: 0 1px;
    border-radius: 2px;
}

.витрина {
    max-width: 1200px;
    margin: 0 auto;
    min-height: 100vh;
}

/* ---------------------------------------------------------------- шапка */

.шапка {
    padding: 16px 22px 0;
    text-align: center;
}

.вензель {
    font-size: 30px;
    color: var(--золото);
    line-height: 1;
    margin-bottom: 12px;
    text-shadow: 0 0 18px rgba(201, 162, 39, .35);
}

.вензель-малый { font-size: 18px; margin: 16px 0 0; opacity: .7; }

.шапка h1 {
    margin: 0;
    font-size: 25px;
    font-weight: normal;
    letter-spacing: .04em;
    color: var(--золото-свет);
}
.шапка h1 .лого { color: var(--золото); margin-right: .4em; text-shadow: 0 0 18px rgba(201, 162, 39, .35); }

.подзаголовок {
    margin: 8px 0 0;
    font-size: 13px;
    color: var(--тусклый);
}

.черта {
    height: 1px;
    margin: 20px auto 0;
    max-width: 340px;
    background: linear-gradient(90deg,
        rgba(201,162,39,0) 0%, rgba(201,162,39,.85) 50%, rgba(201,162,39,0) 100%);
}

/* ---------------------------------------------------------------- поиск */

.поиск-обёртка {
    padding: 18px 16px 4px;
    max-width: 560px;
    margin: 0 auto;
}

.поиск {
    position: relative;
    display: flex;
    align-items: center;
    border: 1px solid var(--кайма);
    border-radius: 999px;
    background: var(--фон-выше);
    transition: border-color var(--плавно), box-shadow var(--плавно);
}

.поиск:focus-within {
    border-color: var(--золото);
    box-shadow: 0 0 0 3px var(--золото-дым), var(--тень-мягкая);
}

.поиск-знак {
    flex: 0 0 auto;
    padding: 0 4px 0 14px;
    font-size: 20px;
    line-height: 1;
    color: var(--золото);
    transform: scaleX(-1);   /* лупа ручкой вправо */
}

.поиск input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 11px 8px 11px 4px;
    font: inherit;
    font-size: 15px;
    color: var(--текст);
    background: transparent;
    border: none;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}

.поиск input::placeholder { color: var(--тусклый); opacity: .8; }
.поиск input::-webkit-search-cancel-button { display: none; }

.поиск-сброс {
    flex: 0 0 auto;
    width: 32px; height: 32px;
    margin-right: 6px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--тусклый);
    font-size: 14px;
    cursor: pointer;
    transition: color var(--быстро), background var(--быстро);
}

.поиск-сброс:hover { color: var(--золото-свет); background: var(--золото-дым); }

.найдено {
    margin: 8px 6px 0;
    font-size: 12.5px;
    color: var(--тусклый);
    text-align: center;
    letter-spacing: .04em;
}

/* ---------------------------------------------------------------- полосы */

.полоса { padding: 26px 16px 0; }

.рубрика-строка {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

.рубрика {
    margin: 0;
    font-size: 11px;
    font-weight: normal;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--золото);
}

.пояснение {
    margin: 5px 0 16px;
    font-size: 12.5px;
    color: var(--тусклый);
    line-height: 1.5;
}

/* ---------------------------------------------------------------- плитки */

.бейджи {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 6px;
}

.бейдж {
    display: inline-block;
    font-size: 9.5px;
    letter-spacing: .07em;
    text-transform: uppercase;
    line-height: 1.3;
    color: var(--золото);
    border: 1px solid var(--кайма);
    border-radius: 999px;
    padding: 2px 7px;
    white-space: nowrap;
}

.бейдж-золотой {
    background: var(--золото);
    border-color: var(--золото);
    color: #120e06;
}

.бейдж-тихий { color: var(--тусклый); border-color: rgba(140, 130, 112, .3); }

/* Уже купленное: зелёная метка и приглушённая плитка — видно с одного взгляда,
   что платить второй раз не нужно. */
.бейдж-куплено {
    background: #2f6b41;
    border-color: #2f6b41;
    color: #eaf6ee;
}

.товар.уже-куплено { opacity: .62; }
.товар.уже-куплено .цена { text-decoration: line-through; color: var(--тусклый); }
.раздел-куплено { color: #6ea883; font-style: italic; }

.совпало-в {
    font-size: 10.5px;
    font-style: italic;
    color: var(--тусклый);
    margin: 0 0 4px;
}

/* обложка с ленивой загрузкой: место занято сразу, картинка проявляется */
.обложка {
    position: relative;
    overflow: hidden;
    background: #0a080d radial-gradient(ellipse at 50% 40%, rgba(201, 162, 39, .10), transparent 70%);
}

.обложка img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transform: scale(1.03);
    transition: opacity .35s ease, transform .45s ease;
}

.обложка img.готова { opacity: 1; transform: none; }

.обложка-нет::before {
    content: '🜛';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: var(--золото-тень);
}

/* ---- наборы, программы, книги ---- */

.наборы {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 14px;
}

.набор {
    display: flex;
    gap: 14px;
    padding: 12px;
    border: 1px solid var(--кайма);
    border-radius: var(--радиус);
    background: linear-gradient(180deg, #100c14, #0b090d);
    cursor: pointer;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .02) inset;
    transition: border-color var(--плавно), box-shadow var(--плавно), transform var(--плавно);
}

.набор:active { transform: scale(.985); border-color: var(--золото); }

.набор .обложка {
    width: 112px;
    flex: 0 0 112px;
    aspect-ratio: 620 / 542;
    border-radius: 6px;
    align-self: flex-start;
}

.набор-текст {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    flex: 1 1 auto;
}

.набор-имя {
    font-size: 17px;
    color: var(--золото-свет);
    margin: 0 0 3px;
    line-height: 1.25;
}

.набор-строка {
    font-size: 12px;
    color: var(--тусклый);
    margin: 0 0 8px;
}

.набор .цена { font-size: 19px; }

/* ---- сетка колод ---- */

.сетка {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
}

.колода {
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(201, 162, 39, .16);
    border-radius: var(--радиус);
    background: linear-gradient(180deg, #100c14, #0b090d);
    cursor: pointer;
    overflow: hidden;
    transition: border-color var(--плавно), box-shadow var(--плавно), transform var(--плавно);
}

.колода:active { transform: scale(.98); border-color: var(--золото-тень); }

.колода .обложка { aspect-ratio: 620 / 542; }

.колода-текст { padding: 9px 10px 11px; display: flex; flex-direction: column; flex: 1 1 auto; }

.колода-имя {
    font-size: 14px;
    color: var(--текст);
    margin: 0 0 2px;
    line-height: 1.25;
}

.колода-строка {
    font-size: 11px;
    color: var(--тусклый);
    margin: 0 0 6px;
}

.колода .цена { margin-top: auto; }

/* ---- наведение: лёгкое увеличение обложки и золотая кайма ---- */

@media (hover: hover) {
    .колода:hover,
    .набор:hover {
        border-color: var(--кайма-ярче);
        box-shadow: var(--тень-мягкая), 0 0 0 1px rgba(201, 162, 39, .08);
        transform: translateY(-3px);
    }
    .колода:hover .обложка img.готова,
    .набор:hover .обложка img.готова { transform: scale(1.05); }
}

.товар:focus-visible { outline: 2px solid var(--золото); outline-offset: 2px; }

/* ---------------------------------------------------------------- цена */

.цена {
    font-size: 16px;
    color: var(--золото-свет);
    white-space: nowrap;
    letter-spacing: .02em;
}

.звезда { color: var(--золото); }

/* ---------------------------------------------------------------- расклады */
/* Разделов полсотни и картинок у них нет: показываем строками, а не плитками,
   иначе выйдет стена одинаковых прямоугольников. */

.разделы {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 8px;
    margin-top: 14px;
}

.раздел {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: var(--фон-выше);
    border: 1px solid var(--кайма);
    border-radius: 8px;
    cursor: pointer;
    transition: border-color var(--быстро), background var(--быстро), transform var(--быстро);
}

.раздел:hover,
.раздел:focus-within {
    border-color: var(--кайма-ярче);
    background: rgba(201, 162, 39, .06);
}

.раздел:active { transform: scale(.985); }

.раздел-текст { flex: 1 1 auto; min-width: 0; }

.раздел-имя {
    color: var(--текст);
    font-size: 15px;
    line-height: 1.3;
}

.раздел-строка {
    margin-top: 2px;
    color: var(--тусклый);
    font-size: 12px;
}

.раздел-цена {
    flex: 0 0 auto;
    padding: 6px 13px;
    color: var(--золото);
    border: 1px solid rgba(201, 162, 39, .5);
    border-radius: 999px;
    font-size: 14px;
    white-space: nowrap;
    transition: background var(--быстро), color var(--быстро);
}

.раздел:hover .раздел-цена { background: var(--золото); color: #120e06; }

/* ---------------------------------------------------------------- демо */

.демо {
    margin: 0 0 14px;
    padding: 16px 18px;
    border: 1px solid var(--золото);
    border-radius: var(--радиус);
    background: linear-gradient(135deg, rgba(201, 162, 39, .12), rgba(201, 162, 39, .04));
    box-shadow: 0 0 0 1px rgba(201, 162, 39, .08), var(--тень-мягкая);
}

.демо-шапка .бейдж { margin-bottom: 8px; }

.демо-имя {
    font-size: 19px;
    color: var(--золото-свет);
    margin: 0 0 2px;
}

.демо-строка {
    font-size: 12px;
    color: var(--тусклый);
    margin: 0 0 8px;
}

.демо-описание {
    margin: 0 0 14px;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--текст);
    white-space: pre-line;   /* строки описания — с новой строки, как написал хозяин */
}

.демо-действия { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; }

.демо-взять {
    padding: 10px 20px;
    background: linear-gradient(180deg, var(--золото-свет), var(--золото));
    color: #120e06;
    border: 1px solid var(--золото-свет);
    border-radius: 999px;
    font-size: 14px;
    cursor: pointer;
    box-shadow: 0 2px 12px rgba(201, 162, 39, .3);
    transition: filter var(--быстро), transform var(--быстро), opacity var(--быстро);
}

.демо-взять:hover { filter: brightness(1.06); }
.демо-взять:active { transform: scale(.97); }
.демо-взять:disabled { opacity: .6; cursor: default; }

.демо-раздел { color: var(--золото); }

/* ---------------------------------------------------------------- скелеты */

.скелет {
    border-radius: var(--радиус);
    background: linear-gradient(100deg, #0f0c14 30%, #1a1522 50%, #0f0c14 70%);
    background-size: 200% 100%;
    animation: мерцать 1.5s ease-in-out infinite;
    border: 1px solid rgba(201, 162, 39, .08);
}

.скелет-плитка { aspect-ratio: 620 / 720; }
.скелет-набор { height: 122px; }

/* ---------------------------------------------------------------- пусто, беда, без-jquery */

.пусто, .беда, .без-jquery {
    margin: 26px 16px 0;
    padding: 28px 20px;
    text-align: center;
    border: 1px dashed var(--кайма);
    border-radius: var(--радиус);
}

.пусто p, .беда p, .без-jquery p {
    margin: 0 0 16px;
    font-size: 14.5px;
    color: var(--текст);
    line-height: 1.6;
}

.беда h2, .без-jquery h2 {
    margin: 0 0 8px;
    font-size: 19px;
    font-weight: normal;
    color: var(--золото-свет);
}

.без-скрипта .скелет { animation: none; opacity: .3; }
.без-скрипта .поиск-обёртка, .без-скрипта .сортировка { opacity: .35; pointer-events: none; }

/* ---------------------------------------------------------------- подвал */

.подвал { padding: 34px 22px 30px; text-align: center; }
.подвал .черта { margin-top: 0; }

/* ---------------------------------------------------------------- наверх */

.наверх {
    position: fixed;
    right: 16px;
    bottom: calc(18px + env(safe-area-inset-bottom));
    width: 42px; height: 42px;
    border-radius: 50%;
    border: 1px solid var(--золото-тень);
    background: rgba(16, 12, 22, .92);
    color: var(--золото);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    z-index: 30;
    box-shadow: var(--тень-мягкая);
    transition: border-color var(--быстро), color var(--быстро), transform var(--быстро);
}

.наверх:hover { border-color: var(--золото); color: var(--золото-свет); }
.наверх:active { transform: scale(.94); }

/* ---------------------------------------------------------------- карточка */

.полог {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .72);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    z-index: 40;
}

.карточка {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    max-height: 92vh;
    max-height: 92dvh;
    overflow-y: auto;
    z-index: 50;
    background: var(--фон-карточки);
    border-top: 1px solid var(--золото-тень);
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -14px 44px rgba(0, 0, 0, .6);
    padding: 0 0 calc(26px + env(safe-area-inset-bottom));
    animation: подняться .26s cubic-bezier(.2, .8, .3, 1);
    -webkit-overflow-scrolling: touch;
}

.карточка.уходит { animation: опуститься .2s ease-in forwards; }

.ручка {
    width: 38px; height: 4px;
    margin: 10px auto 0;
    border-radius: 2px;
    background: var(--золото-тень);
    opacity: .8;
}

.карточка-нутро { padding: 14px 20px 0; }

/* Обложка в карточке не должна съедать экран: человек пришёл читать
   описание, а карты он уже видел на витрине. */
.к-обложка-рамка {
    margin: 0 auto 18px;
    text-align: center;
}

.к-обложка {
    display: inline-block;
    max-width: 100%;
    max-height: 34vh;
    object-fit: contain;
    border: 1px solid var(--золото-тень);
    border-radius: 8px;
    background: var(--фон);
    box-shadow: var(--тень-мягкая);
    opacity: 0;
    transition: opacity .3s ease;
}

.к-обложка.готова { opacity: 1; }

.к-бейджи { margin-bottom: 8px; }

.карточка h2 {
    margin: 0;
    font-size: 22px;
    font-weight: normal;
    color: var(--золото-свет);
    line-height: 1.25;
}

.к-строка {
    margin: 5px 0 14px;
    font-size: 12.5px;
    color: var(--тусклый);
    font-style: italic;
}

.к-описание {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.62;
}

.к-состав-обёртка { margin-top: 18px; }

.к-состав-обёртка h3,
.к-выбор-обёртка h3 {
    margin: 0 0 6px;
    font-size: 11px;
    font-weight: normal;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--золото);
}

.состав-блок { margin-top: 8px; }

.состав-заголовок {
    font-size: 12.5px;
    color: var(--золото-свет);
    margin: 0 0 4px;
}

.состав-список {
    margin: 0;
    padding: 0 0 0 18px;
    font-size: 13px;
    color: var(--тусклый);
    line-height: 1.6;
    columns: 2;
    column-gap: 16px;
}

.состав-список li { break-inside: avoid; }

.состав-ещё {
    margin: 4px 0 0;
    padding: 4px 0;
    background: transparent;
    border: none;
    color: var(--золото);
    font-size: 12.5px;
    cursor: pointer;
    text-decoration: underline dotted;
    text-underline-offset: 3px;
}

.к-цена {
    margin-top: 22px;
    padding-top: 16px;
    border-top: 1px solid var(--кайма);
    text-align: center;
    font-size: 30px;
    color: var(--золото-свет);
    line-height: 1.1;
}

/* Своя кнопка покупки. В телеграме внизу висит родная кнопка, и эта
   прячется; вне телеграма она единственная, и без неё карточка выглядела бы
   недоделанной. */
.к-купить {
    display: block;
    width: 100%;
    margin-top: 18px;
    padding: 15px;
    font-size: 16px;
    color: #120e06;
    background: linear-gradient(180deg, var(--золото-свет), var(--золото));
    border: 1px solid var(--золото-свет);
    border-radius: 999px;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(201, 162, 39, .28);
    transition: filter var(--быстро), transform var(--быстро), opacity var(--плавно), box-shadow var(--плавно);
}

.к-купить:hover { filter: brightness(1.06); }
.к-купить:active { transform: scale(.985); }

.к-купить:disabled {
    opacity: .45;
    cursor: default;
    box-shadow: none;
}

/* «Открываю оплату…»: кружок перед надписью */
.к-купить-ждёт { opacity: .8; }

.к-купить-ждёт::before {
    content: '';
    display: inline-block;
    width: 14px; height: 14px;
    margin: 0 8px -2px 0;
    border: 2px solid rgba(18, 14, 6, .3);
    border-top-color: #120e06;
    border-radius: 50%;
    animation: кружить .8s linear infinite;
}

.закрыть {
    position: absolute;
    top: 10px; right: 10px;
    width: 34px; height: 34px;
    border: 1px solid transparent;
    border-radius: 50%;
    background: rgba(0, 0, 0, .5);
    color: var(--тусклый);
    font-size: 15px;
    cursor: pointer;
    z-index: 2;
    transition: color var(--быстро), border-color var(--быстро);
}

.закрыть:hover { color: var(--золото-свет); border-color: var(--золото-тень); }

/* ------------------------------------------------------- набор на выбор */
/* Покупатель сам отмечает колоды, и цена считается от отмеченного. */

.к-выбор-обёртка { margin: 18px 0 6px; }

.к-выбор-сколько {
    margin: 0 0 10px;
    font-size: 12px;
    color: var(--тусклый);
    line-height: 1.5;
}

.выбор { display: flex; flex-direction: column; gap: 4px; }

.выбор-строка {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 11px;
    border: 1px solid rgba(201, 162, 39, .2);
    border-radius: 8px;
    background: var(--фон-выше);
    cursor: pointer;
    transition: border-color var(--быстро), background var(--быстро);
}

.выбор-строка:hover { border-color: rgba(201, 162, 39, .45); }

.выбор-строка.отмечена {
    border-color: var(--золото);
    background: rgba(201, 162, 39, .1);
}

.выбор-галка {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: #c9a227;
    cursor: pointer;
}

.выбор-имя {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 14px;
    color: var(--текст);
}

.выбор-цена {
    flex: 0 0 auto;
    font-size: 13px;
    color: var(--золото);
    white-space: nowrap;
}

.к-выбор-итог {
    position: sticky;
    bottom: 0;
    margin-top: 8px;
    padding: 8px 12px;
    font-size: 12.5px;
    color: var(--тусклый);
    background: var(--фон-карточки);
    border: 1px solid var(--кайма);
    border-radius: 8px;
    transition: color var(--плавно), border-color var(--плавно);
}

.к-выбор-итог-готов { color: var(--золото-свет); border-color: var(--золото); }

/* ---------------------------------------------------------------- весть */

.весть {
    position: fixed;
    inset: 0;
    z-index: 60;
    background: rgba(6, 5, 7, .9);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px;
    text-align: center;
}

.весть-нутро {
    max-width: 380px;
    padding: 28px 24px;
    border: 1px solid var(--золото-тень);
    border-radius: 14px;
    background: var(--фон-карточки);
    box-shadow: var(--тень);
    animation: всплыть .26s cubic-bezier(.2, .8, .3, 1);
}

.весть h2 {
    margin: 14px 0 12px;
    font-size: 21px;
    font-weight: normal;
    color: var(--золото-свет);
}

.весть p {
    margin: 0 0 26px;
    font-size: 14.5px;
    line-height: 1.62;
    color: var(--текст);
}

.кнопка {
    font-size: 15px;
    color: var(--золото-свет);
    background: var(--фон-карточки);
    border: 1px solid var(--золото-тень);
    border-radius: 999px;
    padding: 12px 30px;
    cursor: pointer;
    transition: background var(--быстро), border-color var(--быстро);
}

.кнопка:hover { border-color: var(--золото); }
.кнопка:active { background: #1a1424; border-color: var(--золото); }

/* ---------------------------------------------------------------- разделы витрины */

/* Три кнопки под шапкой — ТАРО, КНИГИ, СОФТ. Ненажатые — обведены тенью
   золота, как прочие кнопки; нажатая залита золотом, надпись тёмная, как у
   бейджа «Бесплатно». На телефоне держатся в одну строку и переносятся,
   если разделов заведут больше. */
.витрина-разделы {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 20px 16px 0;
}

.раздел-кнопка {
    font-family: var(--антиква);
    font-size: 13px;
    letter-spacing: 1.6px;
    color: var(--золото-свет);
    background: var(--фон-карточки);
    border: 1px solid var(--золото-тень);
    border-radius: 999px;
    padding: 10px 22px;
    cursor: pointer;
    transition: background var(--быстро), border-color var(--быстро), color var(--быстро);
}

.раздел-кнопка:hover { border-color: var(--золото); }

.раздел-кнопка.выбран {
    background: var(--золото);
    border-color: var(--золото);
    color: #120e06;
}

/* ---------------------------------------------------------------- тосты */

.тосты {
    position: fixed;
    left: 0; right: 0;
    bottom: calc(18px + env(safe-area-inset-bottom));
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    z-index: 80;
    pointer-events: none;
    padding: 0 16px;
}

.тост {
    pointer-events: auto;
    max-width: min(100%, 440px);
    padding: 11px 16px;
    font-size: 14px;
    line-height: 1.45;
    color: var(--текст);
    background: #14101c;
    border: 1px solid var(--кайма);
    border-left: 3px solid var(--золото);
    border-radius: 10px;
    box-shadow: var(--тень);
    cursor: pointer;
}

.тост-ошибка   { border-left-color: var(--беда); }
.тост-успех    { border-left-color: var(--лад); }
.тост-внимание { border-left-color: var(--золото); }

/* ---------------------------------------------------------------- ожидание */
/* Тонкая полоса вверху вместо тёмного полога: страница не гаснет. */

.ожидание {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 2px;
    z-index: 90;
    background: linear-gradient(90deg, transparent, var(--золото-свет), transparent);
    background-size: 40% 100%;
    background-repeat: no-repeat;
    animation: бежать 1s linear infinite;
}

/* ---------------------------------------------------------------- движение */

@keyframes кружить    { to { transform: rotate(360deg); } }
@keyframes проявиться { from { opacity: 0; } to { opacity: 1; } }
@keyframes подняться  { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes опуститься { from { transform: translateY(0); } to { transform: translateY(100%); } }
@keyframes всплыть    { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes мерцать    { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@keyframes бежать     { from { background-position: -40% 0; } to { background-position: 140% 0; } }

/* Плитки появляются лесенкой: задержку каждой задаёт скрипт. */
.всплывает { animation: всплыть .3s cubic-bezier(.2, .7, .3, 1) both; }

[hidden] { display: none !important; }

/* ---------------------------------------------------------------- широкий экран */

@media (min-width: 720px) {
    .полоса { padding: 32px 28px 0; }
    .сетка { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 16px; }
    .наборы { gap: 16px; }
    .пусто, .беда, .без-jquery { margin-left: 28px; margin-right: 28px; }

    /* На широком экране карточка — окно посередине, а не лист снизу. */
    .карточка {
        left: 50%; top: 50%; right: auto; bottom: auto;
        width: min(600px, calc(100% - 40px));
        max-height: 88vh;
        max-height: 88dvh;
        transform: translate(-50%, -50%);
        border: 1px solid var(--золото-тень);
        border-radius: 14px;
        padding-bottom: 26px;
        animation: проявиться-окно .22s ease;
    }
    .карточка.уходит { animation: пропасть-окно .18s ease-in forwards; }
    .ручка { display: none; }
    .карточка-нутро { padding-top: 24px; }
    .к-обложка { max-height: 38vh; }
}

@keyframes проявиться-окно {
    from { opacity: 0; transform: translate(-50%, -50%) scale(.96); }
    to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

@keyframes пропасть-окно {
    from { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    to   { opacity: 0; transform: translate(-50%, -50%) scale(.97); }
}

@media (min-width: 1000px) {
    .сетка { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
}

/* Узкий телефон: список пробников и состав — в одну колонку. */
@media (max-width: 400px) {
    .состав-список { columns: 1; }
}

/* Кто просил не двигать — тому не двигаем. */
@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; }
    .всплывает { opacity: 1; }
}

/* ---- подкатегории раздела и строка «назад» ---- */

.подкатегория:hover { border-color: var(--золото); }
.подкатегория .цена { font-size: 14px; letter-spacing: .04em; }

.тропа {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 4px 0 16px;
}

.тропа-назад {
    flex: 0 0 auto;
    border: 1px solid var(--кайма);
    background: transparent;
    color: var(--золото-свет);
    border-radius: 999px;
    padding: 6px 14px;
    font: inherit;
    font-size: 14px;
    cursor: pointer;
    transition: border-color var(--плавно);
}

.тропа-назад:hover { border-color: var(--золото); }

.тропа-путь {
    min-width: 0;
    font-size: 12px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--тусклый);
}

.тропа-путь b {
    font-weight: 400;
    font-size: 17px;
    letter-spacing: 0;
    text-transform: none;
    color: var(--золото-свет);
}