/* ============================================================
   Единый магазин — макет.

   Оформление то же, что у главной и остальных переделанных страниц:
   карточка на --card-color, рамка в 7% белого, радиус 20px, заголовок
   блока из modes-grid.css. Приставка mk-.
   ============================================================ */

/* ---------- предупреждение, что это макет ---------- */
.mk-note {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 18px;
    padding: 14px 16px;
    border: 1px solid rgba(255, 193, 71, .25);
    border-radius: 16px;
    background: rgba(255, 193, 71, .08);
    color: #e9d6a8;
    font-size: 13px;
    line-height: 1.5;
}

.mk-note .ic { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; color: #ffc147; }
.mk-note b { color: #fff; }

.mk-note--inline { margin: 14px 0 0; }

/* ---------- строка отбора ---------- */
/* ---------- шапка витрины ----------

   Картинка лежит справа во всю высоту шапки и плавно растворяется к
   левому краю — там стоит текст. */
.mk-hero {
    position: relative;
    overflow: hidden;
    margin-bottom: 20px;
    padding: 34px 28px 22px;
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 20px;
    background: var(--card-color);
}

/* Кадр целиком, ничего не подрезано: высота по шапке, ширина следом за
   ней, картинка прижата вправо.

   Размер задаём самой картинке, а не растягиваем её на всю шапку с
   contain: проценты в маске считаются от размеров элемента, и при
   растянутом элементе почти всё затухание приходилось на пустое место
   слева от кадра — на самой картинке перехода почти не было видно. */
.mk-hero__bg {
    position: absolute;
    right: 0;
    top: 0;
    width: auto;
    /* Ровно по высоте шапки: ни увеличения, ни обрезки */
    height: 100%;
    -webkit-mask-image: linear-gradient(118deg, transparent 0%, transparent 40%, rgba(0, 0, 0, .35) 62%, rgba(0, 0, 0, .8) 84%, #000 100%);
    mask-image: linear-gradient(118deg, transparent 0%, transparent 40%, rgba(0, 0, 0, .35) 62%, rgba(0, 0, 0, .8) 84%, #000 100%);
    pointer-events: none;
}

/* Отсвет под цвет акцента: связывает чужую картинку с остальным сайтом */
.mk-hero::before {
    content: '';
    position: absolute;
    right: -60px;
    top: -120px;
    z-index: 1;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(95, 101, 220, .35), transparent 68%);
    pointer-events: none;
}

/* Текст и плашки поверх картинки */
.mk-hero__text { position: relative; z-index: 2; }

.mk-hero__title {
    margin: 0 0 6px;
    font-family: 'Oswald', sans-serif;
    font-size: 34px;
    font-weight: 700;
    text-transform: uppercase;
    color: #fff;
}

.mk-hero__sub {
    max-width: 460px;
    margin: 0;
    color: #b5b5c0;
    font-size: 14px;
    line-height: 1.5;
}

.mk-perks {
    position: relative;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 22px;
}

.mk-perk {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 11px 16px;
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 14px;
    background: rgba(255, 255, 255, .03);
    backdrop-filter: blur(6px);
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: all 140ms ease;
}

.mk-perk:hover {
    border-color: rgba(255, 255, 255, .2);
    background: rgba(255, 255, 255, .06);
}

.mk-perk .ic {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    color: var(--btn-wallet-color);
}

.mk-perk span {
    display: flex;
    flex-direction: column;
    font-size: 12px;
    color: #8f8f9c;
}

.mk-perk b { font-size: 13px; font-weight: 600; color: #fff; }

@media (max-width: 700px) {
    .mk-hero { padding: 22px 18px 18px; }
    .mk-hero__bg { display: none; }
    .mk-hero__title { font-size: 26px; }
    .mk-perk { flex: 1 1 100%; }
}

/* ---------- подсказки из шапки ---------- */
.mk-help { width: 560px; max-width: 92vw; padding: 24px; }

.mk-help__steps {
    margin: 0;
    padding-left: 20px;
    color: #d5d5de;
    font-size: 14px;
    line-height: 1.6;
}

.mk-help__steps li { margin-bottom: 10px; }
.mk-help__steps li:last-child { margin-bottom: 0; }
.mk-help__steps b { color: #fff; }

.mk-help__note {
    margin-top: 18px;
    padding: 14px 16px;
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 14px;
    background: rgba(255, 255, 255, .03);
    color: #8f8f9c;
    font-size: 13px;
    line-height: 1.55;
}

.mk-help__note a { color: var(--a-href-color); }
.mk-help__note b { color: #fff; }

/* Предупреждение о невозврате — тем же жёлтым, что и остальные важные
   заметки на сайте: его должно быть видно до нажатия «купить» */
.mk-help__note--warn {
    border-color: rgba(255, 193, 71, .3);
    background: rgba(255, 193, 71, .08);
    color: #e9d6a8;
}

.mk-help__note--warn b { color: #ffc147; }

/* border: 0 обязателен — это button, и без него браузер рисует свою
   рамку поверх нашего фона */
.mk-help__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 300px;
    max-width: 100%;
    margin: 18px auto 0;
    padding: 12px 18px;
    /* Та же манера, что у кнопок кошелька в шапке: приглушённый фон и
       яркая рамка вместо сплошной заливки */
    border: 1px solid rgba(95, 101, 220, .55);
    border-radius: 12px;
    background: rgba(95, 101, 220, .16);
    color: #9ba0ff;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 140ms ease;
}

.mk-help__btn:hover {
    border-color: rgba(95, 101, 220, .8);
    background: rgba(95, 101, 220, .24);
    color: #b4b8ff;
    text-decoration: none;
}
.mk-help__btn .ic { width: 17px; height: 17px; }

/* ---------- раскладка витрины ---------- */
.mk-layout {
    display: grid;
    grid-template-columns: 232px 1fr;
    align-items: start;
    gap: 20px;
}

.mk-main { min-width: 0; }

/* ---------- виды и категории слева ----------

   Раньше это были две строки кнопок над сеткой. Списком они занимают
   место, которое всё равно пустует, и не отнимают высоту у товаров. */
.mk-side {
    position: sticky;
    top: 16px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px;
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 18px;
    background: var(--card-color);
}

.mk-side__item {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px 12px;
    border: 0;
    border-radius: 12px;
    background: none;
    color: #b5b5c0;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: all 140ms ease;
}

.mk-side__item[hidden] { display: none; }

.mk-side__item .ic {
    flex: 0 0 auto;
    width: 17px;
    height: 17px;
    color: #6a6a76;
}

.mk-side__item span {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mk-side__item b {
    flex: 0 0 auto;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .06);
    color: #8f8f9c;
    font-size: 11px;
    font-weight: 600;
}

.mk-side__item:hover { background: rgba(255, 255, 255, .04); color: #fff; }
.mk-side__item:hover .ic { color: #b5b5c0; }

.mk-side__item.active {
    background: var(--btn-wallet-color);
    color: #fff;
}

.mk-side__item.active .ic { color: #fff; }
.mk-side__item.active b { background: rgba(0, 0, 0, .25); color: #fff; }

/* Пункт, в котором при этом отборе пусто */
.mk-side__item--none:not(.active) { opacity: .4; }

.mk-side__label {
    margin: 12px 12px 6px;
    color: #6a6a76;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .3px;
    text-transform: uppercase;
}

/* Раздел магазина: заголовок и его категории. Разделов два — привилегии
   и то, что выдаётся командой в игру; категории у них разные, и
   одноимённые значат разное */
.mk-side__section {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, .06);
}

.mk-side__item--head { font-size: 13px; }

/* Категории — со сдвигом и мельче: видно, что они внутри раздела */
.mk-side__item--sub {
    margin-left: 12px;
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 500;
}

.mk-side__item--sub .ic { width: 15px; height: 15px; }

/* На узком экране список ложится лентой поперёк, с прокруткой */
@media (max-width: 900px) {
    .mk-layout { grid-template-columns: 1fr; }

    .mk-side {
        position: static;
        flex-direction: row;
        gap: 8px;
        overflow-x: auto;
        padding: 10px;
    }

    .mk-side__item { flex: 0 0 auto; }
    .mk-side__item span { max-width: 150px; }
    .mk-side__label { display: none; }
}

.mk-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 18px;
}

/* Поиск тянется, остальное по содержимому: панель теперь одна на всю
   ширину товаров, а не делит строку с кнопками видов */
.mk-tools {
    display: flex;
    flex: 1;
    gap: 10px;
}

.mk-search {
    display: flex;
    flex: 1;
    align-items: center;
    gap: 8px;
    height: 38px;
    padding: 0 14px;
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 12px;
    background: var(--card-color);
}

.mk-search .ic { width: 16px; height: 16px; color: #8f8f9c; }

.mk-search input {
    width: 100%;
    border: 0;
    background: none;
    color: #fff;
    font-family: inherit;
    font-size: 13px;
    outline: none;
}

.mk-search input::placeholder { color: #6a6a76; }


/* На узком экране поиск и список серверов встают друг под друга и тянутся
   во всю ширину. Иначе они остаются в одну строку, не помещаются и растягивают
   страницу вбок: у поля поиска ширина задана, а у кнопки есть min-width */
@media (max-width: 600px) {
    .mk-tools { flex-wrap: wrap; width: 100%; }
    .mk-search { flex: 1 1 100%; }
    .mk-search input { width: 100%; }
    .mk-sel { flex: 1 1 100%; }
    .mk-sel__btn { width: 100%; min-width: 0; max-width: none; }
    .mk-sel__drop { width: 100%; }
}

/* ---------- сетка товаров ----------

   Число колонок и пропорция кадра — свойство сетки, а не карточки. У
   привилегий картинки квадратные, у оружия и моделей вытянутые: мешать их
   в одном ряду нельзя — карточки выходят разной высоты, ряд рваный.
   Поэтому «все товары» разбиты на два раздела, у каждого своя сетка. */
.mk-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 28px;
}

/* Привилегии: пять в ряд, кадр квадратный */
.mk-grid--privilege { grid-template-columns: repeat(5, minmax(0, 1fr)); }

/* Игровые товары: четыре в ряд и кадр 16:9 — в квадрате от ствола во весь
   экран осталась бы середина */
.mk-grid--rcon { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mk-grid--rcon .mk-card__art { aspect-ratio: 16 / 9; }

/* Общий вид: сетки живут внутри разделов, контейнер их просто держит */
.mk-grid--split {
    display: block;
    margin-bottom: 0;
}

.mk-section { margin-bottom: 28px; }
.mk-section .modes__h2 { font-size: 22px; }

@media (max-width: 1240px) {
    .mk-grid,
    .mk-grid--privilege,
    .mk-grid--rcon { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
    .mk-grid,
    .mk-grid--privilege,
    .mk-grid--rcon { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Ждём ответ сервера: список притухает, но не прыгает — высота та же,
   поэтому страница под курсором никуда не уезжает */
.mk-grid--wait {
    opacity: .45;
    pointer-events: none;
    transition: opacity 120ms ease;
}

/* Хвост списка. Скрипт следит за ним и, когда он показался, просит
   следующую порцию */
.mk-more-cards {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60px;
    margin-bottom: 24px;
}

.mk-more-cards[hidden] { display: none; }
.mk-more-cards--wait .mk-sk { opacity: 1; }

.mk-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 18px;
    background: var(--card-color);
    color: inherit;
    text-decoration: none;
    transition: border-color 160ms ease, transform 160ms ease;
}

.mk-card:hover {
    border-color: rgba(95, 101, 220, .45);
    transform: translateY(-2px);
    text-decoration: none;
}

/* Квадрат — под то, что лежит в базе: рисунки товаров либо квадратные
   (1254x1254), либо вертикальные (1024x1536). В широкой плоской коробке
   от них оставалась полоска посередине, головы срезало */
.mk-card__art {
    position: relative;
    display: block;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #101016;
}

.mk-card { justify-content: flex-start; }

/* fill — картинка занимает всю коробку целиком, ничего не обрезается.
   Пропорции при этом не сохраняются: вертикальный рисунок 1024x1536 в
   квадрате сплющится по высоте */
.mk-card__art img {
    width: 100%;
    height: 100%;
    object-fit: fill;
    display: block;
}

.mk-card__new {
    position: absolute;
    right: 8px;
    top: 8px;
    padding: 3px 9px;
    border-radius: 999px;
    background: rgba(255, 193, 71, .9);
    color: #21180a;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
}

.mk-card__body {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 12px 13px 13px;
}

.mk-card__title {
    overflow: hidden;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mk-card__server {
    overflow: hidden;
    font-size: 12px;
    color: #8f8f9c;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mk-card__foot {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 2px 8px;
    margin-top: 8px;
}

/* Цена и число вариантов не переносятся: в узкой карточке «900» и «₽»
   оказывались на разных строках */
.mk-card__price {
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
}

.mk-card__price i { font-style: normal; font-size: 11px; font-weight: 500; color: #8f8f9c; }

.mk-card__tarifs { font-size: 11px; color: #8f8f9c; white-space: nowrap; }

.mk-empty {
    padding: 40px 0;
    text-align: center;
    font-size: 14px;
    color: #8f8f9c;
}

/* ---------- карточка товара ---------- */
.mk-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
}

.mk-back {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 12px;
    background: rgba(255, 255, 255, .03);
    color: #b5b5c0;
}

.mk-back .ic { width: 18px; height: 18px; }
.mk-back:hover { color: #fff; border-color: rgba(255, 255, 255, .16); }

.mk-head__sub {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: #8f8f9c;
}

.mk-head__title {
    margin: 2px 0 0;
    font-size: 22px;
    font-weight: 600;
    color: #fff;
}

.mk-product {
    display: grid;
    grid-template-columns: 380px 1fr;
    align-items: start;
    gap: 20px;
    margin-bottom: 28px;
}

.mk-product__main { min-width: 0; }

/* ---------- крошки ---------- */
.mk-crumbs {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .3px;
    text-transform: uppercase;
    color: #6a6a76;
}

.mk-crumbs a { color: #8f8f9c; }
.mk-crumbs a:hover { color: #fff; text-decoration: none; }
.mk-crumbs b { color: #fff; font-weight: 600; }
.mk-crumbs .ic { width: 13px; height: 13px; color: #4a4a55; }

/* ---------- покупка ---------- */
.mk-buybox { padding: 24px; }

.mk-buybox__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 22px;
}

.mk-kind {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 12px;
    padding: 5px 11px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.mk-kind .ic { width: 14px; height: 14px; }
.mk-kind--privilege { background: rgba(95, 101, 220, .18); color: #9ba0ff; }
.mk-kind--rcon { background: rgba(35, 197, 138, .16); color: #6fe0b0; }

/* Заголовки страницы товара — тем же шрифтом и кеглем, что блоки на
   главной (.modes__h2, .ng__title). Иначе магазин выглядит приклеенным
   к сайту сбоку, а не его частью */
.mk-buybox__title {
    margin: 0 0 8px;
    font-family: Oswald, sans-serif;
    font-size: 32px;
    font-weight: 600;
    letter-spacing: .02em;
    line-height: 1.1;
    text-transform: uppercase;
    color: #fff;
}

.mk-buybox__sub {
    color: #8f8f9c;
    font-size: 13px;
    line-height: 1.5;
}

/* Справа в шапке — сколько таких уже взяли. Раньше здесь стояло название
   сервера, но оно и так написано в крошках прямо над заголовком */
.mk-buybox__stat {
    display: flex;
    align-items: center;
    gap: 9px;
    flex: 0 0 auto;
    padding: 9px 14px;
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 12px;
    background: rgba(255, 255, 255, .03);
    color: #8f8f9c;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.mk-buybox__stat .ic { flex: 0 0 auto; width: 15px; height: 15px; color: #6a6a76; }

.mk-buybox__stat b {
    font-family: Oswald, sans-serif;
    font-size: 19px;
    font-weight: 600;
    letter-spacing: .02em;
    color: #fff;
}

/* ---------- заголовки полей ---------- */
.mk-label--big {
    margin: 0 0 12px;
    font-family: Oswald, sans-serif;
    font-size: 19px;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: #fff;
}

/* Значок внутри поля: по нему видно, что вводят, не читая подписи */
.mk-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.mk-input-wrap > .ic {
    position: absolute;
    left: 14px;
    width: 16px;
    height: 16px;
    color: #6a6a76;
    pointer-events: none;
}

.mk-input-wrap .mk-input { padding-left: 42px; }

.mk-input-wrap__chevron {
    left: auto !important;
    right: 14px;
}

.mk-input-wrap select.mk-input {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 40px;
}

/* Левая колонка: снимки и перечень преимуществ.
   Без gap намеренно: отступ между карточками уже даёт общее правило
   .mk-card2 + .mk-card2, а в flex-колонке gap и margin складываются —
   выходило бы сорок пикселей вместо двадцати */
.mk-product__side {
    display: flex;
    flex-direction: column;
}

/* Преимуществ нет — нет и колонки: пустое место рядом с покупкой выглядит
   недоделкой. Так выходит у игровых товаров, у них перечня не бывает */
.mk-product--solo { grid-template-columns: 1fr; }

@media (max-width: 900px) {
    .mk-product { grid-template-columns: 1fr; }
}

.mk-card2 {
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 20px;
    background: var(--card-color);
}

.mk-card2 + .mk-card2 { margin-top: 20px; }

.mk-card2__head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}

.mk-card2__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--accent);
    color: #fff;
}

.mk-card2__icon .ic { width: 18px; height: 18px; }

.mk-card2__title { font-size: 15px; font-weight: 600; color: #fff; }

/* ---------- тарифы ---------- */
.mk-tarifs {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
}

.mk-tarif {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 12px 14px;
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 14px;
    background: rgba(255, 255, 255, .03);
    color: #fff;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color 140ms ease, background 140ms ease;
}

.mk-tarif:hover { border-color: rgba(255, 255, 255, .18); }

/* Выбранный тариф: рамка в полную силу акцента, заливка с лёгким
   переходом сверху вниз и мягкое свечение — плитка должна читаться как
   выбранная с одного взгляда, даже когда их в ряду пять */
.mk-tarif.active {
    border-color: var(--btn-wallet-color);
    background: linear-gradient(180deg, rgba(95, 101, 220, .22), rgba(95, 101, 220, .1));
    box-shadow: 0 6px 18px rgba(95, 101, 220, .18);
}

.mk-tarif__title { font-size: 13px; font-weight: 600; }

/* Цены и прочие числа — тоже Oswald: на главной им набраны все крупные
   цифры, и в одной строке с заголовком они смотрятся заодно */
.mk-tarif__price {
    font-family: Oswald, sans-serif;
    font-size: 19px;
    font-weight: 600;
    letter-spacing: .02em;
}
/* Цена дня — 11px серым читалась с трудом: мельче всего на странице и
   светлее фона всего вшестеро. Кегль и цвет подняты до того же, чем
   набраны подписи в остальной форме */
.mk-tarif__note {
    font-size: 12px;
    line-height: 1.35;
    color: #a0a0ad;
}

/* Галочка сидит плашкой в самом углу и повторяет скругление плитки:
   голубой значок поверх голубой же заливки терялся */
.mk-tarif__check {
    position: absolute;
    right: 0;
    top: 0;
    box-sizing: border-box;
    width: 24px;
    height: 24px;
    padding: 6px;
    border-radius: 0 13px 0 12px;
    background: var(--btn-wallet-color);
    color: #fff;
    opacity: 0;
    transition: opacity 140ms ease;
}

.mk-tarif.active .mk-tarif__check { opacity: 1; }

.mk-buy {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    margin-top: 18px;
    padding: 16px 18px;
    border: 0;
    border-radius: 14px;
    background: var(--btn-wallet-color);
    color: #fff;
    font-family: Oswald, sans-serif;
    font-size: 17px;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
    cursor: pointer;
}

/* Пока не заполнены согласия — кнопка выключена */
.mk-buy[disabled] {
    background: rgba(95, 101, 220, .25);
    color: rgba(255, 255, 255, .6);
    cursor: not-allowed;
}

.mk-buy--wait { opacity: .7; }

.mk-buy .ic { width: 18px; height: 18px; }
.mk-buy__go { margin-left: 2px; opacity: .7; }

/* ---------- поля покупки ----------

   Что заполнять, зависит от вида товара: привилегию привязывают к игроку
   (ник с паролем или steam), игровую вещь выдают командой, и ей нужны
   подстановки из этой команды. Разметку готовит elements/card.tpl. */
.mk-field { margin-top: 14px; }

.mk-field[hidden] { display: none; }

.mk-label {
    display: block;
    margin-bottom: 6px;
    color: #8f8f9c;
    font-size: 12px;
    font-weight: 600;
}

.mk-input {
    width: 100%;
    height: 42px;
    padding: 0 14px;
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 12px;
    background: rgba(255, 255, 255, .03);
    color: #fff;
    font-family: inherit;
    font-size: 14px;
    outline: none;
    transition: border-color 140ms ease;
}

.mk-input:focus { border-color: rgba(255, 255, 255, .22); }
/* Подсказка в поле была светлее фона всего втрое с половиной — из всего
   текста на странице единственное место ниже порога. Подняли ровно
   настолько, чтобы читалась, но не спорила с тем, что человек вписал:
   набранное белым светлее фона в восемнадцать раз */
.mk-input::placeholder { color: #82828f; }

select.mk-input { cursor: pointer; }
select.mk-input option { background: #15151c; }

.mk-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 14px;
    color: #b5b5c0;
    font-size: 13px;
    line-height: 1.5;
    cursor: pointer;
}

/* Свой квадратик вместо браузерного: у того угол острый и радиус свой в
   каждом браузере, а на странице всё скруглено — поля на 12, плитки на 14.
   Рисуем сами, зато один и тот же везде */
.mk-check input {
    display: grid;
    place-content: center;
    appearance: none;
    -webkit-appearance: none;
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin: 1px 0 0;
    /* Рамка заметнее, чем у полей ввода: поле само по себе видно по
       высоте и подписи, а пустой квадратик в 18px — только по ней.
       На .18 он отличался от фона меньше чем вдвое и терялся */
    border: 1px solid rgba(255, 255, 255, .38);
    border-radius: 6px;
    background: rgba(255, 255, 255, .04);
    cursor: pointer;
    transition: background 140ms ease, border-color 140ms ease;
}

.mk-check:hover input { border-color: rgba(255, 255, 255, .55); }

.mk-check input:checked {
    border-color: var(--btn-wallet-color);
    background: var(--btn-wallet-color);
}

/* Галочка — два угла рамки, повёрнутые на 45°. Отступ снизу поправляет
   поворот: без него она садится ниже середины */
.mk-check input::after {
    content: '';
    width: 4px;
    height: 8px;
    margin-bottom: 2px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    opacity: 0;
    transition: opacity 120ms ease;
}

.mk-check input:checked::after { opacity: 1; }

.mk-check input:focus-visible {
    outline: 2px solid var(--a-href-color);
    outline-offset: 2px;
}

.mk-check a { color: var(--a-href-color); }

/* Ответ магазина: тем же местом и для удачи, и для отказа — человек
   смотрит туда, куда только что нажал */
.mk-result {
    margin-top: 14px;
    padding: 12px 14px;
    border: 1px solid transparent;
    border-radius: 12px;
    font-size: 13px;
    line-height: 1.5;
}

.mk-result--ok {
    border-color: rgba(70, 190, 120, .35);
    background: rgba(70, 190, 120, .1);
    color: #8fe0ae;
}

.mk-result--err {
    border-color: rgba(230, 90, 90, .35);
    background: rgba(230, 90, 90, .1);
    color: #ffa3a3;
}

.mk-result a { color: inherit; text-decoration: underline; }

.mk-note--warn { color: #ffc147; }

/* ---------- что даёт привилегия ---------- */

/* Заголовок блока в левой колонке — мельче и тише, чем в основной:
   она и так узкая, крупная шапка съедала бы её целиком */
.mk-side-title {
    margin-bottom: 14px;
    font-family: Oswald, sans-serif;
    font-size: 19px;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: #fff;
}

/* Значок в плашке: строки перечня выравниваются по одной линии, даже
   когда значки разной ширины */
.mk-adv__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .05);
}

.mk-adv__icon .bx { margin: 0; font-size: 17px; }

.mk-adv[hidden] { display: none; }

.mk-adv {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    border-top: 1px solid rgba(255, 255, 255, .05);
    font-size: 13px;
    line-height: 1.4;
    color: #d5d5de;
}

.mk-adv:first-of-type { border-top: 0; }

.mk-adv__text { flex: 1; min-width: 0; }

/* Кнопки правки не отнимают ширину у текста — всплывают поверх строки
   справа. В узкой колонке иначе текст сжимался бы до пары слов */
.mk-adv__btns {
    position: absolute;
    right: 0;
    top: 3px;
    display: flex;
    flex-shrink: 0;
    gap: 6px;
    padding-left: 10px;
    background: var(--card-color);
    opacity: 0;
    transition: opacity 140ms ease;
}

/* Кнопки правки не мозолят глаза: показываются, когда ведёшь по строке.
   Тому, у кого прав нет, их и в разметке не будет */
.mk-adv:hover .mk-adv__btns,
.mk-adv:focus-within .mk-adv__btns { opacity: 1; }

.mk-adv__btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 28px;
    padding: 0 10px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 8px;
    background: rgba(255, 255, 255, .03);
    color: #b5b5c0;
    font-family: inherit;
    font-size: 12px;
    cursor: pointer;
}

.mk-adv__btn:hover { color: #fff; border-color: rgba(255, 255, 255, .2); }
.mk-adv__btn .ic { width: 14px; height: 14px; }
.mk-adv__btn--del:hover { color: #ffa3a3; border-color: rgba(230, 90, 90, .4); }

.mk-adv-edit {
    width: 100%;
    margin-top: 4px;
}

.mk-adv-edit__row {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
}

.mk-adv-edit__icon { flex: 1; }

.mk-adv-edit__color {
    width: 46px;
    height: 42px;
    padding: 3px;
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 12px;
    background: rgba(255, 255, 255, .03);
    cursor: pointer;
}

.mk-adv-edit__btns {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

.mk-adv--new { border-top: 1px dashed rgba(255, 255, 255, .12); }

.mk-adv-add {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 14px;
    padding: 9px 14px;
    border: 1px dashed rgba(95, 101, 220, .5);
    border-radius: 12px;
    background: rgba(95, 101, 220, .08);
    color: #9ba0ff;
    font-family: inherit;
    font-size: 13px;
    cursor: pointer;
}

.mk-adv-add:hover { background: rgba(95, 101, 220, .16); }
.mk-adv-add .ic { width: 15px; height: 15px; }

.mk-advs__empty { padding: 4px 0 0; }

/* ---------- снимки привилегии ----------

   Берутся из services__new_images — те же, что у старого /store. Большая
   сверху, лента миниатюр под ней. Высоту большой держим постоянной: файлы
   заливают какие попало, и без неё блок прыгал бы при каждом переключении. */
.mk-gallery { padding: 12px; }

.mk-gallery__view { position: relative; }

.mk-gallery__main {
    position: relative;
    display: block;
    width: 100%;
    height: 200px;
    padding: 0;
    border: 0;
    border-radius: 14px;
    background: rgba(255, 255, 255, .03);
    cursor: zoom-in;
    overflow: hidden;
}

/* Стрелки поверх картинки. Всегда видны, а не только при наведении:
   на телефоне наводить нечем, а понять, что снимков несколько, надо */
.mk-gallery__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, .5);
    color: #fff;
    cursor: pointer;
    transition: background 140ms ease;
}

.mk-gallery__nav:hover { background: rgba(0, 0, 0, .75); }
.mk-gallery__nav .ic { width: 16px; height: 16px; }
.mk-gallery__nav--prev { left: 8px; }
.mk-gallery__nav--next { right: 8px; }

.mk-gallery__count {
    position: absolute;
    left: 8px;
    top: 8px;
    padding: 3px 8px;
    border-radius: 8px;
    background: rgba(0, 0, 0, .55);
    color: #d5d5de;
    font-size: 11px;
    line-height: 1.4;
}

/* Точки по низу картинки: сколько снимков и который сейчас.
   Лежат на подложке — на светлом кадре белые точки иначе теряются */
.mk-gallery__dots {
    position: absolute;
    left: 50%;
    bottom: 8px;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 6px;
    max-width: calc(100% - 80px);
    padding: 5px 8px;
    border-radius: 10px;
    background: rgba(0, 0, 0, .45);
    overflow-x: auto;
    scrollbar-width: none;
}

.mk-gallery__dots::-webkit-scrollbar { display: none; }

.mk-gallery__dot {
    flex: 0 0 auto;
    width: 6px;
    height: 6px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .35);
    cursor: pointer;
    transition: background 140ms ease, width 140ms ease;
}

.mk-gallery__dot:hover { background: rgba(255, 255, 255, .6); }

/* Текущая — вытянутая: на шести пикселях разница в цвете почти не читается */
.mk-gallery__dot.active {
    width: 16px;
    border-radius: 4px;
    background: var(--accent);
}

.mk-gallery__main img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.mk-gallery__zoom {
    position: absolute;
    right: 8px;
    bottom: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: rgba(0, 0, 0, .55);
    color: #fff;
    opacity: 0;
    transition: opacity 140ms ease;
}

.mk-gallery__main:hover .mk-gallery__zoom { opacity: 1; }

/* Удалить показанный снимок. Только у тех, кто правит магазин, поэтому
   висит поверх картинки и проявляется при наведении — покупателю эта
   кнопка не нужна и мешать не должна */
.mk-gallery__del {
    position: absolute;
    right: 8px;
    top: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 9px;
    background: rgba(0, 0, 0, .6);
    color: #ff8080;
    cursor: pointer;
    opacity: 0;
    transition: opacity 140ms ease;
}

.mk-gallery__del .ic { width: 15px; height: 15px; }
.mk-gallery__view:hover .mk-gallery__del { opacity: 1; }

.mk-gallery__add { margin-top: 10px; }
.mk-gallery__empty { padding: 4px 0; }

/* ---------- описание товара ----------

   Текст пишут в админке редактором, поэтому внутри может оказаться что
   угодно: свои размеры, цвета, картинки, таблицы. Правим только то, что
   иначе поехало бы — ширину картинок и отступы по краям. Цвета и размеры
   не трогаем: их выставили руками и намеренно */
.mk-descr { margin-top: 20px; }

.mk-descr__text {
    font-size: 14px;
    line-height: 1.6;
    color: #d5d5de;
    overflow-wrap: break-word;
}

.mk-descr__text > *:first-child { margin-top: 0; }
.mk-descr__text > *:last-child { margin-bottom: 0; }

.mk-descr__text p { margin: 0 0 10px; }

.mk-descr__text img,
.mk-descr__text video,
.mk-descr__text iframe {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
}

.mk-descr__text a { color: var(--accent); }

/* Таблица в описании встречается редко, но если есть — пусть уезжает
   вбок сама, а не растягивает карточку */
.mk-descr__text table { display: block; max-width: 100%; overflow-x: auto; }

.mk-descr__text ul,
.mk-descr__text ol { margin: 0 0 10px; padding-left: 20px; }

/* ---------- длинные списки ----------

   У иной привилегии 25 преимуществ. Прячем не за кнопкой, а за прокруткой:
   сразу видно, что список длинный, и не нужно нажимать ради каждой строки.
   Кому нужен весь — открывает окно, в узкой колонке столько не читается. */
.mk-advs__list--scroll {
    max-height: 340px;
    padding-right: 6px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, .15) transparent;
}

.mk-advs__list--scroll::-webkit-scrollbar { width: 6px; }
.mk-advs__list--scroll::-webkit-scrollbar-thumb {
    border-radius: 6px;
    background: rgba(255, 255, 255, .15);
}

.mk-advs__all {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin-top: 12px;
    padding: 9px 14px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 12px;
    background: rgba(255, 255, 255, .03);
    color: #b5b5c0;
    font-family: inherit;
    font-size: 13px;
    cursor: pointer;
}

.mk-advs__all:hover { color: #fff; border-color: rgba(255, 255, 255, .2); }
.mk-advs__all .ic { width: 16px; height: 16px; }

/* ---------- окно ----------

   Одно на два дела: полный список преимуществ и снимок во весь экран.
   Наполняет market.js. */
.mk-modal {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.mk-modal[hidden] { display: none; }

.mk-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .72);
    backdrop-filter: blur(2px);
}

.mk-modal__box {
    position: relative;
    display: flex;
    flex-direction: column;
    width: min(720px, 100%);
    max-height: min(80vh, 700px);
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 20px;
    background: var(--card-color);
    overflow: hidden;
}

/* Снимок во весь экран рамкой и фоном не обрамляем — только картинка */
.mk-modal--image .mk-modal__box {
    width: auto;
    max-width: min(1100px, 100%);
    border: 0;
    background: none;
}

.mk-modal__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
}

.mk-modal--image .mk-modal__head { border: 0; padding: 0 0 10px; }

.mk-modal__title { font-size: 15px; font-weight: 600; color: #fff; }

.mk-modal__close {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 10px;
    background: rgba(255, 255, 255, .03);
    color: #b5b5c0;
    cursor: pointer;
}

.mk-modal__close:hover { color: #fff; border-color: rgba(255, 255, 255, .2); }
.mk-modal__close .ic { width: 16px; height: 16px; }

.mk-modal__body {
    padding: 6px 20px 20px;
    overflow-y: auto;
    scrollbar-width: thin;
}

.mk-modal--image .mk-modal__body { padding: 0; overflow: visible; }

.mk-modal--image .mk-modal__body img {
    display: block;
    max-width: 100%;
    max-height: 76vh;
    border-radius: 14px;
}

/* В окне список читается в две колонки — места хватает, в отличие от
   боковой колонки на странице */
@media (min-width: 640px) {
    .mk-modal__body .mk-adv-list-2 {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0 24px;
    }
}

/* Кнопки правки в окне не нужны: правят на странице, там же и результат */
.mk-modal__body .mk-adv__btns { display: none; }

.mk-more {
    display: block;
    width: 100%;
    margin-top: 12px;
    padding: 9px 14px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 12px;
    background: rgba(255, 255, 255, .03);
    color: #b5b5c0;
    font-family: inherit;
    font-size: 13px;
    cursor: pointer;
}

.mk-more:hover { color: #fff; border-color: rgba(255, 255, 255, .2); }

/* ---------- свои серверы ----------
   Отдельная строка кнопок над витриной: выбрать свой сервер в один щелчок
   важнее любого другого отбора — покупают почти всегда туда, где играют */
.mk-favs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
    padding: 12px 14px;
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 16px;
    background: var(--card-color);
}

.mk-favs__label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-right: 4px;
    color: #8f8f9c;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .3px;
    text-transform: uppercase;
}

.mk-favs__label .ic { width: 15px; height: 15px; color: #ffc147; }

.mk-fav {
    max-width: 260px;
    overflow: hidden;
    padding: 7px 13px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 999px;
    background: rgba(255, 255, 255, .03);
    color: #d5d5de;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
    transition: all 140ms ease;
}

.mk-fav span {
    margin-left: 5px;
    padding: 1px 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .08);
    font-size: 11px;
}

.mk-fav:hover { color: #fff; border-color: rgba(255, 255, 255, .18); }

.mk-fav.active {
    background: var(--accent);
    border-color: transparent;
    color: #fff;
}

.mk-fav.active span { background: rgba(0, 0, 0, .2); }

.mk-favs__edit {
    margin-left: auto;
    color: var(--a-href-color);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.mk-favs--empty {
    color: #8f8f9c;
    font-size: 13px;
}

/* Звёздочка у сервера в карточке: видно, что это твой, даже когда список
   показан целиком */
.mk-card__star {
    width: 12px;
    height: 12px;
    flex: 0 0 auto;
    color: #ffc147;
    vertical-align: -1px;
}

/* Выбран один сервер — его название в каждой карточке лишнее */
.mk-grid--one-server .mk-card__server { display: none; }

/* ---------- свои серверы ----------
   Отдельная строка кнопок над витриной: выбрать свой сервер в один щелчок
   важнее любого другого отбора — покупают почти всегда туда, где играют */
.mk-favs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
    padding: 12px 14px;
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 16px;
    background: var(--card-color);
}

.mk-favs__label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-right: 4px;
    color: #8f8f9c;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .3px;
    text-transform: uppercase;
}

.mk-favs__label .ic { width: 15px; height: 15px; color: #ffc147; }

.mk-fav {
    max-width: 260px;
    overflow: hidden;
    padding: 7px 13px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 999px;
    background: rgba(255, 255, 255, .03);
    color: #d5d5de;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
    transition: all 140ms ease;
}

.mk-fav span {
    margin-left: 5px;
    padding: 1px 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .08);
    font-size: 11px;
}

.mk-fav:hover { color: #fff; border-color: rgba(255, 255, 255, .18); }

.mk-fav.active {
    background: var(--accent);
    border-color: transparent;
    color: #fff;
}

.mk-fav.active span { background: rgba(0, 0, 0, .2); }

.mk-favs__edit {
    margin-left: auto;
    color: var(--a-href-color);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.mk-favs--empty {
    color: #8f8f9c;
    font-size: 13px;
}

/* Звёздочка у сервера в карточке: видно, что это твой, даже когда список
   показан целиком */
.mk-card__star {
    width: 12px;
    height: 12px;
    flex: 0 0 auto;
    color: #ffc147;
    vertical-align: -1px;
}

/* Выбран один сервер — его название в каждой карточке лишнее */
.mk-grid--one-server .mk-card__server { display: none; }

/* «Все серверы» стоит последней и выглядит тише остальных: это выход из
   отбора, а не ещё один сервер */
.mk-fav--all { color: #8f8f9c; }

/* ============================================================
   Скелетоны.

   Показываются, пока карточка товара едет с сервера. Блоки повторяют
   размеры настоящих, поэтому страница не прыгает, когда данные приехали.
   ============================================================ */
@keyframes mk-shine {
    0%   { background-position: -240px 0; }
    100% { background-position: 240px 0; }
}

.mk-sk {
    border-radius: 10px;
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, .04) 0%,
        rgba(255, 255, 255, .09) 40%,
        rgba(255, 255, 255, .04) 80%
    );
    background-size: 480px 100%;
    animation: mk-shine 1.1s linear infinite;
}

/* Уважаем настройку системы «поменьше движения» */
@media (prefers-reduced-motion: reduce) {
    .mk-sk { animation: none; }
}

.mk-sk--line { height: 12px; }
.mk-sk--back { border: 0; }
.mk-sk--icon { width: 34px; height: 34px; border-radius: 10px; flex: 0 0 auto; }
.mk-sk--tarif { height: 74px; border-radius: 14px; }