/* Витрина сайта: то, чего нет у витрины бота.
 *
 * Основа — style.css бота как есть (чёрное зеркало, золото, антиква). Здесь —
 * корзина, оформление заказа, бесплатное демо по e-mail и страница заказа.
 * Оплата в Телеграме шла родной кнопкой; на сайте её место занимает корзина. */

:root {
    --фон-поля: #09080c;
    --жёлтый:   #e0b64a;
}

/* ---------------------------------------------------------------- корзина: кнопка */

.корзина-кнопка {
    position: fixed;
    left: 50%;
    bottom: calc(16px + env(safe-area-inset-bottom));
    transform: translateX(-50%);
    z-index: 35;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    max-width: calc(100% - 120px);
    padding: 12px 22px;
    font-family: var(--антиква);
    font-size: 15px;
    color: #120e06;
    background: linear-gradient(180deg, var(--золото-свет), var(--золото));
    border: 1px solid var(--золото-свет);
    border-radius: 999px;
    box-shadow: 0 6px 22px rgba(201, 162, 39, .32), var(--тень-мягкая);
    cursor: pointer;
    white-space: nowrap;
    animation: всплыть-кнопка .26s cubic-bezier(.2, .8, .3, 1);
    transition: filter var(--быстро), transform var(--быстро);
}

.корзина-кнопка:hover { filter: brightness(1.06); }
.корзина-кнопка:active { transform: translateX(-50%) scale(.97); }

.корзина-знак { font-size: 17px; line-height: 1; }

.корзина-счёт {
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 999px;
    background: #120e06;
    color: var(--золото-свет);
    font-size: 12.5px;
    line-height: 22px;
    text-align: center;
}

.корзина-кнопка.стук { animation: стук .4s ease; }

body.есть-корзина .тосты { bottom: calc(80px + env(safe-area-inset-bottom)); }
body.есть-корзина .витрина { padding-bottom: 70px; }

@keyframes всплыть-кнопка {
    from { opacity: 0; transform: translate(-50%, 16px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
}

@keyframes стук {
    0%, 100% { transform: translateX(-50%) scale(1); }
    40%      { transform: translateX(-50%) scale(1.08); }
}

/* Бейдж «в корзине» на плитке. */
.бейдж-корзина {
    background: rgba(201, 162, 39, .18);
    border-color: var(--золото);
    color: var(--золото-свет);
}

/* ---------------------------------------------------------------- корзина: лист */

.корзина-нутро h2 { margin-bottom: 4px; }

.корзина-пусто {
    margin: 26px 0 10px;
    text-align: center;
    color: var(--тусклый);
    font-style: italic;
}

.корзина-строки { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; }

.корзина-строка {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 12px;
    padding: 8px 10px;
    border: 1px solid var(--кайма);
    border-radius: 8px;
    background: var(--фон-выше);
    animation: всплыть .22s ease both;
}

.корзина-строка .обложка {
    width: 54px;
    aspect-ratio: 620 / 542;
    border-radius: 4px;
}

.корзина-строка .обложка-пусто {
    width: 54px;
    height: 47px;
    border-radius: 4px;
    border: 1px dashed var(--кайма);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--золото-тень);
}

.корзина-имя { font-size: 14.5px; color: var(--текст); line-height: 1.3; }
.корзина-выбор { margin-top: 2px; font-size: 11.5px; color: var(--тусклый); }
.корзина-цена { font-size: 15px; color: var(--золото-свет); white-space: nowrap; }

.корзина-убрать {
    width: 30px; height: 30px;
    border: 1px solid transparent;
    border-radius: 50%;
    background: transparent;
    color: var(--тусклый);
    font-size: 13px;
    cursor: pointer;
    transition: color var(--быстро), border-color var(--быстро);
}

.корзина-убрать:hover { color: var(--беда); border-color: rgba(184, 72, 60, .5); }

.корзина-итог {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin: 16px 0 4px;
    padding-top: 14px;
    border-top: 1px solid var(--кайма);
    font-size: 15px;
    color: var(--тусклый);
}

.корзина-итог b { font-weight: normal; font-size: 27px; color: var(--золото-свет); }

.корзина-форма { margin-top: 20px; }

.корзина-форма h3 {
    margin: 0 0 12px;
    font-size: 11px;
    font-weight: normal;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--золото);
}

.оплата-как {
    margin: 8px 0 0;
    padding: 12px 14px;
    border: 1px dashed var(--кайма);
    border-radius: 8px;
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--тусклый);
}

.оплата-как b { font-weight: normal; color: var(--золото-свет); }

/* ---------------------------------------------------------------- поля */

.поле-обёртка { display: block; margin: 0 0 14px; }

.поле-имя {
    display: block;
    margin-bottom: 6px;
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--золото);
}

.поле-имя i { font-style: normal; text-transform: none; letter-spacing: 0; color: var(--тусклый); }

.поле {
    width: 100%;
    font-family: var(--антиква);
    font-size: 15.5px;
    color: var(--текст);
    background: var(--фон-поля);
    border: 1px solid var(--кайма);
    border-radius: 8px;
    padding: 11px 13px;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    transition: border-color var(--быстро), box-shadow var(--быстро);
}

.поле:focus { border-color: var(--золото); box-shadow: 0 0 0 3px var(--золото-дым); }
.поле::placeholder { color: #5e574c; }
.поле.моно { font-family: Consolas, "Roboto Mono", Menlo, monospace; letter-spacing: .05em; }
.поле.худо { border-color: var(--беда); }
textarea.поле { resize: vertical; min-height: 70px; line-height: 1.5; }

.поле-подсказка { display: block; margin-top: 6px; font-size: 12px; line-height: 1.5; color: var(--тусклый); }
.поле-подсказка a, .пояснение a, .оплата-как a, .заказ-связь a { color: var(--золото); text-underline-offset: 3px; }
.поле-подсказка.ладно { color: var(--лад); }
.поле-подсказка.худо { color: var(--жёлтый); }

/* Поле-ловушка для ботов: человек его не видит и не заполняет. */
.ловушка { position: absolute !important; left: -5000px !important; width: 1px; height: 1px; overflow: hidden; }

.кнопка-золото {
    background: linear-gradient(180deg, var(--золото-свет), var(--золото));
    color: #120e06;
    border-color: var(--золото-свет);
}

.кнопка-золото:hover { filter: brightness(1.06); }
.кнопка-золото:disabled { opacity: .5; cursor: default; }

/* ---------------------------------------------------------------- демо-лист */

.демо-нутро .к-описание { margin-bottom: 18px; }

/* ---------------------------------------------------------------- шапка: ссылка-вензель */

.вензель-ссылка { display: inline-block; text-decoration: none; }

.шапка-ссылки {
    margin-top: 12px;
    font-size: 12.5px;
    color: var(--тусклый);
}

.шапка-ссылки a { color: var(--золото); text-decoration: none; border-bottom: 1px dotted var(--золото-тень); }
.шапка-ссылки a:hover { color: var(--золото-свет); }
.шапка-ссылки .точка { margin: 0 8px; opacity: .6; }

/* ---------------------------------------------------------------- страница заказа */

.заказ-страница { max-width: 720px; }

.ход {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin: 4px 0 0;
    padding: 0;
    list-style: none;
    counter-reset: ход;
}

.ход-шаг {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
    color: var(--тусклый);
    font-size: 12.5px;
}

/* линия между точками */
.ход-шаг + .ход-шаг::before {
    content: '';
    position: absolute;
    top: 16px;
    right: 50%;
    width: 100%;
    height: 1px;
    background: var(--кайма);
    z-index: 0;
}

.ход-шаг.пройден + .ход-шаг::before,
.ход-шаг.пройден + .ход-шаг.сейчас::before { background: var(--золото); }

.ход-точка {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 33px; height: 33px;
    border: 1px solid var(--кайма);
    border-radius: 50%;
    background: var(--фон);
    font-size: 14px;
}

.ход-шаг.пройден .ход-точка { border-color: var(--золото); background: var(--золото); color: #120e06; }
.ход-шаг.сейчас .ход-точка {
    border-color: var(--золото);
    color: var(--золото-свет);
    box-shadow: 0 0 0 4px var(--золото-дым), 0 0 18px rgba(201, 162, 39, .35);
}
.ход-шаг.сейчас .ход-имя, .ход-шаг.пройден .ход-имя { color: var(--золото-свет); }

.ход-пояснение {
    margin: 18px 0 0;
    padding: 12px 14px;
    border: 1px solid var(--кайма);
    border-radius: var(--радиус);
    background: var(--фон-выше);
    text-align: center;
    font-size: 14.5px;
    line-height: 1.55;
}

.заказ-отменён {
    padding: 14px;
    border: 1px solid rgba(184, 72, 60, .55);
    border-radius: var(--радиус);
    background: rgba(184, 72, 60, .08);
    color: #f0cfca;
    text-align: center;
}

.заказ-отменён a { color: var(--золото-свет); }

.чек {
    margin-top: 12px;
    border: 1px solid var(--кайма);
    border-radius: var(--радиус);
    background: linear-gradient(180deg, #100c14, #0b090d);
    padding: 4px 16px;
}

.чек-строка {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 14px;
    padding: 11px 0;
    border-bottom: 1px solid rgba(201, 162, 39, .12);
}

.чек-строка:last-child { border-bottom: none; }
.чек-имя { font-size: 15px; }
.чек-выбор { margin-top: 2px; font-size: 12px; color: var(--тусклый); }
.чек-цена { color: var(--золото); white-space: nowrap; }
.чек-итог .чек-имя { color: var(--тусклый); font-size: 13px; letter-spacing: .12em; text-transform: uppercase; }
.чек-итог .чек-цена { font-size: 24px; color: var(--золото-свет); }

.ключ-строка { display: flex; align-items: stretch; margin: 6px 0 4px; }

.ключ {
    flex: 1 1 auto;
    min-width: 0;
    padding: 11px 13px;
    font-family: Consolas, "Roboto Mono", Menlo, monospace;
    font-size: 15px;
    line-height: 1.45;
    color: var(--золото-свет);
    background: var(--фон-поля);
    border: 1px solid var(--золото-тень);
    border-radius: 8px 0 0 8px;
    word-break: break-all;
    user-select: all;
}

.ключ:only-child { border-radius: 8px; }

.скопировать {
    flex: 0 0 auto;
    padding: 0 14px;
    border: 1px solid var(--золото-тень);
    border-left: none;
    border-radius: 0 8px 8px 0;
    background: var(--фон-выше);
    color: var(--золото);
    font-family: var(--антиква);
    font-size: 13px;
    cursor: pointer;
    transition: background var(--быстро), color var(--быстро);
}

.скопировать:hover { background: var(--золото); color: #120e06; }

.выдача-блок { margin: 14px 0 18px; }

.выдача-подпись {
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--тусклый);
}

.выдача-ссылки { display: flex; flex-direction: column; gap: 10px; margin: 8px 0 14px; }

.ссылка-кнопка {
    display: block;
    margin: 0;
    text-align: center;
    text-decoration: none;
}

.форма-машины { display: flex; gap: 8px; margin-top: 10px; }
.форма-машины .поле { flex: 1 1 auto; min-width: 0; }
.форма-машины .кнопка { flex: 0 0 auto; padding: 11px 20px; }

.форма-ответ { margin: 10px 0 0; font-size: 13.5px; }
.форма-ответ.ладно { color: var(--лад); }
.форма-ответ.худо { color: var(--жёлтый); }

.заказ-связь { text-align: center; margin-top: 8px; }

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

@media (min-width: 720px) {
    .корзина-кнопка { left: auto; right: 74px; transform: none; max-width: none; }
    .корзина-кнопка:active { transform: scale(.97); }
    .корзина-кнопка.стук { animation: стук-стол .4s ease; }
    body.есть-корзина .тосты { bottom: 18px; }
    body.есть-корзина .витрина { padding-bottom: 20px; }
    .ход-шаг { font-size: 13.5px; }

    @keyframes всплыть-кнопка {
        from { opacity: 0; transform: translateY(16px); }
        to   { opacity: 1; transform: none; }
    }
}

@keyframes стук-стол {
    0%, 100% { transform: scale(1); }
    40%      { transform: scale(1.08); }
}

@media (max-width: 400px) {
    .корзина-строка { grid-template-columns: minmax(0, 1fr) auto auto; }
    .корзина-строка .обложка, .корзина-строка .обложка-пусто { display: none; }
    .ход-шаг { font-size: 11px; }
}

/* Ссылки «Как купить · Каталог · …» переехали из шапки в подвал (21.10.2026) */
.подвал .шапка-ссылки { margin: 16px 0 8px; }

/* Кнопки разделов и поиск — в одну строку (21.10.2026); на узком экране поиск переносится под кнопки */
.полоса-верх {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px 18px;
    max-width: 1000px;
    margin: 0 auto;
    padding: 20px 16px 4px;
}
.полоса-верх .витрина-разделы { padding: 0; flex: 0 0 auto; }
.полоса-верх .поиск-обёртка { padding: 0; margin: 0; flex: 1 1 320px; max-width: 560px; }

/* Порядок товаров: выпадающий список рядом с поиском (22.10.2026) */
.сортировка {
    font-family: var(--антиква);
    font-size: 14px;
    color: var(--текст);
    background: var(--фон-выше) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23c9a227' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 14px center;
    border: 1px solid var(--кайма);
    border-radius: 999px;
    padding: 10px 36px 10px 16px;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    transition: border-color var(--плавно);
}
.сортировка:hover, .сортировка:focus { outline: none; border-color: var(--кайма-ярче); }
.сортировка option { background: var(--фон-выше); color: var(--текст); }
.полоса-верх .сортировка-обёртка { flex: 0 0 auto; }