/* ==========================================================================
   home-page.css
   Точечные улучшения главной страницы поверх main.css.
   Подключать ПОСЛЕ main.css. Только для index.php — селекторы #header-wrapper
   и #products используются и на game.php, но этот файл там не подключён,
   так что каталог читов внутри игры не затрагивается.
   Акцент — фиолетовый (#a029d9 / #c04dff), тот же, что уже на странице товара.
   ========================================================================== */

:root {
    --hp-purple: #a029d9;
    --hp-purple-bright: #c04dff;
}

/* ---------- 1. Hero: единый акцент вместо оранжевого ---------- */

#header-wrapper .content .left-block .subject {
    color: var(--hp-purple-bright);
}

#header-wrapper .content .left-block h3 {
    color: var(--hp-purple-bright);
}

/* иконки платформ — были вразнобой (часть белые, часть цветные из FA duotone),
   приводим к одному приглушённому тону */
#header-wrapper .content .left-block .platforms span i {
    color: rgba(255, 255, 255, .7);
}

/* лёгкое фиолетовое свечение за ценой/кнопкой — небольшой акцент глубины,
   ничего не двигает и не ломает раскладку */
#header-wrapper .content .left-block .more {
    position: relative;
}

#header-wrapper .content .left-block .more::before {
    content: '';
    position: absolute;
    left: -40px;
    top: -20px;
    width: 220px;
    height: 140px;
    background: radial-gradient(circle, rgba(160, 41, 217, .18) 0%, rgba(160, 41, 217, 0) 70%);
    z-index: -1;
    pointer-events: none;
}

/* ---------- 2. Каталог игр: контраст и читаемость ---------- */

/* счётчик "(26)" рядом с заголовком — было rgba(255,255,255,.2) */
#products .search-block .title span {
    color: rgba(255, 255, 255, .35);
}

/* иконка и разделитель поиска — было rgba(255,255,255,.2), терялось на фоне */
#products .search-block .search i {
    color: rgba(255, 255, 255, .4);
}

/* карточка игры — лёгкая обводка, чтобы отделиться от такого же тёмного фона */
#products .products .product-wrapper .product .block {
    border: 1px solid rgba(255, 255, 255, .06);
}

/* строка "1 продукт • 1 доступен" — было rgba(255,255,255,.4), приподнимаем */
#products .products .product-wrapper .product .block .info {
    color: rgba(255, 255, 255, .55);
}

/* бейдж "Популярное" — был orange, переводим в фиолет как на странице товара */
#products .products .product-wrapper .popular {
    color: var(--hp-purple-bright);
}

/* главное: кнопка "Перейти" почти не видна до наведения (текст rgba(.2)
   на почти прозрачном фоне) — на тач-устройствах она вообще не видна,
   так как нет hover. Поднимаем базовую видимость, hover оставляем как есть */
#products .products .product-wrapper .product .block .go-buy .btn {
    border-color: rgba(255, 255, 255, .16);
    color: rgba(255, 255, 255, .55);
}

#products .products .product-wrapper .product:hover .go-buy .btn {
    background: var(--hp-purple);
    border-color: var(--hp-purple);
    color: #fff;
}