/* staticrust-theme.css */
/* staticrust-theme.css — store 13 (StaticRust) */
/* Снято с ЖИВОГО эталона https://staticshop.gamestores.app (data-theme=red_black),
   а не с прежнего снимка. Их витрина — не «плоские тёмные карточки со скруглением 2px»,
   как считалось раньше; это ЗОЛОТАЯ тема: карточки с золотым градиентом и скруглением 10px,
   название товара скрыто, цена и скидка — плавающие бейджи, кнопка входа золотая.
   Замер: computed-стили их реальных элементов, значения ниже — дословно ИХ.

   Селекторы — по стабильным глобальным классам витрины (без хешей CSS-модулей,
   они меняются на каждой сборке фронта). Файл живёт в теме магазина 13, поэтому
   demo-магазины (без темы) сохраняют нейтральную раскладку фронта. */

/* ── Шапка ──
   У них .headerContainer .Header-module__wrapper прозрачна: тёмная плашка
   отрезала верх фоновой фотографии. Отступы их: сверху 20, снизу 40. */
.header {
    background: transparent !important;

    /* Рамку платформы гасим совсем: фон мы уже убрали, и от неё оставался
       контур поверх фоновой фотографии. У эталона шапка не обведена. */
    border: 0 !important;
    color: white;
    padding: 0 !important;
    margin-top: 20px !important;
    margin-bottom: 40px !important;
    min-height: 50px;
}

/* ── Блоки, которых у эталона нет ── */
.shop-hero,
.showcase {
    display: none !important;
}

/* Заголовков у блоков-виджетов там нет: виджет и есть плашка. */
.shop-widget__title {
    display: none !important;
}

/* Заголовка «Каталог» у эталона нет (boxHeader.Shop-module__header — display:none).
   Прячем только его: это прямой потомок-заголовок блока каталога, титулы виджетов
   и промо-плашек не затрагиваются. */
.shop-catalog__content > .title {
    display: none !important;
}

/* ── Промо-плашки ──
   Их правило: контейнер flex с зазором 30px, плашки — только картинка cover,
   скругление 10, отступ текста 0 40px, без цветной заливки. */
.shop-promo {
    gap: 30px !important;
}

.shop-promo__banner {
    position: relative;
    overflow: hidden;
    color: white;
    min-height: 270px;
    border-radius: 10px !important;
    padding: 0 40px !important;
    background: none !important;
    display: flex;
    align-items: center;
}

.shop-promo__image {
    position: absolute !important;
    inset: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 0;
}

.shop-promo__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.shop-promo__text {
    position: relative;
    z-index: 1;
}

/* Заголовок плашки: 30px тонким начертанием, как у них. */
.shop-promo__text p:first-child {
    font-size: 30px !important;
    font-weight: 100 !important;
    color: #fff !important;
}

/* Кнопка плашки — золотая, скругление 10. */
.shop-promo__text a,
.shop-promo__text button {
    background: rgb(189, 165, 63) !important;
    border-radius: 10px !important;
    color: rgba(255, 255, 255, .87) !important;
}

/* ── Пилюли категорий ──
   Их живые значения: border-radius 10px (НЕ 2px), padding 10/15, margin 5,
   иконка справа (flex row-reverse). Крашеная категория у них полупрозрачна в
   покое и СПЛОШНАЯ в активной/наведённой, с рамкой 1.5px в цвет. Цвет категории
   приезжает переменной --cat-color (её отдаёт фронт рядом с inline-фоном). */
.shop-catalog__categories button {
    border-radius: 10px !important;
    padding: 10px 15px !important;
    margin: 5px !important;

    /* Порядка НЕ меняем. У эталона тут row-reverse, потому что в его разметке
       значок идёт после подписи; у нас он идёт до неё, и то же правило
       перевернуло бы значок на правую сторону. Итог на экране один и тот же:
       значок слева, подпись справа. */
    gap: 5px;
}

/* Крашеная категория: в покое — цвет с прозрачностью и рамка в цвет. */
.shop-catalog__categories button.shop-category[style] {
    background: color-mix(in srgb, var(--cat-color) 45%, transparent) !important;
    border: 1.5px solid var(--cat-color) !important;
    color: rgba(255, 255, 255, .87) !important;
}

/* Активная или наведённая — сплошной цвет категории. */
.shop-catalog__categories button.shop-category--active[style],
.shop-catalog__categories button.shop-category[style]:hover,
.shop-catalog__categories button.shop-category[style]:focus {
    background: var(--cat-color) !important;
    color: #fff !important;
}

/* ── Поиск ──
   У них .Search-module__wrapper: ширина 500px, высота 48, скругление 10. */
.shop-catalog__search {
    max-width: 500px;
    height: 48px !important;
    border-radius: 10px !important;
}

/* ── Вкладки серверов ──
   Их .Servers-module__server — скругление 10. */
.shop-servers__item {
    border-radius: 10px !important;
}

/* ── Карточка товара ──
   Дословно их .Product-module__wrapper: золотой градиент, min-height 290,
   скругление 10, при наведении градиент уезжает (--x:100%) и карточка всплывает.
   Ограничено каталогом (.shop-catalog__grid), чтобы не задеть карточки корзины. */
.shop-catalog__grid .product {
    background: linear-gradient(30deg, rgb(60 69 46), #837830 51%, rgb(81 80 40)) var(--x, 0) / 200% !important;
    min-height: 290px !important;
    border-radius: 10px !important;
    transition: .5s !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

.shop-catalog__grid .product:hover {
    --x: 100%;
    transform: translateY(-10px);
    box-shadow: rgba(0, 0, 0, .3) 0 5px 20px;
}

/* Обёртка картинки должна занять ширину — иначе flex-центровка её сожмёт. */
.shop-catalog__grid .product__preview {
    width: 100%;
}

/* Название у них скрыто совсем (.Product-module__name — display:none):
   на карточке остаются картинка, цена и скидка, имя — в модалке товара. */
.shop-catalog__grid .product__preview-title {
    display: none !important;
}

/* Цена и скидка — плавающие бейджи: отступ 10 от угла, скругление 5, тень.
   Старую цену они прячут (.Product-module__oldPrice — display:none). */
.shop-catalog__grid .product__preview-price,
.shop-catalog__grid .product__preview-sale {
    margin: 10px !important;
    border-radius: 5px !important;
    box-shadow: rgba(0, 0, 0, .3) 0 0 10px !important;
}

.shop-catalog__grid .product__preview-price {
    background: rgba(20, 24, 21, .5) !important;
}

.shop-catalog__grid .product__preview-price s {
    display: none !important;
}

.shop-catalog__grid .product__preview-sale {
    background: rgb(177, 149, 37) !important;
    color: #fff !important;
}

/* ── Кнопка входа ──
   У них .PlayerMenu-module__loginLink золотая (rgb(152,129,38)), текст белый,
   скругление 10 — у нас была красная Steam-кнопка (Button primary). */
.shop-steam-login button {
    background: rgb(152, 129, 38) !important;
    border-color: transparent !important;
    color: #fff !important;
    border-radius: 10px !important;
}

.shop-steam-login button:hover,
.shop-steam-login button:focus {
    background: rgb(177, 149, 37) !important;
}